@cyberpunk-vue/components 1.9.25 → 1.10.0

package/dist/index.mjs

@@ -7100,10 +7100,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 +7137,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 +7163,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 +7185,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 +7194,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.0",
   "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/hooks": "1.10.0",
+    "@cyberpunk-vue/theme-chalk": "1.10.0",
+    "@cyberpunk-vue/constants": "1.10.0"
   },
   "author": "Juxest",
   "license": "MIT",