ablok-components 0.3.87 → 0.3.89

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

@@ -1,4 +1,15 @@
-declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').DefineComponent<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {}): any;
+    };
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js').DefineComponent<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
     storeId: StringConstructor;
     modelValue: {
         type: {
@@ -72,6 +83,30 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     messages: {
         type: null;
     };
+    hasHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasBulkRemove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasCaptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    editCaptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDuplicateFiles: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
@@ -148,10 +183,35 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     messages: {
         type: null;
     };
+    hasHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasBulkRemove: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasCaptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    editCaptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowDuplicateFiles: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     size: number;
+    title: string;
     modelValue: {
         type?: string;
         caption?: string;
@@ -161,7 +221,18 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         lastModified?: number;
     }[];
     disabled: boolean;
+    hasHeader: boolean;
+    hasBulkRemove: boolean;
+    hasCaptions: boolean;
+    editCaptions: boolean;
+    allowDuplicateFiles: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {
     root: HTMLDivElement;
 }, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,10 +1,14 @@
-import { defineComponent as x, computed as D, ref as v, resolveComponent as M, openBlock as i, createElementBlock as c, createElementVNode as o, toDisplayString as f, createCommentVNode as h, createVNode as m, withCtx as k, withDirectives as I, vModelText as L, withModifiers as V, nextTick as S } from "vue";
-import U from "../file-upload/file-upload.vue.js";
+import { defineComponent as x, computed as D, ref as y, resolveComponent as B, openBlock as i, createElementBlock as r, createElementVNode as o, unref as L, withModifiers as g, createVNode as m, createCommentVNode as p, toDisplayString as b, withCtx as C, renderSlot as S, Fragment as I, withDirectives as U, vModelText as N, nextTick as A } from "vue";
+import E from "../file-upload/file-upload.vue.js";
 /* empty css                              */
-const F = { class: "container" }, H = { class: "row" }, N = { class: "col-12" }, A = {
+import { sanitizeHtml as R } from "../../../composables/useSanitize.js";
+const K = { class: "container" }, j = { class: "row" }, q = {
+  key: 0,
+  class: "col-12"
+}, G = { class: "p-3 d-flex align-items-center border border-bottom-0" }, J = ["innerHTML"], O = { class: "col-12" }, P = {
   key: 0,
   class: "grid place-items-center text-center text-muted py-5 border border-bottom-0"
-}, E = { class: "m-0" }, j = { class: "preview-item border-bottom p-3" }, q = { class: "d-flex gap-3" }, G = { class: "col-2" }, K = { class: "col" }, R = { class: "file-meta text-muted small mb-2" }, J = { class: "fw-semibold" }, O = { key: 0 }, P = { key: 1 }, Q = ["onUpdate:modelValue", "id"], W = ["innerHTML"], X = { class: "col-auto d-flex flex-column gap-2" }, Y = ["onClick"], Z = ["onClick"], ee = { class: "d-flex align-items-end p-3" }, te = { class: "btn btn-primary btn-sm ms-auto d-flex align-items-center gap-2" }, oe = ["innerHTML"], ae = /* @__PURE__ */ x({
+}, Q = { class: "m-0" }, W = { class: "preview-item border-bottom p-3" }, X = { class: "d-flex gap-3" }, Y = { class: "col-2" }, Z = { class: "col d-flex flex-column" }, ee = { class: "file-meta text-muted small mb-2" }, te = { class: "fw-semibold" }, oe = { key: 0 }, le = { key: 1 }, se = ["onUpdate:modelValue", "id"], ne = ["innerHTML"], ae = { class: "col-auto d-flex flex-column gap-2" }, ie = ["onClick"], re = ["onClick"], ce = { class: "d-flex align-items-end p-3" }, de = { class: "btn btn-primary btn-sm ms-auto d-flex align-items-center gap-2" }, ue = ["innerHTML"], _e = /* @__PURE__ */ x({
   __name: "bulk-upload",
   props: {
     storeId: String,
@@ -22,66 +26,111 @@ const F = { class: "container" }, H = { class: "row" }, N = { class: "col-12" },
     },
     messages: {
       type: null
+    },
+    hasHeader: {
+      type: Boolean,
+      default: !0
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    hasBulkRemove: {
+      type: Boolean,
+      default: !0
+    },
+    hasCaptions: {
+      type: Boolean,
+      default: !0
+    },
+    editCaptions: {
+      type: Boolean,
+      default: !0
+    },
+    allowDuplicateFiles: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:modelValue"],
-  setup($, { emit: w }) {
-    const b = $, y = w, d = D({
+  setup(d, { emit: w }) {
+    const _ = d, k = w, M = (e) => `${e.name ?? ""}|${e.size ?? 0}|${e.lastModified ?? 0}|${e.type ?? ""}`, u = D({
       get: () => {
-        const t = b.modelValue || [];
-        return u.value = t.map((e) => e.caption || ""), t.map((e) => ({
-          type: e.type,
-          src: e.src,
-          ...e.name ? { name: e.name } : {},
-          ...e.size ? { size: e.size } : {},
-          ...e.lastModified ? { lastModified: e.lastModified } : {}
+        const e = _.modelValue || [];
+        return v.value = e.map((t) => t.caption || ""), e.map((t) => ({
+          type: t.type,
+          src: t.src,
+          ...t.name ? { name: t.name } : {},
+          ...t.size ? { size: t.size } : {},
+          ...t.lastModified ? { lastModified: t.lastModified } : {}
         }));
       },
-      set: (t) => {
-        const e = d.value || [], s = Array.isArray(t) ? t : [], a = s.length <= e.length && s.every((l) => e.some((n) => n.src === l.src));
-        p(a ? s : [...e, ...s]);
+      set: (e) => {
+        const t = u.value || [], l = Array.isArray(e) ? e : [], a = _.allowDuplicateFiles ? l : l.filter((s) => {
+          const c = M(s);
+          return !t.some((T) => M(T) === c);
+        });
+        if (!_.allowDuplicateFiles && l.length > 0 && a.length === 0)
+          return;
+        const n = a.length <= t.length && a.every((s) => t.some((c) => c.src === s.src));
+        h(n ? a : [...t, ...a]);
       }
-    }), g = v(null), r = v({}), u = v({});
-    function C(t) {
-      const e = [...b.modelValue || []];
-      e.splice(t, 1), y("update:modelValue", e);
+    }), $ = y(null), f = y({}), v = y({});
+    function V(e) {
+      const t = [..._.modelValue || []];
+      t.splice(e, 1), k("update:modelValue", t);
     }
-    async function B(t) {
-      r.value[t] = !r.value[t], r.value[t] || p(), await S(), g.value?.querySelector(`#caption-${t}`)?.focus();
+    async function H(e) {
+      f.value[e] = !f.value[e], f.value[e] || h(), await A(), $.value?.querySelector(`#caption-${e}`)?.focus();
     }
-    function z(t) {
-      if (t == null) return "";
-      const e = ["B", "KB", "MB", "GB", "TB"];
-      let s = t, a = e.shift();
-      for (; s >= 1024 && e.length; )
-        s /= 1024, a = e.shift();
-      return `${s.toFixed(1)} ${a}`;
+    function z(e) {
+      if (e == null) return "";
+      const t = ["B", "KB", "MB", "GB", "TB"];
+      let l = e, a = t.shift();
+      for (; l >= 1024 && t.length; )
+        l /= 1024, a = t.shift();
+      return `${l.toFixed(1)} ${a}`;
     }
-    function T(t) {
-      return t ? new Date(t).toLocaleDateString() : "";
+    function F(e) {
+      return e ? new Date(e).toLocaleDateString() : "";
     }
-    function p(t) {
-      y("update:modelValue", (t || d.value).map((e, s) => ({
-        ...e,
-        caption: u.value[s] || ""
+    function h(e) {
+      k("update:modelValue", (e || u.value).map((t, l) => ({
+        ...t,
+        caption: v.value[l] || ""
       })));
     }
-    return (t, e) => {
-      const s = M("base-image"), a = M("svg-icon");
-      return i(), c("div", {
+    return (e, t) => {
+      const l = B("svg-icon"), a = B("base-image");
+      return i(), r("div", {
         class: "bulk-upload",
         ref_key: "root",
-        ref: g
+        ref: $
       }, [
-        o("div", F, [
-          o("div", H, [
-            o("div", N, [
-              d.value.length ? h("", !0) : (i(), c("div", A, [
-                o("p", E, f(t.$t("fileInput.noFilesSelected")), 1)
+        o("div", K, [
+          o("div", j, [
+            d.hasHeader ? (i(), r("div", q, [
+              o("div", G, [
+                o("p", {
+                  class: "fw-bold m-0",
+                  innerHTML: L(R)(d.title || e.$t("fileInput.bulkUploadHeadline"))
+                }, null, 8, J),
+                d.hasBulkRemove ? (i(), r("button", {
+                  key: 0,
+                  onClick: t[0] || (t[0] = g((n) => u.value = [], ["prevent"])),
+                  class: "btn btn--close ms-auto p-0"
+                }, [
+                  m(l, { symbol: "x" })
+                ])) : p("", !0)
+              ])
+            ])) : p("", !0),
+            o("div", O, [
+              u.value.length ? p("", !0) : (i(), r("div", P, [
+                o("p", Q, b(e.$t("fileInput.noFilesSelected")), 1)
               ])),
-              m(U, {
-                modelValue: d.value,
-                "onUpdate:modelValue": e[1] || (e[1] = (l) => d.value = l),
+              m(E, {
+                modelValue: u.value,
+                "onUpdate:modelValue": t[2] || (t[2] = (n) => u.value = n),
                 multiple: !0,
                 accept: "image/*",
                 "drop-files": !0,
@@ -89,71 +138,75 @@ const F = { class: "container" }, H = { class: "row" }, N = { class: "col-12" },
                 "local-url-format": "objectUrl",
                 class: "d-flex flex-column border"
               }, {
-                "preview-item": k(({ bind: { item: l, index: n } }) => [
-                  o("div", j, [
-                    o("div", q, [
-                      o("div", G, [
-                        m(s, {
-                          src: l.src,
+                "preview-item": C(({ bind: { item: n, index: s } }) => [
+                  o("div", W, [
+                    o("div", X, [
+                      o("div", Y, [
+                        m(a, {
+                          src: n.src,
                           alt: "",
                           class: "img-thumbnail"
                         }, null, 8, ["src"])
                       ]),
-                      o("div", K, [
-                        o("div", R, [
-                          o("div", J, f(l.name || t.$t("fileInput.unknownFile")), 1),
+                      o("div", Z, [
+                        o("div", ee, [
+                          o("div", te, b(n.name || e.$t("fileInput.unknownFile")), 1),
                           o("div", null, [
-                            l.size ? (i(), c("span", O, f(z(l.size)), 1)) : h("", !0),
-                            l.lastModified ? (i(), c("span", P, " · " + f(T(l.lastModified)), 1)) : h("", !0)
+                            n.size ? (i(), r("span", oe, b(z(n.size)), 1)) : p("", !0),
+                            n.lastModified ? (i(), r("span", le, " · " + b(F(n.lastModified)), 1)) : p("", !0)
                           ])
                         ]),
-                        r.value[n] ? I((i(), c("textarea", {
-                          key: 0,
-                          "onUpdate:modelValue": (_) => u.value[n] = _,
-                          id: `caption-${n}`,
-                          class: "form-control rounded-0 h-100",
-                          onChangeCapture: e[0] || (e[0] = (_) => p())
-                        }, null, 40, Q)), [
-                          [L, u.value[n]]
-                        ]) : (i(), c("p", {
-                          key: 1,
-                          class: "m-0",
-                          innerHTML: u.value[n] || `<small>${t.$t("fileInput.noCaption")}</small>`
-                        }, null, 8, W))
+                        d.hasCaptions ? (i(), r(I, { key: 0 }, [
+                          f.value[s] && d.editCaptions ? U((i(), r("textarea", {
+                            key: 0,
+                            "onUpdate:modelValue": (c) => v.value[s] = c,
+                            id: `caption-${s}`,
+                            class: "form-control rounded-0 h-100",
+                            onChangeCapture: t[1] || (t[1] = (c) => h())
+                          }, null, 40, se)), [
+                            [N, v.value[s]]
+                          ]) : (i(), r("p", {
+                            key: 1,
+                            class: "m-0",
+                            innerHTML: v.value[s] || `<small>${e.$t("fileInput.noCaption")}</small>`
+                          }, null, 8, ne))
+                        ], 64)) : p("", !0)
                       ]),
-                      o("div", X, [
+                      o("div", ae, [
                         o("button", {
-                          onClick: V((_) => C(n), ["prevent"]),
+                          onClick: g((c) => V(s), ["prevent"]),
                           class: "btn btn--close"
                         }, [
-                          m(a, { symbol: "x" })
-                        ], 8, Y),
+                          m(l, { symbol: "x" })
+                        ], 8, ie),
                         o("button", {
-                          onClick: V((_) => B(n), ["prevent"]),
+                          onClick: g((c) => H(s), ["prevent"]),
                           class: "btn btn--close"
                         }, [
-                          m(a, {
-                            symbol: r.value[n] ? "check" : "edit-3"
+                          m(l, {
+                            symbol: f.value[s] ? "check" : "edit-3"
                           }, null, 8, ["symbol"])
-                        ], 8, Z)
+                        ], 8, re)
                       ])
                     ])
                   ])
                 ]),
-                button: k(() => [
-                  o("span", ee, [
-                    o("span", te, [
-                      m(a, {
-                        symbol: "upload",
-                        size: "small"
-                      }),
-                      o("span", {
-                        innerHTML: t.$t("common.selectFile")
-                      }, null, 8, oe)
+                button: C(() => [
+                  S(e.$slots, "button", {}, () => [
+                    o("span", ce, [
+                      o("span", de, [
+                        m(l, {
+                          symbol: "upload",
+                          size: "small"
+                        }),
+                        o("span", {
+                          innerHTML: e.$t("common.selectFile")
+                        }, null, 8, ue)
+                      ])
                     ])
                   ])
                 ]),
-                _: 1
+                _: 3
               }, 8, ["modelValue"])
             ])
           ])
@@ -163,5 +216,5 @@ const F = { class: "container" }, H = { class: "row" }, N = { class: "col-12" },
   }
 });
 export {
-  ae as default
+  _e as default
 };

package/dist/i18n.d.ts

@@ -98,6 +98,7 @@ declare const i18n: import('vue-i18n').I18n<{
             fileTooLarge: string;
             noFilesSelected: string;
             noCaption: string;
+            bulkUploadHeadline: string;
         };
         editor: {
             header: {

package/dist/locales/en.d.ts

@@ -97,6 +97,7 @@ export declare const messages: {
         fileTooLarge: string;
         noFilesSelected: string;
         noCaption: string;
+        bulkUploadHeadline: string;
     };
     editor: {
         header: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.87",
+  "version": "0.3.89",
   "dependencies": {
     "date-fns": "^3.0.0",
     "dompurify": "^3.3.1",