@nmorph/nmorph-ui-kit 2.2.38 → 2.2.40

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphDropdown.css';
-import { defineComponent as w, ref as q, toRef as t, computed as l, watch as v } from "vue";
-import { useModifiers as b } from "../../../utils/create-modifiers.js";
-import { toCssSize as d } from "../../../utils/common.js";
-import { usePlacement as x } from "../../../hooks/use-placement.js";
+import { defineComponent as y, ref as v, toRef as t, computed as i, watch as w } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { toCssSize as b, createCssSizeVariables as x } from "../../../utils/common.js";
+import { usePlacement as S } from "../../../hooks/use-placement.js";
 import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const B = /* @__PURE__ */ w({
+const B = /* @__PURE__ */ y({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
@@ -26,44 +26,46 @@ const B = /* @__PURE__ */ w({
     hideShadow: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click", "on-escape-keydown"],
-  setup(p, { expose: f, emit: m }) {
-    f();
-    const e = p, r = m, i = q(null), { placementCoords: o, placementReady: n, adjustPlacement: a } = x({
+  setup(u, { expose: p, emit: f }) {
+    p();
+    const e = u, r = f, l = v(null), { placementCoords: o, placementReady: d, adjustPlacement: a } = S({
       initialPlacement: t(e, "placement"),
-      contentDOMElement: i,
+      contentDOMElement: l,
       relativeElement: t(e, "relativeElement"),
       yOffset: t(e, "yOffset"),
       xOffset: t(e, "xOffset"),
       enabled: t(e, "open")
-    }), c = l(
-      () => b({
+    }), m = i(
+      () => q({
         "nmorph-dropdown": [!e.open && "closed", e.hideShadow && "hide-shadow"]
       })
-    ), s = l(
-      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : d(e.width)
-    ), h = l(() => ({
-      "--nmorph-dropdown-width": s.value,
-      "--nmorph-dropdown-min-width": d(e.minWidth) || "auto",
-      "--nmorph-dropdown-max-width": d(e.maxWidth) || "none",
+    ), n = i(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : b(e.width)
+    ), c = i(() => ({
+      "--nmorph-dropdown-width": n.value,
+      ...x({
+        "--nmorph-dropdown-min-width": e.minWidth === void 0 ? "auto" : e.minWidth,
+        "--nmorph-dropdown-max-width": e.maxWidth === void 0 ? "none" : e.maxWidth
+      }),
       left: o.value.x,
       top: o.value.y,
-      visibility: e.open && n.value ? "visible" : "hidden"
+      visibility: e.open && d.value ? "visible" : "hidden"
     }));
-    v(
+    w(
       () => e.open,
-      (y) => {
-        y && a();
+      (h) => {
+        h && a();
       },
       { flush: "post" }
     );
-    const u = { props: e, emit: r, dropdownDOMRef: i, placementCoords: o, placementReady: n, adjustPlacement: a, modifiers: c, width: s, dropdownStyle: h, outsideClickHandler: () => {
+    const s = { props: e, emit: r, dropdownDOMRef: l, placementCoords: o, placementReady: d, adjustPlacement: a, modifiers: m, width: n, dropdownStyle: c, outsideClickHandler: () => {
       r("on-outside-click");
     }, escapeHandler: () => {
       r("on-escape-keydown");
     }, get NmorphOverlay() {
       return O;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {

package/dist/hooks/use-field-validation.js

@@ -1,103 +1,87 @@
-import { resolution as L } from "../components/form/nmorph-file-upload/types.js";
+import { isFileAllowedByTypes as z } from "../utils/file-types.js";
 import { ref as h } from "vue";
-const S = Object.entries(L), z = (t) => t.split("/")[1]?.toLowerCase() || "", B = (t) => {
-  const o = t.split(".").pop()?.toLowerCase();
-  return o && o !== t.toLowerCase() ? o : "";
-}, I = (t) => S.find(([, o]) => o.toLowerCase() === t.toLowerCase())?.[0] || "", M = (t) => Array.from(
-  new Set(
-    [
-      t.type.toLowerCase(),
-      I(t.type),
-      B(t.name),
-      z(t.type)
-    ].filter(Boolean).map((o) => o.toLowerCase())
-  )
-), w = (t) => typeof File < "u" && t instanceof File, q = (t) => !!t && typeof t == "object" && "data" in t && w(t.data), E = (t) => {
-  if (w(t)) return [t];
-  if (!Array.isArray(t)) return null;
-  const o = t;
-  return o.length === 0 ? [] : o.every(w) ? o : o.every(q) ? o.map((s) => s.data) : null;
-}, j = (t, o) => {
-  if (o.length === 0) return !0;
-  const s = M(t);
-  return o.some((c) => s.includes(String(c).toLowerCase()));
-}, P = (t) => {
-  const { inputValue: o, rules: s } = t, c = h([]), y = h(!1), m = h(!1);
+const v = (n) => typeof File < "u" && n instanceof File, S = (n) => !!n && typeof n == "object" && "data" in n && v(n.data), I = (n) => {
+  if (v(n)) return [n];
+  if (!Array.isArray(n)) return null;
+  const u = n;
+  return u.length === 0 ? [] : u.every(v) ? u : u.every(S) ? u.map((l) => l.data) : null;
+}, D = (n) => {
+  const { inputValue: u, rules: l } = n, p = h([]), y = h(!1), m = h(!1);
   return {
     touched: m,
     valid: y,
-    errors: c,
+    errors: p,
     validate: () => {
-      const g = s?.length > 0;
-      if (c.value = [], !g) {
+      const F = l?.length > 0;
+      if (p.value = [], !F) {
         y.value = !0;
         return;
       }
-      if (o === null) return;
-      const i = o, u = (a) => g && s.some((r) => a in r), C = typeof i == "string" && u("pattern"), F = typeof i == "number" && u("numberCompareType"), T = (typeof i == "string" || typeof i == "boolean") && u("booleanCompareType"), v = Array.isArray(i) && u("arrayCompareType"), x = u("fileMaxSize") || u("maxFileSize") || u("fileAllowedTypes") || u("allowedTypes") || u("fileMaxCount") || u("maxFiles"), b = x ? E(i) : null, A = x && b !== null;
-      if (!F && !C && !T && !v && !A) {
+      if (u === null) return;
+      const o = u, a = (s) => F && l.some((r) => s in r), T = typeof o == "string" && a("pattern"), g = typeof o == "number" && a("numberCompareType"), x = (typeof o == "string" || typeof o == "boolean") && a("booleanCompareType"), b = Array.isArray(o) && a("arrayCompareType"), w = a("fileMaxSize") || a("maxFileSize") || a("fileAllowedTypes") || a("allowedTypes") || a("fileMaxCount") || a("maxFiles"), A = w ? I(o) : null, C = w && A !== null;
+      if (!g && !T && !x && !b && !C) {
         console.warn("The input value and the provided rules do not match");
         return;
       }
-      if (m.value || (m.value = !0), C) {
-        const a = s;
-        c.value = a.reduce((r, n) => (i.match(n.pattern) || r.push(n.error), r), []);
+      if (m.value || (m.value = !0), T) {
+        const s = l;
+        p.value = s.reduce((r, t) => (o.match(t.pattern) || r.push(t.error), r), []);
       }
-      if (F) {
-        const a = (n, e, l) => {
-          switch (l) {
+      if (g) {
+        const s = (t, e, i) => {
+          switch (i) {
             case "eq":
-              return n === e;
+              return t === e;
             case "gt":
-              return n > e;
+              return t > e;
             case "lt":
-              return n < e;
+              return t < e;
             case "lte":
-              return n <= e;
+              return t <= e;
             case "gte":
-              return n >= e;
+              return t >= e;
           }
-        }, r = s;
-        c.value = r.reduce((n, e) => (a(i, e.compareValue, e.numberCompareType) && n.push(e.error), n), []);
+        }, r = l;
+        p.value = r.reduce((t, e) => (s(o, e.compareValue, e.numberCompareType) && t.push(e.error), t), []);
       }
-      if (T) {
-        const a = s;
-        c.value = a.reduce((r, n) => {
+      if (x) {
+        const s = l;
+        p.value = s.reduce((r, t) => {
           let e = !1;
-          const { compareValue: l, booleanCompareType: f } = n;
-          return f === "not-eq" && (e = i === l), f === "eq" && (e = i !== l), e || r.push(n.error), r;
+          const { compareValue: i, booleanCompareType: f } = t;
+          return f === "not-eq" && (e = o === i), f === "eq" && (e = o !== i), e || r.push(t.error), r;
         }, []);
       }
-      if (v) {
-        const a = s, r = (n, e, l) => {
-          switch (l) {
+      if (b) {
+        const s = l, r = (t, e, i) => {
+          switch (i) {
             case "contains-one":
-              return n.some((p) => e.includes(p));
+              return t.some((c) => e.includes(c));
             case "full-eq":
-              if (n.length !== e.length) return !1;
-              const f = [...n].sort(), d = [...e].sort();
-              return f.every((p, R) => p === d[R]);
+              if (t.length !== e.length) return !1;
+              const f = [...t].sort(), d = [...e].sort();
+              return f.every((c, R) => c === d[R]);
             case "not-contains":
-              return !n.some((p) => e.includes(p));
+              return !t.some((c) => e.includes(c));
           }
         };
-        c.value = a.reduce((n, e) => (r(
-          i.map((f) => String(f)),
+        p.value = s.reduce((t, e) => (r(
+          o.map((f) => String(f)),
           e.compareValue,
           e.arrayCompareType
-        ) || n.push(e.error), n), []);
+        ) || t.push(e.error), t), []);
       }
-      if (A) {
-        const a = s, r = b || [];
-        c.value = a.reduce((n, e) => {
-          const l = e.fileMaxSize ?? e.maxFileSize, f = e.fileAllowedTypes ?? e.allowedTypes, d = e.fileMaxCount ?? e.maxFiles;
-          return typeof l == "number" && r.some((p) => p.size > l) && n.push(e.error), f && r.some((p) => !j(p, f)) && n.push(e.error), typeof d == "number" && r.length > d && n.push(e.error), n;
+      if (C) {
+        const s = l, r = A || [];
+        p.value = s.reduce((t, e) => {
+          const i = e.fileMaxSize ?? e.maxFileSize, f = e.fileAllowedTypes ?? e.allowedTypes, d = e.fileMaxCount ?? e.maxFiles;
+          return typeof i == "number" && r.some((c) => c.size > i) && t.push(e.error), f && r.some((c) => !z(c, f)) && t.push(e.error), typeof d == "number" && r.length > d && t.push(e.error), t;
         }, []);
       }
-      y.value = c.value.length === 0;
+      y.value = p.value.length === 0;
     }
   };
 };
 export {
-  P as useFieldValidation
+  D as useFieldValidation
 };

package/dist/hooks/use-focusable-input.js

@@ -0,0 +1,27 @@
+import { ref as c } from "vue";
+const d = (s = {}) => {
+  const e = c(null), u = c(!1);
+  return {
+    elementRef: e,
+    focused: u,
+    handleFocus: () => {
+      u.value = !0, s.onFocus?.();
+    },
+    handleBlur: () => {
+      u.value = !1, s.onBlur?.();
+    },
+    focus: () => {
+      e.value?.focus();
+    },
+    blur: () => {
+      e.value?.blur();
+    },
+    select: () => {
+      const l = e.value;
+      l && "select" in l && typeof l.select == "function" && l.select();
+    }
+  };
+};
+export {
+  d as useFocusableInput
+};

package/dist/hooks/use-nmorph-translation.js

@@ -1,12 +1,12 @@
-import { Locale as o } from "../types/index.js";
 import { createI18n as c } from "vue-i18n";
-import s from "../locales/en.js";
+import o from "../locales/en.js";
+import { Locale as s } from "../types/translation.types.js";
 const f = (e) => {
-  const l = e && e.messages ? { ...e.messages, en: s } : { en: s }, r = e && e.locale ? e.locale : o.en;
+  const l = e && e.messages ? { ...e.messages, en: o } : { en: o }, r = e && e.locale ? e.locale : s.en;
   return c({
     legacy: !1,
     locale: r,
-    fallbackLocale: o.en,
+    fallbackLocale: s.en,
     messages: l
   });
 };

package/dist/hooks/use-placement.js

@@ -1,89 +1,93 @@
-import { ref as b, unref as n, inject as T, watch as F, onMounted as U, onUnmounted as X, nextTick as S } from "vue";
-const G = (j) => {
-  const { initialPlacement: g, relativeElement: y, contentDOMElement: u, yOffset: L = 0, xOffset: O = 0, enabled: h } = j, R = b(n(g)), C = b({ x: "0px", y: "0px" }), v = b(!1), k = T("nmorph"), P = { passive: !0, capture: !0 };
+import { ref as b, unref as i, inject as U, watch as X, onMounted as J, onUnmounted as K, nextTick as $ } from "vue";
+const F = 4, Z = (H) => {
+  const { initialPlacement: p, relativeElement: O, contentDOMElement: d, yOffset: R = 0, xOffset: M = 0, enabled: g } = H, y = b(i(p)), L = b({ x: "0px", y: "0px" }), m = b(!1), I = U("nmorph"), P = { passive: !0, capture: !0 };
   let w = null;
-  F(
-    () => k?.browser,
+  X(
+    () => I?.browser,
     () => {
-      o();
+      r();
     },
     { deep: !0 }
-  ), U(() => {
-    o(), V(), window.addEventListener("resize", o, { passive: !0 }), w = new MutationObserver(() => {
-      M();
-    }), w.observe(document.body, { childList: !0, subtree: !0 }), M();
-  }), X(() => {
-    W(), window.removeEventListener("resize", o), w?.disconnect();
-  }), F(
-    () => [n(g), n(y), n(O), n(L), n(h)],
+  ), J(() => {
+    r(), Y(), window.addEventListener("resize", r, { passive: !0 }), w = new MutationObserver(() => {
+      C();
+    }), w.observe(document.body, { childList: !0, subtree: !0 }), C();
+  }), K(() => {
+    _(), window.removeEventListener("resize", r), w?.disconnect();
+  }), X(
+    () => [i(p), i(O), i(M), i(R), i(g)],
     () => {
-      o();
+      r();
     },
     { flush: "post" }
   );
-  const M = () => {
-    S(() => {
-      u.value && o();
+  const C = () => {
+    $(() => {
+      d.value && r();
     });
-  }, A = () => h === void 0 || n(h) !== !1, q = (e) => {
-    const [s, t] = e.split("-");
+  }, W = () => g === void 0 || i(g) !== !1, N = (t) => {
+    const [n, e] = t.split("-");
     return {
-      side: s,
-      align: t || "start",
-      hasAlign: !!t
+      side: n,
+      align: e || "start",
+      hasAlign: !!e
     };
-  }, z = (e, s, t) => t ? `${e}-${s}` : e, B = () => n(y), H = (e, s, t, l, d, r, i) => e === "top" && t - i < 0 ? "bottom" : e === "bottom" && t + d + i > window.innerHeight ? "top" : e === "left" && s - r < 0 ? "right" : e === "right" && s + l + r > window.innerWidth ? "left" : e, V = () => {
-    window.addEventListener("scroll", o, P);
-  }, W = () => {
-    window.removeEventListener("scroll", o, P);
-  }, o = () => {
-    S(() => {
+  }, S = (t, n, e) => e ? `${t}-${n}` : t, A = () => i(O), B = (t, n, e) => {
+    const o = F, a = Math.max(e - n - F, o);
+    return Math.min(Math.max(t, o), a);
+  }, T = (t, n, e, o, a, s, l) => t === "top" && e - l < 0 ? "bottom" : t === "bottom" && e + a + l > window.innerHeight ? "top" : t === "left" && n - s < 0 ? "right" : t === "right" && n + o + s > window.innerWidth ? "left" : t, Y = () => {
+    window.addEventListener("scroll", r, P);
+  }, _ = () => {
+    window.removeEventListener("scroll", r, P);
+  }, r = () => {
+    $(() => {
       if (typeof window > "u") return;
-      if (!A()) {
-        v.value = !1;
+      if (!W()) {
+        m.value = !1;
         return;
       }
-      const e = B();
-      if (!u.value || !e) {
-        v.value = !1;
+      const t = A();
+      if (!d.value || !t) {
+        m.value = !1;
         return;
       }
-      const s = u.value.getBoundingClientRect(), t = s.width, l = s.height, d = e.getBoundingClientRect(), { x: r, y: i } = d, m = d.width, p = d.height, D = n(O) || 0, N = n(L) || 0, f = q(n(g)), a = H(
+      const n = d.value.getBoundingClientRect(), e = n.width, o = n.height, a = t.getBoundingClientRect(), { x: s, y: l } = a, v = a.width, h = a.height, j = i(M) || 0, k = i(R) || 0, f = N(i(p)), c = T(
         f.side,
-        r,
-        i,
-        m,
-        p,
-        t,
-        l
+        s,
+        l,
+        v,
+        h,
+        e,
+        o
       );
-      let E = r, x = i;
-      if (a === "top" || a === "bottom") {
-        const c = {
-          start: r,
-          center: r + m / 2 - t / 2,
-          end: r + m - t
+      let x = s, E = l;
+      if (c === "top" || c === "bottom") {
+        const u = {
+          start: s,
+          center: s + v / 2 - e / 2,
+          end: s + v - e
         };
-        E = c[f.align] ?? c.start, x = a === "top" ? i - l : i + p;
+        x = u[f.align] ?? u.start, E = c === "top" ? l - o : l + h;
       }
-      if (a === "left" || a === "right") {
-        const c = {
-          start: i,
-          center: i + p / 2 - l / 2,
-          end: i + p - l
+      if (c === "left" || c === "right") {
+        const u = {
+          start: l,
+          center: l + h / 2 - o / 2,
+          end: l + h - o
         };
-        E = a === "left" ? r - t : r + m, x = c[f.align] ?? c.start;
+        x = c === "left" ? s - e : s + v, E = u[f.align] ?? u.start;
       }
-      R.value = z(a, f.align, f.hasAlign), C.value = { x: `${E + D}px`, y: `${x + N}px` }, v.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
-        const c = B();
-        if (!u.value || !c || !A()) return;
-        const $ = u.value.getBoundingClientRect();
-        ($.width !== t || $.height !== l) && o();
+      const q = x + j, z = E + k, D = B(q, e, window.innerWidth), G = B(z, o, window.innerHeight);
+      y.value = S(c, f.align, f.hasAlign), L.value = { x: `${D}px`, y: `${G}px` }, m.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
+        const u = A();
+        if (!d.value || !u || !W()) return;
+        const V = d.value.getBoundingClientRect();
+        (V.width !== e || V.height !== o) && r();
       });
     });
   };
-  return { placement: R, placementCoords: C, placementReady: v, adjustPlacement: o };
+  return { placement: y, placementCoords: L, placementReady: m, adjustPlacement: r };
 };
 export {
-  G as usePlacement
+  Z as usePlacement
 };