@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

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

@@ -1,230 +1,155 @@
 import './NmorphFileUpload.css';
-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 A from "../../basic/nmorph-button/NmorphButton.vue.js";
-/* empty css                                          */
-import xe from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
-/* empty css                                                      */
-import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-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 = {
+import h from "./NmorphFileUpload.vue2.js";
+import { openBlock as i, createElementBlock as r, normalizeStyle as p, normalizeClass as _, createElementVNode as m, renderSlot as f, createVNode as n, TransitionGroup as y, withCtx as a, Fragment as c, renderList as g, toDisplayString as d, createBlock as t, createCommentVNode as x } from "vue";
+/* empty css                      */
+import N from "../../../_virtual/_plugin-vue_export-helper.js";
+const k = { class: "nmorph-file-upload__trigger" }, v = ["id", "name", "autocomplete", "tabindex", "multiple", "disabled", "accept"], u = {
   key: 0,
   class: "nmorph-file-upload__list"
-}, Ie = { class: "nmorph-file-upload__file-info" }, Be = { class: "nmorph-file-upload__file-name" }, Re = {
+}, b = { class: "nmorph-file-upload__file-info" }, F = { class: "nmorph-file-upload__file-name" }, w = {
   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: {},
-    name: {},
-    autocomplete: {},
-    tabindex: {},
-    modelValue: { default: () => [] },
-    disabled: { type: Boolean, default: !1 },
-    multiple: { type: Boolean, default: !1 },
-    allowedTypes: { default: () => [] },
-    photoWithPreview: { type: Boolean, default: !0 },
-    buttonText: { default: "" },
-    compact: { type: Boolean, default: !1 },
-    layout: { default: "list" },
-    fileNameWidth: { default: void 0 }
-  },
-  emits: ["update:model-value", "on-unsupported-file-type-error", "on-file-validation-error"],
-  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 = 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 = "");
-    }, k = (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: i?.valid.value ?? !0,
-        errors: i?.errors.value ?? []
-      };
-    }, 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 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;
-        }
-        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);
-      }
-    }, 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);
-      }
-    };
-    oe(
-      C,
-      (e) => {
-        const i = [...e];
-        I(i), s.value = i, i.length === 0 && w();
-      },
-      { deep: !0 }
-    ), 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}`]
-      })
-    ), Z = x(
-      () => ce({
-        "--nmorph-file-upload-name-width": o.fileNameWidth
-      })
-    );
-    return (e, i) => (r(), c("div", {
-      class: ne(Y.value),
-      style: ie(Z.value)
-    }, [
-      u("div", ke, [
-        u("input", {
-          id: l(_),
-          ref_key: "inputDOMRef",
-          ref: p,
-          name: l(O),
-          autocomplete: l(W),
-          tabindex: l(j),
+}, I = { class: "nmorph-file-upload__file-name" }, C = { class: "nmorph-file-upload__remove-file" };
+function B(s, z, V, e, P, S) {
+  return i(), r(
+    "div",
+    {
+      class: _(e.modifiers),
+      style: p(e.styles)
+    },
+    [
+      m("div", k, [
+        m("input", {
+          id: e.id,
+          ref: "inputDOMRef",
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
           type: "file",
-          multiple: o.multiple,
-          disabled: o.disabled,
-          accept: q.value,
+          multiple: e.props.multiple,
+          disabled: e.props.disabled,
+          accept: e.inputAccept,
           class: "nmorph-native-input",
-          onChange: Q
-        }, null, 40, Ve),
-        ae(e.$slots, "trigger", {}, () => [
-          m(l(A), {
-            text: D.value,
+          onChange: e.handleFileUpload
+        }, null, 40, v),
+        f(s.$slots, "trigger", {}, () => [
+          n(e.NmorphButton, {
+            text: e.computedButtonText,
             fill: "",
-            disabled: o.disabled,
-            onClick: K
+            disabled: e.props.disabled,
+            onClick: e.openFileSelector
           }, null, 8, ["text", "disabled"])
         ])
       ]),
-      s.value.length > 0 ? (r(), c("div", Ce, [
-        m(se, {
+      e.files.length > 0 ? (i(), r("div", u, [
+        n(y, {
           name: "list",
           tag: "div"
         }, {
-          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"
-            }, [
-              H(t) ? (r(), c(T, { key: 0 }, [
-                m(l(xe), { src: a }, null, 8, ["src"]),
-                u("div", Ie, [
-                  m(l(S), {
+          default: a(() => [
+            (i(!0), r(
+              c,
+              null,
+              g(e.files, ({ data: o, previewUrl: l }) => (i(), r("div", {
+                key: o.name,
+                class: "nmorph-file-upload__file"
+              }, [
+                e.showImagePreview(o) ? (i(), r(
+                  c,
+                  { key: 0 },
+                  [
+                    n(e.NmorphImagePreview, { src: l }, null, 8, ["src"]),
+                    m("div", b, [
+                      n(e.NmorphIcon, {
+                        width: "14px",
+                        height: "17px"
+                      }, {
+                        default: a(() => [
+                          n(e.NmorphIconImage)
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }),
+                      m(
+                        "span",
+                        F,
+                        d(o.name),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : e.isImageFile(o) ? (i(), r("div", w, [
+                  n(e.NmorphIcon, {
                     width: "14px",
                     height: "17px"
                   }, {
-                    default: F(() => [
-                      m(l(z))
+                    default: a(() => [
+                      n(e.NmorphIconImage)
                     ]),
                     _: 1
+                    /* STABLE */
                   }),
-                  u("span", Be, $(t.name), 1)
+                  m(
+                    "span",
+                    I,
+                    d(o.name),
+                    1
+                    /* TEXT */
+                  )
+                ])) : e.isVideoFile(o) ? (i(), t(e.NmorphVideoPreview, {
+                  key: 2,
+                  src: l,
+                  name: o.name,
+                  "download-href": l,
+                  compact: "",
+                  controls: ""
+                }, null, 8, ["src", "name", "download-href"])) : e.isAudioFile(o) ? (i(), t(e.NmorphAudioPreview, {
+                  key: 3,
+                  src: l,
+                  name: o.name,
+                  "download-href": l,
+                  compact: ""
+                }, null, 8, ["src", "name", "download-href"])) : (i(), t(e.NmorphFileCard, {
+                  key: 4,
+                  name: o.name,
+                  "mime-type": o.type,
+                  size: o.size,
+                  extension: e.getFileExtension(o.name),
+                  "preview-src": l,
+                  "download-href": l,
+                  compact: ""
+                }, null, 8, ["name", "mime-type", "size", "extension", "preview-src", "download-href"])),
+                m("div", C, [
+                  n(e.NmorphButton, {
+                    height: "thin",
+                    "style-type": "transparent",
+                    onClick: (A) => e.removeFile(o.name)
+                  }, {
+                    "icon-only": a(() => [
+                      n(e.NmorphIconCross)
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])
                 ])
-              ], 64)) : l(N)(t) ? (r(), c("div", Re, [
-                m(l(S), {
-                  width: "14px",
-                  height: "17px"
-                }, {
-                  default: F(() => [
-                    m(l(z))
-                  ]),
-                  _: 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: (d) => X(t.name)
-                }, {
-                  "icon-only": F(() => [
-                    m(l(we))
-                  ]),
-                  _: 1
-                }, 8, ["onClick"])
-              ])
-            ]))), 128))
+              ]))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
           ]),
           _: 1
+          /* STABLE */
         })
-      ])) : me("", !0)
-    ], 6));
-  }
-});
+      ])) : x("v-if", !0)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const G = /* @__PURE__ */ N(h, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-file-upload/NmorphFileUpload.vue"]]);
 export {
-  Ye as default
+  G as default
 };

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

@@ -0,0 +1,139 @@
+import './NmorphFileUpload.css';
+import { defineComponent as D, computed as y, inject as z, ref as V, watch as $, onBeforeUnmount as G } from "vue";
+import { useModifiers as H } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as J } from "../../../utils/common.js";
+import { getFileAcceptValue as K, isImageFile as q, isFileAllowedByTypes as Q, getFileExtension as A, isVideoFile as X, isAudioFile as Y } from "../../../utils/file-types.js";
+import { useI18n as Z } from "vue-i18n";
+import { useFormItemInput as ee, useFormItemModel as te } from "../nmorph-form/use-form-item-input.js";
+import re from "../../data/nmorph-video-preview/NmorphVideoPreview.vue.js";
+import oe from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
+import ie from "../../data/nmorph-file-card/NmorphFileCard.vue.js";
+import ae from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import le from "../../basic/nmorph-button/NmorphButton.vue.js";
+import ne from "../../data/nmorph-audio-preview/NmorphAudioPreview.vue.js";
+import se from "../../../assets/icons/image.svg.js";
+import ue from "../../../assets/icons/cross.svg.js";
+const xe = /* @__PURE__ */ D({
+  __name: "NmorphFileUpload",
+  props: {
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    tabindex: { type: Number, required: !1 },
+    modelValue: { type: Array, required: !1, default: () => [] },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    multiple: { type: Boolean, required: !1, default: !1 },
+    allowedTypes: { type: Array, required: !1, default: () => [] },
+    photoWithPreview: { type: Boolean, required: !1, default: !0 },
+    buttonText: { type: String, required: !1, default: "" },
+    compact: { type: Boolean, required: !1, default: !1 },
+    layout: { type: String, required: !1, default: "list" },
+    fileNameWidth: { type: [Number, String], required: !1, default: void 0 }
+  },
+  emits: ["update:model-value", "on-unsupported-file-type-error", "on-file-validation-error"],
+  setup(S, { expose: U, emit: _ }) {
+    const { t: I } = Z(), t = S, m = _, B = y(() => t.buttonText ? t.buttonText : I("selectFile")), { id: p, name: R, autocomplete: T, tabindex: C } = ee(t), { modelValue: F, updateModelValue: b } = te(
+      t,
+      (e) => m("update:model-value", e),
+      []
+    ), c = z("form-data", void 0), E = y(() => K(t.allowedTypes)), j = (e) => t.photoWithPreview && q(e), n = V(null), a = V([...F.value]), l = /* @__PURE__ */ new Set(), f = () => {
+      const e = n.value;
+      e && (e.value = "");
+    }, v = (e) => {
+      l.has(e) && (URL.revokeObjectURL(e), l.delete(e));
+    }, w = (e) => {
+      const r = new Set(e.map((i) => i.previewUrl));
+      Array.from(l).forEach((i) => {
+        r.has(i) || v(i);
+      });
+    }, N = (e) => {
+      const r = [...e];
+      a.value = r, b(r);
+    }, x = (e) => {
+      const r = c?.validateField(p.value, e);
+      return {
+        valid: r?.valid.value ?? !0,
+        errors: r?.errors.value ?? []
+      };
+    }, k = () => {
+      t.disabled || !n.value || n.value.click();
+    }, L = (e) => {
+      if (t.disabled) return;
+      const r = e.target, i = Array.from(r.files || []), h = t.multiple ? i : i.slice(0, 1), s = [];
+      if (h.forEach((o) => {
+        if (!Q(o, t.allowedTypes)) {
+          m("on-unsupported-file-type-error", o.type || A(o.name) || o.name);
+          return;
+        }
+        const u = t.multiple ? [...a.value.map((g) => g.data), ...s, o] : [o], d = x(u);
+        if (!d.valid) {
+          m("on-file-validation-error", { file: o, errors: d.errors });
+          return;
+        }
+        s.push(o);
+      }), f(), s.length > 0) {
+        const o = s.map((d) => {
+          const g = URL.createObjectURL(d);
+          return l.add(g), { data: d, previewUrl: g };
+        }), u = t.multiple ? [...a.value, ...o] : o;
+        w(u), N(u), c?.validateField(p.value, u);
+      }
+    }, M = (e) => {
+      if (t.disabled) return;
+      const r = a.value.findIndex((i) => i.data.name === e);
+      if (r !== -1) {
+        const i = a.value[r];
+        v(i.previewUrl), f();
+        const h = a.value.filter((s, o) => o !== r);
+        N(h), c?.validateField(p.value, h);
+      }
+    };
+    $(
+      F,
+      (e) => {
+        const r = [...e];
+        w(r), a.value = r, r.length === 0 && f();
+      },
+      { deep: !0 }
+    ), G(() => {
+      Array.from(l).forEach((e) => v(e));
+    }), U({ inputDOMRef: n });
+    const O = y(
+      () => H({
+        "nmorph-file-upload": [t.disabled && "disabled", t.compact && "compact", `layout-${t.layout}`]
+      })
+    ), W = y(
+      () => J({
+        "--nmorph-file-upload-name-width": t.fileNameWidth
+      })
+    ), P = { t: I, props: t, emit: m, computedButtonText: B, id: p, name: R, autocomplete: T, tabindex: C, modelValue: F, updateModelValue: b, formData: c, inputAccept: E, showImagePreview: j, inputDOMRef: n, files: a, createdPreviewUrls: l, resetInputValue: f, revokePreviewUrl: v, revokeRemovedPreviewUrls: w, filesChanged: N, getFormValidationResult: x, openFileSelector: k, handleFileUpload: L, removeFile: M, modifiers: O, styles: W, get NmorphAudioPreview() {
+      return ne;
+    }, get NmorphButton() {
+      return le;
+    }, get NmorphIconCross() {
+      return ue;
+    }, get NmorphIcon() {
+      return ae;
+    }, get NmorphFileCard() {
+      return ie;
+    }, get NmorphIconImage() {
+      return se;
+    }, get NmorphImagePreview() {
+      return oe;
+    }, get NmorphVideoPreview() {
+      return re;
+    }, get getFileExtension() {
+      return A;
+    }, get isAudioFile() {
+      return Y;
+    }, get isImageFile() {
+      return q;
+    }, get isVideoFile() {
+      return X;
+    } };
+    return Object.defineProperty(P, "__isScriptSetup", { enumerable: !1, value: !0 }), P;
+  }
+});
+export {
+  xe as default
+};

package/dist/components/form/nmorph-form/NmorphForm.vue.js

@@ -1,27 +1,23 @@
-import { defineComponent as s, computed as l, provide as n, openBlock as i, createElementBlock as d, normalizeClass as p, createElementVNode as f, renderSlot as c } from "vue";
-import { useModifiers as u } from "../../../utils/create-modifiers.js";
-import { useFormValidation as _ } from "../../../hooks/use-form-validation.js";
-const v = { class: "nmorph-form__content" }, k = /* @__PURE__ */ s({
-  __name: "NmorphForm",
-  props: {
-    value: {},
-    validateImmediately: { type: Boolean, default: !1 }
-  },
-  setup(t, { expose: a }) {
-    const e = t, r = l(
-      () => u({
-        "nmorph-form": []
-      })
-    ), o = _(e.value, e.validateImmediately);
-    return a({ formData: o }), n("form-data", o), (m, h) => (i(), d("form", {
-      class: p(r.value)
-    }, [
-      f("div", v, [
-        c(m.$slots, "default")
+import e from "./NmorphForm.vue2.js";
+import { openBlock as t, createElementBlock as m, normalizeClass as n, createElementVNode as s, renderSlot as c } from "vue";
+import f from "../../../_virtual/_plugin-vue_export-helper.js";
+const l = { class: "nmorph-form__content" };
+function p(o, a, i, r, _, d) {
+  return t(), m(
+    "form",
+    {
+      class: n(r.modifiers)
+    },
+    [
+      s("div", l, [
+        c(o.$slots, "default")
       ])
-    ], 2));
-  }
-});
+    ],
+    2
+    /* CLASS */
+  );
+}
+const k = /* @__PURE__ */ f(e, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-form/NmorphForm.vue"]]);
 export {
   k as default
 };

package/dist/components/form/nmorph-form/NmorphForm.vue2.js

@@ -1,4 +1,23 @@
-import f from "./NmorphForm.vue.js";
+import { defineComponent as i, computed as p, provide as n } from "vue";
+import { useModifiers as s } from "../../../utils/create-modifiers.js";
+import { useFormValidation as d } from "../../../hooks/use-form-validation.js";
+const _ = /* @__PURE__ */ i({
+  __name: "NmorphForm",
+  props: {
+    value: { type: null, required: !0 },
+    validateImmediately: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(t, { expose: a }) {
+    const e = t, m = p(
+      () => s({
+        "nmorph-form": []
+      })
+    ), o = d(e.value, e.validateImmediately);
+    a({ formData: o }), n("form-data", o);
+    const r = { props: e, modifiers: m, formValidationData: o };
+    return Object.defineProperty(r, "__isScriptSetup", { enumerable: !1, value: !0 }), r;
+  }
+});
 export {
-  f as default
+  _ as default
 };