feat: Separator 2/3 (unovue#151)

* init * chore:change import paths to static * complete api * udpate pnpm-lock --------- Co-authored-by: zernonia <[email protected]>
abh1nash · Aug 17, 2023 · a60a9ed · a60a9ed
1 parent 3edf3b1
commit a60a9ed
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 28 deletions.
diff --git a/packages/radix-vue/src/Separator/Separator.story.vue b/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">

diff --git a/packages/radix-vue/src/Separator/Separator.vue b/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>
diff --git a/packages/radix-vue/src/Separator/index.ts b/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";
diff --git a/packages/radix-vue/src/shared/component/BaseSeparator.vue b/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>
@@ -14,10 +22,34 @@ import { Primitive } from "@/Primitive";
 const props = withDefaults(defineProps<BaseSeparatorProps>(), {
   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" :role="`${decorative ? 'none' : 'separator'}`">
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :data-orientation="computedOrientation"
+    v-bind="semanticProps"
+  >
     <slot></slot>
   </Primitive>
 </template>
diff --git a/playground/vue3/src/components/Demo/SeparatorDemo.vue b/playground/vue3/src/components/Demo/SeparatorDemo.vue
@@ -1,38 +1,28 @@
 <script setup lang="ts">
-import { Separator } from 'radix-vue'
+import { Separator } from "radix-vue";
 </script>
 
 <template>
   <div class="w-full max-w-[300px] mx-[15px]">
-    <div class="text-white text-[15px] leading-5 font-medium">
-      Radix Primitives
-    </div>
-    <div class="text-white text-[15px] leading-5">
-      An open-source UI component library.
-    </div>
+    <div class="text-white text-[15px] leading-5 font-medium">Radix Primitives</div>
+    <div class="text-white text-[15px] leading-5">An open-source UI component library.</div>
     <Separator
       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">
-      <div class="text-white text-[15px] leading-5">
-        Blog
-      </div>
+      <div class="text-white text-[15px] leading-5">Blog</div>
       <Separator
         class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
         decorative
         orientation="vertical"
       />
-      <div class="text-white text-[15px] leading-5">
-        Docs
-      </div>
+      <div class="text-white text-[15px] leading-5">Docs</div>
       <Separator
         class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
-        decorative
+        aschild
         orientation="vertical"
       />
-      <div class="text-white text-[15px] leading-5">
-        Source
-      </div>
+      <div class="text-white text-[15px] leading-5">Source</div>
     </div>
   </div>
 </template>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as Separator } from "./Separator.vue";
		export { default as Separator, type SeparatorProps } from "./Separator.vue";