element-pe 1.0.2 → 1.0.6

package/packages/components/space/src/space.ts

@@ -0,0 +1,208 @@
+import {
+  defineComponent,
+  renderSlot,
+  createVNode,
+  createTextVNode,
+  isVNode,
+} from 'vue'
+import { isString } from '@vue/shared'
+import {
+  PatchFlags,
+  isFragment,
+  isValidElementNode,
+} from '@element-plus/utils/vnode'
+import { isArray, isNumber } from '@element-plus/utils/util'
+import {
+  buildProps,
+  componentSize,
+  definePropType,
+} from '@element-plus/utils/props'
+import Item from './item.vue'
+import { useSpace } from './use-space'
+
+import type { VNode, StyleValue, ExtractPropTypes, VNodeChild } from 'vue'
+import type { AlignItemsProperty } from 'csstype'
+
+export const spaceProps = buildProps({
+  direction: {
+    type: String,
+    values: ['horizontal', 'vertical'],
+    default: 'horizontal',
+  },
+
+  class: {
+    type: definePropType<string | string[] | Record<string, boolean>>([
+      String,
+      Object,
+      Array,
+    ]),
+    default: '',
+  },
+
+  style: {
+    type: definePropType<StyleValue>([String, Array, Object]),
+    default: '',
+  },
+
+  alignment: {
+    type: definePropType<AlignItemsProperty>(String),
+    default: 'center',
+  },
+
+  prefixCls: {
+    type: String,
+  },
+
+  spacer: {
+    type: definePropType<VNodeChild>([Object, String, Number, Array]),
+    default: null,
+    validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),
+  },
+
+  wrap: {
+    type: Boolean,
+    default: false,
+  },
+
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+
+  fillRatio: {
+    type: Number,
+    default: 100,
+  },
+
+  size: {
+    type: [String, Array, Number],
+    values: componentSize,
+    validator: (val: unknown): val is [number, number] | number => {
+      return (
+        isNumber(val) ||
+        (isArray(val) && val.length === 2 && val.every((i) => isNumber(i)))
+      )
+    },
+  },
+} as const)
+export type SpaceProps = ExtractPropTypes<typeof spaceProps>
+
+export default defineComponent({
+  name: 'ElSpace',
+
+  props: spaceProps,
+
+  setup(props, { slots }) {
+    const { classes, containerStyle, itemStyle } = useSpace(props)
+
+    return () => {
+      const { spacer, prefixCls, direction } = props
+
+      const children = renderSlot(slots, 'default', { key: 0 }, () => [])
+      // retrieve the children out via a simple for loop
+      // the edge case here is that when users uses directives like <v-for>, <v-if>
+      // we need to go one layer deeper
+
+      if ((children.children ?? []).length === 0) return null
+
+      // loop the children, if current children is rendered via `renderList` or `<v-for>`
+      if (isArray(children.children)) {
+        let extractedChildren: VNode[] = []
+        children.children.forEach((child, loopKey) => {
+          if (isFragment(child)) {
+            if (isArray(child.children)) {
+              child.children.forEach((nested, key) => {
+                extractedChildren.push(
+                  createVNode(
+                    Item,
+                    {
+                      style: itemStyle.value,
+                      prefixCls,
+                      key: `nested-${key}`,
+                    },
+                    {
+                      default: () => [nested],
+                    },
+                    PatchFlags.PROPS | PatchFlags.STYLE,
+                    ['style', 'prefixCls']
+                  )
+                )
+              })
+            }
+            // if the current child is valid vnode, then append this current vnode
+            // to item as child node.
+          } else if (isValidElementNode(child)) {
+            extractedChildren.push(
+              createVNode(
+                Item,
+                {
+                  style: itemStyle.value,
+                  prefixCls,
+                  key: `LoopKey${loopKey}`,
+                },
+                {
+                  default: () => [child],
+                },
+                PatchFlags.PROPS | PatchFlags.STYLE,
+                ['style', 'prefixCls']
+              )
+            )
+          }
+        })
+
+        if (spacer) {
+          // track the current rendering index, when encounters the last element
+          // then no need to add a spacer after it.
+          const len = extractedChildren.length - 1
+          extractedChildren = extractedChildren.reduce<VNode[]>(
+            (acc, child, idx) => {
+              const children = [...acc, child]
+              if (idx !== len) {
+                children.push(
+                  createVNode(
+                    'span',
+                    // adding width 100% for vertical alignment,
+                    // when the spacer inherit the width from the
+                    // parent, this span's width was not set, so space
+                    // might disappear
+                    {
+                      style: [
+                        itemStyle.value,
+                        direction === 'vertical' ? 'width: 100%' : null,
+                      ],
+                      key: idx,
+                    },
+                    [
+                      // if spacer is already a valid vnode, then append it to the current
+                      // span element.
+                      // otherwise, treat it as string.
+                      isVNode(spacer)
+                        ? spacer
+                        : createTextVNode(spacer as string, PatchFlags.TEXT),
+                    ],
+                    PatchFlags.STYLE
+                  )
+                )
+              }
+              return children
+            },
+            []
+          )
+        }
+
+        // spacer container.
+        return createVNode(
+          'div',
+          {
+            class: classes.value,
+            style: containerStyle.value,
+          },
+          extractedChildren,
+          PatchFlags.STYLE | PatchFlags.CLASS
+        )
+      }
+
+      return children.children
+    }
+  },
+})

package/packages/components/space/src/use-space.ts

@@ -0,0 +1,84 @@
+import { ref, computed, watchEffect } from 'vue'
+import { isNumber } from '@element-plus/utils/util'
+import type { SpaceProps } from './space'
+
+import type { CSSProperties, StyleValue } from 'vue'
+import type { ComponentSize } from '@element-plus/utils/types'
+
+const SIZE_MAP: Record<ComponentSize, number> = {
+  mini: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+}
+
+export function useSpace(props: SpaceProps) {
+  const classes = computed(() => [
+    'el-space',
+    `el-space--${props.direction}`,
+    props.class,
+  ])
+
+  const horizontalSize = ref(0)
+  const verticalSize = ref(0)
+
+  const containerStyle = computed<StyleValue>(() => {
+    const wrapKls: CSSProperties =
+      props.wrap || props.fill
+        ? { flexWrap: 'wrap', marginBottom: `-${verticalSize.value}px` }
+        : {}
+    const alignment: CSSProperties = {
+      alignItems: props.alignment,
+    }
+    return [wrapKls, alignment, props.style]
+  })
+
+  const itemStyle = computed<StyleValue>(() => {
+    const itemBaseStyle: CSSProperties = {
+      paddingBottom: `${verticalSize.value}px`,
+      marginRight: `${horizontalSize.value}px`,
+    }
+
+    const fillStyle: CSSProperties = props.fill
+      ? { flexGrow: 1, minWidth: `${props.fillRatio}%` }
+      : {}
+
+    return [itemBaseStyle, fillStyle]
+  })
+
+  watchEffect(() => {
+    const { size = 'small', wrap, direction: dir, fill } = props
+
+    // when the specified size have been given
+    if (Array.isArray(size)) {
+      const [h = 0, v = 0] = size
+      horizontalSize.value = h
+      verticalSize.value = v
+    } else {
+      let val: number
+      if (isNumber(size)) {
+        val = size
+      } else {
+        val = SIZE_MAP[size] || SIZE_MAP.small
+      }
+
+      if ((wrap || fill) && dir === 'horizontal') {
+        horizontalSize.value = verticalSize.value = val
+      } else {
+        if (dir === 'horizontal') {
+          horizontalSize.value = val
+          verticalSize.value = 0
+        } else {
+          verticalSize.value = val
+          horizontalSize.value = 0
+        }
+      }
+    }
+  })
+
+  return {
+    classes,
+    containerStyle,
+    itemStyle,
+  }
+}

package/packages/components/switch/__tests__/switch.spec.ts

@@ -260,7 +260,7 @@ describe('Switch.vue', () => {
               this.loading = false
               return this.asyncResult == 'success'
                 ? resolve(true)
-                : reject(new Error('error'))
+                : reject(new Error('Error'))
             }, 1000)
           })
         },

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

@@ -67,6 +67,7 @@ function useTree<T>(watcherData: WatcherPropsData<T>) {
   }
 
   const updateTreeData = (
+    ifChangeExpandRowKeys = false,
     ifExpandAll = instance.store?.states.defaultExpandAll.value
   ) => {
     const nested = normalizedData.value
@@ -77,10 +78,17 @@ function useTree<T>(watcherData: WatcherPropsData<T>) {
       const oldTreeData = unref(treeData)
       const rootLazyRowKeys = []
       const getExpanded = (oldValue, key) => {
-        if (expandRowKeys.value) {
-          return ifExpandAll || expandRowKeys.value.includes(key)
+        if (ifChangeExpandRowKeys) {
+          if (expandRowKeys.value) {
+            return ifExpandAll || expandRowKeys.value.includes(key)
+          } else {
+            return !!(ifExpandAll || oldValue?.expanded)
+          }
         } else {
-          return !!(ifExpandAll || oldValue?.expanded)
+          const included =
+            ifExpandAll ||
+            (expandRowKeys.value && expandRowKeys.value.includes(key))
+          return !!(oldValue?.expanded || included)
         }
       }
       // 合并 expanded 与 display，确保数据刷新后，状态不变
@@ -126,6 +134,13 @@ function useTree<T>(watcherData: WatcherPropsData<T>) {
     instance.store?.updateTableScrollY()
   }
 
+  watch(
+    () => expandRowKeys.value,
+    () => {
+      updateTreeData(true)
+    }
+  )
+
   watch(
     () => normalizedData.value,
     () => {

package/packages/components/table/src/table-body/render-helper.ts

@@ -201,7 +201,7 @@ function useRender<T>(props: Partial<TableBodyProps<T>>) {
             }
             const childKey = getRowIdentity(node, rowKey.value)
             if (childKey === undefined || childKey === null) {
-              throw new Error('for nested data item, row-key is required.')
+              throw new Error('For nested data item, row-key is required.')
             }
             cur = { ...treeData.value[childKey] }
             // 对于当前节点，分成有无子节点两种情况。

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

@@ -165,7 +165,10 @@ export default defineComponent({
       })
       if (renderDefault instanceof Array) {
         for (const childNode of renderDefault) {
-          if (childNode.type?.name === 'ElTableColumn') {
+          if (
+            childNode.type?.name === 'ElTableColumn' ||
+            childNode.shapeFlag & 2
+          ) {
             children.push(childNode)
           } else if (
             childNode.type === Fragment &&

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

@@ -62,10 +62,10 @@ class TableLayout<T> {
       }
     }
     if (!this.table) {
-      throw new Error('table is required for Table Layout')
+      throw new Error('Table is required for Table Layout')
     }
     if (!this.store) {
-      throw new Error('store is required for Table Layout')
+      throw new Error('Store is required for Table Layout')
     }
   }
 

package/packages/components/table/src/util.ts

@@ -149,7 +149,7 @@ export const getRowIdentity = <T>(
   row: T,
   rowKey: string | ((row: T) => any)
 ): string => {
-  if (!row) throw new Error('row is required when get row identity')
+  if (!row) throw new Error('Row is required when get row identity')
   if (typeof rowKey === 'string') {
     if (rowKey.indexOf('.') < 0) {
       return `${row[rowKey]}`

package/packages/components/tabs/__tests__/tabs.spec.ts

@@ -276,7 +276,7 @@ describe('Tabs.vue', () => {
     expect(panesWrapper.length).toEqual(2)
 
     // add one tab, check panes length and current tab
-    await navWrapper.find('.el-tabs__new-tab').trigger('click')
+    await wrapper.find('.el-tabs__new-tab').trigger('click')
 
     panesWrapper = wrapper.findAllComponents(TabPane)
     navItemsWrapper = navWrapper.findAll('.el-tabs__item')
@@ -362,7 +362,7 @@ describe('Tabs.vue', () => {
     const navWrapper = wrapper.findComponent(TabNav)
     await nextTick()
 
-    await navWrapper.find('.el-tabs__new-tab').trigger('click')
+    await wrapper.find('.el-tabs__new-tab').trigger('click')
 
     let navItemsWrapper = navWrapper.findAll('.el-tabs__item')
     let panesWrapper = wrapper.findAllComponents(TabPane)

package/packages/components/tag/src/tag.ts

@@ -1,30 +1,30 @@
-import { buildProp } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 
-export const tagProps = {
+export const tagProps = buildProps({
   closable: Boolean,
-  type: buildProp({
+  type: {
     type: String,
     values: ['success', 'info', 'warning', 'danger', ''],
     default: '',
-  } as const),
+  },
   hit: Boolean,
   disableTransitions: Boolean,
   color: {
     type: String,
     default: '',
   },
-  size: buildProp({
+  size: {
     type: String,
     values: ['medium', 'small', 'mini'],
-  } as const),
-  effect: buildProp({
+  },
+  effect: {
     type: String,
     values: ['dark', 'light', 'plain'],
     default: 'light',
-  } as const),
-} as const
+  },
+} as const)
 export type TagProps = ExtractPropTypes<typeof tagProps>
 
 export const tagEmits = {

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

@@ -251,7 +251,7 @@ class Node {
   }
 
   insertChild(child?: FakeNode | Node, index?: number, batch?: boolean): void {
-    if (!child) throw new Error('insertChild error: child is required.')
+    if (!child) throw new Error('InsertChild error: child is required.')
 
     if (!(child instanceof Node)) {
       if (!batch) {

package/packages/components/tree-v2/src/virtual-tree.ts

@@ -1,4 +1,4 @@
-import { buildProp, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
 import type { InjectionKey } from 'vue'
 import type { TreeNodeData } from '../../tree/src/tree.type'
 import type {
@@ -33,19 +33,19 @@ export const enum SetOperationEnum {
 }
 
 // props
-export const treeProps = {
-  data: buildProp({
+export const treeProps = buildProps({
+  data: {
     type: definePropType<TreeData>(Array),
     default: () => mutable([] as const),
-  } as const),
-  emptyText: buildProp({
+  },
+  emptyText: {
     type: String,
-  }),
-  height: buildProp({
+  },
+  height: {
     type: Number,
     default: 200,
-  }),
-  props: buildProp({
+  },
+  props: {
     type: definePropType<TreeOptionProps>(Object),
     default: () =>
       mutable({
@@ -54,103 +54,103 @@ export const treeProps = {
         disabled: TreeOptionsEnum.DISABLED,
         value: TreeOptionsEnum.KEY,
       } as const),
-  } as const),
-  highlightCurrent: buildProp({
+  },
+  highlightCurrent: {
     type: Boolean,
     default: false,
-  }),
-  showCheckbox: buildProp({
+  },
+  showCheckbox: {
     type: Boolean,
     default: false,
-  }),
-  defaultCheckedKeys: buildProp({
+  },
+  defaultCheckedKeys: {
     type: definePropType<TreeKey[]>(Array),
     default: () => mutable([] as const),
-  } as const),
+  },
   // Whether checked state of a node not affects its father and
   // child nodes when show-checkbox is true
-  checkStrictly: buildProp({
+  checkStrictly: {
     type: Boolean,
     default: false,
-  }),
-  defaultExpandedKeys: buildProp({
+  },
+  defaultExpandedKeys: {
     type: definePropType<TreeKey[]>(Array),
     default: () => mutable([] as const),
-  } as const),
-  indent: buildProp({
+  },
+  indent: {
     type: Number,
     default: 16,
-  }),
-  icon: buildProp({
+  },
+  icon: {
     type: String,
-  }),
-  expandOnClickNode: buildProp({
+  },
+  expandOnClickNode: {
     type: Boolean,
     default: true,
-  }),
-  checkOnClickNode: buildProp({
+  },
+  checkOnClickNode: {
     type: Boolean,
     default: false,
-  }),
-  currentNodeKey: buildProp({
+  },
+  currentNodeKey: {
     type: definePropType<TreeKey>([String, Number]),
-  } as const),
+  },
   // TODO need to optimization
-  accordion: buildProp({
+  accordion: {
     type: Boolean,
     default: false,
-  }),
-  filterMethod: buildProp({
+  },
+  filterMethod: {
     type: definePropType<FilterMethod>(Function),
-  } as const),
+  },
   // Performance mode will increase memory usage, but scrolling will be smoother
-  perfMode: buildProp({
+  perfMode: {
     type: Boolean,
     default: true,
-  }),
-} as const
+  },
+} as const)
 
-export const treeNodeProps = {
-  node: buildProp({
+export const treeNodeProps = buildProps({
+  node: {
     type: definePropType<TreeNode>(Object),
     default: () => mutable(EMPTY_NODE),
-  } as const),
-  expanded: buildProp({
+  },
+  expanded: {
     type: Boolean,
     default: false,
-  }),
-  checked: buildProp({
+  },
+  checked: {
     type: Boolean,
     default: false,
-  }),
-  indeterminate: buildProp({
+  },
+  indeterminate: {
     type: Boolean,
     default: false,
-  }),
-  showCheckbox: buildProp({
+  },
+  showCheckbox: {
     type: Boolean,
     default: false,
-  }),
-  disabled: buildProp({
+  },
+  disabled: {
     type: Boolean,
     default: false,
-  }),
-  current: buildProp({
+  },
+  current: {
     type: Boolean,
     default: false,
-  }),
-  hiddenExpandIcon: buildProp({
+  },
+  hiddenExpandIcon: {
     type: Boolean,
     default: false,
-  }),
-} as const
+  },
+} as const)
 
-export const treeNodeContentProps = {
-  node: buildProp({
+export const treeNodeContentProps = buildProps({
+  node: {
     type: definePropType<TreeNode>(Object),
     required: true,
-  } as const),
-} as const
+  },
+} as const)
 
 // emits
 export const NODE_CLICK = 'node-click'

package/packages/components/virtual-list/__tests__/fixed-size-grid.spec.ts

@@ -153,7 +153,7 @@ describe('<fixed-size-grid />', () => {
 
       await nextTick()
       expect(wrapper.findAll(ITEM_SELECTOR)).toHaveLength(48)
-      expect(wrapper.find(ITEM_SELECTOR)).toEqual(prevFirstItem)
+      expect(wrapper.find(ITEM_SELECTOR).element).toEqual(prevFirstItem.element)
     })
 
     it('should scrollToItem with correct alignment', async () => {