@icc-grow/web-components 1.0.0

package/dist/es/components/i-color-picker/src/color-picker-panel.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,79 @@
+import e from "./components/ColorPickerPanel.mjs";
+import { useColorState as t } from "./hooks/useColorState.mjs";
+import { createBlock as n, defineComponent as r, openBlock as i, unref as a } from "vue";
+//#region src/components/i-color-picker/src/color-picker-panel.vue?vue&type=script&setup=true&lang.ts
+var o = /* @__PURE__ */ r({
+	name: "i-color-picker-panel",
+	__name: "color-picker-panel",
+	props: {
+		modelValue: { default: "#ff0000" },
+		format: { default: "hex" },
+		showAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		swatches: { default: () => [] }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear"
+	],
+	setup(r, { emit: o }) {
+		let s = r, c = o, { hsva: l, huePercent: u, alphaPercent: d, panelBgColor: f, rgbString: p, updateSV: m, updateHue: h, updateAlpha: g, setColor: _, getOutput: v } = t({
+			modelValue: () => s.modelValue,
+			format: () => s.format,
+			showAlpha: () => s.showAlpha
+		});
+		function y(e, t) {
+			m(e, t), c("update:modelValue", v());
+		}
+		function b(e) {
+			h(e), c("update:modelValue", v());
+		}
+		function x(e) {
+			g(e), c("update:modelValue", v());
+		}
+		function S(e) {
+			_(e), c("update:modelValue", v());
+		}
+		function C(e) {
+			_(e), c("update:modelValue", v());
+		}
+		function w() {
+			let e = v();
+			c("update:modelValue", e), c("change", e);
+		}
+		function T() {
+			c("clear");
+		}
+		return (t, r) => (i(), n(e, {
+			hsva: a(l),
+			"hue-percent": a(u),
+			"alpha-percent": a(d),
+			"panel-bg-color": a(f),
+			"rgb-string": a(p),
+			"show-alpha": s.showAlpha,
+			swatches: s.swatches ?? [],
+			format: s.format,
+			onSvChange: y,
+			onHueChange: b,
+			onAlphaChange: x,
+			onInputChange: S,
+			onSwatchSelect: C,
+			onConfirm: w,
+			onClear: T
+		}, null, 8, [
+			"hsva",
+			"hue-percent",
+			"alpha-percent",
+			"panel-bg-color",
+			"rgb-string",
+			"show-alpha",
+			"swatches",
+			"format"
+		]));
+	}
+});
+//#endregion
+export { o as default };

package/dist/es/components/i-color-picker/src/color-picker.mjs

@@ -0,0 +1,7 @@
+import e from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./color-picker.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                              */
+//#region src/components/i-color-picker/src/color-picker.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-8e6b0c6a"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-color-picker/src/color-picker.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,90 @@
+import e from "../../i-popover/index.mjs";
+import { useFormItemA11y as t } from "../../i-form-item/src/useFormItemA11y.mjs";
+import n from "./color-picker-panel.mjs";
+import { computed as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, ref as d, unref as f, withCtx as p } from "vue";
+//#region src/components/i-color-picker/src/color-picker.vue?vue&type=script&setup=true&lang.ts
+var m = [
+	"id",
+	"name",
+	"title",
+	"disabled",
+	"aria-invalid",
+	"aria-required",
+	"aria-describedby"
+], h = /* @__PURE__ */ s({
+	name: "i-color-picker",
+	__name: "color-picker",
+	props: {
+		modelValue: { default: "#ff0000" },
+		format: { default: "hex" },
+		showAlpha: {
+			type: Boolean,
+			default: !1
+		},
+		swatches: { default: () => [] },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		panelWidth: { default: 300 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear"
+	],
+	setup(s, { emit: h }) {
+		let g = s, _ = h, { inputId: v, isError: y, isRequired: b, ariaDescribedby: x } = t(), S = r(() => v.value), C = d(!1), w = d(g.modelValue ?? "");
+		function T(e) {
+			w.value = e, _("update:modelValue", e), _("change", e), C.value = !1;
+		}
+		function E() {
+			w.value = "", _("update:modelValue", ""), _("clear"), C.value = !1;
+		}
+		return (t, r) => (u(), i("div", { class: c(["i-color-picker", { "is-disabled": g.disabled }]) }, [o(f(e), {
+			visible: C.value,
+			"onUpdate:visible": r[0] ||= (e) => C.value = e,
+			trigger: "click",
+			placement: "bottom",
+			disabled: g.disabled,
+			offset: 6,
+			"show-arrow": !1,
+			width: g.panelWidth
+		}, {
+			content: p(() => [o(n, {
+				"model-value": w.value,
+				format: g.format,
+				"show-alpha": g.showAlpha,
+				swatches: g.swatches,
+				onChange: T,
+				onClear: E
+			}, null, 8, [
+				"model-value",
+				"format",
+				"show-alpha",
+				"swatches"
+			])]),
+			default: p(() => [a("button", {
+				id: f(v),
+				type: "button",
+				name: S.value,
+				class: c(["i-color-picker__trigger p-0 m-0 outline-none bg-transparent border-none", { "is-disabled": g.disabled }]),
+				title: w.value,
+				disabled: g.disabled,
+				"aria-invalid": f(y) ? "true" : void 0,
+				"aria-required": f(b) ? "true" : void 0,
+				"aria-describedby": f(x)
+			}, [r[1] ||= a("div", { class: "i-color-picker__trigger-checker" }, null, -1), a("div", {
+				class: "i-color-picker__trigger-color",
+				style: l({ backgroundColor: w.value || "transparent" })
+			}, null, 4)], 10, m)]),
+			_: 1
+		}, 8, [
+			"visible",
+			"disabled",
+			"width"
+		])], 2));
+	}
+});
+//#endregion
+export { h as default };

package/dist/es/components/i-color-picker/src/components/AlphaSlider.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./AlphaSlider.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                             */
+//#region src/components/i-color-picker/src/components/AlphaSlider.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-ba0b5cbd"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-color-picker/src/components/AlphaSlider.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,47 @@
+import { useDrag as e } from "../hooks/useDrag.mjs";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, unref as l } from "vue";
+//#region src/components/i-color-picker/src/components/AlphaSlider.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ i({
+	name: "i-color-picker-alpha-slider",
+	__name: "AlphaSlider",
+	props: {
+		alpha: {},
+		rgbColor: {}
+	},
+	emits: ["change"],
+	setup(i, { emit: u }) {
+		let d = i, f = u, p = c(null), m = {
+			backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+			backgroundSize: "8px 8px",
+			backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px",
+			backgroundColor: "#fff"
+		}, h = t(() => ({ background: `linear-gradient(to right, transparent, ${d.rgbColor})` })), g = t(() => ({
+			left: `${d.alpha * 100}%`,
+			width: "16px",
+			height: "16px"
+		})), { isDragging: _, handleMouseDown: v } = e(p, (e) => {
+			f("change", Math.round(e.x * 100) / 100);
+		});
+		return (e, t) => (s(), n("div", {
+			class: "i-color-picker__alpha relative h-10 w-full cursor-pointer select-none rounded-5",
+			onMousedown: t[0] ||= (...e) => l(v) && l(v)(...e)
+		}, [
+			r("div", {
+				class: "absolute inset-0 overflow-hidden rounded-5",
+				style: m
+			}),
+			r("div", {
+				ref_key: "sliderRef",
+				ref: p,
+				class: "absolute inset-0 rounded-5",
+				style: o(h.value)
+			}, null, 4),
+			r("div", {
+				class: a(["i-color-picker__alpha-thumb absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md transition-transform", { "scale-125": l(_) }]),
+				style: o(g.value)
+			}, null, 6)
+		], 32));
+	}
+});
+//#endregion
+export { u as default };

package/dist/es/components/i-color-picker/src/components/ColorInput.mjs

@@ -0,0 +1,5 @@
+import e from "./ColorInput.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/i-color-picker/src/components/ColorInput.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/components/i-color-picker/src/components/ColorInput.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,261 @@
+import { useId as e } from "../../../../utils/use-id.mjs";
+import t from "../../../i-button/index.mjs";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, vShow as h, watch as g, withCtx as _, withDirectives as v, withKeys as y } from "vue";
+import { colord as b } from "colord";
+//#region src/components/i-color-picker/src/components/ColorInput.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "i-color-picker__input flex items-center gap-2" }, S = {
+	key: 0,
+	class: "flex flex-1 flex-col items-center gap-1"
+}, C = [
+	"id",
+	"name",
+	"value"
+], w = [
+	"id",
+	"name",
+	"min",
+	"max",
+	"step",
+	"value",
+	"onChange"
+], T = [
+	"id",
+	"name",
+	"min",
+	"max",
+	"step",
+	"value",
+	"onChange"
+], E = {
+	key: 3,
+	class: "flex flex-col items-center gap-1",
+	style: { width: "40px" }
+}, D = [
+	"id",
+	"name",
+	"value"
+], O = { class: "text-xs text-black-40" }, k = /* @__PURE__ */ c({
+	name: "i-color-picker-input",
+	__name: "ColorInput",
+	props: {
+		hue: {},
+		saturation: {},
+		value: {},
+		alpha: {},
+		showAlpha: { type: Boolean },
+		format: {},
+		showLabel: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["change"],
+	setup(c, { emit: k }) {
+		let A = c, j = k, M = e(), N = d(A.format === "hsl" ? "hsl" : A.format === "rgb" ? "rgb" : "hex");
+		function P(e) {
+			return `${M}-${e}`;
+		}
+		function F(e) {
+			return `color-${M}-${e}`;
+		}
+		let I = r(() => b({
+			h: A.hue,
+			s: A.saturation * 100,
+			v: A.value * 100,
+			a: A.alpha
+		})), L = d(""), R = d(!1);
+		g(() => [
+			A.hue,
+			A.saturation,
+			A.value,
+			A.alpha
+		], () => {
+			if (N.value === "hex") {
+				let e = I.value;
+				L.value = A.showAlpha && A.alpha < 1 ? e.toHex() : e.alpha(1).toHex();
+			}
+		}, { immediate: !0 });
+		function z(e) {
+			L.value = e.target.value, R.value = !1;
+		}
+		function B() {
+			let e = L.value.trim(), t = e.startsWith("#") ? e : `#${e}`;
+			b(t).isValid() ? (R.value = !1, j("change", t)) : R.value = !0;
+		}
+		let V = [
+			{
+				label: "R",
+				min: 0,
+				max: 255,
+				step: 1
+			},
+			{
+				label: "G",
+				min: 0,
+				max: 255,
+				step: 1
+			},
+			{
+				label: "B",
+				min: 0,
+				max: 255,
+				step: 1
+			}
+		], H = V, U = d([
+			!1,
+			!1,
+			!1
+		]), W = r(() => {
+			let { r: e, g: t, b: n } = I.value.toRgb();
+			return [
+				e,
+				t,
+				n
+			];
+		});
+		function G(e, t) {
+			let n = e.target, r = Number(n.value), i = V[t];
+			if (isNaN(r) || r < i.min || r > i.max) {
+				U.value[t] = !0;
+				return;
+			}
+			U.value[t] = !1;
+			let a = [...W.value];
+			a[t] = r, j("change", `rgba(${a[0]}, ${a[1]}, ${a[2]}, ${A.alpha})`);
+		}
+		let K = [
+			{
+				label: "H",
+				min: 0,
+				max: 360,
+				step: 1
+			},
+			{
+				label: "S%",
+				min: 0,
+				max: 100,
+				step: 1
+			},
+			{
+				label: "L%",
+				min: 0,
+				max: 100,
+				step: 1
+			}
+		], q = K, J = d([
+			!1,
+			!1,
+			!1
+		]), Y = r(() => {
+			let { h: e, s: t, l: n } = I.value.toHsl();
+			return [
+				Math.round(e),
+				Math.round(t),
+				Math.round(n)
+			];
+		});
+		function X(e, t) {
+			let n = e.target, r = Number(n.value), i = K[t];
+			if (isNaN(r) || r < i.min || r > i.max) {
+				J.value[t] = !0;
+				return;
+			}
+			J.value[t] = !1;
+			let a = [...Y.value];
+			a[t] = r, j("change", `hsla(${a[0]}, ${a[1]}%, ${a[2]}%, ${A.alpha})`);
+		}
+		let Z = r(() => Math.round(A.alpha * 100));
+		function Q(e) {
+			let t = Number(e.target.value);
+			if (isNaN(t) || t < 0 || t > 100) return;
+			let { r: n, g: r, b: i } = I.value.toRgb();
+			j("change", `rgba(${n}, ${r}, ${i}, ${t / 100})`);
+		}
+		let $ = [
+			"hex",
+			"rgb",
+			"hsl"
+		];
+		function ee() {
+			if (N.value = $[($.indexOf(N.value) + 1) % $.length], N.value === "hex") {
+				let e = I.value;
+				L.value = A.showAlpha && A.alpha < 1 ? e.toHex() : e.alpha(1).toHex();
+			}
+			R.value = !1, U.value = [
+				!1,
+				!1,
+				!1
+			], J.value = [
+				!1,
+				!1,
+				!1
+			];
+		}
+		return (e, r) => (u(), a("div", x, [
+			N.value === "hex" ? (u(), a("div", S, [o("input", {
+				id: P("hex"),
+				name: F("hex"),
+				class: l(["i-color-picker__input-field h-26 w-full rounded-5 border border-solid border-black-20 bg-transparent px-2 text-center text-xs outline-none transition-colors focus:border-primary", { "border-danger": R.value }]),
+				value: L.value,
+				maxlength: "9",
+				spellcheck: "false",
+				onInput: z,
+				onBlur: B,
+				onKeydown: y(B, ["enter"])
+			}, null, 42, C), v(o("span", { class: "text-xs text-black-40" }, p(c.showAlpha ? "HEX(A)" : "HEX"), 513), [[h, c.showLabel]])])) : N.value === "rgb" ? (u(!0), a(n, { key: 1 }, f(m(H), (e, t) => (u(), a("div", {
+				key: e.label,
+				class: "flex flex-1 flex-col items-center gap-1"
+			}, [o("input", {
+				id: P(`rgb-${e.label.toLowerCase()}`),
+				name: F(`rgb-${e.label.toLowerCase()}`),
+				class: l(["i-color-picker__input-field h-26 w-full rounded-5 border border-solid border-black-20 bg-transparent px-1 text-center text-xs outline-none transition-colors focus:border-primary", { "border-danger": U.value[t] }]),
+				type: "number",
+				min: e.min,
+				max: e.max,
+				step: e.step,
+				value: W.value[t],
+				onChange: (e) => G(e, t)
+			}, null, 42, w), v(o("span", { class: "text-xs text-black-40" }, p(e.label), 513), [[h, c.showLabel]])]))), 128)) : (u(!0), a(n, { key: 2 }, f(m(q), (e, t) => (u(), a("div", {
+				key: e.label,
+				class: "flex flex-1 flex-col items-center gap-1"
+			}, [o("input", {
+				id: P(`hsl-${e.label.toLowerCase().replace("%", "p")}`),
+				name: F(`hsl-${e.label.toLowerCase().replace("%", "p")}`),
+				class: l(["i-color-picker__input-field h-26 w-full rounded-5 border border-solid border-black-20 bg-transparent px-1 text-center text-xs outline-none transition-colors focus:border-primary", { "border-danger": J.value[t] }]),
+				type: "number",
+				min: e.min,
+				max: e.max,
+				step: e.step,
+				value: Y.value[t],
+				onChange: (e) => X(e, t)
+			}, null, 42, T), v(o("span", { class: "text-xs text-black-40" }, p(e.label), 513), [[h, c.showLabel]])]))), 128)),
+			c.showAlpha && N.value !== "hex" ? (u(), a("div", E, [o("input", {
+				id: P("alpha"),
+				name: F("alpha"),
+				class: "i-color-picker__input-field h-26 w-full rounded-5 border border-solid border-black-20 bg-transparent px-1 text-center text-xs outline-none transition-colors focus:border-primary",
+				type: "number",
+				min: "0",
+				max: "100",
+				step: "1",
+				value: Z.value,
+				onChange: Q
+			}, null, 40, D), v(o("span", O, "A%", 512), [[h, c.showLabel]])])) : i("", !0),
+			s(m(t), {
+				class: "i-color-picker__input-switch shrink-0",
+				text: "",
+				size: "small",
+				title: "切换颜色格式",
+				onClick: ee
+			}, {
+				default: _(() => [...r[0] ||= [o("span", { class: "flex flex-col items-center gap-0.5" }, [
+					o("span", { class: "block h-0.5 w-3 rounded-full bg-black-40" }),
+					o("span", { class: "block h-0.5 w-3 rounded-full bg-black-40" }),
+					o("span", { class: "block h-0.5 w-3 rounded-full bg-black-40" })
+				], -1)]]),
+				_: 1
+			})
+		]));
+	}
+});
+//#endregion
+export { k as default };

package/dist/es/components/i-color-picker/src/components/ColorPanel.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./ColorPanel.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                            */
+//#region src/components/i-color-picker/src/components/ColorPanel.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-86c0964f"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-color-picker/src/components/ColorPanel.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,49 @@
+import { useDrag as e } from "../hooks/useDrag.mjs";
+import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, unref as l } from "vue";
+//#region src/components/i-color-picker/src/components/ColorPanel.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ i({
+	name: "i-color-picker-panel",
+	__name: "ColorPanel",
+	props: {
+		saturation: {},
+		value: {},
+		bgColor: {},
+		height: { default: 160 }
+	},
+	emits: ["change"],
+	setup(i, { emit: u }) {
+		let d = i, f = u, p = c(null), m = t(() => ({
+			backgroundColor: d.bgColor,
+			height: `${d.height}px`
+		})), h = t(() => ({
+			left: `${d.saturation * 100}%`,
+			top: `${(1 - d.value) * 100}%`,
+			width: "12px",
+			height: "12px"
+		})), { isDragging: g, handleMouseDown: _ } = e(p, (e) => {
+			f("change", e.x, 1 - e.y);
+		});
+		return (e, t) => (s(), n("div", {
+			ref_key: "panelRef",
+			ref: p,
+			class: "i-color-picker__panel relative w-full cursor-crosshair select-none overflow-hidden rounded-md",
+			style: o(m.value),
+			onMousedown: t[0] ||= (...e) => l(_) && l(_)(...e)
+		}, [
+			t[1] ||= r("div", {
+				class: "absolute inset-0",
+				style: { background: "linear-gradient(to right, #fff, transparent)" }
+			}, null, -1),
+			t[2] ||= r("div", {
+				class: "absolute inset-0",
+				style: { background: "linear-gradient(to bottom, transparent, #000)" }
+			}, null, -1),
+			r("div", {
+				class: a(["i-color-picker__panel-thumb absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-md transition-shadow", { "scale-110 shadow-lg": l(g) }]),
+				style: o(h.value)
+			}, null, 6)
+		], 36));
+	}
+});
+//#endregion
+export { u as default };

package/dist/es/components/i-color-picker/src/components/ColorPickerPanel.mjs

@@ -0,0 +1,7 @@
+import e from "../../../../_virtual/_plugin-vue_export-helper.mjs";
+import t from "./ColorPickerPanel.vue_vue_type_script_setup_true_lang.mjs";
+/* empty css                                                                  */
+//#region src/components/i-color-picker/src/components/ColorPickerPanel.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-5dbdcfa9"]]);
+//#endregion
+export { n as default };

package/dist/es/components/i-color-picker/src/components/ColorPickerPanel.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,101 @@
+import e from "../../../i-button/index.mjs";
+import t from "./ColorPanel.mjs";
+import n from "./HueSlider.mjs";
+import r from "./AlphaSlider.mjs";
+import i from "./ColorInput.mjs";
+import a from "./ColorSwatches.mjs";
+import { createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, openBlock as p, unref as m, withCtx as h } from "vue";
+//#region src/components/i-color-picker/src/components/ColorPickerPanel.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "i-color-picker__panel-wrapper flex flex-col gap-8" }, _ = { class: "flex gap-8" }, v = { class: "flex items-center gap-2" }, y = /* @__PURE__ */ f({
+	name: "i-color-picker-panel",
+	__name: "ColorPickerPanel",
+	props: {
+		hsva: {},
+		huePercent: {},
+		alphaPercent: {},
+		panelBgColor: {},
+		rgbString: {},
+		showAlpha: { type: Boolean },
+		swatches: {},
+		format: {}
+	},
+	emits: [
+		"svChange",
+		"hueChange",
+		"alphaChange",
+		"inputChange",
+		"swatchSelect",
+		"confirm",
+		"clear"
+	],
+	setup(f, { emit: y }) {
+		let b = y;
+		return (y, x) => (p(), c("div", g, [
+			l("div", _, [d(t, {
+				class: "flex-1",
+				saturation: f.hsva.s,
+				value: f.hsva.v,
+				"bg-color": f.panelBgColor,
+				height: 160,
+				onChange: x[0] ||= (e, t) => b("svChange", e, t)
+			}, null, 8, [
+				"saturation",
+				"value",
+				"bg-color"
+			]), d(n, {
+				percent: f.huePercent,
+				height: 160,
+				onChange: x[1] ||= (e) => b("hueChange", e)
+			}, null, 8, ["percent"])]),
+			f.showAlpha ? (p(), o(r, {
+				key: 0,
+				alpha: f.alphaPercent,
+				"rgb-color": f.rgbString,
+				onChange: x[2] ||= (e) => b("alphaChange", e)
+			}, null, 8, ["alpha", "rgb-color"])) : s("", !0),
+			f.swatches.length > 0 ? (p(), o(a, {
+				key: 1,
+				swatches: f.swatches,
+				onSelect: x[3] ||= (e) => b("swatchSelect", e)
+			}, null, 8, ["swatches"])) : s("", !0),
+			l("div", v, [
+				d(i, {
+					class: "flex-1",
+					hue: f.hsva.h,
+					saturation: f.hsva.s,
+					value: f.hsva.v,
+					alpha: f.hsva.a,
+					"show-alpha": f.showAlpha,
+					format: f.format,
+					"show-label": !1,
+					onChange: x[4] ||= (e) => b("inputChange", e)
+				}, null, 8, [
+					"hue",
+					"saturation",
+					"value",
+					"alpha",
+					"show-alpha",
+					"format"
+				]),
+				d(m(e), {
+					type: "black",
+					plain: "",
+					size: "medium",
+					onClick: x[5] ||= (e) => b("clear")
+				}, {
+					default: h(() => [...x[7] ||= [u("清空", -1)]]),
+					_: 1
+				}),
+				d(m(e), {
+					size: "medium",
+					onClick: x[6] ||= (e) => b("confirm")
+				}, {
+					default: h(() => [...x[8] ||= [u("确定", -1)]]),
+					_: 1
+				})
+			])
+		]));
+	}
+});
+//#endregion
+export { y as default };

package/dist/es/components/i-color-picker/src/components/ColorSwatches.mjs

@@ -0,0 +1,5 @@
+import e from "./ColorSwatches.vue_vue_type_script_setup_true_lang.mjs";
+//#region src/components/i-color-picker/src/components/ColorSwatches.vue
+var t = e;
+//#endregion
+export { t as default };