ablok-components 0.3.58 → 0.3.59

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

@@ -0,0 +1,178 @@
+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";
+/* empty css                                               */
+import B from "../image-upload/image-upload.vue.js";
+/* empty css                                */
+import I 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 = {
+  role: "button",
+  class: "img-thumbnail d-flex justify-content-center align-items-center"
+}, P = {
+  role: "button",
+  class: "img-thumbnail d-flex justify-content-center align-items-center"
+}, Y = /* @__PURE__ */ v({
+  __name: "upload-group",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      default: () => p()
+    },
+    id: {
+      type: String,
+      default: () => p()
+    },
+    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,
+    baseResponsePath: {
+      type: String,
+      default: "/api/v1/assets"
+    },
+    previewWidth: {
+      type: Number,
+      default: 0
+    },
+    useImageUpload: {
+      type: Boolean,
+      default: !1
+    },
+    maxImageWidth: {
+      type: Number,
+      default: 0
+    },
+    aspectRatio: Number
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: h }) {
+    const b = e, u = h, l = x(""), o = k({
+      get() {
+        return b.modelValue;
+      },
+      set(t) {
+        u("update:modelValue", t);
+      }
+    });
+    function g(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", {
+        key: 0,
+        innerHTML: S(F)(e.label)
+      }, null, 8, W)) : z("", !0),
+      n("div", C, [
+        d(N, {
+          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", {
+                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)
+            ])
+          ]),
+          "list-append": m(() => [
+            e.useImageUpload ? (s(), f(B, {
+              key: 0,
+              src: l.value,
+              "onUpdate:src": a[0] || (a[0] = (i) => l.value = i),
+              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: m(() => [
+                n("span", M, [
+                  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, {
+              key: 1,
+              src: l.value,
+              "onUpdate:src": a[1] || (a[1] = (i) => l.value = i),
+              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,
+              "max-image-width": e.maxImageWidth
+            }, {
+              button: m(() => [
+                n("span", P, [
+                  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
+        }, 8, ["modelValue"])
+      ])
+    ]));
+  }
+});
+export {
+  Y as default
+};

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

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

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

@@ -0,0 +1,126 @@
+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";
+/* empty css                                             */
+import { sanitizeHtml as h } from "../../../composables/useSanitize.js";
+const b = { class: "asset-uploader" }, v = ["innerHTML"], k = /* @__PURE__ */ p({
+  __name: "asset-uploader",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      default: () => n()
+    },
+    id: {
+      type: String,
+      default: () => n()
+    },
+    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"
+        /* Image */
+      })
+    },
+    baseResponsePath: {
+      type: String,
+      default: "/api/v1/assets"
+    },
+    previewWidth: {
+      type: Number,
+      default: 0
+    },
+    useImageUpload: {
+      type: Boolean,
+      default: !1
+    },
+    maxImageWidth: {
+      type: Number,
+      default: 0
+    },
+    aspectRatio: Number
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const t = e, s = o, i = r({
+      get() {
+        return t.modelValue.map((d) => d.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 } : {}
+          })
+        ));
+      }
+    });
+    return (d, a) => (m(), u("div", b, [
+      e.label ? (m(), u("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),
+        endpoint: e.endpoint,
+        "custom-fetch": e.customFetch,
+        "auth-token": e.authToken,
+        disabled: e.disabled,
+        "preview-width": e.previewWidth,
+        "base-response-path": e.baseResponsePath,
+        accept: e.accept,
+        "max-file-size": e.maxFileSize,
+        "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"])
+    ]));
+  }
+});
+export {
+  k as default
+};

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

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