feat(Separator): new component (#46)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/app.vue

@@ -28,6 +28,7 @@ const components = [
   'navigation-menu',
   'popover',
   'radio-group',
+  'separator',
   'skeleton',
   'slideover',
   'switch',

playground/pages/separator.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div>
+      <p class="font-semibold text-gray-900 dark:text-white">
+        Nuxt UI
+      </p>
+      <p>An open-source UI component library.</p>
+    </div>
+
+    <USeparator icon="i-simple-icons-nuxtdotjs" type="dashed" />
+
+    <div class="h-24 flex gap-4 items-center">
+      <div class="flex-1 text-center">
+        Blog
+      </div>
+
+      <USeparator
+        :avatar="{ size: 'sm', src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
+        decorative
+        orientation="vertical"
+      />
+
+      <div class="flex-1 text-center">
+        Docs
+      </div>
+
+      <USeparator decorative orientation="vertical">
+        <UAvatar src="https://avatars.githubusercontent.com/u/13056429?v=4" />
+      </USeparator>
+
+      <div class="flex-1 text-center">
+        Source
+      </div>
+    </div>
+
+    <USeparator label="As simple as it gets" type="dotted" size="lg" color="primary" />
+  </div>
+</template>

src/runtime/components/Separator.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SeparatorProps as _SeparatorProps } from 'radix-vue'
+import type { AvatarProps } from '#ui/types'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/separator'
+
+const appConfig = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
+
+const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })
+
+type SeparatorVariants = VariantProps<typeof separator>
+
+export interface SeparatorProps extends Omit<_SeparatorProps, 'asChild'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  color?: SeparatorVariants['color']
+  size?: SeparatorVariants['size']
+  type?: SeparatorVariants['type']
+  class?: any
+  ui?: Partial<typeof separator.slots>
+}
+
+export interface SeparatorSlots {
+  default(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Separator, useForwardProps } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { UAvatar, UIcon } from '#components'
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  as: 'div',
+  orientation: 'horizontal'
+})
+defineSlots<SeparatorSlots>()
+
+const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
+
+const ui = computed(() => tv({ extend: separator, slots: props.ui })({
+  color: props.color,
+  orientation: props.orientation,
+  size: props.size,
+  type: props.type
+}))
+</script>
+
+<template>
+  <Separator v-bind="rootProps" :class="ui.root({ class: props.class })">
+    <div :class="ui.border()" />
+
+    <template v-if="label || icon || avatar || $slots.default">
+      <div :class="ui.container()">
+        <slot>
+          <span v-if="label" :class="ui.label()">{{ label }}</span>
+          <UIcon v-else-if="icon" :name="icon" :class="ui.icon()" />
+          <UAvatar v-else-if="avatar" size="2xs" v-bind="avatar" :class="ui.avatar()" />
+        </slot>
+      </div>
+
+      <div :class="ui.border()" />
+    </template>
+  </Separator>
+</template>

src/runtime/types/index.d.ts

@@ -18,6 +18,8 @@ export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
 export * from '../components/Popover.vue'
+export * from '../components/RadioGroup.vue'
+export * from '../components/Separator.vue'
 export * from '../components/Skeleton.vue'
 export * from '../components/Slideover.vue'
 export * from '../components/Switch.vue'

src/theme/index.ts

@@ -17,6 +17,7 @@ export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
 export { default as popover } from './popover'
 export { default as radioGroup } from './radio-group'
+export { default as separator } from './separator'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
 export { default as switch } from './switch'

src/theme/separator.ts

@@ -0,0 +1,103 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'flex items-center align-center text-center',
+    border: '',
+    container: 'font-medium text-gray-700 dark:text-gray-200 flex',
+    icon: 'shrink-0 size-5',
+    avatar: 'shrink-0',
+    label: 'text-sm'
+  },
+  variants: {
+    color: {
+      ...Object.fromEntries(config.colors.map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
+      white: { border: 'border-white dark:border-gray-900' },
+      gray: { border: 'border-gray-200 dark:border-gray-800' },
+      black: { border: 'border-gray-900 dark:border-white' }
+    },
+    orientation: {
+      horizontal: {
+        root: 'w-full flex-row',
+        border: 'w-full',
+        container: 'mx-3 whitespace-nowrap'
+      },
+      vertical: {
+        root: 'h-full flex-col',
+        border: 'h-full',
+        container: 'my-2'
+      }
+    },
+    size: {
+      '2xs': '',
+      xs: '',
+      sm: '',
+      md: '',
+      lg: '',
+      xl: ''
+    },
+    type: {
+      solid: {
+        border: 'border-solid'
+      },
+      dashed: {
+        border: 'border-dashed'
+      },
+      dotted: {
+        border: 'border-dotted'
+      }
+    }
+  },
+  compoundVariants: [{
+    orientation: 'horizontal',
+    size: '2xs',
+    class: { border: 'border-t' }
+  }, {
+    orientation: 'horizontal',
+    size: 'xs',
+    class: { border: 'border-t-[2px]' }
+  }, {
+    orientation: 'horizontal',
+    size: 'sm',
+    class: { border: 'border-t-[3px]' }
+  }, {
+    orientation: 'horizontal',
+    size: 'md',
+    class: { border: 'border-t-[4px]' }
+  }, {
+    orientation: 'horizontal',
+    size: 'lg',
+    class: { border: 'border-t-[5px]' }
+  }, {
+    orientation: 'horizontal',
+    size: 'xl',
+    class: { border: 'border-t-[6px]' }
+  }, {
+    orientation: 'vertical',
+    size: '2xs',
+    class: { border: 'border-s' }
+  }, {
+    orientation: 'vertical',
+    size: 'xs',
+    class: { border: 'border-s-[2px]' }
+  }, {
+    orientation: 'vertical',
+    size: 'sm',
+    class: { border: 'border-s-[3px]' }
+  }, {
+    orientation: 'vertical',
+    size: 'md',
+    class: { border: 'border-s-[4px]' }
+  }, {
+    orientation: 'vertical',
+    size: 'lg',
+    class: { border: 'border-s-[5px]' }
+  }, {
+    orientation: 'vertical',
+    size: 'xl',
+    class: { border: 'border-s-[6px]' }
+  }],
+  defaultVariants: {
+    color: 'gray',
+    size: '2xs',
+    type: 'solid'
+  }
+})

test/components/Separator.spec.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import Separator, { type SeparatorProps } from '../../src/runtime/components/Separator.vue'
+import ComponentRender from '../component-render'
+
+describe('Separator', () => {
+  it.each([
+    ['basic case', {}],
+    ['with as', { props: { as: 'span' } }],
+    ['with class', { props: { class: 'flex-row-reverse' } }],
+    ['with size 2xs', { props: { size: '2xs' as const } }],
+    ['with size xs', { props: { size: 'xs' as const } }],
+    ['with size sm', { props: { size: 'sm' as const } }],
+    ['with size md', { props: { size: 'md' as const } }],
+    ['with size lg', { props: { size: 'lg' as const } }],
+    ['with size xl', { props: { size: 'xl' as const } }],
+    ['with label', { props: { label: '+1' } }],
+    ['with icon', { props: { icon: 'i-heroicons-photo' } }],
+    ['with avatar', { props: { avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } } }],
+    ['with orientation horizontal', { props: { orientation: 'horizontal' as const } }],
+    ['with orientation vertical', { props: { orientation: 'vertical' as const } }],
+    ['with type dashed', { props: { type: 'dashed' as const } }],
+    ['with type dotted', { props: { type: 'dotted' as const } }],
+    ['with color green', { props: { color: 'green' as const } }],
+    ['with color white', { props: { color: 'white' as const } }],
+    ['with color gray', { props: { color: 'gray' as const } }],
+    ['with color black', { props: { color: 'black' as const } }],
+    ['with decorative', { props: { decorative: true } }],
+    ['with ui', { props: { ui: { label: 'text-lg' } } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SeparatorProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Separator)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/__snapshots__/Separator.spec.ts.snap

@@ -0,0 +1,155 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Separator > renders basic case correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div><!--v-if--></span>"`;
+
+exports[`Separator > renders with avatar correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span></div>
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+</div>"
+`;
+
+exports[`Separator > renders with class correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row-reverse">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with color black correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-900 dark:border-white w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with color gray correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with color green correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-green-500 dark:border-green-400 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with color white correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-white dark:border-gray-900 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with decorative correctly 1`] = `
+"<div data-orientation="horizontal" role="none" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with icon correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
+      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path>
+    </svg></div>
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+</div>"
+`;
+
+exports[`Separator > renders with label correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+</div>"
+`;
+
+exports[`Separator > renders with orientation horizontal correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with orientation vertical correctly 1`] = `
+"<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex items-center align-center text-center h-full flex-col">
+  <div class="border-gray-200 dark:border-gray-800 h-full border-solid border-s"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with size 2xs correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with size lg correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[5px]"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with size md correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[4px]"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with size sm correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[3px]"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with size xl correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[6px]"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with size xs correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[2px]"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with type dashed correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-dashed border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with type dotted correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-dotted border-t"></div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Separator > renders with ui correctly 1`] = `
+"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
+  <div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
+  <!--v-if-->
+</div>"
+`;