0.0.3

note.txt

@@ -1,2 +1,8 @@
+提交tag:
+git push origin [tagname]
+
+build并发布demo：
 https://console.cloud.tencent.com/tcb/hosting/index?envId=vue-tree-4gi26kh195ddd24f&rid=4&moduleName=&tabId=file
-pnpm build:demo --enable-pre-post-scripts
+pnpm build:demo --enable-pre-post-scripts
+
+发布：pnpm -r publish -F @ysx-libs/vue-virtual-tree --access=public --git-checks=false

pnpm-workspace.yaml

@@ -1,4 +1,3 @@
 packages:
- # pnpm -r publish -F @ysx-libs/vue-virtual-tree --access=public --git-checks=false
  - 'projects/**'
- - '!**/test/**'
+ - '!**/test/**'

projects/VirtualTree/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@ysx-libs/vue-virtual-tree",
- "version": "0.0.1",
+ "version": "0.0.3",
  "scripts": {
  "build:dev": "vite build --watch --emptyOutDir=false",
  "build": "vue-tsc --noEmit && vite build && npm run build:types",
@@ -24,4 +24,4 @@
  "devDependencies": {
  "@vitejs/plugin-vue-jsx": "^1.3.10"
  }
-}
+}

projects/VirtualTree/src/tree/tree.vue

@@ -100,17 +100,13 @@ const props = defineProps({
 let treeData = $ref<BaseTreeNode[]>([]);
 let flattenTreeData = $ref<BaseTreeNode[]>([]);
 let key2TreeNode = $ref<KeyNodeMap>({});
+
 watch(() => props.source, newVal => {
  // console.log('wat source :>> '); // todo reset states
- if (newVal.length) {
- const result = useTreeData(newVal);
- treeData = result.treeData;
- flattenTreeData = result.flattenTreeData;
- key2TreeNode = result.key2TreeNode;
- // console.log('flattenTreeData :>> ', flattenTreeData);
- // console.log('key2TreeNode :>> ', key2TreeNode);
- // console.log('treeData :>> ', treeData);
- }
+ const result = useTreeData(newVal);
+ treeData = result.treeData;
+ flattenTreeData = result.flattenTreeData;
+ key2TreeNode = result.key2TreeNode;
 }, {
  immediate: true
 });
@@ -130,7 +126,6 @@ const halfCheckedKeys = $ref(new Set<NodeKey>());
 watch(() => props.defaultCheckedKeys, newVal => {
  // console.log('wat defaultCheckedKeys :>> ', newVal);
  if (props.showCheckbox) {
- // todo: 懒加载会改变key2TreeNode，重新调用useCheckState
  useCheckState(newVal, {
  checkedKeys,
  halfCheckedKeys,
@@ -167,14 +162,15 @@ const virtualHeight = $computed(() => {
 
 let expandedKeys = $ref(new Set<NodeKey>());
 watch(() => props.defaultExpandedKeys, newVal => {
+ // console.log('wat expandedkeys', newVal);
  expandedKeys.clear();
  expandedKeys = new Set(newVal);
 }, {
  immediate: true
 });
 
  let loading = $ref(false);
- 
+
  // state: 点击后的展开状态
  function toggleExpand({ state, node }: EventParams) {
  if (loading) return;
@@ -199,7 +195,7 @@ watch(() => props.defaultExpandedKeys, newVal => {
  node.children = [];
  node.hasChildren = false;
  }
- 
+
  });
  }
  emit('expandChange', { state, node });
@@ -247,7 +243,7 @@ watch(() => props.defaultExpandedKeys, newVal => {
  }
 
 
- 
+
 
 
 
@@ -263,7 +259,7 @@ watch(() => props.defaultExpandedKeys, newVal => {
  });
  emit('checkChange', { state: newChecked, node });
  }
- 
+
  const context = shallowReactive({
  renderNode: props.renderNode,
  renderIcon: props.renderIcon,
@@ -274,7 +270,7 @@ watch(() => props.defaultExpandedKeys, newVal => {
  getCheckedNodes: () => Array.from(checkedKeys).map(key => key2TreeNode[key]).filter(Boolean), // 懒加载的情况下未必能拿到node
  getHalfCheckedNodes: () => Array.from(halfCheckedKeys).map(key => key2TreeNode[key]),
  });
- 
+
  defineExpose(toRaw(context));
  provide(TreeInjectionKey, context);
 </script>

projects/demo/src/App.vue

@@ -14,6 +14,7 @@
  <a-anchor-link href="#custom-node-demo" title="自定义渲染节点" />
  <a-anchor-link href="#custom-icon-demo" title="自定义图标" />
  <a-anchor-link href="#virtual-demo" title="虚拟树" />
+ <a-anchor-link href="#search-demo" title="搜索树" />
  <a-anchor-link href="#api" title="API" />
  </a-anchor>
  </a-layout-content>
@@ -45,7 +46,7 @@
  color: var(--white-color);
  height: var(--top-bottom-height);
  }
- 
+
  .app-layout .header .title {
  color: inherit;
  margin: 0;
@@ -58,7 +59,7 @@
  position: relative;
  min-height: calc(100vh - var(--top-bottom-height) * 2);
  background-color: var(--white-color);
- 
+
  }
  .app-layout .content .anchor {
  position: absolute;

projects/demo/src/doc/SearchDemo.vue

@@ -0,0 +1,92 @@
+
+<template>
+ <a-input v-model:value="searchKey" placeholder="请搜索" />
+ <VirTree
+ ref="virTree"
+ :source="list"
+ :default-expanded-keys="defaultExpandKeys"
+ :render-node="renderNode"
+ :virtual="{ size: 26, remain: 8 }">
+ </VirTree>
+</template>
+
+<script setup lang="tsx">
+import { watch } from 'vue';
+import {
+ BaseTreeNode,
+ TreeNodeOptions,
+ VirTree,
+ NodeKey
+} from '@ysx-libs/vue-virtual-tree';
+
+const prefixes = ['leaf', 'sub', 'sub', 'root'];
+
+function recursion(path = '0', level = 3, h = 10): TreeNodeOptions[] {
+ const list = [];
+ for (let i = 0; i < h; i += 1) {
+ const nodeKey = `${path}-${i}`;
+ const hasChildren = level > 0;
+ const treeNode: TreeNodeOptions = {
+ nodeKey,
+ name: `${prefixes[level]}-${nodeKey}`,
+ children: [],
+ hasChildren
+ };
+
+ if (hasChildren) {
+ treeNode.children = recursion(nodeKey, level - 1);
+ }
+ list.push(treeNode);
+ }
+ return list;
+}
+
+
+let defaultExpandKeys = $ref<NodeKey[]>([]);
+
+
+let searchKey = $ref('');
+let list = $ref(recursion());
+
+watch(() => searchKey, newVal => {
+ defaultExpandKeys = [];
+ list = searchData(recursion(), newVal);
+});
+
+const UNIQUE_WRAPPERS: [string, string] = ['##==-open_tag-==##', '##==-close_tag-==##'];
+
+function renderNode(node: BaseTreeNode) {
+ const wrapValue = node.name.replace(searchKey, `<span class="node-highlight">$&</span>`);
+ return <div innerHTML={ wrapValue }></div>;
+}
+
+function searchData(origin: TreeNodeOptions[], keyword: string) {
+ const loop = (data: TreeNodeOptions[]) => {
+ const result: TreeNodeOptions[] = [];
+ data.forEach(item => {
+ if (item.name.toLowerCase().includes(keyword.toLowerCase())) {
+ result.push({ ...item });
+ } else if (item.children) {
+ const filterData = loop(item.children);
+ if (filterData.length) {
+ defaultExpandKeys.push(item.nodeKey);
+ result.push({
+ ...item,
+ children: filterData
+ });
+ }
+ }
+ });
+ return result;
+ }
+
+ return loop(origin);
+}
+</script>
+
+
+<style>
+ .node-highlight {
+ color: #f60;
+ }
+</style>

projects/demo/src/doc/VirtualDemo.vue

@@ -20,7 +20,7 @@
  nodeKey,
  name: nodeKey,
  children: [],
- hasChildren: true
+ hasChildren: level > 0
  };
 
  if (level > 0) {
@@ -33,4 +33,4 @@
 
 
  let list = $ref(recursion());
-</script>
+</script>

projects/demo/src/doc/index.vue

@@ -66,6 +66,15 @@
  online="//stackblitz.com/edit/vitejs-vite-1j17xa?file=src%2Fdoc%2FCustomIconDemo.vue">
  <custom-icon-demo />
  </demo-box>
+ <demo-box
+ id="search-demo"
+ title="搜索树"
+ desc="自行实现搜索功能"
+ code-type="search"
+ href="//github.com/lycHub/ysx-library/blob/master/projects/demo/src/doc/SearchDemo.vue"
+ online="//stackblitz.com/edit/vitejs-vite-1j17xa?file=src/doc/SearchDemo.vue">
+ <search-demo />
+ </demo-box>
  </a-col>
  <a-col :span="12">
  <demo-box
@@ -132,7 +141,7 @@
  </div>
 </template>
 
-<script lang="tsx">
+<script lang="ts">
  import {defineComponent} from 'vue';
  import DemoBox from './DemoBox.vue';
  import BaseDemo from './BaseDemo.vue';
@@ -141,11 +150,12 @@
  import CustomNodeDemo from './CustomNodeDemo.vue';
  import CustomIconDemo from './CustomIconDemo.vue';
  import VirtualDemo from './VirtualDemo.vue';
+ import SearchDemo from './SearchDemo.vue';
  import { columns, eventData, methodColumns, methodData, nodeOptionData, propData, slotData } from './tableData';
 
  export default defineComponent({
  name: 'DocContainer',
- components: { DemoBox, BaseDemo, CheckboxDemo, AsyncDataDemo, CustomNodeDemo, CustomIconDemo, VirtualDemo },
+ components: { DemoBox, BaseDemo, CheckboxDemo, AsyncDataDemo, CustomNodeDemo, CustomIconDemo, VirtualDemo, SearchDemo },
  setup() {
  const rowClsName = (_: any, index: number) => ([5, 6, 7, 8].includes(index) ? 'table-row-abandoned' : null);
 
@@ -169,7 +179,7 @@
  margin: 0 auto;
  padding: 30px 20px;
  border: 1px solid var(--border-color);
- 
+
  }
 
  .doc-container .sec {