@nuxt/ui 2.20.0 → 2.21.1

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 (53) hide show
  1. package/README.md +0 -10
  2. package/dist/module.d.mts +6 -0
  3. package/dist/module.d.ts +6 -0
  4. package/dist/module.json +1 -1
  5. package/dist/module.mjs +20 -12
  6. package/dist/runtime/components/data/Table.vue +26 -25
  7. package/dist/runtime/components/data/Table.vue.d.ts +0 -2
  8. package/dist/runtime/components/elements/Alert.vue +3 -3
  9. package/dist/runtime/components/elements/Alert.vue.d.ts +3 -0
  10. package/dist/runtime/components/elements/Avatar.vue +2 -2
  11. package/dist/runtime/components/elements/AvatarGroup.js +2 -2
  12. package/dist/runtime/components/elements/Badge.vue +2 -2
  13. package/dist/runtime/components/elements/Button.vue +2 -2
  14. package/dist/runtime/components/elements/ButtonGroup.js +2 -2
  15. package/dist/runtime/components/elements/Carousel.vue +1 -2
  16. package/dist/runtime/components/elements/Dropdown.vue +2 -2
  17. package/dist/runtime/components/elements/Kbd.vue +2 -2
  18. package/dist/runtime/components/elements/Link.vue +6 -4
  19. package/dist/runtime/components/elements/MeterGroup.d.ts +1 -1
  20. package/dist/runtime/components/elements/MeterGroup.js +1 -1
  21. package/dist/runtime/components/forms/Checkbox.vue +2 -2
  22. package/dist/runtime/components/forms/Form.vue +24 -1
  23. package/dist/runtime/components/forms/Form.vue.d.ts +6 -3
  24. package/dist/runtime/components/forms/Input.vue +2 -2
  25. package/dist/runtime/components/forms/InputMenu.vue +3 -3
  26. package/dist/runtime/components/forms/Radio.vue +2 -2
  27. package/dist/runtime/components/forms/RadioGroup.vue +1 -1
  28. package/dist/runtime/components/forms/Range.vue +2 -2
  29. package/dist/runtime/components/forms/Select.vue +2 -2
  30. package/dist/runtime/components/forms/SelectMenu.vue +8 -3
  31. package/dist/runtime/components/forms/SelectMenu.vue.d.ts +9 -0
  32. package/dist/runtime/components/forms/Textarea.vue +2 -2
  33. package/dist/runtime/components/forms/Toggle.vue +2 -2
  34. package/dist/runtime/components/layout/Card.vue +2 -2
  35. package/dist/runtime/components/layout/Container.vue +2 -2
  36. package/dist/runtime/components/layout/Divider.vue +2 -2
  37. package/dist/runtime/components/layout/Skeleton.vue +2 -2
  38. package/dist/runtime/components/navigation/Breadcrumb.vue +2 -2
  39. package/dist/runtime/components/navigation/HorizontalNavigation.vue +2 -2
  40. package/dist/runtime/components/navigation/VerticalNavigation.vue +2 -2
  41. package/dist/runtime/components/overlays/ContextMenu.vue +2 -2
  42. package/dist/runtime/components/overlays/Notification.vue +3 -3
  43. package/dist/runtime/components/overlays/Notification.vue.d.ts +3 -0
  44. package/dist/runtime/components/overlays/Notifications.vue +2 -2
  45. package/dist/runtime/components/overlays/Notifications.vue.d.ts +4 -0
  46. package/dist/runtime/composables/useShortcuts.d.ts +2 -2
  47. package/dist/runtime/ui.config/elements/alert.d.ts +1 -0
  48. package/dist/runtime/ui.config/elements/alert.js +1 -0
  49. package/dist/runtime/ui.config/overlays/notification.d.ts +1 -0
  50. package/dist/runtime/ui.config/overlays/notification.js +1 -0
  51. package/dist/runtime/utils/index.d.ts +1 -0
  52. package/dist/runtime/utils/index.js +4 -3
  53. package/package.json +29 -28
package/README.md CHANGED
@@ -30,16 +30,6 @@ Read more on [ui.nuxt.com](https://ui.nuxt.com)
30
30
  npx nuxi@latest module add ui
31
31
  ```
32
32
 
33
- If you want latest updates, please use `@nuxt/ui-edge` in your `package.json`:
34
-
35
- ```json
36
- {
37
- "devDependencies": {
38
- "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
39
- }
40
- }
41
- ```
42
-
43
33
  ## Documentation
44
34
 
45
35
  Visit https://ui.nuxt.com to explore the documentation.
package/dist/module.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as _nuxt_schema from '@nuxt/schema';
2
+ import { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from 'tailwind-merge';
2
3
  import * as config from '../dist/runtime/ui.config/index.js';
3
4
  import { Strategy, DeepPartial } from '../dist/runtime/types/index.js';
4
5
 
@@ -7,6 +8,7 @@ type UI = {
7
8
  gray?: string;
8
9
  colors?: string[];
9
10
  strategy?: Strategy;
11
+ tailwindMerge?: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>;
10
12
  [key: string]: any;
11
13
  } & DeepPartial<typeof config, string | number | boolean>;
12
14
  declare module '@nuxt/schema' {
@@ -23,6 +25,10 @@ interface ModuleOptions {
23
25
  * @default false
24
26
  */
25
27
  global?: boolean;
28
+ /**
29
+ * @default true
30
+ */
31
+ colorMode?: boolean;
26
32
  safelistColors?: string[];
27
33
  /**
28
34
  * Disables the global css styles added by the module.
package/dist/module.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as _nuxt_schema from '@nuxt/schema';
2
+ import { ConfigExtension, DefaultClassGroupIds, DefaultThemeGroupIds } from 'tailwind-merge';
2
3
  import * as config from '../dist/runtime/ui.config/index.js';
3
4
  import { Strategy, DeepPartial } from '../dist/runtime/types/index.js';
4
5
 
@@ -7,6 +8,7 @@ type UI = {
7
8
  gray?: string;
8
9
  colors?: string[];
9
10
  strategy?: Strategy;
11
+ tailwindMerge?: ConfigExtension<DefaultClassGroupIds, DefaultThemeGroupIds>;
10
12
  [key: string]: any;
11
13
  } & DeepPartial<typeof config, string | number | boolean>;
12
14
  declare module '@nuxt/schema' {
@@ -23,6 +25,10 @@ interface ModuleOptions {
23
25
  * @default false
24
26
  */
25
27
  global?: boolean;
28
+ /**
29
+ * @default true
30
+ */
31
+ colorMode?: boolean;
26
32
  safelistColors?: string[];
27
33
  /**
28
34
  * Disables the global css styles added by the module.
package/dist/module.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuxt/ui",
3
- "version": "2.20.0",
3
+ "version": "2.21.1",
4
4
  "configKey": "ui",
5
5
  "compatibility": {
6
6
  "nuxt": ">=3.10.0"
package/dist/module.mjs CHANGED
@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
14
14
  const __dirname = __cjs_path__.dirname(__filename);
15
15
  const require = __cjs_mod__.createRequire(import.meta.url);
16
16
  const name = "@nuxt/ui";
17
- const version = "2.20.0";
17
+ const version = "2.21.1";
18
18
 
19
19
  function createTemplates(nuxt = useNuxt()) {
20
20
  const template = addTemplate({
@@ -48,21 +48,26 @@ function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolv
48
48
  };
49
49
  });
50
50
  const configTemplate = addTemplate({
51
- filename: "nuxtui-tailwind.config.cjs",
51
+ filename: "nuxtui-tailwind.config.mjs",
52
52
  write: true,
53
53
  getContents: ({ nuxt: nuxt2 }) => `
54
- const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
55
- const { customSafelistExtractor, generateSafelist } = require(${JSON.stringify(resolve(runtimeDir, "utils", "colors"))})
54
+ import { defaultExtractor as createDefaultExtractor } from "tailwindcss/lib/lib/defaultExtractor.js";
55
+ import { customSafelistExtractor, generateSafelist } from ${JSON.stringify(resolve(runtimeDir, "utils", "colors"))};
56
+ import formsPlugin from "@tailwindcss/forms";
57
+ import aspectRatio from "@tailwindcss/aspect-ratio";
58
+ import typography from "@tailwindcss/typography";
59
+ import containerQueries from "@tailwindcss/container-queries";
60
+ import headlessUi from "@headlessui/tailwindcss";
56
61
 
57
- const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
62
+ const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } });
58
63
 
59
- module.exports = {
64
+ export default {
60
65
  plugins: [
61
- require('@tailwindcss/forms')({ strategy: 'class' }),
62
- require('@tailwindcss/aspect-ratio'),
63
- require('@tailwindcss/typography'),
64
- require('@tailwindcss/container-queries'),
65
- require('@headlessui/tailwindcss')
66
+ formsPlugin({ strategy: 'class' }),
67
+ aspectRatio,
68
+ typography,
69
+ containerQueries,
70
+ headlessUi
66
71
  ],
67
72
  content: {
68
73
  files: [
@@ -124,6 +129,7 @@ const module = defineNuxtModule({
124
129
  },
125
130
  defaults: {
126
131
  prefix: "U",
132
+ colorMode: true,
127
133
  safelistColors: ["primary"],
128
134
  disableGlobalStyles: false
129
135
  },
@@ -138,7 +144,9 @@ const module = defineNuxtModule({
138
144
  }
139
145
  createTemplates(nuxt);
140
146
  await installModule("@nuxt/icon");
141
- await installModule("@nuxtjs/color-mode", { classSuffix: "" });
147
+ if (options.colorMode) {
148
+ await installModule("@nuxtjs/color-mode", { classSuffix: "" });
149
+ }
142
150
  await installTailwind(options, nuxt, resolve);
143
151
  addPlugin({
144
152
  src: resolve(runtimeDir, "plugins", "colors")
@@ -18,7 +18,7 @@
18
18
  :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.key === 'select' && ui.checkbox.padding, column.class]"
19
19
  :aria-sort="getAriaSort(column)"
20
20
  >
21
- <slot v-if="!singleSelect && modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(index, 'select'))" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
21
+ <slot v-if="!singleSelect && modelValue && column.key === 'select'" name="select-header" :indeterminate="indeterminate" :checked="isAllRowChecked" :change="onChange">
22
22
  <UCheckbox
23
23
  :model-value="isAllRowChecked"
24
24
  :indeterminate="indeterminate"
@@ -93,19 +93,17 @@
93
93
  />
94
94
  </td>
95
95
  <td v-for="(column, subIndex) in columns" :key="subIndex" :class="[ui.td.base, ui.td.padding, ui.td.color, ui.td.font, ui.td.size, column?.rowClass, row[column.key]?.class, column.key === 'select' && ui.checkbox.padding]">
96
- <slot v-if="modelValue && (column.key === 'select' || shouldRenderColumnInFirstPlace(subIndex, 'select')) " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
96
+ <slot v-if="modelValue && column.key === 'select' " name="select-data" :checked="isSelected(row)" :change="(ev: boolean) => onChangeCheckbox(ev, row)">
97
97
  <UCheckbox
98
98
  :model-value="isSelected(row)"
99
99
  v-bind="ui.default.checkbox"
100
100
  aria-label="Select row"
101
101
  @change="onChangeCheckbox($event, row)"
102
- @click.capture.stop="() => onSelect(row)"
103
102
  />
104
103
  </slot>
105
104
 
106
105
  <slot
107
106
  v-else
108
- :key="retriggerSlot"
109
107
  :name="`${column.key}-data`"
110
108
  :column="column"
111
109
  :row="row"
@@ -133,17 +131,17 @@
133
131
  </template>
134
132
 
135
133
  <script>
136
- import { computed, defineComponent, ref, toRaw, toRef, watch } from "vue";
134
+ import { computed, defineComponent, toRaw, toRef } from "vue";
137
135
  import { upperFirst } from "scule";
138
136
  import { defu } from "defu";
139
137
  import { useVModel } from "@vueuse/core";
140
- import { isEqual } from "ohash";
138
+ import { isEqual } from "ohash/utils";
141
139
  import UIcon from "../elements/Icon.vue";
142
140
  import UButton from "../elements/Button.vue";
143
141
  import UProgress from "../elements/Progress.vue";
144
142
  import UCheckbox from "../forms/Checkbox.vue";
145
143
  import { useUI } from "../../composables/useUI";
146
- import { mergeConfig, get } from "../../utils";
144
+ import { get, mergeConfig } from "../../utils";
147
145
  import appConfig from "#build/app.config";
148
146
  import { table } from "#ui/ui.config";
149
147
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.table, table);
@@ -263,7 +261,25 @@ export default defineComponent({
263
261
  emits: ["update:modelValue", "update:sort", "update:expand", "select:all"],
264
262
  setup(props, { emit, attrs: $attrs }) {
265
263
  const { ui, attrs } = useUI("table", toRef(props, "ui"), config, toRef(props, "class"));
266
- const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: void 0, sort: defaultSort })));
264
+ const columns = computed(() => {
265
+ const defaultColumns = props.columns ?? Object.keys(props.rows[0]).map((key) => ({
266
+ key,
267
+ label: upperFirst(key),
268
+ sortable: false,
269
+ class: void 0,
270
+ sort: defaultSort
271
+ }));
272
+ const hasColumnSelect = defaultColumns.find((v) => v.key === "select");
273
+ if (hasColumnSelect || !props.modelValue) {
274
+ return defaultColumns;
275
+ }
276
+ return [{
277
+ key: "select",
278
+ sortable: false,
279
+ class: void 0,
280
+ sort: defaultSort
281
+ }, ...defaultColumns];
282
+ });
267
283
  const sort = useVModel(props, "sort", emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: "asc" }) });
268
284
  const expand = useVModel(props, "expand", emit, {
269
285
  passive: true,
@@ -272,7 +288,6 @@ export default defineComponent({
272
288
  row: null
273
289
  })
274
290
  });
275
- const retriggerSlot = ref(null);
276
291
  const savedSort = { column: sort.value.column, direction: null };
277
292
  const rows = computed(() => {
278
293
  if (!sort.value?.column || props.sortMode === "manual") {
@@ -375,8 +390,7 @@ export default defineComponent({
375
390
  if (checked) {
376
391
  selected.value = props.singleSelect ? [row] : [...selected.value, row];
377
392
  } else {
378
- const index = selected.value.findIndex((item) => compare(item, row));
379
- selected.value.splice(index, 1);
393
+ selected.value = selected.value.filter((value) => !compare(toRaw(value), toRaw(row)));
380
394
  }
381
395
  }
382
396
  function getRowData(row, rowKey, defaultValue = "") {
@@ -385,12 +399,6 @@ export default defineComponent({
385
399
  function isExpanded(row) {
386
400
  return expand.value?.openedRows ? expand.value.openedRows.some((openedRow) => compare(openedRow, row)) : false;
387
401
  }
388
- function shouldRenderColumnInFirstPlace(index, key) {
389
- if (!props.columns) {
390
- return index === 0;
391
- }
392
- return index === 0 && !props.columns.find((col) => col.key === key);
393
- }
394
402
  function toggleOpened(row) {
395
403
  expand.value = {
396
404
  openedRows: isExpanded(row) ? expand.value.openedRows.filter((v) => !compare(v, row)) : props.multipleExpand ? [...expand.value.openedRows, row] : [row],
@@ -412,11 +420,6 @@ export default defineComponent({
412
420
  }
413
421
  return void 0;
414
422
  }
415
- watch(rows, () => {
416
- retriggerSlot.value = /* @__PURE__ */ new Date();
417
- }, {
418
- deep: true
419
- });
420
423
  return {
421
424
  // eslint-disable-next-line vue/no-dupe-keys
422
425
  ui,
@@ -443,9 +446,7 @@ export default defineComponent({
443
446
  getRowData,
444
447
  toggleOpened,
445
448
  getAriaSort,
446
- isExpanded,
447
- shouldRenderColumnInFirstPlace,
448
- retriggerSlot
449
+ isExpanded
449
450
  };
450
451
  }
451
452
  });
@@ -308,8 +308,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
308
308
  toggleOpened: (row: TableRow) => void;
309
309
  getAriaSort: (column: TableColumn) => AriaAttributes["aria-sort"];
310
310
  isExpanded: (row: TableRow) => boolean;
311
- shouldRenderColumnInFirstPlace: (index: number, key: string) => boolean;
312
- retriggerSlot: import("vue").Ref<any, any>;
313
311
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "update:sort" | "update:expand" | "select:all")[], "update:modelValue" | "update:sort" | "update:expand" | "select:all", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
314
312
  modelValue: {
315
313
  type: ArrayConstructor;
@@ -14,7 +14,7 @@
14
14
  {{ title }}
15
15
  </slot>
16
16
  </p>
17
- <div v-if="description || $slots.description" :class="twMerge(ui.description, !title && !$slots.title && 'mt-0 leading-5')">
17
+ <div v-if="description || $slots.description" :class="twMerge(ui.description, !title && !$slots.title && ui.descriptionOnly)">
18
18
  <slot name="description" :description="description">
19
19
  {{ description }}
20
20
  </slot>
@@ -41,12 +41,12 @@
41
41
 
42
42
  <script>
43
43
  import { computed, toRef, defineComponent } from "vue";
44
- import { twMerge, twJoin } from "tailwind-merge";
44
+ import { twJoin } from "tailwind-merge";
45
45
  import UIcon from "../elements/Icon.vue";
46
46
  import UAvatar from "../elements/Avatar.vue";
47
47
  import UButton from "../elements/Button.vue";
48
48
  import { useUI } from "../../composables/useUI";
49
- import { mergeConfig } from "../../utils";
49
+ import { mergeConfig, twMerge } from "../../utils";
50
50
  import appConfig from "#build/app.config";
51
51
  import { alert } from "#ui/ui.config";
52
52
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.alert, alert);
@@ -5,6 +5,7 @@ declare const config: {
5
5
  inner: string;
6
6
  title: string;
7
7
  description: string;
8
+ descriptionOnly: string;
8
9
  actions: string;
9
10
  shadow: string;
10
11
  rounded: string;
@@ -91,6 +92,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
91
92
  inner: string;
92
93
  title: string;
93
94
  description: string;
95
+ descriptionOnly: string;
94
96
  actions: string;
95
97
  shadow: string;
96
98
  rounded: string;
@@ -186,6 +188,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
186
188
  inner?: string;
187
189
  title?: string;
188
190
  description?: string;
191
+ descriptionOnly?: string;
189
192
  actions?: string;
190
193
  shadow?: string;
191
194
  rounded?: string;
@@ -22,10 +22,10 @@
22
22
 
23
23
  <script>
24
24
  import { defineComponent, ref, computed, toRef, watch } from "vue";
25
- import { twMerge, twJoin } from "tailwind-merge";
25
+ import { twJoin } from "tailwind-merge";
26
26
  import UIcon from "../elements/Icon.vue";
27
27
  import { useUI } from "../../composables/useUI";
28
- import { mergeConfig } from "../../utils";
28
+ import { mergeConfig, twMerge } from "../../utils";
29
29
  import appConfig from "#build/app.config";
30
30
  import { avatar } from "#ui/ui.config";
31
31
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.avatar, avatar);
@@ -1,7 +1,7 @@
1
1
  import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
2
- import { twMerge, twJoin } from "tailwind-merge";
2
+ import { twJoin } from "tailwind-merge";
3
3
  import { useUI } from "../../composables/useUI.js";
4
- import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
4
+ import { getSlotsChildren, mergeConfig, twMerge } from "../../utils/index.js";
5
5
  import UAvatar from "./Avatar.vue";
6
6
  import appConfig from "#build/app.config";
7
7
  import { avatar, avatarGroup } from "#ui/ui.config";
@@ -18,10 +18,10 @@
18
18
 
19
19
  <script>
20
20
  import { computed, toRef, defineComponent } from "vue";
21
- import { twMerge, twJoin } from "tailwind-merge";
21
+ import { twJoin } from "tailwind-merge";
22
22
  import UIcon from "../elements/Icon.vue";
23
23
  import { useUI } from "../../composables/useUI";
24
- import { mergeConfig } from "../../utils";
24
+ import { mergeConfig, twMerge } from "../../utils";
25
25
  import { useInjectButtonGroup } from "../../composables/useButtonGroup";
26
26
  import appConfig from "#build/app.config";
27
27
  import { badge } from "#ui/ui.config";
@@ -18,11 +18,11 @@
18
18
 
19
19
  <script>
20
20
  import { computed, defineComponent, toRef } from "vue";
21
- import { twMerge, twJoin } from "tailwind-merge";
21
+ import { twJoin } from "tailwind-merge";
22
22
  import UIcon from "../elements/Icon.vue";
23
23
  import ULink from "../elements/Link.vue";
24
24
  import { useUI } from "../../composables/useUI";
25
- import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from "../../utils";
25
+ import { getNuxtLinkProps, mergeConfig, nuxtLinkProps, twMerge } from "../../utils";
26
26
  import { useInjectButtonGroup } from "../../composables/useButtonGroup";
27
27
  import appConfig from "#build/app.config";
28
28
  import { button } from "#ui/ui.config";
@@ -1,7 +1,7 @@
1
1
  import { h, computed, toRef, defineComponent } from "vue";
2
- import { twMerge, twJoin } from "tailwind-merge";
2
+ import { twJoin } from "tailwind-merge";
3
3
  import { useUI } from "../../composables/useUI.js";
4
- import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
4
+ import { getSlotsChildren, mergeConfig, twMerge } from "../../utils/index.js";
5
5
  import { useProvideButtonGroup } from "../../composables/useButtonGroup.js";
6
6
  import appConfig from "#build/app.config";
7
7
  import { button, buttonGroup } from "#ui/ui.config";
@@ -57,9 +57,8 @@
57
57
 
58
58
  <script>
59
59
  import { ref, toRef, computed, defineComponent } from "vue";
60
- import { twMerge } from "tailwind-merge";
61
60
  import { useScroll, useResizeObserver, useElementSize } from "@vueuse/core";
62
- import { mergeConfig } from "../../utils";
61
+ import { mergeConfig, twMerge } from "../../utils";
63
62
  import UButton from "../elements/Button.vue";
64
63
  import { useUI } from "../../composables/useUI";
65
64
  import { useCarouselScroll } from "../../composables/useCarouselScroll";
@@ -59,13 +59,13 @@
59
59
  import { defineComponent, ref, computed, watch, toRef, onMounted, resolveComponent } from "vue";
60
60
  import { Menu as HMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, provideUseId } from "@headlessui/vue";
61
61
  import { defu } from "defu";
62
- import { twMerge, twJoin } from "tailwind-merge";
62
+ import { twJoin } from "tailwind-merge";
63
63
  import UIcon from "../elements/Icon.vue";
64
64
  import UAvatar from "../elements/Avatar.vue";
65
65
  import UKbd from "../elements/Kbd.vue";
66
66
  import { useUI } from "../../composables/useUI";
67
67
  import { usePopper } from "../../composables/usePopper";
68
- import { mergeConfig, getNuxtLinkProps } from "../../utils";
68
+ import { getNuxtLinkProps, mergeConfig, twMerge } from "../../utils";
69
69
  import appConfig from "#build/app.config";
70
70
  import { dropdown } from "#ui/ui.config";
71
71
  import { useId } from "#imports";
@@ -6,9 +6,9 @@
6
6
 
7
7
  <script>
8
8
  import { toRef, defineComponent, computed } from "vue";
9
- import { twMerge, twJoin } from "tailwind-merge";
9
+ import { twJoin } from "tailwind-merge";
10
10
  import { useUI } from "../../composables/useUI";
11
- import { mergeConfig } from "../../utils";
11
+ import { mergeConfig, twMerge } from "../../utils";
12
12
  import appConfig from "#build/app.config";
13
13
  import { kbd } from "#ui/ui.config";
14
14
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.kbd, kbd);
@@ -32,7 +32,7 @@
32
32
  </template>
33
33
 
34
34
  <script>
35
- import { isEqual, diff } from "ohash";
35
+ import { isEqual, diff } from "ohash/utils";
36
36
  import { defineComponent } from "vue";
37
37
  import { nuxtLinkProps } from "../../utils";
38
38
  export default defineComponent({
@@ -76,11 +76,13 @@ export default defineComponent({
76
76
  function isPartiallyEqual(item1, item2) {
77
77
  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
78
78
  if (q.type === "added") {
79
- filtered.push(q.key);
79
+ filtered.add(q.key);
80
80
  }
81
81
  return filtered;
82
- }, []);
83
- return isEqual(item1, item2, { excludeKeys: (key) => diffedKeys.includes(key) });
82
+ }, /* @__PURE__ */ new Set());
83
+ const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
84
+ const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
85
+ return isEqual(item1Filtered, item2Filtered);
84
86
  }
85
87
  function resolveLinkClass(route, $route, { isActive, isExactActive }) {
86
88
  if (props.exactQuery === "partial") {
@@ -175,8 +175,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
175
175
  strategy?: Strategy;
176
176
  };
177
177
  size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
178
- class: any;
179
178
  icon: string;
179
+ class: any;
180
180
  max: number;
181
181
  min: number;
182
182
  indicator: boolean;
@@ -2,7 +2,7 @@ import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
2
2
  import { twJoin } from "tailwind-merge";
3
3
  import UIcon from "../elements/Icon.vue";
4
4
  import { useUI } from "../../composables/useUI.js";
5
- import { mergeConfig, getSlotsChildren } from "../../utils/index.js";
5
+ import { getSlotsChildren, mergeConfig } from "../../utils/index.js";
6
6
  import appConfig from "#build/app.config";
7
7
  import { meter, meterGroup } from "#ui/ui.config";
8
8
  const meterConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.meter, meter);
@@ -31,10 +31,10 @@
31
31
 
32
32
  <script>
33
33
  import { computed, toRef, defineComponent } from "vue";
34
- import { twMerge, twJoin } from "tailwind-merge";
34
+ import { twJoin } from "tailwind-merge";
35
35
  import { useUI } from "../../composables/useUI";
36
36
  import { useFormGroup } from "../../composables/useFormGroup";
37
- import { mergeConfig } from "../../utils";
37
+ import { mergeConfig, twMerge } from "../../utils";
38
38
  import appConfig from "#build/app.config";
39
39
  import { checkbox } from "#ui/ui.config";
40
40
  import { useId } from "#app";
@@ -168,6 +168,27 @@ function isValibotSchema(schema) {
168
168
  function isZodSchema(schema) {
169
169
  return schema.parse !== void 0;
170
170
  }
171
+ export function isStandardSchema(schema) {
172
+ return "~standard" in schema;
173
+ }
174
+ export async function validateStandardSchema(state, schema) {
175
+ const result = await schema["~standard"].validate(state);
176
+ if (!result.issues || result.issues.length === 0) {
177
+ const output = "value" in result ? result.value : null;
178
+ return {
179
+ errors: null,
180
+ result: output
181
+ };
182
+ }
183
+ const errors = result.issues.map((issue) => ({
184
+ path: issue.path?.map((item) => typeof item === "object" ? item.key : item).join(".") || "",
185
+ message: issue.message
186
+ }));
187
+ return {
188
+ errors,
189
+ result: null
190
+ };
191
+ }
171
192
  async function validateValibotSchema(state, schema) {
172
193
  const result = await ("_parse" in schema ? schema._parse(state) : "_run" in schema ? schema._run({ typed: false, value: state }, {}) : schema(state));
173
194
  if (!result.issues || result.issues.length === 0) {
@@ -265,7 +286,9 @@ async function validateYupSchema(state, schema) {
265
286
  }
266
287
  }
267
288
  function parseSchema(state, schema) {
268
- if (isZodSchema(schema)) {
289
+ if (isStandardSchema(schema)) {
290
+ return validateStandardSchema(state, schema);
291
+ } else if (isZodSchema(schema)) {
269
292
  return validateZodSchema(state, schema);
270
293
  } else if (isJoiSchema(schema)) {
271
294
  return validateJoiSchema(state, schema);
@@ -5,9 +5,10 @@ import type { ObjectSchema as YupObjectSchema } from 'yup';
5
5
  import type { BaseSchema as ValibotSchema30, BaseSchemaAsync as ValibotSchemaAsync30 } from 'valibot30';
6
6
  import type { GenericSchema as ValibotSchema31, GenericSchemaAsync as ValibotSchemaAsync31, SafeParser as ValibotSafeParser31, SafeParserAsync as ValibotSafeParserAsync31 } from 'valibot31';
7
7
  import type { GenericSchema as ValibotSchema, GenericSchemaAsync as ValibotSchemaAsync, SafeParser as ValibotSafeParser, SafeParserAsync as ValibotSafeParserAsync } from 'valibot';
8
+ import type { StandardSchemaV1 } from '@standard-schema/spec';
8
9
  import type { Struct } from 'superstruct';
9
- import type { FormError, FormEventType } from '../../types/form.js';
10
- type Schema = PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>>;
10
+ import type { FormError, FormEventType, ValidateReturnSchema } from '../../types/form.js';
11
+ type Schema = PropType<ZodSchema> | PropType<YupObjectSchema<any>> | PropType<JoiSchema> | PropType<ValibotSchema30 | ValibotSchemaAsync30> | PropType<ValibotSchema31 | ValibotSchemaAsync31> | PropType<ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any>> | PropType<ValibotSchema | ValibotSchemaAsync> | PropType<ValibotSafeParser<any, any> | ValibotSafeParserAsync<any, any>> | PropType<Struct<any, any>> | PropType<StandardSchemaV1>;
11
12
  declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
12
13
  schema: {
13
14
  type: Schema;
@@ -55,8 +56,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
55
56
  onSubmit?: (...args: any[]) => any;
56
57
  onError?: (...args: any[]) => any;
57
58
  }>, {
58
- schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotSchema30<any, any> | ValibotSchemaAsync30<any, any> | ValibotSchema31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSchemaAsync31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema<unknown, unknown, import("valibot").BaseIssue<unknown>> | ValibotSchemaAsync<unknown, unknown, import("valibot").BaseIssue<unknown>> | Struct<any, any>;
59
+ schema: ZodSchema<any, import("zod").ZodTypeDef, any> | YupObjectSchema<any, import("yup").AnyObject, any, ""> | import("joi").AnySchema<any> | ValibotSchema30<any, any> | ValibotSchemaAsync30<any, any> | ValibotSchema31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSchemaAsync31<unknown, unknown, import("valibot31").BaseIssue<unknown>> | ValibotSafeParser31<any, any> | ValibotSafeParserAsync31<any, any> | ValibotSchema<unknown, unknown, import("valibot").BaseIssue<unknown>> | ValibotSchemaAsync<unknown, unknown, import("valibot").BaseIssue<unknown>> | Struct<any, any> | StandardSchemaV1<unknown, unknown>;
59
60
  validate: ((state: any) => Promise<FormError[]>) | ((state: any) => FormError[]);
60
61
  validateOn: FormEventType[];
61
62
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
62
63
  export default _default;
64
+ export declare function isStandardSchema(schema: any): schema is StandardSchemaV1;
65
+ export declare function validateStandardSchema(state: any, schema: StandardSchemaV1): Promise<ValidateReturnSchema<typeof state>>;
@@ -32,12 +32,12 @@
32
32
 
33
33
  <script>
34
34
  import { ref, computed, toRef, onMounted, defineComponent } from "vue";
35
- import { twMerge, twJoin } from "tailwind-merge";
35
+ import { twJoin } from "tailwind-merge";
36
36
  import { defu } from "defu";
37
37
  import UIcon from "../elements/Icon.vue";
38
38
  import { useUI } from "../../composables/useUI";
39
39
  import { useFormGroup } from "../../composables/useFormGroup";
40
- import { mergeConfig, looseToNumber } from "../../utils";
40
+ import { looseToNumber, mergeConfig, twMerge } from "../../utils";
41
41
  import { useInjectButtonGroup } from "../../composables/useButtonGroup";
42
42
  import appConfig from "#build/app.config";
43
43
  import { input } from "#ui/ui.config";
@@ -102,14 +102,14 @@ import {
102
102
  } from "@headlessui/vue";
103
103
  import { computedAsync, useDebounceFn } from "@vueuse/core";
104
104
  import { defu } from "defu";
105
- import { twMerge, twJoin } from "tailwind-merge";
106
- import { isEqual } from "ohash";
105
+ import { twJoin } from "tailwind-merge";
106
+ import { isEqual } from "ohash/utils";
107
107
  import UIcon from "../elements/Icon.vue";
108
108
  import UAvatar from "../elements/Avatar.vue";
109
109
  import { useUI } from "../../composables/useUI";
110
110
  import { usePopper } from "../../composables/usePopper";
111
111
  import { useFormGroup } from "../../composables/useFormGroup";
112
- import { get, mergeConfig } from "../../utils";
112
+ import { get, mergeConfig, twMerge } from "../../utils";
113
113
  import { useInjectButtonGroup } from "../../composables/useButtonGroup";
114
114
  import appConfig from "#build/app.config";
115
115
  import { input, inputMenu } from "#ui/ui.config";
@@ -30,10 +30,10 @@
30
30
 
31
31
  <script>
32
32
  import { computed, defineComponent, inject, toRef } from "vue";
33
- import { twMerge, twJoin } from "tailwind-merge";
33
+ import { twJoin } from "tailwind-merge";
34
34
  import { useUI } from "../../composables/useUI";
35
35
  import { useFormGroup } from "../../composables/useFormGroup";
36
- import { mergeConfig } from "../../utils";
36
+ import { mergeConfig, twMerge } from "../../utils";
37
37
  import appConfig from "#build/app.config";
38
38
  import { radio } from "#ui/ui.config";
39
39
  import { useId } from "#imports";
@@ -33,7 +33,7 @@
33
33
  import { computed, defineComponent, provide, toRef } from "vue";
34
34
  import { useUI } from "../../composables/useUI";
35
35
  import { useFormGroup } from "../../composables/useFormGroup";
36
- import { mergeConfig, get } from "../../utils";
36
+ import { get, mergeConfig } from "../../utils";
37
37
  import URadio from "./Radio.vue";
38
38
  import appConfig from "#build/app.config";
39
39
  import { radioGroup, radio } from "#ui/ui.config";
@@ -21,10 +21,10 @@
21
21
 
22
22
  <script>
23
23
  import { computed, toRef, defineComponent } from "vue";
24
- import { twMerge, twJoin } from "tailwind-merge";
24
+ import { twJoin } from "tailwind-merge";
25
25
  import { useUI } from "../../composables/useUI";
26
26
  import { useFormGroup } from "../../composables/useFormGroup";
27
- import { mergeConfig } from "../../utils";
27
+ import { mergeConfig, twMerge } from "../../utils";
28
28
  import appConfig from "#build/app.config";
29
29
  import { range } from "#ui/ui.config";
30
30
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.range, range);
@@ -54,11 +54,11 @@
54
54
 
55
55
  <script>
56
56
  import { computed, toRef, defineComponent } from "vue";
57
- import { twMerge, twJoin } from "tailwind-merge";
57
+ import { twJoin } from "tailwind-merge";
58
58
  import UIcon from "../elements/Icon.vue";
59
59
  import { useUI } from "../../composables/useUI";
60
60
  import { useFormGroup } from "../../composables/useFormGroup";
61
- import { mergeConfig, get } from "../../utils";
61
+ import { get, mergeConfig, twMerge } from "../../utils";
62
62
  import { useInjectButtonGroup } from "../../composables/useButtonGroup";
63
63
  import appConfig from "#build/app.config";
64
64
  import { select } from "#ui/ui.config";
@@ -16,6 +16,7 @@
16
16
  :value="modelValue"
17
17
  :required="required"
18
18
  :class="uiMenu.required"
19
+ :form="inputTargetForm"
19
20
  tabindex="-1"
20
21
  aria-hidden="true"
21
22
  >
@@ -138,14 +139,14 @@ import {
138
139
  } from "@headlessui/vue";
139
140
  import { computedAsync, useDebounceFn } from "@vueuse/core";
140
141
  import { defu } from "defu";
141
- import { twMerge, twJoin } from "tailwind-merge";
142
- import { isEqual } from "ohash";
142
+ import { twJoin } from "tailwind-merge";
143
+ import { isEqual } from "ohash/utils";
143
144
  import UIcon from "../elements/Icon.vue";
144
145
  import UAvatar from "../elements/Avatar.vue";
145
146
  import { useUI } from "../../composables/useUI";
146
147
  import { usePopper } from "../../composables/usePopper";
147
148
  import { useFormGroup } from "../../composables/useFormGroup";
148
- import { get, mergeConfig } from "../../utils";
149
+ import { get, mergeConfig, twMerge } from "../../utils";
149
150
  import { useInjectButtonGroup } from "../../composables/useButtonGroup";
150
151
  import appConfig from "#build/app.config";
151
152
  import { select, selectMenu } from "#ui/ui.config";
@@ -308,6 +309,10 @@ export default defineComponent({
308
309
  type: Array,
309
310
  default: null
310
311
  },
312
+ inputTargetForm: {
313
+ type: String,
314
+ default: null
315
+ },
311
316
  popper: {
312
317
  type: Object,
313
318
  default: () => ({})
@@ -323,6 +323,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
323
323
  type: ArrayConstructor;
324
324
  default: any;
325
325
  };
326
+ inputTargetForm: {
327
+ type: StringConstructor;
328
+ default: any;
329
+ };
326
330
  popper: {
327
331
  type: PropType<PopperOptions>;
328
332
  default: () => {};
@@ -699,6 +703,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
699
703
  type: ArrayConstructor;
700
704
  default: any;
701
705
  };
706
+ inputTargetForm: {
707
+ type: StringConstructor;
708
+ default: any;
709
+ };
702
710
  popper: {
703
711
  type: PropType<PopperOptions>;
704
712
  default: () => {};
@@ -964,6 +972,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
964
972
  clearSearchOnClose: boolean;
965
973
  creatable: boolean;
966
974
  showCreateOptionWhen: "empty" | "always" | ((query: string, results: any[]) => boolean);
975
+ inputTargetForm: string;
967
976
  }, {}, {
968
977
  HCombobox: import("vue").DefineComponent<{
969
978
  as: {
@@ -22,11 +22,11 @@
22
22
 
23
23
  <script>
24
24
  import { ref, computed, toRef, watch, onMounted, nextTick, defineComponent } from "vue";
25
- import { twMerge, twJoin } from "tailwind-merge";
25
+ import { twJoin } from "tailwind-merge";
26
26
  import { defu } from "defu";
27
27
  import { useUI } from "../../composables/useUI";
28
28
  import { useFormGroup } from "../../composables/useFormGroup";
29
- import { mergeConfig, looseToNumber } from "../../utils";
29
+ import { looseToNumber, mergeConfig, twMerge } from "../../utils";
30
30
  import appConfig from "#build/app.config";
31
31
  import { textarea } from "#ui/ui.config";
32
32
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.textarea, textarea);
@@ -32,11 +32,11 @@
32
32
  <script>
33
33
  import { computed, toRef, defineComponent } from "vue";
34
34
  import { Switch as HSwitch, provideUseId } from "@headlessui/vue";
35
- import { twMerge, twJoin } from "tailwind-merge";
35
+ import { twJoin } from "tailwind-merge";
36
36
  import UIcon from "../elements/Icon.vue";
37
37
  import { useUI } from "../../composables/useUI";
38
38
  import { useFormGroup } from "../../composables/useFormGroup";
39
- import { mergeConfig } from "../../utils";
39
+ import { mergeConfig, twMerge } from "../../utils";
40
40
  import appConfig from "#build/app.config";
41
41
  import { toggle } from "#ui/ui.config";
42
42
  import { useId } from "#imports";
@@ -18,9 +18,9 @@
18
18
 
19
19
  <script>
20
20
  import { computed, toRef, defineComponent } from "vue";
21
- import { twMerge, twJoin } from "tailwind-merge";
21
+ import { twJoin } from "tailwind-merge";
22
22
  import { useUI } from "../../composables/useUI";
23
- import { mergeConfig } from "../../utils";
23
+ import { mergeConfig, twMerge } from "../../utils";
24
24
  import appConfig from "#build/app.config";
25
25
  import { card } from "#ui/ui.config";
26
26
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.card, card);
@@ -6,9 +6,9 @@
6
6
 
7
7
  <script>
8
8
  import { computed, toRef, defineComponent } from "vue";
9
- import { twMerge, twJoin } from "tailwind-merge";
9
+ import { twJoin } from "tailwind-merge";
10
10
  import { useUI } from "../../composables/useUI";
11
- import { mergeConfig } from "../../utils";
11
+ import { mergeConfig, twMerge } from "../../utils";
12
12
  import appConfig from "#build/app.config";
13
13
  import { container } from "#ui/ui.config";
14
14
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.container, container);
@@ -20,11 +20,11 @@
20
20
 
21
21
  <script>
22
22
  import { toRef, computed, defineComponent } from "vue";
23
- import { twMerge, twJoin } from "tailwind-merge";
23
+ import { twJoin } from "tailwind-merge";
24
24
  import UIcon from "../elements/Icon.vue";
25
25
  import UAvatar from "../elements/Avatar.vue";
26
26
  import { useUI } from "../../composables/useUI";
27
- import { mergeConfig } from "../../utils";
27
+ import { mergeConfig, twMerge } from "../../utils";
28
28
  import appConfig from "#build/app.config";
29
29
  import { divider } from "#ui/ui.config";
30
30
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.divider, divider);
@@ -4,9 +4,9 @@
4
4
 
5
5
  <script>
6
6
  import { computed, toRef, defineComponent } from "vue";
7
- import { twMerge, twJoin } from "tailwind-merge";
7
+ import { twJoin } from "tailwind-merge";
8
8
  import { useUI } from "../../composables/useUI";
9
- import { mergeConfig } from "../../utils";
9
+ import { mergeConfig, twMerge } from "../../utils";
10
10
  import appConfig from "#build/app.config";
11
11
  import { skeleton } from "#ui/ui.config";
12
12
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.skeleton, skeleton);
@@ -35,11 +35,11 @@
35
35
 
36
36
  <script>
37
37
  import { defineComponent, toRef } from "vue";
38
- import { twMerge, twJoin } from "tailwind-merge";
38
+ import { twJoin } from "tailwind-merge";
39
39
  import UIcon from "../elements/Icon.vue";
40
40
  import ULink from "../elements/Link.vue";
41
41
  import { useUI } from "../../composables/useUI";
42
- import { mergeConfig, getULinkProps } from "../../utils";
42
+ import { getULinkProps, mergeConfig, twMerge } from "../../utils";
43
43
  import appConfig from "#build/app.config";
44
44
  import { breadcrumb } from "#ui/ui.config";
45
45
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);
@@ -53,13 +53,13 @@
53
53
 
54
54
  <script>
55
55
  import { toRef, defineComponent, computed } from "vue";
56
- import { twMerge, twJoin } from "tailwind-merge";
56
+ import { twJoin } from "tailwind-merge";
57
57
  import UIcon from "../elements/Icon.vue";
58
58
  import UAvatar from "../elements/Avatar.vue";
59
59
  import UBadge from "../elements/Badge.vue";
60
60
  import ULink from "../elements/Link.vue";
61
61
  import { useUI } from "../../composables/useUI";
62
- import { mergeConfig, getULinkProps } from "../../utils";
62
+ import { getULinkProps, mergeConfig, twMerge } from "../../utils";
63
63
  import appConfig from "#build/app.config";
64
64
  import { horizontalNavigation } from "#ui/ui.config";
65
65
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.horizontalNavigation, horizontalNavigation);
@@ -54,14 +54,14 @@
54
54
 
55
55
  <script>
56
56
  import { toRef, defineComponent, computed } from "vue";
57
- import { twMerge, twJoin } from "tailwind-merge";
57
+ import { twJoin } from "tailwind-merge";
58
58
  import UIcon from "../elements/Icon.vue";
59
59
  import UAvatar from "../elements/Avatar.vue";
60
60
  import UBadge from "../elements/Badge.vue";
61
61
  import ULink from "../elements/Link.vue";
62
62
  import UDivider from "../layout/Divider.vue";
63
63
  import { useUI } from "../../composables/useUI";
64
- import { mergeConfig, getULinkProps } from "../../utils";
64
+ import { getULinkProps, mergeConfig, twMerge } from "../../utils";
65
65
  import appConfig from "#build/app.config";
66
66
  import { verticalNavigation } from "#ui/ui.config";
67
67
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation);
@@ -16,10 +16,10 @@
16
16
  import { computed, toRef, defineComponent } from "vue";
17
17
  import { defu } from "defu";
18
18
  import { onClickOutside } from "@vueuse/core";
19
- import { twMerge, twJoin } from "tailwind-merge";
19
+ import { twJoin } from "tailwind-merge";
20
20
  import { useUI } from "../../composables/useUI";
21
21
  import { usePopper } from "../../composables/usePopper";
22
- import { mergeConfig } from "../../utils";
22
+ import { mergeConfig, twMerge } from "../../utils";
23
23
  import appConfig from "#build/app.config";
24
24
  import { contextMenu } from "#ui/ui.config";
25
25
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.contextMenu, contextMenu);
@@ -18,7 +18,7 @@
18
18
  {{ title }}
19
19
  </slot>
20
20
  </p>
21
- <div v-if="(description || $slots.description)" :class="twMerge(ui.description, !title && !$slots.title && 'mt-0 leading-5')">
21
+ <div v-if="(description || $slots.description)" :class="twMerge(ui.description, !title && !$slots.title && ui.descriptionOnly)">
22
22
  <slot name="description" :description="description">
23
23
  {{ description }}
24
24
  </slot>
@@ -44,13 +44,13 @@
44
44
 
45
45
  <script>
46
46
  import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from "vue";
47
- import { twMerge, twJoin } from "tailwind-merge";
47
+ import { twJoin } from "tailwind-merge";
48
48
  import UIcon from "../elements/Icon.vue";
49
49
  import UAvatar from "../elements/Avatar.vue";
50
50
  import UButton from "../elements/Button.vue";
51
51
  import { useUI } from "../../composables/useUI";
52
52
  import { useTimer } from "../../composables/useTimer";
53
- import { mergeConfig } from "../../utils";
53
+ import { mergeConfig, twMerge } from "../../utils";
54
54
  import appConfig from "#build/app.config";
55
55
  import { notification } from "#ui/ui.config";
56
56
  const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.notification, notification);
@@ -6,6 +6,7 @@ declare const config: {
6
6
  inner: string;
7
7
  title: string;
8
8
  description: string;
9
+ descriptionOnly: string;
9
10
  actions: string;
10
11
  background: string;
11
12
  shadow: string;
@@ -112,6 +113,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
112
113
  inner: string;
113
114
  title: string;
114
115
  description: string;
116
+ descriptionOnly: string;
115
117
  actions: string;
116
118
  background: string;
117
119
  shadow: string;
@@ -236,6 +238,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
236
238
  inner?: string;
237
239
  title?: string;
238
240
  description?: string;
241
+ descriptionOnly?: string;
239
242
  actions?: string;
240
243
  background?: string;
241
244
  shadow?: string;
@@ -21,10 +21,10 @@
21
21
 
22
22
  <script>
23
23
  import { computed, toRef, defineComponent } from "vue";
24
- import { twMerge, twJoin } from "tailwind-merge";
24
+ import { twJoin } from "tailwind-merge";
25
25
  import { useUI } from "../../composables/useUI";
26
26
  import { useToast } from "../../composables/useToast";
27
- import { mergeConfig } from "../../utils";
27
+ import { mergeConfig, twMerge } from "../../utils";
28
28
  import UNotification from "./Notification.vue";
29
29
  import { useState } from "#imports";
30
30
  import appConfig from "#build/app.config";
@@ -125,6 +125,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
125
125
  inner: string;
126
126
  title: string;
127
127
  description: string;
128
+ descriptionOnly: string;
128
129
  actions: string;
129
130
  background: string;
130
131
  shadow: string;
@@ -183,6 +184,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
183
184
  inner: string;
184
185
  title: string;
185
186
  description: string;
187
+ descriptionOnly: string;
186
188
  actions: string;
187
189
  background: string;
188
190
  shadow: string;
@@ -293,6 +295,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
293
295
  inner: string;
294
296
  title: string;
295
297
  description: string;
298
+ descriptionOnly: string;
296
299
  actions: string;
297
300
  background: string;
298
301
  shadow: string;
@@ -355,6 +358,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
355
358
  inner?: string;
356
359
  title?: string;
357
360
  description?: string;
361
+ descriptionOnly?: string;
358
362
  actions?: string;
359
363
  background?: string;
360
364
  shadow?: string;
@@ -1,12 +1,12 @@
1
1
  export declare const _useShortcuts: () => {
2
2
  macOS: import("vue").ComputedRef<RegExpMatchArray>;
3
3
  metaSymbol: import("vue").Ref<string, string>;
4
- activeElement: import("vue").Ref<HTMLElement, HTMLElement>;
4
+ activeElement: import("vue").ShallowRef<HTMLElement, HTMLElement>;
5
5
  usingInput: import("vue").ComputedRef<string | boolean>;
6
6
  };
7
7
  export declare const useShortcuts: () => {
8
8
  macOS: import("vue").ComputedRef<RegExpMatchArray>;
9
9
  metaSymbol: import("vue").Ref<string, string>;
10
- activeElement: import("vue").Ref<HTMLElement, HTMLElement>;
10
+ activeElement: import("vue").ShallowRef<HTMLElement, HTMLElement>;
11
11
  usingInput: import("vue").ComputedRef<string | boolean>;
12
12
  };
@@ -4,6 +4,7 @@ declare const _default: {
4
4
  inner: string;
5
5
  title: string;
6
6
  description: string;
7
+ descriptionOnly: string;
7
8
  actions: string;
8
9
  shadow: string;
9
10
  rounded: string;
@@ -3,6 +3,7 @@ export default {
3
3
  inner: "w-0 flex-1",
4
4
  title: "text-sm font-medium",
5
5
  description: "mt-1 text-sm leading-4 opacity-90",
6
+ descriptionOnly: "mt-0 leading-5",
6
7
  actions: "flex items-center gap-2 mt-3 flex-shrink-0",
7
8
  shadow: "",
8
9
  rounded: "rounded-lg",
@@ -5,6 +5,7 @@ declare const _default: {
5
5
  inner: string;
6
6
  title: string;
7
7
  description: string;
8
+ descriptionOnly: string;
8
9
  actions: string;
9
10
  background: string;
10
11
  shadow: string;
@@ -4,6 +4,7 @@ export default {
4
4
  inner: "w-0 flex-1",
5
5
  title: "text-sm font-medium text-gray-900 dark:text-white",
6
6
  description: "mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400",
7
+ descriptionOnly: "mt-0 leading-5",
7
8
  actions: "flex items-center gap-2 mt-3 flex-shrink-0",
8
9
  background: "bg-white dark:bg-gray-900",
9
10
  shadow: "shadow-lg",
@@ -1,4 +1,5 @@
1
1
  import type { Strategy } from '../types/index.js';
2
+ export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
2
3
  export declare function mergeConfig<T>(strategy: Strategy, ...configs: any[]): T;
3
4
  export declare function parseConfigValue(value: string): string;
4
5
  export declare function hexToRgb(hex: string): string;
@@ -1,12 +1,13 @@
1
1
  import { defu, createDefu } from "defu";
2
2
  import { extendTailwindMerge } from "tailwind-merge";
3
- const customTwMerge = extendTailwindMerge({
3
+ import appConfig from "#build/app.config";
4
+ export const twMerge = extendTailwindMerge(defu({
4
5
  extend: {
5
6
  classGroups: {
6
7
  icons: [(classPart) => classPart.startsWith("i-")]
7
8
  }
8
9
  }
9
- });
10
+ }, appConfig.ui?.tailwindMerge));
10
11
  const defuTwMerge = createDefu((obj, key, value, namespace) => {
11
12
  if (namespace === "default" || namespace.startsWith("default.")) {
12
13
  return false;
@@ -24,7 +25,7 @@ const defuTwMerge = createDefu((obj, key, value, namespace) => {
24
25
  return false;
25
26
  }
26
27
  if (typeof obj[key] === "string" && typeof value === "string" && obj[key] && value) {
27
- obj[key] = customTwMerge(obj[key], value);
28
+ obj[key] = twMerge(obj[key], value);
28
29
  return true;
29
30
  }
30
31
  });
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@nuxt/ui",
3
3
  "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
4
- "version": "2.20.0",
5
- "packageManager": "pnpm@9.15.0",
4
+ "version": "2.21.1",
5
+ "packageManager": "pnpm@10.6.1",
6
6
  "repository": "nuxt/ui",
7
7
  "homepage": "https://ui.nuxt.com",
8
8
  "type": "module",
@@ -32,57 +32,58 @@
32
32
  "test": "vitest"
33
33
  },
34
34
  "dependencies": {
35
- "@headlessui/tailwindcss": "^0.2.1",
35
+ "@headlessui/tailwindcss": "^0.2.2",
36
36
  "@headlessui/vue": "^1.7.23",
37
- "@iconify-json/heroicons": "^1.2.1",
38
- "@nuxt/icon": "^1.9.1",
39
- "@nuxt/kit": "^3.14.1592",
37
+ "@iconify-json/heroicons": "^1.2.2",
38
+ "@nuxt/icon": "^1.10.3",
39
+ "@nuxt/kit": "^3.16.0",
40
40
  "@nuxtjs/color-mode": "^3.5.2",
41
- "@nuxtjs/tailwindcss": "^6.12.2",
41
+ "@nuxtjs/tailwindcss": "^6.13.1",
42
42
  "@popperjs/core": "^2.11.8",
43
43
  "@tailwindcss/aspect-ratio": "^0.4.2",
44
44
  "@tailwindcss/container-queries": "^0.1.1",
45
- "@tailwindcss/forms": "^0.5.9",
46
- "@tailwindcss/typography": "^0.5.15",
47
- "@vueuse/core": "^12.0.0",
48
- "@vueuse/integrations": "^12.0.0",
49
- "@vueuse/math": "^12.0.0",
45
+ "@tailwindcss/forms": "^0.5.10",
46
+ "@tailwindcss/typography": "^0.5.16",
47
+ "@vueuse/core": "^12.8.2",
48
+ "@vueuse/integrations": "^12.8.2",
49
+ "@vueuse/math": "^12.8.2",
50
50
  "defu": "^6.1.4",
51
- "fuse.js": "^7.0.0",
52
- "ohash": "^1.1.4",
53
- "pathe": "^1.1.2",
51
+ "fuse.js": "^7.1.0",
52
+ "ohash": "^2.0.11",
53
+ "pathe": "^2.0.3",
54
54
  "scule": "^1.3.0",
55
- "tailwind-merge": "^2.5.5",
56
- "tailwindcss": "^3.4.16"
55
+ "tailwind-merge": "^2.6.0",
56
+ "tailwindcss": "^3.4.17"
57
57
  },
58
58
  "devDependencies": {
59
- "@nuxt/eslint-config": "^0.7.2",
59
+ "@nuxt/eslint-config": "^1.1.0",
60
60
  "@nuxt/module-builder": "^0.8.4",
61
- "@nuxt/test-utils": "^3.15.1",
62
- "@release-it/conventional-changelog": "^9.0.3",
61
+ "@standard-schema/spec": "^1.0.0",
62
+ "@nuxt/test-utils": "^3.17.1",
63
+ "@release-it/conventional-changelog": "^10.0.0",
63
64
  "@vue/test-utils": "^2.4.6",
64
- "eslint": "^9.16.0",
65
- "happy-dom": "^14.12.3",
65
+ "eslint": "^9.22.0",
66
+ "happy-dom": "^17.1.8",
66
67
  "joi": "^17.13.3",
67
- "nuxt": "^3.14.1592",
68
- "release-it": "^17.10.0",
68
+ "nuxt": "^3.16.0",
69
+ "release-it": "^18.1.2",
69
70
  "superstruct": "^2.0.2",
70
71
  "typescript": "^5.6.3",
71
- "unbuild": "^2.0.0",
72
72
  "valibot": "^0.42.1",
73
73
  "valibot30": "npm:valibot@0.30.0",
74
74
  "valibot31": "npm:valibot@0.31.0",
75
- "vitest": "^2.1.8",
75
+ "vitest": "^3.0.8",
76
76
  "vitest-environment-nuxt": "^1.0.1",
77
77
  "vue-tsc": "^2.1.10",
78
- "yup": "^1.5.0",
79
- "zod": "^3.23.8"
78
+ "yup": "^1.6.1",
79
+ "zod": "^3.24.2"
80
80
  },
81
81
  "resolutions": {
82
82
  "@nuxt/ui": "workspace:*",
83
83
  "@nuxt/content": "2.13.2",
84
84
  "@nuxtjs/mdc": "0.9.0",
85
85
  "chokidar": "3.6.0",
86
+ "vue-tsc": "2.1.10",
86
87
  "typescript": "5.6.3"
87
88
  }
88
89
  }