refactor(components): [tree-v2] use useNamespace (#5757)

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

@@ -1,4 +1,5 @@
 import { h, defineComponent, inject } from 'vue'
+import { useNamespace } from '@element-plus/hooks'
 import { ROOT_TREE_INJECTION_KEY, treeNodeContentProps } from './virtual-tree'
 
 export default defineComponent({
@@ -6,12 +7,13 @@ export default defineComponent({
   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('span', { class: 'el-tree-node__label' }, [node?.label])
+        : h('span', { class: ns.be('node', 'label') }, [node?.label])
     }
   },
 })

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

@@ -1,13 +1,13 @@
 <template>
   <div
     ref="node$"
-    class="el-tree-node"
-    :class="{
-      'is-expanded': expanded,
-      'is-current': current,
-      'is-focusable': !disabled,
-      'is-checked': !disabled && checked,
-    }"
+    :class="[
+      ns.b('node'),
+      ns.is('expanded', expanded),
+      ns.is('current', current),
+      ns.is('focusable', !disabled),
+      ns.is('checked', !disabled && checked),
+    ]"
     role="treeitem"
     tabindex="-1"
     :aria-expanded="expanded"
@@ -18,18 +18,18 @@
     @contextmenu="handleContextMenu"
   >
     <div
-      class="el-tree-node__content"
+      :class="ns.be('node', 'content')"
       :style="{ paddingLeft: `${(node.level - 1) * indent}px` }"
     >
       <el-icon
         v-if="icon"
         :class="[
+          ns.is('leaf', !!node?.isLeaf),
+          ns.is('hidden', hiddenExpandIcon),
           {
-            'is-leaf': node?.isLeaf,
-            'is-hidden': hiddenExpandIcon,
             expanded: !node?.isLeaf && expanded,
           },
-          'el-tree-node__expand-icon',
+          ns.be('node', 'expand-icon'),
         ]"
         @click.stop="handleExpandIconClick"
       >
@@ -53,6 +53,7 @@ import { computed, defineComponent, inject } from 'vue'
 import { CaretRight } from '@element-plus/icons-vue'
 import ElIcon from '@element-plus/components/icon'
 import ElCheckbox from '@element-plus/components/checkbox'
+import { useNamespace } from '@element-plus/hooks'
 import ElNodeContent from './tree-node-content'
 import {
   ROOT_TREE_INJECTION_KEY,
@@ -75,6 +76,7 @@ export default defineComponent({
   emits: treeNodeEmits,
   setup(props, { emit }) {
     const tree = inject(ROOT_TREE_INJECTION_KEY)
+    const ns = useNamespace('tree')
 
     const indent = computed(() => {
       return tree?.props.indent ?? 16
@@ -102,6 +104,7 @@ export default defineComponent({
     }
 
     return {
+      ns,
       indent,
       icon,
       handleClick,

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

@@ -1,14 +1,11 @@
 <template>
   <div
-    class="el-tree"
-    :class="{
-      'el-tree--highlight-current': highlightCurrent,
-    }"
+    :class="[ns.b(), { [ns.m('highlight-current')]: highlightCurrent }]"
     role="tree"
   >
     <fixed-size-list
       v-if="isNotEmpty"
-      class-name="el-tree-virtual-list"
+      :class-name="ns.b('virtual-list')"
       :data="flattenTree"
       :total="flattenTree.length"
       :height="height"
@@ -33,8 +30,8 @@
         ></el-tree-node>
       </template>
     </fixed-size-list>
-    <div v-else class="el-tree__empty-block">
-      <span class="el-tree__empty-text">{{
+    <div v-else :class="ns.e('empty-block')">
+      <span :class="ns.e('empty-text')">{{
         emptyText ?? t('el.tree.emptyText')
       }}</span>
     </div>
@@ -43,7 +40,7 @@
 
 <script lang="ts">
 import { defineComponent, getCurrentInstance, provide } from 'vue'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { FixedSizeList } from '@element-plus/components/virtual-list'
 import { useTree } from './composables/useTree'
 import ElTreeNode from './tree-node.vue'
@@ -65,6 +62,7 @@ export default defineComponent({
       instance: getCurrentInstance(),
     })
     const { t } = useLocale()
+    const ns = useNamespace('tree')
     const {
       flattenTree,
       isNotEmpty,
@@ -108,6 +106,7 @@ export default defineComponent({
 
     return {
       t,
+      ns,
       flattenTree,
       itemSize: 26,
       isNotEmpty,