@onereach/ui-components-common 25.0.1 → 25.0.2-beta.5750.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 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-C9_kxaDj.js";
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, T as O, a as C, b as D, c as i, d as S, e as N, f as X, g as P, h as L, i as m, j as u, k as l, l as n, m as M, u as I, n as g } from "./useValidationAttributes-C9_kxaDj.js";
4
- import { D as H, T as F } from "./TimeFormat-CdFMIbra.js";
5
- import { Spacing as f } from "./types.js";
6
- import { CODE_BACKSPACE as b, CODE_BREAK as d, CODE_DELETE as G, CODE_DOWN as c, CODE_END as U, CODE_ENTER as V, CODE_ESC as y, CODE_HOME as h, CODE_LEFT as v, CODE_PAGEDOWN as W, CODE_PAGEUP as k, CODE_RIGHT as w, CODE_SPACE as K, CODE_UP as Y, HSL_LIMITS as j, PLACEMENT_BOTTOM_END as q, PLACEMENT_BOTTOM_START as z, PLACEMENT_LEFT_END as Q, PLACEMENT_LEFT_START as J, PLACEMENT_RIGHT_END as Z, PLACEMENT_RIGHT_START as $, PLACEMENT_TOP_END as ee, PLACEMENT_TOP_START as Ee, RX_ABBREVIATION_FROM_STRING as _e, RX_ARRAY_NOTATION as se, RX_BV_PREFIX as Re, RX_DATE as Te, RX_DATE_SPLIT as ae, RX_DIGITS as te, RX_ENCODED_COMMA as re, RX_ENCODE_REVERSE as oe, RX_EXTENSION as Ae, RX_HASH as Oe, RX_HASH_ID as Ce, RX_HREF as De, RX_HTML_TAGS as ie, RX_HYPHENATE as Se, RX_LONG_COLOR as Ne, RX_LOWER_UPPER as Xe, RX_NUMBER as Pe, RX_PLUS as Le, RX_QUERY_START as me, RX_REGEXP_REPLACE as ue, RX_SHORT_COLOR as le, RX_SPACES as ne, RX_SPACE_SPLIT as Me, RX_STAR as Ie, RX_START_SPACE_WORD as ge, RX_TIME as pe, RX_TRIM_LEFT as He, RX_TRIM_RIGHT as Fe, RX_UNDERSCORE as xe, RX_UN_KEBAB as fe, exclude as Be, extractCssVarName as be, flattenDeep as de, generateColorFromString as Ge, generateHslFromString as ce, getAbbreviation as Ue, getHashOfString as Ve, hexToRgb as ye, hslToColorString as he, include as ve, isAncestor as We, isArray as ke, isDescendant as we, isEmpty as Ke, isEqual as Ye, isNil as je, isNull as qe, isNumber as ze, isObject as Qe, isString as Je, normalize as Ze, pxToRem as $e, rgbToHex as eE, toArray as EE } from "./utils.js";
7
- import { r as sE } from "./dom-qGGG2YCX.js";
8
- import { i as TE } from "./isUndefined-B5qXrATz.js";
9
- import { g as tE, i as rE } from "./getPageElevations-BuZyM94T.js";
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
- b as CODE_BACKSPACE,
12
- d as CODE_BREAK,
13
- G as CODE_DELETE,
14
- c as CODE_DOWN,
15
- U as CODE_END,
16
- V as CODE_ENTER,
17
- y as CODE_ESC,
18
- h as CODE_HOME,
19
- v as CODE_LEFT,
20
- W as CODE_PAGEDOWN,
21
- k as CODE_PAGEUP,
22
- w as CODE_RIGHT,
23
- K as CODE_SPACE,
24
- Y as CODE_UP,
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
- H as DateFormat,
26
+ x as DateFormat,
27
27
  _ as DropdownClose,
28
28
  s as DropdownOpen,
29
- j as HSL_LIMITS,
29
+ Z as HSL_LIMITS,
30
30
  A as LOCALE,
31
- q as PLACEMENT_BOTTOM_END,
32
- z as PLACEMENT_BOTTOM_START,
33
- Q as PLACEMENT_LEFT_END,
34
- J as PLACEMENT_LEFT_START,
35
- Z as PLACEMENT_RIGHT_END,
36
- $ as PLACEMENT_RIGHT_START,
37
- ee as PLACEMENT_TOP_END,
38
- Ee as PLACEMENT_TOP_START,
39
- _e as RX_ABBREVIATION_FROM_STRING,
40
- se as RX_ARRAY_NOTATION,
41
- Re as RX_BV_PREFIX,
42
- Te as RX_DATE,
43
- ae as RX_DATE_SPLIT,
44
- te as RX_DIGITS,
45
- re as RX_ENCODED_COMMA,
46
- oe as RX_ENCODE_REVERSE,
47
- Ae as RX_EXTENSION,
48
- Oe as RX_HASH,
49
- Ce as RX_HASH_ID,
50
- De as RX_HREF,
51
- ie as RX_HTML_TAGS,
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
- Ne as RX_LONG_COLOR,
54
- Xe as RX_LOWER_UPPER,
55
- Pe as RX_NUMBER,
56
- Le as RX_PLUS,
57
- me as RX_QUERY_START,
58
- ue as RX_REGEXP_REPLACE,
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
- Me as RX_SPACE_SPLIT,
62
- Ie as RX_STAR,
63
- ge as RX_START_SPACE_WORD,
64
- pe as RX_TIME,
65
- He as RX_TRIM_LEFT,
66
- Fe as RX_TRIM_RIGHT,
67
- xe as RX_UNDERSCORE,
68
- fe as RX_UN_KEBAB,
69
- f as Spacing,
70
- O as TIME_FORMAT,
71
- F as TimeFormat,
72
- Be as exclude,
73
- be as extractCssVarName,
74
- de as flattenDeep,
75
- Ge as generateColorFromString,
76
- ce as generateHslFromString,
77
- Ue as getAbbreviation,
78
- Ve as getHashOfString,
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
- tE as getPageElevations,
82
- ye as hexToRgb,
83
- he as hslToColorString,
84
- ve as include,
85
- We as isAncestor,
86
- ke as isArray,
87
- we as isDescendant,
88
- Ke as isEmpty,
89
- Ye as isEqual,
90
- je as isNil,
91
- qe as isNull,
92
- ze as isNumber,
93
- Qe as isObject,
94
- Je as isString,
95
- TE as isUndefined,
96
- rE as isVisible,
97
- Ze as normalize,
98
- $e as pxToRem,
99
- sE as requestAF,
100
- eE as rgbToHex,
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
- EE as toArray,
103
- C as useControlAttributes,
104
- D as useDateFormat,
105
- i as useDateMask,
104
+ sE as toArray,
105
+ i as useControlAttributes,
106
+ N as useDateFormat,
107
+ X as useDateMask,
106
108
  S as useElevation,
107
- N as useIdAttribute,
108
- X as useLocale,
109
- P as useOverflow,
110
- L as usePopoverState,
111
- m as useProxyModelValue,
112
- u as useResponsive,
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
- M as useTimeMask,
116
- I as useToggle,
117
- g as useValidationAttributes
117
+ g as useTimeMask,
118
+ p as useToggle,
119
+ H as useValidationAttributes
118
120
  };
@@ -0,0 +1,4 @@
1
+ import { InjectionKey } from 'vue';
2
+ import { ZIndex } from '../types';
3
+ export declare const MIN_ZINDEX: InjectionKey<ZIndex>;
4
+ export declare const MAX_ZINDEX: InjectionKey<ZIndex>;
@@ -1,3 +1,4 @@
1
1
  export * from './DATE_FORMAT';
2
2
  export * from './LOCALE';
3
3
  export * from './TIME_FORMAT';
4
+ export * from './ZINDEX';
@@ -0,0 +1 @@
1
+ export type ZIndex = number;
@@ -11,3 +11,4 @@ export * from './ModelValue';
11
11
  export * from './SearchFunction';
12
12
  export * from './TimeFormat';
13
13
  export * from './Spacing';
14
+ export * from './ZIndex';
@@ -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.1",
3
+ "version": "25.0.2-beta.5750.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.1",
62
+ "@onereach/styles": "^25.0.2-beta.5750.0",
63
63
  "@vueuse/core": "11.3.0"
64
64
  },
65
65
  "devDependencies": {
@@ -69,6 +69,5 @@
69
69
  },
70
70
  "peerDependencies": {
71
71
  "vue": "3.3.4 || 2.6.14"
72
- },
73
- "gitHead": "854e8110401c09ceefdae2e3e51f29be4f9c3e01"
72
+ }
74
73
  }
@@ -1,4 +1,5 @@
1
1
  import { ComputedRef, Ref, computed, inject } from 'vue';
2
+
2
3
  import { DATE_FORMAT } from '../tokens';
3
4
  import { DateFormat, FormatFunction, ModelValue } from '../types';
4
5
 
@@ -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
- element.style.zIndex = String(Math.max(0, ...getPageElevations(element)) + 1);
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
@@ -1,4 +1,5 @@
1
1
  import { InjectionKey } from 'vue';
2
+
2
3
  import { DateFormat } from '../types';
3
4
 
4
5
  export const DATE_FORMAT: InjectionKey<`${DateFormat}`> = Symbol();
@@ -1,4 +1,5 @@
1
1
  import { InjectionKey } from 'vue';
2
+
2
3
  import { Locale } from '../types';
3
4
 
4
5
  export const LOCALE: InjectionKey<Locale> = Symbol();
@@ -1,4 +1,5 @@
1
1
  import { InjectionKey } from 'vue';
2
+
2
3
  import { TimeFormat } from '../types';
3
4
 
4
5
  export const TIME_FORMAT: InjectionKey<`${TimeFormat}`> = Symbol();
@@ -0,0 +1,6 @@
1
+ import { InjectionKey } from 'vue';
2
+
3
+ import { ZIndex } from '../types';
4
+
5
+ export const MIN_ZINDEX: InjectionKey<ZIndex> = Symbol();
6
+ export const MAX_ZINDEX: InjectionKey<ZIndex> = Symbol();
@@ -1,3 +1,4 @@
1
1
  export * from './DATE_FORMAT';
2
2
  export * from './LOCALE';
3
3
  export * from './TIME_FORMAT';
4
+ export * from './ZINDEX';
@@ -0,0 +1 @@
1
+ export type ZIndex = number;
@@ -11,3 +11,4 @@ export * from './ModelValue';
11
11
  export * from './SearchFunction';
12
12
  export * from './TimeFormat';
13
13
  export * from './Spacing';
14
+ export * from './ZIndex';
@@ -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
- };