@handaotech-design/bom 0.0.26 → 0.0.28

package/README.md

@@ -1,4 +1,14 @@
 # Bom 组件库
+
+## 安装
+### 依赖安装
+```shell
+yarn add @handaotech-design/bom @handaotech-design/vue
+```
+### 样式引入
+```typescript
+import '@handaotech-design/bom/dist/style.css';
+```
 ## 组件列表
 ### HdBomTree
 bom树组件

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

@@ -35,7 +35,7 @@ const treeContainerHeight = ref<number>(0)
 const treeContainerId = 'treeContainer'
 let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
 const selectedKeys = ref<string[]>([])
-const keepTreeState = ref<boolean>(false)
+const isPreservingTreeState = ref<boolean>(false)
 const initTreeState = () => {
   searchValue.value = ''
   selectedKeys.value = []
@@ -91,20 +91,23 @@ const filterTreeData = (data: TreeProps['treeData'], filteredKeys: string[]) =>
 }
 
 // 获取直接父节点的 key
-const getParentKey = (key: string): string[] | undefined => {
+const getParentKeys = (key: string): string[] | undefined => {
   const treeNode = keyToNodeMap.get(key)
   return treeNode?.parentKeys || []
 }
 
-const selectFirstSelectableNode = () => {
+const selectFirstSelectableNode = (preserveExpanded = false) => {
   const firstNode: any = _.find(Array.from(keyToNodeMap.values()), node => (node as any)?.selectable)
   if (!firstNode) {
     return
   }
 
   nextTick(() => {
-    expandedKeys.value = getParentKey(firstNode.key as string) as any
-    selectedKeys.value = firstNode ? [firstNode.key] as string[] : []
+    const parentKeys = getParentKeys(firstNode.key as string) as string[]
+    expandedKeys.value = preserveExpanded
+      ? Array.from(new Set([...expandedKeys.value, ...parentKeys])) // 取并集
+      : parentKeys
+    selectedKeys.value = [firstNode.key]
   })
 }
 
@@ -136,8 +139,8 @@ watch(
     filteredTreeData.value = _treeData.value
     keyToNodeMap = buildKeyToNodeMap(_treeData.value ?? [])
     initTreeState()
-    if (!keepTreeState.value) {
-      selectFirstSelectableNode()
+    if (!isPreservingTreeState.value) {
+      selectFirstSelectableNode(true)
     }
   },
   {
@@ -149,7 +152,7 @@ watchDebounced(
   searchValue, (value: string) => {
     let expanded: any[]
     if (_.isEmpty(value)) {
-      expanded = getParentKey(selectedKeys.value[0]) || []
+      expanded = getParentKeys(selectedKeys.value[0]) || []
       filteredTreeData.value = _treeData.value
     }
     else {
@@ -158,7 +161,7 @@ watchDebounced(
         .map((item: any) => {
           if (hasSearchMatch(item.title)) {
             filteredNodes.push(item)
-            return getParentKey(item.key)
+            return getParentKeys(item.key)
           }
           return null
         })
@@ -199,10 +202,10 @@ function hasSearchMatch(title: string) {
   return searchValue.value && title.includes(searchValue.value)
 }
 
-async function withKeepTreeState(updateDataFn: () => Promise<void>) {
+async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
   const prevSelected = selectedKeys.value?.[0]
   const prevExpanded = [...expandedKeys.value]
-  keepTreeState.value = true
+  isPreservingTreeState.value = true
   await updateDataFn()
   await nextTick(() => {
     expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
@@ -211,14 +214,21 @@ async function withKeepTreeState(updateDataFn: () => Promise<void>) {
       selectedKeys.value = [prevSelected]
     }
     else {
-      selectFirstSelectableNode()
+      selectFirstSelectableNode(true)
     }
-    keepTreeState.value = false
+    isPreservingTreeState.value = false
   })
 }
 
+async function getDepth(key: string) {
+  const parentKeys = getParentKeys(key)
+  return parentKeys!.length + 1
+}
+
 defineExpose({
-  withKeepTreeState,
+  updateTreeWithPreservedState,
+  getParentKeys,
+  getDepth,
 })
 </script>
 
@@ -247,7 +257,7 @@ defineExpose({
           @expand="onExpand"
           @select="onSelected"
         >
-          <template #title="{ title, dataRef, data }">
+          <template #title="{ title, dataRef }">
             <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
               <div
                 v-if="!!dataRef.icon"

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

@@ -40,12 +40,22 @@ watch(
   { immediate: true },
 )
 
-async function withKeepTreeState(fn: any) {
-  treeRef.value.withKeepTreeState(fn)
+async function updateTreeWithPreservedState(fn: any) {
+  treeRef.value.updateTreeWithPreservedState(fn)
+}
+
+function getParentKeys(key: string) {
+  return treeRef.value.getParentKeys(key)
+}
+
+function getDepth(key: string) {
+  return treeRef.value.getDepth(key)
 }
 
 defineExpose({
-  withKeepTreeState,
+  updateTreeWithPreservedState,
+  getParentKeys,
+  getDepth,
 })
 </script>
 

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

@@ -35,7 +35,7 @@ const treeContainerHeight = ref<number>(0)
 const treeContainerId = 'treeContainer'
 let keyToNodeMap = new Map<string, TreeNodeWithMeta>()
 const selectedKeys = ref<string[]>([])
-const keepTreeState = ref<boolean>(false)
+const isPreservingTreeState = ref<boolean>(false)
 const initTreeState = () => {
   searchValue.value = ''
   selectedKeys.value = []
@@ -91,20 +91,23 @@ const filterTreeData = (data: TreeProps['treeData'], filteredKeys: string[]) =>
 }
 
 // 获取直接父节点的 key
-const getParentKey = (key: string): string[] | undefined => {
+const getParentKeys = (key: string): string[] | undefined => {
   const treeNode = keyToNodeMap.get(key)
   return treeNode?.parentKeys || []
 }
 
-const selectFirstSelectableNode = () => {
+const selectFirstSelectableNode = (preserveExpanded = false) => {
   const firstNode: any = _.find(Array.from(keyToNodeMap.values()), node => (node as any)?.selectable)
   if (!firstNode) {
     return
   }
 
   nextTick(() => {
-    expandedKeys.value = getParentKey(firstNode.key as string) as any
-    selectedKeys.value = firstNode ? [firstNode.key] as string[] : []
+    const parentKeys = getParentKeys(firstNode.key as string) as string[]
+    expandedKeys.value = preserveExpanded
+      ? Array.from(new Set([...expandedKeys.value, ...parentKeys])) // 取并集
+      : parentKeys
+    selectedKeys.value = [firstNode.key]
   })
 }
 
@@ -136,8 +139,8 @@ watch(
     filteredTreeData.value = _treeData.value
     keyToNodeMap = buildKeyToNodeMap(_treeData.value ?? [])
     initTreeState()
-    if (!keepTreeState.value) {
-      selectFirstSelectableNode()
+    if (!isPreservingTreeState.value) {
+      selectFirstSelectableNode(true)
     }
   },
   {
@@ -149,7 +152,7 @@ watchDebounced(
   searchValue, (value: string) => {
     let expanded: any[]
     if (_.isEmpty(value)) {
-      expanded = getParentKey(selectedKeys.value[0]) || []
+      expanded = getParentKeys(selectedKeys.value[0]) || []
       filteredTreeData.value = _treeData.value
     }
     else {
@@ -158,7 +161,7 @@ watchDebounced(
         .map((item: any) => {
           if (hasSearchMatch(item.title)) {
             filteredNodes.push(item)
-            return getParentKey(item.key)
+            return getParentKeys(item.key)
           }
           return null
         })
@@ -199,10 +202,10 @@ function hasSearchMatch(title: string) {
   return searchValue.value && title.includes(searchValue.value)
 }
 
-async function withKeepTreeState(updateDataFn: () => Promise<void>) {
+async function updateTreeWithPreservedState(updateDataFn: () => Promise<void>) {
   const prevSelected = selectedKeys.value?.[0]
   const prevExpanded = [...expandedKeys.value]
-  keepTreeState.value = true
+  isPreservingTreeState.value = true
   await updateDataFn()
   await nextTick(() => {
     expandedKeys.value = prevExpanded.filter(key => keyToNodeMap.has(key as string))
@@ -211,14 +214,21 @@ async function withKeepTreeState(updateDataFn: () => Promise<void>) {
       selectedKeys.value = [prevSelected]
     }
     else {
-      selectFirstSelectableNode()
+      selectFirstSelectableNode(true)
     }
-    keepTreeState.value = false
+    isPreservingTreeState.value = false
   })
 }
 
+async function getDepth(key: string) {
+  const parentKeys = getParentKeys(key)
+  return parentKeys!.length + 1
+}
+
 defineExpose({
-  withKeepTreeState,
+  updateTreeWithPreservedState,
+  getParentKeys,
+  getDepth,
 })
 </script>
 
@@ -247,7 +257,7 @@ defineExpose({
           @expand="onExpand"
           @select="onSelected"
         >
-          <template #title="{ title, dataRef, data }">
+          <template #title="{ title, dataRef }">
             <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
               <div
                 v-if="!!dataRef.icon"

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

@@ -40,12 +40,22 @@ watch(
   { immediate: true },
 )
 
-async function withKeepTreeState(fn: any) {
-  treeRef.value.withKeepTreeState(fn)
+async function updateTreeWithPreservedState(fn: any) {
+  treeRef.value.updateTreeWithPreservedState(fn)
+}
+
+function getParentKeys(key: string) {
+  return treeRef.value.getParentKeys(key)
+}
+
+function getDepth(key: string) {
+  return treeRef.value.getDepth(key)
 }
 
 defineExpose({
-  withKeepTreeState,
+  updateTreeWithPreservedState,
+  getParentKeys,
+  getDepth,
 })
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handaotech-design/bom",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -25,7 +25,10 @@
     "build:unocss": "unocss '**/*.{vue,ts}' -o dist/style.css",
     "stub": "pnpm run build:unocss && unbuild --stub"
   },
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
+    "sass": "*",
+    "unocss": "*",
     "vue": "*",
     "vue-types": "*",
     "ant-design-vue": "*",
@@ -33,11 +36,7 @@
     "@handaotech-design/vue": "workspace:*",
     "lodash-es": "*"
   },
-  "devDependencies": {
-    "sass": "*",
-    "unocss": "*"
-  },
-  "peerDependenciesMeta": {
+  "peerDependencies": {
     "vue": "*",
     "vue-types": "*",
     "ant-design-vue": "*",
@@ -46,10 +45,10 @@
     "lodash-es": "*"
   },
   "author": "HD",
-  "homepage": "http://git.handao.cloud/infra/hd-design/-/blob/bom/README.md",
+  "homepage": "https://www.npmjs.com/package/@handaotech-design/bom",
   "repository": {
     "type": "git",
-    "url": "git+http://git.handao.cloud/infra/hd-design.git",
+    "url": "git+http://esgit.handao.cloud/infra/hd-design.git",
     "directory": "packages/bom"
   },
   "publishConfig": {