@onereach/ui-components-common 20.2.0-beta.5166.0 → 20.2.0-beta.5169.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/getPageElevations-DGY7uGUG.js +19 -0
- package/dist/hooks.js +1 -1
- package/dist/index.js +38 -37
- package/dist/useValidationAttributes-B5payAIP.js +214 -0
- package/dist/utils/getPageElevations.d.ts +1 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/isVisible.d.ts +1 -1
- package/dist/utils.js +21 -20
- package/package.json +2 -2
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useElevation.ts +1 -10
- package/src/utils/getPageElevations.ts +20 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/isVisible.ts +3 -3
- package/dist/isVisible-BuGrjvTY.js +0 -4
- package/dist/useValidationAttributes-DxhcSj_h.js +0 -217
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
function f(e) {
|
|
2
|
+
return e.offsetWidth > 0 && e.offsetHeight > 0;
|
|
3
|
+
}
|
|
4
|
+
function l(e) {
|
|
5
|
+
const i = document.body.querySelectorAll("*"), n = [];
|
|
6
|
+
for (const t of i)
|
|
7
|
+
if (!t.isEqualNode(e) && f(t)) {
|
|
8
|
+
const s = t.style;
|
|
9
|
+
if (s && s.zIndex !== "") {
|
|
10
|
+
const o = Number(s.zIndex);
|
|
11
|
+
isNaN(o) || n.push(o);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
return n;
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
l as g,
|
|
18
|
+
f as i
|
|
19
|
+
};
|
package/dist/hooks.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a, b as u, c as t, d as o, e as r, f as i, g as l, h as m, i as n, j as b, k as d, l as v, m as T, u as f, n as g } from "./useValidationAttributes-
|
|
1
|
+
import { a, b as u, c as t, d as o, e as r, f as i, g as l, h as m, i as n, j as b, k as d, l as v, m as T, u as f, n as g } from "./useValidationAttributes-B5payAIP.js";
|
|
2
2
|
export {
|
|
3
3
|
a as useControlAttributes,
|
|
4
4
|
u as useDateFormat,
|
package/dist/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { D as e, a as E } from "./dropdown-open-k6cFnrqA.js";
|
|
2
|
-
import { g as
|
|
3
|
-
import { D as r, L as A, T as O, a as C, b as i, c as
|
|
2
|
+
import { g as _, a as R, s as T } from "./searchItemsByLabel-BhinsABA.js";
|
|
3
|
+
import { D as r, L as A, T as O, a as C, b as i, c as l, d as D, e as S, f as N, g as m, h as X, i as n, j as P, k as u, l as L, m as M, u as g, n as I } from "./useValidationAttributes-B5payAIP.js";
|
|
4
4
|
import { DateFormat as f, TimeFormat as p } from "./types.js";
|
|
5
|
-
import { C as F, a as c, b as x, c as b, d as B, e as
|
|
6
|
-
import { M as ss, f as es, c as Es, e as
|
|
7
|
-
import { i as
|
|
8
|
-
import {
|
|
5
|
+
import { C as F, a as c, b as x, c as b, d as B, e as v, f as y, g as G, h, i as U, j as V, k, l as w, m as j, H as W, p as q, o as K, t as Y, s as z, r as Q, q as Z, n as J, P as $, Q as aa, R as sa, u as ea, S as Ea, T as ta, v as _a, W as Ra, X as Ta, w as oa, x as ra, y as Aa, V as Oa, z as Ca, A as ia, _ as la, B as Da, D as Sa, E as Na, Y as ma, F as Xa, Z as na, G as Pa, I as ua, J as La, K as Ma, U as ga, L as Ia, M as da, N as fa, O as pa, $ as Ha, am as Fa, a5 as ca, a4 as xa, a2 as ba, a9 as Ba, a6 as va, a0 as ya, a3 as Ga, aa as ha, ab as Ua, ac as Va, ad as ka, ae as wa, af as ja, ag as Wa, ah as qa, ai as Ka, aj as Ya, ak as za, a7 as Qa, a8 as Za, a1 as Ja, al as $a } from "./extractCssVarName-IHa2pGlF.js";
|
|
6
|
+
import { M as ss, f as es, c as Es, e as ts, l as _s, q as Rs, g as Ts, t as os, w as rs, p as As, m as Os, i as Cs, u as is, v as ls, b as Ds, k as Ss, h as Ns, a as ms, o as Xs, r as ns, d as Ps, s as us, j as Ls, n as Ms } from "./dom-CwV-xS38.js";
|
|
7
|
+
import { i as Is } from "./isUndefined-B5qXrATz.js";
|
|
8
|
+
import { g as fs, i as ps } from "./getPageElevations-DGY7uGUG.js";
|
|
9
9
|
export {
|
|
10
10
|
F as CODE_BACKSPACE,
|
|
11
11
|
c as CODE_BREAK,
|
|
12
12
|
x as CODE_DELETE,
|
|
13
13
|
b as CODE_DOWN,
|
|
14
14
|
B as CODE_END,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
v as CODE_ENTER,
|
|
16
|
+
y as CODE_ESC,
|
|
17
|
+
G as CODE_HOME,
|
|
18
|
+
h as CODE_LEFT,
|
|
19
19
|
U as CODE_PAGEDOWN,
|
|
20
20
|
V as CODE_PAGEUP,
|
|
21
21
|
k as CODE_RIGHT,
|
|
@@ -40,8 +40,8 @@ export {
|
|
|
40
40
|
sa as RX_ARRAY_NOTATION,
|
|
41
41
|
ea as RX_BV_PREFIX,
|
|
42
42
|
Ea as RX_DATE,
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
ta as RX_DATE_SPLIT,
|
|
44
|
+
_a as RX_DIGITS,
|
|
45
45
|
Ra as RX_ENCODED_COMMA,
|
|
46
46
|
Ta as RX_ENCODE_REVERSE,
|
|
47
47
|
oa as RX_EXTENSION,
|
|
@@ -50,19 +50,19 @@ export {
|
|
|
50
50
|
Oa as RX_HREF,
|
|
51
51
|
Ca as RX_HTML_TAGS,
|
|
52
52
|
ia as RX_HYPHENATE,
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
la as RX_LONG_COLOR,
|
|
54
|
+
Da as RX_LOWER_UPPER,
|
|
55
55
|
Sa as RX_NUMBER,
|
|
56
56
|
Na as RX_PLUS,
|
|
57
57
|
ma as RX_QUERY_START,
|
|
58
58
|
Xa as RX_REGEXP_REPLACE,
|
|
59
59
|
na as RX_SHORT_COLOR,
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
Pa as RX_SPACES,
|
|
61
|
+
ua as RX_SPACE_SPLIT,
|
|
62
62
|
La as RX_STAR,
|
|
63
63
|
Ma as RX_START_SPACE_WORD,
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
ga as RX_TIME,
|
|
65
|
+
Ia as RX_TRIM_LEFT,
|
|
66
66
|
da as RX_TRIM_RIGHT,
|
|
67
67
|
fa as RX_UNDERSCORE,
|
|
68
68
|
pa as RX_UN_KEBAB,
|
|
@@ -70,27 +70,28 @@ export {
|
|
|
70
70
|
p as TimeFormat,
|
|
71
71
|
es as addClass,
|
|
72
72
|
Es as cancelAF,
|
|
73
|
-
|
|
73
|
+
ts as contains,
|
|
74
74
|
Ha as exclude,
|
|
75
75
|
Fa as extractCssVarName,
|
|
76
76
|
ca as flattenDeep,
|
|
77
77
|
xa as generateColorFromString,
|
|
78
78
|
ba as generateHslFromString,
|
|
79
79
|
Ba as getAbbreviation,
|
|
80
|
-
|
|
80
|
+
_s as getAttr,
|
|
81
81
|
Rs as getBCR,
|
|
82
82
|
Ts as getById,
|
|
83
83
|
os as getCS,
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
va as getHashOfString,
|
|
85
|
+
_ as getItemByValue,
|
|
86
86
|
R as getItemsByValue,
|
|
87
87
|
rs as getMaxZIndex,
|
|
88
|
+
fs as getPageElevations,
|
|
88
89
|
As as getStyle,
|
|
89
90
|
Os as hasAttr,
|
|
90
91
|
Cs as hasClass,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
ya as hexToRgb,
|
|
93
|
+
Ga as hslToColorString,
|
|
94
|
+
ha as include,
|
|
94
95
|
Ua as isAncestor,
|
|
95
96
|
Va as isArray,
|
|
96
97
|
ka as isDescendant,
|
|
@@ -101,13 +102,13 @@ export {
|
|
|
101
102
|
Ka as isNumber,
|
|
102
103
|
Ya as isObject,
|
|
103
104
|
za as isString,
|
|
104
|
-
|
|
105
|
-
|
|
105
|
+
Is as isUndefined,
|
|
106
|
+
ps as isVisible,
|
|
106
107
|
Qa as normalize,
|
|
107
108
|
is as offset,
|
|
108
|
-
|
|
109
|
+
ls as position,
|
|
109
110
|
Za as pxToRem,
|
|
110
|
-
|
|
111
|
+
Ds as reflow,
|
|
111
112
|
Ss as removeAttr,
|
|
112
113
|
Ns as removeClass,
|
|
113
114
|
ms as removeNode,
|
|
@@ -115,24 +116,24 @@ export {
|
|
|
115
116
|
ns as requestAF,
|
|
116
117
|
Ja as rgbToHex,
|
|
117
118
|
T as searchItemsByLabel,
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
Ps as select,
|
|
120
|
+
us as selectAll,
|
|
120
121
|
Ls as setAttr,
|
|
121
122
|
Ms as setStyle,
|
|
122
123
|
$a as toArray,
|
|
123
124
|
C as useControlAttributes,
|
|
124
125
|
i as useDateFormat,
|
|
125
|
-
|
|
126
|
-
|
|
126
|
+
l as useDateMask,
|
|
127
|
+
D as useElevation,
|
|
127
128
|
S as useIdAttribute,
|
|
128
129
|
N as useLocale,
|
|
129
130
|
m as useOverflow,
|
|
130
131
|
X as usePopoverState,
|
|
131
132
|
n as useProxyModelValue,
|
|
132
|
-
|
|
133
|
-
|
|
133
|
+
P as useResponsive,
|
|
134
|
+
u as useTheme,
|
|
134
135
|
L as useTimeFormat,
|
|
135
136
|
M as useTimeMask,
|
|
136
|
-
|
|
137
|
-
|
|
137
|
+
g as useToggle,
|
|
138
|
+
I as useValidationAttributes
|
|
138
139
|
};
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import { useAttrs as h, computed as u, inject as g, isRef as p, ref as c, watch as v, getCurrentInstance as M, onMounted as R } from "vue";
|
|
2
|
+
import { DateFormat as x, TimeFormat as b } from "./types.js";
|
|
3
|
+
import { r as C } from "./dom-CwV-xS38.js";
|
|
4
|
+
import { g as E } from "./getPageElevations-DGY7uGUG.js";
|
|
5
|
+
import { useMutationObserver as $, useResizeObserver as F, refDebounced as S, useMediaQuery as P } from "@vueuse/core";
|
|
6
|
+
import O from "@onereach/styles/screens.json";
|
|
7
|
+
import { isVue3 as Y } from "@/constants";
|
|
8
|
+
import L from "@onereach/styles/tailwind.config.json";
|
|
9
|
+
const k = () => {
|
|
10
|
+
const e = h();
|
|
11
|
+
return {
|
|
12
|
+
readonly: u(() => e.readonly),
|
|
13
|
+
disabled: u(() => e.disabled),
|
|
14
|
+
"force-state": u(() => e["force-state"])
|
|
15
|
+
};
|
|
16
|
+
}, V = Symbol(), U = Symbol(), q = Symbol(), G = (e) => u(() => e.value ?? g(V, x.Short)), J = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
17
|
+
dateStyle: e.value,
|
|
18
|
+
timeZone: "UTC"
|
|
19
|
+
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
|
|
20
|
+
switch (n.type) {
|
|
21
|
+
case "year":
|
|
22
|
+
return r + n.value.replace(/^\d{2}$/, "YY").replace(/^\d{4}$/, "YYYY");
|
|
23
|
+
case "month":
|
|
24
|
+
switch (e.value) {
|
|
25
|
+
case "short":
|
|
26
|
+
return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
27
|
+
case "medium":
|
|
28
|
+
return r + "MMM";
|
|
29
|
+
case "long":
|
|
30
|
+
return r + "MMMM";
|
|
31
|
+
default:
|
|
32
|
+
throw new Error("[useDateMask]: `format` has an invalid value.");
|
|
33
|
+
}
|
|
34
|
+
case "day":
|
|
35
|
+
return r + n.value.replace(/^\d{1}$/, "D").replace(/^\d{2}$/, "DD");
|
|
36
|
+
default:
|
|
37
|
+
return r + n.value;
|
|
38
|
+
}
|
|
39
|
+
}, "") : e.value(void 0, t.value)), K = (e, t) => {
|
|
40
|
+
const o = p(e) ? e : c(e), r = p(t) ? t : c();
|
|
41
|
+
function n(a) {
|
|
42
|
+
a.style.zIndex = String(Math.max(0, ...E(a)) + 1);
|
|
43
|
+
}
|
|
44
|
+
v([o, r], ([a]) => {
|
|
45
|
+
a && n(a);
|
|
46
|
+
}, { immediate: !0 });
|
|
47
|
+
}, N = () => {
|
|
48
|
+
const e = h(), t = M();
|
|
49
|
+
return u(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
|
|
50
|
+
}, X = (e) => u(() => e.value ?? g(U, navigator.language)), ee = (e, t = {}) => {
|
|
51
|
+
const { hide: o = !0, threshold: r = 0 } = t, n = p(e) ? e : c(e), a = c([]), l = c([]);
|
|
52
|
+
function s() {
|
|
53
|
+
const i = n.value;
|
|
54
|
+
if (i) {
|
|
55
|
+
const d = [...i.children].reduce(({ innerItems: m, outerItems: y }, T) => {
|
|
56
|
+
const f = T, { x: D, width: I } = f.getBoundingClientRect(), { x: w, width: A } = i.getBoundingClientRect();
|
|
57
|
+
return D + I > w + A + r ? (o && f.style.setProperty("visibility", "hidden"), {
|
|
58
|
+
innerItems: m,
|
|
59
|
+
outerItems: [...y, f]
|
|
60
|
+
}) : (o && f.style.removeProperty("visibility"), {
|
|
61
|
+
innerItems: [...m, f],
|
|
62
|
+
outerItems: y
|
|
63
|
+
});
|
|
64
|
+
}, {
|
|
65
|
+
innerItems: [],
|
|
66
|
+
outerItems: []
|
|
67
|
+
});
|
|
68
|
+
a.value = d.innerItems, l.value = d.outerItems;
|
|
69
|
+
} else
|
|
70
|
+
a.value = [], l.value = [];
|
|
71
|
+
}
|
|
72
|
+
return v(n, s, {
|
|
73
|
+
immediate: !0
|
|
74
|
+
}), $(n, s, {
|
|
75
|
+
childList: !0
|
|
76
|
+
}), F(n, () => C(s)), {
|
|
77
|
+
innerItems: a,
|
|
78
|
+
outerItems: l
|
|
79
|
+
};
|
|
80
|
+
}, te = (e, t, o = {}) => {
|
|
81
|
+
const r = c(e.value ? "open" : "closed");
|
|
82
|
+
v(e, (i) => {
|
|
83
|
+
r.value = i ? "open" : "closed";
|
|
84
|
+
});
|
|
85
|
+
const n = S(r, o.debounce ?? 0);
|
|
86
|
+
v(n, (i) => {
|
|
87
|
+
switch (t("update:state", i), i) {
|
|
88
|
+
case "open":
|
|
89
|
+
t("open");
|
|
90
|
+
break;
|
|
91
|
+
case "closed":
|
|
92
|
+
t("close");
|
|
93
|
+
break;
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
function a() {
|
|
97
|
+
r.value = "open";
|
|
98
|
+
}
|
|
99
|
+
function l() {
|
|
100
|
+
r.value = "closed";
|
|
101
|
+
}
|
|
102
|
+
function s() {
|
|
103
|
+
r.value = r.value === "open" ? "closed" : "open";
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
state: n,
|
|
107
|
+
open: a,
|
|
108
|
+
close: l,
|
|
109
|
+
toggle: s
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
function re(e, t, o = {}) {
|
|
113
|
+
const { defaultValue: r } = o;
|
|
114
|
+
return r ? u({
|
|
115
|
+
get: () => e.value ?? r.value,
|
|
116
|
+
set: (n) => {
|
|
117
|
+
t("update:modelValue", n);
|
|
118
|
+
}
|
|
119
|
+
}) : u({
|
|
120
|
+
get: () => e.value,
|
|
121
|
+
set: (n) => {
|
|
122
|
+
t("update:modelValue", n);
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
function ne(e) {
|
|
127
|
+
const t = M(), o = c();
|
|
128
|
+
e ? v(e, (s) => {
|
|
129
|
+
o.value = s;
|
|
130
|
+
}) : R(() => {
|
|
131
|
+
if (t) {
|
|
132
|
+
const s = t.vnode[Y ? "el" : "elm"];
|
|
133
|
+
s instanceof Element && (o.value = s);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
const r = u(() => l(o.value) || a.value), n = u(() => !r.value), a = P(`(min-width: ${O.md})`);
|
|
137
|
+
function l(s) {
|
|
138
|
+
var d;
|
|
139
|
+
if (!s)
|
|
140
|
+
return !1;
|
|
141
|
+
const i = (d = s.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
|
|
142
|
+
return i != null && i.some((m) => ["md", "lg", "xl"].includes(m)) ? !0 : l(s.parentElement ?? void 0);
|
|
143
|
+
}
|
|
144
|
+
return {
|
|
145
|
+
isDesktop: r,
|
|
146
|
+
isMobile: n
|
|
147
|
+
};
|
|
148
|
+
}
|
|
149
|
+
const ue = () => L.theme, oe = (e) => u(() => e.value ?? g(q, b.Auto)), se = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
150
|
+
timeStyle: "short",
|
|
151
|
+
hourCycle: e.value !== b.Auto ? e.value : void 0,
|
|
152
|
+
timeZone: "UTC"
|
|
153
|
+
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
|
|
154
|
+
switch (n.type) {
|
|
155
|
+
case "hour":
|
|
156
|
+
return r + n.value.replace(/^\d{1}$/, "H").replace(/^\d{2}$/, "HH");
|
|
157
|
+
case "minute":
|
|
158
|
+
return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
159
|
+
case "dayPeriod":
|
|
160
|
+
return r + "A";
|
|
161
|
+
default:
|
|
162
|
+
return r + n.value;
|
|
163
|
+
}
|
|
164
|
+
}, "") : e.value(void 0, t.value));
|
|
165
|
+
function ae(e = !1) {
|
|
166
|
+
const t = c(e);
|
|
167
|
+
function o() {
|
|
168
|
+
t.value = !0;
|
|
169
|
+
}
|
|
170
|
+
function r() {
|
|
171
|
+
t.value = !1;
|
|
172
|
+
}
|
|
173
|
+
function n() {
|
|
174
|
+
t.value = !t.value;
|
|
175
|
+
}
|
|
176
|
+
return {
|
|
177
|
+
isActiveToggle: t,
|
|
178
|
+
show: o,
|
|
179
|
+
hide: r,
|
|
180
|
+
toggle: n
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
const ie = () => {
|
|
184
|
+
const e = h();
|
|
185
|
+
return {
|
|
186
|
+
required: u(() => e.required),
|
|
187
|
+
minlength: u(() => e.minlength),
|
|
188
|
+
maxlength: u(() => e.maxlength),
|
|
189
|
+
pattern: u(() => e.pattern),
|
|
190
|
+
min: u(() => e.min),
|
|
191
|
+
max: u(() => e.max),
|
|
192
|
+
step: u(() => e.step)
|
|
193
|
+
};
|
|
194
|
+
};
|
|
195
|
+
export {
|
|
196
|
+
V as D,
|
|
197
|
+
U as L,
|
|
198
|
+
q as T,
|
|
199
|
+
k as a,
|
|
200
|
+
G as b,
|
|
201
|
+
J as c,
|
|
202
|
+
K as d,
|
|
203
|
+
N as e,
|
|
204
|
+
X as f,
|
|
205
|
+
ee as g,
|
|
206
|
+
te as h,
|
|
207
|
+
re as i,
|
|
208
|
+
ne as j,
|
|
209
|
+
ue as k,
|
|
210
|
+
oe as l,
|
|
211
|
+
se as m,
|
|
212
|
+
ie as n,
|
|
213
|
+
ae as u
|
|
214
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getPageElevations(currentElement: HTMLElement): number[];
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare
|
|
1
|
+
export declare function isVisible(element: HTMLElement): boolean;
|
package/dist/utils.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { C as E, a as _, b as R, c as e, d as T, e as t, f as A, g as C, h as O, i as r, j as S, k as o, l as
|
|
2
|
-
import { M as ma, f as ca, c as da, e as fa, l as Ba, q as xa, g as Fa, t as Ga, w as ba, p as pa, m as Ua, i as ua, u as ha, v as
|
|
1
|
+
import { C as E, a as _, b as R, c as e, d as T, e as t, f as A, g as C, h as O, i as r, j as S, k as o, l as i, m as N, H as D, p as X, o as P, t as l, s as n, r as L, q as M, n as g, P as I, Q as H, R as m, u as c, S as d, T as f, v as B, W as x, X as F, w as G, x as b, y as p, V as U, z as u, A as h, _ as v, B as y, D as V, E as W, Y as j, F as q, Z as K, G as Y, I as k, J as w, K as z, U as Q, L as Z, M as J, N as $, O as aa, $ as sa, am as Ea, a5 as _a, a4 as Ra, a2 as ea, a9 as Ta, a6 as ta, a0 as Aa, a3 as Ca, aa as Oa, ab as ra, ac as Sa, ad as oa, ae as ia, af as Na, ag as Da, ah as Xa, ai as Pa, aj as la, ak as na, a7 as La, a8 as Ma, a1 as ga, al as Ia } from "./extractCssVarName-IHa2pGlF.js";
|
|
2
|
+
import { M as ma, f as ca, c as da, e as fa, l as Ba, q as xa, g as Fa, t as Ga, w as ba, p as pa, m as Ua, i as ua, u as ha, v as va, b as ya, k as Va, h as Wa, a as ja, o as qa, r as Ka, d as Ya, s as ka, j as wa, n as za } from "./dom-CwV-xS38.js";
|
|
3
3
|
import { i as Za } from "./isUndefined-B5qXrATz.js";
|
|
4
|
-
import {
|
|
4
|
+
import { g as $a, i as as } from "./getPageElevations-DGY7uGUG.js";
|
|
5
5
|
export {
|
|
6
6
|
E as CODE_BACKSPACE,
|
|
7
7
|
_ as CODE_BREAK,
|
|
@@ -15,18 +15,18 @@ export {
|
|
|
15
15
|
r as CODE_PAGEDOWN,
|
|
16
16
|
S as CODE_PAGEUP,
|
|
17
17
|
o as CODE_RIGHT,
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
i as CODE_SPACE,
|
|
19
|
+
N as CODE_UP,
|
|
20
20
|
D as HSL_LIMITS,
|
|
21
21
|
ma as MutationObs,
|
|
22
22
|
X as PLACEMENT_BOTTOM_END,
|
|
23
23
|
P as PLACEMENT_BOTTOM_START,
|
|
24
24
|
l as PLACEMENT_LEFT_END,
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
n as PLACEMENT_LEFT_START,
|
|
26
|
+
L as PLACEMENT_RIGHT_END,
|
|
27
27
|
M as PLACEMENT_RIGHT_START,
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
g as PLACEMENT_TOP_END,
|
|
29
|
+
I as PLACEMENT_TOP_START,
|
|
30
30
|
H as RX_ABBREVIATION_FROM_STRING,
|
|
31
31
|
m as RX_ARRAY_NOTATION,
|
|
32
32
|
c as RX_BV_PREFIX,
|
|
@@ -41,8 +41,8 @@ export {
|
|
|
41
41
|
U as RX_HREF,
|
|
42
42
|
u as RX_HTML_TAGS,
|
|
43
43
|
h as RX_HYPHENATE,
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
v as RX_LONG_COLOR,
|
|
45
|
+
y as RX_LOWER_UPPER,
|
|
46
46
|
V as RX_NUMBER,
|
|
47
47
|
W as RX_PLUS,
|
|
48
48
|
j as RX_QUERY_START,
|
|
@@ -72,6 +72,7 @@ export {
|
|
|
72
72
|
Ga as getCS,
|
|
73
73
|
ta as getHashOfString,
|
|
74
74
|
ba as getMaxZIndex,
|
|
75
|
+
$a as getPageElevations,
|
|
75
76
|
pa as getStyle,
|
|
76
77
|
Ua as hasAttr,
|
|
77
78
|
ua as hasClass,
|
|
@@ -81,29 +82,29 @@ export {
|
|
|
81
82
|
ra as isAncestor,
|
|
82
83
|
Sa as isArray,
|
|
83
84
|
oa as isDescendant,
|
|
84
|
-
|
|
85
|
-
|
|
85
|
+
ia as isEmpty,
|
|
86
|
+
Na as isEqual,
|
|
86
87
|
Da as isNil,
|
|
87
88
|
Xa as isNull,
|
|
88
89
|
Pa as isNumber,
|
|
89
90
|
la as isObject,
|
|
90
|
-
|
|
91
|
+
na as isString,
|
|
91
92
|
Za as isUndefined,
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
as as isVisible,
|
|
94
|
+
La as normalize,
|
|
94
95
|
ha as offset,
|
|
95
|
-
|
|
96
|
+
va as position,
|
|
96
97
|
Ma as pxToRem,
|
|
97
|
-
|
|
98
|
+
ya as reflow,
|
|
98
99
|
Va as removeAttr,
|
|
99
100
|
Wa as removeClass,
|
|
100
101
|
ja as removeNode,
|
|
101
102
|
qa as removeStyle,
|
|
102
103
|
Ka as requestAF,
|
|
103
|
-
|
|
104
|
+
ga as rgbToHex,
|
|
104
105
|
Ya as select,
|
|
105
106
|
ka as selectAll,
|
|
106
107
|
wa as setAttr,
|
|
107
108
|
za as setStyle,
|
|
108
|
-
|
|
109
|
+
Ia as toArray
|
|
109
110
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/ui-components-common",
|
|
3
|
-
"version": "20.2.0-beta.
|
|
3
|
+
"version": "20.2.0-beta.5169.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"prepare": "pnpm build"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@onereach/styles": "^20.2
|
|
62
|
+
"@onereach/styles": "^20.1.2",
|
|
63
63
|
"@vueuse/core": "9.13.0",
|
|
64
64
|
"lodash": "^4.17.21"
|
|
65
65
|
},
|
package/src/hooks/index.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MaybeElementRef } from '@vueuse/core';
|
|
2
2
|
import { isRef, Ref, ref, watch } from 'vue';
|
|
3
|
-
import {
|
|
3
|
+
import { getPageElevations } from '../utils';
|
|
4
4
|
|
|
5
5
|
export const useElevation = (
|
|
6
6
|
element: MaybeElementRef<HTMLElement | undefined>,
|
|
@@ -9,15 +9,6 @@ export const useElevation = (
|
|
|
9
9
|
const elementRef = isRef(element) ? element : ref(element);
|
|
10
10
|
const triggerRef = isRef(trigger) ? trigger : ref();
|
|
11
11
|
|
|
12
|
-
// Functions
|
|
13
|
-
function getPageElevations(currentElement: HTMLElement): number[] {
|
|
14
|
-
return ([...document.body.querySelectorAll('*')] as HTMLElement[])
|
|
15
|
-
.filter(isVisible)
|
|
16
|
-
.filter(element => !element.isEqualNode(currentElement))
|
|
17
|
-
.map((element) => getComputedStyle(element))
|
|
18
|
-
.map((style) => Number(style.zIndex))
|
|
19
|
-
.filter((zIndex) => !isNaN(zIndex));
|
|
20
|
-
}
|
|
21
12
|
|
|
22
13
|
function setElementElevation(element: HTMLElement): void {
|
|
23
14
|
element.style.zIndex = String(Math.max(0, ...getPageElevations(element)) + 1);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { isVisible } from './isVisible';
|
|
2
|
+
|
|
3
|
+
export function getPageElevations(currentElement: HTMLElement): number[] {
|
|
4
|
+
const elements = document.body.querySelectorAll('*');
|
|
5
|
+
const elevations: number[] = [];
|
|
6
|
+
|
|
7
|
+
for (const element of elements) {
|
|
8
|
+
if (!element.isEqualNode(currentElement) && isVisible(element as HTMLElement)) {
|
|
9
|
+
const style = (element as HTMLElement).style;
|
|
10
|
+
if (style && style.zIndex !== '') {
|
|
11
|
+
const zIndex = Number(style.zIndex);
|
|
12
|
+
if (!isNaN(zIndex)) {
|
|
13
|
+
elevations.push(zIndex);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return elevations;
|
|
20
|
+
}
|
package/src/utils/index.ts
CHANGED
package/src/utils/isVisible.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export
|
|
2
|
-
return element.
|
|
3
|
-
}
|
|
1
|
+
export function isVisible(element: HTMLElement): boolean {
|
|
2
|
+
return element.offsetWidth > 0 && element.offsetHeight > 0;
|
|
3
|
+
}
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
import { useAttrs as h, computed as o, inject as g, isRef as p, ref as c, watch as m, getCurrentInstance as b, onMounted as R } from "vue";
|
|
2
|
-
import { DateFormat as x, TimeFormat as M } from "./types.js";
|
|
3
|
-
import { r as C } from "./dom-CwV-xS38.js";
|
|
4
|
-
import { i as E } from "./isVisible-BuGrjvTY.js";
|
|
5
|
-
import { useMutationObserver as S, useResizeObserver as $, refDebounced as F, useMediaQuery as P } from "@vueuse/core";
|
|
6
|
-
import O from "@onereach/styles/screens.json";
|
|
7
|
-
import { isVue3 as V } from "@/constants";
|
|
8
|
-
import Y from "@onereach/styles/tailwind.config.json";
|
|
9
|
-
const _ = () => {
|
|
10
|
-
const e = h();
|
|
11
|
-
return {
|
|
12
|
-
readonly: o(() => e.readonly),
|
|
13
|
-
disabled: o(() => e.disabled),
|
|
14
|
-
"force-state": o(() => e["force-state"])
|
|
15
|
-
};
|
|
16
|
-
}, q = Symbol(), L = Symbol(), N = Symbol(), k = (e) => o(() => e.value ?? g(q, x.Short)), G = (e, t) => o(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
17
|
-
dateStyle: e.value,
|
|
18
|
-
timeZone: "UTC"
|
|
19
|
-
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
|
|
20
|
-
switch (n.type) {
|
|
21
|
-
case "year":
|
|
22
|
-
return r + n.value.replace(/^\d{2}$/, "YY").replace(/^\d{4}$/, "YYYY");
|
|
23
|
-
case "month":
|
|
24
|
-
switch (e.value) {
|
|
25
|
-
case "short":
|
|
26
|
-
return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
27
|
-
case "medium":
|
|
28
|
-
return r + "MMM";
|
|
29
|
-
case "long":
|
|
30
|
-
return r + "MMMM";
|
|
31
|
-
default:
|
|
32
|
-
throw new Error("[useDateMask]: `format` has an invalid value.");
|
|
33
|
-
}
|
|
34
|
-
case "day":
|
|
35
|
-
return r + n.value.replace(/^\d{1}$/, "D").replace(/^\d{2}$/, "DD");
|
|
36
|
-
default:
|
|
37
|
-
return r + n.value;
|
|
38
|
-
}
|
|
39
|
-
}, "") : e.value(void 0, t.value)), J = (e, t) => {
|
|
40
|
-
const s = p(e) ? e : c(e), r = p(t) ? t : c();
|
|
41
|
-
function n(a) {
|
|
42
|
-
return [...document.body.querySelectorAll("*")].filter(E).filter((u) => !u.isEqualNode(a)).map((u) => getComputedStyle(u)).map((u) => Number(u.zIndex)).filter((u) => !isNaN(u));
|
|
43
|
-
}
|
|
44
|
-
function l(a) {
|
|
45
|
-
a.style.zIndex = String(Math.max(0, ...n(a)) + 1);
|
|
46
|
-
}
|
|
47
|
-
m([s, r], ([a]) => {
|
|
48
|
-
a && l(a);
|
|
49
|
-
}, { immediate: !0 });
|
|
50
|
-
}, K = () => {
|
|
51
|
-
const e = h(), t = b();
|
|
52
|
-
return o(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
|
|
53
|
-
}, X = (e) => o(() => e.value ?? g(L, navigator.language)), ee = (e, t = {}) => {
|
|
54
|
-
const { hide: s = !0, threshold: r = 0 } = t, n = p(e) ? e : c(e), l = c([]), a = c([]);
|
|
55
|
-
function u() {
|
|
56
|
-
const i = n.value;
|
|
57
|
-
if (i) {
|
|
58
|
-
const d = [...i.children].reduce(({ innerItems: v, outerItems: y }, T) => {
|
|
59
|
-
const f = T, { x: D, width: I } = f.getBoundingClientRect(), { x: A, width: w } = i.getBoundingClientRect();
|
|
60
|
-
return D + I > A + w + r ? (s && f.style.setProperty("visibility", "hidden"), {
|
|
61
|
-
innerItems: v,
|
|
62
|
-
outerItems: [...y, f]
|
|
63
|
-
}) : (s && f.style.removeProperty("visibility"), {
|
|
64
|
-
innerItems: [...v, f],
|
|
65
|
-
outerItems: y
|
|
66
|
-
});
|
|
67
|
-
}, {
|
|
68
|
-
innerItems: [],
|
|
69
|
-
outerItems: []
|
|
70
|
-
});
|
|
71
|
-
l.value = d.innerItems, a.value = d.outerItems;
|
|
72
|
-
} else
|
|
73
|
-
l.value = [], a.value = [];
|
|
74
|
-
}
|
|
75
|
-
return m(n, u, {
|
|
76
|
-
immediate: !0
|
|
77
|
-
}), S(n, u, {
|
|
78
|
-
childList: !0
|
|
79
|
-
}), $(n, () => C(u)), {
|
|
80
|
-
innerItems: l,
|
|
81
|
-
outerItems: a
|
|
82
|
-
};
|
|
83
|
-
}, te = (e, t, s = {}) => {
|
|
84
|
-
const r = c(e.value ? "open" : "closed");
|
|
85
|
-
m(e, (i) => {
|
|
86
|
-
r.value = i ? "open" : "closed";
|
|
87
|
-
});
|
|
88
|
-
const n = F(r, s.debounce ?? 0);
|
|
89
|
-
m(n, (i) => {
|
|
90
|
-
switch (t("update:state", i), i) {
|
|
91
|
-
case "open":
|
|
92
|
-
t("open");
|
|
93
|
-
break;
|
|
94
|
-
case "closed":
|
|
95
|
-
t("close");
|
|
96
|
-
break;
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
function l() {
|
|
100
|
-
r.value = "open";
|
|
101
|
-
}
|
|
102
|
-
function a() {
|
|
103
|
-
r.value = "closed";
|
|
104
|
-
}
|
|
105
|
-
function u() {
|
|
106
|
-
r.value = r.value === "open" ? "closed" : "open";
|
|
107
|
-
}
|
|
108
|
-
return {
|
|
109
|
-
state: n,
|
|
110
|
-
open: l,
|
|
111
|
-
close: a,
|
|
112
|
-
toggle: u
|
|
113
|
-
};
|
|
114
|
-
};
|
|
115
|
-
function re(e, t, s = {}) {
|
|
116
|
-
const { defaultValue: r } = s;
|
|
117
|
-
return r ? o({
|
|
118
|
-
get: () => e.value ?? r.value,
|
|
119
|
-
set: (n) => {
|
|
120
|
-
t("update:modelValue", n);
|
|
121
|
-
}
|
|
122
|
-
}) : o({
|
|
123
|
-
get: () => e.value,
|
|
124
|
-
set: (n) => {
|
|
125
|
-
t("update:modelValue", n);
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
function ne(e) {
|
|
130
|
-
const t = b(), s = c();
|
|
131
|
-
e ? m(e, (u) => {
|
|
132
|
-
s.value = u;
|
|
133
|
-
}) : R(() => {
|
|
134
|
-
if (t) {
|
|
135
|
-
const u = t.vnode[V ? "el" : "elm"];
|
|
136
|
-
u instanceof Element && (s.value = u);
|
|
137
|
-
}
|
|
138
|
-
});
|
|
139
|
-
const r = o(() => a(s.value) || l.value), n = o(() => !r.value), l = P(`(min-width: ${O.md})`);
|
|
140
|
-
function a(u) {
|
|
141
|
-
var d;
|
|
142
|
-
if (!u)
|
|
143
|
-
return !1;
|
|
144
|
-
const i = (d = u.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
|
|
145
|
-
return i != null && i.some((v) => ["md", "lg", "xl"].includes(v)) ? !0 : a(u.parentElement ?? void 0);
|
|
146
|
-
}
|
|
147
|
-
return {
|
|
148
|
-
isDesktop: r,
|
|
149
|
-
isMobile: n
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
|
-
const ue = () => Y.theme, oe = (e) => o(() => e.value ?? g(N, M.Auto)), se = (e, t) => o(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
153
|
-
timeStyle: "short",
|
|
154
|
-
hourCycle: e.value !== M.Auto ? e.value : void 0,
|
|
155
|
-
timeZone: "UTC"
|
|
156
|
-
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
|
|
157
|
-
switch (n.type) {
|
|
158
|
-
case "hour":
|
|
159
|
-
return r + n.value.replace(/^\d{1}$/, "H").replace(/^\d{2}$/, "HH");
|
|
160
|
-
case "minute":
|
|
161
|
-
return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
162
|
-
case "dayPeriod":
|
|
163
|
-
return r + "A";
|
|
164
|
-
default:
|
|
165
|
-
return r + n.value;
|
|
166
|
-
}
|
|
167
|
-
}, "") : e.value(void 0, t.value));
|
|
168
|
-
function ae(e = !1) {
|
|
169
|
-
const t = c(e);
|
|
170
|
-
function s() {
|
|
171
|
-
t.value = !0;
|
|
172
|
-
}
|
|
173
|
-
function r() {
|
|
174
|
-
t.value = !1;
|
|
175
|
-
}
|
|
176
|
-
function n() {
|
|
177
|
-
t.value = !t.value;
|
|
178
|
-
}
|
|
179
|
-
return {
|
|
180
|
-
isActiveToggle: t,
|
|
181
|
-
show: s,
|
|
182
|
-
hide: r,
|
|
183
|
-
toggle: n
|
|
184
|
-
};
|
|
185
|
-
}
|
|
186
|
-
const ie = () => {
|
|
187
|
-
const e = h();
|
|
188
|
-
return {
|
|
189
|
-
required: o(() => e.required),
|
|
190
|
-
minlength: o(() => e.minlength),
|
|
191
|
-
maxlength: o(() => e.maxlength),
|
|
192
|
-
pattern: o(() => e.pattern),
|
|
193
|
-
min: o(() => e.min),
|
|
194
|
-
max: o(() => e.max),
|
|
195
|
-
step: o(() => e.step)
|
|
196
|
-
};
|
|
197
|
-
};
|
|
198
|
-
export {
|
|
199
|
-
q as D,
|
|
200
|
-
L,
|
|
201
|
-
N as T,
|
|
202
|
-
_ as a,
|
|
203
|
-
k as b,
|
|
204
|
-
G as c,
|
|
205
|
-
J as d,
|
|
206
|
-
K as e,
|
|
207
|
-
X as f,
|
|
208
|
-
ee as g,
|
|
209
|
-
te as h,
|
|
210
|
-
re as i,
|
|
211
|
-
ne as j,
|
|
212
|
-
ue as k,
|
|
213
|
-
oe as l,
|
|
214
|
-
se as m,
|
|
215
|
-
ie as n,
|
|
216
|
-
ae as u
|
|
217
|
-
};
|