ablok-components 0.3.139 → 0.3.140

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

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

package/dist/components/molecules/input-gradient/input-gradient.vue.d.ts

@@ -0,0 +1,142 @@
+interface GradientStop {
+    color: string;
+    pct: number;
+}
+interface GradientValue {
+    type: string;
+    angle: number;
+    stops: GradientStop[];
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').DefineComponent<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+    modelValue: {
+        type: () => GradientValue;
+        default: () => {
+            type: string;
+            angle: number;
+            stops: {
+                color: string;
+                pct: number;
+            }[];
+        };
+    };
+    lockFirstStop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxStops: {
+        type: NumberConstructor;
+        default: number;
+    };
+    name: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+    modelValue: {
+        type: () => GradientValue;
+        default: () => {
+            type: string;
+            angle: number;
+            stops: {
+                color: string;
+                pct: number;
+            }[];
+        };
+    };
+    lockFirstStop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxStops: {
+        type: NumberConstructor;
+        default: number;
+    };
+    name: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    outlined: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    label: string;
+    color: string;
+    required: boolean;
+    variant: string;
+    id: string;
+    modelValue: GradientValue;
+    name: string;
+    disabled: boolean;
+    outlined: boolean;
+    lockFirstStop: boolean;
+    maxStops: number;
+}, {}, {}, {}, 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,222 @@
+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";
+//#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: "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",
+	"name",
+	"id",
+	"aria-label",
+	"disabled"
+], D = { class: "dropdown-item input-gradient__footer" }, O = [
+	"name",
+	"id",
+	"disabled"
+], k = "plus", A = /*@__PURE__*/ l({
+	__name: "input-gradient",
+	props: {
+		modelValue: {
+			type: Object,
+			default: () => ({
+				type: "linear",
+				angle: 180,
+				stops: [{
+					color: "#ff0000ff",
+					pct: 0
+				}, {
+					color: "#ff000080",
+					pct: 100
+				}]
+			})
+		},
+		lockFirstStop: {
+			type: Boolean,
+			default: !1
+		},
+		maxStops: {
+			type: Number,
+			default: 10
+		},
+		name: {
+			type: String,
+			default: () => `gradient-${e()}`
+		},
+		id: {
+			type: String,
+			default: () => e()
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		variant: {
+			type: String,
+			default: ""
+		},
+		color: {
+			type: String,
+			default: ""
+		},
+		outlined: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: l }) {
+		let A = e, j = l, M = i(() => A.modelValue?.stops ?? []), N = i({
+			get() {
+				return A.modelValue?.angle ?? 180;
+			},
+			set(e) {
+				I({ angle: z(Number(e) || 0, 0, 360) });
+			}
+		}), P = i(() => {
+			let e = M.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"})`;
+		});
+		function F(e) {
+			return A.lockFirstStop && e === 0;
+		}
+		function I(e = {}) {
+			j("update:modelValue", {
+				...A.modelValue,
+				...e,
+				stops: (e.stops ?? M.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;
+			e.push({
+				color: "#000000ff",
+				pct: n
+			}), I({ stops: e });
+		}
+		function R(e) {
+			F(e) || M.value.length < 2 || I({ stops: M.value.filter((t, n) => n !== e).map((e) => ({ ...e })) });
+		}
+		function z(e, t, n) {
+			return Math.min(n, Math.max(t, e));
+		}
+		return (i, l) => {
+			let A = h("svg-icon");
+			return f(), o("div", {
+				class: "input-gradient",
+				id: e.id || e.name
+			}, [m(i.$slots, "label", {}, () => [e.label ? (f(), o("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, {
+				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 rounded-0 p-0 border-0 position-relative", { [`btn-${e.variant}`]: e.variant }]),
+				color: e.color,
+				disabled: e.disabled,
+				"aria-label": e.label || "Gradient"
+			}, {
+				default: _(() => [s("span", {
+					class: "input-gradient__preview",
+					style: d({ background: P.value }),
+					title: P.value
+				}, null, 12, S), s("span", C, [c(A, { symbol: "chevron-down" })])]),
+				_: 1
+			}, 8, [
+				"id",
+				"class",
+				"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,
+					name: `${e.name}-stop-${i}-color`,
+					id: `${e.name}-stop-${i}-color`,
+					disabled: e.disabled || F(i),
+					class: "input-gradient__stop-color"
+				}, null, 8, [
+					"modelValue",
+					"onUpdate:modelValue",
+					"name",
+					"id",
+					"disabled"
+				]),
+				v(s("input", {
+					"onUpdate:modelValue": (e) => r.pct = e,
+					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, {
+					type: "button",
+					icon: "x",
+					color: "light",
+					disabled: e.disabled || F(i) || M.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)
+				}, 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);
+		};
+	}
+});
+//#endregion
+export { A as default };

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as CustomHtml } from './components/atoms/custom-html/custom-htm
 export { default as SelectMedia } from './components/molecules/select-media/select-media.vue';
 export { default as RteEditor } from './components/molecules/rte-editor/rte-editor.vue';
 export { default as InputColor } from './components/molecules/input-color/input-color.vue';
+export { default as InputGradient } from './components/molecules/input-gradient/input-gradient.vue';
 export { default as ColorPalette } from './components/molecules/color-palette/color-palette.vue';
 export { default as InputDropdown } from './components/molecules/input-dropdown/input-dropdown.vue';
 export { default as AutoSuggest } from './components/molecules/auto-suggest/auto-suggest.vue';

package/dist/index.js

@@ -21,40 +21,41 @@ 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/color-palette/color-palette.js";
-import w from "./components/molecules/input-dropdown/input-dropdown.js";
-import T from "./components/molecules/auto-suggest/auto-suggest.js";
-import E from "./components/molecules/base-camera/base-camera.js";
-import D from "./components/molecules/base-map/base-map.js";
-import O from "./components/molecules/location-list/location-list.js";
-import k from "./components/molecules/file-upload/file-upload.js";
-import A from "./components/molecules/bulk-upload/bulk-upload.js";
-import j from "./components/templates/sortable-list/sortable-list.js";
-import M from "./components/molecules/image-resize/image-resize.js";
-import N from "./components/molecules/image-crop/image-crop.js";
-import P from "./components/molecules/image-crop-resize/image-crop-resize.js";
-import F from "./components/templates/modal-dialog/modal-dialog.js";
-import I from "./components/molecules/image-upload/image-upload.js";
-import L from "./components/molecules/upload-group/upload-group.js";
-import R from "./components/organisms/asset-uploader/asset-uploader.js";
-import z from "./components/templates/popover-dialog/popover-dialog.js";
-import B from "./components/organisms/preset-uploader/preset-uploader.js";
-import { useDirections as V } from "./composables/useDirections.js";
-import { useGeocoding as H } from "./composables/useGeocoding.js";
-import { useGeolocation as U } from "./composables/useGeolocation.js";
-import W from "./components/organisms/location-finder/location-finder.js";
-import G from "./components/templates/base-carousel/base-carousel.js";
-import K from "./components/molecules/media-thumbnails/media-thumbnails.js";
-import q from "./components/molecules/progress-steps/progress-steps.js";
-import J from "./components/molecules/hint-system/hint-system.js";
-import Y from "./components/molecules/popover-tooltip/popover-tooltip.js";
-import X from "./components/molecules/popover-notifications/popover-notifications.js";
-import Z from "./components/molecules/dom-renderer/dom-renderer.js";
-import Q from "./components/molecules/qr-code/qr-code.js";
-import $ from "./components/molecules/link-sharing/link-sharing.js";
-import ee from "./components/templates/base-form/base-form.js";
-import te from "./components/templates/touch-wrapper/touch-wrapper.js";
-import ne from "./components/atoms/canvas-confetti/canvas-confetti.js";
-import re from "./components/molecules/image-zoom/image-zoom.js";
-import { useCameraFilter as ie } from "./composables/useCameraFilter.js";
-export { o as Accordion, a as AccordionItem, R as AssetUploader, T as AutoSuggest, s as BaseButton, E as BaseCamera, G as BaseCarousel, ee as BaseForm, r as BaseHeadline, n as BaseImage, c as BaseInput, D as BaseMap, i as BaseParagraph, A as BulkUpload, ne as CanvasConfetti, h as CheckGroup, C as ColorPalette, y as CustomHtml, Z as DomRenderer, k as FileUpload, J as HintSystem, N as ImageCrop, P as ImageCropResize, M as ImageResize, I as ImageUpload, re as ImageZoom, u as InputCheckbox, S as InputColor, f as InputDatepicker, d as InputDatetime, w as InputDropdown, v as InputFile, m as InputPasscode, p as InputPassword, l as InputTextarea, $ as LinkSharing, t as LoadingSpinner, W as LocationFinder, O as LocationList, K as MediaThumbnails, F as ModalDialog, z as PopoverDialog, X as PopoverNotifications, Y as PopoverTooltip, B as PresetUploader, q as ProgressSteps, Q as QrCode, _ as RadioButtons, g as RadioGroup, x as RteEditor, b as SelectMedia, j as SortableList, e as SvgIcon, te as TouchWrapper, L as UploadGroup, ie as useCameraFilter, V as useDirections, H as useGeocoding, U as useGeolocation };
+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 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";
+import k from "./components/molecules/location-list/location-list.js";
+import A from "./components/molecules/file-upload/file-upload.js";
+import j from "./components/molecules/bulk-upload/bulk-upload.js";
+import M from "./components/templates/sortable-list/sortable-list.js";
+import N from "./components/molecules/image-resize/image-resize.js";
+import P from "./components/molecules/image-crop/image-crop.js";
+import F from "./components/molecules/image-crop-resize/image-crop-resize.js";
+import I from "./components/templates/modal-dialog/modal-dialog.js";
+import L from "./components/molecules/image-upload/image-upload.js";
+import R from "./components/molecules/upload-group/upload-group.js";
+import z from "./components/organisms/asset-uploader/asset-uploader.js";
+import B from "./components/templates/popover-dialog/popover-dialog.js";
+import V from "./components/organisms/preset-uploader/preset-uploader.js";
+import { useDirections as H } from "./composables/useDirections.js";
+import { useGeocoding as U } from "./composables/useGeocoding.js";
+import { useGeolocation as W } from "./composables/useGeolocation.js";
+import G from "./components/organisms/location-finder/location-finder.js";
+import K from "./components/templates/base-carousel/base-carousel.js";
+import q from "./components/molecules/media-thumbnails/media-thumbnails.js";
+import J from "./components/molecules/progress-steps/progress-steps.js";
+import Y from "./components/molecules/hint-system/hint-system.js";
+import X from "./components/molecules/popover-tooltip/popover-tooltip.js";
+import Z from "./components/molecules/popover-notifications/popover-notifications.js";
+import Q from "./components/molecules/dom-renderer/dom-renderer.js";
+import $ from "./components/molecules/qr-code/qr-code.js";
+import ee from "./components/molecules/link-sharing/link-sharing.js";
+import te from "./components/templates/base-form/base-form.js";
+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 };

package/package.json

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