@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.
- package/dist/es/components/bom-tree/index.vue +31 -38
- package/dist/es/components/bom-workbench/index.vue +3 -3
- package/dist/es/models/bom.d.ts +0 -5
- package/dist/es/models/bom.js +0 -6
- package/dist/lib/components/bom-tree/index.vue +31 -38
- package/dist/lib/components/bom-workbench/index.vue +3 -3
- package/dist/lib/models/bom.d.ts +0 -5
- package/dist/lib/models/bom.js +2 -8
- package/package.json +1 -1
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
<
|
|
267
|
-
<div
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
|
|
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
|
-
<
|
|
291
|
-
|
|
292
|
-
</
|
|
293
|
-
|
|
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:
|
|
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,
|
|
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
|
-
|
|
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.
|
|
77
|
+
:menu-trigger-mode="props.maintainable"
|
|
78
78
|
@select="(data: BomNode) => onSelected(data)"
|
|
79
79
|
>
|
|
80
80
|
<template #node-menu="{ treeNode }">
|
package/dist/es/models/bom.d.ts
CHANGED
package/dist/es/models/bom.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
-
<
|
|
267
|
-
<div
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<
|
|
274
|
-
|
|
275
|
-
|
|
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
|
-
<
|
|
291
|
-
|
|
292
|
-
</
|
|
293
|
-
|
|
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:
|
|
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,
|
|
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
|
-
|
|
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.
|
|
77
|
+
:menu-trigger-mode="props.maintainable"
|
|
78
78
|
@select="(data: BomNode) => onSelected(data)"
|
|
79
79
|
>
|
|
80
80
|
<template #node-menu="{ treeNode }">
|
package/dist/lib/models/bom.d.ts
CHANGED
package/dist/lib/models/bom.js
CHANGED
|
@@ -3,11 +3,5 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.defaultTitleTemplate =
|
|
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}";
|