ablok-components 0.3.80 → 0.3.83

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

@@ -0,0 +1,128 @@
+declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').DefineComponent<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+    storeId: StringConstructor;
+    modelValue: {
+        type: {
+            (arrayLength: number): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            (...items: {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[]): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            new (arrayLength: number): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            new (...items: {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[]): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    messages: {
+        type: null;
+    };
+}>, {}, {}, {}, {}, 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<{
+    storeId: StringConstructor;
+    modelValue: {
+        type: {
+            (arrayLength: number): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            (...items: {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[]): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            new (arrayLength: number): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            new (...items: {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[]): {
+                type?: string;
+                caption?: string;
+                src?: any;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    messages: {
+        type: null;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: number;
+    modelValue: {
+        type?: string;
+        caption?: string;
+        src?: any;
+    }[];
+    disabled: boolean;
+}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,134 @@
+import { defineComponent as w, computed as T, ref as _, resolveComponent as b, openBlock as r, createElementBlock as d, createElementVNode as o, toDisplayString as U, createCommentVNode as H, createVNode as u, withCtx as h, withDirectives as L, vModelText as N, withModifiers as y, nextTick as S } from "vue";
+import x from "../file-upload/file-upload.vue.js";
+/* empty css                              */
+const A = { class: "container" }, B = { class: "row" }, E = { class: "col-12" }, I = {
+  key: 0,
+  class: "grid place-items-center text-center text-muted py-5 border border-bottom-0"
+}, D = { class: "m-0" }, F = { class: "preview-item border-bottom p-3" }, j = { class: "d-flex gap-3" }, q = { class: "col-2" }, z = { class: "col" }, G = ["onUpdate:modelValue", "id"], J = ["innerHTML"], K = { class: "col-auto d-flex flex-column gap-2" }, O = ["onClick"], P = ["onClick"], Q = { class: "d-flex align-items-end p-3" }, R = ["innerHTML"], Z = /* @__PURE__ */ w({
+  __name: "bulk-upload",
+  props: {
+    storeId: String,
+    modelValue: {
+      type: Array,
+      default: []
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: Number,
+      default: () => 120
+    },
+    messages: {
+      type: null
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(g, { emit: k }) {
+    const V = g, C = k, s = T({
+      get: () => {
+        const e = V.modelValue || [];
+        return a.value = e.map((t) => t.caption || ""), e.map((t) => ({ type: t.type, src: t.src }));
+      },
+      set: (e) => {
+        const t = s.value || [], c = Array.isArray(e) ? e : [];
+        m([...t, ...c]);
+      }
+    }), v = _(null), n = _({}), a = _({});
+    async function M(e) {
+      n.value[e] = !n.value[e], n.value[e] || m(), await S(), v.value?.querySelector(`#caption-${e}`)?.focus();
+    }
+    function m(e) {
+      C("update:modelValue", (e || s.value).map((t, c) => ({
+        ...t,
+        caption: a.value[c] || ""
+      })));
+    }
+    return (e, t) => {
+      const c = b("base-image"), f = b("svg-icon");
+      return r(), d("div", {
+        class: "bulk-upload",
+        ref_key: "root",
+        ref: v
+      }, [
+        o("div", A, [
+          o("div", B, [
+            o("div", E, [
+              s.value.length ? H("", !0) : (r(), d("div", I, [
+                o("p", D, U(e.$t("fileInput.noFilesSelected")), 1)
+              ])),
+              u(x, {
+                modelValue: s.value,
+                "onUpdate:modelValue": t[1] || (t[1] = (p) => s.value = p),
+                multiple: !0,
+                accept: "image/*",
+                "drop-files": !0,
+                "to-data-url": !0,
+                "local-url-format": "objectUrl",
+                class: "d-flex flex-column align-items-end border"
+              }, {
+                "preview-item": h(({ bind: { item: p, index: l }, on: { removeFile: $ } }) => [
+                  o("div", F, [
+                    o("div", j, [
+                      o("div", q, [
+                        u(c, {
+                          src: p.src,
+                          alt: "",
+                          class: "img-thumbnail"
+                        }, null, 8, ["src"])
+                      ]),
+                      o("div", z, [
+                        n.value[l] ? L((r(), d("textarea", {
+                          key: 0,
+                          "onUpdate:modelValue": (i) => a.value[l] = i,
+                          id: `caption-${l}`,
+                          class: "form-control rounded-0 h-100",
+                          onChangeCapture: t[0] || (t[0] = (i) => m())
+                        }, null, 40, G)), [
+                          [N, a.value[l]]
+                        ]) : (r(), d("p", {
+                          key: 1,
+                          class: "m-0",
+                          innerHTML: a.value[l] || `<small>${e.$t("fileInput.noCaption")}</small>`
+                        }, null, 8, J))
+                      ]),
+                      o("div", K, [
+                        o("button", {
+                          onClick: y((i) => $(l), ["prevent"]),
+                          class: "btn btn--close"
+                        }, [
+                          u(f, { symbol: "x" })
+                        ], 8, O),
+                        o("button", {
+                          onClick: y((i) => M(l), ["prevent"]),
+                          class: "btn btn--close"
+                        }, [
+                          u(f, {
+                            symbol: n.value[l] ? "check" : "edit-3"
+                          }, null, 8, ["symbol"])
+                        ], 8, P)
+                      ])
+                    ])
+                  ])
+                ]),
+                button: h(() => [
+                  o("span", Q, [
+                    o("span", {
+                      class: "btn btn-primary btn-sm",
+                      innerHTML: e.$t("common.selectFile")
+                    }, null, 8, R)
+                  ])
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ])
+          ])
+        ])
+      ], 512);
+    };
+  }
+});
+export {
+  Z as default
+};

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

@@ -0,0 +1,5 @@
+import o from "./bulk-upload.vue.js";
+/* empty css                 */
+export {
+  o as default
+};

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

@@ -1,14 +1,20 @@
 import { PropType } from '../../../../vue/dist/vue.esm-bundler.js';
 import { LocalUrlFormat } from '../../../composables/useLocalFileUrl';
+declare function removeFile(index: number | string): void;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         'preview-item'?(_: {
-            url: {
-                type?: string;
-                src?: string;
+            bind: {
+                item: {
+                    type?: string;
+                    src?: string;
+                };
+                index: number;
+            };
+            on: {
+                removeFile: typeof removeFile;
             };
-            index: number;
         }): any;
         button?(_: {}): any;
     };

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

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

package/dist/i18n.d.ts

@@ -96,6 +96,8 @@ declare const i18n: import('vue-i18n').I18n<{
             dropTargetLabel: string;
             shoot: string;
             fileTooLarge: string;
+            noFilesSelected: string;
+            noCaption: string;
         };
         editor: {
             header: {

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { default as BaseCamera } from './components/molecules/base-camera/base-c
 export { default as BaseMap } from './components/molecules/base-map/base-map.vue';
 export { default as LocationList } from './components/molecules/location-list/location-list.vue';
 export { default as FileUpload } from './components/molecules/file-upload/file-upload.vue';
+export { default as BulkUpload } from './components/molecules/bulk-upload/bulk-upload.vue';
 export { default as UploadGroup } from './components/molecules/upload-group/upload-group.vue';
 export { default as AssetUploader } from './components/organisms/asset-uploader/asset-uploader.vue';
 export { default as PresetUploader } from './components/organisms/preset-uploader/preset-uploader.vue';