fix(comp: tree): expand the node being hover, when dragging

.stylelintrc

@@ -6,6 +6,7 @@
     "at-rule-no-unknown": null,
     "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
     "rule-empty-line-before": null,
+    "no-duplicate-selectors": null,
     "no-empty-source": null,
     "no-invalid-double-slash-comments": null,
     "no-invalid-position-at-import-rule": null,

packages/components/table/demo/HeadGroup.vue

@@ -30,6 +30,7 @@ const columns: TableColumn<Data>[] = [
     customCell: 'name',
   },
   {
+    key: 'other',
     title: 'Other',
     children: [
       {
@@ -38,6 +39,7 @@ const columns: TableColumn<Data>[] = [
         width: 150,
       },
       {
+        key: 'address',
         title: 'Address',
         children: [
           {
@@ -47,6 +49,7 @@ const columns: TableColumn<Data>[] = [
             width: 150,
           },
           {
+            key: 'block',
             title: 'Block',
             children: [
               {
@@ -66,6 +69,7 @@ const columns: TableColumn<Data>[] = [
     ],
   },
   {
+    key: 'company',
     title: 'Company',
     children: [
       {

packages/components/table/demo/Server.vue

@@ -22,6 +22,7 @@ interface RandomUser {
 
 const columns: TableColumn<RandomUser>[] = [
   {
+    key: 'Name',
     title: 'Name',
     children: [
       {

packages/components/table/index.ts

@@ -32,7 +32,11 @@ export type {
   TableSize,
   TableColumnAlign,
   TableColumnFixed,
+  TableColumnFilterable,
   TableColumnSortable,
   TableColumnSortOrder,
-  TableColumnFilterable,
+  TableSticky,
 } from './src/types'
+
+// private
+export { getColumnKey as ɵGetColumnKey } from './src/utils'

packages/components/table/src/column.ts

@@ -9,7 +9,7 @@
 
 import { type TableColumnComponent } from './types'
 
-const tableColumnKey = '__IDUX_TABLE_COLUMN'
+const tableColumnKey = Symbol('IxTableColumn')
 
 const TableColumn = (() => {}) as TableColumnComponent
 

packages/components/table/src/composables/useColumns.ts

@@ -10,7 +10,7 @@ import { type ComputedRef, type Slots, type VNode, computed, reactive, ref, watc
 import { isNil } from 'lodash-es'
 
 import { type BreakpointKey, useSharedBreakpoints } from '@idux/cdk/breakpoint'
-import { type VKey, convertArray, flattenNode } from '@idux/cdk/utils'
+import { type VKey, flattenNode } from '@idux/cdk/utils'
 import { type TableColumnBaseConfig, type TableColumnExpandableConfig, type TableConfig } from '@idux/components/config'
 
 import { tableColumnKey } from '../column'
@@ -23,6 +23,7 @@ import {
   type TableColumnSelectable,
   type TableProps,
 } from '../types'
+import { getColumnKey } from '../utils'
 
 export function useColumns(
   props: TableProps,
@@ -139,10 +140,10 @@ function mergeColumns(
 ): TableColumnMerged[] {
   return columns
     .filter(column => !column.responsive || column.responsive.some(key => breakpoints[key]))
-    .map((column, index) => convertColumn(column, breakpoints, baseConfig, expandableConfig, index))
+    .map(column => convertColumn(column, breakpoints, baseConfig, expandableConfig))
 }
 
-function convertColumns(nodes: VNode[] | undefined) {
+export function convertColumns(nodes: VNode[] | undefined): TableColumn[] {
   const columns: Array<TableColumn> = []
 
   flattenNode(nodes, { key: tableColumnKey }).forEach((node, index) => {
@@ -179,12 +180,11 @@ function convertColumn(
   breakpoints: Record<BreakpointKey, boolean>,
   baseConfig: TableColumnBaseConfig,
   expandableConfig: TableColumnExpandableConfig,
-  index: number,
 ): TableColumnMerged {
   const { align = baseConfig.align } = column
+  const key = getColumnKey(column)
 
   if ('type' in column) {
-    const key = `IDUX_TABLE_KEY_${column.type}`
     if (column.type === 'expandable') {
       const { icon = expandableConfig.icon } = column
       return { ...column, key, align, icon }
@@ -194,9 +194,8 @@ function convertColumn(
       return { ...column, key, align, multiple }
     }
   } else {
-    const { key, dataKey, sortable, filterable, children } = column
-    const _key = key ?? (convertArray(dataKey).join('-') || `'IDUX_TABLE_KEY_${index}`)
-    const newColumn = { ...column, key: _key, align }
+    const { sortable, filterable, children } = column
+    const newColumn = { ...column, key, align }
     if (sortable) {
       newColumn.sortable = { ...baseConfig.sortable, ...sortable }
     }
@@ -224,7 +223,7 @@ function useFlattedColumns(
     const columns = flattedColumns.value
     const lastColumn = columns[columns.length - 1]
     return {
-      key: 'IDUX_TABLE_KEY_scroll-bar',
+      key: '__IDUX_table_column_key_scroll-bar',
       type: 'scroll-bar',
       fixed: lastColumn && lastColumn.fixed,
       width: scrollBarSize,

packages/components/table/src/types.ts

@@ -93,6 +93,7 @@ export interface TableColumnCommon<T = any> {
     style?: any
     [key: string]: unknown
   }
+  key?: VKey
   align?: TableColumnAlign
   colSpan?: (record: T, rowIndex: number) => number
   rowSpan?: (record: T, rowIndex: number) => number
@@ -104,9 +105,7 @@ export interface TableColumnCommon<T = any> {
 
 export interface TableColumnBase<T = any, V = any> extends TableColumnCommon<T> {
   dataKey?: VKey | VKey[]
-  editable?: boolean
   ellipsis?: boolean
-  key?: VKey
   sortable?: TableColumnSortable<T>
   filterable?: TableColumnFilterable<T>
   title?: string
@@ -120,23 +119,17 @@ export interface TableColumnBase<T = any, V = any> extends TableColumnCommon<T>
   customTitle?: string | ((data: { title?: string }) => VNodeChild)
 }
 
-export interface TableColumnExpandable<T = any, V = any> extends TableColumnCommon<T> {
+export interface TableColumnExpandable<T = any, V = any> extends TableColumnBase<T, V> {
   type: 'expandable'
-  dataKey?: VKey | VKey[]
   disabled?: (record: T) => boolean
-  editable?: boolean
-  ellipsis?: boolean
-  key?: VKey
+
   icon?: string
   indent?: number
-  title?: string
   trigger?: 'click' | 'dblclick'
 
   onChange?: (expendedRowKeys: VKey[]) => void
   onExpand?: (expanded: boolean, record: T) => void
 
-  customCell?: string | ((data: { value: V; record: T; rowIndex: number }) => VNodeChild)
-  customTitle?: string | ((data: { title?: string }) => VNodeChild)
   customExpand?: string | ((data: { record: T; rowIndex: number }) => VNodeChild)
   customIcon?: string | ((data: { expanded: boolean; record: T }) => VNodeChild)
 }

packages/components/table/src/utils/index.ts

@@ -5,11 +5,15 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
 import { type VNode, type VNodeChild } from 'vue'
 
 import { isString } from 'lodash-es'
 
-import { getFirstValidNode } from '@idux/cdk/utils'
+import { Logger, type VKey, convertArray, getFirstValidNode, uniqueId } from '@idux/cdk/utils'
+
+import { type TableColumn } from '../types'
 
 export function getColTitle(ellipsis: boolean, children: VNodeChild, title: string | undefined): string | undefined {
   if (!ellipsis) {
@@ -27,3 +31,27 @@ export function getColTitle(ellipsis: boolean, children: VNodeChild, title: stri
   }
   return _title
 }
+
+export function getColumnKey(column: TableColumn): VKey {
+  if (column.key) {
+    return column.key
+  }
+  // @ts-ignore
+  if (column.dataKey && column.dataKey) {
+    // @ts-ignore
+    return convertArray(column.dataKey).join('-')
+  }
+  // @ts-ignore
+  if (column.type) {
+    // @ts-ignore
+    return `__IDUX_table_column_key_${column.type}`
+  }
+  __DEV__ &&
+    Logger.warn(
+      'components/table',
+      'Each column in table should have a unique `key`, `dataKey` or `type` prop.',
+      column,
+    )
+
+  return uniqueId('__IDUX_table_column_key_')
+}

packages/components/time-picker/index.ts

@@ -20,5 +20,6 @@ export type {
   TimePickerComponent,
   TimePickerPublicProps as TimePickerProps,
   TimeRangePickerInstance,
+  TimeRangePickerComponent,
   TimeRangePickerPublicProps as TimeRangePickerProps,
 } from './src/types'

packages/components/tree/demo/DragDrop.md

@@ -1,6 +1,6 @@
 ---
 title:
-  zh: 拖拽
+  zh: 可拖拽
   en: Drag and drop
 order: 2
 ---

packages/components/tree/src/composables/useDragDrop.ts

@@ -5,19 +5,16 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { TreeDropType, TreeDroppable, TreeProps } from '../types'
-import type { MergedNode } from './useDataSource'
-import type { ExpandableContext } from './useExpandable'
-import type { VKey } from '@idux/cdk/utils'
-import type { ComputedRef, Ref, WritableComputedRef } from 'vue'
-
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { type ComputedRef, type Ref, computed, onBeforeUnmount, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
 
-import { callEmit } from '@idux/cdk/utils'
+import { type VKey, callEmit } from '@idux/cdk/utils'
 
+import { type TreeDropType, type TreeDroppable, type TreeProps } from '../types'
 import { getChildrenKeys } from '../utils'
+import { type MergedNode } from './useDataSource'
+import { type ExpandableContext } from './useExpandable'
 
 export interface DragDropContext {
   dragKey: ComputedRef<VKey | undefined>
@@ -32,7 +29,7 @@ export interface DragDropContext {
   handleDrop: (evt: DragEvent, node: MergedNode) => void
 }
 
-export function useDragDrop(props: TreeProps, { expandedKeys }: ExpandableContext): DragDropContext {
+export function useDragDrop(props: TreeProps, { expandedKeys, setExpandedKeys }: ExpandableContext): DragDropContext {
   const dragNodeRef = ref<MergedNode>()
   const dragChildrenKeys = ref<VKey[]>()
 
@@ -85,7 +82,7 @@ export function useDragDrop(props: TreeProps, { expandedKeys }: ExpandableContex
     dragNodeRef.value = node
     dragChildrenKeys.value = getChildrenKeys(node)
 
-    delKey(expandedKeys, node.key)
+    delKey(node.key, expandedKeys.value, setExpandedKeys)
 
     window.addEventListener('dragend', handleWindowDragend)
 
@@ -109,7 +106,7 @@ export function useDragDrop(props: TreeProps, { expandedKeys }: ExpandableContex
       if (dragNode.key !== node.key) {
         dragTimer = setTimeout(() => {
           if (dragNodeRef.value && node.children?.length) {
-            addKey(expandedKeys, node.key)
+            addKey(node.key, expandedKeys.value, setExpandedKeys)
           }
           dragTimer = undefined
         }, 1000)
@@ -179,19 +176,19 @@ export function useDragDrop(props: TreeProps, { expandedKeys }: ExpandableContex
   }
 }
 
-function addKey(keysRef: WritableComputedRef<VKey[]>, key: VKey) {
-  const index = keysRef.value.indexOf(key)
+function addKey(key: VKey, keys: VKey[], setKeys: (keys: VKey[]) => void) {
+  const index = keys.indexOf(key)
   if (index === -1) {
-    keysRef.value = [...keysRef.value, key]
+    setKeys([...keys, key])
   }
 }
 
-function delKey(keysRef: WritableComputedRef<VKey[]>, key: VKey) {
-  const index = keysRef.value.indexOf(key)
+function delKey(key: VKey, keys: VKey[], setKeys: (keys: VKey[]) => void) {
+  const index = keys.indexOf(key)
   if (index !== -1) {
-    const tempKeys = [...keysRef.value]
+    const tempKeys = [...keys]
     tempKeys.splice(index, 1)
-    keysRef.value = tempKeys
+    setKeys(tempKeys)
   }
 }
 
@@ -211,13 +208,10 @@ async function calcDropType(
   const { top, height } = (evt.target as HTMLElement).getBoundingClientRect()
   const isTopHalf = clientY < top + height / 2
 
-  const dragRawNode = dragNode.rawNode
-  const dropRawNode = dropNode.rawNode
-
   let dropType: TreeDropType | boolean | undefined
 
   if (droppable) {
-    const dropOptions = { evt, isTopHalf, dragNode: dragRawNode, dropNode: dropRawNode }
+    const dropOptions = { evt, isTopHalf, dragNode: dragNode.rawNode, dropNode: dropNode.rawNode }
     dropType = await droppable(dropOptions)
   }
 

packages/components/tree/src/composables/useExpandable.ts

@@ -5,22 +5,20 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { TreeNode, TreeProps } from '../types'
-import type { MergedNode } from './useDataSource'
-import type { GetNodeKey } from './useGetNodeKey'
-import type { TreeConfig } from '@idux/components/config'
-import type { ComputedRef, Ref, WritableComputedRef } from 'vue'
-
-import { computed, ref, watch } from 'vue'
+import { type ComputedRef, type Ref, computed, ref, watch } from 'vue'
 
 import { VKey, callEmit, useControlledProp } from '@idux/cdk/utils'
+import { type TreeConfig } from '@idux/components/config'
 
+import { type TreeNode, type TreeProps } from '../types'
 import { callChange, getParentKeys } from '../utils'
-import { convertMergeNodes, convertMergedNodeMap } from './useDataSource'
+import { type MergedNode, convertMergeNodes, convertMergedNodeMap } from './useDataSource'
+import { type GetNodeKey } from './useGetNodeKey'
 
 export interface ExpandableContext {
   expandIcon: ComputedRef<string | string[]>
-  expandedKeys: WritableComputedRef<VKey[]>
+  expandedKeys: ComputedRef<VKey[]>
+  setExpandedKeys: (value: VKey[]) => void
   expandAll: () => void
   collapseAll: () => void
   handleExpand: (key: VKey, rawNode: TreeNode) => void
@@ -134,5 +132,5 @@ export function useExpandable(
     setExpandWithSearch(searchedKeys.value)
   }
 
-  return { expandIcon, expandedKeys, expandAll, collapseAll, handleExpand, loadingKeys }
+  return { expandIcon, expandedKeys, setExpandedKeys, expandAll, collapseAll, handleExpand, loadingKeys }
 }

packages/components/tree/src/composables/useSelectable.ts

@@ -8,7 +8,7 @@
 import type { TreeNode, TreeProps } from '../types'
 import type { MergedNode } from './useDataSource'
 import type { VKey } from '@idux/cdk/utils'
-import type { ComputedRef, Ref, WritableComputedRef } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 
 import { computed, ref, watchEffect } from 'vue'
 
@@ -19,7 +19,7 @@ import { callChange } from '../utils'
 export interface SelectableContext {
   activeKey: Ref<VKey | undefined>
   activeNode: ComputedRef<MergedNode | undefined>
-  selectedKeys: WritableComputedRef<VKey[]>
+  selectedKeys: ComputedRef<VKey[]>
   handleSelect: (key: VKey) => void
 }