refactor: import shared utilities from @element-plus/utils (#18048)

chore: import shared utilities from `@element-plus/utils`

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -4,8 +4,8 @@
 
 import { defineComponent, nextTick, reactive } from 'vue'
 import { mount } from '@vue/test-utils'
-import { NOOP } from '@vue/shared'
 import { beforeEach, describe, expect, it, test, vi } from 'vitest'
+import { NOOP } from '@element-plus/utils'
 import { usePopperContainerId } from '@element-plus/hooks'
 import { ElFormItem as FormItem } from '@element-plus/components/form'
 import Autocomplete from '../src/autocomplete.vue'

packages/components/autocomplete/src/autocomplete.ts

@@ -1,5 +1,5 @@
-import { NOOP } from '@vue/shared'
 import {
+  NOOP,
   buildProps,
   definePropType,
   isObject,

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

@@ -1,6 +1,5 @@
 import { computed } from 'vue'
-import { NOOP } from '@vue/shared'
-import { buildProps, definePropType } from '@element-plus/utils'
+import { NOOP, buildProps, definePropType } from '@element-plus/utils'
 import type {
   CascaderConfig,
   CascaderOption,

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

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

packages/components/cascader/src/cascader.vue

@@ -191,9 +191,15 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
-import { isPromise } from '@vue/shared'
 import { cloneDeep, debounce } from 'lodash-unified'
 import { useCssVar, useResizeObserver } from '@vueuse/core'
+import {
+  debugWarn,
+  focusNode,
+  getSibling,
+  isClient,
+  isPromise,
+} from '@element-plus/utils'
 import ElCascaderPanel from '@element-plus/components/cascader-panel'
 import ElInput from '@element-plus/components/input'
 import ElTooltip from '@element-plus/components/tooltip'
@@ -208,7 +214,6 @@ import {
   useLocale,
   useNamespace,
 } from '@element-plus/hooks'
-import { debugWarn, focusNode, getSibling, isClient } from '@element-plus/utils'
 import {
   CHANGE_EVENT,
   EVENT_CODE,

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

@@ -1,10 +1,10 @@
 // @ts-nocheck
 import { nextTick } from 'vue'
-import { isFunction } from '@vue/shared'
 import { throttle } from 'lodash-unified'
 import {
   getOffsetTopDistance,
   getScrollContainer,
+  isFunction,
   throwError,
 } from '@element-plus/utils'
 

packages/components/input/src/input.ts

@@ -1,8 +1,8 @@
-import { isString } from '@vue/shared'
 import {
   buildProps,
   definePropType,
   iconPropType,
+  isString,
   mutable,
 } from '@element-plus/utils'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'

packages/components/loading/src/directive.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { isRef, ref } from 'vue'
-import { hyphenate, isObject, isString } from '@vue/shared'
+import { hyphenate, isObject, isString } from '@element-plus/utils'
 import { Loading } from './service'
 import type { Directive, DirectiveBinding, UnwrapRef } from 'vue'
 import type { LoadingOptions } from './types'

packages/components/popper/src/content.vue

@@ -34,11 +34,10 @@ import {
   unref,
   watch,
 } from 'vue'
-import { NOOP } from '@vue/shared'
 import { isNil } from 'lodash-unified'
+import { NOOP, isElement } from '@element-plus/utils'
 import ElFocusTrap from '@element-plus/components/focus-trap'
 import { formItemContextKey } from '@element-plus/components/form'
-import { isElement } from '@element-plus/utils'
 import { POPPER_CONTENT_INJECTION_KEY } from './constants'
 import { popperContentEmits, popperContentProps } from './content'
 import {

packages/components/select-v2/__tests__/select.test.ts

@@ -1,8 +1,7 @@
 // @ts-nocheck
 import { nextTick, ref } from 'vue'
-import { NOOP } from '@vue/shared'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { hasClass } from '@element-plus/utils'
+import { NOOP, hasClass } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { makeMountFunc } from '@element-plus/test-utils/make-mount'
 import { rAF } from '@element-plus/test-utils/tick'

packages/components/select-v2/src/useSelect.ts

@@ -8,7 +8,6 @@ import {
   watch,
   watchEffect,
 } from 'vue'
-import { isArray, isFunction, isObject } from '@vue/shared'
 import {
   findLastIndex,
   get,
@@ -16,6 +15,14 @@ import {
   debounce as lodashDebounce,
 } from 'lodash-unified'
 import { useResizeObserver } from '@vueuse/core'
+import {
+  ValidateComponentsMap,
+  debugWarn,
+  escapeStringRegexp,
+  isArray,
+  isFunction,
+  isObject,
+} from '@element-plus/utils'
 import {
   useComposition,
   useEmptyValues,
@@ -28,11 +35,6 @@ import {
   EVENT_CODE,
   UPDATE_MODEL_EVENT,
 } from '@element-plus/constants'
-import {
-  ValidateComponentsMap,
-  debugWarn,
-  escapeStringRegexp,
-} from '@element-plus/utils'
 import {
   useFormItem,
   useFormItemInputId,

packages/components/select/src/options.ts

@@ -1,7 +1,6 @@
 import { defineComponent, inject } from 'vue'
-import { isArray } from '@vue/shared'
 import { isEqual } from 'lodash-unified'
-import { isFunction, isString } from '@element-plus/utils'
+import { isArray, isFunction, isString } from '@element-plus/utils'
 import { selectKey } from './token'
 import type { Component, VNode, VNodeNormalizedChildren } from 'vue'
 

packages/components/select/src/useSelect.ts

@@ -9,7 +9,6 @@ import {
   watch,
   watchEffect,
 } from 'vue'
-import { isArray, isObject, toRawType } from '@vue/shared'
 import {
   findLastIndex,
   get,
@@ -17,22 +16,25 @@ import {
   debounce as lodashDebounce,
 } from 'lodash-unified'
 import { useResizeObserver } from '@vueuse/core'
-import {
-  CHANGE_EVENT,
-  EVENT_CODE,
-  UPDATE_MODEL_EVENT,
-} from '@element-plus/constants'
 import {
   ValidateComponentsMap,
   debugWarn,
   ensureArray,
+  isArray,
   isClient,
   isFunction,
   isIOS,
   isNumber,
+  isObject,
   isUndefined,
   scrollIntoView,
+  toRawType,
 } from '@element-plus/utils'
+import {
+  CHANGE_EVENT,
+  EVENT_CODE,
+  UPDATE_MODEL_EVENT,
+} from '@element-plus/constants'
 import {
   useComposition,
   useEmptyValues,

packages/components/slot/src/only-child.tsx

@@ -7,13 +7,12 @@ import {
   inject,
   withDirectives,
 } from 'vue'
-import { NOOP, isObject } from '@vue/shared'
+import { NOOP, debugWarn, isObject } from '@element-plus/utils'
 import {
   FORWARD_REF_INJECTION_KEY,
   useForwardRefDirective,
   useNamespace,
 } from '@element-plus/hooks'
-import { debugWarn } from '@element-plus/utils'
 
 import type { Ref, VNode } from 'vue'
 

packages/components/space/src/space.ts

@@ -5,7 +5,6 @@ import {
   isVNode,
   renderSlot,
 } from 'vue'
-import { isString } from '@vue/shared'
 import {
   PatchFlags,
   buildProps,
@@ -13,6 +12,7 @@ import {
   isArray,
   isFragment,
   isNumber,
+  isString,
   isValidElementNode,
 } from '@element-plus/utils'
 import { componentSizes } from '@element-plus/constants'

packages/components/switch/src/switch.vue

@@ -73,8 +73,13 @@
 
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { isPromise } from '@vue/shared'
-import { addUnit, debugWarn, isBoolean, throwError } from '@element-plus/utils'
+import {
+  addUnit,
+  debugWarn,
+  isBoolean,
+  isPromise,
+  throwError,
+} from '@element-plus/utils'
 import ElIcon from '@element-plus/components/icon'
 import {
   useFormDisabled,

packages/components/tree-v2/__tests__/tree.test.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { nextTick } from 'vue'
-import { NOOP } from '@vue/shared'
 import { describe, expect, test, vi } from 'vitest'
+import { NOOP } from '@element-plus/utils'
 import { makeMountFunc } from '@element-plus/test-utils/make-mount'
 import Tree from '../src/tree.vue'
 import type {

packages/components/tree-v2/src/composables/useFilter.ts

@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue'
-import { isFunction } from '@vue/shared'
+import { isFunction } from '@element-plus/utils'
 import type { Ref } from 'vue'
 import type { Tree, TreeKey, TreeNode, TreeProps } from '../types'
 

packages/components/tree/src/tree-node.vue

@@ -92,12 +92,11 @@ import {
   ref,
   watch,
 } from 'vue'
-import { isFunction, isString } from '@vue/shared'
+import { debugWarn, isFunction, isString } from '@element-plus/utils'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElCheckbox from '@element-plus/components/checkbox'
 import { ElIcon } from '@element-plus/components/icon'
 import { CaretRight, Loading } from '@element-plus/icons-vue'
-import { debugWarn } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import NodeContent from './tree-node-content.vue'
 import { getNodeKey as getNodeKeyUtil, handleCurrentChange } from './model/util'

packages/components/upload/src/upload-content.ts

@@ -1,5 +1,4 @@
-import { NOOP } from '@vue/shared'
-import { buildProps, definePropType } from '@element-plus/utils'
+import { NOOP, buildProps, definePropType } from '@element-plus/utils'
 import { uploadBaseProps } from './upload'
 
 import type { ExtractPropTypes } from 'vue'

packages/components/upload/src/upload-content.vue

@@ -34,10 +34,9 @@
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
-import { isPlainObject } from '@vue/shared'
 import { cloneDeep, isEqual } from 'lodash-unified'
+import { entriesOf, isFunction, isPlainObject } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import { entriesOf, isFunction } from '@element-plus/utils'
 import { useFormDisabled } from '@element-plus/components/form'
 import UploadDragger from './upload-dragger.vue'
 import { uploadContentProps } from './upload-content'

packages/components/upload/src/upload-list.ts

@@ -1,5 +1,4 @@
-import { NOOP } from '@vue/shared'
-import { buildProps, definePropType, mutable } from '@element-plus/utils'
+import { NOOP, buildProps, definePropType, mutable } from '@element-plus/utils'
 import { uploadListTypes } from './upload'
 import type { ExtractPropTypes } from 'vue'
 import type { UploadFile, UploadFiles, UploadHooks } from './upload'

packages/components/upload/src/upload.ts

@@ -1,5 +1,4 @@
-import { NOOP } from '@vue/shared'
-import { buildProps, definePropType, mutable } from '@element-plus/utils'
+import { NOOP, buildProps, definePropType, mutable } from '@element-plus/utils'
 import { ajaxUpload } from './ajax'
 import type { Awaitable, Mutable } from '@element-plus/utils'
 

packages/components/virtual-list/src/components/dynamic-size-grid.ts

@@ -1,6 +1,10 @@
 // @ts-nocheck
-import { isFunction } from '@vue/shared'
-import { isNumber, isUndefined, throwError } from '@element-plus/utils'
+import {
+  isFunction,
+  isNumber,
+  isUndefined,
+  throwError,
+} from '@element-plus/utils'
 import createGrid from '../builders/build-grid'
 
 import {

packages/hooks/__tests__/use-form-item.test.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, provide } from 'vue'
-import { NOOP } from '@vue/shared'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
+import { NOOP } from '@element-plus/utils'
 import { ElButton, buttonGroupContextKey } from '@element-plus/components'
 import {
   formContextKey,

packages/hooks/__tests__/use-teleport.test.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, h, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
-import { NOOP } from '@vue/shared'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { NOOP } from '@element-plus/utils'
 import { useTeleport } from '../use-teleport'
 import type { VueWrapper } from '@vue/test-utils'
 
@@ -81,9 +81,11 @@ describe('useTeleport when isClient is false', () => {
 
   beforeEach(() => {
     vi.resetModules()
-    vi.doMock('@element-plus/utils', () => ({
-      isClient: mockIsClient,
-    }))
+    vi.doMock('@element-plus/utils', async () => {
+      const utils = await vi.importActual('@element-plus/utils')
+
+      return { ...utils, isClient: mockIsClient }
+    })
   })
   afterEach(() => {
     vi.doUnmock('@element-plus/utils')

packages/hooks/use-model-toggle/index.ts

@@ -1,10 +1,10 @@
 import { computed, getCurrentInstance, onMounted, watch } from 'vue'
-import { isFunction } from '@vue/shared'
 import {
   buildProp,
   definePropType,
   isBoolean,
   isClient,
+  isFunction,
 } from '@element-plus/utils'
 import type { ExtractPropType } from '@element-plus/utils'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'

packages/hooks/use-same-target/index.ts

@@ -1,4 +1,4 @@
-import { NOOP } from '@vue/shared'
+import { NOOP } from '@element-plus/utils'
 
 export const useSameTarget = (handleClick?: (e: MouseEvent) => void) => {
   if (!handleClick) {

packages/hooks/use-teleport/index.ts

@@ -1,6 +1,6 @@
 import { Teleport, h, onUnmounted, ref } from 'vue'
-import { NOOP } from '@vue/shared'
 import {
+  NOOP,
   createGlobalNode,
   isClient,
   removeGlobalNode,

packages/utils/functions.ts

@@ -1 +1 @@
-export { NOOP } from '@vue/shared'
+export { NOOP, toRawType } from '@vue/shared'

packages/utils/types.ts

@@ -9,6 +9,7 @@ export {
   isDate,
   isPromise,
   isSymbol,
+  isPlainObject,
 } from '@vue/shared'
 export { isVNode } from 'vue'
 

packages/utils/vue/install.ts

@@ -1,4 +1,4 @@
-import { NOOP } from '@vue/shared'
+import { NOOP } from '../functions'
 
 import type { App, Directive } from 'vue'
 import type { SFCInstallWithContext, SFCWithInstall } from './typescript'

packages/utils/vue/vnode.ts

@@ -7,7 +7,8 @@ import {
   isVNode,
   openBlock,
 } from 'vue'
-import { camelize, isArray } from '@vue/shared'
+import { camelize } from '../strings'
+import { isArray } from '../types'
 import { hasOwn } from '../objects'
 import { debugWarn } from '../error'
 import type {