@handaotech-design/bom 0.0.23 → 0.0.25

package/dist/es/components/bom-tree/index.vue

@@ -35,9 +35,11 @@ const treeContainerHeight = ref<number>(0)
 const treeContainerId = 'treeContainer'
 let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
 const selectedKeys = ref<string[]>([])
-const initTreeState = async () => {
+const keepTreeState = ref<boolean>(false)
+const initTreeState = () => {
   searchValue.value = ''
-  filteredTreeData.value = _treeData.value
+  selectedKeys.value = []
+  expandedKeys.value = []
 }
 
 const onExpand = (keys: Key[]) => {
@@ -131,15 +133,12 @@ onBeforeUnmount(() => {
 watch(
   () => _treeData.value,
   async () => {
-    if (!_.isEmpty(_treeData.value)) {
-      keyToNodeMap = buildKeyToNodeMap(_treeData.value)
-      await initTreeState()
+    filteredTreeData.value = _treeData.value
+    keyToNodeMap = buildKeyToNodeMap(_treeData.value ?? [])
+    initTreeState()
+    if (!keepTreeState.value) {
       selectFirstSelectableNode()
     }
-    else {
-      keyToNodeMap.clear()
-      await initTreeState()
-    }
   },
   {
     immediate: true,
@@ -199,6 +198,28 @@ function getTitlePart(title: string, partType: 'before' | 'after') {
 function hasSearchMatch(title: string) {
   return searchValue.value && title.includes(searchValue.value)
 }
+
+async function withKeepTreeState(updateDataFn: () => Promise<void>) {
+  const prevSelected = selectedKeys.value?.[0]
+  const prevExpanded = [...expandedKeys.value]
+  keepTreeState.value = true
+  await updateDataFn()
+  await nextTick(() => {
+    expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
+
+    if (prevSelected && keyToNodeMap.has(prevSelected)) {
+      selectedKeys.value = [prevSelected]
+    }
+    else {
+      selectFirstSelectableNode()
+    }
+    keepTreeState.value = false
+  })
+}
+
+defineExpose({
+  withKeepTreeState,
+})
 </script>
 
 <template>

package/dist/es/components/bom-workbench/index.vue

@@ -8,6 +8,7 @@ import HdBomTree from '../bom-tree/index'
 
 const props = defineProps<Props>()
 const COMPONENT_NAME = 'HdBomWorkbench'
+const treeRef = ref()
 defineOptions({
   name: COMPONENT_NAME,
 })
@@ -38,6 +39,14 @@ watch(
   },
   { immediate: true },
 )
+
+async function withKeepTreeState(fn: any) {
+  treeRef.value.withKeepTreeState(fn)
+}
+
+defineExpose({
+  withKeepTreeState,
+})
 </script>
 
 <template>
@@ -48,8 +57,10 @@ watch(
   >
     <template #left>
       <div class="left-content">
+        <slot name="tree-header" />
         <div class="bom-tree-container">
           <HdBomTree
+            ref="treeRef"
             :tree-data="bomDataForTree"
             :config="props.treeConfig"
             @select="(data: BomNode) => onSelected(data)"

package/dist/lib/components/bom-tree/index.vue

@@ -35,9 +35,11 @@ const treeContainerHeight = ref<number>(0)
 const treeContainerId = 'treeContainer'
 let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
 const selectedKeys = ref<string[]>([])
-const initTreeState = async () => {
+const keepTreeState = ref<boolean>(false)
+const initTreeState = () => {
   searchValue.value = ''
-  filteredTreeData.value = _treeData.value
+  selectedKeys.value = []
+  expandedKeys.value = []
 }
 
 const onExpand = (keys: Key[]) => {
@@ -131,15 +133,12 @@ onBeforeUnmount(() => {
 watch(
   () => _treeData.value,
   async () => {
-    if (!_.isEmpty(_treeData.value)) {
-      keyToNodeMap = buildKeyToNodeMap(_treeData.value)
-      await initTreeState()
+    filteredTreeData.value = _treeData.value
+    keyToNodeMap = buildKeyToNodeMap(_treeData.value ?? [])
+    initTreeState()
+    if (!keepTreeState.value) {
       selectFirstSelectableNode()
     }
-    else {
-      keyToNodeMap.clear()
-      await initTreeState()
-    }
   },
   {
     immediate: true,
@@ -199,6 +198,28 @@ function getTitlePart(title: string, partType: 'before' | 'after') {
 function hasSearchMatch(title: string) {
   return searchValue.value && title.includes(searchValue.value)
 }
+
+async function withKeepTreeState(updateDataFn: () => Promise<void>) {
+  const prevSelected = selectedKeys.value?.[0]
+  const prevExpanded = [...expandedKeys.value]
+  keepTreeState.value = true
+  await updateDataFn()
+  await nextTick(() => {
+    expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
+
+    if (prevSelected && keyToNodeMap.has(prevSelected)) {
+      selectedKeys.value = [prevSelected]
+    }
+    else {
+      selectFirstSelectableNode()
+    }
+    keepTreeState.value = false
+  })
+}
+
+defineExpose({
+  withKeepTreeState,
+})
 </script>
 
 <template>

package/dist/lib/components/bom-workbench/index.vue

@@ -8,6 +8,7 @@ import HdBomTree from '../bom-tree/index'
 
 const props = defineProps<Props>()
 const COMPONENT_NAME = 'HdBomWorkbench'
+const treeRef = ref()
 defineOptions({
   name: COMPONENT_NAME,
 })
@@ -38,6 +39,14 @@ watch(
   },
   { immediate: true },
 )
+
+async function withKeepTreeState(fn: any) {
+  treeRef.value.withKeepTreeState(fn)
+}
+
+defineExpose({
+  withKeepTreeState,
+})
 </script>
 
 <template>
@@ -48,8 +57,10 @@ watch(
   >
     <template #left>
       <div class="left-content">
+        <slot name="tree-header" />
         <div class="bom-tree-container">
           <HdBomTree
+            ref="treeRef"
             :tree-data="bomDataForTree"
             :config="props.treeConfig"
             @select="(data: BomNode) => onSelected(data)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handaotech-design/bom",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -21,14 +21,9 @@
   "module": "./dist/es/index.js",
   "types": "./dist/es/index.d.ts",
   "scripts": {
-    "build": "unocss '**/*.{vue,ts}' -o dist/style.css && unbuild",
-    "build:unbuild": "unbuild",
-    "build:vite": "vite build && pnpm run generate:types",
-    "build:rollup": "rollup --config rollup.config.ts --configPlugin typescript",
-    "generate:types": "pnpm run generate:es:types && pnpm run generate:lib:types",
-    "generate:es:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./es",
-    "generate:lib:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./lib",
-    "stub": "unbuild --stub"
+    "build": "unbuild && pnpm run build:unocss",
+    "build:unocss": "unocss '**/*.{vue,ts}' -o dist/style.css",
+    "stub": "pnpm run build:unocss && unbuild --stub"
   },
   "dependencies": {
     "@handaotech-design/vue": "^0.2.11"