@nmorph/nmorph-ui-kit 2.2.43 → 2.2.45

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.vue.js

@@ -1,27 +1,31 @@
 import './NmorphFileUpload.css';
-import { defineComponent as Z, computed as F, inject as ee, ref as R, watch as te, onBeforeUnmount as oe, openBlock as d, createElementBlock as g, normalizeStyle as le, normalizeClass as ie, createElementVNode as f, unref as n, renderSlot as ae, createVNode as v, TransitionGroup as re, withCtx as I, Fragment as ne, renderList as se, createBlock as T, createCommentVNode as U, resolveDynamicComponent as de, toDisplayString as me } from "vue";
-import { useModifiers as ce } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as pe } from "../../../utils/common.js";
-import { getFileAcceptValue as ue, getFileTypeCandidates as A, isKnownFileType as h, isFileAllowedByTypes as fe, getFileExtension as ve } from "../../../utils/file-types.js";
-import { useI18n as he } from "vue-i18n";
+import { defineComponent as ee, computed as x, inject as te, ref as R, watch as oe, onBeforeUnmount as le, openBlock as r, createElementBlock as c, normalizeStyle as ie, normalizeClass as ne, createElementVNode as u, unref as l, renderSlot as ae, createVNode as m, TransitionGroup as se, withCtx as F, Fragment as T, renderList as re, toDisplayString as $, createBlock as V, createCommentVNode as me } from "vue";
+import { useModifiers as de } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ce } from "../../../utils/common.js";
+import { getFileAcceptValue as ue, isImageFile as N, isVideoFile as pe, isAudioFile as fe, getFileExtension as P, isFileAllowedByTypes as he } from "../../../utils/file-types.js";
+import { useI18n as ve } from "vue-i18n";
 import { useFormItemInput as _e, useFormItemModel as ye } from "../nmorph-form/use-form-item-input.js";
-import B from "../../basic/nmorph-button/NmorphButton.vue.js";
+import A from "../../basic/nmorph-button/NmorphButton.vue.js";
 /* empty css                                          */
-import Fe from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
+import xe from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
 /* empty css                                                      */
-import ge from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import xe from "../../../assets/icons/doc.svg.js";
-import be from "../../../assets/icons/audio.svg.js";
-import we from "../../../assets/icons/archive.svg.js";
-import { NmorphImageResolution as L, NmorphAudioResolution as Ce, NmorphVideoResolution as Ie, NmorphArchiveResolution as Ne } from "./types.js";
-import Ve from "../../../assets/icons/cross.svg.js";
-import ke from "../../../assets/icons/image.svg.js";
-import Re from "../../../assets/icons/video.svg.js";
-const Te = { class: "nmorph-file-upload__trigger" }, Ue = ["id", "name", "autocomplete", "tabindex", "multiple", "disabled", "accept"], Ae = {
+import Fe from "../../data/nmorph-video-preview/NmorphVideoPreview.vue.js";
+/* empty css                                                      */
+import ge from "../../data/nmorph-audio-preview/NmorphAudioPreview.vue.js";
+/* empty css                                                      */
+import be from "../../data/nmorph-file-card/NmorphFileCard.vue.js";
+/* empty css                                              */
+import z from "../../../assets/icons/image.svg.js";
+import we from "../../../assets/icons/cross.svg.js";
+const ke = { class: "nmorph-file-upload__trigger" }, Ve = ["id", "name", "autocomplete", "tabindex", "multiple", "disabled", "accept"], Ce = {
   key: 0,
   class: "nmorph-file-upload__list"
-}, Be = { class: "nmorph-file-upload__file-info" }, Le = { class: "nmorph-file-upload__file-name" }, We = { class: "nmorph-file-upload__remove-file" }, tt = /* @__PURE__ */ Z({
+}, Ie = { class: "nmorph-file-upload__file-info" }, Be = { class: "nmorph-file-upload__file-name" }, Re = {
+  key: 1,
+  class: "nmorph-file-upload__file-info"
+}, Te = { class: "nmorph-file-upload__file-name" }, $e = { class: "nmorph-file-upload__remove-file" }, Ye = /* @__PURE__ */ ee({
   __name: "NmorphFileUpload",
   props: {
     id: {},
@@ -39,151 +43,176 @@ const Te = { class: "nmorph-file-upload__trigger" }, Ue = ["id", "name", "autoco
     fileNameWidth: { default: void 0 }
   },
   emits: ["update:model-value", "on-unsupported-file-type-error", "on-file-validation-error"],
-  setup(W, { expose: P, emit: S }) {
-    const { t: D } = he(), l = W, x = S, E = F(() => l.buttonText ? l.buttonText : D("selectFile")), { id: _, name: M, autocomplete: $, tabindex: O } = _e(l), { modelValue: N, updateModelValue: j } = ye(
-      l,
-      (e) => x("update:model-value", e),
+  setup(E, { expose: L, emit: M }) {
+    const { t: U } = ve(), o = E, g = M, D = x(() => o.buttonText ? o.buttonText : U("selectFile")), { id: _, name: O, autocomplete: W, tabindex: j } = _e(o), { modelValue: C, updateModelValue: G } = ye(
+      o,
+      (e) => g("update:model-value", e),
       []
-    ), b = ee("form-data", void 0), z = (e) => {
-      const t = A(e);
-      return e.type.toLowerCase().startsWith("image/") || t.some((o) => h(o, L));
-    }, G = F(() => ue(l.allowedTypes)), K = (e) => {
-      const t = A(e);
-      let o = xe;
-      return (e.type.toLowerCase().startsWith("image/") || t.some((i) => h(i, L))) && (o = ke), (e.type.toLowerCase().startsWith("audio/") || t.some((i) => h(i, Ce))) && (o = be), (e.type.toLowerCase().startsWith("video/") || t.some((i) => h(i, Ie))) && (o = Re), t.some((i) => h(i, Ne)) && (o = we), o;
-    }, m = R(null), r = R([...N.value]), c = /* @__PURE__ */ new Set(), w = () => {
-      const e = m.value;
+    ), b = te("form-data", void 0), q = x(() => ue(o.allowedTypes)), H = (e) => o.photoWithPreview && N(e), p = R(null), s = R([...C.value]), f = /* @__PURE__ */ new Set(), w = () => {
+      const e = p.value;
       e && (e.value = "");
-    }, C = (e) => {
-      c.has(e) && (URL.revokeObjectURL(e), c.delete(e));
-    }, V = (e) => {
-      const t = new Set(e.map((o) => o.previewUrl));
-      Array.from(c).forEach((o) => {
-        t.has(o) || C(o);
-      });
     }, k = (e) => {
-      const t = [...e];
-      r.value = t, j(t);
-    }, q = (e) => {
-      const t = b?.validateField(_.value, e);
+      f.has(e) && (URL.revokeObjectURL(e), f.delete(e));
+    }, I = (e) => {
+      const i = new Set(e.map((t) => t.previewUrl));
+      Array.from(f).forEach((t) => {
+        i.has(t) || k(t);
+      });
+    }, B = (e) => {
+      const i = [...e];
+      s.value = i, G(i);
+    }, J = (e) => {
+      const i = b?.validateField(_.value, e);
       return {
-        valid: t?.valid.value ?? !0,
-        errors: t?.errors.value ?? []
+        valid: i?.valid.value ?? !0,
+        errors: i?.errors.value ?? []
       };
-    }, H = () => {
-      l.disabled || !m.value || m.value.click();
-    }, J = (e) => {
-      if (l.disabled) return;
-      const t = e.target, o = Array.from(t.files || []), i = l.multiple ? o : o.slice(0, 1), s = [];
-      if (i.forEach((a) => {
-        if (!fe(a, l.allowedTypes)) {
-          x("on-unsupported-file-type-error", a.type || ve(a.name) || a.name);
+    }, K = () => {
+      o.disabled || !p.value || p.value.click();
+    }, Q = (e) => {
+      if (o.disabled) return;
+      const i = e.target, t = Array.from(i.files || []), a = o.multiple ? t : t.slice(0, 1), d = [];
+      if (a.forEach((n) => {
+        if (!he(n, o.allowedTypes)) {
+          g("on-unsupported-file-type-error", n.type || P(n.name) || n.name);
           return;
         }
-        const p = l.multiple ? [...r.value.map((y) => y.data), ...s, a] : [a], u = q(p);
-        if (!u.valid) {
-          x("on-file-validation-error", { file: a, errors: u.errors });
+        const h = o.multiple ? [...s.value.map((y) => y.data), ...d, n] : [n], v = J(h);
+        if (!v.valid) {
+          g("on-file-validation-error", { file: n, errors: v.errors });
           return;
         }
-        s.push(a);
-      }), w(), s.length > 0) {
-        const a = s.map((u) => {
-          const y = URL.createObjectURL(u);
-          return c.add(y), { data: u, previewUrl: y };
-        }), p = l.multiple ? [...r.value, ...a] : a;
-        V(p), k(p), b?.validateField(_.value, p);
+        d.push(n);
+      }), w(), d.length > 0) {
+        const n = d.map((v) => {
+          const y = URL.createObjectURL(v);
+          return f.add(y), { data: v, previewUrl: y };
+        }), h = o.multiple ? [...s.value, ...n] : n;
+        I(h), B(h), b?.validateField(_.value, h);
       }
-    }, Q = (e) => {
-      if (l.disabled) return;
-      const t = r.value.findIndex((o) => o.data.name === e);
-      if (t !== -1) {
-        const o = r.value[t];
-        C(o.previewUrl), w();
-        const i = r.value.filter((s, a) => a !== t);
-        k(i), b?.validateField(_.value, i);
+    }, X = (e) => {
+      if (o.disabled) return;
+      const i = s.value.findIndex((t) => t.data.name === e);
+      if (i !== -1) {
+        const t = s.value[i];
+        k(t.previewUrl), w();
+        const a = s.value.filter((d, n) => n !== i);
+        B(a), b?.validateField(_.value, a);
       }
     };
-    te(
-      N,
+    oe(
+      C,
       (e) => {
-        const t = [...e];
-        V(t), r.value = t, t.length === 0 && w();
+        const i = [...e];
+        I(i), s.value = i, i.length === 0 && w();
       },
       { deep: !0 }
-    ), oe(() => {
-      Array.from(c).forEach((e) => C(e));
-    }), P({ inputDOMRef: m });
-    const X = F(
-      () => ce({
-        "nmorph-file-upload": [l.disabled && "disabled", l.compact && "compact", `layout-${l.layout}`]
+    ), le(() => {
+      Array.from(f).forEach((e) => k(e));
+    }), L({ inputDOMRef: p });
+    const Y = x(
+      () => de({
+        "nmorph-file-upload": [o.disabled && "disabled", o.compact && "compact", `layout-${o.layout}`]
       })
-    ), Y = F(
-      () => pe({
-        "--nmorph-file-upload-name-width": l.fileNameWidth
+    ), Z = x(
+      () => ce({
+        "--nmorph-file-upload-name-width": o.fileNameWidth
       })
     );
-    return (e, t) => (d(), g("div", {
-      class: ie(X.value),
-      style: le(Y.value)
+    return (e, i) => (r(), c("div", {
+      class: ne(Y.value),
+      style: ie(Z.value)
     }, [
-      f("div", Te, [
-        f("input", {
-          id: n(_),
+      u("div", ke, [
+        u("input", {
+          id: l(_),
           ref_key: "inputDOMRef",
-          ref: m,
-          name: n(M),
-          autocomplete: n($),
-          tabindex: n(O),
+          ref: p,
+          name: l(O),
+          autocomplete: l(W),
+          tabindex: l(j),
           type: "file",
-          multiple: l.multiple,
-          disabled: l.disabled,
-          accept: G.value,
+          multiple: o.multiple,
+          disabled: o.disabled,
+          accept: q.value,
           class: "nmorph-native-input",
-          onChange: J
-        }, null, 40, Ue),
+          onChange: Q
+        }, null, 40, Ve),
         ae(e.$slots, "trigger", {}, () => [
-          v(n(B), {
-            text: E.value,
+          m(l(A), {
+            text: D.value,
             fill: "",
-            disabled: l.disabled,
-            onClick: H
+            disabled: o.disabled,
+            onClick: K
           }, null, 8, ["text", "disabled"])
         ])
       ]),
-      r.value.length > 0 ? (d(), g("div", Ae, [
-        v(re, {
+      s.value.length > 0 ? (r(), c("div", Ce, [
+        m(se, {
           name: "list",
           tag: "div"
         }, {
-          default: I(() => [
-            (d(!0), g(ne, null, se(r.value, ({ data: o, previewUrl: i }) => (d(), g("div", {
-              key: o.name,
+          default: F(() => [
+            (r(!0), c(T, null, re(s.value, ({ data: t, previewUrl: a }) => (r(), c("div", {
+              key: t.name,
               class: "nmorph-file-upload__file"
             }, [
-              l.photoWithPreview && z(o) ? (d(), T(n(Fe), {
-                key: 0,
-                src: i
-              }, null, 8, ["src"])) : U("", !0),
-              f("div", Be, [
-                v(n(ge), {
+              H(t) ? (r(), c(T, { key: 0 }, [
+                m(l(xe), { src: a }, null, 8, ["src"]),
+                u("div", Ie, [
+                  m(l(S), {
+                    width: "14px",
+                    height: "17px"
+                  }, {
+                    default: F(() => [
+                      m(l(z))
+                    ]),
+                    _: 1
+                  }),
+                  u("span", Be, $(t.name), 1)
+                ])
+              ], 64)) : l(N)(t) ? (r(), c("div", Re, [
+                m(l(S), {
                   width: "14px",
                   height: "17px"
                 }, {
-                  default: I(() => [
-                    (d(), T(de(K(o))))
+                  default: F(() => [
+                    m(l(z))
                   ]),
-                  _: 2
-                }, 1024),
-                f("span", Le, me(o.name), 1)
-              ]),
-              f("div", We, [
-                v(n(B), {
+                  _: 1
+                }),
+                u("span", Te, $(t.name), 1)
+              ])) : l(pe)(t) ? (r(), V(l(Fe), {
+                key: 2,
+                src: a,
+                name: t.name,
+                "download-href": a,
+                compact: "",
+                controls: ""
+              }, null, 8, ["src", "name", "download-href"])) : l(fe)(t) ? (r(), V(l(ge), {
+                key: 3,
+                src: a,
+                name: t.name,
+                "download-href": a,
+                compact: ""
+              }, null, 8, ["src", "name", "download-href"])) : (r(), V(l(be), {
+                key: 4,
+                name: t.name,
+                "mime-type": t.type,
+                size: t.size,
+                extension: l(P)(t.name),
+                "preview-src": a,
+                "download-href": a,
+                compact: ""
+              }, null, 8, ["name", "mime-type", "size", "extension", "preview-src", "download-href"])),
+              u("div", $e, [
+                m(l(A), {
                   height: "thin",
                   "style-type": "transparent",
-                  onClick: (s) => Q(o.name)
+                  onClick: (d) => X(t.name)
                 }, {
-                  "icon-only": I(() => [
-                    v(n(Ve))
+                  "icon-only": F(() => [
+                    m(l(we))
                   ]),
                   _: 1
                 }, 8, ["onClick"])
@@ -192,10 +221,10 @@ const Te = { class: "nmorph-file-upload__trigger" }, Ue = ["id", "name", "autoco
           ]),
           _: 1
         })
-      ])) : U("", !0)
+      ])) : me("", !0)
     ], 6));
   }
 });
 export {
-  tt as default
+  Ye as default
 };

package/dist/components/form/nmorph-file-upload/types.js

@@ -1,5 +1,5 @@
 var p = /* @__PURE__ */ ((a) => (a.jpeg = "image/jpeg", a.jpg = "image/jpg", a.png = "image/png", a.gif = "image/gif", a["svg-xml"] = "image/svg+xml", a.webp = "image/webp", a))(p || {});
-const d = {
+const g = {
   mp4: "video/mp4",
   webm: "video/webm",
   "video-ogg": "video/ogg",
@@ -8,19 +8,19 @@ const d = {
    */
   "wideo-ogg": "video/ogg"
 };
-var e = /* @__PURE__ */ ((a) => (a.mpeg = "audio/mpeg", a["audio-ogg"] = "audio/ogg", a.wav = "audio/wav", a))(e || {}), i = /* @__PURE__ */ ((a) => (a.pdf = "application/pdf", a.msword = "application/msword", a.docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", a.xlsx = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", a.pptx = "application/vnd.openxmlformats-officedocument.presentationml.presentation", a.json = "application/json", a.xml = "application/xml", a))(i || {}), g = /* @__PURE__ */ ((a) => (a.zip = "application/zip", a.rar = "application/x-rar-compressed", a["7z"] = "application/x-7z-compressed", a))(g || {});
+var i = /* @__PURE__ */ ((a) => (a.mpeg = "audio/mpeg", a["audio-ogg"] = "audio/ogg", a.wav = "audio/wav", a))(i || {}), e = /* @__PURE__ */ ((a) => (a.pdf = "application/pdf", a.msword = "application/msword", a.docx = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", a.xls = "application/vnd.ms-excel", a.xlsx = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", a.ppt = "application/vnd.ms-powerpoint", a.pptx = "application/vnd.openxmlformats-officedocument.presentationml.presentation", a.json = "application/json", a.xml = "application/xml", a))(e || {}), d = /* @__PURE__ */ ((a) => (a.zip = "application/zip", a.rar = "application/x-rar-compressed", a["7z"] = "application/x-7z-compressed", a))(d || {});
 const n = {
   ...p,
-  ...d,
-  ...e,
+  ...g,
   ...i,
-  ...g
+  ...e,
+  ...d
 };
 export {
-  g as NmorphArchiveResolution,
-  e as NmorphAudioResolution,
-  i as NmorphDocResolution,
+  d as NmorphArchiveResolution,
+  i as NmorphAudioResolution,
+  e as NmorphDocResolution,
   p as NmorphImageResolution,
-  d as NmorphVideoResolution,
+  g as NmorphVideoResolution,
   n as resolution
 };

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

@@ -1,18 +1,18 @@
-import { nmorphCombined as s, nmorphInset as t, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as a, body2 as p, body3 as e, body4 as m } from "../utils/theme-style.js";
+import { nmorphCombined as s, nmorphInset as r, nmorphOutset as h, title1 as l, title2 as d, title3 as c, title4 as b, body1 as e, body2 as p, body3 as a, body4 as m } from "../utils/theme-style.js";
 const u = {
   "nmorph-body-4": m,
-  "nmorph-body-3": e,
+  "nmorph-body-3": a,
   "nmorph-body-2": p,
-  "nmorph-body-1": a,
+  "nmorph-body-1": e,
   "nmorph-title-4": b,
   "nmorph-title-3": c,
   "nmorph-title-2": d,
   "nmorph-title-1": l,
   "nmorph--shadow-outset": h,
-  "nmorph--shadow-inset": t,
+  "nmorph--shadow-inset": r,
   "nmorph--shadow-combined": s
 }, w = () => {
-  let r = `
+  let t = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -112,7 +112,7 @@ const u = {
       width: auto;
       font-family: Helvetica, Roboto, Arial, sans-serif;
 
-      ${a()}
+      ${e()}
     }
 
     h1 {
@@ -262,9 +262,89 @@ const u = {
     .nmorph-scroll {
       --thumb-color: var(--nmorph-scroll-thumb-color, var(--nmorph-text-color));
 
+      position: relative;
+      overflow: hidden;
       color-scheme: var(--nmorph-scroll-color-scheme, light);
-      scrollbar-color: var(--thumb-color) transparent;
-      scrollbar-width: thin;
+    }
+
+    .nmorph-scroll__viewport {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      display: inherit;
+      flex-direction: inherit;
+      flex-wrap: inherit;
+      align-content: inherit;
+      align-items: inherit;
+      justify-content: inherit;
+      gap: inherit;
+      grid-auto-flow: inherit;
+      grid-template-columns: inherit;
+      grid-template-rows: inherit;
+      color-scheme: inherit;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    .nmorph-scroll__viewport::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+      background: transparent;
+    }
+
+    .nmorph-scroll__bar {
+      position: absolute;
+      z-index: 1;
+      border-radius: var(--border-radius-40);
+      background: transparent;
+      ${r()}
+      opacity: 0.78;
+      transition:
+        opacity ease-in-out 0.16s,
+        background-color ease-in-out 0.16s;
+      touch-action: none;
+    }
+
+    .nmorph-scroll__bar--vertical {
+      top: 0;
+      right: 0;
+      width: var(--bar-width);
+    }
+
+    .nmorph-scroll__bar--horizontal {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: var(--bar-height);
+    }
+
+    .nmorph-scroll__thumb {
+      position: absolute;
+      top: 0;
+      left: 0;
+      border-radius: var(--border-radius-40);
+      background-color: var(--thumb-color);
+      cursor: pointer;
+      transition: background-color ease-in-out 0.16s;
+      touch-action: none;
+    }
+
+    .nmorph-scroll__thumb--vertical {
+      width: 100%;
+    }
+
+    .nmorph-scroll__thumb--horizontal {
+      height: 100%;
+    }
+
+    .nmorph-scroll--show-bars .nmorph-scroll__bar,
+    .nmorph-scroll__bar:hover {
+      opacity: 1;
+    }
+
+    .nmorph-scroll--dragging .nmorph-scroll__thumb {
+      cursor: grabbing;
     }
 
     .nmorph-scroll::-webkit-scrollbar {
@@ -298,7 +378,7 @@ const u = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${t()}
+      ${r()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -335,7 +415,7 @@ const u = {
     }
 
     .nmorph--thin-component.nmorph-native-input {
-      ${e()}
+      ${a()}
     }
 
     .nmorph-native-input:focus {
@@ -410,12 +490,12 @@ const u = {
 
   `;
   for (const [n, i] of Object.entries(u))
-    r += `
+    t += `
 .${n} {
   ${i()}
 }
 `;
-  return r;
+  return t;
 }, g = () => {
   if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
   const o = document.createElement("style");