@webitel/ui-sdk 3.1.92 → 3.1.94
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/ui-sdk.common.js +30 -21
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +30 -21
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +1 -1
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/organisms/wt-table-column-select/wt-table-column-select.vue +70 -22
- package/src/locale/en/en.js +1 -0
- package/src/locale/ru/ru.js +1 -0
- package/src/locale/ua/ua.js +1 -0
package/package.json
CHANGED
|
@@ -18,19 +18,29 @@
|
|
|
18
18
|
{{ $t('webitelUI.tableColumnSelect.title') }}
|
|
19
19
|
</template>
|
|
20
20
|
<template v-slot:main>
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
:
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
<div class="wt-table-column-select__popup-list-wrap">
|
|
22
|
+
<ul
|
|
23
|
+
class="wt-table-column-select__popup-list"
|
|
24
|
+
:class="{
|
|
25
|
+
'wt-table-column-select__popup-list--md':
|
|
26
|
+
changeableDraft.length > 20 && changeableDraft.length <= 30,
|
|
27
|
+
'wt-table-column-select__popup-list--lg':
|
|
28
|
+
changeableDraft.length > 30
|
|
29
|
+
}"
|
|
27
30
|
>
|
|
28
|
-
<
|
|
29
|
-
v-
|
|
30
|
-
:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
<li
|
|
32
|
+
v-for="(column, key) of changeableDraft"
|
|
33
|
+
:key="key"
|
|
34
|
+
class="wt-table-column-select__popup-item"
|
|
35
|
+
@click.capture.prevent="column.show = !column.show"
|
|
36
|
+
>
|
|
37
|
+
<wt-checkbox
|
|
38
|
+
v-model="column.show"
|
|
39
|
+
:label="shownColLabel(column)"
|
|
40
|
+
></wt-checkbox>
|
|
41
|
+
</li>
|
|
42
|
+
</ul>
|
|
43
|
+
</div>
|
|
34
44
|
</template>
|
|
35
45
|
<template v-slot:actions>
|
|
36
46
|
<wt-button
|
|
@@ -84,7 +94,10 @@ export default {
|
|
|
84
94
|
},
|
|
85
95
|
computed: {
|
|
86
96
|
changeableDraft() {
|
|
87
|
-
return this.draft.filter((header) => !this.staticHeaders.includes(header.value))
|
|
97
|
+
return this.draft.filter((header) => !this.staticHeaders.includes(header.value)).sort((a, b) => {
|
|
98
|
+
return a.text.localeCompare(b.text);
|
|
99
|
+
// sorting headers for alphabet just in popup
|
|
100
|
+
});
|
|
88
101
|
},
|
|
89
102
|
},
|
|
90
103
|
methods: {
|
|
@@ -112,18 +125,53 @@ export default {
|
|
|
112
125
|
</script>
|
|
113
126
|
|
|
114
127
|
<style lang="scss" scoped>
|
|
128
|
+
$list-height: 400px;
|
|
129
|
+
$list-width-sm: calc(500px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
|
|
130
|
+
$list-width-md: calc(800px - var(--spacing-xl)); // all popup width - (paddings + overflow-padding)
|
|
131
|
+
|
|
115
132
|
.wt-table-column-select {
|
|
116
|
-
line-height: 0; // prevent 24x28 icon
|
|
133
|
+
line-height: 0; // prevent 24x28 icon height :/
|
|
117
134
|
}
|
|
135
|
+
.wt-table-column-select {
|
|
136
|
+
&__heading {
|
|
137
|
+
text-align: center;
|
|
138
|
+
}
|
|
118
139
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
140
|
+
&__popup-list-wrap {
|
|
141
|
+
max-height: $list-height;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&__popup-list {
|
|
145
|
+
@extend %wt-scrollbar;
|
|
146
|
+
max-height: $list-height;
|
|
147
|
+
width: $list-width-sm;
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
flex-wrap: wrap;
|
|
151
|
+
overflow-x: hidden;
|
|
125
152
|
|
|
126
|
-
|
|
127
|
-
|
|
153
|
+
// for 20-30 items
|
|
154
|
+
&--md {
|
|
155
|
+
width: $list-width-md;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
// for 30+ items
|
|
159
|
+
&--lg {
|
|
160
|
+
width: $list-width-md;
|
|
161
|
+
max-height: none;
|
|
162
|
+
display: block;
|
|
163
|
+
column-count: 3;
|
|
164
|
+
overflow-y: auto;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&__popup-item {
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
margin-right: var(--spacing-sm);
|
|
172
|
+
margin-bottom: var(--spacing-sm);
|
|
173
|
+
}
|
|
128
174
|
}
|
|
175
|
+
|
|
129
176
|
</style>
|
|
177
|
+
|
package/src/locale/en/en.js
CHANGED
package/src/locale/ru/ru.js
CHANGED