@element-plus/nightly 0.0.20220105 → 0.0.20220109

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

@@ -53,9 +53,9 @@ declare const _default: import("vue").DefineComponent<{
     checked: boolean;
 } & {
     size?: string | undefined;
-    name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
+    name?: string | undefined;
     tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
     falseLabel?: string | number | undefined;
@@ -64,8 +64,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    name: string;
     modelValue: string | number | boolean;
+    name: string;
     indeterminate: boolean;
     checked: boolean;
     trueLabel: string | number;

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

@@ -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;
     id?: string | undefined;
     tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    name: string;
     modelValue: string | number | boolean;
+    name: string;
     border: boolean;
     id: string;
     indeterminate: boolean;

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-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n  >\n    <template #content>\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=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\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=\"small\"\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 #default>\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            >\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              <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          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\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 ElTooltip from '@element-plus/components/tooltip'\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    ElTooltip,\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      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":["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-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\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=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\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=\"small\"\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 #default>\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            >\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              <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          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\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 ElTooltip from '@element-plus/components/tooltip'\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    ElTooltip,\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      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":["SvPanel","HueSlider","AlphaSlider","Predefine"],"mappings":"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"}

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

@@ -31,7 +31,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "stop-popper-mouse-event": false,
     effect: "light",
     trigger: "click",
-    transition: "el-zoom-in-top"
+    transition: "el-zoom-in-top",
+    persistent: ""
   }, {
     content: withCtx(() => [
       withDirectives((openBlock(), createElementBlock("div", null, [

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-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n  >\n    <template #content>\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=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\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=\"small\"\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 #default>\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            >\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              <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          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\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 ElTooltip from '@element-plus/components/tooltip'\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    ElTooltip,\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      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":["_withCtx","_createElementVNode"],"mappings":";;;qBAgBa,KAAK,EAAC;qBAWN,KAAK,EAAC;;;;EAqCe;;;;;;;;;;;;;;;;wBA/DhC;IACE;IACQ,wBAAmB;;IAC1B;IACA;IACA;IACA;IACA;IACA;;IAED,OAAO,EAACA;;;qBAIN;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;0BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBC;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}
+{"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-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n  >\n    <template #content>\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=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\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=\"small\"\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 #default>\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            >\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              <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          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\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 ElTooltip from '@element-plus/components/tooltip'\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    ElTooltip,\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      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":["_createElementVNode"],"mappings":";;;qBAiBa,KAAK,EAAC;qBAWN,KAAK,EAAC;;;;EAqCe;;;;;;;;;;;;;;;;wBAhEhC;IACE;IACQ,wBAAmB;;IAC1B;IACA;IACA;IACA;IACA;IACA;IACD;;IAEA;;;qBAIE;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;0BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBA;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}

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

@@ -1,24 +1,28 @@
 export declare const ElConfigProvider: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+    readonly 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" | "default" | "large", unknown>;
     readonly button: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").MessageConfigContext>, unknown, unknown, unknown, unknown>;
     readonly zIndex: import("../../utils/props").BuildPropReturn<NumberConstructor, 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;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly locale?: unknown;
     readonly size?: unknown;
     readonly button?: unknown;
+    readonly message?: unknown;
     readonly zIndex?: unknown;
-    readonly locale?: unknown;
 } & {} & {
     button?: import("..").ButtonConfigContext | undefined;
     size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
     locale?: import("../../locale").Language | undefined;
+    message?: import("..").MessageConfigContext | undefined;
     zIndex?: number | undefined;
 }>, {
     button: import("..").ButtonConfigContext;
     size: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown>;
     locale: import("../../locale").Language;
+    message: import("..").MessageConfigContext;
     zIndex: number;
 }>> & Record<string, any>;
 export default ElConfigProvider;

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

@@ -1,6 +1,6 @@
 import { withInstall } from '../../utils/with-install.mjs';
 import ConfigProvider from './src/config-provider.mjs';
-export { configProviderProps } from './src/config-provider.mjs';
+export { configProviderProps, messageConfig } from './src/config-provider.mjs';
 
 const ElConfigProvider = withInstall(ConfigProvider);
 

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

@@ -1,31 +1,39 @@
+import type { Language } from 'element-plus/es/locale';
 import type { ButtonConfigContext } from 'element-plus/es/components/button';
+import type { MessageConfigContext } from 'element-plus/es/components/message';
+export declare const messageConfig: MessageConfigContext;
 export declare const configProviderProps: {
+    readonly locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<Language>, unknown, unknown, unknown, unknown>;
     readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "small" | "default" | "large", unknown>;
     readonly button: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<MessageConfigContext>, unknown, unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 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>;
 };
 declare const _default: import("vue").DefineComponent<{
+    readonly locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<Language>, unknown, unknown, unknown, unknown>;
     readonly size: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, unknown, unknown, "small" | "default" | "large", unknown>;
     readonly button: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<MessageConfigContext>, unknown, unknown, unknown, unknown>;
     readonly zIndex: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, 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>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly locale?: unknown;
     readonly size?: unknown;
     readonly button?: unknown;
+    readonly message?: unknown;
     readonly zIndex?: unknown;
-    readonly locale?: unknown;
 } & {} & {
     button?: ButtonConfigContext | undefined;
     size?: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
-    locale?: import("../../../locale").Language | undefined;
+    locale?: Language | undefined;
+    message?: MessageConfigContext | undefined;
     zIndex?: number | undefined;
 }>, {
     button: ButtonConfigContext;
     size: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown>;
-    locale: import("../../../locale").Language;
+    locale: Language;
+    message: MessageConfigContext;
     zIndex: number;
 }>;
 export default _default;

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

@@ -1,11 +1,13 @@
-import { defineComponent, renderSlot } from 'vue';
+import { defineComponent, watch, renderSlot } from 'vue';
 import { buildProps, definePropType } from '../../../utils/props.mjs';
 import '../../../hooks/index.mjs';
-import { useLocaleProps, provideLocale } from '../../../hooks/use-locale/index.mjs';
 import { provideGlobalConfig } from '../../../hooks/use-global-config/index.mjs';
 
+const messageConfig = {};
 const configProviderProps = buildProps({
-  ...useLocaleProps,
+  locale: {
+    type: definePropType(Object)
+  },
   size: {
     type: String,
     values: ["large", "default", "small"]
@@ -13,6 +15,9 @@ const configProviderProps = buildProps({
   button: {
     type: definePropType(Object)
   },
+  message: {
+    type: definePropType(Object)
+  },
   zIndex: {
     type: Number
   }
@@ -21,11 +26,13 @@ var ConfigProvider = defineComponent({
   name: "ElConfigProvider",
   props: configProviderProps,
   setup(props, { slots }) {
-    provideLocale();
+    watch(() => props.message, (val) => {
+      Object.assign(messageConfig, val != null ? val : {});
+    }, { immediate: true, deep: true });
     const config = provideGlobalConfig(props);
     return () => renderSlot(slots, "default", { config: config == null ? void 0 : config.value });
   }
 });
 
-export { configProviderProps, ConfigProvider as default };
+export { configProviderProps, ConfigProvider as default, messageConfig };
 //# 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 { defineComponent, renderSlot } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport {\n  useLocaleProps,\n  provideLocale,\n  provideGlobalConfig,\n} from '@element-plus/hooks'\nimport type { ButtonConfigContext } from '@element-plus/components/button'\n\nexport const configProviderProps = buildProps({\n  ...useLocaleProps,\n\n  size: {\n    type: String,\n    values: ['large', 'default', 'small'],\n  },\n\n  button: {\n    type: definePropType<ButtonConfigContext>(Object),\n  },\n\n  zIndex: {\n    type: Number,\n  },\n} as const)\n\nexport default defineComponent({\n  name: 'ElConfigProvider',\n  props: configProviderProps,\n\n  setup(props, { slots }) {\n    provideLocale()\n    const config = provideGlobalConfig(props)\n    return () => renderSlot(slots, 'default', { config: config?.value })\n  },\n})\n"],"names":[],"mappings":";;;;;;AAOY,MAAC,mBAAmB,GAAG,UAAU,CAAC;AAC9C,EAAE,GAAG,cAAc;AACnB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;AACzC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACH,qBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,aAAa,EAAE,CAAC;AACpB,IAAI,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAM,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAClG,GAAG;AACH,CAAC,CAAC;;;;"}
+{"version":3,"file":"config-provider.mjs","sources":["../../../../../../packages/components/config-provider/src/config-provider.ts"],"sourcesContent":["import { defineComponent, renderSlot, watch } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { provideGlobalConfig } from '@element-plus/hooks'\nimport type { Language } from '@element-plus/locale'\nimport type { ButtonConfigContext } from '@element-plus/components/button'\nimport type { MessageConfigContext } from '@element-plus/components/message'\n\nexport const messageConfig: MessageConfigContext = {}\n\nexport const configProviderProps = buildProps({\n  locale: {\n    type: definePropType<Language>(Object),\n  },\n\n  size: {\n    type: String,\n    values: ['large', 'default', 'small'],\n  },\n\n  button: {\n    type: definePropType<ButtonConfigContext>(Object),\n  },\n\n  message: {\n    type: definePropType<MessageConfigContext>(Object),\n  },\n\n  zIndex: {\n    type: Number,\n  },\n} as const)\n\nexport default defineComponent({\n  name: 'ElConfigProvider',\n  props: configProviderProps,\n\n  setup(props, { slots }) {\n    watch(\n      () => props.message,\n      (val) => {\n        Object.assign(messageConfig, val ?? {})\n      },\n      { immediate: true, deep: true }\n    )\n    const config = provideGlobalConfig(props)\n    return () => renderSlot(slots, 'default', { config: config?.value })\n  },\n})\n"],"names":[],"mappings":";;;;;AAGY,MAAC,aAAa,GAAG,GAAG;AACpB,MAAC,mBAAmB,GAAG,UAAU,CAAC;AAC9C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC;AACzC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC,EAAE;AACH,qBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,KAAK;AACxC,MAAM,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,GAAG,IAAI,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC;AAC3D,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AACxC,IAAI,MAAM,MAAM,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAM,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAClG,GAAG;AACH,CAAC,CAAC;;;;"}

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

@@ -142,8 +142,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
 } & {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -177,8 +177,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
 }, {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -338,8 +338,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
 } & {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -373,8 +373,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
 }, {
     type: import("./src/date-picker.type").IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;

package/es/components/date-picker/src/date-picker-com/basic-cell-render.mjs

@@ -15,7 +15,7 @@ var ElDatePickerCell = defineComponent({
       const cell = props.cell;
       if (picker == null ? void 0 : picker.ctx.slots.default) {
         const list = picker.ctx.slots.default(cell).filter((item) => {
-          return item.type.toString() !== "Symbol(Comment)";
+          return item.patchFlag !== -2 && item.type.toString() !== "Symbol(Comment)";
         });
         if (list.length) {
           return list;

package/es/components/date-picker/src/date-picker-com/basic-cell-render.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"basic-cell-render.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-cell-render.ts"],"sourcesContent":["import { h, defineComponent, inject } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n  name: 'ElDatePickerCell',\n  props: buildProps({\n    cell: {\n      type: definePropType<DateCell>(Object),\n    },\n  }),\n  setup(props) {\n    const picker = inject(ROOT_PICKER_INJECTION_KEY)\n    return () => {\n      const cell = props.cell\n      if (picker?.ctx.slots.default) {\n        const list = picker.ctx.slots.default(cell).filter((item) => {\n          return item.type.toString() !== 'Symbol(Comment)'\n        })\n        if (list.length) {\n          return list\n        }\n      }\n      return h(\n        'div',\n        {\n          class: 'el-date-table-cell',\n        },\n        [\n          h(\n            'span',\n            {\n              class: 'el-date-table-cell__text',\n            },\n            [cell?.text]\n          ),\n        ]\n      )\n    }\n  },\n})\n"],"names":[],"mappings":";;;;AAGA,uBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,UAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,IAAI,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE;AAC9D,QAAQ,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK;AACrE,UAAU,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,iBAAiB,CAAC;AAC5D,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;AACzB,UAAU,OAAO,IAAI,CAAC;AACtB,SAAS;AACT,OAAO;AACP,MAAM,OAAO,CAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQ,CAAC,CAAC,MAAM,EAAE;AAClB,UAAU,KAAK,EAAE,0BAA0B;AAC3C,SAAS,EAAE,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/C,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}
+{"version":3,"file":"basic-cell-render.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-cell-render.ts"],"sourcesContent":["import { h, defineComponent, inject } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n  name: 'ElDatePickerCell',\n  props: buildProps({\n    cell: {\n      type: definePropType<DateCell>(Object),\n    },\n  }),\n  setup(props) {\n    const picker = inject(ROOT_PICKER_INJECTION_KEY)\n    return () => {\n      const cell = props.cell\n      if (picker?.ctx.slots.default) {\n        const list = picker.ctx.slots.default(cell).filter((item) => {\n          return (\n            item.patchFlag !== -2 && item.type.toString() !== 'Symbol(Comment)'\n          )\n        })\n        if (list.length) {\n          return list\n        }\n      }\n      return h(\n        'div',\n        {\n          class: 'el-date-table-cell',\n        },\n        [\n          h(\n            'span',\n            {\n              class: 'el-date-table-cell__text',\n            },\n            [cell?.text]\n          ),\n        ]\n      )\n    }\n  },\n})\n"],"names":[],"mappings":";;;;AAGA,uBAAe,eAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,UAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAC;AACrD,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;AAC9B,MAAM,IAAI,MAAM,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE;AAC9D,QAAQ,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK;AACrE,UAAU,OAAO,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,iBAAiB,CAAC;AACrF,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;AACzB,UAAU,OAAO,IAAI,CAAC;AACtB,SAAS;AACT,OAAO;AACP,MAAM,OAAO,CAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQ,CAAC,CAAC,MAAM,EAAE;AAClB,UAAU,KAAK,EAAE,0BAA0B;AAC3C,SAAS,EAAE,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/C,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,GAAG;AACH,CAAC,CAAC;;;;"}

package/es/components/date-picker/src/date-picker.d.ts

@@ -143,8 +143,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -178,8 +178,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: IDatePickerType;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollection","ElRovingFocusGroup"],"mappings":";;;;;;;;;;;;;;;;AA6FA,mBAAmB,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;;AAEhD,EAAE,MAAM,YAAY;;AAEpB,IAAI,QAAQ;;AAEZ,IAAI,aAAa;IACb,WAAW;0BACXA;IACA;wBACAC;IACA,MAAM;IACN,SAAS;;OAEN,EAAE;OACF,EAAE,CAAC;OACH,CAAC;IACJ,MAAM;;IAEN,MAAM;IACN,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG;IACnB,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,MAAM,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAI;IAC5B,MAAM,YAAY,QAAQ,CAAC,OAAO;MAChC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC,CAAC,CAAC;IACJ,MAAM,kBAAkB;MACtB,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,aAAa,EAAE;KACvC,CAAC,CAAC;;MAED,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG;KAClC;IACD,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;aACtB,eAAe,GAAG,IAAI,EAAE;;;IAGjC,SAAS,WAAW,GAAG;;IAEvB;;MAEE,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC;;KAE3B;aACQ;;;IAGT,SAAS;MACP,IAAI,CAAC;;;OAGJ;;;MAGD,UAAU;MACV,eAAe;;;KAGhB,CAAC,CAAC;WACI,CAAC;;;MAGN,OAAO;MACP,WAAW;oBACG;aACP,EAAE,KAAK,CAAC,KAAK,EAAE;MACtB;;;MAGA,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,CAAC,CAAC;MACF,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG;QACV;OACD,CAAC,CAAC;KACJ;;MAEC,IAAI,CAAC,OAAO,EAAE,MAAM;MACpB;WACK;MACL,OAAO;MACP,SAAS;MACT,SAAS;MACT,kBAAkB;MAClB;;;MAGA,sBAAsB;MACtB,gBAAgB;MAChB,cAAc;eACL;MACT;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElDropdownCollection","ElRovingFocusGroup"],"mappings":";;;;;;;;;;;;;;;;AA8FA,mBAAmB,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;;AAEhD,EAAE,MAAM,YAAY;;AAEpB,IAAI,QAAQ;;AAEZ,IAAI,aAAa;IACb,WAAW;0BACXA;IACA;wBACAC;IACA,MAAM;IACN,SAAS;;OAEN,EAAE;OACF,EAAE,CAAC;OACH,CAAC;IACJ,MAAM;;IAEN,MAAM;IACN,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG;IACnB,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,MAAM,YAAY,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,eAAe,GAAG,IAAI;IAC5B,MAAM,YAAY,QAAQ,CAAC,OAAO;MAChC,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC,CAAC,CAAC;IACJ,MAAM,kBAAkB;MACtB,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,aAAa,EAAE;KACvC,CAAC,CAAC;;MAED,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG;KAClC;IACD,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;aACtB,eAAe,GAAG,IAAI,EAAE;;;IAGjC,SAAS,WAAW,GAAG;;IAEvB;;MAEE,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC;;KAE3B;aACQ;;;IAGT,SAAS;MACP,IAAI,CAAC;;;OAGJ;;;MAGD,UAAU;MACV,eAAe;;;KAGhB,CAAC,CAAC;WACI,CAAC;;;MAGN,OAAO;MACP,WAAW;oBACG;aACP,EAAE,KAAK,CAAC,KAAK,EAAE;MACtB;;;MAGA,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,CAAC,CAAC;MACF,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG;QACV;OACD,CAAC,CAAC;KACJ;;MAEC,IAAI,CAAC,OAAO,EAAE,MAAM;MACpB;WACK;MACL,OAAO;MACP,SAAS;MACT,SAAS;MACT,kBAAkB;MAClB;;;MAGA,sBAAsB;MACtB,gBAAgB;MAChB,cAAc;eACL;MACT;;;;;;;;"}

package/es/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs

@@ -31,6 +31,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "append-to-body": "",
       pure: "",
       transition: "el-zoom-in-top",
+      persistent: "",
       onShow: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("visible-change", true)),
       onHide: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("visible-change", false))
     }, createSlots({

package/es/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA,MAAA;MACA;;MAEC;;aAEiB;;UAEd,GAAG,EAAC;UACH,YAAU,EAAE;;UAEb;;;;;cAEwB;;;;kBAEnB;kBACA;kBACD;;kBAEC;;;;;;;;;;;;;;;;;;;;;QASQ;;;;;;;gBAEb;;;;;;qBAIqB;;;;iBAGlB,EAACA;oCACe;;cAElB;;;;;;;;iBAKE,EAACA;;cAEH;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.mjs","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA;MACA;MACA;;MAEC;;aAEiB;;UAEd,GAAG,EAAC;UACH,YAAU,EAAE;;UAEb;;;;;cAEwB;;;;kBAEnB;kBACA;kBACD;;kBAEC;;;;;;;;;;;;;;;;;;;;;QASQ;;;;;;;gBAEb;;;;;;qBAIqB;;;;iBAGlB,EAACA;oCACe;;cAElB;;;;;;;;iBAKE,EAACA;;cAEH;;;;;;;;;;;;;;;;"}

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

@@ -29,6 +29,7 @@ export declare const ElForm: import("../../utils/types").SFCWithInstall<import("
     };
     scrollToError: BooleanConstructor;
 }, {
+    formKls: import("vue").ComputedRef<string[]>;
     validate: (callback?: import("./src/form.vue").Callback | undefined) => Promise<boolean> | undefined;
     resetFields: () => void;
     clearValidate: (props?: string | string[]) => void;

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

@@ -36,6 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     scrollToError: BooleanConstructor;
 }, {
+    formKls: import("vue").ComputedRef<string[]>;
     validate: (callback?: Callback | undefined) => Promise<boolean> | undefined;
     resetFields: () => void;
     clearValidate: (props?: string | string[]) => void;

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

@@ -1,6 +1,8 @@
 import { ref, computed, defineComponent, watch, reactive, toRefs, provide } from 'vue';
 import '../../../tokens/index.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
+import '../../../hooks/index.mjs';
+import { useSize } from '../../../hooks/use-common-props/index.mjs';
 import { elFormKey } from '../../../tokens/form.mjs';
 
 function useFormLabelWidth() {
@@ -80,6 +82,17 @@ var script = defineComponent({
         validate(() => ({}));
       }
     });
+    const formSize = useSize();
+    const prefix = "el-form";
+    const formKls = computed(() => {
+      const { labelPosition, inline } = props;
+      return [
+        prefix,
+        `${prefix}--${formSize.value}`,
+        labelPosition ? `${prefix}--label-${labelPosition}` : "",
+        inline ? `${prefix}--inline` : ""
+      ];
+    });
     const addField = (field) => {
       if (field) {
         fields.push(field);
@@ -176,6 +189,7 @@ var script = defineComponent({
     });
     provide(elFormKey, elForm);
     return {
+      formKls,
       validate,
       resetFields,
       clearValidate,

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

@@ -1 +1 @@
-{"version":3,"file":"form.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form\n    class=\"el-form\"\n    :class=\"[\n      labelPosition ? 'el-form--label-' + labelPosition : '',\n      { 'el-form--inline': inline },\n    ]\"\n  >\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"form.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/form/src/form.vue"],"sourcesContent":["<template>\n  <form :class=\"formKls\">\n    <slot></slot>\n  </form>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport { elFormKey } from '@element-plus/tokens'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { useSize } from '@element-plus/hooks'\nimport type { ValidateFieldsError } from 'async-validator'\n\nimport type { PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { FormRulesMap } from './form.type'\nimport type {\n  ElFormItemContext as FormItemCtx,\n  ValidateFieldCallback,\n} from '@element-plus/tokens'\n\nfunction useFormLabelWidth() {\n  const potentialLabelWidthArr = ref([])\n  const autoLabelWidth = computed(() => {\n    if (!potentialLabelWidthArr.value.length) return '0'\n    const max = Math.max(...potentialLabelWidthArr.value)\n    return max ? `${max}px` : ''\n  })\n\n  function getLabelWidthIndex(width: number) {\n    const index = potentialLabelWidthArr.value.indexOf(width)\n    if (index === -1) {\n      debugWarn('Form', `unexpected width ${width}`)\n    }\n    return index\n  }\n\n  function registerLabelWidth(val: number, oldVal: number) {\n    if (val && oldVal) {\n      const index = getLabelWidthIndex(oldVal)\n      potentialLabelWidthArr.value.splice(index, 1, val)\n    } else if (val) {\n      potentialLabelWidthArr.value.push(val)\n    }\n  }\n\n  function deregisterLabelWidth(val: number) {\n    const index = getLabelWidthIndex(val)\n    index > -1 && potentialLabelWidthArr.value.splice(index, 1)\n  }\n\n  return {\n    autoLabelWidth,\n    registerLabelWidth,\n    deregisterLabelWidth,\n  }\n}\n\nexport interface Callback {\n  (isValid?: boolean, invalidFields?: ValidateFieldsError): void\n}\n\nexport default defineComponent({\n  name: 'ElForm',\n  props: {\n    model: Object,\n    rules: Object as PropType<FormRulesMap>,\n    labelPosition: String,\n    labelWidth: {\n      type: [String, Number],\n      default: '',\n    },\n    labelSuffix: {\n      type: String,\n      default: '',\n    },\n    inline: Boolean,\n    inlineMessage: Boolean,\n    statusIcon: Boolean,\n    showMessage: {\n      type: Boolean,\n      default: true,\n    },\n    size: String as PropType<ComponentSize>,\n    disabled: Boolean,\n    validateOnRuleChange: {\n      type: Boolean,\n      default: true,\n    },\n    hideRequiredAsterisk: {\n      type: Boolean,\n      default: false,\n    },\n    scrollToError: Boolean,\n  },\n  emits: ['validate'],\n  setup(props, { emit }) {\n    const fields: FormItemCtx[] = []\n\n    watch(\n      () => props.rules,\n      () => {\n        fields.forEach((field) => {\n          field.evaluateValidationEnabled()\n        })\n\n        if (props.validateOnRuleChange) {\n          validate(() => ({}))\n        }\n      }\n    )\n\n    const formSize = useSize()\n    const prefix = 'el-form'\n    const formKls = computed(() => {\n      const { labelPosition, inline } = props\n      return [\n        prefix,\n        `${prefix}--${formSize.value}`,\n        labelPosition ? `${prefix}--label-${labelPosition}` : '',\n        inline ? `${prefix}--inline` : '',\n      ]\n    })\n\n    const addField = (field: FormItemCtx) => {\n      if (field) {\n        fields.push(field)\n      }\n    }\n\n    const removeField = (field: FormItemCtx) => {\n      if (field.prop) {\n        fields.splice(fields.indexOf(field), 1)\n      }\n    }\n\n    const resetFields = () => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for resetFields to work.')\n        return\n      }\n      fields.forEach((field) => {\n        field.resetField()\n      })\n    }\n\n    const clearValidate = (props: string | string[] = []) => {\n      const fds = props.length\n        ? typeof props === 'string'\n          ? fields.filter((field) => props === field.prop)\n          : fields.filter((field) => props.indexOf(field.prop) > -1)\n        : fields\n      fds.forEach((field) => {\n        field.clearValidate()\n      })\n    }\n\n    const validate = (callback?: Callback) => {\n      if (!props.model) {\n        debugWarn('Form', 'model is required for validate to work!')\n        return\n      }\n\n      let promise: Promise<boolean> | undefined\n      // if no callback, return promise\n      if (typeof callback !== 'function') {\n        promise = new Promise((resolve, reject) => {\n          callback = function (valid, invalidFields) {\n            if (valid) {\n              resolve(true)\n            } else {\n              reject(invalidFields)\n            }\n          }\n        })\n      }\n\n      if (fields.length === 0) {\n        callback(true)\n      }\n      let valid = true\n      let count = 0\n      let invalidFields = {}\n      let firstInvalidFields\n      for (const field of fields) {\n        field.validate('', (message, field) => {\n          if (message) {\n            valid = false\n            firstInvalidFields || (firstInvalidFields = field)\n          }\n          invalidFields = { ...invalidFields, ...field }\n          if (++count === fields.length) {\n            callback(valid, invalidFields)\n          }\n        })\n      }\n      if (!valid && props.scrollToError) {\n        scrollToField(Object.keys(firstInvalidFields)[0])\n      }\n      return promise\n    }\n\n    const validateField = (\n      props: string | string[],\n      cb: ValidateFieldCallback\n    ) => {\n      props = [].concat(props)\n      const fds = fields.filter((field) => props.indexOf(field.prop) !== -1)\n      if (!fields.length) {\n        debugWarn('Form', 'please pass correct props!')\n        return\n      }\n\n      fds.forEach((field) => {\n        field.validate('', cb)\n      })\n    }\n\n    const scrollToField = (prop: string) => {\n      fields.forEach((item) => {\n        if (item.prop === prop) {\n          item.$el.scrollIntoView()\n        }\n      })\n    }\n\n    const elForm = reactive({\n      ...toRefs(props),\n      resetFields,\n      clearValidate,\n      validateField,\n      emit,\n      addField,\n      removeField,\n      ...useFormLabelWidth(),\n    })\n\n    provide(elFormKey, elForm)\n\n    return {\n      formKls,\n      validate, // export\n      resetFields,\n      clearValidate,\n      validateField,\n      scrollToField,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":"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"}