@element-plus/nightly 0.0.20220113 → 0.0.20220117

package/dist/locale/zh-tw.mjs

@@ -0,0 +1,124 @@
+/*! Element Plus v0.0.20220117 */
+
+var zhTw = {
+  name: "zh-tw",
+  el: {
+    colorpicker: {
+      confirm: "\u78BA\u8A8D",
+      clear: "\u6E05\u7A7A"
+    },
+    datepicker: {
+      now: "\u73FE\u5728",
+      today: "\u4ECA\u5929",
+      cancel: "\u53D6\u6D88",
+      clear: "\u6E05\u7A7A",
+      confirm: "\u78BA\u8A8D",
+      selectDate: "\u9078\u64C7\u65E5\u671F",
+      selectTime: "\u9078\u64C7\u6642\u9593",
+      startDate: "\u958B\u59CB\u65E5\u671F",
+      startTime: "\u958B\u59CB\u6642\u9593",
+      endDate: "\u7D50\u675F\u65E5\u671F",
+      endTime: "\u7D50\u675F\u6642\u9593",
+      prevYear: "\u524D\u4E00\u5E74",
+      nextYear: "\u5F8C\u4E00\u5E74",
+      prevMonth: "\u4E0A\u500B\u6708",
+      nextMonth: "\u4E0B\u500B\u6708",
+      year: "\u5E74",
+      month1: "1 \u6708",
+      month2: "2 \u6708",
+      month3: "3 \u6708",
+      month4: "4 \u6708",
+      month5: "5 \u6708",
+      month6: "6 \u6708",
+      month7: "7 \u6708",
+      month8: "8 \u6708",
+      month9: "9 \u6708",
+      month10: "10 \u6708",
+      month11: "11 \u6708",
+      month12: "12 \u6708",
+      weeks: {
+        sun: "\u65E5",
+        mon: "\u4E00",
+        tue: "\u4E8C",
+        wed: "\u4E09",
+        thu: "\u56DB",
+        fri: "\u4E94",
+        sat: "\u516D"
+      },
+      months: {
+        jan: "\u4E00\u6708",
+        feb: "\u4E8C\u6708",
+        mar: "\u4E09\u6708",
+        apr: "\u56DB\u6708",
+        may: "\u4E94\u6708",
+        jun: "\u516D\u6708",
+        jul: "\u4E03\u6708",
+        aug: "\u516B\u6708",
+        sep: "\u4E5D\u6708",
+        oct: "\u5341\u6708",
+        nov: "\u5341\u4E00\u6708",
+        dec: "\u5341\u4E8C\u6708"
+      }
+    },
+    select: {
+      loading: "\u52A0\u8F09\u4E2D",
+      noMatch: "\u7121\u5339\u914D\u8CC7\u6599",
+      noData: "\u7121\u8CC7\u6599",
+      placeholder: "\u8ACB\u9078\u64C7"
+    },
+    cascader: {
+      noMatch: "\u7121\u5339\u914D\u8CC7\u6599",
+      loading: "\u52A0\u8F09\u4E2D",
+      placeholder: "\u8ACB\u9078\u64C7",
+      noData: "\u7121\u8CC7\u6599"
+    },
+    pagination: {
+      goto: "\u524D\u5F80",
+      pagesize: "\u9805/\u9801",
+      total: "\u5171 {total} \u9805",
+      pageClassifier: "\u9801"
+    },
+    messagebox: {
+      title: "\u63D0\u793A",
+      confirm: "\u78BA\u5B9A",
+      cancel: "\u53D6\u6D88",
+      error: "\u8F38\u5165\u7684\u8CC7\u6599\u4E0D\u7B26\u898F\u5B9A!"
+    },
+    upload: {
+      deleteTip: "\u6309 delete \u9375\u53EF\u522A\u9664",
+      delete: "\u522A\u9664",
+      preview: "\u67E5\u770B\u5716\u7247",
+      continue: "\u7E7C\u7E8C\u4E0A\u50B3"
+    },
+    table: {
+      emptyText: "\u66AB\u7121\u8CC7\u6599",
+      confirmFilter: "\u7BE9\u9078",
+      resetFilter: "\u91CD\u7F6E",
+      clearFilter: "\u5168\u90E8",
+      sumText: "\u5408\u8A08"
+    },
+    tree: {
+      emptyText: "\u66AB\u7121\u8CC7\u6599"
+    },
+    transfer: {
+      noMatch: "\u7121\u5339\u914D\u8CC7\u6599",
+      noData: "\u7121\u8CC7\u6599",
+      titles: ["\u5217\u8868 1", "\u5217\u8868 2"],
+      filterPlaceholder: "\u8ACB\u8F38\u5165\u641C\u7D22\u5167\u5BB9",
+      noCheckedFormat: "\u5171 {total} \u9805",
+      hasCheckedFormat: "\u5DF2\u9078 {checked}/{total} \u9805"
+    },
+    image: {
+      error: "\u52A0\u8F09\u5931\u6557"
+    },
+    pageHeader: {
+      title: "\u8FD4\u56DE"
+    },
+    popconfirm: {
+      confirmButtonText: "\u78BA\u8A8D",
+      cancelButtonText: "\u53D6\u6D88"
+    }
+  }
+};
+
+export { zhTw as default };

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

@@ -1,5 +1,5 @@
 export declare const ElButton: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
-    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
     readonly disabled: BooleanConstructor;
     readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
     readonly icon: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
@@ -19,6 +19,15 @@ export declare const ElButton: import("../../utils/types").SFCWithInstall<import
     buttonDisabled: import("vue").ComputedRef<boolean>;
     shouldAddSpace: import("vue").ComputedRef<boolean>;
     handleClick: (evt: MouseEvent) => void;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (evt: MouseEvent) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -38,7 +47,6 @@ export declare const ElButton: import("../../utils/types").SFCWithInstall<import
     type: import("../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
     icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     nativeType: import("../../utils/props").BuildPropType<StringConstructor, "button" | "submit" | "reset", unknown>;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
     disabled: boolean;
     loading: boolean;
     plain: boolean;
@@ -47,6 +55,7 @@ export declare const ElButton: import("../../utils/types").SFCWithInstall<import
     circle: boolean;
 } & {
     autoInsertSpace?: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
+    size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never> | undefined;
     color?: string | undefined;
 }> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
@@ -55,7 +64,7 @@ export declare const ElButton: import("../../utils/types").SFCWithInstall<import
     icon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     nativeType: import("../../utils/props").BuildPropType<StringConstructor, "button" | "submit" | "reset", unknown>;
     autoInsertSpace: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
+    size: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never>;
     disabled: boolean;
     loading: boolean;
     plain: boolean;
@@ -64,31 +73,53 @@ export declare const ElButton: import("../../utils/types").SFCWithInstall<import
     circle: boolean;
 }>> & {
     ButtonGroup: import("vue").DefineComponent<{
-        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+        readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
         readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    }, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    }, {
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        };
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
         readonly size?: unknown;
         readonly type?: unknown;
     } & {
         type: import("../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
-    } & {}>, {
+    } & {
+        size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never> | undefined;
+    }>, {
         type: import("../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-        size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
+        size: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never>;
     }>;
 };
 export declare const ElButtonGroup: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
-    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
     readonly type: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;
     readonly type?: unknown;
 } & {
     type: import("../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
-} & {}>, {
+} & {
+    size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never> | undefined;
+}>, {
     type: import("../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
+    size: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never>;
 }>>;
 export default ElButton;
 export * from './src/button';

package/es/components/button/index.mjs

@@ -1,7 +1,7 @@
 import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
 import './src/button2.mjs';
 import './src/button-group2.mjs';
-export { buttonEmits, buttonNativeType, buttonProps, buttonSize, buttonType } from './src/button.mjs';
+export { buttonEmits, buttonNativeType, buttonProps, buttonType } from './src/button.mjs';
 import script from './src/button.vue_vue_type_script_lang.mjs';
 import script$1 from './src/button-group.vue_vue_type_script_lang.mjs';
 

package/es/components/button/src/button-group.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes } from 'vue';
 import type buttonGroup from './button-group.vue';
 export declare const buttonGroupProps: {
-    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
     readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
 };
 export declare type ButtonGroupProps = ExtractPropTypes<typeof buttonGroupProps>;

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

@@ -1,14 +1,25 @@
 declare const _default: import("vue").DefineComponent<{
-    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
     readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;
     readonly type?: unknown;
 } & {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
-} & {}>, {
+} & {
+    size?: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never> | undefined;
+}>, {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never>;
 }>;
 export default _default;

package/es/components/button/src/button-group.vue_vue_type_script_lang.mjs

@@ -1,7 +1,9 @@
 import { defineComponent, provide, reactive, toRef } from 'vue';
 import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
 import { buttonGroupProps } from './button-group.mjs';
 import { buttonGroupContextKey } from '../../../tokens/button.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 var script = defineComponent({
   name: "ElButtonGroup",
@@ -11,6 +13,10 @@ var script = defineComponent({
       size: toRef(props, "size"),
       type: toRef(props, "type")
     }));
+    const ns = useNamespace("button");
+    return {
+      ns
+    };
   }
 });
 

package/es/components/button/src/button-group.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/button/src/button-group.vue"],"sourcesContent":["<template>\n  <div class=\"el-button-group\">\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, provide, reactive, toRef } from 'vue'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { buttonGroupProps } from './button-group'\n\nexport default defineComponent({\n  name: 'ElButtonGroup',\n  props: buttonGroupProps,\n\n  setup(props) {\n    provide(\n      buttonGroupContextKey,\n      reactive({\n        size: toRef(props, 'size'),\n        type: toRef(props, 'type'),\n      })\n    )\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AAQA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE,gBAAgB;EACvB,MAAM,KAAK,EAAE;IACX,OAAO,CAAC;;MAEN,IAAI,EAAE;KACP,CAAC,CAAC,CAAC;;;;;;"}
+{"version":3,"file":"button-group.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/button/src/button-group.vue"],"sourcesContent":["<template>\n  <div :class=\"`${ns.b('group')}`\">\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, provide, reactive, toRef } from 'vue'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { buttonGroupProps } from './button-group'\n\nexport default defineComponent({\n  name: 'ElButtonGroup',\n  props: buttonGroupProps,\n\n  setup(props) {\n    provide(\n      buttonGroupContextKey,\n      reactive({\n        size: toRef(props, 'size'),\n        type: toRef(props, 'type'),\n      })\n    )\n    const ns = useNamespace('button')\n    return {\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;AASA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE,gBAAgB;EACvB,MAAM,KAAK,EAAE;IACX,OAAO,CAAC;;MAEN,IAAI,EAAE;KACP,CAAC,CAAC,CAAC;UACE,EAAE,GAAG,YAAY;WAChB;QACH;;;;;;;"}

package/es/components/button/src/button-group.vue_vue_type_template_id_1bab7d77_lang.mjs

@@ -1,10 +1,11 @@
-import { openBlock, createElementBlock, renderSlot } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
 
-const _hoisted_1 = { class: "el-button-group" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(`${_ctx.ns.b("group")}`)
+  }, [
     renderSlot(_ctx.$slots, "default")
-  ]);
+  ], 2);
 }
 
 export { render };

package/es/components/button/src/button-group.vue_vue_type_template_id_1bab7d77_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.vue_vue_type_template_id_1bab7d77_lang.mjs","sources":["../../../../../../packages/components/button/src/button-group.vue?vue&type=template&id=1bab7d77&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-button-group\">\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, provide, reactive, toRef } from 'vue'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { buttonGroupProps } from './button-group'\n\nexport default defineComponent({\n  name: 'ElButtonGroup',\n  props: buttonGroupProps,\n\n  setup(props) {\n    provide(\n      buttonGroupContextKey,\n      reactive({\n        size: toRef(props, 'size'),\n        type: toRef(props, 'type'),\n      })\n    )\n  },\n})\n</script>\n"],"names":[],"mappings":";;;sCAC8B;;;;;;;;"}
+{"version":3,"file":"button-group.vue_vue_type_template_id_1bab7d77_lang.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

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

@@ -1,10 +1,9 @@
 import type { ExtractPropTypes, Component } from 'vue';
 import type button from './button.vue';
 export declare const buttonType: readonly ["default", "primary", "success", "warning", "info", "danger", "text", ""];
-export declare const buttonSize: readonly ["", "large", "default", "small"];
 export declare const buttonNativeType: readonly ["button", "submit", "reset"];
 export declare const buttonProps: {
-    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
     readonly disabled: BooleanConstructor;
     readonly type: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
     readonly icon: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;

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

@@ -12,7 +12,6 @@ const buttonType = [
   "text",
   ""
 ];
-const buttonSize = ["", "large", "default", "small"];
 const buttonNativeType = ["button", "submit", "reset"];
 const buttonProps = buildProps({
   size: useSizeProp,
@@ -46,5 +45,5 @@ const buttonEmits = {
   click: (evt) => evt instanceof MouseEvent
 };
 
-export { buttonEmits, buttonNativeType, buttonProps, buttonSize, buttonType };
+export { buttonEmits, buttonNativeType, buttonProps, buttonType };
 //# sourceMappingURL=button.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.mjs","sources":["../../../../../../packages/components/button/src/button.ts"],"sourcesContent":["import { useSizeProp } from '@element-plus/hooks'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { ExtractPropTypes, Component } from 'vue'\nimport type button from './button.vue'\n\nexport const buttonType = [\n  'default',\n  'primary',\n  'success',\n  'warning',\n  'info',\n  'danger',\n  'text',\n  '',\n] as const\nexport const buttonSize = ['', 'large', 'default', 'small'] as const\nexport const buttonNativeType = ['button', 'submit', 'reset'] as const\n\nexport const buttonProps = buildProps({\n  size: useSizeProp,\n  disabled: Boolean,\n  type: {\n    type: String,\n    values: buttonType,\n    default: '',\n  },\n  icon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  nativeType: {\n    type: String,\n    values: buttonNativeType,\n    default: 'button',\n  },\n  loading: Boolean,\n  plain: Boolean,\n  autofocus: Boolean,\n  round: Boolean,\n  circle: Boolean,\n  color: String,\n  autoInsertSpace: {\n    type: Boolean,\n    default: undefined,\n  },\n} as const)\n\nexport interface ButtonConfigContext {\n  autoInsertSpace?: boolean\n}\n\nexport const buttonEmits = {\n  click: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\n\nexport type ButtonProps = ExtractPropTypes<typeof buttonProps>\nexport type ButtonEmits = typeof buttonEmits\n\nexport type ButtonType = ButtonProps['type']\nexport type ButtonNativeType = ButtonProps['nativeType']\n\nexport type ButtonInstance = InstanceType<typeof button>\n"],"names":[],"mappings":";;;;AAEY,MAAC,UAAU,GAAG;AAC1B,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,MAAM;AACR,EAAE,EAAE;AACJ,EAAE;AACU,MAAC,UAAU,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE;AAChD,MAAC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE;AAClD,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,gBAAgB;AAC5B,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;"}
+{"version":3,"file":"button.mjs","sources":["../../../../../../packages/components/button/src/button.ts"],"sourcesContent":["import { useSizeProp } from '@element-plus/hooks'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { ExtractPropTypes, Component } from 'vue'\nimport type button from './button.vue'\n\nexport const buttonType = [\n  'default',\n  'primary',\n  'success',\n  'warning',\n  'info',\n  'danger',\n  'text',\n  '',\n] as const\nexport const buttonNativeType = ['button', 'submit', 'reset'] as const\n\nexport const buttonProps = buildProps({\n  size: useSizeProp,\n  disabled: Boolean,\n  type: {\n    type: String,\n    values: buttonType,\n    default: '',\n  },\n  icon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  nativeType: {\n    type: String,\n    values: buttonNativeType,\n    default: 'button',\n  },\n  loading: Boolean,\n  plain: Boolean,\n  autofocus: Boolean,\n  round: Boolean,\n  circle: Boolean,\n  color: String,\n  autoInsertSpace: {\n    type: Boolean,\n    default: undefined,\n  },\n} as const)\n\nexport interface ButtonConfigContext {\n  autoInsertSpace?: boolean\n}\n\nexport const buttonEmits = {\n  click: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\n\nexport type ButtonProps = ExtractPropTypes<typeof buttonProps>\nexport type ButtonEmits = typeof buttonEmits\n\nexport type ButtonType = ButtonProps['type']\nexport type ButtonNativeType = ButtonProps['nativeType']\n\nexport type ButtonInstance = InstanceType<typeof button>\n"],"names":[],"mappings":";;;;AAEY,MAAC,UAAU,GAAG;AAC1B,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,MAAM;AACR,EAAE,QAAQ;AACV,EAAE,MAAM;AACR,EAAE,EAAE;AACJ,EAAE;AACU,MAAC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE;AAClD,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,gBAAgB;AAC5B,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;"}

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

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{
-    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, "", false, "" | "small" | "default" | "large", never>;
+    readonly size: import("../../../utils/props").BuildPropReturn<StringConstructor, never, false, "small" | "default" | "large", never>;
     readonly disabled: BooleanConstructor;
     readonly type: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
     readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, "", unknown, unknown, unknown>;
@@ -19,6 +19,15 @@ declare const _default: import("vue").DefineComponent<{
     buttonDisabled: import("vue").ComputedRef<boolean>;
     shouldAddSpace: import("vue").ComputedRef<boolean>;
     handleClick: (evt: MouseEvent) => void;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (evt: MouseEvent) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -38,7 +47,6 @@ declare const _default: import("vue").DefineComponent<{
     type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     nativeType: import("../../../utils/props").BuildPropType<StringConstructor, "button" | "submit" | "reset", unknown>;
-    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
     disabled: boolean;
     loading: boolean;
     plain: boolean;
@@ -47,6 +55,7 @@ declare const _default: import("vue").DefineComponent<{
     circle: boolean;
 } & {
     autoInsertSpace?: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown> | undefined;
+    size?: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never> | undefined;
     color?: string | undefined;
 }> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
@@ -55,7 +64,7 @@ declare const _default: import("vue").DefineComponent<{
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     nativeType: import("../../../utils/props").BuildPropType<StringConstructor, "button" | "submit" | "reset", unknown>;
     autoInsertSpace: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: import("../../../utils/props").BuildPropType<StringConstructor, "" | "small" | "default" | "large", never>;
+    size: import("../../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", never>;
     disabled: boolean;
     loading: boolean;
     plain: boolean;

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

@@ -8,6 +8,7 @@ import { Loading } from '@element-plus/icons-vue';
 import { buttonProps, buttonEmits } from './button.mjs';
 import { buttonGroupContextKey } from '../../../tokens/button.mjs';
 import { useGlobalConfig } from '../../../hooks/use-global-config/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
 import { useSize, useDisabled } from '../../../hooks/use-common-props/index.mjs';
 
@@ -23,6 +24,7 @@ var script = defineComponent({
     const buttonRef = ref();
     const buttonGroupContext = inject(buttonGroupContextKey, void 0);
     const globalConfig = useGlobalConfig("button");
+    const ns = useNamespace("button");
     const autoInsertSpace = computed(() => {
       var _a, _b, _c;
       return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
@@ -92,7 +94,8 @@ var script = defineComponent({
       buttonType,
       buttonDisabled,
       shouldAddSpace,
-      handleClick
+      handleClick,
+      ns
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"button.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    :class=\"[\n      'el-button',\n      buttonType ? 'el-button--' + buttonType : '',\n      buttonSize ? 'el-button--' + buttonSize : '',\n      {\n        'is-disabled': buttonDisabled,\n        'is-loading': loading,\n        'is-plain': plain,\n        'is-round': round,\n        'is-circle': circle,\n      },\n    ]\"\n    :disabled=\"buttonDisabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"loading\" class=\"is-loading\">\n      <loading />\n    </el-icon>\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"{ 'el-button__text--expand': shouldAddSpace }\"\n    >\n      <slot></slot>\n    </span>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { computed, inject, defineComponent, Text, ref } from 'vue'\nimport { useCssVar } from '@vueuse/core'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  useDisabled,\n  useFormItem,\n  useGlobalConfig,\n  useSize,\n} from '@element-plus/hooks'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport { buttonEmits, buttonProps } from './button'\n\nexport default defineComponent({\n  name: 'ElButton',\n\n  components: {\n    ElIcon,\n    Loading,\n  },\n\n  props: buttonProps,\n  emits: buttonEmits,\n\n  setup(props, { emit, slots }) {\n    const buttonRef = ref()\n    const buttonGroupContext = inject(buttonGroupContextKey, undefined)\n    const globalConfig = useGlobalConfig('button')\n    const autoInsertSpace = computed(\n      () =>\n        props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false\n    )\n\n    // add space between two characters in Chinese\n    const shouldAddSpace = computed(() => {\n      const defaultSlot = slots.default?.()\n      if (autoInsertSpace.value && defaultSlot?.length === 1) {\n        const slot = defaultSlot[0]\n        if (slot?.type === Text) {\n          const text = slot.children\n          return /^\\p{Unified_Ideograph}{2}$/u.test(text as string)\n        }\n      }\n      return false\n    })\n\n    const { form } = useFormItem()\n    const buttonSize = useSize(computed(() => buttonGroupContext?.size))\n    const buttonDisabled = useDisabled()\n    const buttonType = computed(\n      () => props.type || buttonGroupContext?.type || ''\n    )\n\n    // calculate hover & active color by color\n    const typeColor = computed(\n      () => useCssVar(`--el-color-${props.type}`).value\n    )\n    const buttonStyle = computed(() => {\n      let styles = {}\n\n      const buttonColor = props.color || typeColor.value\n\n      if (buttonColor) {\n        const shadeBgColor = new TinyColor(buttonColor).shade(10).toString()\n        if (props.plain) {\n          styles = {\n            '--el-button-bg-color': new TinyColor(buttonColor)\n              .tint(90)\n              .toString(),\n            '--el-button-text-color': buttonColor,\n            '--el-button-hover-text-color': 'var(--el-color-white)',\n            '--el-button-hover-bg-color': buttonColor,\n            '--el-button-hover-border-color': buttonColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-text-color': 'var(--el-color-white)',\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        } else {\n          const tintBgColor = new TinyColor(buttonColor).tint(20).toString()\n          styles = {\n            '--el-button-bg-color': buttonColor,\n            '--el-button-border-color': buttonColor,\n            '--el-button-hover-bg-color': tintBgColor,\n            '--el-button-hover-border-color': tintBgColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        }\n\n        if (buttonDisabled.value) {\n          const disabledButtonColor = new TinyColor(buttonColor)\n            .tint(50)\n            .toString()\n          styles['--el-button-disabled-bg-color'] = disabledButtonColor\n          styles['--el-button-disabled-border-color'] = disabledButtonColor\n        }\n      }\n\n      return styles\n    })\n\n    const handleClick = (evt: MouseEvent) => {\n      if (props.nativeType === 'reset') {\n        form?.resetFields()\n      }\n      emit('click', evt)\n    }\n\n    return {\n      buttonRef,\n      buttonStyle,\n\n      buttonSize,\n      buttonType,\n      buttonDisabled,\n\n      shouldAddSpace,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAkDA,EAAE,gBAAgB;;AAElB,IAAI,MAAM;IACN,OAAO;;EAET,KAAK,EAAE;OACF,EAAE;OACF,CAAC;;;IAGJ,MAAM;IACN,MAAM;;MAEJ,OAAO,MAAM,CAAC,KAAK,KAAK;KACzB,CAAC,CAAC;IACH,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM;MACpC,IAAI,EAAE,CAAC;MACP,MAAM,WAAW,GAAG,GAAG,GAAG;MAC1B,IAAI;QACF,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC;;;iBAGnB,6BAA6B,CAAC;;OAExC;MACD,OAAO,KAAK,CAAC;;YAEP,IAAI,EAAE,GAAG;UACX,aAAa,OAAO,CAAC;UACrB,cAAc,GAAG,WAAW,EAAE,CAAC;;;UAG/B;;;MAGJ,IAAI,WAAW,EAAE;QACf,MAAM,YAAY,GAAG,IAAI,UAAU,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC1D,IAAI,KAAK,CAAC,KAAK,EAAE;UACf,MAAM,GAAG;YACP,sBAAsB,EAAE,IAAI,SAAS;;;YAGrC,8BAA8B;YAC9B;YACA,6BAA6B,EAAE;;YAE/B;WACD,CAAC;;UAEF,MAAM,WAAW,GAAG,IAAI,SAAS,CAAC,WAAW;;YAE3C;YACA,0BAA0B,EAAE,WAAW;YACvC;YACA;YACA,6BAA6B,EAAE,YAAY;;;;YAI3C,cAAc,CAAC,KAAK,EAAE;gBAClB,mBAAmB,GAAG,IAAI,SAAS,CAAC;gBACpC,CAAC,+BAA+B,CAAC,GAAG;gBACpC,CAAC,mCAAmC,CAAC;;;;;UAK3C,WAAW,GAAG,CAAC,GAAG;UAClB,KAAK;YACH,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC;;kBAEnB,EAAE,GAAG,CAAC,CAAC;;;eAGV;;;;oBAIK;oBACA;iBACH;;;;;;;"}
+{"version":3,"file":"button.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    :class=\"[\n      `${ns.b()}`,\n      `${ns.m(buttonType)}`,\n      `${ns.m(buttonSize)}`,\n      {\n        'is-disabled': buttonDisabled,\n        'is-loading': loading,\n        'is-plain': plain,\n        'is-round': round,\n        'is-circle': circle,\n      },\n    ]\"\n    :disabled=\"buttonDisabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"loading\" class=\"is-loading\">\n      <loading />\n    </el-icon>\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"[shouldAddSpace ? `${ns.em('text', 'expand')}` : '']\"\n    >\n      <slot></slot>\n    </span>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { computed, inject, defineComponent, Text, ref } from 'vue'\nimport { useCssVar } from '@vueuse/core'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  useDisabled,\n  useFormItem,\n  useGlobalConfig,\n  useNamespace,\n  useSize,\n} from '@element-plus/hooks'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport { buttonEmits, buttonProps } from './button'\n\nexport default defineComponent({\n  name: 'ElButton',\n\n  components: {\n    ElIcon,\n    Loading,\n  },\n\n  props: buttonProps,\n  emits: buttonEmits,\n\n  setup(props, { emit, slots }) {\n    const buttonRef = ref()\n    const buttonGroupContext = inject(buttonGroupContextKey, undefined)\n    const globalConfig = useGlobalConfig('button')\n    const ns = useNamespace('button')\n    const autoInsertSpace = computed(\n      () =>\n        props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false\n    )\n\n    // add space between two characters in Chinese\n    const shouldAddSpace = computed(() => {\n      const defaultSlot = slots.default?.()\n      if (autoInsertSpace.value && defaultSlot?.length === 1) {\n        const slot = defaultSlot[0]\n        if (slot?.type === Text) {\n          const text = slot.children\n          return /^\\p{Unified_Ideograph}{2}$/u.test(text as string)\n        }\n      }\n      return false\n    })\n\n    const { form } = useFormItem()\n    const buttonSize = useSize(computed(() => buttonGroupContext?.size))\n    const buttonDisabled = useDisabled()\n    const buttonType = computed(\n      () => props.type || buttonGroupContext?.type || ''\n    )\n\n    // calculate hover & active color by color\n    const typeColor = computed(\n      () => useCssVar(`--el-color-${props.type}`).value\n    )\n    const buttonStyle = computed(() => {\n      let styles = {}\n\n      const buttonColor = props.color || typeColor.value\n\n      if (buttonColor) {\n        const shadeBgColor = new TinyColor(buttonColor).shade(10).toString()\n        if (props.plain) {\n          styles = {\n            '--el-button-bg-color': new TinyColor(buttonColor)\n              .tint(90)\n              .toString(),\n            '--el-button-text-color': buttonColor,\n            '--el-button-hover-text-color': 'var(--el-color-white)',\n            '--el-button-hover-bg-color': buttonColor,\n            '--el-button-hover-border-color': buttonColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-text-color': 'var(--el-color-white)',\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        } else {\n          const tintBgColor = new TinyColor(buttonColor).tint(20).toString()\n          styles = {\n            '--el-button-bg-color': buttonColor,\n            '--el-button-border-color': buttonColor,\n            '--el-button-hover-bg-color': tintBgColor,\n            '--el-button-hover-border-color': tintBgColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        }\n\n        if (buttonDisabled.value) {\n          const disabledButtonColor = new TinyColor(buttonColor)\n            .tint(50)\n            .toString()\n          styles['--el-button-disabled-bg-color'] = disabledButtonColor\n          styles['--el-button-disabled-border-color'] = disabledButtonColor\n        }\n      }\n\n      return styles\n    })\n\n    const handleClick = (evt: MouseEvent) => {\n      if (props.nativeType === 'reset') {\n        form?.resetFields()\n      }\n      emit('click', evt)\n    }\n\n    return {\n      buttonRef,\n      buttonStyle,\n\n      buttonSize,\n      buttonType,\n      buttonDisabled,\n\n      shouldAddSpace,\n\n      handleClick,\n\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAmDA,EAAE,gBAAgB;;AAElB,IAAI,MAAM;IACN,OAAO;;EAET,KAAK,EAAE;OACF,EAAE;OACF,CAAC;;;IAGJ,MAAM;IACN,MAAM,EAAE,GAAG;;MAET,IAAI,EAAE,MAAM,EAAE,CAAC;MACf,OAAO,CAAC,EAAE,IAAI,EAAE,GAAG;KACpB,CAAC,CAAC;IACH,MAAM,iBAAiB,QAAQ,CAAC,MAAM;MACpC,IAAI,GAAG;MACP,MAAM,WAAW,GAAG,GAAG,GAAG;MAC1B,IAAI;QACF,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAC;;;iBAGnB,6BAA6B,CAAC;;OAExC;MACD,OAAO,KAAK,CAAC;;YAEP,IAAI,EAAE,GAAG;UACX,aAAa,OAAO,CAAC;UACrB,cAAc,GAAG,WAAW,EAAE,CAAC;;;UAG/B;;;MAGJ,IAAI,WAAW,EAAE;QACf,MAAM,YAAY,GAAG,IAAI,UAAU,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC1D,IAAI,KAAK,CAAC,KAAK,EAAE;UACf,MAAM,GAAG;YACP,sBAAsB,EAAE,IAAI,SAAS;;;YAGrC,8BAA8B;YAC9B;YACA,6BAA6B,EAAE;;YAE/B;WACD,CAAC;;UAEF,MAAM,WAAW,GAAG,IAAI,SAAS,CAAC,WAAW;;YAE3C;YACA,0BAA0B,EAAE,WAAW;YACvC;YACA;YACA,6BAA6B,EAAE,YAAY;;;;YAI3C,cAAc,CAAC,KAAK,EAAE;gBAClB,mBAAmB,GAAG,IAAI,SAAS,CAAC;gBACpC,CAAC,+BAA+B,CAAC,GAAG;gBACpC,CAAC,mCAAmC,CAAC;;;;;UAK3C,WAAW,GAAG,CAAC,GAAG;UAClB,KAAK;YACH,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC;;kBAEnB,EAAE,GAAG,CAAC,CAAC;;;eAGV;;;;oBAIK;oBACA;iBACH;;;;;;;;"}

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

@@ -7,9 +7,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", {
     ref: "buttonRef",
     class: normalizeClass([
-      "el-button",
-      _ctx.buttonType ? "el-button--" + _ctx.buttonType : "",
-      _ctx.buttonSize ? "el-button--" + _ctx.buttonSize : "",
+      `${_ctx.ns.b()}`,
+      `${_ctx.ns.m(_ctx.buttonType)}`,
+      `${_ctx.ns.m(_ctx.buttonSize)}`,
       {
         "is-disabled": _ctx.buttonDisabled,
         "is-loading": _ctx.loading,
@@ -40,7 +40,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("v-if", true),
     _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
       key: 2,
-      class: normalizeClass({ "el-button__text--expand": _ctx.shouldAddSpace })
+      class: normalizeClass([_ctx.shouldAddSpace ? `${_ctx.ns.em("text", "expand")}` : ""])
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 2)) : createCommentVNode("v-if", true)

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

@@ -1 +1 @@
-{"version":3,"file":"button.vue_vue_type_template_id_802c5c76_lang.mjs","sources":["../../../../../../packages/components/button/src/button.vue?vue&type=template&id=802c5c76&lang.js"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    :class=\"[\n      'el-button',\n      buttonType ? 'el-button--' + buttonType : '',\n      buttonSize ? 'el-button--' + buttonSize : '',\n      {\n        'is-disabled': buttonDisabled,\n        'is-loading': loading,\n        'is-plain': plain,\n        'is-round': round,\n        'is-circle': circle,\n      },\n    ]\"\n    :disabled=\"buttonDisabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"loading\" class=\"is-loading\">\n      <loading />\n    </el-icon>\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"{ 'el-button__text--expand': shouldAddSpace }\"\n    >\n      <slot></slot>\n    </span>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { computed, inject, defineComponent, Text, ref } from 'vue'\nimport { useCssVar } from '@vueuse/core'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  useDisabled,\n  useFormItem,\n  useGlobalConfig,\n  useSize,\n} from '@element-plus/hooks'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport { buttonEmits, buttonProps } from './button'\n\nexport default defineComponent({\n  name: 'ElButton',\n\n  components: {\n    ElIcon,\n    Loading,\n  },\n\n  props: buttonProps,\n  emits: buttonEmits,\n\n  setup(props, { emit, slots }) {\n    const buttonRef = ref()\n    const buttonGroupContext = inject(buttonGroupContextKey, undefined)\n    const globalConfig = useGlobalConfig('button')\n    const autoInsertSpace = computed(\n      () =>\n        props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false\n    )\n\n    // add space between two characters in Chinese\n    const shouldAddSpace = computed(() => {\n      const defaultSlot = slots.default?.()\n      if (autoInsertSpace.value && defaultSlot?.length === 1) {\n        const slot = defaultSlot[0]\n        if (slot?.type === Text) {\n          const text = slot.children\n          return /^\\p{Unified_Ideograph}{2}$/u.test(text as string)\n        }\n      }\n      return false\n    })\n\n    const { form } = useFormItem()\n    const buttonSize = useSize(computed(() => buttonGroupContext?.size))\n    const buttonDisabled = useDisabled()\n    const buttonType = computed(\n      () => props.type || buttonGroupContext?.type || ''\n    )\n\n    // calculate hover & active color by color\n    const typeColor = computed(\n      () => useCssVar(`--el-color-${props.type}`).value\n    )\n    const buttonStyle = computed(() => {\n      let styles = {}\n\n      const buttonColor = props.color || typeColor.value\n\n      if (buttonColor) {\n        const shadeBgColor = new TinyColor(buttonColor).shade(10).toString()\n        if (props.plain) {\n          styles = {\n            '--el-button-bg-color': new TinyColor(buttonColor)\n              .tint(90)\n              .toString(),\n            '--el-button-text-color': buttonColor,\n            '--el-button-hover-text-color': 'var(--el-color-white)',\n            '--el-button-hover-bg-color': buttonColor,\n            '--el-button-hover-border-color': buttonColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-text-color': 'var(--el-color-white)',\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        } else {\n          const tintBgColor = new TinyColor(buttonColor).tint(20).toString()\n          styles = {\n            '--el-button-bg-color': buttonColor,\n            '--el-button-border-color': buttonColor,\n            '--el-button-hover-bg-color': tintBgColor,\n            '--el-button-hover-border-color': tintBgColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        }\n\n        if (buttonDisabled.value) {\n          const disabledButtonColor = new TinyColor(buttonColor)\n            .tint(50)\n            .toString()\n          styles['--el-button-disabled-bg-color'] = disabledButtonColor\n          styles['--el-button-disabled-border-color'] = disabledButtonColor\n        }\n      }\n\n      return styles\n    })\n\n    const handleClick = (evt: MouseEvent) => {\n      if (props.nativeType === 'reset') {\n        form?.resetFields()\n      }\n      emit('click', evt)\n    }\n\n    return {\n      buttonRef,\n      buttonStyle,\n\n      buttonSize,\n      buttonType,\n      buttonDisabled,\n\n      shouldAddSpace,\n\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAeK;IACA,SAAS;;IAET,KAAK;WACA;;KAES;sBAAf;;;;;;;;;;;;4BAIE;;;;;;;;;"}
+{"version":3,"file":"button.vue_vue_type_template_id_802c5c76_lang.mjs","sources":["../../../../../../packages/components/button/src/button.vue?vue&type=template&id=802c5c76&lang.js"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    :class=\"[\n      `${ns.b()}`,\n      `${ns.m(buttonType)}`,\n      `${ns.m(buttonSize)}`,\n      {\n        'is-disabled': buttonDisabled,\n        'is-loading': loading,\n        'is-plain': plain,\n        'is-round': round,\n        'is-circle': circle,\n      },\n    ]\"\n    :disabled=\"buttonDisabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <el-icon v-if=\"loading\" class=\"is-loading\">\n      <loading />\n    </el-icon>\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"[shouldAddSpace ? `${ns.em('text', 'expand')}` : '']\"\n    >\n      <slot></slot>\n    </span>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { computed, inject, defineComponent, Text, ref } from 'vue'\nimport { useCssVar } from '@vueuse/core'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  useDisabled,\n  useFormItem,\n  useGlobalConfig,\n  useNamespace,\n  useSize,\n} from '@element-plus/hooks'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport { buttonEmits, buttonProps } from './button'\n\nexport default defineComponent({\n  name: 'ElButton',\n\n  components: {\n    ElIcon,\n    Loading,\n  },\n\n  props: buttonProps,\n  emits: buttonEmits,\n\n  setup(props, { emit, slots }) {\n    const buttonRef = ref()\n    const buttonGroupContext = inject(buttonGroupContextKey, undefined)\n    const globalConfig = useGlobalConfig('button')\n    const ns = useNamespace('button')\n    const autoInsertSpace = computed(\n      () =>\n        props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false\n    )\n\n    // add space between two characters in Chinese\n    const shouldAddSpace = computed(() => {\n      const defaultSlot = slots.default?.()\n      if (autoInsertSpace.value && defaultSlot?.length === 1) {\n        const slot = defaultSlot[0]\n        if (slot?.type === Text) {\n          const text = slot.children\n          return /^\\p{Unified_Ideograph}{2}$/u.test(text as string)\n        }\n      }\n      return false\n    })\n\n    const { form } = useFormItem()\n    const buttonSize = useSize(computed(() => buttonGroupContext?.size))\n    const buttonDisabled = useDisabled()\n    const buttonType = computed(\n      () => props.type || buttonGroupContext?.type || ''\n    )\n\n    // calculate hover & active color by color\n    const typeColor = computed(\n      () => useCssVar(`--el-color-${props.type}`).value\n    )\n    const buttonStyle = computed(() => {\n      let styles = {}\n\n      const buttonColor = props.color || typeColor.value\n\n      if (buttonColor) {\n        const shadeBgColor = new TinyColor(buttonColor).shade(10).toString()\n        if (props.plain) {\n          styles = {\n            '--el-button-bg-color': new TinyColor(buttonColor)\n              .tint(90)\n              .toString(),\n            '--el-button-text-color': buttonColor,\n            '--el-button-hover-text-color': 'var(--el-color-white)',\n            '--el-button-hover-bg-color': buttonColor,\n            '--el-button-hover-border-color': buttonColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-text-color': 'var(--el-color-white)',\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        } else {\n          const tintBgColor = new TinyColor(buttonColor).tint(20).toString()\n          styles = {\n            '--el-button-bg-color': buttonColor,\n            '--el-button-border-color': buttonColor,\n            '--el-button-hover-bg-color': tintBgColor,\n            '--el-button-hover-border-color': tintBgColor,\n            '--el-button-active-bg-color': shadeBgColor,\n            '--el-button-active-border-color': shadeBgColor,\n          }\n        }\n\n        if (buttonDisabled.value) {\n          const disabledButtonColor = new TinyColor(buttonColor)\n            .tint(50)\n            .toString()\n          styles['--el-button-disabled-bg-color'] = disabledButtonColor\n          styles['--el-button-disabled-border-color'] = disabledButtonColor\n        }\n      }\n\n      return styles\n    })\n\n    const handleClick = (evt: MouseEvent) => {\n      if (props.nativeType === 'reset') {\n        form?.resetFields()\n      }\n      emit('click', evt)\n    }\n\n    return {\n      buttonRef,\n      buttonStyle,\n\n      buttonSize,\n      buttonType,\n      buttonDisabled,\n\n      shouldAddSpace,\n\n      handleClick,\n\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;OAEO,EAAC;SACE;;;;;;;;;;;;IAYL;IACA,SAAS;;IAET,KAAK;WACA;;KAES;sBAAf;;;;;;;;;;;;4BAIE;;;;;;;;;"}