@progress/kendo-vue-listbox 3.10.2 → 3.11.0-dev.202305230751
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/cdn/js/kendo-vue-listbox.js +1 -1
- package/dist/es/ListBoxToolbar.js +56 -9
- package/dist/es/package-metadata.js +1 -1
- package/dist/esm/ListBoxToolbar.js +56 -9
- package/dist/esm/package-metadata.js +1 -1
- package/dist/npm/ListBoxToolbar.js +56 -9
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +4 -4
|
@@ -6,27 +6,36 @@ var isV3 = allVue.version && allVue.version[0] === '3';
|
|
|
6
6
|
import { Button } from '@progress/kendo-vue-buttons';
|
|
7
7
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
8
8
|
import { messages } from './messages/main';
|
|
9
|
+
import { isRtl } from '@progress/kendo-vue-common';
|
|
10
|
+
import { caretAltUpIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
9
11
|
var tools = [{
|
|
10
12
|
name: 'moveUp',
|
|
11
|
-
iconName: 'caret-alt-up'
|
|
13
|
+
iconName: 'caret-alt-up',
|
|
14
|
+
svgIcon: caretAltUpIcon
|
|
12
15
|
}, {
|
|
13
16
|
name: 'moveDown',
|
|
14
|
-
iconName: 'caret-alt-down'
|
|
17
|
+
iconName: 'caret-alt-down',
|
|
18
|
+
svgIcon: caretAltDownIcon
|
|
15
19
|
}, {
|
|
16
20
|
name: 'transferTo',
|
|
17
|
-
iconName: 'caret-alt-right'
|
|
21
|
+
iconName: 'caret-alt-right',
|
|
22
|
+
svgIcon: caretAltRightIcon
|
|
18
23
|
}, {
|
|
19
24
|
name: 'transferFrom',
|
|
20
|
-
iconName: 'caret-alt-left'
|
|
25
|
+
iconName: 'caret-alt-left',
|
|
26
|
+
svgIcon: caretAltLeftIcon
|
|
21
27
|
}, {
|
|
22
28
|
name: 'transferAllTo',
|
|
23
|
-
iconName: 'caret-double-alt-right'
|
|
29
|
+
iconName: 'caret-double-alt-right',
|
|
30
|
+
svgIcon: caretDoubleAltRightIcon
|
|
24
31
|
}, {
|
|
25
32
|
name: 'transferAllFrom',
|
|
26
|
-
iconName: 'caret-double-alt-left'
|
|
33
|
+
iconName: 'caret-double-alt-left',
|
|
34
|
+
svgIcon: caretDoubleAltLeftIcon
|
|
27
35
|
}, {
|
|
28
36
|
name: 'remove',
|
|
29
|
-
iconName: 'x'
|
|
37
|
+
iconName: 'x',
|
|
38
|
+
svgIcon: xIcon
|
|
30
39
|
}];
|
|
31
40
|
/**
|
|
32
41
|
* @hidden
|
|
@@ -47,6 +56,14 @@ var ListBoxToolbarVue2 = {
|
|
|
47
56
|
default: null
|
|
48
57
|
}
|
|
49
58
|
},
|
|
59
|
+
data: function data() {
|
|
60
|
+
return {
|
|
61
|
+
currentRtl: false
|
|
62
|
+
};
|
|
63
|
+
},
|
|
64
|
+
mounted: function mounted() {
|
|
65
|
+
this.currentRtl = isRtl(this.$el);
|
|
66
|
+
},
|
|
50
67
|
// @ts-ignore
|
|
51
68
|
setup: !isV3 ? undefined : function () {
|
|
52
69
|
var v3 = !!isV3;
|
|
@@ -77,12 +94,14 @@ var ListBoxToolbarVue2 = {
|
|
|
77
94
|
"data-command": currentTool.name,
|
|
78
95
|
title: title,
|
|
79
96
|
"aria-label": title,
|
|
80
|
-
icon: currentTool.iconName
|
|
97
|
+
icon: this.isRtl ? this.getRtlFontIcon(currentTool.iconName) : currentTool.iconName,
|
|
98
|
+
svgIcon: this.isRtl ? this.getRtlSvgIcon(currentTool.svgIcon) : currentTool.svgIcon
|
|
81
99
|
},
|
|
82
100
|
"data-command": currentTool.name,
|
|
83
101
|
title: title,
|
|
84
102
|
"aria-label": title,
|
|
85
|
-
icon: currentTool.iconName,
|
|
103
|
+
icon: this.isRtl ? this.getRtlFontIcon(currentTool.iconName) : currentTool.iconName,
|
|
104
|
+
svgIcon: this.isRtl ? this.getRtlSvgIcon(currentTool.svgIcon) : currentTool.svgIcon,
|
|
86
105
|
onClick: function onClick(e) {
|
|
87
106
|
e.preventDefault();
|
|
88
107
|
_this.handleToolClick(e, currentTool.name || null);
|
|
@@ -97,6 +116,34 @@ var ListBoxToolbarVue2 = {
|
|
|
97
116
|
}, this)]);
|
|
98
117
|
},
|
|
99
118
|
methods: {
|
|
119
|
+
getRtlSvgIcon: function getRtlSvgIcon(toolIcon) {
|
|
120
|
+
switch (toolIcon.name) {
|
|
121
|
+
case 'caret-alt-right':
|
|
122
|
+
return caretAltLeftIcon;
|
|
123
|
+
case 'caret-alt-left':
|
|
124
|
+
return caretAltRightIcon;
|
|
125
|
+
case 'caret-double-alt-right':
|
|
126
|
+
return caretDoubleAltLeftIcon;
|
|
127
|
+
case 'caret-double-alt-left':
|
|
128
|
+
return caretDoubleAltRightIcon;
|
|
129
|
+
default:
|
|
130
|
+
}
|
|
131
|
+
return toolIcon;
|
|
132
|
+
},
|
|
133
|
+
getRtlFontIcon: function getRtlFontIcon(toolIcon) {
|
|
134
|
+
switch (toolIcon) {
|
|
135
|
+
case 'caret-alt-right':
|
|
136
|
+
return 'caret-alt-left';
|
|
137
|
+
case 'caret-alt-left':
|
|
138
|
+
return 'caret-alt-right';
|
|
139
|
+
case 'caret-double-alt-right':
|
|
140
|
+
return 'caret-double-alt-left';
|
|
141
|
+
case 'caret-double-alt-left':
|
|
142
|
+
return 'caret-double-alt-right';
|
|
143
|
+
default:
|
|
144
|
+
}
|
|
145
|
+
return toolIcon;
|
|
146
|
+
},
|
|
100
147
|
handleToolClick: function handleToolClick(event, name) {
|
|
101
148
|
this.$emit('toolclick', {
|
|
102
149
|
event: event,
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-listbox',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1684828018,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -6,27 +6,36 @@ var isV3 = allVue.version && allVue.version[0] === '3';
|
|
|
6
6
|
import { Button } from '@progress/kendo-vue-buttons';
|
|
7
7
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
8
8
|
import { messages } from './messages/main.js';
|
|
9
|
+
import { isRtl } from '@progress/kendo-vue-common';
|
|
10
|
+
import { caretAltUpIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
9
11
|
var tools = [{
|
|
10
12
|
name: 'moveUp',
|
|
11
|
-
iconName: 'caret-alt-up'
|
|
13
|
+
iconName: 'caret-alt-up',
|
|
14
|
+
svgIcon: caretAltUpIcon
|
|
12
15
|
}, {
|
|
13
16
|
name: 'moveDown',
|
|
14
|
-
iconName: 'caret-alt-down'
|
|
17
|
+
iconName: 'caret-alt-down',
|
|
18
|
+
svgIcon: caretAltDownIcon
|
|
15
19
|
}, {
|
|
16
20
|
name: 'transferTo',
|
|
17
|
-
iconName: 'caret-alt-right'
|
|
21
|
+
iconName: 'caret-alt-right',
|
|
22
|
+
svgIcon: caretAltRightIcon
|
|
18
23
|
}, {
|
|
19
24
|
name: 'transferFrom',
|
|
20
|
-
iconName: 'caret-alt-left'
|
|
25
|
+
iconName: 'caret-alt-left',
|
|
26
|
+
svgIcon: caretAltLeftIcon
|
|
21
27
|
}, {
|
|
22
28
|
name: 'transferAllTo',
|
|
23
|
-
iconName: 'caret-double-alt-right'
|
|
29
|
+
iconName: 'caret-double-alt-right',
|
|
30
|
+
svgIcon: caretDoubleAltRightIcon
|
|
24
31
|
}, {
|
|
25
32
|
name: 'transferAllFrom',
|
|
26
|
-
iconName: 'caret-double-alt-left'
|
|
33
|
+
iconName: 'caret-double-alt-left',
|
|
34
|
+
svgIcon: caretDoubleAltLeftIcon
|
|
27
35
|
}, {
|
|
28
36
|
name: 'remove',
|
|
29
|
-
iconName: 'x'
|
|
37
|
+
iconName: 'x',
|
|
38
|
+
svgIcon: xIcon
|
|
30
39
|
}];
|
|
31
40
|
/**
|
|
32
41
|
* @hidden
|
|
@@ -47,6 +56,14 @@ var ListBoxToolbarVue2 = {
|
|
|
47
56
|
default: null
|
|
48
57
|
}
|
|
49
58
|
},
|
|
59
|
+
data: function data() {
|
|
60
|
+
return {
|
|
61
|
+
currentRtl: false
|
|
62
|
+
};
|
|
63
|
+
},
|
|
64
|
+
mounted: function mounted() {
|
|
65
|
+
this.currentRtl = isRtl(this.$el);
|
|
66
|
+
},
|
|
50
67
|
// @ts-ignore
|
|
51
68
|
setup: !isV3 ? undefined : function () {
|
|
52
69
|
var v3 = !!isV3;
|
|
@@ -77,12 +94,14 @@ var ListBoxToolbarVue2 = {
|
|
|
77
94
|
"data-command": currentTool.name,
|
|
78
95
|
title: title,
|
|
79
96
|
"aria-label": title,
|
|
80
|
-
icon: currentTool.iconName
|
|
97
|
+
icon: this.isRtl ? this.getRtlFontIcon(currentTool.iconName) : currentTool.iconName,
|
|
98
|
+
svgIcon: this.isRtl ? this.getRtlSvgIcon(currentTool.svgIcon) : currentTool.svgIcon
|
|
81
99
|
},
|
|
82
100
|
"data-command": currentTool.name,
|
|
83
101
|
title: title,
|
|
84
102
|
"aria-label": title,
|
|
85
|
-
icon: currentTool.iconName,
|
|
103
|
+
icon: this.isRtl ? this.getRtlFontIcon(currentTool.iconName) : currentTool.iconName,
|
|
104
|
+
svgIcon: this.isRtl ? this.getRtlSvgIcon(currentTool.svgIcon) : currentTool.svgIcon,
|
|
86
105
|
onClick: function onClick(e) {
|
|
87
106
|
e.preventDefault();
|
|
88
107
|
_this.handleToolClick(e, currentTool.name || null);
|
|
@@ -97,6 +116,34 @@ var ListBoxToolbarVue2 = {
|
|
|
97
116
|
}, this)]);
|
|
98
117
|
},
|
|
99
118
|
methods: {
|
|
119
|
+
getRtlSvgIcon: function getRtlSvgIcon(toolIcon) {
|
|
120
|
+
switch (toolIcon.name) {
|
|
121
|
+
case 'caret-alt-right':
|
|
122
|
+
return caretAltLeftIcon;
|
|
123
|
+
case 'caret-alt-left':
|
|
124
|
+
return caretAltRightIcon;
|
|
125
|
+
case 'caret-double-alt-right':
|
|
126
|
+
return caretDoubleAltLeftIcon;
|
|
127
|
+
case 'caret-double-alt-left':
|
|
128
|
+
return caretDoubleAltRightIcon;
|
|
129
|
+
default:
|
|
130
|
+
}
|
|
131
|
+
return toolIcon;
|
|
132
|
+
},
|
|
133
|
+
getRtlFontIcon: function getRtlFontIcon(toolIcon) {
|
|
134
|
+
switch (toolIcon) {
|
|
135
|
+
case 'caret-alt-right':
|
|
136
|
+
return 'caret-alt-left';
|
|
137
|
+
case 'caret-alt-left':
|
|
138
|
+
return 'caret-alt-right';
|
|
139
|
+
case 'caret-double-alt-right':
|
|
140
|
+
return 'caret-double-alt-left';
|
|
141
|
+
case 'caret-double-alt-left':
|
|
142
|
+
return 'caret-double-alt-right';
|
|
143
|
+
default:
|
|
144
|
+
}
|
|
145
|
+
return toolIcon;
|
|
146
|
+
},
|
|
100
147
|
handleToolClick: function handleToolClick(event, name) {
|
|
101
148
|
this.$emit('toolclick', {
|
|
102
149
|
event: event,
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-listbox',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1684828018,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -12,27 +12,36 @@ var isV3 = allVue.version && allVue.version[0] === '3';
|
|
|
12
12
|
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
13
13
|
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
14
14
|
var main_1 = require("./messages/main");
|
|
15
|
+
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
16
|
+
var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
15
17
|
var tools = [{
|
|
16
18
|
name: 'moveUp',
|
|
17
|
-
iconName: 'caret-alt-up'
|
|
19
|
+
iconName: 'caret-alt-up',
|
|
20
|
+
svgIcon: kendo_svg_icons_1.caretAltUpIcon
|
|
18
21
|
}, {
|
|
19
22
|
name: 'moveDown',
|
|
20
|
-
iconName: 'caret-alt-down'
|
|
23
|
+
iconName: 'caret-alt-down',
|
|
24
|
+
svgIcon: kendo_svg_icons_1.caretAltDownIcon
|
|
21
25
|
}, {
|
|
22
26
|
name: 'transferTo',
|
|
23
|
-
iconName: 'caret-alt-right'
|
|
27
|
+
iconName: 'caret-alt-right',
|
|
28
|
+
svgIcon: kendo_svg_icons_1.caretAltRightIcon
|
|
24
29
|
}, {
|
|
25
30
|
name: 'transferFrom',
|
|
26
|
-
iconName: 'caret-alt-left'
|
|
31
|
+
iconName: 'caret-alt-left',
|
|
32
|
+
svgIcon: kendo_svg_icons_1.caretAltLeftIcon
|
|
27
33
|
}, {
|
|
28
34
|
name: 'transferAllTo',
|
|
29
|
-
iconName: 'caret-double-alt-right'
|
|
35
|
+
iconName: 'caret-double-alt-right',
|
|
36
|
+
svgIcon: kendo_svg_icons_1.caretDoubleAltRightIcon
|
|
30
37
|
}, {
|
|
31
38
|
name: 'transferAllFrom',
|
|
32
|
-
iconName: 'caret-double-alt-left'
|
|
39
|
+
iconName: 'caret-double-alt-left',
|
|
40
|
+
svgIcon: kendo_svg_icons_1.caretDoubleAltLeftIcon
|
|
33
41
|
}, {
|
|
34
42
|
name: 'remove',
|
|
35
|
-
iconName: 'x'
|
|
43
|
+
iconName: 'x',
|
|
44
|
+
svgIcon: kendo_svg_icons_1.xIcon
|
|
36
45
|
}];
|
|
37
46
|
/**
|
|
38
47
|
* @hidden
|
|
@@ -53,6 +62,14 @@ var ListBoxToolbarVue2 = {
|
|
|
53
62
|
default: null
|
|
54
63
|
}
|
|
55
64
|
},
|
|
65
|
+
data: function data() {
|
|
66
|
+
return {
|
|
67
|
+
currentRtl: false
|
|
68
|
+
};
|
|
69
|
+
},
|
|
70
|
+
mounted: function mounted() {
|
|
71
|
+
this.currentRtl = (0, kendo_vue_common_1.isRtl)(this.$el);
|
|
72
|
+
},
|
|
56
73
|
// @ts-ignore
|
|
57
74
|
setup: !isV3 ? undefined : function () {
|
|
58
75
|
var v3 = !!isV3;
|
|
@@ -83,12 +100,14 @@ var ListBoxToolbarVue2 = {
|
|
|
83
100
|
"data-command": currentTool.name,
|
|
84
101
|
title: title,
|
|
85
102
|
"aria-label": title,
|
|
86
|
-
icon: currentTool.iconName
|
|
103
|
+
icon: this.isRtl ? this.getRtlFontIcon(currentTool.iconName) : currentTool.iconName,
|
|
104
|
+
svgIcon: this.isRtl ? this.getRtlSvgIcon(currentTool.svgIcon) : currentTool.svgIcon
|
|
87
105
|
},
|
|
88
106
|
"data-command": currentTool.name,
|
|
89
107
|
title: title,
|
|
90
108
|
"aria-label": title,
|
|
91
|
-
icon: currentTool.iconName,
|
|
109
|
+
icon: this.isRtl ? this.getRtlFontIcon(currentTool.iconName) : currentTool.iconName,
|
|
110
|
+
svgIcon: this.isRtl ? this.getRtlSvgIcon(currentTool.svgIcon) : currentTool.svgIcon,
|
|
92
111
|
onClick: function onClick(e) {
|
|
93
112
|
e.preventDefault();
|
|
94
113
|
_this.handleToolClick(e, currentTool.name || null);
|
|
@@ -103,6 +122,34 @@ var ListBoxToolbarVue2 = {
|
|
|
103
122
|
}, this)]);
|
|
104
123
|
},
|
|
105
124
|
methods: {
|
|
125
|
+
getRtlSvgIcon: function getRtlSvgIcon(toolIcon) {
|
|
126
|
+
switch (toolIcon.name) {
|
|
127
|
+
case 'caret-alt-right':
|
|
128
|
+
return kendo_svg_icons_1.caretAltLeftIcon;
|
|
129
|
+
case 'caret-alt-left':
|
|
130
|
+
return kendo_svg_icons_1.caretAltRightIcon;
|
|
131
|
+
case 'caret-double-alt-right':
|
|
132
|
+
return kendo_svg_icons_1.caretDoubleAltLeftIcon;
|
|
133
|
+
case 'caret-double-alt-left':
|
|
134
|
+
return kendo_svg_icons_1.caretDoubleAltRightIcon;
|
|
135
|
+
default:
|
|
136
|
+
}
|
|
137
|
+
return toolIcon;
|
|
138
|
+
},
|
|
139
|
+
getRtlFontIcon: function getRtlFontIcon(toolIcon) {
|
|
140
|
+
switch (toolIcon) {
|
|
141
|
+
case 'caret-alt-right':
|
|
142
|
+
return 'caret-alt-left';
|
|
143
|
+
case 'caret-alt-left':
|
|
144
|
+
return 'caret-alt-right';
|
|
145
|
+
case 'caret-double-alt-right':
|
|
146
|
+
return 'caret-double-alt-left';
|
|
147
|
+
case 'caret-double-alt-left':
|
|
148
|
+
return 'caret-double-alt-right';
|
|
149
|
+
default:
|
|
150
|
+
}
|
|
151
|
+
return toolIcon;
|
|
152
|
+
},
|
|
106
153
|
handleToolClick: function handleToolClick(event, name) {
|
|
107
154
|
this.$emit('toolclick', {
|
|
108
155
|
event: event,
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-listbox',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1684828018,
|
|
12
12
|
version: '',
|
|
13
13
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
14
14
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-listbox",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.11.0-dev.202305230751",
|
|
4
4
|
"description": "Vue ListBox enables you to display a list of items and manage the data between multiple lists. Kendo UI for Vue ListBox package",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"vue": "^2.6.12 || ^3.0.2"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@progress/kendo-vue-common": "3.
|
|
39
|
+
"@progress/kendo-vue-common": "3.11.0-dev.202305230751"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@progress/kendo-licensing": "^1.3.0",
|
|
43
43
|
"@progress/kendo-svg-icons": "^1.0.0",
|
|
44
|
-
"@progress/kendo-vue-buttons": "3.
|
|
45
|
-
"@progress/kendo-vue-intl": "3.
|
|
44
|
+
"@progress/kendo-vue-buttons": "3.11.0-dev.202305230751",
|
|
45
|
+
"@progress/kendo-vue-intl": "3.11.0-dev.202305230751"
|
|
46
46
|
},
|
|
47
47
|
"@progress": {
|
|
48
48
|
"friendlyName": "ListBox",
|