@itfin/components 2.0.3 → 2.0.4
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/package.json +1 -1
- package/src/assets/scss/directives/tooltip.scss +6 -5
- package/src/components/card/BentoCard.vue +70 -19
- package/src/components/card/BentoGrid.vue +18 -7
- package/src/components/icon/new-icons/arrow_down.svg +3 -0
- package/src/components/icon/new-icons/arrow_up.svg +3 -0
- package/src/components/table/TableHeader.vue +1 -1
- package/src/components/table/table2.scss +16 -1
- package/src/components/tree/TreeEditor.vue +97 -83
- package/src/helpers/tree.js +1 -1
package/package.json
CHANGED
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
@import '../variables';
|
|
2
2
|
@import '../bootstrap';
|
|
3
3
|
|
|
4
|
-
$tooltip-color: #
|
|
4
|
+
$tooltip-color: #22222B;
|
|
5
5
|
$dark-tooltip-color: #7b52eb;
|
|
6
6
|
|
|
7
7
|
:root {
|
|
8
8
|
--itf-tooltip-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
|
|
9
|
-
--itf-tooltip-color: #
|
|
9
|
+
--itf-tooltip-color: #FFF;
|
|
10
10
|
--itf-tooltip-bg-color: #{$tooltip-color};
|
|
11
|
+
--itf-tooltip-font-size: 14px;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
[data-theme="dark"] {
|
|
14
15
|
--itf-tooltip-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.15), 0 4px 80px -8px rgba(211, 208, 219, 0.25), 0 4px 4px -2px rgba(156, 150, 164, 0.15);
|
|
15
16
|
--itf-tooltip-color: #{$dark-body-color};
|
|
16
17
|
--itf-tooltip-bg-color: #{$dark-tooltip-color};
|
|
17
|
-
--itf-tooltip-font-size:
|
|
18
|
+
--itf-tooltip-font-size: 14px;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
.tippy-box[data-theme~=itfin] {
|
|
21
22
|
color: var(--itf-tooltip-color);
|
|
22
23
|
background-color: var(--itf-tooltip-bg-color);
|
|
23
24
|
font-size: var(--itf-tooltip-font-size);
|
|
24
|
-
border-radius:
|
|
25
|
+
border-radius: 0.5rem;
|
|
25
26
|
box-shadow: var(--itf-tooltip-shadow);
|
|
26
|
-
padding:
|
|
27
|
+
padding: .25rem .5rem;
|
|
27
28
|
cursor: default;
|
|
28
29
|
|
|
29
30
|
&[data-placement^=top] > .tippy-arrow:before {
|
|
@@ -1,33 +1,74 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="itf-bento-card-wrapper
|
|
2
|
+
<div class="itf-bento-card-wrapper rounded bg-white" :class="{ enabled }">
|
|
3
|
+
<div class="itf-bento-card__drag">
|
|
4
|
+
<svg width="35" height="23" viewBox="0 0 35 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<g filter="url(#filter0_d_1320_32101)">
|
|
6
|
+
<rect x="4" y="2" width="27" height="15" rx="4" fill="#22222B"/>
|
|
7
|
+
<circle cx="23.5" cy="9.5" r="1.5" fill="white"/>
|
|
8
|
+
<circle cx="17.5" cy="9.5" r="1.5" fill="white"/>
|
|
9
|
+
<circle cx="11.5" cy="9.5" r="1.5" fill="white"/>
|
|
10
|
+
</g>
|
|
11
|
+
<defs>
|
|
12
|
+
<filter id="filter0_d_1320_32101" x="0" y="0" width="35" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
13
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
14
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
15
|
+
<feOffset dy="2"/>
|
|
16
|
+
<feGaussianBlur stdDeviation="2"/>
|
|
17
|
+
<feComposite in2="hardAlpha" operator="out"/>
|
|
18
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
|
19
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1320_32101"/>
|
|
20
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1320_32101" result="shape"/>
|
|
21
|
+
</filter>
|
|
22
|
+
</defs>
|
|
23
|
+
</svg>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
3
26
|
<slot/>
|
|
4
27
|
|
|
5
|
-
<div class="settings shadow
|
|
6
|
-
<button @click="$emit('resize', [
|
|
7
|
-
<svg width="
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 9H3C2.50669 9 2.23688 9.00108 2.04183 9.01439C2.03276 9.01501 2.02424 9.01564 2.01626 9.01626C2.01564 9.02424 2.01501 9.03276 2.01439 9.04183C2.00108 9.23688 2 9.50669 2 10C2 10.4933 2.00108 10.7631 2.01439 10.9582C2.01501 10.9672 2.01564 10.9758 2.01626 10.9837C2.02424 10.9844 2.03276 10.985 2.04183 10.9856C2.23688 10.9989 2.50669 11 3 11H17C17.4933 11 17.7631 10.9989 17.9582 10.9856C17.9672 10.985 17.9758 10.9844 17.9837 10.9837C17.9844 10.9758 17.985 10.9672 17.9856 10.9582C17.9989 10.7631 18 10.4933 18 10C18 9.50669 17.9989 9.23688 17.9856 9.04183C17.985 9.03276 17.9844 9.02424 17.9837 9.01626C17.9758 9.01564 17.9672 9.01501 17.9582 9.01439C17.7631 9.00108 17.4933 9 17 9ZM0.152241 8.23463C0 8.60218 0 9.06812 0 10C0 10.9319 0 11.3978 0.152241 11.7654C0.355229 12.2554 0.744577 12.6448 1.23463 12.8478C1.60218 13 2.06812 13 3 13H17C17.9319 13 18.3978 13 18.7654 12.8478C19.2554 12.6448 19.6448 12.2554 19.8478 11.7654C20 11.3978 20 10.9319 20 10C20 9.06812 20 8.60218 19.8478 8.23463C19.6448 7.74458 19.2554 7.35523 18.7654 7.15224C18.3978 7 17.9319 7 17 7H3C2.06812 7 1.60218 7 1.23463 7.15224C0.744577 7.35523 0.355229 7.74458 0.152241 8.23463Z" fill="currentColor"></path></svg>
|
|
28
|
+
<div class="settings shadow bg-black gap-2 align-items-center">
|
|
29
|
+
<button @click="$emit('resize', [1, 1])" class="rounded-1" :class="{'active': w === 1 && h === 1}">
|
|
30
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
31
|
+
<path d="M14 16L10 16C8.89543 16 8 15.1046 8 14L8 10C8 8.89543 8.89543 8 10 8L14 8C15.1046 8 16 8.89543 16 10L16 14C16 15.1046 15.1046 16 14 16Z" stroke="white" stroke-width="1.2"/>
|
|
32
|
+
</svg>
|
|
11
33
|
</button>
|
|
12
|
-
<button @click="$emit('resize', [
|
|
13
|
-
<svg width="
|
|
34
|
+
<button @click="$emit('resize', [2, 2])" class="rounded-1" :class="{'active': w === 2 && h === 2}">
|
|
35
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
+
<path d="M17 16L7 16C5.89543 16 5 15.1046 5 14L5 10C5 8.89543 5.89543 8 7 8L17 8C18.1046 8 19 8.89543 19 10L19 14C19 15.1046 18.1046 16 17 16Z" stroke="white" stroke-width="1.2"/>
|
|
37
|
+
</svg>
|
|
14
38
|
</button>
|
|
15
|
-
<button @click="$emit('resize', [
|
|
16
|
-
<svg width="
|
|
39
|
+
<button @click="$emit('resize', [4, 4])" class="rounded-1" :class="{'active': w === 4 && h === 4}">
|
|
40
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
41
|
+
<path d="M17 19L7 19C5.89543 19 5 18.1046 5 17L5 7C5 5.89543 5.89543 5 7 5L17 5C18.1046 5 19 5.89543 19 7L19 17C19 18.1046 18.1046 19 17 19Z" stroke="white" stroke-width="1.2"/>
|
|
42
|
+
</svg>
|
|
17
43
|
</button>
|
|
18
44
|
</div>
|
|
19
45
|
</div>
|
|
20
46
|
</template>
|
|
21
47
|
<style scoped lang="scss">
|
|
48
|
+
.itf-bento-card {
|
|
49
|
+
&__drag {
|
|
50
|
+
transition: opacity .3s;
|
|
51
|
+
position: absolute;
|
|
52
|
+
top: -12px;
|
|
53
|
+
left: 50%;
|
|
54
|
+
transform: translateX(-50%);
|
|
55
|
+
opacity: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
22
58
|
.itf-bento-card-wrapper {
|
|
23
59
|
position: absolute;
|
|
24
60
|
top: 0;
|
|
25
61
|
bottom: 0;
|
|
26
62
|
left: 0;
|
|
27
63
|
right: 0;
|
|
64
|
+
border: 1px solid #E7E8EC;
|
|
28
65
|
|
|
29
|
-
|
|
30
|
-
|
|
66
|
+
&.enabled:hover {
|
|
67
|
+
border-color: #0B1315;
|
|
68
|
+
|
|
69
|
+
.settings, .itf-bento-card__drag {
|
|
70
|
+
opacity: 1;
|
|
71
|
+
}
|
|
31
72
|
}
|
|
32
73
|
.vue-draggable-dragging &:hover .settings {
|
|
33
74
|
opacity: 0;
|
|
@@ -35,17 +76,27 @@
|
|
|
35
76
|
|
|
36
77
|
.settings {
|
|
37
78
|
transition: opacity .3s;
|
|
38
|
-
transition-delay: .3s;
|
|
39
79
|
opacity: 0;
|
|
40
80
|
display: flex;
|
|
41
81
|
position: absolute;
|
|
42
|
-
bottom: -
|
|
82
|
+
bottom: -5px;
|
|
43
83
|
left: 50%;
|
|
44
|
-
padding: .375rem;
|
|
45
84
|
transform: translateX(-50%);
|
|
46
85
|
z-index: 100;
|
|
86
|
+
width: 24px;
|
|
87
|
+
height: 9px;
|
|
88
|
+
border-radius: .5rem;
|
|
47
89
|
|
|
90
|
+
&:hover {
|
|
91
|
+
width: auto;
|
|
92
|
+
height: auto;
|
|
93
|
+
padding: .175rem;
|
|
94
|
+
button {
|
|
95
|
+
display: flex;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
48
98
|
button {
|
|
99
|
+
display: none;
|
|
49
100
|
color: #fff;
|
|
50
101
|
padding: 0;
|
|
51
102
|
width: 25px;
|
|
@@ -54,11 +105,10 @@
|
|
|
54
105
|
background: transparent;
|
|
55
106
|
justify-content: center;
|
|
56
107
|
align-items: center;
|
|
57
|
-
display: flex;
|
|
58
108
|
|
|
59
109
|
&.active {
|
|
60
|
-
background:
|
|
61
|
-
color: #
|
|
110
|
+
background-color: #494A55;
|
|
111
|
+
color: #FFF;
|
|
62
112
|
}
|
|
63
113
|
}
|
|
64
114
|
}
|
|
@@ -75,5 +125,6 @@ export default @Component({
|
|
|
75
125
|
class itfBentoCard extends Vue {
|
|
76
126
|
@Prop() w;
|
|
77
127
|
@Prop() h;
|
|
128
|
+
@Prop() enabled;
|
|
78
129
|
}
|
|
79
130
|
</script>
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<grid-layout
|
|
3
3
|
:layout="layout"
|
|
4
|
-
@update:layout="
|
|
4
|
+
@update:layout="onUpdateLayout"
|
|
5
5
|
class="itf-bento-grid"
|
|
6
|
-
:col-num="
|
|
7
|
-
:
|
|
6
|
+
:col-num="4"
|
|
7
|
+
:row-height="200"
|
|
8
|
+
:cols="{ lg: 4, md: 4, sm: 2, xs: 2, xxs: 2 }"
|
|
8
9
|
:preserve-aspect-ratio="true"
|
|
9
10
|
:responsive="true"
|
|
10
|
-
:is-draggable="
|
|
11
|
+
:is-draggable="enabled"
|
|
11
12
|
:is-resizable="false"
|
|
12
13
|
:is-mirrored="false"
|
|
13
14
|
:is-bounded="true"
|
|
@@ -15,13 +16,14 @@
|
|
|
15
16
|
:margin="[10, 10]"
|
|
16
17
|
:use-css-transforms="true">
|
|
17
18
|
<grid-item v-for="item in layout"
|
|
19
|
+
drag-allow-from=".itf-bento-card__drag"
|
|
18
20
|
:x="item.x"
|
|
19
21
|
:y="item.y"
|
|
20
22
|
:w="item.w"
|
|
21
23
|
:h="item.h"
|
|
22
24
|
:i="item.i"
|
|
23
25
|
:key="item.i">
|
|
24
|
-
<bento-card @resize="(e) => onResize(item, e)" :w="item.w" :h="item.h">
|
|
26
|
+
<bento-card :enabled="enabled" @resize="(e) => onResize(item, e)" :w="item.w" :h="item.h">
|
|
25
27
|
<slot name="cell" :item="item" :index="item.i"></slot>
|
|
26
28
|
</bento-card>
|
|
27
29
|
</grid-item>
|
|
@@ -32,8 +34,9 @@
|
|
|
32
34
|
margin: -10px;
|
|
33
35
|
|
|
34
36
|
.vue-grid-item.vue-grid-placeholder {
|
|
35
|
-
background:
|
|
36
|
-
border:
|
|
37
|
+
background-color: #F5F7F9;
|
|
38
|
+
border: 1px solid #F5F7F9;
|
|
39
|
+
opacity: 1 !important;
|
|
37
40
|
border-radius: 10px;
|
|
38
41
|
}
|
|
39
42
|
}
|
|
@@ -53,6 +56,7 @@ export default @Component({
|
|
|
53
56
|
})
|
|
54
57
|
class itfBentoGrid extends Vue {
|
|
55
58
|
@Prop() layout;
|
|
59
|
+
@Prop({ type: Boolean, default: true }) enabled;
|
|
56
60
|
|
|
57
61
|
onResize(item, [w, h]) {
|
|
58
62
|
const newLayout = this.layout.map((i) => {
|
|
@@ -64,5 +68,12 @@ class itfBentoGrid extends Vue {
|
|
|
64
68
|
});
|
|
65
69
|
this.$emit('update:layout', newLayout);
|
|
66
70
|
}
|
|
71
|
+
|
|
72
|
+
onUpdateLayout(layout) {
|
|
73
|
+
this.$emit('update:layout', layout.map((l) => ({
|
|
74
|
+
...l,
|
|
75
|
+
component: this.layout.find((i) => i.i === l.i).component
|
|
76
|
+
})));
|
|
77
|
+
}
|
|
67
78
|
}
|
|
68
79
|
</script>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.82755 12.7908C7.77448 12.7688 7.72475 12.7363 7.68161 12.6931L3.93161 8.94315C3.75587 8.76741 3.75587 8.48249 3.93161 8.30675C4.10734 8.13102 4.39227 8.13102 4.568 8.30675L7.54981 11.2886L7.5498 3.62495C7.5498 3.37642 7.75128 3.17495 7.9998 3.17495C8.24833 3.17495 8.4498 3.37642 8.4498 3.62495L8.4498 11.2886L11.4316 8.30675C11.6073 8.13102 11.8923 8.13102 12.068 8.30675C12.2437 8.48249 12.2437 8.76741 12.068 8.94315L8.31824 12.6929L8.318 12.6931M7.99711 12.8249C7.93707 12.8246 7.87983 12.8125 7.82755 12.7908L7.99711 12.8249ZM8.0025 12.8249C8.00161 12.8249 8.00071 12.825 7.9998 12.825C7.9989 12.825 7.998 12.8249 7.99711 12.8249M8.31609 12.6951C8.2354 12.7748 8.12473 12.8242 8.0025 12.8249L8.31609 12.6951Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.77072 3.61218C9.69995 3.64146 9.63365 3.68486 9.57613 3.74239L4.57613 8.74239C4.34181 8.9767 4.34181 9.3566 4.57613 9.59091C4.81044 9.82523 5.19034 9.82523 5.42465 9.59091L9.40039 5.61518L9.40039 15.8333C9.40039 16.1647 9.66902 16.4333 10.0004 16.4333C10.3318 16.4333 10.6004 16.1647 10.6004 15.8333L10.6004 5.61518L14.5761 9.59091C14.8104 9.82523 15.1903 9.82523 15.4247 9.59091C15.659 9.3566 15.659 8.9767 15.4247 8.74239L10.4251 3.74282L10.4247 3.74239C10.2479 3.5656 9.9882 3.52219 9.77072 3.61218Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|
|
@@ -211,7 +211,7 @@ class itfTableHeader extends Vue {
|
|
|
211
211
|
if (typeof this._sorting === 'string'){
|
|
212
212
|
return this._sorting[0] === '-' ? {[this._sorting.substring(1)]: 'desc'} : {[this._sorting]: 'asc'};
|
|
213
213
|
} else {
|
|
214
|
-
return this._sorting;
|
|
214
|
+
return this._sorting ?? {};
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--itf-table-header-font-size: 12px;
|
|
4
4
|
--itf-table-content-font-size: 16px;
|
|
5
5
|
--itf-table-selected-bg: #f9fafc;
|
|
6
|
-
--itf-table-active-bg: #
|
|
6
|
+
--itf-table-active-bg: #d4dbec;
|
|
7
7
|
--itf-table-alt-bg: #F9FAFB;
|
|
8
8
|
--itf-table-alt-selected-bg: #eff1f3;
|
|
9
9
|
--itf-table-header-bg: #f5f7f8;
|
|
@@ -141,6 +141,21 @@ body[data-theme="dark"] {
|
|
|
141
141
|
box-shadow: 0px 4px 20px 0px #0000001A;
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
|
+
.table-group-wrapper {
|
|
145
|
+
.table-row-template {
|
|
146
|
+
&:after {
|
|
147
|
+
content: "";
|
|
148
|
+
position: absolute;
|
|
149
|
+
display: block;
|
|
150
|
+
height: 12px;
|
|
151
|
+
left: 0;
|
|
152
|
+
right: 0;
|
|
153
|
+
top: -12px;
|
|
154
|
+
z-index: 4;
|
|
155
|
+
background: var(--itf-table-bg);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
144
159
|
&__header {
|
|
145
160
|
--itf-table2-row-bg: var(--itf-table-header-bg);
|
|
146
161
|
//background-color: var(--itf-table-header-bg);
|
|
@@ -83,92 +83,94 @@
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
.itf-tree-editor {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
86
|
+
&_inside:after,
|
|
87
|
+
&_disabled:after,
|
|
88
|
+
&_border-top:after,
|
|
89
|
+
&_border-bottom:after {
|
|
90
|
+
content: " ";
|
|
91
|
+
display: block;
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: -5px;
|
|
94
|
+
left: -5px;
|
|
95
|
+
border-left: 7px solid var(--bs-primary);
|
|
96
|
+
border-top: 7px solid transparent;
|
|
97
|
+
border-bottom: 7px solid transparent;
|
|
98
|
+
border-right: 7px solid transparent;
|
|
99
|
+
}
|
|
100
|
+
&_border-top {
|
|
101
|
+
display:inline-block;
|
|
102
|
+
width: var(--itf-tree-editor-tip-width);
|
|
103
|
+
height: var(--itf-tree-editor-tip-height);
|
|
104
|
+
/*background-color: var(--itf-tree-editor-shift-block-color);*/
|
|
105
|
+
border-top: 3px solid var(--bs-primary);
|
|
106
|
+
}
|
|
107
|
+
&_border-bottom {
|
|
108
|
+
display:inline-block;
|
|
109
|
+
width: var(--itf-tree-editor-tip-width);
|
|
110
|
+
height: var(--itf-tree-editor-tip-height);
|
|
111
|
+
/*background-color: var(--itf-tree-editor-shift-block-color);*/
|
|
112
|
+
border-bottom: 3px solid var(--bs-primary);
|
|
113
113
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}
|
|
114
|
+
&:after {
|
|
115
|
+
top: auto;
|
|
116
|
+
bottom: 1px
|
|
118
117
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
118
|
+
}
|
|
119
|
+
&_inside {
|
|
120
|
+
display:inline-block;
|
|
121
|
+
border-radius: .5rem;
|
|
122
|
+
border: 1px solid var(--bs-primary);
|
|
123
|
+
width: var(--itf-tree-editor-tip-width);
|
|
124
|
+
height: var(--itf-tree-editor-tip-height);
|
|
125
|
+
background-color: var(--itf-tree-editor-shift-block-color);
|
|
124
126
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
127
|
+
&:after {
|
|
128
|
+
top: 50%;
|
|
129
|
+
transform: translateY(-100%);
|
|
130
|
+
left: -7px;
|
|
130
131
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
132
|
+
}
|
|
133
|
+
&_node {
|
|
134
|
+
display: flex;
|
|
135
|
+
position: relative;
|
|
136
|
+
}
|
|
137
|
+
&_node.hidden {
|
|
138
|
+
display: none;
|
|
139
|
+
}
|
|
140
|
+
&_node .selected,
|
|
141
|
+
&_node:hover {
|
|
142
|
+
background-color: var(--itf-tree-hover-bg);
|
|
143
|
+
}
|
|
144
|
+
&_node_toggle {
|
|
145
|
+
margin-left: 0;
|
|
146
|
+
width: 45px;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
}
|
|
150
|
+
&_node_content {
|
|
151
|
+
flex-grow: 1;
|
|
152
|
+
align-items: start;
|
|
153
|
+
}
|
|
154
|
+
&_disabled {
|
|
155
|
+
display:inline-flex;
|
|
156
|
+
width: var(--itf-tree-editor-tip-width);
|
|
157
|
+
height: var(--itf-tree-editor-tip-height);
|
|
158
|
+
background-color: var(--itf-tree-editor-disabled-background-color);
|
|
159
|
+
color: var(--itf-tree-editor-disabled-color);
|
|
160
|
+
line-height: var(--itf-tree-editor-tip-height);
|
|
161
|
+
vertical-align: middle;
|
|
160
162
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
163
|
+
&-text {
|
|
164
|
+
font-size: var(--itf-tree-editor-disabled-font-size);
|
|
165
|
+
padding-left: var(--itf-tree-editor-disabled-padding-left);
|
|
166
|
+
}
|
|
165
167
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}
|
|
168
|
+
&:after {
|
|
169
|
+
content: '';
|
|
170
|
+
display: none;
|
|
170
171
|
}
|
|
171
172
|
}
|
|
173
|
+
}
|
|
172
174
|
</style>
|
|
173
175
|
<script>
|
|
174
176
|
import Vue from 'vue';
|
|
@@ -303,13 +305,14 @@ export default {
|
|
|
303
305
|
},
|
|
304
306
|
computed: {
|
|
305
307
|
itemsTrans () {
|
|
306
|
-
|
|
307
|
-
},
|
|
308
|
-
nodes () {
|
|
309
|
-
let items = this.itemsTrans;
|
|
308
|
+
let items = cloneDeep(this.items);
|
|
310
309
|
if (this.flat) {
|
|
311
310
|
items = buildTree(items, this.itemKey, this.parentKey, this.itemChildren);
|
|
312
311
|
}
|
|
312
|
+
return items;
|
|
313
|
+
},
|
|
314
|
+
nodes () {
|
|
315
|
+
let items = this.itemsTrans;
|
|
313
316
|
const list = flattenTree(items, 4, 0, null, [], this.itemChildren).map((item) => {
|
|
314
317
|
const [, ...nk] = item.path;
|
|
315
318
|
return { ...item, nk };
|
|
@@ -395,6 +398,9 @@ export default {
|
|
|
395
398
|
this.dgTipMode = 'disabled';
|
|
396
399
|
this.isNestingLimited = true;
|
|
397
400
|
}
|
|
401
|
+
if (!nodeEnter.isGroup && this.dgTipMode === 'block') {
|
|
402
|
+
this.dgTipMode = 'disabled';
|
|
403
|
+
}
|
|
398
404
|
if (this.dgTipMode !== 'disabled' && this.allowDrop && !this.allowDrop(nodeSelf, nodeEnter, this.dgTipMode)) {
|
|
399
405
|
this.dgTipMode = 'disabled';
|
|
400
406
|
}
|
|
@@ -449,7 +455,15 @@ export default {
|
|
|
449
455
|
// clear
|
|
450
456
|
this.dgTipMode = '';
|
|
451
457
|
|
|
452
|
-
|
|
458
|
+
let newItems = this.moveItem(this.itemsTrans, nkFrom, nkTo, modeDir, modeInsert);
|
|
459
|
+
if (this.flat) {
|
|
460
|
+
newItems = flattenTree(newItems).map(node => {
|
|
461
|
+
node.parentId = node.parentNode ? node.parentNode.id : null;
|
|
462
|
+
return node;
|
|
463
|
+
});
|
|
464
|
+
console.info(2, newItems);
|
|
465
|
+
}
|
|
466
|
+
this.$emit('update:items', newItems);
|
|
453
467
|
});
|
|
454
468
|
// save
|
|
455
469
|
this.dd = dd;
|
package/src/helpers/tree.js
CHANGED
|
@@ -16,7 +16,7 @@ function buildTree (items, idKey = 'id', parentKey = 'parentId', childrenKey = '
|
|
|
16
16
|
.filter(item => item[parentKey] === parent)
|
|
17
17
|
.map(item => ({ ...item, [childrenKey]: buildNode(items, item[idKey], item[idKey]) }));
|
|
18
18
|
|
|
19
|
-
return buildNode(items);
|
|
19
|
+
return buildNode(items, null, null);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export
|