savor-ui 0.26.1 → 0.28.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+# [0.28.0](https://gitee.com/mach552/savor-ui/compare/v0.27.0...v0.28.0) (2026-08-29)
+
+
+### Bug Fixes
+
+* **select:** 修复标签背景和输入框背景同色问题 ([1d79224](https://gitee.com/mach552/savor-ui/commits/1d792247ec47bf0d403791212889bd478bbb68b4))
+
+
+### Features
+
+* **transfer:** 新增穿梭框组件 ([b0f1371](https://gitee.com/mach552/savor-ui/commits/b0f137168c1ccb0b89c3265cee79020d027d6786))
+* **tree:** 新增节点默认插槽 ([565dd84](https://gitee.com/mach552/savor-ui/commits/565dd847d2e0b0ad8fb17477058f1f50ccfda85f))
+
+# [0.27.0](https://gitee.com/mach552/savor-ui/compare/v0.26.1...v0.27.0) (2026-08-29)
+
+
+### Features
+
+* **color-picker:** 新增清空属性 ([1e302a5](https://gitee.com/mach552/savor-ui/commits/1e302a52c2caad68e2f9299d037cd2ebe4cea092))
+
 ## [0.26.1](https://gitee.com/mach552/savor-ui/compare/v0.26.0...v0.26.1) (2026-08-28)
 
 

package/dist/es/components/index.d.ts

@@ -63,6 +63,7 @@ export * from './src/tabs';
 export * from './src/tag';
 export * from './src/text';
 export * from './src/textarea';
+export * from './src/transfer';
 export * from './src/timeline';
 export * from './src/tooltip';
 export * from './src/transition';

package/dist/es/components/index.mjs

@@ -31,8 +31,7 @@ import "./src/chat-sender/index.mjs";
 import "./src/transition/index.mjs";
 import "./src/collapse/types.mjs";
 import "./src/collapse/index.mjs";
-import "./src/tag/index.mjs";
-import "./src/select/index.mjs";
+import "./src/segmented/index.mjs";
 import "./src/color-picker/index.mjs";
 import "./src/date-picker/index.mjs";
 import "./src/datetime-picker/index.mjs";
@@ -69,11 +68,12 @@ import "./src/modal/method.mjs";
 import "./src/modal/index.mjs";
 import "./src/notification/method.mjs";
 import "./src/notification/index.mjs";
+import "./src/tag/index.mjs";
 import "./src/overflow-list/index.mjs";
+import "./src/select/index.mjs";
 import "./src/pagination/index.mjs";
 import "./src/panel/index.mjs";
 import "./src/progress/index.mjs";
-import "./src/segmented/index.mjs";
 import "./src/skeleton/index.mjs";
 import "./src/slider-verify/index.mjs";
 import "./src/space/index.mjs";
@@ -85,10 +85,11 @@ import "./src/switch/index.mjs";
 import "./src/table/types.mjs";
 import "./src/table/index.mjs";
 import "./src/textarea/index.mjs";
-import "./src/timeline/types.mjs";
-import "./src/timeline/index.mjs";
 import "./src/tree/types.mjs";
 import "./src/tree/index.mjs";
+import "./src/transfer/index.mjs";
+import "./src/timeline/types.mjs";
+import "./src/timeline/index.mjs";
 import "./src/tree-select/index.mjs";
 import "./src/upload/index.mjs";
 import "./src/virtual-list/index.mjs";

package/dist/es/components/src/color-picker/color-picker.d.ts

@@ -4,6 +4,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     props: PublicProps & __VLS_PrettifyLocal<(ColorPickerProps & {
         modelValue?: string;
     }) & {
+        onClear?: (() => any) | undefined;
         onChange?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -12,7 +13,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", value: string) => void) & ((event: "update:modelValue", value: string) => void);
+    emit: (((evt: "clear") => void) & ((evt: "change", value: string) => void)) & ((event: "update:modelValue", value: string) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,17 +1,18 @@
 import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
-import { useFormItem as t } from "../form/use-form-item.mjs";
-import { SPopover as n } from "../popover/index.mjs";
-import { SInput as r } from "../input/index.mjs";
-import { SSelect as i } from "../select/index.mjs";
-import { child as a, computed as o, createComponent as s, createFor as c, createIf as l, createInvoker as u, createTemplateRefSetter as d, defineVaporComponent as f, delegateEvents as p, mergeModels as m, next as h, onMounted as g, onUnmounted as _, ref as v, renderEffect as y, setClass as b, setInsertionState as x, setStyle as S, setText as C, template as w, toDisplayString as T, toRefs as E, txt as ee, unref as D, useModel as te, useTemplateRef as ne, watch as O, withVaporModifiers as re } from "vue";
+import { CloseLine as t } from "../../../icons/src/svg/system/index.mjs";
+import { useFormItem as n } from "../form/use-form-item.mjs";
+import { SPopover as r } from "../popover/index.mjs";
+import { SInput as i } from "../input/index.mjs";
+import { SSegmented as a } from "../segmented/index.mjs";
+import { child as o, computed as s, createComponent as c, createFor as l, createIf as u, createInvoker as d, createTemplateRefSetter as f, defineVaporComponent as p, delegateEvents as m, mergeModels as h, next as g, onMounted as _, onUnmounted as v, ref as y, renderEffect as b, setClass as x, setInsertionState as S, setStyle as C, setText as w, template as T, toDisplayString as E, toRefs as D, txt as ee, unref as O, useModel as te, useTemplateRef as ne, watch as k } from "vue";
 //#region ../components/src/color-picker/color-picker.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var ie = w("<div> "), ae = w("<div><div></div></div>"), k = w("<div><div><div></div></div><div></div>"), oe = w("<div>"), se = w("<div><div>预设颜色</div><div>"), ce = w("<div><div><div><div></div><div></div></div><div><div><div><div><div></div></div><div></div></div></div><div><div></div></div></div><div></div>"), le = w("<div>", 1);
-p("mousedown", "click");
-var A = /*@__PURE__*/ f({
+var re = T("<div> "), ie = T("<div><div></div></div>"), ae = T("<div><div><div></div></div><div></div>"), oe = T("<span title=清空>"), se = T("<div>"), ce = T("<div><div>预设颜色</div><div>"), le = T("<div><div><div><div></div><div></div></div><div><div><div><div><div></div></div><div></div></div></div><div><div></div></div></div><div></div>"), ue = T("<div>", 1);
+m("mousedown", "click");
+var A = /*@__PURE__*/ p({
 	name: "SColorPicker",
 	__name: "color-picker",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ h({
 		modelValue: {},
 		format: { default: "hex" },
 		popoverProps: {},
@@ -21,28 +22,33 @@ var A = /*@__PURE__*/ f({
 		showPreset: { type: Boolean },
 		presetColors: {},
 		disabledAlpha: { type: Boolean },
+		clearable: { type: Boolean },
 		error: { type: Boolean }
 	}, {
-		modelValue: { default: "#3867D6" },
+		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ m(["change"], ["update:modelValue"]),
-	setup(f, { emit: p }) {
-		let m = f, w = p, A = e("color-picker"), j = te(f, "modelValue"), { size: ue, error: de } = E(m), { mergedSize: fe, mergedError: M } = t({
-			size: ue,
-			error: de
-		}), N = ne("popoverRef"), P = v(!1), F = (e) => {
-			e ? N.value?.show() : N.value?.hide(), P.value = e;
-		}, pe = () => {
-			m.disabled || (P.value ? F(!1) : F(!0));
-		}, me = () => {
-			F(!1);
-		}, I = v(m.format), L = v({
+	emits: /*@__PURE__*/ h(["change", "clear"], ["update:modelValue"]),
+	setup(p, { emit: m }) {
+		let h = p, T = m, A = e("color-picker"), j = te(p, "modelValue"), { size: de, error: fe } = D(h), { mergedSize: pe, mergedError: me } = n({
+			size: de,
+			error: fe
+		}), M = ne("popoverRef"), N = y(!1), P = (e) => {
+			e ? M.value?.show() : M.value?.hide(), N.value = e;
+		}, he = () => {
+			h.disabled || (N.value ? P(!1) : (Ce(), P(!0)));
+		}, ge = () => {
+			P(!1);
+		}, _e = () => {
+			j.value = "", q.value = "", T("clear");
+		}, ve = (e) => {
+			e.target.closest("input, .s-select") || e.preventDefault();
+		}, F = y(h.format), I = y({
 			h: 220,
 			s: .77,
 			v: .84,
 			a: 1
-		}), R = v(), z = v(), B = v(), V = v(!1), H = v(null), he = o(() => m.presetColors && m.presetColors.length > 0 ? m.presetColors : [
+		}), L = y(), R = y(), z = y(), B = y(!1), V = y(null), ye = s(() => h.presetColors && h.presetColors.length > 0 ? h.presetColors : [
 			"#3867D6",
 			"#20BF6B",
 			"#FA8231",
@@ -53,7 +59,7 @@ var A = /*@__PURE__*/ f({
 			"#F5319D",
 			"#D91AD9",
 			"#722ED1"
-		]), ge = (e, t, n) => {
+		]), be = (e, t, n) => {
 			let r = 0, i = 0, a = 0, o = Math.floor(e / 60), s = e / 60 - o, c = n * (1 - t), l = n * (1 - s * t), u = n * (1 - (1 - s) * t);
 			switch (o % 6) {
 				case 0:
@@ -80,11 +86,11 @@ var A = /*@__PURE__*/ f({
 				g: Math.round(i * 255),
 				b: Math.round(a * 255)
 			};
-		}, U = (e, t, n) => `#${[
+		}, xe = (e, t, n) => `#${[
 			e,
 			t,
 			n
-		].map((e) => e.toString(16).padStart(2, "0")).join("").toUpperCase()}`, _e = (e) => (e = e.replace("#", ""), e.length === 3 && (e = e.split("").map((e) => e + e).join("")), e.length === 6 ? {
+		].map((e) => e.toString(16).padStart(2, "0")).join("").toUpperCase()}`, Se = (e) => (e = e.replace("#", ""), e.length === 3 && (e = e.split("").map((e) => e + e).join("")), e.length === 6 ? {
 			r: parseInt(e.slice(0, 2), 16) || 0,
 			g: parseInt(e.slice(2, 4), 16) || 0,
 			b: parseInt(e.slice(4, 6), 16) || 0
@@ -92,7 +98,7 @@ var A = /*@__PURE__*/ f({
 			r: 0,
 			g: 0,
 			b: 0
-		}), W = (e, t, n) => {
+		}), H = (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 = r === 0 ? 0 : (r - i) / r, s = r;
 			if (r !== i) {
@@ -114,129 +120,127 @@ var A = /*@__PURE__*/ f({
 				s: o,
 				v: s
 			};
-		}, G = o(() => ge(L.value.h, L.value.s, L.value.v)), K = o(() => {
-			let { r: e, g: t, b: n } = G.value;
-			return `rgba(${e},${t},${n},${L.value.a})`;
-		}), ve = o(() => {
-			let { r: e, g: t, b: n } = G.value;
-			return I.value === "hex" ? U(e, t, n) : L.value.a === 1 ? `rgb(${e},${t},${n})` : `rgba(${e},${t},${n},${Math.round(L.value.a * 10) / 10})`;
-		}), q = (e) => {
+		}, U = s(() => be(I.value.h, I.value.s, I.value.v)), W = s(() => {
+			let { r: e, g: t, b: n } = U.value;
+			return `rgba(${e},${t},${n},${I.value.a})`;
+		}), G = s(() => {
+			let { r: e, g: t, b: n } = U.value;
+			return F.value === "hex" ? xe(e, t, n) : I.value.a === 1 ? `rgb(${e},${t},${n})` : `rgba(${e},${t},${n},${Math.round(I.value.a * 10) / 10})`;
+		}), K = (e) => {
 			try {
 				if (e.startsWith("#")) {
-					let t = _e(e), n = {
-						...W(t.r, t.g, t.b),
-						a: L.value.a
+					let t = Se(e), n = {
+						...H(t.r, t.g, t.b),
+						a: I.value.a
 					};
-					if (L.value.h === n.h && L.value.s === n.s && L.value.v === n.v && L.value.a === n.a) return;
-					L.value = n;
+					if (I.value.h === n.h && I.value.s === n.s && I.value.v === n.v && I.value.a === n.a) return;
+					I.value = n;
 				} else if (e.startsWith("rgb")) {
 					let t = e.match(/[\d.]+/g)?.map(Number) || [
 						0,
 						0,
 						0
-					], n = t.length >= 4 ? t[3] : L.value.a, r = {
-						...W(t[0], t[1], t[2]),
+					], n = t.length >= 4 ? t[3] : I.value.a, r = {
+						...H(t[0], t[1], t[2]),
 						a: Math.max(0, Math.min(1, n))
 					};
-					if (L.value.h === r.h && L.value.s === r.s && L.value.v === r.v && L.value.a === r.a) return;
-					L.value = r;
+					if (I.value.h === r.h && I.value.s === r.s && I.value.v === r.v && I.value.a === r.a) return;
+					I.value = r;
 				}
-			} catch {
-				L.value = {
-					h: 220,
-					s: .77,
-					v: .84,
-					a: 1
-				};
-			}
-		}, J = (e, t, n) => Math.max(t, Math.min(n, e)), Y = (e) => {
+			} catch {}
+		}, q = y(""), J = () => {
+			let e = q.value.trim();
+			e && K(e);
+		}, Ce = () => {
+			q.value = G.value;
+		}, Y = (e, t, n) => Math.max(t, Math.min(n, e)), X = (e) => {
+			if (!L.value) return;
+			let t = L.value.getBoundingClientRect(), n = Y(e.clientX - t.left, 0, t.width), r = Y(e.clientY - t.top, 0, t.height);
+			I.value.s = n / t.width, I.value.v = 1 - r / t.height;
+		}, we = (e) => {
+			e.preventDefault(), B.value = !0, V.value = "panel", X(e);
+		}, Te = (e) => {
+			X(e);
+		}, Ee = (e) => {
+			e.preventDefault(), B.value = !0, V.value = "hue";
+		}, De = (e) => {
 			if (!R.value) return;
-			let t = R.value.getBoundingClientRect(), n = J(e.clientX - t.left, 0, t.width), r = J(e.clientY - t.top, 0, t.height);
-			L.value.s = n / t.width, L.value.v = 1 - r / t.height;
-		}, ye = (e) => {
-			e.preventDefault(), V.value = !0, H.value = "panel", Y(e);
-		}, be = (e) => {
-			Y(e);
-		}, xe = (e) => {
-			e.preventDefault(), V.value = !0, H.value = "hue";
-		}, Se = (e) => {
+			let t = R.value.getBoundingClientRect(), n = Y(e.clientX - t.left, 0, t.width);
+			I.value.h = Y(n / t.width * 360, 0, 360);
+		}, Oe = (e) => {
+			e.preventDefault(), B.value = !0, V.value = "alpha";
+		}, ke = (e) => {
 			if (!z.value) return;
-			let t = z.value.getBoundingClientRect(), n = J(e.clientX - t.left, 0, t.width);
-			L.value.h = J(n / t.width * 360, 0, 360);
-		}, Ce = (e) => {
-			e.preventDefault(), V.value = !0, H.value = "alpha";
-		}, we = (e) => {
-			if (!B.value) return;
-			let t = B.value.getBoundingClientRect(), n = J(e.clientX - t.left, 0, t.width);
-			L.value.a = J(n / t.width, 0, 1);
-		}, X = (e) => {
-			if (!(!V.value || !H.value)) {
-				if (H.value === "panel" && Y(e), H.value === "hue" && z.value) {
-					let t = z.value.getBoundingClientRect(), n = J(e.clientX - t.left, 0, t.width);
-					L.value.h = J(n / t.width * 360, 0, 360);
+			let t = z.value.getBoundingClientRect(), n = Y(e.clientX - t.left, 0, t.width);
+			I.value.a = Y(n / t.width, 0, 1);
+		}, Ae = (e) => {
+			if (!(!B.value || !V.value)) {
+				if (V.value === "panel" && X(e), V.value === "hue" && R.value) {
+					let t = R.value.getBoundingClientRect(), n = Y(e.clientX - t.left, 0, t.width);
+					I.value.h = Y(n / t.width * 360, 0, 360);
 				}
-				if (H.value === "alpha" && B.value) {
-					let t = B.value.getBoundingClientRect(), n = J(e.clientX - t.left, 0, t.width);
-					L.value.a = J(n / t.width, 0, 1);
+				if (V.value === "alpha" && z.value) {
+					let t = z.value.getBoundingClientRect(), n = Y(e.clientX - t.left, 0, t.width);
+					I.value.a = Y(n / t.width, 0, 1);
 				}
 			}
 		}, Z = () => {
-			V.value = !1, H.value = null;
-		}, Te = (e) => {
-			q(e);
+			B.value = !1, V.value = null;
+		}, je = (e) => {
+			K(e);
 		};
-		O(ve, (e) => {
-			j.value = e, w("change", e);
-		}), O(j, (e) => {
-			q(e);
-		}, { immediate: !0 }), g(() => {
-			document.addEventListener("mousemove", X), document.addEventListener("mouseup", Z);
-		}), _(() => {
-			document.removeEventListener("mousemove", X), document.removeEventListener("mouseup", Z);
+		k(G, (e) => {
+			j.value = e, T("change", e), q.value = e;
+		}), k(j, (e) => {
+			e && K(e);
+		}, { immediate: !0 }), _(() => {
+			document.addEventListener("mousemove", Ae), document.addEventListener("mouseup", Z);
+		}), v(() => {
+			document.removeEventListener("mousemove", Ae), document.removeEventListener("mouseup", Z);
 		});
-		let Q = d(), $ = le();
-		return y(() => {
-			let e = D(A);
-			b($, [
+		let Q = f(), $ = ue();
+		return b(() => {
+			let e = O(A);
+			x($, [
 				e.b(),
-				e.m(D(fe)),
-				e.is("error", D(M))
+				e.m(O(pe)),
+				e.is("error", O(me))
 			]);
-		}), x($, null, 0), Q(s(D(n), { $: [() => ({
+		}), S($, null, 0), Q(c(O(r), { $: [() => ({
 			offset: [0, 4],
 			placement: "bottom-start",
 			width: "sameWidth",
 			manual: !0,
-			...f.popoverProps
-		}), { onClickOutside: () => me }] }, {
+			...p.popoverProps
+		}), { onClickOutside: () => ge }] }, {
 			content: () => {
-				let e = ce(), t = a(e), n = a(t), o = a(n), d = h(o, 1), p = h(n, 1), m = a(p), g = a(m), _ = a(g), v = a(_), C = h(_, 1), w = h(m, 1), T = a(w), E = h(p, 2);
-				return n.$evtmousedown = u(ye), n.$evtclick = u(be), Q(n, R, null, "panelRef"), _.$evtclick = u(Se), Q(_, z, null, "hueSliderRef"), C.$evtmousedown = u(xe), y(() => {
-					let r = D(A), i = L.value, a = i.h;
-					b(e, [r.e("wrapper")]), b(t, [r.e("content")]), b(n, [r.e("panel")]), b(o, [r.e("panel-bg")]), S(o, { background: `linear-gradient(to right, #fff, hsl(${a}deg 100% 50%))` }), b(d, [r.e("panel-thumb")]), S(d, {
+				let e = le(), n = o(e), r = o(n), s = o(r), f = g(s, 1), m = g(r, 1), h = o(m), _ = o(h), v = o(_), y = o(v), w = g(v, 1), T = g(h, 1), E = o(T), D = g(m, 2);
+				return r.$evtmousedown = d(we), r.$evtclick = d(Te), Q(r, L, null, "panelRef"), v.$evtclick = d(De), Q(v, R, null, "hueSliderRef"), w.$evtmousedown = d(Ee), b(() => {
+					let t = O(A), i = I.value, a = i.h;
+					x(e, [t.e("wrapper")]), x(n, [t.e("content")]), x(r, [t.e("panel")]), x(s, [t.e("panel-bg")]), C(s, { background: `linear-gradient(to right, #fff, hsl(${a}deg 100% 50%))` }), x(f, [t.e("panel-thumb")]), C(f, {
 						left: `${i.s * 100}%`,
 						top: `${(1 - i.v) * 100}%`
-					}), b(p, [r.e("control")]), b(m, [r.e("control-item")]), b(g, [r.e("control-wrapper")]), b(_, [r.e("control-track")]), b(v, [r.e("control-hue")]), b(C, [r.e("control-thumb")]), S(C, {
+					}), x(m, [t.e("control")]), x(h, [t.e("control-item")]), x(_, [t.e("control-wrapper")]), x(v, [t.e("control-track")]), x(y, [t.e("control-hue")]), x(w, [t.e("control-thumb")]), C(w, {
 						left: `${a / 3.6}%`,
 						color: j.value
 					});
-				}), x(m, null, 1), l(() => !f.disabledAlpha, () => {
-					let e = k(), t = a(e), n = a(t), r = h(t, 1);
-					return t.$evtclick = u(we), Q(t, B, null, "alphaSliderRef"), r.$evtmousedown = u(Ce), y(() => {
-						let i = D(A);
-						b(e, [i.e("control-wrapper")]), b(t, [i.e("control-track")]), b(n, [i.e("control-alpha")]), S(n, { color: K.value }), b(r, [i.e("control-thumb")]), S(r, {
-							left: `${L.value.a * 100}%`,
+				}), S(h, null, 1), u(() => !p.disabledAlpha, () => {
+					let e = ae(), t = o(e), n = o(t), r = g(t, 1);
+					return t.$evtclick = d(ke), Q(t, z, null, "alphaSliderRef"), r.$evtmousedown = d(Oe), b(() => {
+						let i = O(A);
+						x(e, [i.e("control-wrapper")]), x(t, [i.e("control-track")]), x(n, [i.e("control-alpha")]), C(n, { color: W.value }), x(r, [i.e("control-thumb")]), C(r, {
+							left: `${I.value.a * 100}%`,
 							color: j.value
 						});
 					}), e;
-				}), y(() => {
-					let e = D(A);
-					b(w, [e.e("control-preview")]), b(T, [e.e("control-preview-color")]), S(T, { background: K.value }), b(E, [e.e("input")]);
-				}), x(E, null, 0), s(D(i), {
-					modelValue: () => I.value,
-					"onUpdate:modelValue": () => (e) => I.value = e,
-					style: { width: "100px" },
-					size: "mini",
+				}), b(() => {
+					let e = O(A);
+					x(T, [e.e("control-preview")]), x(E, [e.e("control-preview-color")]), C(E, { background: W.value }), x(D, [e.e("input")]);
+				}), S(D, null, 0), c(O(a), {
+					modelValue: () => F.value,
+					"onUpdate:modelValue": () => (e) => F.value = e,
+					style: { width: "120px" },
+					size: "small",
 					options: [{
 						label: "HEX",
 						value: "hex"
@@ -244,37 +248,42 @@ var A = /*@__PURE__*/ f({
 						label: "RGB",
 						value: "rgb"
 					}]
-				}), x(E, null, 1), s(D(r), {
-					size: "mini",
+				}), S(D, null, 1), c(O(i), {
+					size: "small",
 					style: { flex: "1" },
-					modelValue: () => j.value,
-					"onUpdate:modelValue": () => (e) => j.value = e
-				}), x(t, null, 3), l(() => f.showPreset, () => {
-					let e = se(), t = a(e), n = h(t, 1);
-					return y(() => {
-						let r = D(A);
-						b(e, [r.e("presets")]), b(t, [r.e("presets-title")]), b(n, [r.e("presets-list")]);
-					}), x(n, null, 0), c(() => he.value, (e) => {
-						let t = oe();
-						return t.$evtclick = u(() => Te(e.value)), y(() => {
-							b(t, [[D(A).e("presets-item")], "item"]), S(t, { background: e.value });
+					modelValue: () => q.value,
+					"onUpdate:modelValue": () => (e) => q.value = e,
+					onChange: () => J,
+					onPressEnter: () => J
+				}), S(D, null, 2), u(() => p.clearable && j.value && !p.disabled, () => {
+					let e = oe();
+					return b(() => x(e, [O(A).e("clear")])), S(e, null, 0), c(O(t)), e.$evtclick = d(_e), e;
+				}), S(n, null, 3), u(() => p.showPreset, () => {
+					let e = ce(), t = o(e), n = g(t, 1);
+					return b(() => {
+						let r = O(A);
+						x(e, [r.e("presets")]), x(t, [r.e("presets-title")]), x(n, [r.e("presets-list")]);
+					}), S(n, null, 0), l(() => ye.value, (e) => {
+						let t = se();
+						return t.$evtclick = d(() => je(e.value)), b(() => {
+							x(t, [[O(A).e("presets-item")], "item"]), C(t, { background: e.value });
 						}), t;
 					}, (e) => e, 9), e;
-				}), e.$evtmousedown = re(() => {}, ["prevent"]), e;
+				}), e.$evtmousedown = d(ve), e;
 			},
 			default: () => {
-				let e = ae(), t = a(e);
-				return y(() => {
-					let n = D(A);
-					b(e, [n.e("trigger"), n.is("disabled", f.disabled)]), b(t, [n.e("preview")]), S(t, { backgroundColor: j.value });
-				}), x(e, null, 1), l(() => f.showText, () => {
-					let e = ie(), t = ee(e);
-					return y(() => {
-						b(e, [D(A).e("value")]), C(t, T(j.value));
+				let e = ie(), t = o(e);
+				return b(() => {
+					let n = O(A);
+					x(e, [n.e("trigger"), n.is("disabled", p.disabled)]), x(t, [n.e("preview")]), C(t, { backgroundColor: j.value || void 0 });
+				}), S(e, null, 1), u(() => p.showText && j.value, () => {
+					let e = re(), t = ee(e);
+					return b(() => {
+						x(e, [O(A).e("value")]), w(t, E(j.value));
 					}), e;
 				}), e;
 			}
-		}), N, null, "popoverRef"), $.$evtclick = u(pe), $;
+		}), M, null, "popoverRef"), $.$evtclick = d(he), $;
 	}
 });
 //#endregion

package/dist/es/components/src/color-picker/index.d.ts

@@ -3,7 +3,7 @@ import { PopoverProps } from '../popover';
 export declare const SColorPicker: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     slots: {};
-    emit: ((evt: "change", value: string) => void) & ((event: "update:modelValue", value: string) => void);
+    emit: (((evt: "clear") => void) & ((evt: "change", value: string) => void)) & ((event: "update:modelValue", value: string) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
         modelValue?: string | undefined;
@@ -15,7 +15,9 @@ export declare const SColorPicker: ((__VLS_props: NonNullable<Awaited<typeof __V
         showPreset?: boolean | undefined;
         presetColors?: string[] | undefined;
         disabledAlpha?: boolean | undefined;
+        clearable?: boolean | undefined;
         error?: boolean | undefined;
+        onClear?: (() => any) | undefined;
         onChange?: ((value: string) => any) | undefined;
         "onUpdate:modelValue"?: ((value: string) => any) | undefined;
     } & (typeof globalThis extends {
@@ -24,7 +26,7 @@ export declare const SColorPicker: ((__VLS_props: NonNullable<Awaited<typeof __V
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: ((evt: "change", value: string) => void) & ((event: "update:modelValue", value: string) => void);
+    emit: (((evt: "clear") => void) & ((evt: "change", value: string) => void)) & ((event: "update:modelValue", value: string) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 }) & Plugin;

package/dist/es/components/src/color-picker/types.d.ts

@@ -18,10 +18,14 @@ export interface ColorPickerProps {
     presetColors?: string[];
     /** 是否禁用透明度选择 */
     disabledAlpha?: boolean;
+    /** 是否可清空（触发器上显示清空按钮，点击后值为空字符串） */
+    clearable?: boolean;
     /** 是否错误 */
     error?: boolean;
 }
 export interface ColorPickerEmits {
     /** 值改变时触发 */
     change: [value: string];
+    /** 点击清空按钮时触发 */
+    clear: [];
 }

package/dist/es/components/src/drawer/drawer.d.ts

@@ -6,9 +6,9 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     }) & {
         onClose?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        onOpen?: (() => any) | undefined;
         onEsc?: (() => any) | undefined;
         onMaskClick?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
         onOpened?: (() => any) | undefined;
         onClosed?: (() => any) | undefined;
     }> & (typeof globalThis extends {
@@ -17,7 +17,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DrawerSlots;
-    emit: (((evt: "close") => void) & ((evt: "open") => void) & ((evt: "esc") => void) & ((evt: "maskClick") => void) & ((evt: "opened") => void) & ((evt: "closed") => void)) & ((event: "update:modelValue", value: boolean) => void);
+    emit: (((evt: "close") => void) & ((evt: "esc") => void) & ((evt: "maskClick") => void) & ((evt: "open") => void) & ((evt: "opened") => void) & ((evt: "closed") => void)) & ((event: "update:modelValue", value: boolean) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/es/components/src/drawer/index.d.ts

@@ -4,7 +4,7 @@ import { ScrollbarProps } from '../scrollbar';
 export declare const SDrawer: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
     attrs: any;
     slots: DrawerSlots;
-    emit: (((evt: "close") => void) & ((evt: "open") => void) & ((evt: "esc") => void) & ((evt: "maskClick") => void) & ((evt: "opened") => void) & ((evt: "closed") => void)) & ((event: "update:modelValue", value: boolean) => void);
+    emit: (((evt: "close") => void) & ((evt: "esc") => void) & ((evt: "maskClick") => void) & ((evt: "open") => void) & ((evt: "opened") => void) & ((evt: "closed") => void)) & ((event: "update:modelValue", value: boolean) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: PublicProps & {
         modelValue?: boolean | undefined;
@@ -33,9 +33,9 @@ export declare const SDrawer: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
         maskStyle?: Record<string, string> | undefined;
         onClose?: (() => any) | undefined;
         "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-        onOpen?: (() => any) | undefined;
         onEsc?: (() => any) | undefined;
         onMaskClick?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
         onOpened?: (() => any) | undefined;
         onClosed?: (() => any) | undefined;
     } & (typeof globalThis extends {
@@ -44,7 +44,7 @@ export declare const SDrawer: ((__VLS_props: NonNullable<Awaited<typeof __VLS_se
     expose: (exposed: {}) => void;
     attrs: any;
     slots: DrawerSlots;
-    emit: (((evt: "close") => void) & ((evt: "open") => void) & ((evt: "esc") => void) & ((evt: "maskClick") => void) & ((evt: "opened") => void) & ((evt: "closed") => void)) & ((event: "update:modelValue", value: boolean) => void);
+    emit: (((evt: "close") => void) & ((evt: "esc") => void) & ((evt: "maskClick") => void) & ((evt: "open") => void) & ((evt: "opened") => void) & ((evt: "closed") => void)) & ((event: "update:modelValue", value: boolean) => void);
 }>) => VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 }) & Plugin;

package/dist/es/components/src/pagination/pagination.vue.mjs

@@ -1,8 +1,8 @@
 import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
 import "../../../hooks/index.mjs";
 import { LeftLine as t, RightLine as n } from "../../../icons/src/svg/arrow/index.mjs";
-import { SSelect as r } from "../select/index.mjs";
-import { SInputNumber as i } from "../input-number/index.mjs";
+import { SInputNumber as r } from "../input-number/index.mjs";
+import { SSelect as i } from "../select/index.mjs";
 import { child as a, computed as o, createComponent as s, createFor as c, createIf as l, createInvoker as u, createTemplateRefSetter as d, defineVaporComponent as f, delegateEvents as p, mergeModels as m, next as h, ref as g, renderEffect as _, setClass as v, setInsertionState as y, setText as b, template as x, toDisplayString as S, txt as C, unref as w, useModel as T, useTemplateRef as E, watch as D, withKeys as O } from "vue";
 //#region ../components/src/pagination/pagination.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var k = x("<div> "), A = x("<div>..."), j = x("<div><div>前往</div><!><div>页</div>"), M = x("<div>"), N = x("<div><div><div></div><!><div></div></div>", 1);
@@ -112,11 +112,11 @@ var P = /*@__PURE__*/ f({
 				e.is("disabled", I.value >= B.value || f.disabled)
 			]);
 		}), y($, null, 0), s(w(n)), $.$evtclick = u(G), y(Y, null, 2), l(() => f.showJumper, () => {
-			let e = j(), t = a(e), n = h(t, 1), r = h(n, 2);
+			let e = j(), t = a(e), n = h(t, 1), i = h(n, 2);
 			return _(() => {
 				let n = w(P);
 				v(e, [n.e("jumper")]), v(t, [n.e("jumper-text")]);
-			}), y(e, n, 1), J(s(w(i), {
+			}), y(e, n, 1), J(s(w(r), {
 				modelValue: () => z.value,
 				"onUpdate:modelValue": () => (e) => z.value = e,
 				style: "width: 60px",
@@ -124,10 +124,10 @@ var P = /*@__PURE__*/ f({
 				disabled: () => f.disabled,
 				controls: !1,
 				onKeyup: () => O(q, ["enter"])
-			}), F, null, "jumperInputRef"), _(() => v(r, [w(P).e("jumper-text")])), e;
+			}), F, null, "jumperInputRef"), _(() => v(i, [w(P).e("jumper-text")])), e;
 		}), y(Y, null, 3), l(() => f.showPageSize, () => {
 			let e = M();
-			return _(() => v(e, [w(P).e("options")])), y(e, null, 0), s(w(r), {
+			return _(() => v(e, [w(P).e("options")])), y(e, null, 0), s(w(i), {
 				modelValue: () => R.value,
 				"onUpdate:modelValue": () => (e) => R.value = e,
 				options: () => H.value,