feat(Divider): handle size prop (#1307)

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

docs/content/2.components/divider.md

@@ -68,19 +68,15 @@ excludedProps:
 
 ### Size
 
-You can change the size of the divider by using the `ui` prop
+Use the `size` prop to change the size of the divider.
 
 ::component-card
 ---
 props:
   label: Nuxt UI
-  ui:
-    border:
-      size:
-        horizontal: border-t-2
+  size: sm
 excludedProps:
   - label
-  - ui
 ---
 ::
 

src/runtime/components/layout/Divider.vue

@@ -26,7 +26,7 @@ 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'
+import type { Avatar, DividerSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { divider } from '#ui/ui.config'
@@ -52,6 +52,13 @@ export default defineComponent({
       type: Object as PropType<Avatar>,
       default: null
     },
+    size: {
+      type: String as PropType<DividerSize>,
+      default: () => config.default.size,
+      validator (value: string) {
+        return Object.keys(config.border.size.horizontal).includes(value) || Object.keys(config.border.size.vertical).includes(value)
+      }
+    },
     orientation: {
       type: String as PropType<'horizontal' | 'vertical'>,
       default: 'horizontal',
@@ -92,7 +99,7 @@ export default defineComponent({
       return twJoin(
         ui.value.border.base,
         ui.value.border[props.orientation],
-        ui.value.border.size[props.orientation],
+        ui.value.border.size[props.orientation][props.size],
         ui.value.border.type[props.type]
       )
     })

src/runtime/types/divider.d.ts

@@ -0,0 +1,3 @@
+import { divider } from '#ui/ui.config'
+
+export type DividerSize = keyof typeof divider.border.size.horizontal | keyof typeof divider.border.size.vertical

src/runtime/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './button'
 export * from './chip'
 export * from './clipboard'
 export * from './command-palette'
+export * from './divider'
 export * from './dropdown'
 export * from './form-group'
 export * from './form'

src/runtime/ui.config/layout/divider.ts

@@ -14,8 +14,22 @@ export default {
     horizontal: 'w-full',
     vertical: 'h-full',
     size: {
-      horizontal: 'border-t',
-      vertical: 'border-s'
+      horizontal: {
+        '2xs': 'border-t',
+        xs: 'border-t-[2px]',
+        sm: 'border-t-[3px]',
+        md: 'border-t-[4px]',
+        lg: 'border-t-[5px]',
+        xl: 'border-t-[6px]'
+      },
+      vertical: {
+        '2xs': 'border-s',
+        xs: 'border-s-[2px]',
+        sm: 'border-s-[3px]',
+        md: 'border-s-[4px]',
+        lg: 'border-s-[5px]',
+        xl: 'border-s-[6px]'
+      }
     },
     type: {
       solid: 'border-solid',
@@ -30,5 +44,8 @@ export default {
     base: 'flex-shrink-0',
     size: '2xs' as const
   },
-  label: 'text-sm'
+  label: 'text-sm',
+  default: {
+    size: '2xs' as const
+  }
 }