ablok-components 0.3.104 → 0.3.106

package/dist/components/molecules/base-map/base-map.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,390 @@
+/* empty css                                                                          */
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, markRaw as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onMounted as f, openBlock as p, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as _, shallowRef as v, toDisplayString as y, watch as b, withCtx as x } from "vue";
+//#region src/components/molecules/base-map/base-map.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "base-map" }, C = {
+	key: 0,
+	class: "base-map__label"
+}, ee = {
+	key: 0,
+	class: "base-map__hint"
+}, w = /*@__PURE__*/ s({
+	__name: "base-map",
+	props: {
+		label: {
+			type: String,
+			default: ""
+		},
+		modelValue: {
+			type: Object,
+			default: null
+		},
+		center: {
+			type: Object,
+			default: () => ({
+				lat: 48.8566,
+				lng: 2.3522
+			})
+		},
+		zoom: {
+			type: Number,
+			default: 13
+		},
+		markers: {
+			type: Array,
+			default: () => []
+		},
+		routeCoordinates: {
+			type: Array,
+			default: () => []
+		},
+		routeColor: {
+			type: String,
+			default: "#2563eb"
+		},
+		routeWeight: {
+			type: Number,
+			default: 5
+		},
+		selectionRadius: {
+			type: Number,
+			default: 0
+		},
+		selectionRadiusCenter: {
+			type: Object,
+			default: null
+		},
+		selectionRadiusColor: {
+			type: String,
+			default: "#2563eb"
+		},
+		selectionRadiusFillColor: {
+			type: String,
+			default: "#60a5fa"
+		},
+		selectionRadiusFillOpacity: {
+			type: Number,
+			default: .14
+		},
+		selectionRadiusOpacity: {
+			type: Number,
+			default: .65
+		},
+		selectionRadiusStrokeWeight: {
+			type: Number,
+			default: 2
+		},
+		userLocation: {
+			type: Object,
+			default: null
+		},
+		userLocationLabel: {
+			type: String,
+			default: "Your location"
+		},
+		selectedLocationLabel: {
+			type: String,
+			default: "Selected location"
+		},
+		height: {
+			type: String,
+			default: "20rem"
+		},
+		interactive: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		showSelectedMarker: {
+			type: Boolean,
+			default: !0
+		},
+		helperText: {
+			type: String,
+			default: ""
+		},
+		mapStyle: {
+			type: String,
+			default: "streets"
+		},
+		tileLayerUrl: {
+			type: String,
+			default: ""
+		},
+		tileLayerAttribution: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:center",
+		"update:zoom",
+		"map-click",
+		"marker-click"
+	],
+	setup(s, { emit: w }) {
+		function T(e, t) {
+			return t({
+				className: "base-map__marker-wrapper",
+				html: `<span class="base-map__marker-pin base-map__marker-pin--${e}"><span class="base-map__marker-core"></span></span>`,
+				iconSize: [24, 24],
+				iconAnchor: [12, 24],
+				popupAnchor: [0, -20]
+			});
+		}
+		let E = {
+			lat: 48.8566,
+			lng: 2.3522
+		}, D = {
+			streets: {
+				url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+				attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
+			},
+			light: {
+				url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
+				attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>"
+			},
+			dark: {
+				url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+				attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>"
+			},
+			minimal: {
+				url: "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
+				attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>"
+			},
+			popover: {
+				url: "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png",
+				attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors &copy; <a href=\"https://carto.com/attributions\">CARTO</a>"
+			}
+		}, O = s, k = w, A = v(null), j = m(null), M = m(null), N = m(O.zoom), P = m(W(O.modelValue));
+		f(async () => {
+			if (typeof window > "u") return;
+			let [e, t] = await Promise.all([import("@vue-leaflet/vue-leaflet"), import("leaflet")]), n = e.default ?? e, r = t.default ?? t;
+			A.value = c({
+				LCircle: c(n.LCircle),
+				LMap: c(n.LMap),
+				LMarker: c(n.LMarker),
+				LPopup: c(n.LPopup),
+				LPolyline: c(n.LPolyline),
+				LTileLayer: c(n.LTileLayer)
+			}), j.value = {
+				list: T("list", r.divIcon),
+				selected: T("selected", r.divIcon),
+				search: T("search", r.divIcon),
+				user: T("user", r.divIcon)
+			};
+		}), b(() => O.zoom, (e) => {
+			N.value = e;
+		}), b(() => O.modelValue, (e) => {
+			P.value = W(e);
+		}), b(() => O.center, (e) => {
+			let t = W(e);
+			t && J(t);
+		}, { deep: !0 }), b(() => [
+			O.height,
+			O.markers.length,
+			O.routeCoordinates.length,
+			O.center?.lat,
+			O.center?.lng,
+			O.modelValue?.lat,
+			O.modelValue?.lng,
+			O.userLocation?.lat,
+			O.userLocation?.lng
+		], () => {
+			q();
+		}, { flush: "post" });
+		let F = t(() => W(O.userLocation)), I = t(() => W(O.selectionRadiusCenter) || P.value), L = t(() => {
+			let e = (O.markers || []).map((e) => {
+				let t = W(e);
+				return t ? {
+					...e,
+					...t,
+					type: e.type || (P.value && K(e, P.value) ? "selected" : "list")
+				} : null;
+			}).filter((e) => !!e);
+			return O.showSelectedMarker && P.value && !e.some((e) => K(e, P.value)) && e.push({
+				id: "selected-location",
+				label: O.selectedLocationLabel,
+				type: "search",
+				...P.value
+			}), e;
+		}), R = t(() => (O.routeCoordinates || []).map((e) => G(e)).filter((e) => !!e)), z = t(() => {
+			let e = W(O.center) || P.value || W(O.markers[0]) || E;
+			return [e.lat, e.lng];
+		}), B = t(() => {
+			if (O.tileLayerUrl.trim()) return O.tileLayerUrl;
+			let e = O.mapStyle === "custom" ? "streets" : O.mapStyle;
+			return D[e].url;
+		}), V = t(() => {
+			if (O.tileLayerAttribution.trim()) return O.tileLayerAttribution;
+			let e = O.mapStyle === "custom" ? "streets" : O.mapStyle;
+			return D[e].attribution;
+		});
+		function H(e = "list") {
+			if (j.value) return j.value[e] || j.value.list;
+		}
+		function U(e = "list") {
+			switch (e) {
+				case "user": return 450;
+				case "selected": return 350;
+				case "search": return 250;
+				default: return 150;
+			}
+		}
+		function W(e) {
+			if (!e) return null;
+			let t = Number(e.lat), n = Number(e.lng);
+			return Number.isNaN(t) || Number.isNaN(n) ? null : {
+				lat: t,
+				lng: n
+			};
+		}
+		function G(e) {
+			if (Array.isArray(e)) {
+				let t = Number(e[0]), n = Number(e[1]);
+				return Number.isFinite(t) && Number.isFinite(n) ? [t, n] : null;
+			}
+			let t = W(e);
+			return t ? [t.lat, t.lng] : null;
+		}
+		function K(e, t) {
+			let n = W(e), r = W(t);
+			return !n || !r ? !1 : Math.abs(n.lat - r.lat) < 1e-6 && Math.abs(n.lng - r.lng) < 1e-6;
+		}
+		async function q() {
+			await l(), M.value?.invalidateSize();
+		}
+		function J(e) {
+			M.value?.panTo([e.lat, e.lng]);
+		}
+		function Y(e) {
+			M.value = e, J(W(O.center) || P.value || E), q();
+		}
+		function X(e) {
+			N.value = e, k("update:zoom", e);
+		}
+		function Z(e) {
+			let t = W(e);
+			t && (J(t), k("update:center", t));
+		}
+		function Q(e) {
+			if (!O.interactive || O.disabled) return;
+			let t = {
+				lat: Number(e.latlng.lat.toFixed(6)),
+				lng: Number(e.latlng.lng.toFixed(6))
+			};
+			P.value = t, J(t), k("update:modelValue", t), k("update:center", t), k("map-click", t);
+		}
+		function $(e) {
+			P.value = {
+				lat: Number(e.lat),
+				lng: Number(e.lng)
+			}, J(P.value), k("update:modelValue", P.value), k("update:center", P.value), k("marker-click", e);
+		}
+		return (t, c) => (p(), i("div", S, [
+			g(t.$slots, "label", {}, () => [s.label ? (p(), i("label", C, y(s.label), 1)) : r("", !0)]),
+			a("div", {
+				class: u(["base-map__frame", {
+					"base-map__frame--interactive": s.interactive && !s.disabled,
+					"base-map__frame--disabled": s.disabled
+				}]),
+				style: d({ height: s.height }),
+				"data-testid": "base-map"
+			}, [A.value ? (p(), n(_(A.value?.LMap), {
+				key: 0,
+				class: "base-map__canvas",
+				"use-global-leaflet": !1,
+				zoom: N.value,
+				center: z.value,
+				onReady: Y,
+				onClick: Q,
+				"onUpdate:zoom": X,
+				"onUpdate:center": Z
+			}, {
+				default: x(() => [
+					(p(), n(_(A.value.LTileLayer), {
+						url: B.value,
+						attribution: V.value,
+						"layer-type": "base",
+						name: "OpenStreetMap"
+					}, null, 8, ["url", "attribution"])),
+					R.value.length > 1 ? (p(), n(_(A.value.LPolyline), {
+						key: 0,
+						"lat-lngs": R.value,
+						color: s.routeColor,
+						weight: s.routeWeight
+					}, null, 8, [
+						"lat-lngs",
+						"color",
+						"weight"
+					])) : r("", !0),
+					I.value && s.selectionRadius > 0 ? (p(), n(_(A.value.LCircle), {
+						key: 1,
+						"lat-lng": [I.value.lat, I.value.lng],
+						radius: s.selectionRadius,
+						color: s.selectionRadiusColor,
+						"fill-color": s.selectionRadiusFillColor,
+						"fill-opacity": s.selectionRadiusFillOpacity,
+						opacity: s.selectionRadiusOpacity,
+						weight: s.selectionRadiusStrokeWeight
+					}, null, 8, [
+						"lat-lng",
+						"radius",
+						"color",
+						"fill-color",
+						"fill-opacity",
+						"opacity",
+						"weight"
+					])) : r("", !0),
+					(p(!0), i(e, null, h(L.value, (e, t) => (p(), n(_(A.value.LMarker), {
+						key: e.id ?? `${e.lat}-${e.lng}-${t}`,
+						"lat-lng": [e.lat, e.lng],
+						icon: H(e.type),
+						"z-index-offset": U(e.type),
+						onClick: (t) => $(e)
+					}, {
+						default: x(() => [e.label ? (p(), n(_(A.value.LPopup), { key: 0 }, {
+							default: x(() => [o(y(e.label), 1)]),
+							_: 2
+						}, 1024)) : r("", !0)]),
+						_: 2
+					}, 1032, [
+						"lat-lng",
+						"icon",
+						"z-index-offset",
+						"onClick"
+					]))), 128)),
+					F.value ? (p(), n(_(A.value.LMarker), {
+						key: `user-${F.value.lat}-${F.value.lng}`,
+						"lat-lng": [F.value.lat, F.value.lng],
+						icon: H("user"),
+						"z-index-offset": U("user"),
+						onClick: c[0] ||= (e) => $({
+							id: "user-location",
+							label: s.userLocationLabel,
+							type: "user",
+							...F.value
+						})
+					}, {
+						default: x(() => [(p(), n(_(A.value.LPopup), null, {
+							default: x(() => [o(y(s.userLocationLabel), 1)]),
+							_: 1
+						}))]),
+						_: 1
+					}, 8, [
+						"lat-lng",
+						"icon",
+						"z-index-offset"
+					])) : r("", !0)
+				]),
+				_: 1
+			}, 40, ["zoom", "center"])) : r("", !0)], 6),
+			s.interactive && s.helperText ? (p(), i("p", ee, y(s.helperText), 1)) : r("", !0)
+		]));
+	}
+});
+//#endregion
+export { w as default };

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

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

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

@@ -0,0 +1,188 @@
+import { sanitizeHtml as e } from "../../../composables/useSanitize.js";
+import t from "../file-upload/file-upload.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, resolveComponent as m, toDisplayString as h, unref as g, vModelText as _, withCtx as v, withDirectives as y, withModifiers as b } from "vue";
+//#region src/components/molecules/bulk-upload/bulk-upload.vue?vue&type=script&setup=true&lang.ts
+var ee = { class: "container" }, te = { class: "row" }, x = {
+	key: 0,
+	class: "col-12"
+}, S = { class: "py-4 px-3 d-flex align-items-center border border-bottom-0" }, C = ["innerHTML"], w = { class: "col-12" }, T = {
+	key: 0,
+	class: "grid place-items-center text-center text-muted py-5 border border-bottom-0"
+}, E = { class: "m-0" }, D = { class: "preview-item border-bottom p-3" }, O = { class: "d-flex gap-3" }, k = { class: "col-2" }, A = { class: "col d-flex flex-column" }, j = { class: "file-meta text-muted small mb-2" }, M = { class: "fw-semibold" }, N = { key: 0 }, P = { key: 1 }, F = ["onUpdate:modelValue", "id"], I = ["innerHTML"], L = {
+	key: 2,
+	class: "upload-progress mt-3 mb-0"
+}, R = ["value"], z = { class: "col-auto d-flex flex-column gap-2" }, B = ["onClick"], ne = ["onClick"], V = { class: "file-upload__label" }, H = { class: "d-flex align-items-end p-3" }, U = ["for"], W = ["innerHTML"], G = /*@__PURE__*/ c({
+	__name: "bulk-upload",
+	props: {
+		storeId: String,
+		id: {
+			type: String,
+			default: () => `bulk-upload-${Math.random().toString(36).substring(2, 9)}`
+		},
+		modelValue: {
+			type: Array,
+			default: []
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: {
+			type: Number,
+			default: () => 120
+		},
+		messages: { type: null },
+		hasHeader: {
+			type: Boolean,
+			default: !0
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		hasBulkRemove: {
+			type: Boolean,
+			default: !0
+		},
+		hasCaptions: {
+			type: Boolean,
+			default: !0
+		},
+		editCaptions: {
+			type: Boolean,
+			default: !0
+		},
+		allowDuplicateFiles: {
+			type: Boolean,
+			default: !1
+		},
+		maxFiles: {
+			type: Number,
+			default: 0
+		},
+		showProgress: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(c, { emit: G }) {
+		let K = c, q = G, J = (e) => `${e.name ?? ""}|${e.size ?? 0}|${e.lastModified ?? 0}|${e.type ?? ""}`, Y = r({
+			get: () => {
+				let e = K.modelValue || [];
+				return Q.value = e.map((e) => e.caption || ""), e.map((e) => ({
+					type: e.type,
+					src: e.src,
+					...e.name ? { name: e.name } : {},
+					...e.size ? { size: e.size } : {},
+					...e.lastModified ? { lastModified: e.lastModified } : {},
+					...e.uploadProgress ? { uploadProgress: e.uploadProgress } : {}
+				}));
+			},
+			set: (e) => {
+				let t = Y.value || [], n = Array.isArray(e) ? e : [], r = K.allowDuplicateFiles ? n : n.filter((e) => {
+					let n = J(e);
+					return !t.some((e) => J(e) === n);
+				}), i = K.maxFiles > 0 ? Math.max(0, K.maxFiles - t.length) : void 0, a = typeof i == "number" ? r.slice(0, i) : r;
+				!K.allowDuplicateFiles && n.length > 0 && a.length === 0 || (a.length <= t.length && a.every((e) => t.some((t) => t.src === e.src)) ? $(a) : $([...t, ...a]));
+			}
+		}), X = f(null), Z = f({}), Q = f({}), re = r(() => K.disabled || K.maxFiles > 0 && Y.value.length >= K.maxFiles);
+		function ie(e) {
+			let t = [...K.modelValue || []];
+			t.splice(e, 1), q("update:modelValue", t);
+		}
+		async function ae(e) {
+			Z.value[e] = !Z.value[e], Z.value[e] || $(), await l(), (X.value?.querySelector(`#caption-${e}`))?.focus();
+		}
+		function oe(e) {
+			if (e == null) return "";
+			let t = [
+				"B",
+				"KB",
+				"MB",
+				"GB",
+				"TB"
+			], n = e, r = t.shift();
+			for (; n >= 1024 && t.length;) n /= 1024, r = t.shift();
+			return `${n.toFixed(1)} ${r}`;
+		}
+		function se(e) {
+			return e ? new Date(e).toLocaleDateString() : "";
+		}
+		function $(e) {
+			q("update:modelValue", (e || Y.value).map((e, t) => ({
+				...e,
+				caption: Q.value[t] || ""
+			})));
+		}
+		return (r, l) => {
+			let f = m("svg-icon"), G = m("base-image");
+			return d(), a("div", {
+				class: "bulk-upload",
+				ref_key: "root",
+				ref: X
+			}, [o("div", ee, [o("div", te, [c.hasHeader ? (d(), a("div", x, [o("div", S, [o("p", {
+				class: "fw-bold m-0",
+				innerHTML: g(e)(c.title || r.$t("fileInput.bulkUploadHeadline"))
+			}, null, 8, C), p(r.$slots, "bulk-remove", {}, () => [c.hasBulkRemove ? (d(), a("button", {
+				key: 0,
+				onClick: l[0] ||= b((e) => Y.value = [], ["prevent"]),
+				class: "btn btn--close ms-auto p-0"
+			}, [s(f, { symbol: "x" })])) : i("", !0)])])])) : i("", !0), o("div", w, [Y.value.length ? i("", !0) : (d(), a("div", T, [o("p", E, h(r.$t("fileInput.noFilesSelected")), 1)])), s(t, {
+				id: `${c.id}-file-upload`,
+				modelValue: Y.value,
+				"onUpdate:modelValue": l[2] ||= (e) => Y.value = e,
+				multiple: !0,
+				accept: "image/*",
+				"drop-files": !0,
+				"to-data-url": !0,
+				"local-url-format": "objectUrl",
+				class: "d-flex flex-column border"
+			}, {
+				"preview-item": v(({ bind: { item: e, index: t } }) => [o("div", D, [o("div", O, [
+					o("div", k, [s(G, {
+						src: e.src,
+						alt: "",
+						class: "img-thumbnail"
+					}, null, 8, ["src"])]),
+					o("div", A, [o("div", j, [o("div", M, h(e.name || r.$t("fileInput.unknownFile")), 1), o("div", null, [e.size ? (d(), a("span", N, h(oe(e.size)), 1)) : i("", !0), e.lastModified ? (d(), a("span", P, " · " + h(se(e.lastModified)), 1)) : i("", !0)])]), c.hasCaptions ? (d(), a(n, { key: 0 }, [Z.value[t] && c.editCaptions ? y((d(), a("textarea", {
+						key: 0,
+						"onUpdate:modelValue": (e) => Q.value[t] = e,
+						id: `caption-${t}`,
+						class: "form-control rounded-0 h-100",
+						onChangeCapture: l[1] ||= (e) => $()
+					}, null, 40, F)), [[_, Q.value[t]]]) : (d(), a("p", {
+						key: 1,
+						class: "m-0",
+						innerHTML: Q.value[t] || `<small>${r.$t("fileInput.noCaption")}</small>`
+					}, null, 8, I)), c.showProgress && e.uploadProgress ? (d(), a("div", L, [p(r.$slots, "upload-progress", { bind: {
+						item: e,
+						index: t
+					} }, () => [o("progress", {
+						value: e.uploadProgress,
+						max: "100",
+						class: "w-100"
+					}, null, 8, R)])])) : i("", !0)], 64)) : i("", !0)]),
+					o("div", z, [o("button", {
+						onClick: b((e) => ie(t), ["prevent"]),
+						class: "btn btn--close"
+					}, [s(f, { symbol: "x" })], 8, B), c.editCaptions ? (d(), a("button", {
+						key: 0,
+						onClick: b((e) => ae(t), ["prevent"]),
+						class: "btn btn--close"
+					}, [s(f, { symbol: Z.value[t] ? "check" : "edit-3" }, null, 8, ["symbol"])], 8, ne)) : i("", !0)])
+				])])]),
+				label: v(() => [p(r.$slots, "button", {}, () => [o("span", V, [o("span", H, [o("label", {
+					for: `${c.id}-file-upload`,
+					class: u(["btn btn-primary btn-sm ms-auto d-flex align-items-center gap-2", { disabled: re.value }])
+				}, [s(f, {
+					symbol: "upload",
+					size: "small"
+				}), o("span", { innerHTML: r.$t("common.selectFile") }, null, 8, W)], 10, U)])])])]),
+				_: 3
+			}, 8, ["id", "modelValue"])])])])], 512);
+		};
+	}
+});
+//#endregion
+export { G as default };

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

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

package/dist/components/molecules/color-palette/color-palette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import { uniqueId as e } from "../../../utilities/helpers.js";
+import t from "../../atoms/radio-group/radio-group.js";
+import { computed as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, withCtx as l } from "vue";
+//#region src/components/molecules/color-palette/color-palette.vue?vue&type=script&setup=true&lang.ts
+var u = { class: "color-palette" }, d = ["for"], f = /*@__PURE__*/ o({
+	__name: "color-palette",
+	props: {
+		modelValue: {
+			type: [String],
+			default: ""
+		},
+		colors: {
+			type: Array,
+			default: ["#000000", "#FFFFFF"]
+		},
+		name: {
+			type: String,
+			default: () => e()
+		},
+		id: {
+			type: String,
+			default: () => e()
+		},
+		label: { type: String },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: o }) {
+		let f = e, p = o, m = n({
+			get() {
+				return f.modelValue;
+			},
+			set(e) {
+				p("update:modelValue", e);
+			}
+		});
+		return (n, o) => (c(), r("div", u, [a(t, {
+			modelValue: m.value,
+			"onUpdate:modelValue": o[0] ||= (e) => m.value = e,
+			options: e.colors,
+			name: e.name,
+			id: e.id,
+			label: e.label,
+			disabled: e.disabled,
+			required: e.required,
+			class: "d-flex flex-wrap flex-row gap-2"
+		}, {
+			"option-label": l((t) => [i("label", {
+				for: `${e.id}-${t.index}`,
+				class: "d-block rounded-circle",
+				style: s({ backgroundColor: t.option })
+			}, null, 12, d)]),
+			_: 1
+		}, 8, [
+			"modelValue",
+			"options",
+			"name",
+			"id",
+			"label",
+			"disabled",
+			"required"
+		])]));
+	}
+});
+//#endregion
+export { f as default };

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

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