@quidgest/ui 0.21.0 → 0.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/json/api.json +184 -3
- package/dist/manifest/components.json +1 -0
- package/dist/ui.css +194 -7
- package/dist/ui.esm.js +1242 -1180
- package/dist/ui.js +505 -443
- package/dist/ui.min.css +1 -1
- package/dist/ui.min.js +505 -443
- package/dist/ui.scss +226 -9
- package/esm/components/QObfuscation/QObfuscation.d.ts +1 -1
- package/esm/components/QObfuscation/QObfuscation.d.ts.map +1 -1
- package/esm/components/QObfuscation/QObfuscation.vue.js +52 -55
- package/esm/components/QObfuscation/index.d.ts +6 -6
- package/esm/components/QObfuscation/types.d.ts +1 -1
- package/esm/components/QObfuscation/types.d.ts.map +1 -1
- package/esm/components/QOverflow/QOverflow.d.ts +43 -0
- package/esm/components/QOverflow/QOverflow.d.ts.map +1 -0
- package/esm/components/QOverflow/QOverflow.vue.js +281 -0
- package/esm/components/QOverflow/QOverflow2.vue.js +5 -0
- package/esm/components/QOverflow/constants.d.ts +30 -0
- package/esm/components/QOverflow/constants.d.ts.map +1 -0
- package/esm/components/QOverflow/constants.js +12 -0
- package/esm/components/QOverflow/index.d.ts +58 -0
- package/esm/components/QOverflow/index.d.ts.map +1 -0
- package/esm/components/QOverflow/index.js +6 -0
- package/esm/components/QOverflow/types.d.ts +119 -0
- package/esm/components/QOverflow/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 +58 -56
- package/esm/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
import { QButton as e } from "../QButton/index.js";
|
|
2
|
+
import { QIcon as t } from "../QIcon/index.js";
|
|
3
|
+
import { useId as n } from "../../composables/useId/index.js";
|
|
4
|
+
import { DEFAULT_ICONS as r, DEFAULT_TEXTS as i } from "./constants.js";
|
|
5
|
+
import { computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, nextTick as ee, normalizeClass as p, normalizeProps as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderSlot as y, toRef as b, unref as x, watch as S, withCtx as C } from "vue";
|
|
6
|
+
//#region src/components/QOverflow/QOverflow.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
+
var w = [
|
|
8
|
+
"id",
|
|
9
|
+
"role",
|
|
10
|
+
"aria-label"
|
|
11
|
+
], T = {
|
|
12
|
+
key: 0,
|
|
13
|
+
class: "q-overflow__control q-overflow__control--prev"
|
|
14
|
+
}, te = ["tabindex"], ne = {
|
|
15
|
+
key: 1,
|
|
16
|
+
class: "q-overflow__control q-overflow__control--next"
|
|
17
|
+
}, E = 1, D = /*@__PURE__*/ u({
|
|
18
|
+
__name: "QOverflow",
|
|
19
|
+
props: {
|
|
20
|
+
id: {},
|
|
21
|
+
class: {},
|
|
22
|
+
direction: { default: "horizontal" },
|
|
23
|
+
arrowPlacement: { default: "outside" },
|
|
24
|
+
arrowVisibility: { default: "always" },
|
|
25
|
+
scrollMode: { default: "page" },
|
|
26
|
+
scrollStep: { default: 200 },
|
|
27
|
+
remapWheel: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: !1
|
|
30
|
+
},
|
|
31
|
+
icons: { default: () => r },
|
|
32
|
+
texts: { default: () => i }
|
|
33
|
+
},
|
|
34
|
+
setup(r) {
|
|
35
|
+
let i = r, u = n(b(i, "id")), D = v(null), O = v(null), k = v(!1), A = v(!1), j = null, M = null, N = !1, P = a(() => i.direction === "horizontal"), F = a(() => k.value || A.value), I = a(() => P.value ? i.icons.back : i.icons.up), L = a(() => P.value ? i.icons.forward : i.icons.down), R = a(() => i.texts.regionLabel || void 0), z = a(() => R.value ? "region" : void 0), B = a(() => [
|
|
36
|
+
"q-overflow",
|
|
37
|
+
`q-overflow--${i.direction}`,
|
|
38
|
+
`q-overflow--arrows-${i.arrowPlacement}`,
|
|
39
|
+
`q-overflow--arrows-${i.arrowVisibility}`,
|
|
40
|
+
{
|
|
41
|
+
"q-overflow--overflowing": F.value,
|
|
42
|
+
"q-overflow--can-scroll-start": k.value,
|
|
43
|
+
"q-overflow--can-scroll-end": A.value
|
|
44
|
+
},
|
|
45
|
+
i.class
|
|
46
|
+
]), V = a(() => ({
|
|
47
|
+
disabled: !k.value,
|
|
48
|
+
onClick: Y
|
|
49
|
+
})), H = a(() => ({
|
|
50
|
+
disabled: !A.value,
|
|
51
|
+
onClick: X
|
|
52
|
+
}));
|
|
53
|
+
function U(e) {
|
|
54
|
+
return P.value ? {
|
|
55
|
+
position: e.scrollLeft,
|
|
56
|
+
size: e.clientWidth,
|
|
57
|
+
scrollSize: e.scrollWidth
|
|
58
|
+
} : {
|
|
59
|
+
position: e.scrollTop,
|
|
60
|
+
size: e.clientHeight,
|
|
61
|
+
scrollSize: e.scrollHeight
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
function W() {
|
|
65
|
+
let e = D.value;
|
|
66
|
+
if (!e) return;
|
|
67
|
+
let { position: t, size: n, scrollSize: r } = U(e), i = Math.max(0, r - n);
|
|
68
|
+
k.value = t > E, A.value = t < i - E;
|
|
69
|
+
}
|
|
70
|
+
function re() {
|
|
71
|
+
return typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
|
|
72
|
+
}
|
|
73
|
+
function G(e) {
|
|
74
|
+
let t = D.value;
|
|
75
|
+
if (!t) return;
|
|
76
|
+
let n = re();
|
|
77
|
+
P.value ? t.scrollTo({
|
|
78
|
+
left: e,
|
|
79
|
+
behavior: n
|
|
80
|
+
}) : t.scrollTo({
|
|
81
|
+
top: e,
|
|
82
|
+
behavior: n
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
function ie(e) {
|
|
86
|
+
return P.value ? e.clientWidth : e.clientHeight;
|
|
87
|
+
}
|
|
88
|
+
function ae() {
|
|
89
|
+
return Math.max(0, i.scrollStep);
|
|
90
|
+
}
|
|
91
|
+
function K() {
|
|
92
|
+
let e = O.value;
|
|
93
|
+
return e ? Array.from(e.children).filter((e) => e instanceof HTMLElement) : [];
|
|
94
|
+
}
|
|
95
|
+
function q(e, t, n, r) {
|
|
96
|
+
let i = Math.max(0, r - n), a = e + t / 2 - n / 2;
|
|
97
|
+
return Math.min(i, Math.max(0, a));
|
|
98
|
+
}
|
|
99
|
+
function oe(e) {
|
|
100
|
+
let t = D.value;
|
|
101
|
+
if (!t) return null;
|
|
102
|
+
let n = K();
|
|
103
|
+
if (!n.length) return null;
|
|
104
|
+
let { position: r, size: i, scrollSize: a } = U(t), o = r, s = r + i, c = Math.max(0, a - i);
|
|
105
|
+
if (e > 0) {
|
|
106
|
+
for (let e of n) {
|
|
107
|
+
let t = P.value ? e.offsetLeft : e.offsetTop, n = P.value ? e.offsetWidth : e.offsetHeight;
|
|
108
|
+
if (t + n > s + E) {
|
|
109
|
+
let e = q(t, n, i, a);
|
|
110
|
+
if (Math.abs(e - r) > E) return e;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
return c - r > E ? c : null;
|
|
114
|
+
}
|
|
115
|
+
for (let e = n.length - 1; e >= 0; e--) {
|
|
116
|
+
let t = n[e], s = P.value ? t.offsetLeft : t.offsetTop, c = P.value ? t.offsetWidth : t.offsetHeight;
|
|
117
|
+
if (s < o - E) {
|
|
118
|
+
let e = q(s, c, i, a);
|
|
119
|
+
if (Math.abs(e - r) > E) return e;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
return r > E ? 0 : null;
|
|
123
|
+
}
|
|
124
|
+
function J(e) {
|
|
125
|
+
let t = D.value;
|
|
126
|
+
if (!t) return;
|
|
127
|
+
let { position: n } = U(t);
|
|
128
|
+
if (i.scrollMode === "item") {
|
|
129
|
+
let t = oe(e);
|
|
130
|
+
if (t === null) return;
|
|
131
|
+
G(t);
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
G(n + e * (i.scrollMode === "page" ? ie(t) : ae()));
|
|
135
|
+
}
|
|
136
|
+
function Y() {
|
|
137
|
+
J(-1);
|
|
138
|
+
}
|
|
139
|
+
function X() {
|
|
140
|
+
J(1);
|
|
141
|
+
}
|
|
142
|
+
function se() {
|
|
143
|
+
G(0);
|
|
144
|
+
}
|
|
145
|
+
function ce() {
|
|
146
|
+
let e = D.value;
|
|
147
|
+
if (!e) return;
|
|
148
|
+
let { size: t, scrollSize: n } = U(e);
|
|
149
|
+
G(Math.max(0, n - t));
|
|
150
|
+
}
|
|
151
|
+
function le(e) {
|
|
152
|
+
if (e.target !== e.currentTarget || !F.value) return;
|
|
153
|
+
let t = P.value;
|
|
154
|
+
switch (e.key) {
|
|
155
|
+
case "ArrowLeft":
|
|
156
|
+
if (!t) return;
|
|
157
|
+
e.preventDefault(), Y();
|
|
158
|
+
break;
|
|
159
|
+
case "ArrowRight":
|
|
160
|
+
if (!t) return;
|
|
161
|
+
e.preventDefault(), X();
|
|
162
|
+
break;
|
|
163
|
+
case "ArrowUp":
|
|
164
|
+
if (t) return;
|
|
165
|
+
e.preventDefault(), Y();
|
|
166
|
+
break;
|
|
167
|
+
case "ArrowDown":
|
|
168
|
+
if (t) return;
|
|
169
|
+
e.preventDefault(), X();
|
|
170
|
+
break;
|
|
171
|
+
case "Home":
|
|
172
|
+
e.preventDefault(), se();
|
|
173
|
+
break;
|
|
174
|
+
case "End":
|
|
175
|
+
e.preventDefault(), ce();
|
|
176
|
+
break;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
function Z(e) {
|
|
180
|
+
if (!P.value) return;
|
|
181
|
+
let t = D.value;
|
|
182
|
+
if (!t || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
|
183
|
+
let { position: n, size: r, scrollSize: i } = U(t), a = Math.max(0, i - r);
|
|
184
|
+
if (a <= 0) return;
|
|
185
|
+
let o = Math.min(a, Math.max(0, n + e.deltaY));
|
|
186
|
+
o !== n && (e.preventDefault(), t.scrollLeft = o, W());
|
|
187
|
+
}
|
|
188
|
+
function Q() {
|
|
189
|
+
let e = D.value;
|
|
190
|
+
if (!e) return;
|
|
191
|
+
let t = i.remapWheel && P.value;
|
|
192
|
+
if (t && !N) {
|
|
193
|
+
e.addEventListener("wheel", Z, { passive: !1 }), N = !0;
|
|
194
|
+
return;
|
|
195
|
+
}
|
|
196
|
+
!t && N && (e.removeEventListener("wheel", Z), N = !1);
|
|
197
|
+
}
|
|
198
|
+
function $() {
|
|
199
|
+
j?.disconnect();
|
|
200
|
+
let e = D.value, t = O.value;
|
|
201
|
+
if (!(!e || !t)) {
|
|
202
|
+
j ||= new ResizeObserver(() => {
|
|
203
|
+
W();
|
|
204
|
+
}), j.observe(e), j.observe(t);
|
|
205
|
+
for (let e of K()) j.observe(e);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
function ue() {
|
|
209
|
+
M?.disconnect();
|
|
210
|
+
let e = O.value;
|
|
211
|
+
e && (M ||= new MutationObserver(() => {
|
|
212
|
+
$(), W();
|
|
213
|
+
}), M.observe(e, { childList: !0 }));
|
|
214
|
+
}
|
|
215
|
+
return g(() => {
|
|
216
|
+
Q(), $(), ue(), W();
|
|
217
|
+
}), h(() => {
|
|
218
|
+
let e = D.value;
|
|
219
|
+
N && e && (e.removeEventListener("wheel", Z), N = !1), j?.disconnect(), j = null, M?.disconnect(), M = null;
|
|
220
|
+
}), S(() => [
|
|
221
|
+
i.direction,
|
|
222
|
+
i.scrollMode,
|
|
223
|
+
i.scrollStep
|
|
224
|
+
], async () => {
|
|
225
|
+
await ee(), $(), W();
|
|
226
|
+
}), S(() => [i.remapWheel, i.direction], () => {
|
|
227
|
+
Q();
|
|
228
|
+
}), (n, r) => (_(), s("div", {
|
|
229
|
+
id: x(u),
|
|
230
|
+
class: p(B.value),
|
|
231
|
+
role: z.value,
|
|
232
|
+
"aria-label": R.value
|
|
233
|
+
}, [
|
|
234
|
+
F.value ? (_(), s("div", T, [y(n.$slots, "prev", m(d(V.value)), () => [l(x(e), {
|
|
235
|
+
class: "q-overflow__button",
|
|
236
|
+
variant: "ghost",
|
|
237
|
+
"data-testid": "q-overflow-prev",
|
|
238
|
+
disabled: V.value.disabled,
|
|
239
|
+
"aria-label": i.texts.previousText,
|
|
240
|
+
onClick: V.value.onClick
|
|
241
|
+
}, {
|
|
242
|
+
default: C(() => [l(x(t), f({ class: "q-overflow__icon" }, I.value), null, 16)]),
|
|
243
|
+
_: 1
|
|
244
|
+
}, 8, [
|
|
245
|
+
"disabled",
|
|
246
|
+
"aria-label",
|
|
247
|
+
"onClick"
|
|
248
|
+
])])])) : o("v-if", !0),
|
|
249
|
+
c("div", {
|
|
250
|
+
ref_key: "viewportRef",
|
|
251
|
+
ref: D,
|
|
252
|
+
class: "q-overflow__viewport",
|
|
253
|
+
"data-testid": "q-overflow-viewport",
|
|
254
|
+
tabindex: F.value ? 0 : void 0,
|
|
255
|
+
onScroll: W,
|
|
256
|
+
onKeydown: le
|
|
257
|
+
}, [c("div", {
|
|
258
|
+
ref_key: "contentRef",
|
|
259
|
+
ref: O,
|
|
260
|
+
class: "q-overflow__content"
|
|
261
|
+
}, [y(n.$slots, "default")], 512)], 40, te),
|
|
262
|
+
F.value ? (_(), s("div", ne, [y(n.$slots, "next", m(d(H.value)), () => [l(x(e), {
|
|
263
|
+
class: "q-overflow__button",
|
|
264
|
+
variant: "ghost",
|
|
265
|
+
"data-testid": "q-overflow-next",
|
|
266
|
+
disabled: H.value.disabled,
|
|
267
|
+
"aria-label": i.texts.nextText,
|
|
268
|
+
onClick: H.value.onClick
|
|
269
|
+
}, {
|
|
270
|
+
default: C(() => [l(x(t), f({ class: "q-overflow__icon" }, L.value), null, 16)]),
|
|
271
|
+
_: 1
|
|
272
|
+
}, 8, [
|
|
273
|
+
"disabled",
|
|
274
|
+
"aria-label",
|
|
275
|
+
"onClick"
|
|
276
|
+
])])])) : o("v-if", !0)
|
|
277
|
+
], 10, w));
|
|
278
|
+
}
|
|
279
|
+
});
|
|
280
|
+
//#endregion
|
|
281
|
+
export { D as default };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/** Default icons for overflow navigation controls. */
|
|
2
|
+
export declare const DEFAULT_ICONS: {
|
|
3
|
+
back: {
|
|
4
|
+
icon: string;
|
|
5
|
+
};
|
|
6
|
+
forward: {
|
|
7
|
+
icon: string;
|
|
8
|
+
};
|
|
9
|
+
up: {
|
|
10
|
+
icon: string;
|
|
11
|
+
};
|
|
12
|
+
down: {
|
|
13
|
+
icon: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
/** Default accessible strings for navigation controls. */
|
|
17
|
+
export declare const DEFAULT_TEXTS: {
|
|
18
|
+
previousText: string;
|
|
19
|
+
nextText: string;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Accessible copy for {@link QOverflow}, including an optional region name.
|
|
23
|
+
*
|
|
24
|
+
* When `regionLabel` is set, the root gets `role="region"` and that accessible name
|
|
25
|
+
* (a landmark). Omit it (the default) for a plain root with no landmark role.
|
|
26
|
+
*/
|
|
27
|
+
export type QOverflowTexts = typeof DEFAULT_TEXTS & {
|
|
28
|
+
regionLabel?: string;
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=constants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QOverflow/constants.ts"],"names":[],"mappings":"AAGA,sDAAsD;AACtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;CAaM,CAAA;AAEhC,0DAA0D;AAC1D,eAAO,MAAM,aAAa;;;CAGQ,CAAA;AAElC;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,aAAa,GAAG;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
//#region src/components/QOverflow/constants.ts
|
|
2
|
+
var e = {
|
|
3
|
+
back: { icon: "chevron-left" },
|
|
4
|
+
forward: { icon: "chevron-right" },
|
|
5
|
+
up: { icon: "chevron-up" },
|
|
6
|
+
down: { icon: "chevron-down" }
|
|
7
|
+
}, t = {
|
|
8
|
+
previousText: "Previous",
|
|
9
|
+
nextText: "Next"
|
|
10
|
+
};
|
|
11
|
+
//#endregion
|
|
12
|
+
export { e as DEFAULT_ICONS, t as DEFAULT_TEXTS };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
declare const QOverflow: {
|
|
2
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').QOverflowProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
3
|
+
icons: typeof import('./constants').DEFAULT_ICONS;
|
|
4
|
+
texts: import('./constants').QOverflowTexts;
|
|
5
|
+
direction: import('./types').QOverflowDirection;
|
|
6
|
+
arrowPlacement: import('./types').QOverflowArrowPlacement;
|
|
7
|
+
arrowVisibility: import('./types').QOverflowArrowVisibility;
|
|
8
|
+
scrollMode: import('./types').QOverflowScrollMode;
|
|
9
|
+
scrollStep: number;
|
|
10
|
+
remapWheel: boolean;
|
|
11
|
+
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
|
|
12
|
+
viewportRef: HTMLDivElement;
|
|
13
|
+
contentRef: HTMLDivElement;
|
|
14
|
+
}, HTMLDivElement, import('vue').ComponentProvideOptions, {
|
|
15
|
+
P: {};
|
|
16
|
+
B: {};
|
|
17
|
+
D: {};
|
|
18
|
+
C: {};
|
|
19
|
+
M: {};
|
|
20
|
+
Defaults: {};
|
|
21
|
+
}, Readonly<import('./types').QOverflowProps> & Readonly<{}>, {}, {}, {}, {}, {
|
|
22
|
+
icons: typeof import('./constants').DEFAULT_ICONS;
|
|
23
|
+
texts: import('./constants').QOverflowTexts;
|
|
24
|
+
direction: import('./types').QOverflowDirection;
|
|
25
|
+
arrowPlacement: import('./types').QOverflowArrowPlacement;
|
|
26
|
+
arrowVisibility: import('./types').QOverflowArrowVisibility;
|
|
27
|
+
scrollMode: import('./types').QOverflowScrollMode;
|
|
28
|
+
scrollStep: number;
|
|
29
|
+
remapWheel: boolean;
|
|
30
|
+
}>;
|
|
31
|
+
__isFragment?: never;
|
|
32
|
+
__isTeleport?: never;
|
|
33
|
+
__isSuspense?: never;
|
|
34
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('./types').QOverflowProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
35
|
+
icons: typeof import('./constants').DEFAULT_ICONS;
|
|
36
|
+
texts: import('./constants').QOverflowTexts;
|
|
37
|
+
direction: import('./types').QOverflowDirection;
|
|
38
|
+
arrowPlacement: import('./types').QOverflowArrowPlacement;
|
|
39
|
+
arrowVisibility: import('./types').QOverflowArrowVisibility;
|
|
40
|
+
scrollMode: import('./types').QOverflowScrollMode;
|
|
41
|
+
scrollStep: number;
|
|
42
|
+
remapWheel: boolean;
|
|
43
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
44
|
+
$slots: {
|
|
45
|
+
prev?(_: {
|
|
46
|
+
disabled: boolean;
|
|
47
|
+
onClick: () => void;
|
|
48
|
+
}): any;
|
|
49
|
+
default?(_: {}): any;
|
|
50
|
+
next?(_: {
|
|
51
|
+
disabled: boolean;
|
|
52
|
+
onClick: () => void;
|
|
53
|
+
}): any;
|
|
54
|
+
};
|
|
55
|
+
});
|
|
56
|
+
export { QOverflow };
|
|
57
|
+
export * from './types';
|
|
58
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QOverflow/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAA;AAG7C,OAAO,EAAE,SAAS,EAAE,CAAA;AAGpB,cAAc,SAAS,CAAA"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { QBaseComponentProps } from '../../types/component';
|
|
2
|
+
import { DEFAULT_ICONS, QOverflowTexts } from './constants';
|
|
3
|
+
export type { QOverflowTexts } from './constants';
|
|
4
|
+
/**
|
|
5
|
+
* Scroll axis for {@link QOverflow}.
|
|
6
|
+
*/
|
|
7
|
+
export type QOverflowDirection = 'horizontal' | 'vertical';
|
|
8
|
+
/**
|
|
9
|
+
* Where navigation arrows sit relative to the content track.
|
|
10
|
+
*/
|
|
11
|
+
export type QOverflowArrowPlacement = 'outside' | 'inside';
|
|
12
|
+
/**
|
|
13
|
+
* When navigation arrows are shown (only while content overflows).
|
|
14
|
+
*/
|
|
15
|
+
export type QOverflowArrowVisibility = 'always' | 'hover';
|
|
16
|
+
/**
|
|
17
|
+
* How far each arrow click (or equivalent) advances the scroll position.
|
|
18
|
+
*
|
|
19
|
+
* - `page` — by the visible viewport size
|
|
20
|
+
* - `step` — by a fixed pixel amount (`scrollStep`)
|
|
21
|
+
* - `item` — centers the next or previous **direct** `HTMLElement` child of the
|
|
22
|
+
* content track (`.q-overflow__content`). The track is a plain block — lay out
|
|
23
|
+
* strip children yourself (e.g. a flex row wrapper, or inline-level items).
|
|
24
|
+
* Nested wrappers, transforms, or non-element nodes are not item targets.
|
|
25
|
+
*/
|
|
26
|
+
export type QOverflowScrollMode = 'page' | 'step' | 'item';
|
|
27
|
+
/**
|
|
28
|
+
* Slot props passed to the `prev` and `next` slots on {@link QOverflow}.
|
|
29
|
+
*/
|
|
30
|
+
export type QOverflowNavSlotProps = {
|
|
31
|
+
/**
|
|
32
|
+
* Whether the navigation control is disabled.
|
|
33
|
+
*
|
|
34
|
+
* @category State
|
|
35
|
+
*/
|
|
36
|
+
disabled: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Handler that scrolls in the slot's direction.
|
|
39
|
+
*
|
|
40
|
+
* @category Behavior
|
|
41
|
+
*/
|
|
42
|
+
onClick: () => void;
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
* Props for the QOverflow component.
|
|
46
|
+
*/
|
|
47
|
+
export type QOverflowProps = QBaseComponentProps & {
|
|
48
|
+
/**
|
|
49
|
+
* Scroll axis of the overflow viewport.
|
|
50
|
+
*
|
|
51
|
+
* Uses physical horizontal/vertical scrolling (`scrollLeft` / `scrollTop`). RTL and
|
|
52
|
+
* logical start/end navigation are out of scope for v1.
|
|
53
|
+
*
|
|
54
|
+
* `vertical` sets `height: 100%` on the root — the host (or an ancestor) must have a
|
|
55
|
+
* definite height, or the track grows with content and overflow never appears.
|
|
56
|
+
*
|
|
57
|
+
* @category Presentation
|
|
58
|
+
*/
|
|
59
|
+
direction?: QOverflowDirection;
|
|
60
|
+
/**
|
|
61
|
+
* Whether arrows sit beside the track (`outside`) or overlay its edges (`inside`).
|
|
62
|
+
*
|
|
63
|
+
* @category Presentation
|
|
64
|
+
*/
|
|
65
|
+
arrowPlacement?: QOverflowArrowPlacement;
|
|
66
|
+
/**
|
|
67
|
+
* Whether arrows stay visible while overflowing, or only appear on hover / focus-within.
|
|
68
|
+
*
|
|
69
|
+
* `hover` is gated with `@media (hover: hover) and (pointer: fine)` so coarse-pointer
|
|
70
|
+
* and touch devices keep arrows visible (panning alone would otherwise leave them hidden).
|
|
71
|
+
*
|
|
72
|
+
* @category Presentation
|
|
73
|
+
*/
|
|
74
|
+
arrowVisibility?: QOverflowArrowVisibility;
|
|
75
|
+
/**
|
|
76
|
+
* How far each navigation action advances the scroll position.
|
|
77
|
+
*
|
|
78
|
+
* For `item`, targets are direct `HTMLElement` children of the content track only
|
|
79
|
+
* (see {@link QOverflowScrollMode}).
|
|
80
|
+
*
|
|
81
|
+
* @category Behavior
|
|
82
|
+
*/
|
|
83
|
+
scrollMode?: QOverflowScrollMode;
|
|
84
|
+
/**
|
|
85
|
+
* Pixel distance used when `scrollMode` is `step`.
|
|
86
|
+
*
|
|
87
|
+
* @category Behavior
|
|
88
|
+
*/
|
|
89
|
+
scrollStep?: number;
|
|
90
|
+
/**
|
|
91
|
+
* When `true` and `direction` is `horizontal`, dominant vertical wheel / trackpad
|
|
92
|
+
* deltas are mapped onto `scrollLeft` (and may `preventDefault` page scroll while
|
|
93
|
+
* the strip can still move). Default `false` so long-page hosts (e.g. future tabs)
|
|
94
|
+
* are not surprised; enable for standalone strips that want trackpad UX.
|
|
95
|
+
*
|
|
96
|
+
* @category Behavior
|
|
97
|
+
*/
|
|
98
|
+
remapWheel?: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* Custom icon configurations for navigation controls.
|
|
101
|
+
*
|
|
102
|
+
* Icons are chosen from physical `direction` (left/right or up/down), not document
|
|
103
|
+
* `dir` / writing mode. Logical start/end and RTL-aware chevrons are a follow-up.
|
|
104
|
+
*
|
|
105
|
+
* @category Configuration
|
|
106
|
+
*/
|
|
107
|
+
icons?: typeof DEFAULT_ICONS;
|
|
108
|
+
/**
|
|
109
|
+
* Custom accessible strings for navigation controls.
|
|
110
|
+
*
|
|
111
|
+
* Optional `regionLabel` opts into a named landmark (`role="region"` + `aria-label`).
|
|
112
|
+
* Omit it (the default) for a plain root — avoids N generic landmarks and an invalid
|
|
113
|
+
* unnamed `region`.
|
|
114
|
+
*
|
|
115
|
+
* @category Configuration
|
|
116
|
+
*/
|
|
117
|
+
texts?: QOverflowTexts;
|
|
118
|
+
};
|
|
119
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QOverflow/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEhE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAEjD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAA;AAE1D;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE1D;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEzD;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1D;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IACnC;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IAClD;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAE9B;;;;OAIG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAA;IAExC;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,wBAAwB,CAAA;IAE1C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAA;IAEhC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,cAAc,CAAA;CACtB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,WAAW,CAAA;AACzB,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA"}
|