@nmorph/nmorph-ui-kit 2.2.42 → 2.2.44

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js

@@ -0,0 +1,147 @@
+import './NmorphVideoPreview.css';
+import { defineComponent as C, useSlots as b, computed as p, openBlock as o, createElementBlock as t, normalizeStyle as D, normalizeClass as H, createBlock as v, unref as a, withCtx as m, createVNode as l, toDisplayString as f, createCommentVNode as s, renderSlot as V, createElementVNode as $ } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as I } from "../../../utils/common.js";
+import c from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import A from "../../../assets/icons/loading.svg.js";
+import E from "../../../assets/icons/video.svg.js";
+import M from "../../../assets/icons/open.svg.js";
+import P from "../../../assets/icons/download.svg.js";
+const T = ["src", "poster", "controls", "muted", "playsinline", "preload"], O = {
+  key: 1,
+  class: "nmorph-video-preview__state"
+}, L = {
+  key: 2,
+  class: "nmorph-video-preview__error"
+}, j = {
+  key: 2,
+  class: "nmorph-video-preview__meta"
+}, q = {
+  key: 0,
+  class: "nmorph-video-preview__name"
+}, F = {
+  key: 1,
+  class: "nmorph-video-preview__duration"
+}, G = {
+  key: 3,
+  class: "nmorph-video-preview__actions"
+}, J = ["href", "aria-label"], K = ["href", "download", "aria-label"], re = /* @__PURE__ */ C({
+  __name: "NmorphVideoPreview",
+  props: {
+    src: {},
+    poster: { default: "" },
+    name: { default: "" },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    durationMs: { default: void 0 },
+    compact: { type: Boolean, default: !1 },
+    controls: { type: Boolean, default: !0 },
+    muted: { type: Boolean, default: !1 },
+    playsinline: { type: Boolean, default: !0 },
+    preload: { default: "metadata" },
+    fit: { default: "cover" },
+    downloadHref: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    errorText: { default: "" },
+    showDefaultActions: { type: Boolean, default: !0 }
+  },
+  emits: ["play", "pause", "open", "download", "error"],
+  setup(_, { emit: h }) {
+    const e = _, i = h, w = b(), y = (d) => {
+      if (!d || d < 0) return "";
+      const r = Math.round(d / 1e3), n = Math.floor(r / 60), z = r % 60;
+      return `${n}:${z.toString().padStart(2, "0")}`;
+    }, u = p(() => y(e.durationMs)), k = p(
+      () => !!w.actions || e.showDefaultActions && (e.src || e.downloadHref)
+    ), g = p(
+      () => x({
+        "nmorph-video-preview": [e.compact && "compact", e.fit, e.loading && "loading", e.error && "error"]
+      })
+    ), B = p(
+      () => I({
+        "--nmorph-video-preview-width": e.width,
+        "--nmorph-video-preview-height": e.height
+      })
+    ), N = () => i("open"), S = () => i("download");
+    return (d, r) => (o(), t("div", {
+      class: H(g.value),
+      style: D(B.value)
+    }, [
+      !e.loading && !e.error ? (o(), t("video", {
+        key: 0,
+        class: "nmorph-video-preview__media",
+        src: e.src,
+        poster: e.poster || void 0,
+        controls: e.controls,
+        muted: e.muted,
+        playsinline: e.playsinline,
+        preload: e.preload,
+        onPlay: r[0] || (r[0] = (n) => i("play", n)),
+        onPause: r[1] || (r[1] = (n) => i("pause", n)),
+        onError: r[2] || (r[2] = (n) => i("error", n))
+      }, null, 40, T)) : (o(), t("div", O, [
+        e.loading ? (o(), v(a(c), {
+          key: 0,
+          size: "large"
+        }, {
+          default: m(() => [
+            l(a(A))
+          ]),
+          _: 1
+        })) : (o(), v(a(c), {
+          key: 1,
+          size: "large"
+        }, {
+          default: m(() => [
+            l(a(E))
+          ]),
+          _: 1
+        })),
+        e.error && e.errorText ? (o(), t("span", L, f(e.errorText), 1)) : s("", !0)
+      ])),
+      e.name || u.value ? (o(), t("div", j, [
+        e.name ? (o(), t("span", q, f(e.name), 1)) : s("", !0),
+        u.value ? (o(), t("span", F, f(u.value), 1)) : s("", !0)
+      ])) : s("", !0),
+      k.value ? (o(), t("div", G, [
+        V(d.$slots, "actions", {}, () => [
+          $("a", {
+            href: e.src,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            class: "nmorph-video-preview__action-link",
+            "aria-label": `Open ${e.name || "video"}`,
+            onClick: N
+          }, [
+            l(a(c), { size: "small" }, {
+              default: m(() => [
+                l(a(M))
+              ]),
+              _: 1
+            })
+          ], 8, J),
+          e.downloadHref ? (o(), t("a", {
+            key: 0,
+            href: e.downloadHref,
+            download: e.name,
+            class: "nmorph-video-preview__action-link",
+            "aria-label": `Download ${e.name || "video"}`,
+            onClick: S
+          }, [
+            l(a(c), { size: "small" }, {
+              default: m(() => [
+                l(a(P))
+              ]),
+              _: 1
+            })
+          ], 8, K)) : s("", !0)
+        ])
+      ])) : s("", !0)
+    ], 6));
+  }
+});
+export {
+  re as default
+};

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphVideoPreview.css';
+import o from "./NmorphVideoPreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

package/dist/components/form/nmorph-file-upload/NmorphFileUpload.css

@@ -1 +1 @@
-.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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)}.nmorph-file-upload.nmorph-file-upload--compact .nmorph-file-upload__file{padding:var(--indentation-01) var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__list>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__file{margin-bottom:0}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__list>div{display:flex;flex-wrap:wrap;gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__file{width:auto;margin-bottom:0}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;width:var(--nmorph-file-upload-name-width, auto);min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}
+.nmorph-file-upload{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__trigger{position:relative;width:100%;min-width:0}.nmorph-file-upload input{display:none}.nmorph-file-upload .nmorph-file-upload__list{width:100%;min-width:0;margin-top:var(--indentation-03)}.nmorph-file-upload .nmorph-file-upload__list>div{box-sizing:border-box;width:100%;min-width:0}.nmorph-file-upload .nmorph-file-upload__file{display:flex;gap:var(--indentation-02);align-items:center;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin-bottom:var(--indentation-02);padding:var(--indentation-02) var(--indentation-03);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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)}.nmorph-file-upload.nmorph-file-upload--compact .nmorph-file-upload__file{padding:var(--indentation-01) var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__list>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-grid .nmorph-file-upload__file{margin-bottom:0}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__list>div{display:flex;flex-wrap:wrap;gap:var(--indentation-02)}.nmorph-file-upload.nmorph-file-upload--layout-inline .nmorph-file-upload__file{width:auto;margin-bottom:0}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-image-preview{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file>.nmorph-video-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-audio-preview,.nmorph-file-upload .nmorph-file-upload__file>.nmorph-file-card{flex:1 1 0;min-width:0}.nmorph-file-upload .nmorph-file-upload__file-info{display:flex;flex:1 1 0;gap:var(--indentation-02);align-items:center;min-width:0;max-width:100%;overflow:hidden}.nmorph-file-upload .nmorph-file-upload__file-info>.nmorph-icon{flex:0 0 auto}.nmorph-file-upload .nmorph-file-upload__file-name{display:block;flex:1 1 0;width:var(--nmorph-file-upload-name-width, auto);min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-file-upload .nmorph-file-upload__remove-file{flex:0 0 auto}

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
 };