separator

Author: stevethomas

app/pages/components/Separator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Separator } from "@/components/separator"
+</script>
+
+<template>
+  <div class="w-64">
+    <div class="space-y-1">
+      <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+
+      <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
+    </div>
+
+    <Separator class="my-4" label="Or" />
+
+    <div class="flex h-5 items-center space-x-4 text-sm">
+      <div>Blog</div>
+
+      <Separator orientation="vertical" />
+
+      <div>Docs</div>
+
+      <Separator orientation="vertical" />
+
+      <div>Source</div>
+    </div>
+  </div>
+</template>

app/pages/index.ts

@@ -17,6 +17,7 @@ export { default as Flasher } from "./components/Flasher.vue"
 export { default as Pagination } from "./components/Pagination.vue"
 export { default as Popover } from "./components/Popover.vue"
 export { default as Progress } from "./components/Progress.vue"
+export { default as Separator } from "./components/Separator.vue"
 export { default as Skeleton } from "./components/Skeleton.vue"
 export { default as Toast } from "./components/Toast.vue"
 export { default as Tip } from "./components/Tip.vue"

app/router/index.ts

@@ -20,6 +20,7 @@ import {
   Pagination,
   Popover,
   Progress,
+  Separator,
   Skeleton,
   Toast,
   Tip,
@@ -146,6 +147,12 @@ const routes = [
         component: Progress,
         meta: { layout: ComponentLayout, shadcn: true },
       },
+      {
+        name: "Separator",
+        path: "/components/separator",
+        component: Separator,
+        meta: { layout: ComponentLayout, shadcn: true },
+      },
       {
         name: "Skeleton",
         path: "/components/skeleton",

src/components/separator/Separator.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator, type SeparatorProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"]; label?: string }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2'
+        )
+      "
+      >{{ props.label }}</span
+    >
+  </Separator>
+</template>

src/components/separator/index.ts

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

src/index.ts

@@ -27,6 +27,7 @@ export * from "@/components/label"
 export * from "@/components/popover"
 export * from "@/components/progress"
 export * from "@/components/select"
+export * from "@/components/separator"
 export * from "@/components/sheet"
 export * from "@/components/skeleton"
 export * from "@/components/slider"