@fiscozen/composables 0.1.18 → 0.1.20-autovertical.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/dist/composables.js +160 -149
- package/dist/composables.umd.cjs +1 -1
- package/package.json +3 -3
- package/src/FzFloating.vue +31 -3
- package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap +24 -12
- package/src/composables/index.ts +1 -1
- package/src/composables/useClickOutside.ts +12 -9
- package/src/composables/useCurrency.ts +7 -2
- package/src/composables/useFloating.ts +127 -79
- package/src/composables/useKeyDown.ts +4 -1
- package/src/composables/useKeyUp.ts +6 -4
- package/src/types.ts +10 -1
- package/src/utils/index.ts +16 -7
package/dist/composables.js
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
const L = (o, t,
|
|
3
|
-
let
|
|
4
|
-
const
|
|
5
|
-
if (
|
|
1
|
+
import { ref as h, reactive as W, onUnmounted as I, nextTick as T, onMounted as R, watch as w, onBeforeUnmount as $, getCurrentInstance as q, computed as C, defineComponent as U, useSlots as G, toRef as K, openBlock as x, createElementBlock as z, renderSlot as k, createElementVNode as S, unref as E, withDirectives as M, normalizeClass as P, vShow as A, createCommentVNode as D, createBlock as Q, Teleport as X } from "vue";
|
|
2
|
+
const L = (o, t, s, r) => {
|
|
3
|
+
let a = "right", e = "right-start";
|
|
4
|
+
const u = o.getBoundingClientRect(), v = t.getBoundingClientRect(), l = s.getBoundingClientRect(), m = (l.left - u.left - v.width) / u.width, n = (u.right - l.right - v.width) / u.width, i = (l.top - u.top - v.height) / u.height, f = (u.bottom - l.bottom - v.height) / u.height;
|
|
5
|
+
if (a = [
|
|
6
6
|
{
|
|
7
7
|
key: "right",
|
|
8
|
-
space:
|
|
8
|
+
space: n
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
key: "top",
|
|
12
|
-
space:
|
|
12
|
+
space: i
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
15
|
key: "bottom",
|
|
16
|
-
space:
|
|
16
|
+
space: f
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
key: "left",
|
|
20
|
-
space:
|
|
20
|
+
space: m
|
|
21
21
|
}
|
|
22
|
-
].sort((
|
|
23
|
-
switch (
|
|
22
|
+
].sort((p, c) => c.space - p.space)[0].key, !r)
|
|
23
|
+
switch (a) {
|
|
24
24
|
case "right":
|
|
25
25
|
case "left":
|
|
26
|
-
const
|
|
27
|
-
|
|
26
|
+
const p = (v.height - l.height) / 2;
|
|
27
|
+
u.top > l.top - p && (r = "end"), u.bottom < l.top - p && (r = "start");
|
|
28
28
|
break;
|
|
29
29
|
}
|
|
30
|
-
return e =
|
|
31
|
-
},
|
|
32
|
-
x: t.x + o.width *
|
|
33
|
-
y: t.y + o.height *
|
|
30
|
+
return e = r ? `${a}-${r}` : a, e;
|
|
31
|
+
}, Y = (o, t, s, r) => ({
|
|
32
|
+
x: t.x + o.width * s / 100,
|
|
33
|
+
y: t.y + o.height * r / 100
|
|
34
34
|
}), H = (o) => {
|
|
35
|
-
const t =
|
|
35
|
+
const t = h(null), s = h(null), r = h(null), a = h(null), e = W({
|
|
36
36
|
position: { x: 0, y: 0 }
|
|
37
|
-
}),
|
|
37
|
+
}), u = {
|
|
38
38
|
root: null,
|
|
39
39
|
rootMargin: "0px",
|
|
40
40
|
threshold: 1,
|
|
41
41
|
...o.element.intersectionOptions
|
|
42
|
-
},
|
|
43
|
-
},
|
|
42
|
+
}, v = (n, i) => {
|
|
43
|
+
}, l = h(new IntersectionObserver(v, u)), m = () => T(() => {
|
|
44
44
|
var F;
|
|
45
|
-
if (t.value = typeof o.element.domRef.value == "string" ? document.querySelector(o.element.domRef.value) : o.element.domRef.value, o.container ? (
|
|
45
|
+
if (t.value = typeof o.element.domRef.value == "string" ? document.querySelector(o.element.domRef.value) : o.element.domRef.value, o.container ? (s.value = typeof o.container.domRef.value == "string" ? document.querySelector(o.container.domRef.value) : o.container.domRef.value, s.value ?? (s.value = document.body)) : s.value = document.body, !t.value)
|
|
46
46
|
throw new Error("missing reference element for floating behavior");
|
|
47
|
-
o.opener && (
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
let
|
|
51
|
-
if (o.opener &&
|
|
52
|
-
const y =
|
|
53
|
-
switch (
|
|
47
|
+
o.opener && (r.value = typeof o.opener.domRef.value == "string" ? document.querySelector(o.opener.domRef.value) : o.opener.domRef.value), a.value = t.value.getBoundingClientRect();
|
|
48
|
+
const n = (F = r.value) == null ? void 0 : F.getBoundingClientRect(), i = s.value.getBoundingClientRect(), f = window.getComputedStyle(t.value);
|
|
49
|
+
l.value.observe(t.value), l.value.observe(s.value);
|
|
50
|
+
let d = o.position ? o.position.value : "auto", p = 0, c = 0;
|
|
51
|
+
if (o.opener && r.value && n) {
|
|
52
|
+
const y = n.left - parseFloat(f.marginLeft) - parseFloat(f.marginRight), N = n.left - parseFloat(f.marginLeft), b = n.top - parseFloat(f.marginTop) - parseFloat(f.marginBottom), O = n.top - parseFloat(f.marginTop);
|
|
53
|
+
switch (d) {
|
|
54
54
|
case "auto":
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
d = L(
|
|
56
|
+
s.value,
|
|
57
57
|
t.value,
|
|
58
|
-
|
|
58
|
+
r.value
|
|
59
59
|
);
|
|
60
60
|
break;
|
|
61
61
|
case "auto-start":
|
|
62
|
-
|
|
63
|
-
i.value,
|
|
64
|
-
t.value,
|
|
62
|
+
d = L(
|
|
65
63
|
s.value,
|
|
64
|
+
t.value,
|
|
65
|
+
r.value,
|
|
66
66
|
"start"
|
|
67
67
|
);
|
|
68
68
|
break;
|
|
69
69
|
case "auto-end":
|
|
70
|
-
|
|
71
|
-
i.value,
|
|
72
|
-
t.value,
|
|
70
|
+
d = L(
|
|
73
71
|
s.value,
|
|
72
|
+
t.value,
|
|
73
|
+
r.value,
|
|
74
74
|
"end"
|
|
75
75
|
);
|
|
76
76
|
break;
|
|
77
77
|
}
|
|
78
|
-
switch (
|
|
78
|
+
switch (d) {
|
|
79
79
|
case "bottom":
|
|
80
|
-
e.position.y =
|
|
80
|
+
e.position.y = n.bottom, e.position.x = N + n.width / 2, c = -50, p = 0;
|
|
81
81
|
break;
|
|
82
82
|
case "bottom-start":
|
|
83
|
-
e.position.y =
|
|
83
|
+
e.position.y = n.bottom, e.position.x = y, c = 0, p = 0;
|
|
84
84
|
break;
|
|
85
85
|
case "bottom-end":
|
|
86
|
-
e.position.y =
|
|
86
|
+
e.position.y = n.bottom, e.position.x = n.right, c = -100, p = 0;
|
|
87
87
|
break;
|
|
88
88
|
case "left-start":
|
|
89
|
-
e.position.y = b, e.position.x = y,
|
|
89
|
+
e.position.y = b, e.position.x = y, c = -100, p = 0;
|
|
90
90
|
break;
|
|
91
91
|
case "left":
|
|
92
|
-
e.position.y = O +
|
|
92
|
+
e.position.y = O + n.height / 2, e.position.x = y, p = -50, c = -100;
|
|
93
93
|
break;
|
|
94
94
|
case "left-end":
|
|
95
|
-
e.position.y =
|
|
95
|
+
e.position.y = n.bottom, e.position.x = y, p = -100, c = -100;
|
|
96
96
|
break;
|
|
97
97
|
case "top-start":
|
|
98
|
-
e.position.y = b, e.position.x = y,
|
|
98
|
+
e.position.y = b, e.position.x = y, p = -100, c = 0;
|
|
99
99
|
break;
|
|
100
100
|
case "top":
|
|
101
|
-
e.position.y = b, e.position.x = N +
|
|
101
|
+
e.position.y = b, e.position.x = N + n.width / 2, c = -50, p = -100;
|
|
102
102
|
break;
|
|
103
103
|
case "top-end":
|
|
104
|
-
e.position.y = b, e.position.x =
|
|
104
|
+
e.position.y = b, e.position.x = n.right, c = -100, p = -100;
|
|
105
105
|
break;
|
|
106
106
|
case "right-start":
|
|
107
|
-
e.position.y = b, e.position.x =
|
|
107
|
+
e.position.y = b, e.position.x = n.right, c = 0, p = 0;
|
|
108
108
|
break;
|
|
109
109
|
case "right":
|
|
110
|
-
e.position.y = O +
|
|
110
|
+
e.position.y = O + n.height / 2, e.position.x = n.right, p = -50, c = 0;
|
|
111
111
|
break;
|
|
112
112
|
case "right-end":
|
|
113
|
-
e.position.y =
|
|
113
|
+
e.position.y = n.bottom, e.position.x = n.right, p = -100, c = 0;
|
|
114
114
|
break;
|
|
115
115
|
}
|
|
116
116
|
} else
|
|
117
|
-
switch (
|
|
117
|
+
switch (d) {
|
|
118
118
|
case "bottom":
|
|
119
|
-
e.position.y =
|
|
119
|
+
e.position.y = i.bottom - a.value.height, e.position.x = i.left + i.width / 2, c = -50;
|
|
120
120
|
break;
|
|
121
121
|
case "left-end":
|
|
122
122
|
case "bottom-start":
|
|
123
|
-
e.position.y =
|
|
123
|
+
e.position.y = i.bottom - a.value.height, e.position.x = i.left;
|
|
124
124
|
break;
|
|
125
125
|
case "right-end":
|
|
126
126
|
case "bottom-end":
|
|
127
|
-
e.position.y =
|
|
127
|
+
e.position.y = i.bottom - a.value.height, e.position.x = i.right - a.value.width;
|
|
128
128
|
break;
|
|
129
129
|
case "left":
|
|
130
|
-
e.position.y =
|
|
130
|
+
e.position.y = i.top + (i.height - a.value.height) / 2, e.position.x = i.left;
|
|
131
131
|
break;
|
|
132
132
|
case "top-start":
|
|
133
133
|
case "left-start":
|
|
134
|
-
e.position.y =
|
|
134
|
+
e.position.y = i.top, e.position.x = i.left;
|
|
135
135
|
break;
|
|
136
136
|
case "top":
|
|
137
|
-
e.position.y =
|
|
137
|
+
e.position.y = i.top, e.position.x = i.left + (i.width - a.value.width) / 2;
|
|
138
138
|
break;
|
|
139
139
|
case "top-end":
|
|
140
140
|
case "right-start":
|
|
141
|
-
e.position.y =
|
|
141
|
+
e.position.y = i.top, e.position.x = i.right - a.value.width;
|
|
142
142
|
case "right":
|
|
143
|
-
e.position.y =
|
|
143
|
+
e.position.y = i.top + (i.height - a.value.height) / 2, e.position.x = i.right - a.value.width;
|
|
144
144
|
break;
|
|
145
145
|
}
|
|
146
|
-
const g =
|
|
147
|
-
e.position.x = g.x, e.position.y = g.y, g.x <
|
|
146
|
+
const g = Y(a.value, e.position, c, p);
|
|
147
|
+
e.position.x = g.x, e.position.y = g.y, g.x < i.left && (e.position.x = i.left, c = 0), g.x + a.value.width > i.right && (e.position.x = i.right - a.value.width, c = 0), g.y < i.top && (e.position.y = i.top, p = 0), g.y + a.value.height > i.bottom && (e.position.y = i.bottom - a.value.height, p = 0), t.value.style.top = `${e.position.y}px`, t.value.style.left = `${e.position.x}px`, t.value.style.display = "flex", a.value = t.value.getBoundingClientRect();
|
|
148
148
|
});
|
|
149
149
|
return I(() => {
|
|
150
|
-
|
|
150
|
+
l.value.disconnect();
|
|
151
151
|
}), {
|
|
152
152
|
float: e,
|
|
153
|
-
rect:
|
|
154
|
-
floatObserver:
|
|
155
|
-
setPosition:
|
|
153
|
+
rect: a,
|
|
154
|
+
floatObserver: l,
|
|
155
|
+
setPosition: m
|
|
156
156
|
};
|
|
157
157
|
};
|
|
158
158
|
function B(o) {
|
|
159
|
-
const t = window.matchMedia(o),
|
|
160
|
-
function
|
|
161
|
-
|
|
159
|
+
const t = window.matchMedia(o), s = h(t.matches);
|
|
160
|
+
function r(a) {
|
|
161
|
+
s.value = a.matches;
|
|
162
162
|
}
|
|
163
163
|
return R(() => {
|
|
164
|
-
t.addEventListener("change",
|
|
164
|
+
t.addEventListener("change", r);
|
|
165
165
|
}), I(() => {
|
|
166
|
-
t.removeEventListener("change",
|
|
167
|
-
}),
|
|
166
|
+
t.removeEventListener("change", r);
|
|
167
|
+
}), s;
|
|
168
168
|
}
|
|
169
169
|
function Z(o) {
|
|
170
170
|
return {
|
|
@@ -174,29 +174,29 @@ function Z(o) {
|
|
|
174
174
|
isSmaller(t) {
|
|
175
175
|
return B(`(max-width: ${o[t]})`);
|
|
176
176
|
},
|
|
177
|
-
isInBetween(t,
|
|
178
|
-
return B(`(min-width: ${o[t]}) and (max-width: ${o[
|
|
177
|
+
isInBetween(t, s) {
|
|
178
|
+
return B(`(min-width: ${o[t]}) and (max-width: ${o[s]})`);
|
|
179
179
|
}
|
|
180
180
|
};
|
|
181
181
|
}
|
|
182
|
-
function _(o, t,
|
|
182
|
+
function _(o, t, s) {
|
|
183
183
|
if (!o)
|
|
184
184
|
throw new Error("A target component has to be provided.");
|
|
185
185
|
if (!t)
|
|
186
186
|
throw new Error("A callback has to be provided.");
|
|
187
|
-
const
|
|
188
|
-
!o.value ||
|
|
187
|
+
const r = (a) => {
|
|
188
|
+
!o.value || a.target === o.value || a.composedPath().includes(o.value) || typeof t == "function" && t();
|
|
189
189
|
};
|
|
190
|
-
|
|
191
|
-
e && e.removeEventListener("click",
|
|
190
|
+
s && w(s, (a, e) => {
|
|
191
|
+
e && e.removeEventListener("click", r), a == null || a.addEventListener("click", r);
|
|
192
192
|
}), R(() => {
|
|
193
|
-
|
|
193
|
+
s || document.addEventListener("click", r);
|
|
194
194
|
}), $(() => {
|
|
195
|
-
if (
|
|
196
|
-
|
|
195
|
+
if (s) {
|
|
196
|
+
s.value.removeEventListener("click", r);
|
|
197
197
|
return;
|
|
198
198
|
}
|
|
199
|
-
document.removeEventListener("click",
|
|
199
|
+
document.removeEventListener("click", r);
|
|
200
200
|
});
|
|
201
201
|
}
|
|
202
202
|
function j(o, t) {
|
|
@@ -204,65 +204,76 @@ function j(o, t) {
|
|
|
204
204
|
throw new Error("A target component has to be provided.");
|
|
205
205
|
if (!t || typeof t != "function")
|
|
206
206
|
throw new Error("A callback has to be provided.");
|
|
207
|
-
const
|
|
208
|
-
t(
|
|
207
|
+
const s = (r) => {
|
|
208
|
+
t(r);
|
|
209
209
|
};
|
|
210
210
|
R(() => {
|
|
211
|
-
o.value.addEventListener("keydown",
|
|
211
|
+
o.value.addEventListener("keydown", s);
|
|
212
212
|
}), $(() => {
|
|
213
|
-
o.value.removeEventListener("keydown",
|
|
213
|
+
o.value.removeEventListener("keydown", s);
|
|
214
214
|
});
|
|
215
215
|
}
|
|
216
216
|
function V(o, t) {
|
|
217
217
|
if (!o || typeof o != "function")
|
|
218
218
|
throw new Error("A callback has to be provided.");
|
|
219
|
-
const
|
|
220
|
-
o(
|
|
219
|
+
const s = (r) => {
|
|
220
|
+
o(r);
|
|
221
221
|
};
|
|
222
222
|
R(() => {
|
|
223
223
|
if (!t) {
|
|
224
|
-
document.addEventListener("keyup",
|
|
224
|
+
document.addEventListener("keyup", s);
|
|
225
225
|
return;
|
|
226
226
|
}
|
|
227
|
-
t.value.addEventListener("keyup",
|
|
227
|
+
t.value.addEventListener("keyup", s);
|
|
228
228
|
}), $(() => {
|
|
229
229
|
if (!t) {
|
|
230
|
-
document.removeEventListener("keyup",
|
|
230
|
+
document.removeEventListener("keyup", s);
|
|
231
231
|
return;
|
|
232
232
|
}
|
|
233
|
-
t.value.removeEventListener("keyup",
|
|
233
|
+
t.value.removeEventListener("keyup", s);
|
|
234
234
|
});
|
|
235
235
|
}
|
|
236
236
|
const ee = () => {
|
|
237
|
-
const o =
|
|
238
|
-
C(() => t == null ? void 0 : t.props.modelValue);
|
|
239
|
-
const i = (l) => l.toLocaleString("it-IT", {
|
|
237
|
+
const o = h(null), t = q(), s = C(() => t == null ? void 0 : t.props.amount), r = h(), a = (n) => n.toLocaleString("it-IT", {
|
|
240
238
|
minimumFractionDigits: 2,
|
|
241
|
-
maximumFractionDigits: 2
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
239
|
+
maximumFractionDigits: 2,
|
|
240
|
+
useGrouping: !1
|
|
241
|
+
}), e = (n) => parseFloat(n.replace(/,/g, ".")), u = (n) => {
|
|
242
|
+
Number.isNaN(n) || t && (r.value = n, t.emit("update:amount", n));
|
|
243
|
+
}, v = (n) => {
|
|
244
|
+
setTimeout(() => {
|
|
245
|
+
o.value && (o.value.value = n);
|
|
246
|
+
}, 0);
|
|
247
|
+
}, l = (n) => (i) => {
|
|
248
|
+
if (!o.value || !i.target)
|
|
246
249
|
return;
|
|
247
|
-
let { value:
|
|
248
|
-
|
|
249
|
-
const
|
|
250
|
-
|
|
251
|
-
},
|
|
252
|
-
if (!o.value || !
|
|
250
|
+
let { value: f } = n;
|
|
251
|
+
f = f.replace(/[^0-9,.]/g, ""), v(f);
|
|
252
|
+
const d = e(f);
|
|
253
|
+
u(Number.isNaN(d) ? 0 : d);
|
|
254
|
+
}, m = (n) => {
|
|
255
|
+
if (!o.value || !n.target)
|
|
253
256
|
return;
|
|
254
|
-
let
|
|
255
|
-
Number.isNaN(
|
|
256
|
-
const
|
|
257
|
-
|
|
257
|
+
let i = e(n.target.value);
|
|
258
|
+
Number.isNaN(i) && (i = 0);
|
|
259
|
+
const f = a(i);
|
|
260
|
+
v(f), u(e(f));
|
|
258
261
|
};
|
|
259
|
-
return
|
|
260
|
-
|
|
262
|
+
return w(o, (n, i) => {
|
|
263
|
+
n && (i && (i == null || i.removeEventListener("input", l(n)), i == null || i.removeEventListener("blur", m)), n.addEventListener("input", l(n)), n.addEventListener("blur", m), s.value && (n.value = a(s.value)));
|
|
264
|
+
}), w(s, (n) => {
|
|
265
|
+
T(() => {
|
|
266
|
+
if (!(!o.value || !n) && r.value !== n) {
|
|
267
|
+
const i = a(n);
|
|
268
|
+
o.value.value = i, r.value = n;
|
|
269
|
+
}
|
|
270
|
+
});
|
|
261
271
|
}), {
|
|
262
272
|
inputRef: o,
|
|
263
|
-
parse:
|
|
264
|
-
format:
|
|
265
|
-
|
|
273
|
+
parse: e,
|
|
274
|
+
format: a,
|
|
275
|
+
emitAmount: u,
|
|
276
|
+
setValue: v
|
|
266
277
|
};
|
|
267
278
|
}, te = /* @__PURE__ */ U({
|
|
268
279
|
__name: "FzFloating",
|
|
@@ -276,70 +287,70 @@ const ee = () => {
|
|
|
276
287
|
teleport: { type: Boolean, default: !1 }
|
|
277
288
|
},
|
|
278
289
|
setup(o) {
|
|
279
|
-
const t = o,
|
|
290
|
+
const t = o, s = h(null), r = h(null), a = G(), e = {
|
|
280
291
|
position: C(() => t.position),
|
|
281
292
|
element: {
|
|
282
|
-
domRef:
|
|
293
|
+
domRef: r
|
|
283
294
|
},
|
|
284
295
|
container: {
|
|
285
|
-
domRef:
|
|
296
|
+
domRef: K(t.container || document.body)
|
|
286
297
|
}
|
|
287
298
|
};
|
|
288
|
-
|
|
289
|
-
domRef:
|
|
299
|
+
a.opener && (e.opener = {
|
|
300
|
+
domRef: s
|
|
290
301
|
});
|
|
291
|
-
const
|
|
292
|
-
|
|
302
|
+
const u = H(e);
|
|
303
|
+
w(
|
|
293
304
|
() => t.position,
|
|
294
|
-
() => t.isOpen &&
|
|
295
|
-
),
|
|
305
|
+
() => t.isOpen && u.setPosition()
|
|
306
|
+
), w(
|
|
296
307
|
() => t.isOpen,
|
|
297
|
-
(
|
|
298
|
-
!
|
|
308
|
+
(l) => {
|
|
309
|
+
!l || !r.value || (r.value.style.top = "0px", r.value.style.left = "0px", r.value.style.transform = "none", u.setPosition());
|
|
299
310
|
}
|
|
300
311
|
);
|
|
301
|
-
const
|
|
302
|
-
return (
|
|
303
|
-
|
|
312
|
+
const v = C(() => t.overrideContentClass ? t.contentClass : ["bg-core-white fixed p-4 z-10", t.contentClass]);
|
|
313
|
+
return (l, m) => (x(), z("div", null, [
|
|
314
|
+
k(l.$slots, "opener-start"),
|
|
304
315
|
S("div", {
|
|
305
316
|
ref_key: "opener",
|
|
306
|
-
ref:
|
|
317
|
+
ref: s,
|
|
307
318
|
class: "inline-flex"
|
|
308
319
|
}, [
|
|
309
|
-
|
|
310
|
-
isOpen:
|
|
311
|
-
floating: E(
|
|
320
|
+
k(l.$slots, "opener", {
|
|
321
|
+
isOpen: l.isOpen,
|
|
322
|
+
floating: E(u)
|
|
312
323
|
})
|
|
313
324
|
], 512),
|
|
314
|
-
|
|
315
|
-
|
|
325
|
+
k(l.$slots, "opener-end"),
|
|
326
|
+
l.teleport ? D("", !0) : M((x(), z("div", {
|
|
316
327
|
key: 0,
|
|
317
328
|
ref_key: "content",
|
|
318
|
-
ref:
|
|
319
|
-
class: P(["fz__floating__content bg-core-white fixed p-4 z-10",
|
|
329
|
+
ref: r,
|
|
330
|
+
class: P(["fz__floating__content bg-core-white fixed p-4 z-10", v.value])
|
|
320
331
|
}, [
|
|
321
|
-
|
|
322
|
-
isOpen:
|
|
323
|
-
floating: E(
|
|
332
|
+
k(l.$slots, "default", {
|
|
333
|
+
isOpen: l.isOpen,
|
|
334
|
+
floating: E(u)
|
|
324
335
|
})
|
|
325
336
|
], 2)), [
|
|
326
|
-
[A,
|
|
337
|
+
[A, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
|
|
327
338
|
]),
|
|
328
|
-
|
|
339
|
+
l.teleport ? (x(), Q(X, {
|
|
329
340
|
key: 1,
|
|
330
341
|
to: "body"
|
|
331
342
|
}, [
|
|
332
343
|
M(S("div", {
|
|
333
344
|
ref_key: "content",
|
|
334
|
-
ref:
|
|
335
|
-
class: P(["fz__floating__content bg-core-white absolute p-4 z-10",
|
|
345
|
+
ref: r,
|
|
346
|
+
class: P(["fz__floating__content bg-core-white absolute p-4 z-10", v.value])
|
|
336
347
|
}, [
|
|
337
|
-
|
|
338
|
-
isOpen:
|
|
339
|
-
floating: E(
|
|
348
|
+
k(l.$slots, "default", {
|
|
349
|
+
isOpen: l.isOpen,
|
|
350
|
+
floating: E(u)
|
|
340
351
|
})
|
|
341
352
|
], 2), [
|
|
342
|
-
[A,
|
|
353
|
+
[A, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
|
|
343
354
|
])
|
|
344
355
|
])) : D("", !0)
|
|
345
356
|
]));
|
package/dist/composables.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(h,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(h=typeof globalThis<"u"?globalThis:h||self,t(h.FzComposables={},h.Vue))})(this,function(h,t){"use strict";const R=(n,o,
|
|
1
|
+
(function(h,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(h=typeof globalThis<"u"?globalThis:h||self,t(h.FzComposables={},h.Vue))})(this,function(h,t){"use strict";const R=(n,o,r,a)=>{let l="right",e="right-start";const p=n.getBoundingClientRect(),m=o.getBoundingClientRect(),c=r.getBoundingClientRect(),y=(c.left-p.left-m.width)/p.width,i=(p.right-c.right-m.width)/p.width,s=(c.top-p.top-m.height)/p.height,d=(p.bottom-c.bottom-m.height)/p.height;if(l=[{key:"right",space:i},{key:"top",space:s},{key:"bottom",space:d},{key:"left",space:y}].sort((u,f)=>f.space-u.space)[0].key,!a)switch(l){case"right":case"left":const u=(m.height-c.height)/2;p.top>c.top-u&&(a="end"),p.bottom<c.top-u&&(a="start");break}return e=a?`${l}-${a}`:l,e},L=(n,o,r,a)=>({x:o.x+n.width*r/100,y:o.y+n.height*a/100}),E=n=>{const o=t.ref(null),r=t.ref(null),a=t.ref(null),l=t.ref(null),e=t.reactive({position:{x:0,y:0}}),p={root:null,rootMargin:"0px",threshold:1,...n.element.intersectionOptions},m=(i,s)=>{},c=t.ref(new IntersectionObserver(m,p)),y=()=>t.nextTick(()=>{var B;if(o.value=typeof n.element.domRef.value=="string"?document.querySelector(n.element.domRef.value):n.element.domRef.value,n.container?(r.value=typeof n.container.domRef.value=="string"?document.querySelector(n.container.domRef.value):n.container.domRef.value,r.value??(r.value=document.body)):r.value=document.body,!o.value)throw new Error("missing reference element for floating behavior");n.opener&&(a.value=typeof n.opener.domRef.value=="string"?document.querySelector(n.opener.domRef.value):n.opener.domRef.value),l.value=o.value.getBoundingClientRect();const i=(B=a.value)==null?void 0:B.getBoundingClientRect(),s=r.value.getBoundingClientRect(),d=window.getComputedStyle(o.value);c.value.observe(o.value),c.value.observe(r.value);let g=n.position?n.position.value:"auto",u=0,f=0;if(n.opener&&a.value&&i){const b=i.left-parseFloat(d.marginLeft)-parseFloat(d.marginRight),C=i.left-parseFloat(d.marginLeft),k=i.top-parseFloat(d.marginTop)-parseFloat(d.marginBottom),x=i.top-parseFloat(d.marginTop);switch(g){case"auto":g=R(r.value,o.value,a.value);break;case"auto-start":g=R(r.value,o.value,a.value,"start");break;case"auto-end":g=R(r.value,o.value,a.value,"end");break}switch(g){case"bottom":e.position.y=i.bottom,e.position.x=C+i.width/2,f=-50,u=0;break;case"bottom-start":e.position.y=i.bottom,e.position.x=b,f=0,u=0;break;case"bottom-end":e.position.y=i.bottom,e.position.x=i.right,f=-100,u=0;break;case"left-start":e.position.y=k,e.position.x=b,f=-100,u=0;break;case"left":e.position.y=x+i.height/2,e.position.x=b,u=-50,f=-100;break;case"left-end":e.position.y=i.bottom,e.position.x=b,u=-100,f=-100;break;case"top-start":e.position.y=k,e.position.x=b,u=-100,f=0;break;case"top":e.position.y=k,e.position.x=C+i.width/2,f=-50,u=-100;break;case"top-end":e.position.y=k,e.position.x=i.right,f=-100,u=-100;break;case"right-start":e.position.y=k,e.position.x=i.right,f=0,u=0;break;case"right":e.position.y=x+i.height/2,e.position.x=i.right,u=-50,f=0;break;case"right-end":e.position.y=i.bottom,e.position.x=i.right,u=-100,f=0;break}}else switch(g){case"bottom":e.position.y=s.bottom-l.value.height,e.position.x=s.left+s.width/2,f=-50;break;case"left-end":case"bottom-start":e.position.y=s.bottom-l.value.height,e.position.x=s.left;break;case"right-end":case"bottom-end":e.position.y=s.bottom-l.value.height,e.position.x=s.right-l.value.width;break;case"left":e.position.y=s.top+(s.height-l.value.height)/2,e.position.x=s.left;break;case"top-start":case"left-start":e.position.y=s.top,e.position.x=s.left;break;case"top":e.position.y=s.top,e.position.x=s.left+(s.width-l.value.width)/2;break;case"top-end":case"right-start":e.position.y=s.top,e.position.x=s.right-l.value.width;case"right":e.position.y=s.top+(s.height-l.value.height)/2,e.position.x=s.right-l.value.width;break}const v=L(l.value,e.position,f,u);e.position.x=v.x,e.position.y=v.y,v.x<s.left&&(e.position.x=s.left,f=0),v.x+l.value.width>s.right&&(e.position.x=s.right-l.value.width,f=0),v.y<s.top&&(e.position.y=s.top,u=0),v.y+l.value.height>s.bottom&&(e.position.y=s.bottom-l.value.height,u=0),o.value.style.top=`${e.position.y}px`,o.value.style.left=`${e.position.x}px`,o.value.style.display="flex",l.value=o.value.getBoundingClientRect()});return t.onUnmounted(()=>{c.value.disconnect()}),{float:e,rect:l,floatObserver:c,setPosition:y}};function w(n){const o=window.matchMedia(n),r=t.ref(o.matches);function a(l){r.value=l.matches}return t.onMounted(()=>{o.addEventListener("change",a)}),t.onUnmounted(()=>{o.removeEventListener("change",a)}),r}function $(n){return{isGreater(o){return w(`(min-width: ${n[o]})`)},isSmaller(o){return w(`(max-width: ${n[o]})`)},isInBetween(o,r){return w(`(min-width: ${n[o]}) and (max-width: ${n[r]})`)}}}function S(n,o,r){if(!n)throw new Error("A target component has to be provided.");if(!o)throw new Error("A callback has to be provided.");const a=l=>{!n.value||l.target===n.value||l.composedPath().includes(n.value)||typeof o=="function"&&o()};r&&t.watch(r,(l,e)=>{e&&e.removeEventListener("click",a),l==null||l.addEventListener("click",a)}),t.onMounted(()=>{r||document.addEventListener("click",a)}),t.onBeforeUnmount(()=>{if(r){r.value.removeEventListener("click",a);return}document.removeEventListener("click",a)})}function F(n,o){if(!n)throw new Error("A target component has to be provided.");if(!o||typeof o!="function")throw new Error("A callback has to be provided.");const r=a=>{o(a)};t.onMounted(()=>{n.value.addEventListener("keydown",r)}),t.onBeforeUnmount(()=>{n.value.removeEventListener("keydown",r)})}function N(n,o){if(!n||typeof n!="function")throw new Error("A callback has to be provided.");const r=a=>{n(a)};t.onMounted(()=>{if(!o){document.addEventListener("keyup",r);return}o.value.addEventListener("keyup",r)}),t.onBeforeUnmount(()=>{if(!o){document.removeEventListener("keyup",r);return}o.value.removeEventListener("keyup",r)})}const O=()=>{const n=t.ref(null),o=t.getCurrentInstance(),r=t.computed(()=>o==null?void 0:o.props.amount),a=t.ref(),l=i=>i.toLocaleString("it-IT",{minimumFractionDigits:2,maximumFractionDigits:2,useGrouping:!1}),e=i=>parseFloat(i.replace(/,/g,".")),p=i=>{Number.isNaN(i)||o&&(a.value=i,o.emit("update:amount",i))},m=i=>{setTimeout(()=>{n.value&&(n.value.value=i)},0)},c=i=>s=>{if(!n.value||!s.target)return;let{value:d}=i;d=d.replace(/[^0-9,.]/g,""),m(d);const g=e(d);p(Number.isNaN(g)?0:g)},y=i=>{if(!n.value||!i.target)return;let s=e(i.target.value);Number.isNaN(s)&&(s=0);const d=l(s);m(d),p(e(d))};return t.watch(n,(i,s)=>{i&&(s&&(s==null||s.removeEventListener("input",c(i)),s==null||s.removeEventListener("blur",y)),i.addEventListener("input",c(i)),i.addEventListener("blur",y),r.value&&(i.value=l(r.value)))}),t.watch(r,i=>{t.nextTick(()=>{if(!(!n.value||!i)&&a.value!==i){const s=l(i);n.value.value=s,a.value=i}})}),{inputRef:n,parse:e,format:l,emitAmount:p,setValue:m}},z=t.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{},contentClass:{},openerClass:{},overrideContentClass:{type:Boolean},teleport:{type:Boolean,default:!1}},setup(n){const o=n,r=t.ref(null),a=t.ref(null),l=t.useSlots(),e={position:t.computed(()=>o.position),element:{domRef:a},container:{domRef:t.toRef(o.container||document.body)}};l.opener&&(e.opener={domRef:r});const p=E(e);t.watch(()=>o.position,()=>o.isOpen&&p.setPosition()),t.watch(()=>o.isOpen,c=>{!c||!a.value||(a.value.style.top="0px",a.value.style.left="0px",a.value.style.transform="none",p.setPosition())});const m=t.computed(()=>o.overrideContentClass?o.contentClass:["bg-core-white fixed p-4 z-10",o.contentClass]);return(c,y)=>(t.openBlock(),t.createElementBlock("div",null,[t.renderSlot(c.$slots,"opener-start"),t.createElementVNode("div",{ref_key:"opener",ref:r,class:"inline-flex"},[t.renderSlot(c.$slots,"opener",{isOpen:c.isOpen,floating:t.unref(p)})],512),t.renderSlot(c.$slots,"opener-end"),c.teleport?t.createCommentVNode("",!0):t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"content",ref:a,class:t.normalizeClass(["fz__floating__content bg-core-white fixed p-4 z-10",m.value])},[t.renderSlot(c.$slots,"default",{isOpen:c.isOpen,floating:t.unref(p)})],2)),[[t.vShow,c.$slots.default&&(!c.$slots.opener||c.$slots.opener&&c.isOpen)]]),c.teleport?(t.openBlock(),t.createBlock(t.Teleport,{key:1,to:"body"},[t.withDirectives(t.createElementVNode("div",{ref_key:"content",ref:a,class:t.normalizeClass(["fz__floating__content bg-core-white absolute p-4 z-10",m.value])},[t.renderSlot(c.$slots,"default",{isOpen:c.isOpen,floating:t.unref(p)})],2),[[t.vShow,c.$slots.default&&(!c.$slots.opener||c.$slots.opener&&c.isOpen)]])])):t.createCommentVNode("",!0)]))}});h.FzFloating=z,h.useBreakpoints=$,h.useClickOutside=S,h.useCurrency=O,h.useFloating=E,h.useKeyDown=F,h.useKeyUp=N,h.useMediaQuery=w,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fiscozen/composables",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.20-autovertical.1",
|
|
4
4
|
"description": "Design System utility composables",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -25,9 +25,9 @@
|
|
|
25
25
|
"vite": "^5.0.10",
|
|
26
26
|
"vitest": "^1.2.0",
|
|
27
27
|
"vue-tsc": "^1.8.25",
|
|
28
|
-
"@fiscozen/tsconfig": "^0.1.0",
|
|
29
28
|
"@fiscozen/eslint-config": "^0.1.0",
|
|
30
|
-
"@fiscozen/prettier-config": "^0.1.0"
|
|
29
|
+
"@fiscozen/prettier-config": "^0.1.0",
|
|
30
|
+
"@fiscozen/tsconfig": "^0.1.0"
|
|
31
31
|
},
|
|
32
32
|
"license": "ISC",
|
|
33
33
|
"scripts": {
|