@nuxt/ui 3.1.2 → 3.2.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 (150) hide show
  1. package/.nuxt/ui/avatar.ts +1 -1
  2. package/.nuxt/ui/card.ts +1 -1
  3. package/.nuxt/ui/carousel.ts +1 -1
  4. package/.nuxt/ui/checkbox-group.ts +1 -1
  5. package/.nuxt/ui/command-palette.ts +1 -0
  6. package/.nuxt/ui/context-menu.ts +2 -1
  7. package/.nuxt/ui/drawer.ts +1 -1
  8. package/.nuxt/ui/dropdown-menu.ts +2 -1
  9. package/.nuxt/ui/index.ts +2 -0
  10. package/.nuxt/ui/input-menu.ts +26 -12
  11. package/.nuxt/ui/input-tags.ts +310 -0
  12. package/.nuxt/ui/modal.ts +1 -1
  13. package/.nuxt/ui/navigation-menu.ts +43 -34
  14. package/.nuxt/ui/radio-group.ts +1 -1
  15. package/.nuxt/ui/select-menu.ts +13 -8
  16. package/.nuxt/ui/select.ts +13 -8
  17. package/.nuxt/ui/table.ts +3 -2
  18. package/.nuxt/ui/timeline.ts +321 -0
  19. package/.nuxt/ui/toaster.ts +1 -1
  20. package/.nuxt/ui/tooltip.ts +1 -1
  21. package/.nuxt/ui.css +4 -1
  22. package/cli/templates.mjs +7 -4
  23. package/dist/module.json +1 -1
  24. package/dist/module.mjs +2 -2
  25. package/dist/runtime/components/Alert.vue +0 -1
  26. package/dist/runtime/components/Avatar.vue +10 -2
  27. package/dist/runtime/components/Avatar.vue.d.ts +2 -0
  28. package/dist/runtime/components/Calendar.vue +4 -1
  29. package/dist/runtime/components/Carousel.vue +1 -2
  30. package/dist/runtime/components/Checkbox.vue +1 -1
  31. package/dist/runtime/components/CommandPalette.vue +80 -16
  32. package/dist/runtime/components/CommandPalette.vue.d.ts +32 -8
  33. package/dist/runtime/components/ContextMenuContent.vue +58 -56
  34. package/dist/runtime/components/ContextMenuContent.vue.d.ts +4 -20
  35. package/dist/runtime/components/Drawer.vue +15 -1
  36. package/dist/runtime/components/DropdownMenuContent.vue +60 -58
  37. package/dist/runtime/components/DropdownMenuContent.vue.d.ts +4 -20
  38. package/dist/runtime/components/Form.vue +6 -6
  39. package/dist/runtime/components/Form.vue.d.ts +12 -11
  40. package/dist/runtime/components/Input.vue +1 -0
  41. package/dist/runtime/components/Input.vue.d.ts +7 -0
  42. package/dist/runtime/components/InputMenu.vue +3 -3
  43. package/dist/runtime/components/InputMenu.vue.d.ts +4 -4
  44. package/dist/runtime/components/InputNumber.vue +3 -2
  45. package/dist/runtime/components/InputNumber.vue.d.ts +1 -1
  46. package/dist/runtime/components/InputTags.vue +159 -0
  47. package/dist/runtime/components/InputTags.vue.d.ts +183 -0
  48. package/dist/runtime/components/Modal.vue +16 -15
  49. package/dist/runtime/components/Modal.vue.d.ts +17 -4
  50. package/dist/runtime/components/NavigationMenu.vue +85 -26
  51. package/dist/runtime/components/NavigationMenu.vue.d.ts +30 -17
  52. package/dist/runtime/components/OverlayProvider.vue +2 -2
  53. package/dist/runtime/components/Pagination.vue +1 -1
  54. package/dist/runtime/components/Pagination.vue.d.ts +0 -1
  55. package/dist/runtime/components/PinInput.vue +4 -3
  56. package/dist/runtime/components/PinInput.vue.d.ts +22 -19
  57. package/dist/runtime/components/Popover.vue +4 -0
  58. package/dist/runtime/components/Popover.vue.d.ts +1 -0
  59. package/dist/runtime/components/Progress.vue +2 -1
  60. package/dist/runtime/components/Progress.vue.d.ts +1 -1
  61. package/dist/runtime/components/RadioGroup.vue +2 -2
  62. package/dist/runtime/components/Select.vue +26 -7
  63. package/dist/runtime/components/Select.vue.d.ts +107 -1
  64. package/dist/runtime/components/SelectMenu.vue +27 -8
  65. package/dist/runtime/components/SelectMenu.vue.d.ts +105 -1
  66. package/dist/runtime/components/Slideover.vue +23 -15
  67. package/dist/runtime/components/Slideover.vue.d.ts +17 -4
  68. package/dist/runtime/components/Table.vue +7 -1
  69. package/dist/runtime/components/Table.vue.d.ts +10 -8
  70. package/dist/runtime/components/Tabs.vue +13 -2
  71. package/dist/runtime/components/Tabs.vue.d.ts +4 -1
  72. package/dist/runtime/components/Textarea.vue +4 -1
  73. package/dist/runtime/components/Textarea.vue.d.ts +11 -4
  74. package/dist/runtime/components/Timeline.vue +92 -0
  75. package/dist/runtime/components/Timeline.vue.d.ts +70 -0
  76. package/dist/runtime/components/Toast.vue +4 -5
  77. package/dist/runtime/components/Tree.vue +3 -2
  78. package/dist/runtime/components/Tree.vue.d.ts +1 -1
  79. package/dist/runtime/composables/defineLocale.d.ts +2 -0
  80. package/dist/runtime/composables/defineLocale.js +4 -0
  81. package/dist/runtime/composables/defineShortcuts.js +2 -2
  82. package/dist/runtime/composables/useOverlay.d.ts +2 -1
  83. package/dist/runtime/composables/useOverlay.js +7 -6
  84. package/dist/runtime/locale/ar.js +2 -1
  85. package/dist/runtime/locale/az.js +2 -1
  86. package/dist/runtime/locale/bg.js +2 -1
  87. package/dist/runtime/locale/bn.js +2 -1
  88. package/dist/runtime/locale/ca.js +2 -1
  89. package/dist/runtime/locale/ckb.js +2 -1
  90. package/dist/runtime/locale/cs.js +2 -1
  91. package/dist/runtime/locale/da.js +2 -1
  92. package/dist/runtime/locale/de.js +2 -1
  93. package/dist/runtime/locale/el.js +2 -1
  94. package/dist/runtime/locale/en.js +2 -1
  95. package/dist/runtime/locale/es.js +2 -1
  96. package/dist/runtime/locale/et.js +2 -1
  97. package/dist/runtime/locale/fa_ir.js +2 -1
  98. package/dist/runtime/locale/fi.js +2 -1
  99. package/dist/runtime/locale/fr.js +2 -1
  100. package/dist/runtime/locale/he.js +2 -1
  101. package/dist/runtime/locale/hi.js +2 -1
  102. package/dist/runtime/locale/hu.js +2 -1
  103. package/dist/runtime/locale/hy.js +2 -1
  104. package/dist/runtime/locale/id.js +2 -1
  105. package/dist/runtime/locale/index.d.ts +7 -2
  106. package/dist/runtime/locale/index.js +7 -2
  107. package/dist/runtime/locale/it.js +2 -1
  108. package/dist/runtime/locale/ja.js +2 -1
  109. package/dist/runtime/locale/kk.js +2 -1
  110. package/dist/runtime/locale/km.js +2 -1
  111. package/dist/runtime/locale/ko.js +2 -1
  112. package/dist/runtime/locale/ky.d.ts +3 -0
  113. package/dist/runtime/locale/ky.js +55 -0
  114. package/dist/runtime/locale/lb.d.ts +3 -0
  115. package/dist/runtime/locale/lb.js +55 -0
  116. package/dist/runtime/locale/lt.d.ts +3 -0
  117. package/dist/runtime/locale/lt.js +55 -0
  118. package/dist/runtime/locale/mn.d.ts +3 -0
  119. package/dist/runtime/locale/mn.js +55 -0
  120. package/dist/runtime/locale/ms.d.ts +3 -0
  121. package/dist/runtime/locale/ms.js +55 -0
  122. package/dist/runtime/locale/nb_no.js +2 -1
  123. package/dist/runtime/locale/nl.js +2 -1
  124. package/dist/runtime/locale/pl.js +2 -1
  125. package/dist/runtime/locale/pt.js +2 -1
  126. package/dist/runtime/locale/pt_br.js +2 -1
  127. package/dist/runtime/locale/ro.js +2 -1
  128. package/dist/runtime/locale/ru.js +2 -1
  129. package/dist/runtime/locale/sk.js +2 -1
  130. package/dist/runtime/locale/sl.js +2 -1
  131. package/dist/runtime/locale/sv.js +2 -1
  132. package/dist/runtime/locale/th.js +2 -1
  133. package/dist/runtime/locale/tj.js +2 -1
  134. package/dist/runtime/locale/tr.js +2 -1
  135. package/dist/runtime/locale/ug_cn.js +2 -1
  136. package/dist/runtime/locale/uk.js +2 -1
  137. package/dist/runtime/locale/ur.js +2 -1
  138. package/dist/runtime/locale/uz.js +2 -1
  139. package/dist/runtime/locale/vi.js +2 -1
  140. package/dist/runtime/locale/zh_cn.js +2 -1
  141. package/dist/runtime/locale/zh_tw.js +2 -1
  142. package/dist/runtime/types/form.d.ts +11 -10
  143. package/dist/runtime/types/index.d.ts +2 -0
  144. package/dist/runtime/types/index.js +2 -0
  145. package/dist/runtime/types/locale.d.ts +1 -0
  146. package/dist/runtime/types/utils.d.ts +3 -0
  147. package/dist/shared/{ui.BvUP-pSb.mjs → ui.BPVxSPGY.mjs} +332 -62
  148. package/dist/unplugin.mjs +1 -1
  149. package/dist/vite.mjs +1 -1
  150. package/package.json +35 -36
@@ -28,7 +28,7 @@ const props = defineProps({
28
28
  defaultOpen: { type: Boolean, required: false },
29
29
  modal: { type: Boolean, required: false, default: true }
30
30
  });
31
- const emits = defineEmits(["after:leave", "close:prevent", "update:open"]);
31
+ const emits = defineEmits(["after:leave", "after:enter", "close:prevent", "update:open"]);
32
32
  const slots = defineSlots();
33
33
  const { t } = useLocale();
34
34
  const appConfig = useAppConfig();
@@ -40,14 +40,14 @@ const contentEvents = computed(() => {
40
40
  closeAutoFocus: (e) => e.preventDefault()
41
41
  };
42
42
  if (!props.dismissible) {
43
- const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown", "closeAutoFocus"];
43
+ const events = ["pointerDownOutside", "interactOutside", "escapeKeyDown"];
44
44
  return events.reduce((acc, curr) => {
45
45
  acc[curr] = (e) => {
46
46
  e.preventDefault();
47
47
  emits("close:prevent");
48
48
  };
49
49
  return acc;
50
- }, {});
50
+ }, defaultEvents);
51
51
  }
52
52
  return defaultEvents;
53
53
  });
@@ -58,7 +58,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
58
58
  </script>
59
59
 
60
60
  <template>
61
- <DialogRoot v-slot="{ open }" v-bind="rootProps">
61
+ <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
62
62
  <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
63
63
  <slot :open="open" />
64
64
  </DialogTrigger>
@@ -66,7 +66,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
66
66
  <DialogPortal v-bind="portalProps">
67
67
  <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
68
68
 
69
- <DialogContent :data-side="side" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents">
69
+ <DialogContent
70
+ :data-side="side"
71
+ :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
72
+ v-bind="contentProps"
73
+ @after-enter="emits('after:enter')"
74
+ @after-leave="emits('after:leave')"
75
+ v-on="contentEvents"
76
+ >
70
77
  <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
71
78
  <DialogTitle v-if="title || !!slots.title">
72
79
  <slot name="title">
@@ -81,9 +88,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
81
88
  </DialogDescription>
82
89
  </VisuallyHidden>
83
90
 
84
- <slot name="content">
85
- <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
86
- <slot name="header">
91
+ <slot name="content" :close="close">
92
+ <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
93
+ <slot name="header" :close="close">
87
94
  <div :class="ui.wrapper({ class: props.ui?.wrapper })">
88
95
  <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
89
96
  <slot name="title">
@@ -98,16 +105,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
98
105
  </DialogDescription>
99
106
  </div>
100
107
 
101
- <DialogClose v-if="close || !!slots.close" as-child>
102
- <slot name="close" :ui="ui">
108
+ <slot name="actions" />
109
+
110
+ <DialogClose v-if="props.close || !!slots.close" as-child>
111
+ <slot name="close" :close="close" :ui="ui">
103
112
  <UButton
104
- v-if="close"
113
+ v-if="props.close"
105
114
  :icon="closeIcon || appConfig.ui.icons.close"
106
- size="md"
107
115
  color="neutral"
108
116
  variant="ghost"
109
117
  :aria-label="t('slideover.close')"
110
- v-bind="typeof close === 'object' ? close : {}"
118
+ v-bind="typeof props.close === 'object' ? props.close : {}"
111
119
  :class="ui.close({ class: props.ui?.close })"
112
120
  />
113
121
  </slot>
@@ -116,11 +124,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
116
124
  </div>
117
125
 
118
126
  <div :class="ui.body({ class: props.ui?.body })">
119
- <slot name="body" />
127
+ <slot name="body" :close="close" />
120
128
  </div>
121
129
 
122
130
  <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
123
- <slot name="footer" />
131
+ <slot name="footer" :close="close" />
124
132
  </div>
125
133
  </slot>
126
134
  </DialogContent>
@@ -51,31 +51,44 @@ export interface SlideoverProps extends DialogRootProps {
51
51
  }
52
52
  export interface SlideoverEmits extends DialogRootEmits {
53
53
  'after:leave': [];
54
+ 'after:enter': [];
54
55
  'close:prevent': [];
55
56
  }
56
57
  export interface SlideoverSlots {
57
58
  default(props: {
58
59
  open: boolean;
59
60
  }): any;
60
- content(props?: {}): any;
61
- header(props?: {}): any;
61
+ content(props: {
62
+ close: () => void;
63
+ }): any;
64
+ header(props: {
65
+ close: () => void;
66
+ }): any;
62
67
  title(props?: {}): any;
63
68
  description(props?: {}): any;
69
+ actions(props?: {}): any;
64
70
  close(props: {
71
+ close: () => void;
65
72
  ui: {
66
73
  [K in keyof Required<Slideover['slots']>]: (props?: Record<string, any>) => string;
67
74
  };
68
75
  }): any;
69
- body(props?: {}): any;
70
- footer(props?: {}): any;
76
+ body(props: {
77
+ close: () => void;
78
+ }): any;
79
+ footer(props: {
80
+ close: () => void;
81
+ }): any;
71
82
  }
72
83
  declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
73
84
  "update:open": (value: boolean) => any;
74
85
  "after:leave": () => any;
86
+ "after:enter": () => any;
75
87
  "close:prevent": () => any;
76
88
  }, string, import("vue").PublicProps, Readonly<SlideoverProps> & Readonly<{
77
89
  "onUpdate:open"?: ((value: boolean) => any) | undefined;
78
90
  "onAfter:leave"?: (() => any) | undefined;
91
+ "onAfter:enter"?: (() => any) | undefined;
79
92
  "onClose:prevent"?: (() => any) | undefined;
80
93
  }>, {
81
94
  close: boolean | Partial<ButtonProps>;
@@ -82,7 +82,7 @@ const sortingState = defineModel("sorting", { type: Array, ...{ default: [] } })
82
82
  const groupingState = defineModel("grouping", { type: Array, ...{ default: [] } });
83
83
  const expandedState = defineModel("expanded", { type: [Boolean, Object], ...{ default: {} } });
84
84
  const paginationState = defineModel("pagination", { type: Object, ...{ default: {} } });
85
- const tableRef = ref();
85
+ const tableRef = ref(null);
86
86
  const tableApi = useVueTable({
87
87
  ...reactiveOmit(props, "as", "data", "columns", "caption", "sticky", "loading", "loadingColor", "loadingAnimation", "class", "ui"),
88
88
  data,
@@ -217,9 +217,13 @@ defineExpose({
217
217
  </slot>
218
218
  </th>
219
219
  </tr>
220
+
221
+ <tr :class="ui.separator({ class: [props.ui?.separator] })" />
220
222
  </thead>
221
223
 
222
224
  <tbody :class="ui.tbody({ class: [props.ui?.tbody] })">
225
+ <slot name="body-top" />
226
+
223
227
  <template v-if="tableApi.getRowModel().rows?.length">
224
228
  <template v-for="row in tableApi.getRowModel().rows" :key="row.id">
225
229
  <tr
@@ -274,6 +278,8 @@ defineExpose({
274
278
  </slot>
275
279
  </td>
276
280
  </tr>
281
+
282
+ <slot name="body-bottom" />
277
283
  </tbody>
278
284
  </table>
279
285
  </Primitive>
@@ -21,12 +21,12 @@ type Table = ComponentConfig<typeof theme, AppConfig, 'table'>;
21
21
  export type TableRow<T> = Row<T>;
22
22
  export type TableData = RowData;
23
23
  export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>;
24
- export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
24
+ export interface TableOptions<T extends TableData = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
25
25
  state?: CoreOptions<T>['state'];
26
26
  onStateChange?: CoreOptions<T>['onStateChange'];
27
27
  renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
28
28
  }
29
- export interface TableProps<T extends TableData> extends TableOptions<T> {
29
+ export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
30
30
  /**
31
31
  * The element or component this component should render as.
32
32
  * @defaultValue 'div'
@@ -129,13 +129,15 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
129
129
  }
130
130
  type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>;
131
131
  type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>;
132
- export type TableSlots<T> = {
133
- expanded: (props: {
132
+ export type TableSlots<T extends TableData = TableData> = {
133
+ 'expanded': (props: {
134
134
  row: Row<T>;
135
135
  }) => any;
136
- empty: (props?: {}) => any;
137
- loading: (props?: {}) => any;
138
- caption: (props?: {}) => any;
136
+ 'empty': (props?: {}) => any;
137
+ 'loading': (props?: {}) => any;
138
+ 'caption': (props?: {}) => any;
139
+ 'body-top': (props?: {}) => any;
140
+ 'body-bottom': (props?: {}) => any;
139
141
  } & DynamicHeaderSlots<T> & DynamicCellSlots<T>;
140
142
  declare const _default: <T extends TableData>(__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<{
141
143
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
@@ -168,7 +170,7 @@ declare const _default: <T extends TableData>(__VLS_props: NonNullable<Awaited<t
168
170
  pagination?: PaginationState;
169
171
  }) & Partial<{}>> & import("vue").PublicProps;
170
172
  expose(exposed: import("vue").ShallowUnwrapRef<{
171
- tableRef: Ref<HTMLTableElement | undefined, HTMLTableElement | undefined>;
173
+ tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
172
174
  tableApi: import("@tanstack/table-core").Table<T>;
173
175
  }>): void;
174
176
  attrs: any;
@@ -3,7 +3,7 @@ import theme from "#build/ui/tabs";
3
3
  </script>
4
4
 
5
5
  <script setup>
6
- import { computed } from "vue";
6
+ import { ref, computed } from "vue";
7
7
  import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
8
8
  import { reactivePick } from "@vueuse/core";
9
9
  import { useAppConfig } from "#imports";
@@ -37,6 +37,10 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })
37
37
  size: props.size,
38
38
  orientation: props.orientation
39
39
  }));
40
+ const triggersRef = ref([]);
41
+ defineExpose({
42
+ triggersRef
43
+ });
40
44
  </script>
41
45
 
42
46
  <template>
@@ -46,7 +50,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })
46
50
 
47
51
  <slot name="list-leading" />
48
52
 
49
- <TabsTrigger v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })">
53
+ <TabsTrigger
54
+ v-for="(item, index) of items"
55
+ :key="index"
56
+ :ref="(el) => triggersRef[index] = el"
57
+ :value="item.value || String(index)"
58
+ :disabled="item.disabled"
59
+ :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
60
+ >
50
61
  <slot name="leading" :item="item" :index="index">
51
62
  <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
52
63
  <UAvatar v-else-if="item.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
@@ -1,3 +1,4 @@
1
+ import type { ComponentPublicInstance } from 'vue';
1
2
  import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
2
3
  import type { AppConfig } from '@nuxt/schema';
3
4
  import theme from '#build/ui/tabs';
@@ -77,7 +78,9 @@ declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<ty
77
78
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
78
79
  readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
79
80
  } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & Partial<{}>> & import("vue").PublicProps;
80
- expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
81
+ expose(exposed: import("vue").ShallowUnwrapRef<{
82
+ triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
83
+ }>): void;
81
84
  attrs: any;
82
85
  slots: TabsSlots<T>;
83
86
  emit: (evt: "update:modelValue", payload: string | number) => void;
@@ -10,6 +10,8 @@ import { useComponentIcons } from "../composables/useComponentIcons";
10
10
  import { useFormField } from "../composables/useFormField";
11
11
  import { looseToNumber } from "../utils";
12
12
  import { tv } from "../utils/tv";
13
+ import UIcon from "./Icon.vue";
14
+ import UAvatar from "./Avatar.vue";
13
15
  defineOptions({ inheritAttrs: false });
14
16
  const props = defineProps({
15
17
  as: { type: null, required: false },
@@ -25,10 +27,11 @@ const props = defineProps({
25
27
  autoresize: { type: Boolean, required: false },
26
28
  autoresizeDelay: { type: Number, required: false, default: 0 },
27
29
  disabled: { type: Boolean, required: false },
28
- class: { type: null, required: false },
29
30
  rows: { type: Number, required: false, default: 3 },
30
31
  maxrows: { type: Number, required: false, default: 0 },
31
32
  highlight: { type: Boolean, required: false },
33
+ modelModifiers: { type: Object, required: false },
34
+ class: { type: null, required: false },
32
35
  ui: { type: null, required: false },
33
36
  icon: { type: String, required: false },
34
37
  avatar: { type: Object, required: false },
@@ -1,8 +1,9 @@
1
1
  import type { AppConfig } from '@nuxt/schema';
2
2
  import theme from '#build/ui/textarea';
3
3
  import type { UseComponentIconsProps } from '../composables/useComponentIcons';
4
- import type { AcceptableValue, ComponentConfig } from '../types/utils';
4
+ import type { ComponentConfig } from '../types/utils';
5
5
  type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
6
+ type TextareaValue = string | number | null;
6
7
  export interface TextareaProps extends UseComponentIconsProps {
7
8
  /**
8
9
  * The element or component this component should render as.
@@ -31,14 +32,20 @@ export interface TextareaProps extends UseComponentIconsProps {
31
32
  autoresize?: boolean;
32
33
  autoresizeDelay?: number;
33
34
  disabled?: boolean;
34
- class?: any;
35
35
  rows?: number;
36
36
  maxrows?: number;
37
37
  /** Highlight the ring color like a focus state. */
38
38
  highlight?: boolean;
39
+ modelModifiers?: {
40
+ string?: boolean;
41
+ trim?: boolean;
42
+ lazy?: boolean;
43
+ nullify?: boolean;
44
+ };
45
+ class?: any;
39
46
  ui?: Textarea['slots'];
40
47
  }
41
- export interface TextareaEmits<T extends AcceptableValue = AcceptableValue> {
48
+ export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
42
49
  (e: 'update:modelValue', payload: T): void;
43
50
  (e: 'blur', event: FocusEvent): void;
44
51
  (e: 'change', event: Event): void;
@@ -48,7 +55,7 @@ export interface TextareaSlots {
48
55
  default(props?: {}): any;
49
56
  trailing(props?: {}): any;
50
57
  }
51
- declare const _default: <T extends AcceptableValue>(__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<{
58
+ declare const _default: <T extends TextareaValue>(__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<{
52
59
  props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
53
60
  readonly onBlur?: ((event: FocusEvent) => any) | undefined;
54
61
  readonly onChange?: ((event: Event) => any) | undefined;
@@ -0,0 +1,92 @@
1
+ <script>
2
+ import theme from "#build/ui/timeline";
3
+ </script>
4
+
5
+ <script setup>
6
+ import { computed } from "vue";
7
+ import { Primitive, Separator } from "reka-ui";
8
+ import { useAppConfig } from "#imports";
9
+ import { tv } from "../utils/tv";
10
+ import UAvatar from "./Avatar.vue";
11
+ const props = defineProps({
12
+ as: { type: null, required: false },
13
+ items: { type: Array, required: true },
14
+ size: { type: null, required: false },
15
+ color: { type: null, required: false },
16
+ orientation: { type: null, required: false, default: "vertical" },
17
+ defaultValue: { type: [String, Number], required: false },
18
+ reverse: { type: Boolean, required: false },
19
+ class: { type: null, required: false },
20
+ ui: { type: null, required: false }
21
+ });
22
+ const slots = defineSlots();
23
+ const modelValue = defineModel({ type: [String, Number] });
24
+ const appConfig = useAppConfig();
25
+ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.timeline || {} })({
26
+ orientation: props.orientation,
27
+ size: props.size,
28
+ color: props.color,
29
+ reverse: props.reverse
30
+ }));
31
+ const currentStepIndex = computed(() => {
32
+ const value = modelValue.value ?? props.defaultValue;
33
+ if (typeof value === "string") {
34
+ return props.items.findIndex((item) => item.value === value) ?? -1;
35
+ }
36
+ if (props.reverse) {
37
+ return value != null ? props.items.length - 1 - value : -1;
38
+ } else {
39
+ return value ?? -1;
40
+ }
41
+ });
42
+ function getItemState(index) {
43
+ if (currentStepIndex.value === -1) return void 0;
44
+ if (index === currentStepIndex.value) return "active";
45
+ if (props.reverse) {
46
+ return index > currentStepIndex.value ? "completed" : void 0;
47
+ } else {
48
+ return index < currentStepIndex.value ? "completed" : void 0;
49
+ }
50
+ }
51
+ </script>
52
+
53
+ <template>
54
+ <Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.ui?.root, props.class] })">
55
+ <div
56
+ v-for="(item, index) in items"
57
+ :key="item.value ?? index"
58
+ :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
59
+ :data-state="getItemState(index)"
60
+ >
61
+ <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
62
+ <UAvatar :size="size" :icon="item.icon" v-bind="typeof item.avatar === 'object' ? item.avatar : {}" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" :ui="{ icon: 'text-inherit', fallback: 'text-inherit' }">
63
+ <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
64
+ </UAvatar>
65
+
66
+ <Separator
67
+ v-if="index < items.length - 1"
68
+ :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
69
+ :orientation="props.orientation"
70
+ />
71
+ </div>
72
+
73
+ <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
74
+ <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })">
75
+ <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
76
+ {{ item.date }}
77
+ </slot>
78
+ </div>
79
+ <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })">
80
+ <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
81
+ {{ item.title }}
82
+ </slot>
83
+ </div>
84
+ <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
85
+ <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
86
+ {{ item.description }}
87
+ </slot>
88
+ </div>
89
+ </div>
90
+ </div>
91
+ </Primitive>
92
+ </template>
@@ -0,0 +1,70 @@
1
+ import type { AppConfig } from '@nuxt/schema';
2
+ import theme from '#build/ui/timeline';
3
+ import type { AvatarProps } from '../types';
4
+ import type { DynamicSlots, ComponentConfig } from '../types/utils';
5
+ type Timeline = ComponentConfig<typeof theme, AppConfig, 'timeline'>;
6
+ export interface TimelineItem {
7
+ date?: string;
8
+ title?: string;
9
+ description?: string;
10
+ icon?: string;
11
+ avatar?: AvatarProps;
12
+ value?: string | number;
13
+ slot?: string;
14
+ class?: any;
15
+ ui?: Pick<Timeline['slots'], 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>;
16
+ [key: string]: any;
17
+ }
18
+ export interface TimelineProps<T extends TimelineItem = TimelineItem> {
19
+ /**
20
+ * The element or component this component should render as.
21
+ * @defaultValue 'div'
22
+ */
23
+ as?: any;
24
+ items: T[];
25
+ /**
26
+ * @defaultValue 'md'
27
+ */
28
+ size?: Timeline['variants']['size'];
29
+ /**
30
+ * @defaultValue 'primary'
31
+ */
32
+ color?: Timeline['variants']['color'];
33
+ /**
34
+ * The orientation of the Timeline.
35
+ * @defaultValue 'vertical'
36
+ */
37
+ orientation?: Timeline['variants']['orientation'];
38
+ defaultValue?: string | number;
39
+ reverse?: boolean;
40
+ class?: any;
41
+ ui?: Timeline['slots'];
42
+ }
43
+ type SlotProps<T extends TimelineItem> = (props: {
44
+ item: T;
45
+ }) => any;
46
+ export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
47
+ indicator: SlotProps<T>;
48
+ date: SlotProps<T>;
49
+ title: SlotProps<T>;
50
+ description: SlotProps<T>;
51
+ } & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
52
+ item: T;
53
+ }>;
54
+ declare const _default: <T extends TimelineItem>(__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<{
55
+ props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
56
+ readonly "onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
57
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (TimelineProps<T> & {
58
+ modelValue?: string | number;
59
+ }) & Partial<{}>> & import("vue").PublicProps;
60
+ expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
61
+ attrs: any;
62
+ slots: TimelineSlots<T>;
63
+ emit: (evt: "update:modelValue", value: string | number | undefined) => void;
64
+ }>) => import("vue").VNode & {
65
+ __ctx?: Awaited<typeof __VLS_setup>;
66
+ };
67
+ export default _default;
68
+ type __VLS_PrettifyLocal<T> = {
69
+ [K in keyof T]: T[K];
70
+ } & {};
@@ -3,7 +3,7 @@ import theme from "#build/ui/toast";
3
3
  </script>
4
4
 
5
5
  <script setup>
6
- import { ref, computed, onMounted } from "vue";
6
+ import { ref, computed, onMounted, nextTick } from "vue";
7
7
  import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from "reka-ui";
8
8
  import { reactivePick } from "@vueuse/core";
9
9
  import { useAppConfig } from "#imports";
@@ -47,9 +47,9 @@ onMounted(() => {
47
47
  if (!el.value) {
48
48
  return;
49
49
  }
50
- setTimeout(() => {
51
- height.value = el.value.$el.getBoundingClientRect()?.height;
52
- }, 0);
50
+ nextTick(() => {
51
+ height.value = el.value?.$el?.getBoundingClientRect()?.height;
52
+ });
53
53
  });
54
54
  defineExpose({
55
55
  height
@@ -113,7 +113,6 @@ defineExpose({
113
113
  <UButton
114
114
  v-if="close"
115
115
  :icon="closeIcon || appConfig.ui.icons.close"
116
- size="md"
117
116
  color="neutral"
118
117
  variant="link"
119
118
  :aria-label="t('toast.close')"
@@ -29,12 +29,13 @@ const props = defineProps({
29
29
  defaultExpanded: { type: Array, required: false },
30
30
  selectionBehavior: { type: String, required: false },
31
31
  propagateSelect: { type: Boolean, required: false },
32
- disabled: { type: Boolean, required: false }
32
+ disabled: { type: Boolean, required: false },
33
+ bubbleSelect: { type: Boolean, required: false }
33
34
  });
34
35
  const emits = defineEmits(["update:expanded", "update:modelValue"]);
35
36
  const slots = defineSlots();
36
37
  const appConfig = useAppConfig();
37
- const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "items", "multiple", "expanded", "disabled", "propagateSelect"), emits);
38
+ const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "items", "multiple", "expanded", "disabled", "propagateSelect", "bubbleSelect"), emits);
38
39
  const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate();
39
40
  const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tree || {} })({
40
41
  color: props.color,
@@ -24,7 +24,7 @@ export type TreeItem = {
24
24
  ui?: Pick<Tree['slots'], 'item' | 'itemWithChildren' | 'link' | 'linkLeadingIcon' | 'linkLabel' | 'linkTrailing' | 'linkTrailingIcon' | 'listWithChildren'>;
25
25
  [key: string]: any;
26
26
  };
27
- export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled'> {
27
+ export interface TreeProps<T extends TreeItem[] = TreeItem[], VK extends GetItemKeys<T> = 'value', M extends boolean = false> extends Pick<TreeRootProps<T>, 'expanded' | 'defaultExpanded' | 'selectionBehavior' | 'propagateSelect' | 'disabled' | 'bubbleSelect'> {
28
28
  /**
29
29
  * The element or component this component should render as.
30
30
  * @defaultValue 'ul'
@@ -1,4 +1,5 @@
1
1
  import type { Locale, Direction } from '../types/locale';
2
+ import type { DeepPartial } from '../types/utils';
2
3
  interface DefineLocaleOptions<M> {
3
4
  name: string;
4
5
  code: string;
@@ -6,4 +7,5 @@ interface DefineLocaleOptions<M> {
6
7
  messages: M;
7
8
  }
8
9
  export declare function defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>;
10
+ export declare function extendLocale<M>(locale: Locale<M>, options: Partial<DefineLocaleOptions<DeepPartial<M>>>): Locale<M>;
9
11
  export {};
@@ -3,3 +3,7 @@ import { defu } from "defu";
3
3
  export function defineLocale(options) {
4
4
  return defu(options, { dir: "ltr" });
5
5
  }
6
+ // @__NO_SIDE_EFFECTS__
7
+ export function extendLocale(locale, options) {
8
+ return defu(options, locale);
9
+ }
@@ -88,13 +88,13 @@ export function defineShortcuts(config, options = {}) {
88
88
  return null;
89
89
  }
90
90
  let shortcut;
91
- if (key.includes("-") && key !== "-" && !key.match(chainedShortcutRegex)?.length) {
91
+ if (key.includes("-") && key !== "-" && !key.includes("_") && !key.match(chainedShortcutRegex)?.length) {
92
92
  console.trace(`[Shortcut] Invalid key: "${key}"`);
93
93
  }
94
94
  if (key.includes("_") && key !== "_" && !key.match(combinedShortcutRegex)?.length) {
95
95
  console.trace(`[Shortcut] Invalid key: "${key}"`);
96
96
  }
97
- const chained = key.includes("-") && key !== "-";
97
+ const chained = key.includes("-") && key !== "-" && !key.includes("_");
98
98
  if (chained) {
99
99
  shortcut = {
100
100
  key: key.toLowerCase(),
@@ -11,6 +11,7 @@ interface ManagedOverlayOptionsPrivate<T extends Component> {
11
11
  id: symbol;
12
12
  isMounted: boolean;
13
13
  isOpen: boolean;
14
+ originalProps?: ComponentProps<T>;
14
15
  resolvePromise?: (value: any) => void;
15
16
  }
16
17
  export type Overlay = OverlayOptions<Component> & ManagedOverlayOptionsPrivate<Component>;
@@ -30,7 +31,7 @@ declare function _useOverlay(): {
30
31
  closeAll: () => void;
31
32
  create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
32
33
  patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;
33
- unMount: (id: symbol) => void;
34
+ unmount: (id: symbol) => void;
34
35
  isOpen: (id: symbol) => boolean;
35
36
  };
36
37
  export declare const useOverlay: typeof _useOverlay;