@cyberpunk-vue/components 1.9.25 → 1.10.1

package/dist/index.mjs

@@ -1842,39 +1842,45 @@ var ae = {
 		});
 		let A = (e) => {
 			D.value || !p.value || e.target === e.currentTarget && e.propertyName === "grid-template-rows" && (p.value = !1, h());
-		}, M = T(), P = T(null), I = null;
-		function z() {
+		}, M = T(), P = T(null), I = null, z = null;
+		function H() {
 			let e = i.peekHeight;
 			return typeof e == "number" ? e : parseFloat(e) || 80;
 		}
-		function H() {
+		function U() {
 			if (!i.halfCollapse || !M.value) return;
-			let e = M.value.scrollHeight > z();
+			let e = M.value.scrollHeight > H();
 			w.value !== e && (w.value = e, c("collapse-change", { needed: e }));
 		}
-		function U() {
-			M.value && (P.value = M.value.scrollHeight);
-		}
 		function W() {
-			K(), !(!i.halfCollapse || !M.value) && (I = new ResizeObserver(() => {
-				H(), U();
-			}), I.observe(M.value));
+			M.value && (P.value = M.value.scrollHeight);
 		}
 		function K() {
-			I &&= (I.disconnect(), null);
+			q(), !(!i.halfCollapse || !M.value) && (I = new ResizeObserver(() => {
+				U(), W();
+			}), I.observe(M.value), z = new MutationObserver(() => {
+				U(), W();
+			}), z.observe(M.value, {
+				childList: !0,
+				subtree: !0,
+				characterData: !0
+			}));
+		}
+		function q() {
+			I &&= (I.disconnect(), null), z &&= (z.disconnect(), null);
 		}
 		R(() => i.halfCollapse, (e) => {
 			e ? _(() => {
-				W(), H();
-			}) : (K(), w.value = !0);
-		}), R(() => i.peekHeight, () => H()), x(() => {
+				K(), U();
+			}) : (q(), w.value = !0);
+		}), R(() => i.peekHeight, () => U()), x(() => {
 			i.halfCollapse && _(() => {
-				W(), H(), U();
+				K(), U(), W();
 			});
 		}), b(() => {
-			h(), K();
+			h(), q();
 		});
-		let q = r(() => i.showCollapseAction && i.halfCollapse && w.value), J = r(() => [
+		let J = r(() => i.showCollapseAction && i.halfCollapse && w.value), X = r(() => [
 			f.b(),
 			f.m(i.variant),
 			f.m(`shape-${i.shape}`),
@@ -1889,39 +1895,39 @@ var ae = {
 			f.is("half-collapsed", D.value && i.halfCollapse),
 			f.is("loading", i.loading),
 			f.is("disabled", i.disabled)
-		]), X = r(() => [f.e("container"), i.backgroundClass]), Z = r(() => i.color ? i.color : i.type && i.type !== "default" ? `var(--cp-color-${i.type})` : null), Q = r(() => i.color ? `color-mix(in srgb, ${i.color} 30%, transparent)` : i.type && i.type !== "default" ? `var(--cp-color-${i.type}-light)` : null), ee = r(() => {
+		]), Z = r(() => [f.e("container"), i.backgroundClass]), Q = r(() => i.color ? i.color : i.type && i.type !== "default" ? `var(--cp-color-${i.type})` : null), ee = r(() => i.color ? `color-mix(in srgb, ${i.color} 30%, transparent)` : i.type && i.type !== "default" ? `var(--cp-color-${i.type}-light)` : null), te = r(() => {
 			let e = {};
-			Z.value && (e["--cp-card-color"] = Z.value), Q.value && (e["--cp-card-color-light"] = Q.value), i.bgColor && (e["--cp-card-bg"] = i.bgColor), i.borderColor && (e["--cp-card-border-color"] = i.borderColor), i.dividerColor && (e["--cp-card-divider-color"] = i.dividerColor), i.headerDividerColor && (e["--cp-card-header-divider-color"] = i.headerDividerColor), i.footerDividerColor && (e["--cp-card-footer-divider-color"] = i.footerDividerColor), i.shadowColor ? e["--cp-card-shadow-color"] = i.shadowColor : Z.value && (e["--cp-card-shadow-color"] = `color-mix(in srgb, ${Z.value} 40%, black)`);
+			Q.value && (e["--cp-card-color"] = Q.value), ee.value && (e["--cp-card-color-light"] = ee.value), i.bgColor && (e["--cp-card-bg"] = i.bgColor), i.borderColor && (e["--cp-card-border-color"] = i.borderColor), i.dividerColor && (e["--cp-card-divider-color"] = i.dividerColor), i.headerDividerColor && (e["--cp-card-header-divider-color"] = i.headerDividerColor), i.footerDividerColor && (e["--cp-card-footer-divider-color"] = i.footerDividerColor), i.shadowColor ? e["--cp-card-shadow-color"] = i.shadowColor : Q.value && (e["--cp-card-shadow-color"] = `color-mix(in srgb, ${Q.value} 40%, black)`);
 			let t = G(i.dimmedDuration);
 			if (t && (e["--cp-card-dimmed-duration"] = t), i.halfCollapse) {
 				let t = i.peekHeight;
 				e["--cp-card-peek-height"] = typeof t == "number" ? `${t}px` : t, P.value !== null && (e["--cp-card-expanded-height"] = `${P.value}px`);
 			}
 			return e;
-		}), te = r(() => {
+		}), ne = r(() => {
 			let e = typeof i.bodyStyle == "string" ? {} : { ...i.bodyStyle };
 			return i.bodyPadding && (e.padding = i.bodyPadding), e;
-		}), ne = r(() => !!(i.title || d.header || d.title || d.extra)), re = r(() => !D.value || ne.value), $ = r(() => !!d.footer), ie = r(() => !!d.overlay), ae = r(() => [
+		}), re = r(() => !!(i.title || d.header || d.title || d.extra)), $ = r(() => !D.value || re.value), ie = r(() => !!d.footer), ae = r(() => !!d.overlay), oe = r(() => [
 			f.e("header"),
 			f.is("bordered", i.headerBorder),
 			i.headerClass
-		]), oe = r(() => [f.e("footer"), f.is("bordered", i.footerBorder)]), se = r(() => i.actionEffect ?? i.overlayEffect), ce = r(() => i.actionColor ?? i.overlayColor), le = r(() => i.actionBlur ?? i.overlayBlur), ue = r(() => [
+		]), se = r(() => [f.e("footer"), f.is("bordered", i.footerBorder)]), ce = r(() => i.actionEffect ?? i.overlayEffect), le = r(() => i.actionColor ?? i.overlayColor), ue = r(() => i.actionBlur ?? i.overlayBlur), de = r(() => [
 			f.e("overlay"),
 			f.bem("", "overlay", i.overlayAnimation),
 			f.bem("", "overlay", i.overlayPosition),
-			f.bem("", "overlay", `effect-${se.value}`)
-		]), de = r(() => [f.e("overlay-backdrop"), f.bem("", "overlay-backdrop", `effect-${i.overlayEffect}`)]), fe = (e) => e === void 0 ? "10px" : typeof e == "number" ? `${e}px` : e, pe = r(() => ({
+			f.bem("", "overlay", `effect-${ce.value}`)
+		]), fe = r(() => [f.e("overlay-backdrop"), f.bem("", "overlay-backdrop", `effect-${i.overlayEffect}`)]), pe = (e) => e === void 0 ? "10px" : typeof e == "number" ? `${e}px` : e, me = r(() => ({
 			"--cp-card-overlay-duration": G(i.overlayDuration),
 			"--cp-card-overlay-color": i.overlayColor,
-			"--cp-card-overlay-blur": fe(i.overlayBlur),
-			"--cp-card-action-color": ce.value,
-			"--cp-card-action-blur": fe(le.value)
-		})), me = r(() => [f.e("loading-overlay"), i.loadingClass]);
+			"--cp-card-overlay-blur": pe(i.overlayBlur),
+			"--cp-card-action-color": le.value,
+			"--cp-card-action-blur": pe(ue.value)
+		})), ge = r(() => [f.e("loading-overlay"), i.loadingClass]);
 		return (e, t) => V((S(), o("div", {
-			class: v(J.value),
-			style: y(ee.value)
-		}, [s("div", {
 			class: v(X.value),
+			style: y(te.value)
+		}, [s("div", {
+			class: v(Z.value),
 			style: y(e.backgroundStyle)
 		}, [
 			e.$slots.cover ? (S(), o("div", {
@@ -1929,9 +1935,9 @@ var ae = {
 				class: v(N(f).e("collapse-transition")),
 				onTransitionend: A
 			}, [s("div", { class: v(N(f).e("collapse-inner")) }, [s("div", { class: v(N(f).e("cover")) }, [O(e.$slots, "cover")], 2)], 2)], 34)) : a("", !0),
-			ne.value ? (S(), o("div", {
+			re.value ? (S(), o("div", {
 				key: 1,
-				class: v(ae.value),
+				class: v(oe.value),
 				style: y(e.headerStyle)
 			}, [O(e.$slots, "header", {}, () => [s("div", { class: v(N(f).e("title")) }, [O(e.$slots, "title", {}, () => [l(j(e.title), 1)])], 2), N(d).extra ? (S(), o("div", {
 				key: 0,
@@ -1946,12 +1952,12 @@ var ae = {
 				class: v(N(f).e("collapse-inner"))
 			}, [s("div", {
 				class: v([N(f).e("body"), e.bodyClass]),
-				style: y(te.value)
-			}, [O(e.$slots, "default")], 6), $.value ? (S(), o("div", {
+				style: y(ne.value)
+			}, [O(e.$slots, "default")], 6), ie.value ? (S(), o("div", {
 				key: 0,
-				class: v(oe.value)
+				class: v(se.value)
 			}, [O(e.$slots, "footer")], 2)) : a("", !0)], 2)], 34),
-			q.value ? (S(), o("div", {
+			J.value ? (S(), o("div", {
 				key: 2,
 				class: v(N(f).e("collapse-action"))
 			}, [O(e.$slots, "collapse-action", {
@@ -1962,28 +1968,28 @@ var ae = {
 				class: v(N(f).e("collapse-action-default")),
 				onClick: k
 			}, [s("span", { class: v(N(f).e("collapse-action-text")) }, j(D.value ? e.collapseActionExpandText : e.collapseActionCollapseText), 3), s("span", { class: v([N(f).e("collapse-action-icon"), { "is-expanded": !D.value }]) }, "▼", 2)], 2)])], 2)) : a("", !0),
-			ie.value ? (S(), o("div", {
+			ae.value ? (S(), o("div", {
 				key: 3,
-				class: v(de.value),
-				style: y(pe.value)
+				class: v(fe.value),
+				style: y(me.value)
 			}, null, 6)) : a("", !0),
-			ie.value ? (S(), o("div", {
+			ae.value ? (S(), o("div", {
 				key: 4,
-				class: v(ue.value),
-				style: y(pe.value)
+				class: v(de.value),
+				style: y(me.value)
 			}, [O(e.$slots, "overlay")], 6)) : a("", !0),
 			u(n, { name: "cp-card-loading" }, {
 				default: B(() => [e.loading ? (S(), o("div", {
 					key: 0,
-					class: v(me.value),
+					class: v(ge.value),
 					style: y(e.loadingStyle)
-				}, [O(e.$slots, "loading", {}, () => [u(N(he), { color: Z.value || void 0 }, null, 8, ["color"]), e.loadingText ? (S(), o("span", {
+				}, [O(e.$slots, "loading", {}, () => [u(N(he), { color: Q.value || void 0 }, null, 8, ["color"]), e.loadingText ? (S(), o("span", {
 					key: 0,
 					class: v(N(f).e("loading-text"))
 				}, j(e.loadingText), 3)) : a("", !0)])], 6)) : a("", !0)]),
 				_: 3
 			})
-		], 6)], 6)), [[L, re.value]]);
+		], 6)], 6)), [[L, $.value]]);
 	}
 })), ht = {
 	type: {
@@ -7100,10 +7106,15 @@ var Zr = $(Vr), Qr = ie(Jr, "$notify"), $r = /* @__PURE__ */ d({
 	block: {
 		type: Boolean,
 		default: !1
+	},
+	clearable: {
+		type: Boolean,
+		default: !1
 	}
 }, ci = {
-	"update:modelValue": (e) => typeof e == "string" || typeof e == "number",
-	change: (e) => typeof e == "string" || typeof e == "number"
+	"update:modelValue": (e) => e === void 0 || typeof e == "string" || typeof e == "number",
+	change: (e) => e === void 0 || typeof e == "string" || typeof e == "number",
+	clear: () => !0
 }, li = [
 	"disabled",
 	"aria-checked",
@@ -7132,7 +7143,7 @@ var Zr = $(Vr), Qr = ie(Jr, "$notify"), $r = /* @__PURE__ */ d({
 			let t = w.value[e];
 			E.value = {
 				width: `${t.offsetWidth}px`,
-				transform: `translateX(calc(${t.offsetLeft}px + var(--cp-segmented-indicator-offset, -2px)))`,
+				transform: `translateX(calc(${t.offsetLeft}px + var(--cp-segmented-indicator-offset, 0px)))`,
 				opacity: "1"
 			};
 		};
@@ -7158,9 +7169,19 @@ var Zr = $(Vr), Qr = ie(Jr, "$notify"), $r = /* @__PURE__ */ d({
 		]), F = r(() => {
 			let e = {};
 			return l.color && (e["--cp-segmented-color"] = l.color, e["--cp-segmented-color-light"] = `${l.color}25`), W(l.size) || (e["--cp-segmented-height"] = K(l.size, h)), e;
-		}), I = (e) => {
-			p.value || e.disabled || e.value !== l.modelValue && (u("update:modelValue", e.value), u("change", e.value));
-		}, L = (e) => [
+		}), I = () => {
+			p.value || l.modelValue === void 0 || (u("update:modelValue", void 0), u("change", void 0), u("clear"));
+		}, L = (e) => {
+			if (!(p.value || e.disabled)) {
+				if (e.value === l.modelValue) {
+					l.clearable && I();
+					return;
+				}
+				u("update:modelValue", e.value), u("change", e.value);
+			}
+		}, z = (e) => {
+			e.key === "Escape" && (!l.clearable || p.value || l.modelValue !== void 0 && (e.preventDefault(), I()));
+		}, B = (e) => [
 			d.e("item"),
 			d.is("active", e.value === l.modelValue),
 			d.is("disabled", !!e.disabled)
@@ -7170,7 +7191,8 @@ var Zr = $(Vr), Qr = ie(Jr, "$notify"), $r = /* @__PURE__ */ d({
 			ref: C,
 			class: v(P.value),
 			style: y(F.value),
-			role: "radiogroup"
+			role: "radiogroup",
+			onKeydown: z
 		}, [s("div", {
 			class: v(N(d).e("indicator")),
 			style: y(E.value)
@@ -7178,16 +7200,16 @@ var Zr = $(Vr), Qr = ie(Jr, "$notify"), $r = /* @__PURE__ */ d({
 			key: e.value,
 			ref_for: !0,
 			ref: (e) => O(e, n),
-			class: v(L(e)),
+			class: v(B(e)),
 			disabled: p.value || e.disabled,
 			type: "button",
 			role: "radio",
 			"aria-checked": e.value === t.modelValue,
-			onClick: (t) => I(e)
+			onClick: (t) => L(e)
 		}, [e.icon ? (S(), i(A(e.icon), {
 			key: 0,
 			class: v(N(d).e("item-icon"))
-		}, null, 8, ["class"])) : a("", !0), s("span", { class: v(N(d).e("item-label")) }, j(e.label), 3)], 10, li))), 128))], 6));
+		}, null, 8, ["class"])) : a("", !0), s("span", { class: v(N(d).e("item-label")) }, j(e.label), 3)], 10, li))), 128))], 38));
 	}
 })), di = {
 	data: {

package/dist/segmented/index.d.ts

@@ -47,11 +47,16 @@ export declare const CpSegmented: import('../utils').SFCWithInstall<import('vue'
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
 }>, {
     updateIndicator: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: import('.').SegmentedValueType) => void;
-    "update:modelValue": (value: import('.').SegmentedValueType) => void;
+    clear: () => void;
+    change: (value: import('.').SegmentedValueType | undefined) => void;
+    "update:modelValue": (value: import('.').SegmentedValueType | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     readonly modelValue: {
         readonly type: import('vue').PropType<import('.').SegmentedValueType>;
@@ -89,9 +94,14 @@ export declare const CpSegmented: import('../utils').SFCWithInstall<import('vue'
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
 }>> & Readonly<{
-    onChange?: ((value: import('.').SegmentedValueType) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: import('.').SegmentedValueType) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onChange?: ((value: import('.').SegmentedValueType | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: import('.').SegmentedValueType | undefined) => any) | undefined;
 }>, {
     readonly size: import('@cyberpunk-vue/hooks').Size;
     readonly type: import('.').SegmentedType;
@@ -101,6 +111,7 @@ export declare const CpSegmented: import('../utils').SFCWithInstall<import('vue'
     readonly block: boolean;
     readonly shape: import('.').SegmentedShape;
     readonly modelValue: import('.').SegmentedValueType;
+    readonly clearable: boolean;
     readonly options: (string | number | import('.').SegmentedOption)[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     trackRef: HTMLDivElement;

package/dist/segmented/src/segmented.d.ts

@@ -143,6 +143,15 @@ export declare const segmentedProps: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    /**
+     * 是否允许清空选中项
+     * 启用后可通过再次点击已选项或按 Esc 键清空
+     * @default false
+     */
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
 };
 export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>;
 /**
@@ -151,11 +160,17 @@ export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>;
 export declare const segmentedEmits: {
     /**
      * 值变化时触发 (v-model 绑定)
+     * 启用 clearable 并清空时值为 undefined
      */
-    'update:modelValue': (value: SegmentedValueType) => value is string | number;
+    'update:modelValue': (value: SegmentedValueType | undefined) => value is string | number | undefined;
     /**
      * 值变化时触发
+     * 启用 clearable 并清空时值为 undefined
+     */
+    change: (value: SegmentedValueType | undefined) => value is string | number | undefined;
+    /**
+     * 清空选中项时触发（需启用 clearable）
      */
-    change: (value: SegmentedValueType) => value is string | number;
+    clear: () => boolean;
 };
 export type SegmentedEmits = typeof segmentedEmits;

package/dist/segmented/src/segmented.vue.d.ts

@@ -36,12 +36,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
 }>, {
     /** @description 更新滑块位置 */
     updateIndicator: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: SegmentedValueType) => void;
-    "update:modelValue": (value: SegmentedValueType) => void;
+    clear: () => void;
+    change: (value: SegmentedValueType | undefined) => void;
+    "update:modelValue": (value: SegmentedValueType | undefined) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     readonly modelValue: {
         readonly type: import('vue').PropType<SegmentedValueType>;
@@ -79,9 +84,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
 }>> & Readonly<{
-    onChange?: ((value: SegmentedValueType) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: SegmentedValueType) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onChange?: ((value: SegmentedValueType | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SegmentedValueType | undefined) => any) | undefined;
 }>, {
     readonly size: import('@cyberpunk-vue/hooks').Size;
     readonly type: import('./segmented').SegmentedType;
@@ -91,6 +101,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     readonly block: boolean;
     readonly shape: import('./segmented').SegmentedShape;
     readonly modelValue: SegmentedValueType;
+    readonly clearable: boolean;
     readonly options: (string | number | SegmentedOption)[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     trackRef: HTMLDivElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberpunk-vue/components",
-  "version": "1.9.25",
+  "version": "1.10.1",
   "description": "Cyberpunk Vue components - A futuristic Vue 3 component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,9 +23,9 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@cyberpunk-vue/hooks": "1.9.25",
-    "@cyberpunk-vue/constants": "1.9.25",
-    "@cyberpunk-vue/theme-chalk": "1.9.25"
+    "@cyberpunk-vue/constants": "1.10.1",
+    "@cyberpunk-vue/hooks": "1.10.1",
+    "@cyberpunk-vue/theme-chalk": "1.10.1"
   },
   "author": "Juxest",
   "license": "MIT",