feat: rename ctree to vtree

Author: ChuChencheng

examples/Mobile.vue

@@ -102,22 +102,22 @@ function onResetBtnClick() {
 
 <style lang="less" scoped>
 
-:deep(.ctree-tree-node_selected) {
+:deep(.vtree-tree-node_selected) {
   background-color: #eef5ff;
   border-radius: 4px;
-  .ctree-tree-node__title {
+  .vtree-tree-node__title {
     background: none;
   }
 }
-:deep(.ctree-tree-node__wrapper.ctree-tree-node__wrapper_is-leaf.ctree-tree-node_checked) {
+:deep(.vtree-tree-node__wrapper.vtree-tree-node__wrapper_is-leaf.vtree-tree-node_checked) {
   background-color: #eef5ff;
   border-radius: 4px;
 }
-:deep(.ctree-tree-node__checkbox_wrapper) {
+:deep(.vtree-tree-node__checkbox_wrapper) {
   display: none;
 }
-:deep(.ctree-tree-node__wrapper_is-leaf) {
-  .ctree-tree-node__checkbox_wrapper {
+:deep(.vtree-tree-node__wrapper_is-leaf) {
+  .vtree-tree-node__checkbox_wrapper {
     display: flex;
   }
 }

src/components/LoadingIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg viewBox="0 0 50 50">
     <circle
-      class="ctree-loading-icon__circle"
+      class="vtree-loading-icon__circle"
       cx="25"
       cy="25"
       r="20"

src/components/Tree.vue

@@ -9,7 +9,7 @@
       <!-- 可见节点区域，包括上下两片空白加渲染的节点 -->
       <div :class="blockAreaCls">
         <div :style="{ height: `${topSpaceHeight}px` }"></div>
-        <CTreeNode
+        <VTreeNode
           v-for="node in renderNodes"
           v-bind="treeNodeProps"
           :key="node[keyField]"
@@ -211,7 +211,7 @@ import {
   toRefs,
 } from 'vue'
 import TreeStore, { TreeNode } from '../store'
-import CTreeNode from './TreeNode.vue'
+import VTreeNode from './TreeNode.vue'
 import LoadingIcon from './LoadingIcon.vue'
 import {
   ignoreEnum,
@@ -638,7 +638,7 @@ defineExpose({
 })
 
 defineOptions({
-  name: 'CTree',
+  name: 'VTree',
   inheritAttrs: false,
 })
 </script>

src/components/TreeDrop.vue

@@ -20,7 +20,7 @@
     </div>
 
     <!-- 下拉框 -->
-    <transition name="ctree-dropdown">
+    <transition name="vtree-dropdown">
       <div
         ref="dropdownRef"
         v-show="dropdownVisible"
@@ -29,7 +29,7 @@
           height: `${dropHeight}px`
         }"
       >
-        <CTreeSearch
+        <VTreeSearch
           ref="treeSearchRef"
           v-bind="props"
           v-model="treeSearchValue"
@@ -41,7 +41,7 @@
           <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
             <slot :name="slot" v-bind="scope"></slot>
           </template>
-        </CTreeSearch>
+        </VTreeSearch>
       </div>
     </transition>
   </div>
@@ -97,12 +97,12 @@ import {
   watch,
   nextTick,
 } from 'vue'
-import CTreeSearch, { DEFAULT_TREE_SEARCH_PROPS, TreeSearchProps } from './TreeSearch.vue'
+import VTreeSearch, { DEFAULT_TREE_SEARCH_PROPS, TreeSearchProps } from './TreeSearch.vue'
 import { TreeNode } from '../store'
 import { TREE_SEARCH_API_METHODS, placementEnum } from '../constants'
 import { TREE_DROP_EVENTS, TREE_SEARCH_EVENTS } from '../constants/events'
 import { TreeNodeKeyType, TreeDropSlotProps, PlacementType } from '../types'
-import { getCtreeMethods } from '../utils'
+import { getVTreeMethods } from '../utils'
 import { useTreeDropCls } from '../hooks/useTreeDropCls'
 
 const props = withDefaults(defineProps<TreeDropProps>(), DEFAULT_TREE_DROP_PROPS)
@@ -143,7 +143,7 @@ const {
 
 const referenceRef = ref()
 const dropdownRef = ref()
-const treeSearchRef = ref<InstanceType<typeof CTreeSearch> | null>(null)
+const treeSearchRef = ref<InstanceType<typeof VTreeSearch> | null>(null)
 const slotProps = reactive<TreeDropSlotProps>({
   /** 多选选中的节点 */
   checkedNodes: [] as TreeNode[],
@@ -391,11 +391,11 @@ watch(
 //#endregion
 
 defineExpose({
-  ...getCtreeMethods(TREE_SEARCH_API_METHODS, treeSearchRef),
+  ...getVTreeMethods(TREE_SEARCH_API_METHODS, treeSearchRef),
 })
 
 defineOptions({
-  name: 'CTreeDrop',
+  name: 'VTreeDrop',
   inheritAttrs: false,
 })
 </script>

src/components/TreeNode.vue

@@ -302,6 +302,6 @@ function handleDrop(e: DragEvent): void {
 }
 
 defineOptions({
-  name: 'CTreeNode',
+  name: 'VTreeNode',
 })
 </script>

src/components/TreeSearch.vue

@@ -31,7 +31,7 @@
 
     <!-- 树区域 -->
     <div :class="treeWrapperCls">
-      <CTree
+      <VTree
         ref="treeRef"
         v-bind="props"
         v-model="treeModelValue"
@@ -42,7 +42,7 @@
         <template v-for="(_, slot) in $slots" :name="slot" v-slot="scope">
           <slot :name="slot" v-bind="scope"></slot>
         </template>
-      </CTree>
+      </VTree>
     </div>
 
     <!-- 底部信息 -->
@@ -108,10 +108,10 @@ import {
   computed,
   onMounted,
 } from 'vue'
-import CTree, { DEFAULT_TREE_PROPS, TreeProps } from './Tree.vue'
+import VTree, { DEFAULT_TREE_PROPS, TreeProps } from './Tree.vue'
 import { useTreeSearchCls } from '../hooks/useTreeSearchCls'
 import { TreeNode } from '..'
-import { getCtreeMethods } from '../utils'
+import { getVTreeMethods } from '../utils'
 import { TREE_API_METHODS } from '../constants'
 import { TREE_EVENTS, TREE_SEARCH_EVENTS } from '../constants/events'
 
@@ -141,7 +141,7 @@ const isShowingChecked = ref(false)
 const keyword = ref('')
 const debounceTimer = ref<number | undefined>(undefined)
 const checkedCount = ref(0)
-const treeRef = ref<InstanceType<typeof CTree> | null>(null)
+const treeRef = ref<InstanceType<typeof VTree> | null>(null)
 
 const {
   wrapperCls,
@@ -325,14 +325,14 @@ onMounted(() => {
 })
 
 defineExpose({
-  ...getCtreeMethods(TREE_API_METHODS, treeRef),
+  ...getVTreeMethods(TREE_API_METHODS, treeRef),
   clearKeyword,
   getKeyword,
   search,
 })
 
 defineOptions({
-  name: 'CTreeSearch',
+  name: 'VTreeSearch',
   inheritAttrs: false,
 })
 </script>

src/hooks/useTreeCls.ts

@@ -1,6 +1,6 @@
 import { computed } from "vue"
 
-const prefixCls = 'ctree-tree'
+const prefixCls = 'vtree-tree'
 
 export { prefixCls as TREE_PREFIX_CLS }
 

src/hooks/useTreeDropCls.ts

@@ -2,7 +2,7 @@ import { Ref, computed } from 'vue'
 import { TREE_SEARCH_PREFIX_CLS as treeSearchPrefixCls } from './useTreeSearchCls'
 import { TreeDropProps } from '../components/TreeDrop.vue'
 
-const prefixCls = 'ctree-tree-drop'
+const prefixCls = 'vtree-tree-drop'
 
 export { prefixCls as TREE_DROP_PREFIX_CLS }
 

src/hooks/useTreeNodeCls.ts

@@ -1,7 +1,7 @@
 import { Ref, computed } from "vue"
 import { TreeNodeProps } from "../components/TreeNode.vue"
 
-const prefixCls = 'ctree-tree-node'
+const prefixCls = 'vtree-tree-node'
 
 export { prefixCls as TREE_NODE_PREFIX_CLS }
 

src/hooks/useTreeSearchCls.ts

@@ -2,7 +2,7 @@ import { Ref, computed } from 'vue'
 import { TREE_NODE_PREFIX_CLS as treeNodePrefixCls } from './useTreeNodeCls'
 import { TreeSearchProps } from '../components/TreeSearch.vue'
 
-const prefixCls = 'ctree-tree-search'
+const prefixCls = 'vtree-tree-search'
 
 export { prefixCls as TREE_SEARCH_PREFIX_CLS }