@handaotech-design/bom 0.0.34 → 0.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,10 +9,9 @@ import type { EventDataNode } from 'ant-design-vue/es/tree'
9
9
  import { MoreOutlined } from '@ant-design/icons-vue'
10
10
  import HdGrayInput from '../gray-input'
11
11
  import type { BomTreeConfig } from '../../models'
12
- import { TreeMenuTriggerMode } from '../../models'
13
12
 
14
13
  const props = withDefaults(defineProps<Props>(), {
15
- menuTriggerMode: TreeMenuTriggerMode.contextMenu,
14
+ maintainable: false,
16
15
  })
17
16
  const emit = defineEmits(['select'])
18
17
  const COMPONENT_NAME = 'HdBomTree'
@@ -28,7 +27,7 @@ type TreeNodeWithMeta = DataNode & {
28
27
  interface Props {
29
28
  treeData: TreeProps['treeData']
30
29
  config: BomTreeConfig
31
- menuTriggerMode?: TreeMenuTriggerMode
30
+ maintainable?: boolean
32
31
  }
33
32
 
34
33
  const expandedKeys = ref<(string | number)[]>([])
@@ -263,34 +262,32 @@ defineExpose({
263
262
  @select="onSelected"
264
263
  >
265
264
  <template #title="{ title, dataRef }">
266
- <a-dropdown :trigger="['contextmenu']">
267
- <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
268
- <div
269
- v-if="!!dataRef.icon"
270
- class="icon w-20px h-20px mr-4px min-w-20px"
271
- :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
272
- />
273
- <div v-if="hasSearchMatch(title)" class="tree-node-text">
274
- <span>{{ getTitlePart(title, 'before') }}</span>
275
- <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
276
- <span>{{ getTitlePart(title, 'after') }}</span>
277
- </div>
278
- <div v-else class="tree-node-text">
279
- {{ title }}
280
- </div>
281
- <div class="click-menu-wrapper">
282
- <a-dropdown v-if="props.menuTriggerMode === TreeMenuTriggerMode.click" :trigger="['click']">
283
- <MoreOutlined class="menu-trigger" @click.stop />
284
- <template #overlay>
285
- <slot name="node-menu" :tree-node="dataRef" />
286
- </template>
287
- </a-dropdown>
288
- </div>
265
+ <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
266
+ <div
267
+ v-if="!!dataRef.icon"
268
+ class="icon w-20px h-20px mr-4px min-w-20px"
269
+ :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
270
+ />
271
+ <div v-if="hasSearchMatch(title)" class="tree-node-text">
272
+ <span>{{ getTitlePart(title, 'before') }}</span>
273
+ <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
274
+ <span>{{ getTitlePart(title, 'after') }}</span>
289
275
  </div>
290
- <template v-if="props.menuTriggerMode === TreeMenuTriggerMode.contextMenu" #overlay>
291
- <slot name="node-menu" :tree-node="dataRef" />
292
- </template>
293
- </a-dropdown>
276
+ <div v-else class="tree-node-text">
277
+ {{ title }}
278
+ </div>
279
+ <div v-if="props.maintainable" class="click-menu-wrapper">
280
+ <a-dropdown
281
+ :trigger="['hover', 'click']"
282
+ :destroy-popup-on-hide="true"
283
+ >
284
+ <MoreOutlined class="menu-trigger" @click.stop />
285
+ <template #overlay>
286
+ <slot name="node-menu" :tree-node="dataRef" />
287
+ </template>
288
+ </a-dropdown>
289
+ </div>
290
+ </div>
294
291
  </template>
295
292
  <template #switcherIcon="{ dataRef }">
296
293
  <div
@@ -327,7 +324,7 @@ defineExpose({
327
324
  font-size: 16px;
328
325
  display: flex;
329
326
  justify-content: center;
330
- padding: 4px 12px;
327
+ padding: 4px 0 4px 12px;
331
328
  }
332
329
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-indent-unit {
333
330
  width: 10px;
@@ -358,8 +355,6 @@ defineExpose({
358
355
  white-space: nowrap;
359
356
  flex: 1;
360
357
  min-width: 0;
361
- }
362
- :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle {
363
358
  position: relative;
364
359
  }
365
360
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.selectable {
@@ -368,15 +363,13 @@ defineExpose({
368
363
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.not-selectable {
369
364
  cursor: auto;
370
365
  }
371
- :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .menu-trigger {
372
- position: absolute;
373
- right: 0;
374
- }
375
366
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .click-menu-wrapper {
376
367
  display: none;
368
+ margin-left: auto;
369
+ margin-right: 4px;
377
370
  }
378
371
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle:hover .click-menu-wrapper {
379
- display: contents;
372
+ display: block;
380
373
  }
381
374
  :deep(.ant-tree-list) .ant-tree-treenode:hover {
382
375
  background-color: #E9EBED;
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" setup>
2
2
  import { ref, watch } from 'vue'
3
3
  import * as _ from 'lodash-es'
4
- import type { BomNode, BomTreeConfig, Optional, TreeMenuTriggerMode, WorkBenchLayoutConfig } from '../../models'
4
+ import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
5
5
  import { convertBomDataToTree } from '../../utils'
6
6
  import HdLeftRight from '../left-right/index'
7
7
  import HdBomTree from '../bom-tree/index'
@@ -18,7 +18,7 @@ interface Props {
18
18
  bomData: Optional<BomNode[]>
19
19
  treeConfig: BomTreeConfig
20
20
  layoutConfig?: WorkBenchLayoutConfig
21
- treeMenuTriggerMode?: TreeMenuTriggerMode
21
+ maintainable?: boolean
22
22
  }
23
23
  const bomDataForTree = ref<BomNode[]>()
24
24
  const selectedNode = ref<BomNode>()
@@ -74,7 +74,7 @@ defineExpose({
74
74
  ref="treeRef"
75
75
  :tree-data="bomDataForTree"
76
76
  :config="props.treeConfig"
77
- :menu-trigger-mode="props.treeMenuTriggerMode"
77
+ :menu-trigger-mode="props.maintainable"
78
78
  @select="(data: BomNode) => onSelected(data)"
79
79
  >
80
80
  <template #node-menu="{ treeNode }">
@@ -33,8 +33,3 @@ export interface BomNode {
33
33
  raw: Record<string, any>;
34
34
  [key: string]: any;
35
35
  }
36
- export declare enum TreeMenuTriggerMode {
37
- contextMenu = "context-menu",
38
- click = "click",
39
- forbid = "forbid"
40
- }
@@ -1,7 +1 @@
1
1
  export const defaultTitleTemplate = "${code}";
2
- export var TreeMenuTriggerMode = /* @__PURE__ */ ((TreeMenuTriggerMode2) => {
3
- TreeMenuTriggerMode2["contextMenu"] = "context-menu";
4
- TreeMenuTriggerMode2["click"] = "click";
5
- TreeMenuTriggerMode2["forbid"] = "forbid";
6
- return TreeMenuTriggerMode2;
7
- })(TreeMenuTriggerMode || {});
@@ -9,10 +9,9 @@ import type { EventDataNode } from 'ant-design-vue/es/tree'
9
9
  import { MoreOutlined } from '@ant-design/icons-vue'
10
10
  import HdGrayInput from '../gray-input'
11
11
  import type { BomTreeConfig } from '../../models'
12
- import { TreeMenuTriggerMode } from '../../models'
13
12
 
14
13
  const props = withDefaults(defineProps<Props>(), {
15
- menuTriggerMode: TreeMenuTriggerMode.contextMenu,
14
+ maintainable: false,
16
15
  })
17
16
  const emit = defineEmits(['select'])
18
17
  const COMPONENT_NAME = 'HdBomTree'
@@ -28,7 +27,7 @@ type TreeNodeWithMeta = DataNode & {
28
27
  interface Props {
29
28
  treeData: TreeProps['treeData']
30
29
  config: BomTreeConfig
31
- menuTriggerMode?: TreeMenuTriggerMode
30
+ maintainable?: boolean
32
31
  }
33
32
 
34
33
  const expandedKeys = ref<(string | number)[]>([])
@@ -263,34 +262,32 @@ defineExpose({
263
262
  @select="onSelected"
264
263
  >
265
264
  <template #title="{ title, dataRef }">
266
- <a-dropdown :trigger="['contextmenu']">
267
- <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
268
- <div
269
- v-if="!!dataRef.icon"
270
- class="icon w-20px h-20px mr-4px min-w-20px"
271
- :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
272
- />
273
- <div v-if="hasSearchMatch(title)" class="tree-node-text">
274
- <span>{{ getTitlePart(title, 'before') }}</span>
275
- <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
276
- <span>{{ getTitlePart(title, 'after') }}</span>
277
- </div>
278
- <div v-else class="tree-node-text">
279
- {{ title }}
280
- </div>
281
- <div class="click-menu-wrapper">
282
- <a-dropdown v-if="props.menuTriggerMode === TreeMenuTriggerMode.click" :trigger="['click']">
283
- <MoreOutlined class="menu-trigger" @click.stop />
284
- <template #overlay>
285
- <slot name="node-menu" :tree-node="dataRef" />
286
- </template>
287
- </a-dropdown>
288
- </div>
265
+ <div :class="`tree-node-tittle flex items-center ${dataRef.selectable ? 'selectable' : 'not-selectable'}`">
266
+ <div
267
+ v-if="!!dataRef.icon"
268
+ class="icon w-20px h-20px mr-4px min-w-20px"
269
+ :class="[getIconClass(dataRef.icon, selectedKeys.includes(dataRef.key))]"
270
+ />
271
+ <div v-if="hasSearchMatch(title)" class="tree-node-text">
272
+ <span>{{ getTitlePart(title, 'before') }}</span>
273
+ <span class="highlight" style="background-color: #FFD499">{{ searchValue }}</span>
274
+ <span>{{ getTitlePart(title, 'after') }}</span>
289
275
  </div>
290
- <template v-if="props.menuTriggerMode === TreeMenuTriggerMode.contextMenu" #overlay>
291
- <slot name="node-menu" :tree-node="dataRef" />
292
- </template>
293
- </a-dropdown>
276
+ <div v-else class="tree-node-text">
277
+ {{ title }}
278
+ </div>
279
+ <div v-if="props.maintainable" class="click-menu-wrapper">
280
+ <a-dropdown
281
+ :trigger="['hover', 'click']"
282
+ :destroy-popup-on-hide="true"
283
+ >
284
+ <MoreOutlined class="menu-trigger" @click.stop />
285
+ <template #overlay>
286
+ <slot name="node-menu" :tree-node="dataRef" />
287
+ </template>
288
+ </a-dropdown>
289
+ </div>
290
+ </div>
294
291
  </template>
295
292
  <template #switcherIcon="{ dataRef }">
296
293
  <div
@@ -327,7 +324,7 @@ defineExpose({
327
324
  font-size: 16px;
328
325
  display: flex;
329
326
  justify-content: center;
330
- padding: 4px 12px;
327
+ padding: 4px 0 4px 12px;
331
328
  }
332
329
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-indent-unit {
333
330
  width: 10px;
@@ -358,8 +355,6 @@ defineExpose({
358
355
  white-space: nowrap;
359
356
  flex: 1;
360
357
  min-width: 0;
361
- }
362
- :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle {
363
358
  position: relative;
364
359
  }
365
360
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.selectable {
@@ -368,15 +363,13 @@ defineExpose({
368
363
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle.not-selectable {
369
364
  cursor: auto;
370
365
  }
371
- :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .menu-trigger {
372
- position: absolute;
373
- right: 0;
374
- }
375
366
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle .click-menu-wrapper {
376
367
  display: none;
368
+ margin-left: auto;
369
+ margin-right: 4px;
377
370
  }
378
371
  :deep(.ant-tree-list) .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title .tree-node-tittle:hover .click-menu-wrapper {
379
- display: contents;
372
+ display: block;
380
373
  }
381
374
  :deep(.ant-tree-list) .ant-tree-treenode:hover {
382
375
  background-color: #E9EBED;
@@ -1,7 +1,7 @@
1
1
  <script lang="ts" setup>
2
2
  import { ref, watch } from 'vue'
3
3
  import * as _ from 'lodash-es'
4
- import type { BomNode, BomTreeConfig, Optional, TreeMenuTriggerMode, WorkBenchLayoutConfig } from '../../models'
4
+ import type { BomNode, BomTreeConfig, Optional, WorkBenchLayoutConfig } from '../../models'
5
5
  import { convertBomDataToTree } from '../../utils'
6
6
  import HdLeftRight from '../left-right/index'
7
7
  import HdBomTree from '../bom-tree/index'
@@ -18,7 +18,7 @@ interface Props {
18
18
  bomData: Optional<BomNode[]>
19
19
  treeConfig: BomTreeConfig
20
20
  layoutConfig?: WorkBenchLayoutConfig
21
- treeMenuTriggerMode?: TreeMenuTriggerMode
21
+ maintainable?: boolean
22
22
  }
23
23
  const bomDataForTree = ref<BomNode[]>()
24
24
  const selectedNode = ref<BomNode>()
@@ -74,7 +74,7 @@ defineExpose({
74
74
  ref="treeRef"
75
75
  :tree-data="bomDataForTree"
76
76
  :config="props.treeConfig"
77
- :menu-trigger-mode="props.treeMenuTriggerMode"
77
+ :menu-trigger-mode="props.maintainable"
78
78
  @select="(data: BomNode) => onSelected(data)"
79
79
  >
80
80
  <template #node-menu="{ treeNode }">
@@ -33,8 +33,3 @@ export interface BomNode {
33
33
  raw: Record<string, any>;
34
34
  [key: string]: any;
35
35
  }
36
- export declare enum TreeMenuTriggerMode {
37
- contextMenu = "context-menu",
38
- click = "click",
39
- forbid = "forbid"
40
- }
@@ -3,11 +3,5 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.defaultTitleTemplate = exports.TreeMenuTriggerMode = void 0;
7
- const defaultTitleTemplate = exports.defaultTitleTemplate = "${code}";
8
- var TreeMenuTriggerMode = exports.TreeMenuTriggerMode = /* @__PURE__ */(TreeMenuTriggerMode2 => {
9
- TreeMenuTriggerMode2["contextMenu"] = "context-menu";
10
- TreeMenuTriggerMode2["click"] = "click";
11
- TreeMenuTriggerMode2["forbid"] = "forbid";
12
- return TreeMenuTriggerMode2;
13
- })(TreeMenuTriggerMode || {});
6
+ exports.defaultTitleTemplate = void 0;
7
+ const defaultTitleTemplate = exports.defaultTitleTemplate = "${code}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handaotech-design/bom",
3
- "version": "0.0.34",
3
+ "version": "0.0.36",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "exports": {