ablok-components 0.3.105 → 0.3.107

package/dist/components/molecules/dom-renderer/dom-renderer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,98 @@
+import { __toESM as e } from "../../../_virtual/_rolldown/runtime.js";
+import { require_debounce as t } from "../../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/debounce.js";
+import { createElementBlock as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, onBeforeUnmount as o, onMounted as s, openBlock as c, ref as l, renderSlot as u } from "vue";
+import d from "html2canvas";
+//#region src/components/molecules/dom-renderer/dom-renderer.vue?vue&type=script&setup=true&lang.ts
+var f = /* @__PURE__ */ e(t(), 1), p = /*@__PURE__*/ r({
+	__name: "dom-renderer",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		fixedWidth: {
+			type: Number,
+			default: 0
+		},
+		renderUpdates: {
+			type: Boolean,
+			default: !1
+		},
+		exportToSvg: {
+			type: Boolean,
+			default: !1
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		},
+		pending: {
+			type: Boolean,
+			default: !1
+		},
+		emitPending: {
+			type: Boolean,
+			default: !1
+		},
+		debug: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue", "update:pending"],
+	setup(e, { emit: t }) {
+		let r = e, p = t, m = l(), h = l(""), g = l(), _ = l(!0);
+		async function v() {
+			if (!m.value || !_.value) return "";
+			let e = m.value;
+			if (!e.isConnected) return "";
+			try {
+				r.emitPending && p("update:pending", !0);
+				let t = e.firstElementChild;
+				if (!t) return "";
+				let n = await d(t, {
+					backgroundColor: "rgba(0, 0, 0, 0)",
+					scale: 1,
+					...r.options
+				});
+				if (!_.value || !m.value || !e.isConnected) return "";
+				let i = n.toDataURL();
+				if (p("update:modelValue", i), r.emitPending && p("update:pending", !1), r.debug) {
+					let e = new Image();
+					e.src = i, document.body.appendChild(e);
+				}
+				return i;
+			} catch (e) {
+				return _.value && r.emitPending && p("update:pending", !1), console.warn("dom-renderer: Render failed", e), "";
+			}
+		}
+		let y = (0, f.default)(async () => {
+			h.value = await v();
+		}, 300, {
+			trailing: !0,
+			leading: !1
+		});
+		return s(() => {
+			let e = m.value;
+			r.renderUpdates && (g.value = new MutationObserver(async (t) => {
+				!_.value || !e.isConnected || (r.emitPending && p("update:pending", !0), y());
+			}), g.value.observe(e, {
+				attributes: !0,
+				childList: !0,
+				characterData: !0,
+				subtree: !0
+			})), setTimeout(() => {
+				r.emitPending && p("update:pending", !0), y();
+			}, 500);
+		}), o(() => {
+			_.value = !1, g.value && g.value.disconnect(), y.cancel();
+		}), (t, r) => (c(), n("div", {
+			class: i(["dom-renderer", { "off-screen": !e.debug }]),
+			ref_key: "renderer",
+			ref: m,
+			style: a(e.fixedWidth > 0 ? { width: `${e.fixedWidth}px` } : {})
+		}, [u(t.$slots, "default")], 6));
+	}
+});
+//#endregion
+export { p as default };

package/dist/components/molecules/file-upload/file-upload.js

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

package/dist/components/molecules/file-upload/file-upload.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,196 @@
+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 "../../atoms/input-file/input-file.js";
+import { useDragAndDrop as i } from "../../../composables/useDragAndDrop.js";
+import { useUploadTransport as a } from "../../../composables/useUploadTransport.js";
+import { useLocalFileUrl as o } from "../../../composables/useLocalFileUrl.js";
+import { Fragment as s, Transition as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toRef as b, unref as x, watch as S, withCtx as C, withModifiers as w } from "vue";
+//#region src/components/molecules/file-upload/file-upload.vue?vue&type=script&setup=true&lang.ts
+var T = ["src"], E = ["onClick"], D = ["onClick"], O = ["for"], k = ["innerHTML"], A = {
+	key: 0,
+	class: "file-upload__loading-spinner"
+}, j = /*@__PURE__*/ m({
+	__name: "file-upload",
+	props: {
+		modelValue: {
+			type: Array,
+			default: []
+		},
+		src: { type: String },
+		name: {
+			type: String,
+			default: () => n()
+		},
+		id: {
+			type: String,
+			default: () => n()
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		variant: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readOnly: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		pattern: {
+			type: String,
+			default: null
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		accept: { type: String },
+		maxFileSize: {
+			type: Number,
+			default: 0
+		},
+		endpoint: {
+			type: String,
+			default: ""
+		},
+		toDataUrl: {
+			type: Boolean,
+			default: !0
+		},
+		authToken: {
+			type: String,
+			default: ""
+		},
+		customFetch: null,
+		baseResponsePath: {
+			type: String,
+			default: "/api/v1/assets"
+		},
+		enablePreview: {
+			type: Boolean,
+			default: !0
+		},
+		previewWidth: {
+			type: Number,
+			default: 0
+		},
+		dropFiles: {
+			type: Boolean,
+			default: !1
+		},
+		localUrlFormat: {
+			type: String,
+			default: "dataUrl"
+		}
+	},
+	emits: ["update:modelValue", "update:src"],
+	setup(n, { emit: m }) {
+		let j = n, M = m, N = _(), P = _([]), F = _([]), { pending: I, uploadFile: L } = a(j), { toLocalUrl: R, revoke: z } = o(b(j, "localUrlFormat")), { isDragging: B } = i(N, {
+			enabled: () => j.dropFiles,
+			onDrop: (e) => {
+				P.value = e;
+			}
+		}), V = l(() => j.modelValue?.length ? j.modelValue : j.src ? [{
+			type: "",
+			src: j.src
+		}] : F.value);
+		function H(e) {
+			let t = typeof e == "string" ? parseInt(e, 10) : e, n = Array.isArray(j.modelValue) && j.modelValue.length > 0, r = Array.isArray(F.value) && F.value.length > 0;
+			if (r && t < F.value.length && (z(F.value[t]?.src), F.value.splice(t, 1)), n) {
+				let e = [...j.modelValue];
+				t < e.length && e.splice(t, 1), M("update:modelValue", e), j.multiple || M("update:src", e[0]?.src || "");
+			} else if (r) {
+				let e = j.multiple ? F.value : F.value[0];
+				M("update:modelValue", e), j.multiple || M("update:src", F.value[0]?.src || "");
+			} else M("update:modelValue", j.multiple ? [] : void 0), M("update:src", "");
+			P.value.splice(t, 1);
+		}
+		return S(() => P.value, async (e) => {
+			let t = await Promise.all(e.map(async (e) => ({
+				src: j.toDataUrl ? await R(e) : await L(e),
+				type: e.type,
+				name: e.name,
+				size: e.size,
+				lastModified: e.lastModified
+			})));
+			F.value = t;
+		}, { deep: !0 }), S(() => F.value, async (e) => {
+			let t = j.multiple ? e : e[0];
+			M("update:modelValue", t), j.multiple || M("update:src", e[0] && e[0].src);
+		}, { deep: !0 }), (i, a) => (g(), d("div", {
+			ref_key: "root",
+			ref: N,
+			class: h(["file-upload", {
+				"has-dragging": n.dropFiles,
+				"is-dragging": x(B)
+			}])
+		}, [
+			(g(!0), d(s, null, v(V.value, (t, r) => (g(), d("div", {
+				key: t.src,
+				class: h(n.enablePreview ? "file-upload__thumbnail" : "file-upload__reset")
+			}, [y(i.$slots, "preview-item", {
+				bind: {
+					item: t,
+					index: r
+				},
+				on: { removeFile: H }
+			}, () => [n.enablePreview ? (g(), d(s, { key: 0 }, [f("img", {
+				src: `${t.src}${n.previewWidth ? `?width=${n.previewWidth}` : ""}`,
+				class: "img-thumbnail rounded"
+			}, null, 8, T), f("button", {
+				onClick: w((e) => H(r), ["prevent"]),
+				class: "btn btn--close"
+			}, [p(e, { symbol: "x" })], 8, E)], 64)) : (g(), d("button", {
+				key: 1,
+				onClick: w((e) => H(r), ["prevent"]),
+				class: "btn btn--close btn-outline-contrast"
+			}, [p(e, { symbol: "x" })], 8, D))])], 2))), 128)),
+			p(r, {
+				modelValue: P.value,
+				"onUpdate:modelValue": a[0] ||= (e) => P.value = e,
+				id: n.id,
+				name: n.name,
+				accept: n.accept,
+				"max-file-size": n.maxFileSize,
+				multiple: n.multiple,
+				class: "d-none"
+			}, null, 8, [
+				"modelValue",
+				"id",
+				"name",
+				"accept",
+				"max-file-size",
+				"multiple"
+			]),
+			y(i.$slots, "label", {}, () => [f("label", {
+				for: n.id,
+				class: "file-upload__label"
+			}, [y(i.$slots, "button", {}, () => [f("span", {
+				class: "btn btn-outline-contrast",
+				innerHTML: x(t)(n.label || i.$t("common.selectFile"))
+			}, null, 8, k)]), p(c, { name: "fade" }, {
+				default: C(() => [x(I) ? (g(), d("span", A, [...a[1] ||= [f("span", {
+					class: "spinner-border",
+					role: "status"
+				}, [f("span", { class: "visually-hidden" }, "Loading...")], -1)]])) : u("", !0)]),
+				_: 1
+			})], 8, O)])
+		], 2));
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/molecules/hint-system/hint-system.js

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

package/dist/components/molecules/hint-system/hint-system.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,96 @@
+import { sanitizeHtml as e } from "../../../composables/useSanitize.js";
+import { Fragment as t, TransitionGroup as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, openBlock as l, ref as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m, watch as h, withCtx as g } from "vue";
+//#region src/components/molecules/hint-system/hint-system.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "hint-system" }, v = ["innerHTML"], y = ["innerHTML"], b = {
+	key: 1,
+	class: "hint-system__hint-content"
+}, x = ["disabled"], S = /*@__PURE__*/ c({
+	__name: "hint-system",
+	props: {
+		modelValue: {
+			type: Number,
+			default: 0
+		},
+		hints: {
+			type: Array,
+			default: () => []
+		},
+		penalty: {
+			type: Number,
+			default: 1
+		},
+		maxHints: {
+			type: Number,
+			default: void 0
+		},
+		htmlContent: {
+			type: Boolean,
+			default: !1
+		},
+		label: {
+			type: String,
+			default: "Show hint"
+		},
+		description: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: ["update:modelValue", "hint-revealed"],
+	setup(c, { emit: S }) {
+		let C = c, w = S, T = u(C.modelValue);
+		h(() => C.modelValue, (e) => {
+			T.value = e;
+		});
+		let E = r(() => C.maxHints === void 0 ? C.hints.length : C.maxHints), D = r(() => T.value < E.value), O = r(() => C.hints.slice(0, T.value));
+		function k() {
+			if (!D.value) return;
+			let e = T.value;
+			T.value++, w("update:modelValue", T.value), w("hint-revealed", {
+				hint: C.hints[e],
+				index: e,
+				penaltyTotal: T.value * C.penalty
+			});
+		}
+		return (r, u) => (l(), o("div", _, [
+			c.description ? (l(), o("div", {
+				key: 0,
+				innerHTML: m(e)(c.description),
+				class: "hint-system__description"
+			}, null, 8, v)) : a("", !0),
+			O.value.length ? (l(), i(n, {
+				key: 1,
+				name: "hint-reveal",
+				tag: "ol",
+				class: "hint-system__list"
+			}, {
+				default: g(() => [(l(!0), o(t, null, d(O.value, (t, n) => (l(), o("li", {
+					key: n,
+					class: "hint-system__hint"
+				}, [f(r.$slots, "hint", {
+					hint: t,
+					index: n,
+					isNew: n === T.value - 1
+				}, () => [c.htmlContent ? (l(), o("div", {
+					key: 0,
+					class: "hint-system__hint-content",
+					innerHTML: m(e)(t.content || "")
+				}, null, 8, y)) : (l(), o("div", b, p(t.content), 1))])]))), 128))]),
+				_: 3
+			})) : a("", !0),
+			f(r.$slots, "trigger", {
+				revealNext: k,
+				canReveal: D.value,
+				revealedCount: T.value,
+				total: E.value
+			}, () => [s("button", {
+				type: "button",
+				class: "hint-system__trigger d-block w-100 text-center",
+				disabled: !D.value,
+				onClick: k
+			}, p(c.label), 9, x)])
+		]));
+	}
+});
+//#endregion
+export { S as default };

package/dist/components/molecules/image-crop/image-crop.js

@@ -0,0 +1,5 @@
+import e from "./image-crop.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/molecules/image-crop/image-crop.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/molecules/image-crop/image-crop.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,91 @@
+import e from "../input-dropdown/input-dropdown.js";
+/* empty css                                                                                                                               */
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, onBeforeMount as o, openBlock as s, ref as c, renderSlot as l, toDisplayString as u, unref as d, useTemplateRef as f, withModifiers as p } from "vue";
+import { Cropper as m } from "vue-advanced-cropper";
+//#region src/components/molecules/image-crop/image-crop.vue?vue&type=script&setup=true&lang.ts
+var h = {
+	key: 0,
+	class: "image-crop"
+}, g = { class: "row mb-4" }, _ = { class: "col" }, v = { class: "row" }, y = { class: "col d-flex gap-2 justify-content-end gap-2" }, b = /*@__PURE__*/ a({
+	__name: "image-crop",
+	props: {
+		modelValue: {
+			type: String,
+			default: "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"/>",
+			required: !0
+		},
+		spinner: {
+			type: Boolean,
+			default: !1
+		},
+		ready: {
+			type: Boolean,
+			default: !1
+		},
+		aspectRatioOptions: {
+			type: Array,
+			default: () => [
+				{
+					value: 0,
+					text: "Free"
+				},
+				{
+					value: 1,
+					text: "1:1"
+				},
+				{
+					value: 4 / 3,
+					text: "4:3"
+				},
+				{
+					value: 16 / 9,
+					text: "16:9"
+				},
+				{
+					value: 3 / 4,
+					text: "3:4"
+				},
+				{
+					value: 9 / 16,
+					text: "9:16"
+				}
+			]
+		},
+		suggestedAspectRatio: Number
+	},
+	emits: ["update:modelValue"],
+	setup(a, { emit: b }) {
+		let x = a, S = b, C = f("cropper"), w = c(0);
+		function T() {
+			let { canvas: e } = C.value?.getResult(), t = e.toDataURL();
+			S("update:modelValue", t);
+		}
+		return o(() => {
+			w.value = x.suggestedAspectRatio || 0;
+		}), (o, c) => a.modelValue ? (s(), n("div", h, [
+			r("div", g, [r("div", _, [i(d(m), {
+				ref: "cropper",
+				class: "cropper",
+				src: a.modelValue,
+				"stencil-props": { ...w.value === 0 ? {} : { aspectRatio: w.value } },
+				"resize-image": !1
+			}, null, 8, ["src", "stencil-props"])])]),
+			c[1] ||= r("hr", null, null, -1),
+			r("div", v, [r("div", y, [
+				i(e, {
+					modelValue: w.value,
+					"onUpdate:modelValue": c[0] ||= (e) => w.value = e,
+					options: a.aspectRatioOptions,
+					class: "mb-0"
+				}, null, 8, ["modelValue", "options"]),
+				l(o.$slots, "actions"),
+				r("button", {
+					class: "btn btn-sm btn-primary",
+					onClick: p(T, ["prevent", "stop"])
+				}, u(o.$t("common.apply")), 1)
+			])])
+		])) : t("", !0);
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/molecules/image-crop-resize/image-crop-resize.js

@@ -0,0 +1,5 @@
+import e from "./image-crop-resize.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/molecules/image-crop-resize/image-crop-resize.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/molecules/image-crop-resize/image-crop-resize.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,91 @@
+import e from "../../atoms/svg-icon/svg-icon.js";
+import t from "../../atoms/base-image/base-image.js";
+import n from "../image-resize/image-resize.js";
+import r from "../image-crop/image-crop.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, watch as g, withCtx as _, withModifiers as v } from "vue";
+//#region src/components/molecules/image-crop-resize/image-crop-resize.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	key: 0,
+	class: "image-crop-resize position-relative"
+}, b = { class: "row" }, x = { class: "col" }, S = {
+	key: 3,
+	class: "alert alert-warning mt-4 small p-2"
+}, C = { key: 4 }, w = { class: "row" }, T = { class: "col-12" }, E = { class: "d-flex" }, D = {
+	key: 0,
+	class: "d-flex gap-3"
+}, O = { class: "caption" }, k = { class: "caption" }, A = {
+	key: 1,
+	class: "ms-auto"
+}, j = /*@__PURE__*/ u({
+	__name: "image-crop-resize",
+	props: {
+		modelValue: {
+			type: String,
+			default: "data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\"/>",
+			required: !0
+		},
+		spinner: {
+			type: Boolean,
+			default: !1
+		},
+		ready: {
+			type: Boolean,
+			default: !1
+		},
+		aspectRatio: Number
+	},
+	emits: ["update:modelValue"],
+	setup(u, { emit: j }) {
+		let M = u, N = j, P = p(!1), F = p(!1), I = i({
+			get: () => M.modelValue,
+			set: (e) => N("update:modelValue", e)
+		}), L = i(() => M.modelValue.startsWith("data:image/svg+xml"));
+		return g(() => [P.value, I.value], (e, t) => {
+			e[0] && e[0] === t[0] && (P.value = !1);
+		}), g(() => [F.value, I.value], (e, t) => {
+			e[0] && e[0] === t[0] && (F.value = !1);
+		}), d(() => {}), (i, d) => u.modelValue ? (f(), s("div", y, [c("div", b, [c("div", x, [
+			P.value || F.value ? P.value ? (f(), a(n, {
+				key: 1,
+				modelValue: I.value,
+				"onUpdate:modelValue": d[1] ||= (e) => I.value = e
+			}, {
+				actions: _(() => [c("button", {
+					class: "btn btn-outline-ccontrast",
+					onClick: d[0] ||= v((e) => P.value = !1, ["prevent", "stop"])
+				}, h(i.$t("common.cancel")), 1)]),
+				_: 1
+			}, 8, ["modelValue"])) : F.value ? (f(), a(r, {
+				key: 2,
+				modelValue: I.value,
+				"onUpdate:modelValue": d[3] ||= (e) => I.value = e,
+				"suggested-aspect-ratio": u.aspectRatio
+			}, {
+				actions: _(() => [c("button", {
+					class: "btn btn-sm btn-outline-ccontrast",
+					onClick: d[2] ||= v((e) => F.value = !1, ["prevent", "stop"])
+				}, h(i.$t("common.cancel")), 1)]),
+				_: 1
+			}, 8, ["modelValue", "suggested-aspect-ratio"])) : o("", !0) : (f(), a(t, {
+				key: 0,
+				ref: "targetImage",
+				class: "",
+				animate: !1,
+				src: u.modelValue
+			}, null, 8, ["src"])),
+			L.value ? (f(), s("div", S, h(i.$t("common.svgWarning")), 1)) : o("", !0),
+			!F.value && !P.value ? (f(), s("hr", C)) : o("", !0),
+			c("div", w, [c("div", T, [c("div", E, [!F.value && !P.value ? (f(), s("div", D, [c("button", {
+				type: "button",
+				class: "btn btn-light",
+				onClick: d[4] ||= v((e) => F.value = !F.value, ["prevent", "stop"])
+			}, [l(e, { symbol: "crop" }), c("span", O, h(i.$t("common.crop")), 1)]), c("button", {
+				type: "button",
+				class: "btn btn-light",
+				onClick: d[5] ||= v((e) => P.value = !P.value, ["prevent", "stop"])
+			}, [l(e, { symbol: "image-upscale" }), c("span", k, h(i.$t("common.resize")), 1)])])) : o("", !0), !F.value && !P.value ? (f(), s("div", A, [m(i.$slots, "submit")])) : o("", !0)])])])
+		])])])) : o("", !0);
+	}
+});
+//#endregion
+export { j as default };

package/dist/components/molecules/image-resize/image-resize.js

@@ -0,0 +1,5 @@
+import e from "./image-resize.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/molecules/image-resize/image-resize.vue
+var t = e;
+//#endregion
+export { t as default };