@nuxt/ui 2.12.3 → 2.13.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/dist/module.d.mts +109 -38
- package/dist/module.d.ts +109 -38
- package/dist/module.json +1 -1
- package/dist/module.mjs +6 -3
- package/dist/runtime/components/elements/Carousel.vue +149 -0
- package/dist/runtime/components/elements/Carousel.vue.d.ts +104 -0
- package/dist/runtime/components/elements/Chip.vue.d.ts +3 -3
- package/dist/runtime/components/elements/Dropdown.vue +2 -2
- package/dist/runtime/components/elements/Dropdown.vue.d.ts +4 -4
- package/dist/runtime/components/elements/Link.vue +2 -2
- package/dist/runtime/components/elements/Meter.vue.d.ts +3 -3
- package/dist/runtime/components/elements/MeterGroup.d.ts +3 -3
- package/dist/runtime/components/elements/Progress.vue.d.ts +3 -3
- package/dist/runtime/components/forms/Form.vue +7 -3
- package/dist/runtime/components/forms/InputMenu.vue +8 -0
- package/dist/runtime/components/forms/InputMenu.vue.d.ts +9 -0
- package/dist/runtime/components/forms/Select.vue +5 -1
- package/dist/runtime/components/forms/SelectMenu.vue +1 -1
- package/dist/runtime/components/forms/Toggle.vue +1 -1
- package/dist/runtime/components/forms/Toggle.vue.d.ts +2 -2
- package/dist/runtime/components/navigation/HorizontalNavigation.vue +102 -0
- package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts +44 -0
- package/dist/runtime/components/navigation/Pagination.vue.d.ts +2 -2
- package/dist/runtime/components/navigation/VerticalNavigation.vue +12 -3
- package/dist/runtime/components/overlays/Modal.vue +6 -2
- package/dist/runtime/components/overlays/Modal.vue.d.ts +2 -1
- package/dist/runtime/components/overlays/Popover.vue +2 -2
- package/dist/runtime/components/overlays/Popover.vue.d.ts +4 -4
- package/dist/runtime/components/overlays/Slideover.vue +6 -2
- package/dist/runtime/components/overlays/Slideover.vue.d.ts +2 -1
- package/dist/runtime/components/overlays/Tooltip.vue +2 -2
- package/dist/runtime/components/overlays/Tooltip.vue.d.ts +4 -4
- package/dist/runtime/composables/useCarouselScroll.d.ts +2 -0
- package/dist/runtime/composables/useCarouselScroll.mjs +35 -0
- package/dist/runtime/composables/usePopper.d.ts +3 -3
- package/dist/runtime/types/horizontal-navigation.d.ts +13 -0
- package/dist/runtime/types/index.d.ts +1 -0
- package/dist/runtime/types/vertical-navigation.d.ts +2 -1
- package/dist/runtime/ui.config/elements/carousel.d.ts +27 -0
- package/dist/runtime/ui.config/elements/carousel.mjs +26 -0
- package/dist/runtime/ui.config/elements/dropdown.d.ts +5 -1
- package/dist/runtime/ui.config/elements/dropdown.mjs +8 -4
- package/dist/runtime/ui.config/forms/inputMenu.d.ts +1 -1
- package/dist/runtime/ui.config/forms/inputMenu.mjs +5 -5
- package/dist/runtime/ui.config/forms/select.mjs +1 -1
- package/dist/runtime/ui.config/forms/selectMenu.d.ts +1 -1
- package/dist/runtime/ui.config/index.d.ts +2 -0
- package/dist/runtime/ui.config/index.mjs +2 -0
- package/dist/runtime/ui.config/navigation/breadcrumb.mjs +4 -4
- package/dist/runtime/ui.config/navigation/commandPalette.d.ts +1 -1
- package/dist/runtime/ui.config/navigation/commandPalette.mjs +8 -8
- package/dist/runtime/ui.config/navigation/horizontalNavigation.d.ts +27 -0
- package/dist/runtime/ui.config/navigation/horizontalNavigation.mjs +26 -0
- package/dist/runtime/ui.config/navigation/verticalNavigation.d.ts +4 -3
- package/dist/runtime/ui.config/navigation/verticalNavigation.mjs +8 -7
- package/dist/runtime/ui.config/overlays/popover.d.ts +4 -0
- package/dist/runtime/ui.config/overlays/popover.mjs +4 -0
- package/dist/runtime/ui.config/overlays/slideover.mjs +2 -2
- package/dist/runtime/ui.config/overlays/tooltip.d.ts +4 -0
- package/dist/runtime/ui.config/overlays/tooltip.mjs +4 -0
- package/dist/runtime/ui.css +1 -1
- package/dist/types.d.mts +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +8 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { PropType } from 'vue';
|
|
2
2
|
declare const _default: import("vue").DefineComponent<{
|
|
3
3
|
size: {
|
|
4
|
-
type: PropType<"sm" | "
|
|
4
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
|
|
5
5
|
default: () => any;
|
|
6
6
|
validator(value: string): boolean;
|
|
7
7
|
};
|
|
@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
43
43
|
chipClass: import("vue").ComputedRef<string>;
|
|
44
44
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
45
45
|
size: {
|
|
46
|
-
type: PropType<"sm" | "
|
|
46
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl">;
|
|
47
47
|
default: () => any;
|
|
48
48
|
validator(value: string): boolean;
|
|
49
49
|
};
|
|
@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
78
78
|
default: () => {};
|
|
79
79
|
};
|
|
80
80
|
}>>, {
|
|
81
|
-
size: "sm" | "
|
|
81
|
+
size: "sm" | "2xs" | "md" | "xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl";
|
|
82
82
|
ui: any;
|
|
83
83
|
color: any;
|
|
84
84
|
inset: boolean;
|
|
@@ -103,11 +103,11 @@ export default defineComponent({
|
|
|
103
103
|
},
|
|
104
104
|
openDelay: {
|
|
105
105
|
type: Number,
|
|
106
|
-
default:
|
|
106
|
+
default: () => config.default.openDelay
|
|
107
107
|
},
|
|
108
108
|
closeDelay: {
|
|
109
109
|
type: Number,
|
|
110
|
-
default:
|
|
110
|
+
default: () => config.default.closeDelay
|
|
111
111
|
},
|
|
112
112
|
class: {
|
|
113
113
|
type: [String, Object, Array],
|
|
@@ -25,11 +25,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
25
25
|
};
|
|
26
26
|
openDelay: {
|
|
27
27
|
type: NumberConstructor;
|
|
28
|
-
default:
|
|
28
|
+
default: () => any;
|
|
29
29
|
};
|
|
30
30
|
closeDelay: {
|
|
31
31
|
type: NumberConstructor;
|
|
32
|
-
default:
|
|
32
|
+
default: () => any;
|
|
33
33
|
};
|
|
34
34
|
class: {
|
|
35
35
|
type: PropType<any>;
|
|
@@ -104,11 +104,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
104
104
|
};
|
|
105
105
|
openDelay: {
|
|
106
106
|
type: NumberConstructor;
|
|
107
|
-
default:
|
|
107
|
+
default: () => any;
|
|
108
108
|
};
|
|
109
109
|
closeDelay: {
|
|
110
110
|
type: NumberConstructor;
|
|
111
|
-
default:
|
|
111
|
+
default: () => any;
|
|
112
112
|
};
|
|
113
113
|
class: {
|
|
114
114
|
type: PropType<any>;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
v-bind="$attrs"
|
|
8
8
|
:class="active ? activeClass : inactiveClass"
|
|
9
9
|
>
|
|
10
|
-
<slot />
|
|
10
|
+
<slot v-bind="{ isActive: active }" />
|
|
11
11
|
</component>
|
|
12
12
|
<NuxtLink
|
|
13
13
|
v-else
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
:class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
|
|
26
26
|
@click="(e) => !isExternal && navigate(e)"
|
|
27
27
|
>
|
|
28
|
-
<slot v-bind="{ isActive: exact ? isExactActive : isActive }" />
|
|
28
|
+
<slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />
|
|
29
29
|
</a>
|
|
30
30
|
</NuxtLink>
|
|
31
31
|
</template>
|
|
@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
21
21
|
default: null;
|
|
22
22
|
};
|
|
23
23
|
size: {
|
|
24
|
-
type: PropType<"sm" | "
|
|
24
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
|
|
25
25
|
default: () => any;
|
|
26
26
|
validator(value: string): boolean;
|
|
27
27
|
};
|
|
@@ -78,7 +78,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
78
78
|
default: null;
|
|
79
79
|
};
|
|
80
80
|
size: {
|
|
81
|
-
type: PropType<"sm" | "
|
|
81
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
|
|
82
82
|
default: () => any;
|
|
83
83
|
validator(value: string): boolean;
|
|
84
84
|
};
|
|
@@ -100,7 +100,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
100
100
|
default: () => {};
|
|
101
101
|
};
|
|
102
102
|
}>>, {
|
|
103
|
-
size: "sm" | "
|
|
103
|
+
size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
|
|
104
104
|
ui: any;
|
|
105
105
|
value: number;
|
|
106
106
|
icon: string;
|
|
@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
9
9
|
default: number;
|
|
10
10
|
};
|
|
11
11
|
size: {
|
|
12
|
-
type: PropType<"sm" | "
|
|
12
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
|
|
13
13
|
default: () => any;
|
|
14
14
|
validator(value: string): boolean;
|
|
15
15
|
};
|
|
@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
41
41
|
default: number;
|
|
42
42
|
};
|
|
43
43
|
size: {
|
|
44
|
-
type: PropType<"sm" | "
|
|
44
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
|
|
45
45
|
default: () => any;
|
|
46
46
|
validator(value: string): boolean;
|
|
47
47
|
};
|
|
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
62
62
|
default: () => {};
|
|
63
63
|
};
|
|
64
64
|
}>>, {
|
|
65
|
-
size: "sm" | "
|
|
65
|
+
size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
|
|
66
66
|
ui: any;
|
|
67
67
|
icon: string;
|
|
68
68
|
class: any;
|
|
@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
31
31
|
validator(value: string): boolean;
|
|
32
32
|
};
|
|
33
33
|
size: {
|
|
34
|
-
type: PropType<"sm" | "
|
|
34
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
|
|
35
35
|
default: () => any;
|
|
36
36
|
validator(value: string): boolean;
|
|
37
37
|
};
|
|
@@ -94,7 +94,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
94
94
|
validator(value: string): boolean;
|
|
95
95
|
};
|
|
96
96
|
size: {
|
|
97
|
-
type: PropType<"sm" | "
|
|
97
|
+
type: PropType<"sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl">;
|
|
98
98
|
default: () => any;
|
|
99
99
|
validator(value: string): boolean;
|
|
100
100
|
};
|
|
@@ -112,7 +112,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
112
112
|
default: () => {};
|
|
113
113
|
};
|
|
114
114
|
}>>, {
|
|
115
|
-
size: "sm" | "
|
|
115
|
+
size: "sm" | "2xs" | "md" | "xs" | "lg" | "xl" | "2xl";
|
|
116
116
|
ui: any;
|
|
117
117
|
value: number;
|
|
118
118
|
color: string;
|
|
@@ -70,12 +70,16 @@ export default defineComponent({
|
|
|
70
70
|
return errs;
|
|
71
71
|
}
|
|
72
72
|
async function validate(path, opts = { silent: false }) {
|
|
73
|
-
|
|
73
|
+
let paths = path;
|
|
74
|
+
if (path && !Array.isArray(path)) {
|
|
75
|
+
paths = [path];
|
|
76
|
+
}
|
|
77
|
+
if (paths) {
|
|
74
78
|
const otherErrors = errors.value.filter(
|
|
75
|
-
(error) => error.path
|
|
79
|
+
(error) => !paths.includes(error.path)
|
|
76
80
|
);
|
|
77
81
|
const pathErrors = (await getErrors()).filter(
|
|
78
|
-
(error) => error.path
|
|
82
|
+
(error) => paths.includes(error.path)
|
|
79
83
|
);
|
|
80
84
|
errors.value = otherErrors.concat(pathErrors);
|
|
81
85
|
} else {
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
:name="name"
|
|
6
6
|
:model-value="modelValue"
|
|
7
7
|
:disabled="disabled"
|
|
8
|
+
:nullable="nullable"
|
|
8
9
|
as="div"
|
|
9
10
|
:class="ui.wrapper"
|
|
10
11
|
@update:model-value="onUpdate"
|
|
@@ -188,6 +189,10 @@ export default defineComponent({
|
|
|
188
189
|
type: Boolean,
|
|
189
190
|
default: false
|
|
190
191
|
},
|
|
192
|
+
nullable: {
|
|
193
|
+
type: Boolean,
|
|
194
|
+
default: false
|
|
195
|
+
},
|
|
191
196
|
placeholder: {
|
|
192
197
|
type: String,
|
|
193
198
|
default: null
|
|
@@ -281,6 +286,9 @@ export default defineComponent({
|
|
|
281
286
|
}
|
|
282
287
|
});
|
|
283
288
|
const label = computed(() => {
|
|
289
|
+
if (!props.modelValue) {
|
|
290
|
+
return;
|
|
291
|
+
}
|
|
284
292
|
if (props.valueAttribute) {
|
|
285
293
|
const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
|
|
286
294
|
return option ? option[props.optionAttribute] : null;
|
|
@@ -68,6 +68,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
68
68
|
type: BooleanConstructor;
|
|
69
69
|
default: boolean;
|
|
70
70
|
};
|
|
71
|
+
nullable: {
|
|
72
|
+
type: BooleanConstructor;
|
|
73
|
+
default: boolean;
|
|
74
|
+
};
|
|
71
75
|
placeholder: {
|
|
72
76
|
type: StringConstructor;
|
|
73
77
|
default: null;
|
|
@@ -224,6 +228,10 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
224
228
|
type: BooleanConstructor;
|
|
225
229
|
default: boolean;
|
|
226
230
|
};
|
|
231
|
+
nullable: {
|
|
232
|
+
type: BooleanConstructor;
|
|
233
|
+
default: boolean;
|
|
234
|
+
};
|
|
227
235
|
placeholder: {
|
|
228
236
|
type: StringConstructor;
|
|
229
237
|
default: null;
|
|
@@ -321,6 +329,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
321
329
|
trailingIcon: string;
|
|
322
330
|
trailing: boolean;
|
|
323
331
|
inputClass: string;
|
|
332
|
+
nullable: boolean;
|
|
324
333
|
query: string;
|
|
325
334
|
selectedIcon: string;
|
|
326
335
|
optionAttribute: string;
|
|
@@ -241,7 +241,7 @@ export default defineComponent({
|
|
|
241
241
|
variant?.replaceAll("{color}", color.value),
|
|
242
242
|
(isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
|
|
243
243
|
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
|
|
244
|
-
), props.selectClass);
|
|
244
|
+
), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
|
|
245
245
|
});
|
|
246
246
|
const isLeading = computed(() => {
|
|
247
247
|
return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
|
|
@@ -316,3 +316,7 @@ export default defineComponent({
|
|
|
316
316
|
}
|
|
317
317
|
});
|
|
318
318
|
</script>
|
|
319
|
+
|
|
320
|
+
<style scoped>
|
|
321
|
+
.form-select{background-image:none}
|
|
322
|
+
</style>
|
|
@@ -369,7 +369,7 @@ export default defineComponent({
|
|
|
369
369
|
variant?.replaceAll("{color}", color.value),
|
|
370
370
|
(isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
|
|
371
371
|
(isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
|
|
372
|
-
), props.selectClass);
|
|
372
|
+
), props.placeholder && !props.modelValue && ui.value.placeholder, props.selectClass);
|
|
373
373
|
});
|
|
374
374
|
const isLeading = computed(() => {
|
|
375
375
|
return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
|
|
@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
32
32
|
};
|
|
33
33
|
size: {
|
|
34
34
|
type: PropType<ToggleSize>;
|
|
35
|
-
default: any;
|
|
35
|
+
default: () => any;
|
|
36
36
|
validator(value: string): boolean;
|
|
37
37
|
};
|
|
38
38
|
class: {
|
|
@@ -87,7 +87,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
87
87
|
};
|
|
88
88
|
size: {
|
|
89
89
|
type: PropType<ToggleSize>;
|
|
90
|
-
default: any;
|
|
90
|
+
default: () => any;
|
|
91
91
|
validator(value: string): boolean;
|
|
92
92
|
};
|
|
93
93
|
class: {
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<nav :class="ui.wrapper" v-bind="attrs">
|
|
3
|
+
<ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`" :class="ui.container">
|
|
4
|
+
<li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`" :class="ui.inner">
|
|
5
|
+
<ULink
|
|
6
|
+
v-slot="{ isActive }"
|
|
7
|
+
v-bind="getULinkProps(link)"
|
|
8
|
+
:class="[ui.base, ui.before, ui.after]"
|
|
9
|
+
:active-class="ui.active"
|
|
10
|
+
:inactive-class="ui.inactive"
|
|
11
|
+
@click="link.click"
|
|
12
|
+
@keyup.enter="$event.target.blur()"
|
|
13
|
+
>
|
|
14
|
+
<slot name="avatar" :link="link" :is-active="isActive">
|
|
15
|
+
<UAvatar
|
|
16
|
+
v-if="link.avatar"
|
|
17
|
+
v-bind="{ size: ui.avatar.size, ...link.avatar }"
|
|
18
|
+
:class="[ui.avatar.base]"
|
|
19
|
+
/>
|
|
20
|
+
</slot>
|
|
21
|
+
<slot name="icon" :link="link" :is-active="isActive">
|
|
22
|
+
<UIcon
|
|
23
|
+
v-if="link.icon"
|
|
24
|
+
:name="link.icon"
|
|
25
|
+
:class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
|
|
26
|
+
/>
|
|
27
|
+
</slot>
|
|
28
|
+
<slot :link="link" :is-active="isActive">
|
|
29
|
+
<span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
|
|
30
|
+
<span v-if="isActive" class="sr-only">
|
|
31
|
+
Current page:
|
|
32
|
+
</span>
|
|
33
|
+
{{ link.label }}
|
|
34
|
+
</span>
|
|
35
|
+
</slot>
|
|
36
|
+
<slot name="badge" :link="link" :is-active="isActive">
|
|
37
|
+
<UBadge
|
|
38
|
+
v-if="link.badge"
|
|
39
|
+
v-bind="{
|
|
40
|
+
size: ui.badge.size,
|
|
41
|
+
color: ui.badge.color,
|
|
42
|
+
variant: ui.badge.variant,
|
|
43
|
+
...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
|
|
44
|
+
}"
|
|
45
|
+
:class="ui.badge.base"
|
|
46
|
+
/>
|
|
47
|
+
</slot>
|
|
48
|
+
</ULink>
|
|
49
|
+
</li>
|
|
50
|
+
</ul>
|
|
51
|
+
</nav>
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script>
|
|
55
|
+
import { toRef, defineComponent, computed } from "vue";
|
|
56
|
+
import { twMerge, twJoin } from "tailwind-merge";
|
|
57
|
+
import UIcon from "../elements/Icon.vue";
|
|
58
|
+
import UAvatar from "../elements/Avatar.vue";
|
|
59
|
+
import UBadge from "../elements/Badge.vue";
|
|
60
|
+
import ULink from "../elements/Link.vue";
|
|
61
|
+
import { useUI } from "../../composables/useUI";
|
|
62
|
+
import { mergeConfig, getULinkProps } from "../../utils";
|
|
63
|
+
import appConfig from "#build/app.config";
|
|
64
|
+
import { horizontalNavigation } from "#ui/ui.config";
|
|
65
|
+
const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.horizontalNavigation, horizontalNavigation);
|
|
66
|
+
export default defineComponent({
|
|
67
|
+
components: {
|
|
68
|
+
UIcon,
|
|
69
|
+
UAvatar,
|
|
70
|
+
UBadge,
|
|
71
|
+
ULink
|
|
72
|
+
},
|
|
73
|
+
inheritAttrs: false,
|
|
74
|
+
props: {
|
|
75
|
+
links: {
|
|
76
|
+
type: Array,
|
|
77
|
+
default: () => []
|
|
78
|
+
},
|
|
79
|
+
class: {
|
|
80
|
+
type: [String, Object, Array],
|
|
81
|
+
default: () => ""
|
|
82
|
+
},
|
|
83
|
+
ui: {
|
|
84
|
+
type: Object,
|
|
85
|
+
default: () => ({})
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
setup(props) {
|
|
89
|
+
const { ui, attrs } = useUI("horizontalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
|
|
90
|
+
const sections = computed(() => Array.isArray(props.links[0]) ? props.links : [props.links]);
|
|
91
|
+
return {
|
|
92
|
+
// eslint-disable-next-line vue/no-dupe-keys
|
|
93
|
+
ui,
|
|
94
|
+
attrs,
|
|
95
|
+
sections,
|
|
96
|
+
getULinkProps,
|
|
97
|
+
twMerge,
|
|
98
|
+
twJoin
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
</script>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
import { twJoin } from 'tailwind-merge';
|
|
3
|
+
import type { HorizontalNavigationLink } from '../../types';
|
|
4
|
+
declare const _default: import("vue").DefineComponent<{
|
|
5
|
+
links: {
|
|
6
|
+
type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
|
|
7
|
+
default: () => never[];
|
|
8
|
+
};
|
|
9
|
+
class: {
|
|
10
|
+
type: PropType<any>;
|
|
11
|
+
default: () => string;
|
|
12
|
+
};
|
|
13
|
+
ui: {
|
|
14
|
+
type: PropType<any>;
|
|
15
|
+
default: () => {};
|
|
16
|
+
};
|
|
17
|
+
}, {
|
|
18
|
+
ui: import("vue").ComputedRef<any>;
|
|
19
|
+
attrs: import("vue").ComputedRef<Pick<{
|
|
20
|
+
[x: string]: unknown;
|
|
21
|
+
}, string>>;
|
|
22
|
+
sections: import("vue").ComputedRef<HorizontalNavigationLink[][]>;
|
|
23
|
+
getULinkProps: (props: any) => {};
|
|
24
|
+
twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
|
|
25
|
+
twJoin: typeof twJoin;
|
|
26
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
27
|
+
links: {
|
|
28
|
+
type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
|
|
29
|
+
default: () => never[];
|
|
30
|
+
};
|
|
31
|
+
class: {
|
|
32
|
+
type: PropType<any>;
|
|
33
|
+
default: () => string;
|
|
34
|
+
};
|
|
35
|
+
ui: {
|
|
36
|
+
type: PropType<any>;
|
|
37
|
+
default: () => {};
|
|
38
|
+
};
|
|
39
|
+
}>>, {
|
|
40
|
+
ui: any;
|
|
41
|
+
class: any;
|
|
42
|
+
links: HorizontalNavigationLink[] | HorizontalNavigationLink[][];
|
|
43
|
+
}, {}>;
|
|
44
|
+
export default _default;
|
|
@@ -165,6 +165,8 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
165
165
|
class: any;
|
|
166
166
|
disabled: boolean;
|
|
167
167
|
max: number;
|
|
168
|
+
prevButton: Button;
|
|
169
|
+
nextButton: Button;
|
|
168
170
|
divider: string;
|
|
169
171
|
pageCount: number;
|
|
170
172
|
activeButton: Button;
|
|
@@ -173,7 +175,5 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
173
175
|
showLast: boolean;
|
|
174
176
|
firstButton: Button;
|
|
175
177
|
lastButton: Button;
|
|
176
|
-
prevButton: Button;
|
|
177
|
-
nextButton: Button;
|
|
178
178
|
}, {}>;
|
|
179
179
|
export default _default;
|
|
@@ -34,9 +34,16 @@
|
|
|
34
34
|
</span>
|
|
35
35
|
</slot>
|
|
36
36
|
<slot name="badge" :link="link" :is-active="isActive">
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
<UBadge
|
|
38
|
+
v-if="link.badge"
|
|
39
|
+
v-bind="{
|
|
40
|
+
size: ui.badge.size,
|
|
41
|
+
color: ui.badge.color,
|
|
42
|
+
variant: ui.badge.variant,
|
|
43
|
+
...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
|
|
44
|
+
}"
|
|
45
|
+
:class="ui.badge.base"
|
|
46
|
+
/>
|
|
40
47
|
</slot>
|
|
41
48
|
</ULink>
|
|
42
49
|
</li>
|
|
@@ -50,6 +57,7 @@ import { toRef, defineComponent, computed } from "vue";
|
|
|
50
57
|
import { twMerge, twJoin } from "tailwind-merge";
|
|
51
58
|
import UIcon from "../elements/Icon.vue";
|
|
52
59
|
import UAvatar from "../elements/Avatar.vue";
|
|
60
|
+
import UBadge from "../elements/Badge.vue";
|
|
53
61
|
import ULink from "../elements/Link.vue";
|
|
54
62
|
import UDivider from "../layout/Divider.vue";
|
|
55
63
|
import { useUI } from "../../composables/useUI";
|
|
@@ -61,6 +69,7 @@ export default defineComponent({
|
|
|
61
69
|
components: {
|
|
62
70
|
UIcon,
|
|
63
71
|
UAvatar,
|
|
72
|
+
UBadge,
|
|
64
73
|
ULink,
|
|
65
74
|
UDivider
|
|
66
75
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<TransitionRoot :appear="appear" :show="isOpen" as="template">
|
|
3
|
-
<HDialog :class="ui.wrapper" v-bind="attrs" @close="
|
|
3
|
+
<HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
|
|
4
4
|
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
|
|
5
5
|
<div :class="[ui.overlay.base, ui.overlay.background]" />
|
|
6
6
|
</TransitionChild>
|
|
@@ -76,7 +76,7 @@ export default defineComponent({
|
|
|
76
76
|
default: () => ({})
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
|
-
emits: ["update:modelValue", "close"],
|
|
79
|
+
emits: ["update:modelValue", "close", "close-prevented"],
|
|
80
80
|
setup(props, { emit }) {
|
|
81
81
|
const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
|
|
82
82
|
const isOpen = computed({
|
|
@@ -96,6 +96,10 @@ export default defineComponent({
|
|
|
96
96
|
};
|
|
97
97
|
});
|
|
98
98
|
function close(value) {
|
|
99
|
+
if (props.preventClose) {
|
|
100
|
+
emit("close-prevented");
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
99
103
|
isOpen.value = value;
|
|
100
104
|
emit("close");
|
|
101
105
|
}
|
|
@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
40
40
|
isOpen: import("vue").WritableComputedRef<boolean>;
|
|
41
41
|
transitionClass: import("vue").ComputedRef<any>;
|
|
42
42
|
close: (value: boolean) => void;
|
|
43
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
43
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
44
44
|
modelValue: {
|
|
45
45
|
type: BooleanConstructor;
|
|
46
46
|
default: boolean;
|
|
@@ -76,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
76
76
|
}>> & {
|
|
77
77
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
78
78
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
79
|
+
"onClose-prevented"?: ((...args: any[]) => any) | undefined;
|
|
79
80
|
}, {
|
|
80
81
|
ui: any;
|
|
81
82
|
transition: boolean;
|
|
@@ -67,11 +67,11 @@ export default defineComponent({
|
|
|
67
67
|
},
|
|
68
68
|
openDelay: {
|
|
69
69
|
type: Number,
|
|
70
|
-
default:
|
|
70
|
+
default: () => config.default.openDelay
|
|
71
71
|
},
|
|
72
72
|
closeDelay: {
|
|
73
73
|
type: Number,
|
|
74
|
-
default:
|
|
74
|
+
default: () => config.default.closeDelay
|
|
75
75
|
},
|
|
76
76
|
overlay: {
|
|
77
77
|
type: Boolean,
|
|
@@ -16,11 +16,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
16
16
|
};
|
|
17
17
|
openDelay: {
|
|
18
18
|
type: NumberConstructor;
|
|
19
|
-
default:
|
|
19
|
+
default: () => any;
|
|
20
20
|
};
|
|
21
21
|
closeDelay: {
|
|
22
22
|
type: NumberConstructor;
|
|
23
|
-
default:
|
|
23
|
+
default: () => any;
|
|
24
24
|
};
|
|
25
25
|
overlay: {
|
|
26
26
|
type: BooleanConstructor;
|
|
@@ -86,11 +86,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
86
86
|
};
|
|
87
87
|
openDelay: {
|
|
88
88
|
type: NumberConstructor;
|
|
89
|
-
default:
|
|
89
|
+
default: () => any;
|
|
90
90
|
};
|
|
91
91
|
closeDelay: {
|
|
92
92
|
type: NumberConstructor;
|
|
93
|
-
default:
|
|
93
|
+
default: () => any;
|
|
94
94
|
};
|
|
95
95
|
overlay: {
|
|
96
96
|
type: BooleanConstructor;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<TransitionRoot as="template" :appear="appear" :show="isOpen">
|
|
3
|
-
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="
|
|
3
|
+
<HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
|
|
4
4
|
<TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
|
|
5
5
|
<div :class="[ui.overlay.base, ui.overlay.background]" />
|
|
6
6
|
</TransitionChild>
|
|
@@ -65,7 +65,7 @@ export default defineComponent({
|
|
|
65
65
|
default: () => ({})
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
|
-
emits: ["update:modelValue", "close"],
|
|
68
|
+
emits: ["update:modelValue", "close", "close-prevented"],
|
|
69
69
|
setup(props, { emit }) {
|
|
70
70
|
const { ui, attrs } = useUI("slideover", toRef(props, "ui"), config, toRef(props, "class"));
|
|
71
71
|
const isOpen = computed({
|
|
@@ -89,6 +89,10 @@ export default defineComponent({
|
|
|
89
89
|
};
|
|
90
90
|
});
|
|
91
91
|
function close(value) {
|
|
92
|
+
if (props.preventClose) {
|
|
93
|
+
emit("close-prevented");
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
92
96
|
isOpen.value = value;
|
|
93
97
|
emit("close");
|
|
94
98
|
}
|
|
@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
41
41
|
isOpen: WritableComputedRef<boolean>;
|
|
42
42
|
transitionClass: import("vue").ComputedRef<any>;
|
|
43
43
|
close: (value: boolean) => void;
|
|
44
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
44
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
45
45
|
modelValue: {
|
|
46
46
|
type: PropType<boolean>;
|
|
47
47
|
default: boolean;
|
|
@@ -78,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
78
78
|
}>> & {
|
|
79
79
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
80
80
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
81
|
+
"onClose-prevented"?: ((...args: any[]) => any) | undefined;
|
|
81
82
|
}, {
|
|
82
83
|
ui: any;
|
|
83
84
|
transition: boolean;
|
|
@@ -58,11 +58,11 @@ export default defineComponent({
|
|
|
58
58
|
},
|
|
59
59
|
openDelay: {
|
|
60
60
|
type: Number,
|
|
61
|
-
default:
|
|
61
|
+
default: () => config.default.openDelay
|
|
62
62
|
},
|
|
63
63
|
closeDelay: {
|
|
64
64
|
type: Number,
|
|
65
|
-
default:
|
|
65
|
+
default: () => config.default.closeDelay
|
|
66
66
|
},
|
|
67
67
|
popper: {
|
|
68
68
|
type: Object,
|