youwei-element-plus 0.0.1

package/packages/components/tree-v2/src/tree-node-content.ts

@@ -0,0 +1,24 @@
+import { defineComponent, h, inject } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
+import ElText from '@element-plus/components/text'
+import { ROOT_TREE_INJECTION_KEY, treeNodeContentProps } from './virtual-tree'
+
+export default defineComponent({
+  name: 'ElTreeNodeContent',
+  props: treeNodeContentProps,
+  setup(props) {
+    const tree = inject(ROOT_TREE_INJECTION_KEY)
+    const ns = useNamespace('tree')
+    return () => {
+      const node = props.node
+      const { data } = node!
+      return tree?.ctx.slots.default
+        ? tree.ctx.slots.default({ node, data })
+        : h(
+            ElText,
+            { tag: 'span', truncated: true, class: ns.be('node', 'label') },
+            () => [node?.label]
+          )
+    }
+  },
+})

package/packages/components/tree-v2/src/tree-node.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    ref="node$"
+    :class="[
+      ns.b('node'),
+      ns.is('expanded', expanded),
+      ns.is('current', current),
+      ns.is('focusable', !disabled),
+      ns.is('checked', !disabled && checked),
+      getNodeClass(node),
+    ]"
+    role="treeitem"
+    tabindex="-1"
+    :aria-expanded="expanded"
+    :aria-disabled="disabled"
+    :aria-checked="checked"
+    :data-key="node?.key"
+    @click.stop="handleClick"
+    @contextmenu="handleContextMenu"
+    @dragover.prevent
+    @dragenter.prevent
+    @drop.stop="handleDrop"
+  >
+    <div
+      :class="ns.be('node', 'content')"
+      :style="{
+        paddingLeft: `${(node.level - 1) * indent}px`,
+        height: itemSize + 'px',
+      }"
+    >
+      <el-icon
+        v-if="icon"
+        :class="[
+          ns.is('leaf', !!node?.isLeaf),
+          ns.is('hidden', hiddenExpandIcon),
+          {
+            expanded: !node?.isLeaf && expanded,
+          },
+          ns.be('node', 'expand-icon'),
+        ]"
+        @click.stop="handleExpandIconClick"
+      >
+        <component :is="icon" />
+      </el-icon>
+      <el-checkbox
+        v-if="showCheckbox"
+        :model-value="checked"
+        :indeterminate="indeterminate"
+        :disabled="disabled"
+        @change="handleCheckChange"
+        @click.stop
+      />
+      <el-node-content :node="{ ...node, expanded }" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import ElIcon from '@element-plus/components/icon'
+import { CaretRight } from '@element-plus/icons-vue'
+import ElCheckbox from '@element-plus/components/checkbox'
+import { useNamespace } from '@element-plus/hooks'
+import { isFunction, isString, mutable } from '@element-plus/utils'
+import ElNodeContent from './tree-node-content'
+import {
+  EMPTY_NODE,
+  NODE_CONTEXTMENU,
+  ROOT_TREE_INJECTION_KEY,
+  treeNodeEmits,
+} from './virtual-tree'
+
+import type { TreeNode, TreeNodeProps } from './types'
+import type { CheckboxValueType } from '@element-plus/components/checkbox'
+
+defineOptions({
+  name: 'ElTreeNode',
+})
+
+const props = withDefaults(defineProps<TreeNodeProps>(), {
+  node: () => mutable(EMPTY_NODE),
+  itemSize: 26,
+})
+const emit = defineEmits(treeNodeEmits)
+
+const tree = inject(ROOT_TREE_INJECTION_KEY)
+const ns = useNamespace('tree')
+
+const indent = computed(() => tree?.props.indent ?? 16)
+const icon = computed(() => tree?.props.icon ?? CaretRight)
+
+const getNodeClass = (node: TreeNode) => {
+  const nodeClassFunc = tree?.props.props?.class
+  if (!nodeClassFunc) return {}
+
+  let className
+  if (isFunction(nodeClassFunc)) {
+    const { data } = node
+    className = nodeClassFunc(data, node)
+  } else {
+    className = nodeClassFunc
+  }
+
+  return isString(className) ? { [className]: true } : className
+}
+
+const handleClick = (e: MouseEvent) => {
+  emit('click', props.node, e)
+}
+const handleDrop = (e: DragEvent) => {
+  emit('drop', props.node, e)
+}
+const handleExpandIconClick = () => {
+  emit('toggle', props.node)
+}
+const handleCheckChange = (value: CheckboxValueType) => {
+  emit('check', props.node, value)
+}
+
+const handleContextMenu = (event: Event) => {
+  if (tree?.instance?.vnode?.props?.['onNodeContextmenu']) {
+    event.stopPropagation()
+    event.preventDefault()
+  }
+  tree?.ctx.emit(NODE_CONTEXTMENU, event, props.node?.data, props.node)
+}
+</script>

package/packages/components/tree-v2/src/tree.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    :class="[ns.b(), { [ns.m('highlight-current')]: highlightCurrent }]"
+    role="tree"
+  >
+    <fixed-size-list
+      v-if="isNotEmpty"
+      ref="listRef"
+      :class-name="ns.b('virtual-list')"
+      :data="flattenTree"
+      :total="flattenTree.length"
+      :height="height"
+      :item-size="treeNodeSize"
+      :perf-mode="perfMode"
+      :scrollbar-always-on="scrollbarAlwaysOn"
+    >
+      <template #default="{ data, index, style }">
+        <el-tree-node
+          :key="data[index].key"
+          :style="style"
+          :node="data[index]"
+          :expanded="data[index].expanded"
+          :show-checkbox="showCheckbox"
+          :checked="isChecked(data[index])"
+          :indeterminate="isIndeterminate(data[index])"
+          :item-size="treeNodeSize"
+          :disabled="isDisabled(data[index])"
+          :current="isCurrent(data[index])"
+          :hidden-expand-icon="isForceHiddenExpandIcon(data[index])"
+          @click="handleNodeClick"
+          @toggle="toggleExpand"
+          @check="handleNodeCheck"
+          @drop="handleNodeDrop"
+        />
+      </template>
+    </fixed-size-list>
+    <div v-else :class="ns.e('empty-block')">
+      <slot name="empty">
+        <span :class="ns.e('empty-text')">
+          {{ emptyText ?? t('el.tree.emptyText') }}
+        </span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, provide, useSlots } from 'vue'
+import { useLocale, useNamespace } from '@element-plus/hooks'
+import { formItemContextKey } from '@element-plus/components/form'
+import { FixedSizeList } from '@element-plus/components/virtual-list'
+import { useTree } from './composables/useTree'
+import ElTreeNode from './tree-node.vue'
+import {
+  ROOT_TREE_INJECTION_KEY,
+  TreeOptionsEnum,
+  treeEmits,
+} from './virtual-tree'
+import { mutable } from '@element-plus/utils'
+
+import type { TreeProps } from './types'
+
+defineOptions({
+  name: 'ElTreeV2',
+})
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  data: () => mutable([]),
+  height: 200,
+  props: () =>
+    mutable({
+      children: TreeOptionsEnum.CHILDREN,
+      label: TreeOptionsEnum.LABEL,
+      disabled: TreeOptionsEnum.DISABLED,
+      value: TreeOptionsEnum.KEY,
+      class: TreeOptionsEnum.CLASS,
+    }),
+  defaultCheckedKeys: () => mutable([]),
+  defaultExpandedKeys: () => mutable([]),
+  indent: 16,
+  itemSize: 26,
+  expandOnClickNode: true,
+  checkOnClickLeaf: true,
+  perfMode: true,
+})
+const emit = defineEmits(treeEmits)
+
+const slots = useSlots()
+
+const treeNodeSize = computed(() => props.itemSize)
+
+provide(ROOT_TREE_INJECTION_KEY, {
+  ctx: {
+    emit,
+    slots,
+  },
+  props,
+  instance: getCurrentInstance()!,
+})
+provide(formItemContextKey, undefined)
+const { t } = useLocale()
+const ns = useNamespace('tree')
+const {
+  flattenTree,
+  isNotEmpty,
+  listRef,
+  toggleExpand,
+  isIndeterminate,
+  isChecked,
+  isDisabled,
+  isCurrent,
+  isForceHiddenExpandIcon,
+  handleNodeClick,
+  handleNodeDrop,
+  handleNodeCheck,
+  // expose
+  toggleCheckbox,
+  getCurrentNode,
+  getCurrentKey,
+  setCurrentKey,
+  getCheckedKeys,
+  getCheckedNodes,
+  getHalfCheckedKeys,
+  getHalfCheckedNodes,
+  setChecked,
+  setCheckedKeys,
+  filter,
+  setData,
+  getNode,
+  expandNode,
+  collapseNode,
+  setExpandedKeys,
+  scrollToNode,
+  scrollTo,
+} = useTree(props, emit)
+
+defineExpose({
+  toggleCheckbox,
+  getCurrentNode,
+  getCurrentKey,
+  setCurrentKey,
+  getCheckedKeys,
+  getCheckedNodes,
+  getHalfCheckedKeys,
+  getHalfCheckedNodes,
+  setChecked,
+  setCheckedKeys,
+  filter,
+  setData,
+  getNode,
+  expandNode,
+  collapseNode,
+  setExpandedKeys,
+  scrollToNode,
+  scrollTo,
+})
+</script>

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

@@ -0,0 +1,124 @@
+import type { IconPropType } from '@element-plus/utils'
+import type {
+  ComponentInternalInstance,
+  ExtractPublicPropTypes,
+  SetupContext,
+} from 'vue'
+import type { treeEmits, treeProps } from './virtual-tree'
+
+export type TreeNodeData = Record<string, any>
+
+export type TreeData = TreeNodeData[]
+
+export type TreeKey = string | number
+
+export interface TreeOptionProps {
+  children?: string
+  label?: string
+  value?: string
+  disabled?: string
+  class?:
+    | ((
+        data: TreeNodeData,
+        node: TreeNode
+      ) => string | { [key: string]: boolean })
+    | string
+}
+
+export interface TreeProps {
+  data?: TreeData
+  emptyText?: string
+  height?: number
+  props?: TreeOptionProps
+  highlightCurrent?: boolean
+  showCheckbox?: boolean
+  defaultCheckedKeys?: TreeKey[]
+  // Whether checked state of a node not affects its father and
+  // child nodes when show-checkbox is true
+  checkStrictly?: boolean
+  defaultExpandedKeys?: TreeKey[]
+  indent?: number
+  itemSize?: number
+  icon?: IconPropType
+  expandOnClickNode?: boolean
+  checkOnClickNode?: boolean
+  checkOnClickLeaf?: boolean
+  currentNodeKey?: string | number
+  accordion?: boolean
+  filterMethod?: FilterMethod
+  // Performance mode will increase memory usage, but scrolling will be smoother
+  perfMode?: boolean
+  /**
+   * @description always show scrollbar
+   */
+  scrollbarAlwaysOn?: boolean
+}
+
+export interface TreeNodeProps {
+  node?: TreeNode
+  expanded?: boolean
+  checked?: boolean
+  indeterminate?: boolean
+  showCheckbox?: boolean
+  disabled?: boolean
+  current?: boolean
+  hiddenExpandIcon?: boolean
+  itemSize?: number
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `TreeProps` instead.
+ */
+export type TreePropsPublic = ExtractPublicPropTypes<typeof treeProps>
+
+export interface TreeNode {
+  key: TreeKey
+  level: number
+  parent?: TreeNode
+  children?: TreeNode[]
+  data: TreeNodeData
+  disabled?: boolean
+  label?: string
+  isLeaf?: boolean
+  expanded?: boolean
+
+  /**
+   * Determines whether the current tree node is effectively checked.
+   *
+   * Rules:
+   * 1. A disabled leaf node is always considered checked.
+   * 2. A non-disabled leaf node reflects its actual checked state.
+   * 3. A non-leaf node is considered checked only when:
+   *    - All of its child nodes are effectively checked, and
+   *    - Each child follows the same evaluation rules:
+   *      - Disabled leaf nodes follow rule #1.
+   *      - Non-leaf child nodes are recursively evaluated under this rule (#3).
+   */
+  isEffectivelyChecked?: boolean
+}
+
+export interface TreeContext {
+  ctx: Omit<SetupContext<typeof treeEmits>, 'expose' | 'attrs'>
+  instance: ComponentInternalInstance
+  props: TreeProps
+}
+
+export interface Tree {
+  treeNodeMap: Map<TreeKey, TreeNode>
+  levelTreeNodeMap: Map<number, TreeNode[]>
+  treeNodes: TreeNode[]
+  maxLevel: number
+}
+
+export type FilterMethod = (
+  query: string,
+  data: TreeNodeData,
+  node: TreeNode
+) => boolean
+
+export interface CheckedInfo {
+  checkedKeys: TreeKey[]
+  checkedNodes: TreeData
+  halfCheckedKeys: TreeKey[]
+  halfCheckedNodes: TreeData
+}

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

@@ -0,0 +1,181 @@
+import {
+  buildProps,
+  definePropType,
+  iconPropType,
+  isBoolean,
+  mutable,
+} from '@element-plus/utils'
+
+import type { CheckboxValueType } from '@element-plus/components/checkbox'
+import type { InjectionKey } from 'vue'
+import type { TreeNodeData } from '@element-plus/components/tree/src/tree.type'
+import type {
+  CheckedInfo,
+  FilterMethod,
+  TreeContext,
+  TreeData,
+  TreeKey,
+  TreeNode,
+  TreeOptionProps,
+} from './types'
+
+// constants
+export const ROOT_TREE_INJECTION_KEY: InjectionKey<TreeContext> = Symbol()
+export const EMPTY_NODE = {
+  key: -1,
+  level: -1,
+  data: {},
+} as const
+
+// enums
+export enum TreeOptionsEnum {
+  KEY = 'id',
+  LABEL = 'label',
+  CHILDREN = 'children',
+  DISABLED = 'disabled',
+  CLASS = '',
+}
+
+export const enum SetOperationEnum {
+  ADD = 'add',
+  DELETE = 'delete',
+}
+
+const itemSize = {
+  type: Number,
+  default: 26,
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `TreeProps` instead.
+ */
+export const treeProps = buildProps({
+  data: {
+    type: definePropType<TreeData>(Array),
+    default: () => mutable([] as const),
+  },
+  emptyText: {
+    type: String,
+  },
+  height: {
+    type: Number,
+    default: 200,
+  },
+  props: {
+    type: definePropType<TreeOptionProps>(Object),
+    default: () =>
+      mutable({
+        children: TreeOptionsEnum.CHILDREN,
+        label: TreeOptionsEnum.LABEL,
+        disabled: TreeOptionsEnum.DISABLED,
+        value: TreeOptionsEnum.KEY,
+        class: TreeOptionsEnum.CLASS,
+      } as const),
+  },
+  highlightCurrent: Boolean,
+  showCheckbox: Boolean,
+  defaultCheckedKeys: {
+    type: definePropType<TreeKey[]>(Array),
+    default: () => mutable([] as const),
+  },
+  // Whether checked state of a node not affects its father and
+  // child nodes when show-checkbox is true
+  checkStrictly: Boolean,
+  defaultExpandedKeys: {
+    type: definePropType<TreeKey[]>(Array),
+    default: () => mutable([] as const),
+  },
+  indent: {
+    type: Number,
+    default: 16,
+  },
+  itemSize,
+  icon: {
+    type: iconPropType,
+  },
+  expandOnClickNode: {
+    type: Boolean,
+    default: true,
+  },
+  checkOnClickNode: Boolean,
+  checkOnClickLeaf: {
+    type: Boolean,
+    default: true,
+  },
+  currentNodeKey: {
+    type: definePropType<TreeKey>([String, Number]),
+  },
+  // TODO need to optimization
+  accordion: Boolean,
+  filterMethod: {
+    type: definePropType<FilterMethod>(Function),
+  },
+  // Performance mode will increase memory usage, but scrolling will be smoother
+  perfMode: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description always show scrollbar
+   */
+  scrollbarAlwaysOn: Boolean,
+} as const)
+
+/**
+ * @deprecated Removed after 3.0.0, Use `TreeNodeProps` instead.
+ */
+export const treeNodeProps = buildProps({
+  node: {
+    type: definePropType<TreeNode>(Object),
+    default: () => mutable(EMPTY_NODE),
+  },
+  expanded: Boolean,
+  checked: Boolean,
+  indeterminate: Boolean,
+  showCheckbox: Boolean,
+  disabled: Boolean,
+  current: Boolean,
+  hiddenExpandIcon: Boolean,
+  itemSize,
+} as const)
+
+export const treeNodeContentProps = buildProps({
+  node: {
+    type: definePropType<TreeNode>(Object),
+    required: true,
+  },
+} as const)
+
+// emits
+export const NODE_CLICK = 'node-click'
+export const NODE_DROP = 'node-drop'
+export const NODE_EXPAND = 'node-expand'
+export const NODE_COLLAPSE = 'node-collapse'
+export const CURRENT_CHANGE = 'current-change'
+export const NODE_CHECK = 'check'
+export const NODE_CHECK_CHANGE = 'check-change'
+export const NODE_CONTEXTMENU = 'node-contextmenu'
+
+export const treeEmits = {
+  [NODE_CLICK]: (data: TreeNodeData, node: TreeNode, e: MouseEvent) =>
+    data && node && e,
+  [NODE_DROP]: (data: TreeNodeData, node: TreeNode, e: DragEvent) =>
+    data && node && e,
+  [NODE_EXPAND]: (data: TreeNodeData, node: TreeNode) => data && node,
+  [NODE_COLLAPSE]: (data: TreeNodeData, node: TreeNode) => data && node,
+  [CURRENT_CHANGE]: (data: TreeNodeData, node: TreeNode) => data && node,
+  [NODE_CHECK]: (data: TreeNodeData, checkedInfo: CheckedInfo) =>
+    data && checkedInfo,
+  [NODE_CHECK_CHANGE]: (data: TreeNodeData, checked: boolean) =>
+    data && isBoolean(checked),
+  [NODE_CONTEXTMENU]: (evt: Event, data: TreeNodeData, node: TreeNode) =>
+    evt && data && node,
+}
+
+export const treeNodeEmits = {
+  click: (node: TreeNode, e: MouseEvent) => !!(node && e),
+  drop: (node: TreeNode, e: DragEvent) => !!(node && e),
+  toggle: (node: TreeNode) => !!node,
+  check: (node: TreeNode, checked: CheckboxValueType) =>
+    node && isBoolean(checked),
+}

package/packages/components/tree-v2/style/css.ts

@@ -0,0 +1,5 @@
+import '@element-plus/components/base/style/css'
+import '@element-plus/theme-chalk/el-tree.css'
+import '@element-plus/components/checkbox/style/css'
+import '@element-plus/components/virtual-list/style/css'
+import '@element-plus/components/text/style/css'

package/packages/components/tree-v2/style/index.ts

@@ -0,0 +1,5 @@
+import '@element-plus/components/base/style'
+import '@element-plus/theme-chalk/src/tree.scss'
+import '@element-plus/components/checkbox/style'
+import '@element-plus/components/virtual-list/style'
+import '@element-plus/components/text/style'