@nmorph/nmorph-ui-kit 2.2.32 → 2.2.33

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

@@ -1,18 +1,18 @@
 import './NmorphFileUpload.css';
-import { defineComponent as x, computed as a, reactive as U, ref as w } from "vue";
-import { useModifiers as A } from "../../../utils/create-modifiers.js";
-import { useI18n as T } from "vue-i18n";
-import q from "../../../assets/icons/doc.svg.js";
-import B from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
-import F from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import j from "../../basic/nmorph-button/NmorphButton.vue.js";
-import { NmorphImageResolution as P, NmorphAudioResolution as C, NmorphVideoResolution as L, NmorphArchiveResolution as O } from "./types.js";
-import S from "../../../assets/icons/audio.svg.js";
-import V from "../../../assets/icons/video.svg.js";
-import M from "../../../assets/icons/archive.svg.js";
-import k from "../../../assets/icons/cross.svg.js";
-import D from "../../../assets/icons/image.svg.js";
-const oe = /* @__PURE__ */ x({
+import { defineComponent as V, computed as N, ref as g, watch as B, onBeforeUnmount as T } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { useI18n as S } from "vue-i18n";
+import j from "../../../assets/icons/doc.svg.js";
+import k from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
+import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import L from "../../basic/nmorph-button/NmorphButton.vue.js";
+import { NmorphImageResolution as O, NmorphAudioResolution as E, NmorphVideoResolution as M, NmorphArchiveResolution as D } from "./types.js";
+import W from "../../../assets/icons/audio.svg.js";
+import $ from "../../../assets/icons/video.svg.js";
+import z from "../../../assets/icons/archive.svg.js";
+import G from "../../../assets/icons/cross.svg.js";
+import H from "../../../assets/icons/image.svg.js";
+const se = /* @__PURE__ */ V({
   __name: "NmorphFileUpload",
   props: {
     modelValue: { type: Array, required: !1, default: () => [] },
@@ -23,56 +23,72 @@ const oe = /* @__PURE__ */ x({
     buttonText: { type: String, required: !1, default: "" }
   },
   emits: ["update:model-value", "on-unsupported-file-type-error"],
-  setup(d, { expose: f, emit: c }) {
-    const { t: u } = T(), t = d, h = a(() => t.buttonText ? t.buttonText : u("selectFile")), l = (r) => r.split("/")[1], N = (r) => {
-      const o = l(r);
-      let e = q;
-      return o in P && (e = D), o in C && (e = S), o in L && (e = V), o in O && (e = M), e;
-    };
-    let i = U(t.modelValue);
-    const n = w(null), g = () => {
-      t.disabled || !n.value || n.value.click();
-    }, y = (r) => {
-      if (t.disabled) return;
-      const o = r.target;
-      if (o.files) {
-        if (Array.from(o.files).forEach((e) => {
-          const b = l(e.type);
-          if (!t.allowedTypes.includes(b))
-            return s("on-unsupported-file-type-error", e.type);
-          const R = URL.createObjectURL(e), _ = { data: e, previewUrl: R };
-          i.push(_);
-        }), i.length === 0) return;
-        p();
+  setup(I, { expose: b, emit: w }) {
+    const { t: f } = S(), r = I, m = w, x = N(() => r.buttonText ? r.buttonText : f("selectFile")), d = (e) => e.split("/")[1], R = (e) => {
+      const o = d(e);
+      let t = j;
+      return o in O && (t = H), o in E && (t = W), o in M && (t = $), o in D && (t = z), t;
+    }, s = g(null), n = g([...r.modelValue]), i = /* @__PURE__ */ new Set(), a = () => {
+      const e = s.value;
+      e && (e.value = "");
+    }, u = (e) => {
+      i.has(e) && (URL.revokeObjectURL(e), i.delete(e));
+    }, h = (e) => {
+      const o = new Set(e.map((t) => t.previewUrl));
+      Array.from(i).forEach((t) => {
+        o.has(t) || u(t);
+      });
+    }, c = (e) => {
+      const o = [...e];
+      n.value = o, m("update:model-value", o);
+    }, U = () => {
+      r.disabled || !s.value || s.value.click();
+    }, _ = (e) => {
+      if (r.disabled) return;
+      const o = e.target, t = Array.from(o.files || []), p = [];
+      t.forEach((l) => {
+        const P = d(l.type);
+        if (!r.allowedTypes.includes(P)) {
+          m("on-unsupported-file-type-error", l.type);
+          return;
+        }
+        const y = URL.createObjectURL(l);
+        i.add(y), p.push({ data: l, previewUrl: y });
+      }), a(), p.length > 0 && c([...n.value, ...p]);
+    }, A = (e) => {
+      if (r.disabled) return;
+      const o = n.value.findIndex((t) => t.data.name === e);
+      if (o !== -1) {
+        const t = n.value[o];
+        u(t.previewUrl), a(), c(n.value.filter((p, l) => l !== o));
       }
-    }, p = () => {
-      s("update:model-value", i);
-    }, I = (r) => {
-      if (t.disabled) return;
-      const o = i.findIndex((e) => e.data.name === r);
-      o !== -1 && (URL.revokeObjectURL(i[o].previewUrl), i.splice(o, 1), p());
     };
-    f({ inputDOMRef: n });
-    const s = c, v = a(
-      () => A({
-        "nmorph-file-upload": [`${t.disabled && "disabled"}`]
+    B(
+      () => r.modelValue,
+      (e) => {
+        const o = [...e];
+        h(o), n.value = o, o.length === 0 && a();
+      },
+      { deep: !0 }
+    ), T(() => {
+      Array.from(i).forEach((e) => u(e));
+    }), b({ inputDOMRef: s });
+    const F = N(
+      () => q({
+        "nmorph-file-upload": [`${r.disabled && "disabled"}`]
       })
-    ), m = { t: u, props: t, computedButtonText: h, getPlainType: l, typeFileIconMap: N, get files() {
-      return i;
-    }, set files(r) {
-      i = r;
-    }, inputDOMRef: n, openFileSelector: g, handleFileUpload: y, filesChanged: p, removeFile: I, emit: s, modifiers: v, get NmorphButton() {
-      return j;
+    ), v = { t: f, props: r, emit: m, computedButtonText: x, getPlainType: d, typeFileIconMap: R, inputDOMRef: s, files: n, createdPreviewUrls: i, resetInputValue: a, revokePreviewUrl: u, revokeRemovedPreviewUrls: h, filesChanged: c, openFileSelector: U, handleFileUpload: _, removeFile: A, modifiers: F, get NmorphButton() {
+      return L;
     }, get NmorphIcon() {
-      return F;
+      return C;
     }, get NmorphImagePreview() {
-      return B;
-    }, get NmorphIconCross() {
       return k;
+    }, get NmorphIconCross() {
+      return G;
     } };
-    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
   }
 });
 export {
-  oe as default
+  se as default
 };