@quidgest/ui 0.17.9 → 0.18.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/json/api.json +169 -17
- package/dist/manifest/components.json +2 -0
- package/dist/ui.css +231 -25
- package/dist/ui.esm.js +573 -608
- package/dist/ui.js +457 -493
- package/dist/ui.min.css +1 -1
- package/dist/ui.min.js +457 -493
- package/dist/ui.scss +225 -27
- package/esm/components/QAccordion/QAccordionItem.vue.js +1 -0
- package/esm/components/QCarousel/QCarousel.vue.js +1 -1
- package/esm/components/QCheckbox/QCheckbox.d.ts.map +1 -1
- package/esm/components/QCheckbox/QCheckbox.vue.js +2 -0
- package/esm/components/QCollapsible/QCollapsible.d.ts +2 -1
- package/esm/components/QCollapsible/QCollapsible.d.ts.map +1 -1
- package/esm/components/QCollapsible/QCollapsible.vue.js +50 -47
- package/esm/components/QCollapsible/constants.d.ts +6 -0
- package/esm/components/QCollapsible/constants.d.ts.map +1 -1
- package/esm/components/QCollapsible/constants.js +3 -2
- package/esm/components/QCollapsible/index.d.ts +6 -0
- package/esm/components/QCollapsible/index.d.ts.map +1 -1
- package/esm/components/QCollapsible/types.d.ts +11 -1
- package/esm/components/QCollapsible/types.d.ts.map +1 -1
- package/esm/components/QDateTimePicker/QDateTimePicker.d.ts.map +1 -1
- package/esm/components/QDateTimePicker/QDateTimePicker.vue.js +505 -597
- package/esm/components/QDropdownMenu/QDropdownMenuContent.d.ts +32 -16
- package/esm/components/QDropdownMenu/QDropdownMenuContent.d.ts.map +1 -1
- package/esm/components/QDropdownMenu/QDropdownMenuContent.vue.js +179 -86
- package/esm/components/QDropdownMenu/types.d.ts +6 -0
- package/esm/components/QDropdownMenu/types.d.ts.map +1 -1
- package/esm/components/QField/types.d.ts +3 -0
- package/esm/components/QField/types.d.ts.map +1 -1
- package/esm/components/QLabel/QLabel.d.ts.map +1 -1
- package/esm/components/QLabel/QLabel.vue.js +19 -17
- package/esm/components/QLabel/types.d.ts +3 -0
- package/esm/components/QLabel/types.d.ts.map +1 -1
- package/esm/components/QTabs/QTab.d.ts +172 -0
- package/esm/components/QTabs/QTab.d.ts.map +1 -0
- package/esm/components/QTabs/QTab.vue.js +122 -0
- package/esm/components/QTabs/QTab2.vue.js +5 -0
- package/esm/components/QTabs/QTabs.d.ts +35 -0
- package/esm/components/QTabs/QTabs.d.ts.map +1 -0
- package/esm/components/QTabs/QTabs.vue.js +83 -0
- package/esm/components/QTabs/QTabs2.vue.js +5 -0
- package/esm/components/QTabs/constants.d.ts +5 -0
- package/esm/components/QTabs/constants.d.ts.map +1 -0
- package/esm/components/QTabs/context.d.ts +78 -0
- package/esm/components/QTabs/context.d.ts.map +1 -0
- package/esm/components/QTabs/context.js +4 -0
- package/esm/components/QTabs/index.d.ts +164 -0
- package/esm/components/QTabs/index.d.ts.map +1 -0
- package/esm/components/QTabs/index.js +7 -0
- package/esm/components/QTabs/types.d.ts +106 -0
- package/esm/components/QTabs/types.d.ts.map +1 -0
- package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator.d.ts +7 -0
- package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator.d.ts.map +1 -0
- package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator.vue.js +24 -0
- package/esm/components/__internal__/QRequiredIndicator/QRequiredIndicator2.vue.js +5 -0
- package/esm/components/__internal__/QRequiredIndicator/constants.d.ts +7 -0
- package/esm/components/__internal__/QRequiredIndicator/constants.d.ts.map +1 -0
- package/esm/components/__internal__/QRequiredIndicator/constants.js +4 -0
- package/esm/components/__internal__/QRequiredIndicator/index.d.ts +6 -0
- package/esm/components/__internal__/QRequiredIndicator/index.d.ts.map +1 -0
- package/esm/components/__internal__/QRequiredIndicator/index.js +6 -0
- package/esm/components/__internal__/QRequiredIndicator/types.d.ts +18 -0
- package/esm/components/__internal__/QRequiredIndicator/types.d.ts.map +1 -0
- package/esm/components/__internal__/QSafeTriangle/QSafeTriangle.d.ts +10 -0
- package/esm/components/__internal__/QSafeTriangle/QSafeTriangle.d.ts.map +1 -0
- package/esm/components/__internal__/QSafeTriangle/QSafeTriangle.vue.js +31 -0
- package/esm/components/__internal__/QSafeTriangle/QSafeTriangle2.vue.js +5 -0
- package/esm/components/__internal__/QSafeTriangle/index.d.ts +10 -0
- package/esm/components/__internal__/QSafeTriangle/index.d.ts.map +1 -0
- package/esm/components/__internal__/QSafeTriangle/index.js +6 -0
- package/esm/components/__internal__/QSafeTriangle/types.d.ts +33 -0
- package/esm/components/__internal__/QSafeTriangle/types.d.ts.map +1 -0
- package/esm/components/index.d.ts +1 -0
- package/esm/components/index.d.ts.map +1 -1
- package/esm/components/index.js +17 -14
- package/esm/composables/useSafeTriangle/index.d.ts +31 -0
- package/esm/composables/useSafeTriangle/index.d.ts.map +1 -0
- package/esm/composables/useSafeTriangle/index.js +87 -0
- package/esm/index.d.ts +2 -0
- package/esm/utils/date.d.ts +36 -1
- package/esm/utils/date.d.ts.map +1 -1
- package/esm/utils/date.js +90 -1
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.d.ts.map +1 -1
- package/esm/utils/index.js +30 -24
- package/esm/utils/mask.d.ts +17 -0
- package/esm/utils/mask.d.ts.map +1 -0
- package/esm/utils/mask.js +154 -0
- package/esm/utils/safeTriangle.d.ts +68 -0
- package/esm/utils/safeTriangle.d.ts.map +1 -0
- package/esm/utils/safeTriangle.js +83 -0
- package/package.json +6 -6
- package/esm/composables/useInputMask/index.d.ts +0 -50
- package/esm/composables/useInputMask/index.d.ts.map +0 -1
- package/esm/composables/useInputMask/index.js +0 -408
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { DEFAULT_TEXTS } from './constants';
|
|
2
|
+
import { QTabProps } from './types';
|
|
3
|
+
declare function __VLS_template(): {
|
|
4
|
+
attrs: Partial<{}>;
|
|
5
|
+
slots: {
|
|
6
|
+
'title.prepend'?(_: {}): any;
|
|
7
|
+
'title.append'?(_: {}): any;
|
|
8
|
+
default?(_: {}): any;
|
|
9
|
+
};
|
|
10
|
+
refs: {
|
|
11
|
+
tabBtn: ({
|
|
12
|
+
$: import('vue').ComponentInternalInstance;
|
|
13
|
+
$data: {};
|
|
14
|
+
$props: {
|
|
15
|
+
readonly id?: string | undefined;
|
|
16
|
+
readonly class?: string | unknown[] | undefined;
|
|
17
|
+
readonly label?: string | undefined;
|
|
18
|
+
readonly variant?: import('..').QButtonVariant | undefined;
|
|
19
|
+
readonly color?: string | undefined;
|
|
20
|
+
readonly borderless?: boolean | undefined;
|
|
21
|
+
readonly elevated?: boolean | undefined;
|
|
22
|
+
readonly block?: boolean | undefined;
|
|
23
|
+
readonly size?: import('..').QButtonSize | undefined;
|
|
24
|
+
readonly iconPos?: import('..').QButtonIconPosition | undefined;
|
|
25
|
+
readonly pill?: boolean | undefined;
|
|
26
|
+
readonly disabled?: boolean | undefined;
|
|
27
|
+
readonly loading?: boolean | undefined;
|
|
28
|
+
readonly onClick?: ((event: Event) => any) | undefined;
|
|
29
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
|
|
30
|
+
$attrs: import('vue').Attrs;
|
|
31
|
+
$refs: {
|
|
32
|
+
[x: string]: unknown;
|
|
33
|
+
};
|
|
34
|
+
$slots: Readonly<{
|
|
35
|
+
[name: string]: import('vue').Slot<any> | undefined;
|
|
36
|
+
}>;
|
|
37
|
+
$root: import('vue').ComponentPublicInstance | null;
|
|
38
|
+
$parent: import('vue').ComponentPublicInstance | null;
|
|
39
|
+
$host: Element | null;
|
|
40
|
+
$emit: (event: "click", event: Event) => void;
|
|
41
|
+
$el: HTMLButtonElement;
|
|
42
|
+
$options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
|
|
43
|
+
onClick?: ((event: Event) => any) | undefined;
|
|
44
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
45
|
+
click: (event: Event) => any;
|
|
46
|
+
}, string, {
|
|
47
|
+
size: import('..').QButtonSize;
|
|
48
|
+
variant: import('..').QButtonVariant;
|
|
49
|
+
color: string;
|
|
50
|
+
iconPos: import('..').QButtonIconPosition;
|
|
51
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
|
|
52
|
+
beforeCreate?: (() => void) | (() => void)[];
|
|
53
|
+
created?: (() => void) | (() => void)[];
|
|
54
|
+
beforeMount?: (() => void) | (() => void)[];
|
|
55
|
+
mounted?: (() => void) | (() => void)[];
|
|
56
|
+
beforeUpdate?: (() => void) | (() => void)[];
|
|
57
|
+
updated?: (() => void) | (() => void)[];
|
|
58
|
+
activated?: (() => void) | (() => void)[];
|
|
59
|
+
deactivated?: (() => void) | (() => void)[];
|
|
60
|
+
beforeDestroy?: (() => void) | (() => void)[];
|
|
61
|
+
beforeUnmount?: (() => void) | (() => void)[];
|
|
62
|
+
destroyed?: (() => void) | (() => void)[];
|
|
63
|
+
unmounted?: (() => void) | (() => void)[];
|
|
64
|
+
renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
|
|
65
|
+
renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
|
|
66
|
+
errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
|
|
67
|
+
};
|
|
68
|
+
$forceUpdate: () => void;
|
|
69
|
+
$nextTick: typeof import('vue').nextTick;
|
|
70
|
+
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
|
|
71
|
+
} & Readonly<{
|
|
72
|
+
size: import('..').QButtonSize;
|
|
73
|
+
variant: import('..').QButtonVariant;
|
|
74
|
+
color: string;
|
|
75
|
+
iconPos: import('..').QButtonIconPosition;
|
|
76
|
+
}> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
|
|
77
|
+
onClick?: ((event: Event) => any) | undefined;
|
|
78
|
+
}>, "size" | "variant" | "color" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
|
|
79
|
+
$slots: {
|
|
80
|
+
default?(_: {}): any;
|
|
81
|
+
append?(_: {}): any;
|
|
82
|
+
};
|
|
83
|
+
}) | null;
|
|
84
|
+
};
|
|
85
|
+
rootEl: any;
|
|
86
|
+
};
|
|
87
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
88
|
+
declare const __VLS_component: import('vue').DefineComponent<QTabProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QTabProps> & Readonly<{}>, {
|
|
89
|
+
texts: typeof DEFAULT_TEXTS;
|
|
90
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
91
|
+
tabBtn: ({
|
|
92
|
+
$: import('vue').ComponentInternalInstance;
|
|
93
|
+
$data: {};
|
|
94
|
+
$props: {
|
|
95
|
+
readonly id?: string | undefined;
|
|
96
|
+
readonly class?: string | unknown[] | undefined;
|
|
97
|
+
readonly label?: string | undefined;
|
|
98
|
+
readonly variant?: import('..').QButtonVariant | undefined;
|
|
99
|
+
readonly color?: string | undefined;
|
|
100
|
+
readonly borderless?: boolean | undefined;
|
|
101
|
+
readonly elevated?: boolean | undefined;
|
|
102
|
+
readonly block?: boolean | undefined;
|
|
103
|
+
readonly size?: import('..').QButtonSize | undefined;
|
|
104
|
+
readonly iconPos?: import('..').QButtonIconPosition | undefined;
|
|
105
|
+
readonly pill?: boolean | undefined;
|
|
106
|
+
readonly disabled?: boolean | undefined;
|
|
107
|
+
readonly loading?: boolean | undefined;
|
|
108
|
+
readonly onClick?: ((event: Event) => any) | undefined;
|
|
109
|
+
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
|
|
110
|
+
$attrs: import('vue').Attrs;
|
|
111
|
+
$refs: {
|
|
112
|
+
[x: string]: unknown;
|
|
113
|
+
};
|
|
114
|
+
$slots: Readonly<{
|
|
115
|
+
[name: string]: import('vue').Slot<any> | undefined;
|
|
116
|
+
}>;
|
|
117
|
+
$root: import('vue').ComponentPublicInstance | null;
|
|
118
|
+
$parent: import('vue').ComponentPublicInstance | null;
|
|
119
|
+
$host: Element | null;
|
|
120
|
+
$emit: (event: "click", event: Event) => void;
|
|
121
|
+
$el: HTMLButtonElement;
|
|
122
|
+
$options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
|
|
123
|
+
onClick?: ((event: Event) => any) | undefined;
|
|
124
|
+
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
125
|
+
click: (event: Event) => any;
|
|
126
|
+
}, string, {
|
|
127
|
+
size: import('..').QButtonSize;
|
|
128
|
+
variant: import('..').QButtonVariant;
|
|
129
|
+
color: string;
|
|
130
|
+
iconPos: import('..').QButtonIconPosition;
|
|
131
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
|
|
132
|
+
beforeCreate?: (() => void) | (() => void)[];
|
|
133
|
+
created?: (() => void) | (() => void)[];
|
|
134
|
+
beforeMount?: (() => void) | (() => void)[];
|
|
135
|
+
mounted?: (() => void) | (() => void)[];
|
|
136
|
+
beforeUpdate?: (() => void) | (() => void)[];
|
|
137
|
+
updated?: (() => void) | (() => void)[];
|
|
138
|
+
activated?: (() => void) | (() => void)[];
|
|
139
|
+
deactivated?: (() => void) | (() => void)[];
|
|
140
|
+
beforeDestroy?: (() => void) | (() => void)[];
|
|
141
|
+
beforeUnmount?: (() => void) | (() => void)[];
|
|
142
|
+
destroyed?: (() => void) | (() => void)[];
|
|
143
|
+
unmounted?: (() => void) | (() => void)[];
|
|
144
|
+
renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
|
|
145
|
+
renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
|
|
146
|
+
errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
|
|
147
|
+
};
|
|
148
|
+
$forceUpdate: () => void;
|
|
149
|
+
$nextTick: typeof import('vue').nextTick;
|
|
150
|
+
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
|
|
151
|
+
} & Readonly<{
|
|
152
|
+
size: import('..').QButtonSize;
|
|
153
|
+
variant: import('..').QButtonVariant;
|
|
154
|
+
color: string;
|
|
155
|
+
iconPos: import('..').QButtonIconPosition;
|
|
156
|
+
}> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
|
|
157
|
+
onClick?: ((event: Event) => any) | undefined;
|
|
158
|
+
}>, "size" | "variant" | "color" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
|
|
159
|
+
$slots: {
|
|
160
|
+
default?(_: {}): any;
|
|
161
|
+
append?(_: {}): any;
|
|
162
|
+
};
|
|
163
|
+
}) | null;
|
|
164
|
+
}, any>;
|
|
165
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
166
|
+
export default _default;
|
|
167
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
168
|
+
new (): {
|
|
169
|
+
$slots: S;
|
|
170
|
+
};
|
|
171
|
+
};
|
|
172
|
+
//# sourceMappingURL=QTab.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QTab.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/QTab.vue"],"names":[],"mappings":"AAyCA;AAqMC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAiJzC,iBAAS,cAAc;WAoHT,OAAO,IAA6B;;iCAbZ,GAAG;gCACJ,GAAG;yBACV,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmEqnX,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;EAnD3wX;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA6BioX,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;OArB1wX,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { useGroupItem as e } from "../../composables/useGroup/index.js";
|
|
2
|
+
import { DEFAULT_TEXTS as t } from "../__internal__/QRequiredIndicator/constants.js";
|
|
3
|
+
import { QButton as n } from "../QButton/index.js";
|
|
4
|
+
import { QRequiredIndicator as r } from "../__internal__/QRequiredIndicator/index.js";
|
|
5
|
+
import { useId as i } from "../../composables/uid.js";
|
|
6
|
+
import { TabsSymbol as a } from "./context.js";
|
|
7
|
+
import { Fragment as o, Teleport as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, inject as h, normalizeClass as g, onBeforeMount as _, onBeforeUnmount as v, openBlock as y, renderSlot as b, toDisplayString as x, toRef as S, unref as C, useTemplateRef as w, vShow as T, withCtx as E, withDirectives as D } from "vue";
|
|
8
|
+
//#region src/components/QTabs/QTab.vue?vue&type=script&setup=true&lang.ts
|
|
9
|
+
var O = { class: "q-tab__title" }, k = { class: "q-tab__title-text" }, A = [
|
|
10
|
+
"id",
|
|
11
|
+
"aria-labelledby",
|
|
12
|
+
"tabindex"
|
|
13
|
+
], j = /*@__PURE__*/ m({
|
|
14
|
+
__name: "QTab",
|
|
15
|
+
props: {
|
|
16
|
+
id: {},
|
|
17
|
+
class: {},
|
|
18
|
+
title: {},
|
|
19
|
+
required: { type: Boolean },
|
|
20
|
+
disabled: { type: Boolean },
|
|
21
|
+
value: {},
|
|
22
|
+
texts: { default: () => t }
|
|
23
|
+
},
|
|
24
|
+
setup(t) {
|
|
25
|
+
let m = t, j = h(a, void 0);
|
|
26
|
+
if (!j) throw Error("QTab: Failed to retrieve tabs context. Ensure the component is used within a QTabs context.");
|
|
27
|
+
let M = i(S(m, "value")), N = i(), P = i(), F = e(M);
|
|
28
|
+
if (!F) throw Error("QTab: Failed to retrieve group item. Ensure the component is used within a QTabs context.");
|
|
29
|
+
let I = w("tabBtn"), L = c(() => j.tabListEl.value), R = c(() => !!m.disabled), z = c(() => {
|
|
30
|
+
if (!R.value) return F.isActive.value ? 0 : -1;
|
|
31
|
+
}), B = c(() => [
|
|
32
|
+
"q-tab",
|
|
33
|
+
{
|
|
34
|
+
"q-tab--active": F.isActive.value,
|
|
35
|
+
"q-tab--disabled": R.value
|
|
36
|
+
},
|
|
37
|
+
m.class
|
|
38
|
+
]);
|
|
39
|
+
function V() {
|
|
40
|
+
(I.value?.$el)?.focus?.();
|
|
41
|
+
}
|
|
42
|
+
function H() {
|
|
43
|
+
R.value || F?.isActive.value || F?.toggle();
|
|
44
|
+
}
|
|
45
|
+
function U() {
|
|
46
|
+
H();
|
|
47
|
+
}
|
|
48
|
+
function W(e) {
|
|
49
|
+
let t = j?.direction.value === "horizontal";
|
|
50
|
+
if (t && e.key === "ArrowRight" || !t && e.key === "ArrowDown") {
|
|
51
|
+
e.preventDefault(), j?.focusAdjacent(M.value, 1);
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
if (t && e.key === "ArrowLeft" || !t && e.key === "ArrowUp") {
|
|
55
|
+
e.preventDefault(), j?.focusAdjacent(M.value, -1);
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
if (e.key === "Home") {
|
|
59
|
+
e.preventDefault(), j?.focusFirst();
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
e.key === "End" && (e.preventDefault(), j?.focusLast());
|
|
63
|
+
}
|
|
64
|
+
return _(() => {
|
|
65
|
+
j.register({
|
|
66
|
+
value: M.value,
|
|
67
|
+
disabled: R,
|
|
68
|
+
focus: V,
|
|
69
|
+
select: H
|
|
70
|
+
});
|
|
71
|
+
}), v(() => {
|
|
72
|
+
j.unregister(M.value);
|
|
73
|
+
}), (e, t) => (y(), d(o, null, [L.value ? (y(), l(s, {
|
|
74
|
+
key: 0,
|
|
75
|
+
to: L.value
|
|
76
|
+
}, [p(C(n), {
|
|
77
|
+
id: C(N),
|
|
78
|
+
ref: "tabBtn",
|
|
79
|
+
borderless: "",
|
|
80
|
+
role: "tab",
|
|
81
|
+
variant: "text",
|
|
82
|
+
class: g(B.value),
|
|
83
|
+
disabled: R.value,
|
|
84
|
+
"data-value": C(M),
|
|
85
|
+
"aria-selected": C(F).isActive.value,
|
|
86
|
+
"aria-controls": C(P),
|
|
87
|
+
"aria-required": m.required || void 0,
|
|
88
|
+
tabindex: z.value,
|
|
89
|
+
onClick: U,
|
|
90
|
+
onKeydown: W
|
|
91
|
+
}, {
|
|
92
|
+
default: E(() => [f("span", O, [
|
|
93
|
+
b(e.$slots, "title.prepend"),
|
|
94
|
+
f("span", k, x(m.title), 1),
|
|
95
|
+
m.required ? (y(), l(C(r), {
|
|
96
|
+
key: 0,
|
|
97
|
+
announce: "",
|
|
98
|
+
texts: m.texts
|
|
99
|
+
}, null, 8, ["texts"])) : u("v-if", !0),
|
|
100
|
+
b(e.$slots, "title.append")
|
|
101
|
+
])]),
|
|
102
|
+
_: 3
|
|
103
|
+
}, 8, [
|
|
104
|
+
"id",
|
|
105
|
+
"class",
|
|
106
|
+
"disabled",
|
|
107
|
+
"data-value",
|
|
108
|
+
"aria-selected",
|
|
109
|
+
"aria-controls",
|
|
110
|
+
"aria-required",
|
|
111
|
+
"tabindex"
|
|
112
|
+
])], 8, ["to"])) : u("v-if", !0), D(f("div", {
|
|
113
|
+
id: C(P),
|
|
114
|
+
class: "q-tabs__panel",
|
|
115
|
+
role: "tabpanel",
|
|
116
|
+
"aria-labelledby": C(N),
|
|
117
|
+
tabindex: C(F).isActive.value ? 0 : void 0
|
|
118
|
+
}, [b(e.$slots, "default")], 8, A), [[T, C(F).isActive.value]])], 64));
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
//#endregion
|
|
122
|
+
export { j as default };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { QTabsProps } from './types';
|
|
2
|
+
type __VLS_Props = QTabsProps;
|
|
3
|
+
type __VLS_PublicProps = {
|
|
4
|
+
modelValue?: string;
|
|
5
|
+
} & __VLS_Props;
|
|
6
|
+
declare function __VLS_template(): {
|
|
7
|
+
attrs: Partial<{}>;
|
|
8
|
+
slots: {
|
|
9
|
+
default?(_: {}): any;
|
|
10
|
+
};
|
|
11
|
+
refs: {
|
|
12
|
+
tabListEl: HTMLDivElement;
|
|
13
|
+
};
|
|
14
|
+
rootEl: HTMLDivElement;
|
|
15
|
+
};
|
|
16
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
17
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
18
|
+
"update:modelValue": (value: string) => any;
|
|
19
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
20
|
+
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
21
|
+
}>, {
|
|
22
|
+
variant: import('./types').QTabsVariant;
|
|
23
|
+
direction: import('./types').QTabsDirection;
|
|
24
|
+
align: import('./types').QTabsAlign;
|
|
25
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
26
|
+
tabListEl: HTMLDivElement;
|
|
27
|
+
}, HTMLDivElement>;
|
|
28
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
29
|
+
export default _default;
|
|
30
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
31
|
+
new (): {
|
|
32
|
+
$slots: S;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=QTabs.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/QTabs.vue"],"names":[],"mappings":"AAcA;AA6KC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAMzC,KAAK,WAAW,GAAG,UAAU,CAAC;AAkJ/B,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAqCT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAYD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;kBAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { provideDefaults as e } from "../../composables/defaults.js";
|
|
2
|
+
import { useGroup as t } from "../../composables/useGroup/index.js";
|
|
3
|
+
import { TabsSymbol as n } from "./context.js";
|
|
4
|
+
import { computed as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, provide as u, renderSlot as d, shallowRef as f, toRef as p, unref as m, useModel as h, useTemplateRef as g, watch as _ } from "vue";
|
|
5
|
+
//#region src/components/QTabs/QTabs.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var v = ["id"], y = ["aria-orientation"], b = { class: "q-tabs__panels" }, x = /*@__PURE__*/ o({
|
|
7
|
+
__name: "QTabs",
|
|
8
|
+
props: /*@__PURE__*/ s({
|
|
9
|
+
id: {},
|
|
10
|
+
class: {},
|
|
11
|
+
direction: { default: "horizontal" },
|
|
12
|
+
align: { default: "start" },
|
|
13
|
+
variant: { default: "line" },
|
|
14
|
+
disabled: { type: Boolean }
|
|
15
|
+
}, {
|
|
16
|
+
modelValue: {},
|
|
17
|
+
modelModifiers: {}
|
|
18
|
+
}),
|
|
19
|
+
emits: ["update:modelValue"],
|
|
20
|
+
setup(o) {
|
|
21
|
+
let s = o, x = h(o, "modelValue"), S = g("tabListEl"), C = f([]), { active: w } = t({
|
|
22
|
+
active: x,
|
|
23
|
+
required: !0
|
|
24
|
+
});
|
|
25
|
+
_(w, (e) => {
|
|
26
|
+
x.value = e;
|
|
27
|
+
}), e({ QTab: { disabled: p(s, "disabled") } });
|
|
28
|
+
let T = r(() => [
|
|
29
|
+
"q-tabs",
|
|
30
|
+
`q-tabs--${s.direction}`,
|
|
31
|
+
`q-tabs--${s.variant}`,
|
|
32
|
+
`q-tabs--align-${s.align}`,
|
|
33
|
+
s.class
|
|
34
|
+
]);
|
|
35
|
+
function E() {
|
|
36
|
+
return C.value.filter((e) => !m(e.disabled));
|
|
37
|
+
}
|
|
38
|
+
function D() {
|
|
39
|
+
let e = E();
|
|
40
|
+
e.length && (e.some((e) => e.value === x.value) || (x.value = e[0].value));
|
|
41
|
+
}
|
|
42
|
+
function O(e) {
|
|
43
|
+
C.value = [...C.value, e], D();
|
|
44
|
+
}
|
|
45
|
+
function k(e) {
|
|
46
|
+
C.value = C.value.filter((t) => t.value !== e);
|
|
47
|
+
}
|
|
48
|
+
function A(e, t) {
|
|
49
|
+
let n = E();
|
|
50
|
+
if (!n.length) return;
|
|
51
|
+
let r = n.findIndex((t) => t.value === e), i = n[r === -1 ? 0 : (r + t + n.length) % n.length];
|
|
52
|
+
i.select(), i.focus();
|
|
53
|
+
}
|
|
54
|
+
function j() {
|
|
55
|
+
let e = E()[0];
|
|
56
|
+
e && (e.select(), e.focus());
|
|
57
|
+
}
|
|
58
|
+
function M() {
|
|
59
|
+
let e = E(), t = e[e.length - 1];
|
|
60
|
+
t && (t.select(), t.focus());
|
|
61
|
+
}
|
|
62
|
+
return _(() => C.value.map((e) => [e.value, m(e.disabled)]), () => D()), u(n, {
|
|
63
|
+
tabListEl: S,
|
|
64
|
+
direction: r(() => s.direction),
|
|
65
|
+
register: O,
|
|
66
|
+
unregister: k,
|
|
67
|
+
focusAdjacent: A,
|
|
68
|
+
focusFirst: j,
|
|
69
|
+
focusLast: M
|
|
70
|
+
}), (e, t) => (l(), i("div", {
|
|
71
|
+
id: s.id,
|
|
72
|
+
class: c(T.value)
|
|
73
|
+
}, [a("div", {
|
|
74
|
+
ref_key: "tabListEl",
|
|
75
|
+
ref: S,
|
|
76
|
+
class: "q-tabs__list",
|
|
77
|
+
role: "tablist",
|
|
78
|
+
"aria-orientation": s.direction
|
|
79
|
+
}, null, 8, y), a("div", b, [d(e.$slots, "default")])], 10, v));
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
//#endregion
|
|
83
|
+
export { x as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAA"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { ComputedRef, InjectionKey, Ref } from 'vue';
|
|
2
|
+
import { QTabsDirection } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Metadata registered by each {@link QTab} with its parent {@link QTabs}.
|
|
5
|
+
*
|
|
6
|
+
* Used for keyboard navigation, default selection, and focusing tab triggers.
|
|
7
|
+
*/
|
|
8
|
+
export type TabRegistration = {
|
|
9
|
+
/**
|
|
10
|
+
* Identity of the tab, matching the value used by `v-model` on `QTabs`.
|
|
11
|
+
*/
|
|
12
|
+
value: string;
|
|
13
|
+
/**
|
|
14
|
+
* Whether the tab is currently disabled.
|
|
15
|
+
*
|
|
16
|
+
* Stored as a computed so the parent can react when the prop changes.
|
|
17
|
+
*/
|
|
18
|
+
disabled: ComputedRef<boolean>;
|
|
19
|
+
/**
|
|
20
|
+
* Moves DOM focus to this tab's trigger button.
|
|
21
|
+
*/
|
|
22
|
+
focus: () => void;
|
|
23
|
+
/**
|
|
24
|
+
* Activates this tab if it is enabled and not already selected.
|
|
25
|
+
*/
|
|
26
|
+
select: () => void;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Provide/inject context shared between {@link QTabs} and its {@link QTab} children.
|
|
30
|
+
*
|
|
31
|
+
* Handles tablist targeting (for teleporting triggers), registration, and keyboard focus movement.
|
|
32
|
+
*/
|
|
33
|
+
export type TabsContext = {
|
|
34
|
+
/**
|
|
35
|
+
* DOM element that hosts the tablist (`role="tablist"`).
|
|
36
|
+
*
|
|
37
|
+
* Each `QTab` teleports its trigger button into this element.
|
|
38
|
+
*/
|
|
39
|
+
tabListEl: Ref<HTMLElement | null>;
|
|
40
|
+
/**
|
|
41
|
+
* Current layout orientation of the tab list.
|
|
42
|
+
*
|
|
43
|
+
* Drives which arrow keys move focus (Left/Right vs Up/Down).
|
|
44
|
+
*/
|
|
45
|
+
direction: ComputedRef<QTabsDirection>;
|
|
46
|
+
/**
|
|
47
|
+
* Registers a tab with the parent so it participates in selection and keyboard navigation.
|
|
48
|
+
*
|
|
49
|
+
* @param tab - Tab metadata to register.
|
|
50
|
+
*/
|
|
51
|
+
register: (tab: TabRegistration) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Removes a previously registered tab (typically on unmount).
|
|
54
|
+
*
|
|
55
|
+
* @param value - The tab `value` to remove.
|
|
56
|
+
*/
|
|
57
|
+
unregister: (value: string) => void;
|
|
58
|
+
/**
|
|
59
|
+
* Activates and focuses the next or previous enabled tab relative to `currentValue`.
|
|
60
|
+
*
|
|
61
|
+
* @param currentValue - Value of the tab that currently has focus.
|
|
62
|
+
* @param delta - Direction to move (`1` for next, `-1` for previous). Wraps around.
|
|
63
|
+
*/
|
|
64
|
+
focusAdjacent: (currentValue: string, delta: number) => void;
|
|
65
|
+
/**
|
|
66
|
+
* Activates and focuses the first enabled tab.
|
|
67
|
+
*/
|
|
68
|
+
focusFirst: () => void;
|
|
69
|
+
/**
|
|
70
|
+
* Activates and focuses the last enabled tab.
|
|
71
|
+
*/
|
|
72
|
+
focusLast: () => void;
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* Injection key for the {@link TabsContext} provided by `QTabs`.
|
|
76
|
+
*/
|
|
77
|
+
export declare const TabsSymbol: InjectionKey<TabsContext>;
|
|
78
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/QTabs/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IAEb;;;;OAIG;IACH,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAE9B;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAA;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAA;CAClB,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB;;;;OAIG;IACH,SAAS,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAElC;;;;OAIG;IACH,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,CAAA;IAEtC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAA;IAExC;;;;OAIG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnC;;;;;OAKG;IACH,aAAa,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAE5D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAA;IAEtB;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,WAAW,CAAoB,CAAA"}
|