@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.
- package/README.md +0 -10
- package/dist/module.d.mts +6 -0
- package/dist/module.d.ts +6 -0
- package/dist/module.json +1 -1
- package/dist/module.mjs +20 -12
- package/dist/runtime/components/data/Table.vue +26 -25
- package/dist/runtime/components/data/Table.vue.d.ts +0 -2
- package/dist/runtime/components/elements/Alert.vue +3 -3
- package/dist/runtime/components/elements/Alert.vue.d.ts +3 -0
- package/dist/runtime/components/elements/Avatar.vue +2 -2
- package/dist/runtime/components/elements/AvatarGroup.js +2 -2
- package/dist/runtime/components/elements/Badge.vue +2 -2
- package/dist/runtime/components/elements/Button.vue +2 -2
- package/dist/runtime/components/elements/ButtonGroup.js +2 -2
- package/dist/runtime/components/elements/Carousel.vue +1 -2
- package/dist/runtime/components/elements/Dropdown.vue +2 -2
- package/dist/runtime/components/elements/Kbd.vue +2 -2
- package/dist/runtime/components/elements/Link.vue +6 -4
- package/dist/runtime/components/elements/MeterGroup.d.ts +1 -1
- package/dist/runtime/components/elements/MeterGroup.js +1 -1
- package/dist/runtime/components/forms/Checkbox.vue +2 -2
- package/dist/runtime/components/forms/Form.vue +24 -1
- package/dist/runtime/components/forms/Form.vue.d.ts +6 -3
- package/dist/runtime/components/forms/Input.vue +2 -2
- package/dist/runtime/components/forms/InputMenu.vue +3 -3
- package/dist/runtime/components/forms/Radio.vue +2 -2
- package/dist/runtime/components/forms/RadioGroup.vue +1 -1
- package/dist/runtime/components/forms/Range.vue +2 -2
- package/dist/runtime/components/forms/Select.vue +2 -2
- package/dist/runtime/components/forms/SelectMenu.vue +8 -3
- package/dist/runtime/components/forms/SelectMenu.vue.d.ts +9 -0
- package/dist/runtime/components/forms/Textarea.vue +2 -2
- package/dist/runtime/components/forms/Toggle.vue +2 -2
- package/dist/runtime/components/layout/Card.vue +2 -2
- package/dist/runtime/components/layout/Container.vue +2 -2
- package/dist/runtime/components/layout/Divider.vue +2 -2
- package/dist/runtime/components/layout/Skeleton.vue +2 -2
- package/dist/runtime/components/navigation/Breadcrumb.vue +2 -2
- package/dist/runtime/components/navigation/HorizontalNavigation.vue +2 -2
- package/dist/runtime/components/navigation/VerticalNavigation.vue +2 -2
- package/dist/runtime/components/overlays/ContextMenu.vue +2 -2
- package/dist/runtime/components/overlays/Notification.vue +3 -3
- package/dist/runtime/components/overlays/Notification.vue.d.ts +3 -0
- package/dist/runtime/components/overlays/Notifications.vue +2 -2
- package/dist/runtime/components/overlays/Notifications.vue.d.ts +4 -0
- package/dist/runtime/composables/useShortcuts.d.ts +2 -2
- package/dist/runtime/ui.config/elements/alert.d.ts +1 -0
- package/dist/runtime/ui.config/elements/alert.js +1 -0
- package/dist/runtime/ui.config/overlays/notification.d.ts +1 -0
- package/dist/runtime/ui.config/overlays/notification.js +1 -0
- package/dist/runtime/utils/index.d.ts +1 -0
- package/dist/runtime/utils/index.js +4 -3
- 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
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.
|
|
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.
|
|
51
|
+
filename: "nuxtui-tailwind.config.mjs",
|
|
52
52
|
write: true,
|
|
53
53
|
getContents: ({ nuxt: nuxt2 }) => `
|
|
54
|
-
|
|
55
|
-
|
|
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
|
-
|
|
64
|
+
export default {
|
|
60
65
|
plugins: [
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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
|
-
|
|
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 &&
|
|
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 &&
|
|
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,
|
|
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 {
|
|
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(() =>
|
|
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
|
-
|
|
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 &&
|
|
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 {
|
|
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 {
|
|
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 {
|
|
2
|
+
import { twJoin } from "tailwind-merge";
|
|
3
3
|
import { useUI } from "../../composables/useUI.js";
|
|
4
|
-
import { mergeConfig,
|
|
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 {
|
|
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 {
|
|
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,
|
|
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 {
|
|
2
|
+
import { twJoin } from "tailwind-merge";
|
|
3
3
|
import { useUI } from "../../composables/useUI.js";
|
|
4
|
-
import { mergeConfig,
|
|
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 {
|
|
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,
|
|
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 {
|
|
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.
|
|
79
|
+
filtered.add(q.key);
|
|
80
80
|
}
|
|
81
81
|
return filtered;
|
|
82
|
-
},
|
|
83
|
-
|
|
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 {
|
|
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 {
|
|
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 (
|
|
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 {
|
|
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,
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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,
|
|
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 {
|
|
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 {
|
|
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,
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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,
|
|
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 {
|
|
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,
|
|
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 {
|
|
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,
|
|
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 {
|
|
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 &&
|
|
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 {
|
|
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 {
|
|
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").
|
|
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").
|
|
10
|
+
activeElement: import("vue").ShallowRef<HTMLElement, HTMLElement>;
|
|
11
11
|
usingInput: import("vue").ComputedRef<string | boolean>;
|
|
12
12
|
};
|
|
@@ -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
|
-
|
|
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] =
|
|
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.
|
|
5
|
-
"packageManager": "pnpm@
|
|
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.
|
|
35
|
+
"@headlessui/tailwindcss": "^0.2.2",
|
|
36
36
|
"@headlessui/vue": "^1.7.23",
|
|
37
|
-
"@iconify-json/heroicons": "^1.2.
|
|
38
|
-
"@nuxt/icon": "^1.
|
|
39
|
-
"@nuxt/kit": "^3.
|
|
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.
|
|
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.
|
|
46
|
-
"@tailwindcss/typography": "^0.5.
|
|
47
|
-
"@vueuse/core": "^12.
|
|
48
|
-
"@vueuse/integrations": "^12.
|
|
49
|
-
"@vueuse/math": "^12.
|
|
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.
|
|
52
|
-
"ohash": "^
|
|
53
|
-
"pathe": "^
|
|
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.
|
|
56
|
-
"tailwindcss": "^3.4.
|
|
55
|
+
"tailwind-merge": "^2.6.0",
|
|
56
|
+
"tailwindcss": "^3.4.17"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@nuxt/eslint-config": "^
|
|
59
|
+
"@nuxt/eslint-config": "^1.1.0",
|
|
60
60
|
"@nuxt/module-builder": "^0.8.4",
|
|
61
|
-
"@
|
|
62
|
-
"@
|
|
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.
|
|
65
|
-
"happy-dom": "^
|
|
65
|
+
"eslint": "^9.22.0",
|
|
66
|
+
"happy-dom": "^17.1.8",
|
|
66
67
|
"joi": "^17.13.3",
|
|
67
|
-
"nuxt": "^3.
|
|
68
|
-
"release-it": "^
|
|
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": "^
|
|
75
|
+
"vitest": "^3.0.8",
|
|
76
76
|
"vitest-environment-nuxt": "^1.0.1",
|
|
77
77
|
"vue-tsc": "^2.1.10",
|
|
78
|
-
"yup": "^1.
|
|
79
|
-
"zod": "^3.
|
|
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
|
}
|