@element-plus/nightly 0.0.20220220 → 0.0.20220224

package/lib/components/affix/src/affix2.js

@@ -17,37 +17,35 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: affix.affixProps,
   emits: affix.affixEmits,
-  setup(__props, { emit }) {
+  setup(__props, { expose, emit }) {
     const props = __props;
     const ns = index.useNamespace("affix");
     const target = vue.shallowRef();
     const root = vue.shallowRef();
     const scrollContainer = vue.shallowRef();
-    const state = vue.reactive({
-      fixed: false,
-      height: 0,
-      width: 0,
-      scrollTop: 0,
-      clientHeight: 0,
-      transform: 0
-    });
+    const fixed = vue.ref(false);
+    const height = vue.ref(0);
+    const width = vue.ref(0);
+    const scrollTop = vue.ref(0);
+    const clientHeight = vue.ref(0);
+    const transform = vue.ref(0);
     const rootStyle = vue.computed(() => {
       return {
-        height: state.fixed ? `${state.height}px` : "",
-        width: state.fixed ? `${state.width}px` : ""
+        height: fixed.value ? `${height.value}px` : "",
+        width: fixed.value ? `${width.value}px` : ""
       };
     });
     const affixStyle = vue.computed(() => {
-      if (!state.fixed)
+      if (!fixed.value)
         return;
       const offset = props.offset ? `${props.offset}px` : 0;
-      const transform = state.transform ? `translateY(${state.transform}px)` : "";
+      const _transform = transform.value ? `translateY(${transform.value}px)` : "";
       return {
-        height: `${state.height}px`,
-        width: `${state.width}px`,
+        height: `${height.value}px`,
+        width: `${width.value}px`,
         top: props.position === "top" ? offset : "",
         bottom: props.position === "bottom" ? offset : "",
-        transform,
+        transform: _transform,
         zIndex: props.zIndex
       };
     });
@@ -56,37 +54,37 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return;
       const rootRect = root.value.getBoundingClientRect();
       const targetRect = target.value.getBoundingClientRect();
-      state.height = rootRect.height;
-      state.width = rootRect.width;
-      state.scrollTop = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0;
-      state.clientHeight = document.documentElement.clientHeight;
+      height.value = rootRect.height;
+      width.value = rootRect.width;
+      scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0;
+      clientHeight.value = document.documentElement.clientHeight;
       if (props.position === "top") {
         if (props.target) {
-          const difference = targetRect.bottom - props.offset - state.height;
-          state.fixed = props.offset > rootRect.top && targetRect.bottom > 0;
-          state.transform = difference < 0 ? difference : 0;
+          const difference = targetRect.bottom - props.offset - height.value;
+          fixed.value = props.offset > rootRect.top && targetRect.bottom > 0;
+          transform.value = difference < 0 ? difference : 0;
         } else {
-          state.fixed = props.offset > rootRect.top;
+          fixed.value = props.offset > rootRect.top;
         }
       } else {
         if (props.target) {
-          const difference = state.clientHeight - targetRect.top - props.offset - state.height;
-          state.fixed = state.clientHeight - props.offset < rootRect.bottom && state.clientHeight > targetRect.top;
-          state.transform = difference < 0 ? -difference : 0;
+          const difference = clientHeight.value - targetRect.top - props.offset - height.value;
+          fixed.value = clientHeight.value - props.offset < rootRect.bottom && clientHeight.value > targetRect.top;
+          transform.value = difference < 0 ? -difference : 0;
         } else {
-          state.fixed = state.clientHeight - props.offset < rootRect.bottom;
+          fixed.value = clientHeight.value - props.offset < rootRect.bottom;
         }
       }
     };
     const onScroll = () => {
       update();
       emit("scroll", {
-        scrollTop: state.scrollTop,
-        fixed: state.fixed
+        scrollTop: scrollTop.value,
+        fixed: fixed.value
       });
     };
-    vue.watch(() => state.fixed, () => {
-      emit("change", state.fixed);
+    vue.watch(fixed, (fixed2) => {
+      emit("change", fixed2);
     });
     vue.onMounted(() => {
       var _a;
@@ -103,6 +101,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     core.useEventListener(scrollContainer, "scroll", onScroll);
     core.useResizeObserver(root, () => update());
     core.useResizeObserver(target, () => update());
+    expose({
+      update
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "root",
@@ -111,7 +112,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         style: vue.normalizeStyle(vue.unref(rootStyle))
       }, [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass({ [vue.unref(ns).m("fixed")]: vue.unref(state).fixed }),
+          class: vue.normalizeClass({ [vue.unref(ns).m("fixed")]: fixed.value }),
           style: vue.normalizeStyle(vue.unref(affixStyle))
         }, [
           vue.renderSlot(_ctx.$slots, "default")

package/lib/components/affix/src/affix2.js.map

@@ -1 +1 @@
-{"version":3,"file":"affix2.js","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" :class=\"ns.b()\" :style=\"rootStyle\">\n    <div :class=\"{ [ns.m('fixed')]: state.fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onMounted, reactive, shallowRef, watch } from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElAffix',\n})\n\nconst props = defineProps(affixProps)\nconst emit = defineEmits(affixEmits)\n\nconst ns = useNamespace('affix')\n\nconst target = shallowRef<HTMLElement>()\nconst root = shallowRef<HTMLDivElement>()\nconst scrollContainer = shallowRef<HTMLElement | Window>()\n\nconst state = reactive({\n  fixed: false,\n  height: 0, // height of root\n  width: 0, // width of root\n  scrollTop: 0, // scrollTop of documentElement\n  clientHeight: 0, // clientHeight of documentElement\n  transform: 0,\n})\n\nconst rootStyle = computed<CSSProperties>(() => {\n  return {\n    height: state.fixed ? `${state.height}px` : '',\n    width: state.fixed ? `${state.width}px` : '',\n  }\n})\n\nconst affixStyle = computed<CSSProperties | undefined>(() => {\n  if (!state.fixed) return\n\n  const offset = props.offset ? `${props.offset}px` : 0\n  const transform = state.transform ? `translateY(${state.transform}px)` : ''\n\n  return {\n    height: `${state.height}px`,\n    width: `${state.width}px`,\n    top: props.position === 'top' ? offset : '',\n    bottom: props.position === 'bottom' ? offset : '',\n    transform,\n    zIndex: props.zIndex,\n  }\n})\n\nconst update = () => {\n  if (!root.value || !target.value || !scrollContainer.value) return\n\n  const rootRect = root.value.getBoundingClientRect()\n  const targetRect = target.value.getBoundingClientRect()\n  state.height = rootRect.height\n  state.width = rootRect.width\n  state.scrollTop =\n    scrollContainer.value instanceof Window\n      ? document.documentElement.scrollTop\n      : scrollContainer.value.scrollTop || 0\n  state.clientHeight = document.documentElement.clientHeight\n\n  if (props.position === 'top') {\n    if (props.target) {\n      const difference = targetRect.bottom - props.offset - state.height\n      state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n      state.transform = difference < 0 ? difference : 0\n    } else {\n      state.fixed = props.offset > rootRect.top\n    }\n  } else {\n    if (props.target) {\n      const difference =\n        state.clientHeight - targetRect.top - props.offset - state.height\n      state.fixed =\n        state.clientHeight - props.offset < rootRect.bottom &&\n        state.clientHeight > targetRect.top\n      state.transform = difference < 0 ? -difference : 0\n    } else {\n      state.fixed = state.clientHeight - props.offset < rootRect.bottom\n    }\n  }\n}\n\nconst onScroll = () => {\n  update()\n\n  emit('scroll', {\n    scrollTop: state.scrollTop,\n    fixed: state.fixed,\n  })\n}\n\nwatch(\n  () => state.fixed,\n  () => {\n    emit('change', state.fixed)\n  }\n)\n\nonMounted(() => {\n  if (props.target) {\n    target.value =\n      document.querySelector<HTMLElement>(props.target) ?? undefined\n    if (!target.value) {\n      throw new Error(`Target is not existed: ${props.target}`)\n    }\n  } else {\n    target.value = document.documentElement\n  }\n  scrollContainer.value = getScrollContainer(root.value!, true)\n})\n\nuseEventListener(scrollContainer, 'scroll', onScroll)\nuseResizeObserver(root, () => update())\nuseResizeObserver(target, () => update())\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA;AAEA;AACA;AACA;AAEA;;;;;;;;AASA;;;;;;AAOA;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;;;;AASA;;;AAOA;;;;;;;;;;;AAaA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"affix2.js","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n  <div ref=\"root\" :class=\"ns.b()\" :style=\"rootStyle\">\n    <div :class=\"{ [ns.m('fixed')]: fixed }\" :style=\"affixStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, shallowRef, watch } from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElAffix',\n})\n\nconst props = defineProps(affixProps)\nconst emit = defineEmits(affixEmits)\n\nconst ns = useNamespace('affix')\n\nconst target = shallowRef<HTMLElement>()\nconst root = shallowRef<HTMLDivElement>()\nconst scrollContainer = shallowRef<HTMLElement | Window>()\n\nconst fixed = ref(false)\nconst height = ref(0) // height of root\nconst width = ref(0) // width of root\nconst scrollTop = ref(0) // scrollTop of documentElement\nconst clientHeight = ref(0) // clientHeight of documentElement\nconst transform = ref(0)\n\nconst rootStyle = computed<CSSProperties>(() => {\n  return {\n    height: fixed.value ? `${height.value}px` : '',\n    width: fixed.value ? `${width.value}px` : '',\n  }\n})\n\nconst affixStyle = computed<CSSProperties | undefined>(() => {\n  if (!fixed.value) return\n\n  const offset = props.offset ? `${props.offset}px` : 0\n  const _transform = transform.value ? `translateY(${transform.value}px)` : ''\n\n  return {\n    height: `${height.value}px`,\n    width: `${width.value}px`,\n    top: props.position === 'top' ? offset : '',\n    bottom: props.position === 'bottom' ? offset : '',\n    transform: _transform,\n    zIndex: props.zIndex,\n  }\n})\n\nconst update = () => {\n  if (!root.value || !target.value || !scrollContainer.value) return\n\n  const rootRect = root.value.getBoundingClientRect()\n  const targetRect = target.value.getBoundingClientRect()\n  height.value = rootRect.height\n  width.value = rootRect.width\n  scrollTop.value =\n    scrollContainer.value instanceof Window\n      ? document.documentElement.scrollTop\n      : scrollContainer.value.scrollTop || 0\n  clientHeight.value = document.documentElement.clientHeight\n\n  if (props.position === 'top') {\n    if (props.target) {\n      const difference = targetRect.bottom - props.offset - height.value\n      fixed.value = props.offset > rootRect.top && targetRect.bottom > 0\n      transform.value = difference < 0 ? difference : 0\n    } else {\n      fixed.value = props.offset > rootRect.top\n    }\n  } else {\n    if (props.target) {\n      const difference =\n        clientHeight.value - targetRect.top - props.offset - height.value\n      fixed.value =\n        clientHeight.value - props.offset < rootRect.bottom &&\n        clientHeight.value > targetRect.top\n      transform.value = difference < 0 ? -difference : 0\n    } else {\n      fixed.value = clientHeight.value - props.offset < rootRect.bottom\n    }\n  }\n}\n\nconst onScroll = () => {\n  update()\n\n  emit('scroll', {\n    scrollTop: scrollTop.value,\n    fixed: fixed.value,\n  })\n}\n\nwatch(fixed, (fixed) => {\n  emit('change', fixed)\n})\n\nonMounted(() => {\n  if (props.target) {\n    target.value =\n      document.querySelector<HTMLElement>(props.target) ?? undefined\n    if (!target.value) {\n      throw new Error(`Target is not existed: ${props.target}`)\n    }\n  } else {\n    target.value = document.documentElement\n  }\n  scrollContainer.value = getScrollContainer(root.value!, true)\n})\n\nuseEventListener(scrollContainer, 'scroll', onScroll)\nuseResizeObserver(root, () => update())\nuseResizeObserver(target, () => update())\n\ndefineExpose({\n  /** @description update affix status */\n  update,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;;;;;;AAOA;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;;;;AASA;;;AAIA;;;;;;;;;;;AAaA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/avatar/index.d.ts

@@ -7,11 +7,69 @@ export declare const ElAvatar: import("element-plus/es/utils").SFCWithInstall<im
     readonly srcSet: StringConstructor;
     readonly fit: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("csstype").ObjectFitProperty>, "cover", unknown, unknown, unknown>;
 }, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<readonly [NumberConstructor, StringConstructor], "default", unknown, "default" | "small" | "large", number>;
+        readonly shape: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "circle", unknown, "circle" | "square", unknown>;
+        readonly icon: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
+        readonly src: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly alt: StringConstructor;
+        readonly srcSet: StringConstructor;
+        readonly fit: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("csstype").ObjectFitProperty>, "cover", unknown, unknown, unknown>;
+    }>> & {
+        onError?: ((evt: Event) => any) | undefined;
+    }>>;
+    emit: (event: "error", evt: Event) => 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;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+    };
     hasLoadError: import("vue").Ref<boolean>;
     avatarClass: import("vue").ComputedRef<string[]>;
     sizeStyle: import("vue").ComputedRef<import("vue").CSSProperties | undefined>;
     fitStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
     handleError: (e: Event) => void;
+    ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+            readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+        }>> & {
+            [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+        }>>;
+        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;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: {
+                (name: string, state: boolean | undefined): string;
+                (name: string): string;
+            };
+        };
+        style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    }, 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 size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }>>, {
+        size: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown>;
+        color: string;
+    }>> & Record<string, any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/components/avatar/src/avatar.vue.d.ts

@@ -8,11 +8,69 @@ declare const _default: import("vue").DefineComponent<{
     readonly srcSet: StringConstructor;
     readonly fit: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("csstype").ObjectFitProperty>, "cover", unknown, unknown, unknown>;
 }, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<readonly [NumberConstructor, StringConstructor], "default", unknown, "default" | "small" | "large", number>;
+        readonly shape: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "circle", unknown, "circle" | "square", unknown>;
+        readonly icon: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown, unknown, unknown>;
+        readonly src: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+        readonly alt: StringConstructor;
+        readonly srcSet: StringConstructor;
+        readonly fit: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<import("csstype").ObjectFitProperty>, "cover", unknown, unknown, unknown>;
+    }>> & {
+        onError?: ((evt: Event) => any) | undefined;
+    }>>;
+    emit: (event: "error", evt: Event) => 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;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: {
+            (name: string, state: boolean | undefined): string;
+            (name: string): string;
+        };
+    };
     hasLoadError: import("vue").Ref<boolean>;
     avatarClass: import("vue").ComputedRef<string[]>;
     sizeStyle: import("vue").ComputedRef<CSSProperties | undefined>;
     fitStyle: import("vue").ComputedRef<CSSProperties>;
     handleError: (e: Event) => void;
+    ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+            readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+        }>> & {
+            [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+        }>>;
+        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;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: {
+                (name: string, state: boolean | undefined): string;
+                (name: string): string;
+            };
+        };
+        style: import("vue").ComputedRef<CSSProperties>;
+    }, 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 size: import("element-plus/es/utils").BuildPropReturn<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+        readonly color: import("element-plus/es/utils").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    }>>, {
+        size: import("element-plus/es/utils").BuildPropType<import("element-plus/es/utils").PropWrapper<string | number>, unknown, unknown>;
+        color: string;
+    }>> & Record<string, any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/components/avatar/src/avatar2.js

@@ -3,25 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index = require('../../icon/index.js');
+var index$1 = require('../../icon/index.js');
 require('../../../hooks/index.js');
 require('../../../utils/index.js');
 var avatar = require('./avatar.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index$1 = require('../../../hooks/use-namespace/index.js');
+var index = require('../../../hooks/use-namespace/index.js');
 var shared = require('@vue/shared');
 var core = require('@vueuse/core');
 var style = require('../../../utils/vue/style.js');
 
-const _sfc_main = vue.defineComponent({
-  name: "ElAvatar",
-  components: {
-    ElIcon: index.ElIcon
-  },
+const _hoisted_1 = ["src", "alt", "srcset"];
+const __default__ = {
+  name: "ElAvatar"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
   props: avatar.avatarProps,
   emits: avatar.avatarEmits,
-  setup(props, { emit }) {
-    const ns = index$1.useNamespace("avatar");
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("avatar");
     const hasLoadError = vue.ref(false);
     const avatarClass = vue.computed(() => {
       const { size, icon, shape } = props;
@@ -48,38 +49,28 @@ const _sfc_main = vue.defineComponent({
       hasLoadError.value = true;
       emit("error", e);
     }
-    return {
-      hasLoadError,
-      avatarClass,
-      sizeStyle,
-      fitStyle,
-      handleError
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("span", {
+        class: vue.normalizeClass(vue.unref(avatarClass)),
+        style: vue.normalizeStyle(vue.unref(sizeStyle))
+      }, [
+        (_ctx.src || _ctx.srcSet) && !hasLoadError.value ? (vue.openBlock(), vue.createElementBlock("img", {
+          key: 0,
+          src: _ctx.src,
+          alt: _ctx.alt,
+          srcset: _ctx.srcSet,
+          style: vue.normalizeStyle(vue.unref(fitStyle)),
+          onError: handleError
+        }, null, 44, _hoisted_1)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ElIcon), { key: 1 }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
+          ]),
+          _: 1
+        })) : vue.renderSlot(_ctx.$slots, "default", { key: 2 })
+      ], 6);
     };
   }
 });
-const _hoisted_1 = ["src", "alt", "srcset"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_icon = vue.resolveComponent("el-icon");
-  return vue.openBlock(), vue.createElementBlock("span", {
-    class: vue.normalizeClass(_ctx.avatarClass),
-    style: vue.normalizeStyle(_ctx.sizeStyle)
-  }, [
-    (_ctx.src || _ctx.srcSet) && !_ctx.hasLoadError ? (vue.openBlock(), vue.createElementBlock("img", {
-      key: 0,
-      src: _ctx.src,
-      alt: _ctx.alt,
-      srcset: _ctx.srcSet,
-      style: vue.normalizeStyle(_ctx.fitStyle),
-      onError: _cache[0] || (_cache[0] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-    }, null, 44, _hoisted_1)) : _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
-      default: vue.withCtx(() => [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
-      ]),
-      _: 1
-    })) : vue.renderSlot(_ctx.$slots, "default", { key: 2 })
-  ], 6);
-}
-var Avatar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = Avatar;
+exports["default"] = _sfc_main;
 //# sourceMappingURL=avatar2.js.map

package/lib/components/avatar/src/avatar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar2.js","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n  <span :class=\"avatarClass\" :style=\"sizeStyle\">\n    <img\n      v-if=\"(src || srcSet) && !hasLoadError\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :srcset=\"srcSet\"\n      :style=\"fitStyle\"\n      @error=\"handleError\"\n    />\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <slot v-else></slot>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isNumber, isString, addUnit } from '@element-plus/utils'\nimport { avatarEmits, avatarProps } from './avatar'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAvatar',\n  components: {\n    ElIcon,\n  },\n  props: avatarProps,\n  emits: avatarEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('avatar')\n\n    const hasLoadError = ref(false)\n\n    const avatarClass = computed(() => {\n      const { size, icon, shape } = props\n      const classList = [ns.b()]\n      if (isString(size)) classList.push(ns.m(size))\n      if (icon) classList.push(ns.m('icon'))\n      if (shape) classList.push(ns.m(shape))\n      return classList\n    })\n\n    const sizeStyle = computed(() => {\n      const { size } = props\n      return isNumber(size)\n        ? ({\n            '--el-avatar-size': addUnit(size),\n          } as CSSProperties)\n        : undefined\n    })\n\n    const fitStyle = computed<CSSProperties>(() => ({\n      objectFit: props.fit,\n    }))\n\n    // need reset hasLoadError to false if src changed\n    watch(\n      () => props.src,\n      () => (hasLoadError.value = false)\n    )\n\n    function handleError(e: Event) {\n      hasLoadError.value = true\n      emit('error', e)\n    }\n\n    return {\n      hasLoadError,\n      avatarClass,\n      sizeStyle,\n      fitStyle,\n      handleError,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","avatarProps","avatarEmits","useNamespace","ref","computed","isString","isNumber","addUnit","_createElementBlock","_normalizeClass","_normalizeStyle","_createBlock","_resolveDynamicComponent","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAKC,qBAAa;AAExB,UAAM,eAAeC,QAAI;AAEzB,UAAM,cAAcC,aAAS,MAAM;AACjC,YAAM,EAAE,MAAM,MAAM,UAAU;AAC9B,YAAM,YAAY,CAAC,GAAG;AACtB,UAAIC,gBAAS;AAAO,kBAAU,KAAK,GAAG,EAAE;AACxC,UAAI;AAAM,kBAAU,KAAK,GAAG,EAAE;AAC9B,UAAI;AAAO,kBAAU,KAAK,GAAG,EAAE;AAC/B,aAAO;AAAA;AAGT,UAAM,YAAYD,aAAS,MAAM;AAC/B,YAAM,EAAE,SAAS;AACjB,aAAOE,cAAS,QACX;AAAA,QACC,oBAAoBC,cAAQ;AAAA,UAE9B;AAAA;AAGN,UAAM,WAAWH,aAAwB;AAAO,MAC9C,WAAW,MAAM;AAAA;AAInB,cACE,MAAM,MAAM,KACZ,MAAO,aAAa,QAAQ;AAG9B,yBAAqB,GAAU;AAC7B,mBAAa,QAAQ;AACrB,WAAK,SAAS;AAAA;AAGhB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;0BA5EJI,uBAaO;AAAA,IAbA,OAAKC,mBAAE;AAAA,IAAc,OAAKC,mBAAE;AAAA;IAExB,aAAO,gBAAM,CAAM,sCAD5BF,uBAOE;AAAA;MALC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAKE,mBAAE;AAAA,MACP,SAAK,uCAAE;AAAA,gCAEU,8BAApBC,gBAEU;AAAA,2BADR,MAAwB;AAAA,0BAAxBA,gBAAwBC,4BAAR;AAAA;AAAA;UAElBC,eAAoB;AAAA;;;;;;"}
+{"version":3,"file":"avatar2.js","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n  <span :class=\"avatarClass\" :style=\"sizeStyle\">\n    <img\n      v-if=\"(src || srcSet) && !hasLoadError\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :srcset=\"srcSet\"\n      :style=\"fitStyle\"\n      @error=\"handleError\"\n    />\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <slot v-else></slot>\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { isNumber, isString, addUnit } from '@element-plus/utils'\nimport { avatarEmits, avatarProps } from './avatar'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElAvatar',\n})\n\nconst props = defineProps(avatarProps)\nconst emit = defineEmits(avatarEmits)\n\nconst ns = useNamespace('avatar')\n\nconst hasLoadError = ref(false)\n\nconst avatarClass = computed(() => {\n  const { size, icon, shape } = props\n  const classList = [ns.b()]\n  if (isString(size)) classList.push(ns.m(size))\n  if (icon) classList.push(ns.m('icon'))\n  if (shape) classList.push(ns.m(shape))\n  return classList\n})\n\nconst sizeStyle = computed(() => {\n  const { size } = props\n  return isNumber(size)\n    ? ({\n        '--el-avatar-size': addUnit(size),\n      } as CSSProperties)\n    : undefined\n})\n\nconst fitStyle = computed<CSSProperties>(() => ({\n  objectFit: props.fit,\n}))\n\n// need reset hasLoadError to false if src changed\nwatch(\n  () => props.src,\n  () => (hasLoadError.value = false)\n)\n\nfunction handleError(e: Event) {\n  hasLoadError.value = true\n  emit('error', e)\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA;AAEA;AAEA;;;;;;;;;;;AASA;;;;;;AASA;;;AAKA;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/badge/src/badge2.js

@@ -16,7 +16,7 @@ const __default__ = {
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: badge.badgeProps,
-  setup(__props) {
+  setup(__props, { expose }) {
     const props = __props;
     const ns = index.useNamespace("badge");
     const content = vue.computed(() => {
@@ -27,6 +27,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return `${props.value}`;
     });
+    expose({
+      content
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(vue.unref(ns).b())

package/lib/components/badge/src/badge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge2.js","sources":["../../../../../../packages/components/badge/src/badge.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <slot></slot>\n    <transition :name=\"`${ns.namespace.value}-zoom-in-center`\">\n      <sup\n        v-show=\"!hidden && (content || content === '0' || 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        v-text=\"content\"\n      >\n      </sup>\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\n  if (isNumber(props.value) && isNumber(props.max)) {\n    return props.max < props.value ? `${props.max}+` : `${props.value}`\n  }\n  return `${props.value}`\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"badge2.js","sources":["../../../../../../packages/components/badge/src/badge.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <slot></slot>\n    <transition :name=\"`${ns.namespace.value}-zoom-in-center`\">\n      <sup\n        v-show=\"!hidden && (content || content === '0' || 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        v-text=\"content\"\n      >\n      </sup>\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\n  if (isNumber(props.value) && isNumber(props.max)) {\n    return props.max < props.value ? `${props.max}+` : `${props.value}`\n  }\n  return `${props.value}`\n})\n\ndefineExpose({\n  /** @description badge content */\n  content,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA;AAEA;;;;;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -57,7 +57,6 @@ export declare const ElButton: import("element-plus/es/utils").SFCWithInstall<im
     _type: import("vue").ComputedRef<"default" | "" | "primary" | "success" | "warning" | "info" | "danger" | "text">;
     autoInsertSpace: import("vue").ComputedRef<import("element-plus/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>>;
     shouldAddSpace: import("vue").ComputedRef<boolean>;
-    typeColor: import("vue").ComputedRef<string>;
     buttonStyle: import("vue").ComputedRef<Record<string, string>>;
     handleClick: (evt: MouseEvent) => void;
     ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
@@ -128,6 +127,12 @@ export declare const ElButton: import("element-plus/es/utils").SFCWithInstall<im
         readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, never, false, "default" | "small" | "large", never>;
         readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
     }, {
+        props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+            readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, never, false, "default" | "small" | "large", never>;
+            readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+        }>> & {
+            [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+        }>>;
         ns: {
             namespace: import("vue").ComputedRef<string>;
             b: (blockSuffix?: string) => string;
@@ -154,6 +159,12 @@ export declare const ElButtonGroup: import("element-plus/es/utils").SFCWithInsta
     readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, never, false, "default" | "small" | "large", never>;
     readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
 }, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("element-plus/es/utils").BuildPropReturn<StringConstructor, never, false, "default" | "small" | "large", never>;
+        readonly type: import("element-plus/es/utils").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;

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

@@ -2,6 +2,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: import("../../../utils").BuildPropReturn<StringConstructor, never, false, "default" | "small" | "large", never>;
     readonly type: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
 }, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        readonly size: import("../../../utils").BuildPropReturn<StringConstructor, never, false, "default" | "small" | "large", never>;
+        readonly type: import("../../../utils").BuildPropReturn<StringConstructor, "", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+    }>> & {
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
+    }>>;
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;

package/lib/components/button/src/button-group2.js

@@ -6,32 +6,31 @@ var vue = require('vue');
 require('../../../tokens/index.js');
 require('../../../hooks/index.js');
 var buttonGroup = require('./button-group.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var button = require('../../../tokens/button.js');
 var index = require('../../../hooks/use-namespace/index.js');
 
-const _sfc_main = vue.defineComponent({
-  name: "ElButtonGroup",
+const __default__ = {
+  name: "ElButtonGroup"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
   props: buttonGroup.buttonGroupProps,
-  setup(props) {
+  setup(__props) {
+    const props = __props;
     vue.provide(button.buttonGroupContextKey, vue.reactive({
       size: vue.toRef(props, "size"),
       type: vue.toRef(props, "type")
     }));
     const ns = index.useNamespace("button");
-    return {
-      ns
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(`${vue.unref(ns).b("group")}`)
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 2);
     };
   }
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(`${_ctx.ns.b("group")}`)
-  }, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ], 2);
-}
-var ButtonGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = ButtonGroup;
+exports["default"] = _sfc_main;
 //# sourceMappingURL=button-group2.js.map

package/lib/components/button/src/button-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group2.js","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":["defineComponent","buttonGroupProps","buttonGroupContextKey","reactive","toRef","useNamespace","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;;;;;;;;AAWA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,gBACEC,8BACAC,aAAS;AAAA,MACP,MAAMC,UAAM,OAAO;AAAA,MACnB,MAAMA,UAAM,OAAO;AAAA;AAGvB,UAAM,KAAKC,mBAAa;AACxB,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;0BAxBJC,uBAEM;AAAA,IAFA,OAAKC,sBAAK,QAAG,EAAC;AAAA;IAClBC,eAAa;AAAA;;;;;;"}
+{"version":3,"file":"button-group2.js","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\" setup>\nimport { provide, reactive, toRef } from 'vue'\nimport { buttonGroupContextKey } from '@element-plus/tokens'\nimport { useNamespace } from '@element-plus/hooks'\nimport { buttonGroupProps } from './button-group'\n\ndefineOptions({\n  name: 'ElButtonGroup',\n})\nconst props = defineProps(buttonGroupProps)\nprovide(\n  buttonGroupContextKey,\n  reactive({\n    size: toRef(props, 'size'),\n    type: toRef(props, 'type'),\n  })\n)\nconst ns = useNamespace('button')\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAeA;;;;AAOA;;;;;;;;;;;;;"}

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

@@ -57,7 +57,6 @@ declare const _default: import("vue").DefineComponent<{
     _type: import("vue").ComputedRef<"default" | "" | "primary" | "success" | "warning" | "info" | "danger" | "text">;
     autoInsertSpace: import("vue").ComputedRef<import("../../../utils").BuildPropType<BooleanConstructor, unknown, unknown>>;
     shouldAddSpace: import("vue").ComputedRef<boolean>;
-    typeColor: import("vue").ComputedRef<string>;
     buttonStyle: import("vue").ComputedRef<Record<string, string>>;
     handleClick: (evt: MouseEvent) => void;
     ElIcon: import("../../../utils").SFCWithInstall<import("vue").DefineComponent<{

package/lib/components/button/src/button2.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var core = require('@vueuse/core');
 var tinycolor = require('@ctrl/tinycolor');
 var index$4 = require('../../icon/index.js');
 require('../../../hooks/index.js');
@@ -50,13 +49,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return false;
     });
-    const typeColor = vue.computed(() => core.useCssVar(`--el-color-${props.type}`).value);
     const buttonStyle = vue.computed(() => {
       let styles = {};
-      const buttonColor = props.color || typeColor.value;
+      const buttonColor = props.color;
       if (buttonColor) {
         const color = new tinycolor.TinyColor(buttonColor);
-        const shadeBgColor = color.shade(10).toString();
+        const shadeBgColor = color.shade(20).toString();
         if (props.plain) {
           styles = {
             "--el-button-bg-color": color.tint(90).toString(),
@@ -69,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             "--el-button-active-border-color": shadeBgColor
           };
         } else {
-          const tintBgColor = color.tint(20).toString();
+          const tintBgColor = color.tint(30).toString();
           styles = {
             "--el-button-bg-color": buttonColor,
             "--el-button-border-color": buttonColor,

package/lib/components/button/src/button2.js.map

@@ -1 +1 @@
-{"version":3,"file":"button2.js","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"_ref\"\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    ]\"\n    :disabled=\"_disabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <template v-if=\"loading\">\n      <slot v-if=\"$slots.loading\" name=\"loading\"></slot>\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\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"{ [ns.em('text', 'expand')]: shouldAddSpace }\"\n    >\n      <slot></slot>\n    </span>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, Text, ref, useSlots } 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 { buttonEmits, buttonProps } from './button'\n\ndefineOptions({\n  name: 'ElButton',\n})\n\nconst props = defineProps(buttonProps)\nconst emit = defineEmits(buttonEmits)\nconst slots = useSlots()\n\nconst buttonGroupContext = inject(buttonGroupContextKey, undefined)\nconst globalConfig = useGlobalConfig('button')\nconst ns = useNamespace('button')\nconst { form } = useFormItem()\nconst _size = useSize(computed(() => buttonGroupContext?.size))\nconst _disabled = useDisabled()\nconst _ref = ref<HTMLButtonElement>()\n\nconst _type = computed(() => props.type || buttonGroupContext?.type || '')\nconst autoInsertSpace = computed(\n  () => props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false\n)\n\n// add space between two characters in Chinese\nconst 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// calculate hover & active color by color\nconst typeColor = computed(() => useCssVar(`--el-color-${props.type}`).value)\nconst buttonStyle = computed(() => {\n  let styles: Record<string, string> = {}\n\n  const buttonColor = props.color || typeColor.value\n\n  if (buttonColor) {\n    const color = new TinyColor(buttonColor)\n    const shadeBgColor = color.shade(10).toString()\n    if (props.plain) {\n      styles = {\n        '--el-button-bg-color': color.tint(90).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 = color.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 (_disabled.value) {\n      const disabledButtonColor = color.tint(50).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\nconst handleClick = (evt: MouseEvent) => {\n  if (props.nativeType === 'reset') {\n    form?.resetFields()\n  }\n  emit('click', evt)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAKA;;;;;;;;;;;AAaA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button2.js","sources":["../../../../../../packages/components/button/src/button.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"_ref\"\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    ]\"\n    :disabled=\"_disabled || loading\"\n    :autofocus=\"autofocus\"\n    :type=\"nativeType\"\n    :style=\"buttonStyle\"\n    @click=\"handleClick\"\n  >\n    <template v-if=\"loading\">\n      <slot v-if=\"$slots.loading\" name=\"loading\"></slot>\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\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <span\n      v-if=\"$slots.default\"\n      :class=\"{ [ns.em('text', 'expand')]: shouldAddSpace }\"\n    >\n      <slot></slot>\n    </span>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, Text, ref, useSlots } from 'vue'\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 { buttonEmits, buttonProps } from './button'\n\ndefineOptions({\n  name: 'ElButton',\n})\n\nconst props = defineProps(buttonProps)\nconst emit = defineEmits(buttonEmits)\nconst slots = useSlots()\n\nconst buttonGroupContext = inject(buttonGroupContextKey, undefined)\nconst globalConfig = useGlobalConfig('button')\nconst ns = useNamespace('button')\nconst { form } = useFormItem()\nconst _size = useSize(computed(() => buttonGroupContext?.size))\nconst _disabled = useDisabled()\nconst _ref = ref<HTMLButtonElement>()\n\nconst _type = computed(() => props.type || buttonGroupContext?.type || '')\nconst autoInsertSpace = computed(\n  () => props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false\n)\n\n// add space between two characters in Chinese\nconst 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// calculate hover & active color by custom color\n// only work when custom color\nconst buttonStyle = computed(() => {\n  let styles: Record<string, string> = {}\n\n  const buttonColor = props.color\n\n  if (buttonColor) {\n    const color = new TinyColor(buttonColor)\n    const shadeBgColor = color.shade(20).toString()\n    if (props.plain) {\n      styles = {\n        '--el-button-bg-color': color.tint(90).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 = color.tint(30).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 (_disabled.value) {\n      const disabledButtonColor = color.tint(50).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\nconst handleClick = (evt: MouseEvent) => {\n  if (props.nativeType === 'reset') {\n    form?.resetFields()\n  }\n  emit('click', evt)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAKA;;;;;;;;;;;AAcA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}