@antsoo-lib/components 0.1.11 → 0.1.12

package/src/vc-tree/Tree.tsx

@@ -1,1242 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onUnmounted,
-  reactive,
-  shallowRef,
-  toRaw,
-  watch,
-  watchEffect,
-} from 'vue'
-
-import KeyCode from '../_util/KeyCode'
-import classNames from '../_util/classNames'
-import pickAttrs from '../_util/pickAttrs'
-import initDefaultProps from '../_util/props-util/initDefaultProps'
-import { warning } from '../vc-util/warning'
-import DropIndicator from './DropIndicator'
-import NodeList, { MOTION_KEY, MotionEntity } from './NodeList'
-import type { NodeDragEventHandler, NodeMouseEventHandler } from './contextTypes'
-import { TreeContext, useProvideKeysState } from './contextTypes'
-import type { DragNodeEvent, EventDataNode, FlattenNode, Key, ScrollTo } from './interface'
-import type { CheckInfo, DraggableFn } from './props'
-import { treeProps } from './props'
-import useMaxLevel from './useMaxLevel'
-import {
-  arrAdd,
-  arrDel,
-  calcDropPosition,
-  calcSelectedKeys,
-  conductExpandParent,
-  getDragChildrenKeys,
-  parseCheckedKeys,
-  posToArr,
-} from './util'
-import { conductCheck } from './utils/conductUtil'
-import type { TreeNodeRequiredProps } from './utils/treeUtil'
-import {
-  convertDataToEntities,
-  convertNodePropsToEventData,
-  convertTreeToData,
-  fillFieldNames,
-  flattenTreeData,
-  getTreeNodeProps,
-} from './utils/treeUtil'
-
-const MAX_RETRY_TIMES = 10
-
-export interface DraggableConfig {
-  icon?: any
-  nodeDraggable?: DraggableFn
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Tree',
-  inheritAttrs: false,
-  props: initDefaultProps(treeProps(), {
-    prefixCls: 'vc-tree',
-    showLine: false,
-    showIcon: true,
-    selectable: true,
-    multiple: false,
-    checkable: false,
-    disabled: false,
-    checkStrictly: false,
-    draggable: false,
-    expandAction: false,
-    defaultExpandParent: true,
-    autoExpandParent: false,
-    defaultExpandAll: false,
-    defaultExpandedKeys: [],
-    defaultCheckedKeys: [],
-    defaultSelectedKeys: [],
-    dropIndicatorRender: DropIndicator,
-    allowDrop: () => true,
-  }),
-
-  setup(props, { attrs, slots, expose }) {
-    const destroyed = shallowRef(false)
-    let delayedDragEnterLogic: Record<Key, number> = {}
-    const indent = shallowRef()
-    const selectedKeys = shallowRef<Key[]>([])
-    const checkedKeys = shallowRef<Key[]>([])
-    const halfCheckedKeys = shallowRef<Key[]>([])
-    const loadedKeys = shallowRef<Key[]>([])
-    const loadingKeys = shallowRef<Key[]>([])
-    const expandedKeys = shallowRef<Key[]>([])
-    const loadingRetryTimes: Record<Key, number> = {}
-    const dragState = reactive({
-      draggingNodeKey: null,
-      dragChildrenKeys: [],
-
-      // dropTargetKey is the key of abstract-drop-node
-      // the abstract-drop-node is the real drop node when drag and drop
-      // not the DOM drag over node
-      dropTargetKey: null,
-      dropPosition: null, // the drop position of abstract-drop-node, inside 0, top -1, bottom 1
-      dropContainerKey: null, // the container key of abstract-drop-node if dropPosition is -1 or 1
-      dropLevelOffset: null, // the drop level offset of abstract-drag-over-node
-      dropTargetPos: null, // the pos of abstract-drop-node
-      dropAllowed: true, // if drop to abstract-drop-node is allowed
-      // the abstract-drag-over-node
-      // if mouse is on the bottom of top dom node or no the top of the bottom dom node
-      // abstract-drag-over-node is the top node
-      dragOverNodeKey: null,
-    })
-    const treeData = shallowRef([])
-    watch(
-      [() => props.treeData, () => props.children],
-      () => {
-        treeData.value =
-          props.treeData !== undefined
-            ? props.treeData.slice()
-            : convertTreeToData(toRaw(props.children))
-      },
-      {
-        immediate: true,
-        deep: true,
-      },
-    )
-    const keyEntities = shallowRef({})
-
-    const focused = shallowRef(false)
-    const activeKey = shallowRef<Key>(null)
-
-    const listChanging = shallowRef(false)
-
-    const fieldNames = computed(() => fillFieldNames(props.fieldNames))
-
-    const listRef = shallowRef()
-
-    let dragStartMousePosition = null
-
-    let dragNode: DragNodeEvent = null
-
-    let currentMouseOverDroppableNodeKey = null
-
-    const treeNodeRequiredProps = computed<TreeNodeRequiredProps>(() => {
-      return {
-        expandedKeysSet: expandedKeysSet.value,
-        selectedKeysSet: selectedKeysSet.value,
-        loadedKeysSet: loadedKeysSet.value,
-        loadingKeysSet: loadingKeysSet.value,
-        checkedKeysSet: checkedKeysSet.value,
-        halfCheckedKeysSet: halfCheckedKeysSet.value,
-        dragOverNodeKey: dragState.dragOverNodeKey,
-        dropPosition: dragState.dropPosition,
-        keyEntities: keyEntities.value,
-      }
-    })
-    const expandedKeysSet = computed(() => {
-      return new Set(expandedKeys.value)
-    })
-    const selectedKeysSet = computed(() => {
-      return new Set(selectedKeys.value)
-    })
-    const loadedKeysSet = computed(() => {
-      return new Set(loadedKeys.value)
-    })
-    const loadingKeysSet = computed(() => {
-      return new Set(loadingKeys.value)
-    })
-    const checkedKeysSet = computed(() => {
-      return new Set(checkedKeys.value)
-    })
-    const halfCheckedKeysSet = computed(() => {
-      return new Set(halfCheckedKeys.value)
-    })
-
-    watchEffect(() => {
-      if (treeData.value) {
-        const entitiesMap = convertDataToEntities(treeData.value, {
-          fieldNames: fieldNames.value,
-        })
-        keyEntities.value = {
-          [MOTION_KEY]: MotionEntity,
-          ...entitiesMap.keyEntities,
-        }
-      }
-    })
-    let init = false // 处理 defaultXxxx api, 仅仅首次有效
-
-    watch(
-      [() => props.expandedKeys, () => props.autoExpandParent, keyEntities],
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ([_newKeys, newAutoExpandParent], [_oldKeys, oldAutoExpandParent]) => {
-        let keys = expandedKeys.value
-        // ================ expandedKeys =================
-        if (
-          props.expandedKeys !== undefined ||
-          (init && newAutoExpandParent !== oldAutoExpandParent)
-        ) {
-          keys =
-            props.autoExpandParent || (!init && props.defaultExpandParent)
-              ? conductExpandParent(props.expandedKeys, keyEntities.value)
-              : props.expandedKeys
-        } else if (!init && props.defaultExpandAll) {
-          const cloneKeyEntities = { ...keyEntities.value }
-          delete cloneKeyEntities[MOTION_KEY]
-          keys = Object.keys(cloneKeyEntities).map((key) => cloneKeyEntities[key].key)
-        } else if (!init && props.defaultExpandedKeys) {
-          keys =
-            props.autoExpandParent || props.defaultExpandParent
-              ? conductExpandParent(props.defaultExpandedKeys, keyEntities.value)
-              : props.defaultExpandedKeys
-        }
-
-        if (keys) {
-          expandedKeys.value = keys
-        }
-        init = true
-      },
-      { immediate: true },
-    )
-
-    // ================ flattenNodes =================
-    const flattenNodes = shallowRef([])
-    watchEffect(() => {
-      flattenNodes.value = flattenTreeData(treeData.value, expandedKeys.value, fieldNames.value)
-    })
-    // ================ selectedKeys =================
-    watchEffect(() => {
-      if (props.selectable) {
-        if (props.selectedKeys !== undefined) {
-          selectedKeys.value = calcSelectedKeys(props.selectedKeys, props)
-        } else if (!init && props.defaultSelectedKeys) {
-          selectedKeys.value = calcSelectedKeys(props.defaultSelectedKeys, props)
-        }
-      }
-    })
-    const { maxLevel, levelEntities } = useMaxLevel(keyEntities)
-    // ================= checkedKeys =================
-    watchEffect(() => {
-      if (props.checkable) {
-        let checkedKeyEntity
-
-        if (props.checkedKeys !== undefined) {
-          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {}
-        } else if (!init && props.defaultCheckedKeys) {
-          checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {}
-        } else if (treeData.value) {
-          // If `treeData` changed, we also need check it
-          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
-            checkedKeys: checkedKeys.value,
-            halfCheckedKeys: halfCheckedKeys.value,
-          }
-        }
-
-        if (checkedKeyEntity) {
-          let { checkedKeys: newCheckedKeys = [], halfCheckedKeys: newHalfCheckedKeys = [] } =
-            checkedKeyEntity
-
-          if (!props.checkStrictly) {
-            const conductKeys = conductCheck(
-              newCheckedKeys,
-              true,
-              keyEntities.value,
-              maxLevel.value,
-              levelEntities.value,
-            )
-            ;({ checkedKeys: newCheckedKeys, halfCheckedKeys: newHalfCheckedKeys } = conductKeys)
-          }
-
-          checkedKeys.value = newCheckedKeys
-          halfCheckedKeys.value = newHalfCheckedKeys
-        }
-      }
-    })
-
-    // ================= loadedKeys ==================
-    watchEffect(() => {
-      if (props.loadedKeys) {
-        loadedKeys.value = props.loadedKeys
-      }
-    })
-
-    const resetDragState = () => {
-      Object.assign(dragState, {
-        dragOverNodeKey: null,
-        dropPosition: null,
-        dropLevelOffset: null,
-        dropTargetKey: null,
-        dropContainerKey: null,
-        dropTargetPos: null,
-        dropAllowed: false,
-      })
-    }
-    const scrollTo: ScrollTo = (scroll) => {
-      listRef.value.scrollTo(scroll)
-    }
-    watch(
-      () => props.activeKey,
-      () => {
-        if (props.activeKey !== undefined) {
-          activeKey.value = props.activeKey
-        }
-      },
-      { immediate: true },
-    )
-    watch(
-      activeKey,
-      (val) => {
-        nextTick(() => {
-          if (val !== null) {
-            scrollTo({ key: val })
-          }
-        })
-      },
-      { immediate: true, flush: 'post' },
-    )
-    // =========================== Expanded ===========================
-    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
-    const setExpandedKeys = (keys: Key[]) => {
-      if (props.expandedKeys === undefined) {
-        expandedKeys.value = keys
-      }
-    }
-
-    const cleanDragState = () => {
-      if (dragState.draggingNodeKey !== null) {
-        Object.assign(dragState, {
-          draggingNodeKey: null,
-          dropPosition: null,
-          dropContainerKey: null,
-          dropTargetKey: null,
-          dropLevelOffset: null,
-          dropAllowed: true,
-          dragOverNodeKey: null,
-        })
-      }
-      dragStartMousePosition = null
-      currentMouseOverDroppableNodeKey = null
-    }
-    // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
-    const onNodeDragEnd: NodeDragEventHandler = (event, node) => {
-      const { onDragend } = props
-
-      dragState.dragOverNodeKey = null
-
-      cleanDragState()
-
-      onDragend?.({ event, node: node.eventData })
-
-      dragNode = null
-    }
-
-    // since stopPropagation() is called in treeNode
-    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
-    const onWindowDragEnd = (event) => {
-      onNodeDragEnd(event, null, true)
-      window.removeEventListener('dragend', onWindowDragEnd)
-    }
-
-    const onNodeDragStart: NodeDragEventHandler = (event, node) => {
-      const { onDragstart } = props
-      const { eventKey, eventData } = node
-      dragNode = node
-      dragStartMousePosition = {
-        x: event.clientX,
-        y: event.clientY,
-      }
-
-      const newExpandedKeys = arrDel(expandedKeys.value, eventKey)
-
-      dragState.draggingNodeKey = eventKey
-      dragState.dragChildrenKeys = getDragChildrenKeys(eventKey, keyEntities.value)
-      indent.value = listRef.value.getIndentWidth()
-
-      setExpandedKeys(newExpandedKeys)
-      window.addEventListener('dragend', onWindowDragEnd)
-
-      if (onDragstart) {
-        onDragstart({ event, node: eventData })
-      }
-    }
-
-    /**
-     * [Legacy] Select handler is smaller than node,
-     * so that this will trigger when drag enter node or select handler.
-     * This is a little tricky if customize css without padding.
-     * Better for use mouse move event to refresh drag state.
-     * But let's just keep it to avoid event trigger logic change.
-     */
-    const onNodeDragEnter = (event: DragEvent, node: DragNodeEvent) => {
-      const { onDragenter, onExpand, allowDrop, direction } = props
-      const { pos, eventKey } = node
-      // record the key of node which is latest entered, used in dragleave event.
-      if (currentMouseOverDroppableNodeKey !== eventKey) {
-        currentMouseOverDroppableNodeKey = eventKey
-      }
-
-      if (!dragNode) {
-        resetDragState()
-        return
-      }
-      const {
-        dropPosition,
-        dropLevelOffset,
-        dropTargetKey,
-        dropContainerKey,
-        dropTargetPos,
-        dropAllowed,
-        dragOverNodeKey,
-      } = calcDropPosition(
-        event,
-        dragNode,
-        node,
-        indent.value,
-        dragStartMousePosition,
-        allowDrop,
-        flattenNodes.value,
-        keyEntities.value,
-        expandedKeysSet.value,
-        direction,
-      )
-
-      if (
-        // don't allow drop inside its children
-        dragState.dragChildrenKeys.includes(dropTargetKey) ||
-        // don't allow drop when drop is not allowed caculated by calcDropPosition
-        !dropAllowed
-      ) {
-        resetDragState()
-        return
-      }
-
-      // Side effect for delay drag
-      if (!delayedDragEnterLogic) {
-        delayedDragEnterLogic = {}
-      }
-      Object.keys(delayedDragEnterLogic).forEach((key) => {
-        clearTimeout(delayedDragEnterLogic[key])
-      })
-
-      if (dragNode.eventKey !== node.eventKey) {
-        // hoist expand logic here
-        // since if logic is on the bottom
-        // it will be blocked by abstract dragover node check
-        //   => if you dragenter from top, you mouse will still be consider as in the top node
-        delayedDragEnterLogic[pos] = window.setTimeout(() => {
-          if (dragState.draggingNodeKey === null) return
-
-          let newExpandedKeys = expandedKeys.value.slice()
-          const entity = keyEntities.value[node.eventKey]
-
-          if (entity && (entity.children || []).length) {
-            newExpandedKeys = arrAdd(expandedKeys.value, node.eventKey)
-          }
-          setExpandedKeys(newExpandedKeys)
-
-          if (onExpand) {
-            onExpand(newExpandedKeys, {
-              node: node.eventData,
-              expanded: true,
-              nativeEvent: event,
-            })
-          }
-        }, 800)
-      }
-
-      // Skip if drag node is self
-      if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
-        resetDragState()
-        return
-      }
-
-      // Update drag over node and drag state
-      Object.assign(dragState, {
-        dragOverNodeKey,
-        dropPosition,
-        dropLevelOffset,
-        dropTargetKey,
-        dropContainerKey,
-        dropTargetPos,
-        dropAllowed,
-      })
-
-      if (onDragenter) {
-        onDragenter({
-          event,
-          node: node.eventData,
-          expandedKeys: expandedKeys.value,
-        })
-      }
-    }
-
-    const onNodeDragOver = (event: DragEvent, node: DragNodeEvent) => {
-      const { onDragover, allowDrop, direction } = props
-
-      if (!dragNode) {
-        return
-      }
-      const {
-        dropPosition,
-        dropLevelOffset,
-        dropTargetKey,
-        dropContainerKey,
-        dropAllowed,
-        dropTargetPos,
-        dragOverNodeKey,
-      } = calcDropPosition(
-        event,
-        dragNode,
-        node,
-        indent.value,
-        dragStartMousePosition,
-        allowDrop,
-        flattenNodes.value,
-        keyEntities.value,
-        expandedKeysSet.value,
-        direction,
-      )
-
-      if (dragState.dragChildrenKeys.includes(dropTargetKey) || !dropAllowed) {
-        // don't allow drop inside its children
-        // don't allow drop when drop is not allowed caculated by calcDropPosition
-        return
-      }
-
-      // Update drag position
-
-      if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
-        if (
-          !(
-            dragState.dropPosition === null &&
-            dragState.dropLevelOffset === null &&
-            dragState.dropTargetKey === null &&
-            dragState.dropContainerKey === null &&
-            dragState.dropTargetPos === null &&
-            dragState.dropAllowed === false &&
-            dragState.dragOverNodeKey === null
-          )
-        ) {
-          resetDragState()
-        }
-      } else if (
-        !(
-          dropPosition === dragState.dropPosition &&
-          dropLevelOffset === dragState.dropLevelOffset &&
-          dropTargetKey === dragState.dropTargetKey &&
-          dropContainerKey === dragState.dropContainerKey &&
-          dropTargetPos === dragState.dropTargetPos &&
-          dropAllowed === dragState.dropAllowed &&
-          dragOverNodeKey === dragState.dragOverNodeKey
-        )
-      ) {
-        Object.assign(dragState, {
-          dropPosition,
-          dropLevelOffset,
-          dropTargetKey,
-          dropContainerKey,
-          dropTargetPos,
-          dropAllowed,
-          dragOverNodeKey,
-        })
-      }
-
-      if (onDragover) {
-        onDragover({ event, node: node.eventData })
-      }
-    }
-
-    const onNodeDragLeave: NodeDragEventHandler = (event, node) => {
-      // if it is outside the droppable area
-      // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
-      if (
-        currentMouseOverDroppableNodeKey === node.eventKey &&
-        !(event.currentTarget as any).contains(event.relatedTarget as Node)
-      ) {
-        resetDragState()
-        currentMouseOverDroppableNodeKey = null
-      }
-
-      const { onDragleave } = props
-
-      if (onDragleave) {
-        onDragleave({ event, node: node.eventData })
-      }
-    }
-    const onNodeDrop = (event: DragEvent, _node, outsideTree = false) => {
-      const { dragChildrenKeys, dropPosition, dropTargetKey, dropTargetPos, dropAllowed } =
-        dragState
-      if (!dropAllowed) return
-
-      const { onDrop } = props
-
-      dragState.dragOverNodeKey = null
-      cleanDragState()
-
-      if (dropTargetKey === null) return
-      const abstractDropNodeProps = {
-        ...getTreeNodeProps(dropTargetKey, toRaw(treeNodeRequiredProps.value)),
-        active: activeItem.value?.key === dropTargetKey,
-        data: keyEntities.value[dropTargetKey].node,
-      }
-      const dropToChild = dragChildrenKeys.includes(dropTargetKey)
-
-      warning(
-        !dropToChild,
-        "Can not drop to dragNode's children node. Maybe this is a bug of ant-design-vue. Please report an issue.",
-      )
-
-      const posArr = posToArr(dropTargetPos)
-
-      const dropResult = {
-        event,
-        node: convertNodePropsToEventData(abstractDropNodeProps),
-        dragNode: dragNode ? dragNode.eventData : null,
-        dragNodesKeys: [dragNode.eventKey].concat(dragChildrenKeys),
-        dropToGap: dropPosition !== 0,
-        dropPosition: dropPosition + Number(posArr[posArr.length - 1]),
-      }
-
-      if (!outsideTree) {
-        onDrop?.(dropResult)
-      }
-
-      dragNode = null
-    }
-    const triggerExpandActionExpand: NodeMouseEventHandler = (e, treeNode) => {
-      const { expanded, key } = treeNode
-
-      const node = flattenNodes.value.filter((nodeItem) => nodeItem.key === key)[0]
-      const eventNode = convertNodePropsToEventData({
-        ...getTreeNodeProps(key, treeNodeRequiredProps.value),
-        data: node.data,
-      })
-      setExpandedKeys(expanded ? arrDel(expandedKeys.value, key) : arrAdd(expandedKeys.value, key))
-
-      onNodeExpand(e, eventNode)
-    }
-
-    const onNodeClick: NodeMouseEventHandler = (e, treeNode) => {
-      const { onClick, expandAction } = props
-      if (expandAction === 'click') {
-        triggerExpandActionExpand(e, treeNode)
-      }
-      if (onClick) {
-        onClick(e, treeNode)
-      }
-    }
-
-    const onNodeDoubleClick: NodeMouseEventHandler = (e, treeNode) => {
-      const { onDblclick, expandAction } = props
-      if (expandAction === 'doubleclick' || expandAction === 'dblclick') {
-        triggerExpandActionExpand(e, treeNode)
-      }
-      if (onDblclick) {
-        onDblclick(e, treeNode)
-      }
-    }
-
-    const onNodeSelect: NodeMouseEventHandler = (e, treeNode) => {
-      let newSelectedKeys = selectedKeys.value
-      const { onSelect, multiple } = props
-      const { selected } = treeNode
-      const key = treeNode[fieldNames.value.key]
-      const targetSelected = !selected
-
-      // Update selected keys
-      if (!targetSelected) {
-        newSelectedKeys = arrDel(newSelectedKeys, key)
-      } else if (!multiple) {
-        newSelectedKeys = [key]
-      } else {
-        newSelectedKeys = arrAdd(newSelectedKeys, key)
-      }
-
-      // [Legacy] Not found related usage in doc or upper libs
-      const keyEntitiesValue = keyEntities.value
-      const selectedNodes = newSelectedKeys
-        .map((selectedKey) => {
-          const entity = keyEntitiesValue[selectedKey]
-          if (!entity) return null
-
-          return entity.node
-        })
-        .filter((node) => node)
-
-      if (props.selectedKeys === undefined) {
-        selectedKeys.value = newSelectedKeys
-      }
-
-      if (onSelect) {
-        onSelect(newSelectedKeys, {
-          event: 'select',
-          selected: targetSelected,
-          node: treeNode,
-          selectedNodes,
-          nativeEvent: e,
-        })
-      }
-    }
-
-    const onNodeCheck = (e: MouseEvent, treeNode: EventDataNode, checked: boolean) => {
-      const { checkStrictly, onCheck } = props
-      const key = treeNode[fieldNames.value.key]
-
-      // Prepare trigger arguments
-      let checkedObj
-      const eventObj: Partial<CheckInfo> = {
-        event: 'check',
-        node: treeNode,
-        checked,
-        nativeEvent: e,
-      }
-      const keyEntitiesValue = keyEntities.value
-      if (checkStrictly) {
-        const newCheckedKeys = checked
-          ? arrAdd(checkedKeys.value, key)
-          : arrDel(checkedKeys.value, key)
-        const newHalfCheckedKeys = arrDel(halfCheckedKeys.value, key)
-        checkedObj = { checked: newCheckedKeys, halfChecked: newHalfCheckedKeys }
-
-        eventObj.checkedNodes = newCheckedKeys
-          .map((checkedKey) => keyEntitiesValue[checkedKey])
-          .filter((entity) => entity)
-          .map((entity) => entity.node)
-
-        if (props.checkedKeys === undefined) {
-          checkedKeys.value = newCheckedKeys
-        }
-      } else {
-        // Always fill first
-        let { checkedKeys: newCheckedKeys, halfCheckedKeys: newHalfCheckedKeys } = conductCheck(
-          [...checkedKeys.value, key],
-          true,
-          keyEntitiesValue,
-          maxLevel.value,
-          levelEntities.value,
-        )
-
-        // If remove, we do it again to correction
-        if (!checked) {
-          const keySet = new Set(newCheckedKeys)
-          keySet.delete(key)
-          ;({ checkedKeys: newCheckedKeys, halfCheckedKeys: newHalfCheckedKeys } = conductCheck(
-            Array.from(keySet),
-            { checked: false, halfCheckedKeys: newHalfCheckedKeys },
-            keyEntitiesValue,
-            maxLevel.value,
-            levelEntities.value,
-          ))
-        }
-
-        checkedObj = newCheckedKeys
-
-        // [Legacy] This is used for vc-tree-select`
-        eventObj.checkedNodes = []
-        eventObj.checkedNodesPositions = []
-        eventObj.halfCheckedKeys = newHalfCheckedKeys
-        newCheckedKeys.forEach((checkedKey) => {
-          const entity = keyEntitiesValue[checkedKey]
-          if (!entity) return
-
-          const { node, pos } = entity
-          eventObj.checkedNodes.push(node)
-          eventObj.checkedNodesPositions.push({ node, pos })
-        })
-        if (props.checkedKeys === undefined) {
-          checkedKeys.value = newCheckedKeys
-          halfCheckedKeys.value = newHalfCheckedKeys
-        }
-      }
-
-      if (onCheck) {
-        onCheck(checkedObj, eventObj as CheckInfo)
-      }
-    }
-
-    const onNodeLoad = (treeNode: EventDataNode) => {
-      const key = treeNode[fieldNames.value.key]
-      const loadPromise = new Promise<void>((resolve, reject) => {
-        // We need to get the latest state of loading/loaded keys
-        const { loadData, onLoad } = props
-
-        if (!loadData || loadedKeysSet.value.has(key) || loadingKeysSet.value.has(key)) {
-          return null
-        }
-
-        // Process load data
-        const promise = loadData(treeNode)
-        promise
-          .then(() => {
-            const newLoadedKeys = arrAdd(loadedKeys.value, key)
-            const newLoadingKeys = arrDel(loadingKeys.value, key)
-
-            // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
-            // https://github.com/ant-design/ant-design/issues/12464
-            if (onLoad) {
-              onLoad(newLoadedKeys, {
-                event: 'load',
-                node: treeNode,
-              })
-            }
-
-            if (props.loadedKeys === undefined) {
-              loadedKeys.value = newLoadedKeys
-            }
-            loadingKeys.value = newLoadingKeys
-            resolve()
-          })
-          .catch((e) => {
-            const newLoadingKeys = arrDel(loadingKeys.value, key)
-            loadingKeys.value = newLoadingKeys
-
-            // If exceed max retry times, we give up retry
-            loadingRetryTimes[key] = (loadingRetryTimes[key] || 0) + 1
-            if (loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
-              warning(false, 'Retry for `loadData` many times but still failed. No more retry.')
-              const newLoadedKeys = arrAdd(loadedKeys.value, key)
-              if (props.loadedKeys === undefined) {
-                loadedKeys.value = newLoadedKeys
-              }
-              resolve()
-            }
-
-            reject(e)
-          })
-
-        loadingKeys.value = arrAdd(loadingKeys.value, key)
-      })
-      // Not care warning if we ignore this
-      loadPromise.catch(() => {})
-
-      return loadPromise
-    }
-    const onNodeMouseEnter: NodeMouseEventHandler = (event, node) => {
-      const { onMouseenter } = props
-      if (onMouseenter) {
-        onMouseenter({ event, node })
-      }
-    }
-
-    const onNodeMouseLeave: NodeMouseEventHandler = (event, node) => {
-      const { onMouseleave } = props
-      if (onMouseleave) {
-        onMouseleave({ event, node })
-      }
-    }
-
-    const onNodeContextMenu: NodeMouseEventHandler = (event, node) => {
-      const { onRightClick } = props
-      if (onRightClick) {
-        event.preventDefault()
-        onRightClick({ event, node })
-      }
-    }
-
-    const onFocus = (e: FocusEvent) => {
-      const { onFocus } = props
-      focused.value = true
-      if (onFocus) {
-        onFocus(e)
-      }
-    }
-
-    const onBlur = (e: FocusEvent) => {
-      const { onBlur } = props
-      focused.value = false
-      onActiveChange(null)
-
-      if (onBlur) {
-        onBlur(e)
-      }
-    }
-
-    const onNodeExpand = (e: MouseEvent, treeNode: EventDataNode) => {
-      let newExpandedKeys = expandedKeys.value
-      const { onExpand, loadData } = props
-      const { expanded } = treeNode
-      const key = treeNode[fieldNames.value.key]
-
-      // Do nothing when motion is in progress
-      if (listChanging.value) {
-        return
-      }
-
-      // Update selected keys
-      const index = newExpandedKeys.indexOf(key)
-      const targetExpanded = !expanded
-
-      warning(
-        (expanded && index !== -1) || (!expanded && index === -1),
-        'Expand state not sync with index check',
-      )
-
-      if (targetExpanded) {
-        newExpandedKeys = arrAdd(newExpandedKeys, key)
-      } else {
-        newExpandedKeys = arrDel(newExpandedKeys, key)
-      }
-
-      setExpandedKeys(newExpandedKeys)
-
-      if (onExpand) {
-        onExpand(newExpandedKeys, {
-          node: treeNode,
-          expanded: targetExpanded,
-          nativeEvent: e,
-        })
-      }
-
-      // Async Load data
-      if (targetExpanded && loadData) {
-        const loadPromise = onNodeLoad(treeNode)
-        if (loadPromise) {
-          loadPromise
-            .then(() => {
-              // [Legacy] Refresh logic
-              // const newFlattenTreeData = flattenTreeData(
-              //   treeData.value,
-              //   newExpandedKeys,
-              //   fieldNames.value,
-              // );
-              // flattenNodes.value = newFlattenTreeData;
-            })
-            .catch((e) => {
-              const expandedKeysToRestore = arrDel(expandedKeys.value, key)
-              setExpandedKeys(expandedKeysToRestore)
-              Promise.reject(e)
-            })
-        }
-      }
-    }
-
-    const onListChangeStart = () => {
-      listChanging.value = true
-    }
-
-    const onListChangeEnd = () => {
-      setTimeout(() => {
-        listChanging.value = false
-      })
-    }
-
-    // =========================== Keyboard ===========================
-    const onActiveChange = (newActiveKey: Key) => {
-      const { onActiveChange } = props
-
-      if (activeKey.value === newActiveKey) {
-        return
-      }
-      if (props.activeKey !== undefined) {
-        activeKey.value = newActiveKey
-      }
-      if (newActiveKey !== null) {
-        scrollTo({ key: newActiveKey })
-      }
-
-      if (onActiveChange) {
-        onActiveChange(newActiveKey)
-      }
-    }
-
-    const activeItem = computed<FlattenNode>(() => {
-      if (activeKey.value === null) {
-        return null
-      }
-
-      return flattenNodes.value.find(({ key }) => key === activeKey.value) || null
-    })
-
-    const offsetActiveKey = (offset: number) => {
-      let index = flattenNodes.value.findIndex(({ key }) => key === activeKey.value)
-      // Align with index
-      if (index === -1 && offset < 0) {
-        index = flattenNodes.value.length
-      }
-
-      index = (index + offset + flattenNodes.value.length) % flattenNodes.value.length
-
-      const item = flattenNodes.value[index]
-      if (item) {
-        const { key } = item
-        onActiveChange(key)
-      } else {
-        onActiveChange(null)
-      }
-    }
-    const activeItemEventNode = computed(() => {
-      return convertNodePropsToEventData({
-        ...getTreeNodeProps(activeKey.value, treeNodeRequiredProps.value),
-        data: activeItem.value.data,
-        active: true,
-      })
-    })
-    const onKeydown = (event) => {
-      const { onKeydown, checkable, selectable } = props
-
-      // >>>>>>>>>> Direction
-      switch (event.which) {
-        case KeyCode.UP: {
-          offsetActiveKey(-1)
-          event.preventDefault()
-          break
-        }
-        case KeyCode.DOWN: {
-          offsetActiveKey(1)
-          event.preventDefault()
-          break
-        }
-      }
-
-      // >>>>>>>>>> Expand & Selection
-      const item = activeItem.value
-      if (item && item.data) {
-        const expandable = item.data.isLeaf === false || !!(item.data.children || []).length
-        const eventNode = activeItemEventNode.value
-
-        switch (event.which) {
-          // >>> Expand
-          case KeyCode.LEFT: {
-            // Collapse if possible
-            if (expandable && expandedKeysSet.value.has(activeKey.value)) {
-              onNodeExpand({} as MouseEvent, eventNode)
-            } else if (item.parent) {
-              onActiveChange(item.parent.key)
-            }
-            event.preventDefault()
-            break
-          }
-          case KeyCode.RIGHT: {
-            // Expand if possible
-            if (expandable && !expandedKeysSet.value.has(activeKey.value)) {
-              onNodeExpand({} as MouseEvent, eventNode)
-            } else if (item.children && item.children.length) {
-              onActiveChange(item.children[0].key)
-            }
-            event.preventDefault()
-            break
-          }
-
-          // Selection
-          case KeyCode.ENTER:
-          case KeyCode.SPACE: {
-            if (
-              checkable &&
-              !eventNode.disabled &&
-              eventNode.checkable !== false &&
-              !eventNode.disableCheckbox
-            ) {
-              onNodeCheck({} as MouseEvent, eventNode, !checkedKeysSet.value.has(activeKey.value))
-            } else if (
-              !checkable &&
-              selectable &&
-              !eventNode.disabled &&
-              eventNode.selectable !== false
-            ) {
-              onNodeSelect({} as MouseEvent, eventNode)
-            }
-            break
-          }
-        }
-      }
-
-      if (onKeydown) {
-        onKeydown(event)
-      }
-    }
-    expose({
-      onNodeExpand,
-      scrollTo,
-      onKeydown,
-      selectedKeys: computed(() => selectedKeys.value),
-      checkedKeys: computed(() => checkedKeys.value),
-      halfCheckedKeys: computed(() => halfCheckedKeys.value),
-      loadedKeys: computed(() => loadedKeys.value),
-      loadingKeys: computed(() => loadingKeys.value),
-      expandedKeys: computed(() => expandedKeys.value),
-    })
-    onUnmounted(() => {
-      window.removeEventListener('dragend', onWindowDragEnd)
-      destroyed.value = true
-    })
-    useProvideKeysState({
-      expandedKeys,
-      selectedKeys,
-      loadedKeys,
-      loadingKeys,
-      checkedKeys,
-      halfCheckedKeys,
-      expandedKeysSet,
-      selectedKeysSet,
-      loadedKeysSet,
-      loadingKeysSet,
-      checkedKeysSet,
-      halfCheckedKeysSet,
-      flattenNodes,
-    })
-    return () => {
-      const {
-        // focused,
-        // flattenNodes,
-        // keyEntities,
-        draggingNodeKey,
-        // activeKey,
-        dropLevelOffset,
-        dropContainerKey,
-        dropTargetKey,
-        dropPosition,
-        dragOverNodeKey,
-        // indent,
-      } = dragState
-      const {
-        prefixCls,
-        showLine,
-        focusable,
-        tabindex = 0,
-        selectable,
-        showIcon,
-        icon = slots.icon,
-        switcherIcon,
-        draggable,
-        checkable,
-        checkStrictly,
-        disabled,
-        motion,
-        loadData,
-        filterTreeNode,
-        height,
-        itemHeight,
-        virtual,
-        dropIndicatorRender,
-        onContextmenu,
-        onScroll,
-        direction,
-        rootClassName,
-        rootStyle,
-      } = props
-
-      const { class: className, style } = attrs
-      const domProps = pickAttrs(
-        { ...props, ...attrs },
-        {
-          aria: true,
-          data: true,
-        },
-      )
-
-      // It's better move to hooks but we just simply keep here
-      let draggableConfig: DraggableConfig | false
-      if (draggable) {
-        if (typeof draggable === 'object') {
-          draggableConfig = draggable
-        } else if (typeof draggable === 'function') {
-          draggableConfig = {
-            nodeDraggable: draggable,
-          }
-        } else {
-          draggableConfig = {}
-        }
-      } else {
-        draggableConfig = false
-      }
-      return (
-        <TreeContext
-          value={{
-            prefixCls,
-            selectable,
-            showIcon,
-            icon,
-            switcherIcon,
-            draggable: draggableConfig,
-            draggingNodeKey,
-            checkable,
-            customCheckable: slots.checkable,
-            checkStrictly,
-            disabled,
-            keyEntities: keyEntities.value,
-            dropLevelOffset,
-            dropContainerKey,
-            dropTargetKey,
-            dropPosition,
-            dragOverNodeKey,
-            dragging: draggingNodeKey !== null,
-            indent: indent.value,
-            direction,
-            dropIndicatorRender,
-
-            loadData,
-            filterTreeNode,
-
-            onNodeClick,
-            onNodeDoubleClick,
-            onNodeExpand,
-            onNodeSelect,
-            onNodeCheck,
-            onNodeLoad,
-            onNodeMouseEnter,
-            onNodeMouseLeave,
-            onNodeContextMenu,
-            onNodeDragStart,
-            onNodeDragEnter,
-            onNodeDragOver,
-            onNodeDragLeave,
-            onNodeDragEnd,
-            onNodeDrop,
-            slots,
-          }}
-        >
-          <div
-            role="tree"
-            class={classNames(prefixCls, className, rootClassName, {
-              [`${prefixCls}-show-line`]: showLine,
-              [`${prefixCls}-focused`]: focused.value,
-              [`${prefixCls}-active-focused`]: activeKey.value !== null,
-            })}
-            style={rootStyle}
-          >
-            <NodeList
-              ref={listRef}
-              prefixCls={prefixCls}
-              style={style}
-              disabled={disabled}
-              selectable={selectable}
-              checkable={!!checkable}
-              motion={motion}
-              height={height}
-              itemHeight={itemHeight}
-              virtual={virtual}
-              focusable={focusable}
-              focused={focused.value}
-              tabindex={tabindex}
-              activeItem={activeItem.value}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              onKeydown={onKeydown}
-              onActiveChange={onActiveChange}
-              onListChangeStart={onListChangeStart}
-              onListChangeEnd={onListChangeEnd}
-              onContextmenu={onContextmenu}
-              onScroll={onScroll}
-              {...domProps}
-            />
-          </div>
-        </TreeContext>
-      )
-    }
-  },
-})