ablok-components 0.3.147 → 0.3.148

package/dist/components/molecules/image-upload/image-upload.vue.d.ts

@@ -94,6 +94,10 @@ declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').Defi
         type: NumberConstructor;
         default: number;
     };
+    convertSvg: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     aspectRatio: NumberConstructor;
     localUrlFormat: {
         type: PropType<LocalUrlFormat>;
@@ -191,6 +195,10 @@ declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').Defi
         type: NumberConstructor;
         default: number;
     };
+    convertSvg: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     aspectRatio: NumberConstructor;
     localUrlFormat: {
         type: PropType<LocalUrlFormat>;
@@ -222,6 +230,7 @@ declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').Defi
     localUrlFormat: LocalUrlFormat;
     enableReview: boolean;
     maxImageWidth: number;
+    convertSvg: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

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

package/dist/utilities/helpers.d.ts

@@ -6,6 +6,18 @@ export declare function srcToFile(src: string, fileName: string, mimeType: strin
 export declare function loadImageFromDataUrl(dataUrl: string): Promise<HTMLImageElement>;
 export declare function resizeImageElementToDataUrl(img: HTMLImageElement, width: number, height: number, mimeType?: string, quality?: number): string;
 export declare function resizeImageFileByMaxWidth(file: File, maxWidth: number, quality?: number): Promise<File>;
+/**
+ * Converts an SVG file to a PNG file by rasterizing it on a canvas.
+ * Non-SVG files are returned unchanged.
+ *
+ * SVGs without intrinsic dimensions (naturalWidth === 0) are rasterized at
+ * `fallbackWidth` (square), so callers can control the output size.
+ * @param file - The file to convert
+ * @param fallbackWidth - Width used when the SVG has no intrinsic size
+ * @param quality - Optional PNG quality passed to canvas.toDataURL
+ * @returns A PNG File, or the original file if it is not an SVG
+ */
+export declare function convertSvgFileToPng(file: File, fallbackWidth?: number, quality?: number): Promise<File>;
 /**
  * Basic client-side input cleanup for user-entered text.
  *

package/dist/utilities/helpers.js

@@ -52,8 +52,13 @@ async function o(e, n, o) {
 	let d = Math.round(n), f = u / l;
 	return await r(a(c, d, Math.round(d * f), e.type || "image/png", o), e.name, e.type || "image/png");
 }
-function s(e) {
+async function s(e, n = 1024, o) {
+	if ((e.type || "").toLowerCase() !== "image/svg+xml") return e;
+	let s = await i(await t(e));
+	return await r(a(s, s.naturalWidth || Math.round(n), s.naturalHeight || Math.round(n), "image/png", o), `${e.name.replace(/\.svg$/i, "")}.png`, "image/png");
+}
+function c(e) {
 	return !e || typeof e != "string" ? "" : e.replace(/\0/g, "").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").replace(/on\w+\s*=\s*["'][^"']*["']/gi, "").replace(/on\w+\s*=\s*[^\s>]*/gi, "").replace(/javascript:/gi, "").replace(/data:text\/html/gi, "");
 }
 //#endregion
-export { t as fileToDataUrl, n as getExtensionFromMimeType, i as loadImageFromDataUrl, a as resizeImageElementToDataUrl, o as resizeImageFileByMaxWidth, s as sanitizeInput, r as srcToFile, e as uniqueId };
+export { s as convertSvgFileToPng, t as fileToDataUrl, n as getExtensionFromMimeType, i as loadImageFromDataUrl, a as resizeImageElementToDataUrl, o as resizeImageFileByMaxWidth, c as sanitizeInput, r as srcToFile, e as uniqueId };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.147",
+  "version": "0.3.148",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",