npm - @fiscozen/composables - Versions diffs - 0.1.17 → 0.1.20-beta.1 - Mend

@fiscozen/composables 0.1.17 → 0.1.20-beta.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.

Files changed (5) hide show

package/dist/composables.js +368 -0
package/dist/composables.umd.cjs +1 -0
package/package.json +1 -1
package/src/composables/index.ts +2 -1
package/src/composables/useCurrency.ts +108 -0

package/dist/composables.js ADDED Viewed

@@ -0,0 +1,368 @@
+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";
+const L = (o, t, s, r) => {
+  let a = "right", e = "right-start";
+  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;
+  if (a = [
+    {
+      key: "right",
+      space: n
+    },
+    {
+      key: "top",
+      space: i
+    },
+    {
+      key: "bottom",
+      space: f
+    },
+    {
+      key: "left",
+      space: m
+    }
+  ].sort((p, c) => c.space - p.space)[0].key, !r)
+    switch (a) {
+      case "right":
+      case "left":
+        const p = (v.height - l.height) / 2;
+        u.top > l.top - p && (r = "end"), u.bottom < l.top - p && (r = "start");
+        break;
+    }
+  return e = r ? `${a}-${r}` : a, e;
+}, Y = (o, t, s, r) => ({
+  x: t.x + o.width * s / 100,
+  y: t.y + o.height * r / 100
+}), H = (o) => {
+  const t = h(null), s = h(null), r = h(null), a = h(null), e = W({
+    position: { x: 0, y: 0 }
+  }), u = {
+    root: null,
+    rootMargin: "0px",
+    threshold: 1,
+    ...o.element.intersectionOptions
+  }, v = (n, i) => {
+  }, l = h(new IntersectionObserver(v, u)), m = () => T(() => {
+    var F;
+    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)
+      throw new Error("missing reference element for floating behavior");
+    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();
+    const n = (F = r.value) == null ? void 0 : F.getBoundingClientRect(), i = s.value.getBoundingClientRect(), f = window.getComputedStyle(t.value);
+    l.value.observe(t.value), l.value.observe(s.value);
+    let d = o.position ? o.position.value : "auto", p = 0, c = 0;
+    if (o.opener && r.value && n) {
+      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);
+      switch (d) {
+        case "auto":
+          d = L(
+            s.value,
+            t.value,
+            r.value
+          );
+          break;
+        case "auto-start":
+          d = L(
+            s.value,
+            t.value,
+            r.value,
+            "start"
+          );
+          break;
+        case "auto-end":
+          d = L(
+            s.value,
+            t.value,
+            r.value,
+            "end"
+          );
+          break;
+      }
+      switch (d) {
+        case "bottom":
+          e.position.y = n.bottom, e.position.x = N + n.width / 2, c = -50, p = 0;
+          break;
+        case "bottom-start":
+          e.position.y = n.bottom, e.position.x = y, c = 0, p = 0;
+          break;
+        case "bottom-end":
+          e.position.y = n.bottom, e.position.x = n.right, c = -100, p = 0;
+          break;
+        case "left-start":
+          e.position.y = b, e.position.x = y, c = -100, p = 0;
+          break;
+        case "left":
+          e.position.y = O + n.height / 2, e.position.x = y, p = -50, c = -100;
+          break;
+        case "left-end":
+          e.position.y = n.bottom, e.position.x = y, p = -100, c = -100;
+          break;
+        case "top-start":
+          e.position.y = b, e.position.x = y, p = -100, c = 0;
+          break;
+        case "top":
+          e.position.y = b, e.position.x = N + n.width / 2, c = -50, p = -100;
+          break;
+        case "top-end":
+          e.position.y = b, e.position.x = n.right, c = -100, p = -100;
+          break;
+        case "right-start":
+          e.position.y = b, e.position.x = n.right, c = 0, p = 0;
+          break;
+        case "right":
+          e.position.y = O + n.height / 2, e.position.x = n.right, p = -50, c = 0;
+          break;
+        case "right-end":
+          e.position.y = n.bottom, e.position.x = n.right, p = -100, c = 0;
+          break;
+      }
+    } else
+      switch (d) {
+        case "bottom":
+          e.position.y = i.bottom - a.value.height, e.position.x = i.left + i.width / 2, c = -50;
+          break;
+        case "left-end":
+        case "bottom-start":
+          e.position.y = i.bottom - a.value.height, e.position.x = i.left;
+          break;
+        case "right-end":
+        case "bottom-end":
+          e.position.y = i.bottom - a.value.height, e.position.x = i.right - a.value.width;
+          break;
+        case "left":
+          e.position.y = i.top + (i.height - a.value.height) / 2, e.position.x = i.left;
+          break;
+        case "top-start":
+        case "left-start":
+          e.position.y = i.top, e.position.x = i.left;
+          break;
+        case "top":
+          e.position.y = i.top, e.position.x = i.left + (i.width - a.value.width) / 2;
+          break;
+        case "top-end":
+        case "right-start":
+          e.position.y = i.top, e.position.x = i.right - a.value.width;
+        case "right":
+          e.position.y = i.top + (i.height - a.value.height) / 2, e.position.x = i.right - a.value.width;
+          break;
+      }
+    const g = Y(a.value, e.position, c, p);
+    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();
+  });
+  return I(() => {
+    l.value.disconnect();
+  }), {
+    float: e,
+    rect: a,
+    floatObserver: l,
+    setPosition: m
+  };
+};
+function B(o) {
+  const t = window.matchMedia(o), s = h(t.matches);
+  function r(a) {
+    s.value = a.matches;
+  }
+  return R(() => {
+    t.addEventListener("change", r);
+  }), I(() => {
+    t.removeEventListener("change", r);
+  }), s;
+}
+function Z(o) {
+  return {
+    isGreater(t) {
+      return B(`(min-width: ${o[t]})`);
+    },
+    isSmaller(t) {
+      return B(`(max-width: ${o[t]})`);
+    },
+    isInBetween(t, s) {
+      return B(`(min-width: ${o[t]}) and (max-width: ${o[s]})`);
+    }
+  };
+}
+function _(o, t, s) {
+  if (!o)
+    throw new Error("A target component has to be provided.");
+  if (!t)
+    throw new Error("A callback has to be provided.");
+  const r = (a) => {
+    !o.value || a.target === o.value || a.composedPath().includes(o.value) || typeof t == "function" && t();
+  };
+  s && w(s, (a, e) => {
+    e && e.removeEventListener("click", r), a == null || a.addEventListener("click", r);
+  }), R(() => {
+    s || document.addEventListener("click", r);
+  }), $(() => {
+    if (s) {
+      s.value.removeEventListener("click", r);
+      return;
+    }
+    document.removeEventListener("click", r);
+  });
+}
+function j(o, t) {
+  if (!o)
+    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 s = (r) => {
+    t(r);
+  };
+  R(() => {
+    o.value.addEventListener("keydown", s);
+  }), $(() => {
+    o.value.removeEventListener("keydown", s);
+  });
+}
+function V(o, t) {
+  if (!o || typeof o != "function")
+    throw new Error("A callback has to be provided.");
+  const s = (r) => {
+    o(r);
+  };
+  R(() => {
+    if (!t) {
+      document.addEventListener("keyup", s);
+      return;
+    }
+    t.value.addEventListener("keyup", s);
+  }), $(() => {
+    if (!t) {
+      document.removeEventListener("keyup", s);
+      return;
+    }
+    t.value.removeEventListener("keyup", s);
+  });
+}
+const ee = () => {
+  const o = h(null), t = q(), s = C(() => t == null ? void 0 : t.props.amount), r = h(), a = (n) => n.toLocaleString("it-IT", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+    useGrouping: !1
+  }), e = (n) => parseFloat(n.replace(/,/g, ".")), u = (n) => {
+    Number.isNaN(n) || t && (r.value = n, t.emit("update:amount", n));
+  }, v = (n) => {
+    setTimeout(() => {
+      o.value && (o.value.value = n);
+    }, 0);
+  }, l = (n) => (i) => {
+    if (!o.value || !i.target)
+      return;
+    let { value: f } = n;
+    f = f.replace(/[^0-9,.]/g, ""), v(f);
+    const d = e(f);
+    u(Number.isNaN(d) ? 0 : d);
+  }, m = (n) => {
+    if (!o.value || !n.target)
+      return;
+    let i = e(n.target.value);
+    Number.isNaN(i) && (i = 0);
+    const f = a(i);
+    v(f), u(e(f));
+  };
+  return w(o, (n, i) => {
+    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)));
+  }), w(s, (n) => {
+    T(() => {
+      if (!(!o.value || !n) && r.value !== n) {
+        const i = a(n);
+        o.value.value = i, r.value = n;
+      }
+    });
+  }), {
+    inputRef: o,
+    parse: e,
+    format: a,
+    emitAmount: u,
+    setValue: v
+  };
+}, te = /* @__PURE__ */ U({
+  __name: "FzFloating",
+  props: {
+    isOpen: { type: Boolean, default: !1 },
+    position: { default: "auto" },
+    container: {},
+    contentClass: {},
+    openerClass: {},
+    overrideContentClass: { type: Boolean },
+    teleport: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const t = o, s = h(null), r = h(null), a = G(), e = {
+      position: C(() => t.position),
+      element: {
+        domRef: r
+      },
+      container: {
+        domRef: K(t.container || document.body)
+      }
+    };
+    a.opener && (e.opener = {
+      domRef: s
+    });
+    const u = H(e);
+    w(
+      () => t.position,
+      () => t.isOpen && u.setPosition()
+    ), w(
+      () => t.isOpen,
+      (l) => {
+        !l || !r.value || (r.value.style.top = "0px", r.value.style.left = "0px", r.value.style.transform = "none", u.setPosition());
+      }
+    );
+    const v = C(() => t.overrideContentClass ? t.contentClass : ["bg-core-white fixed p-4 z-10", t.contentClass]);
+    return (l, m) => (x(), z("div", null, [
+      k(l.$slots, "opener-start"),
+      S("div", {
+        ref_key: "opener",
+        ref: s,
+        class: "inline-flex"
+      }, [
+        k(l.$slots, "opener", {
+          isOpen: l.isOpen,
+          floating: E(u)
+        })
+      ], 512),
+      k(l.$slots, "opener-end"),
+      l.teleport ? D("", !0) : M((x(), z("div", {
+        key: 0,
+        ref_key: "content",
+        ref: r,
+        class: P(["fz__floating__content bg-core-white fixed p-4 z-10", v.value])
+      }, [
+        k(l.$slots, "default", {
+          isOpen: l.isOpen,
+          floating: E(u)
+        })
+      ], 2)), [
+        [A, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
+      ]),
+      l.teleport ? (x(), Q(X, {
+        key: 1,
+        to: "body"
+      }, [
+        M(S("div", {
+          ref_key: "content",
+          ref: r,
+          class: P(["fz__floating__content bg-core-white absolute p-4 z-10", v.value])
+        }, [
+          k(l.$slots, "default", {
+            isOpen: l.isOpen,
+            floating: E(u)
+          })
+        ], 2), [
+          [A, l.$slots.default && (!l.$slots.opener || l.$slots.opener && l.isOpen)]
+        ])
+      ])) : D("", !0)
+    ]));
+  }
+});
+export {
+  te as FzFloating,
+  Z as useBreakpoints,
+  _ as useClickOutside,
+  ee as useCurrency,
+  H as useFloating,
+  j as useKeyDown,
+  V as useKeyUp,
+  B as useMediaQuery
+};

package/dist/composables.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.17",
+  "version": "0.1.20-beta.1",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",

package/src/composables/index.ts CHANGED Viewed

@@ -3,4 +3,5 @@ export * from './useMediaQuery'
 export * from './useBreakpoints'
 export * from './useClickOutside'
 export * from './useKeyDown'
-export * from './useKeyUp'
+export * from './useKeyUp'
+export * from './useCurrency'

package/src/composables/useCurrency.ts ADDED Viewed

@@ -0,0 +1,108 @@
+import {Ref, watch, getCurrentInstance, computed, ref, nextTick} from 'vue'
+export const useCurrency = () => {
+    const inputRef: Ref<HTMLInputElement|null> = ref(null)
+    const vm = getCurrentInstance()
+    const computedModel = computed<number|undefined>(() => vm?.props.amount as unknown as number|undefined)
+    const internalVal = ref<number>()
+    const format = (input: number) => {
+        return input.toLocaleString('it-IT', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+            useGrouping: false
+        })
+    }
+    const parse = (text: string) => {
+        // strip currency, handle edge cases...
+        return parseFloat(text.replace(/,/g,"."))
+    }
+    const emitAmount = (val: number) => {
+        if (Number.isNaN(val)) {
+            return;
+        }
+        if (vm) {
+            internalVal.value = val
+            vm.emit('update:amount', val)
+        }
+    }
+    const setValue = (val: string) => {
+        // nextTick doesn't seem to work
+        setTimeout(() => {
+            if (!inputRef.value) {
+                return
+            }
+            inputRef.value.value = val;
+        }, 0)
+    }
+    const onInput = (el: HTMLInputElement) => (e: Event) => {
+        if (!inputRef.value || !e.target) {
+            return
+        }
+        let {value} = el;
+        value = value.replace(/[^0-9,.]/g, '')
+        setValue(value)
+        const number = parse(value)
+        emitAmount(Number.isNaN(number) ? 0 : number)
+    }
+    const onBlur = (e: FocusEvent) => {
+        if (!inputRef.value || !e.target) {
+            return
+        }
+        let number = parse((e.target as HTMLInputElement).value)
+        if (Number.isNaN(number)) {
+            number = 0;
+        }
+        const text = format(number)
+        setValue(text)
+        emitAmount(parse(text))
+    }
+    watch(inputRef, (newVal, oldVal) => {
+        if(!newVal) {
+            return
+        }
+        if (oldVal) {
+            oldVal?.removeEventListener('input', onInput(newVal))
+            oldVal?.removeEventListener('blur', onBlur)
+        }
+        newVal.addEventListener('input', onInput(newVal))
+        newVal.addEventListener('blur', onBlur)
+        if (computedModel.value) {
+            newVal.value = format(computedModel.value)
+        }
+    })
+    watch(computedModel, (newVal) => {
+        nextTick(() => {
+            if (!inputRef.value || !newVal) {
+                return
+            }
+            // we need to format here only if someone externally set the
+            // value of the amount model
+            if (internalVal.value !== newVal) {
+                const formatted = format(newVal)
+                inputRef.value.value = formatted
+                internalVal.value = newVal
+            }
+        })
+    })
+    return {
+        inputRef,
+        parse,
+        format,
+        emitAmount,
+        setValue
+    }
+}