refactor: extract isClient and isNumber isBoolean (#12504)

* refactor: extract isClient and isNumber isBoolean

* test: update test

* refactor: extract isClient to browser

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

@@ -27,11 +27,11 @@ import {
   watch,
 } from 'vue'
 import { cloneDeep, flattenDeep, isEqual } from 'lodash-unified'
-import { isClient } from '@vueuse/core'
 import {
   castArray,
   focusNode,
   getSibling,
+  isClient,
   isEmpty,
   scrollIntoView,
   unique,

packages/components/cascader/src/cascader.vue

@@ -189,7 +189,7 @@
 import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
 import { isPromise } from '@vue/shared'
 import { cloneDeep, debounce } from 'lodash-unified'
-import { isClient, useCssVar, useResizeObserver } from '@vueuse/core'
+import { useCssVar, useResizeObserver } from '@vueuse/core'
 import ElCascaderPanel from '@element-plus/components/cascader-panel'
 import ElInput from '@element-plus/components/input'
 import ElTooltip from '@element-plus/components/tooltip'
@@ -199,7 +199,13 @@ import ElIcon from '@element-plus/components/icon'
 import { useFormItem, useFormSize } from '@element-plus/components/form'
 import { ClickOutside as vClickoutside } from '@element-plus/directives'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { debugWarn, focusNode, getSibling, isKorean } from '@element-plus/utils'
+import {
+  debugWarn,
+  focusNode,
+  getSibling,
+  isClient,
+  isKorean,
+} from '@element-plus/utils'
 import {
   CHANGE_EVENT,
   EVENT_CODE,

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

@@ -1,4 +1,4 @@
-import { isClient } from '@vueuse/core'
+import { isClient } from '@element-plus/utils'
 
 let isDragging = false
 

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

@@ -6,7 +6,7 @@ import {
   ref,
   watch,
 } from 'vue'
-import { isClient, useTimeoutFn } from '@vueuse/core'
+import { useTimeoutFn } from '@vueuse/core'
 
 import {
   defaultNamespace,
@@ -15,7 +15,7 @@ import {
   useZIndex,
 } from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { addUnit } from '@element-plus/utils'
+import { addUnit, isClient } from '@element-plus/utils'
 import { useGlobalConfig } from '@element-plus/components/config-provider'
 
 import type { CSSProperties, Ref, SetupContext } from 'vue'

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

@@ -91,11 +91,11 @@ import {
   shallowRef,
   watch,
 } from 'vue'
-import { isNumber, useEventListener } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { throttle } from 'lodash-unified'
 import { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/constants'
-import { keysOf } from '@element-plus/utils'
+import { isNumber, keysOf } from '@element-plus/utils'
 import ElIcon from '@element-plus/components/icon'
 import {
   ArrowLeft,

packages/components/image/src/image.vue

@@ -56,11 +56,12 @@ import {
   useAttrs as useRawAttrs,
   watch,
 } from 'vue'
-import { isClient, useEventListener, useThrottleFn } from '@vueuse/core'
+import { useEventListener, useThrottleFn } from '@vueuse/core'
 import { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'
 import ImageViewer from '@element-plus/components/image-viewer'
 import {
   getScrollContainer,
+  isClient,
   isElement,
   isInContainer,
   isString,

packages/components/input/src/input.vue

@@ -150,7 +150,7 @@ import {
   useSlots,
   watch,
 } from 'vue'
-import { isClient, useResizeObserver } from '@vueuse/core'
+import { useResizeObserver } from '@vueuse/core'
 import { isNil } from 'lodash-unified'
 import { ElIcon } from '@element-plus/components/icon'
 import {
@@ -168,6 +168,7 @@ import {
   NOOP,
   ValidateComponentsMap,
   debugWarn,
+  isClient,
   isKorean,
   isObject,
 } from '@element-plus/utils'

packages/components/loading/src/service.ts

@@ -1,8 +1,12 @@
 // @ts-nocheck
 import { nextTick } from 'vue'
-import { isString } from '@vue/shared'
-import { isClient } from '@vueuse/core'
-import { addClass, getStyle, removeClass } from '@element-plus/utils'
+import {
+  addClass,
+  getStyle,
+  isClient,
+  isString,
+  removeClass,
+} from '@element-plus/utils'
 import { createLoadingComponent } from './loading'
 
 import type { UseNamespaceReturn, UseZIndexReturn } from '@element-plus/hooks'

packages/components/message-box/src/messageBox.ts

@@ -1,8 +1,8 @@
 import { createVNode, render } from 'vue'
-import { isClient } from '@vueuse/core'
 import {
   debugWarn,
   hasOwn,
+  isClient,
   isElement,
   isFunction,
   isObject,

packages/components/message/src/message.ts

@@ -1,8 +1,8 @@
-import { isClient } from '@vueuse/core'
 import {
   buildProps,
   definePropType,
   iconPropType,
+  isClient,
   mutable,
 } from '@element-plus/utils'
 import type { AppContext, ExtractPropTypes, VNode } from 'vue'

packages/components/message/src/method.ts

@@ -1,7 +1,7 @@
 import { createVNode, render } from 'vue'
-import { isClient } from '@vueuse/core'
 import {
   debugWarn,
+  isClient,
   isElement,
   isFunction,
   isNumber,

packages/components/notification/src/notify.ts

@@ -1,6 +1,11 @@
 import { createVNode, render } from 'vue'
-import { isClient } from '@vueuse/core'
-import { debugWarn, isElement, isString, isVNode } from '@element-plus/utils'
+import {
+  debugWarn,
+  isClient,
+  isElement,
+  isString,
+  isVNode,
+} from '@element-plus/utils'
 import NotificationConstructor from './notification.vue'
 import { notificationTypes } from './notification'
 

packages/components/popper/src/utils.ts

@@ -1,4 +1,5 @@
-import { isClient, unrefElement } from '@vueuse/core'
+import { unrefElement } from '@vueuse/core'
+import { isClient } from '@element-plus/utils'
 
 import type { ComponentPublicInstance } from 'vue'
 import type { MaybeRef } from '@vueuse/core'

packages/components/scrollbar/src/thumb.vue

@@ -18,8 +18,8 @@
 
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'
-import { isClient, useEventListener } from '@vueuse/core'
-import { throwError } from '@element-plus/utils'
+import { useEventListener } from '@vueuse/core'
+import { isClient, throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { scrollbarContextKey } from './constants'
 import { BAR_MAP, renderThumbStyle } from './util'

packages/components/select/src/select.vue

@@ -302,7 +302,7 @@ import {
   toRefs,
   unref,
 } from 'vue'
-import { isIOS, useResizeObserver } from '@vueuse/core'
+import { useResizeObserver } from '@vueuse/core'
 import { placements } from '@popperjs/core'
 import { ClickOutside } from '@element-plus/directives'
 import { useFocus, useLocale, useNamespace } from '@element-plus/hooks'
@@ -314,7 +314,7 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTag, { tagProps } from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { iconPropType, isValidComponentSize } from '@element-plus/utils'
+import { iconPropType, isIOS, isValidComponentSize } from '@element-plus/utils'
 import { ArrowDown, CircleClose } from '@element-plus/icons-vue'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'

packages/components/select/src/useSelect.ts

@@ -11,7 +11,6 @@ import {
 } from 'vue'
 import { isObject, toRawType } from '@vue/shared'
 import { get, isEqual, debounce as lodashDebounce } from 'lodash-unified'
-import { isClient } from '@vueuse/core'
 import {
   CHANGE_EVENT,
   EVENT_CODE,
@@ -20,6 +19,7 @@ import {
 import {
   debugWarn,
   getComponentSize,
+  isClient,
   isFunction,
   isKorean,
   isNumber,

packages/components/table/src/table-body/index.ts

@@ -7,8 +7,7 @@ import {
   onUnmounted,
   watch,
 } from 'vue'
-import { isClient } from '@vueuse/core'
-import { addClass, removeClass } from '@element-plus/utils'
+import { addClass, isClient, removeClass } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import useLayoutObserver from '../layout-observer'
 import { removePopper } from '../util'

packages/components/table/src/table-header/event-helper.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import { getCurrentInstance, inject, ref } from 'vue'
-import { isClient } from '@vueuse/core'
-import { addClass, hasClass, removeClass } from '@element-plus/utils'
+import { addClass, hasClass, isClient, removeClass } from '@element-plus/utils'
 import { TABLE_INJECTION_KEY } from '../tokens'
 import type { TableHeaderProps } from '.'
 import type { TableColumnCtx } from '../table-column/defaults'

packages/components/table/src/table-layout.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import { isRef, nextTick, ref } from 'vue'
-import { isClient } from '@vueuse/core'
-import { hasOwn } from '@element-plus/utils'
+import { hasOwn, isClient } from '@element-plus/utils'
 import { parseHeight } from './util'
 import type { Ref } from 'vue'
 

packages/components/virtual-list/src/builders/build-grid.ts

@@ -10,10 +10,10 @@ import {
   resolveDynamicComponent,
   unref,
 } from 'vue'
-import { isClient } from '@vueuse/core'
 import {
   getScrollBarWidth,
   hasOwn,
+  isClient,
   isNumber,
   isString,
 } from '@element-plus/utils'

packages/components/virtual-list/src/builders/build-list.ts

@@ -11,8 +11,7 @@ import {
   resolveDynamicComponent,
   unref,
 } from 'vue'
-import { isClient } from '@vueuse/core'
-import { hasOwn, isNumber, isString } from '@element-plus/utils'
+import { hasOwn, isClient, isNumber, isString } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { useCache } from '../hooks/use-cache'
 import useWheel from '../hooks/use-wheel'

packages/directives/click-outside/index.ts

@@ -1,5 +1,4 @@
-import { isClient } from '@vueuse/core'
-import { isElement } from '@element-plus/utils'
+import { isClient, isElement } from '@element-plus/utils'
 
 import type {
   ComponentPublicInstance,

packages/hooks/use-escape-keydown/index.ts

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted } from 'vue'
-import { isClient } from '@vueuse/core'
+import { isClient } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 
 let registeredEscapeHandlers: ((e: KeyboardEvent) => void)[] = []

packages/hooks/use-floating/index.ts

@@ -1,8 +1,8 @@
 import { isRef, onMounted, ref, unref, watchEffect } from 'vue'
-import { isClient, unrefElement } from '@vueuse/core'
+import { unrefElement } from '@vueuse/core'
 import { isNil } from 'lodash-unified'
 import { arrow as arrowCore, computePosition } from '@floating-ui/dom'
-import { buildProps, keysOf } from '@element-plus/utils'
+import { buildProps, isClient, keysOf } from '@element-plus/utils'
 
 import type { Ref, ToRefs } from 'vue'
 import type {

packages/hooks/use-id/index.ts

@@ -1,6 +1,5 @@
 import { computed, getCurrentInstance, inject, unref } from 'vue'
-import { isClient } from '@vueuse/core'
-import { debugWarn } from '@element-plus/utils'
+import { debugWarn, isClient } from '@element-plus/utils'
 import { useGetDerivedNamespace } from '../use-namespace'
 
 import type { InjectionKey, Ref } from 'vue'

packages/hooks/use-lockscreen/index.ts

@@ -1,11 +1,11 @@
 import { isRef, onScopeDispose, watch } from 'vue'
 import { computed } from '@vue/reactivity'
-import { isClient } from '@vueuse/core'
 import {
   addClass,
   getScrollBarWidth,
   getStyle,
   hasClass,
+  isClient,
   removeClass,
   throwError,
 } from '@element-plus/utils'

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

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

packages/hooks/use-popper-container/index.ts

@@ -1,5 +1,5 @@
 import { computed, onBeforeMount } from 'vue'
-import { isClient } from '@vueuse/core'
+import { isClient } from '@element-plus/utils'
 import { useGetDerivedNamespace } from '../use-namespace'
 import { useIdInjection } from '../use-id'
 

packages/hooks/use-teleport/index.ts

@@ -1,7 +1,10 @@
 import { Teleport, h, onUnmounted, ref } from 'vue'
 import { NOOP } from '@vue/shared'
-import { isClient } from '@vueuse/core'
-import { createGlobalNode, removeGlobalNode } from '@element-plus/utils'
+import {
+  createGlobalNode,
+  isClient,
+  removeGlobalNode,
+} from '@element-plus/utils'
 
 import type { Ref, VNode } from 'vue'
 

packages/utils/__tests__/types.test.ts

@@ -1,6 +1,5 @@
 import * as vue from 'vue'
 import * as vueShared from '@vue/shared'
-import * as vueuse from '@vueuse/core'
 import { describe, expect, it } from 'vitest'
 import {
   isArray,
@@ -30,15 +29,19 @@ describe('types', () => {
     expect(isSymbol).toBe(vueShared.isSymbol)
   })
 
-  it('re-export from vueuse', () => {
-    expect(isBoolean).toBe(vueuse.isBoolean)
-    expect(isNumber).toBe(vueuse.isNumber)
-  })
-
   it('re-export from vue', () => {
     expect(isVNode).toBe(vue.isVNode)
   })
 
+  it('isBoolean and isNumber should work', () => {
+    expect(isBoolean(true)).toBe(true)
+    expect(isBoolean(false)).toBe(true)
+    expect(isBoolean('true')).toBe(false)
+    expect(isBoolean('false')).toBe(false)
+    expect(isNumber(0)).toBe(true)
+    expect(isNumber('0')).toBe(false)
+  })
+
   it('isUndefined should work', () => {
     expect(isUndefined(undefined)).toBe(true)
     expect(isUndefined(null)).toBe(false)

packages/utils/browser.ts

@@ -1,4 +1,6 @@
-import { isClient } from '@vueuse/core'
+import { isClient, isIOS } from '@vueuse/core'
 
 export const isFirefox = (): boolean =>
   isClient && /firefox/i.test(window.navigator.userAgent)
+
+export { isClient, isIOS }

packages/utils/dom/position.ts

@@ -1,4 +1,4 @@
-import { isClient } from '@vueuse/core'
+import { isClient } from '../browser'
 
 export const isInContainer = (
   el?: Element,

packages/utils/dom/scroll.ts

@@ -1,4 +1,4 @@
-import { isClient } from '@vueuse/core'
+import { isClient } from '../browser'
 import { getStyle } from './style'
 
 export const isScroll = (el: HTMLElement, isVertical?: boolean): boolean => {

packages/utils/dom/style.ts

@@ -1,5 +1,5 @@
-import { isClient } from '@vueuse/core'
 import { isNumber, isObject, isString, isStringNumber } from '../types'
+import { isClient } from '../browser'
 import { camelize } from '../strings'
 import { entriesOf, keysOf } from '../objects'
 import { debugWarn } from '../error'

packages/utils/raf.ts

@@ -1,4 +1,4 @@
-import { isClient } from '@vueuse/core'
+import { isClient } from './browser'
 
 export const rAF = (fn: () => void) =>
   isClient

packages/utils/types.ts

@@ -10,10 +10,11 @@ export {
   isPromise,
   isSymbol,
 } from '@vue/shared'
-export { isBoolean, isNumber } from '@vueuse/core'
 export { isVNode } from 'vue'
 
 export const isUndefined = (val: any): val is undefined => val === undefined
+export const isBoolean = (val: any): val is boolean => typeof val === 'boolean'
+export const isNumber = (val: any): val is number => typeof val === 'number'
 
 export const isEmpty = (val: unknown) =>
   (!val && val !== 0) ||

packages/utils/vue/global-node.ts

@@ -1,4 +1,4 @@
-import { isClient } from '@vueuse/core'
+import { isClient } from '../browser'
 
 const globalNodes: HTMLElement[] = []
 let target: HTMLElement = !isClient ? (undefined as any) : document.body