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