@onereach/ui-components-common 25.0.2-beta.5749.0 → 25.0.2-beta.5751.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/hooks.js +1 -1
- package/dist/index.js +103 -101
- package/dist/tokens/ZINDEX.d.ts +4 -0
- package/dist/tokens/index.d.ts +1 -0
- package/dist/types/ZIndex.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/useValidationAttributes-BLzi0C4L.js +217 -0
- package/package.json +2 -2
- package/src/hooks/useDateFormat.ts +1 -0
- package/src/hooks/useElevation.ts +11 -3
- package/src/tokens/DATE_FORMAT.ts +1 -0
- package/src/tokens/LOCALE.ts +1 -0
- package/src/tokens/TIME_FORMAT.ts +1 -0
- package/src/tokens/ZINDEX.ts +6 -0
- package/src/tokens/index.ts +1 -0
- package/src/types/ZIndex.ts +1 -0
- package/src/types/index.ts +1 -0
- package/dist/useValidationAttributes-C9_kxaDj.js +0 -213
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-BLzi0C4L.js";
|
|
2
2
|
export {
|
|
3
3
|
a as useControlAttributes,
|
|
4
4
|
u as useDateFormat,
|
package/dist/index.js
CHANGED
|
@@ -1,118 +1,120 @@
|
|
|
1
1
|
import { DropdownClose as _, DropdownOpen as s } from "./directives.js";
|
|
2
2
|
import { getItemByValue as T, getItemsByValue as a, searchItemsByLabel as t } from "./helpers.js";
|
|
3
|
-
import { D as o, L as A,
|
|
4
|
-
import { D as
|
|
5
|
-
import { Spacing as
|
|
6
|
-
import { CODE_BACKSPACE as
|
|
7
|
-
import { r as
|
|
8
|
-
import { i as
|
|
9
|
-
import { g as
|
|
3
|
+
import { D as o, L as A, o as O, M as D, T as C, a as i, b as N, c as X, d as S, e as P, f as L, g as M, h as m, i as u, j as I, k as l, l as n, m as g, u as p, n as H } from "./useValidationAttributes-BLzi0C4L.js";
|
|
4
|
+
import { D as x, T as f } from "./TimeFormat-CdFMIbra.js";
|
|
5
|
+
import { Spacing as b } from "./types.js";
|
|
6
|
+
import { CODE_BACKSPACE as G, CODE_BREAK as c, CODE_DELETE as U, CODE_DOWN as V, CODE_END as y, CODE_ENTER as h, CODE_ESC as v, CODE_HOME as W, CODE_LEFT as k, CODE_PAGEDOWN as w, CODE_PAGEUP as K, CODE_RIGHT as Y, CODE_SPACE as j, CODE_UP as q, HSL_LIMITS as Z, PLACEMENT_BOTTOM_END as z, PLACEMENT_BOTTOM_START as Q, PLACEMENT_LEFT_END as J, PLACEMENT_LEFT_START as $, PLACEMENT_RIGHT_END as ee, PLACEMENT_RIGHT_START as Ee, PLACEMENT_TOP_END as _e, PLACEMENT_TOP_START as se, RX_ABBREVIATION_FROM_STRING as Re, RX_ARRAY_NOTATION as Te, RX_BV_PREFIX as ae, RX_DATE as te, RX_DATE_SPLIT as re, RX_DIGITS as oe, RX_ENCODED_COMMA as Ae, RX_ENCODE_REVERSE as Oe, RX_EXTENSION as De, RX_HASH as Ce, RX_HASH_ID as ie, RX_HREF as Ne, RX_HTML_TAGS as Xe, RX_HYPHENATE as Se, RX_LONG_COLOR as Pe, RX_LOWER_UPPER as Le, RX_NUMBER as Me, RX_PLUS as me, RX_QUERY_START as ue, RX_REGEXP_REPLACE as Ie, RX_SHORT_COLOR as le, RX_SPACES as ne, RX_SPACE_SPLIT as ge, RX_STAR as pe, RX_START_SPACE_WORD as He, RX_TIME as Fe, RX_TRIM_LEFT as xe, RX_TRIM_RIGHT as fe, RX_UNDERSCORE as Be, RX_UN_KEBAB as be, exclude as de, extractCssVarName as Ge, flattenDeep as ce, generateColorFromString as Ue, generateHslFromString as Ve, getAbbreviation as ye, getHashOfString as he, hexToRgb as ve, hslToColorString as We, include as ke, isAncestor as we, isArray as Ke, isDescendant as Ye, isEmpty as je, isEqual as qe, isNil as Ze, isNull as ze, isNumber as Qe, isObject as Je, isString as $e, normalize as eE, pxToRem as EE, rgbToHex as _E, toArray as sE } from "./utils.js";
|
|
7
|
+
import { r as TE } from "./dom-qGGG2YCX.js";
|
|
8
|
+
import { i as tE } from "./isUndefined-B5qXrATz.js";
|
|
9
|
+
import { g as oE, i as AE } from "./getPageElevations-BuZyM94T.js";
|
|
10
10
|
export {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
11
|
+
G as CODE_BACKSPACE,
|
|
12
|
+
c as CODE_BREAK,
|
|
13
|
+
U as CODE_DELETE,
|
|
14
|
+
V as CODE_DOWN,
|
|
15
|
+
y as CODE_END,
|
|
16
|
+
h as CODE_ENTER,
|
|
17
|
+
v as CODE_ESC,
|
|
18
|
+
W as CODE_HOME,
|
|
19
|
+
k as CODE_LEFT,
|
|
20
|
+
w as CODE_PAGEDOWN,
|
|
21
|
+
K as CODE_PAGEUP,
|
|
22
|
+
Y as CODE_RIGHT,
|
|
23
|
+
j as CODE_SPACE,
|
|
24
|
+
q as CODE_UP,
|
|
25
25
|
o as DATE_FORMAT,
|
|
26
|
-
|
|
26
|
+
x as DateFormat,
|
|
27
27
|
_ as DropdownClose,
|
|
28
28
|
s as DropdownOpen,
|
|
29
|
-
|
|
29
|
+
Z as HSL_LIMITS,
|
|
30
30
|
A as LOCALE,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
$ as
|
|
37
|
-
ee as
|
|
38
|
-
Ee as
|
|
39
|
-
_e as
|
|
40
|
-
se as
|
|
41
|
-
Re as
|
|
42
|
-
Te as
|
|
43
|
-
ae as
|
|
44
|
-
te as
|
|
45
|
-
re as
|
|
46
|
-
oe as
|
|
47
|
-
Ae as
|
|
48
|
-
Oe as
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
ie as
|
|
31
|
+
O as MAX_ZINDEX,
|
|
32
|
+
D as MIN_ZINDEX,
|
|
33
|
+
z as PLACEMENT_BOTTOM_END,
|
|
34
|
+
Q as PLACEMENT_BOTTOM_START,
|
|
35
|
+
J as PLACEMENT_LEFT_END,
|
|
36
|
+
$ as PLACEMENT_LEFT_START,
|
|
37
|
+
ee as PLACEMENT_RIGHT_END,
|
|
38
|
+
Ee as PLACEMENT_RIGHT_START,
|
|
39
|
+
_e as PLACEMENT_TOP_END,
|
|
40
|
+
se as PLACEMENT_TOP_START,
|
|
41
|
+
Re as RX_ABBREVIATION_FROM_STRING,
|
|
42
|
+
Te as RX_ARRAY_NOTATION,
|
|
43
|
+
ae as RX_BV_PREFIX,
|
|
44
|
+
te as RX_DATE,
|
|
45
|
+
re as RX_DATE_SPLIT,
|
|
46
|
+
oe as RX_DIGITS,
|
|
47
|
+
Ae as RX_ENCODED_COMMA,
|
|
48
|
+
Oe as RX_ENCODE_REVERSE,
|
|
49
|
+
De as RX_EXTENSION,
|
|
50
|
+
Ce as RX_HASH,
|
|
51
|
+
ie as RX_HASH_ID,
|
|
52
|
+
Ne as RX_HREF,
|
|
53
|
+
Xe as RX_HTML_TAGS,
|
|
52
54
|
Se as RX_HYPHENATE,
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
Pe as RX_LONG_COLOR,
|
|
56
|
+
Le as RX_LOWER_UPPER,
|
|
57
|
+
Me as RX_NUMBER,
|
|
58
|
+
me as RX_PLUS,
|
|
59
|
+
ue as RX_QUERY_START,
|
|
60
|
+
Ie as RX_REGEXP_REPLACE,
|
|
59
61
|
le as RX_SHORT_COLOR,
|
|
60
62
|
ne as RX_SPACES,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
63
|
+
ge as RX_SPACE_SPLIT,
|
|
64
|
+
pe as RX_STAR,
|
|
65
|
+
He as RX_START_SPACE_WORD,
|
|
66
|
+
Fe as RX_TIME,
|
|
67
|
+
xe as RX_TRIM_LEFT,
|
|
68
|
+
fe as RX_TRIM_RIGHT,
|
|
69
|
+
Be as RX_UNDERSCORE,
|
|
70
|
+
be as RX_UN_KEBAB,
|
|
71
|
+
b as Spacing,
|
|
72
|
+
C as TIME_FORMAT,
|
|
73
|
+
f as TimeFormat,
|
|
74
|
+
de as exclude,
|
|
75
|
+
Ge as extractCssVarName,
|
|
76
|
+
ce as flattenDeep,
|
|
77
|
+
Ue as generateColorFromString,
|
|
78
|
+
Ve as generateHslFromString,
|
|
79
|
+
ye as getAbbreviation,
|
|
80
|
+
he as getHashOfString,
|
|
79
81
|
T as getItemByValue,
|
|
80
82
|
a as getItemsByValue,
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
83
|
+
oE as getPageElevations,
|
|
84
|
+
ve as hexToRgb,
|
|
85
|
+
We as hslToColorString,
|
|
86
|
+
ke as include,
|
|
87
|
+
we as isAncestor,
|
|
88
|
+
Ke as isArray,
|
|
89
|
+
Ye as isDescendant,
|
|
90
|
+
je as isEmpty,
|
|
91
|
+
qe as isEqual,
|
|
92
|
+
Ze as isNil,
|
|
93
|
+
ze as isNull,
|
|
94
|
+
Qe as isNumber,
|
|
95
|
+
Je as isObject,
|
|
96
|
+
$e as isString,
|
|
97
|
+
tE as isUndefined,
|
|
98
|
+
AE as isVisible,
|
|
99
|
+
eE as normalize,
|
|
100
|
+
EE as pxToRem,
|
|
101
|
+
TE as requestAF,
|
|
102
|
+
_E as rgbToHex,
|
|
101
103
|
t as searchItemsByLabel,
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
104
|
+
sE as toArray,
|
|
105
|
+
i as useControlAttributes,
|
|
106
|
+
N as useDateFormat,
|
|
107
|
+
X as useDateMask,
|
|
106
108
|
S as useElevation,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
109
|
+
P as useIdAttribute,
|
|
110
|
+
L as useLocale,
|
|
111
|
+
M as useOverflow,
|
|
112
|
+
m as usePopoverState,
|
|
113
|
+
u as useProxyModelValue,
|
|
114
|
+
I as useResponsive,
|
|
113
115
|
l as useTheme,
|
|
114
116
|
n as useTimeFormat,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
117
|
+
g as useTimeMask,
|
|
118
|
+
p as useToggle,
|
|
119
|
+
H as useValidationAttributes
|
|
118
120
|
};
|
package/dist/tokens/index.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type ZIndex = number;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import { useAttrs as g, computed as u, inject as f, isRef as h, ref as d, watch as m, getCurrentInstance as y, onMounted as A } from "vue";
|
|
2
|
+
import { D as E, T as b } from "./TimeFormat-CdFMIbra.js";
|
|
3
|
+
import { r as R } from "./dom-qGGG2YCX.js";
|
|
4
|
+
import { g as S } from "./getPageElevations-BuZyM94T.js";
|
|
5
|
+
import { useMutationObserver as C, useResizeObserver as $, refDebounced as F, useMediaQuery as P } from "@vueuse/core";
|
|
6
|
+
import O from "@onereach/styles/screens.json";
|
|
7
|
+
import Z from "@onereach/styles/tailwind.config.json";
|
|
8
|
+
const Q = () => {
|
|
9
|
+
const e = g();
|
|
10
|
+
return {
|
|
11
|
+
readonly: u(() => e.readonly),
|
|
12
|
+
disabled: u(() => e.disabled),
|
|
13
|
+
"force-state": u(() => e["force-state"])
|
|
14
|
+
};
|
|
15
|
+
}, Y = Symbol(), L = Symbol(), U = Symbol(), V = Symbol(), _ = Symbol(), W = (e) => u(() => e.value ?? f(Y, E.Short)), k = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
16
|
+
dateStyle: e.value,
|
|
17
|
+
timeZone: "UTC"
|
|
18
|
+
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((n, r) => {
|
|
19
|
+
switch (r.type) {
|
|
20
|
+
case "year":
|
|
21
|
+
return n + r.value.replace(/^\d{2}$/, "YY").replace(/^\d{4}$/, "YYYY");
|
|
22
|
+
case "month":
|
|
23
|
+
switch (e.value) {
|
|
24
|
+
case "short":
|
|
25
|
+
return n + r.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
26
|
+
case "medium":
|
|
27
|
+
return n + "MMM";
|
|
28
|
+
case "long":
|
|
29
|
+
return n + "MMMM";
|
|
30
|
+
default:
|
|
31
|
+
throw new Error("[useDateMask]: `format` has an invalid value.");
|
|
32
|
+
}
|
|
33
|
+
case "day":
|
|
34
|
+
return n + r.value.replace(/^\d{1}$/, "D").replace(/^\d{2}$/, "DD");
|
|
35
|
+
default:
|
|
36
|
+
return n + r.value;
|
|
37
|
+
}
|
|
38
|
+
}, "") : e.value(void 0, t.value)), G = (e, t) => {
|
|
39
|
+
const a = h(e) ? e : d(e), n = h(t) ? t : d(), r = f(V, 0), l = f(_, 1 / 0);
|
|
40
|
+
function i(s) {
|
|
41
|
+
const o = S(s);
|
|
42
|
+
let c = Math.max(r, ...o) + 1;
|
|
43
|
+
c = Math.min(c, l), s.style.zIndex = String(c);
|
|
44
|
+
}
|
|
45
|
+
m([a, n], ([s]) => {
|
|
46
|
+
s && i(s);
|
|
47
|
+
}, { immediate: !0 });
|
|
48
|
+
}, J = () => {
|
|
49
|
+
const e = g(), t = y();
|
|
50
|
+
return u(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
|
|
51
|
+
}, K = (e) => u(() => e.value ?? f(L, navigator.language)), ee = (e, t = {}) => {
|
|
52
|
+
const { hide: a = !0, threshold: n = 0 } = t, r = h(e) ? e : d(e), l = d([]), i = d([]);
|
|
53
|
+
function s() {
|
|
54
|
+
const o = r.value;
|
|
55
|
+
if (o) {
|
|
56
|
+
const c = [...o.children].reduce(({ innerItems: p, outerItems: M }, I) => {
|
|
57
|
+
const v = I, { x: T, width: D } = v.getBoundingClientRect(), { x: w, width: x } = o.getBoundingClientRect();
|
|
58
|
+
return T + D > w + x + n ? (a && v.style.setProperty("visibility", "hidden"), {
|
|
59
|
+
innerItems: p,
|
|
60
|
+
outerItems: [...M, v]
|
|
61
|
+
}) : (a && v.style.removeProperty("visibility"), {
|
|
62
|
+
innerItems: [...p, v],
|
|
63
|
+
outerItems: M
|
|
64
|
+
});
|
|
65
|
+
}, {
|
|
66
|
+
innerItems: [],
|
|
67
|
+
outerItems: []
|
|
68
|
+
});
|
|
69
|
+
l.value = c.innerItems, i.value = c.outerItems;
|
|
70
|
+
} else
|
|
71
|
+
l.value = [], i.value = [];
|
|
72
|
+
}
|
|
73
|
+
return m(r, s, {
|
|
74
|
+
immediate: !0
|
|
75
|
+
}), C(r, s, {
|
|
76
|
+
childList: !0
|
|
77
|
+
}), $(r, () => R(s)), {
|
|
78
|
+
innerItems: l,
|
|
79
|
+
outerItems: i
|
|
80
|
+
};
|
|
81
|
+
}, te = (e, t, a = {}) => {
|
|
82
|
+
const n = d(e.value ? "open" : "closed");
|
|
83
|
+
m(e, (o) => {
|
|
84
|
+
n.value = o ? "open" : "closed";
|
|
85
|
+
});
|
|
86
|
+
const r = F(n, a.debounce ?? 0);
|
|
87
|
+
m(r, (o) => {
|
|
88
|
+
switch (t("update:state", o), o) {
|
|
89
|
+
case "open":
|
|
90
|
+
t("open");
|
|
91
|
+
break;
|
|
92
|
+
case "closed":
|
|
93
|
+
t("close");
|
|
94
|
+
break;
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
function l() {
|
|
98
|
+
n.value = "open";
|
|
99
|
+
}
|
|
100
|
+
function i() {
|
|
101
|
+
n.value = "closed";
|
|
102
|
+
}
|
|
103
|
+
function s() {
|
|
104
|
+
n.value = n.value === "open" ? "closed" : "open";
|
|
105
|
+
}
|
|
106
|
+
return {
|
|
107
|
+
state: r,
|
|
108
|
+
open: l,
|
|
109
|
+
close: i,
|
|
110
|
+
toggle: s
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
function ne(e, t, a = {}) {
|
|
114
|
+
const { defaultValue: n } = a;
|
|
115
|
+
return n ? u({
|
|
116
|
+
get: () => e.value ?? n.value,
|
|
117
|
+
set: (r) => {
|
|
118
|
+
t("update:modelValue", r);
|
|
119
|
+
}
|
|
120
|
+
}) : u({
|
|
121
|
+
get: () => e.value,
|
|
122
|
+
set: (r) => {
|
|
123
|
+
t("update:modelValue", r);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
function re(e) {
|
|
128
|
+
const t = y(), a = d();
|
|
129
|
+
e ? m(e, (s) => {
|
|
130
|
+
a.value = s;
|
|
131
|
+
}) : A(() => {
|
|
132
|
+
if (t) {
|
|
133
|
+
const s = t.vnode, o = s.el || s.elm;
|
|
134
|
+
o instanceof Element && (a.value = o);
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
const n = u(() => i(a.value) || l.value), r = u(() => !n.value), l = P(`(min-width: ${O.md})`);
|
|
138
|
+
function i(s) {
|
|
139
|
+
var c;
|
|
140
|
+
if (!s)
|
|
141
|
+
return !1;
|
|
142
|
+
const o = (c = s.getAttribute("force-screen")) == null ? void 0 : c.split(/\s+/);
|
|
143
|
+
return o != null && o.some((p) => ["md", "lg", "xl"].includes(p)) ? !0 : i(s.parentElement ?? void 0);
|
|
144
|
+
}
|
|
145
|
+
return {
|
|
146
|
+
isDesktop: n,
|
|
147
|
+
isMobile: r
|
|
148
|
+
};
|
|
149
|
+
}
|
|
150
|
+
const se = () => Z.theme, ue = (e) => u(() => e.value ?? f(U, b.Auto)), oe = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
151
|
+
timeStyle: "short",
|
|
152
|
+
hourCycle: e.value !== b.Auto ? e.value : void 0,
|
|
153
|
+
timeZone: "UTC"
|
|
154
|
+
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((n, r) => {
|
|
155
|
+
switch (r.type) {
|
|
156
|
+
case "hour":
|
|
157
|
+
return n + r.value.replace(/^\d{1}$/, "H").replace(/^\d{2}$/, "HH");
|
|
158
|
+
case "minute":
|
|
159
|
+
return n + r.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
160
|
+
case "dayPeriod":
|
|
161
|
+
return n + "A";
|
|
162
|
+
default:
|
|
163
|
+
return n + r.value;
|
|
164
|
+
}
|
|
165
|
+
}, "") : e.value(void 0, t.value));
|
|
166
|
+
function ae(e = !1) {
|
|
167
|
+
const t = d(e);
|
|
168
|
+
function a() {
|
|
169
|
+
t.value = !0;
|
|
170
|
+
}
|
|
171
|
+
function n() {
|
|
172
|
+
t.value = !1;
|
|
173
|
+
}
|
|
174
|
+
function r() {
|
|
175
|
+
t.value = !t.value;
|
|
176
|
+
}
|
|
177
|
+
return {
|
|
178
|
+
isActiveToggle: t,
|
|
179
|
+
show: a,
|
|
180
|
+
hide: n,
|
|
181
|
+
toggle: r
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
const ie = () => {
|
|
185
|
+
const e = g();
|
|
186
|
+
return {
|
|
187
|
+
required: u(() => e.required),
|
|
188
|
+
minlength: u(() => e.minlength),
|
|
189
|
+
maxlength: u(() => e.maxlength),
|
|
190
|
+
pattern: u(() => e.pattern),
|
|
191
|
+
min: u(() => e.min),
|
|
192
|
+
max: u(() => e.max),
|
|
193
|
+
step: u(() => e.step)
|
|
194
|
+
};
|
|
195
|
+
};
|
|
196
|
+
export {
|
|
197
|
+
Y as D,
|
|
198
|
+
L,
|
|
199
|
+
V as M,
|
|
200
|
+
U as T,
|
|
201
|
+
Q as a,
|
|
202
|
+
W as b,
|
|
203
|
+
k as c,
|
|
204
|
+
G as d,
|
|
205
|
+
J as e,
|
|
206
|
+
K as f,
|
|
207
|
+
ee as g,
|
|
208
|
+
te as h,
|
|
209
|
+
ne as i,
|
|
210
|
+
re as j,
|
|
211
|
+
se as k,
|
|
212
|
+
ue as l,
|
|
213
|
+
oe as m,
|
|
214
|
+
ie as n,
|
|
215
|
+
_ as o,
|
|
216
|
+
ae as u
|
|
217
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/ui-components-common",
|
|
3
|
-
"version": "25.0.2-beta.
|
|
3
|
+
"version": "25.0.2-beta.5751.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"dev": "vite build --watch"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@onereach/styles": "^25.0.2-beta.
|
|
62
|
+
"@onereach/styles": "^25.0.2-beta.5751.0",
|
|
63
63
|
"@vueuse/core": "11.3.0"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { MaybeElementRef } from '@vueuse/core';
|
|
2
|
-
import { isRef, Ref, ref, watch } from 'vue';
|
|
2
|
+
import { isRef, Ref, ref, watch, inject } from 'vue';
|
|
3
|
+
|
|
4
|
+
import { MAX_ZINDEX, MIN_ZINDEX } from '../tokens';
|
|
3
5
|
import { getPageElevations } from '../utils';
|
|
4
6
|
|
|
5
7
|
export const useElevation = (
|
|
@@ -8,10 +10,16 @@ export const useElevation = (
|
|
|
8
10
|
): void => {
|
|
9
11
|
const elementRef = isRef(element) ? element : ref(element);
|
|
10
12
|
const triggerRef = isRef(trigger) ? trigger : ref();
|
|
11
|
-
|
|
13
|
+
const minZIndex = inject(MIN_ZINDEX, 0);
|
|
14
|
+
const maxZIndex = inject(MAX_ZINDEX, Infinity);
|
|
12
15
|
|
|
13
16
|
function setElementElevation(element: HTMLElement): void {
|
|
14
|
-
|
|
17
|
+
|
|
18
|
+
const currentElevations = getPageElevations(element);
|
|
19
|
+
|
|
20
|
+
let newZIndex = Math.max(minZIndex, ...currentElevations) + 1;
|
|
21
|
+
newZIndex = Math.min(newZIndex, maxZIndex);
|
|
22
|
+
element.style.zIndex = String(newZIndex);
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
// Effects
|
package/src/tokens/LOCALE.ts
CHANGED
package/src/tokens/index.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type ZIndex = number;
|
package/src/types/index.ts
CHANGED
|
@@ -1,213 +0,0 @@
|
|
|
1
|
-
import { useAttrs as h, computed as u, inject as g, isRef as p, ref as c, watch as f, getCurrentInstance as M, onMounted as R } from "vue";
|
|
2
|
-
import { D as x, T as b } from "./TimeFormat-CdFMIbra.js";
|
|
3
|
-
import { r as C } from "./dom-qGGG2YCX.js";
|
|
4
|
-
import { g as E } from "./getPageElevations-BuZyM94T.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 Y from "@onereach/styles/tailwind.config.json";
|
|
8
|
-
const Z = () => {
|
|
9
|
-
const e = h();
|
|
10
|
-
return {
|
|
11
|
-
readonly: u(() => e.readonly),
|
|
12
|
-
disabled: u(() => e.disabled),
|
|
13
|
-
"force-state": u(() => e["force-state"])
|
|
14
|
-
};
|
|
15
|
-
}, L = Symbol(), U = Symbol(), V = Symbol(), _ = (e) => u(() => e.value ?? g(L, x.Short)), k = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
16
|
-
dateStyle: e.value,
|
|
17
|
-
timeZone: "UTC"
|
|
18
|
-
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
|
|
19
|
-
switch (n.type) {
|
|
20
|
-
case "year":
|
|
21
|
-
return r + n.value.replace(/^\d{2}$/, "YY").replace(/^\d{4}$/, "YYYY");
|
|
22
|
-
case "month":
|
|
23
|
-
switch (e.value) {
|
|
24
|
-
case "short":
|
|
25
|
-
return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
26
|
-
case "medium":
|
|
27
|
-
return r + "MMM";
|
|
28
|
-
case "long":
|
|
29
|
-
return r + "MMMM";
|
|
30
|
-
default:
|
|
31
|
-
throw new Error("[useDateMask]: `format` has an invalid value.");
|
|
32
|
-
}
|
|
33
|
-
case "day":
|
|
34
|
-
return r + n.value.replace(/^\d{1}$/, "D").replace(/^\d{2}$/, "DD");
|
|
35
|
-
default:
|
|
36
|
-
return r + n.value;
|
|
37
|
-
}
|
|
38
|
-
}, "") : e.value(void 0, t.value)), G = (e, t) => {
|
|
39
|
-
const s = p(e) ? e : c(e), r = p(t) ? t : c();
|
|
40
|
-
function n(i) {
|
|
41
|
-
i.style.zIndex = String(Math.max(0, ...E(i)) + 1);
|
|
42
|
-
}
|
|
43
|
-
f([s, r], ([i]) => {
|
|
44
|
-
i && n(i);
|
|
45
|
-
}, { immediate: !0 });
|
|
46
|
-
}, J = () => {
|
|
47
|
-
const e = h(), t = M();
|
|
48
|
-
return u(() => e.id ?? (t == null ? void 0 : t.uid.toString()));
|
|
49
|
-
}, K = (e) => u(() => e.value ?? g(U, navigator.language)), N = (e, t = {}) => {
|
|
50
|
-
const { hide: s = !0, threshold: r = 0 } = t, n = p(e) ? e : c(e), i = c([]), l = c([]);
|
|
51
|
-
function a() {
|
|
52
|
-
const o = n.value;
|
|
53
|
-
if (o) {
|
|
54
|
-
const d = [...o.children].reduce(({ innerItems: m, outerItems: y }, T) => {
|
|
55
|
-
const v = T, { x: D, width: I } = v.getBoundingClientRect(), { x: w, width: A } = o.getBoundingClientRect();
|
|
56
|
-
return D + I > w + A + r ? (s && v.style.setProperty("visibility", "hidden"), {
|
|
57
|
-
innerItems: m,
|
|
58
|
-
outerItems: [...y, v]
|
|
59
|
-
}) : (s && v.style.removeProperty("visibility"), {
|
|
60
|
-
innerItems: [...m, v],
|
|
61
|
-
outerItems: y
|
|
62
|
-
});
|
|
63
|
-
}, {
|
|
64
|
-
innerItems: [],
|
|
65
|
-
outerItems: []
|
|
66
|
-
});
|
|
67
|
-
i.value = d.innerItems, l.value = d.outerItems;
|
|
68
|
-
} else
|
|
69
|
-
i.value = [], l.value = [];
|
|
70
|
-
}
|
|
71
|
-
return f(n, a, {
|
|
72
|
-
immediate: !0
|
|
73
|
-
}), $(n, a, {
|
|
74
|
-
childList: !0
|
|
75
|
-
}), F(n, () => C(a)), {
|
|
76
|
-
innerItems: i,
|
|
77
|
-
outerItems: l
|
|
78
|
-
};
|
|
79
|
-
}, X = (e, t, s = {}) => {
|
|
80
|
-
const r = c(e.value ? "open" : "closed");
|
|
81
|
-
f(e, (o) => {
|
|
82
|
-
r.value = o ? "open" : "closed";
|
|
83
|
-
});
|
|
84
|
-
const n = S(r, s.debounce ?? 0);
|
|
85
|
-
f(n, (o) => {
|
|
86
|
-
switch (t("update:state", o), o) {
|
|
87
|
-
case "open":
|
|
88
|
-
t("open");
|
|
89
|
-
break;
|
|
90
|
-
case "closed":
|
|
91
|
-
t("close");
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
function i() {
|
|
96
|
-
r.value = "open";
|
|
97
|
-
}
|
|
98
|
-
function l() {
|
|
99
|
-
r.value = "closed";
|
|
100
|
-
}
|
|
101
|
-
function a() {
|
|
102
|
-
r.value = r.value === "open" ? "closed" : "open";
|
|
103
|
-
}
|
|
104
|
-
return {
|
|
105
|
-
state: n,
|
|
106
|
-
open: i,
|
|
107
|
-
close: l,
|
|
108
|
-
toggle: a
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
function ee(e, t, s = {}) {
|
|
112
|
-
const { defaultValue: r } = s;
|
|
113
|
-
return r ? u({
|
|
114
|
-
get: () => e.value ?? r.value,
|
|
115
|
-
set: (n) => {
|
|
116
|
-
t("update:modelValue", n);
|
|
117
|
-
}
|
|
118
|
-
}) : u({
|
|
119
|
-
get: () => e.value,
|
|
120
|
-
set: (n) => {
|
|
121
|
-
t("update:modelValue", n);
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
function te(e) {
|
|
126
|
-
const t = M(), s = c();
|
|
127
|
-
e ? f(e, (a) => {
|
|
128
|
-
s.value = a;
|
|
129
|
-
}) : R(() => {
|
|
130
|
-
if (t) {
|
|
131
|
-
const a = t.vnode, o = a.el || a.elm;
|
|
132
|
-
o instanceof Element && (s.value = o);
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
const r = u(() => l(s.value) || i.value), n = u(() => !r.value), i = P(`(min-width: ${O.md})`);
|
|
136
|
-
function l(a) {
|
|
137
|
-
var d;
|
|
138
|
-
if (!a)
|
|
139
|
-
return !1;
|
|
140
|
-
const o = (d = a.getAttribute("force-screen")) == null ? void 0 : d.split(/\s+/);
|
|
141
|
-
return o != null && o.some((m) => ["md", "lg", "xl"].includes(m)) ? !0 : l(a.parentElement ?? void 0);
|
|
142
|
-
}
|
|
143
|
-
return {
|
|
144
|
-
isDesktop: r,
|
|
145
|
-
isMobile: n
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
const re = () => Y.theme, ne = (e) => u(() => e.value ?? g(V, b.Auto)), ue = (e, t) => u(() => typeof e.value != "function" ? new Intl.DateTimeFormat(t.value, {
|
|
149
|
-
timeStyle: "short",
|
|
150
|
-
hourCycle: e.value !== b.Auto ? e.value : void 0,
|
|
151
|
-
timeZone: "UTC"
|
|
152
|
-
}).formatToParts(Date.UTC(1, 0, 1, 1, 1)).reduce((r, n) => {
|
|
153
|
-
switch (n.type) {
|
|
154
|
-
case "hour":
|
|
155
|
-
return r + n.value.replace(/^\d{1}$/, "H").replace(/^\d{2}$/, "HH");
|
|
156
|
-
case "minute":
|
|
157
|
-
return r + n.value.replace(/^\d{1}$/, "M").replace(/^\d{2}$/, "MM");
|
|
158
|
-
case "dayPeriod":
|
|
159
|
-
return r + "A";
|
|
160
|
-
default:
|
|
161
|
-
return r + n.value;
|
|
162
|
-
}
|
|
163
|
-
}, "") : e.value(void 0, t.value));
|
|
164
|
-
function se(e = !1) {
|
|
165
|
-
const t = c(e);
|
|
166
|
-
function s() {
|
|
167
|
-
t.value = !0;
|
|
168
|
-
}
|
|
169
|
-
function r() {
|
|
170
|
-
t.value = !1;
|
|
171
|
-
}
|
|
172
|
-
function n() {
|
|
173
|
-
t.value = !t.value;
|
|
174
|
-
}
|
|
175
|
-
return {
|
|
176
|
-
isActiveToggle: t,
|
|
177
|
-
show: s,
|
|
178
|
-
hide: r,
|
|
179
|
-
toggle: n
|
|
180
|
-
};
|
|
181
|
-
}
|
|
182
|
-
const oe = () => {
|
|
183
|
-
const e = h();
|
|
184
|
-
return {
|
|
185
|
-
required: u(() => e.required),
|
|
186
|
-
minlength: u(() => e.minlength),
|
|
187
|
-
maxlength: u(() => e.maxlength),
|
|
188
|
-
pattern: u(() => e.pattern),
|
|
189
|
-
min: u(() => e.min),
|
|
190
|
-
max: u(() => e.max),
|
|
191
|
-
step: u(() => e.step)
|
|
192
|
-
};
|
|
193
|
-
};
|
|
194
|
-
export {
|
|
195
|
-
L as D,
|
|
196
|
-
U as L,
|
|
197
|
-
V as T,
|
|
198
|
-
Z as a,
|
|
199
|
-
_ as b,
|
|
200
|
-
k as c,
|
|
201
|
-
G as d,
|
|
202
|
-
J as e,
|
|
203
|
-
K as f,
|
|
204
|
-
N as g,
|
|
205
|
-
X as h,
|
|
206
|
-
ee as i,
|
|
207
|
-
te as j,
|
|
208
|
-
re as k,
|
|
209
|
-
ne as l,
|
|
210
|
-
ue as m,
|
|
211
|
-
oe as n,
|
|
212
|
-
se as u
|
|
213
|
-
};
|