@nmorph/nmorph-ui-kit 2.2.9 → 2.2.10

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js

@@ -0,0 +1,55 @@
+import './NmorphNotificationProvider.css';
+import { defineComponent as g, ref as u, computed as v, watch as x } from "vue";
+import { NmorphNotificationPlacement as q } from "./types.js";
+import A from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+const h = 500, z = /* @__PURE__ */ g({
+  __name: "NmorphNotificationProvider",
+  props: {
+    notifications: { type: Array, required: !0 },
+    placement: { type: null, required: !1, default: "top-right" },
+    zIndex: { type: Number, required: !1, default: 1e3 },
+    quantity: { type: Number, required: !1, default: 100 }
+  },
+  setup(N, { expose: _ }) {
+    _();
+    const c = (e) => typeof e.id == "string" && e.id.length > 0, a = u([]), o = u([]), r = u([]), d = Object.values(q), f = (e) => {
+      r.value = r.value.filter((i) => i.id !== e), o.value = o.value.filter((i) => i !== e);
+    }, p = (e, i = !0) => {
+      o.value.includes(e) || (i && !a.value.includes(e) && (a.value = [...a.value, e]), o.value = [...o.value, e], setTimeout(() => f(e), h));
+    }, s = N, y = v(
+      () => d.map((e) => {
+        const i = r.value.filter(
+          (n) => (n.placement ?? s.placement) === e
+        ), t = Math.max(i.length - s.quantity, 0);
+        return {
+          placement: e,
+          notifications: i.slice(t)
+        };
+      }).filter((e) => e.notifications.length > 0)
+    );
+    x(
+      () => s.notifications,
+      (e) => {
+        const i = e.filter(c).filter((t) => !a.value.includes(t.id));
+        r.value = r.value.map((t) => {
+          const n = i.find((l) => l.id === t.id);
+          return n ? { ...t, ...n } : t;
+        }), i.forEach((t) => {
+          r.value.some(
+            (l) => l.id === t.id
+          ) || r.value.push(t);
+        }), r.value.filter(
+          (t) => !i.some((n) => n.id === t.id)
+        ).forEach((t) => p(t.id, !1));
+      },
+      { deep: !0, immediate: !0 }
+    );
+    const I = v(() => s.zIndex), m = { ANIMATION_DURATION: h, hasNotificationId: c, removedIds: a, closingIds: o, renderedNotifications: r, placementList: d, removeRenderedNotification: f, closeHandler: p, props: s, notificationGroups: y, zIndex: I, get NmorphAlert() {
+      return A;
+    } };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  z as default
+};

package/dist/components/providers/nmorph-notification-provider/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((t) => (t["top-left"] = "top-left", t["top-center"] = "top-center", t["top-right"] = "top-right", t["bottom-left"] = "bottom-left", t["bottom-center"] = "bottom-center", t["bottom-right"] = "bottom-right", t))(r || {});
+export {
+  r as NmorphNotificationPlacement
+};

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

@@ -0,0 +1,539 @@
+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
+}, x = () => {
+  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--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 {
+      position: absolute;
+      width: 0;
+      height: 0;
+      overflow: visible;
+    }
+
+    .nmorph-avatar__preview .nmorph-image-preview__trigger {
+      display: none;
+    }
+
+    .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 {
+  x 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
+};