dev: refactor separator components, create BaseSeparator

packages/radix-vue/src/DropdownMenu/DropdownMenuSeparator.vue

@@ -1,22 +1,20 @@
 <script lang="ts">
-type Orientation = "horizontal" | "vertical";
+import BaseSeparator from "@/shared/component/BaseSeparator.vue";
+import type { DataOrientation } from "../shared/types";
 
-interface ToolbarSeparatorProps {
-  orientation?: Orientation;
+export interface BaseSeparatorProps {
+  orientation?: DataOrientation;
   decorative?: boolean;
 }
 </script>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<ToolbarSeparatorProps>(), {
-  orientation: "horizontal",
-  decorative: false,
-});
+const props = defineProps<BaseSeparatorProps>();
 </script>
 
 <template>
-  <div
-    :data-orientation="props.orientation"
-    :role="`${decorative ? 'none' : 'separator'}`"
-  ></div>
+  <BaseSeparator
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+  />
 </template>

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

@@ -1,22 +1,20 @@
-<script setup lang="ts">
-type Orientation = "horizontal" | "vertical";
+<script lang="ts">
+import BaseSeparator from "@/shared/component/BaseSeparator.vue";
+import type { DataOrientation } from "../shared/types";
+
+export interface BaseSeparatorProps {
+  orientation?: DataOrientation;
+  decorative?: boolean;
+}
+</script>
 
-const props = defineProps({
-  orientation: {
-    type: String as Orientation,
-    required: false,
-    default: "horizontal",
-  },
-  decorative: {
-    type: Boolean,
-    required: false,
-  },
-});
+<script setup lang="ts">
+const props = defineProps<BaseSeparatorProps>();
 </script>
 
 <template>
-  <div
-    :data-orientation="props.orientation"
-    :role="`${decorative ? 'none' : 'separator'}`"
-  ></div>
+  <BaseSeparator
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+  />
 </template>

packages/radix-vue/src/Toolbar/ToolbarSeparator.vue

@@ -1,22 +1,20 @@
 <script lang="ts">
-type Orientation = "horizontal" | "vertical";
+import BaseSeparator from "@/shared/component/BaseSeparator.vue";
+import type { DataOrientation } from "../shared/types";
 
-interface ToolbarSeparatorProps {
-  orientation?: Orientation;
+export interface BaseSeparatorProps {
+  orientation?: DataOrientation;
   decorative?: boolean;
 }
 </script>
 
 <script setup lang="ts">
-const props = withDefaults(defineProps<ToolbarSeparatorProps>(), {
-  orientation: "horizontal",
-  decorative: false,
-});
+const props = defineProps<BaseSeparatorProps>();
 </script>
 
 <template>
-  <div
-    :data-orientation="props.orientation"
-    :role="`${decorative ? 'none' : 'separator'}`"
-  ></div>
+  <BaseSeparator
+    :orientation="props.orientation"
+    :decorative="props.decorative"
+  />
 </template>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { DataOrientation } from "../types";
+
+export interface BaseSeparatorProps {
+  orientation?: DataOrientation;
+  decorative?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<BaseSeparatorProps>(), {
+  orientation: "horizontal",
+});
+</script>
+
+<template>
+  <div
+    :data-orientation="props.orientation"
+    :role="`${decorative ? 'none' : 'separator'}`"
+  ></div>
+</template>