feat(components): [VisuallyHidden] implements

teleskop150750 · teleskop150750 · commit d9853de74cfb · 2024-08-23T16:17:21.000+03:00
diff --git a/README.md b/README.md
@@ -70,9 +70,9 @@ Enter the component you want most in the components, leave the emojis and follow
 | [FocusScope](https://vue-primitives.netlify.app/?path=/story/utilities-focusscope--basic)             | ✓      |
 | Menu                                                                                                  | 🚧      |
 | [Popper](https://vue-primitives.netlify.app/?path=/story/utilities-popper--styled)                    | ✓      |
-| Portal                                                                                                | 🚧      |
+| Portal                                                                                                | ✓      |
 | [Presence](https://vue-primitives.netlify.app/?path=/story/utilities-presence--basic)                 | ✓      |
 | Primitives                                                                                            | ✓      |
 | [RovingFocusGroup](https://vue-primitives.netlify.app/?path=/story/utilities-rovingfocusgroup--basic) | ✓      |
 | Slot                                                                                                  | ✓      |
-| VisuallyHidden                                                                                        | 🚧      |
+| [VisuallyHidden](https://vue-primitives.netlify.app/?path=/story/utilities-visuallyhidden--basic)     | ✓      |
diff --git a/packages/vue-primitives/src/visually-hidden/VisuallyHidden.vue b/packages/vue-primitives/src/visually-hidden/VisuallyHidden.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Primitive } from '../primitive/index.ts'
+
+defineOptions({
+  name: 'VisuallyHidden',
+})
+</script>
+
+<template>
+  <Primitive style="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;">
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/vue-primitives/src/visually-hidden/index.ts b/packages/vue-primitives/src/visually-hidden/index.ts
@@ -0,0 +1 @@
+export { default as VisuallyHidden } from './VisuallyHidden.vue'
diff --git a/packages/vue-primitives/src/visually-hidden/stories/Basic.vue b/packages/vue-primitives/src/visually-hidden/stories/Basic.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { VisuallyHidden } from '../index.ts'
+</script>
+
+<template>
+  <button>
+    <VisuallyHidden>Save the file</VisuallyHidden>
+    <span aria-hidden>💾</span>
+  </button>
+</template>
diff --git a/packages/vue-primitives/src/visually-hidden/stories/VisuallyHidden.stories.tsx b/packages/vue-primitives/src/visually-hidden/stories/VisuallyHidden.stories.tsx
@@ -0,0 +1,7 @@
+import CBasic from './Basic.vue'
+
+export default { title: 'Utilities/VisuallyHidden' }
+
+export function Basic() {
+  return CBasic
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as VisuallyHidden } from './VisuallyHidden.vue'`