@web-utils/form-ui 1.0.0-beta85 → 1.0.0-beta87

package/chunks/DK7E0MrC2.mjs

@@ -0,0 +1,990 @@
+import "./B2vpUK0j.mjs";
+import { a as e, n as t } from "./_NG8ze6x.mjs";
+import { r as n, t as r } from "./BtGJbKCB.mjs";
+import { r as i } from "./C7L-0D2c.mjs";
+import { t as a, x as o, y as s } from "./r6tERHEL.mjs";
+import { N as c, T as l, l as u, s as d, t as f, u as p } from "./cvUTkWmm.mjs";
+import { t as m } from "./R_GWm9EB.mjs";
+import { L as h, n as g, p as _, t as v } from "./DiQUqii-.mjs";
+import { n as y } from "./DUQs5bPg.mjs";
+import { r as b, t as ee } from "./BaM7vJ3h.mjs";
+import { i as te, n as ne, r as re, t as ie } from "./E-zZdDOp.mjs";
+import { t as x } from "./DA1LVvTS.mjs";
+import { n as ae } from "./BMouE3MT.mjs";
+import { n as oe, r as S } from "./BGjN3ifV.mjs";
+import { t as se } from "./f-0LSLCC.mjs";
+import { r as C, t as ce } from "./DeXyq_xW2.mjs";
+import "./CNcSX5f1.mjs";
+import { t as le } from "./hFCEXdXW.mjs";
+import { n as ue, t as de } from "./BsBVCVnp2.mjs";
+import { Fragment as w, computed as T, createBlock as E, createCommentVNode as fe, createElementBlock as D, createElementVNode as O, createTextVNode as pe, createVNode as k, defineComponent as A, getCurrentInstance as j, inject as M, mergeProps as me, nextTick as N, normalizeClass as P, normalizeStyle as F, onMounted as I, openBlock as L, provide as he, reactive as ge, ref as R, renderList as z, renderSlot as B, shallowRef as _e, toDisplayString as ve, unref as V, vShow as ye, watch as H, watchEffect as be, withCtx as U, withDirectives as xe, withKeys as Se } from "vue";
+import { debounce as Ce, isNil as W, pick as we } from "lodash-unified";
+//#region node_modules/.pnpm/element-plus@2.13.7_typescr_8efe08c8f3fc18df5e2015e9e70f0912/node_modules/element-plus/es/components/color-picker-panel/src/color-picker-panel.mjs
+var Te = u({
+	modelValue: {
+		type: p(String),
+		default: void 0
+	},
+	border: {
+		type: Boolean,
+		default: !0
+	},
+	showAlpha: Boolean,
+	colorFormat: { type: p(String) },
+	disabled: Boolean,
+	predefine: { type: p(Array) },
+	validateEvent: {
+		type: Boolean,
+		default: !0
+	},
+	hueSliderClass: { type: p([
+		String,
+		Array,
+		Object
+	]) },
+	hueSliderStyle: { type: p([
+		String,
+		Array,
+		Object
+	]) }
+}), Ee = { [n]: (e) => c(e) || W(e) }, De = Symbol("colorCommonPickerKey"), Oe = Symbol("colorPickerPanelContextKey"), ke = u({
+	color: {
+		type: p(Object),
+		required: !0
+	},
+	vertical: Boolean,
+	disabled: Boolean
+}), Ae = ke, G = (e) => {
+	let t, n;
+	return e.type === "touchend" ? (n = e.changedTouches[0].clientY, t = e.changedTouches[0].clientX) : e.type.startsWith("touch") ? (n = e.touches[0].clientY, t = e.touches[0].clientX) : (n = e.clientY, t = e.clientX), {
+		clientX: t,
+		clientY: n
+	};
+}, K = !1;
+function q(e, t) {
+	if (!s) return;
+	let n = function(e) {
+		var n;
+		(n = t.drag) == null || n.call(t, e);
+	}, r = function(e) {
+		var i;
+		document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", r), document.removeEventListener("touchmove", n), document.removeEventListener("touchend", r), document.onselectstart = null, document.ondragstart = null, K = !1, (i = t.end) == null || i.call(t, e);
+	}, i = function(e) {
+		var i;
+		K || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", n), document.addEventListener("mouseup", r), document.addEventListener("touchmove", n), document.addEventListener("touchend", r), K = !0, (i = t.start) == null || i.call(t, e));
+	};
+	e.addEventListener("mousedown", i), e.addEventListener("touchstart", i, { passive: !1 });
+}
+//#endregion
+//#region node_modules/.pnpm/element-plus@2.13.7_typescr_8efe08c8f3fc18df5e2015e9e70f0912/node_modules/element-plus/es/components/color-picker-panel/src/composables/use-slider.mjs
+var J = (n, { key: r, minValue: i, maxValue: a }) => {
+	let o = j(), s = _e(), c = _e(), l = T(() => n.color.get(r));
+	function u(e) {
+		var t;
+		n.disabled || (e.target !== s.value && d(e), (t = s.value) == null || t.focus());
+	}
+	function d(e) {
+		if (!c.value || !s.value || n.disabled) return;
+		let t = o.vnode.el.getBoundingClientRect(), { clientX: i, clientY: l } = G(e), u;
+		if (n.vertical) {
+			let e = l - t.top;
+			e = Math.max(s.value.offsetHeight / 2, e), e = Math.min(e, t.height - s.value.offsetHeight / 2), u = Math.round((e - s.value.offsetHeight / 2) / (t.height - s.value.offsetHeight) * a);
+		} else {
+			let e = i - t.left;
+			e = Math.max(s.value.offsetWidth / 2, e), e = Math.min(e, t.width - s.value.offsetWidth / 2), u = Math.round((e - s.value.offsetWidth / 2) / (t.width - s.value.offsetWidth) * a);
+		}
+		n.color.set(r, u);
+	}
+	function f(o) {
+		if (n.disabled) return;
+		let { shiftKey: s } = o, c = t(o), l = s ? 10 : 1, u = r === "hue" ? -1 : 1, d = !0;
+		switch (c) {
+			case e.left:
+			case e.down:
+				p(-l * u);
+				break;
+			case e.right:
+			case e.up:
+				p(l * u);
+				break;
+			case e.home:
+				n.color.set(r, r === "hue" ? a : i);
+				break;
+			case e.end:
+				n.color.set(r, r === "hue" ? i : a);
+				break;
+			case e.pageDown:
+				p(-4 * u);
+				break;
+			case e.pageUp:
+				p(4 * u);
+				break;
+			default:
+				d = !1;
+				break;
+		}
+		d && o.preventDefault();
+	}
+	function p(e) {
+		let t = l.value + e;
+		t = t < i ? i : t > a ? a : t, n.color.set(r, t);
+	}
+	return {
+		thumb: s,
+		bar: c,
+		currentValue: l,
+		handleDrag: d,
+		handleClick: u,
+		handleKeydown: f
+	};
+}, Y = (e, { namespace: t, maxValue: n, bar: r, thumb: i, currentValue: a, handleDrag: o, getBackground: s }) => {
+	let c = j(), l = d(t), u = R(0), f = R(0), p = R();
+	function m() {
+		if (!i.value || e.vertical) return 0;
+		let t = c.vnode.el, r = a.value;
+		return t ? Math.round(r * (t.offsetWidth - i.value.offsetWidth / 2) / n) : 0;
+	}
+	function g() {
+		if (!i.value) return 0;
+		let t = c.vnode.el;
+		if (!e.vertical) return 0;
+		let r = a.value;
+		return t ? Math.round(r * (t.offsetHeight - i.value.offsetHeight / 2) / n) : 0;
+	}
+	function _() {
+		u.value = m(), f.value = g(), p.value = s == null ? void 0 : s();
+	}
+	I(() => {
+		if (!r.value || !i.value) return;
+		let e = {
+			drag: (e) => {
+				o(e);
+			},
+			end: (e) => {
+				o(e);
+			}
+		};
+		q(r.value, e), q(i.value, e), _();
+	}), H(a, () => _()), H(() => e.color.value, () => _());
+	let v = T(() => [
+		l.b(),
+		l.is("vertical", e.vertical),
+		l.is("disabled", e.disabled)
+	]), y = T(() => l.e("bar")), b = T(() => l.e("thumb"));
+	return {
+		rootKls: v,
+		barKls: y,
+		barStyle: T(() => ({ background: p.value })),
+		thumbKls: b,
+		thumbStyle: T(() => ({
+			left: h(u.value),
+			top: h(f.value)
+		})),
+		thumbLeft: u,
+		thumbTop: f,
+		update: _
+	};
+}, je = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-orientation",
+	"tabindex",
+	"aria-disabled"
+], Me = 0, X = 100, Ne = /* @__PURE__ */ A({
+	name: "ElColorAlphaSlider",
+	__name: "alpha-slider",
+	props: ke,
+	setup(e, { expose: t }) {
+		let n = e, { currentValue: r, bar: i, thumb: a, handleDrag: o, handleClick: s, handleKeydown: c } = J(n, {
+			key: "alpha",
+			minValue: Me,
+			maxValue: X
+		}), { rootKls: l, barKls: u, barStyle: d, thumbKls: f, thumbStyle: p, update: m } = Y(n, {
+			namespace: "color-alpha-slider",
+			maxValue: X,
+			currentValue: r,
+			bar: i,
+			thumb: a,
+			handleDrag: o,
+			getBackground: v
+		}), { t: h } = y(), g = T(() => h("el.colorpicker.alphaLabel")), _ = T(() => h("el.colorpicker.alphaDescription", {
+			alpha: r.value,
+			color: n.color.value
+		}));
+		function v() {
+			if (n.color && n.color.value) {
+				let { r: e, g: t, b: r } = n.color.toRgb();
+				return `linear-gradient(to right, rgba(${e}, ${t}, ${r}, 0) 0%, rgba(${e}, ${t}, ${r}, 1) 100%)`;
+			}
+			return "";
+		}
+		return t({
+			update: m,
+			bar: i,
+			thumb: a
+		}), (t, n) => (L(), D("div", { class: P(V(l)) }, [O("div", {
+			ref_key: "bar",
+			ref: i,
+			class: P(V(u)),
+			style: F(V(d)),
+			onClick: n[0] || (n[0] = (...e) => V(s) && V(s)(...e))
+		}, null, 6), O("div", {
+			ref_key: "thumb",
+			ref: a,
+			class: P(V(f)),
+			style: F(V(p)),
+			"aria-label": g.value,
+			"aria-valuenow": V(r),
+			"aria-valuetext": _.value,
+			"aria-orientation": e.vertical ? "vertical" : "horizontal",
+			"aria-valuemin": Me,
+			"aria-valuemax": X,
+			role: "slider",
+			tabindex: e.disabled ? void 0 : 0,
+			"aria-disabled": e.disabled,
+			onKeydown: n[1] || (n[1] = (...e) => V(c) && V(c)(...e))
+		}, null, 46, je)], 2));
+	}
+}), Pe = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-orientation",
+	"tabindex",
+	"aria-disabled"
+], Z = 0, Q = 360, Fe = /* @__PURE__ */ A({
+	name: "ElColorHueSlider",
+	__name: "hue-slider",
+	props: Ae,
+	setup(e, { expose: t }) {
+		let n = e, { currentValue: r, bar: i, thumb: a, handleDrag: o, handleClick: s, handleKeydown: c } = J(n, {
+			key: "hue",
+			minValue: Z,
+			maxValue: Q
+		}), { rootKls: l, barKls: u, thumbKls: d, thumbStyle: f, thumbTop: p, update: m } = Y(n, {
+			namespace: "color-hue-slider",
+			maxValue: Q,
+			currentValue: r,
+			bar: i,
+			thumb: a,
+			handleDrag: o
+		}), { t: h } = y(), g = T(() => h("el.colorpicker.hueLabel")), _ = T(() => h("el.colorpicker.hueDescription", {
+			hue: r.value,
+			color: n.color.value
+		}));
+		return t({
+			bar: i,
+			thumb: a,
+			thumbTop: p,
+			update: m
+		}), (t, n) => (L(), D("div", { class: P(V(l)) }, [O("div", {
+			ref_key: "bar",
+			ref: i,
+			class: P(V(u)),
+			onClick: n[0] || (n[0] = (...e) => V(s) && V(s)(...e))
+		}, null, 2), O("div", {
+			ref_key: "thumb",
+			ref: a,
+			class: P(V(d)),
+			style: F(V(f)),
+			"aria-label": g.value,
+			"aria-valuenow": V(r),
+			"aria-valuetext": _.value,
+			"aria-orientation": e.vertical ? "vertical" : "horizontal",
+			"aria-valuemin": Z,
+			"aria-valuemax": Q,
+			role: "slider",
+			tabindex: e.disabled ? void 0 : 0,
+			"aria-disabled": e.disabled,
+			onKeydown: n[1] || (n[1] = (...e) => V(c) && V(c)(...e))
+		}, null, 46, Pe)], 2));
+	}
+}), Ie = u({
+	colors: {
+		type: p(Array),
+		required: !0
+	},
+	color: {
+		type: p(Object),
+		required: !0
+	},
+	enableAlpha: {
+		type: Boolean,
+		required: !0
+	},
+	disabled: Boolean
+}), $ = class {
+	constructor(e = {}) {
+		this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100, this._tiny = new C(), this._isValid = !1, this.enableAlpha = !1, this.format = "", this.value = "";
+		for (let t in e) l(e, t) && (this[t] = e[t]);
+		e.value ? this.fromString(e.value) : this.doOnChange();
+	}
+	set(e, t) {
+		if (arguments.length === 1 && typeof e == "object") {
+			for (let t in e) l(e, t) && this.set(t, e[t]);
+			return;
+		}
+		this[`_${e}`] = t, this._isValid = !0, this.doOnChange();
+	}
+	get(e) {
+		return [
+			"hue",
+			"saturation",
+			"value",
+			"alpha"
+		].includes(e) ? Math.round(this[`_${e}`]) : this[`_${e}`];
+	}
+	toRgb() {
+		return this._isValid ? this._tiny.toRgb() : {
+			r: 255,
+			g: 255,
+			b: 255,
+			a: 0
+		};
+	}
+	fromString(e) {
+		let t = new C(e);
+		if (this._isValid = t.isValid, t.isValid) {
+			let { h: e, s: n, v: r, a: i } = t.toHsv();
+			this._hue = e, this._saturation = n * 100, this._value = r * 100, this._alpha = i * 100;
+		} else this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100;
+		this.doOnChange();
+	}
+	clear() {
+		this._isValid = !1, this.value = "", this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100;
+	}
+	compare(e) {
+		let t = new C({
+			h: e._hue,
+			s: e._saturation / 100,
+			v: e._value / 100,
+			a: e._alpha / 100
+		});
+		return this._tiny.equals(t);
+	}
+	doOnChange() {
+		let { _hue: e, _saturation: t, _value: n, _alpha: r, format: i, enableAlpha: a } = this, o = i || (a ? "rgb" : "hex");
+		i === "hex" && a && (o = "hex8"), this._tiny = new C({
+			h: e,
+			s: t / 100,
+			v: n / 100,
+			a: r / 100
+		}), this.value = this._isValid ? this._tiny.toString(o) : "";
+	}
+}, Le = (e) => {
+	let { currentColor: t } = M(Oe), n = R(i(e.colors, e.color));
+	H(() => t.value, (t) => {
+		let r = new $({
+			value: t,
+			enableAlpha: e.enableAlpha
+		});
+		n.value.forEach((e) => {
+			e.selected = r.compare(e);
+		});
+	}), be(() => {
+		n.value = i(e.colors, e.color);
+	});
+	function r(t) {
+		e.color.fromString(e.colors[t]);
+	}
+	function i(t, n) {
+		return t.map((t) => {
+			let r = new $({
+				value: t,
+				enableAlpha: e.enableAlpha
+			});
+			return r.selected = r.compare(n), r;
+		});
+	}
+	return {
+		rgbaColors: n,
+		handleSelect: r
+	};
+}, Re = (e) => {
+	let t = d("color-predefine"), n = T(() => [t.b(), t.is("disabled", e.disabled)]), r = T(() => t.e("colors"));
+	function i(e) {
+		return [
+			t.e("color-selector"),
+			t.is("alpha", e.get("alpha") < 100),
+			{ selected: e.selected }
+		];
+	}
+	return {
+		rootKls: n,
+		colorsKls: r,
+		colorSelectorKls: i
+	};
+}, ze = [
+	"disabled",
+	"aria-label",
+	"onClick"
+], Be = /* @__PURE__ */ A({
+	name: "ElColorPredefine",
+	__name: "predefine",
+	props: Ie,
+	setup(e) {
+		let t = e, { rgbaColors: n, handleSelect: r } = Le(t), { rootKls: i, colorsKls: a, colorSelectorKls: o } = Re(t), { t: s } = y(), c = (e) => s("el.colorpicker.predefineDescription", { value: e });
+		return (t, s) => (L(), D("div", { class: P(V(i)) }, [O("div", { class: P(V(a)) }, [(L(!0), D(w, null, z(V(n), (t, n) => (L(), D("button", {
+			key: e.colors[n],
+			type: "button",
+			disabled: e.disabled,
+			"aria-label": c(t.value),
+			class: P(V(o)(t)),
+			onClick: (e) => V(r)(n)
+		}, [O("div", { style: F({ backgroundColor: t.value }) }, null, 4)], 10, ze))), 128))], 2)], 2));
+	}
+}), Ve = u({
+	color: {
+		type: p(Object),
+		required: !0
+	},
+	disabled: Boolean
+}), He = (n) => {
+	let r = j(), i = R(), a = R(0), o = R(0), s = R("hsl(0, 100%, 50%)"), c = T(() => n.color.get("saturation")), l = T(() => n.color.get("value")), u = T(() => n.color.get("hue"));
+	function d(e) {
+		var t;
+		n.disabled || (e.target !== i.value && f(e), (t = i.value) == null || t.focus({ preventScroll: !0 }));
+	}
+	function f(e) {
+		if (n.disabled) return;
+		let t = r.vnode.el.getBoundingClientRect(), { clientX: i, clientY: s } = G(e), c = i - t.left, l = s - t.top;
+		c = Math.max(0, c), c = Math.min(c, t.width), l = Math.max(0, l), l = Math.min(l, t.height), o.value = c, a.value = l, n.color.set({
+			saturation: c / t.width * 100,
+			value: 100 - l / t.height * 100
+		});
+	}
+	function p(r) {
+		if (n.disabled) return;
+		let { shiftKey: i } = r, a = t(r), o = i ? 10 : 1, s = !0;
+		switch (a) {
+			case e.left:
+				m(-o);
+				break;
+			case e.right:
+				m(o);
+				break;
+			case e.up:
+				h(o);
+				break;
+			case e.down:
+				h(-o);
+				break;
+			default:
+				s = !1;
+				break;
+		}
+		s && r.preventDefault();
+	}
+	function m(e) {
+		let t = c.value + e;
+		t = t < 0 ? 0 : t > 100 ? 100 : t, n.color.set("saturation", t);
+	}
+	function h(e) {
+		let t = l.value + e;
+		t = t < 0 ? 0 : t > 100 ? 100 : t, n.color.set("value", t);
+	}
+	return {
+		cursorRef: i,
+		cursorTop: a,
+		cursorLeft: o,
+		background: s,
+		saturation: c,
+		brightness: l,
+		hue: u,
+		handleClick: d,
+		handleDrag: f,
+		handleKeydown: p
+	};
+}, Ue = (e, { cursorTop: t, cursorLeft: n, background: r, handleDrag: i }) => {
+	let a = j(), o = d("color-svpanel");
+	function s() {
+		let i = e.color.get("saturation"), o = e.color.get("value"), { clientWidth: s, clientHeight: c } = a.vnode.el;
+		n.value = i * s / 100, t.value = (100 - o) * c / 100, r.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
+	}
+	return I(() => {
+		q(a.vnode.el, {
+			drag: (e) => {
+				i(e);
+			},
+			end: (e) => {
+				i(e);
+			}
+		}), s();
+	}), H([
+		() => e.color.get("hue"),
+		() => e.color.get("value"),
+		() => e.color.value
+	], () => s()), {
+		rootKls: T(() => o.b()),
+		cursorKls: T(() => o.e("cursor")),
+		rootStyle: T(() => ({ backgroundColor: r.value })),
+		cursorStyle: T(() => ({
+			top: h(t.value),
+			left: h(n.value)
+		})),
+		update: s
+	};
+}, We = [
+	"tabindex",
+	"aria-disabled",
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext"
+], Ge = /* @__PURE__ */ A({
+	name: "ElSvPanel",
+	__name: "sv-panel",
+	props: Ve,
+	setup(e, { expose: t }) {
+		let n = e, { cursorRef: r, cursorTop: i, cursorLeft: a, background: o, saturation: s, brightness: c, handleClick: l, handleDrag: u, handleKeydown: d } = He(n), { rootKls: f, cursorKls: p, rootStyle: m, cursorStyle: h, update: g } = Ue(n, {
+			cursorTop: i,
+			cursorLeft: a,
+			background: o,
+			handleDrag: u
+		}), { t: _ } = y(), v = T(() => _("el.colorpicker.svLabel")), b = T(() => _("el.colorpicker.svDescription", {
+			saturation: s.value,
+			brightness: c.value,
+			color: n.color.value
+		}));
+		return t({ update: g }), (t, n) => (L(), D("div", {
+			class: P(V(f)),
+			style: F(V(m)),
+			onClick: n[1] || (n[1] = (...e) => V(l) && V(l)(...e))
+		}, [O("div", {
+			ref_key: "cursorRef",
+			ref: r,
+			class: P(V(p)),
+			style: F(V(h)),
+			tabindex: e.disabled ? void 0 : 0,
+			"aria-disabled": e.disabled,
+			role: "slider",
+			"aria-valuemin": "0,0",
+			"aria-valuemax": "100,100",
+			"aria-label": v.value,
+			"aria-valuenow": `${V(s)},${V(c)}`,
+			"aria-valuetext": b.value,
+			onKeydown: n[0] || (n[0] = (...e) => V(d) && V(d)(...e))
+		}, null, 46, We)], 6));
+	}
+}), Ke = (e, t) => {
+	let r = ge(new $({
+		enableAlpha: e.showAlpha,
+		format: e.colorFormat || "",
+		value: e.modelValue
+	}));
+	return H(() => [e.colorFormat, e.showAlpha], () => {
+		r.enableAlpha = e.showAlpha, r.format = e.colorFormat || r.format, r.doOnChange(), t(n, r.value);
+	}), { color: r };
+}, qe = f(/* @__PURE__ */ A({
+	name: "ElColorPickerPanel",
+	__name: "color-picker-panel",
+	props: Te,
+	emits: Ee,
+	setup(e, { expose: t, emit: r }) {
+		let i = e, o = r, s = d("color-picker-panel"), { formItem: c } = ie(), l = re(), u = R(), f = R(), p = R(), m = R(), h = R(""), { color: g } = M(De, () => Ke(i, o), !0);
+		function _() {
+			g.fromString(h.value), g.value !== h.value && (h.value = g.value);
+		}
+		function v() {
+			var e;
+			i.validateEvent && (c == null || (e = c.validate) == null || e.call(c, "blur").catch((e) => a(e)));
+		}
+		function y() {
+			var e, t, n;
+			(e = u.value) == null || e.update(), (t = f.value) == null || t.update(), (n = p.value) == null || n.update();
+		}
+		return I(() => {
+			i.modelValue && (h.value = g.value), N(y);
+		}), H(() => i.modelValue, (e) => {
+			e !== g.value && (e ? g.fromString(e) : g.clear());
+		}), H(() => g.value, (e) => {
+			o(n, e), h.value = e, i.validateEvent && (c == null || c.validate("change").catch((e) => a(e)));
+		}), he(Oe, { currentColor: T(() => g.value) }), t({
+			color: g,
+			inputRef: m,
+			update: y
+		}), (t, n) => (L(), D("div", {
+			class: P([
+				V(s).b(),
+				V(s).is("disabled", V(l)),
+				V(s).is("border", e.border)
+			]),
+			onFocusout: v
+		}, [
+			O("div", { class: P(V(s).e("wrapper")) }, [k(Fe, {
+				ref_key: "hueRef",
+				ref: u,
+				color: V(g),
+				vertical: "",
+				disabled: V(l),
+				class: P(["hue-slider", e.hueSliderClass]),
+				style: F(e.hueSliderStyle)
+			}, null, 8, [
+				"color",
+				"disabled",
+				"class",
+				"style"
+			]), k(Ge, {
+				ref_key: "svRef",
+				ref: f,
+				color: V(g),
+				disabled: V(l)
+			}, null, 8, ["color", "disabled"])], 2),
+			e.showAlpha ? (L(), E(Ne, {
+				key: 0,
+				ref_key: "alphaRef",
+				ref: p,
+				color: V(g),
+				disabled: V(l)
+			}, null, 8, ["color", "disabled"])) : fe("v-if", !0),
+			e.predefine ? (L(), E(Be, {
+				key: 1,
+				ref: "predefine",
+				"enable-alpha": e.showAlpha,
+				color: V(g),
+				colors: e.predefine,
+				disabled: V(l)
+			}, null, 8, [
+				"enable-alpha",
+				"color",
+				"colors",
+				"disabled"
+			])) : fe("v-if", !0),
+			O("div", { class: P(V(s).e("footer")) }, [k(V(x), {
+				ref_key: "inputRef",
+				ref: m,
+				modelValue: h.value,
+				"onUpdate:modelValue": n[0] || (n[0] = (e) => h.value = e),
+				"validate-event": !1,
+				size: "small",
+				disabled: V(l),
+				onChange: _
+			}, null, 8, ["modelValue", "disabled"]), B(t.$slots, "footer")], 2)
+		], 34));
+	}
+})), Je = u({
+	persistent: {
+		type: Boolean,
+		default: !0
+	},
+	modelValue: {
+		type: p(String),
+		default: void 0
+	},
+	id: String,
+	showAlpha: Boolean,
+	colorFormat: { type: p(String) },
+	disabled: {
+		type: Boolean,
+		default: void 0
+	},
+	clearable: {
+		type: Boolean,
+		default: !0
+	},
+	size: i,
+	popperClass: b.popperClass,
+	popperStyle: b.popperStyle,
+	tabindex: {
+		type: [String, Number],
+		default: 0
+	},
+	teleported: b.teleported,
+	appendTo: b.appendTo,
+	predefine: { type: p(Array) },
+	validateEvent: {
+		type: Boolean,
+		default: !0
+	},
+	...S,
+	...se(["ariaLabel"])
+}), Ye = {
+	[n]: (e) => c(e) || W(e),
+	[r]: (e) => c(e) || W(e),
+	activeChange: (e) => c(e) || W(e),
+	focus: (e) => e instanceof FocusEvent,
+	blur: (e) => e instanceof FocusEvent,
+	clear: () => !0
+}, Xe = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-description",
+	"aria-disabled",
+	"tabindex"
+], Ze = f(/* @__PURE__ */ A({
+	name: "ElColorPicker",
+	__name: "color-picker",
+	props: Je,
+	emits: Ye,
+	setup(i, { expose: s, emit: c }) {
+		let l = i, u = c, { t: f } = y(), p = d("color"), { formItem: h } = ie(), b = te(), x = re(), { valueOnClear: S, isEmptyValue: se } = oe(l, null), C = Ke(l, u), { inputId: le, isLabeledByFormItem: ue } = ne(l, { formItemContext: h }), de = R(), w = R(), D = R(), A = R(!1), j = R(!1), M = !0, { isFocused: I, handleFocus: ge, handleBlur: z } = ae(w, {
+			disabled: x,
+			beforeBlur(e) {
+				var t;
+				return (t = de.value) == null ? void 0 : t.isFocusInsideContent(e);
+			},
+			afterBlur() {
+				var e;
+				G(!1), Y(), l.validateEvent && (h == null || (e = h.validate) == null || e.call(h, "blur").catch((e) => a(e)));
+			}
+		}), B = o(() => {
+			var e;
+			return ((e = D.value) == null ? void 0 : e.color) ?? C.color;
+		}), _e = T(() => we(l, Object.keys(Te))), be = T(() => !l.modelValue && !j.value ? "transparent" : Ae(B, l.showAlpha)), W = T(() => !l.modelValue && !j.value ? "" : B.value), Ee = T(() => ue.value ? void 0 : l.ariaLabel || f("el.colorpicker.defaultLabel")), Oe = T(() => ue.value ? h == null ? void 0 : h.labelId : void 0), ke = T(() => [
+			p.b("picker"),
+			p.is("disabled", x.value),
+			p.bm("picker", b.value),
+			p.is("focused", I.value)
+		]);
+		function Ae(e, t) {
+			let { r: n, g: r, b: i, a } = e.toRgb();
+			return t ? `rgba(${n}, ${r}, ${i}, ${a})` : `rgb(${n}, ${r}, ${i})`;
+		}
+		function G(e) {
+			A.value = e;
+		}
+		let K = Ce(G, 100, { leading: !0 });
+		function q() {
+			x.value || G(!0);
+		}
+		function J() {
+			K(!1), Y();
+		}
+		function Y() {
+			N(() => {
+				l.modelValue ? B.fromString(l.modelValue) : (B.value = "", N(() => {
+					j.value = !1;
+				}));
+			});
+		}
+		function je() {
+			x.value || (A.value && Y(), K(!A.value));
+		}
+		function Me() {
+			let e = se(B.value) ? S.value : B.value;
+			u(n, e), u(r, e), l.validateEvent && (h == null || h.validate("change").catch((e) => a(e))), K(!1), N(() => {
+				let e = new $({
+					enableAlpha: l.showAlpha,
+					format: l.colorFormat || "",
+					value: l.modelValue
+				});
+				B.compare(e) || Y();
+			});
+		}
+		function X() {
+			K(!1), u(n, S.value), u(r, S.value), l.modelValue !== S.value && l.validateEvent && (h == null || h.validate("change").catch((e) => a(e))), Y(), u("clear");
+		}
+		function Ne() {
+			var e;
+			D == null || (e = D.value) == null || (e = e.inputRef) == null || e.focus();
+		}
+		function Pe() {
+			A.value && (J(), I.value && Fe());
+		}
+		function Z(e) {
+			e.preventDefault(), e.stopPropagation(), G(!1), Y();
+		}
+		function Q(n) {
+			switch (t(n)) {
+				case e.enter:
+				case e.numpadEnter:
+				case e.space:
+					n.preventDefault(), n.stopPropagation(), q();
+					break;
+				case e.esc:
+					Z(n);
+					break;
+			}
+		}
+		function Fe() {
+			w.value.focus();
+		}
+		function Ie() {
+			w.value.blur();
+		}
+		return H(() => W.value, (e) => {
+			M && u("activeChange", e), M = !0;
+		}), H(() => B.value, () => {
+			!l.modelValue && !j.value && (j.value = !0);
+		}), H(() => l.modelValue, (e) => {
+			e ? e && e !== B.value && (M = !1, B.fromString(e)) : j.value = !1;
+		}), H(() => A.value, () => {
+			D.value && N(D.value.update);
+		}), he(De, C), s({
+			color: B,
+			show: q,
+			hide: J,
+			focus: Fe,
+			blur: Ie
+		}), (e, t) => (L(), E(V(ee), {
+			ref_key: "popper",
+			ref: de,
+			visible: A.value,
+			"show-arrow": !1,
+			"fallback-placements": [
+				"bottom",
+				"top",
+				"right",
+				"left"
+			],
+			offset: 0,
+			"gpu-acceleration": !1,
+			"popper-class": [V(p).be("picker", "panel"), i.popperClass],
+			"popper-style": i.popperStyle,
+			"stop-popper-mouse-event": !1,
+			pure: "",
+			loop: "",
+			role: "dialog",
+			effect: "light",
+			trigger: "click",
+			teleported: i.teleported,
+			transition: `${V(p).namespace.value}-zoom-in-top`,
+			persistent: i.persistent,
+			"append-to": i.appendTo,
+			onShow: Ne,
+			onHide: t[2] || (t[2] = (e) => G(!1))
+		}, {
+			content: U(() => [xe((L(), E(V(qe), me({
+				ref_key: "pickerPanelRef",
+				ref: D
+			}, _e.value, {
+				border: !1,
+				"validate-event": !1,
+				onKeydown: Se(Z, ["esc"])
+			}), {
+				footer: U(() => [O("div", null, [i.clearable ? (L(), E(V(ce), {
+					key: 0,
+					class: P(V(p).be("footer", "link-btn")),
+					text: "",
+					size: "small",
+					onClick: X
+				}, {
+					default: U(() => [pe(ve(V(f)("el.colorpicker.clear")), 1)]),
+					_: 1
+				}, 8, ["class"])) : fe("v-if", !0), k(V(ce), {
+					plain: "",
+					size: "small",
+					class: P(V(p).be("footer", "btn")),
+					onClick: Me
+				}, {
+					default: U(() => [pe(ve(V(f)("el.colorpicker.confirm")), 1)]),
+					_: 1
+				}, 8, ["class"])])]),
+				_: 1
+			}, 16)), [[
+				V(m),
+				Pe,
+				w.value
+			]])]),
+			default: U(() => [O("div", me({
+				id: V(le),
+				ref_key: "triggerRef",
+				ref: w
+			}, e.$attrs, {
+				class: ke.value,
+				role: "button",
+				"aria-label": Ee.value,
+				"aria-labelledby": Oe.value,
+				"aria-description": V(f)("el.colorpicker.description", { color: i.modelValue || "" }),
+				"aria-disabled": V(x),
+				tabindex: V(x) ? void 0 : i.tabindex,
+				onKeydown: Q,
+				onFocus: t[0] || (t[0] = (...e) => V(ge) && V(ge)(...e)),
+				onBlur: t[1] || (t[1] = (...e) => V(z) && V(z)(...e))
+			}), [O("div", {
+				class: P(V(p).be("picker", "trigger")),
+				onClick: je
+			}, [O("span", { class: P([V(p).be("picker", "color"), V(p).is("alpha", i.showAlpha)]) }, [O("span", {
+				class: P(V(p).be("picker", "color-inner")),
+				style: F({ backgroundColor: be.value })
+			}, [xe(k(V(v), { class: P([V(p).be("picker", "icon"), V(p).is("icon-arrow-down")]) }, {
+				default: U(() => [k(V(g))]),
+				_: 1
+			}, 8, ["class"]), [[ye, i.modelValue || j.value]]), xe(k(V(v), { class: P([V(p).be("picker", "empty"), V(p).is("icon-close")]) }, {
+				default: U(() => [k(V(_))]),
+				_: 1
+			}, 8, ["class"]), [[ye, !i.modelValue && !j.value]])], 6)], 2)], 2)], 16, Xe)]),
+			_: 1
+		}, 8, [
+			"visible",
+			"popper-class",
+			"popper-style",
+			"teleported",
+			"transition",
+			"persistent",
+			"append-to"
+		]));
+	}
+})), Qe = {
+	name: "FyInputColor",
+	mixins: [ue, de],
+	props: {
+		colorFormat: String,
+		predefine: {
+			type: Array,
+			default: () => [
+				"#ff4500",
+				"#ff8c00",
+				"#ffd700",
+				"#90ee90",
+				"#00ced1",
+				"#1e90ff",
+				"#c71585",
+				"rgba(255, 69, 0, 0.68)",
+				"rgb(255, 120, 0)",
+				"hsv(51, 100, 98)",
+				"hsva(120, 40, 94, 0.5)",
+				"hsl(181, 100%, 37%)",
+				"hsla(209, 100%, 56%, 0.73)"
+			]
+		},
+		showAlpha: {
+			type: Boolean,
+			default: !0
+		}
+	}
+}, $e = { class: "avue-input-color" };
+function et(e, t, n, r, i, a) {
+	let o = Ze, s = x;
+	return L(), D("div", $e, [k(s, {
+		ref: "main",
+		modelValue: e.text,
+		"onUpdate:modelValue": t[1] || (t[1] = (t) => e.text = t),
+		placeholder: e.placeholder,
+		size: e.size,
+		readonly: e.readonly,
+		clearable: e.clearableVal,
+		disabled: e.disabled,
+		onClick: e.handleClick
+	}, {
+		append: U(() => [k(o, {
+			modelValue: e.text,
+			"onUpdate:modelValue": t[0] || (t[0] = (t) => e.text = t),
+			"popper-class": e.popperClass,
+			"color-format": n.colorFormat,
+			disabled: e.disabled,
+			"show-alpha": n.showAlpha,
+			predefine: n.predefine
+		}, null, 8, [
+			"modelValue",
+			"popper-class",
+			"color-format",
+			"disabled",
+			"show-alpha",
+			"predefine"
+		])]),
+		_: 1
+	}, 8, [
+		"modelValue",
+		"placeholder",
+		"size",
+		"readonly",
+		"clearable",
+		"disabled",
+		"onClick"
+	])]);
+}
+var tt = /* @__PURE__ */ le(Qe, [["render", et]]);
+//#endregion
+export { tt as t };