feat: separator

teleskop150750 · teleskop150750 · commit bff9a3ed4bf7 · 2024-06-15T21:17:44.000+03:00
diff --git a/packages/vue-primitives/src/separator/Separator.ts b/packages/vue-primitives/src/separator/Separator.ts
@@ -0,0 +1,13 @@
+import type { PrimitiveProps } from '~/primitive/index.ts'
+
+export interface SeparatorProps extends PrimitiveProps {
+  /**
+   * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
+  orientation?: 'vertical' | 'horizontal'
+  /**
+   * Whether or not the component is purely decorative. When true, accessibility-related attributes
+   * are updated so that that the rendered element is removed from the accessibility tree.
+   */
+  decorative?: boolean
+}
diff --git a/packages/vue-primitives/src/separator/Separator.vue b/packages/vue-primitives/src/separator/Separator.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SeparatorProps } from './Separator.ts'
+import { Primitive } from '~/primitive/index.ts'
+
+defineOptions({
+  name: 'Separator',
+})
+
+withDefaults(defineProps<SeparatorProps>(), {
+  orientation: 'horizontal',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :data-orientation="orientation"
+    v-bind="{
+      ...(
+        decorative ? {
+          role: 'none',
+        } : {
+          'aria-orientation': orientation === 'vertical' ? orientation : undefined,
+          'role': 'separator',
+        }
+      ),
+    }"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/vue-primitives/src/separator/index.ts b/packages/vue-primitives/src/separator/index.ts
@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator.vue'
+export type{ SeparatorProps } from './Separator.ts'
diff --git a/packages/vue-primitives/src/separator/stories/Separator.stories.tsx b/packages/vue-primitives/src/separator/stories/Separator.stories.tsx
@@ -0,0 +1,30 @@
+import { Separator } from '../index.ts'
+import './styles.css'
+
+export default { title: 'Components/Separator' }
+
+export function Styled() {
+  return (
+    <>
+      <h1>Horizontal</h1>
+      <p>The following separator is horizontal and has semantic meaning.</p>
+      <Separator class="separator_root" orientation="horizontal" />
+      <p>
+        The following separator is horizontal and is purely decorative. Assistive technology will
+        ignore this element.
+      </p>
+      <Separator class="separator_root" orientation="horizontal" decorative />
+
+      <h1>Vertical</h1>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <p>The following separator is vertical and has semantic meaning.</p>
+        <Separator class="separator_root" orientation="vertical" />
+        <p>
+          The following separator is vertical and is purely decorative. Assistive technology will
+          ignore this element.
+        </p>
+        <Separator class="separator_root" orientation="vertical" decorative />
+      </div>
+    </>
+  )
+}
diff --git a/packages/vue-primitives/src/separator/stories/styles.css b/packages/vue-primitives/src/separator/stories/styles.css
@@ -0,0 +1,16 @@
+.separator_root {
+    border: none;
+    background-color: red;
+  
+    &[data-orientation="horizontal"] {
+      height: 1px;
+      width: 100%;
+      margin: 20px 0;
+    }
+  
+    &[data-orientation="vertical"] {
+      height: 100px;
+      width: 1px;
+      margin: 0 20px;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default as Separator } from './Separator.vue'`
	`2`	`+export type{ SeparatorProps } from './Separator.ts'`