ablok-components 0.3.67 → 0.3.69

package/dist/components/molecules/media-thumbnails/media-thumbnails.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as f, ref as _, openBlock as t, createElementBlock as i, createVNode as s, withCtx as b, createElementVNode as y, normalizeClass as o, Fragment as g, renderList as k, createBlock as C, toDisplayString as v, createCommentVNode as V } from "vue";
+import { defineComponent as h, ref as _, openBlock as t, createElementBlock as i, createVNode as s, withCtx as b, createElementVNode as y, normalizeClass as o, Fragment as g, renderList as k, createBlock as C, toDisplayString as v, createCommentVNode as V } from "vue";
 import $ from "../../templates/base-carousel/base-carousel.vue.js";
 /* empty css                                               */
 import m from "../../atoms/base-image/base-image.vue.js";
@@ -12,7 +12,7 @@ const x = { class: "media-thumbnails" }, B = ["onClick", "title"], j = {
 }, w = {
   key: 2,
   class: "img-container"
-}, I = /* @__PURE__ */ f({
+}, I = /* @__PURE__ */ h({
   __name: "media-thumbnails",
   props: {
     modelValue: {
@@ -32,11 +32,11 @@ const x = { class: "media-thumbnails" }, B = ["onClick", "title"], j = {
     },
     stacked: {
       type: Boolean,
-      default: !0
+      default: !1
     },
     showCount: {
       type: Boolean,
-      default: !0
+      default: !1
     }
   },
   emits: ["update:modelValue", "select"],
@@ -63,8 +63,8 @@ const x = { class: "media-thumbnails" }, B = ["onClick", "title"], j = {
               key: 1,
               class: o(["img-container img-container--multi", { "img-container--stacked": a.stacked }])
             }, [
-              (t(!0), i(g, null, k(e.item.items, (n, h) => (t(), C(m, {
-                key: h,
+              (t(!0), i(g, null, k(e.item.items, (n, f) => (t(), C(m, {
+                key: f,
                 src: n.thumbnail || n.src,
                 class: "img-fluid"
               }, null, 8, ["src"]))), 128)),

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

@@ -1,4 +1,16 @@
-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: {
+        'item-overlay'?(_: {
+            item: any;
+            index: number;
+        }): any;
+    };
+    refs: {};
+    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<{
     modelValue: {
         type: {
             (arrayLength: number): String[];
@@ -172,4 +184,10 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     maxImageWidth: number;
     useImageUpload: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, 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/upload-group/upload-group.vue.js

@@ -1,21 +1,21 @@
-import { defineComponent as v, ref as x, computed as k, watch as w, nextTick as V, openBlock as s, createElementBlock as r, unref as S, createCommentVNode as z, createElementVNode as n, createVNode as d, withCtx as m, createBlock as f, withModifiers as $ } from "vue";
-import { uniqueId as p } from "../../../utilities/helpers.js";
-import { sanitizeHtml as F } from "../../../composables/useSanitize.js";
-import N from "../../templates/sortable-list/sortable-list.vue.js";
+import { defineComponent as v, ref as x, computed as k, watch as w, nextTick as S, openBlock as s, createElementBlock as f, unref as V, createCommentVNode as $, createElementVNode as l, createVNode as d, withCtx as m, createBlock as p, withModifiers as z, renderSlot as F } from "vue";
+import { uniqueId as h } from "../../../utilities/helpers.js";
+import { sanitizeHtml as N } from "../../../composables/useSanitize.js";
+import B from "../../templates/sortable-list/sortable-list.vue.js";
 /* empty css                                               */
-import B from "../image-upload/image-upload.vue.js";
+import I from "../image-upload/image-upload.vue.js";
 /* empty css                                */
-import I from "../file-upload/file-upload.vue.js";
+import T from "../file-upload/file-upload.vue.js";
 /* empty css                              */
 import c from "../../atoms/svg-icon/svg-icon.vue.js";
 /* empty css                                 */
-const T = { class: "upload-group" }, W = ["innerHTML"], C = { class: "upload-group__list" }, R = { class: "img-container" }, U = ["src"], H = ["onClick"], M = {
+const W = { class: "upload-group" }, C = ["innerHTML"], R = { class: "upload-group__list" }, U = { class: "img-container" }, H = ["src"], M = { class: "item-overlay" }, P = ["onClick"], j = {
   role: "button",
   class: "img-thumbnail d-flex justify-content-center align-items-center"
-}, P = {
+}, q = {
   role: "button",
   class: "img-thumbnail d-flex justify-content-center align-items-center"
-}, Y = /* @__PURE__ */ v({
+}, _ = /* @__PURE__ */ v({
   __name: "upload-group",
   props: {
     modelValue: {
@@ -24,11 +24,11 @@ const T = { class: "upload-group" }, W = ["innerHTML"], C = { class: "upload-gro
     },
     name: {
       type: String,
-      default: () => p()
+      default: () => h()
     },
     id: {
       type: String,
-      default: () => p()
+      default: () => h()
     },
     label: {
       type: String,
@@ -81,51 +81,57 @@ const T = { class: "upload-group" }, W = ["innerHTML"], C = { class: "upload-gro
     aspectRatio: Number
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: h }) {
-    const b = e, u = h, l = x(""), o = k({
+  setup(e, { emit: b }) {
+    const g = e, u = b, n = x(""), o = k({
       get() {
-        return b.modelValue;
+        return g.modelValue;
       },
       set(t) {
         u("update:modelValue", t);
       }
     });
-    function g(t) {
+    function y(t) {
       o.value.splice(t, 1), u("update:modelValue", o.value);
     }
-    return w(l, async (t, a) => {
-      t && a !== t && (u("update:modelValue", [...o.value, t]), await V(), l.value = "");
-    }), (t, a) => (s(), r("div", T, [
-      e.label ? (s(), r("label", {
+    return w(n, async (t, a) => {
+      t && a !== t && (u("update:modelValue", [...o.value, t]), await S(), n.value = "");
+    }), (t, a) => (s(), f("div", W, [
+      e.label ? (s(), f("label", {
         key: 0,
-        innerHTML: S(F)(e.label)
-      }, null, 8, W)) : z("", !0),
-      n("div", C, [
-        d(N, {
+        innerHTML: V(N)(e.label)
+      }, null, 8, C)) : $("", !0),
+      l("div", R, [
+        d(B, {
           modelValue: o.value,
           "onUpdate:modelValue": a[2] || (a[2] = (i) => o.value = i),
           vertical: !1,
           class: "mb-3"
         }, {
-          "list-item": m(({ item: i, index: y }) => [
-            n("div", R, [
-              n("img", {
+          "list-item": m(({ item: i, index: r }) => [
+            l("div", U, [
+              l("img", {
                 src: `${i}${e.previewWidth ? `?width=${e.previewWidth}` : ""}`,
                 class: "img-thumbnail"
-              }, null, 8, U),
-              n("button", {
-                onClick: $((j) => g(y), ["prevent"]),
-                class: "btn btn--close"
-              }, [
-                d(c, { symbol: "x" })
-              ], 8, H)
+              }, null, 8, H),
+              l("div", M, [
+                l("button", {
+                  onClick: z((E) => y(r), ["prevent"]),
+                  class: "btn btn--close"
+                }, [
+                  d(c, { symbol: "x" })
+                ], 8, P),
+                F(t.$slots, "item-overlay", {
+                  item: i,
+                  index: r
+                })
+              ])
             ])
           ]),
           "list-append": m(() => [
-            e.useImageUpload ? (s(), f(B, {
+            e.useImageUpload ? (s(), p(I, {
               key: 0,
-              src: l.value,
-              "onUpdate:src": a[0] || (a[0] = (i) => l.value = i),
+              src: n.value,
+              "onUpdate:src": a[0] || (a[0] = (i) => n.value = i),
               endpoint: e.endpoint,
               "custom-fetch": e.customFetch,
               "to-data-url": !e.endpoint,
@@ -139,15 +145,15 @@ const T = { class: "upload-group" }, W = ["innerHTML"], C = { class: "upload-gro
               "aspect-ratio": e.aspectRatio
             }, {
               button: m(() => [
-                n("span", M, [
+                l("span", j, [
                   d(c, { symbol: "plus" })
                 ])
               ]),
               _: 1
-            }, 8, ["src", "endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio"])) : (s(), f(I, {
+            }, 8, ["src", "endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio"])) : (s(), p(T, {
               key: 1,
-              src: l.value,
-              "onUpdate:src": a[1] || (a[1] = (i) => l.value = i),
+              src: n.value,
+              "onUpdate:src": a[1] || (a[1] = (i) => n.value = i),
               multiple: !1,
               endpoint: e.endpoint,
               "custom-fetch": e.customFetch,
@@ -160,19 +166,19 @@ const T = { class: "upload-group" }, W = ["innerHTML"], C = { class: "upload-gro
               "max-image-width": e.maxImageWidth
             }, {
               button: m(() => [
-                n("span", P, [
+                l("span", q, [
                   d(c, { symbol: "plus" })
                 ])
               ]),
               _: 1
             }, 8, ["src", "endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width"]))
           ]),
-          _: 1
+          _: 3
         }, 8, ["modelValue"])
       ])
     ]));
   }
 });
 export {
-  Y as default
+  _ as default
 };

package/dist/components/organisms/asset-uploader/asset-uploader.vue.d.ts

@@ -96,6 +96,29 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         default: number;
     };
     aspectRatio: NumberConstructor;
+    showTypeDropdown: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    typeOptions: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            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: () => string[];
+    };
 }>, {}, {}, {}, {}, 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<{
@@ -187,6 +210,29 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
         default: number;
     };
     aspectRatio: NumberConstructor;
+    showTypeDropdown: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    typeOptions: {
+        type: {
+            (arrayLength: number): string[];
+            (...items: string[]): string[];
+            new (arrayLength: number): string[];
+            new (...items: string[]): string[];
+            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: () => string[];
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -206,5 +252,7 @@ declare const _default: import('../../../../vue/dist/vue.esm-bundler.js').Define
     maxImageWidth: number;
     useImageUpload: boolean;
     mediaTypeMap: Record<string, any>;
+    showTypeDropdown: boolean;
+    typeOptions: string[];
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/dist/components/organisms/asset-uploader/asset-uploader.vue.js

@@ -1,9 +1,11 @@
-import { defineComponent as p, computed as r, openBlock as m, createElementBlock as u, unref as c, createCommentVNode as f, createVNode as g } from "vue";
-import { uniqueId as n } from "../../../utilities/helpers.js";
-import y from "../../molecules/upload-group/upload-group.vue.js";
+import { defineComponent as y, computed as f, openBlock as n, createElementBlock as i, unref as g, createCommentVNode as h, createVNode as p, createSlots as b, withCtx as V } from "vue";
+import { uniqueId as s } from "../../../utilities/helpers.js";
+import v from "../../molecules/upload-group/upload-group.vue.js";
 /* empty css                                             */
-import { sanitizeHtml as h } from "../../../composables/useSanitize.js";
-const b = { class: "asset-uploader" }, v = ["innerHTML"], k = /* @__PURE__ */ p({
+import w from "../../molecules/input-dropdown/input-dropdown.vue.js";
+/* empty css                                                 */
+import { sanitizeHtml as S } from "../../../composables/useSanitize.js";
+const T = { class: "asset-uploader" }, k = ["innerHTML"], F = /* @__PURE__ */ y({
   __name: "asset-uploader",
   props: {
     modelValue: {
@@ -12,11 +14,11 @@ const b = { class: "asset-uploader" }, v = ["innerHTML"], k = /* @__PURE__ */ p(
     },
     name: {
       type: String,
-      default: () => n()
+      default: () => s()
     },
     id: {
       type: String,
-      default: () => n()
+      default: () => s()
     },
     type: {
       type: String,
@@ -79,33 +81,51 @@ const b = { class: "asset-uploader" }, v = ["innerHTML"], k = /* @__PURE__ */ p(
       type: Number,
       default: 0
     },
-    aspectRatio: Number
+    aspectRatio: Number,
+    showTypeDropdown: {
+      type: Boolean,
+      default: !1
+    },
+    typeOptions: {
+      type: Array,
+      default: () => [
+        "background",
+        "overlay",
+        "object"
+      ]
+    }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const t = e, s = o, i = r({
+  setup(e, { emit: r }) {
+    const a = e, m = r, u = f({
       get() {
-        return t.modelValue.map((d) => d.src);
+        return a.modelValue.map((o) => o.src);
       },
-      set(d) {
-        s("update:modelValue", d.map(
-          (a, l) => ({
-            mediaType: t.modelValue[l] && t.modelValue[l].mediaType || a.includes("data:image") ? a.includes("data:image/svg") ? "Svg" : "Image" : t.mediaTypeMap[a.split(".")[1]],
-            src: a,
-            name: t.modelValue[l] && t.modelValue[l].name || `${t.name}-${l}`,
-            ...t.type ? { type: t.type } : {}
-          })
-        ));
+      set(o) {
+        m("update:modelValue", o.map((l, t) => {
+          const d = a.showTypeDropdown && a.modelValue[t]?.type || a.type;
+          return {
+            mediaType: a.modelValue[t] && a.modelValue[t].mediaType || l.includes("data:image") ? l.includes("data:image/svg") ? "Svg" : "Image" : a.mediaTypeMap[l.split(".")[1]],
+            src: l,
+            name: a.modelValue[t] && a.modelValue[t].name || `${a.name}-${t}`,
+            ...d ? { type: d } : {}
+          };
+        }));
       }
     });
-    return (d, a) => (m(), u("div", b, [
-      e.label ? (m(), u("label", {
+    function c(o, l) {
+      m("update:modelValue", a.modelValue.map(
+        (t, d) => d === o ? { ...t, type: l } : t
+      ));
+    }
+    return (o, l) => (n(), i("div", T, [
+      e.label ? (n(), i("label", {
         key: 0,
-        innerHTML: c(h)(e.label)
-      }, null, 8, v)) : f("", !0),
-      g(y, {
-        modelValue: i.value,
-        "onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
+        innerHTML: g(S)(e.label)
+      }, null, 8, k)) : h("", !0),
+      p(v, {
+        modelValue: u.value,
+        "onUpdate:modelValue": l[0] || (l[0] = (t) => u.value = t),
         endpoint: e.endpoint,
         "custom-fetch": e.customFetch,
         "auth-token": e.authToken,
@@ -117,10 +137,24 @@ const b = { class: "asset-uploader" }, v = ["innerHTML"], k = /* @__PURE__ */ p(
         "use-image-upload": e.useImageUpload,
         "max-image-width": e.maxImageWidth,
         "aspect-ratio": e.aspectRatio
-      }, null, 8, ["modelValue", "endpoint", "custom-fetch", "auth-token", "disabled", "preview-width", "base-response-path", "accept", "max-file-size", "use-image-upload", "max-image-width", "aspect-ratio"])
+      }, b({ _: 2 }, [
+        e.showTypeDropdown ? {
+          name: "item-overlay",
+          fn: V(({ index: t }) => [
+            p(w, {
+              name: `${e.name}-type-${t}`,
+              options: e.typeOptions,
+              "model-value": e.modelValue[t]?.type || null,
+              placeholder: "type",
+              "onUpdate:modelValue": (d) => c(t, d)
+            }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue", "endpoint", "custom-fetch", "auth-token", "disabled", "preview-width", "base-response-path", "accept", "max-file-size", "use-image-upload", "max-image-width", "aspect-ratio"])
     ]));
   }
 });
 export {
-  k as default
+  F as default
 };

package/dist/components/organisms/asset-uploader/asset-uploader.vue2.js

@@ -0,0 +1,4 @@
+import f from "./asset-uploader.vue.js";
+export {
+  f as default
+};