npm - @fiscozen/composables - Versions diffs - 0.1.17 → 0.1.18 - Mend

@fiscozen/composables 0.1.17 → 0.1.18

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 +357 -0
package/dist/composables.umd.cjs +1 -0
package/package.json +3 -3
package/src/composables/index.ts +2 -1
package/src/composables/useCurrency.ts +75 -0

package/dist/composables.js ADDED Viewed

@@ -0,0 +1,357 @@
+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";
+const L = (o, t, i, s) => {
+  let r = "right", e = "right-start";
+  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;
+  if (r = [
+    {
+      key: "right",
+      space: u
+    },
+    {
+      key: "top",
+      space: a
+    },
+    {
+      key: "bottom",
+      space: h
+    },
+    {
+      key: "left",
+      space: d
+    }
+  ].sort((c, f) => f.space - c.space)[0].key, !s)
+    switch (r) {
+      case "right":
+      case "left":
+        const c = (l.height - n.height) / 2;
+        p.top > n.top - c && (s = "end"), p.bottom < n.top - c && (s = "start");
+        break;
+    }
+  return e = s ? `${r}-${s}` : r, e;
+}, G = (o, t, i, s) => ({
+  x: t.x + o.width * i / 100,
+  y: t.y + o.height * s / 100
+}), H = (o) => {
+  const t = v(null), i = v(null), s = v(null), r = v(null), e = W({
+    position: { x: 0, y: 0 }
+  }), p = {
+    root: null,
+    rootMargin: "0px",
+    threshold: 1,
+    ...o.element.intersectionOptions
+  }, l = (u, a) => {
+  }, n = v(new IntersectionObserver(l, p)), d = () => q(() => {
+    var F;
+    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)
+      throw new Error("missing reference element for floating behavior");
+    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();
+    const u = (F = s.value) == null ? void 0 : F.getBoundingClientRect(), a = i.value.getBoundingClientRect(), h = window.getComputedStyle(t.value);
+    n.value.observe(t.value), n.value.observe(i.value);
+    let m = o.position ? o.position.value : "auto", c = 0, f = 0;
+    if (o.opener && s.value && u) {
+      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);
+      switch (m) {
+        case "auto":
+          m = L(
+            i.value,
+            t.value,
+            s.value
+          );
+          break;
+        case "auto-start":
+          m = L(
+            i.value,
+            t.value,
+            s.value,
+            "start"
+          );
+          break;
+        case "auto-end":
+          m = L(
+            i.value,
+            t.value,
+            s.value,
+            "end"
+          );
+          break;
+      }
+      switch (m) {
+        case "bottom":
+          e.position.y = u.bottom, e.position.x = N + u.width / 2, f = -50, c = 0;
+          break;
+        case "bottom-start":
+          e.position.y = u.bottom, e.position.x = y, f = 0, c = 0;
+          break;
+        case "bottom-end":
+          e.position.y = u.bottom, e.position.x = u.right, f = -100, c = 0;
+          break;
+        case "left-start":
+          e.position.y = b, e.position.x = y, f = -100, c = 0;
+          break;
+        case "left":
+          e.position.y = O + u.height / 2, e.position.x = y, c = -50, f = -100;
+          break;
+        case "left-end":
+          e.position.y = u.bottom, e.position.x = y, c = -100, f = -100;
+          break;
+        case "top-start":
+          e.position.y = b, e.position.x = y, c = -100, f = 0;
+          break;
+        case "top":
+          e.position.y = b, e.position.x = N + u.width / 2, f = -50, c = -100;
+          break;
+        case "top-end":
+          e.position.y = b, e.position.x = u.right, f = -100, c = -100;
+          break;
+        case "right-start":
+          e.position.y = b, e.position.x = u.right, f = 0, c = 0;
+          break;
+        case "right":
+          e.position.y = O + u.height / 2, e.position.x = u.right, c = -50, f = 0;
+          break;
+        case "right-end":
+          e.position.y = u.bottom, e.position.x = u.right, c = -100, f = 0;
+          break;
+      }
+    } else
+      switch (m) {
+        case "bottom":
+          e.position.y = a.bottom - r.value.height, e.position.x = a.left + a.width / 2, f = -50;
+          break;
+        case "left-end":
+        case "bottom-start":
+          e.position.y = a.bottom - r.value.height, e.position.x = a.left;
+          break;
+        case "right-end":
+        case "bottom-end":
+          e.position.y = a.bottom - r.value.height, e.position.x = a.right - r.value.width;
+          break;
+        case "left":
+          e.position.y = a.top + (a.height - r.value.height) / 2, e.position.x = a.left;
+          break;
+        case "top-start":
+        case "left-start":
+          e.position.y = a.top, e.position.x = a.left;
+          break;
+        case "top":
+          e.position.y = a.top, e.position.x = a.left + (a.width - r.value.width) / 2;
+          break;
+        case "top-end":
+        case "right-start":
+          e.position.y = a.top, e.position.x = a.right - r.value.width;
+        case "right":
+          e.position.y = a.top + (a.height - r.value.height) / 2, e.position.x = a.right - r.value.width;
+          break;
+      }
+    const g = G(r.value, e.position, f, c);
+    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();
+  });
+  return I(() => {
+    n.value.disconnect();
+  }), {
+    float: e,
+    rect: r,
+    floatObserver: n,
+    setPosition: d
+  };
+};
+function B(o) {
+  const t = window.matchMedia(o), i = v(t.matches);
+  function s(r) {
+    i.value = r.matches;
+  }
+  return R(() => {
+    t.addEventListener("change", s);
+  }), I(() => {
+    t.removeEventListener("change", s);
+  }), i;
+}
+function Z(o) {
+  return {
+    isGreater(t) {
+      return B(`(min-width: ${o[t]})`);
+    },
+    isSmaller(t) {
+      return B(`(max-width: ${o[t]})`);
+    },
+    isInBetween(t, i) {
+      return B(`(min-width: ${o[t]}) and (max-width: ${o[i]})`);
+    }
+  };
+}
+function _(o, t, i) {
+  if (!o)
+    throw new Error("A target component has to be provided.");
+  if (!t)
+    throw new Error("A callback has to be provided.");
+  const s = (r) => {
+    !o.value || r.target === o.value || r.composedPath().includes(o.value) || typeof t == "function" && t();
+  };
+  i && k(i, (r, e) => {
+    e && e.removeEventListener("click", s), r == null || r.addEventListener("click", s);
+  }), R(() => {
+    i || document.addEventListener("click", s);
+  }), $(() => {
+    if (i) {
+      i.value.removeEventListener("click", s);
+      return;
+    }
+    document.removeEventListener("click", s);
+  });
+}
+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 i = (s) => {
+    t(s);
+  };
+  R(() => {
+    o.value.addEventListener("keydown", i);
+  }), $(() => {
+    o.value.removeEventListener("keydown", i);
+  });
+}
+function V(o, t) {
+  if (!o || typeof o != "function")
+    throw new Error("A callback has to be provided.");
+  const i = (s) => {
+    o(s);
+  };
+  R(() => {
+    if (!t) {
+      document.addEventListener("keyup", i);
+      return;
+    }
+    t.value.addEventListener("keyup", i);
+  }), $(() => {
+    if (!t) {
+      document.removeEventListener("keyup", i);
+      return;
+    }
+    t.value.removeEventListener("keyup", i);
+  });
+}
+const ee = () => {
+  const o = v(null), t = T();
+  C(() => t == null ? void 0 : t.props.modelValue);
+  const i = (l) => l.toLocaleString("it-IT", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }), s = (l) => parseFloat(l), r = (l) => {
+    Number.isNaN(l) || t && t.emit("update:modelValue", l);
+  }, e = (l) => (n) => {
+    if (!o.value || !n.target)
+      return;
+    let { value: d } = l;
+    d = d.replace(/[^0-9,.]/g, ""), o.value.value = d;
+    const u = s(d);
+    r(Number.isNaN(u) ? 0 : u);
+  }, p = (l) => {
+    if (!o.value || !l.target)
+      return;
+    let n = s(l.target.value.replace(/,/g, "."));
+    Number.isNaN(n) && (n = 0);
+    const d = i(n);
+    o.value.value = d, r(n);
+  };
+  return k(o, (l, n) => {
+    l && (n && (n == null || n.removeEventListener("input", e(l)), n == null || n.removeEventListener("blur", p)), l.addEventListener("input", e(l)), l.addEventListener("blur", p));
+  }), {
+    inputRef: o,
+    parse: s,
+    format: i,
+    setValue: r
+  };
+}, 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, i = v(null), s = v(null), r = K(), e = {
+      position: C(() => t.position),
+      element: {
+        domRef: s
+      },
+      container: {
+        domRef: Q(t.container || document.body)
+      }
+    };
+    r.opener && (e.opener = {
+      domRef: i
+    });
+    const p = H(e);
+    k(
+      () => t.position,
+      () => t.isOpen && p.setPosition()
+    ), k(
+      () => t.isOpen,
+      (n) => {
+        !n || !s.value || (s.value.style.top = "0px", s.value.style.left = "0px", s.value.style.transform = "none", p.setPosition());
+      }
+    );
+    const l = C(() => t.overrideContentClass ? t.contentClass : ["bg-core-white fixed p-4 z-10", t.contentClass]);
+    return (n, d) => (x(), z("div", null, [
+      w(n.$slots, "opener-start"),
+      S("div", {
+        ref_key: "opener",
+        ref: i,
+        class: "inline-flex"
+      }, [
+        w(n.$slots, "opener", {
+          isOpen: n.isOpen,
+          floating: E(p)
+        })
+      ], 512),
+      w(n.$slots, "opener-end"),
+      n.teleport ? D("", !0) : M((x(), z("div", {
+        key: 0,
+        ref_key: "content",
+        ref: s,
+        class: P(["fz__floating__content bg-core-white fixed p-4 z-10", l.value])
+      }, [
+        w(n.$slots, "default", {
+          isOpen: n.isOpen,
+          floating: E(p)
+        })
+      ], 2)), [
+        [A, n.$slots.default && (!n.$slots.opener || n.$slots.opener && n.isOpen)]
+      ]),
+      n.teleport ? (x(), X(Y, {
+        key: 1,
+        to: "body"
+      }, [
+        M(S("div", {
+          ref_key: "content",
+          ref: s,
+          class: P(["fz__floating__content bg-core-white absolute p-4 z-10", l.value])
+        }, [
+          w(n.$slots, "default", {
+            isOpen: n.isOpen,
+            floating: E(p)
+          })
+        ], 2), [
+          [A, n.$slots.default && (!n.$slots.opener || n.$slots.opener && n.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.18",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
@@ -25,9 +25,9 @@
     "vite": "^5.0.10",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
+    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

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,75 @@
+import {Ref, watch, getCurrentInstance, computed, ref} from 'vue'
+export const useCurrency = () => {
+    const inputRef: Ref<HTMLInputElement|null> = ref(null)
+    const vm = getCurrentInstance()
+    const modelValue = computed(() => vm?.props.modelValue)
+    const format = (input: number) => {
+        return input.toLocaleString('it-IT', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        })
+    }
+    const parse = (text: string) => {
+        // strip currency, handle edge cases...
+        return parseFloat(text)
+    }
+    const setValue = (val: number) => {
+        if (Number.isNaN(val)) {
+            return;
+        }
+        vm && vm.emit('update:modelValue', val)
+    }
+    const onInput = (el: HTMLInputElement) => (e: Event) => {
+        if (!inputRef.value || !e.target) {
+            return
+        }
+        let {value} = el;
+        value = value.replace(/[^0-9,.]/g, '')
+        inputRef.value.value = value;
+        const number = parse(value)
+        setValue(Number.isNaN(number) ? 0 : number)
+    }
+    const onBlur = (e: FocusEvent) => {
+        if (!inputRef.value || !e.target) {
+            return
+        }
+        let number = parse((e.target as HTMLInputElement).value.replace(/,/g,"."))
+        if (Number.isNaN(number)) {
+            number = 0;
+        }
+        const text = format(number)
+        inputRef.value.value = text;
+        setValue(number)
+    }
+    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)
+    })
+    return {
+        inputRef,
+        parse,
+        format,
+        setValue
+    }
+}