@elcrm/form 0.0.79 → 0.0.81

package/dist/fields/Color.js

@@ -75,8 +75,8 @@ function h(e, t) {
 	return !t || e.a >= .999 ? a : `${a}${d(e.a * 255)}`;
 }
 function g(e) {
-	let { r: t, g: n, b: r } = f(e.h, e.s, e.v);
-	return e.a >= .999 ? `rgb(${t},${n},${r})` : `rgba(${t},${n},${r},${e.a})`;
+	let { r: t, g: n, b: r } = f(e.h, e.s, e.v), i = Math.round(t), a = Math.round(n), o = Math.round(r);
+	return e.a >= .999 ? `rgb(${i}, ${a}, ${o})` : `rgba(${i}, ${a}, ${o}, ${Number(e.a.toFixed(3))})`;
 }
 function _(e) {
 	let { r: t, g: n, b: r } = f(e, 1, 1);
@@ -89,130 +89,172 @@ function v(e) {
 function y(e) {
 	return e == null ? !0 : typeof e == "string" ? e.trim() === "" : !1;
 }
-function b() {
+function b(e) {
+	if (!(e instanceof HTMLElement)) return !1;
+	let t = e.tagName;
+	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" ? !0 : !!e.isContentEditable;
+}
+function x(e) {
+	let t = (e || "").trim();
+	if (!t) return null;
+	let n = m(t) ?? m(t[0] === "#" ? t : `#${t.replace(/^#/, "")}`);
+	if (n) return n;
+	let r = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(t);
+	if (r) {
+		let e = u(Number(r[1]), 0, 255), t = u(Number(r[2]), 0, 255), n = u(Number(r[3]), 0, 255), i = r[4] === void 0 ? 1 : u(Number(r[4]), 0, 1);
+		return {
+			...p(e, t, n),
+			a: i
+		};
+	}
+	return null;
+}
+function S() {
 	return typeof window < "u" && "EyeDropper" in window;
 }
-var x = {
+var C = {
 	h: 0,
 	s: 1,
 	v: .76,
 	a: 1
 };
-function S({ value: u = "", form: d, onValue: f, onBlur: p, name: _ = "", placeholder: v = "#000000", label: b = "", error: S = "", hidden: w = !1, disabled: T = !1, className: E = "", after: D = "", before: O = "", colors: k, alpha: A = !0 }) {
-	let { value: j } = n(d, _, u), M = typeof j == "string" ? j : j == null ? "" : String(j), [N, P] = i.useState(!1), [F, I] = i.useState(null), [L, R] = i.useState(() => m(M) ?? { ...x }), [z, B] = i.useState(() => h(m(M) ?? x, A)), V = k?.length ? k : l, H = m(M), U = H ? h(H, A) : "", W = H ? g(H) : "transparent";
+function w({ value: u = "", form: d, onValue: f, onBlur: p, name: g = "", placeholder: _ = "#000000", label: v = "", error: S = "", hidden: w = !1, disabled: E = !1, className: D = "", after: O = "", before: k = "", colors: A, alpha: j = !0 }) {
+	let { value: M } = n(d, g, u), N = typeof M == "string" ? M : M == null ? "" : String(M), [P, F] = i.useState(!1), [I, L] = i.useState(null), [R, z] = i.useState(() => m(N) ?? { ...C }), [B, V] = i.useState(() => h(m(N) ?? C, j)), H = A?.length ? A : l, U = m(N), W = U ?? (y(N) ? m(_) : null), G = U ? h(U, j) : "", K = W ? h(W, j) : "transparent";
 	i.useEffect(() => {
-		if (!N) return;
-		let e = m(M);
-		e && (R(e), B(h(e, A)));
-	}, [
-		M,
-		N,
-		A
-	]);
-	let G = i.useCallback((e, t) => {
-		let n = h(e, A), r = {
+		let e = m(N);
+		e && (z(e), V(h(e, j)));
+	}, [N, j]);
+	let q = i.useCallback((e, t) => {
+		let n = h(e, j), r = {
 			value: n,
-			name: _ || ""
+			name: g || ""
 		};
-		d && _ && (t === "live" ? d.onValue(r) : d.setValue(r)), f && f !== d?.onValue && f(r), B(n);
+		d && g && (t === "live" ? d.onValue(r) : d.setValue(r)), f && f !== d?.onValue && f(r), V(n);
 	}, [
-		A,
+		j,
 		d,
-		_,
+		g,
 		f
-	]), K = (e) => {
-		if (T) return;
-		let t = m(M) ?? { ...L };
-		R(t), B(h(t, A)), I(e.getBoundingClientRect()), P(!0);
-	}, q = () => {
-		P(!1), p?.({
-			value: h(L, A),
-			name: _ || ""
+	]), J = (e) => {
+		if (E) return;
+		let t = m(N) ?? { ...R };
+		z(t), V(h(t, j)), L(e.getBoundingClientRect()), F(!0);
+	}, Y = () => {
+		F(!1), p?.({
+			value: h(R, j),
+			name: g || ""
 		});
-	}, J = (e) => {
-		if (!T) {
-			if (!N && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
-				e.preventDefault(), K(e.currentTarget);
+	};
+	i.useEffect(() => {
+		if (!P || E) return;
+		let e = "", t = (t) => {
+			let n = x(t);
+			if (!n) return !1;
+			let r = {
+				...n,
+				a: j ? n.a : 1
+			}, i = h(r, j);
+			return i === e ? !0 : (e = i, z(r), q(r, "commit"), !0);
+		}, n = (e) => {
+			b(e.target) || t(e.clipboardData?.getData("text/plain") ?? "") && (e.preventDefault(), e.stopPropagation());
+		}, r = (e) => {
+			(e.ctrlKey || e.metaKey) && (e.key !== "v" && e.key !== "V" || b(e.target) || navigator.clipboard?.readText && (e.preventDefault(), navigator.clipboard.readText().then((e) => {
+				t(e);
+			})));
+		};
+		return document.addEventListener("paste", n, !0), window.addEventListener("keydown", r, !0), () => {
+			document.removeEventListener("paste", n, !0), window.removeEventListener("keydown", r, !0);
+		};
+	}, [
+		P,
+		E,
+		j,
+		q
+	]);
+	let X = (e) => {
+		if (!E) {
+			if (!P && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
+				e.preventDefault(), J(e.currentTarget);
 				return;
 			}
-			N && e.key === "Escape" && (e.preventDefault(), q());
+			P && e.key === "Escape" && (e.preventDefault(), Y());
 		}
 	};
-	return w && y(M) ? null : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(t, {
+	return w && y(N) ? null : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(t, {
 		type: "color",
-		label: b,
+		label: v,
 		error: S,
-		element_blok: { className: [E || ""] },
+		element_blok: { className: [D || ""] },
 		element_input: {
 			className: [e.w],
-			props: { "data-disabled": T ? "true" : void 0 }
+			props: { "data-disabled": E ? "true" : void 0 }
 		},
 		children: [
-			O ? /* @__PURE__ */ o("span", {
+			k ? /* @__PURE__ */ o("span", {
 				className: e.affix,
-				children: O
+				children: k
 			}) : null,
 			/* @__PURE__ */ s("div", {
 				className: r.trigger,
 				role: "combobox",
-				tabIndex: T ? -1 : 0,
-				"aria-expanded": N,
+				tabIndex: E ? -1 : 0,
+				"aria-expanded": P,
 				"aria-haspopup": "dialog",
-				"aria-disabled": T,
-				"aria-label": b || "Цвет",
-				onClick: (e) => K(e.currentTarget),
-				onKeyDown: J,
+				"aria-disabled": E,
+				"aria-label": v || "Цвет",
+				onClick: (e) => J(e.currentTarget),
+				onKeyDown: X,
 				children: [/* @__PURE__ */ o("span", {
 					className: r.preview,
-					style: { "--preview-color": W }
+					style: { "--preview-color": K }
 				}), /* @__PURE__ */ o("span", {
-					className: [r.hexText, U ? "" : r.placeholder].filter(Boolean).join(" "),
-					children: U || v
+					className: [r.hexText, G ? "" : r.placeholder].filter(Boolean).join(" "),
+					children: G || _
 				})]
 			}),
-			D ? /* @__PURE__ */ o("span", {
+			O ? /* @__PURE__ */ o("span", {
 				className: e.affix,
-				children: D
+				children: O
 			}) : null
 		]
-	}), N && c(/* @__PURE__ */ o(C, {
-		parent: F || void 0,
-		hsva: L,
-		setHsva: R,
-		hexDraft: z,
-		setHexDraft: B,
-		alpha: A,
-		palette: V,
-		onLive: (e) => G(e, "live"),
-		onCommit: (e) => G(e, "commit"),
-		onClose: q
+	}), P && c(/* @__PURE__ */ o(T, {
+		parent: I || void 0,
+		hsva: R,
+		setHsva: z,
+		hexDraft: B,
+		setHexDraft: V,
+		alpha: j,
+		palette: H,
+		onLive: (e) => q(e, "live"),
+		onCommit: (e) => q(e, "commit"),
+		onClose: Y
 	}), document.body)] });
 }
-S.displayName = "ColorField";
-function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha: l, palette: d, onLive: f, onCommit: p, onClose: _ }) {
+w.displayName = "ColorField";
+function T({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha: l, palette: d, onLive: f, onCommit: p, onClose: _ }) {
 	if (!e) return null;
-	let y = l ? 340 : 300, x = window.innerHeight - e.bottom < y + 8 ? Math.max(8, e.top - y - 8) : Math.min(window.innerHeight - y - 8, e.bottom + 8), S = Math.min(Math.max(8, e.left), window.innerWidth - 260 - 8), C = g({
+	let y = l ? 340 : 300, b = window.innerHeight - e.bottom < y + 8 ? Math.max(8, e.top - y - 8) : Math.min(window.innerHeight - y - 8, e.bottom + 8), x = Math.min(Math.max(8, e.left), window.innerWidth - 260 - 8), C = g({
 		...t,
 		a: 1
-	}), D = v(h(t, l)), k = (e, t) => {
+	}), w = v(h(t, l)), T = (e, t) => {
 		n(e), t === "live" ? f(e) : p(e);
-	}, A = () => {
+	}, k = () => {
 		let e = m(i);
 		if (!e) {
 			c(h(t, l));
 			return;
 		}
-		k(e, "commit");
+		T(e, "commit");
 	}, j = (e) => {
 		let n = e.replace(/[^\d]/g, ""), r = u(Number(n || 0), 0, 100);
-		k({
+		T({
 			...t,
 			a: r / 100
 		}, "commit");
 	}, M = async () => {
-		if (b()) try {
+		if (S()) try {
 			let e = window.EyeDropper, n = m((await new e().open()).sRGBHex);
-			n && k({
+			n && T({
 				...n,
 				a: t.a
 			}, "commit");
@@ -227,14 +269,14 @@ function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 		role: "dialog",
 		"aria-label": "Выбор цвета",
 		style: {
-			top: x,
-			left: S,
+			top: b,
+			left: x,
 			width: 260
 		},
 		children: [
-			/* @__PURE__ */ o(w, {
+			/* @__PURE__ */ o(E, {
 				hsva: t,
-				onChange: (e, n, r) => k({
+				onChange: (e, n, r) => T({
 					...t,
 					s: e,
 					v: n
@@ -242,24 +284,24 @@ function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 			}),
 			/* @__PURE__ */ s("div", {
 				className: r.slidersRow,
-				children: [b() ? /* @__PURE__ */ o("button", {
+				children: [S() ? /* @__PURE__ */ o("button", {
 					type: "button",
 					className: r.eyedropper,
 					"aria-label": "Пипетка",
 					onClick: M,
-					children: /* @__PURE__ */ o(O, {})
+					children: /* @__PURE__ */ o(A, {})
 				}) : null, /* @__PURE__ */ s("div", {
 					className: r.sliders,
-					children: [/* @__PURE__ */ o(T, {
+					children: [/* @__PURE__ */ o(D, {
 						h: t.h,
-						onChange: (e, n) => k({
+						onChange: (e, n) => T({
 							...t,
 							h: e
 						}, n)
-					}), l ? /* @__PURE__ */ o(E, {
+					}), l ? /* @__PURE__ */ o(O, {
 						a: t.a,
 						color: C,
-						onChange: (e, n) => k({
+						onChange: (e, n) => T({
 							...t,
 							a: e
 						}, n)
@@ -282,7 +324,7 @@ function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 							let t = e.target.value.replace(/[^0-9a-fA-F]/g, "");
 							c(t ? `#${t}` : "");
 						},
-						onBlur: A,
+						onBlur: k,
 						onKeyDown: (e) => {
 							e.key === "Enter" && (e.preventDefault(), e.target.blur());
 						}
@@ -301,7 +343,7 @@ function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 				role: "listbox",
 				"aria-label": "Палитра",
 				children: d.map((e) => {
-					let t = v(e) === D;
+					let t = v(e) === w;
 					return /* @__PURE__ */ o("button", {
 						type: "button",
 						role: "option",
@@ -311,7 +353,7 @@ function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 						style: { "--swatch": e },
 						onClick: () => {
 							let t = m(e);
-							t && k({
+							t && T({
 								...t,
 								a: l ? t.a : 1
 							}, "commit");
@@ -322,7 +364,7 @@ function C({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 		]
 	})] });
 }
-function w({ hsva: e, onChange: t }) {
+function E({ hsva: e, onChange: t }) {
 	let n = i.useRef(null), a = i.useRef(!1), c = i.useRef(t);
 	c.current = t;
 	let l = (t, r) => {
@@ -377,16 +419,16 @@ function w({ hsva: e, onChange: t }) {
 		]
 	});
 }
-function T({ h: e, onChange: t }) {
-	return /* @__PURE__ */ o(D, {
+function D({ h: e, onChange: t }) {
+	return /* @__PURE__ */ o(k, {
 		className: `${r.slider} ${r.sliderHue}`,
 		ratio: e / 360,
 		onRatio: (e, n) => t(e * 360, n),
 		handleColor: _(e)
 	});
 }
-function E({ a: e, color: t, onChange: n }) {
-	return /* @__PURE__ */ o(D, {
+function O({ a: e, color: t, onChange: n }) {
+	return /* @__PURE__ */ o(k, {
 		className: `${r.slider} ${r.sliderAlpha}`,
 		style: { "--alpha-color": t },
 		ratio: e,
@@ -394,7 +436,7 @@ function E({ a: e, color: t, onChange: n }) {
 		handleColor: t
 	});
 }
-function D({ className: e, style: t, ratio: n, onRatio: a, handleColor: s }) {
+function k({ className: e, style: t, ratio: n, onRatio: a, handleColor: s }) {
 	let c = i.useRef(null), l = i.useRef(!1), d = (e, t) => {
 		let n = c.current;
 		if (!n) return;
@@ -426,7 +468,7 @@ function D({ className: e, style: t, ratio: n, onRatio: a, handleColor: s }) {
 		})
 	});
 }
-function O() {
+function A() {
 	return /* @__PURE__ */ s("svg", {
 		width: "16",
 		height: "16",
@@ -446,4 +488,4 @@ function O() {
 	});
 }
 //#endregion
-export { l as DEFAULT_COLOR_PALETTE, S as default };
+export { l as DEFAULT_COLOR_PALETTE, w as default };