ablok-components 0.3.104 → 0.3.106

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

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

package/dist/components/templates/base-carousel/base-carousel.js

@@ -0,0 +1,6 @@
+import e from "./base-carousel.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                              */
+//#region src/components/templates/base-carousel/base-carousel.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/templates/base-carousel/base-carousel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,82 @@
+import e from "../../atoms/svg-icon/svg-icon.js";
+import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, renderSlot as d, toDisplayString as f, withModifiers as p } from "vue";
+//#region src/components/templates/base-carousel/base-carousel.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "carousel d-flex" }, h = ["title"], g = ["onClick"], _ = ["title"], v = /*@__PURE__*/ o({
+	__name: "base-carousel",
+	props: {
+		modelValue: {
+			type: Number,
+			default: -1
+		},
+		config: {
+			type: Object,
+			default: null
+		},
+		messages: {
+			type: Object,
+			default: {}
+		},
+		items: {
+			type: Array,
+			default: []
+		},
+		navigation: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue", "select"],
+	setup(o, { emit: v }) {
+		let y = v, b = l(), x = l();
+		function S() {
+			b.value.scrollTo({
+				top: 0,
+				left: b.value.scrollLeft - b.value.clientWidth > 0 ? b.value.scrollLeft - b.value.clientWidth : 0,
+				behavior: "smooth"
+			});
+		}
+		function C() {
+			b.value.scrollTo({
+				top: 0,
+				left: b.value.scrollLeft - b.value.clientWidth <= x.value.clientWidth ? b.value.scrollLeft + b.value.clientWidth : x.value.clientWidth,
+				behavior: "smooth"
+			});
+		}
+		function w(e) {
+			y("update:modelValue", e);
+		}
+		return (l, v) => (c(), r("div", m, [
+			o.navigation ? (c(), r("button", {
+				key: 0,
+				class: "carousel__control btn btn-link text-light",
+				type: "button",
+				onClick: p(S, ["prevent", "stop"]),
+				title: l.$t("common.backward")
+			}, [a(e, { symbol: "chevron-left" })], 8, h)) : n("", !0),
+			i("div", {
+				ref_key: "viewport",
+				ref: b,
+				class: "carousel__viewport flex-grow-1"
+			}, [i("div", {
+				ref_key: "track",
+				ref: x,
+				class: "carousel__track d-flex justify-center align-items-center"
+			}, [(c(!0), r(t, null, u(o.items, (e, t) => d(l.$slots, "carousel-item", {
+				item: e,
+				index: t
+			}, () => [i("div", {
+				class: s(["carousel__item", t === o.modelValue ? "selected" : ""]),
+				onClick: (e) => w(t)
+			}, f(e), 11, g)], void 0, e.src)), 128))], 512)], 512),
+			o.navigation ? (c(), r("button", {
+				key: 1,
+				class: "carousel__control btn btn-link text-light",
+				type: "button",
+				onClick: p(C, ["prevent", "stop"]),
+				title: l.$t("common.forward")
+			}, [a(e, { symbol: "chevron-right" })], 8, _)) : n("", !0)
+		]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/templates/base-form/base-form.js

@@ -0,0 +1,6 @@
+import e from "./base-form.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                          */
+//#region src/components/templates/base-form/base-form.vue
+var t = e;
+//#endregion
+export { t as default };