feat(Divider): new component (#757)

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

docs/components/content/examples/DividerExampleDefaultSlot.vue

@@ -0,0 +1,5 @@
+<template>
+  <UDivider>
+    <Logo class="w-28 h-6" />
+  </UDivider>
+</template>

docs/components/content/examples/DividerExampleOrientation.vue

@@ -0,0 +1,47 @@
+<script setup>
+const form = reactive({ email: 'mail@example.com', password: 'password' })
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-y-4">
+    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
+      <div class="space-y-4">
+        <UFormGroup label="Email" name="email">
+          <UInput v-model="form.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="form.password" type="password" />
+        </UFormGroup>
+
+        <UButton label="Login" color="gray" block />
+      </div>
+
+      <UDivider label="OR" color="gray" orientation="vertical" />
+
+      <div class="space-y-4 flex flex-col justify-center">
+        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
+        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
+      </div>
+    </UCard>
+
+    <UCard>
+      <div class="space-y-4">
+        <UFormGroup label="Email" name="email">
+          <UInput v-model="form.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="form.password" type="password" />
+        </UFormGroup>
+
+        <UButton label="Login" color="gray" block />
+
+        <UDivider label="OR" color="gray" />
+
+        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
+        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
+      </div>
+    </UCard>
+  </div>
+</template>

docs/content/7.layout/4.divider.md

@@ -0,0 +1,184 @@
+---
+description: Display a separator between content.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Divider.vue
+navigation:
+  badge: New
+---
+
+## Usage
+
+You can pass `label`, `icon` or `avatar` to the divider component.
+
+### Label
+
+::component-card
+---
+props:
+  label: OR
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+props:
+  icon: 'i-simple-icons-github'
+excludedProps:
+  - icon
+---
+::
+
+### Avatar
+
+Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
+
+::component-card
+---
+props:
+  avatar:
+    src: https://avatars.githubusercontent.com/u/739984?v=4
+excludedProps:
+  - avatar
+---
+::
+
+### Orientation
+
+You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `horizontal`.
+
+::component-example
+#default
+:divider-example-orientation
+
+#code
+```vue
+<script setup>
+const form = reactive({ email: 'mail@example.com', password: 'password' })
+</script>
+
+<template>
+  <div class="w-full flex flex-col gap-y-4">
+    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
+      <div class="space-y-4">
+        <UFormGroup label="Email" name="email">
+          <UInput v-model="form.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="form.password" type="password" />
+        </UFormGroup>
+
+        <UButton label="Login" color="gray" block />
+      </div>
+
+      <UDivider label="OR" color="gray" orientation="vertical" />
+
+      <div class="space-y-4 flex flex-col justify-center">
+        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
+        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
+      </div>
+    </UCard>
+
+    <UCard>
+      <div class="space-y-4">
+        <UFormGroup label="Email" name="email">
+          <UInput v-model="form.email" />
+        </UFormGroup>
+
+        <UFormGroup label="Password" name="password">
+          <UInput v-model="form.password" type="password" />
+        </UFormGroup>
+
+        <UButton label="Login" color="gray" block />
+
+        <UDivider label="OR" color="gray" />
+
+        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
+        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
+      </div>
+    </UCard>
+  </div>
+</template>
+```
+::
+
+### Type
+
+You can change the type of the divider by setting the `type` prop to `solid`, `dotted` or `dashed`. Defaults to `solid`.
+
+::component-card{class="w-full"}
+---
+props:
+  label: Nuxt UI
+  type: dashed
+excludedProps:
+  - label
+---
+::
+
+### Size
+
+You can change the size of the divider by using the `ui` prop
+
+::component-card
+---
+props:
+  label: Nuxt UI
+  ui:
+    border:
+      size:
+        horizontal: border-t-2
+excludedProps:
+  - label
+  - ui
+---
+::
+
+### Color
+
+You can change the color of the content by using the `ui` prop
+
+::component-card
+---
+props:
+  label: Nuxt UI
+  ui:
+    label: text-primary-500 dark:text-primary-400
+excludedProps:
+  - label
+  - ui
+---
+::
+
+## Slots
+
+### `default`
+
+Use the `default` slot to add content to the divider.
+
+::component-example
+#default
+:divider-example-default-slot
+#code
+```vue
+<template>
+  <UDivider>
+    <Logo class="w-28 h-6" />
+  </UDivider>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

docs/pages/[...slug].vue

@@ -5,7 +5,7 @@
     <UPageBody prose>
       <ContentRenderer v-if="page.body" :value="page" />
 
-      <UDivider v-if="surround?.length" />
+      <hr v-if="surround?.length">
 
       <UDocsSurround :surround="(surround as ParsedContent[])" />
     </UPageBody>
@@ -14,7 +14,7 @@
       <UDocsToc :links="page.body.toc.links">
         <template #bottom>
           <div class="hidden lg:block space-y-6 !mt-6">
-            <UDivider v-if="page.body?.toc?.links?.length" dashed />
+            <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
 
             <UPageLinks title="Community" :links="links" />
           </div>

src/runtime/components/layout/Divider.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="wrapperClass" v-bind="attrs">
+    <div :class="borderClass" />
+
+    <div v-if="label || icon || avatar || $slots.default" :class="containerClass">
+      <slot>
+        <span v-if="label" :class="ui.label">
+          {{ label }}
+        </span>
+        <UIcon v-else-if="icon" :name="icon" :class="ui.icon.base" />
+        <UAvatar v-else-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
+      </slot>
+    </div>
+
+    <div :class="borderClass" />
+  </div>
+</template>
+
+<script lang="ts">
+import { toRef, computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { twMerge, twJoin } from 'tailwind-merge'
+import UIcon from '../elements/Icon.vue'
+import UAvatar from '../elements/Avatar.vue'
+import { useUI } from '../../composables/useUI'
+import { mergeConfig } from '../../utils'
+import type { Avatar, Strategy } from '../../types'
+// @ts-expect-error
+import appConfig from '#build/app.config'
+import { divider } from '#ui/ui.config'
+
+const config = mergeConfig<typeof divider>(appConfig.ui.strategy, appConfig.ui.divider, divider)
+
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar
+  },
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    avatar: {
+      type: Object as PropType<Avatar>,
+      default: null
+    },
+    orientation: {
+      type: String as PropType<'horizontal' | 'vertical'>,
+      default: 'horizontal',
+      validator: (value: string) => ['horizontal', 'vertical'].includes(value)
+    },
+    type: {
+      type: String as PropType<'solid' | 'dotted' | 'dashed'>,
+      default: 'solid',
+      validator: (value: string) => ['solid', 'dotted', 'dashed'].includes(value)
+    },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
+      default: undefined
+    }
+  },
+  setup (props) {
+    const { ui, attrs } = useUI('divider', toRef(props, 'ui'), config)
+
+    const isHorizontal = computed(() => props.orientation === 'horizontal' )
+
+    const wrapperClass = computed(() => {
+      return twMerge(twJoin(
+        ui.value.wrapper.base,
+        isHorizontal.value ? ui.value.wrapper.horizontal : ui.value.wrapper.vertical
+      ), props.class)
+    })
+
+    const containerClass = computed(() => {
+      return twJoin(
+        ui.value.container.base,
+        isHorizontal.value ? ui.value.container.horizontal : ui.value.container.vertical
+      )
+    })
+
+    const borderClass = computed(() => {
+      const typeClass = ({
+        solid: 'border-solid',
+        dotted: 'border-dotted',
+        dashed: 'border-dashed'
+      })[props.type]
+
+      return twJoin(
+        ui.value.border.base,
+        isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
+        isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
+        typeClass
+      )
+    })
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      wrapperClass,
+      containerClass,
+      borderClass
+    }
+  }
+})
+</script>

src/runtime/ui.config.ts

@@ -721,6 +721,36 @@ export const skeleton = {
   rounded: 'rounded-md'
 }
 
+export const divider = {
+  wrapper: {
+    base: 'flex items-center align-center text-center w-full',
+    horizontal: 'flex-row',
+    vertical: 'flex-col'
+  },
+  container: {
+    base: 'font-medium text-gray-700 dark:text-gray-200 flex',
+    horizontal: 'mx-3 whitespace-nowrap',
+    vertical: 'my-2'
+  },
+  border: {
+    base: 'flex border-gray-200 dark:border-gray-800',
+    horizontal: 'w-full',
+    vertical: 'h-full',
+    size: {
+      horizontal: 'border-t',
+      vertical: 'border-s'
+    }
+  },
+  icon: {
+    base: 'flex-shrink-0 w-5 h-5'
+  },
+  avatar: {
+    base: 'flex-shrink-0',
+    size: '2xs'
+  },
+  label: 'text-sm'
+}
+
 // Navigation
 
 export const verticalNavigation = {