ablok-components 0.3.143 → 0.3.145

package/dist/components/molecules/input-gradient/input-gradient.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,21 @@
 import { uniqueId as e } from "../../../utilities/helpers.js";
 import t from "../../atoms/base-button/base-button.js";
 import n from "../input-color/input-color.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p, renderSlot as m, resolveComponent as h, vModelText as g, withCtx as _, withDirectives as v } from "vue";
+import r from "../input-dropdown/input-dropdown.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveComponent as g, vModelText as _, withCtx as v, withDirectives as y } from "vue";
 //#region src/components/molecules/input-gradient/input-gradient.vue?vue&type=script&setup=true&lang.ts
-var y = ["id"], b = ["for", "innerHTML"], x = { class: "dropdown" }, S = ["title"], C = { class: "input-gradient__toggle-icon position-absolute end-0 height-100 d-flex justify-content-center align-items-center bg-white bg-opacity-50 input-gradient__toggle-icon" }, w = { class: "dropdown-menu input-gradient__menu" }, T = { class: "dropdown-item input-gradient__stop d-flex align-items-center" }, E = [
-	"onUpdate:modelValue",
+var b = ["id"], x = ["for", "innerHTML"], S = { class: "dropdown" }, C = ["title"], w = { class: "input-gradient__toggle-icon position-absolute end-0 height-100 d-flex justify-content-center align-items-center bg-white bg-opacity-50 input-gradient__toggle-icon" }, T = { class: "dropdown-menu input-gradient__menu" }, E = { class: "input-gradient__stop d-flex align-items-center px-3 py-2" }, D = { class: "col-7" }, O = { class: "col" }, k = [
+	"value",
 	"name",
 	"id",
 	"aria-label",
-	"disabled"
-], D = { class: "dropdown-item input-gradient__footer" }, O = [
+	"disabled",
+	"onInput"
+], A = { class: "col-auto" }, j = { class: "input-gradient__footer px-3 py-2" }, M = { class: "col-7" }, N = { class: "col" }, P = [
 	"name",
 	"id",
 	"disabled"
-], k = "plus", A = /*@__PURE__*/ l({
+], F = { class: "col-auto" }, I = "plus", L = /*@__PURE__*/ u({
 	__name: "input-gradient",
 	props: {
 		modelValue: {
@@ -72,70 +74,89 @@ var y = ["id"], b = ["for", "innerHTML"], x = { class: "dropdown" }, S = ["title
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: l }) {
-		let A = e, j = l, M = i(() => A.modelValue?.stops ?? []), N = i({
+	setup(e, { emit: u }) {
+		let L = e, R = u, z = [{
+			text: "Linear",
+			value: "linear"
+		}, {
+			text: "Radial",
+			value: "radial"
+		}], B = a({
+			get() {
+				return L.modelValue?.type ?? "linear";
+			},
+			set(e) {
+				K({ type: e });
+			}
+		}), V = a(() => L.modelValue?.stops ?? []), H = a({
 			get() {
-				return A.modelValue?.angle ?? 180;
+				return L.modelValue?.angle ?? 180;
 			},
 			set(e) {
-				I({ angle: z(Number(e) || 0, 0, 360) });
+				K({ angle: Y(Number(e) || 0, 0, 360) });
 			}
-		}), P = i(() => {
-			let e = M.value;
+		}), U = a(() => {
+			let e = V.value;
 			if (!e.length) return "transparent";
-			let t = e.length > 1 ? N.value : 180, n = e.slice().sort((e, t) => e.pct - t.pct).map((e) => `${e.color} ${z(e.pct, 0, 100)}%`);
-			return `linear-gradient(${t}deg, ${e.length > 1 ? n.join(", ") : n.join(", ") || "transparent, transparent"})`;
+			let t = e.length > 1 ? H.value : 180, n = e.slice().sort((e, t) => e.pct - t.pct).map((e) => `${e.color} ${Y(e.pct, 0, 100)}%`);
+			return `${B.value === "radial" ? "radial-gradient" : B.value === "conic" ? "conic-gradient" : "linear-gradient"}(${B.value === "radial" ? "circle at center" : B.value === "conic" ? `from ${t}deg` : `${t}deg`}, ${e.length > 1 ? n.join(", ") : n.join(", ") || "transparent, transparent"})`;
 		});
-		function F(e) {
-			return A.lockFirstStop && e === 0;
+		function W(e) {
+			return L.lockFirstStop && e === 0;
+		}
+		function G(e, t) {
+			W(e) || K({ stops: V.value.map((n, r) => r === e ? {
+				...n,
+				...t
+			} : { ...n }) });
 		}
-		function I(e = {}) {
-			j("update:modelValue", {
-				...A.modelValue,
+		function K(e = {}) {
+			R("update:modelValue", {
+				...L.modelValue,
 				...e,
-				stops: (e.stops ?? M.value).map((e) => ({ ...e }))
+				stops: (e.stops ?? V.value).map((e) => ({ ...e }))
 			});
 		}
-		function L() {
-			if (M.value.length >= A.maxStops) return;
-			let e = M.value.map((e) => ({ ...e })), t = e[e.length - 1], n = t ? z(t.pct + 10, 0, 100) : 100;
+		function q() {
+			if (V.value.length >= L.maxStops) return;
+			let e = V.value.map((e) => ({ ...e })), t = e[e.length - 1], n = t ? Y(t.pct + 10, 0, 100) : 100;
 			e.push({
 				color: "#000000ff",
 				pct: n
-			}), I({ stops: e });
+			}), K({ stops: e });
 		}
-		function R(e) {
-			F(e) || M.value.length < 2 || I({ stops: M.value.filter((t, n) => n !== e).map((e) => ({ ...e })) });
+		function J(e) {
+			W(e) || V.value.length < 2 || K({ stops: V.value.filter((t, n) => n !== e).map((e) => ({ ...e })) });
 		}
-		function z(e, t, n) {
+		function Y(e, t, n) {
 			return Math.min(n, Math.max(t, e));
 		}
-		return (i, l) => {
-			let A = h("svg-icon");
-			return f(), o("div", {
+		return (a, u) => {
+			let L = g("svg-icon");
+			return p(), s("div", {
 				class: "input-gradient",
 				id: e.id || e.name
-			}, [m(i.$slots, "label", {}, () => [e.label ? (f(), o("label", {
+			}, [h(a.$slots, "label", {}, () => [e.label ? (p(), s("label", {
 				key: 0,
 				for: `${e.id || e.name}--dropdown-toggle`,
 				class: "input__label",
 				innerHTML: `${e.label}${e.required ? " *" : ""}`
-			}, null, 8, b)) : a("", !0)]), s("div", x, [c(t, {
+			}, null, 8, x)) : o("", !0)]), c("div", S, [l(t, {
 				id: `${e.id || e.name}--dropdown-toggle`,
 				"data-bs-toggle": "dropdown",
 				"data-bs-auto-close": "outside",
 				role: "button",
 				type: "button",
-				class: u(["btn input-gradient__toggle", { [`btn-${e.variant}`]: e.variant }]),
+				class: d(["btn input-gradient__toggle", { [`btn-${e.variant}`]: e.variant }]),
 				color: e.color,
 				disabled: e.disabled,
 				"aria-label": e.label || "Gradient"
 			}, {
-				default: _(() => [s("span", {
+				default: v(() => [c("span", {
 					class: "input-gradient__preview",
-					style: d({ background: P.value }),
-					title: P.value
-				}, null, 12, S), s("span", C, [c(A, { symbol: "chevron-down" })])]),
+					style: f({ background: U.value }),
+					title: U.value
+				}, null, 12, C), c("span", w, [l(L, { symbol: "chevron-down" })])]),
 				_: 1
 			}, 8, [
 				"id",
@@ -143,80 +164,94 @@ var y = ["id"], b = ["for", "innerHTML"], x = { class: "dropdown" }, S = ["title
 				"color",
 				"disabled",
 				"aria-label"
-			]), s("ul", w, [(f(!0), o(r, null, p(M.value, (r, i) => (f(), o("li", { key: `${e.name}-stop-${i}` }, [s("div", T, [
-				c(n, {
-					modelValue: r.color,
-					"onUpdate:modelValue": (e) => r.color = e,
+			]), c("ul", T, [(p(!0), s(i, null, m(V.value, (r, i) => (p(), s("li", { key: `${e.name}-stop-${i}` }, [c("div", E, [
+				c("div", D, [l(n, {
+					"model-value": r.color,
 					name: `${e.name}-stop-${i}-color`,
 					id: `${e.name}-stop-${i}-color`,
-					disabled: e.disabled || F(i),
-					class: "input-gradient__stop-color"
+					disabled: e.disabled || W(i),
+					class: "input-gradient__stop-color",
+					"onUpdate:modelValue": (e) => G(i, { color: e })
 				}, null, 8, [
-					"modelValue",
-					"onUpdate:modelValue",
+					"model-value",
 					"name",
 					"id",
-					"disabled"
-				]),
-				v(s("input", {
-					"onUpdate:modelValue": (e) => r.pct = e,
+					"disabled",
+					"onUpdate:modelValue"
+				])]),
+				c("div", O, [c("input", {
+					value: r.pct,
 					type: "number",
 					min: "0",
 					max: "100",
 					name: `${e.name}-stop-${i}-pct`,
 					id: `${e.name}-stop-${i}-pct`,
 					"aria-label": `Stop ${i + 1} position`,
-					disabled: e.disabled || F(i),
-					class: "form-control input-gradient__stop-pct"
-				}, null, 8, E), [[
-					g,
-					r.pct,
-					void 0,
-					{ number: !0 }
-				]]),
-				c(t, {
+					disabled: e.disabled || W(i),
+					class: "form-control input-gradient__stop-pct",
+					onInput: (e) => G(i, { pct: Y(Number(e.target.value) || 0, 0, 100) })
+				}, null, 40, k)]),
+				c("div", A, [l(t, {
 					type: "button",
 					icon: "x",
 					color: "light",
-					disabled: e.disabled || F(i) || M.value.length < 2,
+					disabled: e.disabled || W(i) || V.value.length < 2,
 					"aria-label": `Remove stop ${i + 1}`,
 					title: `Remove stop ${i + 1}`,
 					class: "input-gradient__stop-remove btn btn-sm rounded-circle",
-					onClick: (e) => R(i)
+					onClick: (e) => J(i)
 				}, null, 8, [
 					"disabled",
 					"aria-label",
 					"title",
 					"onClick"
-				])
-			])]))), 128)), s("li", null, [s("div", D, [v(s("input", {
-				"onUpdate:modelValue": l[0] ||= (e) => N.value = e,
-				type: "number",
-				min: "0",
-				max: "360",
-				name: `${e.name}-angle`,
-				id: `${e.name}-angle`,
-				"aria-label": "Gradient angle",
-				disabled: e.disabled || M.value.length < 2,
-				class: "form-control input-gradient__angle"
-			}, null, 8, O), [[
-				g,
-				N.value,
-				void 0,
-				{ number: !0 }
-			]]), c(t, {
-				type: "button",
-				size: "small",
-				color: "light",
-				icon: k,
-				disabled: e.disabled || M.value.length >= e.maxStops,
-				"aria-label": "Add color stop",
-				title: "Add color stop",
-				class: "input-gradient__add btn btn-sm rounded-circle",
-				onClick: L
-			}, null, 8, ["disabled"])])])])])], 8, y);
+				])])
+			])]))), 128)), c("li", null, [c("div", j, [
+				c("div", M, [l(r, {
+					modelValue: B.value,
+					"onUpdate:modelValue": u[0] ||= (e) => B.value = e,
+					options: z,
+					name: `${e.name}-type`,
+					id: `${e.name}-type`,
+					"aria-label": "Gradient type",
+					disabled: e.disabled || V.value.length < 2,
+					class: "input-gradient__type"
+				}, null, 8, [
+					"modelValue",
+					"name",
+					"id",
+					"disabled"
+				])]),
+				c("div", N, [y(c("input", {
+					"onUpdate:modelValue": u[1] ||= (e) => H.value = e,
+					type: "number",
+					min: "0",
+					max: "360",
+					name: `${e.name}-angle`,
+					id: `${e.name}-angle`,
+					"aria-label": "Gradient angle",
+					disabled: e.disabled || V.value.length < 2 || B.value !== "linear",
+					class: "form-control input-gradient__angle"
+				}, null, 8, P), [[
+					_,
+					H.value,
+					void 0,
+					{ number: !0 }
+				]])]),
+				c("div", F, [l(t, {
+					type: "button",
+					size: "small",
+					color: "light",
+					icon: I,
+					disabled: e.disabled || V.value.length >= e.maxStops,
+					"aria-label": "Add color stop",
+					title: "Add color stop",
+					class: "input-gradient__add btn btn-sm rounded-circle",
+					onClick: q
+				}, null, 8, ["disabled"])])
+			])])])])], 8, b);
 		};
 	}
 });
 //#endregion
-export { A as default };
+export { L as default };

package/dist/components/organisms/asset-uploader/asset-uploader.vue.d.ts

@@ -247,6 +247,7 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
     name: string;
     disabled: boolean;
     maxFileSize: number;
+    typeOptions: string[];
     endpoint: string;
     authToken: string;
     baseResponsePath: string;
@@ -255,5 +256,4 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
     useImageUpload: boolean;
     mediaTypeMap: Record<string, any>;
     showTypeDropdown: boolean;
-    typeOptions: string[];
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>;

package/dist/components/organisms/preset-uploader/preset-uploader.vue.d.ts

@@ -244,6 +244,7 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
     name: string;
     disabled: boolean;
     maxFileSize: number;
+    typeOptions: string[];
     endpoint: string;
     authToken: string;
     baseResponsePath: string;
@@ -252,7 +253,6 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
     useImageUpload: boolean;
     mediaTypeMap: Record<string, any>;
     showTypeDropdown: boolean;
-    typeOptions: string[];
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/index.js

@@ -21,9 +21,9 @@ import y from "./components/atoms/custom-html/custom-html.js";
 import b from "./components/molecules/select-media/select-media.js";
 import x from "./components/molecules/rte-editor/rte-editor.js";
 import S from "./components/molecules/input-color/input-color.js";
-import C from "./components/molecules/input-gradient/input-gradient.js";
-import w from "./components/molecules/color-palette/color-palette.js";
-import T from "./components/molecules/input-dropdown/input-dropdown.js";
+import C from "./components/molecules/input-dropdown/input-dropdown.js";
+import w from "./components/molecules/input-gradient/input-gradient.js";
+import T from "./components/molecules/color-palette/color-palette.js";
 import E from "./components/molecules/auto-suggest/auto-suggest.js";
 import D from "./components/molecules/base-camera/base-camera.js";
 import O from "./components/molecules/base-map/base-map.js";
@@ -58,4 +58,4 @@ import ne from "./components/templates/touch-wrapper/touch-wrapper.js";
 import re from "./components/atoms/canvas-confetti/canvas-confetti.js";
 import ie from "./components/molecules/image-zoom/image-zoom.js";
 import { useCameraFilter as ae } from "./composables/useCameraFilter.js";
-export { o as Accordion, a as AccordionItem, z as AssetUploader, E as AutoSuggest, s as BaseButton, D as BaseCamera, K as BaseCarousel, te as BaseForm, r as BaseHeadline, n as BaseImage, c as BaseInput, O as BaseMap, i as BaseParagraph, j as BulkUpload, re as CanvasConfetti, h as CheckGroup, w as ColorPalette, y as CustomHtml, Q as DomRenderer, A as FileUpload, Y as HintSystem, P as ImageCrop, F as ImageCropResize, N as ImageResize, L as ImageUpload, ie as ImageZoom, u as InputCheckbox, S as InputColor, f as InputDatepicker, d as InputDatetime, T as InputDropdown, v as InputFile, C as InputGradient, m as InputPasscode, p as InputPassword, l as InputTextarea, ee as LinkSharing, t as LoadingSpinner, G as LocationFinder, k as LocationList, q as MediaThumbnails, I as ModalDialog, B as PopoverDialog, Z as PopoverNotifications, X as PopoverTooltip, V as PresetUploader, J as ProgressSteps, $ as QrCode, _ as RadioButtons, g as RadioGroup, x as RteEditor, b as SelectMedia, M as SortableList, e as SvgIcon, ne as TouchWrapper, R as UploadGroup, ae as useCameraFilter, H as useDirections, U as useGeocoding, W as useGeolocation };
+export { o as Accordion, a as AccordionItem, z as AssetUploader, E as AutoSuggest, s as BaseButton, D as BaseCamera, K as BaseCarousel, te as BaseForm, r as BaseHeadline, n as BaseImage, c as BaseInput, O as BaseMap, i as BaseParagraph, j as BulkUpload, re as CanvasConfetti, h as CheckGroup, T as ColorPalette, y as CustomHtml, Q as DomRenderer, A as FileUpload, Y as HintSystem, P as ImageCrop, F as ImageCropResize, N as ImageResize, L as ImageUpload, ie as ImageZoom, u as InputCheckbox, S as InputColor, f as InputDatepicker, d as InputDatetime, C as InputDropdown, v as InputFile, w as InputGradient, m as InputPasscode, p as InputPassword, l as InputTextarea, ee as LinkSharing, t as LoadingSpinner, G as LocationFinder, k as LocationList, q as MediaThumbnails, I as ModalDialog, B as PopoverDialog, Z as PopoverNotifications, X as PopoverTooltip, V as PresetUploader, J as ProgressSteps, $ as QrCode, _ as RadioButtons, g as RadioGroup, x as RteEditor, b as SelectMedia, M as SortableList, e as SvgIcon, ne as TouchWrapper, R as UploadGroup, ae as useCameraFilter, H as useDirections, U as useGeocoding, W as useGeolocation };

package/package.json

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