@nuxt/ui 2.19.2 → 2.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/module.json +1 -1
- package/dist/module.mjs +1 -1
- package/dist/runtime/components/data/Table.vue +75 -34
- package/dist/runtime/components/data/Table.vue.d.ts +74 -61
- package/dist/runtime/components/elements/Accordion.vue +3 -1
- package/dist/runtime/components/elements/Accordion.vue.d.ts +25 -24
- package/dist/runtime/components/elements/Alert.vue.d.ts +39 -39
- package/dist/runtime/components/elements/Avatar.vue.d.ts +3 -3
- package/dist/runtime/components/elements/AvatarGroup.d.ts +11 -9
- package/dist/runtime/components/elements/Badge.vue +69 -2
- package/dist/runtime/components/elements/Badge.vue.d.ts +131 -4
- package/dist/runtime/components/elements/Button.vue.d.ts +20 -20
- package/dist/runtime/components/elements/ButtonGroup.d.ts +15 -13
- package/dist/runtime/components/elements/Carousel.vue.d.ts +43 -41
- package/dist/runtime/components/elements/Chip.vue.d.ts +5 -5
- package/dist/runtime/components/elements/Dropdown.vue.d.ts +7 -7
- package/dist/runtime/components/elements/Link.vue +15 -4
- package/dist/runtime/components/elements/Link.vue.d.ts +30 -29
- package/dist/runtime/components/elements/Meter.vue.d.ts +3 -3
- package/dist/runtime/components/elements/MeterGroup.d.ts +20 -18
- package/dist/runtime/components/elements/Progress.vue.d.ts +2 -2
- package/dist/runtime/components/forms/Checkbox.vue.d.ts +2 -2
- package/dist/runtime/components/forms/Form.vue +6 -5
- package/dist/runtime/components/forms/FormGroup.vue.d.ts +2 -2
- package/dist/runtime/components/forms/Input.vue.d.ts +3 -3
- package/dist/runtime/components/forms/InputMenu.vue +35 -5
- package/dist/runtime/components/forms/InputMenu.vue.d.ts +13 -12
- package/dist/runtime/components/forms/Radio.vue.d.ts +2 -2
- package/dist/runtime/components/forms/RadioGroup.vue.d.ts +4 -4
- package/dist/runtime/components/forms/Range.vue.d.ts +2 -2
- package/dist/runtime/components/forms/Select.vue.d.ts +3 -3
- package/dist/runtime/components/forms/SelectMenu.vue +46 -23
- package/dist/runtime/components/forms/SelectMenu.vue.d.ts +12 -11
- package/dist/runtime/components/forms/Textarea.vue.d.ts +3 -3
- package/dist/runtime/components/forms/Toggle.vue.d.ts +1 -1
- package/dist/runtime/components/layout/Card.vue.d.ts +1 -1
- package/dist/runtime/components/layout/Container.vue.d.ts +1 -1
- package/dist/runtime/components/layout/Divider.vue.d.ts +19 -19
- package/dist/runtime/components/layout/Skeleton.vue.d.ts +1 -1
- package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts +3 -3
- package/dist/runtime/components/navigation/CommandPalette.vue.d.ts +26 -26
- package/dist/runtime/components/navigation/CommandPaletteGroup.vue.d.ts +3 -3
- package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts +164 -22
- package/dist/runtime/components/navigation/Pagination.vue.d.ts +38 -38
- package/dist/runtime/components/navigation/Tabs.vue.d.ts +2 -2
- package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts +186 -44
- package/dist/runtime/components/overlays/ContextMenu.vue.d.ts +1 -1
- package/dist/runtime/components/overlays/Notification.vue +6 -2
- package/dist/runtime/components/overlays/Notification.vue.d.ts +50 -41
- package/dist/runtime/components/overlays/Notifications.vue +2 -2
- package/dist/runtime/components/overlays/Notifications.vue.d.ts +55 -46
- package/dist/runtime/components/overlays/Popover.vue.d.ts +1 -1
- package/dist/runtime/components/overlays/Tooltip.vue.d.ts +2 -2
- package/dist/runtime/types/checkbox.d.ts +3 -0
- package/dist/runtime/types/divider.d.ts +1 -1
- package/dist/runtime/types/index.d.ts +1 -0
- package/dist/runtime/types/index.js +1 -0
- package/dist/runtime/types/link.d.ts +1 -1
- package/dist/runtime/types/utils.d.ts +1 -1
- package/dist/runtime/ui.config/data/table.d.ts +9 -8
- package/dist/runtime/ui.config/elements/accordion.d.ts +1 -1
- package/dist/runtime/ui.config/elements/alert.d.ts +5 -4
- package/dist/runtime/ui.config/elements/badge.d.ts +15 -0
- package/dist/runtime/ui.config/elements/badge.js +15 -0
- package/dist/runtime/ui.config/elements/carousel.d.ts +3 -2
- package/dist/runtime/ui.config/elements/dropdown.d.ts +2 -1
- package/dist/runtime/ui.config/forms/inputMenu.d.ts +2 -1
- package/dist/runtime/ui.config/forms/selectMenu.d.ts +1 -1
- package/dist/runtime/ui.config/layout/divider.d.ts +4 -3
- package/dist/runtime/ui.config/navigation/commandPalette.d.ts +2 -1
- package/dist/runtime/ui.config/navigation/horizontalNavigation.d.ts +5 -4
- package/dist/runtime/ui.config/navigation/pagination.d.ts +7 -6
- package/dist/runtime/ui.config/navigation/verticalNavigation.d.ts +5 -4
- package/dist/runtime/ui.config/overlays/notification.d.ts +6 -5
- package/package.json +20 -17
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { VNode, SlotsType, PropType } from 'vue';
|
|
2
|
-
import type { Strategy, MeterSize } from '../../types/index.js';
|
|
2
|
+
import type { DeepPartial, Strategy, MeterSize } from '../../types/index.js';
|
|
3
3
|
import type Meter from './Meter.vue.js';
|
|
4
4
|
declare const meterGroupConfig: {
|
|
5
5
|
wrapper: string;
|
|
@@ -79,7 +79,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
79
79
|
default: () => "";
|
|
80
80
|
};
|
|
81
81
|
ui: {
|
|
82
|
-
type: PropType<
|
|
82
|
+
type: PropType<DeepPartial<typeof meterGroupConfig> & {
|
|
83
83
|
strategy?: Strategy;
|
|
84
84
|
}>;
|
|
85
85
|
default: () => {};
|
|
@@ -113,22 +113,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
113
113
|
default: () => "";
|
|
114
114
|
};
|
|
115
115
|
ui: {
|
|
116
|
-
type: PropType<
|
|
116
|
+
type: PropType<DeepPartial<typeof meterGroupConfig> & {
|
|
117
117
|
strategy?: Strategy;
|
|
118
118
|
}>;
|
|
119
119
|
default: () => {};
|
|
120
120
|
};
|
|
121
121
|
}>> & Readonly<{}>, {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
orientation: {
|
|
122
|
+
ui: {
|
|
123
|
+
wrapper?: string;
|
|
124
|
+
base?: string;
|
|
125
|
+
background?: string;
|
|
126
|
+
transition?: string;
|
|
127
|
+
rounded?: string;
|
|
128
|
+
shadow?: string;
|
|
129
|
+
list?: string;
|
|
130
|
+
orientation?: DeepPartial<{
|
|
132
131
|
'rounded-none': {
|
|
133
132
|
left: string;
|
|
134
133
|
right: string;
|
|
@@ -165,16 +164,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
165
164
|
left: string;
|
|
166
165
|
right: string;
|
|
167
166
|
};
|
|
168
|
-
}
|
|
169
|
-
default
|
|
167
|
+
}, any>;
|
|
168
|
+
default?: DeepPartial<{
|
|
170
169
|
size: string;
|
|
171
170
|
icon: string;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
171
|
+
}, any>;
|
|
172
|
+
} & {
|
|
173
|
+
[key: string]: any;
|
|
174
|
+
} & {
|
|
174
175
|
strategy?: Strategy;
|
|
175
176
|
};
|
|
176
|
-
|
|
177
|
+
size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
|
|
177
178
|
class: any;
|
|
179
|
+
icon: string;
|
|
178
180
|
max: number;
|
|
179
181
|
min: number;
|
|
180
182
|
indicator: boolean;
|
|
@@ -268,11 +268,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
268
268
|
default: () => {};
|
|
269
269
|
};
|
|
270
270
|
}>> & Readonly<{}>, {
|
|
271
|
-
size: "
|
|
271
|
+
size: "sm" | "xs" | "2xs" | "md" | "lg" | "xl" | "2xl";
|
|
272
272
|
class: any;
|
|
273
273
|
max: number | any[];
|
|
274
274
|
animation: "carousel" | "carousel-inverse" | "swing" | "elastic";
|
|
275
|
-
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
276
275
|
ui: {
|
|
277
276
|
wrapper?: string;
|
|
278
277
|
indicator?: DeepPartial<{
|
|
@@ -351,6 +350,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
351
350
|
} & {
|
|
352
351
|
strategy?: Strategy;
|
|
353
352
|
};
|
|
353
|
+
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
354
354
|
value: number;
|
|
355
355
|
indicator: boolean;
|
|
356
356
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -166,8 +166,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
166
166
|
required: boolean;
|
|
167
167
|
class: any;
|
|
168
168
|
disabled: boolean;
|
|
169
|
-
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
170
|
-
label: string;
|
|
171
169
|
ui: {
|
|
172
170
|
wrapper?: string;
|
|
173
171
|
container?: string;
|
|
@@ -190,6 +188,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
190
188
|
} & {
|
|
191
189
|
strategy?: Strategy;
|
|
192
190
|
};
|
|
191
|
+
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
192
|
+
label: string;
|
|
193
193
|
id: string;
|
|
194
194
|
modelValue: boolean | any[];
|
|
195
195
|
value: string | number | boolean | Record<string, any>;
|
|
@@ -38,6 +38,7 @@ export default defineComponent({
|
|
|
38
38
|
setup(props, { expose, emit }) {
|
|
39
39
|
const formId = useId();
|
|
40
40
|
const bus = useEventBus(`form-${formId}`);
|
|
41
|
+
const parsedValue = ref(null);
|
|
41
42
|
onMounted(() => {
|
|
42
43
|
bus.on(async (event) => {
|
|
43
44
|
if (event.type !== "submit" && props.validateOn?.includes(event.type)) {
|
|
@@ -60,7 +61,7 @@ export default defineComponent({
|
|
|
60
61
|
if (errors2) {
|
|
61
62
|
errs = errs.concat(errors2);
|
|
62
63
|
} else {
|
|
63
|
-
|
|
64
|
+
parsedValue.value = result;
|
|
64
65
|
}
|
|
65
66
|
}
|
|
66
67
|
return errs;
|
|
@@ -95,7 +96,7 @@ export default defineComponent({
|
|
|
95
96
|
if (props.validateOn?.includes("submit")) {
|
|
96
97
|
await validate();
|
|
97
98
|
}
|
|
98
|
-
event.data = props.state;
|
|
99
|
+
event.data = props.schema ? parsedValue.value : props.state;
|
|
99
100
|
emit("submit", event);
|
|
100
101
|
} catch (error) {
|
|
101
102
|
if (!(error instanceof FormException)) {
|
|
@@ -187,10 +188,10 @@ async function validateValibotSchema(state, schema) {
|
|
|
187
188
|
}
|
|
188
189
|
async function validateJoiSchema(state, schema) {
|
|
189
190
|
try {
|
|
190
|
-
await schema.validateAsync(state, { abortEarly: false });
|
|
191
|
+
const result = await schema.validateAsync(state, { abortEarly: false });
|
|
191
192
|
return {
|
|
192
193
|
errors: null,
|
|
193
|
-
result
|
|
194
|
+
result
|
|
194
195
|
};
|
|
195
196
|
} catch (error) {
|
|
196
197
|
if (isJoiError(error)) {
|
|
@@ -243,7 +244,7 @@ async function validateSuperstructSchema(state, schema) {
|
|
|
243
244
|
}
|
|
244
245
|
async function validateYupSchema(state, schema) {
|
|
245
246
|
try {
|
|
246
|
-
const result = schema.
|
|
247
|
+
const result = await schema.validate(state, { abortEarly: false });
|
|
247
248
|
return {
|
|
248
249
|
errors: null,
|
|
249
250
|
result
|
|
@@ -158,8 +158,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
158
158
|
required: boolean;
|
|
159
159
|
size: FormGroupSize;
|
|
160
160
|
class: any;
|
|
161
|
-
label: string;
|
|
162
|
-
error: string | boolean;
|
|
163
161
|
ui: {
|
|
164
162
|
wrapper?: string;
|
|
165
163
|
inner?: string;
|
|
@@ -189,6 +187,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
189
187
|
} & {
|
|
190
188
|
strategy?: Strategy;
|
|
191
189
|
};
|
|
190
|
+
label: string;
|
|
191
|
+
error: string | boolean;
|
|
192
192
|
description: string;
|
|
193
193
|
help: string;
|
|
194
194
|
hint: string;
|
|
@@ -462,9 +462,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
462
462
|
size: InputSize;
|
|
463
463
|
class: any;
|
|
464
464
|
disabled: boolean;
|
|
465
|
-
leading: boolean;
|
|
466
|
-
color: InputColor;
|
|
467
|
-
variant: InputVariant;
|
|
468
465
|
ui: {
|
|
469
466
|
wrapper?: string;
|
|
470
467
|
base?: string;
|
|
@@ -578,6 +575,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
578
575
|
} & {
|
|
579
576
|
strategy?: Strategy;
|
|
580
577
|
};
|
|
578
|
+
color: InputColor;
|
|
579
|
+
variant: InputVariant;
|
|
580
|
+
leading: boolean;
|
|
581
581
|
id: string;
|
|
582
582
|
icon: string;
|
|
583
583
|
modelValue: string | number;
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
v-slot="{ active, selected, disabled: optionDisabled }"
|
|
49
49
|
:key="index"
|
|
50
50
|
as="template"
|
|
51
|
-
:value="valueAttribute ? option
|
|
51
|
+
:value="valueAttribute ? accessor(option, valueAttribute) : option"
|
|
52
52
|
:disabled="option.disabled"
|
|
53
53
|
>
|
|
54
54
|
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, selected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
|
|
@@ -103,6 +103,7 @@ import {
|
|
|
103
103
|
import { computedAsync, useDebounceFn } from "@vueuse/core";
|
|
104
104
|
import { defu } from "defu";
|
|
105
105
|
import { twMerge, twJoin } from "tailwind-merge";
|
|
106
|
+
import { isEqual } from "ohash";
|
|
106
107
|
import UIcon from "../elements/Icon.vue";
|
|
107
108
|
import UAvatar from "../elements/Avatar.vue";
|
|
108
109
|
import { useUI } from "../../composables/useUI";
|
|
@@ -281,6 +282,20 @@ export default defineComponent({
|
|
|
281
282
|
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
|
|
282
283
|
const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
|
|
283
284
|
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value);
|
|
285
|
+
const by = computed(() => {
|
|
286
|
+
if (!props.by) return void 0;
|
|
287
|
+
if (typeof props.by === "function") {
|
|
288
|
+
return props.by;
|
|
289
|
+
}
|
|
290
|
+
const key = props.by;
|
|
291
|
+
const hasDot = key.indexOf(".");
|
|
292
|
+
if (hasDot > 0) {
|
|
293
|
+
return (a, z) => {
|
|
294
|
+
return accessor(a, key) === accessor(z, key);
|
|
295
|
+
};
|
|
296
|
+
}
|
|
297
|
+
return key;
|
|
298
|
+
});
|
|
284
299
|
const internalQuery = ref("");
|
|
285
300
|
const query = computed({
|
|
286
301
|
get() {
|
|
@@ -292,11 +307,24 @@ export default defineComponent({
|
|
|
292
307
|
}
|
|
293
308
|
});
|
|
294
309
|
const label = computed(() => {
|
|
295
|
-
if (!props.modelValue)
|
|
296
|
-
|
|
310
|
+
if (!props.modelValue) return null;
|
|
311
|
+
function getValue(value) {
|
|
312
|
+
if (props.valueAttribute) {
|
|
313
|
+
return accessor(value, props.valueAttribute);
|
|
314
|
+
}
|
|
315
|
+
return value;
|
|
316
|
+
}
|
|
317
|
+
function compareValues(value1, value2) {
|
|
318
|
+
if (by.value && typeof by.value !== "function" && typeof value1 === "object" && typeof value2 === "object") {
|
|
319
|
+
return isEqual(value1[props.by], value2[props.by]);
|
|
320
|
+
}
|
|
321
|
+
return isEqual(value1, value2);
|
|
297
322
|
}
|
|
298
323
|
if (props.valueAttribute) {
|
|
299
|
-
const option = options.value.find((option2) =>
|
|
324
|
+
const option = options.value.find((option2) => {
|
|
325
|
+
const optionValue = getValue(option2);
|
|
326
|
+
return compareValues(optionValue, props.modelValue);
|
|
327
|
+
});
|
|
300
328
|
return option ? accessor(option, props.optionAttribute) : null;
|
|
301
329
|
} else {
|
|
302
330
|
return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
|
|
@@ -443,7 +471,9 @@ export default defineComponent({
|
|
|
443
471
|
query,
|
|
444
472
|
accessor,
|
|
445
473
|
onUpdate,
|
|
446
|
-
onQueryChange
|
|
474
|
+
onQueryChange,
|
|
475
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
476
|
+
by
|
|
447
477
|
};
|
|
448
478
|
}
|
|
449
479
|
});
|
|
@@ -145,7 +145,7 @@ declare const configMenu: {
|
|
|
145
145
|
};
|
|
146
146
|
avatar: {
|
|
147
147
|
base: string;
|
|
148
|
-
size: "
|
|
148
|
+
size: import("../../types/avatar").AvatarSize;
|
|
149
149
|
};
|
|
150
150
|
chip: {
|
|
151
151
|
base: string;
|
|
@@ -467,7 +467,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
467
467
|
};
|
|
468
468
|
avatar: {
|
|
469
469
|
base: string;
|
|
470
|
-
size: "
|
|
470
|
+
size: import("../../types/avatar").AvatarSize;
|
|
471
471
|
};
|
|
472
472
|
chip: {
|
|
473
473
|
base: string;
|
|
@@ -523,6 +523,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
523
523
|
accessor: <T extends Record<string, any>>(obj: T, key: string) => any;
|
|
524
524
|
onUpdate: (value: any) => void;
|
|
525
525
|
onQueryChange: (event: any) => void;
|
|
526
|
+
by: import("vue").ComputedRef<string | ((a: any, z: any) => boolean)>;
|
|
526
527
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
527
528
|
modelValue: {
|
|
528
529
|
type: PropType<string | number | object | Array<any> | null>;
|
|
@@ -678,12 +679,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
678
679
|
size: InputSize;
|
|
679
680
|
class: any;
|
|
680
681
|
disabled: boolean;
|
|
681
|
-
search: (query: string) => Promise<any[]> | any[];
|
|
682
|
-
leading: boolean;
|
|
683
|
-
popper: PopperOptions;
|
|
684
|
-
color: InputColor;
|
|
685
|
-
variant: InputVariant;
|
|
686
|
-
query: string;
|
|
687
682
|
ui: {
|
|
688
683
|
wrapper?: string;
|
|
689
684
|
base?: string;
|
|
@@ -797,6 +792,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
797
792
|
} & {
|
|
798
793
|
strategy?: Strategy;
|
|
799
794
|
};
|
|
795
|
+
color: InputColor;
|
|
796
|
+
variant: InputVariant;
|
|
797
|
+
search: (query: string) => Promise<any[]> | any[];
|
|
798
|
+
leading: boolean;
|
|
799
|
+
popper: PopperOptions;
|
|
800
|
+
query: string;
|
|
800
801
|
id: string;
|
|
801
802
|
icon: string;
|
|
802
803
|
options: string[] | {
|
|
@@ -856,7 +857,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
856
857
|
};
|
|
857
858
|
avatar: {
|
|
858
859
|
base: string;
|
|
859
|
-
size: "
|
|
860
|
+
size: import("../../types/avatar").AvatarSize;
|
|
860
861
|
};
|
|
861
862
|
chip: {
|
|
862
863
|
base: string;
|
|
@@ -1533,9 +1534,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
1533
1534
|
}>> & Readonly<{}>, {
|
|
1534
1535
|
size: import("../../types/avatar").AvatarSize;
|
|
1535
1536
|
class: any;
|
|
1536
|
-
as: string | Record<string, any>;
|
|
1537
|
-
text: string;
|
|
1538
|
-
alt: string;
|
|
1539
1537
|
ui: {
|
|
1540
1538
|
wrapper?: string;
|
|
1541
1539
|
background?: string;
|
|
@@ -1599,6 +1597,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
1599
1597
|
} & {
|
|
1600
1598
|
strategy?: Strategy;
|
|
1601
1599
|
};
|
|
1600
|
+
as: string | Record<string, any>;
|
|
1601
|
+
text: string;
|
|
1602
|
+
alt: string;
|
|
1602
1603
|
icon: string;
|
|
1603
1604
|
src: string | boolean;
|
|
1604
1605
|
chipColor: import("../../types/avatar").AvatarChipColor;
|
|
@@ -156,8 +156,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
156
156
|
required: boolean;
|
|
157
157
|
class: any;
|
|
158
158
|
disabled: boolean;
|
|
159
|
-
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
160
|
-
label: string;
|
|
161
159
|
ui: {
|
|
162
160
|
wrapper?: string;
|
|
163
161
|
container?: string;
|
|
@@ -179,6 +177,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
179
177
|
} & {
|
|
180
178
|
strategy?: Strategy;
|
|
181
179
|
};
|
|
180
|
+
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
181
|
+
label: string;
|
|
182
182
|
id: string;
|
|
183
183
|
modelValue: string | number | boolean | object;
|
|
184
184
|
value: string | number | boolean;
|
|
@@ -164,8 +164,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
164
164
|
name: string;
|
|
165
165
|
class: any;
|
|
166
166
|
disabled: boolean;
|
|
167
|
-
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
168
|
-
legend: string;
|
|
169
167
|
ui: {
|
|
170
168
|
wrapper?: string;
|
|
171
169
|
fieldset?: string;
|
|
@@ -178,6 +176,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
178
176
|
} & {
|
|
179
177
|
strategy?: Strategy;
|
|
180
178
|
};
|
|
179
|
+
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
180
|
+
legend: string;
|
|
181
181
|
options: unknown[];
|
|
182
182
|
modelValue: string | number | boolean | object;
|
|
183
183
|
optionAttribute: string;
|
|
@@ -374,8 +374,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
374
374
|
required: boolean;
|
|
375
375
|
class: any;
|
|
376
376
|
disabled: boolean;
|
|
377
|
-
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
378
|
-
label: string;
|
|
379
377
|
ui: {
|
|
380
378
|
wrapper?: string;
|
|
381
379
|
container?: string;
|
|
@@ -397,6 +395,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
397
395
|
} & {
|
|
398
396
|
strategy?: Strategy;
|
|
399
397
|
};
|
|
398
|
+
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
399
|
+
label: string;
|
|
400
400
|
id: string;
|
|
401
401
|
modelValue: string | number | boolean | object;
|
|
402
402
|
value: string | number | boolean;
|
|
@@ -257,8 +257,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
257
257
|
class: any;
|
|
258
258
|
disabled: boolean;
|
|
259
259
|
max: number;
|
|
260
|
-
step: number;
|
|
261
|
-
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
262
260
|
ui: {
|
|
263
261
|
wrapper?: string;
|
|
264
262
|
base?: string;
|
|
@@ -326,6 +324,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
326
324
|
} & {
|
|
327
325
|
strategy?: Strategy;
|
|
328
326
|
};
|
|
327
|
+
color: "primary" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
|
|
328
|
+
step: number;
|
|
329
329
|
id: string;
|
|
330
330
|
modelValue: number;
|
|
331
331
|
inputClass: string;
|
|
@@ -449,9 +449,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
449
449
|
size: SelectSize;
|
|
450
450
|
class: any;
|
|
451
451
|
disabled: boolean;
|
|
452
|
-
leading: boolean;
|
|
453
|
-
color: SelectColor;
|
|
454
|
-
variant: SelectVariant;
|
|
455
452
|
ui: {
|
|
456
453
|
form?: string;
|
|
457
454
|
placeholder?: string;
|
|
@@ -566,6 +563,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
566
563
|
} & {
|
|
567
564
|
strategy?: Strategy;
|
|
568
565
|
};
|
|
566
|
+
color: SelectColor;
|
|
567
|
+
variant: SelectVariant;
|
|
568
|
+
leading: boolean;
|
|
569
569
|
id: string;
|
|
570
570
|
icon: string;
|
|
571
571
|
options: unknown[];
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
v-slot="{ active, selected: optionSelected, disabled: optionDisabled }"
|
|
72
72
|
:key="index"
|
|
73
73
|
as="template"
|
|
74
|
-
:value="valueAttribute ? option
|
|
74
|
+
:value="valueAttribute ? accessor(option, valueAttribute) : option"
|
|
75
75
|
:disabled="option.disabled"
|
|
76
76
|
>
|
|
77
77
|
<li :class="[uiMenu.option.base, uiMenu.option.rounded, uiMenu.option.padding, uiMenu.option.size, uiMenu.option.color, active ? uiMenu.option.active : uiMenu.option.inactive, optionSelected && uiMenu.option.selected, optionDisabled && uiMenu.option.disabled]">
|
|
@@ -139,6 +139,7 @@ import {
|
|
|
139
139
|
import { computedAsync, useDebounceFn } from "@vueuse/core";
|
|
140
140
|
import { defu } from "defu";
|
|
141
141
|
import { twMerge, twJoin } from "tailwind-merge";
|
|
142
|
+
import { isEqual } from "ohash";
|
|
142
143
|
import UIcon from "../elements/Icon.vue";
|
|
143
144
|
import UAvatar from "../elements/Avatar.vue";
|
|
144
145
|
import { useUI } from "../../composables/useUI";
|
|
@@ -337,6 +338,20 @@ export default defineComponent({
|
|
|
337
338
|
const { ui: uiMenu } = useUI("selectMenu", toRef(props, "uiMenu"), configMenu);
|
|
338
339
|
const popper = computed(() => defu({}, props.popper, uiMenu.value.popper));
|
|
339
340
|
const [trigger, container] = usePopper(popper.value);
|
|
341
|
+
const by = computed(() => {
|
|
342
|
+
if (!props.by) return void 0;
|
|
343
|
+
if (typeof props.by === "function") {
|
|
344
|
+
return props.by;
|
|
345
|
+
}
|
|
346
|
+
const key = props.by;
|
|
347
|
+
const hasDot = key.indexOf(".");
|
|
348
|
+
if (hasDot > 0) {
|
|
349
|
+
return (a, z) => {
|
|
350
|
+
return accessor(a, key) === accessor(z, key);
|
|
351
|
+
};
|
|
352
|
+
}
|
|
353
|
+
return key;
|
|
354
|
+
});
|
|
340
355
|
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props });
|
|
341
356
|
const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config);
|
|
342
357
|
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value);
|
|
@@ -351,35 +366,41 @@ export default defineComponent({
|
|
|
351
366
|
}
|
|
352
367
|
});
|
|
353
368
|
const selected = computed(() => {
|
|
354
|
-
|
|
355
|
-
if (
|
|
356
|
-
return [];
|
|
369
|
+
function compareValues(value1, value2) {
|
|
370
|
+
if (by.value && typeof by.value !== "function" && typeof value1 === "object" && typeof value2 === "object") {
|
|
371
|
+
return isEqual(value1[by.value], value2[by.value]);
|
|
357
372
|
}
|
|
373
|
+
return isEqual(value1, value2);
|
|
374
|
+
}
|
|
375
|
+
function getValue(value) {
|
|
358
376
|
if (props.valueAttribute) {
|
|
359
|
-
return
|
|
377
|
+
return accessor(value, props.valueAttribute);
|
|
360
378
|
}
|
|
361
|
-
return
|
|
379
|
+
return value;
|
|
362
380
|
}
|
|
363
|
-
if (props.
|
|
364
|
-
|
|
381
|
+
if (props.multiple) {
|
|
382
|
+
const modelValue = props.modelValue;
|
|
383
|
+
if (!Array.isArray(modelValue) || !modelValue.length) {
|
|
384
|
+
return [];
|
|
385
|
+
}
|
|
386
|
+
return options.value.filter((option) => {
|
|
387
|
+
const optionValue = getValue(option);
|
|
388
|
+
return modelValue.some((value) => compareValues(value, optionValue));
|
|
389
|
+
});
|
|
365
390
|
}
|
|
366
|
-
return options.value.find((option) =>
|
|
391
|
+
return options.value.find((option) => {
|
|
392
|
+
const optionValue = getValue(option);
|
|
393
|
+
return compareValues(optionValue, toRaw(props.modelValue));
|
|
394
|
+
}) ?? props.modelValue;
|
|
367
395
|
});
|
|
368
396
|
const label = computed(() => {
|
|
369
|
-
if (props.
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
}
|
|
375
|
-
} else if (props.modelValue !== void 0 && props.modelValue !== null) {
|
|
376
|
-
if (props.valueAttribute) {
|
|
377
|
-
return accessor(selected.value, props.optionAttribute) ?? null;
|
|
378
|
-
} else {
|
|
379
|
-
return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : accessor(props.modelValue, props.optionAttribute);
|
|
380
|
-
}
|
|
397
|
+
if (!props.modelValue) return null;
|
|
398
|
+
if (Array.isArray(props.modelValue) && props.modelValue.length) {
|
|
399
|
+
return `${props.modelValue.length} selected`;
|
|
400
|
+
} else if (["string", "number"].includes(typeof props.modelValue)) {
|
|
401
|
+
return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue;
|
|
381
402
|
}
|
|
382
|
-
return
|
|
403
|
+
return accessor(props.modelValue, props.optionAttribute);
|
|
383
404
|
});
|
|
384
405
|
const selectClass = computed(() => {
|
|
385
406
|
const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
|
|
@@ -550,7 +571,9 @@ export default defineComponent({
|
|
|
550
571
|
// eslint-disable-next-line vue/no-dupe-keys
|
|
551
572
|
query,
|
|
552
573
|
onUpdate,
|
|
553
|
-
onQueryChange
|
|
574
|
+
onQueryChange,
|
|
575
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
576
|
+
by
|
|
554
577
|
};
|
|
555
578
|
}
|
|
556
579
|
});
|
|
@@ -140,7 +140,7 @@ declare const configMenu: {
|
|
|
140
140
|
};
|
|
141
141
|
avatar: {
|
|
142
142
|
base: string;
|
|
143
|
-
size: "
|
|
143
|
+
size: import("../../types/avatar").AvatarSize;
|
|
144
144
|
};
|
|
145
145
|
chip: {
|
|
146
146
|
base: string;
|
|
@@ -488,7 +488,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
488
488
|
};
|
|
489
489
|
avatar: {
|
|
490
490
|
base: string;
|
|
491
|
-
size: "
|
|
491
|
+
size: import("../../types/avatar").AvatarSize;
|
|
492
492
|
};
|
|
493
493
|
chip: {
|
|
494
494
|
base: string;
|
|
@@ -563,6 +563,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
563
563
|
query: import("vue").WritableComputedRef<string, string>;
|
|
564
564
|
onUpdate: (value: any) => void;
|
|
565
565
|
onQueryChange: (event: any) => void;
|
|
566
|
+
by: import("vue").ComputedRef<string | ((a: any, z: any) => boolean)>;
|
|
566
567
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
567
568
|
modelValue: {
|
|
568
569
|
type: PropType<string | number | object | Array<any> | boolean | null>;
|
|
@@ -734,11 +735,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
734
735
|
size: SelectSize;
|
|
735
736
|
class: any;
|
|
736
737
|
disabled: boolean;
|
|
737
|
-
leading: boolean;
|
|
738
|
-
popper: PopperOptions;
|
|
739
|
-
color: SelectColor;
|
|
740
|
-
variant: SelectVariant;
|
|
741
|
-
query: string;
|
|
742
738
|
ui: {
|
|
743
739
|
form?: string;
|
|
744
740
|
placeholder?: string;
|
|
@@ -853,6 +849,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
853
849
|
} & {
|
|
854
850
|
strategy?: Strategy;
|
|
855
851
|
};
|
|
852
|
+
color: SelectColor;
|
|
853
|
+
variant: SelectVariant;
|
|
854
|
+
leading: boolean;
|
|
855
|
+
popper: PopperOptions;
|
|
856
|
+
query: string;
|
|
856
857
|
id: string;
|
|
857
858
|
icon: string;
|
|
858
859
|
options: string[] | {
|
|
@@ -904,7 +905,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
904
905
|
};
|
|
905
906
|
avatar: {
|
|
906
907
|
base: string;
|
|
907
|
-
size: "
|
|
908
|
+
size: import("../../types/avatar").AvatarSize;
|
|
908
909
|
};
|
|
909
910
|
chip: {
|
|
910
911
|
base: string;
|
|
@@ -1803,9 +1804,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
1803
1804
|
}>> & Readonly<{}>, {
|
|
1804
1805
|
size: import("../../types/avatar").AvatarSize;
|
|
1805
1806
|
class: any;
|
|
1806
|
-
as: string | Record<string, any>;
|
|
1807
|
-
text: string;
|
|
1808
|
-
alt: string;
|
|
1809
1807
|
ui: {
|
|
1810
1808
|
wrapper?: string;
|
|
1811
1809
|
background?: string;
|
|
@@ -1869,6 +1867,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
1869
1867
|
} & {
|
|
1870
1868
|
strategy?: Strategy;
|
|
1871
1869
|
};
|
|
1870
|
+
as: string | Record<string, any>;
|
|
1871
|
+
text: string;
|
|
1872
|
+
alt: string;
|
|
1872
1873
|
icon: string;
|
|
1873
1874
|
src: string | boolean;
|
|
1874
1875
|
chipColor: import("../../types/avatar").AvatarChipColor;
|
|
@@ -419,9 +419,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
419
419
|
size: TextareaSize;
|
|
420
420
|
class: any;
|
|
421
421
|
disabled: boolean;
|
|
422
|
-
resize: boolean;
|
|
423
|
-
color: TextareaColor;
|
|
424
|
-
variant: TextareaVariant;
|
|
425
422
|
ui: {
|
|
426
423
|
form?: string;
|
|
427
424
|
default?: DeepPartial<{
|
|
@@ -534,6 +531,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
534
531
|
} & {
|
|
535
532
|
strategy?: Strategy;
|
|
536
533
|
};
|
|
534
|
+
color: TextareaColor;
|
|
535
|
+
variant: TextareaVariant;
|
|
536
|
+
resize: boolean;
|
|
537
537
|
id: string;
|
|
538
538
|
modelValue: string | number;
|
|
539
539
|
padded: boolean;
|