element-plus 2.6.3 → 2.7.0

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

@@ -6,6 +6,19 @@ export declare const ElBadge: import("element-plus/es/utils").SFCWithInstall<imp
     readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
     readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly color: StringConstructor;
+    readonly dotStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+    readonly dotClass: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
@@ -15,6 +28,19 @@ export declare const ElBadge: import("element-plus/es/utils").SFCWithInstall<imp
         readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
         readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly color: StringConstructor;
+        readonly dotStyle: {
+            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+        readonly dotClass: {
+            readonly type: import("vue").PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>> & {
         [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
     }>>;
@@ -37,6 +63,7 @@ export declare const ElBadge: import("element-plus/es/utils").SFCWithInstall<imp
         cssVarBlockName: (name: string) => string;
     };
     content: import("vue").ComputedRef<string>;
+    style: import("vue").ComputedRef<import("vue").StyleValue>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 99, boolean>;
@@ -45,8 +72,22 @@ export declare const ElBadge: import("element-plus/es/utils").SFCWithInstall<imp
     readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
     readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly color: StringConstructor;
+    readonly dotStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+    readonly dotClass: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }>>, {
     readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>;
+    readonly offset: [number, number];
     readonly value: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     readonly hidden: boolean;
     readonly max: number;

package/es/components/badge/src/badge.d.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, StyleValue } from 'vue';
 export declare const badgeProps: {
     readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 99, boolean>;
@@ -7,5 +7,18 @@ export declare const badgeProps: {
     readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
     readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly color: StringConstructor;
+    readonly dotStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+    readonly dotClass: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 };
 export declare type BadgeProps = ExtractPropTypes<typeof badgeProps>;

package/es/components/badge/src/badge.mjs

@@ -1,5 +1,5 @@
 import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props/runtime.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 
 const badgeProps = buildProps({
   value: {
@@ -21,7 +21,17 @@ const badgeProps = buildProps({
     type: Boolean,
     default: true
   },
-  color: String
+  color: String,
+  dotStyle: {
+    type: definePropType([String, Object, Array])
+  },
+  offset: {
+    type: definePropType(Array),
+    default: [0, 0]
+  },
+  dotClass: {
+    type: String
+  }
 });
 
 export { badgeProps };

package/es/components/badge/src/badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.mjs","sources":["../../../../../../packages/components/badge/src/badge.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const badgeProps = buildProps({\n  /**\n   * @description display value.\n   */\n  value: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description maximum value, shows `{max}+` when exceeded. Only works if value is a number.\n   */\n  max: {\n    type: Number,\n    default: 99,\n  },\n  /**\n   * @description if a little dot is displayed.\n   */\n  isDot: Boolean,\n  /**\n   * @description hidden badge.\n   */\n  hidden: Boolean,\n  /**\n   * @description badge type.\n   */\n  type: {\n    type: String,\n    values: ['primary', 'success', 'warning', 'info', 'danger'],\n    default: 'danger',\n  },\n  /**\n   * @description whether to show badge when value is zero.\n   */\n  showZero: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description background color of the Badge\n   */\n  color: String,\n} as const)\nexport type BadgeProps = ExtractPropTypes<typeof badgeProps>\n"],"names":[],"mappings":";;;AACY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC/D,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,CAAC;;;;"}
+{"version":3,"file":"badge.mjs","sources":["../../../../../../packages/components/badge/src/badge.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\n\nexport const badgeProps = buildProps({\n  /**\n   * @description display value.\n   */\n  value: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description maximum value, shows `{max}+` when exceeded. Only works if value is a number.\n   */\n  max: {\n    type: Number,\n    default: 99,\n  },\n  /**\n   * @description if a little dot is displayed.\n   */\n  isDot: Boolean,\n  /**\n   * @description hidden badge.\n   */\n  hidden: Boolean,\n  /**\n   * @description badge type.\n   */\n  type: {\n    type: String,\n    values: ['primary', 'success', 'warning', 'info', 'danger'],\n    default: 'danger',\n  },\n  /**\n   * @description whether to show badge when value is zero.\n   */\n  showZero: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description customize dot background color\n   */\n  color: String,\n  /**\n   * @description CSS style of dot\n   */\n  dotStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n  },\n  /**\n   * @description set offset of the badge dot\n   */\n  offset: {\n    type: definePropType<[number, number]>(Array),\n    default: [0, 0],\n  },\n  /**\n   * @description custom class name of badge dot\n   */\n  dotClass: {\n    type: String,\n  },\n} as const)\nexport type BadgeProps = ExtractPropTypes<typeof badgeProps>\n"],"names":[],"mappings":";;;AACY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC/D,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}

package/es/components/badge/src/badge.vue.d.ts

@@ -1,3 +1,4 @@
+import type { StyleValue } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 99, boolean>;
@@ -6,6 +7,19 @@ declare const _default: import("vue").DefineComponent<{
     readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
     readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly color: StringConstructor;
+    readonly dotStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+    readonly dotClass: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
@@ -15,6 +29,19 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
         readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly color: StringConstructor;
+        readonly dotStyle: {
+            readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown>>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+        readonly dotClass: {
+            readonly type: import("vue").PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>> & {
         [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
     }>>;
@@ -37,6 +64,7 @@ declare const _default: import("vue").DefineComponent<{
         cssVarBlockName: (name: string) => string;
     };
     content: import("vue").ComputedRef<string>;
+    style: import("vue").ComputedRef<StyleValue>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly value: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
     readonly max: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 99, boolean>;
@@ -45,8 +73,22 @@ declare const _default: import("vue").DefineComponent<{
     readonly type: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown, "danger", boolean>;
     readonly showZero: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly color: StringConstructor;
+    readonly dotStyle: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => StyleValue & {}) | (() => StyleValue) | ((new (...args: any[]) => StyleValue & {}) | (() => StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly offset: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => [number, number]) | (() => [number, number]) | ((new (...args: any[]) => [number, number]) | (() => [number, number]))[], unknown, unknown, readonly [0, 0], boolean>;
+    readonly dotClass: {
+        readonly type: import("vue").PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }>>, {
     readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>;
+    readonly offset: [number, number];
     readonly value: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     readonly hidden: boolean;
     readonly max: number;

package/es/components/badge/src/badge2.mjs

@@ -5,6 +5,7 @@ import { badgeProps } from './badge.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { isNumber } from '../../../utils/types.mjs';
+import { addUnit } from '../../../utils/dom/style.mjs';
 
 const _hoisted_1 = ["textContent"];
 const __default__ = defineComponent({
@@ -27,6 +28,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return `${props.value}`;
     });
+    const style = computed(() => {
+      var _a, _b, _c, _d, _e;
+      return [
+        {
+          backgroundColor: props.color,
+          marginRight: addUnit(-((_b = (_a = props.offset) == null ? void 0 : _a[0]) != null ? _b : 0)),
+          marginTop: addUnit((_d = (_c = props.offset) == null ? void 0 : _c[1]) != null ? _d : 0)
+        },
+        (_e = props.dotStyle) != null ? _e : {}
+      ];
+    });
     expose({
       content
     });
@@ -45,9 +57,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 unref(ns).e("content"),
                 unref(ns).em("content", _ctx.type),
                 unref(ns).is("fixed", !!_ctx.$slots.default),
-                unref(ns).is("dot", _ctx.isDot)
+                unref(ns).is("dot", _ctx.isDot),
+                _ctx.dotClass
               ]),
-              style: normalizeStyle({ backgroundColor: _ctx.color }),
+              style: normalizeStyle(unref(style)),
               textContent: toDisplayString(unref(content))
             }, null, 14, _hoisted_1), [
               [vShow, !_ctx.hidden && (unref(content) || _ctx.isDot)]

package/es/components/badge/src/badge2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge2.mjs","sources":["../../../../../../packages/components/badge/src/badge.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <slot />\n    <transition :name=\"`${ns.namespace.value}-zoom-in-center`\">\n      <sup\n        v-show=\"!hidden && (content || isDot)\"\n        :class=\"[\n          ns.e('content'),\n          ns.em('content', type),\n          ns.is('fixed', !!$slots.default),\n          ns.is('dot', isDot),\n        ]\"\n        :style=\"{ backgroundColor: color }\"\n        v-text=\"content\"\n      />\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isNumber } from '@element-plus/utils'\nimport { badgeProps } from './badge'\n\ndefineOptions({\n  name: 'ElBadge',\n})\n\nconst props = defineProps(badgeProps)\n\nconst ns = useNamespace('badge')\n\nconst content = computed<string>(() => {\n  if (props.isDot) return ''\n  if (isNumber(props.value) && isNumber(props.max)) {\n    if (props.max < props.value) {\n      return `${props.max}+`\n    }\n    return props.value === 0 && !props.showZero ? '' : `${props.value}`\n  }\n  return `${props.value}`\n})\n\ndefineExpose({\n  /** @description badge content */\n  content,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAyBc,CAAA;AAAA,EACZ,IAAM,EAAA,SAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,OAAA,GAAU,SAAiB,MAAM;AACrC,MAAA,IAAI,KAAM,CAAA,KAAA;AAAO,QAAO,OAAA,EAAA,CAAA;AACxB,MAAA,IAAI,SAAS,KAAM,CAAA,KAAK,KAAK,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAChD,QAAI,IAAA,KAAA,CAAM,GAAM,GAAA,KAAA,CAAM,KAAO,EAAA;AAC3B,UAAA,OAAO,GAAG,KAAM,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SAClB;AACA,QAAO,OAAA,KAAA,CAAM,UAAU,CAAK,IAAA,CAAC,MAAM,QAAW,GAAA,EAAA,GAAK,GAAG,KAAM,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,OAC9D;AACA,MAAA,OAAO,GAAG,KAAM,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,KACjB,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MAEX,OAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"badge2.mjs","sources":["../../../../../../packages/components/badge/src/badge.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <slot />\n    <transition :name=\"`${ns.namespace.value}-zoom-in-center`\">\n      <sup\n        v-show=\"!hidden && (content || isDot)\"\n        :class=\"[\n          ns.e('content'),\n          ns.em('content', type),\n          ns.is('fixed', !!$slots.default),\n          ns.is('dot', isDot),\n          dotClass,\n        ]\"\n        :style=\"style\"\n        v-text=\"content\"\n      />\n    </transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, isNumber } from '@element-plus/utils'\nimport { badgeProps } from './badge'\nimport type { StyleValue } from 'vue'\n\ndefineOptions({\n  name: 'ElBadge',\n})\n\nconst props = defineProps(badgeProps)\n\nconst ns = useNamespace('badge')\n\nconst content = computed<string>(() => {\n  if (props.isDot) return ''\n  if (isNumber(props.value) && isNumber(props.max)) {\n    if (props.max < props.value) {\n      return `${props.max}+`\n    }\n    return props.value === 0 && !props.showZero ? '' : `${props.value}`\n  }\n  return `${props.value}`\n})\nconst style = computed<StyleValue>(() => {\n  return [\n    {\n      backgroundColor: props.color,\n      marginRight: addUnit(-(props.offset?.[0] ?? 0)),\n      marginTop: addUnit(props.offset?.[1] ?? 0),\n    },\n    props.dotStyle ?? {},\n  ]\n})\n\ndefineExpose({\n  /** @description badge content */\n  content,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;mCA2Bc,CAAA;AAAA,EACZ,IAAM,EAAA,SAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAE/B,IAAM,MAAA,OAAA,GAAU,SAAiB,MAAM;AACrC,MAAA,IAAI,KAAM,CAAA,KAAA;AAAO,QAAO,OAAA,EAAA,CAAA;AACxB,MAAA,IAAI,SAAS,KAAM,CAAA,KAAK,KAAK,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAChD,QAAI,IAAA,KAAA,CAAM,GAAM,GAAA,KAAA,CAAM,KAAO,EAAA;AAC3B,UAAA,OAAO,GAAG,KAAM,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,SAClB;AACA,QAAO,OAAA,KAAA,CAAM,UAAU,CAAK,IAAA,CAAC,MAAM,QAAW,GAAA,EAAA,GAAK,GAAG,KAAM,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,OAC9D;AACA,MAAA,OAAO,GAAG,KAAM,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,KACjB,CAAA,CAAA;AACD,IAAM,MAAA,KAAA,GAAQ,SAAqB,MAAM;AACvC,MAAO,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAAA,MACL,OAAA;AAAA,QAAA;AACyB,UACvB,eAAqB,EAAA,KAAE,CAAM,KAAA;AAAiB,UAC9C,WAAW,EAAA,OAAc,CAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,QAAe,CAAC,MAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAA,CAAA,KAAA,IAAA,GAAA,EAAA,GAAA,CAAA,CAAA,CAAA;AAAA,UAC3C,SAAA,EAAA,OAAA,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAA,CAAA,MAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,CAAA,CAAA,KAAA,IAAA,GAAA,EAAA,GAAA,CAAA,CAAA;AAAA,SACA;AAAmB,QACrB,CAAA,EAAA,GAAA,KAAA,CAAA,QAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,OACD,CAAA;AAED,KAAa,CAAA,CAAA;AAAA,IAEX,MAAA,CAAA;AAAA,MACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -97,6 +97,7 @@ export declare const ElButton: import("element-plus/es/utils").SFCWithInstall<im
     }>;
     shouldAddSpace: import("vue").ComputedRef<boolean>;
     handleClick: (evt: MouseEvent) => void;
+    buttonKls: import("vue").ComputedRef<string[]>;
     ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown>>;

package/es/components/button/src/button.vue.d.ts

@@ -97,6 +97,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     shouldAddSpace: import("vue").ComputedRef<boolean>;
     handleClick: (evt: MouseEvent) => void;
+    buttonKls: import("vue").ComputedRef<string[]>;
     ElIcon: import("../../../utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("../../../utils").EpPropMergeType<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown>>;

package/es/components/button/src/button2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementBlock, Fragment, renderSlot, normalizeClass, createCommentVNode } from 'vue';
+import { defineComponent, computed, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementBlock, Fragment, renderSlot, normalizeClass, createCommentVNode } from 'vue';
 import { ElIcon } from '../../icon/index.mjs';
 import '../../../hooks/index.mjs';
 import { useButton } from './use-button.mjs';
@@ -19,6 +19,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const buttonStyle = useButtonCustomStyle(props);
     const ns = useNamespace("button");
     const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } = useButton(props, emit);
+    const buttonKls = computed(() => [
+      ns.b(),
+      ns.m(_type.value),
+      ns.m(_size.value),
+      ns.is("disabled", _disabled.value),
+      ns.is("loading", props.loading),
+      ns.is("plain", props.plain),
+      ns.is("round", props.round),
+      ns.is("circle", props.circle),
+      ns.is("text", props.text),
+      ns.is("link", props.link),
+      ns.is("has-bg", props.bg)
+    ]);
     expose({
       ref: _ref,
       size: _size,
@@ -31,19 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref_key: "_ref",
         ref: _ref
       }, unref(_props), {
-        class: [
-          unref(ns).b(),
-          unref(ns).m(unref(_type)),
-          unref(ns).m(unref(_size)),
-          unref(ns).is("disabled", unref(_disabled)),
-          unref(ns).is("loading", _ctx.loading),
-          unref(ns).is("plain", _ctx.plain),
-          unref(ns).is("round", _ctx.round),
-          unref(ns).is("circle", _ctx.circle),
-          unref(ns).is("text", _ctx.text),
-          unref(ns).is("link", _ctx.link),
-          unref(ns).is("has-bg", _ctx.bg)
-        ],
+        class: unref(buttonKls),
         style: unref(buttonStyle),
         onClick: unref(handleClick)
       }), {

package/es/components/button/src/button2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button2.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    ref=\"_ref\"\n    v-bind=\"_props\"\n    :class=\"[\n      ns.b(),\n      ns.m(_type),\n      ns.m(_size),\n      ns.is('disabled', _disabled),\n      ns.is('loading', loading),\n      ns.is('plain', plain),\n      ns.is('round', round),\n      ns.is('circle', circle),\n      ns.is('text', text),\n      ns.is('link', link),\n      ns.is('has-bg', bg),\n    ]\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <template v-if=\"loading\">\n      <slot v-if=\"$slots.loading\" name=\"loading\" />\n      <el-icon v-else :class=\"ns.is('loading')\">\n        <component :is=\"loadingIcon\" />\n      </el-icon>\n    </template>\n    <el-icon v-else-if=\"icon || $slots.icon\">\n      <component :is=\"icon\" v-if=\"icon\" />\n      <slot v-else name=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"{ [ns.em('text', 'expand')]: shouldAddSpace }\"\n    >\n      <slot />\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useButton } from './use-button'\nimport { buttonEmits, buttonProps } from './button'\nimport { useButtonCustomStyle } from './button-custom'\n\ndefineOptions({\n  name: 'ElButton',\n})\n\nconst props = defineProps(buttonProps)\nconst emit = defineEmits(buttonEmits)\n\nconst buttonStyle = useButtonCustomStyle(props)\nconst ns = useNamespace('button')\nconst { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } =\n  useButton(props, emit)\n\ndefineExpose({\n  /** @description button html element */\n  ref: _ref,\n  /** @description button size */\n  size: _size,\n  /** @description button type */\n  type: _type,\n  /** @description button disabled */\n  disabled: _disabled,\n  /** @description whether adding space */\n  shouldAddSpace,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCA+Cc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,WAAA,GAAc,qBAAqB,KAAK,CAAA,CAAA;AAC9C,IAAM,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAChC,IAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAO,KAAO,EAAA,SAAA,EAAW,QAAQ,cAAgB,EAAA,WAAA,EAAA,GAC7D,SAAU,CAAA,KAAA,EAAO,IAAI,CAAA,CAAA;AAEvB,IAAa,MAAA,CAAA;AAAA,MAEX,GAAK,EAAA,IAAA;AAAA,MAEL,IAAM,EAAA,KAAA;AAAA,MAEN,IAAM,EAAA,KAAA;AAAA,MAEN,QAAU,EAAA,SAAA;AAAA,MAEV,cAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button2.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    ref=\"_ref\"\n    v-bind=\"_props\"\n    :class=\"buttonKls\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <template v-if=\"loading\">\n      <slot v-if=\"$slots.loading\" name=\"loading\" />\n      <el-icon v-else :class=\"ns.is('loading')\">\n        <component :is=\"loadingIcon\" />\n      </el-icon>\n    </template>\n    <el-icon v-else-if=\"icon || $slots.icon\">\n      <component :is=\"icon\" v-if=\"icon\" />\n      <slot v-else name=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"{ [ns.em('text', 'expand')]: shouldAddSpace }\"\n    >\n      <slot />\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useButton } from './use-button'\nimport { buttonEmits, buttonProps } from './button'\nimport { useButtonCustomStyle } from './button-custom'\n\ndefineOptions({\n  name: 'ElButton',\n})\n\nconst props = defineProps(buttonProps)\nconst emit = defineEmits(buttonEmits)\n\nconst buttonStyle = useButtonCustomStyle(props)\nconst ns = useNamespace('button')\nconst { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } =\n  useButton(props, emit)\nconst buttonKls = computed(() => [\n  ns.b(),\n  ns.m(_type.value),\n  ns.m(_size.value),\n  ns.is('disabled', _disabled.value),\n  ns.is('loading', props.loading),\n  ns.is('plain', props.plain),\n  ns.is('round', props.round),\n  ns.is('circle', props.circle),\n  ns.is('text', props.text),\n  ns.is('link', props.link),\n  ns.is('has-bg', props.bg),\n])\n\ndefineExpose({\n  /** @description button html element */\n  ref: _ref,\n  /** @description button size */\n  size: _size,\n  /** @description button type */\n  type: _type,\n  /** @description button disabled */\n  disabled: _disabled,\n  /** @description whether adding space */\n  shouldAddSpace,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;mCAoCc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAKA,IAAM,MAAA,WAAA,GAAc,qBAAqB,KAAK,CAAA,CAAA;AAC9C,IAAM,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAChC,IAAM,MAAA,EAAE,IAAM,EAAA,KAAA,EAAO,KAAO,EAAA,SAAA,EAAW,QAAQ,cAAgB,EAAA,WAAA,EAAA,GAC7D,SAAU,CAAA,KAAA,EAAO,IAAI,CAAA,CAAA;AACvB,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM;AAAA,MAC/B,GAAG,CAAE,EAAA;AAAA,MACL,EAAA,CAAG,CAAE,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAChB,EAAA,CAAG,CAAE,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAChB,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjC,EAAG,CAAA,EAAA,CAAG,SAAW,EAAA,KAAA,CAAM,OAAO,CAAA;AAAA,MAC9B,EAAG,CAAA,EAAA,CAAG,OAAS,EAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC1B,EAAG,CAAA,EAAA,CAAG,OAAS,EAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC1B,EAAG,CAAA,EAAA,CAAG,QAAU,EAAA,KAAA,CAAM,MAAM,CAAA;AAAA,MAC5B,EAAG,CAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,CAAM,IAAI,CAAA;AAAA,MACxB,EAAG,CAAA,EAAA,CAAG,MAAQ,EAAA,KAAA,CAAM,IAAI,CAAA;AAAA,MACxB,EAAG,CAAA,EAAA,CAAG,QAAU,EAAA,KAAA,CAAM,EAAE,CAAA;AAAA,KACzB,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MAEX,GAAK,EAAA,IAAA;AAAA,MAEL,IAAM,EAAA,KAAA;AAAA,MAEN,IAAM,EAAA,KAAA;AAAA,MAEN,QAAU,EAAA,SAAA;AAAA,MAEV,cAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -156,6 +156,7 @@ export declare const ElCalendar: import("element-plus/es/utils").SFCWithInstall<
         }>;
         shouldAddSpace: import("vue").ComputedRef<boolean>;
         handleClick: (evt: MouseEvent) => void;
+        buttonKls: import("vue").ComputedRef<string[]>;
         ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
             readonly size: {
                 readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown>>;

package/es/components/calendar/src/calendar.vue.d.ts

@@ -155,7 +155,8 @@ declare const _default: import("vue").DefineComponent<{
             type?: undefined;
         }>;
         shouldAddSpace: import("vue").ComputedRef<boolean>;
-        handleClick: (evt: MouseEvent) => void; /** @description select a specific date */
+        handleClick: (evt: MouseEvent) => void;
+        buttonKls: import("vue").ComputedRef<string[]>;
         ElIcon: import("../../../utils").SFCWithInstall<import("vue").DefineComponent<{
             readonly size: {
                 readonly type: import("vue").PropType<import("../../../utils").EpPropMergeType<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown>>;

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

@@ -1,5 +1,7 @@
 import type { SFCWithInstall } from 'element-plus/es/utils';
 declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
+    emptyValues: ArrayConstructor;
+    valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -56,6 +58,8 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
     popperOptions: Partial<import("@popperjs/core").Options>;
     COMPONENT_NAME: string;
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        emptyValues: ArrayConstructor;
+        valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
         size: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
             readonly required: false;
@@ -109,15 +113,15 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
         options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]) | ((new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]))[], unknown, unknown, () => import("..").CascaderOption[], boolean>;
         props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps) | ((new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps))[], unknown, unknown, () => import("..").CascaderProps, boolean>;
     }>> & {
-        onChange?: ((val: import("..").CascaderValue) => any) | undefined;
-        "onUpdate:modelValue"?: ((val: import("..").CascaderValue) => any) | undefined;
+        onChange?: ((_: import("..").CascaderValue) => any) | undefined;
+        "onUpdate:modelValue"?: ((_: import("..").CascaderValue) => any) | undefined;
         onFocus?: ((evt: FocusEvent) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
         onVisibleChange?: ((val: boolean) => any) | undefined;
         onExpandChange?: ((val: import("..").CascaderValue) => any) | undefined;
         onRemoveTag?: ((val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => any) | undefined;
     }>>;
-    emit: ((event: "update:modelValue", val: import("..").CascaderValue) => void) & ((event: "change", val: import("..").CascaderValue) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "visibleChange", val: boolean) => void) & ((event: "expandChange", val: import("..").CascaderValue) => void) & ((event: "removeTag", val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => void);
+    emit: ((event: "update:modelValue", _: import("..").CascaderValue) => void) & ((event: "change", _: import("..").CascaderValue) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "visibleChange", val: boolean) => void) & ((event: "expandChange", val: import("..").CascaderValue) => void) & ((event: "removeTag", val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => void);
     attrs: {
         [x: string]: unknown;
     };
@@ -162,6 +166,7 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
     t: import("../..").Translator;
     form: import("..").FormContext | undefined;
     formItem: import("..").FormItemContext | undefined;
+    valueOnClear: import("vue").ComputedRef<any>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -13551,14 +13556,16 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
     Check: any;
     CircleClose: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (val: import("..").CascaderValue) => boolean;
-    change: (val: import("..").CascaderValue) => boolean;
+    "update:modelValue": (_: import("..").CascaderValue) => boolean;
+    change: (_: import("..").CascaderValue) => boolean;
     focus: (evt: FocusEvent) => boolean;
     blur: (evt: FocusEvent) => boolean;
     visibleChange: (val: boolean) => boolean;
     expandChange: (val: import("..").CascaderValue) => boolean;
     removeTag: (val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    emptyValues: ArrayConstructor;
+    valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -13612,8 +13619,8 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
     options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]) | ((new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]))[], unknown, unknown, () => import("..").CascaderOption[], boolean>;
     props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps) | ((new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps))[], unknown, unknown, () => import("..").CascaderProps, boolean>;
 }>> & {
-    onChange?: ((val: import("..").CascaderValue) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: import("..").CascaderValue) => any) | undefined;
+    onChange?: ((_: import("..").CascaderValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((_: import("..").CascaderValue) => any) | undefined;
     onFocus?: ((evt: FocusEvent) => any) | undefined;
     onBlur?: ((evt: FocusEvent) => any) | undefined;
     onVisibleChange?: ((val: boolean) => any) | undefined;
@@ -13637,9 +13644,12 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
     collapseTagsTooltip: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     beforeFilter: (value: string) => boolean | Promise<any>;
     tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>;
+    valueOnClear: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown>;
 }>>;
 export default _Cascader;
 export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
+    emptyValues: ArrayConstructor;
+    valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -13696,6 +13706,8 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
     popperOptions: Partial<import("@popperjs/core").Options>;
     COMPONENT_NAME: string;
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        emptyValues: ArrayConstructor;
+        valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
         size: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
             readonly required: false;
@@ -13749,15 +13761,15 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
         options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]) | ((new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]))[], unknown, unknown, () => import("..").CascaderOption[], boolean>;
         props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps) | ((new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps))[], unknown, unknown, () => import("..").CascaderProps, boolean>;
     }>> & {
-        onChange?: ((val: import("..").CascaderValue) => any) | undefined;
-        "onUpdate:modelValue"?: ((val: import("..").CascaderValue) => any) | undefined;
+        onChange?: ((_: import("..").CascaderValue) => any) | undefined;
+        "onUpdate:modelValue"?: ((_: import("..").CascaderValue) => any) | undefined;
         onFocus?: ((evt: FocusEvent) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
         onVisibleChange?: ((val: boolean) => any) | undefined;
         onExpandChange?: ((val: import("..").CascaderValue) => any) | undefined;
         onRemoveTag?: ((val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => any) | undefined;
     }>>;
-    emit: ((event: "update:modelValue", val: import("..").CascaderValue) => void) & ((event: "change", val: import("..").CascaderValue) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "visibleChange", val: boolean) => void) & ((event: "expandChange", val: import("..").CascaderValue) => void) & ((event: "removeTag", val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => void);
+    emit: ((event: "update:modelValue", _: import("..").CascaderValue) => void) & ((event: "change", _: import("..").CascaderValue) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "visibleChange", val: boolean) => void) & ((event: "expandChange", val: import("..").CascaderValue) => void) & ((event: "removeTag", val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => void);
     attrs: {
         [x: string]: unknown;
     };
@@ -13802,6 +13814,7 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
     t: import("../..").Translator;
     form: import("..").FormContext | undefined;
     formItem: import("..").FormItemContext | undefined;
+    valueOnClear: import("vue").ComputedRef<any>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -27191,14 +27204,16 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
     Check: any;
     CircleClose: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (val: import("..").CascaderValue) => boolean;
-    change: (val: import("..").CascaderValue) => boolean;
+    "update:modelValue": (_: import("..").CascaderValue) => boolean;
+    change: (_: import("..").CascaderValue) => boolean;
     focus: (evt: FocusEvent) => boolean;
     blur: (evt: FocusEvent) => boolean;
     visibleChange: (val: boolean) => boolean;
     expandChange: (val: import("..").CascaderValue) => boolean;
     removeTag: (val: import("../cascader-panel/src/node").CascaderNodeValue | import("../cascader-panel/src/node").CascaderNodePathValue) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    emptyValues: ArrayConstructor;
+    valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -27252,8 +27267,8 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
     options: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]) | ((new (...args: any[]) => import("..").CascaderOption[]) | (() => import("..").CascaderOption[]))[], unknown, unknown, () => import("..").CascaderOption[], boolean>;
     props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps) | ((new (...args: any[]) => import("..").CascaderProps) | (() => import("..").CascaderProps))[], unknown, unknown, () => import("..").CascaderProps, boolean>;
 }>> & {
-    onChange?: ((val: import("..").CascaderValue) => any) | undefined;
-    "onUpdate:modelValue"?: ((val: import("..").CascaderValue) => any) | undefined;
+    onChange?: ((_: import("..").CascaderValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((_: import("..").CascaderValue) => any) | undefined;
     onFocus?: ((evt: FocusEvent) => any) | undefined;
     onBlur?: ((evt: FocusEvent) => any) | undefined;
     onVisibleChange?: ((val: boolean) => any) | undefined;
@@ -27277,6 +27292,7 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
     collapseTagsTooltip: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     beforeFilter: (value: string) => boolean | Promise<any>;
     tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown>;
+    valueOnClear: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown>;
 }>>;
 export * from './src/cascader';
 export * from './src/instances';

package/es/components/cascader/src/cascader.d.ts

@@ -1,5 +1,7 @@
 import type { CascaderNode, CascaderValue } from 'element-plus/es/components/cascader-panel';
 export declare const cascaderProps: {
+    emptyValues: ArrayConstructor;
+    valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
@@ -54,8 +56,8 @@ export declare const cascaderProps: {
     props: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("element-plus/es/components/cascader-panel").CascaderProps) | (() => import("element-plus/es/components/cascader-panel").CascaderProps) | ((new (...args: any[]) => import("element-plus/es/components/cascader-panel").CascaderProps) | (() => import("element-plus/es/components/cascader-panel").CascaderProps))[], unknown, unknown, () => import("element-plus/es/components/cascader-panel").CascaderProps, boolean>;
 };
 export declare const cascaderEmits: {
-    "update:modelValue": (val: CascaderValue) => boolean;
-    change: (val: CascaderValue) => boolean;
+    "update:modelValue": (_: CascaderValue) => boolean;
+    change: (_: CascaderValue) => boolean;
     focus: (evt: FocusEvent) => boolean;
     blur: (evt: FocusEvent) => boolean;
     visibleChange: (val: boolean) => boolean;

package/es/components/cascader/src/cascader.mjs

@@ -9,6 +9,7 @@ import { CommonProps } from '../../cascader-panel/src/config.mjs';
 import { useSizeProp } from '../../../hooks/use-size/index.mjs';
 import { useTooltipContentProps } from '../../tooltip/src/content.mjs';
 import { tagProps } from '../../tag/src/tag.mjs';
+import { useEmptyValuesProps } from '../../../hooks/use-empty-values/index.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
 import { isBoolean } from '../../../utils/types.mjs';
 
@@ -57,11 +58,12 @@ const cascaderProps = buildProps({
   validateEvent: {
     type: Boolean,
     default: true
-  }
+  },
+  ...useEmptyValuesProps
 });
 const cascaderEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => !!val || val === null,
-  [CHANGE_EVENT]: (val) => !!val || val === null,
+  [UPDATE_MODEL_EVENT]: (_) => true,
+  [CHANGE_EVENT]: (_) => true,
   focus: (evt) => evt instanceof FocusEvent,
   blur: (evt) => evt instanceof FocusEvent,
   visibleChange: (val) => isBoolean(val),