@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,94 +1,56 @@
1
- <script lang="ts">
2
- import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
3
- import type { DialogContentProps, DialogContentEmits } from 'reka-ui'
4
- import type { AppConfig } from '@nuxt/schema'
5
- import _appConfig from '#build/app.config'
6
- import theme from '#build/ui/drawer'
7
- import { tv } from '../utils/tv'
8
- import type { EmitsToProps } from '../types/utils'
9
-
10
- const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
11
-
12
- const drawer = tv({ extend: tv(theme), ...(appConfigDrawer.ui?.drawer || {}) })
13
-
14
- export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
15
- /**
16
- * The element or component this component should render as.
17
- * @defaultValue 'div'
18
- */
19
- as?: any
20
- title?: string
21
- description?: string
22
- /**
23
- * Whether to inset the drawer from the edges.
24
- * @defaultValue false
25
- */
26
- inset?: boolean
27
- /** The content of the drawer. */
28
- content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>
29
- /**
30
- * Render an overlay behind the drawer.
31
- * @defaultValue true
32
- */
33
- overlay?: boolean
34
- /**
35
- * Render a handle on the drawer.
36
- * @defaultValue true
37
- */
38
- handle?: boolean
39
- /**
40
- * Render the drawer in a portal.
41
- * @defaultValue true
42
- */
43
- portal?: boolean
44
- /**
45
- * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
46
- */
47
- fadeFromIndex?: any
48
- class?: any
49
- ui?: Partial<typeof drawer.slots>
50
- }
51
-
52
- export interface DrawerEmits extends DrawerRootEmits {}
53
-
54
- export interface DrawerSlots {
55
- default(props?: {}): any
56
- content(props?: {}): any
57
- header(props?: {}): any
58
- title(props?: {}): any
59
- description(props?: {}): any
60
- body(props?: {}): any
61
- footer(props?: {}): any
62
- }
1
+ <script>
2
+ import theme from "#build/ui/drawer";
63
3
  </script>
64
4
 
65
- <script setup lang="ts">
66
- import { computed, toRef } from 'vue'
67
- import { useForwardPropsEmits } from 'reka-ui'
68
- import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
69
- import { reactivePick } from '@vueuse/core'
70
-
71
- const props = withDefaults(defineProps<DrawerProps>(), {
72
- direction: 'bottom',
73
- portal: true,
74
- overlay: true,
75
- handle: true,
76
- modal: true,
77
- dismissible: true
78
- })
79
- const emits = defineEmits<DrawerEmits>()
80
- const slots = defineSlots<DrawerSlots>()
81
-
82
- const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints', 'fadeFromIndex'), emits)
83
- const contentProps = toRef(() => props.content)
5
+ <script setup>
6
+ import { computed, toRef } from "vue";
7
+ import { useForwardPropsEmits } from "reka-ui";
8
+ import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from "vaul-vue";
9
+ import { reactivePick } from "@vueuse/core";
10
+ import { useAppConfig } from "#imports";
11
+ import { usePortal } from "../composables/usePortal";
12
+ import { tv } from "../utils/tv";
13
+ const props = defineProps({
14
+ as: { type: null, required: false },
15
+ title: { type: String, required: false },
16
+ description: { type: String, required: false },
17
+ inset: { type: Boolean, required: false },
18
+ content: { type: Object, required: false },
19
+ overlay: { type: Boolean, required: false, default: true },
20
+ handle: { type: Boolean, required: false, default: true },
21
+ portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
22
+ class: { type: null, required: false },
23
+ ui: { type: null, required: false },
24
+ activeSnapPoint: { type: [Number, String, null], required: false },
25
+ closeThreshold: { type: Number, required: false },
26
+ shouldScaleBackground: { type: Boolean, required: false },
27
+ setBackgroundColorOnScale: { type: Boolean, required: false },
28
+ scrollLockTimeout: { type: Number, required: false },
29
+ fixed: { type: Boolean, required: false },
30
+ dismissible: { type: Boolean, required: false, default: true },
31
+ modal: { type: Boolean, required: false, default: true },
32
+ open: { type: Boolean, required: false },
33
+ defaultOpen: { type: Boolean, required: false },
34
+ nested: { type: Boolean, required: false },
35
+ direction: { type: String, required: false, default: "bottom" },
36
+ noBodyStyles: { type: Boolean, required: false },
37
+ handleOnly: { type: Boolean, required: false },
38
+ preventScrollRestoration: { type: Boolean, required: false },
39
+ snapPoints: { type: Array, required: false }
40
+ });
41
+ const emits = defineEmits(["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"]);
42
+ const slots = defineSlots();
43
+ const appConfig = useAppConfig();
44
+ const rootProps = useForwardPropsEmits(reactivePick(props, "activeSnapPoint", "closeThreshold", "shouldScaleBackground", "setBackgroundColorOnScale", "scrollLockTimeout", "fixed", "dismissible", "modal", "open", "defaultOpen", "nested", "direction", "noBodyStyles", "handleOnly", "preventScrollRestoration", "snapPoints"), emits);
45
+ const portalProps = usePortal(toRef(() => props.portal));
46
+ const contentProps = toRef(() => props.content);
84
47
  const contentEvents = {
85
- closeAutoFocus: (e: Event) => e.preventDefault()
86
- }
87
-
88
- const ui = computed(() => drawer({
48
+ closeAutoFocus: (e) => e.preventDefault()
49
+ };
50
+ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {} })({
89
51
  direction: props.direction,
90
52
  inset: props.inset
91
- }))
53
+ }));
92
54
  </script>
93
55
 
94
56
  <template>
@@ -97,7 +59,7 @@ const ui = computed(() => drawer({
97
59
  <slot />
98
60
  </DrawerTrigger>
99
61
 
100
- <DrawerPortal :disabled="!portal">
62
+ <DrawerPortal v-bind="portalProps">
101
63
  <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
102
64
 
103
65
  <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
@@ -0,0 +1,88 @@
1
+ import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue';
2
+ import type { DialogContentProps, DialogContentEmits } from 'reka-ui';
3
+ import type { AppConfig } from '@nuxt/schema';
4
+ import theme from '#build/ui/drawer';
5
+ import type { EmitsToProps, ComponentConfig } from '../types/utils';
6
+ type Drawer = ComponentConfig<typeof theme, AppConfig, 'drawer'>;
7
+ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
8
+ /**
9
+ * The element or component this component should render as.
10
+ * @defaultValue 'div'
11
+ */
12
+ as?: any;
13
+ title?: string;
14
+ description?: string;
15
+ /**
16
+ * Whether to inset the drawer from the edges.
17
+ * @defaultValue false
18
+ */
19
+ inset?: boolean;
20
+ /** The content of the drawer. */
21
+ content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DialogContentEmits>>;
22
+ /**
23
+ * Render an overlay behind the drawer.
24
+ * @defaultValue true
25
+ */
26
+ overlay?: boolean;
27
+ /**
28
+ * Render a handle on the drawer.
29
+ * @defaultValue true
30
+ */
31
+ handle?: boolean;
32
+ /**
33
+ * Render the drawer in a portal.
34
+ * @defaultValue true
35
+ */
36
+ portal?: boolean | string | HTMLElement;
37
+ class?: any;
38
+ ui?: Drawer['slots'];
39
+ }
40
+ export interface DrawerEmits extends DrawerRootEmits {
41
+ }
42
+ export interface DrawerSlots {
43
+ default(props?: {}): any;
44
+ content(props?: {}): any;
45
+ header(props?: {}): any;
46
+ title(props?: {}): any;
47
+ description(props?: {}): any;
48
+ body(props?: {}): any;
49
+ footer(props?: {}): any;
50
+ }
51
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<DrawerProps>, {
52
+ direction: string;
53
+ portal: boolean;
54
+ overlay: boolean;
55
+ handle: boolean;
56
+ modal: boolean;
57
+ dismissible: boolean;
58
+ }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
59
+ modal: boolean;
60
+ portal: boolean | string | HTMLElement;
61
+ overlay: boolean;
62
+ direction: import("vaul-vue").DrawerDirection;
63
+ dismissible: boolean;
64
+ handle: boolean;
65
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, Readonly<DrawerSlots> & DrawerSlots>;
66
+ export default _default;
67
+ type __VLS_WithDefaults<P, D> = {
68
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
69
+ default: D[K];
70
+ }> : P[K];
71
+ };
72
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
73
+ type __VLS_TypePropsToOption<T> = {
74
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
75
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
76
+ } : {
77
+ type: import('vue').PropType<T[K]>;
78
+ required: true;
79
+ };
80
+ };
81
+ type __VLS_WithTemplateSlots<T, S> = T & {
82
+ new (): {
83
+ $slots: S;
84
+ };
85
+ };
86
+ type __VLS_PrettifyLocal<T> = {
87
+ [K in keyof T]: T[K];
88
+ } & {};
@@ -1,135 +1,43 @@
1
- <!-- eslint-disable vue/block-tag-newline -->
2
- <script lang="ts">
3
- import type { VariantProps } from 'tailwind-variants'
4
- import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui'
5
- import type { AppConfig } from '@nuxt/schema'
6
- import _appConfig from '#build/app.config'
7
- import theme from '#build/ui/dropdown-menu'
8
- import { tv } from '../utils/tv'
9
- import type { AvatarProps, KbdProps, LinkProps } from '../types'
10
- import type { DynamicSlots, PartialString, EmitsToProps } from '../types/utils'
11
-
12
- const appConfigDropdownMenu = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof theme> } }
13
-
14
- const dropdownMenu = tv({ extend: tv(theme), ...(appConfigDropdownMenu.ui?.dropdownMenu || {}) })
15
-
16
- type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
17
-
18
- export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
19
- label?: string
20
- /**
21
- * @IconifyIcon
22
- */
23
- icon?: string
24
- color?: DropdownMenuVariants['color']
25
- avatar?: AvatarProps
26
- content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
27
- kbds?: KbdProps['value'][] | KbdProps[]
28
- /**
29
- * The item type.
30
- * @defaultValue 'link'
31
- */
32
- type?: 'label' | 'separator' | 'link' | 'checkbox'
33
- slot?: string
34
- loading?: boolean
35
- disabled?: boolean
36
- checked?: boolean
37
- open?: boolean
38
- defaultOpen?: boolean
39
- children?: DropdownMenuItem[] | DropdownMenuItem[][]
40
- onSelect?(e: Event): void
41
- onUpdateChecked?(checked: boolean): void
42
- }
43
-
44
- export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'> {
45
- /**
46
- * @defaultValue 'md'
47
- */
48
- size?: DropdownMenuVariants['size']
49
- items?: T[] | T[][]
50
- /**
51
- * The icon displayed when an item is checked.
52
- * @defaultValue appConfig.ui.icons.check
53
- * @IconifyIcon
54
- */
55
- checkedIcon?: string
56
- /**
57
- * The icon displayed when an item is loading.
58
- * @defaultValue appConfig.ui.icons.loading
59
- * @IconifyIcon
60
- */
61
- loadingIcon?: string
62
- /**
63
- * The icon displayed when the item is an external link.
64
- * Set to `false` to hide the external icon.
65
- * @defaultValue appConfig.ui.icons.external
66
- * @IconifyIcon
67
- */
68
- externalIcon?: boolean | string
69
- /**
70
- * The content of the menu.
71
- * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
72
- */
73
- content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>
74
- /**
75
- * Display an arrow alongside the menu.
76
- * @defaultValue false
77
- */
78
- arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>
79
- /**
80
- * Render the menu in a portal.
81
- * @defaultValue true
82
- */
83
- portal?: boolean
84
- /**
85
- * The key used to get the label from the item.
86
- * @defaultValue 'label'
87
- */
88
- labelKey?: string
89
- disabled?: boolean
90
- class?: any
91
- ui?: PartialString<typeof dropdownMenu.slots>
92
- }
93
-
94
- export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
95
-
96
- type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
97
-
98
- export type DropdownMenuSlots<T extends { slot?: string }> = {
99
- 'default'(props: { open: boolean }): any
100
- 'item': SlotProps<T>
101
- 'item-leading': SlotProps<T>
102
- 'item-label': SlotProps<T>
103
- 'item-trailing': SlotProps<T>
104
- } & DynamicSlots<T, SlotProps<T>>
105
-
1
+ <script>
2
+ import theme from "#build/ui/dropdown-menu";
106
3
  </script>
107
4
 
108
- <script setup lang="ts" generic="T extends DropdownMenuItem">
109
- import { computed, toRef } from 'vue'
110
- import { defu } from 'defu'
111
- import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from 'reka-ui'
112
- import { reactivePick } from '@vueuse/core'
113
- import { omit } from '../utils'
114
- import UDropdownMenuContent from './DropdownMenuContent.vue'
115
-
116
- const props = withDefaults(defineProps<DropdownMenuProps<T>>(), {
117
- portal: true,
118
- modal: true,
119
- externalIcon: true,
120
- labelKey: 'label'
121
- })
122
- const emits = defineEmits<DropdownMenuEmits>()
123
- const slots = defineSlots<DropdownMenuSlots<T>>()
124
-
125
- const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'modal'), emits)
126
- const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as DropdownMenuContentProps)
127
- const arrowProps = toRef(() => props.arrow as DropdownMenuArrowProps)
128
- const proxySlots = omit(slots, ['default']) as Record<string, DropdownMenuSlots<T>[string]>
129
-
130
- const ui = computed(() => dropdownMenu({
5
+ <script setup>
6
+ import { computed, toRef } from "vue";
7
+ import { defu } from "defu";
8
+ import { DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuArrow, useForwardPropsEmits } from "reka-ui";
9
+ import { reactivePick } from "@vueuse/core";
10
+ import { useAppConfig } from "#imports";
11
+ import { omit } from "../utils";
12
+ import { tv } from "../utils/tv";
13
+ import UDropdownMenuContent from "./DropdownMenuContent.vue";
14
+ const props = defineProps({
15
+ size: { type: null, required: false },
16
+ items: { type: null, required: false },
17
+ checkedIcon: { type: String, required: false },
18
+ loadingIcon: { type: String, required: false },
19
+ externalIcon: { type: [Boolean, String], required: false, default: true },
20
+ content: { type: Object, required: false },
21
+ arrow: { type: [Boolean, Object], required: false },
22
+ portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
23
+ labelKey: { type: null, required: false, default: "label" },
24
+ disabled: { type: Boolean, required: false },
25
+ class: { type: null, required: false },
26
+ ui: { type: null, required: false },
27
+ defaultOpen: { type: Boolean, required: false },
28
+ open: { type: Boolean, required: false },
29
+ modal: { type: Boolean, required: false, default: true }
30
+ });
31
+ const emits = defineEmits(["update:open"]);
32
+ const slots = defineSlots();
33
+ const appConfig = useAppConfig();
34
+ const rootProps = useForwardPropsEmits(reactivePick(props, "defaultOpen", "open", "modal"), emits);
35
+ const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8 }));
36
+ const arrowProps = toRef(() => props.arrow);
37
+ const proxySlots = omit(slots, ["default"]);
38
+ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.dropdownMenu || {} })({
131
39
  size: props.size
132
- }))
40
+ }));
133
41
  </script>
134
42
 
135
43
  <template>
@@ -0,0 +1,141 @@
1
+ import type { DropdownMenuRootProps, DropdownMenuRootEmits, DropdownMenuContentProps, DropdownMenuContentEmits, DropdownMenuArrowProps } from 'reka-ui';
2
+ import type { AppConfig } from '@nuxt/schema';
3
+ import theme from '#build/ui/dropdown-menu';
4
+ import type { AvatarProps, KbdProps, LinkProps } from '../types';
5
+ import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
6
+ type DropdownMenu = ComponentConfig<typeof theme, AppConfig, 'dropdownMenu'>;
7
+ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
8
+ label?: string;
9
+ /**
10
+ * @IconifyIcon
11
+ */
12
+ icon?: string;
13
+ color?: DropdownMenu['variants']['color'];
14
+ avatar?: AvatarProps;
15
+ content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
16
+ kbds?: KbdProps['value'][] | KbdProps[];
17
+ /**
18
+ * The item type.
19
+ * @defaultValue 'link'
20
+ */
21
+ type?: 'label' | 'separator' | 'link' | 'checkbox';
22
+ slot?: string;
23
+ loading?: boolean;
24
+ disabled?: boolean;
25
+ checked?: boolean;
26
+ open?: boolean;
27
+ defaultOpen?: boolean;
28
+ children?: ArrayOrNested<DropdownMenuItem>;
29
+ onSelect?(e: Event): void;
30
+ onUpdateChecked?(checked: boolean): void;
31
+ [key: string]: any;
32
+ }
33
+ export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {
34
+ /**
35
+ * @defaultValue 'md'
36
+ */
37
+ size?: DropdownMenu['variants']['size'];
38
+ items?: T;
39
+ /**
40
+ * The icon displayed when an item is checked.
41
+ * @defaultValue appConfig.ui.icons.check
42
+ * @IconifyIcon
43
+ */
44
+ checkedIcon?: string;
45
+ /**
46
+ * The icon displayed when an item is loading.
47
+ * @defaultValue appConfig.ui.icons.loading
48
+ * @IconifyIcon
49
+ */
50
+ loadingIcon?: string;
51
+ /**
52
+ * The icon displayed when the item is an external link.
53
+ * Set to `false` to hide the external icon.
54
+ * @defaultValue appConfig.ui.icons.external
55
+ * @IconifyIcon
56
+ */
57
+ externalIcon?: boolean | string;
58
+ /**
59
+ * The content of the menu.
60
+ * @defaultValue { side: 'bottom', sideOffset: 8, collisionPadding: 8 }
61
+ */
62
+ content?: Omit<DropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> & Partial<EmitsToProps<DropdownMenuContentEmits>>;
63
+ /**
64
+ * Display an arrow alongside the menu.
65
+ * @defaultValue false
66
+ */
67
+ arrow?: boolean | Omit<DropdownMenuArrowProps, 'as' | 'asChild'>;
68
+ /**
69
+ * Render the menu in a portal.
70
+ * @defaultValue true
71
+ */
72
+ portal?: boolean | string | HTMLElement;
73
+ /**
74
+ * The key used to get the label from the item.
75
+ * @defaultValue 'label'
76
+ */
77
+ labelKey?: keyof NestedItem<T>;
78
+ disabled?: boolean;
79
+ class?: any;
80
+ ui?: DropdownMenu['slots'];
81
+ }
82
+ export interface DropdownMenuEmits extends DropdownMenuRootEmits {
83
+ }
84
+ type SlotProps<T extends DropdownMenuItem> = (props: {
85
+ item: T;
86
+ active?: boolean;
87
+ index: number;
88
+ }) => any;
89
+ export type DropdownMenuSlots<A extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>, T extends NestedItem<A> = NestedItem<A>> = {
90
+ 'default'(props: {
91
+ open: boolean;
92
+ }): any;
93
+ 'item': SlotProps<T>;
94
+ 'item-leading': SlotProps<T>;
95
+ 'item-label': SlotProps<T>;
96
+ 'item-trailing': SlotProps<T>;
97
+ 'content-top': (props?: {}) => any;
98
+ 'content-bottom': (props?: {}) => any;
99
+ } & DynamicSlots<MergeTypes<T>, 'leading' | 'label' | 'trailing', {
100
+ active?: boolean;
101
+ index: number;
102
+ }>;
103
+ declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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<{
104
+ props: __VLS_PrettifyLocal<any & DropdownMenuProps<T> & Partial<{}>> & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps);
105
+ expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
106
+ attrs: any;
107
+ slots: Readonly<{
108
+ default(props: {
109
+ open: boolean;
110
+ }): any;
111
+ item: SlotProps<NestedItem<T>>;
112
+ 'item-leading': SlotProps<NestedItem<T>>;
113
+ 'item-label': SlotProps<NestedItem<T>>;
114
+ 'item-trailing': SlotProps<NestedItem<T>>;
115
+ 'content-top': (props?: {}) => any;
116
+ 'content-bottom': (props?: {}) => any;
117
+ } & DynamicSlots<MergeTypes<NestedItem<T>>, "trailing" | "leading" | "label", {
118
+ active?: boolean;
119
+ index: number;
120
+ }>> & {
121
+ default(props: {
122
+ open: boolean;
123
+ }): any;
124
+ item: SlotProps<NestedItem<T>>;
125
+ 'item-leading': SlotProps<NestedItem<T>>;
126
+ 'item-label': SlotProps<NestedItem<T>>;
127
+ 'item-trailing': SlotProps<NestedItem<T>>;
128
+ 'content-top': (props?: {}) => any;
129
+ 'content-bottom': (props?: {}) => any;
130
+ } & DynamicSlots<MergeTypes<NestedItem<T>>, "trailing" | "leading" | "label", {
131
+ active?: boolean;
132
+ index: number;
133
+ }>;
134
+ emit: (evt: "update:open", payload: boolean) => void;
135
+ }>) => import("vue").VNode & {
136
+ __ctx?: Awaited<typeof __VLS_setup>;
137
+ };
138
+ export default _default;
139
+ type __VLS_PrettifyLocal<T> = {
140
+ [K in keyof T]: T[K];
141
+ } & {};