exploria-ui 2026.3.2 → 2026.3.5

package/dist/packages/exploria-ui/src/components/feedback/EPopover.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import e from "../../utils/EUUIDUtil.js";
 import { usePosition as t } from "../hooks/usePosition.js";
 import { Teleport as n, Transition as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, getCurrentInstance as u, nextTick as d, normalizeClass as f, normalizeStyle as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, unref as v, useTemplateRef as y, withCtx as b } from "vue";
 //#region src/components/feedback/EPopover.vue?vue&type=script&setup=true&lang.ts
-var x = ["data-id"], S = /* @__PURE__ */ l({
+var x = ["data-id"], S = l({
 	__name: "EPopover",
 	props: {
 		trigger: { default: "click" },
@@ -19,35 +19,35 @@ var x = ["data-id"], S = /* @__PURE__ */ l({
 	},
 	emits: ["update:open"],
 	setup(l, { emit: S }) {
-		let C = y("ePopoverRef"), w = S, T = g(!1), { position: E, arrowPosition: D, arrowSize: O, DELAY_TIME: k, resetPosition: A, computePositionByRect: j } = t(l.placement, l.size, l.showArrow), M = (e) => {
+		let C = y("ePopoverRef"), w = S, T = g(!1), { position: E, arrowPosition: D, arrowSize: O, DELAY_TIME: k, resetPosition: A, computePositionByRect: j, trackPosition: M } = t(l.placement, l.size, l.showArrow), N = (e) => {
 			T.value = e, w("update:open", e);
-		}, N = u()?.uid || e.generate();
+		}, P = u()?.uid || e.generate();
 		return m(() => {
 			let e = C.value.children[0];
 			if (l.trigger === "hover") {
 				let t;
-				e.onmouseenter = (n) => {
-					let r = n.currentTarget.getBoundingClientRect();
-					A(), j(r), T.value = !0, w("update:open", !0);
-					let i = () => {
+				e.onmouseenter = () => {
+					let n = e.getBoundingClientRect();
+					A(), j(n), T.value = !0, w("update:open", !0);
+					let r, i = () => {
 						clearTimeout(t), t = setTimeout(() => {
-							T.value = !1, w("update:open", !1);
+							T.value = !1, r?.(), w("update:open", !1);
 						}, k);
 					};
 					d(() => {
-						let e = document.querySelector(`.e-popover-container[data-id="${N}"]`);
-						e.onmouseenter = () => {
+						let n = document.querySelector(`.e-popover-container[data-id="${P}"]`);
+						r = M(e), n.onmouseenter = () => {
 							clearTimeout(t), T.value = !0, w("update:open", !0);
-						}, e.onmouseleave = i;
+						}, n.onmouseleave = i;
 					}), e.onmouseleave = i;
 				};
 			} else l.trigger === "contextmenu" ? e.oncontextmenu = (e) => {
 				e.preventDefault(), E.left = e.pageX, E.top = e.pageY, T.value = !0, w("update:open", !0), d(() => {
 					window.onmousedown = () => {
-						M(!1), window.onmousedown = null;
+						N(!1), window.onmousedown = null;
 					};
 					let e = () => {
-						M(!1), window.removeEventListener("scroll", e, !0);
+						N(!1), window.removeEventListener("scroll", e, !0);
 					};
 					window.addEventListener("scroll", e, !0);
 				});
@@ -58,11 +58,11 @@ var x = ["data-id"], S = /* @__PURE__ */ l({
 				}
 				let t = e.getBoundingClientRect();
 				A(), j(t), T.value = !0, w("update:open", !0), d(() => {
-					let t = document.querySelector(`.e-popover-container[data-id="${N}"]`);
+					let t = document.querySelector(`.e-popover-container[data-id="${P}"]`);
 					t.onclick = (e) => e.stopPropagation(), t.onmousedown = (e) => e.stopPropagation();
 					let n = () => j(e.getBoundingClientRect()), r = new ResizeObserver(n);
 					r.observe(e), window.onresize = n, window.addEventListener("scroll", n, !0), window.onmousedown = () => {
-						M(!1), r.disconnect(), window.onresize = null, window.removeEventListener("scroll", n, !0);
+						N(!1), r.disconnect(), window.onresize = null, window.removeEventListener("scroll", n, !0);
 					};
 				});
 			});
@@ -76,7 +76,7 @@ var x = ["data-id"], S = /* @__PURE__ */ l({
 			default: b(() => [(l.trigger ? T.value : l.open) ? (h(), o("div", {
 				key: 0,
 				class: f(["e-popover-container", l.size]),
-				"data-id": v(N),
+				"data-id": v(P),
 				style: p({
 					top: v(E).top + "px",
 					left: v(E).left + "px",

package/dist/packages/exploria-ui/src/components/feedback/ETooltip.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ETooltip.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/components/feedback/ETooltip.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-62e8adeb"]]);
+var n = e(t, [["__scopeId", "data-v-152661a6"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/feedback/ETooltip.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import e from "../../utils/EUUIDUtil.js";
 import { usePosition as t } from "../hooks/usePosition.js";
 import { Teleport as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, getCurrentInstance as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, unref as y, useTemplateRef as b, watchEffect as x } from "vue";
 //#region src/components/feedback/ETooltip.vue?vue&type=script&setup=true&lang.ts
-var S = ["data-id"], C = /* @__PURE__ */ c({
+var S = ["data-id"], C = c({
 	__name: "ETooltip",
 	props: {
 		content: {},
@@ -15,7 +15,7 @@ var S = ["data-id"], C = /* @__PURE__ */ c({
 		}
 	},
 	setup(c) {
-		let C = g(c.open), w = b("eTooltipRef"), { position: T, arrowPosition: E, arrowSize: D, DELAY_TIME: O, resetPosition: k, computePositionByRect: A, _computePosition: j } = t(c.placement, c.size, c.showArrow), M = l()?.uid || e.generate(), N;
+		let C = g(c.open), w = b("eTooltipRef"), { position: T, arrowPosition: E, arrowSize: D, DELAY_TIME: O, resetPosition: k, computePositionByRect: A, trackPosition: j } = t(c.placement, c.size, c.showArrow), M = l()?.uid || e.generate(), N;
 		return p(() => {
 			let e, t = w.value.children[0];
 			x(() => {

package/dist/packages/exploria-ui/src/components/form/ECheckbox.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ECheckbox.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                               */
 //#region src/components/form/ECheckbox.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-0e16187d"]]);
+var n = e(t, [["__scopeId", "data-v-0e16187d"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/ECheckbox.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var s = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "200",
 	height: "200"
-}, c = /* @__PURE__ */ r({
+}, c = r({
 	__name: "ECheckbox",
 	props: {
 		modelValue: {

package/dist/packages/exploria-ui/src/components/form/EColorPicker.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./EColorPicker.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                  */
 //#region src/components/form/EColorPicker.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-b29e1559"]]);
+var n = e(t, [["__scopeId", "data-v-67306421"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/EColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { usePosition as e } from "../hooks/usePosition.js";
-import { Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onMounted as d, onUnmounted as f, openBlock as p, reactive as m, ref as h, toDisplayString as g, unref as _, useTemplateRef as v, vModelText as y, withCtx as b, withDirectives as x, withModifiers as S } from "vue";
+import { Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, onMounted as d, onUnmounted as f, openBlock as p, reactive as m, ref as h, toDisplayString as g, unref as _, useTemplateRef as v, withCtx as y, withModifiers as b } from "vue";
 //#region src/components/form/EColorPicker.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "alpha-slider-container" }, w = { class: "current-color-preview" }, T = { class: "color-code" }, E = /* @__PURE__ */ c({
+var x = { class: "color-picker-section" }, S = { class: "hue-slider-section" }, C = { class: "hue-slider-container" }, w = ["value"], ee = { class: "alpha-slider-section" }, T = { class: "slider-label" }, E = { class: "slider-value" }, D = { class: "alpha-slider-container" }, O = ["value"], k = { class: "current-color-preview" }, A = { class: "color-code" }, j = c({
 	__name: "EColorPicker",
 	props: {
 		modelValue: { default: "#ff0000" },
@@ -12,138 +12,192 @@ var C = { class: "alpha-slider-container" }, w = { class: "current-color-preview
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(c, { emit: E }) {
-		let { position: D, computePositionByRect: O, _computePosition: k, arrowSize: A, arrowPosition: j } = e("bottom", c.size, c.showArrow), M, N = () => {
-			if (F.value = !F.value, F.value) {
-				let e = B.value.children[0];
-				O(e.getBoundingClientRect()), M = k(e), z();
-			} else M();
-		}, P = E, F = h(!1), I = h(100), L = m({
+	setup(c, { emit: j }) {
+		let M = j, { position: N, computePositionByRect: P, trackPosition: F, arrowSize: I, arrowPosition: L } = e("bottom", c.size, c.showArrow), R = m({
+			left: 0,
+			top: 0,
+			translateX: "0",
+			translateY: "0"
+		}), z, B = h(!1), V = m({
+			h: 0,
+			s: 100,
+			l: 50,
+			a: 1
+		}), H = m({
 			x: 0,
 			y: 0
-		}), R = h(""), z = () => {
-			if (c.modelValue.startsWith("rgba")) {
-				let e = c.modelValue.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
-				if (e) {
-					I.value = Math.round(Number(e[4]) * 100), R.value = `rgba(${e[1]},${e[2]},${e[3]},${I.value / 100})`;
-					return;
+		}), U = h(""), W = v("eColorPickerRef"), G = () => {
+			if (B.value) B.value = !1, z();
+			else {
+				let e = W.value.children[0];
+				P(e.getBoundingClientRect()), R.left = N.left, R.top = N.top, R.translateX = N.translateX, R.translateY = N.translateY, z = F(e), Y(), B.value = !0;
+			}
+		}, K = (e, t, n) => {
+			e /= 255, t /= 255, n /= 255;
+			let r = Math.max(e, t, n), i = Math.min(e, t, n), a = 0, o = 0, s = (r + i) / 2;
+			if (r !== i) {
+				let c = r - i;
+				switch (o = s > .5 ? c / (2 - r - i) : c / (r + i), r) {
+					case e:
+						a = (t - n) / c + (t < n ? 6 : 0);
+						break;
+					case t:
+						a = (n - e) / c + 2;
+						break;
+					case n:
+						a = (e - t) / c + 4;
+						break;
 				}
+				a *= 60;
 			}
-			I.value = 100, R.value = c.modelValue;
-		}, B = v("eColorPickerRef"), V = (e, t, n) => {
+			return {
+				h: Math.round(a),
+				s: Math.round(o * 100),
+				l: Math.round(s * 100)
+			};
+		}, q = (e, t, n, r) => {
 			t /= 100, n /= 100;
-			let r = (1 - Math.abs(2 * n - 1)) * t, i = r * (1 - Math.abs(e / 60 % 2 - 1)), a = n - r / 2, o = 0, s = 0, c = 0;
-			e >= 0 && e < 60 ? (o = r, s = i, c = 0) : e >= 60 && e < 120 ? (o = i, s = r, c = 0) : e >= 120 && e < 180 ? (o = 0, s = r, c = i) : e >= 180 && e < 240 ? (o = 0, s = i, c = r) : e >= 240 && e < 300 ? (o = i, s = 0, c = r) : (o = r, s = 0, c = i), o = Math.round((o + a) * 255), s = Math.round((s + a) * 255), c = Math.round((c + a) * 255), R.value = `rgba(${o},${s},${c},${I.value / 100})`, P("update:modelValue", R.value);
+			let i = (1 - Math.abs(2 * n - 1)) * t, a = i * (1 - Math.abs(e / 60 % 2 - 1)), o = n - i / 2, s = 0, c = 0, l = 0;
+			return e >= 0 && e < 60 ? (s = i, c = a, l = 0) : e >= 60 && e < 120 ? (s = a, c = i, l = 0) : e >= 120 && e < 180 ? (s = 0, c = i, l = a) : e >= 180 && e < 240 ? (s = 0, c = a, l = i) : e >= 240 && e < 300 ? (s = a, c = 0, l = i) : (s = i, c = 0, l = a), s = Math.round((s + o) * 255), c = Math.round((c + o) * 255), l = Math.round((l + o) * 255), `rgba(${s},${c},${l},${r})`;
+		}, J = () => {
+			U.value = q(V.h, V.s, V.l, V.a), M("update:modelValue", U.value);
+		}, Y = () => {
+			let e = 255, t = 0, n = 0, r = 1;
+			if (c.modelValue.startsWith("#")) {
+				let i = c.modelValue.slice(1), a = i;
+				i.length === 3 && (a = i.split("").map((e) => e + e).join("")), e = parseInt(a.substring(0, 2), 16), t = parseInt(a.substring(2, 4), 16), n = parseInt(a.substring(4, 6), 16), a.length === 8 && (r = parseInt(a.substring(6, 8), 16) / 255);
+			} else if (c.modelValue.startsWith("rgba")) {
+				let i = c.modelValue.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+				i && (e = Number(i[1]), t = Number(i[2]), n = Number(i[3]), r = Number(i[4]));
+			} else if (c.modelValue.startsWith("rgb")) {
+				let r = c.modelValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+				r && (e = Number(r[1]), t = Number(r[2]), n = Number(r[3]));
+			}
+			let i = K(e, t, n);
+			V.h = i.h, V.s = i.s, V.l = i.l, V.a = r;
+			let a = document.querySelector(".color-picker-area");
+			a && $(V, a);
+		}, X = (e) => {
+			if (e.currentTarget !== e.target) return;
+			let t = e.currentTarget, n = t.getBoundingClientRect(), r = e.clientX - n.left, i = e.clientY - n.top, a = Math.max(0, Math.min(r, n.width)), o = Math.max(0, Math.min(i, n.height));
+			V.s = a / n.width * 100;
+			let s = a / n.width, c = o / n.height, l = 100 * (1 - c);
+			V.l = l + s * (50 * (1 - c) - l), V.s = Math.max(0, Math.min(V.s, 100)), V.l = Math.max(0, Math.min(V.l, 100)), $(V, t), U.value = q(V.h, V.s, V.l, V.a), M("update:modelValue", U.value), document.onmousemove = (e) => {
+				let n = t.getBoundingClientRect(), r = e.clientX - n.left, i = e.clientY - n.top, a = Math.max(0, Math.min(r, n.width)), o = Math.max(0, Math.min(i, n.height));
+				V.s = a / n.width * 100;
+				let s = a / n.width, c = o / n.height, l = 100 * (1 - c);
+				V.l = l + s * (50 * (1 - c) - l), V.s = Math.max(0, Math.min(V.s, 100)), V.l = Math.max(0, Math.min(V.l, 100)), $(V, t), U.value = q(V.h, V.s, V.l, V.a), M("update:modelValue", U.value);
+			}, document.onmouseup = () => {
+				document.onmouseup = null, document.onmousemove = null;
+			};
+		}, Z = (e) => {
+			let t = e.target;
+			V.h = Number(t.value), J();
+		}, Q = (e) => {
+			let t = e.target;
+			V.a = parseFloat(Number(t.value).toFixed(2)), J();
+		}, $ = (e, t) => {
+			let n = t.getBoundingClientRect();
+			H.x = e.s / 100 * n.width;
+			let r = 100 - .5 * e.s;
+			H.y = (r > 0 ? 1 - e.l / r : 0) * n.height;
+		}, te = async () => {
+			if ("EyeDropper" in window) try {
+				let e = (await new window.EyeDropper().open()).sRGBHex, t = 0, n = 0, r = 0, i = 1, a = e.replace("#", "");
+				a.length === 6 ? (t = parseInt(a.substring(0, 2), 16), n = parseInt(a.substring(2, 4), 16), r = parseInt(a.substring(4, 6), 16)) : a.length === 8 && (t = parseInt(a.substring(0, 2), 16), n = parseInt(a.substring(2, 4), 16), r = parseInt(a.substring(4, 6), 16), i = parseInt(a.substring(6, 8), 16) / 255);
+				let o = K(t, n, r);
+				V.h = o.h, V.s = o.s, V.l = o.l, V.a = i;
+				let s = document.querySelector(".color-picker-area");
+				s && $(V, s), U.value = q(V.h, V.s, V.l, V.a), M("update:modelValue", U.value);
+			} catch {
+				console.log("Color selection canceled");
+			}
+			else alert("您的浏览器不支持颜色提取功能，请使用最新版本的Chrome或Edge浏览器。");
 		};
 		return d(() => {
-			let e = () => F.value = !1;
-			document.addEventListener("click", e), z(), f(() => {
+			let e = () => {
+				B.value = !1;
+			};
+			document.addEventListener("click", e), f(() => {
 				document.removeEventListener("click", e);
 			});
 		}), (e, d) => (p(), a("div", {
 			class: l(["e-color-picker", [c.size]]),
 			ref_key: "eColorPickerRef",
-			ref: B
-		}, [o("div", {
+			ref: W
+		}, [(p(), a("div", {
 			class: "color-display",
-			style: u({ backgroundColor: R.value }),
-			onClick: S(N, ["stop"]),
+			key: c.modelValue,
+			style: u({ backgroundColor: c.modelValue }),
+			onClick: b(G, ["stop"]),
 			title: "点击选择颜色"
-		}, null, 4), (p(), r(t, { to: "body" }, [s(n, { onEnter: d[5] ||= (e) => {
-			e.animate([{
-				transform: "scale(0.9)",
-				opacity: 0
-			}, {
-				transform: "scale(1)",
-				opacity: 1
-			}], {
-				duration: 0,
-				easing: "ease-in-out"
-			}).play();
-		} }, {
-			default: b(() => [F.value ? (p(), a("div", {
+		}, null, 4)), (p(), r(t, { to: "body" }, [s(n, { name: "e-color-picker-transition" }, {
+			default: y(() => [B.value ? (p(), a("div", {
 				key: 0,
-				style: u([{
-					position: "fixed",
-					width: "280px",
-					padding: "16px",
-					background: "#fff",
-					filter: "var(--e-drop-shadow-medium)"
-				}, {
+				class: "e-color-picker-popup",
+				onClick: d[0] ||= b(() => {}, ["stop"]),
+				style: u({
 					borderRadius: `var(--e-border-radius-${c.size})`,
-					left: _(D).left + "px",
-					top: _(D).top + "px",
-					transform: `translateX(${_(D).translateX}) translateY(${_(D).translateY})`
-				}]),
-				onClick: d[4] ||= S(() => {}, ["stop"])
+					left: R.left + "px",
+					top: R.top + "px",
+					transform: `translateX(${R.translateX}) translateY(${R.translateY})`
+				})
 			}, [
 				o("div", {
 					class: "e-select-arrow",
 					style: u({
-						position: "fixed",
-						height: `${_(A)}px`,
-						width: `${_(A)}px`,
-						left: _(j).left,
-						top: _(j).top,
-						clipPath: _(j).clipPath
+						height: `${_(I)}px`,
+						width: `${_(I)}px`,
+						left: _(L).left,
+						top: _(L).top,
+						clipPath: _(L).clipPath
 					})
 				}, null, 4),
-				o("div", {
-					style: {
-						position: "relative",
-						width: "100%",
-						height: "200px",
-						background: "linear-gradient(\n                                    to right,\n                                    #f00,\n                                    #ff0,\n                                    #0f0,\n                                    #0ff,\n                                    #00f,\n                                    #f0f,\n                                    #f00\n                                ),\n                                linear-gradient(to top, #000, transparent)",
-						"background-blend-mode": "multiply",
-						cursor: "crosshair",
-						overflow: "hidden"
-					},
-					onMousedown: d[0] ||= (e) => {
-						let t = e.currentTarget;
-						t.onmousemove = (e) => {
-							let n = t.getBoundingClientRect();
-							L.x = e.offsetX, L.y = e.offsetY, V(L.x / n.width * 360, 100, 100 - L.y / n.height * 100);
-						};
-					},
-					onMouseup: d[1] ||= (e) => {
-						let t = e.currentTarget;
-						t.onmousemove = null;
-					}
+				o("div", x, [o("div", {
+					class: "color-picker-area",
+					onMousedown: X,
+					style: u({
+						background: `linear-gradient(to right, #fff, hsl(${V.h}, 100%, 50%)), linear-gradient(to top, #000, transparent)`,
+						backgroundBlendMode: "multiply"
+					})
 				}, [o("div", {
 					class: "color-cursor",
 					style: u({
-						left: `${L.x}px`,
-						top: `${L.y}px`
+						left: `${H.x}px`,
+						top: `${H.y}px`
 					})
-				}, null, 4)], 32),
-				o("div", C, [o("label", null, "透明度：" + g(I.value) + "%", 1), x(o("input", {
+				}, null, 4)], 36)]),
+				o("div", S, [o("button", {
+					class: "color-picker-eye-dropper",
+					onClick: te,
+					title: "提取屏幕颜色"
+				}, " 🎨 "), o("div", C, [o("input", {
 					type: "range",
-					"onUpdate:modelValue": d[2] ||= (e) => I.value = e,
+					class: "hue-slider",
 					min: "0",
-					max: "100",
+					max: "360",
+					value: V.h,
+					onInput: Z
+				}, null, 40, w)])]),
+				o("div", ee, [o("div", T, [d[1] ||= o("span", null, "透明度", -1), o("span", E, g((V.a * 100).toFixed(0)) + "%", 1)]), o("div", D, [o("input", {
+					type: "range",
 					class: "alpha-slider",
-					onInput: d[3] ||= () => {
-						let e = R.value.match(/rgba\((\d+),\s*(\d+),\s*(\d+)/);
-						e && (R.value = `rgba(${e[1]},${e[2]},${e[3]},${I.value / 100})`, P("update:modelValue", R.value));
-					}
-				}, null, 544), [[
-					y,
-					I.value,
-					void 0,
-					{ number: !0 }
-				]])]),
-				o("div", w, [
-					d[6] ||= o("span", null, "当前颜色：", -1),
-					o("div", {
-						class: "preview-color",
-						style: u({ backgroundColor: R.value })
-					}, null, 4),
-					o("span", T, g(R.value), 1)
-				])
+					min: "0",
+					max: "1",
+					step: "0.01",
+					value: V.a,
+					onInput: Q,
+					style: u({ background: `linear-gradient(to right, rgba(0, 0, 0, 0), hsl(${V.h}, ${V.s}%, ${V.l}%))` })
+				}, null, 44, O)])]),
+				o("div", k, [(p(), a("div", {
+					class: "preview-color",
+					key: c.modelValue,
+					style: u({ backgroundColor: c.modelValue })
+				}, null, 4)), o("span", A, g(c.modelValue), 1)])
 			], 4)) : i("", !0)]),
 			_: 1
 		})]))], 2));
 	}
 });
 //#endregion
-export { E as default };
+export { j as default };

package/dist/packages/exploria-ui/src/components/form/EConditionGroup/EConditionGroup.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./EConditionGroup.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                     */
 //#region src/components/form/EConditionGroup/EConditionGroup.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-70a57319"]]);
+var n = e(t, [["__scopeId", "data-v-70a57319"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/EConditionGroup/EConditionGroup.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,7 @@ var h = { class: "e-condition-group" }, g = {
 		marginTop: "8px",
 		marginBottom: "8px"
 	}
-}, y = 32, b = 16, x = /* @__PURE__ */ c({
+}, y = 32, b = 16, x = c({
 	__name: "EConditionGroup",
 	props: {
 		conditionGroup: {},

package/dist/packages/exploria-ui/src/components/form/EFileSelector.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./EFileSelector.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                   */
 //#region src/components/form/EFileSelector.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-7f8021b6"]]);
+var n = e(t, [["__scopeId", "data-v-f3de71b8"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/EFileSelector.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { createElementBlock as e, createElementVNode as t, defineComponent as n, normalizeClass as r, openBlock as i, ref as a, renderSlot as o, toDisplayString as s, withModifiers as c } from "vue";
 //#region src/components/form/EFileSelector.vue?vue&type=script&setup=true&lang.ts
-var l = /* @__PURE__ */ n({
+var l = n({
 	__name: "EFileSelector",
 	props: {
 		accessFileTypes: {},
@@ -8,9 +8,7 @@ var l = /* @__PURE__ */ n({
 	},
 	emits: ["change"],
 	setup(n, { emit: l }) {
-		let u = a(null);
-		console.log(n.accessFileTypes);
-		let d = l, f = () => {
+		let u = a(null), d = l, f = () => {
 			let e = document.createElement("input");
 			e.type = "file", e.accept = "video/*", e.onchange = (t) => {
 				u.value = t.target?.files?.[0] ?? null, u.value && d("change", u.value), e.remove();

package/dist/packages/exploria-ui/src/components/form/EForm.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./EForm.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/components/form/EForm.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-d68eaae7"]]);
+var n = e(t, [["__scopeId", "data-v-d68eaae7"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/EForm.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, provide as a, renderSlot as o, withModifiers as s } from "vue";
 //#region src/components/form/EForm.vue?vue&type=script&setup=true&lang.ts
-var c = /* @__PURE__ */ n({
+var c = n({
 	__name: "EForm",
 	props: {
 		labelPosition: { default: "left" },

package/dist/packages/exploria-ui/src/components/form/EFormItem.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./EFormItem.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                               */
 //#region src/components/form/EFormItem.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-03331f6d"]]);
+var n = e(t, [["__scopeId", "data-v-03331f6d"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/EFormItem.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { Transition as e, computed as t, createCommentVNode as n, createElementB
 var _ = {
 	key: 0,
 	class: "e-form-item__required"
-}, v = { class: "e-form-item__content" }, y = /* @__PURE__ */ s({
+}, v = { class: "e-form-item__content" }, y = s({
 	__name: "EFormItem",
 	props: {
 		label: {},

package/dist/packages/exploria-ui/src/components/form/EInput/EInput.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./EInput.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                            */
 //#region src/components/form/EInput/EInput.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-54cde9c9"]]);
+var n = e(t, [["__scopeId", "data-v-54cde9c9"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/EInput/EInput.vue_vue_type_script_setup_true_lang.js

@@ -21,7 +21,7 @@ var y = {
 }, T = {
 	key: 7,
 	class: "e-input__suffix"
-}, E = ["src"], D = /* @__PURE__ */ i({
+}, E = ["src"], D = i({
 	__name: "EInput",
 	props: {
 		type: {},

package/dist/packages/exploria-ui/src/components/form/ERadio.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ERadio.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                            */
 //#region src/components/form/ERadio.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-a51ea617"]]);
+var n = e(t, [["__scopeId", "data-v-a51ea617"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/ERadio.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ var s = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "200",
 	height: "200"
-}, c = { class: "e-radio__label" }, l = /* @__PURE__ */ r({
+}, c = { class: "e-radio__label" }, l = r({
 	__name: "ERadio",
 	props: {
 		modelValue: {

package/dist/packages/exploria-ui/src/components/form/ESelect/ESelect.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ESelect.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                             */
 //#region src/components/form/ESelect/ESelect.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-8393a1c7"]]);
+var n = e(t, [["__scopeId", "data-v-940200e9"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/ESelect/ESelect.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import e from "../../../utils/EUUIDUtil.js";
 import { usePosition as t } from "../../hooks/usePosition.js";
 import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, isRef as m, normalizeClass as h, normalizeStyle as g, onMounted as _, onUnmounted as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, unref as C, useTemplateRef as w, withCtx as T, withModifiers as E } from "vue";
 //#region src/components/form/ESelect/ESelect.vue?vue&type=script&setup=true&lang.ts
-var D = ["data-id"], O = ["onClick"], k = /* @__PURE__ */ f({
+var D = ["data-id"], O = ["onClick"], k = f({
 	__name: "ESelect",
 	props: {
 		modelValue: {},
@@ -15,7 +15,7 @@ var D = ["data-id"], O = ["onClick"], k = /* @__PURE__ */ f({
 		let A = k, j = a({
 			get: () => f.modelValue,
 			set: (e) => A("update:model-value", e)
-		}), M = b(!1), N = w("eSelectRef"), { position: P, arrowPosition: F, arrowSize: I, resetPosition: L, computePositionByRect: R, _computePosition: z } = t(a(() => `bottom-${f.placement}`).value, f.size, !0), B = () => M.value = !1;
+		}), M = b(!1), N = w("eSelectRef"), { position: P, arrowPosition: F, arrowSize: I, resetPosition: L, computePositionByRect: R, trackPosition: z } = t(a(() => `bottom-${f.placement}`).value, f.size, !0), B = () => M.value = !1;
 		_(() => {
 			window.addEventListener("click", B);
 		}), v(() => {

package/dist/packages/exploria-ui/src/components/form/ESlider.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ESlider.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                             */
 //#region src/components/form/ESlider.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-360719d0"]]);
+var n = e(t, [["__scopeId", "data-v-1a1d6126"]]);
 //#endregion
 export { n as default };

package/dist/packages/exploria-ui/src/components/form/ESlider.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import e from "../feedback/ETooltip.vue.js";
 import { createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, useTemplateRef as l, watchEffect as u, withCtx as d, withModifiers as f } from "vue";
 //#region src/components/form/ESlider.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ i({
+var p = i({
 	__name: "ESlider",
 	props: {
 		modelValue: {},

package/dist/packages/exploria-ui/src/components/form/ETimePicker.vue.js

@@ -2,6 +2,6 @@ import e from "../../../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./ETimePicker.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                                 */
 //#region src/components/form/ETimePicker.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-29f6aca7"]]);
+var n = e(t, [["__scopeId", "data-v-15a4e704"]]);
 //#endregion
 export { n as default };