@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/hooks/use-common-styles.js

@@ -0,0 +1,538 @@
+import { nmorphCombined as p, nmorphInset as o, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
+const b = {
+  "nmorph-body-4": u,
+  "nmorph-body-3": i,
+  "nmorph-body-2": c,
+  "nmorph-body-1": n,
+  "nmorph-title-4": m,
+  "nmorph-title-3": l,
+  "nmorph-title-2": d,
+  "nmorph-title-1": s,
+  "nmorph--shadow-outset": e,
+  "nmorph--shadow-inset": o,
+  "nmorph--shadow-combined": p
+}, g = () => {
+  let t = `
+    :root {
+      --font-size-tiny: 10px;
+      --font-size-extra-small: 12px;
+      --font-size-small: 13px;
+      --font-size-base: 14px;
+      --font-size-medium: 16px;
+      --font-size-large: 18px;
+      --font-size-extra-large: 20px;
+
+      --line-height-line: 1;
+      --line-height-compact: 1.3;
+      --line-height-regular: 1.5;
+      --line-height-loose: 1.7;
+
+      --border-radius-none: 0px;
+      --border-radius-20: 2px;
+      --border-radius-40: 4px;
+      --border-radius-60: 6px;
+      --border-radius-80: 8px;
+      --border-radius-120: 12px;
+      --border-radius-200: 20px;
+      --border-radius-999: 99px;
+      --border-radius-circular: 50%;
+      --default-border-radius: var(--border-radius-40);
+
+      --thick-component: 38px;
+      --default-thickness-component: 30px;
+      --thin-component: 22px;
+      --extra-thin-component: 14px;
+
+      --form-container: 280px;
+
+      --default-indentation-input: 8px;
+
+      --indentation-00: 0;
+      --indentation-01: 2px;
+      --indentation-02: 4px;
+      --indentation-03: 8px;
+      --indentation-04: 16px;
+
+      --base-shadow-blur: calc(var(--base-shadow-width) * var(--base-shadow-blur-coefficient));
+      --nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
+
+      --transition-04: 0.4s;
+      --transition-03: 0.3s;
+      --transition-02: 0.2s;
+      --transition-01: 0.1s;
+
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      text-size-adjust: 100%;
+      scroll-behavior: smooth;
+      box-sizing: border-box;
+      line-height: 1.15;
+    }
+
+    * {
+      color: var(--nmorph-text-color);
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      border-style: none;
+    }
+
+    body {
+      margin: 0;
+      width: auto;
+      font-family: Helvetica, Roboto, Arial, sans-serif;
+
+      ${n()}
+    }
+
+    h1 {
+      margin: 0.67em 0;
+      font-size: 2em;
+    }
+
+    hr {
+      height: 0;
+      overflow: visible;
+    }
+
+    pre,
+    code,
+    kbd,
+    samp {
+      font-size: 1em;
+      font-family: monospace;
+    }
+
+    sub,
+    sup {
+      position: relative;
+      font-size: 75%;
+      line-height: 0;
+      vertical-align: baseline;
+    }
+
+    sub {
+      bottom: -0.25em;
+    }
+
+    sup {
+      top: -0.5em;
+    }
+
+    a {
+      background: transparent;
+    }
+
+    abbr[title] {
+      text-decoration: underline dotted;
+      border-bottom: none;
+    }
+
+    b,
+    strong {
+      font-weight: bolder;
+    }
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+      margin: 0;
+      font-size: 100%;
+      font-family: inherit;
+      line-height: 1.15;
+      overflow: visible;
+      text-transform: none;
+    }
+
+    input {
+      appearance: none;
+    }
+
+    input:disabled {
+      cursor: not-allowed;
+    }
+
+    input[type='number'] {
+      appearance: textfield;
+    }
+
+    [type='checkbox'],
+    [type='radio'] {
+      box-sizing: border-box;
+      padding: 0;
+    }
+
+    textarea {
+      overflow: auto;
+    }
+
+    progress {
+      vertical-align: baseline;
+    }
+
+    template,
+    [hidden] {
+      display: none;
+    }
+
+    html {
+      background: var(--nmorph-main-color);
+    }
+
+    .nmorph--basic-component {
+      --height: var(--default-thickness-component);
+
+      height: var(--height);
+    }
+
+    .nmorph--thin-component {
+      --height: var(--thin-component);
+
+      height: var(--height);
+    }
+
+    .nmorph--extra-thin-component {
+      --height: var(--extra-thin-component);
+
+      height: var(--height);
+    }
+
+    .nmorph--thick-component {
+      --height: var(--thick-component);
+
+      height: var(--height);
+    }
+
+    .nmorph--thin-component.nmorph-native-input {
+      ${i()}
+    }
+
+    .nmorph-native-input:focus {
+      color: var(--nmorph-focus-text-color);
+    }
+
+    .nmorph-native-input:focus::placeholder {
+      color: var(--nmorph-focus-text-color);
+    }
+
+    .nmorph-native-input::placeholder {
+      color: var(--nmorph-placeholder-text-color);
+    }
+
+    .nmorph--fill {
+      width: 100%;
+    }
+
+    .nmorph--focused {
+      .nmorph-icon svg {
+        --color: var(--nmorph-focus-text-color);
+      }
+    }
+
+    .nmorph-avatar {
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .nmorph-avatar--circle {
+      border-radius: var(--border-radius-circular);
+    }
+
+    .nmorph-avatar--square {
+      border-radius: var(--default-border-radius);
+    }
+
+    .nmorph-avatar > .nmorph-image {
+      position: absolute;
+      --width: var(--nmorph-avatar-size);
+      --height: var(--nmorph-avatar-size);
+      padding: var(--nmorph-avatar-image-padding);
+      border-radius: var(--nmorph-avatar-radius);
+    }
+
+    .nmorph-avatar.nmorph--shadow-combined {
+      border: var(--nmorph-avatar-frame-border) solid var(--nmorph-main-color);
+      background: var(--nmorph-main-color);
+      box-shadow:
+        var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color),
+        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur)
+          var(--nmorph-dark-shade-color),
+        inset calc(-1 * var(--base-shadow-width)) calc(-0.5 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-dark-shade-color);
+    }
+
+    .nmorph-avatar > .nmorph-image > img {
+      border-radius: var(--nmorph-avatar-image-radius);
+    }
+
+    .nmorph-avatar__initials {
+      color: var(--nmorph-accent-color);
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .nmorph-avatar--preview {
+      cursor: pointer;
+    }
+
+    .nmorph-avatar--preview:hover > .nmorph-image {
+      filter: brightness(0.8);
+    }
+
+    .nmorph-image {
+      --width: auto;
+      --height: 100%;
+      width: var(--width);
+      height: var(--height);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .nmorph-image.nmorph--shadow-combined {
+      border: var(--nmorph-image-frame-border) solid var(--nmorph-main-color);
+    }
+
+    .nmorph-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: var(--nmorph-image-fit);
+    }
+
+    .nmorph-image__loading,
+    .nmorph-image__load-failed {
+      padding: 1rem;
+    }
+
+    .nmorph-image--hide img {
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+
+    .nmorph-text-input {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 0;
+      --prepend-icon-indent: 8px;
+      --prepend-icon-size: 14px;
+    }
+
+    .nmorph-text-input__input-side {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 100%;
+    }
+
+    .nmorph-text-input__prepend-icon {
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--prepend-icon-size);
+      min-width: var(--prepend-icon-size);
+      height: var(--prepend-icon-size);
+      min-height: var(--prepend-icon-size);
+      margin-left: var(--prepend-icon-indent);
+      pointer-events: none;
+    }
+
+    .nmorph-text-input__prepend-icon svg,
+    .nmorph-text-input__prepend-icon .nmorph-icon,
+    .nmorph-text-input__prepend-icon .nmorph-icon__content {
+      width: 100%;
+      min-width: 100%;
+      height: 100%;
+      min-height: 100%;
+    }
+
+    .nmorph-text-input__prepend-icon svg {
+      fill: var(--nmorph-text-color);
+      stroke-width: 0;
+    }
+
+    .nmorph-text-input__prepend-icon path {
+      stroke: var(--nmorph-text-color);
+    }
+
+    .nmorph-text-input input {
+      width: 100%;
+      height: var(--height);
+      text-indent: var(--nmorph-text-input-indentation);
+      border: none;
+      border-radius: var(--default-border-radius);
+      ${o()}
+    }
+
+    .nmorph-text-input--with-action input {
+      padding-right: calc(var(--height) + var(--indentation-03));
+    }
+
+    .nmorph-text-input input:focus {
+      ${e()}
+      background: var(--nmorph-accent-color);
+      outline: none;
+    }
+
+    .nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon svg {
+      fill: var(--nmorph-focus-text-color);
+    }
+
+    .nmorph-text-input.nmorph--focused .nmorph-text-input__prepend-icon path {
+      stroke: var(--nmorph-focus-text-color);
+    }
+
+    .nmorph-text-input input:-webkit-autofill,
+    .nmorph-text-input input:-webkit-autofill:hover,
+    .nmorph-text-input input:-webkit-autofill:active {
+      -webkit-text-fill-color: var(--nmorph-text-color);
+      caret-color: var(--nmorph-text-color);
+      box-shadow:
+        inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color),
+        inset 0 0 0 1000px var(--nmorph-main-color);
+    }
+
+    .nmorph-text-input input:-webkit-autofill:focus {
+      -webkit-text-fill-color: var(--nmorph-focus-text-color);
+      caret-color: var(--nmorph-focus-text-color);
+      box-shadow:
+        var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),
+        calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur)
+          var(--nmorph-light-shade-color),
+        inset 0 0 0 1000px var(--nmorph-accent-color);
+      outline: none;
+    }
+
+    .nmorph-text-input input:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .nmorph-text-input__password-btn {
+      position: absolute;
+      right: 0;
+      height: 100%;
+    }
+
+    .nmorph-text-input__password-btn .nmorph-button__content {
+      padding: var(--indentation-03);
+    }
+
+    .nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn {
+      margin-top: var(--indentation-00);
+    }
+
+    .nmorph-text-input.nmorph-button.nmorph--thin-component .nmorph-text-input__password-btn .nmorph-button {
+      --height: var(--thin-component);
+    }
+
+    .nmorph-text-input.nmorph-button.nmorph--focused .nmorph-text-input__password-btn .nmorph-icon {
+      --color: var(--nmorph-white-color);
+    }
+
+    .nmorph-text-input.nmorph-button.nmorph--focused
+      .nmorph-text-input__password-btn
+      .nmorph-button:not(:disabled, [loading='true']):hover
+      .nmorph-icon {
+      --color: var(--nmorph-white-color);
+    }
+
+    .list-enter-active,
+    .list-leave-active {
+      transition: all var(--transition-02) ease;
+    }
+
+    .list-enter-from,
+    .list-leave-to {
+      transform: translateX(30px);
+      opacity: 0;
+    }
+
+    .opacity-enter-active,
+    .opacity-list-leave-active {
+      transition: all var(--transition-02) ease;
+    }
+
+    .opacity-enter-from,
+    .opacity-leave-to {
+      opacity: 0;
+    }
+
+    @keyframes slide {
+      from {
+        left: -50%;
+      }
+
+      to {
+        left: 100%;
+      }
+    }
+
+    @keyframes nmorph-skeleton-loading-animation {
+      0% {
+        background-position: 100% 50%;
+      }
+
+      100% {
+        background-position: 0 50%;
+      }
+    }
+
+    .nmorph-scroll {
+      --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
+    }
+
+    .nmorph-scroll::-webkit-scrollbar {
+      width: var(--bar-width);
+      height: var(--bar-height);
+      background-color: transparent;
+      cursor: pointer;
+      transition: width ease-in-out 0.2s;
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-track {
+      border-radius: var(--border-radius-40);
+      ${o()}
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-thumb {
+      background-color: var(--thumb-color);
+      border-radius: var(--border-radius-40);
+    }
+
+    .nmorph-scroll::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
+  `;
+  for (const [a, h] of Object.entries(b))
+    t += `
+.${a} {
+  ${h()}
+}
+`;
+  const r = document.createElement("style");
+  r.innerHTML = t, document.head.appendChild(r);
+};
+export {
+  g as useCommonStyles
+};

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

@@ -0,0 +1,74 @@
+import { ref as p } from "vue";
+const I = (b) => {
+  const { inputValue: h, rules: a } = b, c = p([]), f = p(!1), d = p(!1);
+  return {
+    touched: d,
+    valid: f,
+    errors: c,
+    validate: () => {
+      const y = a?.length > 0;
+      if (!y) {
+        f.value = !0;
+        return;
+      }
+      if (h === null) return;
+      const t = h, u = (n) => y && n in a[0], m = typeof t == "string" && u("pattern"), v = typeof t == "number" && u("numberCompareType"), g = (typeof t == "string" || typeof t == "boolean") && u("booleanCompareType"), T = Array.isArray(t) && u("arrayCompareType");
+      if (!v && !m && !g && !T) {
+        console.warn("The input value and the provided rules do not match");
+        return;
+      }
+      if (d.value || (d.value = !0), m) {
+        const n = a;
+        c.value = n.reduce((o, r) => (t.match(r.pattern) || o.push(r.error), o), []);
+      }
+      if (v) {
+        const n = (r, e, s) => {
+          switch (s) {
+            case "eq":
+              return r === e;
+            case "gt":
+              return r > e;
+            case "lt":
+              return r < e;
+            case "lte":
+              return r <= e;
+            case "gte":
+              return r >= e;
+          }
+        }, o = a;
+        c.value = o.reduce((r, e) => (n(t, e.compareValue, e.numberCompareType) && r.push(e.error), r), []);
+      }
+      if (g) {
+        const n = a;
+        c.value = n.reduce((o, r) => {
+          let e = !1;
+          const { compareValue: s, booleanCompareType: i } = r;
+          return i === "not-eq" && (e = t === s), i === "eq" && (e = t !== s), e || o.push(r.error), o;
+        }, []);
+      }
+      if (T) {
+        const n = a, o = (r, e, s) => {
+          switch (s) {
+            case "contains-one":
+              return r.some((l) => e.includes(l));
+            case "full-eq":
+              if (r.length !== e.length) return !1;
+              const i = [...r].sort(), C = [...e].sort();
+              return i.every((l, w) => l === C[w]);
+            case "not-contains":
+              return !r.some((l) => e.includes(l));
+          }
+        };
+        c.value = n.reduce((r, e) => (o(
+          t.map((i) => String(i)),
+          e.compareValue,
+          e.arrayCompareType
+        ) || r.push(e.error), r), []);
+      }
+      f.value = c.value.length === 0;
+    }
+  };
+};
+export {
+  I as useFieldValidation
+};

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

@@ -0,0 +1,30 @@
+import { reactive as i, ref as p, watch as b, readonly as v } from "vue";
+import { deepClone as F } from "../utils/common.js";
+import { useFieldValidation as c } from "./use-field-validation.js";
+const T = (n, f = !1) => {
+  const t = i({}), o = i({}), u = i(F(n)), a = p(!1), d = p(!1), h = () => {
+    Object.entries(n).forEach(([e, s]) => {
+      o[e] = c({ inputValue: s.value, rules: s.rules }), o[e].validate();
+    }), a.value = Object.values(o).every((e) => e.valid);
+  }, V = () => {
+    Object.entries(n).forEach(([e, s]) => {
+      t[e] = c({ inputValue: s.value, rules: s.rules }), t[e].validate();
+    });
+  }, m = (e, s) => Object.keys(s).filter((l) => {
+    const g = e[l] ? JSON.stringify(e[l]) : null, O = JSON.stringify(s[l]);
+    return g !== O;
+  });
+  return b(n, (e) => {
+    m(u, e).forEach((r) => {
+      const l = e[r];
+      t[r] = c({ inputValue: l.value, rules: l.rules }), t[r].validate();
+    }), Object.assign(u, F(e)), h(), d.value = !0;
+  }, { deep: !0 }), f && V(), {
+    fields: t,
+    isFormValid: v(a),
+    isAnyTouched: v(d)
+  };
+};
+export {
+  T as useFormValidation
+};

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

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

package/dist/hooks/use-placement.js

@@ -0,0 +1,57 @@
+import { ref as p, inject as R, watch as S, onMounted as W, onUnmounted as k, nextTick as E } from "vue";
+const T = (b) => {
+  const { initialPlacement: y, relativeElement: s, contentDOMElement: c, yOffset: u = 0, xOffset: v = 0 } = b, e = p(y), r = p({ x: "0px", y: "0px" }), C = R("nmorph"), a = p(null);
+  S(
+    () => C.browser,
+    () => {
+      n();
+    },
+    { deep: !0 }
+  ), W(() => {
+    n(), L(), $(), h.observe(document.body, {
+      childList: !0,
+      subtree: !0
+    }), f();
+  }), k(() => {
+    O(), h.disconnect();
+  });
+  const f = () => {
+    E(() => {
+      c.value && n();
+    });
+  }, h = new MutationObserver(() => {
+    f();
+  }), L = () => {
+    let t = c.value;
+    for (; t; ) {
+      const o = window.getComputedStyle(t);
+      if (o.overflowY === "auto" || o.overflowY === "scroll") {
+        a.value = t;
+        break;
+      }
+      t = t.parentElement;
+    }
+  }, $ = () => {
+    a.value ? a.value.addEventListener("scroll", n, { passive: !0 }) : window.addEventListener("scroll", n, { passive: !0 });
+  }, O = () => {
+    a.value ? a.value.removeEventListener("scroll", n) : window.removeEventListener("scroll", n);
+  }, n = () => {
+    E(() => {
+      if (!c.value || !s) {
+        console.warn("There is no relative element or content DOM element");
+        return;
+      }
+      const t = c.value.getBoundingClientRect(), o = t.width, d = t.height, w = "value" in s ? s.value : s;
+      if (!w) {
+        console.warn("Relative element is not an HTMLElement");
+        return;
+      }
+      const m = w.getBoundingClientRect(), { x: l, y: i } = m, x = m.width, g = m.height, H = window.innerWidth, M = window.innerHeight;
+      e.value === "top" && i - d < 0 && (e.value = "bottom"), e.value === "bottom" && i + g + d > M && (e.value = "top"), e.value === "left" && l - o < 0 && (e.value = "right"), e.value === "right" && l + x + o > H && (e.value = "left"), e.value === "top" && (r.value = { x: `${l + v}px`, y: `${i - d + u}px` }), e.value === "bottom" && (r.value = { x: `${l + v}px`, y: `${i + g + u}px` }), e.value === "right" && (r.value = { x: `${l + x + v}px`, y: `${i + u}px` }), e.value === "left" && (r.value = { x: `${l - o + v}px`, y: `${i + u}px` });
+    });
+  };
+  return { placement: e, placementCoords: r };
+};
+export {
+  T as usePlacement
+};