complete api

packages/radix-vue/src/Separator/Separator.story.vue

@@ -13,6 +13,7 @@ import { Separator } from "./";
           An open-source UI component library.
         </div>
         <Separator
+          decorative
           class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
         />
         <div class="flex h-5 items-center">

packages/radix-vue/src/Separator/Separator.vue

@@ -1,20 +1,19 @@
 <script lang="ts">
-import BaseSeparator from "../shared/component/BaseSeparator.vue";
-import type { DataOrientation } from "../shared/types";
-import { type PrimitiveProps } from "@/Primitive";
+import BaseSeparator, {
+  type BaseSeparatorProps,
+} from "@/shared/component/BaseSeparator.vue";
 
-export interface BaseSeparatorProps extends PrimitiveProps {
-  orientation?: DataOrientation;
-  decorative?: boolean;
-}
+export interface SeparatorProps extends BaseSeparatorProps {}
 </script>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<BaseSeparatorProps>(), {
+const props = withDefaults(defineProps<SeparatorProps>(), {
   orientation: "horizontal",
 });
 </script>
 
 <template>
-  <BaseSeparator v-bind="props" :data-orientation="props.orientation" />
+  <BaseSeparator v-bind="props">
+    <slot></slot>
+  </BaseSeparator>
 </template>

packages/radix-vue/src/Separator/index.ts

@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue";
+export { default as Separator, type SeparatorProps } from "./Separator.vue";

packages/radix-vue/src/shared/component/BaseSeparator.vue

@@ -1,9 +1,17 @@
 <script lang="ts">
 import type { DataOrientation } from "../types";
 import { type PrimitiveProps } from "@/Primitive";
+import { computed } from "vue";
 
 export interface BaseSeparatorProps extends PrimitiveProps {
+  /**
+   * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+   */
   orientation?: DataOrientation;
+  /**
+   * 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;
 }
 </script>
@@ -12,15 +20,36 @@ export interface BaseSeparatorProps extends PrimitiveProps {
 import { Primitive } from "@/Primitive";
 
 const props = withDefaults(defineProps<BaseSeparatorProps>(), {
-  asChild: false,
   orientation: "horizontal",
 });
+
+const ORIENTATIONS = ["horizontal", "vertical"] as const;
+function isValidOrientation(orientation: any): orientation is DataOrientation {
+  return ORIENTATIONS.includes(orientation);
+}
+
+const computedOrientation = computed(() =>
+  isValidOrientation(props.orientation) ? props.orientation : "horizontal"
+);
+// `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+const ariaOrientation = computed(() =>
+  computedOrientation.value === "vertical" ? props.orientation : undefined
+);
+
+const semanticProps = computed(() =>
+  props.decorative
+    ? { role: "none" }
+    : { "aria-orientation": ariaOrientation.value, role: "separator" }
+);
 </script>
 
 <template>
   <Primitive
-    v-bind="props"
-    :data-orientation="props.orientation"
-    :role="`${props.decorative ? 'none' : 'separator'}`"
-  ></Primitive>
+    :as="as"
+    :as-child="asChild"
+    :data-orientation="computedOrientation"
+    v-bind="semanticProps"
+  >
+    <slot></slot>
+  </Primitive>
 </template>