@webitel/ui-sdk 25.10.46 → 25.10.48
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.css +1 -1
- package/dist/ui-sdk.js +8991 -8721
- package/dist/ui-sdk.umd.cjs +239 -167
- package/package.json +2 -2
- package/src/components/wt-button/wt-button.vue +26 -7
- package/src/components/wt-table/wt-table.vue +48 -2
- package/src/enums/ButtonVariant/ButtonVariant.ts +7 -0
- package/src/enums/index.ts +3 -0
- package/src/plugins/primevue/theme/components/button/button.js +97 -8
- package/types/components/wt-button/wt-button.vue.d.ts +17 -4
- package/types/components/wt-rounded-action/wt-rounded-action.vue.d.ts +2 -2
- package/types/components/wt-table/wt-table.vue.d.ts +24 -8
- package/types/enums/ButtonVariant/ButtonVariant.d.ts +6 -0
- package/types/enums/index.d.ts +2 -1
- package/types/plugins/primevue/theme/components/button/button.d.ts +23 -34
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webitel/ui-sdk",
|
|
3
|
-
"version": "25.10.
|
|
3
|
+
"version": "25.10.48",
|
|
4
4
|
"private": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"@vuepic/vue-datepicker": "^4.5.1",
|
|
57
57
|
"@vueuse/components": "^13.0.0",
|
|
58
58
|
"@webitel/api-services": "^0.0.56",
|
|
59
|
-
"@webitel/styleguide": "^24.12.
|
|
59
|
+
"@webitel/styleguide": "^24.12.78",
|
|
60
60
|
"autosize": "^6.0.1",
|
|
61
61
|
"axios": "^1.8.3",
|
|
62
62
|
"clipboard-copy": "^4.0.1",
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<p-button
|
|
3
3
|
:class="{
|
|
4
|
-
'p-button--width-by-content': widthByContent,
|
|
5
|
-
'p-button--contains-icon': containsIcon,
|
|
4
|
+
'p-button--width-by-content': widthByContent || icon,
|
|
6
5
|
'p-button--wide': wide,
|
|
7
6
|
'p-button--loading': showLoader,
|
|
7
|
+
'p-button--icon': icon,
|
|
8
|
+
[ `p-button--icon-${variant} p-button--icon-${size}` ]: icon,
|
|
8
9
|
}"
|
|
9
10
|
:disabled="disabled"
|
|
10
11
|
:loading="showLoader"
|
|
11
12
|
:severity="color"
|
|
12
13
|
:size="primevueSizeMap[size]"
|
|
14
|
+
:variant="variant"
|
|
13
15
|
class="wt-button"
|
|
14
16
|
v-bind="attrs"
|
|
15
17
|
@click.prevent="emit('click', $event)"
|
|
@@ -20,7 +22,13 @@
|
|
|
20
22
|
size="sm"
|
|
21
23
|
/>
|
|
22
24
|
<div class="wt-button__contents">
|
|
23
|
-
<slot> no content provided</slot>
|
|
25
|
+
<slot v-if="!icon"> no content provided</slot>
|
|
26
|
+
<wt-icon
|
|
27
|
+
v-else
|
|
28
|
+
:icon="icon"
|
|
29
|
+
:icon-prefix="iconPrefix"
|
|
30
|
+
:size="iconButtonSizeMap[size]"
|
|
31
|
+
/>
|
|
24
32
|
</div>
|
|
25
33
|
</p-button>
|
|
26
34
|
</template>
|
|
@@ -29,12 +37,19 @@
|
|
|
29
37
|
import type { ButtonProps } from 'primevue';
|
|
30
38
|
import {computed, defineEmits, defineProps, ref, useAttrs, watch} from 'vue';
|
|
31
39
|
|
|
32
|
-
import { ButtonColor,ComponentSize
|
|
40
|
+
import { ButtonColor, ButtonVariant, ComponentSize, } from '../../enums';
|
|
33
41
|
|
|
34
42
|
const primevueSizeMap = {
|
|
43
|
+
[ComponentSize.XS]: 'extra-small',
|
|
35
44
|
[ComponentSize.SM]: 'small',
|
|
36
45
|
[ComponentSize.MD]: 'medium',
|
|
37
|
-
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const iconButtonSizeMap = {
|
|
49
|
+
[ComponentSize.XS]: 'sm',
|
|
50
|
+
[ComponentSize.SM]: 'sm',
|
|
51
|
+
[ComponentSize.MD]: 'md',
|
|
52
|
+
}
|
|
38
53
|
|
|
39
54
|
interface WtButtonProps extends /* @vue-ignore */ ButtonProps {
|
|
40
55
|
color?: ButtonColor;
|
|
@@ -43,7 +58,9 @@ interface WtButtonProps extends /* @vue-ignore */ ButtonProps {
|
|
|
43
58
|
size?: ComponentSize;
|
|
44
59
|
wide?: boolean;
|
|
45
60
|
widthByContent?: boolean;
|
|
46
|
-
|
|
61
|
+
icon?: string;
|
|
62
|
+
iconPrefix?: string;
|
|
63
|
+
variant?: ButtonVariant;
|
|
47
64
|
}
|
|
48
65
|
|
|
49
66
|
const props = withDefaults(defineProps<WtButtonProps>(), {
|
|
@@ -53,7 +70,9 @@ const props = withDefaults(defineProps<WtButtonProps>(), {
|
|
|
53
70
|
size: ComponentSize.MD,
|
|
54
71
|
wide: false,
|
|
55
72
|
widthByContent: false,
|
|
56
|
-
|
|
73
|
+
icon: '',
|
|
74
|
+
iconPrefix: '',
|
|
75
|
+
variant: ButtonVariant.ACTIVE,
|
|
57
76
|
});
|
|
58
77
|
|
|
59
78
|
const emit = defineEmits(['click']);
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<p-table
|
|
3
3
|
:key="tableKey"
|
|
4
4
|
ref="table"
|
|
5
|
+
:expanded-rows="expandedRows"
|
|
5
6
|
:reorderable-columns="reorderableColumns"
|
|
6
7
|
:resizable-columns="resizableColumns"
|
|
7
8
|
:row-class="rowClass"
|
|
@@ -14,10 +15,32 @@
|
|
|
14
15
|
scroll-height="flex"
|
|
15
16
|
scrollable
|
|
16
17
|
@sort="sort"
|
|
18
|
+
@update:expanded-rows="expandedRows = $event"
|
|
17
19
|
@column-resize-end="columnResize"
|
|
18
20
|
@column-reorder="columnReorder"
|
|
19
21
|
@row-reorder="({dragIndex, dropIndex}) => emit('reorder:row', { oldIndex: dragIndex, newIndex: dropIndex })"
|
|
20
22
|
>
|
|
23
|
+
<p-column
|
|
24
|
+
v-if="rowExpansion"
|
|
25
|
+
:pt="{
|
|
26
|
+
columnresizer: {
|
|
27
|
+
class: {
|
|
28
|
+
'hidden': true
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}"
|
|
32
|
+
body-style="width: 1%;"
|
|
33
|
+
column-key="row-expander"
|
|
34
|
+
header-style="width: 1%;"
|
|
35
|
+
>
|
|
36
|
+
<template #body="{ data: row }">
|
|
37
|
+
<wt-icon-btn
|
|
38
|
+
:disabled="props.rowExpansionDisabled(row)"
|
|
39
|
+
:icon="isRowExpanded(row) ? 'arrow-down' : 'arrow-right'"
|
|
40
|
+
@click.stop="toggleRow(row)"
|
|
41
|
+
/>
|
|
42
|
+
</template>
|
|
43
|
+
</p-column>
|
|
21
44
|
<p-column
|
|
22
45
|
v-if="rowReorder"
|
|
23
46
|
:pt="{
|
|
@@ -163,6 +186,11 @@
|
|
|
163
186
|
</div>
|
|
164
187
|
</template>
|
|
165
188
|
</p-column>
|
|
189
|
+
<template #expansion="{ data: row }">
|
|
190
|
+
<div>
|
|
191
|
+
<slot :item="row" name="expansion"></slot>
|
|
192
|
+
</div>
|
|
193
|
+
</template>
|
|
166
194
|
<template
|
|
167
195
|
v-if="isTableFooter"
|
|
168
196
|
#footer
|
|
@@ -218,10 +246,12 @@ interface Props extends DataTableProps{
|
|
|
218
246
|
* 'If true, restrict sprecific row reorder.'
|
|
219
247
|
*/
|
|
220
248
|
isRowReorderDisabled?: (row) => boolean;
|
|
249
|
+
rowExpansion?: boolean;
|
|
221
250
|
rowClass?: () => string;
|
|
222
251
|
rowStyle?: () => { [key: string]: string };
|
|
223
252
|
resizableColumns?: boolean
|
|
224
253
|
reorderableColumns?: boolean
|
|
254
|
+
rowExpansionDisabled?: (row: object) => boolean;
|
|
225
255
|
}
|
|
226
256
|
|
|
227
257
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -233,11 +263,13 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
233
263
|
fixedActions: false,
|
|
234
264
|
headless: false,
|
|
235
265
|
rowReorder: false,
|
|
266
|
+
rowExpansion: false,
|
|
236
267
|
isRowReorderDisabled: () => false,
|
|
237
268
|
rowClass: () => '',
|
|
238
269
|
rowStyle: () => ({}),
|
|
239
270
|
resizableColumns: false,
|
|
240
271
|
reorderableColumns: false,
|
|
272
|
+
rowExpansionDisabled: () => false,
|
|
241
273
|
});
|
|
242
274
|
|
|
243
275
|
const { t } = useI18n();
|
|
@@ -248,6 +280,7 @@ const emit = defineEmits(['sort', 'update:selected', 'reorder:row', 'column-resi
|
|
|
248
280
|
|
|
249
281
|
const table = useTemplateRef('table');
|
|
250
282
|
const tableKey = ref(0);
|
|
283
|
+
const expandedRows = ref([]);
|
|
251
284
|
|
|
252
285
|
// table's columns that should be excluded from reorder
|
|
253
286
|
const excludeColumnsFromReorder = ['row-select', 'row-reorder', 'row-actions']
|
|
@@ -255,8 +288,8 @@ const excludeColumnsFromReorder = ['row-select', 'row-reorder', 'row-actions']
|
|
|
255
288
|
const _selected = computed(() => {
|
|
256
289
|
// _isSelected for backwards compatibility
|
|
257
290
|
return props.selectable
|
|
258
|
-
|
|
259
|
-
|
|
291
|
+
? props.selected || props.data.filter(item => item._isSelected)
|
|
292
|
+
: [];
|
|
260
293
|
});
|
|
261
294
|
|
|
262
295
|
const dataHeaders = computed(() => {
|
|
@@ -371,6 +404,19 @@ const columnReorder = () => {
|
|
|
371
404
|
tableKey.value += 1;
|
|
372
405
|
emit('column-reorder', newOrder)
|
|
373
406
|
}
|
|
407
|
+
|
|
408
|
+
const isRowExpanded = (row) => {
|
|
409
|
+
return expandedRows.value.some(r => r?.id === row?.id);
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
const toggleRow = (row) => {
|
|
413
|
+
const index = expandedRows.value.findIndex(r => r.id === row.id);
|
|
414
|
+
if (index !== -1) {
|
|
415
|
+
expandedRows.value.splice(index, 1);
|
|
416
|
+
} else {
|
|
417
|
+
expandedRows.value.push(row);
|
|
418
|
+
}
|
|
419
|
+
};
|
|
374
420
|
</script>
|
|
375
421
|
|
|
376
422
|
<style lang="scss">
|
package/src/enums/index.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
|
|
2
2
|
import AgentStatus from './AgentStatus/AgentStatus.enum.js';
|
|
3
3
|
import { ButtonColor } from './ButtonColor/ButtonColor';
|
|
4
|
+
import { ButtonSize } from './ButtonSize/ButtonSize.js';
|
|
5
|
+
import { ButtonVariant } from './ButtonVariant/ButtonVariant';
|
|
4
6
|
import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
|
|
5
7
|
import { ChipColor } from './ChipColor/ChipColor';
|
|
6
8
|
import { ComponentSize } from './ComponentSize/ComponentSize';
|
|
@@ -27,6 +29,7 @@ export {
|
|
|
27
29
|
AgentStatus,
|
|
28
30
|
AuditorSections,
|
|
29
31
|
ButtonColor,
|
|
32
|
+
ButtonVariant,
|
|
30
33
|
ChatGatewayProvider,
|
|
31
34
|
ChipColor,
|
|
32
35
|
ComponentSize,
|
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import { ButtonScheme } from '@webitel/styleguide/component-schemes';
|
|
2
2
|
|
|
3
|
+
import { ComponentSize } from '../../../../../enums';
|
|
4
|
+
|
|
5
|
+
const colors = [
|
|
6
|
+
'primary',
|
|
7
|
+
'secondary',
|
|
8
|
+
'success',
|
|
9
|
+
'warn',
|
|
10
|
+
'error',
|
|
11
|
+
'transfer',
|
|
12
|
+
'job',
|
|
13
|
+
'info'
|
|
14
|
+
];
|
|
15
|
+
|
|
3
16
|
const generateCustomColorCss = ({ colorName, dt }) => `
|
|
4
17
|
.p-button-${colorName} {
|
|
5
18
|
background: ${dt(`button.${colorName}.background`)};
|
|
@@ -13,8 +26,73 @@ const generateCustomColorCss = ({ colorName, dt }) => `
|
|
|
13
26
|
background: ${dt(`button.${colorName}.activeBackground`)};
|
|
14
27
|
color: ${dt(`button.${colorName}.activeColor`)};
|
|
15
28
|
}
|
|
29
|
+
|
|
30
|
+
.p-button-outlined.p-button-${colorName} {
|
|
31
|
+
outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
|
|
32
|
+
background: ${dt(`button.outlined.${colorName}.background`)};
|
|
33
|
+
color: ${dt(`button.outlined.${colorName}.color`)};
|
|
34
|
+
}
|
|
35
|
+
.p-button-outlined.p-button-${colorName}:not(:disabled):hover {
|
|
36
|
+
outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
|
|
37
|
+
background: ${dt(`button.outlined.${colorName}.hoverBackground`)};
|
|
38
|
+
}
|
|
39
|
+
.p-button-outlined.p-button-${colorName}:not(:disabled):active {
|
|
40
|
+
background: ${dt(`button.outlined.${colorName}.activeBackground`)};
|
|
41
|
+
color: ${dt(`button.outlined.${colorName}.activeColor`)};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.p-button-text.p-button-${colorName} {
|
|
45
|
+
background: ${dt(`button.text.${colorName}.background`)};
|
|
46
|
+
color: ${dt(`button.text.${colorName}.color`)};
|
|
47
|
+
}
|
|
48
|
+
.p-button-text.p-button-${colorName}:not(:disabled):hover {
|
|
49
|
+
background: ${dt(`button.text.${colorName}.hoverBackground`)};
|
|
50
|
+
}
|
|
51
|
+
.p-button-text.p-button-${colorName}:not(:disabled):active {
|
|
52
|
+
background: ${dt(`button.text.${colorName}.activeBackground`)};
|
|
53
|
+
}
|
|
16
54
|
`;
|
|
17
55
|
|
|
56
|
+
const generateCustomActiveIconColorCss = ({ colorName, dt }) => `
|
|
57
|
+
.p-button--icon-active.p-button-${colorName} {
|
|
58
|
+
background: ${dt(`button.${colorName}.background`)};
|
|
59
|
+
}
|
|
60
|
+
.p-button--icon-active.p-button-${colorName}:not(:disabled):hover {
|
|
61
|
+
background: ${dt(`button.${colorName}.hoverBackground`)};
|
|
62
|
+
}
|
|
63
|
+
.p-button--icon-active.p-button-${colorName}:not(:disabled):active {
|
|
64
|
+
background: ${dt(`button.${colorName}.activeBackground`)};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.p-button--icon-active.p-button-${colorName} svg {
|
|
68
|
+
fill: ${dt(`button.${colorName}.color`)};
|
|
69
|
+
}
|
|
70
|
+
.p-button--icon-active.p-button-${colorName}:not(:disabled):hover svg {
|
|
71
|
+
fill: ${dt(`button.${colorName}.hoverColor`)};
|
|
72
|
+
}
|
|
73
|
+
.p-button--icon-active.p-button-${colorName}:not(:disabled):active svg {
|
|
74
|
+
fill: ${dt(`button.${colorName}.activeColor`)};
|
|
75
|
+
}
|
|
76
|
+
`
|
|
77
|
+
|
|
78
|
+
const generateCustomOutlinedColorCss = ({ colorName, dt }) => `
|
|
79
|
+
.p-button-outlined.p-button-${colorName} {
|
|
80
|
+
outline: 1px solid ${dt(`button.outlined.${colorName}.borderColor`)};
|
|
81
|
+
}
|
|
82
|
+
.p-button-outlined.p-button-${colorName}:not(:disabled):hover {
|
|
83
|
+
outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
|
|
84
|
+
background: ${dt(`button.outlined.${colorName}.hoverBackground`)};
|
|
85
|
+
}
|
|
86
|
+
.p-button-outlined.p-button-${colorName}:not(:disabled):active {
|
|
87
|
+
outline-color: ${dt(`button.outlined.${colorName}.borderColor`)};
|
|
88
|
+
background: ${dt(`button.outlined.${colorName}.activeBackground`)};
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.p-button-outlined.p-button-${colorName} svg {
|
|
92
|
+
fill: ${dt(`button.outlined.${colorName}.color`)};
|
|
93
|
+
}
|
|
94
|
+
`
|
|
95
|
+
|
|
18
96
|
const button = {
|
|
19
97
|
...ButtonScheme.sizes,
|
|
20
98
|
colorScheme: ButtonScheme.colorScheme,
|
|
@@ -34,6 +112,11 @@ const button = {
|
|
|
34
112
|
${generateCustomColorCss({ colorName: 'transfer', dt })}
|
|
35
113
|
${generateCustomColorCss({ colorName: 'error', dt })}
|
|
36
114
|
${generateCustomColorCss({ colorName: 'job', dt })}
|
|
115
|
+
|
|
116
|
+
${colors.map((color) => generateCustomActiveIconColorCss({ colorName: color, dt })).join('')}
|
|
117
|
+
|
|
118
|
+
${colors.map((color) => generateCustomOutlinedColorCss({ colorName: color, dt })).join('')}
|
|
119
|
+
|
|
37
120
|
.p-button:disabled {
|
|
38
121
|
background: ${dt(`button.disabled.background`)};
|
|
39
122
|
color: ${dt(`button.disabled.color`)};
|
|
@@ -53,9 +136,12 @@ const button = {
|
|
|
53
136
|
font-weight: 600;
|
|
54
137
|
font-size: 12px;
|
|
55
138
|
line-height: 24px;
|
|
56
|
-
border: none;
|
|
57
139
|
font-family: "Montserrat", monospace;
|
|
58
140
|
text-transform: uppercase;
|
|
141
|
+
border: none !important;
|
|
142
|
+
}
|
|
143
|
+
.p-button:hover {
|
|
144
|
+
border: none !important;
|
|
59
145
|
}
|
|
60
146
|
.p-button.p-button--width-by-content {
|
|
61
147
|
min-width: 0;
|
|
@@ -63,17 +149,20 @@ const button = {
|
|
|
63
149
|
.p-button.p-button--wide {
|
|
64
150
|
width: 100%;
|
|
65
151
|
}
|
|
66
|
-
.p-button.p-button--contains-icon {
|
|
67
|
-
line-height: 0;
|
|
68
|
-
}
|
|
69
152
|
.p-button.p-button--loading {
|
|
70
153
|
pointer-events: none;
|
|
71
154
|
}
|
|
72
|
-
.p-button
|
|
73
|
-
|
|
155
|
+
.p-button.p-button-outlined {
|
|
156
|
+
background: transparent;
|
|
157
|
+
}
|
|
158
|
+
.p-button--icon-${ComponentSize.XS} {
|
|
159
|
+
padding: ${dt(`button.icon.xs.padding`)};
|
|
160
|
+
}
|
|
161
|
+
.p-button--icon-${ComponentSize.SM} {
|
|
162
|
+
padding: ${dt(`button.icon.sm.padding`)};
|
|
74
163
|
}
|
|
75
|
-
.p-button
|
|
76
|
-
|
|
164
|
+
.p-button--icon-${ComponentSize.MD} {
|
|
165
|
+
padding: ${dt(`button.icon.md.padding`)};
|
|
77
166
|
}
|
|
78
167
|
`,
|
|
79
168
|
};
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import type { ButtonProps } from 'primevue';
|
|
2
|
-
import { ButtonColor, ComponentSize } from '../../enums';
|
|
2
|
+
import { ButtonColor, ButtonVariant, ComponentSize } from '../../enums';
|
|
3
3
|
declare const primevueSizeMap: {
|
|
4
|
+
xs: string;
|
|
5
|
+
sm: string;
|
|
6
|
+
md: string;
|
|
7
|
+
};
|
|
8
|
+
declare const iconButtonSizeMap: {
|
|
9
|
+
xs: string;
|
|
4
10
|
sm: string;
|
|
5
11
|
md: string;
|
|
6
12
|
};
|
|
@@ -11,7 +17,9 @@ interface WtButtonProps extends /* @vue-ignore */ ButtonProps {
|
|
|
11
17
|
size?: ComponentSize;
|
|
12
18
|
wide?: boolean;
|
|
13
19
|
widthByContent?: boolean;
|
|
14
|
-
|
|
20
|
+
icon?: string;
|
|
21
|
+
iconPrefix?: string;
|
|
22
|
+
variant?: ButtonVariant;
|
|
15
23
|
}
|
|
16
24
|
declare const emit: (event: "click", ...args: any[]) => void;
|
|
17
25
|
declare const attrs: {
|
|
@@ -26,6 +34,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
|
|
|
26
34
|
}>;
|
|
27
35
|
declare const __VLS_self: import("vue").DefineComponent<WtButtonProps, {
|
|
28
36
|
primevueSizeMap: typeof primevueSizeMap;
|
|
37
|
+
iconButtonSizeMap: typeof iconButtonSizeMap;
|
|
29
38
|
emit: typeof emit;
|
|
30
39
|
attrs: typeof attrs;
|
|
31
40
|
showLoader: typeof showLoader;
|
|
@@ -36,12 +45,14 @@ declare const __VLS_self: import("vue").DefineComponent<WtButtonProps, {
|
|
|
36
45
|
onClick?: (...args: any[]) => any;
|
|
37
46
|
}>, {
|
|
38
47
|
color: ButtonColor;
|
|
48
|
+
icon: string;
|
|
39
49
|
disabled: boolean;
|
|
40
50
|
size: ComponentSize;
|
|
41
51
|
wide: boolean;
|
|
42
52
|
loading: boolean;
|
|
43
53
|
widthByContent: boolean;
|
|
44
|
-
|
|
54
|
+
iconPrefix: string;
|
|
55
|
+
variant: ButtonVariant;
|
|
45
56
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
46
57
|
declare const __VLS_component: import("vue").DefineComponent<WtButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
47
58
|
click: (...args: any[]) => void;
|
|
@@ -49,12 +60,14 @@ declare const __VLS_component: import("vue").DefineComponent<WtButtonProps, {},
|
|
|
49
60
|
onClick?: (...args: any[]) => any;
|
|
50
61
|
}>, {
|
|
51
62
|
color: ButtonColor;
|
|
63
|
+
icon: string;
|
|
52
64
|
disabled: boolean;
|
|
53
65
|
size: ComponentSize;
|
|
54
66
|
wide: boolean;
|
|
55
67
|
loading: boolean;
|
|
56
68
|
widthByContent: boolean;
|
|
57
|
-
|
|
69
|
+
iconPrefix: string;
|
|
70
|
+
variant: ButtonVariant;
|
|
58
71
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
59
72
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
60
73
|
export default _default;
|
|
@@ -7,8 +7,8 @@ declare const _default: import("vue").DefineComponent<{}, {
|
|
|
7
7
|
active: boolean;
|
|
8
8
|
wide: boolean;
|
|
9
9
|
loading: boolean;
|
|
10
|
-
rounded: boolean;
|
|
11
10
|
iconPrefix: string;
|
|
11
|
+
rounded: boolean;
|
|
12
12
|
$props: {
|
|
13
13
|
readonly color?: string;
|
|
14
14
|
readonly icon?: string;
|
|
@@ -17,8 +17,8 @@ declare const _default: import("vue").DefineComponent<{}, {
|
|
|
17
17
|
readonly active?: boolean;
|
|
18
18
|
readonly wide?: boolean;
|
|
19
19
|
readonly loading?: boolean;
|
|
20
|
-
readonly rounded?: boolean;
|
|
21
20
|
readonly iconPrefix?: string;
|
|
21
|
+
readonly rounded?: boolean;
|
|
22
22
|
};
|
|
23
23
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
24
24
|
export default _default;
|
|
@@ -38,15 +38,18 @@ interface Props extends DataTableProps {
|
|
|
38
38
|
* 'If true, restrict sprecific row reorder.'
|
|
39
39
|
*/
|
|
40
40
|
isRowReorderDisabled?: (row: any) => boolean;
|
|
41
|
+
rowExpansion?: boolean;
|
|
41
42
|
rowClass?: () => string;
|
|
42
43
|
rowStyle?: () => {
|
|
43
44
|
[key: string]: string;
|
|
44
45
|
};
|
|
45
46
|
resizableColumns?: boolean;
|
|
46
47
|
reorderableColumns?: boolean;
|
|
48
|
+
rowExpansionDisabled?: (row: object) => boolean;
|
|
47
49
|
}
|
|
48
50
|
declare const emit: (event: "sort" | "update:selected" | "reorder:row" | "column-resize" | "column-reorder", ...args: any[]) => void;
|
|
49
51
|
declare const tableKey: import("vue").Ref<number, number>;
|
|
52
|
+
declare const expandedRows: import("vue").Ref<any[], any[]>;
|
|
50
53
|
declare const _selected: import("vue").ComputedRef<unknown[]>;
|
|
51
54
|
declare const dataHeaders: import("vue").ComputedRef<WtTableHeader[]>;
|
|
52
55
|
declare const isColumnHidden: (col: any) => boolean;
|
|
@@ -68,28 +71,35 @@ declare const columnResize: ({ element }: {
|
|
|
68
71
|
element: any;
|
|
69
72
|
}) => void;
|
|
70
73
|
declare const columnReorder: () => void;
|
|
74
|
+
declare const isRowExpanded: (row: any) => boolean;
|
|
75
|
+
declare const toggleRow: (row: any) => void;
|
|
71
76
|
declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
|
|
72
|
-
declare var
|
|
77
|
+
declare var __VLS_68: string, __VLS_69: {
|
|
73
78
|
index: any;
|
|
74
79
|
item: any;
|
|
75
|
-
},
|
|
80
|
+
}, __VLS_72: `${string}-footer`, __VLS_73: {}, __VLS_79: {}, __VLS_81: {
|
|
76
81
|
index: any;
|
|
77
82
|
item: any;
|
|
78
|
-
},
|
|
83
|
+
}, __VLS_83: {
|
|
84
|
+
item: any;
|
|
85
|
+
}, __VLS_85: {};
|
|
79
86
|
type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
|
|
80
|
-
[K in NonNullable<typeof
|
|
87
|
+
[K in NonNullable<typeof __VLS_68>]?: (props: typeof __VLS_69) => any;
|
|
88
|
+
} & {
|
|
89
|
+
[K in NonNullable<typeof __VLS_72>]?: (props: typeof __VLS_73) => any;
|
|
81
90
|
} & {
|
|
82
|
-
|
|
91
|
+
'actions-header'?: (props: typeof __VLS_79) => any;
|
|
83
92
|
} & {
|
|
84
|
-
|
|
93
|
+
actions?: (props: typeof __VLS_81) => any;
|
|
85
94
|
} & {
|
|
86
|
-
|
|
95
|
+
expansion?: (props: typeof __VLS_83) => any;
|
|
87
96
|
} & {
|
|
88
|
-
footer?: (props: typeof
|
|
97
|
+
footer?: (props: typeof __VLS_85) => any;
|
|
89
98
|
}>;
|
|
90
99
|
declare const __VLS_self: import("vue").DefineComponent<Props, {
|
|
91
100
|
emit: typeof emit;
|
|
92
101
|
tableKey: typeof tableKey;
|
|
102
|
+
expandedRows: typeof expandedRows;
|
|
93
103
|
_selected: typeof _selected;
|
|
94
104
|
dataHeaders: typeof dataHeaders;
|
|
95
105
|
isColumnHidden: typeof isColumnHidden;
|
|
@@ -103,6 +113,8 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
|
|
|
103
113
|
handleSelection: typeof handleSelection;
|
|
104
114
|
columnResize: typeof columnResize;
|
|
105
115
|
columnReorder: typeof columnReorder;
|
|
116
|
+
isRowExpanded: typeof isRowExpanded;
|
|
117
|
+
toggleRow: typeof toggleRow;
|
|
106
118
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
107
119
|
sort: (...args: any[]) => void;
|
|
108
120
|
"update:selected": (...args: any[]) => void;
|
|
@@ -125,12 +137,14 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
|
|
|
125
137
|
headless: boolean;
|
|
126
138
|
rowReorder: boolean;
|
|
127
139
|
isRowReorderDisabled: (row: any) => boolean;
|
|
140
|
+
rowExpansion: boolean;
|
|
128
141
|
rowClass: () => string;
|
|
129
142
|
rowStyle: () => {
|
|
130
143
|
[key: string]: string;
|
|
131
144
|
};
|
|
132
145
|
resizableColumns: boolean;
|
|
133
146
|
reorderableColumns: boolean;
|
|
147
|
+
rowExpansionDisabled: (row: object) => boolean;
|
|
134
148
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
135
149
|
declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
136
150
|
sort: (...args: any[]) => void;
|
|
@@ -154,12 +168,14 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
|
|
|
154
168
|
headless: boolean;
|
|
155
169
|
rowReorder: boolean;
|
|
156
170
|
isRowReorderDisabled: (row: any) => boolean;
|
|
171
|
+
rowExpansion: boolean;
|
|
157
172
|
rowClass: () => string;
|
|
158
173
|
rowStyle: () => {
|
|
159
174
|
[key: string]: string;
|
|
160
175
|
};
|
|
161
176
|
resizableColumns: boolean;
|
|
162
177
|
reorderableColumns: boolean;
|
|
178
|
+
rowExpansionDisabled: (row: object) => boolean;
|
|
163
179
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
164
180
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
165
181
|
export default _default;
|
package/types/enums/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
|
|
2
2
|
import AgentStatus from './AgentStatus/AgentStatus.enum.js';
|
|
3
3
|
import { ButtonColor } from './ButtonColor/ButtonColor';
|
|
4
|
+
import { ButtonVariant } from './ButtonVariant/ButtonVariant';
|
|
4
5
|
import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
|
|
5
6
|
import { ChipColor } from './ChipColor/ChipColor';
|
|
6
7
|
import { ComponentSize } from './ComponentSize/ComponentSize';
|
|
@@ -20,4 +21,4 @@ import WebitelApplications from './WebitelApplications/WebitelApplications.enum.
|
|
|
20
21
|
import { WtApplication } from './WebitelApplications/WtApplication';
|
|
21
22
|
import { WtObject } from './WtObject/WtObject';
|
|
22
23
|
import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
|
|
23
|
-
export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };
|
|
24
|
+
export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ButtonVariant, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, EmptyCause, IconAction, IconColor, ProcessingTableColumnType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };
|