ablok-components 0.3.79 → 0.3.80

package/dist/components/molecules/file-upload/file-upload.vue.d.ts

@@ -3,6 +3,13 @@ import { LocalUrlFormat } from '../../../composables/useLocalFileUrl';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        'preview-item'?(_: {
+            url: {
+                type?: string;
+                src?: string;
+            };
+            index: number;
+        }): any;
         button?(_: {}): any;
     };
     refs: {

package/dist/components/molecules/file-upload/file-upload.vue.js

@@ -1,16 +1,16 @@
-import { defineComponent as A, ref as f, toRef as L, computed as N, watch as b, openBlock as s, createElementBlock as u, normalizeClass as h, unref as y, Fragment as V, renderList as P, createElementVNode as d, withModifiers as S, createVNode as m, renderSlot as T, Transition as M, withCtx as _, createCommentVNode as H } from "vue";
+import { defineComponent as L, ref as f, toRef as N, computed as P, watch as b, openBlock as u, createElementBlock as d, normalizeClass as h, unref as y, Fragment as V, renderList as T, renderSlot as S, createElementVNode as c, withModifiers as w, createVNode as p, Transition as M, withCtx as H, createCommentVNode as W } from "vue";
 import k from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-import W from "../../atoms/input-file/input-file.vue.js";
-import { useDragAndDrop as q } from "../../../composables/useDragAndDrop.js";
-import { useUploadTransport as x } from "../../../composables/useUploadTransport.js";
-import { useLocalFileUrl as E } from "../../../composables/useLocalFileUrl.js";
-import { sanitizeHtml as I } from "../../../composables/useSanitize.js";
-import { uniqueId as w } from "../../../utilities/helpers.js";
-const R = ["src"], O = ["onClick"], j = ["onClick"], G = ["for"], J = ["innerHTML"], K = {
+import q from "../../atoms/input-file/input-file.vue.js";
+import { useDragAndDrop as E } from "../../../composables/useDragAndDrop.js";
+import { useUploadTransport as I } from "../../../composables/useUploadTransport.js";
+import { useLocalFileUrl as R } from "../../../composables/useLocalFileUrl.js";
+import { sanitizeHtml as O } from "../../../composables/useSanitize.js";
+import { uniqueId as F } from "../../../utilities/helpers.js";
+const _ = ["src"], j = ["onClick"], x = ["onClick"], G = ["for"], J = ["innerHTML"], K = {
   key: 0,
   class: "file-upload__loading-spinner"
-}, oe = /* @__PURE__ */ A({
+}, ne = /* @__PURE__ */ L({
   __name: "file-upload",
   props: {
     modelValue: {
@@ -22,11 +22,11 @@ const R = ["src"], O = ["onClick"], j = ["onClick"], G = ["for"], J = ["innerHTM
     },
     name: {
       type: String,
-      default: () => w()
+      default: () => F()
     },
     id: {
       type: String,
-      default: () => w()
+      default: () => F()
     },
     label: {
       type: String,
@@ -102,96 +102,102 @@ const R = ["src"], O = ["onClick"], j = ["onClick"], G = ["for"], J = ["innerHTM
     }
   },
   emits: ["update:modelValue", "update:src"],
-  setup(a, { emit: F }) {
-    const e = a, i = F, v = f(), c = f([]), o = f([]), { pending: U, uploadFile: B } = x(e), { toLocalUrl: D, revoke: $ } = E(L(e, "localUrlFormat")), { isDragging: C } = q(v, {
+  setup(a, { emit: U }) {
+    const e = a, i = U, v = f(), m = f([]), n = f([]), { pending: $, uploadFile: B } = I(e), { toLocalUrl: D, revoke: C } = R(N(e, "localUrlFormat")), { isDragging: z } = E(v, {
       enabled: () => e.dropFiles,
       onDrop: (t) => {
-        c.value = t;
+        m.value = t;
       }
-    }), z = N(() => e.modelValue?.length ? e.modelValue : e.src ? [{ type: "", src: e.src }] : o.value);
+    }), A = P(() => e.modelValue?.length ? e.modelValue : e.src ? [{ type: "", src: e.src }] : n.value);
     function g(t) {
-      const l = typeof t == "string" ? parseInt(t, 10) : t, n = Array.isArray(e.modelValue) && e.modelValue.length > 0, p = Array.isArray(o.value) && o.value.length > 0;
-      if (p && l < o.value.length && ($(o.value[l]?.src), o.value.splice(l, 1)), n) {
-        const r = [...e.modelValue];
-        l < r.length && r.splice(l, 1), i("update:modelValue", r), e.multiple || i("update:src", r[0]?.src || "");
-      } else if (p) {
-        const r = e.multiple ? o.value : o.value[0];
-        i("update:modelValue", r), e.multiple || i("update:src", o.value[0]?.src || "");
+      const l = typeof t == "string" ? parseInt(t, 10) : t, o = Array.isArray(e.modelValue) && e.modelValue.length > 0, r = Array.isArray(n.value) && n.value.length > 0;
+      if (r && l < n.value.length && (C(n.value[l]?.src), n.value.splice(l, 1)), o) {
+        const s = [...e.modelValue];
+        l < s.length && s.splice(l, 1), i("update:modelValue", s), e.multiple || i("update:src", s[0]?.src || "");
+      } else if (r) {
+        const s = e.multiple ? n.value : n.value[0];
+        i("update:modelValue", s), e.multiple || i("update:src", n.value[0]?.src || "");
       } else
         i("update:modelValue", e.multiple ? [] : void 0), i("update:src", "");
-      c.value.splice(l, 1);
+      m.value.splice(l, 1);
     }
-    return b(() => c.value, async (t) => {
+    return b(() => m.value, async (t) => {
       const l = await Promise.all(
-        t.map(async (n) => ({
-          src: e.toDataUrl ? await D(n) : await B(n),
-          type: n.type
+        t.map(async (o) => ({
+          src: e.toDataUrl ? await D(o) : await B(o),
+          type: o.type
         }))
       );
-      o.value = l.filter((n) => n !== null);
-    }, { deep: !0 }), b(() => o.value, async (t) => {
+      n.value = l.filter((o) => o !== null);
+    }, { deep: !0 }), b(() => n.value, async (t) => {
       const l = e.multiple ? t : t[0];
       i("update:modelValue", l), e.multiple || i("update:src", t[0] && t[0].src);
-    }, { deep: !0 }), (t, l) => (s(), u("div", {
+    }, { deep: !0 }), (t, l) => (u(), d("div", {
       ref_key: "root",
       ref: v,
       class: h(["file-upload", {
         "has-dragging": a.dropFiles,
-        "is-dragging": y(C)
+        "is-dragging": y(z)
       }])
     }, [
-      (s(!0), u(V, null, P(z.value, (n, p) => (s(), u("div", {
-        key: n.src,
+      (u(!0), d(V, null, T(A.value, (o, r) => (u(), d("div", {
+        key: o.src,
         class: h(a.enablePreview ? "file-upload__thumbnail" : "file-upload__reset")
       }, [
-        a.enablePreview ? (s(), u(V, { key: 0 }, [
-          d("img", {
-            src: `${n.src}${a.previewWidth ? `?width=${a.previewWidth}` : ""}`,
-            class: "img-thumbnail rounded"
-          }, null, 8, R),
-          d("button", {
-            onClick: S((r) => g(p), ["prevent"]),
-            class: "btn btn--close"
+        S(t.$slots, "preview-item", {
+          url: o,
+          index: r
+        }, () => [
+          a.enablePreview ? (u(), d(V, { key: 0 }, [
+            c("img", {
+              src: `${o.src}${a.previewWidth ? `?width=${a.previewWidth}` : ""}`,
+              class: "img-thumbnail rounded"
+            }, null, 8, _),
+            c("button", {
+              onClick: w((s) => g(r), ["prevent"]),
+              class: "btn btn--close"
+            }, [
+              p(k, { symbol: "x" })
+            ], 8, j)
+          ], 64)) : (u(), d("button", {
+            key: 1,
+            onClick: w((s) => g(r), ["prevent"]),
+            class: "btn btn--close btn-outline-contrast"
           }, [
-            m(k, { symbol: "x" })
-          ], 8, O)
-        ], 64)) : (s(), u("button", {
-          key: 1,
-          onClick: S((r) => g(p), ["prevent"]),
-          class: "btn btn--close btn-outline-contrast"
-        }, [
-          m(k, { symbol: "x" })
-        ], 8, j))
+            p(k, { symbol: "x" })
+          ], 8, x))
+        ])
       ], 2))), 128)),
-      m(W, {
-        modelValue: c.value,
-        "onUpdate:modelValue": l[0] || (l[0] = (n) => c.value = n),
+      p(q, {
+        modelValue: m.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (o) => m.value = o),
         id: a.id,
         name: a.name,
         accept: a.accept,
         "max-file-size": a.maxFileSize,
+        multiple: a.multiple,
         class: "d-none"
-      }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size"]),
-      d("label", {
+      }, null, 8, ["modelValue", "id", "name", "accept", "max-file-size", "multiple"]),
+      c("label", {
         for: a.id,
         class: "file-upload__label"
       }, [
-        T(t.$slots, "button", {}, () => [
-          d("span", {
+        S(t.$slots, "button", {}, () => [
+          c("span", {
             class: "btn btn-outline-contrast",
-            innerHTML: y(I)(a.label || t.$t("common.selectFile"))
+            innerHTML: y(O)(a.label || t.$t("common.selectFile"))
           }, null, 8, J)
         ]),
-        m(M, { name: "fade" }, {
-          default: _(() => [
-            y(U) ? (s(), u("span", K, [...l[1] || (l[1] = [
-              d("span", {
+        p(M, { name: "fade" }, {
+          default: H(() => [
+            y($) ? (u(), d("span", K, [...l[1] || (l[1] = [
+              c("span", {
                 class: "spinner-border",
                 role: "status"
               }, [
-                d("span", { class: "visually-hidden" }, "Loading...")
+                c("span", { class: "visually-hidden" }, "Loading...")
               ], -1)
-            ])])) : H("", !0)
+            ])])) : W("", !0)
           ]),
           _: 1
         })
@@ -200,5 +206,5 @@ const R = ["src"], O = ["onClick"], j = ["onClick"], G = ["for"], J = ["innerHTM
   }
 });
 export {
-  oe as default
+  ne as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.79",
+  "version": "0.3.80",
   "scripts": {
     "dev": "vite --host",
     "story:dev": "histoire dev",