refactor: replace Array.isArray with the built-in isArray (#18671)

chore(components): [descriptions] isArray replace Array.isArray

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

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import {
   capitalize,
+  isArray,
   isEmpty,
   isFunction,
   isUndefined,
@@ -137,7 +138,7 @@ class Node {
     return isUndefined(isLeaf)
       ? lazy && !loaded
         ? false
-        : !(Array.isArray(childrenData) && childrenData.length)
+        : !(isArray(childrenData) && childrenData.length)
       : !!isLeaf
   }
 
@@ -149,7 +150,7 @@ class Node {
     const { childrenData, children } = this
     const node = new Node(childData, this.config, this)
 
-    if (Array.isArray(childrenData)) {
+    if (isArray(childrenData)) {
       childrenData.push(childData)
     } else {
       this.childrenData = [childData]

packages/components/date-picker/src/composables/use-basic-date-table.ts

@@ -2,7 +2,7 @@ import { computed, nextTick, ref, unref, watch } from 'vue'
 import dayjs from 'dayjs'
 import { flatten } from 'lodash-unified'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { castArray } from '@element-plus/utils'
+import { castArray, isArray } from '@element-plus/utils'
 import { buildPickerTable } from '../utils'
 
 import type { SetupContext } from 'vue'
@@ -373,7 +373,7 @@ export const useBasicDateTable = (
 
     newDate = newDate.date(Number.parseInt(cell.text as any, 10))
 
-    if (props.parsedValue && !Array.isArray(props.parsedValue)) {
+    if (props.parsedValue && !isArray(props.parsedValue)) {
       const dayOffset = ((props.parsedValue.day() - firstDayOfWeek + 7) % 7) - 1
       const weekDate = props.parsedValue.subtract(dayOffset, 'day')
       return weekDate.isSame(newDate, 'day')

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

@@ -815,7 +815,7 @@ watch(
   (val) => {
     if (val) {
       if (isMultipleType.value) return
-      if (Array.isArray(val)) return
+      if (isArray(val)) return
       innerDate.value = val
     } else {
       innerDate.value = getDefaultValue()

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

@@ -57,6 +57,7 @@ import {
   addUnit,
   ensureArray,
   getProp,
+  isArray,
   isBoolean,
   isFunction,
   isString,
@@ -231,7 +232,7 @@ const getFilteredRule = (trigger: string) => {
     rules
       .filter((rule) => {
         if (!rule.trigger || !trigger) return true
-        if (Array.isArray(rule.trigger)) {
+        if (isArray(rule.trigger)) {
           return rule.trigger.includes(trigger)
         } else {
           return rule.trigger === trigger

packages/components/image/src/image.vue

@@ -62,6 +62,7 @@ import { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'
 import ImageViewer from '@element-plus/components/image-viewer'
 import {
   getScrollContainer,
+  isArray,
   isClient,
   isElement,
   isInContainer,
@@ -127,7 +128,7 @@ const imageStyle = computed<CSSProperties>(() => {
 
 const preview = computed(() => {
   const { previewSrcList } = props
-  return Array.isArray(previewSrcList) && previewSrcList.length > 0
+  return isArray(previewSrcList) && previewSrcList.length > 0
 })
 
 const imageIndex = computed(() => {

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

@@ -1,4 +1,9 @@
-import { buildProps, definePropType, isString } from '@element-plus/utils'
+import {
+  buildProps,
+  definePropType,
+  isArray,
+  isString,
+} from '@element-plus/utils'
 
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
@@ -27,6 +32,6 @@ export type MenuItemProps = ExtractPropTypes<typeof menuItemProps>
 
 export const menuItemEmits = {
   click: (item: MenuItemRegistered) =>
-    isString(item.index) && Array.isArray(item.indexPath),
+    isString(item.index) && isArray(item.indexPath),
 }
 export type MenuItemEmits = typeof menuItemEmits

packages/components/menu/src/menu.ts

@@ -22,6 +22,7 @@ import {
   definePropType,
   flattedChildren,
   iconPropType,
+  isArray,
   isObject,
   isString,
   mutable,
@@ -164,7 +165,7 @@ export const menuProps = buildProps({
 export type MenuProps = ExtractPropTypes<typeof menuProps>
 
 const checkIndexPath = (indexPath: unknown): indexPath is string[] =>
-  Array.isArray(indexPath) && indexPath.every((path) => isString(path))
+  isArray(indexPath) && indexPath.every((path) => isString(path))
 
 export const menuEmits = {
   close: (index: string, indexPath: string[]) =>

packages/components/pagination/src/components/sizes.vue

@@ -25,6 +25,7 @@ import { computed, ref, watch } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { ElOption, ElSelect } from '@element-plus/components/select'
 import { useLocale, useNamespace } from '@element-plus/hooks'
+import { isArray } from '@element-plus/utils'
 import { usePagination } from '../usePagination'
 import { paginationSizesProps } from './sizes'
 
@@ -43,7 +44,7 @@ watch(
   () => props.pageSizes,
   (newVal, oldVal) => {
     if (isEqual(newVal, oldVal)) return
-    if (Array.isArray(newVal)) {
+    if (isArray(newVal)) {
       const pageSize = newVal.includes(props.pageSize!)
         ? props.pageSize
         : props.pageSizes[0]

packages/components/slider/src/composables/use-lifecycle.ts

@@ -1,5 +1,6 @@
 import { nextTick, onMounted, ref } from 'vue'
 import { useEventListener } from '@vueuse/core'
+import { isArray } from '@element-plus/utils'
 import type { SliderInitData, SliderProps } from '../slider'
 
 export const useLifecycle = (
@@ -11,7 +12,7 @@ export const useLifecycle = (
 
   onMounted(async () => {
     if (props.range) {
-      if (Array.isArray(props.modelValue)) {
+      if (isArray(props.modelValue)) {
         initData.firstValue = Math.max(props.min, props.modelValue[0])
         initData.secondValue = Math.min(props.max, props.modelValue[1])
       } else {

packages/components/slider/src/composables/use-watch.ts

@@ -1,6 +1,6 @@
 import { watch } from 'vue'
 import { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { debugWarn, throwError } from '@element-plus/utils'
+import { debugWarn, isArray, throwError } from '@element-plus/utils'
 import type { ComputedRef, SetupContext } from 'vue'
 import type { Arrayable } from '@element-plus/utils'
 import type { FormItemContext } from '@element-plus/components/form'
@@ -34,7 +34,7 @@ export const useWatch = (
       throwError('Slider', 'min should not be greater than max.')
     }
     const val = props.modelValue
-    if (props.range && Array.isArray(val)) {
+    if (props.range && isArray(val)) {
       if (val[1] < props.min) {
         _emit([props.min, props.min])
       } else if (val[0] > props.max) {
@@ -86,8 +86,8 @@ export const useWatch = (
     (val, oldVal) => {
       if (
         initData.dragging ||
-        (Array.isArray(val) &&
-          Array.isArray(oldVal) &&
+        (isArray(val) &&
+          isArray(oldVal) &&
           val.every((item, index) => item === oldVal[index]) &&
           initData.firstValue === val[0] &&
           initData.secondValue === val[1])

packages/components/table-v2/src/composables/use-data.ts

@@ -1,4 +1,5 @@
 import { computed, ref, unref, watch } from 'vue'
+import { isArray } from '@element-plus/utils'
 
 import type { TableV2Props } from '../table'
 import type { KeyType } from '../types'
@@ -36,7 +37,7 @@ export const useData = (
       array.push(item)
       if (
         keysSet.has(item[rowKey]) &&
-        Array.isArray(item.children) &&
+        isArray(item.children) &&
         item.children.length > 0
       ) {
         copy = [...item.children, ...copy]

packages/components/table/src/store/tree.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import { computed, getCurrentInstance, ref, unref, watch } from 'vue'
+import { isArray } from '@element-plus/utils'
 import { getRowIdentity, walkTreeNode } from '../util'
 
 import type { WatcherPropsData } from '.'
@@ -48,7 +49,7 @@ function useTree<T>(watcherData: WatcherPropsData<T>) {
       data,
       (parent, children, level) => {
         const parentId = getRowIdentity(parent, rowKey)
-        if (Array.isArray(children)) {
+        if (isArray(children)) {
           res[parentId] = {
             children: children.map((row) => getRowIdentity(row, rowKey)),
             level,
@@ -195,7 +196,7 @@ function useTree<T>(watcherData: WatcherPropsData<T>) {
     if (load && !treeData.value[key].loaded) {
       treeData.value[key].loading = true
       load(row, treeNode, (data) => {
-        if (!Array.isArray(data)) {
+        if (!isArray(data)) {
           throw new TypeError('[ElTable] data must be an array')
         }
         treeData.value[key].loading = false

packages/components/table/src/store/watcher.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import { getCurrentInstance, ref, toRefs, unref, watch } from 'vue'
 import { isEqual } from 'lodash-unified'
-import { hasOwn, isUndefined } from '@element-plus/utils'
+import { hasOwn, isArray, isUndefined } from '@element-plus/utils'
 import {
   getColumnById,
   getColumnByKey,
@@ -359,7 +359,7 @@ function useWatcher<T>() {
 
   // 过滤与排序
   const updateFilters = (columns, values) => {
-    if (!Array.isArray(columns)) {
+    if (!isArray(columns)) {
       columns = [columns]
     }
     const filters_ = {}
@@ -430,7 +430,7 @@ function useWatcher<T>() {
       columnKeys = [columnKeys]
     }
 
-    if (Array.isArray(columnKeys)) {
+    if (isArray(columnKeys)) {
       const columns_ = columnKeys.map((key) =>
         getColumnByKey(
           {

packages/components/table/src/table-body/styles-helper.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import { inject } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
+import { isArray } from '@element-plus/utils'
 import {
   ensurePosition,
   getFixedColumnOffset,
@@ -125,7 +126,7 @@ function useStyles<T>(props: Partial<TableBodyProps<T>>) {
         rowIndex,
         columnIndex,
       })
-      if (Array.isArray(result)) {
+      if (isArray(result)) {
         rowspan = result[0]
         colspan = result[1]
       } else if (typeof result === 'object') {

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

@@ -11,7 +11,7 @@ import {
   ref,
 } from 'vue'
 import ElCheckbox from '@element-plus/components/checkbox'
-import { isString, isUndefined } from '@element-plus/utils'
+import { isArray, isString, isUndefined } from '@element-plus/utils'
 import { cellStarts } from '../config'
 import { compose, mergeOptions } from '../util'
 import useWatcher from './watcher-helper'
@@ -174,7 +174,7 @@ export default defineComponent({
         $index: -1,
       })
       const children = []
-      if (Array.isArray(renderDefault)) {
+      if (isArray(renderDefault)) {
         for (const childNode of renderDefault) {
           if (
             childNode.type?.name === 'ElTableColumn' ||
@@ -183,7 +183,7 @@ export default defineComponent({
             children.push(childNode)
           } else if (
             childNode.type === Fragment &&
-            Array.isArray(childNode.children)
+            isArray(childNode.children)
           ) {
             childNode.children.forEach((vnode) => {
               // No rendering when vnode is dynamic slot or text

packages/components/table/src/table-column/render-helper.ts

@@ -9,7 +9,7 @@ import {
   unref,
   watchEffect,
 } from 'vue'
-import { debugWarn } from '@element-plus/utils'
+import { debugWarn, isArray } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import {
   cellForced,
@@ -98,7 +98,7 @@ function useRender<T>(
   }
 
   const checkSubColumn = (children: TableColumn<T> | TableColumn<T>[]) => {
-    if (Array.isArray(children)) {
+    if (isArray(children)) {
       children.forEach((child) => check(child))
     } else {
       check(children)
@@ -186,7 +186,7 @@ function useRender<T>(
   }
   const getPropsData = (...propsKey: unknown[]) => {
     return propsKey.reduce((prev, cur) => {
-      if (Array.isArray(cur)) {
+      if (isArray(cur)) {
         cur.forEach((key) => {
           prev[key] = props[key]
         })

packages/components/table/src/util.ts

@@ -49,7 +49,7 @@ export const orderBy = function <T>(
   if (
     !sortKey &&
     !sortMethod &&
-    (!sortBy || (Array.isArray(sortBy) && !sortBy.length))
+    (!sortBy || (isArray(sortBy) && !sortBy.length))
   ) {
     return array
   }
@@ -62,7 +62,7 @@ export const orderBy = function <T>(
     ? null
     : function (value, index) {
         if (sortBy) {
-          if (!Array.isArray(sortBy)) {
+          if (!isArray(sortBy)) {
             sortBy = [sortBy]
           }
           return sortBy.map((by) => {
@@ -332,7 +332,7 @@ export function walkTreeNode(
   childrenKey = 'children',
   lazyKey = 'hasChildren'
 ) {
-  const isNil = (array) => !(Array.isArray(array) && array.length)
+  const isNil = (array) => !(isArray(array) && array.length)
 
   function _walker(parent, children, level) {
     cb(parent, children, level)

packages/components/tree-select/src/utils.ts

@@ -1,3 +1,5 @@
+import { isArray } from '@element-plus/utils'
+
 import type { TreeNodeData } from '@element-plus/components/tree/src/tree.type'
 
 export function isValidValue(val: any) {
@@ -5,11 +7,11 @@ export function isValidValue(val: any) {
 }
 
 export function isValidArray(val: any) {
-  return Array.isArray(val) && val.length
+  return isArray(val) && val.length
 }
 
 export function toValidArray(val: any) {
-  return Array.isArray(val) ? val : isValidValue(val) ? [val] : []
+  return isArray(val) ? val : isValidValue(val) ? [val] : []
 }
 
 type TreeCallback<T extends TreeNodeData, R> = (

packages/components/tree/src/model/node.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { reactive } from 'vue'
-import { hasOwn } from '@element-plus/utils'
+import { hasOwn, isArray } from '@element-plus/utils'
 import { NODE_KEY, markNodeData } from './util'
 import type TreeStore from './tree-store'
 
@@ -153,7 +153,7 @@ class Node {
     ) {
       this.expand()
     }
-    if (!Array.isArray(this.data)) {
+    if (!isArray(this.data)) {
       markNodeData(this, this.data)
     }
     if (!this.data) return
@@ -184,7 +184,7 @@ class Node {
   }
 
   setData(data: TreeNodeData): void {
-    if (!Array.isArray(data)) {
+    if (!isArray(data)) {
       markNodeData(this, data)
     }
 
@@ -192,7 +192,7 @@ class Node {
     this.childNodes = []
 
     let children
-    if (this.level === 0 && Array.isArray(this.data)) {
+    if (this.level === 0 && isArray(this.data)) {
       children = this.data
     } else {
       children = getPropertyFromData(this, 'children') || []
@@ -355,7 +355,7 @@ class Node {
 
     if (this.shouldLoadData()) {
       this.loadData((data) => {
-        if (Array.isArray(data)) {
+        if (isArray(data)) {
           if (this.checked) {
             this.setChecked(true, true)
           } else if (!this.store.checkStrictly) {

packages/components/watermark/src/useClips.ts

@@ -1,3 +1,5 @@
+import { isArray } from '@element-plus/utils'
+
 import type { WatermarkProps } from './watermark'
 
 export const FontGap = 3
@@ -66,7 +68,7 @@ export default function useClips() {
       ctx.fillStyle = color
       ctx.textAlign = textAlign
       ctx.textBaseline = textBaseline
-      const contents = Array.isArray(content) ? content : [content]
+      const contents = isArray(content) ? content : [content]
       contents?.forEach((item, index) => {
         ctx.fillText(
           item ?? '',

packages/components/watermark/src/watermark.vue

@@ -14,6 +14,7 @@ import {
   watch,
 } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
+import { isArray } from '@element-plus/utils'
 import { watermarkProps } from './watermark'
 import { getPixelRatio, getStyleStr, reRendering } from './utils'
 import useClips, { FontGap } from './useClips'
@@ -116,7 +117,7 @@ const getMarkSize = (ctx: CanvasRenderingContext2D) => {
   const height = props.height
   if (!image && ctx.measureText) {
     ctx.font = `${Number(fontSize.value)}px ${fontFamily.value}`
-    const contents = Array.isArray(content) ? content : [content]
+    const contents = isArray(content) ? content : [content]
     const sizes = contents.map((item) => {
       const metrics = ctx.measureText(item!)
 

packages/directives/click-outside/index.ts

@@ -1,4 +1,4 @@
-import { isClient, isElement } from '@element-plus/utils'
+import { isArray, isClient, isElement } from '@element-plus/utils'
 
 import type {
   ComponentPublicInstance,
@@ -37,7 +37,7 @@ function createDocumentHandler(
   binding: DirectiveBinding
 ): DocumentHandler {
   let excludes: HTMLElement[] = []
-  if (Array.isArray(binding.arg)) {
+  if (isArray(binding.arg)) {
     excludes = binding.arg
   } else if (isElement(binding.arg)) {
     // due to current implementation on binding type is wrong the type casting is necessary here

packages/utils/arrays.ts

@@ -1,3 +1,5 @@
+import { isArray } from './types'
+
 export const unique = <T>(arr: T[]) => [...new Set(arr)]
 
 type Many<T> = T | ReadonlyArray<T>
@@ -5,7 +7,7 @@ type Many<T> = T | ReadonlyArray<T>
 /** like `_.castArray`, except falsy value returns empty array. */
 export const castArray = <T>(arr: Many<T>): T[] => {
   if (!arr && (arr as any) !== 0) return []
-  return Array.isArray(arr) ? arr : [arr]
+  return isArray(arr) ? arr : [arr]
 }
 
 // TODO: remove import alias

packages/utils/vue/vnode.ts

@@ -97,7 +97,7 @@ export const getFirstValidNode = (
   nodes: VNodeNormalizedChildren,
   maxDepth = 3
 ) => {
-  if (Array.isArray(nodes)) {
+  if (isArray(nodes)) {
     return getChildren(nodes[0], maxDepth)
   } else {
     return getChildren(nodes, maxDepth)