refactor(utils): remove isServer (#4792)

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

@@ -26,9 +26,9 @@ import {
   watch,
 } from 'vue'
 import isEqual from 'lodash/isEqual'
+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 isServer from '@element-plus/utils/isServer'
 import scrollIntoView from '@element-plus/utils/scroll-into-view'
 import {
   arrayFlat,
@@ -266,7 +266,7 @@ export default defineComponent({
     }
 
     const scrollToExpandingNode = () => {
-      if (isServer) return
+      if (!isClient) return
 
       menuList.value.forEach((menu) => {
         const menuElement = menu?.$el

packages/components/cascader/src/index.vue

@@ -158,6 +158,7 @@ import {
 import { isPromise } from '@vue/shared'
 import debounce from 'lodash/debounce'
 
+import { isClient } from '@vueuse/core'
 import ElCascaderPanel, {
   CommonProps,
 } from '@element-plus/components/cascader-panel'
@@ -173,7 +174,6 @@ 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 isServer from '@element-plus/utils/isServer'
 import {
   addResizeListener,
   removeResizeListener,
@@ -491,7 +491,7 @@ export default defineComponent({
       const tagWrapperEl = tagWrapper.value
       const suggestionPanelEl = suggestionPanel.value?.$el
 
-      if (isServer || !inputInner) return
+      if (!isClient || !inputInner) return
 
       if (suggestionPanelEl) {
         const suggestionList = suggestionPanelEl.querySelector(

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

@@ -1,4 +1,4 @@
-import isServer from '@element-plus/utils/isServer'
+import { isClient } from '@vueuse/core'
 import { on, off } from '@element-plus/utils/dom'
 
 let isDragging = false
@@ -10,7 +10,7 @@ export declare interface IOptions {
 }
 
 export default function (element: HTMLElement, options: IOptions) {
-  if (isServer) return
+  if (!isClient) return
 
   const moveFn = function (event: Event) {
     options.drag?.(event)

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

@@ -1,9 +1,8 @@
 import { computed, ref, watch, nextTick, onMounted } from 'vue'
-import { useTimeoutFn } from '@vueuse/core'
+import { useTimeoutFn, isClient } from '@vueuse/core'
 
 import { useLockscreen, useRestoreActive, useModal } from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import isServer from '@element-plus/utils/isServer'
 import PopupManager from '@element-plus/utils/popup-manager'
 import { isNumber } from '@element-plus/utils/util'
 
@@ -101,7 +100,7 @@ export const useDialog = (
   }
 
   function doOpen() {
-    if (isServer) {
+    if (!isClient) {
       return
     }
 

packages/components/image/src/image.vue

@@ -44,10 +44,9 @@
 <script lang="ts">
 import { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'
 import { isString } from '@vue/shared'
-import { useEventListener, useThrottleFn } from '@vueuse/core'
+import { useEventListener, useThrottleFn, isClient } from '@vueuse/core'
 import { useAttrs, useLocale } from '@element-plus/hooks'
 import ImageViewer from '@element-plus/components/image-viewer'
-import isServer from '@element-plus/utils/isServer'
 import { getScrollContainer, isInContainer } from '@element-plus/utils/dom'
 import { imageEmits, imageProps } from './image'
 
@@ -87,7 +86,7 @@ export default defineComponent({
 
     const imageStyle = computed<CSSProperties>(() => {
       const { fit } = props
-      if (!isServer && fit) {
+      if (isClient && fit) {
         return { objectFit: fit }
       }
       return {}
@@ -109,7 +108,7 @@ export default defineComponent({
     })
 
     const loadImage = () => {
-      if (isServer) return
+      if (!isClient) return
 
       // reset status
       loading.value = true
@@ -151,7 +150,7 @@ export default defineComponent({
     const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)
 
     async function addLazyLoadListener() {
-      if (isServer) return
+      if (!isClient) return
 
       await nextTick()
 
@@ -176,7 +175,7 @@ export default defineComponent({
     }
 
     function removeLazyLoadListener() {
-      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return
+      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return
 
       stopScrollListener()
       _scrollContainer.value = undefined

packages/components/input/src/input.vue

@@ -145,6 +145,7 @@ import {
   onMounted,
   onUpdated,
 } from 'vue'
+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'
@@ -156,7 +157,6 @@ import {
 } from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isObject } from '@element-plus/utils/util'
-import isServer from '@element-plus/utils/isServer'
 import { isKorean } from '@element-plus/utils/isDef'
 import { calcTextareaHeight } from './calc-textarea-height'
 import { inputProps, inputEmits } from './input'
@@ -249,7 +249,7 @@ export default defineComponent({
     const resizeTextarea = () => {
       const { type, autosize } = props
 
-      if (isServer || type !== 'textarea') return
+      if (!isClient || type !== 'textarea') return
 
       if (autosize) {
         const minRows = isObject(autosize) ? autosize.minRows : undefined

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

@@ -1,6 +1,6 @@
 import { h, watch, render } from 'vue'
 import { hasOwn } from '@vue/shared'
-import isServer from '@element-plus/utils/isServer'
+import { isClient } from '@vueuse/core'
 import { isVNode, isString } from '@element-plus/utils/util'
 import MessageBoxConstructor from './index.vue'
 
@@ -115,7 +115,7 @@ async function MessageBox(options: ElMessageBoxOptions): Promise<MessageBoxData>
 function MessageBox(
   options: ElMessageBoxOptions | string | VNode
 ): Promise<{ value: string; action: Action } | Action> {
-  if (isServer) return
+  if (!isClient) return
   let callback
   if (isString(options) || isVNode(options)) {
     options = {

packages/components/message/src/message-method.ts

@@ -1,7 +1,7 @@
 import { createVNode, render } from 'vue'
+import { isClient } from '@vueuse/core'
 import { isVNode } from '@element-plus/utils/util'
 import PopupManager from '@element-plus/utils/popup-manager'
-import isServer from '@element-plus/utils/isServer'
 import { debugWarn } from '@element-plus/utils/error'
 import MessageConstructor from './message.vue'
 import { messageTypes } from './message'
@@ -15,7 +15,7 @@ let seed = 1
 // TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.
 
 const message: MessageFn & Partial<Message> = function (options = {}) {
-  if (isServer) return { close: () => undefined }
+  if (!isClient) return { close: () => undefined }
 
   if (
     !isVNode(options) &&

packages/components/notification/src/notify.ts

@@ -1,5 +1,5 @@
 import { createVNode, render } from 'vue'
-import isServer from '@element-plus/utils/isServer'
+import { isClient } from '@vueuse/core'
 import PopupManager from '@element-plus/utils/popup-manager'
 import { isVNode } from '@element-plus/utils/util'
 import { debugWarn } from '@element-plus/utils/error'
@@ -31,7 +31,7 @@ const GAP_SIZE = 16
 let seed = 1
 
 const notify: NotifyFn & Partial<Notify> = function (options = {}) {
-  if (isServer) return { close: () => undefined }
+  if (!isClient) return { close: () => undefined }
 
   if (typeof options === 'string' || isVNode(options)) {
     options = { message: options }

packages/components/select/src/useSelect.ts

@@ -11,10 +11,10 @@ import {
 import { isObject, toRawType } from '@vue/shared'
 import lodashDebounce from 'lodash/debounce'
 import isEqual from 'lodash/isEqual'
+import { isClient } from '@vueuse/core'
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { useLocale, useSize } from '@element-plus/hooks'
-import isServer from '@element-plus/utils/isServer'
 import scrollIntoView from '@element-plus/utils/scroll-into-view'
 import { isKorean } from '@element-plus/utils/isDef'
 import { getValueByPath } from '@element-plus/utils/util'
@@ -273,7 +273,7 @@ export const useSelect = (props, states: States, ctx) => {
     // https://github.com/vuejs/vue-next/issues/2116
     () => states.options.entries(),
     () => {
-      if (isServer) return
+      if (!isClient) return
       popper.value?.update?.()
       if (props.multiple) {
         resetInputHeight()

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

@@ -6,8 +6,8 @@ import {
   onUnmounted,
   onUpdated,
 } from 'vue'
+import { isClient } from '@vueuse/core'
 import { addClass, removeClass } from '@element-plus/utils/dom'
-import isServer from '@element-plus/utils/isServer'
 import { hColgroup } from '../h-helper'
 import useLayoutObserver from '../layout-observer'
 import { removePopper } from '../util'
@@ -29,7 +29,7 @@ export default defineComponent({
     const { onColumnsChange, onScrollableChange } = useLayoutObserver(parent)
 
     watch(props.store.states.hoverRow, (newVal: any, oldVal: any) => {
-      if (!props.store.states.isComplex.value || isServer) return
+      if (!props.store.states.isComplex.value || !isClient) return
       let raf = window.requestAnimationFrame
       if (!raf) {
         raf = (fn) => window.setTimeout(fn, 16)

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

@@ -1,6 +1,6 @@
 import { getCurrentInstance, ref } from 'vue'
+import { isClient } from '@vueuse/core'
 import { hasClass, addClass, removeClass } from '@element-plus/utils/dom'
-import isServer from '@element-plus/utils/isServer'
 
 import type { TableHeaderProps } from '.'
 import type { TableColumnCtx } from '../table-column/defaults'
@@ -30,7 +30,7 @@ function useEvent<T>(props: TableHeaderProps<T>, emit) {
   const dragging = ref(false)
   const dragState = ref({})
   const handleMouseDown = (event: MouseEvent, column: TableColumnCtx<T>) => {
-    if (isServer) return
+    if (!isClient) return
     if (column.children && column.children.length > 0) return
     /* istanbul ignore if */
     if (draggingColumn.value && props.border) {
@@ -138,7 +138,7 @@ function useEvent<T>(props: TableHeaderProps<T>, emit) {
   }
 
   const handleMouseOut = () => {
-    if (isServer) return
+    if (!isClient) return
     document.body.style.cursor = ''
   }
   const toggleOrder = ({ order, sortOrders }) => {

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

@@ -1,7 +1,7 @@
 import { nextTick, ref, isRef } from 'vue'
 import { hasOwn } from '@vue/shared'
+import { isClient } from '@vueuse/core'
 import scrollbarWidth from '@element-plus/utils/scrollbar-width'
-import isServer from '@element-plus/utils/isServer'
 import { parseHeight } from './util'
 import type { Ref } from 'vue'
 
@@ -98,7 +98,7 @@ class TableLayout<T> {
   }
 
   setHeight(value: string | number, prop = 'height') {
-    if (isServer) return
+    if (!isClient) return
     const el = this.table.vnode.el
     value = parseHeight(value)
     this.height.value = Number(value)
@@ -191,7 +191,7 @@ class TableLayout<T> {
   }
 
   updateColumnsWidth() {
-    if (isServer) return
+    if (!isClient) return
     const fit = this.fit
     const bodyWidth = this.table.vnode.el.clientWidth
     let bodyMinWidth = 0

packages/components/teleport/src/teleport.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
-import isServer from '@element-plus/utils/isServer'
+import { isClient } from '@vueuse/core'
 import { elTeleportProps } from './teleport'
 
 export default defineComponent({
@@ -17,7 +17,7 @@ export default defineComponent({
     const containerRef = ref<HTMLElement>()
     const containerStyle = computed(() => {
       return props.container === 'body' ||
-        (isServer && props.container === document.body)
+        (!isClient && props.container === document.body)
         ? [
             props.style,
             {

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

@@ -12,8 +12,8 @@ import {
 } from 'vue'
 import { hasOwn } from '@vue/shared'
 
+import { isClient } from '@vueuse/core'
 import { isNumber, isString } from '@element-plus/utils/util'
-import isServer from '@element-plus/utils/isServer'
 import getScrollBarWidth from '@element-plus/utils/scrollbar-width'
 
 import Scrollbar from '../components/scrollbar'
@@ -445,7 +445,7 @@ const createGrid = ({
       // life cycles
       onMounted(() => {
         // for SSR
-        if (isServer) return
+        if (!isClient) return
         const { initScrollLeft, initScrollTop } = props
         const windowElement = unref(windowRef)
         if (windowElement) {

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

@@ -12,8 +12,8 @@ import {
 } from 'vue'
 import { hasOwn } from '@vue/shared'
 
+import { isClient } from '@vueuse/core'
 import { isNumber, isString } from '@element-plus/utils/util'
-import isServer from '@element-plus/utils/isServer'
 
 import { useCache } from '../hooks/use-cache'
 import useWheel from '../hooks/use-wheel'
@@ -358,7 +358,7 @@ const createList = ({
 
       // life cycles
       onMounted(() => {
-        if (isServer) return
+        if (!isClient) return
         const { initScrollOffset } = props
         const windowElement = unref(windowRef)
         if (isNumber(initScrollOffset) && windowElement) {

packages/components/virtual-list/src/components/scrollbar.ts

@@ -10,10 +10,10 @@ import {
   withModifiers,
   unref,
 } from 'vue'
+import { isClient } from '@vueuse/core'
 import { BAR_MAP } from '@element-plus/components/scrollbar'
 import { on, off } from '@element-plus/utils/dom'
 import { rAF, cAF } from '@element-plus/utils/raf'
-import isServer from '@element-plus/utils/isServer'
 
 import { SCROLLBAR_MIN_SIZE, HORIZONTAL, ScrollbarDirKey } from '../defaults'
 import { virtualizedScrollbarProps } from '../props'
@@ -244,7 +244,7 @@ const ScrollBar = defineComponent({
     )
 
     onMounted(() => {
-      if (isServer) return
+      if (!isClient) return
 
       on(trackRef.value!, 'touchstart', onScrollbarTouchStart)
       on(thumbRef.value!, 'touchstart', onThumbMouseDown)

packages/directives/click-outside/index.ts

@@ -1,5 +1,5 @@
+import { isClient } from '@vueuse/core'
 import { on } from '@element-plus/utils/dom'
-import isServer from '@element-plus/utils/isServer'
 
 import type {
   ComponentPublicInstance,
@@ -21,7 +21,7 @@ const nodeList: FlushList = new Map()
 
 let startClick: MouseEvent
 
-if (!isServer) {
+if (isClient) {
   on(document, 'mousedown', (e: MouseEvent) => (startClick = e))
   on(document, 'mouseup', (e: MouseEvent) => {
     for (const handlers of nodeList.values()) {

packages/hooks/use-lockscreen/index.ts

@@ -1,5 +1,6 @@
 import { watch, isRef, onScopeDispose } from 'vue'
 
+import { isClient } from '@vueuse/core'
 import getScrollBarWidth from '@element-plus/utils/scrollbar-width'
 import { throwError } from '@element-plus/utils/error'
 import {
@@ -8,7 +9,6 @@ import {
   hasClass,
   getStyle,
 } from '@element-plus/utils/dom'
-import isServer from '@element-plus/utils/isServer'
 
 import type { Ref } from 'vue'
 
@@ -24,7 +24,7 @@ export const useLockscreen = (trigger: Ref<boolean>) => {
       'You need to pass a ref param to this function'
     )
   }
-  if (isServer || hasClass(document.body, 'el-popup-parent--hidden')) {
+  if (!isClient || hasClass(document.body, 'el-popup-parent--hidden')) {
     return
   }
 

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

@@ -1,8 +1,8 @@
 import { computed, getCurrentInstance, watch, onMounted } from 'vue'
 import { isFunction } from '@vue/shared'
+import { isClient } from '@vueuse/core'
 import { isBool } from '@element-plus/utils/util'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import isServer from '@element-plus/utils/isServer'
 import { buildProps, definePropType } from '@element-plus/utils/props'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
@@ -76,7 +76,7 @@ export const useModelToggle = ({
     )
       return
 
-    const shouldEmit = hasUpdateHandler.value && !isServer
+    const shouldEmit = hasUpdateHandler.value && isClient
 
     if (shouldEmit) {
       emit(UPDATE_MODEL_EVENT, true)
@@ -88,9 +88,9 @@ export const useModelToggle = ({
   }
 
   const hide = () => {
-    if (props.disabled === true || isServer) return
+    if (props.disabled === true || !isClient) return
 
-    const shouldEmit = hasUpdateHandler.value && !isServer
+    const shouldEmit = hasUpdateHandler.value && isClient
 
     if (shouldEmit) {
       emit(UPDATE_MODEL_EVENT, false)

packages/utils/dom.ts

@@ -1,4 +1,4 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 import { camelize, isObject } from './util'
 import type { CSSProperties } from 'vue'
 
@@ -104,7 +104,7 @@ export const getStyle = function (
   element: HTMLElement,
   styleName: string
 ): string {
-  if (isServer) return ''
+  if (!isClient) return ''
   if (!element || !styleName) return ''
   styleName = camelize(styleName)
   if (styleName === 'float') {
@@ -157,7 +157,7 @@ export const isScroll = (
   el: HTMLElement,
   isVertical?: Nullable<boolean>
 ): RegExpMatchArray | null => {
-  if (isServer) return null
+  if (!isClient) return null
   const determinedDirection = isVertical === null || isVertical === undefined
   const overflow = determinedDirection
     ? getStyle(el, 'overflow')
@@ -172,7 +172,7 @@ export const getScrollContainer = (
   el: HTMLElement,
   isVertical?: Nullable<boolean>
 ): Window | HTMLElement | undefined => {
-  if (isServer) return
+  if (!isClient) return
 
   let parent: HTMLElement = el
   while (parent) {
@@ -191,7 +191,7 @@ export const isInContainer = (
   el: Element | undefined,
   container: Element | Window | undefined
 ): boolean => {
-  if (isServer || !el || !container) return false
+  if (!isClient || !el || !container) return false
 
   const elRect = el.getBoundingClientRect()
 

packages/utils/global-nodes.ts

@@ -1,7 +1,7 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 
 const globalNodes = []
-let target = isServer ? undefined : document.body
+let target = !isClient ? undefined : document.body
 
 export function createGlobalNode(id?: string) {
   const el = document.createElement('div')

packages/utils/isServer.ts

@@ -1 +0,0 @@
-export default typeof window === 'undefined'

packages/utils/popup-manager.ts

@@ -1,4 +1,4 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 import * as configs from './config'
 import { addClass, removeClass, on } from './dom'
 import { EVENT_CODE } from './aria'
@@ -47,7 +47,7 @@ let hasModal = false
 let zIndex: number
 
 const getModal = function (): HTMLElement {
-  if (isServer) return
+  if (!isClient) return
   let modalDom = PopupManager.modalDom
   if (modalDom) {
     hasModal = true
@@ -104,7 +104,7 @@ const PopupManager: IPopupManager = {
   },
 
   openModal(id, zIndex, dom, modalClass, modalFade) {
-    if (isServer) return
+    if (!isClient) return
     if (!id || zIndex === undefined) return
     this.modalFade = modalFade
 
@@ -204,7 +204,7 @@ Object.defineProperty(PopupManager, 'zIndex', {
 })
 
 const getTopPopup = function () {
-  if (isServer) return
+  if (!isClient) return
   if (PopupManager.modalStack.length > 0) {
     const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1]
     if (!topPopup) return
@@ -214,7 +214,7 @@ const getTopPopup = function () {
   }
 }
 
-if (!isServer) {
+if (isClient) {
   // handle `esc` key when the popup is shown
   on(window, 'keydown', function (event: KeyboardEvent) {
     if (event.code === EVENT_CODE.esc) {

packages/utils/raf.ts

@@ -1,9 +1,9 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 
 let rAF = (fn: () => void) => setTimeout(fn, 16) as unknown as number
 let cAF = (handle: number) => clearTimeout(handle)
 
-if (!isServer) {
+if (isClient) {
   rAF = (fn: () => void) => window.requestAnimationFrame(fn)
   cAF = (handle: number) => window.cancelAnimationFrame(handle)
 }

packages/utils/resize-event.ts

@@ -1,4 +1,4 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 
 import type { CustomizedHTMLElement } from './types'
 
@@ -23,7 +23,7 @@ export const addResizeListener = function (
   element: ResizableElement,
   fn: (...args: unknown[]) => unknown
 ): void {
-  if (isServer || !element) return
+  if (!isClient || !element) return
   if (!element.__resizeListeners__) {
     element.__resizeListeners__ = []
     element.__ro__ = new ResizeObserver(resizeHandler)

packages/utils/scroll-into-view.ts

@@ -1,10 +1,10 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 
 export default function scrollIntoView(
   container: HTMLElement,
   selected: HTMLElement
 ): void {
-  if (isServer) return
+  if (!isClient) return
 
   if (!selected) {
     container.scrollTop = 0

packages/utils/scrollbar-width.ts

@@ -1,9 +1,9 @@
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 
 let scrollBarWidth: number
 
 export default function (): number {
-  if (isServer) return 0
+  if (!isClient) return 0
   if (scrollBarWidth !== undefined) return scrollBarWidth
 
   const outer = document.createElement('div')

packages/utils/util.ts

@@ -13,7 +13,7 @@ import {
   toRawType,
 } from '@vue/shared'
 import isEqualWith from 'lodash/isEqualWith'
-import isServer from './isServer'
+import { isClient } from '@vueuse/core'
 import { debugWarn, throwError } from './error'
 
 import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue'
@@ -110,7 +110,7 @@ export const coerceTruthyValueToArray = (arr) => {
 // export const isEdge
 
 export const isFirefox = function (): boolean {
-  return !isServer && !!window.navigator.userAgent.match(/firefox/i)
+  return isClient && !!window.navigator.userAgent.match(/firefox/i)
 }
 
 export const autoprefixer = function (style: CSSProperties): CSSProperties {