element-plus 1.2.0-beta.5 → 1.2.0-beta.6

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

@@ -40,11 +40,11 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     isChecked: import("vue").ComputedRef<boolean>;
     isDisabled: import("vue").ComputedRef<boolean | undefined>;
-    checkboxSize: import("vue").ComputedRef<any>;
+    checkboxSize: import("vue").ComputedRef<"" | ComponentSize>;
     model: import("vue").WritableComputedRef<any>;
     handleChange: (e: InputEvent) => void;
     focus: import("vue").Ref<boolean>;
-    size: import("vue").ComputedRef<string | undefined>;
+    size: import("vue").ComputedRef<"" | ComponentSize>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     modelValue?: unknown;
     label?: unknown;
@@ -66,9 +66,9 @@ declare const _default: import("vue").DefineComponent<{
     checked: boolean;
 } & {
     size?: ComponentSize | undefined;
+    name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
-    name?: string | undefined;
     tabindex?: string | number | undefined;
     id?: string | undefined;
     trueLabel?: string | number | undefined;
@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    modelValue: string | number | boolean;
     name: string;
+    modelValue: string | number | boolean;
     border: boolean;
     id: string;
     indeterminate: boolean;

package/es/components/checkbox/src/useCheckbox.d.ts

@@ -32,16 +32,15 @@ export declare const useCheckboxGroup: () => {
     isGroup: import("vue").ComputedRef<boolean>;
     checkboxGroup: ICheckboxGroupInstance;
     elForm: ElFormContext;
-    ELEMENT: any;
     elFormItemSize: import("vue").ComputedRef<import("element-plus/es/utils/types").ComponentSize | undefined>;
     elFormItem: ElFormItemContext;
 };
 export declare const useCheckbox: (props: IUseCheckboxProps) => {
     isChecked: import("vue").ComputedRef<boolean>;
     isDisabled: import("vue").ComputedRef<boolean | undefined>;
-    checkboxSize: import("vue").ComputedRef<any>;
+    checkboxSize: import("vue").ComputedRef<"" | import("element-plus/es/utils/types").ComponentSize>;
     model: import("vue").WritableComputedRef<any>;
     handleChange: (e: InputEvent) => void;
     focus: import("vue").Ref<boolean>;
-    size: import("vue").ComputedRef<string | undefined>;
+    size: import("vue").ComputedRef<"" | import("element-plus/es/utils/types").ComponentSize>;
 };

package/es/components/checkbox/src/useCheckbox.mjs

@@ -1,9 +1,10 @@
 import { inject, computed, ref, getCurrentInstance, watch } from 'vue';
 import { toTypeString } from '@vue/shared';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
-import { useGlobalConfig } from '../../../utils/util.mjs';
 import '../../../tokens/index.mjs';
+import '../../../hooks/index.mjs';
 import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 
 const useCheckboxProps = {
   modelValue: {
@@ -32,7 +33,6 @@ const useCheckboxProps = {
   size: String
 };
 const useCheckboxGroup = () => {
-  const ELEMENT = useGlobalConfig();
   const elForm = inject(elFormKey, {});
   const elFormItem = inject(elFormItemKey, {});
   const checkboxGroup = inject("CheckboxGroup", {});
@@ -44,7 +44,6 @@ const useCheckboxGroup = () => {
     isGroup,
     checkboxGroup,
     elForm,
-    ELEMENT,
     elFormItemSize,
     elFormItem
   };
@@ -54,14 +53,10 @@ const useModel = (props) => {
   const { emit } = getCurrentInstance();
   const { isGroup, checkboxGroup } = useCheckboxGroup();
   const isLimitExceeded = ref(false);
-  const store = computed(() => {
-    var _a;
-    return checkboxGroup ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : props.modelValue;
-  });
   const model = computed({
     get() {
-      var _a;
-      return isGroup.value ? store.value : (_a = props.modelValue) != null ? _a : selfModel.value;
+      var _a, _b;
+      return isGroup.value ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value;
     },
     set(val) {
       var _a;
@@ -80,12 +75,9 @@ const useModel = (props) => {
   };
 };
 const useCheckboxStatus = (props, { model }) => {
-  const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup();
+  const { isGroup, checkboxGroup } = useCheckboxGroup();
   const focus = ref(false);
-  const size = computed(() => {
-    var _a;
-    return ((_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value) || elFormItemSize.value || ELEMENT.size;
-  });
+  const size = useSize(checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize, { prop: true });
   const isChecked = computed(() => {
     const value = model.value;
     if (toTypeString(value) === "[object Boolean]") {
@@ -98,11 +90,10 @@ const useCheckboxStatus = (props, { model }) => {
       return !!value;
     }
   });
-  const checkboxSize = computed(() => {
+  const checkboxSize = useSize(computed(() => {
     var _a;
-    const temCheckboxSize = props.size || elFormItemSize.value || ELEMENT.size;
-    return isGroup.value ? ((_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value) || temCheckboxSize : temCheckboxSize;
-  });
+    return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value : void 0;
+  }));
   return {
     isChecked,
     focus,

package/es/components/checkbox/src/useCheckbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCheckbox.mjs","sources":["../../../../../../packages/components/checkbox/src/useCheckbox.ts"],"sourcesContent":["import { ref, computed, inject, getCurrentInstance, watch } from 'vue'\nimport { toTypeString } from '@vue/shared'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { PartialReturnType } from '@element-plus/utils/types'\nimport type { ICheckboxGroupInstance } from './checkbox.type'\n\nexport const useCheckboxProps = {\n  modelValue: {\n    type: [Boolean, Number, String],\n    default: () => undefined,\n  },\n  label: {\n    type: [String, Boolean, Number, Object],\n  },\n  indeterminate: Boolean,\n  disabled: Boolean,\n  checked: Boolean,\n  name: {\n    type: String,\n    default: undefined,\n  },\n  trueLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  falseLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  tabindex: [String, Number],\n  size: String,\n}\n\nexport type IUseCheckboxProps = ExtractPropTypes<typeof useCheckboxProps>\n\nexport const useCheckboxGroup = () => {\n  const ELEMENT = useGlobalConfig()\n  const elForm = inject(elFormKey, {} as ElFormContext)\n  const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n  const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})\n  const isGroup = computed(\n    () => checkboxGroup && checkboxGroup?.name === 'ElCheckboxGroup'\n  )\n  const elFormItemSize = computed(() => {\n    return elFormItem.size\n  })\n  return {\n    isGroup,\n    checkboxGroup,\n    elForm,\n    ELEMENT,\n    elFormItemSize,\n    elFormItem,\n  }\n}\n\nconst useModel = (props: IUseCheckboxProps) => {\n  const selfModel = ref(false)\n  const { emit } = getCurrentInstance()\n  const { isGroup, checkboxGroup } = useCheckboxGroup()\n  const isLimitExceeded = ref(false)\n  const store = computed(() =>\n    checkboxGroup ? checkboxGroup.modelValue?.value : props.modelValue\n  )\n  const model = computed({\n    get() {\n      return isGroup.value ? store.value : props.modelValue ?? selfModel.value\n    },\n\n    set(val: unknown) {\n      if (isGroup.value && Array.isArray(val)) {\n        isLimitExceeded.value =\n          checkboxGroup.max !== undefined &&\n          val.length > checkboxGroup.max.value\n        isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)\n      } else {\n        emit(UPDATE_MODEL_EVENT, val)\n        selfModel.value = val as boolean\n      }\n    },\n  })\n\n  return {\n    model,\n    isLimitExceeded,\n  }\n}\n\nconst useCheckboxStatus = (\n  props: IUseCheckboxProps,\n  { model }: PartialReturnType<typeof useModel>\n) => {\n  const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup()\n  const focus = ref(false)\n  const size = computed<string | undefined>(\n    () =>\n      checkboxGroup?.checkboxGroupSize?.value ||\n      elFormItemSize.value ||\n      ELEMENT.size\n  )\n  const isChecked = computed<boolean>(() => {\n    const value = model.value\n    if (toTypeString(value) === '[object Boolean]') {\n      return value\n    } else if (Array.isArray(value)) {\n      return value.includes(props.label)\n    } else if (value !== null && value !== undefined) {\n      return value === props.trueLabel\n    } else {\n      return !!value\n    }\n  })\n  const checkboxSize = computed(() => {\n    const temCheckboxSize = props.size || elFormItemSize.value || ELEMENT.size\n    return isGroup.value\n      ? checkboxGroup?.checkboxGroupSize?.value || temCheckboxSize\n      : temCheckboxSize\n  })\n\n  return {\n    isChecked,\n    focus,\n    size,\n    checkboxSize,\n  }\n}\n\nconst useDisabled = (\n  props: IUseCheckboxProps,\n  {\n    model,\n    isChecked,\n  }: PartialReturnType<typeof useModel> &\n    PartialReturnType<typeof useCheckboxStatus>\n) => {\n  const { elForm, isGroup, checkboxGroup } = useCheckboxGroup()\n  const isLimitDisabled = computed(() => {\n    const max = checkboxGroup.max?.value\n    const min = checkboxGroup.min?.value\n    return (\n      (!!(max || min) && model.value.length >= max && !isChecked.value) ||\n      (model.value.length <= min && isChecked.value)\n    )\n  })\n  const isDisabled = computed(() => {\n    const disabled = props.disabled || elForm.disabled\n    return isGroup.value\n      ? checkboxGroup.disabled?.value || disabled || isLimitDisabled.value\n      : props.disabled || elForm.disabled\n  })\n\n  return {\n    isDisabled,\n    isLimitDisabled,\n  }\n}\n\nconst setStoreValue = (\n  props: IUseCheckboxProps,\n  { model }: PartialReturnType<typeof useModel>\n) => {\n  function addToStore() {\n    if (Array.isArray(model.value) && !model.value.includes(props.label)) {\n      model.value.push(props.label)\n    } else {\n      model.value = props.trueLabel || true\n    }\n  }\n  props.checked && addToStore()\n}\n\nconst useEvent = (\n  props: IUseCheckboxProps,\n  { isLimitExceeded }: PartialReturnType<typeof useModel>\n) => {\n  const { elFormItem } = useCheckboxGroup()\n  const { emit } = getCurrentInstance()\n  function handleChange(e: InputEvent) {\n    if (isLimitExceeded.value) return\n    const target = e.target as HTMLInputElement\n    const value = target.checked\n      ? props.trueLabel ?? true\n      : props.falseLabel ?? false\n\n    emit('change', value, e)\n  }\n\n  watch(\n    () => props.modelValue,\n    () => {\n      elFormItem.validate?.('change')\n    }\n  )\n\n  return {\n    handleChange,\n  }\n}\n\nexport const useCheckbox = (props: IUseCheckboxProps) => {\n  const { model, isLimitExceeded } = useModel(props)\n  const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, {\n    model,\n  })\n  const { isDisabled } = useDisabled(props, { model, isChecked })\n  const { handleChange } = useEvent(props, { isLimitExceeded })\n\n  setStoreValue(props, { model })\n\n  return {\n    isChecked,\n    isDisabled,\n    checkboxSize,\n    model,\n    handleChange,\n    focus,\n    size,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCheckbox.mjs","sources":["../../../../../../packages/components/checkbox/src/useCheckbox.ts"],"sourcesContent":["import { ref, computed, inject, getCurrentInstance, watch } from 'vue'\nimport { toTypeString } from '@vue/shared'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\n\nimport { useSize } from '@element-plus/hooks'\nimport type { ExtractPropTypes } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { PartialReturnType } from '@element-plus/utils/types'\nimport type { ICheckboxGroupInstance } from './checkbox.type'\n\nexport const useCheckboxProps = {\n  modelValue: {\n    type: [Boolean, Number, String],\n    default: () => undefined,\n  },\n  label: {\n    type: [String, Boolean, Number, Object],\n  },\n  indeterminate: Boolean,\n  disabled: Boolean,\n  checked: Boolean,\n  name: {\n    type: String,\n    default: undefined,\n  },\n  trueLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  falseLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  tabindex: [String, Number],\n  size: String,\n}\n\nexport type IUseCheckboxProps = ExtractPropTypes<typeof useCheckboxProps>\n\nexport const useCheckboxGroup = () => {\n  const elForm = inject(elFormKey, {} as ElFormContext)\n  const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n  const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})\n  const isGroup = computed(\n    () => checkboxGroup && checkboxGroup?.name === 'ElCheckboxGroup'\n  )\n  const elFormItemSize = computed(() => {\n    return elFormItem.size\n  })\n  return {\n    isGroup,\n    checkboxGroup,\n    elForm,\n    elFormItemSize,\n    elFormItem,\n  }\n}\n\nconst useModel = (props: IUseCheckboxProps) => {\n  const selfModel = ref(false)\n  const { emit } = getCurrentInstance()\n  const { isGroup, checkboxGroup } = useCheckboxGroup()\n  const isLimitExceeded = ref(false)\n  const model = computed({\n    get() {\n      return isGroup.value\n        ? checkboxGroup.modelValue?.value\n        : props.modelValue ?? selfModel.value\n    },\n\n    set(val: unknown) {\n      if (isGroup.value && Array.isArray(val)) {\n        isLimitExceeded.value =\n          checkboxGroup.max !== undefined &&\n          val.length > checkboxGroup.max.value\n        isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)\n      } else {\n        emit(UPDATE_MODEL_EVENT, val)\n        selfModel.value = val as boolean\n      }\n    },\n  })\n\n  return {\n    model,\n    isLimitExceeded,\n  }\n}\n\nconst useCheckboxStatus = (\n  props: IUseCheckboxProps,\n  { model }: PartialReturnType<typeof useModel>\n) => {\n  const { isGroup, checkboxGroup } = useCheckboxGroup()\n  const focus = ref(false)\n  const size = useSize(checkboxGroup?.checkboxGroupSize, { prop: true })\n  const isChecked = computed<boolean>(() => {\n    const value = model.value\n    if (toTypeString(value) === '[object Boolean]') {\n      return value\n    } else if (Array.isArray(value)) {\n      return value.includes(props.label)\n    } else if (value !== null && value !== undefined) {\n      return value === props.trueLabel\n    } else {\n      return !!value\n    }\n  })\n\n  const checkboxSize = useSize(\n    computed(() =>\n      isGroup.value ? checkboxGroup?.checkboxGroupSize?.value : undefined\n    )\n  )\n\n  return {\n    isChecked,\n    focus,\n    size,\n    checkboxSize,\n  }\n}\n\nconst useDisabled = (\n  props: IUseCheckboxProps,\n  {\n    model,\n    isChecked,\n  }: PartialReturnType<typeof useModel> &\n    PartialReturnType<typeof useCheckboxStatus>\n) => {\n  const { elForm, isGroup, checkboxGroup } = useCheckboxGroup()\n  const isLimitDisabled = computed(() => {\n    const max = checkboxGroup.max?.value\n    const min = checkboxGroup.min?.value\n    return (\n      (!!(max || min) && model.value.length >= max && !isChecked.value) ||\n      (model.value.length <= min && isChecked.value)\n    )\n  })\n  const isDisabled = computed(() => {\n    const disabled = props.disabled || elForm.disabled\n    return isGroup.value\n      ? checkboxGroup.disabled?.value || disabled || isLimitDisabled.value\n      : props.disabled || elForm.disabled\n  })\n\n  return {\n    isDisabled,\n    isLimitDisabled,\n  }\n}\n\nconst setStoreValue = (\n  props: IUseCheckboxProps,\n  { model }: PartialReturnType<typeof useModel>\n) => {\n  function addToStore() {\n    if (Array.isArray(model.value) && !model.value.includes(props.label)) {\n      model.value.push(props.label)\n    } else {\n      model.value = props.trueLabel || true\n    }\n  }\n  props.checked && addToStore()\n}\n\nconst useEvent = (\n  props: IUseCheckboxProps,\n  { isLimitExceeded }: PartialReturnType<typeof useModel>\n) => {\n  const { elFormItem } = useCheckboxGroup()\n  const { emit } = getCurrentInstance()\n  function handleChange(e: InputEvent) {\n    if (isLimitExceeded.value) return\n    const target = e.target as HTMLInputElement\n    const value = target.checked\n      ? props.trueLabel ?? true\n      : props.falseLabel ?? false\n\n    emit('change', value, e)\n  }\n\n  watch(\n    () => props.modelValue,\n    () => {\n      elFormItem.validate?.('change')\n    }\n  )\n\n  return {\n    handleChange,\n  }\n}\n\nexport const useCheckbox = (props: IUseCheckboxProps) => {\n  const { model, isLimitExceeded } = useModel(props)\n  const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, {\n    model,\n  })\n  const { isDisabled } = useDisabled(props, { model, isChecked })\n  const { handleChange } = useEvent(props, { isLimitExceeded })\n\n  setStoreValue(props, { model })\n\n  return {\n    isChecked,\n    isDisabled,\n    checkboxSize,\n    model,\n    handleChange,\n    focus,\n    size,\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -50,13 +50,13 @@ export declare const ElCollapse: import("../../utils/types").SFCWithInstall<impo
         name?: unknown;
         disabled?: unknown;
     } & {
-        title: string;
         disabled: boolean;
         name: string | number;
-    } & {}>, {
         title: string;
+    } & {}>, {
         disabled: boolean;
         name: string | number;
+        title: string;
     }>;
 };
 export default ElCollapse;
@@ -89,11 +89,11 @@ export declare const ElCollapseItem: import("../../utils/types").SFCWithInstall<
     name?: unknown;
     disabled?: unknown;
 } & {
-    title: string;
     disabled: boolean;
     name: string | number;
-} & {}>, {
     title: string;
+} & {}>, {
     disabled: boolean;
     name: string | number;
+    title: string;
 }>>;

package/es/components/collapse/src/collapse-item.vue.d.ts

@@ -29,12 +29,12 @@ declare const _default: import("vue").DefineComponent<{
     name?: unknown;
     disabled?: unknown;
 } & {
-    title: string;
     disabled: boolean;
     name: string | number;
-} & {}>, {
     title: string;
+} & {}>, {
     disabled: boolean;
     name: string | number;
+    title: string;
 }>;
 export default _default;

package/es/components/collapse/src/collapse-item.vue_vue_type_script_lang.mjs

@@ -2,7 +2,7 @@ import { defineComponent, inject, ref, computed } from 'vue';
 import { generateId } from '../../../utils/util.mjs';
 import _CollapseTransition from '../../collapse-transition/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
-import { ArrowRight } from '@element-plus/icons';
+import { ArrowRight } from '@element-plus/icons-vue';
 
 var script = defineComponent({
   name: "ElCollapseItem",

package/es/components/collapse/src/collapse-item.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["ElCollapseTransition"],"mappings":";;;;;;AA4DA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,wBAAEA,qBAAsB,QAAQ;AAAA,EAC5C,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AACb,eAAO;AAAA;AAAA;AAAA,IAGX,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW,OAAyB;AAE1C,UAAM,mBAAmB,IAAI;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS;AAAA;AAEX,UAAM,gBAAgB,IAAI;AAC1B,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AACpB,UAAM,KAAK,IAAI;AAEf,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,sCAAU,YAAY,MAAM,QAAQ,MAAM,SAAQ;AAAA;AAG3D,UAAM,cAAc,MAAM;AACxB,iBAAW,MAAM;AACf,YAAI,CAAC,QAAQ,OAAO;AAClB,mBAAS,QAAQ;AAAA,eACZ;AACL,kBAAQ,QAAQ;AAAA;AAAA,SAEjB;AAAA;AAGL,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM;AAAU;AACpB,2CAAU,gBAAgB,MAAM;AAChC,eAAS,QAAQ;AACjB,cAAQ,QAAQ;AAAA;AAGlB,UAAM,mBAAmB,MAAM;AAC7B,2CAAU,gBAAgB,MAAM;AAAA;AAGlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"collapse-item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["ElCollapseTransition"],"mappings":";;;;;;AA4DA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY,wBAAEA,qBAAsB,QAAQ;AAAA,EAC5C,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AACb,eAAO;AAAA;AAAA;AAAA,IAGX,UAAU;AAAA;AAAA,EAEZ,MAAM,OAAO;AACX,UAAM,WAAW,OAAyB;AAE1C,UAAM,mBAAmB,IAAI;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAS;AAAA;AAEX,UAAM,gBAAgB,IAAI;AAC1B,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AACpB,UAAM,KAAK,IAAI;AAEf,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,sCAAU,YAAY,MAAM,QAAQ,MAAM,SAAQ;AAAA;AAG3D,UAAM,cAAc,MAAM;AACxB,iBAAW,MAAM;AACf,YAAI,CAAC,QAAQ,OAAO;AAClB,mBAAS,QAAQ;AAAA,eACZ;AACL,kBAAQ,QAAQ;AAAA;AAAA,SAEjB;AAAA;AAGL,UAAM,oBAAoB,MAAM;AAC9B,UAAI,MAAM;AAAU;AACpB,2CAAU,gBAAgB,MAAM;AAChC,eAAS,QAAQ;AACjB,cAAQ,QAAQ;AAAA;AAGlB,UAAM,mBAAmB,MAAM;AAC7B,2CAAU,gBAAgB,MAAM;AAAA;AAGlC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

package/es/components/collapse/src/collapse-item.vue_vue_type_template_id_80da782a_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.vue_vue_type_template_id_80da782a_lang.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue?vue&type=template&id=80da782a&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;;;;qBA2Ca,OAAM;;;;;sBA1CjBA;IACE,uBAAM,mCACiB,8BAAyB;;IAEhDC;MACE,MAAK;AAAA,MACJ,iBAAe;MACf,wCAAsC;MACtC,2CAAyC;;MAE1CA;QACG,wBAAwB;QACzB,uBAAM;;;;QACN,MAAK;AAAA,QACJ,UAAU;QAKV,gDAAO;QACP,uEAAwB;QACxB,gDAAO;QACP,8CAAM;;QAEPC,qCAAA;0CAAsB;;QACtBC;UACE,uBAAM,0CACiB;;2BAEvB;YAAAA;;;;;;IAINA;uBACE;uBAAAF;UAEG,2BAA2B;UAC5B,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,gBAAc;UACd,uCAAqC;;UAEtCA,0BAAA;YACEC;;;kBARM;;;;;;;;;;"}
+{"version":3,"file":"collapse-item.vue_vue_type_template_id_80da782a_lang.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue?vue&type=template&id=80da782a&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-collapse-item\"\n    :class=\"{ 'is-active': isActive, 'is-disabled': disabled }\"\n  >\n    <div\n      role=\"tab\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"`el-collapse-content-${id}`\"\n      :aria-describedby=\"`el-collapse-content-${id}`\"\n    >\n      <div\n        :id=\"`el-collapse-head-${id}`\"\n        class=\"el-collapse-item__header\"\n        role=\"button\"\n        :tabindex=\"disabled ? -1 : 0\"\n        :class=\"{\n          focusing: focusing,\n          'is-active': isActive,\n        }\"\n        @click=\"handleHeaderClick\"\n        @keyup.space.enter.stop=\"handleEnterClick\"\n        @focus=\"handleFocus\"\n        @blur=\"focusing = false\"\n      >\n        <slot name=\"title\">{{ title }}</slot>\n        <el-icon\n          class=\"el-collapse-item__arrow\"\n          :class=\"{ 'is-active': isActive }\"\n        >\n          <arrow-right />\n        </el-icon>\n      </div>\n    </div>\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"`el-collapse-content-${id}`\"\n        class=\"el-collapse-item__wrap\"\n        role=\"tabpanel\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"`el-collapse-head-${id}`\"\n      >\n        <div class=\"el-collapse-item__content\">\n          <slot></slot>\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, inject, computed, ref } from 'vue'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\n\nimport type { PropType } from 'vue'\nimport type { CollapseProvider } from './collapse.type'\n\nexport default defineComponent({\n  name: 'ElCollapseItem',\n  components: { ElCollapseTransition, ElIcon, ArrowRight },\n  props: {\n    title: {\n      type: String,\n      default: '',\n    },\n    name: {\n      type: [String, Number] as PropType<string | number>,\n      default: () => {\n        return generateId()\n      },\n    },\n    disabled: Boolean,\n  },\n  setup(props) {\n    const collapse = inject<CollapseProvider>('collapse')\n\n    const contentWrapStyle = ref({\n      height: 'auto',\n      display: 'block',\n    })\n    const contentHeight = ref(0)\n    const focusing = ref(false)\n    const isClick = ref(false)\n    const id = ref(generateId())\n\n    const isActive = computed(() => {\n      return collapse?.activeNames.value.indexOf(props.name) > -1\n    })\n\n    const handleFocus = () => {\n      setTimeout(() => {\n        if (!isClick.value) {\n          focusing.value = true\n        } else {\n          isClick.value = false\n        }\n      }, 50)\n    }\n\n    const handleHeaderClick = () => {\n      if (props.disabled) return\n      collapse?.handleItemClick(props.name)\n      focusing.value = false\n      isClick.value = true\n    }\n\n    const handleEnterClick = () => {\n      collapse?.handleItemClick(props.name)\n    }\n\n    return {\n      isActive,\n      contentWrapStyle,\n      contentHeight,\n      focusing,\n      isClick,\n      id,\n      handleFocus,\n      handleHeaderClick,\n      handleEnterClick,\n      collapse,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode"],"mappings":";;;;;qBA2Ca,OAAM;;;;;sBA1CjBA;IACE,uBAAM,mCACiB,8BAAyB;;IAEhDC;MACE,MAAK;AAAA,MACJ,iBAAe;MACf,wCAAsC;MACtC,2CAAyC;;MAE1CA;QACG,wBAAwB;QACzB,uBAAM;;;;QACN,MAAK;AAAA,QACJ,UAAU;QAKV,gDAAO;QACP,uEAAwB;QACxB,gDAAO;QACP,8CAAM;;QAEPC,qCAAA;0CAAsB;;QACtBC;UACE,uBAAM,0CACiB;;2BAEvB;YAAAA;;;;;;IAINA;uBACE;uBAAAF;UAEG,2BAA2B;UAC5B,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,gBAAc;UACd,uCAAqC;;UAEtCA,0BAAA;YACEC;;;kBARM;;;;;;;;;;"}

package/es/components/color-picker/index.d.ts

@@ -14,7 +14,7 @@ declare const _ColorPicker: SFCWithInstall<import("vue").DefineComponent<{
     Effect: typeof import("..").Effect;
     color: import("./src/color").default;
     colorDisabled: import("vue").ComputedRef<boolean | undefined>;
-    colorSize: import("vue").ComputedRef<any>;
+    colorSize: import("vue").ComputedRef<"" | import("element-plus/es/utils/types").ComponentSize>;
     displayedColor: import("vue").ComputedRef<string>;
     showPanelColor: import("vue").Ref<boolean>;
     showPicker: import("vue").Ref<boolean>;
@@ -70,7 +70,7 @@ export declare const ElColorPicker: SFCWithInstall<import("vue").DefineComponent
     Effect: typeof import("..").Effect;
     color: import("./src/color").default;
     colorDisabled: import("vue").ComputedRef<boolean | undefined>;
-    colorSize: import("vue").ComputedRef<any>;
+    colorSize: import("vue").ComputedRef<"" | import("element-plus/es/utils/types").ComponentSize>;
     displayedColor: import("vue").ComputedRef<string>;
     showPanelColor: import("vue").Ref<boolean>;
     showPicker: import("vue").Ref<boolean>;

package/es/components/color-picker/src/components/alpha-slider.vue.d.ts

@@ -0,0 +1,30 @@
+import type { PropType } from 'vue';
+import type { Nullable } from 'element-plus/es/utils/types';
+import type Color from '../color';
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: PropType<Color>;
+        required: true;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    thumb: import("@vue/reactivity").ShallowRef<Nullable<HTMLElement>>;
+    bar: import("@vue/reactivity").ShallowRef<Nullable<HTMLElement>>;
+    thumbLeft: import("vue").Ref<number>;
+    thumbTop: import("vue").Ref<number>;
+    background: import("vue").Ref<Nullable<string>>;
+    handleClick: (event: Event) => void;
+    update: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    color?: unknown;
+    vertical?: unknown;
+} & {
+    color: Color;
+    vertical: boolean;
+} & {}>, {
+    vertical: boolean;
+}>;
+export default _default;

package/es/components/color-picker/src/index.vue.d.ts

@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
     Effect: typeof Effect;
     color: Color;
     colorDisabled: import("vue").ComputedRef<boolean | undefined>;
-    colorSize: import("vue").ComputedRef<any>;
+    colorSize: import("vue").ComputedRef<"" | ComponentSize>;
     displayedColor: import("vue").ComputedRef<string>;
     showPanelColor: import("vue").Ref<boolean>;
     showPicker: import("vue").Ref<boolean>;

package/es/components/color-picker/src/index.vue_vue_type_script_lang.mjs

@@ -8,9 +8,8 @@ import '../../../hooks/index.mjs';
 import _Popper from '../../popper/index.mjs';
 import { ElInput } from '../../input/index.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../utils/constants.mjs';
-import { useGlobalConfig } from '../../../utils/util.mjs';
 import { isValidComponentSize } from '../../../utils/validators.mjs';
-import { Close, ArrowDown } from '@element-plus/icons';
+import { Close, ArrowDown } from '@element-plus/icons-vue';
 import './components/alpha-slider.mjs';
 import './components/hue-slider.mjs';
 import './components/predefine.mjs';
@@ -24,6 +23,7 @@ import script$4 from './components/predefine.vue_vue_type_script_lang.mjs';
 import ClickOutside from '../../../directives/click-outside/index.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { elFormKey, elFormItemKey } from '../../../tokens/form.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 import { Effect } from '../../popper/src/use-popper/defaults.mjs';
 
 var script = defineComponent({
@@ -57,7 +57,6 @@ var script = defineComponent({
   },
   emits: ["change", "active-change", UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
-    const ELEMENT = useGlobalConfig();
     const { t } = useLocale();
     const elForm = inject(elFormKey, {});
     const elFormItem = inject(elFormItemKey, {});
@@ -78,9 +77,7 @@ var script = defineComponent({
       }
       return displayedRgb(color, props.showAlpha);
     });
-    const colorSize = computed(() => {
-      return props.size || elFormItem.size || ELEMENT.size;
-    });
+    const colorSize = useSize();
     const colorDisabled = computed(() => {
       return props.disabled || elForm.disabled;
     });

package/es/components/color-picker/src/index.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"mini\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            ></span>\n            <el-icon\n              v-if=\"!modelValue && !showPanelColor\"\n              class=\"el-color-picker__empty is-icon-close\"\n            >\n              <close />\n            </el-icon>\n          </span>\n          <el-icon\n            v-show=\"modelValue || showPanelColor\"\n            class=\"el-color-picker__icon is-icon-arrow-down\"\n          >\n            <arrow-down />\n          </el-icon>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const ELEMENT = useGlobalConfig()\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["ElPopper","SvPanel","HueSlider","AlphaSlider","Predefine"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"mini\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            ></span>\n            <el-icon\n              v-if=\"!modelValue && !showPanelColor\"\n              class=\"el-color-picker__empty is-icon-close\"\n            >\n              <close />\n            </el-icon>\n          </span>\n          <el-icon\n            v-show=\"modelValue || showPanelColor\"\n            class=\"el-color-picker__icon is-icon-arrow-down\"\n          >\n            <arrow-down />\n          </el-icon>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["ElPopper","SvPanel","HueSlider","AlphaSlider","Predefine"],"mappings":"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"}

package/es/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"mini\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            ></span>\n            <el-icon\n              v-if=\"!modelValue && !showPanelColor\"\n              class=\"el-color-picker__empty is-icon-close\"\n            >\n              <close />\n            </el-icon>\n          </span>\n          <el-icon\n            v-show=\"modelValue || showPanelColor\"\n            class=\"el-color-picker__icon is-icon-arrow-down\"\n          >\n            <arrow-down />\n          </el-icon>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const ELEMENT = useGlobalConfig()\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode","_createVNode","_createElementBlock"],"mappings":";;qBAiBa,OAAM;qBAWN,OAAM;qBACH,OAAM;;;EAoCY,OAAM;AAAA;;;;;;;;;;;;;sBAhEtCA;IACE,KAAI;AAAA,IACI,SAAS;8DAAA;IAChB,QAAQ,YAAO;AAAA,IAChB,eAAA;AAAA,IACA,SAAQ;AAAA,IACP,cAAY;AAAA,IACZ,uBAAqB;IACrB,QAAQ;AAAA,IACT,YAAW;AAAA,IACV,oBAAkB;AAAA,IAClB,4DAA0D;IAC1D,2BAAyB;AAAA;IAEf,iBACT;qBAAAC;QACEA,0BAAA;UACEC;YAAY,KAAI;AAAA,YAAM,OAAM;AAAA,YAAc,OAAO;YAAO,UAAA;AAAA;UACxDA;YAAU,KAAI;AAAA,YAAW,OAAO;;;QAEd,+BAApBF;;UAA+B,KAAI;AAAA,UAAS,OAAO;;QAE3C,+BADRA;;UAEE,KAAI;AAAA,UACH,OAAO;UACP,QAAQ;;QAEXC,0BAAA;UACEA,2BAAA;YACEC;0BACW;2EAAA;cACR,kBAAgB;AAAA,cACjB,MAAK;AAAA,cACJ,kBAAa;cACb,QAAM;;;UAGXA;YACE,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;6BAER;8CAAG;;;;UAELA;YACE,OAAA;AAAA,YACA,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;6BAER;8CAAG;;;;;;mCApCa;;;IAyCb,iBACT;MAAAD;QACG;;;;;;QAMU,mCAAXE,0BAAA;QACAF;UAAK,OAAM;AAAA,UAA4B,gDAAO;;UAC5CA;YACE,uBAAM,wCACgB;;YAEtBA;cACE,OAAM;AAAA,cACL;;;;aAKM,oBAAe,oCADxBD;;cAEE,OAAM;AAAA;+BAEN;gBAAAE;;;;;yBAGJA,kCAEE,OAAM;6BAEN;cAAAA;;;;oBAHQ,mBAAc;;;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"mini\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            ></span>\n            <el-icon\n              v-if=\"!modelValue && !showPanelColor\"\n              class=\"el-color-picker__empty is-icon-close\"\n            >\n              <close />\n            </el-icon>\n          </span>\n          <el-icon\n            v-show=\"modelValue || showPanelColor\"\n            class=\"el-color-picker__icon is-icon-arrow-down\"\n          >\n            <arrow-down />\n          </el-icon>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode","_createVNode","_createElementBlock"],"mappings":";;qBAiBa,OAAM;qBAWN,OAAM;qBACH,OAAM;;;EAoCY,OAAM;AAAA;;;;;;;;;;;;;sBAhEtCA;IACE,KAAI;AAAA,IACI,SAAS;8DAAA;IAChB,QAAQ,YAAO;AAAA,IAChB,eAAA;AAAA,IACA,SAAQ;AAAA,IACP,cAAY;AAAA,IACZ,uBAAqB;IACrB,QAAQ;AAAA,IACT,YAAW;AAAA,IACV,oBAAkB;AAAA,IAClB,4DAA0D;IAC1D,2BAAyB;AAAA;IAEf,iBACT;qBAAAC;QACEA,0BAAA;UACEC;YAAY,KAAI;AAAA,YAAM,OAAM;AAAA,YAAc,OAAO;YAAO,UAAA;AAAA;UACxDA;YAAU,KAAI;AAAA,YAAW,OAAO;;;QAEd,+BAApBF;;UAA+B,KAAI;AAAA,UAAS,OAAO;;QAE3C,+BADRA;;UAEE,KAAI;AAAA,UACH,OAAO;UACP,QAAQ;;QAEXC,0BAAA;UACEA,2BAAA;YACEC;0BACW;2EAAA;cACR,kBAAgB;AAAA,cACjB,MAAK;AAAA,cACJ,kBAAa;cACb,QAAM;;;UAGXA;YACE,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;6BAER;8CAAG;;;;UAELA;YACE,OAAA;AAAA,YACA,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;6BAER;8CAAG;;;;;;mCApCa;;;IAyCb,iBACT;MAAAD;QACG;;;;;;QAMU,mCAAXE,0BAAA;QACAF;UAAK,OAAM;AAAA,UAA4B,gDAAO;;UAC5CA;YACE,uBAAM,wCACgB;;YAEtBA;cACE,OAAM;AAAA,cACL;;;;aAKM,oBAAe,oCADxBD;;cAEE,OAAM;AAAA;+BAEN;gBAAAE;;;;;yBAGJA,kCAEE,OAAM;6BAEN;cAAAA;;;;oBAHQ,mBAAc;;;;;;;;;;;"}

package/es/components/config-provider/index.d.ts

@@ -1,19 +1,20 @@
 export declare const ElConfigProvider: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
-    button: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").ButtonConfigContext>, import("../../utils/types").Mutable<{
-        readonly autoInsertSpace: true;
-    }>, false, never, never>;
-    locale: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../locale").Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "small" | "large" | "medium" | "mini", unknown>;
+    readonly button: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly locale: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../locale").Language>, unknown, unknown, unknown, unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    button?: unknown;
-    locale?: unknown;
-} & {
-    button: import("..").ButtonConfigContext;
-} & {
+    readonly size?: unknown;
+    readonly button?: unknown;
+    readonly locale?: unknown;
+} & {} & {
+    button?: import("..").ButtonConfigContext | undefined;
+    size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "large" | "medium" | "mini", unknown> | undefined;
     locale?: import("../../locale").Language | undefined;
 }>, {
     button: import("..").ButtonConfigContext;
+    size: import("../../utils/props").BuildPropType<StringConstructor, "small" | "large" | "medium" | "mini", unknown>;
     locale: import("../../locale").Language;
 }>> & Record<string, any>;
 export default ElConfigProvider;

package/es/components/config-provider/src/config-provider.d.ts

@@ -1,7 +1,6 @@
 import type { ButtonConfigContext } from 'element-plus/es/components/button';
 export declare const configProviderProps: {
-    button: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<ButtonConfigContext>, import("../../../utils/types").Mutable<{
-        readonly autoInsertSpace: true;
-    }>, false, never, never>;
-    locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<import("../../../locale").Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "small" | "large" | "medium" | "mini", unknown>;
+    readonly button: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<import("../../../locale").Language>, unknown, unknown, unknown, unknown>;
 };

package/es/components/config-provider/src/config-provider.mjs

@@ -1,18 +1,17 @@
 import '../../../hooks/index.mjs';
-import { buildProp, definePropType, mutable } from '../../../utils/props.mjs';
+import { buildProps, definePropType } from '../../../utils/props.mjs';
 import { useLocaleProps } from '../../../hooks/use-locale/index.mjs';
 
-const configProviderProps = {
+const configProviderProps = buildProps({
   ...useLocaleProps,
-  button: buildProp({
-    type: definePropType(Object),
-    default: () => {
-      return mutable({
-        autoInsertSpace: true
-      });
-    }
-  })
-};
+  size: {
+    type: String,
+    values: ["large", "medium", "small", "mini"]
+  },
+  button: {
+    type: definePropType(Object)
+  }
+});
 
 export { configProviderProps };
 //# sourceMappingURL=config-provider.mjs.map

package/es/components/config-provider/src/config-provider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"config-provider.mjs","sources":["../../../../../../packages/components/config-provider/src/config-provider.ts"],"sourcesContent":["import { useLocaleProps } from '@element-plus/hooks'\nimport { buildProp, definePropType, mutable } from '@element-plus/utils/props'\nimport type { ButtonConfigContext } from '@element-plus/components/button'\n\nexport const configProviderProps = {\n  ...useLocaleProps,\n  // Add more configs\n  button: buildProp({\n    type: definePropType<ButtonConfigContext>(Object),\n    default: () => {\n      return mutable({\n        autoInsertSpace: true,\n      } as const)\n    },\n  }),\n}\n"],"names":[],"mappings":";;;;MAIa,sBAAsB;AAAA,KAC9B;AAAA,EAEH,QAAQ,UAAU;AAAA,IAChB,MAAM,eAAoC;AAAA,IAC1C,SAAS,MAAM;AACb,aAAO,QAAQ;AAAA,QACb,iBAAiB;AAAA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"config-provider.mjs","sources":["../../../../../../packages/components/config-provider/src/config-provider.ts"],"sourcesContent":["import { useLocaleProps } from '@element-plus/hooks'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { ButtonConfigContext } from '@element-plus/components/button'\n\nexport const configProviderProps = buildProps({\n  ...useLocaleProps,\n\n  size: {\n    type: String,\n    values: ['large', 'medium', 'small', 'mini'],\n  },\n\n  button: {\n    type: definePropType<ButtonConfigContext>(Object),\n  },\n} as const)\n"],"names":[],"mappings":";;;;MAIa,sBAAsB,WAAW;AAAA,KACzC;AAAA,EAEH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,SAAS,UAAU,SAAS;AAAA;AAAA,EAGvC,QAAQ;AAAA,IACN,MAAM,eAAoC;AAAA;AAAA;;;;"}