ablok-components 0.3.92 → 0.3.95

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

@@ -2,6 +2,19 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         'bulk-remove'?(_: {}): any;
+        'upload-progress'?(_: {
+            bind: {
+                item: {
+                    type?: string;
+                    src?: string;
+                    name?: string;
+                    size?: number;
+                    lastModified?: number;
+                    uploadProgress?: number;
+                };
+                index: number;
+            };
+        }): any;
         button?(_: {}): any;
     };
     refs: {
@@ -25,6 +38,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             (...items: {
                 type?: string;
@@ -33,6 +47,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 caption?: string;
@@ -40,6 +55,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (arrayLength: number): {
                 type?: string;
@@ -48,6 +64,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (...items: {
                 type?: string;
@@ -56,6 +73,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 caption?: string;
@@ -63,6 +81,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
@@ -133,6 +152,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             (...items: {
                 type?: string;
@@ -141,6 +161,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 caption?: string;
@@ -148,6 +169,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (arrayLength: number): {
                 type?: string;
@@ -156,6 +178,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (...items: {
                 type?: string;
@@ -164,6 +187,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 caption?: string;
@@ -171,6 +195,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
@@ -237,6 +262,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
         name?: string;
         size?: number;
         lastModified?: number;
+        uploadProgress?: number;
     }[];
     disabled: boolean;
     hasHeader: boolean;

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

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

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

@@ -12,6 +12,7 @@ declare function __VLS_template(): {
                     name?: string;
                     size?: number;
                     lastModified?: number;
+                    uploadProgress?: number;
                 };
                 index: number;
             };
@@ -37,6 +38,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             (...items: {
                 type?: string;
@@ -44,12 +46,14 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 src?: string;
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (arrayLength: number): {
                 type?: string;
@@ -57,6 +61,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (...items: {
                 type?: string;
@@ -64,12 +69,14 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 src?: string;
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
@@ -179,6 +186,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             (...items: {
                 type?: string;
@@ -186,12 +194,14 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 src?: string;
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (arrayLength: number): {
                 type?: string;
@@ -199,6 +209,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             new (...items: {
                 type?: string;
@@ -206,12 +217,14 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[]): {
                 type?: string;
                 src?: string;
                 name?: string;
                 size?: number;
                 lastModified?: number;
+                uploadProgress?: number;
             }[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
@@ -324,6 +337,7 @@ declare const __VLS_component: import('../../../../vue/dist/vue.esm-bundler.js')
         name?: string;
         size?: number;
         lastModified?: number;
+        uploadProgress?: number;
     }[];
     name: string;
     placeholder: string;

package/package.json

@@ -1,23 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.92",
-  "scripts": {
-    "dev": "vite --host",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview",
-    "build": "vue-tsc --noEmit --project tsconfig.build.json && vite build",
-    "build:watch": "vue-tsc --noEmit --watch --project tsconfig.build.json & vite build --watch",
-    "preview": "vite preview",
-    "build-lib-bak": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
-    "build-lib": "vite build && vue-tsc --emitDeclarationOnly",
-    "release": "bash ./scripts/release.sh",
-    "postrelease": "bash ./scripts/publish.sh",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:ui": "vitest --ui"
-  },
+  "version": "0.3.95",
   "dependencies": {
     "date-fns": "^3.0.0",
     "dompurify": "^3.3.1",
@@ -136,5 +120,21 @@
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite --host",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview",
+    "build": "vue-tsc --noEmit --project tsconfig.build.json && vite build",
+    "build:watch": "vue-tsc --noEmit --watch --project tsconfig.build.json & vite build --watch",
+    "preview": "vite preview",
+    "build-lib-bak": "vite build && vue-tsc --emitDeclarationOnly && mv dist/src dist/types",
+    "build-lib": "vite build && vue-tsc --emitDeclarationOnly",
+    "release": "bash ./scripts/release.sh",
+    "postrelease": "bash ./scripts/publish.sh",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui"
+  }
+}