@nuxt/ui 3.0.2 → 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 (220) 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 +23 -2
  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 +102 -83
  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 +43 -22
  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.json +5 -5
  56. package/dist/module.mjs +11 -7
  57. package/dist/runtime/components/Accordion.vue +36 -93
  58. package/dist/runtime/components/Accordion.vue.d.ts +91 -0
  59. package/dist/runtime/components/Alert.vue +37 -100
  60. package/dist/runtime/components/Alert.vue.d.ts +96 -0
  61. package/dist/runtime/components/App.vue +28 -34
  62. package/dist/runtime/components/App.vue.d.ts +24 -0
  63. package/dist/runtime/components/Avatar.vue +42 -75
  64. package/dist/runtime/components/Avatar.vue.d.ts +60 -0
  65. package/dist/runtime/components/AvatarGroup.vue +40 -77
  66. package/dist/runtime/components/AvatarGroup.vue.d.ts +40 -0
  67. package/dist/runtime/components/Badge.vue +33 -62
  68. package/dist/runtime/components/Badge.vue.d.ts +62 -0
  69. package/dist/runtime/components/Breadcrumb.vue +37 -90
  70. package/dist/runtime/components/Breadcrumb.vue.d.ts +82 -0
  71. package/dist/runtime/components/Button.vue +95 -104
  72. package/dist/runtime/components/Button.vue.d.ts +73 -0
  73. package/dist/runtime/components/ButtonGroup.vue +20 -46
  74. package/dist/runtime/components/ButtonGroup.vue.d.ts +55 -0
  75. package/dist/runtime/components/Calendar.vue +67 -150
  76. package/dist/runtime/components/Calendar.vue.d.ts +107 -0
  77. package/dist/runtime/components/Card.vue +18 -40
  78. package/dist/runtime/components/Card.vue.d.ts +38 -0
  79. package/dist/runtime/components/Carousel.vue +112 -234
  80. package/dist/runtime/components/Carousel.vue.d.ts +120 -0
  81. package/dist/runtime/components/Checkbox.vue +52 -93
  82. package/dist/runtime/components/Checkbox.vue.d.ts +76 -0
  83. package/dist/runtime/components/CheckboxGroup.vue +121 -0
  84. package/dist/runtime/components/CheckboxGroup.vue.d.ts +75 -0
  85. package/dist/runtime/components/Chip.vue +26 -69
  86. package/dist/runtime/components/Chip.vue.d.ts +71 -0
  87. package/dist/runtime/components/Collapsible.vue +22 -41
  88. package/dist/runtime/components/Collapsible.vue.d.ts +50 -0
  89. package/dist/runtime/components/ColorPicker.vue +111 -197
  90. package/dist/runtime/components/ColorPicker.vue.d.ts +63 -0
  91. package/dist/runtime/components/CommandPalette.vue +96 -237
  92. package/dist/runtime/components/CommandPalette.vue.d.ts +173 -0
  93. package/dist/runtime/components/Container.vue +15 -28
  94. package/dist/runtime/components/Container.vue.d.ts +27 -0
  95. package/dist/runtime/components/ContextMenu.vue +34 -133
  96. package/dist/runtime/components/ContextMenu.vue.d.ts +127 -0
  97. package/dist/runtime/components/ContextMenuContent.vue +73 -81
  98. package/dist/runtime/components/ContextMenuContent.vue.d.ts +105 -0
  99. package/dist/runtime/components/Drawer.vue +49 -83
  100. package/dist/runtime/components/Drawer.vue.d.ts +88 -0
  101. package/dist/runtime/components/DropdownMenu.vue +39 -142
  102. package/dist/runtime/components/DropdownMenu.vue.d.ts +141 -0
  103. package/dist/runtime/components/DropdownMenuContent.vue +78 -88
  104. package/dist/runtime/components/DropdownMenuContent.vue.d.ts +55 -0
  105. package/dist/runtime/components/Form.vue +135 -220
  106. package/dist/runtime/components/Form.vue.d.ts +66 -0
  107. package/dist/runtime/components/FormField.vue +35 -77
  108. package/dist/runtime/components/FormField.vue.d.ts +70 -0
  109. package/dist/runtime/components/Icon.vue +12 -19
  110. package/dist/runtime/components/Icon.vue.d.ts +17 -0
  111. package/dist/runtime/components/Input.vue +82 -140
  112. package/dist/runtime/components/Input.vue.d.ts +91 -0
  113. package/dist/runtime/components/InputMenu.vue +185 -332
  114. package/dist/runtime/components/InputMenu.vue.d.ts +312 -0
  115. package/dist/runtime/components/InputNumber.vue +71 -133
  116. package/dist/runtime/components/InputNumber.vue.d.ts +193 -0
  117. package/dist/runtime/components/Kbd.vue +20 -46
  118. package/dist/runtime/components/Kbd.vue.d.ts +55 -0
  119. package/dist/runtime/components/Link.vue +98 -176
  120. package/dist/runtime/components/Link.vue.d.ts +124 -0
  121. package/dist/runtime/components/LinkBase.vue +33 -42
  122. package/dist/runtime/components/LinkBase.vue.d.ts +48 -0
  123. package/dist/runtime/components/Modal.vue +53 -116
  124. package/dist/runtime/components/Modal.vue.d.ts +109 -0
  125. package/dist/runtime/components/NavigationMenu.vue +77 -209
  126. package/dist/runtime/components/NavigationMenu.vue.d.ts +159 -0
  127. package/dist/runtime/components/OverlayProvider.vue +14 -18
  128. package/dist/runtime/components/OverlayProvider.vue.d.ts +2 -0
  129. package/dist/runtime/components/Pagination.vue +46 -140
  130. package/dist/runtime/components/Pagination.vue.d.ts +143 -0
  131. package/dist/runtime/components/PinInput.vue +61 -78
  132. package/dist/runtime/components/PinInput.vue.d.ts +68 -0
  133. package/dist/runtime/components/Popover.vue +47 -84
  134. package/dist/runtime/components/Popover.vue.d.ts +80 -0
  135. package/dist/runtime/components/Progress.vue +70 -131
  136. package/dist/runtime/components/Progress.vue.d.ts +97 -0
  137. package/dist/runtime/components/RadioGroup.vue +70 -132
  138. package/dist/runtime/components/RadioGroup.vue.d.ts +88 -0
  139. package/dist/runtime/components/Select.vue +110 -224
  140. package/dist/runtime/components/Select.vue.d.ts +139 -0
  141. package/dist/runtime/components/SelectMenu.vue +161 -310
  142. package/dist/runtime/components/SelectMenu.vue.d.ts +184 -0
  143. package/dist/runtime/components/Separator.vue +29 -71
  144. package/dist/runtime/components/Separator.vue.d.ts +75 -0
  145. package/dist/runtime/components/Skeleton.vue +21 -23
  146. package/dist/runtime/components/Skeleton.vue.d.ts +26 -0
  147. package/dist/runtime/components/Slideover.vue +53 -120
  148. package/dist/runtime/components/Slideover.vue.d.ts +111 -0
  149. package/dist/runtime/components/Slider.vue +46 -84
  150. package/dist/runtime/components/Slider.vue.d.ts +71 -0
  151. package/dist/runtime/components/Stepper.vue +45 -115
  152. package/dist/runtime/components/Stepper.vue.d.ts +89 -0
  153. package/dist/runtime/components/Switch.vue +45 -93
  154. package/dist/runtime/components/Switch.vue.d.ts +73 -0
  155. package/dist/runtime/components/Table.vue +163 -267
  156. package/dist/runtime/components/Table.vue.d.ts +183 -0
  157. package/dist/runtime/components/Tabs.vue +41 -107
  158. package/dist/runtime/components/Tabs.vue.d.ts +104 -0
  159. package/dist/runtime/components/Textarea.vue +113 -158
  160. package/dist/runtime/components/Textarea.vue.d.ts +95 -0
  161. package/dist/runtime/components/Toast.vue +49 -110
  162. package/dist/runtime/components/Toast.vue.d.ts +95 -0
  163. package/dist/runtime/components/Toaster.vue +70 -107
  164. package/dist/runtime/components/Toaster.vue.d.ts +63 -0
  165. package/dist/runtime/components/Tooltip.vue +38 -65
  166. package/dist/runtime/components/Tooltip.vue.d.ts +65 -0
  167. package/dist/runtime/components/Tree.vue +59 -166
  168. package/dist/runtime/components/Tree.vue.d.ts +128 -0
  169. package/dist/runtime/composables/defineShortcuts.d.ts +1 -1
  170. package/dist/runtime/composables/useAvatarGroup.d.ts +1 -1
  171. package/dist/runtime/composables/useButtonGroup.d.ts +2 -2
  172. package/dist/runtime/composables/useFormField.d.ts +2 -2
  173. package/dist/runtime/composables/useOverlay.d.ts +14 -7
  174. package/dist/runtime/composables/useOverlay.js +14 -6
  175. package/dist/runtime/composables/usePortal.d.ts +6 -0
  176. package/dist/runtime/composables/usePortal.js +17 -0
  177. package/dist/runtime/index.css +1 -1
  178. package/dist/runtime/inertia/components/Link.vue +146 -0
  179. package/dist/runtime/inertia/components/Link.vue.d.ts +92 -0
  180. package/dist/runtime/inertia/stubs.d.ts +43 -0
  181. package/dist/runtime/inertia/stubs.js +82 -0
  182. package/dist/runtime/locale/bg.d.ts +3 -0
  183. package/dist/runtime/locale/bg.js +54 -0
  184. package/dist/runtime/locale/index.d.ts +5 -1
  185. package/dist/runtime/locale/index.js +5 -1
  186. package/dist/runtime/locale/kk.d.ts +3 -0
  187. package/dist/runtime/locale/kk.js +54 -0
  188. package/dist/runtime/locale/tj.d.ts +3 -0
  189. package/dist/runtime/locale/tj.js +54 -0
  190. package/dist/runtime/locale/ug_cn.d.ts +3 -0
  191. package/dist/runtime/locale/ug_cn.js +55 -0
  192. package/dist/runtime/types/form.d.ts +4 -1
  193. package/dist/runtime/types/index.d.ts +1 -0
  194. package/dist/runtime/types/index.js +1 -0
  195. package/dist/runtime/types/utils.d.ts +47 -7
  196. package/dist/runtime/utils/link.d.ts +3 -3
  197. package/dist/runtime/utils/link.js +1 -0
  198. package/dist/runtime/utils/tv.js +2 -2
  199. package/dist/runtime/vue/components/Icon.vue +7 -8
  200. package/dist/runtime/vue/components/Icon.vue.d.ts +14 -0
  201. package/dist/runtime/vue/components/Link.vue +118 -202
  202. package/dist/runtime/vue/components/Link.vue.d.ts +124 -0
  203. package/dist/runtime/vue/stubs.d.ts +2 -2
  204. package/dist/shared/{ui.BkNUP964.mjs → ui.D7lOOabO.mjs} +621 -362
  205. package/dist/types.d.mts +3 -5
  206. package/dist/unplugin.d.mts +4 -0
  207. package/dist/unplugin.mjs +25 -4
  208. package/dist/vite.mjs +1 -1
  209. package/package.json +94 -53
  210. package/dist/module.cjs +0 -62
  211. package/dist/module.d.cts +0 -45
  212. package/dist/module.d.ts +0 -45
  213. package/dist/shared/ui.BL-XB3u1.cjs +0 -3555
  214. package/dist/types.d.ts +0 -7
  215. package/dist/unplugin.cjs +0 -232
  216. package/dist/unplugin.d.cts +0 -62
  217. package/dist/unplugin.d.ts +0 -62
  218. package/dist/vite.cjs +0 -23
  219. package/dist/vite.d.cts +0 -15
  220. 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,85 +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
- [key: string]: any
23
- }
24
-
25
- export interface BreadcrumbProps<T extends BreadcrumbItem = BreadcrumbItem> {
26
- /**
27
- * The element or component this component should render as.
28
- * @defaultValue 'nav'
29
- */
30
- as?: any
31
- items?: T[]
32
- /**
33
- * The icon to use as a separator.
34
- * @defaultValue appConfig.ui.icons.chevronRight
35
- * @IconifyIcon
36
- */
37
- separatorIcon?: string
38
- /**
39
- * The key used to get the label from the item.
40
- * @defaultValue 'label'
41
- */
42
- labelKey?: string
43
- class?: any
44
- ui?: PartialString<typeof breadcrumb.slots>
45
- }
46
-
47
- type SlotProps<T extends BreadcrumbItem> = (props: { item: T, index: number, active?: boolean }) => any
48
-
49
- export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
50
- 'item': SlotProps<T>
51
- 'item-leading': SlotProps<T>
52
- 'item-label': SlotProps<T>
53
- 'item-trailing': SlotProps<T>
54
- 'separator': any
55
- } & DynamicSlots<T, 'leading' | 'label' | 'trailing', { index: number, active?: boolean }>
56
-
1
+ <script>
2
+ import theme from "#build/ui/breadcrumb";
57
3
  </script>
58
4
 
59
- <script setup lang="ts" generic="T extends BreadcrumbItem">
60
- import { computed } from 'vue'
61
- import { Primitive } from 'reka-ui'
62
- import { useAppConfig } from '#imports'
63
- import { useLocale } from '../composables/useLocale'
64
- import { get } from '../utils'
65
- import { pickLinkProps } from '../utils/link'
66
- import UIcon from './Icon.vue'
67
- import UAvatar from './Avatar.vue'
68
- import ULinkBase from './LinkBase.vue'
69
- import ULink from './Link.vue'
70
-
71
- const props = withDefaults(defineProps<BreadcrumbProps<T>>(), {
72
- as: 'nav',
73
- labelKey: 'label'
74
- })
75
- const slots = defineSlots<BreadcrumbSlots<T>>()
76
- const { dir } = useLocale()
77
- const appConfig = useAppConfig()
78
-
79
- const separatorIcon = computed(() => props.separatorIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
80
-
81
- // eslint-disable-next-line vue/no-dupe-keys
82
- 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 || {} })());
83
30
  </script>
84
31
 
85
32
  <template>
@@ -88,26 +35,26 @@ const ui = breadcrumb()
88
35
  <template v-for="(item, index) in items" :key="index">
89
36
  <li :class="ui.item({ class: props.ui?.item })">
90
37
  <ULink v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
91
- <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 })">
92
- <slot :name="((item.slot || 'item') as keyof BreadcrumbSlots<T>)" :item="item" :index="index">
93
- <slot :name="((item.slot ? `${item.slot}-leading`: 'item-leading') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
94
- <UIcon v-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
95
- <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 })" />
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 })">
39
+ <slot :name="item.slot || 'item'" :item="item" :index="index">
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 })" />
96
43
  </slot>
97
44
 
98
- <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>]" :class="ui.linkLabel({ class: props.ui?.linkLabel })">
99
- <slot :name="((item.slot ? `${item.slot}-label`: 'item-label') as keyof BreadcrumbSlots<T>)" :item="item" :active="index === items!.length - 1" :index="index">
100
- {{ 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) }}
101
48
  </slot>
102
49
  </span>
103
50
 
104
- <slot :name="((item.slot ? `${item.slot}-trailing`: 'item-trailing') as keyof BreadcrumbSlots<T>)" :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" />
105
52
  </slot>
106
53
  </ULinkBase>
107
54
  </ULink>
108
55
  </li>
109
56
 
110
- <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 })">
111
58
  <slot name="separator">
112
59
  <UIcon :name="separatorIcon" :class="ui.separatorIcon({ class: props.ui?.separatorIcon })" />
113
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
+ } & {};