refactor(utils-v2): refactor utils (#5699)

package.json

@@ -53,6 +53,7 @@
   },
   "dependencies": {
     "@element-plus/components": "workspace:*",
+    "@element-plus/constants": "workspace:*",
     "@element-plus/directives": "workspace:*",
     "@element-plus/hooks": "workspace:*",
     "@element-plus/icons-vue": "^0.2.6",
@@ -61,6 +62,7 @@
     "@element-plus/theme-chalk": "workspace:*",
     "@element-plus/tokens": "workspace:*",
     "@element-plus/utils": "workspace:*",
+    "@element-plus/utils-v2": "workspace:*",
     "@popperjs/core": "^2.11.2",
     "@vueuse/core": "^7.5.5",
     "async-validator": "^4.0.7",

packages/components/affix/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Affix from './src/affix.vue'
 

packages/components/affix/src/affix.ts

@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type { ZIndexProperty } from 'csstype'
 import type Affix from './affix.vue'

packages/components/alert/__tests__/alert.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponentsMap } from '@element-plus/utils-v2'
 import Alert from '../src/alert.vue'
 
 const AXIOM = 'Rem is the best girl'

packages/components/alert/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Alert from './src/alert.vue'
 

packages/components/alert/src/alert.ts

@@ -1,5 +1,4 @@
-import { TypeComponentsMap } from '@element-plus/utils/icon'
-import { buildProps, keyOf } from '@element-plus/utils/props'
+import { TypeComponentsMap, buildProps, keyOf } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Alert from './alert.vue'
 

packages/components/alert/src/alert.vue

@@ -42,7 +42,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
-import { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'
+import { TypeComponents, TypeComponentsMap } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { alertProps, alertEmits } from './alert'
 

packages/components/autocomplete/index.ts

@@ -1,6 +1,6 @@
 import Autocomplete from './src/index.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Autocomplete.install = (app: App): void => {
   app.component(Autocomplete.name, Autocomplete)

packages/components/autocomplete/src/index.vue

@@ -94,9 +94,8 @@ import { NOOP } from '@vue/shared'
 import { debounce } from 'lodash-unified'
 import { useAttrs, useNamespace } from '@element-plus/hooks'
 import { ClickOutside } from '@element-plus/directives'
-import { generateId, isArray } from '@element-plus/utils/util'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { throwError } from '@element-plus/utils/error'
+import { generateId, isArray, throwError } from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import ElInput from '@element-plus/components/input'
 import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTooltip, {

packages/components/avatar/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Avatar from './src/avatar.vue'
 
 export const ElAvatar = withInstall(Avatar)

packages/components/avatar/src/avatar.ts

@@ -1,5 +1,9 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import type { ExtractPropTypes, Component } from 'vue'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type { ObjectFitProperty } from 'csstype'
 import type Avatar from './avatar.vue'
 
@@ -16,7 +20,7 @@ export const avatarProps = buildProps({
     default: 'circle',
   },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
   },
   src: {
     type: String,

packages/components/avatar/src/avatar.vue

@@ -19,7 +19,7 @@
 import { defineComponent, computed, ref, watch } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
-import { addUnit, isNumber, isString } from '@element-plus/utils/util'
+import { isNumber, isString, addUnit } from '@element-plus/utils-v2'
 import { avatarEmits, avatarProps } from './avatar'
 
 import type { CSSProperties } from 'vue'

packages/components/backtop/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Backtop from './src/backtop.vue'
 

packages/components/backtop/src/backtop.vue

@@ -21,7 +21,7 @@ import { defineComponent, ref, computed, onMounted, shallowRef } from 'vue'
 import { useEventListener, useThrottleFn } from '@vueuse/core'
 import { ElIcon } from '@element-plus/components/icon'
 import { easeInOutCubic } from '@element-plus/utils/animation'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
 

packages/components/badge/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Badge from './src/badge.vue'
 

packages/components/badge/src/badge.ts

@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Badge from './badge.vue'
 

packages/components/breadcrumb/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Breadcrumb from './src/breadcrumb.vue'
 import BreadcrumbItem from './src/breadcrumb-item.vue'

packages/components/breadcrumb/src/breadcrumb-item.ts

@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type BreadcrumbItem from './breadcrumb-item.vue'

packages/components/breadcrumb/src/breadcrumb.ts

@@ -1,5 +1,5 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import type { ExtractPropTypes, Component } from 'vue'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type Breadcrumb from './breadcrumb.vue'
 
 export const breadcrumbProps = buildProps({
@@ -8,7 +8,7 @@ export const breadcrumbProps = buildProps({
     default: '/',
   },
   separatorIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
 } as const)

packages/components/button/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Button from './src/button.vue'
 import ButtonGroup from './src/button-group.vue'
 

packages/components/button/src/button.ts

@@ -1,7 +1,7 @@
 import { useSizeProp } from '@element-plus/hooks'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
 import { Loading } from '@element-plus/icons-vue'
-import type { ExtractPropTypes, Component } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import type button from './button.vue'
 
 export const buttonType = [
@@ -25,7 +25,7 @@ export const buttonProps = buildProps({
     default: '',
   },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   nativeType: {
@@ -35,7 +35,7 @@ export const buttonProps = buildProps({
   },
   loading: Boolean,
   loadingIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: () => Loading,
   },
   plain: Boolean,

packages/components/calendar/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Calendar from './src/calendar.vue'
 
 export const ElCalendar = withInstall(Calendar)

packages/components/calendar/src/calendar.ts

@@ -1,5 +1,5 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import type { ExtractPropTypes } from 'vue'
 
 export const calendarProps = buildProps({

packages/components/calendar/src/calendar.vue

@@ -48,7 +48,7 @@ import { ref, computed, defineComponent } from 'vue'
 import dayjs from 'dayjs'
 import { ElButton, ElButtonGroup } from '@element-plus/components/button'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import DateTable from './date-table.vue'
 import { calendarProps, calendarEmits } from './calendar'
 

packages/components/calendar/src/date-table.ts

@@ -1,5 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { isObject } from '@element-plus/utils/util'
+import { buildProps, definePropType, isObject } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type { Dayjs } from 'dayjs'
 

packages/components/card/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Card from './src/card.vue'
 

packages/components/card/src/card.ts

@@ -1,7 +1,6 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type Card from './card.vue'
-import type { ExtractPropTypes } from 'vue'
-import type { StyleValue } from '@element-plus/utils/types'
+import type { ExtractPropTypes, StyleValue } from 'vue'
 
 export const cardProps = buildProps({
   header: {

packages/components/carousel/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Carousel from './src/main.vue'
 import CarouselItem from './src/item.vue'
 

packages/components/carousel/src/item.vue

@@ -32,7 +32,7 @@ import {
   onUnmounted,
 } from 'vue'
 import { autoprefixer } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import type { CSSProperties } from 'vue'
 import type { InjectCarouselScope, ICarouselItemProps } from './carousel'

packages/components/carousel/src/main.vue

@@ -83,7 +83,7 @@ import { ElIcon } from '@element-plus/components/icon'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
 
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import type {
   ICarouselProps,
   CarouselItem,

packages/components/cascader-panel/index.ts

@@ -1,6 +1,6 @@
 import CascaderPanel from './src/index.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 CascaderPanel.install = (app: App): void => {
   app.component(CascaderPanel.name, CascaderPanel)

packages/components/cascader-panel/src/index.vue

@@ -28,14 +28,10 @@ import {
 import { isEqual } from 'lodash-unified'
 import { isClient } from '@vueuse/core'
 import { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import scrollIntoView from '@element-plus/utils/scroll-into-view'
-import {
-  arrayFlat,
-  coerceTruthyValueToArray,
-  deduplicate,
-  isEmpty,
-} from '@element-plus/utils/util'
+import { arrayFlat, coerceTruthyValueToArray } from '@element-plus/utils/util'
+import { isEmpty, unique } from '@element-plus/utils-v2'
 
 import ElCascaderMenu from './menu.vue'
 import Store from './store'
@@ -213,7 +209,7 @@ export default defineComponent({
         return
 
       if (lazy && !loaded) {
-        const values: CascaderNodeValue[] = deduplicate(
+        const values: CascaderNodeValue[] = unique(
           arrayFlat(coerceTruthyValueToArray(modelValue))
         )
         const nodes = values
@@ -231,7 +227,7 @@ export default defineComponent({
         const values = multiple
           ? coerceTruthyValueToArray(modelValue)
           : [modelValue]
-        const nodes = deduplicate(
+        const nodes = unique(
           values.map((val) => store?.getNodeByValue(val, leafOnly))
         ) as Node[]
         syncMenuState(nodes, false)

packages/components/cascader-panel/src/menu.vue

@@ -37,7 +37,7 @@
 import { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'
 import ElScrollbar from '@element-plus/components/scrollbar'
 import { useLocale } from '@element-plus/hooks'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 import { Loading } from '@element-plus/icons-vue'
 import ElIcon from '@element-plus/components/icon'
 import ElCascaderNode from './node.vue'
@@ -45,7 +45,7 @@ import { CASCADER_PANEL_INJECTION_KEY } from './types'
 
 import type { default as CascaderNode } from './node'
 import type { PropType } from 'vue'
-import type { TimeoutHandle, Nullable } from '@element-plus/utils/types'
+import type { Nullable } from '@element-plus/utils/types'
 
 export default defineComponent({
   name: 'ElCascaderMenu',
@@ -73,7 +73,7 @@ export default defineComponent({
     const { t } = useLocale()
     const id = generateId()
     let activeNode: Nullable<HTMLElement> = null
-    let hoverTimer: Nullable<TimeoutHandle> = null
+    let hoverTimer: Nullable<number> = null
 
     const panel = inject(CASCADER_PANEL_INJECTION_KEY)!
 

packages/components/cascader-panel/src/node.ts

@@ -1,5 +1,5 @@
 import { isFunction } from '@vue/shared'
-import { capitalize, isUndefined, isEmpty } from '@element-plus/utils/util'
+import { capitalize, isUndefined, isEmpty } from '@element-plus/utils-v2'
 import type { VNode } from 'vue'
 
 export type CascaderNodeValue = string | number

packages/components/cascader/index.ts

@@ -1,6 +1,6 @@
 import Cascader from './src/index.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 Cascader.install = (app: App): void => {
   app.component(Cascader.name, Cascader)

packages/components/cascader/src/index.vue

@@ -185,13 +185,12 @@ import { ClickOutside as Clickoutside } from '@element-plus/directives'
 import { useLocale, useSize } from '@element-plus/hooks'
 
 import { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import {
   addResizeListener,
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
-import { isValidComponentSize } from '@element-plus/utils/validators'
-import { isKorean } from '@element-plus/utils/isDef'
+import { isValidComponentSize, isKorean } from '@element-plus/utils-v2'
 import { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'
 
 import type { Options } from '@element-plus/components/popper'
@@ -202,7 +201,7 @@ import type {
   CascaderNode,
   Tag,
 } from '@element-plus/components/cascader-panel'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 type cascaderPanelType = InstanceType<typeof ElCascaderPanel>
 type tooltipType = InstanceType<typeof ElTooltip>

packages/components/check-tag/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import CheckTag from './src/check-tag.vue'
 
 export const ElCheckTag = withInstall(CheckTag)

packages/components/check-tag/src/check-tag.ts

@@ -1,5 +1,4 @@
-import { isBool } from '@element-plus/utils/util'
-import { buildProps } from '@element-plus/utils/props'
+import { isBoolean, buildProps } from '@element-plus/utils-v2'
 import type CheckTag from './check-tag.vue'
 import type { ExtractPropTypes } from 'vue'
 
@@ -12,8 +11,8 @@ export const checkTagProps = buildProps({
 export type CheckTagProps = ExtractPropTypes<typeof checkTagProps>
 
 export const checkTagEmits = {
-  'update:checked': (value: boolean) => isBool(value),
-  change: (value: boolean) => isBool(value),
+  'update:checked': (value: boolean) => isBoolean(value),
+  change: (value: boolean) => isBoolean(value),
 }
 export type CheckTagEmits = typeof checkTagEmits
 

packages/components/checkbox/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Checkbox from './src/checkbox.vue'
 import CheckboxButton from './src/checkbox-button.vue'

packages/components/checkbox/src/checkbox-button.vue

@@ -50,7 +50,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox, useCheckboxGroup, useCheckboxProps } from './useCheckbox'
 

packages/components/checkbox/src/checkbox-group.vue

@@ -9,13 +9,13 @@ import {
   h,
   renderSlot,
 } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useSize, useNamespace } from '@element-plus/hooks'
 import { useCheckboxGroup } from './useCheckbox'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElCheckboxGroup',

packages/components/checkbox/src/checkbox.type.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef } from 'vue'
-import type { AnyFunction, ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
+import type { AnyFunction } from '@element-plus/utils/types'
 export interface ICheckboxGroupInstance {
   name?: string
   modelValue?: ComputedRef

packages/components/checkbox/src/checkbox.vue

@@ -61,13 +61,13 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { useCheckbox } from './useCheckbox'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElCheckbox',

packages/components/checkbox/src/useCheckbox.ts

@@ -1,6 +1,6 @@
 import { ref, computed, inject, getCurrentInstance, watch } from 'vue'
 import { toTypeString } from '@vue/shared'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 
 import { useSize } from '@element-plus/hooks'

packages/components/col/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Col from './src/col'
 

packages/components/col/src/col.ts

@@ -1,5 +1,5 @@
 import { defineComponent, computed, inject, h, renderSlot } from 'vue'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import type { ExtractPropTypes, CSSProperties } from 'vue'
 

packages/components/collapse-transition/index.ts

@@ -1,6 +1,6 @@
 import CollapseTransition from './src/collapse-transition.vue'
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 CollapseTransition.install = (app: App): void => {
   app.component(CollapseTransition.name, CollapseTransition)

packages/components/collapse/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Collapse from './src/collapse.vue'
 import CollapseItem from './src/collapse-item.vue'

packages/components/collapse/src/collapse-item.vue

@@ -50,7 +50,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, inject, computed, ref } from 'vue'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElIcon from '@element-plus/components/icon'
 import { ArrowRight } from '@element-plus/icons-vue'

packages/components/collapse/src/collapse.vue

@@ -6,9 +6,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch, provide } from 'vue'
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/constants'
 import { useNamespace } from '@element-plus/hooks'
-import type { PropType } from 'vue'
 import type { CollapseProvider } from './collapse.type'
 
 export default defineComponent({

packages/components/color-picker/index.ts

@@ -1,7 +1,7 @@
 import ColorPicker from './src/index.vue'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 ColorPicker.install = (app: App): void => {
   app.component(ColorPicker.name, ColorPicker)

packages/components/color-picker/src/color.ts

@@ -1,4 +1,4 @@
-import { hasOwn } from '@vue/shared'
+import { hasOwn } from '@element-plus/utils-v2'
 
 const hsv2hsl = function (hue: number, sat: number, val: number) {
   return [

packages/components/color-picker/src/index.vue

@@ -112,8 +112,8 @@ import { elFormItemKey, elFormKey } from '@element-plus/tokens'
 import { useLocale, useSize, useNamespace } from '@element-plus/hooks'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElInput from '@element-plus/components/input'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { Close, ArrowDown } from '@element-plus/icons-vue'
 import AlphaSlider from './components/alpha-slider.vue'
 import HueSlider from './components/hue-slider.vue'
@@ -124,7 +124,7 @@ import { OPTIONS_KEY } from './useOption'
 
 import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { IUseOptions } from './useOption'
 
 export default defineComponent({

packages/components/config-provider/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import ConfigProvider from './src/config-provider'
 

packages/components/config-provider/src/config-provider.ts

@@ -1,5 +1,5 @@
 import { defineComponent, renderSlot, watch } from 'vue'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import { provideGlobalConfig } from '@element-plus/hooks'
 import type { Language } from '@element-plus/locale'
 import type { ButtonConfigContext } from '@element-plus/components/button'

packages/components/container/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Container from './src/container.vue'
 import Aside from './src/aside.vue'

packages/components/date-picker/index.ts

@@ -1,7 +1,7 @@
 import DatePicker from './src/date-picker'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 const _DatePicker = DatePicker as SFCWithInstall<typeof DatePicker>
 

packages/components/date-picker/src/date-picker-com/basic-cell-render.ts

@@ -1,5 +1,5 @@
 import { h, defineComponent, inject } from 'vue'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import { ROOT_PICKER_INJECTION_KEY } from '../date-picker.type'
 import type { DateCell } from '../date-picker.type'
 

packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -175,7 +175,7 @@ import {
 } from '@element-plus/components/time-picker'
 import { ElIcon } from '@element-plus/components/icon'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { isValidDatePickType } from '@element-plus/utils/validators'
+import { isValidDatePickType } from '@element-plus/utils-v2'
 import {
   DArrowLeft,
   ArrowLeft,

packages/components/date-picker/src/date-picker-com/panel-date-range.vue

@@ -245,7 +245,7 @@ import {
   TimePickPanel,
 } from '@element-plus/components/time-picker'
 import ElIcon from '@element-plus/components/icon'
-import { isValidDatePickType } from '@element-plus/utils/validators'
+import { isValidDatePickType } from '@element-plus/utils-v2'
 import {
   DArrowLeft,
   ArrowLeft,

packages/components/descriptions/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Descriptions from './src/index.vue'
 import DescriptionsItem from './src/description-item'

packages/components/descriptions/src/descriptions-cell.ts

@@ -1,6 +1,5 @@
 import { defineComponent, h, inject } from 'vue'
-import { addUnit } from '@element-plus/utils/util'
-import { getNormalizedProps } from '@element-plus/utils/vnode'
+import { addUnit, getNormalizedProps } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { elDescriptionsKey } from './token'
 

packages/components/descriptions/src/descriptions.type.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export interface IDescriptionsInject {
   border: boolean

packages/components/descriptions/src/index.vue

@@ -26,13 +26,13 @@
 
 <script lang="ts">
 import { computed, defineComponent, provide } from 'vue'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { isValidComponentSize } from '@element-plus/utils-v2'
 import { useSize, useNamespace } from '@element-plus/hooks'
 import DescriptionsRow from './descriptions-row.vue'
 import { elDescriptionsKey } from './token'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElDescriptions',

packages/components/dialog/__tests__/dialog.spec.ts

@@ -7,7 +7,7 @@ import Dialog from '../'
 
 const AXIOM = 'Rem is the best girl'
 
-const _mount = ({ slots, ...rest }: Indexable<any>) => {
+const _mount = ({ slots, ...rest }: Record<string, any>) => {
   return mount(Dialog, {
     slots: {
       default: AXIOM,

packages/components/dialog/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Dialog from './src/dialog.vue'
 
 export const ElDialog = withInstall(Dialog)

packages/components/dialog/src/dialog.ts

@@ -1,7 +1,10 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-
-import type { ExtractPropTypes, Component } from 'vue'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import type { ExtractPropTypes } from 'vue'
 
 export const dialogProps = buildProps({
   appendToBody: {
@@ -24,7 +27,7 @@ export const dialogProps = buildProps({
     default: '',
   },
   closeIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   closeOnClickModal: {

packages/components/dialog/src/dialog.vue

@@ -73,7 +73,7 @@ import { computed, defineComponent, ref } from 'vue'
 import { TrapFocus } from '@element-plus/directives'
 import { ElOverlay } from '@element-plus/components/overlay'
 import { ElIcon } from '@element-plus/components/icon'
-import { CloseComponents } from '@element-plus/utils/icon'
+import { CloseComponents } from '@element-plus/utils-v2'
 import { useNamespace, useDraggable, useSameTarget } from '@element-plus/hooks'
 import { dialogProps, dialogEmits } from './dialog'
 import { useDialog } from './use-dialog'

packages/components/dialog/src/use-dialog.ts

@@ -7,8 +7,8 @@ import {
   useModal,
   useZIndex,
 } from '@element-plus/hooks'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isNumber } from '@element-plus/utils/util'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import { isNumber } from '@element-plus/utils-v2'
 
 import type { CSSProperties, Ref, SetupContext } from 'vue'
 import type { DialogEmits, DialogProps } from './dialog'

packages/components/divider/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Divider from './src/divider.vue'
 

packages/components/divider/src/divider.ts

@@ -1,4 +1,4 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Divider from './divider.vue'
 

packages/components/drawer/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import Drawer from './src/drawer.vue'
 
 export const ElDrawer = withInstall(Drawer)

packages/components/drawer/src/drawer.ts

@@ -1,4 +1,4 @@
-import { buildProps } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils-v2'
 import { dialogProps, dialogEmits } from '@element-plus/components/dialog'
 import type { ExtractPropTypes } from 'vue'
 

packages/components/dropdown/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 
 import Dropdown from './src/dropdown.vue'
 import DropdownItem from './src/dropdown-item.vue'

packages/components/dropdown/src/dropdown.ts

@@ -1,5 +1,9 @@
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { buildProps, definePropType } from '@element-plus/utils/props'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+} from '@element-plus/utils-v2'
 import { createCollectionWithScope } from '@element-plus/components/collection'
 import {
   useTooltipTriggerProps,
@@ -9,7 +13,7 @@ import type { Options } from '@popperjs/core'
 
 import type { ButtonType } from '@element-plus/components/button'
 import type { Placement } from '@element-plus/components/popper'
-import type { ComponentInternalInstance, Component, ComputedRef } from 'vue'
+import type { ComponentInternalInstance, ComputedRef } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
 
 export interface IElDropdownInstance {
@@ -87,7 +91,7 @@ export const dropdownItemProps = buildProps({
   divided: Boolean,
   textValue: String,
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
   },
 } as const)
 

packages/components/dropdown/src/dropdown.vue

@@ -89,7 +89,7 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElIcon from '@element-plus/components/icon'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import ElRovingFocusGroup from '@element-plus/components/roving-focus-group'
-import { addUnit } from '@element-plus/utils/util'
+import { addUnit } from '@element-plus/utils-v2'
 import { ArrowDown } from '@element-plus/icons-vue'
 import { useSize } from '@element-plus/hooks'
 import { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'

packages/components/dropdown/src/useDropdown.ts

@@ -1,5 +1,5 @@
 import { inject, computed, ref } from 'vue'
-import { generateId } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils-v2'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { on, addClass } from '@element-plus/utils/dom'
 

packages/components/empty/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Empty from './src/empty.vue'
 

packages/components/form/index.ts

@@ -1,4 +1,4 @@
-import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
+import { withInstall, withNoopInstall } from '@element-plus/utils-v2'
 import Form from './src/form.vue'
 import FormItem from './src/form-item.vue'
 

packages/components/form/src/form-item.vue

@@ -53,14 +53,14 @@ import {
 } from 'vue'
 import { NOOP } from '@vue/shared'
 import AsyncValidator from 'async-validator'
-import { addUnit, getPropByPath } from '@element-plus/utils/util'
-import { isValidComponentSize } from '@element-plus/utils/validators'
+import { addUnit, isValidComponentSize } from '@element-plus/utils-v2'
+import { getPropByPath } from '@element-plus/utils/util'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
 import { useSize } from '@element-plus/hooks'
 import LabelWrap from './label-wrap'
 
 import type { PropType, CSSProperties } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { ElFormContext, ValidateFieldCallback } from '@element-plus/tokens'
 import type { FormItemRule } from './form.type'
 

packages/components/form/src/form.vue

@@ -15,12 +15,12 @@ import {
   watch,
 } from 'vue'
 import { elFormKey } from '@element-plus/tokens'
-import { debugWarn } from '@element-plus/utils/error'
+import { debugWarn } from '@element-plus/utils-v2'
 import { useSize } from '@element-plus/hooks'
 import type { ValidateFieldsError } from 'async-validator'
 
 import type { PropType } from 'vue'
-import type { ComponentSize } from '@element-plus/utils/types'
+import type { ComponentSize } from '@element-plus/constants'
 import type { FormRulesMap } from './form.type'
 import type {
   ElFormItemContext as FormItemCtx,

packages/components/icon/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Icon from './src/icon.vue'
 

packages/components/icon/src/icon.ts

@@ -1,4 +1,4 @@
-import { definePropType, buildProps } from '@element-plus/utils/props'
+import { definePropType, buildProps } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 import type Icon from './icon.vue'
 

packages/components/icon/src/icon.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import { addUnit, isUndefined } from '@element-plus/utils/util'
+import { isUndefined, addUnit } from '@element-plus/utils-v2'
 import { useNamespace } from '@element-plus/hooks'
 import { iconProps } from './icon'
 

packages/components/image-viewer/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import ImageViewer from './src/image-viewer.vue'
 

packages/components/image-viewer/src/image-viewer.ts

@@ -1,4 +1,4 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
 import type { ExtractPropTypes } from 'vue'
 
 export const imageViewerProps = buildProps({

packages/components/image-viewer/src/image-viewer.vue

@@ -93,7 +93,8 @@ import { useEventListener } from '@vueuse/core'
 import ElIcon from '@element-plus/components/icon'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { rafThrottle, isFirefox } from '@element-plus/utils/util'
+import { isFirefox } from '@element-plus/utils-v2'
+import { rafThrottle } from '@element-plus/utils/util'
 import {
   Close,
   ArrowLeft,

packages/components/image/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Image from './src/image.vue'
 

packages/components/image/src/image.ts

@@ -1,5 +1,9 @@
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
-import { isNumber } from '@element-plus/utils/util'
+import {
+  buildProps,
+  definePropType,
+  mutable,
+  isNumber,
+} from '@element-plus/utils-v2'
 
 import type { ExtractPropTypes } from 'vue'
 

packages/components/infinite-scroll/index.ts

@@ -1,7 +1,7 @@
 import InfiniteScroll from './src/index'
 
 import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import type { SFCWithInstall } from '@element-plus/utils-v2'
 
 const _InfiniteScroll = InfiniteScroll as SFCWithInstall<typeof InfiniteScroll>
 

packages/components/infinite-scroll/src/index.ts

@@ -5,7 +5,7 @@ import {
   getScrollContainer,
   getOffsetTopDistance,
 } from '@element-plus/utils/dom'
-import { throwError } from '@element-plus/utils/error'
+import { throwError } from '@element-plus/utils-v2'
 
 import type { ObjectDirective, ComponentPublicInstance } from 'vue'
 

packages/components/input-number/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 import InputNumber from './src/input-number.vue'
 
 export const ElInputNumber = withInstall(InputNumber)

packages/components/input-number/src/input-number.ts

@@ -1,5 +1,5 @@
-import { buildProps, componentSize } from '@element-plus/utils/props'
-import { isNumber } from '@element-plus/utils/util'
+import { buildProps, isNumber } from '@element-plus/utils-v2'
+import { componentSizes } from '@element-plus/constants'
 
 export const inputNumberProps = buildProps({
   step: {
@@ -27,7 +27,7 @@ export const inputNumberProps = buildProps({
   },
   size: {
     type: String,
-    values: componentSize,
+    values: componentSizes,
   },
   controls: {
     type: Boolean,

packages/components/input-number/src/input-number.vue

@@ -75,8 +75,7 @@ import {
   useNamespace,
 } from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
-import { isNumber } from '@element-plus/utils/util'
-import { debugWarn } from '@element-plus/utils/error'
+import { isNumber, debugWarn } from '@element-plus/utils-v2'
 import { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'
 import { inputNumberProps, inputNumberEmits } from './input-number'
 

packages/components/input/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Input from './src/input.vue'
 

packages/components/input/src/calc-textarea-height.ts

@@ -1,4 +1,4 @@
-import { isNumber } from '@element-plus/utils/util'
+import { isNumber } from '@element-plus/utils-v2'
 
 let hiddenTextarea: HTMLTextAreaElement | undefined = undefined
 

packages/components/input/src/input.ts

@@ -1,9 +1,13 @@
 import { isString } from '@vue/shared'
-import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+  mutable,
+} from '@element-plus/utils-v2'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { useSizeProp } from '@element-plus/hooks'
-import type { StyleValue } from '@element-plus/utils/types'
-import type { ExtractPropTypes, Component } from 'vue'
+import type { StyleValue, ExtractPropTypes } from 'vue'
 
 type AutoSize = { minRows?: number; maxRows?: number } | boolean
 
@@ -54,11 +58,11 @@ export const inputProps = buildProps({
     default: false,
   },
   suffixIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   prefixIcon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
   label: {

packages/components/input/src/input.vue

@@ -148,7 +148,11 @@ import {
 import { isClient } from '@vueuse/core'
 import { ElIcon } from '@element-plus/components/icon'
 import { CircleClose, View as IconView } from '@element-plus/icons-vue'
-import { ValidateComponentsMap } from '@element-plus/utils/icon'
+import {
+  ValidateComponentsMap,
+  isObject,
+  isKorean,
+} from '@element-plus/utils-v2'
 import {
   useAttrs,
   useDisabled,
@@ -156,13 +160,11 @@ import {
   useSize,
   useNamespace,
 } from '@element-plus/hooks'
-import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { isObject } from '@element-plus/utils/util'
-import { isKorean } from '@element-plus/utils/isDef'
+import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { calcTextareaHeight } from './calc-textarea-height'
 import { inputProps, inputEmits } from './input'
 
-import type { StyleValue } from '@element-plus/utils/types'
+import type { StyleValue } from 'vue'
 
 type TargetElement = HTMLInputElement | HTMLTextAreaElement
 

packages/components/link/index.ts

@@ -1,4 +1,4 @@
-import { withInstall } from '@element-plus/utils/with-install'
+import { withInstall } from '@element-plus/utils-v2'
 
 import Link from './src/link.vue'
 

packages/components/link/src/link.ts

@@ -1,5 +1,5 @@
-import { buildProps, definePropType } from '@element-plus/utils/props'
-import type { Component, ExtractPropTypes } from 'vue'
+import { buildProps, iconPropType } from '@element-plus/utils-v2'
+import type { ExtractPropTypes } from 'vue'
 import type Link from './link.vue'
 
 export const linkProps = buildProps({
@@ -15,7 +15,7 @@ export const linkProps = buildProps({
   disabled: { type: Boolean, default: false },
   href: { type: String, default: '' },
   icon: {
-    type: definePropType<string | Component>([String, Object]),
+    type: iconPropType,
     default: '',
   },
 } as const)