@itfin/components 1.3.12 → 1.3.14
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
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="itf-editable-button">
|
|
3
3
|
<slot></slot>
|
|
4
|
-
<itf-button secondary icon small class="itf-editable-button__button" @click="$emit('click')">
|
|
4
|
+
<itf-button v-if="canEdit" secondary icon small class="itf-editable-button__button" @click="$emit('click')">
|
|
5
5
|
<itf-icon name="pen" />
|
|
6
6
|
</itf-button>
|
|
7
7
|
</div>
|
|
@@ -35,5 +35,6 @@ export default @Component({
|
|
|
35
35
|
}
|
|
36
36
|
})
|
|
37
37
|
class EditButton extends Vue {
|
|
38
|
+
@Prop({ type: Boolean, default: true }) canEdit;
|
|
38
39
|
}
|
|
39
40
|
</script>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
:data-column="index"
|
|
7
7
|
@mouseover="columnHighlight(index, 'enter')"
|
|
8
8
|
@mouseout="columnHighlight(index, 'leave')"
|
|
9
|
-
:key="index" class="itf-board-column itf-board-column__title p-2">
|
|
9
|
+
:key="index" :class="`itf-board-column itf-board-column__title p-2 ${columnEdit ? 'itf-board-column__move' : ''}`">
|
|
10
10
|
<div accept-group="board-columns"
|
|
11
11
|
class="itf-board-header-space"
|
|
12
12
|
@enter="columnHighlight(index, 'enter', 'drop')"
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
</div>
|
|
17
17
|
<itf-edit-button
|
|
18
18
|
accept-group="board-columns"
|
|
19
|
+
:can-edit="columnEdit"
|
|
19
20
|
@enter="columnHighlight(index, 'enter')"
|
|
20
21
|
@leave="columnHighlight(index, 'leave')"
|
|
21
22
|
@click="$emit('update:columnSettings', column)"
|
|
@@ -42,7 +43,7 @@
|
|
|
42
43
|
<div class="itf-board-header-dropzone"></div>
|
|
43
44
|
</div>
|
|
44
45
|
</div>
|
|
45
|
-
<div class="align-items-end d-flex pb-1">
|
|
46
|
+
<div v-if="columnEdit" class="align-items-end d-flex pb-1">
|
|
46
47
|
<slot name="add-column">
|
|
47
48
|
<itf-button icon small @click="$emit('add-сolumn')">
|
|
48
49
|
<itf-icon name="plus" />
|
|
@@ -98,6 +99,7 @@ class Board extends Vue {
|
|
|
98
99
|
@Prop({ type: Function, default: (item, value) => { item.Status = value; } }) updateFunc;
|
|
99
100
|
@Prop({ type: String, default: 'Name' }) columnNameKey;
|
|
100
101
|
@Prop(Boolean) columnSorting;
|
|
102
|
+
@Prop({ type: Boolean, default: true }) columnEdit;
|
|
101
103
|
|
|
102
104
|
beforeDestroy() {
|
|
103
105
|
if (this.columnSorting) {
|
|
@@ -129,7 +129,6 @@
|
|
|
129
129
|
border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
|
|
130
130
|
|
|
131
131
|
&__title {
|
|
132
|
-
cursor: move;
|
|
133
132
|
border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
|
|
134
133
|
|
|
135
134
|
.itf-board-column__header {
|
|
@@ -142,6 +141,10 @@
|
|
|
142
141
|
}
|
|
143
142
|
}
|
|
144
143
|
|
|
144
|
+
&__move {
|
|
145
|
+
cursor: move;
|
|
146
|
+
}
|
|
147
|
+
|
|
145
148
|
&.over {
|
|
146
149
|
background-color: var(--itf-board-column-hover-color);
|
|
147
150
|
}
|
|
@@ -173,7 +176,7 @@
|
|
|
173
176
|
border-bottom: 1px solid var(--itf-board-card-border-color);
|
|
174
177
|
position: sticky;
|
|
175
178
|
top: 0;
|
|
176
|
-
z-index:
|
|
179
|
+
z-index: 100;
|
|
177
180
|
background-color: var(--bs-light);
|
|
178
181
|
}
|
|
179
182
|
|