@nuxt/ui 3.0.1 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (228) hide show
  1. package/.nuxt/ui/accordion.ts +25 -4
  2. package/.nuxt/ui/alert.ts +52 -31
  3. package/.nuxt/ui/avatar-group.ts +24 -3
  4. package/.nuxt/ui/avatar.ts +26 -5
  5. package/.nuxt/ui/badge.ts +56 -35
  6. package/.nuxt/ui/breadcrumb.ts +28 -7
  7. package/.nuxt/ui/button-group.ts +23 -2
  8. package/.nuxt/ui/button.ts +66 -45
  9. package/.nuxt/ui/calendar.ts +39 -18
  10. package/.nuxt/ui/card.ts +28 -7
  11. package/.nuxt/ui/carousel.ts +29 -8
  12. package/.nuxt/ui/checkbox-group.ts +82 -0
  13. package/.nuxt/ui/checkbox.ts +163 -29
  14. package/.nuxt/ui/chip.ts +31 -10
  15. package/.nuxt/ui/collapsible.ts +23 -2
  16. package/.nuxt/ui/color-picker.ts +26 -5
  17. package/.nuxt/ui/command-palette.ts +37 -16
  18. package/.nuxt/ui/container.ts +24 -3
  19. package/.nuxt/ui/context-menu.ts +56 -35
  20. package/.nuxt/ui/drawer.ts +33 -12
  21. package/.nuxt/ui/dropdown-menu.ts +57 -36
  22. package/.nuxt/ui/form-field.ts +29 -8
  23. package/.nuxt/ui/form.ts +23 -2
  24. package/.nuxt/ui/index.ts +1 -0
  25. package/.nuxt/ui/input-menu.ts +65 -44
  26. package/.nuxt/ui/input-number.ts +43 -22
  27. package/.nuxt/ui/input.ts +46 -25
  28. package/.nuxt/ui/kbd.ts +27 -6
  29. package/.nuxt/ui/link.ts +26 -5
  30. package/.nuxt/ui/modal.ts +28 -7
  31. package/.nuxt/ui/navigation-menu.ts +103 -84
  32. package/.nuxt/ui/pagination.ts +23 -2
  33. package/.nuxt/ui/pin-input.ts +43 -22
  34. package/.nuxt/ui/popover.ts +25 -4
  35. package/.nuxt/ui/progress.ts +40 -19
  36. package/.nuxt/ui/radio-group.ts +273 -37
  37. package/.nuxt/ui/select-menu.ts +59 -35
  38. package/.nuxt/ui/select.ts +55 -34
  39. package/.nuxt/ui/separator.ts +31 -10
  40. package/.nuxt/ui/skeleton.ts +24 -3
  41. package/.nuxt/ui/slideover.ts +27 -6
  42. package/.nuxt/ui/slider.ts +39 -18
  43. package/.nuxt/ui/stepper.ts +41 -20
  44. package/.nuxt/ui/switch.ts +44 -23
  45. package/.nuxt/ui/table.ts +38 -17
  46. package/.nuxt/ui/tabs.ts +55 -34
  47. package/.nuxt/ui/textarea.ts +63 -37
  48. package/.nuxt/ui/toast.ts +47 -26
  49. package/.nuxt/ui/toaster.ts +23 -2
  50. package/.nuxt/ui/tooltip.ts +25 -4
  51. package/.nuxt/ui/tree.ts +41 -20
  52. package/.nuxt/ui.css +56 -12
  53. package/README.md +11 -0
  54. package/cli/templates.mjs +18 -17
  55. package/dist/module.d.mts +2 -1
  56. package/dist/module.json +5 -5
  57. package/dist/module.mjs +11 -7
  58. package/dist/runtime/components/Accordion.vue +36 -92
  59. package/dist/runtime/components/Accordion.vue.d.ts +91 -0
  60. package/dist/runtime/components/Alert.vue +37 -100
  61. package/dist/runtime/components/Alert.vue.d.ts +96 -0
  62. package/dist/runtime/components/App.vue +28 -34
  63. package/dist/runtime/components/App.vue.d.ts +24 -0
  64. package/dist/runtime/components/Avatar.vue +47 -78
  65. package/dist/runtime/components/Avatar.vue.d.ts +60 -0
  66. package/dist/runtime/components/AvatarGroup.vue +40 -77
  67. package/dist/runtime/components/AvatarGroup.vue.d.ts +40 -0
  68. package/dist/runtime/components/Badge.vue +33 -62
  69. package/dist/runtime/components/Badge.vue.d.ts +62 -0
  70. package/dist/runtime/components/Breadcrumb.vue +36 -88
  71. package/dist/runtime/components/Breadcrumb.vue.d.ts +82 -0
  72. package/dist/runtime/components/Button.vue +96 -105
  73. package/dist/runtime/components/Button.vue.d.ts +73 -0
  74. package/dist/runtime/components/ButtonGroup.vue +20 -46
  75. package/dist/runtime/components/ButtonGroup.vue.d.ts +55 -0
  76. package/dist/runtime/components/Calendar.vue +73 -127
  77. package/dist/runtime/components/Calendar.vue.d.ts +107 -0
  78. package/dist/runtime/components/Card.vue +18 -40
  79. package/dist/runtime/components/Card.vue.d.ts +38 -0
  80. package/dist/runtime/components/Carousel.vue +112 -230
  81. package/dist/runtime/components/Carousel.vue.d.ts +120 -0
  82. package/dist/runtime/components/Checkbox.vue +52 -93
  83. package/dist/runtime/components/Checkbox.vue.d.ts +76 -0
  84. package/dist/runtime/components/CheckboxGroup.vue +121 -0
  85. package/dist/runtime/components/CheckboxGroup.vue.d.ts +75 -0
  86. package/dist/runtime/components/Chip.vue +26 -69
  87. package/dist/runtime/components/Chip.vue.d.ts +71 -0
  88. package/dist/runtime/components/Collapsible.vue +22 -41
  89. package/dist/runtime/components/Collapsible.vue.d.ts +50 -0
  90. package/dist/runtime/components/ColorPicker.vue +111 -197
  91. package/dist/runtime/components/ColorPicker.vue.d.ts +63 -0
  92. package/dist/runtime/components/CommandPalette.vue +94 -234
  93. package/dist/runtime/components/CommandPalette.vue.d.ts +173 -0
  94. package/dist/runtime/components/Container.vue +15 -28
  95. package/dist/runtime/components/Container.vue.d.ts +27 -0
  96. package/dist/runtime/components/ContextMenu.vue +32 -119
  97. package/dist/runtime/components/ContextMenu.vue.d.ts +127 -0
  98. package/dist/runtime/components/ContextMenuContent.vue +71 -72
  99. package/dist/runtime/components/ContextMenuContent.vue.d.ts +105 -0
  100. package/dist/runtime/components/Drawer.vue +49 -87
  101. package/dist/runtime/components/Drawer.vue.d.ts +88 -0
  102. package/dist/runtime/components/DropdownMenu.vue +37 -129
  103. package/dist/runtime/components/DropdownMenu.vue.d.ts +141 -0
  104. package/dist/runtime/components/DropdownMenuContent.vue +76 -79
  105. package/dist/runtime/components/DropdownMenuContent.vue.d.ts +55 -0
  106. package/dist/runtime/components/Form.vue +135 -219
  107. package/dist/runtime/components/Form.vue.d.ts +66 -0
  108. package/dist/runtime/components/FormField.vue +36 -77
  109. package/dist/runtime/components/FormField.vue.d.ts +70 -0
  110. package/dist/runtime/components/Icon.vue +12 -19
  111. package/dist/runtime/components/Icon.vue.d.ts +17 -0
  112. package/dist/runtime/components/Input.vue +82 -140
  113. package/dist/runtime/components/Input.vue.d.ts +91 -0
  114. package/dist/runtime/components/InputMenu.vue +193 -302
  115. package/dist/runtime/components/InputMenu.vue.d.ts +312 -0
  116. package/dist/runtime/components/InputNumber.vue +71 -133
  117. package/dist/runtime/components/InputNumber.vue.d.ts +193 -0
  118. package/dist/runtime/components/Kbd.vue +20 -46
  119. package/dist/runtime/components/Kbd.vue.d.ts +55 -0
  120. package/dist/runtime/components/Link.vue +98 -173
  121. package/dist/runtime/components/Link.vue.d.ts +124 -0
  122. package/dist/runtime/components/LinkBase.vue +33 -41
  123. package/dist/runtime/components/LinkBase.vue.d.ts +48 -0
  124. package/dist/runtime/components/Modal.vue +53 -116
  125. package/dist/runtime/components/Modal.vue.d.ts +109 -0
  126. package/dist/runtime/components/NavigationMenu.vue +78 -186
  127. package/dist/runtime/components/NavigationMenu.vue.d.ts +159 -0
  128. package/dist/runtime/components/OverlayProvider.vue +14 -18
  129. package/dist/runtime/components/OverlayProvider.vue.d.ts +2 -0
  130. package/dist/runtime/components/Pagination.vue +46 -140
  131. package/dist/runtime/components/Pagination.vue.d.ts +143 -0
  132. package/dist/runtime/components/PinInput.vue +61 -78
  133. package/dist/runtime/components/PinInput.vue.d.ts +68 -0
  134. package/dist/runtime/components/Popover.vue +47 -84
  135. package/dist/runtime/components/Popover.vue.d.ts +80 -0
  136. package/dist/runtime/components/Progress.vue +70 -131
  137. package/dist/runtime/components/Progress.vue.d.ts +97 -0
  138. package/dist/runtime/components/RadioGroup.vue +75 -126
  139. package/dist/runtime/components/RadioGroup.vue.d.ts +88 -0
  140. package/dist/runtime/components/Select.vue +115 -202
  141. package/dist/runtime/components/Select.vue.d.ts +139 -0
  142. package/dist/runtime/components/SelectMenu.vue +167 -281
  143. package/dist/runtime/components/SelectMenu.vue.d.ts +184 -0
  144. package/dist/runtime/components/Separator.vue +29 -71
  145. package/dist/runtime/components/Separator.vue.d.ts +75 -0
  146. package/dist/runtime/components/Skeleton.vue +21 -23
  147. package/dist/runtime/components/Skeleton.vue.d.ts +26 -0
  148. package/dist/runtime/components/Slideover.vue +53 -120
  149. package/dist/runtime/components/Slideover.vue.d.ts +111 -0
  150. package/dist/runtime/components/Slider.vue +46 -84
  151. package/dist/runtime/components/Slider.vue.d.ts +71 -0
  152. package/dist/runtime/components/Stepper.vue +44 -113
  153. package/dist/runtime/components/Stepper.vue.d.ts +89 -0
  154. package/dist/runtime/components/Switch.vue +45 -93
  155. package/dist/runtime/components/Switch.vue.d.ts +73 -0
  156. package/dist/runtime/components/Table.vue +165 -264
  157. package/dist/runtime/components/Table.vue.d.ts +183 -0
  158. package/dist/runtime/components/Tabs.vue +40 -105
  159. package/dist/runtime/components/Tabs.vue.d.ts +104 -0
  160. package/dist/runtime/components/Textarea.vue +113 -158
  161. package/dist/runtime/components/Textarea.vue.d.ts +95 -0
  162. package/dist/runtime/components/Toast.vue +49 -110
  163. package/dist/runtime/components/Toast.vue.d.ts +95 -0
  164. package/dist/runtime/components/Toaster.vue +70 -107
  165. package/dist/runtime/components/Toaster.vue.d.ts +63 -0
  166. package/dist/runtime/components/Tooltip.vue +38 -65
  167. package/dist/runtime/components/Tooltip.vue.d.ts +65 -0
  168. package/dist/runtime/components/Tree.vue +57 -150
  169. package/dist/runtime/components/Tree.vue.d.ts +128 -0
  170. package/dist/runtime/composables/defineShortcuts.d.ts +1 -1
  171. package/dist/runtime/composables/defineShortcuts.js +0 -1
  172. package/dist/runtime/composables/useAvatarGroup.d.ts +1 -1
  173. package/dist/runtime/composables/useButtonGroup.d.ts +2 -2
  174. package/dist/runtime/composables/useFormField.d.ts +2 -2
  175. package/dist/runtime/composables/useFormField.js +1 -1
  176. package/dist/runtime/composables/useOverlay.d.ts +16 -8
  177. package/dist/runtime/composables/useOverlay.js +14 -6
  178. package/dist/runtime/composables/usePortal.d.ts +6 -0
  179. package/dist/runtime/composables/usePortal.js +17 -0
  180. package/dist/runtime/index.css +1 -1
  181. package/dist/runtime/inertia/components/Link.vue +146 -0
  182. package/dist/runtime/inertia/components/Link.vue.d.ts +92 -0
  183. package/dist/runtime/inertia/stubs.d.ts +43 -0
  184. package/dist/runtime/inertia/stubs.js +82 -0
  185. package/dist/runtime/locale/bg.d.ts +3 -0
  186. package/dist/runtime/locale/bg.js +54 -0
  187. package/dist/runtime/locale/hy.d.ts +3 -0
  188. package/dist/runtime/locale/hy.js +54 -0
  189. package/dist/runtime/locale/index.d.ts +6 -1
  190. package/dist/runtime/locale/index.js +6 -1
  191. package/dist/runtime/locale/kk.d.ts +3 -0
  192. package/dist/runtime/locale/kk.js +54 -0
  193. package/dist/runtime/locale/tj.d.ts +3 -0
  194. package/dist/runtime/locale/tj.js +54 -0
  195. package/dist/runtime/locale/ug_cn.d.ts +3 -0
  196. package/dist/runtime/locale/ug_cn.js +55 -0
  197. package/dist/runtime/types/form.d.ts +5 -1
  198. package/dist/runtime/types/index.d.ts +2 -0
  199. package/dist/runtime/types/index.js +2 -0
  200. package/dist/runtime/types/utils.d.ts +70 -10
  201. package/dist/runtime/utils/index.d.ts +1 -0
  202. package/dist/runtime/utils/index.js +3 -0
  203. package/dist/runtime/utils/link.d.ts +4 -27
  204. package/dist/runtime/utils/link.js +32 -1
  205. package/dist/runtime/utils/tv.js +2 -2
  206. package/dist/runtime/vue/components/Icon.vue +7 -8
  207. package/dist/runtime/vue/components/Icon.vue.d.ts +14 -0
  208. package/dist/runtime/vue/components/Link.vue +118 -199
  209. package/dist/runtime/vue/components/Link.vue.d.ts +124 -0
  210. package/dist/runtime/vue/stubs.d.ts +5 -0
  211. package/dist/runtime/vue/stubs.js +11 -2
  212. package/dist/shared/{ui.BCaWD5Ek.mjs → ui.D7lOOabO.mjs} +623 -364
  213. package/dist/types.d.mts +5 -1
  214. package/dist/unplugin.d.mts +6 -1
  215. package/dist/unplugin.mjs +25 -4
  216. package/dist/vite.mjs +1 -1
  217. package/package.json +122 -64
  218. package/dist/module.cjs +0 -62
  219. package/dist/module.d.cts +0 -44
  220. package/dist/module.d.ts +0 -44
  221. package/dist/shared/ui.C6uTSFTI.cjs +0 -3555
  222. package/dist/types.d.ts +0 -1
  223. package/dist/unplugin.cjs +0 -232
  224. package/dist/unplugin.d.cts +0 -61
  225. package/dist/unplugin.d.ts +0 -61
  226. package/dist/vite.cjs +0 -23
  227. package/dist/vite.d.cts +0 -15
  228. package/dist/vite.d.ts +0 -15
@@ -1,97 +1,60 @@
1
- <script lang="ts">
2
- import type { VariantProps } from 'tailwind-variants'
3
- import type { AppConfig } from '@nuxt/schema'
4
- import _appConfig from '#build/app.config'
5
- import theme from '#build/ui/avatar-group'
6
- import { tv } from '../utils/tv'
7
-
8
- const appConfigAvatarGroup = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
9
-
10
- const avatarGroup = tv({ extend: tv(theme), ...(appConfigAvatarGroup.ui?.avatarGroup || {}) })
11
-
12
- type AvatarGroupVariants = VariantProps<typeof avatarGroup>
13
-
14
- export interface AvatarGroupProps {
15
- /**
16
- * The element or component this component should render as.
17
- * @defaultValue 'div'
18
- */
19
- as?: any
20
- /**
21
- * @defaultValue 'md'
22
- */
23
- size?: AvatarGroupVariants['size']
24
- /**
25
- * The maximum number of avatars to display.
26
- */
27
- max?: number | string
28
- class?: any
29
- ui?: Partial<typeof avatarGroup.slots>
30
- }
31
-
32
- export interface AvatarGroupSlots {
33
- default(props?: {}): any
34
- }
1
+ <script>
2
+ import theme from "#build/ui/avatar-group";
35
3
  </script>
36
4
 
37
- <script setup lang="ts">
38
- import { computed, provide } from 'vue'
39
- import { Primitive } from 'reka-ui'
40
- import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
41
- import UAvatar from './Avatar.vue'
42
-
43
- const props = defineProps<AvatarGroupProps>()
44
- const slots = defineSlots<AvatarGroupSlots>()
45
-
46
- const ui = computed(() => avatarGroup({
5
+ <script setup>
6
+ import { computed, provide } from "vue";
7
+ import { Primitive } from "reka-ui";
8
+ import { useAppConfig } from "#imports";
9
+ import { avatarGroupInjectionKey } from "../composables/useAvatarGroup";
10
+ import { tv } from "../utils/tv";
11
+ import UAvatar from "./Avatar.vue";
12
+ const props = defineProps({
13
+ as: { type: null, required: false },
14
+ size: { type: null, required: false },
15
+ max: { type: [Number, String], required: false },
16
+ class: { type: null, required: false },
17
+ ui: { type: null, required: false }
18
+ });
19
+ const slots = defineSlots();
20
+ const appConfig = useAppConfig();
21
+ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatarGroup || {} })({
47
22
  size: props.size
48
- }))
49
-
50
- const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
51
-
23
+ }));
24
+ const max = computed(() => typeof props.max === "string" ? Number.parseInt(props.max, 10) : props.max);
52
25
  const children = computed(() => {
53
- let children = slots.default?.()
54
- if (children?.length) {
55
- children = children.flatMap((child: any) => {
56
- if (typeof child.type === 'symbol') {
57
- // `v-if="false"` or commented node
58
- if (typeof child.children === 'string') {
59
- return
26
+ let children2 = slots.default?.();
27
+ if (children2?.length) {
28
+ children2 = children2.flatMap((child) => {
29
+ if (typeof child.type === "symbol") {
30
+ if (typeof child.children === "string") {
31
+ return;
60
32
  }
61
-
62
- return child.children
33
+ return child.children;
63
34
  }
64
-
65
- return child
66
- }).filter(Boolean)
35
+ return child;
36
+ }).filter(Boolean);
67
37
  }
68
-
69
- return children || []
70
- })
71
-
38
+ return children2 || [];
39
+ });
72
40
  const visibleAvatars = computed(() => {
73
41
  if (!children.value.length) {
74
- return []
42
+ return [];
75
43
  }
76
-
77
44
  if (!max.value || max.value <= 0) {
78
- return [...children.value].reverse()
45
+ return [...children.value].reverse();
79
46
  }
80
-
81
- return [...children.value].slice(0, max.value).reverse()
82
- })
83
-
47
+ return [...children.value].slice(0, max.value).reverse();
48
+ });
84
49
  const hiddenCount = computed(() => {
85
50
  if (!children.value.length) {
86
- return 0
51
+ return 0;
87
52
  }
88
-
89
- return children.value.length - visibleAvatars.value.length
90
- })
91
-
53
+ return children.value.length - visibleAvatars.value.length;
54
+ });
92
55
  provide(avatarGroupInjectionKey, computed(() => ({
93
56
  size: props.size
94
- })))
57
+ })));
95
58
  </script>
96
59
 
97
60
  <template>
@@ -0,0 +1,40 @@
1
+ import type { AppConfig } from '@nuxt/schema';
2
+ import theme from '#build/ui/avatar-group';
3
+ import type { ComponentConfig } from '../types/utils';
4
+ type AvatarGroup = ComponentConfig<typeof theme, AppConfig, 'avatarGroup'>;
5
+ export interface AvatarGroupProps {
6
+ /**
7
+ * The element or component this component should render as.
8
+ * @defaultValue 'div'
9
+ */
10
+ as?: any;
11
+ /**
12
+ * @defaultValue 'md'
13
+ */
14
+ size?: AvatarGroup['variants']['size'];
15
+ /**
16
+ * The maximum number of avatars to display.
17
+ */
18
+ max?: number | string;
19
+ class?: any;
20
+ ui?: AvatarGroup['slots'];
21
+ }
22
+ export interface AvatarGroupSlots {
23
+ default(props?: {}): any;
24
+ }
25
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AvatarGroupProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<AvatarGroupProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<AvatarGroupSlots> & AvatarGroupSlots>;
26
+ export default _default;
27
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
28
+ type __VLS_TypePropsToOption<T> = {
29
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
30
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
31
+ } : {
32
+ type: import('vue').PropType<T[K]>;
33
+ required: true;
34
+ };
35
+ };
36
+ type __VLS_WithTemplateSlots<T, S> = T & {
37
+ new (): {
38
+ $slots: S;
39
+ };
40
+ };
@@ -1,77 +1,48 @@
1
- <script lang="ts">
2
- import type { VariantProps } from 'tailwind-variants'
3
- import type { AppConfig } from '@nuxt/schema'
4
- import _appConfig from '#build/app.config'
5
- import theme from '#build/ui/badge'
6
- import type { UseComponentIconsProps } from '../composables/useComponentIcons'
7
- import { tv } from '../utils/tv'
8
- import type { AvatarProps } from '../types'
9
-
10
- const appConfigBadge = _appConfig as AppConfig & { ui: { badge: Partial<typeof theme> } }
11
-
12
- const badge = tv({ extend: tv(theme), ...(appConfigBadge.ui?.badge || {}) })
13
-
14
- type BadgeVariants = VariantProps<typeof badge>
15
-
16
- export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
17
- /**
18
- * The element or component this component should render as.
19
- * @defaultValue 'span'
20
- */
21
- as?: any
22
- label?: string | number
23
- /**
24
- * @defaultValue 'primary'
25
- */
26
- color?: BadgeVariants['color']
27
- /**
28
- * @defaultValue 'solid'
29
- */
30
- variant?: BadgeVariants['variant']
31
- /**
32
- * @defaultValue 'md'
33
- */
34
- size?: BadgeVariants['size']
35
- class?: any
36
- ui?: Partial<typeof badge.slots>
37
- }
38
-
39
- export interface BadgeSlots {
40
- leading(props?: {}): any
41
- default(props?: {}): any
42
- trailing(props?: {}): any
43
- }
1
+ <script>
2
+ import theme from "#build/ui/badge";
44
3
  </script>
45
4
 
46
- <script setup lang="ts">
47
- import { computed } from 'vue'
48
- import { Primitive } from 'reka-ui'
49
- import { useButtonGroup } from '../composables/useButtonGroup'
50
- import { useComponentIcons } from '../composables/useComponentIcons'
51
- import UIcon from './Icon.vue'
52
- import UAvatar from './Avatar.vue'
53
-
54
- const props = withDefaults(defineProps<BadgeProps>(), {
55
- as: 'span'
56
- })
57
- defineSlots<BadgeSlots>()
58
-
59
- const { orientation, size: buttonGroupSize } = useButtonGroup<BadgeProps>(props)
60
- const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
61
-
62
- const ui = computed(() => badge({
5
+ <script setup>
6
+ import { computed } from "vue";
7
+ import { Primitive } from "reka-ui";
8
+ import { useAppConfig } from "#imports";
9
+ import { useButtonGroup } from "../composables/useButtonGroup";
10
+ import { useComponentIcons } from "../composables/useComponentIcons";
11
+ import { tv } from "../utils/tv";
12
+ import UIcon from "./Icon.vue";
13
+ import UAvatar from "./Avatar.vue";
14
+ const props = defineProps({
15
+ as: { type: null, required: false, default: "span" },
16
+ label: { type: [String, Number], required: false },
17
+ color: { type: null, required: false },
18
+ variant: { type: null, required: false },
19
+ size: { type: null, required: false },
20
+ class: { type: null, required: false },
21
+ ui: { type: null, required: false },
22
+ icon: { type: String, required: false },
23
+ avatar: { type: Object, required: false },
24
+ leading: { type: Boolean, required: false },
25
+ leadingIcon: { type: String, required: false },
26
+ trailing: { type: Boolean, required: false },
27
+ trailingIcon: { type: String, required: false }
28
+ });
29
+ defineSlots();
30
+ const appConfig = useAppConfig();
31
+ const { orientation, size: buttonGroupSize } = useButtonGroup(props);
32
+ const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
33
+ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.badge || {} })({
63
34
  color: props.color,
64
35
  variant: props.variant,
65
36
  size: buttonGroupSize.value || props.size,
66
37
  buttonGroup: orientation.value
67
- }))
38
+ }));
68
39
  </script>
69
40
 
70
41
  <template>
71
42
  <Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
72
43
  <slot name="leading">
73
44
  <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
74
- <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
45
+ <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
75
46
  </slot>
76
47
 
77
48
  <slot>
@@ -0,0 +1,62 @@
1
+ import type { AppConfig } from '@nuxt/schema';
2
+ import theme from '#build/ui/badge';
3
+ import type { UseComponentIconsProps } from '../composables/useComponentIcons';
4
+ import type { ComponentConfig } from '../types/utils';
5
+ type Badge = ComponentConfig<typeof theme, AppConfig, 'badge'>;
6
+ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
7
+ /**
8
+ * The element or component this component should render as.
9
+ * @defaultValue 'span'
10
+ */
11
+ as?: any;
12
+ label?: string | number;
13
+ /**
14
+ * @defaultValue 'primary'
15
+ */
16
+ color?: Badge['variants']['color'];
17
+ /**
18
+ * @defaultValue 'solid'
19
+ */
20
+ variant?: Badge['variants']['variant'];
21
+ /**
22
+ * @defaultValue 'md'
23
+ */
24
+ size?: Badge['variants']['size'];
25
+ class?: any;
26
+ ui?: Badge['slots'];
27
+ }
28
+ export interface BadgeSlots {
29
+ leading(props?: {}): any;
30
+ default(props?: {}): any;
31
+ trailing(props?: {}): any;
32
+ }
33
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<BadgeProps>, {
34
+ as: string;
35
+ }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<BadgeProps>, {
36
+ as: string;
37
+ }>>> & Readonly<{}>, {
38
+ as: any;
39
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<BadgeSlots> & BadgeSlots>;
40
+ export default _default;
41
+ type __VLS_WithDefaults<P, D> = {
42
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
43
+ default: D[K];
44
+ }> : P[K];
45
+ };
46
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
47
+ type __VLS_TypePropsToOption<T> = {
48
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
49
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
50
+ } : {
51
+ type: import('vue').PropType<T[K]>;
52
+ required: true;
53
+ };
54
+ };
55
+ type __VLS_WithTemplateSlots<T, S> = T & {
56
+ new (): {
57
+ $slots: S;
58
+ };
59
+ };
60
+ type __VLS_PrettifyLocal<T> = {
61
+ [K in keyof T]: T[K];
62
+ } & {};
@@ -1,84 +1,32 @@
1
- <!-- eslint-disable vue/block-tag-newline -->
2
- <script lang="ts">
3
- import type { AppConfig } from '@nuxt/schema'
4
- import _appConfig from '#build/app.config'
5
- import theme from '#build/ui/breadcrumb'
6
- import { tv } from '../utils/tv'
7
- import type { AvatarProps, LinkProps } from '../types'
8
- import type { DynamicSlots, PartialString } from '../types/utils'
9
-
10
- const appConfigBreadcrumb = _appConfig as AppConfig & { ui: { breadcrumb: Partial<typeof theme> } }
11
-
12
- const breadcrumb = tv({ extend: tv(theme), ...(appConfigBreadcrumb.ui?.breadcrumb || {}) })
13
-
14
- export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
15
- label?: string
16
- /**
17
- * @IconifyIcon
18
- */
19
- icon?: string
20
- avatar?: AvatarProps
21
- slot?: string
22
- }
23
-
24
- export interface BreadcrumbProps<T> {
25
- /**
26
- * The element or component this component should render as.
27
- * @defaultValue 'nav'
28
- */
29
- as?: any
30
- items?: T[]
31
- /**
32
- * The icon to use as a separator.
33
- * @defaultValue appConfig.ui.icons.chevronRight
34
- * @IconifyIcon
35
- */
36
- separatorIcon?: string
37
- /**
38
- * The key used to get the label from the item.
39
- * @defaultValue 'label'
40
- */
41
- labelKey?: string
42
- class?: any
43
- ui?: PartialString<typeof breadcrumb.slots>
44
- }
45
-
46
- type SlotProps<T> = (props: { item: T, index: number, active?: boolean }) => any
47
-
48
- export type BreadcrumbSlots<T extends { slot?: string }> = {
49
- 'item': SlotProps<T>
50
- 'item-leading': SlotProps<T>
51
- 'item-label': SlotProps<T>
52
- 'item-trailing': SlotProps<T>
53
- 'separator'(props?: {}): any
54
- } & DynamicSlots<T, SlotProps<T>>
55
-
1
+ <script>
2
+ import theme from "#build/ui/breadcrumb";
56
3
  </script>
57
4
 
58
- <script setup lang="ts" generic="T extends BreadcrumbItem">
59
- import { computed } from 'vue'
60
- import { Primitive } from 'reka-ui'
61
- import { useAppConfig } from '#imports'
62
- import { useLocale } from '../composables/useLocale'
63
- import { get } from '../utils'
64
- import { pickLinkProps } from '../utils/link'
65
- import UIcon from './Icon.vue'
66
- import UAvatar from './Avatar.vue'
67
- import ULinkBase from './LinkBase.vue'
68
- import ULink from './Link.vue'
69
-
70
- const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
71
- as: 'nav',
72
- labelKey: 'label'
73
- })
74
- const slots = defineSlots<BreadcrumbSlots<T>>()
75
- const { dir } = useLocale()
76
- const appConfig = useAppConfig()
77
-
78
- const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
79
-
80
- // eslint-disable-next-line vue/no-dupe-keys
81
- const ui = breadcrumb()
5
+ <script setup>
6
+ import { computed } from "vue";
7
+ import { Primitive } from "reka-ui";
8
+ import { useAppConfig } from "#imports";
9
+ import { useLocale } from "../composables/useLocale";
10
+ import { get } from "../utils";
11
+ import { tv } from "../utils/tv";
12
+ import { pickLinkProps } from "../utils/link";
13
+ import UIcon from "./Icon.vue";
14
+ import UAvatar from "./Avatar.vue";
15
+ import ULinkBase from "./LinkBase.vue";
16
+ import ULink from "./Link.vue";
17
+ const props = defineProps({
18
+ as: { type: null, required: false, default: "nav" },
19
+ items: { type: Array, required: false },
20
+ separatorIcon: { type: String, required: false },
21
+ labelKey: { type: String, required: false, default: "label" },
22
+ class: { type: null, required: false },
23
+ ui: { type: null, required: false }
24
+ });
25
+ const slots = defineSlots();
26
+ const { dir } = useLocale();
27
+ const appConfig = useAppConfig();
28
+ const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight));
29
+ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.breadcrumb || {} })());
82
30
  </script>
83
31
 
84
32
  <template>
@@ -87,26 +35,26 @@ const ui = breadcrumb()
87
35
  <template v-for="(item, index) in items" :key="index">
88
36
  <li :class="ui.item({ class: props.ui?.item })">
89
37
  <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
90
- <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
38
+ <ULinkBase v-bind="slotProps" as="span" :aria-current="active && index === items.length - 1 ? 'page' : void 0" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items.length - 1, disabled: !!item.disabled, to: !!item.to })">
91
39
  <slot :name="item.slot || 'item'" :item="item" :index="index">
92
- <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index">
93
- <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
94
- <UAvatar v-else-if="item.avatar" :size="((props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
40
+ <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="index === items.length - 1" :index="index">
41
+ <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items.length - 1 })" />
42
+ <UAvatar v-else-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items.length - 1 })" />
95
43
  </slot>
96
44
 
97
- <span v-if="get(item, props.labelKey as string) || !!slots[item.slot ? `${item.slot}-label`: 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
98
- <slot :name="item.slot ? `${item.slot}-label`: 'item-label'" :item="item" :active="index === items!.length - 1" :index="index">
99
- {{ get(item, props.labelKey as string) }}
45
+ <span v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
46
+ <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="index === items.length - 1" :index="index">
47
+ {{ get(item, props.labelKey) }}
100
48
  </slot>
101
49
  </span>
102
50
 
103
- <slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="index === items!.length - 1" :index="index" />
51
+ <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="index === items.length - 1" :index="index" />
104
52
  </slot>
105
53
  </ULinkBase>
106
54
  </ULink>
107
55
  </li>
108
56
 
109
- <li v-if="index < items!.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: props.ui?.separator })">
57
+ <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" :class="ui.separator({ class: props.ui?.separator })">
110
58
  <slot name="separator">
111
59
  <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
112
60
  </slot>
@@ -0,0 +1,82 @@
1
+ import type { AppConfig } from '@nuxt/schema';
2
+ import theme from '#build/ui/breadcrumb';
3
+ import type { AvatarProps, LinkProps } from '../types';
4
+ import type { DynamicSlots, ComponentConfig } from '../types/utils';
5
+ type Breadcrumb = ComponentConfig<typeof theme, AppConfig, 'breadcrumb'>;
6
+ export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
7
+ label?: string;
8
+ /**
9
+ * @IconifyIcon
10
+ */
11
+ icon?: string;
12
+ avatar?: AvatarProps;
13
+ slot?: string;
14
+ [key: string]: any;
15
+ }
16
+ export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
17
+ /**
18
+ * The element or component this component should render as.
19
+ * @defaultValue 'nav'
20
+ */
21
+ as?: any;
22
+ items?: T[];
23
+ /**
24
+ * The icon to use as a separator.
25
+ * @defaultValue appConfig.ui.icons.chevronRight
26
+ * @IconifyIcon
27
+ */
28
+ separatorIcon?: string;
29
+ /**
30
+ * The key used to get the label from the item.
31
+ * @defaultValue 'label'
32
+ */
33
+ labelKey?: string;
34
+ class?: any;
35
+ ui?: Breadcrumb['slots'];
36
+ }
37
+ type SlotProps<T extends BreadcrumbItem> = (props: {
38
+ item: T;
39
+ index: number;
40
+ active?: boolean;
41
+ }) => any;
42
+ export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
43
+ 'item': SlotProps<T>;
44
+ 'item-leading': SlotProps<T>;
45
+ 'item-label': SlotProps<T>;
46
+ 'item-trailing': SlotProps<T>;
47
+ 'separator': any;
48
+ } & DynamicSlots<T, 'leading' | 'label' | 'trailing', {
49
+ index: number;
50
+ active?: boolean;
51
+ }>;
52
+ declare const _default: <T extends BreadcrumbItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
53
+ props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BreadcrumbProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
54
+ expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
55
+ attrs: any;
56
+ slots: Readonly<{
57
+ item: SlotProps<T>;
58
+ 'item-leading': SlotProps<T>;
59
+ 'item-label': SlotProps<T>;
60
+ 'item-trailing': SlotProps<T>;
61
+ separator: any;
62
+ } & DynamicSlots<T, "trailing" | "leading" | "label", {
63
+ index: number;
64
+ active?: boolean;
65
+ }>> & {
66
+ item: SlotProps<T>;
67
+ 'item-leading': SlotProps<T>;
68
+ 'item-label': SlotProps<T>;
69
+ 'item-trailing': SlotProps<T>;
70
+ separator: any;
71
+ } & DynamicSlots<T, "trailing" | "leading" | "label", {
72
+ index: number;
73
+ active?: boolean;
74
+ }>;
75
+ emit: {};
76
+ }>) => import("vue").VNode & {
77
+ __ctx?: Awaited<typeof __VLS_setup>;
78
+ };
79
+ export default _default;
80
+ type __VLS_PrettifyLocal<T> = {
81
+ [K in keyof T]: T[K];
82
+ } & {};