@fiscozen/composables 0.1.18 → 0.1.20-beta.2

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.
Files changed (4) hide show
  1. package/dist/composables.js +160 -149
  2. package/dist/composables.umd.cjs +1 -1
  3. package/package.json +3 -3
  4. package/src/composables/useCurrency.ts +40 -12
package/dist/composables.js CHANGED
@@ -1,170 +1,170 @@
1
- import { ref as v, reactive as W, onUnmounted as I, nextTick as q, onMounted as R, watch as k, onBeforeUnmount as $, getCurrentInstance as T, computed as C, defineComponent as U, useSlots as K, toRef as Q, openBlock as x, createElementBlock as z, renderSlot as w, createElementVNode as S, unref as E, withDirectives as M, normalizeClass as P, vShow as A, createCommentVNode as D, createBlock as X, Teleport as Y } from "vue";
2
- const L = (o, t, i, s) => {
3
- let r = "right", e = "right-start";
4
- const p = o.getBoundingClientRect(), l = t.getBoundingClientRect(), n = i.getBoundingClientRect(), d = (n.left - p.left - l.width) / p.width, u = (p.right - n.right - l.width) / p.width, a = (n.top - p.top - l.height) / p.height, h = (p.bottom - n.bottom - l.height) / p.height;
5
- if (r = [
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: u
8
+ space: n
9
9
  },
10
10
  {
11
11
  key: "top",
12
- space: a
12
+ space: i
13
13
  },
14
14
  {
15
15
  key: "bottom",
16
- space: h
16
+ space: f
17
17
  },
18
18
  {
19
19
  key: "left",
20
- space: d
20
+ space: m
21
21
  }
22
- ].sort((c, f) => f.space - c.space)[0].key, !s)
23
- switch (r) {
22
+ ].sort((p, c) => c.space - p.space)[0].key, !r)
23
+ switch (a) {
24
24
  case "right":
25
25
  case "left":
26
- const c = (l.height - n.height) / 2;
27
- p.top > n.top - c && (s = "end"), p.bottom < n.top - c && (s = "start");
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 = s ? `${r}-${s}` : r, e;
31
- }, G = (o, t, i, s) => ({
32
- x: t.x + o.width * i / 100,
33
- y: t.y + o.height * s / 100
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 = v(null), i = v(null), s = v(null), r = v(null), e = W({
35
+ const t = h(null), s = h(null), r = h(null), a = h(null), e = W({
36
36
  position: { x: 0, y: 0 }
37
- }), p = {
37
+ }), u = {
38
38
  root: null,
39
39
  rootMargin: "0px",
40
40
  threshold: 1,
41
41
  ...o.element.intersectionOptions
42
- }, l = (u, a) => {
43
- }, n = v(new IntersectionObserver(l, p)), d = () => q(() => {
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 ? (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, !t.value)
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 && (s.value = typeof o.opener.domRef.value == "string" ? document.querySelector(o.opener.domRef.value) : o.opener.domRef.value), r.value = t.value.getBoundingClientRect();
48
- const u = (F = s.value) == null ? void 0 : F.getBoundingClientRect(), a = i.value.getBoundingClientRect(), h = window.getComputedStyle(t.value);
49
- n.value.observe(t.value), n.value.observe(i.value);
50
- let m = o.position ? o.position.value : "auto", c = 0, f = 0;
51
- if (o.opener && s.value && u) {
52
- const y = u.left - parseFloat(h.marginLeft) - parseFloat(h.marginRight), N = u.left - parseFloat(h.marginLeft), b = u.top - parseFloat(h.marginTop) - parseFloat(h.marginBottom), O = u.top - parseFloat(h.marginTop);
53
- switch (m) {
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
- m = L(
56
- i.value,
55
+ d = L(
56
+ s.value,
57
57
  t.value,
58
- s.value
58
+ r.value
59
59
  );
60
60
  break;
61
61
  case "auto-start":
62
- m = L(
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
- m = L(
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 (m) {
78
+ switch (d) {
79
79
  case "bottom":
80
- e.position.y = u.bottom, e.position.x = N + u.width / 2, f = -50, c = 0;
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 = u.bottom, e.position.x = y, f = 0, c = 0;
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 = u.bottom, e.position.x = u.right, f = -100, c = 0;
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, f = -100, c = 0;
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 + u.height / 2, e.position.x = y, c = -50, f = -100;
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 = u.bottom, e.position.x = y, c = -100, f = -100;
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, c = -100, f = 0;
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 + u.width / 2, f = -50, c = -100;
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 = u.right, f = -100, c = -100;
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 = u.right, f = 0, c = 0;
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 + u.height / 2, e.position.x = u.right, c = -50, f = 0;
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 = u.bottom, e.position.x = u.right, c = -100, f = 0;
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 (m) {
117
+ switch (d) {
118
118
  case "bottom":
119
- e.position.y = a.bottom - r.value.height, e.position.x = a.left + a.width / 2, f = -50;
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 = a.bottom - r.value.height, e.position.x = a.left;
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 = a.bottom - r.value.height, e.position.x = a.right - r.value.width;
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 = a.top + (a.height - r.value.height) / 2, e.position.x = a.left;
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 = a.top, e.position.x = a.left;
134
+ e.position.y = i.top, e.position.x = i.left;
135
135
  break;
136
136
  case "top":
137
- e.position.y = a.top, e.position.x = a.left + (a.width - r.value.width) / 2;
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 = a.top, e.position.x = a.right - r.value.width;
141
+ e.position.y = i.top, e.position.x = i.right - a.value.width;
142
142
  case "right":
143
- e.position.y = a.top + (a.height - r.value.height) / 2, e.position.x = a.right - r.value.width;
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 = G(r.value, e.position, f, c);
147
- e.position.x = g.x, e.position.y = g.y, g.x < a.left && (e.position.x = a.left, f = 0), g.x + r.value.width > a.right && (e.position.x = a.right - r.value.width, f = 0), g.y < a.top && (e.position.y = a.top, c = 0), g.y + r.value.height > a.bottom && (e.position.y = a.bottom - r.value.height, c = 0), t.value.style.top = `${e.position.y}px`, t.value.style.left = `${e.position.x}px`, t.value.style.display = "flex", r.value = t.value.getBoundingClientRect();
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
- n.value.disconnect();
150
+ l.value.disconnect();
151
151
  }), {
152
152
  float: e,
153
- rect: r,
154
- floatObserver: n,
155
- setPosition: d
153
+ rect: a,
154
+ floatObserver: l,
155
+ setPosition: m
156
156
  };
157
157
  };
158
158
  function B(o) {
159
- const t = window.matchMedia(o), i = v(t.matches);
160
- function s(r) {
161
- i.value = r.matches;
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", s);
164
+ t.addEventListener("change", r);
165
165
  }), I(() => {
166
- t.removeEventListener("change", s);
167
- }), i;
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, i) {
178
- return B(`(min-width: ${o[t]}) and (max-width: ${o[i]})`);
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, i) {
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 s = (r) => {
188
- !o.value || r.target === o.value || r.composedPath().includes(o.value) || typeof t == "function" && t();
187
+ const r = (a) => {
188
+ !o.value || a.target === o.value || a.composedPath().includes(o.value) || typeof t == "function" && t();
189
189
  };
190
- i && k(i, (r, e) => {
191
- e && e.removeEventListener("click", s), r == null || r.addEventListener("click", s);
190
+ s && w(s, (a, e) => {
191
+ e && e.removeEventListener("click", r), a == null || a.addEventListener("click", r);
192
192
  }), R(() => {
193
- i || document.addEventListener("click", s);
193
+ s || document.addEventListener("click", r);
194
194
  }), $(() => {
195
- if (i) {
196
- i.value.removeEventListener("click", s);
195
+ if (s) {
196
+ s.value.removeEventListener("click", r);
197
197
  return;
198
198
  }
199
- document.removeEventListener("click", s);
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 i = (s) => {
208
- t(s);
207
+ const s = (r) => {
208
+ t(r);
209
209
  };
210
210
  R(() => {
211
- o.value.addEventListener("keydown", i);
211
+ o.value.addEventListener("keydown", s);
212
212
  }), $(() => {
213
- o.value.removeEventListener("keydown", i);
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 i = (s) => {
220
- o(s);
219
+ const s = (r) => {
220
+ o(r);
221
221
  };
222
222
  R(() => {
223
223
  if (!t) {
224
- document.addEventListener("keyup", i);
224
+ document.addEventListener("keyup", s);
225
225
  return;
226
226
  }
227
- t.value.addEventListener("keyup", i);
227
+ t.value.addEventListener("keyup", s);
228
228
  }), $(() => {
229
229
  if (!t) {
230
- document.removeEventListener("keyup", i);
230
+ document.removeEventListener("keyup", s);
231
231
  return;
232
232
  }
233
- t.value.removeEventListener("keyup", i);
233
+ t.value.removeEventListener("keyup", s);
234
234
  });
235
235
  }
236
236
  const ee = () => {
237
- const o = v(null), t = T();
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
- }), s = (l) => parseFloat(l), r = (l) => {
243
- Number.isNaN(l) || t && t.emit("update:modelValue", l);
244
- }, e = (l) => (n) => {
245
- if (!o.value || !n.target)
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: d } = l;
248
- d = d.replace(/[^0-9,.]/g, ""), o.value.value = d;
249
- const u = s(d);
250
- r(Number.isNaN(u) ? 0 : u);
251
- }, p = (l) => {
252
- if (!o.value || !l.target)
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 n = s(l.target.value.replace(/,/g, "."));
255
- Number.isNaN(n) && (n = 0);
256
- const d = i(n);
257
- o.value.value = d, r(n);
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 k(o, (l, n) => {
260
- l && (n && (n == null || n.removeEventListener("input", e(l)), n == null || n.removeEventListener("blur", p)), l.addEventListener("input", e(l)), l.addEventListener("blur", p));
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: s,
264
- format: i,
265
- setValue: r
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, i = v(null), s = v(null), r = K(), e = {
290
+ const t = o, s = h(null), r = h(null), a = G(), e = {
280
291
  position: C(() => t.position),
281
292
  element: {
282
- domRef: s
293
+ domRef: r
283
294
  },
284
295
  container: {
285
- domRef: Q(t.container || document.body)
296
+ domRef: K(t.container || document.body)
286
297
  }
287
298
  };
288
- r.opener && (e.opener = {
289
- domRef: i
299
+ a.opener && (e.opener = {
300
+ domRef: s
290
301
  });
291
- const p = H(e);
292
- k(
302
+ const u = H(e);
303
+ w(
293
304
  () => t.position,
294
- () => t.isOpen && p.setPosition()
295
- ), k(
305
+ () => t.isOpen && u.setPosition()
306
+ ), w(
296
307
  () => t.isOpen,
297
- (n) => {
298
- !n || !s.value || (s.value.style.top = "0px", s.value.style.left = "0px", s.value.style.transform = "none", p.setPosition());
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 l = C(() => t.overrideContentClass ? t.contentClass : ["bg-core-white fixed p-4 z-10", t.contentClass]);
302
- return (n, d) => (x(), z("div", null, [
303
- w(n.$slots, "opener-start"),
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: i,
317
+ ref: s,
307
318
  class: "inline-flex"
308
319
  }, [
309
- w(n.$slots, "opener", {
310
- isOpen: n.isOpen,
311
- floating: E(p)
320
+ k(l.$slots, "opener", {
321
+ isOpen: l.isOpen,
322
+ floating: E(u)
312
323
  })
313
324
  ], 512),
314
- w(n.$slots, "opener-end"),
315
- n.teleport ? D("", !0) : M((x(), z("div", {
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: s,
319
- class: P(["fz__floating__content bg-core-white fixed p-4 z-10", l.value])
329
+ ref: r,
330
+ class: P(["fz__floating__content bg-core-white fixed p-4 z-10", v.value])
320
331
  }, [
321
- w(n.$slots, "default", {
322
- isOpen: n.isOpen,
323
- floating: E(p)
332
+ k(l.$slots, "default", {
333
+ isOpen: l.isOpen,
334
+ floating: E(u)
324
335
  })
325
336
  ], 2)), [
326
- [A, n.$slots.default && (!n.$slots.opener || n.$slots.opener && n.isOpen)]
337
+ [A, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
327
338
  ]),
328
- n.teleport ? (x(), X(Y, {
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: s,
335
- class: P(["fz__floating__content bg-core-white absolute p-4 z-10", l.value])
345
+ ref: r,
346
+ class: P(["fz__floating__content bg-core-white absolute p-4 z-10", v.value])
336
347
  }, [
337
- w(n.$slots, "default", {
338
- isOpen: n.isOpen,
339
- floating: E(p)
348
+ k(l.$slots, "default", {
349
+ isOpen: l.isOpen,
350
+ floating: E(u)
340
351
  })
341
352
  ], 2), [
342
- [A, n.$slots.default && (!n.$slots.opener || n.$slots.opener && n.isOpen)]
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,s,r)=>{let a="right",e="right-start";const u=n.getBoundingClientRect(),p=o.getBoundingClientRect(),i=s.getBoundingClientRect(),m=(i.left-u.left-p.width)/u.width,c=(u.right-i.right-p.width)/u.width,l=(i.top-u.top-p.height)/u.height,g=(u.bottom-i.bottom-p.height)/u.height;if(a=[{key:"right",space:c},{key:"top",space:l},{key:"bottom",space:g},{key:"left",space:m}].sort((f,d)=>d.space-f.space)[0].key,!r)switch(a){case"right":case"left":const f=(p.height-i.height)/2;u.top>i.top-f&&(r="end"),u.bottom<i.top-f&&(r="start");break}return e=r?`${a}-${r}`:a,e},L=(n,o,s,r)=>({x:o.x+n.width*s/100,y:o.y+n.height*r/100}),E=n=>{const o=t.ref(null),s=t.ref(null),r=t.ref(null),a=t.ref(null),e=t.reactive({position:{x:0,y:0}}),u={root:null,rootMargin:"0px",threshold:1,...n.element.intersectionOptions},p=(c,l)=>{},i=t.ref(new IntersectionObserver(p,u)),m=()=>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?(s.value=typeof n.container.domRef.value=="string"?document.querySelector(n.container.domRef.value):n.container.domRef.value,s.value??(s.value=document.body)):s.value=document.body,!o.value)throw new Error("missing reference element for floating behavior");n.opener&&(r.value=typeof n.opener.domRef.value=="string"?document.querySelector(n.opener.domRef.value):n.opener.domRef.value),a.value=o.value.getBoundingClientRect();const c=(B=r.value)==null?void 0:B.getBoundingClientRect(),l=s.value.getBoundingClientRect(),g=window.getComputedStyle(o.value);i.value.observe(o.value),i.value.observe(s.value);let y=n.position?n.position.value:"auto",f=0,d=0;if(n.opener&&r.value&&c){const b=c.left-parseFloat(g.marginLeft)-parseFloat(g.marginRight),C=c.left-parseFloat(g.marginLeft),w=c.top-parseFloat(g.marginTop)-parseFloat(g.marginBottom),x=c.top-parseFloat(g.marginTop);switch(y){case"auto":y=R(s.value,o.value,r.value);break;case"auto-start":y=R(s.value,o.value,r.value,"start");break;case"auto-end":y=R(s.value,o.value,r.value,"end");break}switch(y){case"bottom":e.position.y=c.bottom,e.position.x=C+c.width/2,d=-50,f=0;break;case"bottom-start":e.position.y=c.bottom,e.position.x=b,d=0,f=0;break;case"bottom-end":e.position.y=c.bottom,e.position.x=c.right,d=-100,f=0;break;case"left-start":e.position.y=w,e.position.x=b,d=-100,f=0;break;case"left":e.position.y=x+c.height/2,e.position.x=b,f=-50,d=-100;break;case"left-end":e.position.y=c.bottom,e.position.x=b,f=-100,d=-100;break;case"top-start":e.position.y=w,e.position.x=b,f=-100,d=0;break;case"top":e.position.y=w,e.position.x=C+c.width/2,d=-50,f=-100;break;case"top-end":e.position.y=w,e.position.x=c.right,d=-100,f=-100;break;case"right-start":e.position.y=w,e.position.x=c.right,d=0,f=0;break;case"right":e.position.y=x+c.height/2,e.position.x=c.right,f=-50,d=0;break;case"right-end":e.position.y=c.bottom,e.position.x=c.right,f=-100,d=0;break}}else switch(y){case"bottom":e.position.y=l.bottom-a.value.height,e.position.x=l.left+l.width/2,d=-50;break;case"left-end":case"bottom-start":e.position.y=l.bottom-a.value.height,e.position.x=l.left;break;case"right-end":case"bottom-end":e.position.y=l.bottom-a.value.height,e.position.x=l.right-a.value.width;break;case"left":e.position.y=l.top+(l.height-a.value.height)/2,e.position.x=l.left;break;case"top-start":case"left-start":e.position.y=l.top,e.position.x=l.left;break;case"top":e.position.y=l.top,e.position.x=l.left+(l.width-a.value.width)/2;break;case"top-end":case"right-start":e.position.y=l.top,e.position.x=l.right-a.value.width;case"right":e.position.y=l.top+(l.height-a.value.height)/2,e.position.x=l.right-a.value.width;break}const v=L(a.value,e.position,d,f);e.position.x=v.x,e.position.y=v.y,v.x<l.left&&(e.position.x=l.left,d=0),v.x+a.value.width>l.right&&(e.position.x=l.right-a.value.width,d=0),v.y<l.top&&(e.position.y=l.top,f=0),v.y+a.value.height>l.bottom&&(e.position.y=l.bottom-a.value.height,f=0),o.value.style.top=`${e.position.y}px`,o.value.style.left=`${e.position.x}px`,o.value.style.display="flex",a.value=o.value.getBoundingClientRect()});return t.onUnmounted(()=>{i.value.disconnect()}),{float:e,rect:a,floatObserver:i,setPosition:m}};function k(n){const o=window.matchMedia(n),s=t.ref(o.matches);function r(a){s.value=a.matches}return t.onMounted(()=>{o.addEventListener("change",r)}),t.onUnmounted(()=>{o.removeEventListener("change",r)}),s}function $(n){return{isGreater(o){return k(`(min-width: ${n[o]})`)},isSmaller(o){return k(`(max-width: ${n[o]})`)},isInBetween(o,s){return k(`(min-width: ${n[o]}) and (max-width: ${n[s]})`)}}}function S(n,o,s){if(!n)throw new Error("A target component has to be provided.");if(!o)throw new Error("A callback has to be provided.");const r=a=>{!n.value||a.target===n.value||a.composedPath().includes(n.value)||typeof o=="function"&&o()};s&&t.watch(s,(a,e)=>{e&&e.removeEventListener("click",r),a==null||a.addEventListener("click",r)}),t.onMounted(()=>{s||document.addEventListener("click",r)}),t.onBeforeUnmount(()=>{if(s){s.value.removeEventListener("click",r);return}document.removeEventListener("click",r)})}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 s=r=>{o(r)};t.onMounted(()=>{n.value.addEventListener("keydown",s)}),t.onBeforeUnmount(()=>{n.value.removeEventListener("keydown",s)})}function N(n,o){if(!n||typeof n!="function")throw new Error("A callback has to be provided.");const s=r=>{n(r)};t.onMounted(()=>{if(!o){document.addEventListener("keyup",s);return}o.value.addEventListener("keyup",s)}),t.onBeforeUnmount(()=>{if(!o){document.removeEventListener("keyup",s);return}o.value.removeEventListener("keyup",s)})}const O=()=>{const n=t.ref(null),o=t.getCurrentInstance();t.computed(()=>o==null?void 0:o.props.modelValue);const s=p=>p.toLocaleString("it-IT",{minimumFractionDigits:2,maximumFractionDigits:2}),r=p=>parseFloat(p),a=p=>{Number.isNaN(p)||o&&o.emit("update:modelValue",p)},e=p=>i=>{if(!n.value||!i.target)return;let{value:m}=p;m=m.replace(/[^0-9,.]/g,""),n.value.value=m;const c=r(m);a(Number.isNaN(c)?0:c)},u=p=>{if(!n.value||!p.target)return;let i=r(p.target.value.replace(/,/g,"."));Number.isNaN(i)&&(i=0);const m=s(i);n.value.value=m,a(i)};return t.watch(n,(p,i)=>{p&&(i&&(i==null||i.removeEventListener("input",e(p)),i==null||i.removeEventListener("blur",u)),p.addEventListener("input",e(p)),p.addEventListener("blur",u))}),{inputRef:n,parse:r,format:s,setValue:a}},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,s=t.ref(null),r=t.ref(null),a=t.useSlots(),e={position:t.computed(()=>o.position),element:{domRef:r},container:{domRef:t.toRef(o.container||document.body)}};a.opener&&(e.opener={domRef:s});const u=E(e);t.watch(()=>o.position,()=>o.isOpen&&u.setPosition()),t.watch(()=>o.isOpen,i=>{!i||!r.value||(r.value.style.top="0px",r.value.style.left="0px",r.value.style.transform="none",u.setPosition())});const p=t.computed(()=>o.overrideContentClass?o.contentClass:["bg-core-white fixed p-4 z-10",o.contentClass]);return(i,m)=>(t.openBlock(),t.createElementBlock("div",null,[t.renderSlot(i.$slots,"opener-start"),t.createElementVNode("div",{ref_key:"opener",ref:s,class:"inline-flex"},[t.renderSlot(i.$slots,"opener",{isOpen:i.isOpen,floating:t.unref(u)})],512),t.renderSlot(i.$slots,"opener-end"),i.teleport?t.createCommentVNode("",!0):t.withDirectives((t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"content",ref:r,class:t.normalizeClass(["fz__floating__content bg-core-white fixed p-4 z-10",p.value])},[t.renderSlot(i.$slots,"default",{isOpen:i.isOpen,floating:t.unref(u)})],2)),[[t.vShow,i.$slots.default&&(!i.$slots.opener||i.$slots.opener&&i.isOpen)]]),i.teleport?(t.openBlock(),t.createBlock(t.Teleport,{key:1,to:"body"},[t.withDirectives(t.createElementVNode("div",{ref_key:"content",ref:r,class:t.normalizeClass(["fz__floating__content bg-core-white absolute p-4 z-10",p.value])},[t.renderSlot(i.$slots,"default",{isOpen:i.isOpen,floating:t.unref(u)})],2),[[t.vShow,i.$slots.default&&(!i.$slots.opener||i.$slots.opener&&i.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=k,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
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.18",
3
+ "version": "0.1.20-beta.2",
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": {
package/src/composables/useCurrency.ts CHANGED
@@ -1,29 +1,43 @@
1
- import {Ref, watch, getCurrentInstance, computed, ref} from 'vue'
1
+ import {Ref, watch, getCurrentInstance, computed, ref, nextTick} from 'vue'
2
2
 
3
3
  export const useCurrency = () => {
4
4
  const inputRef: Ref<HTMLInputElement|null> = ref(null)
5
5
  const vm = getCurrentInstance()
6
6
 
7
- const modelValue = computed(() => vm?.props.modelValue)
7
+ const computedModel = computed<number|string|undefined>(() => vm?.props.amount as unknown as number|undefined)
8
+ const internalVal = ref<number|string>()
8
9
 
9
- const format = (input: number) => {
10
+ const format = (input: number|string) => {
10
11
  return input.toLocaleString('it-IT', {
11
12
  minimumFractionDigits: 2,
12
13
  maximumFractionDigits: 2,
14
+ useGrouping: false
13
15
  })
14
16
  }
15
17
 
16
18
  const parse = (text: string) => {
17
19
  // strip currency, handle edge cases...
18
- return parseFloat(text)
20
+ return parseFloat(text.replace(/,/g,"."))
19
21
  }
20
22
 
21
- const setValue = (val: number) => {
23
+ const emitAmount = (val: number) => {
22
24
  if (Number.isNaN(val)) {
23
25
  return;
24
26
  }
27
+ if (vm) {
28
+ internalVal.value = val
29
+ vm.emit('update:amount', typeof computedModel.value === 'number' ? val : val.toString())
30
+ }
31
+ }
25
32
 
26
- vm && vm.emit('update:modelValue', val)
33
+ const setValue = (val: string) => {
34
+ // nextTick doesn't seem to work
35
+ setTimeout(() => {
36
+ if (!inputRef.value) {
37
+ return
38
+ }
39
+ inputRef.value.value = val;
40
+ }, 0)
27
41
  }
28
42
 
29
43
  const onInput = (el: HTMLInputElement) => (e: Event) => {
@@ -32,23 +46,22 @@ export const useCurrency = () => {
32
46
  }
33
47
  let {value} = el;
34
48
  value = value.replace(/[^0-9,.]/g, '')
35
- inputRef.value.value = value;
49
+ setValue(value)
36
50
  const number = parse(value)
37
- setValue(Number.isNaN(number) ? 0 : number)
51
+ emitAmount(Number.isNaN(number) ? 0 : number)
38
52
  }
39
53
 
40
54
  const onBlur = (e: FocusEvent) => {
41
55
  if (!inputRef.value || !e.target) {
42
56
  return
43
57
  }
44
- let number = parse((e.target as HTMLInputElement).value.replace(/,/g,"."))
58
+ let number = parse((e.target as HTMLInputElement).value)
45
59
  if (Number.isNaN(number)) {
46
60
  number = 0;
47
61
  }
48
62
  const text = format(number)
49
-
50
- inputRef.value.value = text;
51
- setValue(number)
63
+ setValue(text)
64
+ emitAmount(parse(text))
52
65
  }
53
66
 
54
67
  watch(inputRef, (newVal, oldVal) => {
@@ -62,7 +75,21 @@ export const useCurrency = () => {
62
75
  }
63
76
  newVal.addEventListener('input', onInput(newVal))
64
77
  newVal.addEventListener('blur', onBlur)
78
+ })
65
79
 
80
+ watch(computedModel, (newVal) => {
81
+ nextTick(() => {
82
+ if (!inputRef.value || !newVal) {
83
+ return
84
+ }
85
+ // we need to format here only if someone externally set the
86
+ // value of the amount model
87
+ if (internalVal.value !== newVal) {
88
+ const formatted = format(newVal)
89
+ inputRef.value.value = formatted
90
+ internalVal.value = newVal
91
+ }
92
+ })
66
93
  })
67
94
 
68
95
 
@@ -70,6 +97,7 @@ export const useCurrency = () => {
70
97
  inputRef,
71
98
  parse,
72
99
  format,
100
+ emitAmount,
73
101
  setValue
74
102
  }
75
103
  }