@element-plus/nightly 0.0.20220208 → 0.0.20220209

package/lib/components/color-picker/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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=\"[ns.be('picker', 'panel'), ns.b('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=\"ns.be('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=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('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=\"ns.be('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=\"ns.be('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          ns.b('picker'),\n          ns.is('disabled', colorDisabled),\n          ns.bm('picker', colorSize),\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\"></div>\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.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-unified'\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, useNamespace } 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 ns = useNamespace('color')\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        value: props.modelValue,\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      }\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          value: props.modelValue,\n        })\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        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      ns,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElTooltip","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useLocale","useNamespace","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","useSize","debounce","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"index.js","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=\"[ns.be('picker', 'panel'), ns.b('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=\"ns.be('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=\"ns.be('dropdown', 'btns')\">\n          <span :class=\"ns.be('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=\"ns.be('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=\"ns.be('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          ns.b('picker'),\n          ns.is('disabled', colorDisabled),\n          ns.bm('picker', colorSize),\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" :class=\"ns.be('picker', 'mask')\"></div>\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.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-unified'\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, useNamespace } 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/constants'\nimport { isValidComponentSize } from '@element-plus/utils-v2'\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/constants'\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 ns = useNamespace('color')\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        value: props.modelValue,\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      }\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          value: props.modelValue,\n        })\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        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      ns,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElTooltip","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useLocale","useNamespace","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","useSize","debounce","_normalizeClass"],"mappings":"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"}

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

@@ -1,21 +1,20 @@
 import Color from './color';
 import type { PropType } from 'vue';
-import type { ComponentSize } from 'element-plus/es/utils/types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: StringConstructor;
     showAlpha: BooleanConstructor;
     colorFormat: StringConstructor;
     disabled: BooleanConstructor;
     size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
+        type: PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
     popperClass: StringConstructor;
     predefine: ArrayConstructor;
 }, {
     color: Color;
     colorDisabled: import("vue").ComputedRef<boolean>;
-    colorSize: import("vue").ComputedRef<ComponentSize>;
+    colorSize: import("vue").ComputedRef<"default" | "small" | "large">;
     displayedColor: import("vue").ComputedRef<string>;
     showPanelColor: import("vue").Ref<boolean>;
     showPicker: import("vue").Ref<boolean>;
@@ -47,8 +46,8 @@ declare const _default: import("vue").DefineComponent<{
     colorFormat: StringConstructor;
     disabled: BooleanConstructor;
     size: {
-        type: PropType<ComponentSize>;
-        validator: (val: string) => boolean;
+        type: PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
     popperClass: StringConstructor;
     predefine: ArrayConstructor;

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

@@ -1,22 +1,22 @@
-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 namespace: import("../../utils/props").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
+export declare const ElConfigProvider: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
+    readonly locale: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<import("../../locale").Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
+    readonly button: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<import("..").ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<import("..").MessageConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly zIndex: import("element-plus/es/utils-v2").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly namespace: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, "el", 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<import("vue").ExtractPropTypes<{
-    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 namespace: import("../../utils/props").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
+    readonly locale: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<import("../../locale").Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
+    readonly button: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<import("..").ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<import("..").MessageConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly zIndex: import("element-plus/es/utils-v2").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly namespace: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
 }>>, {
     button: import("..").ButtonConfigContext;
-    size: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown>;
+    size: import("element-plus/es/utils-v2").BuildPropType<StringConstructor, "default" | "small" | "large", unknown>;
     locale: import("../../locale").Language;
     message: import("..").MessageConfigContext;
     zIndex: number;

package/lib/components/config-provider/index.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var withInstall = require('../../utils/with-install.js');
+require('../../utils-v2/index.js');
 var configProvider = require('./src/config-provider.js');
+var install = require('../../utils-v2/vue/install.js');
 
-const ElConfigProvider = withInstall.withInstall(configProvider["default"]);
+const ElConfigProvider = install.withInstall(configProvider["default"]);
 
 exports.configProviderProps = configProvider.configProviderProps;
 exports.messageConfig = configProvider.messageConfig;

package/lib/components/config-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/config-provider/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\n\nimport ConfigProvider from './src/config-provider'\n\nexport const ElConfigProvider = withInstall(ConfigProvider)\nexport default ElConfigProvider\n\nexport * from './src/config-provider'\n"],"names":["withInstall","ConfigProvider"],"mappings":";;;;;;;AAEY,MAAC,gBAAgB,GAAGA,uBAAW,CAACC,yBAAc;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/config-provider/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils-v2'\n\nimport ConfigProvider from './src/config-provider'\n\nexport const ElConfigProvider = withInstall(ConfigProvider)\nexport default ElConfigProvider\n\nexport * from './src/config-provider'\n"],"names":["withInstall","ConfigProvider"],"mappings":";;;;;;;;AAEY,MAAC,gBAAgB,GAAGA,mBAAW,CAACC,yBAAc;;;;;;;"}

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

@@ -3,32 +3,32 @@ 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 namespace: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
+    readonly locale: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
+    readonly button: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<MessageConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly zIndex: import("element-plus/es/utils-v2").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly namespace: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, "el", 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 namespace: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
+    readonly locale: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
+    readonly button: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<MessageConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly zIndex: import("element-plus/es/utils-v2").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly namespace: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, "el", 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<import("vue").ExtractPropTypes<{
-    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 namespace: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
+    readonly locale: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<Language>, unknown, unknown, unknown, unknown>;
+    readonly size: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, unknown, unknown, "default" | "small" | "large", unknown>;
+    readonly button: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<ButtonConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly message: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<MessageConfigContext>, unknown, unknown, unknown, unknown>;
+    readonly zIndex: import("element-plus/es/utils-v2").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
+    readonly namespace: import("element-plus/es/utils-v2").BuildPropReturn<StringConstructor, "el", unknown, unknown, unknown>;
 }>>, {
     button: ButtonConfigContext;
-    size: import("element-plus/es/utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown>;
+    size: import("element-plus/es/utils-v2").BuildPropType<StringConstructor, "default" | "small" | "large", unknown>;
     locale: Language;
     message: MessageConfigContext;
     zIndex: number;

package/lib/components/config-provider/src/config-provider.js

@@ -3,24 +3,25 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var props = require('../../../utils/props.js');
+require('../../../utils-v2/index.js');
 require('../../../hooks/index.js');
+var prop = require('../../../utils-v2/vue/prop.js');
 var index = require('../../../hooks/use-global-config/index.js');
 
 const messageConfig = {};
-const configProviderProps = props.buildProps({
+const configProviderProps = prop.buildProps({
   locale: {
-    type: props.definePropType(Object)
+    type: prop.definePropType(Object)
   },
   size: {
     type: String,
     values: ["large", "default", "small"]
   },
   button: {
-    type: props.definePropType(Object)
+    type: prop.definePropType(Object)
   },
   message: {
-    type: props.definePropType(Object)
+    type: prop.definePropType(Object)
   },
   zIndex: {
     type: Number

package/lib/components/config-provider/src/config-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"config-provider.js","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\n  namespace: {\n    type: String,\n    default: 'el',\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":["buildProps","definePropType","defineComponent","watch","provideGlobalConfig","renderSlot"],"mappings":";;;;;;;;;AAGY,MAAC,aAAa,GAAG,GAAG;AACpB,MAAC,mBAAmB,GAAGA,gBAAU,CAAC;AAC9C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,oBAAc,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,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,oBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACH,qBAAeC,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAIC,SAAK,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,GAAGC,yBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAMC,cAAU,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.js","sources":["../../../../../../packages/components/config-provider/src/config-provider.ts"],"sourcesContent":["import { defineComponent, renderSlot, watch } from 'vue'\nimport { buildProps, definePropType } from '@element-plus/utils-v2'\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\n  namespace: {\n    type: String,\n    default: 'el',\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":["buildProps","definePropType","defineComponent","watch","provideGlobalConfig","renderSlot"],"mappings":";;;;;;;;;;AAGY,MAAC,aAAa,GAAG,GAAG;AACpB,MAAC,mBAAmB,GAAGA,eAAU,CAAC;AAC9C,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAEC,mBAAc,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,EAAEA,mBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAEA,mBAAc,CAAC,MAAM,CAAC;AAChC,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACH,qBAAeC,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAE,mBAAmB;AAC5B,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC1B,IAAIC,SAAK,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,GAAGC,yBAAmB,CAAC,KAAK,CAAC,CAAC;AAC9C,IAAI,OAAO,MAAMC,cAAU,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/lib/components/container/index.d.ts

@@ -1,4 +1,4 @@
-export declare const ElContainer: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElContainer: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     direction: {
         type: StringConstructor;
         default: string;
@@ -117,7 +117,7 @@ export declare const ElContainer: import("../../utils/types").SFCWithInstall<imp
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 };
 export default ElContainer;
-export declare const ElAside: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElAside: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     width: {
         type: StringConstructor;
         default: null;
@@ -143,7 +143,7 @@ export declare const ElAside: import("../../utils/types").SFCWithInstall<import(
 }>>, {
     width: string;
 }>>;
-export declare const ElFooter: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElFooter: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     height: {
         type: StringConstructor;
         default: null;
@@ -169,7 +169,7 @@ export declare const ElFooter: import("../../utils/types").SFCWithInstall<import
 }>>, {
     height: string;
 }>>;
-export declare const ElHeader: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+export declare const ElHeader: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{
     height: {
         type: StringConstructor;
         default: null;
@@ -195,7 +195,7 @@ export declare const ElHeader: import("../../utils/types").SFCWithInstall<import
 }>>, {
     height: string;
 }>>;
-export declare const ElMain: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{}, {
+export declare const ElMain: import("element-plus/es/utils-v2").SFCWithInstall<import("vue").DefineComponent<{}, {
     ns: {
         namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;

package/lib/components/container/index.js

@@ -2,23 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var withInstall = require('../../utils/with-install.js');
+require('../../utils-v2/index.js');
 var container = require('./src/container.js');
 var aside = require('./src/aside.js');
 var footer = require('./src/footer.js');
 var header = require('./src/header.js');
 var main = require('./src/main.js');
+var install = require('../../utils-v2/vue/install.js');
 
-const ElContainer = withInstall.withInstall(container["default"], {
+const ElContainer = install.withInstall(container["default"], {
   Aside: aside["default"],
   Footer: footer["default"],
   Header: header["default"],
   Main: main["default"]
 });
-const ElAside = withInstall.withNoopInstall(aside["default"]);
-const ElFooter = withInstall.withNoopInstall(footer["default"]);
-const ElHeader = withInstall.withNoopInstall(header["default"]);
-const ElMain = withInstall.withNoopInstall(main["default"]);
+const ElAside = install.withNoopInstall(aside["default"]);
+const ElFooter = install.withNoopInstall(footer["default"]);
+const ElHeader = install.withNoopInstall(header["default"]);
+const ElMain = install.withNoopInstall(main["default"]);
 
 exports.ElAside = ElAside;
 exports.ElContainer = ElContainer;

package/lib/components/container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/container/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'\n\nimport Container from './src/container.vue'\nimport Aside from './src/aside.vue'\nimport Footer from './src/footer.vue'\nimport Header from './src/header.vue'\nimport Main from './src/main.vue'\n\nexport const ElContainer = withInstall(Container, {\n  Aside,\n  Footer,\n  Header,\n  Main,\n})\n\nexport default ElContainer\nexport const ElAside = withNoopInstall(Aside)\nexport const ElFooter = withNoopInstall(Footer)\nexport const ElHeader = withNoopInstall(Header)\nexport const ElMain = withNoopInstall(Main)\n"],"names":["withInstall","Container","Aside","Footer","Header","Main","withNoopInstall"],"mappings":";;;;;;;;;;;AAMY,MAAC,WAAW,GAAGA,uBAAW,CAACC,oBAAS,EAAE;AAClD,SAAEC,gBAAK;AACP,UAAEC,iBAAM;AACR,UAAEC,iBAAM;AACR,QAAEC,eAAI;AACN,CAAC,EAAE;AAES,MAAC,OAAO,GAAGC,2BAAe,CAACJ,gBAAK,EAAE;AAClC,MAAC,QAAQ,GAAGI,2BAAe,CAACH,iBAAM,EAAE;AACpC,MAAC,QAAQ,GAAGG,2BAAe,CAACF,iBAAM,EAAE;AACpC,MAAC,MAAM,GAAGE,2BAAe,CAACD,eAAI;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/container/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils-v2'\n\nimport Container from './src/container.vue'\nimport Aside from './src/aside.vue'\nimport Footer from './src/footer.vue'\nimport Header from './src/header.vue'\nimport Main from './src/main.vue'\n\nexport const ElContainer = withInstall(Container, {\n  Aside,\n  Footer,\n  Header,\n  Main,\n})\n\nexport default ElContainer\nexport const ElAside = withNoopInstall(Aside)\nexport const ElFooter = withNoopInstall(Footer)\nexport const ElHeader = withNoopInstall(Header)\nexport const ElMain = withNoopInstall(Main)\n"],"names":["withInstall","Container","Aside","Footer","Header","Main","withNoopInstall"],"mappings":";;;;;;;;;;;;AAMY,MAAC,WAAW,GAAGA,mBAAW,CAACC,oBAAS,EAAE;AAClD,SAAEC,gBAAK;AACP,UAAEC,iBAAM;AACR,UAAEC,iBAAM;AACR,QAAEC,eAAI;AACN,CAAC,EAAE;AAES,MAAC,OAAO,GAAGC,uBAAe,CAACJ,gBAAK,EAAE;AAClC,MAAC,QAAQ,GAAGI,uBAAe,CAACH,iBAAM,EAAE;AACpC,MAAC,QAAQ,GAAGG,uBAAe,CAACF,iBAAM,EAAE;AACpC,MAAC,MAAM,GAAGE,uBAAe,CAACD,eAAI;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import type { SFCWithInstall } from 'element-plus/es/utils/types';
+import type { SFCWithInstall } from 'element-plus/es/utils-v2';
 declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     type: {
         type: import("vue").PropType<import("./src/date-picker.type").IDatePickerType>;
@@ -38,8 +38,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        validator: (val: string) => boolean;
+        type: import("vue").PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
     readonly: {
         type: BooleanConstructor;
@@ -146,8 +146,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        validator: (val: string) => boolean;
+        type: import("vue").PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
     readonly: {
         type: BooleanConstructor;
@@ -275,8 +275,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        validator: (val: string) => boolean;
+        type: import("vue").PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
     readonly: {
         type: BooleanConstructor;
@@ -383,8 +383,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
-        validator: (val: string) => boolean;
+        type: import("vue").PropType<"default" | "small" | "large">;
+        validator: (val: string) => val is "" | "default" | "small" | "large";
     };
     readonly: {
         type: BooleanConstructor;

package/lib/components/date-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/date-picker/index.ts"],"sourcesContent":["import DatePicker from './src/date-picker'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nconst _DatePicker = DatePicker as SFCWithInstall<typeof DatePicker>\n\n_DatePicker.install = (app: App) => {\n  app.component(_DatePicker.name, _DatePicker)\n}\n\nexport default _DatePicker\nexport const ElDatePicker = _DatePicker\n"],"names":["DatePicker"],"mappings":";;;;;;AACK,MAAC,WAAW,GAAGA,sBAAW;AAC/B,WAAW,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AAC/B,EAAE,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEU,MAAC,YAAY,GAAG;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/date-picker/index.ts"],"sourcesContent":["import DatePicker from './src/date-picker'\n\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils-v2'\n\nconst _DatePicker = DatePicker as SFCWithInstall<typeof DatePicker>\n\n_DatePicker.install = (app: App) => {\n  app.component(_DatePicker.name, _DatePicker)\n}\n\nexport default _DatePicker\nexport const ElDatePicker = _DatePicker\n"],"names":["DatePicker"],"mappings":";;;;;;AACK,MAAC,WAAW,GAAGA,sBAAW;AAC/B,WAAW,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AAC/B,EAAE,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC/C,CAAC,CAAC;AAEU,MAAC,YAAY,GAAG;;;;;"}

package/lib/components/date-picker/src/date-picker-com/basic-cell-render.d.ts

@@ -1,12 +1,12 @@
 import type { DateCell } from '../date-picker.type';
 declare const _default: import("vue").DefineComponent<{
-    cell: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<DateCell>, unknown, unknown, unknown, unknown>;
+    cell: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<DateCell>, unknown, unknown, unknown, unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | 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<import("vue").ExtractPropTypes<{
-    cell: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<DateCell>, unknown, unknown, unknown, unknown>;
+    cell: import("element-plus/es/utils-v2").BuildPropReturn<import("element-plus/es/utils-v2").PropWrapper<DateCell>, unknown, unknown, unknown, unknown>;
 }>>, {
     cell: DateCell;
 }>;

package/lib/components/date-picker/src/date-picker-com/basic-cell-render.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var props = require('../../../../utils/props.js');
+require('../../../../utils-v2/index.js');
 var datePicker_type = require('../date-picker.type.js');
+var prop = require('../../../../utils-v2/vue/prop.js');
 
 var ElDatePickerCell = vue.defineComponent({
   name: "ElDatePickerCell",
-  props: props.buildProps({
+  props: prop.buildProps({
     cell: {
-      type: props.definePropType(Object)
+      type: prop.definePropType(Object)
     }
   }),
   setup(props) {

package/lib/components/date-picker/src/date-picker-com/basic-cell-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-cell-render.js","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":["defineComponent","buildProps","definePropType","inject","ROOT_PICKER_INJECTION_KEY","h"],"mappings":";;;;;;;;AAGA,uBAAeA,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAEC,gBAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAEC,oBAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAGC,UAAM,CAACC,yCAAyB,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,OAAOC,KAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQA,KAAC,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.js","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-v2'\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":["defineComponent","buildProps","definePropType","inject","ROOT_PICKER_INJECTION_KEY","h"],"mappings":";;;;;;;;;AAGA,uBAAeA,mBAAe,CAAC;AAC/B,EAAE,IAAI,EAAE,kBAAkB;AAC1B,EAAE,KAAK,EAAEC,eAAU,CAAC;AACpB,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAEC,mBAAc,CAAC,MAAM,CAAC;AAClC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,KAAK,EAAE;AACf,IAAI,MAAM,MAAM,GAAGC,UAAM,CAACC,yCAAyB,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,OAAOC,KAAC,CAAC,KAAK,EAAE;AACtB,QAAQ,KAAK,EAAE,oBAAoB;AACnC,OAAO,EAAE;AACT,QAAQA,KAAC,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/lib/components/date-picker/src/date-picker-com/basic-date-table.vue.d.ts

@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "M" | "s" | "y" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -222,7 +222,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "M" | "s" | "y" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;

package/lib/components/date-picker/src/date-picker-com/panel-date-pick.js

@@ -11,7 +11,7 @@ var index = require('../../../input/index.js');
 require('../../../time-picker/index.js');
 var index$2 = require('../../../icon/index.js');
 var aria = require('../../../../utils/aria.js');
-var validators = require('../../../../utils/validators.js');
+require('../../../../utils-v2/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 require('../../../tooltip/index.js');
 var basicDateTable = require('./basic-date-table.js');
@@ -20,6 +20,7 @@ var basicYearTable = require('./basic-year-table.js');
 var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
 var panelTimePick = require('../../../time-picker/src/time-picker-com/panel-time-pick.js');
 var index$3 = require('../../../../directives/click-outside/index.js');
+var validator = require('../../../../utils-v2/vue/validator.js');
 var index$4 = require('../../../../hooks/use-locale/index.js');
 var tokens = require('../../../tooltip/src/tokens.js');
 var dateUtils = require('../../../time-picker/src/common/date-utils.js');
@@ -59,7 +60,7 @@ const _sfc_main = vue.defineComponent({
     type: {
       type: String,
       required: true,
-      validator: validators.isValidDatePickType
+      validator: validator.isValidDatePickType
     }
   },
   emits: ["pick", "set-picker-option", "panel-change"],