ablok-components 0.3.68 → 0.3.70

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

@@ -0,0 +1,542 @@
+import { defineComponent as _, computed as ee, ref as te, watch as P, nextTick as ae, reactive as y, openBlock as c, createElementBlock as f, unref as oe, createCommentVNode as O, createElementVNode as m, createVNode as d, withCtx as p, createBlock as h, normalizeStyle as v, withModifiers as N, Fragment as j, createTextVNode as L, renderList as le } from "vue";
+import { uniqueId as H } from "../../../utilities/helpers.js";
+import { sanitizeHtml as ne } from "../../../composables/useSanitize.js";
+import se from "../../templates/sortable-list/sortable-list.vue.js";
+/* empty css                                               */
+import A from "../../molecules/file-upload/file-upload.vue.js";
+/* empty css                                           */
+import R from "../../molecules/image-upload/image-upload.vue.js";
+/* empty css                                             */
+import I from "../../molecules/input-dropdown/input-dropdown.vue.js";
+/* empty css                                                 */
+import r from "../../atoms/svg-icon/svg-icon.vue.js";
+/* empty css                                 */
+import C from "../../templates/popover-dialog/popover-dialog.vue.js";
+/* empty css                                                 */
+const ie = { class: "preset-uploader" }, me = ["innerHTML"], de = { class: "preset-uploader__list" }, ce = ["src"], ue = ["onClick"], pe = ["popovertarget"], re = { class: "preset-uploader__popover p-2 d-flex flex-column gap-2" }, be = {
+  role: "button",
+  class: "btn btn-sm w-100 d-inline-flex align-items-center"
+}, fe = {
+  role: "button",
+  class: "btn btn-sm w-100 d-inline-flex align-items-center"
+}, he = {
+  key: 1,
+  class: "preset-group border border-2 rounded d-flex gap-1 p-1"
+}, ye = ["src"], ge = ["onClick"], ve = ["popovertarget"], Ve = { class: "preset-uploader__popover p-2" }, $e = {
+  role: "button",
+  class: "btn img-thumbnail d-flex justify-content-center align-items-center"
+}, ke = {
+  role: "button",
+  class: "btn img-thumbnail d-flex justify-content-center align-items-center"
+}, we = { class: "preset-uploader__popover p-2" }, Te = ["onClick"], Ue = {
+  role: "button",
+  class: "img-thumbnail d-flex justify-content-center align-items-center"
+}, Se = {
+  role: "button",
+  class: "img-thumbnail d-flex justify-content-center align-items-center"
+}, He = /* @__PURE__ */ _({
+  __name: "preset-uploader",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      default: () => H()
+    },
+    id: {
+      type: String,
+      default: () => H()
+    },
+    type: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    variant: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    accept: {
+      type: String
+    },
+    maxFileSize: {
+      type: Number,
+      default: 0
+    },
+    endpoint: {
+      type: String,
+      default: ""
+    },
+    authToken: {
+      type: String,
+      default: ""
+    },
+    customFetch: null,
+    mediaTypeMap: {
+      type: Object,
+      default: () => ({
+        svg: "Svg",
+        png: "Image",
+        jpg: "Image",
+        jpeg: "Image",
+        webp: "Image",
+        mp4: "Video",
+        webm: "Video"
+      })
+    },
+    baseResponsePath: {
+      type: String,
+      default: "/api/v1/assets"
+    },
+    previewWidth: {
+      type: Number,
+      default: 0
+    },
+    useImageUpload: {
+      type: Boolean,
+      default: !1
+    },
+    maxImageWidth: {
+      type: Number,
+      default: 0
+    },
+    aspectRatio: Number,
+    showTypeDropdown: {
+      type: Boolean,
+      default: !1
+    },
+    typeOptions: {
+      type: Array,
+      default: () => ["background", "overlay", "object"]
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: q }) {
+    const i = e, b = q;
+    function E(t) {
+      return t?.type === "preset";
+    }
+    function T(t) {
+      if (t.includes("data:image"))
+        return t.includes("data:image/svg") ? "Svg" : "Image";
+      const o = t.split(".").pop()?.split("?")[0]?.toLowerCase() ?? "";
+      return i.mediaTypeMap[o] ?? "";
+    }
+    const B = ee({
+      get() {
+        return i.modelValue;
+      },
+      set(t) {
+        b("update:modelValue", t);
+      }
+    }), g = te("");
+    P(g, async (t, o) => {
+      if (t && o !== t) {
+        const n = {
+          src: t,
+          name: `${i.name}-${i.modelValue.length}`,
+          mediaType: T(t)
+        };
+        i.type && (n.type = i.type), b("update:modelValue", [...i.modelValue, n]), await ae(), g.value = "";
+      }
+    });
+    const V = y({}), $ = y({}), U = y({}), k = y({}), S = y({}), w = y({}), M = y({});
+    P(S, (t) => {
+      for (const [o, n] of Object.entries(t))
+        if (!n) {
+          const a = Number(o);
+          delete V[a], delete $[a];
+        }
+    }, { deep: !0 }), P(w, (t) => {
+      for (const [o, n] of Object.entries(t))
+        if (!n) {
+          const a = Number(o);
+          delete U[a], delete k[a];
+        }
+    }, { deep: !0 });
+    function W(t, o) {
+      o && (V[t] = o);
+    }
+    function D(t, o) {
+      o && (U[t] = o, w[t] = !0);
+    }
+    function z(t) {
+      const o = [...i.modelValue];
+      o.splice(t, 1), b("update:modelValue", o);
+    }
+    function K(t, o) {
+      b("update:modelValue", i.modelValue.map(
+        (n, a) => a === t ? { ...n, type: o } : n
+      ));
+    }
+    function G(t, o, n) {
+      const a = i.modelValue[t];
+      b("update:modelValue", i.modelValue.map(
+        (l, s) => s === t ? { ...l, items: { ...l.items, [o]: { ...a.items[o], type: n } } } : l
+      ));
+    }
+    function J(t, o) {
+      $[t] = o, Q(t);
+    }
+    function Q(t) {
+      const o = i.modelValue[t], n = o.type || i.type || "item", a = V[t], l = $[t], s = {
+        type: "preset",
+        items: {
+          [n]: {
+            src: o.src,
+            thumbnail: o.src,
+            type: n,
+            mediaType: o.mediaType || T(o.src)
+          },
+          [l]: {
+            src: a,
+            thumbnail: a,
+            type: l,
+            mediaType: T(a)
+          }
+        }
+      };
+      delete V[t], delete $[t], S[t] = !1, b("update:modelValue", i.modelValue.map(
+        (u, F) => F === t ? s : u
+      ));
+    }
+    function X(t, o) {
+      k[t] = o, Y(t);
+    }
+    function Y(t) {
+      const o = U[t], n = k[t], a = i.modelValue[t], l = {
+        ...a,
+        items: {
+          ...a.items,
+          [n]: {
+            src: o,
+            thumbnail: o,
+            type: n,
+            mediaType: T(o)
+          }
+        }
+      };
+      delete U[t], delete k[t], w[t] = !1, b("update:modelValue", i.modelValue.map(
+        (s, u) => u === t ? l : s
+      ));
+    }
+    function Z(t, o) {
+      const n = i.modelValue[t], a = Object.keys(n.items).filter((l) => l !== o);
+      if (a.length <= 1) {
+        const l = a[0], s = l ? n.items[l] : null;
+        if (s) {
+          const u = {
+            src: s.src,
+            name: `${i.name}-${t}`,
+            type: s.type,
+            mediaType: s.mediaType
+          };
+          b("update:modelValue", i.modelValue.map(
+            (F, x) => x === t ? u : F
+          ));
+        } else
+          z(t);
+      } else {
+        const l = { ...n.items };
+        delete l[o], b("update:modelValue", i.modelValue.map(
+          (s, u) => u === t ? { ...n, items: l } : s
+        ));
+      }
+    }
+    return (t, o) => (c(), f("div", ie, [
+      e.label ? (c(), f("label", {
+        key: 0,
+        innerHTML: oe(ne)(e.label)
+      }, null, 8, me)) : O("", !0),
+      m("div", de, [
+        d(se, {
+          modelValue: B.value,
+          "onUpdate:modelValue": o[2] || (o[2] = (n) => B.value = n),
+          vertical: !1,
+          class: "mb-3"
+        }, {
+          "list-item": p(({ item: n, index: a }) => [
+            E(n) ? (c(), f("div", he, [
+              (c(!0), f(j, null, le(n.items, (l, s) => (c(), f("div", {
+                key: s,
+                class: "img-container",
+                style: v(e.showTypeDropdown ? { anchorName: `--${e.name}-si-${a}-${s}` } : {})
+              }, [
+                m("img", {
+                  src: l.thumbnail || l.src,
+                  class: "img-thumbnail border-0 p-0"
+                }, null, 8, ye),
+                m("button", {
+                  onClick: N((u) => Z(a, String(s)), ["prevent"]),
+                  class: "btn btn--close"
+                }, [
+                  d(r, { symbol: "x" })
+                ], 8, ge),
+                e.showTypeDropdown ? (c(), f(j, { key: 0 }, [
+                  m("button", {
+                    class: "btn btn--action",
+                    popovertarget: `${e.name}-si-${a}-${s}`
+                  }, [
+                    d(r, { symbol: "settings" })
+                  ], 8, ve),
+                  d(C, {
+                    id: `${e.name}-si-${a}-${s}`,
+                    modelValue: M[`${a}-${s}`],
+                    "onUpdate:modelValue": (u) => M[`${a}-${s}`] = u,
+                    class: "preset-uploader__anchor-popover",
+                    style: v({ positionAnchor: `--${e.name}-si-${a}-${s}` })
+                  }, {
+                    default: p(() => [
+                      m("div", Ve, [
+                        d(I, {
+                          name: `${e.name}-si-type-${a}-${s}`,
+                          options: e.typeOptions,
+                          "model-value": l.type || null,
+                          placeholder: "layer type",
+                          "onUpdate:modelValue": (u) => G(a, String(s), u)
+                        }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"])
+                ], 64)) : O("", !0)
+              ], 4))), 128)),
+              m("div", {
+                class: "img-container img-container--add",
+                style: v({ anchorName: `--${e.name}-ap-${a}` })
+              }, [
+                e.useImageUpload ? (c(), h(R, {
+                  key: 0,
+                  src: "",
+                  endpoint: e.endpoint,
+                  "custom-fetch": e.customFetch,
+                  "to-data-url": !e.endpoint,
+                  "auth-token": e.authToken,
+                  disabled: e.disabled,
+                  "base-response-path": e.baseResponsePath,
+                  accept: e.accept,
+                  "max-file-size": e.maxFileSize,
+                  "max-image-width": e.maxImageWidth,
+                  "enable-preview": !1,
+                  "aspect-ratio": e.aspectRatio,
+                  "onUpdate:src": (l) => D(a, l)
+                }, {
+                  button: p(() => [
+                    m("span", $e, [
+                      d(r, { symbol: "plus" })
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio", "onUpdate:src"])) : (c(), h(A, {
+                  key: 1,
+                  src: "",
+                  multiple: !1,
+                  endpoint: e.endpoint,
+                  "custom-fetch": e.customFetch,
+                  "to-data-url": !e.endpoint,
+                  "auth-token": e.authToken,
+                  disabled: e.disabled,
+                  "base-response-path": e.baseResponsePath,
+                  accept: e.accept,
+                  "max-file-size": e.maxFileSize,
+                  "onUpdate:src": (l) => D(a, l)
+                }, {
+                  button: p(() => [
+                    m("span", ke, [
+                      d(r, { symbol: "plus" })
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "onUpdate:src"])),
+                d(C, {
+                  id: `${e.name}-ap-${a}`,
+                  modelValue: w[a],
+                  "onUpdate:modelValue": (l) => w[a] = l,
+                  class: "preset-uploader__anchor-popover",
+                  style: v({ positionAnchor: `--${e.name}-ap-${a}` })
+                }, {
+                  default: p(() => [
+                    m("div", we, [
+                      d(I, {
+                        name: `${e.name}-add-type-${a}`,
+                        options: e.typeOptions,
+                        "model-value": k[a] || null,
+                        placeholder: "layer type",
+                        "onUpdate:modelValue": (l) => X(a, l)
+                      }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"])
+              ], 4),
+              m("button", {
+                onClick: N((l) => z(a), ["prevent"]),
+                class: "btn btn--close btn--close-preset"
+              }, [
+                d(r, { symbol: "x" })
+              ], 8, Te)
+            ])) : (c(), f("div", {
+              key: 0,
+              class: "img-container",
+              style: v({ anchorName: `--${e.name}-pp-${a}` })
+            }, [
+              m("img", {
+                src: n.thumbnail || n.src,
+                class: "img-thumbnail"
+              }, null, 8, ce),
+              m("button", {
+                onClick: N((l) => z(a), ["prevent"]),
+                class: "btn btn--close"
+              }, [
+                d(r, { symbol: "x" })
+              ], 8, ue),
+              m("button", {
+                class: "btn btn--action",
+                popovertarget: `${e.name}-pp-${a}`
+              }, [
+                d(r, { symbol: "settings" })
+              ], 8, pe),
+              d(C, {
+                id: `${e.name}-pp-${a}`,
+                modelValue: S[a],
+                "onUpdate:modelValue": (l) => S[a] = l,
+                class: "preset-uploader__anchor-popover",
+                style: v({ positionAnchor: `--${e.name}-pp-${a}` })
+              }, {
+                default: p(() => [
+                  m("div", re, [
+                    e.showTypeDropdown ? (c(), h(I, {
+                      key: 0,
+                      name: `${e.name}-type-${a}`,
+                      options: e.typeOptions,
+                      "model-value": n.type || null,
+                      placeholder: "item type",
+                      "onUpdate:modelValue": (l) => K(a, l)
+                    }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])) : O("", !0),
+                    V[a] ? (c(), h(I, {
+                      key: 2,
+                      name: `${e.name}-promote-type-${a}`,
+                      options: e.typeOptions,
+                      "model-value": $[a] || null,
+                      placeholder: "new layer type",
+                      "onUpdate:modelValue": (l) => J(a, l)
+                    }, null, 8, ["name", "options", "model-value", "onUpdate:modelValue"])) : (c(), f(j, { key: 1 }, [
+                      e.useImageUpload ? (c(), h(R, {
+                        key: 0,
+                        src: "",
+                        endpoint: e.endpoint,
+                        "custom-fetch": e.customFetch,
+                        "to-data-url": !e.endpoint,
+                        "auth-token": e.authToken,
+                        disabled: e.disabled,
+                        "base-response-path": e.baseResponsePath,
+                        accept: e.accept,
+                        "max-file-size": e.maxFileSize,
+                        "max-image-width": e.maxImageWidth,
+                        "enable-preview": !1,
+                        "aspect-ratio": e.aspectRatio,
+                        "onUpdate:src": (l) => W(a, l)
+                      }, {
+                        button: p(() => [
+                          m("span", be, [
+                            d(r, { symbol: "plus" }),
+                            o[3] || (o[3] = L(" Add layer", -1))
+                          ])
+                        ]),
+                        _: 1
+                      }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "max-image-width", "aspect-ratio", "onUpdate:src"])) : (c(), h(A, {
+                        key: 1,
+                        src: "",
+                        multiple: !1,
+                        endpoint: e.endpoint,
+                        "custom-fetch": e.customFetch,
+                        "to-data-url": !e.endpoint,
+                        "auth-token": e.authToken,
+                        disabled: e.disabled,
+                        "base-response-path": e.baseResponsePath,
+                        accept: e.accept,
+                        "max-file-size": e.maxFileSize,
+                        "onUpdate:src": (l) => W(a, l)
+                      }, {
+                        button: p(() => [
+                          m("span", fe, [
+                            d(r, { symbol: "plus" }),
+                            o[4] || (o[4] = L(" Add layer", -1))
+                          ])
+                        ]),
+                        _: 1
+                      }, 8, ["endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size", "onUpdate:src"]))
+                    ], 64))
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["id", "modelValue", "onUpdate:modelValue", "style"])
+            ], 4))
+          ]),
+          "list-append": p(() => [
+            e.useImageUpload ? (c(), h(R, {
+              key: 0,
+              src: g.value,
+              "onUpdate:src": o[0] || (o[0] = (n) => g.value = n),
+              endpoint: e.endpoint,
+              "custom-fetch": e.customFetch,
+              "to-data-url": !e.endpoint,
+              "auth-token": e.authToken,
+              disabled: e.disabled,
+              "base-response-path": e.baseResponsePath,
+              accept: e.accept,
+              "max-file-size": e.maxFileSize,
+              "max-image-width": e.maxImageWidth,
+              "enable-preview": !1,
+              "aspect-ratio": e.aspectRatio
+            }, {
+              button: p(() => [
+                m("span", Ue, [
+                  d(r, { 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"])) : (c(), h(A, {
+              key: 1,
+              src: g.value,
+              "onUpdate:src": o[1] || (o[1] = (n) => g.value = n),
+              multiple: !1,
+              endpoint: e.endpoint,
+              "custom-fetch": e.customFetch,
+              "to-data-url": !e.endpoint,
+              "auth-token": e.authToken,
+              disabled: e.disabled,
+              "base-response-path": e.baseResponsePath,
+              accept: e.accept,
+              "max-file-size": e.maxFileSize
+            }, {
+              button: p(() => [
+                m("span", Se, [
+                  d(r, { symbol: "plus" })
+                ])
+              ]),
+              _: 1
+            }, 8, ["src", "endpoint", "custom-fetch", "to-data-url", "auth-token", "disabled", "base-response-path", "accept", "max-file-size"]))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])
+    ]));
+  }
+});
+export {
+  He as default
+};

package/dist/components/organisms/preset-uploader/preset-uploader.vue3.js

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

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { default as LocationList } from './components/molecules/location-list/lo
 export { default as FileUpload } from './components/molecules/file-upload/file-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';
 export { default as LocationFinder } from './components/organisms/location-finder/location-finder.vue';
 export { default as BaseCarousel } from './components/templates/base-carousel/base-carousel.vue';
 export { default as MediaThumbnails } from './components/molecules/media-thumbnails/media-thumbnails.vue';