diff --git a/docs/content/2.components/divider.md b/docs/content/2.components/divider.md index c89bb4bb..754d6b9d 100644 --- a/docs/content/2.components/divider.md +++ b/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 --- :: diff --git a/src/runtime/components/layout/Divider.vue b/src/runtime/components/layout/Divider.vue index e48e76e0..bc950ca8 100644 --- a/src/runtime/components/layout/Divider.vue +++ b/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, default: null }, + size: { + type: String as PropType, + 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] ) }) diff --git a/src/runtime/types/divider.d.ts b/src/runtime/types/divider.d.ts new file mode 100644 index 00000000..eb28bd0f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/runtime/types/index.d.ts b/src/runtime/types/index.d.ts index 9ede63bf..3c6fe96d 100644 --- a/src/runtime/types/index.d.ts +++ b/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' diff --git a/src/runtime/ui.config/layout/divider.ts b/src/runtime/ui.config/layout/divider.ts index 4c75a9e3..207cfbe2 100644 --- a/src/runtime/ui.config/layout/divider.ts +++ b/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 + } }