ablok-components 0.3.104 → 0.3.106

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

@@ -0,0 +1,116 @@
+import { __toESM as e } from "../../../_virtual/_rolldown/runtime.js";
+import t from "../../atoms/base-image/base-image.js";
+import { resizeImageElementToDataUrl as n } from "../../../utilities/helpers.js";
+import r from "../../atoms/base-input/base-input.js";
+import { require_debounce as i } from "../../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/debounce.js";
+import { 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, useTemplateRef as g, vModelText as _, watch as v, withDirectives as y, withModifiers as b } from "vue";
+//#region src/components/molecules/image-resize/image-resize.vue?vue&type=script&setup=true&lang.ts
+var x = /* @__PURE__ */ e(i(), 1), S = {
+	key: 0,
+	class: "image-editor position-relative"
+}, C = { class: "row mb-3" }, w = { class: "col" }, T = { class: "row gap-2 mb-4" }, E = { class: "col-12" }, D = { class: "input mb-2" }, O = { class: "col" }, k = { class: "input mb-0" }, A = { class: "col" }, j = { class: "input mb-0" }, M = { class: "row" }, N = { class: "col d-flex justify-content-end gap-2" }, P = ["disabled"], F = /*@__PURE__*/ u({
+	__name: "image-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
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: i }) {
+		let u = i, F = g("image"), I = p(1), L = p(0), R = p(0), z = p(null), B = p(0), V = p(0);
+		function H() {
+			z.value && (u("update:modelValue", z.value), I.value = 1);
+		}
+		let U = () => {
+			if (!B.value || !V.value) return;
+			L.value = Math.round(B.value * I.value);
+			let e = V.value / B.value;
+			R.value = Math.round(L.value * e);
+			let t = F.value?.$el;
+			if (!t) return;
+			let r = t.querySelector("img");
+			r && (z.value = n(r, L.value, R.value, "image/png"));
+		}, W = (0, x.default)(U, 300);
+		return v(I, () => {
+			B.value && (L.value = Math.round(B.value * I.value), W());
+		}), v(L, () => {
+			if (!B.value || L.value === 0) return;
+			let e = L.value / B.value;
+			Math.abs(e - I.value) > 1e-4 && (I.value = Number(e.toFixed(4)));
+			let t = V.value / B.value;
+			R.value = Math.round(L.value * t), W();
+		}), v(R, () => {
+			if (!V.value || R.value === 0) return;
+			let e = R.value / V.value;
+			Math.abs(e - I.value) > 1e-4 && (I.value = Number(e.toFixed(4)));
+			let t = B.value / V.value;
+			L.value = Math.round(R.value * t), W();
+		}), d(() => {
+			let e = F.value?.$el;
+			if (!e) return;
+			let t = e.querySelector("img");
+			if (!t) return;
+			let n = () => {
+				B.value = t.naturalWidth, V.value = t.naturalHeight, U();
+			};
+			t.complete ? n() : t.addEventListener("load", n);
+		}), (n, i) => e.modelValue ? (f(), s("div", S, [
+			c("div", C, [c("div", w, [l(t, {
+				ref_key: "image",
+				ref: F,
+				class: "d-none",
+				src: e.modelValue,
+				animate: !1
+			}, null, 8, ["src"]), z.value ? (f(), a(t, {
+				key: 0,
+				ref: "targetImage",
+				class: "",
+				src: z.value,
+				animate: !1
+			}, null, 8, ["src"])) : o("", !0)])]),
+			c("div", T, [
+				c("div", E, [c("div", D, [y(c("input", {
+					type: "range",
+					class: "form-range",
+					id: "scaleRange",
+					"onUpdate:modelValue": i[0] ||= (e) => I.value = e,
+					min: "0",
+					max: "2",
+					step: "0.0001"
+				}, null, 512), [[_, I.value]])])]),
+				c("div", O, [c("div", k, [l(r, {
+					type: "number",
+					class: "form-input mb-0",
+					id: "targetWidth",
+					modelValue: L.value,
+					"onUpdate:modelValue": i[1] ||= (e) => L.value = e
+				}, null, 8, ["modelValue"])])]),
+				i[3] ||= c("div", { class: "col-auto d-flex align-items-center" }, [c("output", null, "×")], -1),
+				c("div", A, [c("div", j, [l(r, {
+					type: "number",
+					class: "form-input mb-0",
+					id: "targetHeight",
+					modelValue: R.value,
+					"onUpdate:modelValue": i[2] ||= (e) => R.value = e
+				}, null, 8, ["modelValue"])])])
+			]),
+			c("div", M, [c("div", N, [m(n.$slots, "actions"), c("button", {
+				class: "btn btn-sm btn-primary",
+				disabled: !z.value,
+				onClick: b(H, ["prevent", "stop"])
+			}, h(n.$t("common.apply")), 9, P)])])
+		])) : o("", !0);
+	}
+});
+//#endregion
+export { F as default };

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

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

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

@@ -0,0 +1,264 @@
+import e from "../../atoms/svg-icon/svg-icon.js";
+import t from "../../atoms/base-image/base-image.js";
+import { sanitizeHtml as ee } from "../../../composables/useSanitize.js";
+import { resizeImageFileByMaxWidth as n, srcToFile as r, uniqueId as i } from "../../../utilities/helpers.js";
+import a from "../../atoms/input-file/input-file.js";
+import { useDragAndDrop as o } from "../../../composables/useDragAndDrop.js";
+import { useUploadTransport as s } from "../../../composables/useUploadTransport.js";
+import { useLocalFileUrl as c } from "../../../composables/useLocalFileUrl.js";
+import l from "../image-crop-resize/image-crop-resize.js";
+import u from "../../templates/modal-dialog/modal-dialog.js";
+import { Fragment as d, Transition as f, computed as p, createBlock as te, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, normalizeClass as y, normalizeStyle as b, onBeforeUnmount as x, openBlock as S, ref as C, renderSlot as w, toDisplayString as T, toRef as E, unref as D, watch as O, withCtx as k, withModifiers as A } from "vue";
+//#region src/components/molecules/image-upload/image-upload.vue?vue&type=script&setup=true&lang.ts
+var ne = { class: "image-upload__controls" }, re = { class: "d-flex gap-1 align-items-center" }, j = {
+	key: 1,
+	class: "image-upload__controls"
+}, M = ["for"], N = ["innerHTML"], P = {
+	key: 0,
+	class: "image-upload__loading-spinner"
+}, F = /*@__PURE__*/ v({
+	__name: "image-upload",
+	props: {
+		modelValue: {
+			type: Object,
+			default: void 0
+		},
+		src: { type: String },
+		name: {
+			type: String,
+			default: () => i()
+		},
+		id: {
+			type: String,
+			default: () => i()
+		},
+		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
+		},
+		accept: {
+			type: String,
+			default: "image/*"
+		},
+		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
+		},
+		enableReview: {
+			type: Boolean,
+			default: !0
+		},
+		maxImageWidth: {
+			type: Number,
+			default: 4096
+		},
+		aspectRatio: Number,
+		localUrlFormat: {
+			type: String,
+			default: "dataUrl"
+		}
+	},
+	emits: ["update:modelValue", "update:src"],
+	setup(i, { emit: v }) {
+		let F = i, I = v, L = C(), R = C([]), z = C(!1), B = C(!1), V = C(null), H = C(null), U = C(null), W = !1, { pending: G, uploadFile: K } = s(F), { toLocalUrl: q, revoke: J } = c(E(F, "localUrlFormat")), { isDragging: Y } = o(L, {
+			enabled: () => F.dropFiles,
+			onDrop: (e) => {
+				R.value = e;
+			}
+		}), X = p(() => F.modelValue ? F.modelValue : F.src ? {
+			type: "",
+			src: F.src
+		} : V.value);
+		function Z(e) {
+			J(V.value?.src), V.value = e;
+		}
+		function Q() {
+			Z(null), R.value = [], z.value = !1, I("update:modelValue", void 0), I("update:src", "");
+		}
+		function $() {
+			Q();
+		}
+		O(() => R.value, async (e) => {
+			if (!e || !e.length || !e[0]) return;
+			z.value = !1;
+			let t = await n(e[0], F.maxImageWidth);
+			F.enableReview ? (H.value = {
+				src: await q(t),
+				type: t.type
+			}, W = !0, B.value = !0) : Z({
+				src: F.toDataUrl ? await q(t) : await K(t),
+				type: t.type
+			});
+		}), O(() => V.value, (e) => {
+			I("update:modelValue", e || void 0), I("update:src", e?.src || "");
+		}), O(() => U.value, async (e) => {
+			if (e) {
+				try {
+					Z({
+						src: F.toDataUrl ? await q(e) : await K(e),
+						type: e.type
+					});
+				} catch (t) {
+					console.error(`Failed to process file "${e.name}"`, t);
+				}
+				U.value = null;
+			}
+		}), O(() => B.value, (e, t) => {
+			!e && t && H.value && (W && J(H.value.src), W = !1, H.value = null, $());
+		}), O(() => F.src, (e) => {
+			!e && V.value && $();
+		});
+		function ie(e, t) {
+			W = !1, H.value = {
+				src: e,
+				type: t
+			}, B.value = !0;
+		}
+		async function ae() {
+			H.value && (U.value = await r(H.value.src, "file", H.value.type), W && J(H.value.src)), W = !1, H.value = null, B.value = !1;
+		}
+		return x(() => {
+			J(V.value?.src);
+		}), (n, r) => (S(), h("div", {
+			ref_key: "root",
+			ref: L,
+			class: y(["image-upload", {
+				"has-dragging": i.dropFiles,
+				"is-dragging": D(Y)
+			}])
+		}, [
+			!B.value && X.value ? (S(), h("div", {
+				key: 0,
+				class: y(["mb-2", i.enablePreview ? "image-upload__thumbnail" : "image-upload__reset"])
+			}, [i.enablePreview ? (S(), h(d, { key: 0 }, [_(t, {
+				src: `${X.value.src}${i.previewWidth ? `?width=${i.previewWidth}` : ""}`,
+				class: "img-thumbnail rounded",
+				ready: z.value,
+				"onUpdate:ready": r[0] ||= (e) => z.value = e,
+				animate: !1,
+				style: b({
+					maxWidth: i.previewWidth ? `${i.previewWidth}px` : "auto",
+					height: "auto"
+				})
+			}, null, 8, [
+				"src",
+				"ready",
+				"style"
+			]), g("div", ne, [g("div", re, [g("button", {
+				type: "button",
+				onClick: r[1] ||= A((e) => ie(X.value.src, X.value.type), ["prevent", "stop"]),
+				class: "btn btn--edit btn-sm btn-light"
+			}, [_(e, { symbol: "edit-2" })]), g("button", {
+				type: "button",
+				onClick: r[2] ||= A((e) => Q(), ["prevent", "stop"]),
+				class: "btn btn--close btn-sm btn-light"
+			}, [_(e, { symbol: "x" })])])])], 64)) : (S(), h("div", j, [g("button", {
+				onClick: r[3] ||= A((e) => Q(), ["prevent", "stop"]),
+				class: "btn btn--close btn-outline-contrast"
+			}, [_(e, { symbol: "x" })])]))], 2)) : m("", !0),
+			_(a, {
+				modelValue: R.value,
+				"onUpdate:modelValue": r[4] ||= (e) => R.value = e,
+				id: i.id,
+				name: i.name,
+				accept: i.accept,
+				"max-file-size": i.maxFileSize,
+				class: "d-none"
+			}, null, 8, [
+				"modelValue",
+				"id",
+				"name",
+				"accept",
+				"max-file-size"
+			]),
+			i.src ? m("", !0) : (S(), h("label", {
+				key: 1,
+				for: i.id,
+				class: "image-upload__label"
+			}, [w(n.$slots, "button", {}, () => [g("span", {
+				class: "btn btn-outline-contrast",
+				innerHTML: D(ee)(i.label || n.$t("common.selectFile"))
+			}, null, 8, N)]), _(f, { name: "fade" }, {
+				default: k(() => [D(G) ? (S(), h("span", P, [...r[7] ||= [g("span", {
+					class: "spinner-border",
+					role: "status"
+				}, [g("span", { class: "visually-hidden" }, "Loading...")], -1)]])) : m("", !0)]),
+				_: 1
+			})], 8, M)),
+			_(u, {
+				modelValue: B.value,
+				"onUpdate:modelValue": r[6] ||= (e) => B.value = e,
+				footer: !1
+			}, {
+				default: k(() => [B.value && H.value ? (S(), te(l, {
+					key: 0,
+					modelValue: H.value.src,
+					"onUpdate:modelValue": r[5] ||= (e) => H.value.src = e,
+					"aspect-ratio": i.aspectRatio
+				}, {
+					submit: k(() => [g("button", {
+						class: "btn btn-primary",
+						onClick: A(ae, ["prevent", "stop"])
+					}, T(n.$t("common.save")), 1)]),
+					_: 1
+				}, 8, ["modelValue", "aspect-ratio"])) : m("", !0)]),
+				_: 1
+			}, 8, ["modelValue"])
+		], 2));
+	}
+});
+//#endregion
+export { F as default };

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

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

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

@@ -0,0 +1,195 @@
+import e from "../../atoms/base-image/base-image.js";
+import t from "../../templates/popover-dialog/popover-dialog.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, onMounted as d, openBlock as f, ref as p, renderSlot as m, watch as h, withCtx as g, withModifiers as _ } from "vue";
+//#region src/components/molecules/image-zoom/image-zoom.vue?vue&type=script&setup=true&lang.ts
+var v = ["popovertarget"], y = ["src", "alt"], b = /*@__PURE__*/ s({
+	__name: "image-zoom",
+	props: {
+		src: {
+			type: String,
+			required: !0
+		},
+		alt: {
+			type: String,
+			default: ""
+		},
+		spinner: {
+			type: Boolean,
+			default: !1
+		},
+		zoom: {
+			type: Number,
+			default: 2
+		},
+		focusWidth: {
+			type: Number,
+			default: 0
+		},
+		focusHeight: {
+			type: Number,
+			default: 0
+		},
+		hoverDelay: {
+			type: Number,
+			default: 150
+		},
+		closeTimeout: {
+			type: Number,
+			default: 0
+		},
+		popoverId: {
+			type: String,
+			default: () => `image-zoom-${Math.random().toString(36).substring(2, 9)}`
+		}
+	},
+	setup(s) {
+		let b = s, x = p(null), S = p(null), C = p(null), w = p(!1), T = p(!1), E = p(!1), D = p(!1), O = p(null), k = p(0), A = p(0), j = p(0), M = p(0), N = n(() => Number.isFinite(b.focusWidth) && b.focusWidth > 0 && Number.isFinite(b.focusHeight) && b.focusHeight > 0 && j.value > 0 && M.value > 0 && b.focusWidth <= j.value && b.focusHeight <= M.value), P = n(() => j.value > 0 && M.value > 0 && !N.value), F = n(() => E.value && !T.value && j.value > 0 && M.value > 0), I = n(() => P.value ? {
+			width: `${j.value}px`,
+			height: `${M.value}px`,
+			left: "0px",
+			top: "0px"
+		} : {
+			width: `${b.focusWidth}px`,
+			height: `${b.focusHeight}px`,
+			left: `${k.value}px`,
+			top: `${A.value}px`
+		}), L = n(() => {
+			let e = j.value * b.zoom, t = M.value * b.zoom;
+			return {
+				width: `${e}px`,
+				height: `${t}px`,
+				transform: N.value && !T.value ? `translate(${-k.value * b.zoom}px, ${-A.value * b.zoom}px)` : "none",
+				transformOrigin: "top left"
+			};
+		});
+		function R() {
+			if (!S.value) return;
+			let e = S.value.getBoundingClientRect();
+			j.value = e.width, M.value = e.height;
+		}
+		function z() {
+			O.value &&= (clearTimeout(O.value), null);
+		}
+		function B() {
+			z(), w.value = !0;
+		}
+		function V() {
+			z(), O.value = setTimeout(() => {
+				!E.value && !D.value && !T.value && (w.value = !1), O.value = null;
+			}, b.hoverDelay || 100);
+		}
+		function H(e, t) {
+			if (!S.value) return;
+			if (P.value) {
+				k.value = 0, A.value = 0;
+				return;
+			}
+			let n = S.value.getBoundingClientRect(), r = e - n.left, i = t - n.top, a = Math.min(Math.max(r - b.focusWidth / 2, 0), Math.max(n.width - b.focusWidth, 0)), o = Math.min(Math.max(i - b.focusHeight / 2, 0), Math.max(n.height - b.focusHeight, 0));
+			k.value = a, A.value = o;
+		}
+		function U() {
+			if (!C.value || !T.value || P.value) return;
+			let e = C.value.getBoundingClientRect(), t = Math.max(0, k.value * b.zoom - e.width / 2 + b.focusWidth * b.zoom / 2), n = Math.max(0, A.value * b.zoom - e.height / 2 + b.focusHeight * b.zoom / 2);
+			C.value.scrollTo({
+				left: t,
+				top: n
+			});
+		}
+		function W(e) {
+			R(), H(e.clientX, e.clientY);
+		}
+		function G(e) {
+			E.value = !0, R(), H(e.clientX, e.clientY), T.value || B();
+		}
+		function K() {
+			E.value = !1, T.value || V();
+		}
+		function q(e) {
+			T.value && (w.value = !0, R(), H(e.clientX, e.clientY));
+		}
+		function J() {
+			T.value && c(U);
+		}
+		function Y() {
+			D.value = !0, B();
+		}
+		function X() {
+			D.value = !1, V();
+		}
+		function Z(e) {
+			T.value && (w.value = !w.value, e instanceof MouseEvent && H(e.clientX, e.clientY));
+		}
+		return d(() => {
+			T.value = "ontouchstart" in window || navigator.maxTouchPoints > 0, R();
+		}), h(w, async (e) => {
+			e && T.value && (await c(), U());
+		}), (n, c) => (f(), i("span", {
+			class: "image-zoom",
+			popovertarget: s.popoverId,
+			ref_key: "wrapper",
+			ref: x
+		}, [a("div", {
+			class: "image-zoom__target",
+			ref_key: "target",
+			ref: S,
+			onPointermove: W,
+			onPointerenter: G,
+			onPointerleave: K,
+			onPointerdown: q,
+			onPointerup: J,
+			onPointercancel: K,
+			onClick: _(Z, ["prevent"])
+		}, [m(n.$slots, "image", {
+			src: s.src,
+			alt: s.alt,
+			spinner: s.spinner,
+			animate: !1
+		}, () => [o(e, {
+			class: "image-zoom__image",
+			src: s.src,
+			alt: s.alt,
+			spinner: s.spinner,
+			animate: !1
+		}, null, 8, [
+			"src",
+			"alt",
+			"spinner"
+		])]), F.value ? (f(), i("span", {
+			key: 0,
+			class: "image-zoom__focus",
+			style: u(I.value)
+		}, null, 4)) : r("", !0)], 544), o(t, {
+			id: s.popoverId,
+			modelValue: w.value,
+			"onUpdate:modelValue": c[0] ||= (e) => w.value = e,
+			hover: !1,
+			"hover-delay": s.hoverDelay,
+			"close-timeout": s.closeTimeout,
+			class: l(["image-zoom__popover", { "image-zoom__popover--full": P.value }]),
+			role: "tooltip",
+			onMouseenter: Y,
+			onMouseleave: X
+		}, {
+			default: g(() => [a("div", { class: l(["image-zoom__preview-wrapper", { "image-zoom__preview-wrapper--full": P.value }]) }, [a("div", {
+				class: l(["image-zoom__preview", { "image-zoom__preview--full": P.value }]),
+				ref_key: "preview",
+				ref: C
+			}, [a("img", {
+				class: l(["image-zoom__preview-image", { "image-zoom__preview-image--full": P.value }]),
+				src: s.src,
+				alt: s.alt,
+				style: u(L.value),
+				draggable: "false"
+			}, null, 14, y)], 2)], 2)]),
+			_: 1
+		}, 8, [
+			"id",
+			"modelValue",
+			"hover-delay",
+			"close-timeout",
+			"class"
+		])], 8, v));
+	}
+});
+//#endregion
+export { b as default };

package/dist/components/molecules/input-color/input-color.js

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