ablok-components 0.3.81 → 0.3.84

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