@progress/kendo-vue-layout 3.1.5 → 3.2.0-dev.202204120815
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-layout.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/panelbar/PanelBar.js +40 -28
- package/dist/es/panelbar/PanelBarItem.js +5 -4
- package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts +1 -1
- package/dist/es/panelbar/util.js +2 -2
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/panelbar/PanelBar.js +40 -28
- package/dist/npm/panelbar/PanelBarItem.js +5 -4
- package/dist/npm/panelbar/interfaces/PanelBarItemProps.d.ts +1 -1
- package/dist/npm/panelbar/util.js +2 -2
- package/package.json +10 -10
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-layout',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1649750860,
|
|
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
|
};
|
|
@@ -41,6 +41,11 @@ import { NavigationAction } from './interfaces/NavigationAction'; // tslint:enab
|
|
|
41
41
|
|
|
42
42
|
var PanelBarVue2 = {
|
|
43
43
|
name: 'KendoPanelBar',
|
|
44
|
+
// @ts-ignore
|
|
45
|
+
emits: {
|
|
46
|
+
select: null,
|
|
47
|
+
keydown: null
|
|
48
|
+
},
|
|
44
49
|
props: {
|
|
45
50
|
animation: {
|
|
46
51
|
type: Boolean,
|
|
@@ -49,7 +54,10 @@ var PanelBarVue2 = {
|
|
|
49
54
|
items: Array,
|
|
50
55
|
dir: String,
|
|
51
56
|
selected: String,
|
|
52
|
-
expanded:
|
|
57
|
+
expanded: {
|
|
58
|
+
type: Array,
|
|
59
|
+
default: undefined
|
|
60
|
+
},
|
|
53
61
|
focused: String,
|
|
54
62
|
expandMode: {
|
|
55
63
|
type: String,
|
|
@@ -81,7 +89,7 @@ var PanelBarVue2 = {
|
|
|
81
89
|
return selected;
|
|
82
90
|
},
|
|
83
91
|
expandedItems: function expandedItems() {
|
|
84
|
-
var expanded = this.$props.
|
|
92
|
+
var expanded = this.$props.expanded !== undefined ? this.$props.expanded || [] : this.currentExpanded;
|
|
85
93
|
return expanded;
|
|
86
94
|
},
|
|
87
95
|
computedItems: function computedItems() {
|
|
@@ -164,37 +172,39 @@ var PanelBarVue2 = {
|
|
|
164
172
|
}
|
|
165
173
|
});
|
|
166
174
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
if (
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
175
|
+
if (selectedChild) {
|
|
176
|
+
switch (this.expandMode) {
|
|
177
|
+
case 'single':
|
|
178
|
+
newExpanded = __spreadArrays(selectedChild.parentUniquePrivateKey, [selectedChild.uniquePrivateKey]);
|
|
179
|
+
|
|
180
|
+
if (isArrayEqual(this.expandedItems, newExpanded)) {
|
|
181
|
+
if (selectedChild.parentUniquePrivateKey) {
|
|
182
|
+
newExpanded = __spreadArrays(selectedChild.parentUniquePrivateKey);
|
|
183
|
+
} else {
|
|
184
|
+
newExpanded = [];
|
|
185
|
+
}
|
|
176
186
|
}
|
|
177
|
-
}
|
|
178
187
|
|
|
179
|
-
|
|
188
|
+
break;
|
|
180
189
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
190
|
+
case 'multiple':
|
|
191
|
+
newExpanded = this.expandedItems.slice();
|
|
192
|
+
var index = newExpanded.indexOf(selectedChild.uniquePrivateKey);
|
|
193
|
+
index === -1 ? newExpanded.push(selectedChild.uniquePrivateKey) : newExpanded.splice(index, 1);
|
|
194
|
+
break;
|
|
186
195
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
196
|
+
default:
|
|
197
|
+
newExpanded = this.expandedItems.slice();
|
|
198
|
+
break;
|
|
199
|
+
}
|
|
191
200
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
201
|
+
this.currentSelected = selectedChild.uniquePrivateKey;
|
|
202
|
+
this.currentExpanded = newExpanded;
|
|
203
|
+
this.$emit('select', {
|
|
204
|
+
target: selectedChild,
|
|
205
|
+
expandedItems: newExpanded
|
|
206
|
+
});
|
|
207
|
+
}
|
|
198
208
|
},
|
|
199
209
|
onFocus: function onFocus(event, step) {
|
|
200
210
|
var _this = this;
|
|
@@ -293,6 +303,8 @@ var PanelBarVue2 = {
|
|
|
293
303
|
this.onNavigate(event, action);
|
|
294
304
|
}
|
|
295
305
|
}
|
|
306
|
+
|
|
307
|
+
this.$emit('keydown', event);
|
|
296
308
|
}
|
|
297
309
|
}
|
|
298
310
|
};
|
|
@@ -37,7 +37,7 @@ var PanelBarItemVue2 = {
|
|
|
37
37
|
return 'Untitled';
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
|
-
id: String,
|
|
40
|
+
id: [String, Number],
|
|
41
41
|
focused: Boolean,
|
|
42
42
|
keepItemsMounted: Boolean,
|
|
43
43
|
uniquePrivateKey: String,
|
|
@@ -70,6 +70,7 @@ var PanelBarItemVue2 = {
|
|
|
70
70
|
var _b = this.$props,
|
|
71
71
|
id = _b.id,
|
|
72
72
|
item = _b.item,
|
|
73
|
+
icon = _b.icon,
|
|
73
74
|
items = _b.items,
|
|
74
75
|
content = _b.content,
|
|
75
76
|
title = _b.title,
|
|
@@ -91,7 +92,7 @@ var PanelBarItemVue2 = {
|
|
|
91
92
|
}, "k-level-" + level, className);
|
|
92
93
|
var panelBarLinkClassName = classNames('k-link', {
|
|
93
94
|
'k-state-selected': !disabled && selected,
|
|
94
|
-
'k-state-focus':
|
|
95
|
+
'k-state-focus': focused,
|
|
95
96
|
'k-state-disabled': disabled
|
|
96
97
|
}, headerClassName);
|
|
97
98
|
var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-arrow-chevron-up'] = expanded && hasContent, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-i-arrow-chevron-down'] = !expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
|
|
@@ -129,7 +130,7 @@ var PanelBarItemVue2 = {
|
|
|
129
130
|
return null;
|
|
130
131
|
};
|
|
131
132
|
|
|
132
|
-
var
|
|
133
|
+
var iconRender = iconElement.call(this);
|
|
133
134
|
var arrow = !disabled && (items || content) ? h("span", {
|
|
134
135
|
"class": panelBarItemArrowClassName
|
|
135
136
|
}) : null;
|
|
@@ -181,7 +182,7 @@ var PanelBarItemVue2 = {
|
|
|
181
182
|
on: this.v3 ? undefined : {
|
|
182
183
|
"click": this.handleItemClick
|
|
183
184
|
}
|
|
184
|
-
}, [
|
|
185
|
+
}, [iconRender, this.$props.header ? header : h("span", {
|
|
185
186
|
"class": 'k-panelbar-item-text'
|
|
186
187
|
}, [title]), arrow]), group]);
|
|
187
188
|
},
|
|
@@ -49,7 +49,7 @@ export interface PanelBarItemProps {
|
|
|
49
49
|
/**
|
|
50
50
|
* Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
|
|
51
51
|
*/
|
|
52
|
-
id?: string;
|
|
52
|
+
id?: string | number;
|
|
53
53
|
/**
|
|
54
54
|
* Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
|
|
55
55
|
*/
|
package/dist/es/panelbar/util.js
CHANGED
|
@@ -151,7 +151,7 @@ export var getInitialState = function getInitialState(props, expandMode, result,
|
|
|
151
151
|
*/
|
|
152
152
|
|
|
153
153
|
var getId = function getId(child, parentPrivateKey, idx) {
|
|
154
|
-
return child && child
|
|
154
|
+
return child && child && child.id ? child.id : parentPrivateKey.length ? parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx) : "." + idx;
|
|
155
155
|
};
|
|
156
156
|
/**
|
|
157
157
|
* @hidden
|
|
@@ -204,7 +204,7 @@ export function flatVisibleChildren(children, flattenVisibleChildren) {
|
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
children.forEach(function (child) {
|
|
207
|
-
if (child &&
|
|
207
|
+
if (child && (child.expanded || child.parentExpanded)) {
|
|
208
208
|
flattenVisibleChildren.push(child);
|
|
209
209
|
|
|
210
210
|
if (child.items) {
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-layout',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1649750860,
|
|
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
|
};
|
|
@@ -55,6 +55,11 @@ var NavigationAction_1 = require("./interfaces/NavigationAction"); // tslint:ena
|
|
|
55
55
|
|
|
56
56
|
var PanelBarVue2 = {
|
|
57
57
|
name: 'KendoPanelBar',
|
|
58
|
+
// @ts-ignore
|
|
59
|
+
emits: {
|
|
60
|
+
select: null,
|
|
61
|
+
keydown: null
|
|
62
|
+
},
|
|
58
63
|
props: {
|
|
59
64
|
animation: {
|
|
60
65
|
type: Boolean,
|
|
@@ -63,7 +68,10 @@ var PanelBarVue2 = {
|
|
|
63
68
|
items: Array,
|
|
64
69
|
dir: String,
|
|
65
70
|
selected: String,
|
|
66
|
-
expanded:
|
|
71
|
+
expanded: {
|
|
72
|
+
type: Array,
|
|
73
|
+
default: undefined
|
|
74
|
+
},
|
|
67
75
|
focused: String,
|
|
68
76
|
expandMode: {
|
|
69
77
|
type: String,
|
|
@@ -95,7 +103,7 @@ var PanelBarVue2 = {
|
|
|
95
103
|
return selected;
|
|
96
104
|
},
|
|
97
105
|
expandedItems: function expandedItems() {
|
|
98
|
-
var expanded = this.$props.
|
|
106
|
+
var expanded = this.$props.expanded !== undefined ? this.$props.expanded || [] : this.currentExpanded;
|
|
99
107
|
return expanded;
|
|
100
108
|
},
|
|
101
109
|
computedItems: function computedItems() {
|
|
@@ -178,37 +186,39 @@ var PanelBarVue2 = {
|
|
|
178
186
|
}
|
|
179
187
|
});
|
|
180
188
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
if (
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
189
|
+
if (selectedChild) {
|
|
190
|
+
switch (this.expandMode) {
|
|
191
|
+
case 'single':
|
|
192
|
+
newExpanded = __spreadArrays(selectedChild.parentUniquePrivateKey, [selectedChild.uniquePrivateKey]);
|
|
193
|
+
|
|
194
|
+
if (util_1.isArrayEqual(this.expandedItems, newExpanded)) {
|
|
195
|
+
if (selectedChild.parentUniquePrivateKey) {
|
|
196
|
+
newExpanded = __spreadArrays(selectedChild.parentUniquePrivateKey);
|
|
197
|
+
} else {
|
|
198
|
+
newExpanded = [];
|
|
199
|
+
}
|
|
190
200
|
}
|
|
191
|
-
}
|
|
192
201
|
|
|
193
|
-
|
|
202
|
+
break;
|
|
194
203
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
204
|
+
case 'multiple':
|
|
205
|
+
newExpanded = this.expandedItems.slice();
|
|
206
|
+
var index = newExpanded.indexOf(selectedChild.uniquePrivateKey);
|
|
207
|
+
index === -1 ? newExpanded.push(selectedChild.uniquePrivateKey) : newExpanded.splice(index, 1);
|
|
208
|
+
break;
|
|
200
209
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
210
|
+
default:
|
|
211
|
+
newExpanded = this.expandedItems.slice();
|
|
212
|
+
break;
|
|
213
|
+
}
|
|
205
214
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
215
|
+
this.currentSelected = selectedChild.uniquePrivateKey;
|
|
216
|
+
this.currentExpanded = newExpanded;
|
|
217
|
+
this.$emit('select', {
|
|
218
|
+
target: selectedChild,
|
|
219
|
+
expandedItems: newExpanded
|
|
220
|
+
});
|
|
221
|
+
}
|
|
212
222
|
},
|
|
213
223
|
onFocus: function onFocus(event, step) {
|
|
214
224
|
var _this = this;
|
|
@@ -307,6 +317,8 @@ var PanelBarVue2 = {
|
|
|
307
317
|
this.onNavigate(event, action);
|
|
308
318
|
}
|
|
309
319
|
}
|
|
320
|
+
|
|
321
|
+
this.$emit('keydown', event);
|
|
310
322
|
}
|
|
311
323
|
}
|
|
312
324
|
};
|
|
@@ -47,7 +47,7 @@ var PanelBarItemVue2 = {
|
|
|
47
47
|
return 'Untitled';
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
|
-
id: String,
|
|
50
|
+
id: [String, Number],
|
|
51
51
|
focused: Boolean,
|
|
52
52
|
keepItemsMounted: Boolean,
|
|
53
53
|
uniquePrivateKey: String,
|
|
@@ -80,6 +80,7 @@ var PanelBarItemVue2 = {
|
|
|
80
80
|
var _b = this.$props,
|
|
81
81
|
id = _b.id,
|
|
82
82
|
item = _b.item,
|
|
83
|
+
icon = _b.icon,
|
|
83
84
|
items = _b.items,
|
|
84
85
|
content = _b.content,
|
|
85
86
|
title = _b.title,
|
|
@@ -101,7 +102,7 @@ var PanelBarItemVue2 = {
|
|
|
101
102
|
}, "k-level-" + level, className);
|
|
102
103
|
var panelBarLinkClassName = kendo_vue_common_1.classNames('k-link', {
|
|
103
104
|
'k-state-selected': !disabled && selected,
|
|
104
|
-
'k-state-focus':
|
|
105
|
+
'k-state-focus': focused,
|
|
105
106
|
'k-state-disabled': disabled
|
|
106
107
|
}, headerClassName);
|
|
107
108
|
var panelBarItemArrowClassName = kendo_vue_common_1.classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-arrow-chevron-up'] = expanded && hasContent, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-i-arrow-chevron-down'] = !expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
|
|
@@ -139,7 +140,7 @@ var PanelBarItemVue2 = {
|
|
|
139
140
|
return null;
|
|
140
141
|
};
|
|
141
142
|
|
|
142
|
-
var
|
|
143
|
+
var iconRender = iconElement.call(this);
|
|
143
144
|
var arrow = !disabled && (items || content) ? h("span", {
|
|
144
145
|
"class": panelBarItemArrowClassName
|
|
145
146
|
}) : null;
|
|
@@ -191,7 +192,7 @@ var PanelBarItemVue2 = {
|
|
|
191
192
|
on: this.v3 ? undefined : {
|
|
192
193
|
"click": this.handleItemClick
|
|
193
194
|
}
|
|
194
|
-
}, [
|
|
195
|
+
}, [iconRender, this.$props.header ? header : h("span", {
|
|
195
196
|
"class": 'k-panelbar-item-text'
|
|
196
197
|
}, [title]), arrow]), group]);
|
|
197
198
|
},
|
|
@@ -49,7 +49,7 @@ export interface PanelBarItemProps {
|
|
|
49
49
|
/**
|
|
50
50
|
* Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
|
|
51
51
|
*/
|
|
52
|
-
id?: string;
|
|
52
|
+
id?: string | number;
|
|
53
53
|
/**
|
|
54
54
|
* Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
|
|
55
55
|
*/
|
|
@@ -162,7 +162,7 @@ exports.getInitialState = function (props, expandMode, result, parentExpanded, p
|
|
|
162
162
|
|
|
163
163
|
|
|
164
164
|
var getId = function getId(child, parentPrivateKey, idx) {
|
|
165
|
-
return child && child
|
|
165
|
+
return child && child && child.id ? child.id : parentPrivateKey.length ? parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx) : "." + idx;
|
|
166
166
|
};
|
|
167
167
|
/**
|
|
168
168
|
* @hidden
|
|
@@ -219,7 +219,7 @@ function flatVisibleChildren(children, flattenVisibleChildren) {
|
|
|
219
219
|
}
|
|
220
220
|
|
|
221
221
|
children.forEach(function (child) {
|
|
222
|
-
if (child &&
|
|
222
|
+
if (child && (child.expanded || child.parentExpanded)) {
|
|
223
223
|
flattenVisibleChildren.push(child);
|
|
224
224
|
|
|
225
225
|
if (child.items) {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-layout",
|
|
3
3
|
"description": "Kendo UI for Vue Layouts package",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.2.0-dev.202204120815",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/telerik/kendo-vue.git"
|
|
@@ -37,21 +37,21 @@
|
|
|
37
37
|
"vue": "^2.6.12 || ^3.0.2"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@progress/kendo-vue-animation": "3.
|
|
41
|
-
"@progress/kendo-vue-common": "3.
|
|
42
|
-
"@progress/kendo-vue-popup": "3.
|
|
40
|
+
"@progress/kendo-vue-animation": "3.2.0-dev.202204120815",
|
|
41
|
+
"@progress/kendo-vue-common": "3.2.0-dev.202204120815",
|
|
42
|
+
"@progress/kendo-vue-popup": "3.2.0-dev.202204120815"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@progress/kendo-data-query": "^1.5.0",
|
|
46
46
|
"@progress/kendo-date-math": "^1.5.1",
|
|
47
47
|
"@progress/kendo-drawing": "^1.8.0",
|
|
48
48
|
"@progress/kendo-licensing": "^1.0.1",
|
|
49
|
-
"@progress/kendo-vue-buttons": "3.
|
|
50
|
-
"@progress/kendo-vue-dateinputs": "3.
|
|
51
|
-
"@progress/kendo-vue-dropdowns": "3.
|
|
52
|
-
"@progress/kendo-vue-inputs": "3.
|
|
53
|
-
"@progress/kendo-vue-intl": "3.
|
|
54
|
-
"@progress/kendo-vue-progressbars": "3.
|
|
49
|
+
"@progress/kendo-vue-buttons": "3.2.0-dev.202204120815",
|
|
50
|
+
"@progress/kendo-vue-dateinputs": "3.2.0-dev.202204120815",
|
|
51
|
+
"@progress/kendo-vue-dropdowns": "3.2.0-dev.202204120815",
|
|
52
|
+
"@progress/kendo-vue-inputs": "3.2.0-dev.202204120815",
|
|
53
|
+
"@progress/kendo-vue-intl": "3.2.0-dev.202204120815",
|
|
54
|
+
"@progress/kendo-vue-progressbars": "3.2.0-dev.202204120815"
|
|
55
55
|
},
|
|
56
56
|
"@progress": {
|
|
57
57
|
"friendlyName": "Layouts",
|