@progress/kendo-vue-layout 2.5.1 → 2.5.2
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/main.d.ts +5 -0
- package/dist/es/main.js +5 -0
- package/dist/es/menu/BaseMenuItemInternalProps.d.ts +20 -0
- package/dist/es/menu/BaseMenuItemInternalProps.js +0 -0
- package/dist/es/menu/MenuProps.d.ts +51 -0
- package/dist/es/menu/MenuProps.js +1 -0
- package/dist/es/menu/components/Menu.d.ts +68 -0
- package/dist/es/menu/components/Menu.js +301 -0
- package/dist/es/menu/components/MenuItemArrow.d.ts +65 -0
- package/dist/es/menu/components/MenuItemArrow.js +59 -0
- package/dist/es/menu/components/MenuItemInternal.d.ts +55 -0
- package/dist/es/menu/components/MenuItemInternal.js +437 -0
- package/dist/es/menu/components/MenuItemInternalsList.d.ts +44 -0
- package/dist/es/menu/components/MenuItemInternalsList.js +147 -0
- package/dist/es/menu/components/MenuItemLink.d.ts +49 -0
- package/dist/es/menu/components/MenuItemLink.js +57 -0
- package/dist/es/menu/consts.d.ts +54 -0
- package/dist/es/menu/consts.js +70 -0
- package/dist/es/menu/events.d.ts +14 -0
- package/dist/es/menu/events.js +1 -0
- package/dist/es/menu/models/BaseMenuItem.d.ts +45 -0
- package/dist/es/menu/models/BaseMenuItem.js +1 -0
- package/dist/es/menu/models/MenuItemModel.d.ts +19 -0
- package/dist/es/menu/models/MenuItemModel.js +0 -0
- package/dist/es/menu/utils/DirectionHolder.d.ts +11 -0
- package/dist/es/menu/utils/DirectionHolder.js +24 -0
- package/dist/es/menu/utils/MouseOverHandler.d.ts +17 -0
- package/dist/es/menu/utils/MouseOverHandler.js +64 -0
- package/dist/es/menu/utils/getNewItemIdUponKeyboardNavigation.d.ts +7 -0
- package/dist/es/menu/utils/getNewItemIdUponKeyboardNavigation.js +202 -0
- package/dist/es/menu/utils/hoverDelay.d.ts +9 -0
- package/dist/es/menu/utils/hoverDelay.js +17 -0
- package/dist/es/menu/utils/itemsIdsUtils.d.ts +64 -0
- package/dist/es/menu/utils/itemsIdsUtils.js +119 -0
- package/dist/es/menu/utils/misc.d.ts +16 -0
- package/dist/es/menu/utils/misc.js +42 -0
- package/dist/es/menu/utils/prepareInputItemsForInternalWork.d.ts +5 -0
- package/dist/es/menu/utils/prepareInputItemsForInternalWork.js +80 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/main.d.ts +5 -0
- package/dist/npm/main.js +5 -0
- package/dist/npm/menu/BaseMenuItemInternalProps.d.ts +20 -0
- package/dist/npm/menu/BaseMenuItemInternalProps.js +2 -0
- package/dist/npm/menu/MenuProps.d.ts +51 -0
- package/dist/npm/menu/MenuProps.js +5 -0
- package/dist/npm/menu/components/Menu.d.ts +68 -0
- package/dist/npm/menu/components/Menu.js +320 -0
- package/dist/npm/menu/components/MenuItemArrow.d.ts +65 -0
- package/dist/npm/menu/components/MenuItemArrow.js +69 -0
- package/dist/npm/menu/components/MenuItemInternal.d.ts +55 -0
- package/dist/npm/menu/components/MenuItemInternal.js +453 -0
- package/dist/npm/menu/components/MenuItemInternalsList.d.ts +44 -0
- package/dist/npm/menu/components/MenuItemInternalsList.js +158 -0
- package/dist/npm/menu/components/MenuItemLink.d.ts +49 -0
- package/dist/npm/menu/components/MenuItemLink.js +67 -0
- package/dist/npm/menu/consts.d.ts +54 -0
- package/dist/npm/menu/consts.js +73 -0
- package/dist/npm/menu/events.d.ts +14 -0
- package/dist/npm/menu/events.js +3 -0
- package/dist/npm/menu/models/BaseMenuItem.d.ts +45 -0
- package/dist/npm/menu/models/BaseMenuItem.js +3 -0
- package/dist/npm/menu/models/MenuItemModel.d.ts +19 -0
- package/dist/npm/menu/models/MenuItemModel.js +2 -0
- package/dist/npm/menu/utils/DirectionHolder.d.ts +11 -0
- package/dist/npm/menu/utils/DirectionHolder.js +27 -0
- package/dist/npm/menu/utils/MouseOverHandler.d.ts +17 -0
- package/dist/npm/menu/utils/MouseOverHandler.js +67 -0
- package/dist/npm/menu/utils/getNewItemIdUponKeyboardNavigation.d.ts +7 -0
- package/dist/npm/menu/utils/getNewItemIdUponKeyboardNavigation.js +206 -0
- package/dist/npm/menu/utils/hoverDelay.d.ts +9 -0
- package/dist/npm/menu/utils/hoverDelay.js +22 -0
- package/dist/npm/menu/utils/itemsIdsUtils.d.ts +64 -0
- package/dist/npm/menu/utils/itemsIdsUtils.js +135 -0
- package/dist/npm/menu/utils/misc.d.ts +16 -0
- package/dist/npm/menu/utils/misc.js +49 -0
- package/dist/npm/menu/utils/prepareInputItemsForInternalWork.d.ts +5 -0
- package/dist/npm/menu/utils/prepareInputItemsForInternalWork.js +84 -0
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +9 -9
|
@@ -0,0 +1,437 @@
|
|
|
1
|
+
// @ts-ignore
|
|
2
|
+
import * as Vue from 'vue';
|
|
3
|
+
var allVue = Vue;
|
|
4
|
+
var gh = allVue.h;
|
|
5
|
+
var ref = allVue.ref;
|
|
6
|
+
import { classNames, guid, getTemplate } from '@progress/kendo-vue-common';
|
|
7
|
+
import { Popup } from '@progress/kendo-vue-popup';
|
|
8
|
+
import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils';
|
|
9
|
+
import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc';
|
|
10
|
+
import { MenuItemLink } from './MenuItemLink';
|
|
11
|
+
import { MenuItemInternalsList } from './MenuItemInternalsList';
|
|
12
|
+
import { MenuItemArrow } from './MenuItemArrow'; // tslint:enable:max-line-length
|
|
13
|
+
|
|
14
|
+
var MenuItemInternal = {
|
|
15
|
+
name: 'KendoMenuItemInternal',
|
|
16
|
+
// @ts-ignore
|
|
17
|
+
emits: {
|
|
18
|
+
'keydown': null,
|
|
19
|
+
'mouseover': null,
|
|
20
|
+
'mouseleave': null,
|
|
21
|
+
'blur': null,
|
|
22
|
+
'focus': null,
|
|
23
|
+
'click': null,
|
|
24
|
+
'mousedown': null
|
|
25
|
+
},
|
|
26
|
+
props: {
|
|
27
|
+
item: Object,
|
|
28
|
+
focusedItemId: String,
|
|
29
|
+
lastItemIdToBeOpened: String,
|
|
30
|
+
tabbableItemId: String,
|
|
31
|
+
itemRender: [String, Object, Function],
|
|
32
|
+
linkRender: [String, Object, Function],
|
|
33
|
+
isMenuVertical: Boolean,
|
|
34
|
+
isDirectionRightToLeft: Boolean,
|
|
35
|
+
menuGuid: String,
|
|
36
|
+
originalItemNeeded: Function
|
|
37
|
+
},
|
|
38
|
+
created: function created() {
|
|
39
|
+
this.itemElement = null;
|
|
40
|
+
this.prevFocusedItemId = this.$props.focusedItemId;
|
|
41
|
+
this.isFirstRender = true;
|
|
42
|
+
this._anchor = guid();
|
|
43
|
+
},
|
|
44
|
+
data: function data() {
|
|
45
|
+
return {
|
|
46
|
+
opened: false
|
|
47
|
+
};
|
|
48
|
+
},
|
|
49
|
+
mounted: function mounted() {
|
|
50
|
+
this.itemElement = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
|
|
51
|
+
var focusedItemId = this.$props.focusedItemId;
|
|
52
|
+
var currentItemId = this.$props.item.id; // If the menu item component has been just mounted due to
|
|
53
|
+
// keyboard navigation and it is the selected one.
|
|
54
|
+
|
|
55
|
+
if (focusedItemId && focusedItemId === currentItemId) {
|
|
56
|
+
this.itemElement.focus();
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
this.isFirstRender = false;
|
|
60
|
+
},
|
|
61
|
+
watch: {
|
|
62
|
+
focusedItemId: function focusedItemId(_, oldValue) {
|
|
63
|
+
this.prevFocusedItemId = oldValue;
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
updated: function updated() {
|
|
67
|
+
var focusedItemId = this.$props.focusedItemId;
|
|
68
|
+
var currentItemId = this.$props.item.id;
|
|
69
|
+
|
|
70
|
+
if (focusedItemId) {
|
|
71
|
+
// If the item has been navigated to via the keyboard navigation
|
|
72
|
+
// (Clicking and focusing an item also come here).
|
|
73
|
+
if (this.prevFocusedItemId !== focusedItemId && focusedItemId === currentItemId // No need to focus the wrapping menu item DOM element
|
|
74
|
+
// when a child DOM element was clicked.
|
|
75
|
+
&& !this.itemElement.contains(document.activeElement)) {
|
|
76
|
+
this.itemElement.focus();
|
|
77
|
+
}
|
|
78
|
+
} else if (document.activeElement === this.itemElement) {
|
|
79
|
+
this.itemElement.blur();
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
computed: {
|
|
83
|
+
currentItemRender: function currentItemRender() {
|
|
84
|
+
return this.$props.item.render || this.$props.itemRender;
|
|
85
|
+
},
|
|
86
|
+
currentLinkRender: function currentLinkRender() {
|
|
87
|
+
return this.$props.item.linkRender || this.$props.linkRender;
|
|
88
|
+
},
|
|
89
|
+
contentRender: function contentRender() {
|
|
90
|
+
return this.$props.item.contentParentItemId ? this.$props.item.contentRender : null;
|
|
91
|
+
},
|
|
92
|
+
currentOpened: function currentOpened() {
|
|
93
|
+
var props = this.$props;
|
|
94
|
+
return props.item.items.length > 0 && shouldOpenItem(props.item.id, props.lastItemIdToBeOpened) && // HACK: Wait for the second render because otherwise the scenario of
|
|
95
|
+
// popup inside popup throws an error (for example, hover of item with id '0_0').
|
|
96
|
+
!this.isFirstRender;
|
|
97
|
+
},
|
|
98
|
+
popupClassName: function popupClassName() {
|
|
99
|
+
return classNames({
|
|
100
|
+
'k-menu-popup': true,
|
|
101
|
+
'k-rtl': this.$props.isDirectionRightToLeft
|
|
102
|
+
});
|
|
103
|
+
},
|
|
104
|
+
menuItemClassName: function menuItemClassName() {
|
|
105
|
+
var _a;
|
|
106
|
+
|
|
107
|
+
var item = this.$props.item;
|
|
108
|
+
return _a = {
|
|
109
|
+
'k-item': true,
|
|
110
|
+
'k-menu-item': true,
|
|
111
|
+
'k-first': isFirstItemFromSiblings(item.id),
|
|
112
|
+
'k-last': item.isLastFromSiblings,
|
|
113
|
+
'k-state-disabled': item.disabled
|
|
114
|
+
}, _a[item.cssClass ? item.cssClass : ''] = item.cssClass, _a;
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
// @ts-ignore
|
|
118
|
+
setup: !gh ? undefined : function () {
|
|
119
|
+
var v3 = !!gh;
|
|
120
|
+
var kendoAnchorRef = ref(null);
|
|
121
|
+
return {
|
|
122
|
+
v3: v3,
|
|
123
|
+
kendoAnchorRef: kendoAnchorRef
|
|
124
|
+
};
|
|
125
|
+
},
|
|
126
|
+
render: function render(createElement) {
|
|
127
|
+
var _this = this;
|
|
128
|
+
|
|
129
|
+
var h = gh || createElement;
|
|
130
|
+
var item = this.$props.item;
|
|
131
|
+
var itemId = item.id;
|
|
132
|
+
|
|
133
|
+
var renderContent = function renderContent() {
|
|
134
|
+
var parentItemId = this.$props.item.contentParentItemId;
|
|
135
|
+
|
|
136
|
+
var contentRender = function contentRender(args) {
|
|
137
|
+
return getTemplate.call(this, {
|
|
138
|
+
h: h,
|
|
139
|
+
template: this.contentRender,
|
|
140
|
+
additionalProps: args
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
return h("div", {
|
|
145
|
+
"class": "k-content",
|
|
146
|
+
role: "presentation",
|
|
147
|
+
attrs: this.v3 ? undefined : {
|
|
148
|
+
role: "presentation"
|
|
149
|
+
}
|
|
150
|
+
}, [contentRender.call(this, {
|
|
151
|
+
item: this.handleOriginalItemNeeded(parentItemId),
|
|
152
|
+
itemId: parentItemId
|
|
153
|
+
}), h(this.contentRender)]);
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
|
|
157
|
+
return this.$props.item.icon ? h("span", {
|
|
158
|
+
"class": "k-icon k-i-" + this.$props.item.icon,
|
|
159
|
+
role: "presentation",
|
|
160
|
+
attrs: this.v3 ? undefined : {
|
|
161
|
+
role: "presentation"
|
|
162
|
+
},
|
|
163
|
+
key: "0"
|
|
164
|
+
}) : null;
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
var renderArrowIfApplicable = function renderArrowIfApplicable() {
|
|
168
|
+
return this.$props.item.items.length > 0 ? // @ts-ignore
|
|
169
|
+
h(MenuItemArrow, {
|
|
170
|
+
itemId: this.$props.item.id,
|
|
171
|
+
attrs: this.v3 ? undefined : {
|
|
172
|
+
itemId: this.$props.item.id,
|
|
173
|
+
verticalMenu: this.$props.isMenuVertical,
|
|
174
|
+
dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
|
|
175
|
+
},
|
|
176
|
+
verticalMenu: this.$props.isMenuVertical,
|
|
177
|
+
dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft),
|
|
178
|
+
key: "2"
|
|
179
|
+
}) : null;
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
var renderMenuItemLink = function renderMenuItemLink() {
|
|
183
|
+
var _this2 = this;
|
|
184
|
+
|
|
185
|
+
var defaultItemRender = item.text;
|
|
186
|
+
var textOrItemRender = getTemplate.call(this, {
|
|
187
|
+
h: h,
|
|
188
|
+
template: this.currentItemRender,
|
|
189
|
+
defaultRendering: defaultItemRender,
|
|
190
|
+
additionalProps: {
|
|
191
|
+
item: this.$props.originalItemNeeded(item.id),
|
|
192
|
+
itemId: item.id,
|
|
193
|
+
key: '1'
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
var defaultLink = // @ts-ignore function children
|
|
197
|
+
h(MenuItemLink, {
|
|
198
|
+
url: item.url,
|
|
199
|
+
attrs: this.v3 ? undefined : {
|
|
200
|
+
url: item.url,
|
|
201
|
+
opened: this.currentOpened
|
|
202
|
+
},
|
|
203
|
+
opened: this.currentOpened
|
|
204
|
+
}, this.v3 ? function () {
|
|
205
|
+
return [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]];
|
|
206
|
+
} : [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]]);
|
|
207
|
+
return getTemplate.call(this, {
|
|
208
|
+
h: h,
|
|
209
|
+
template: this.currentLinkRender,
|
|
210
|
+
defaultRendering: defaultLink,
|
|
211
|
+
additionalProps: {
|
|
212
|
+
item: this.$props.originalItemNeeded(item.id),
|
|
213
|
+
itemId: item.id,
|
|
214
|
+
opened: this.currentOpened,
|
|
215
|
+
dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
var renderPopupIfOpened = function renderPopupIfOpened() {
|
|
221
|
+
var _this3 = this;
|
|
222
|
+
|
|
223
|
+
var _a = getPopupSettings(itemId, this.$props.isMenuVertical, this.$props.isDirectionRightToLeft),
|
|
224
|
+
anchorAlign = _a.anchorAlign,
|
|
225
|
+
popupAlign = _a.popupAlign,
|
|
226
|
+
collision = _a.collision;
|
|
227
|
+
|
|
228
|
+
return (// @ts-ignore function children
|
|
229
|
+
h(Popup, {
|
|
230
|
+
anchor: this._anchor,
|
|
231
|
+
attrs: this.v3 ? undefined : {
|
|
232
|
+
anchor: this._anchor,
|
|
233
|
+
show: this.currentOpened,
|
|
234
|
+
popupClass: this.popupClassName,
|
|
235
|
+
anchorAlign: anchorAlign,
|
|
236
|
+
popupAlign: popupAlign,
|
|
237
|
+
collision: collision,
|
|
238
|
+
animate: false
|
|
239
|
+
},
|
|
240
|
+
show: this.currentOpened,
|
|
241
|
+
popupClass: this.popupClassName,
|
|
242
|
+
anchorAlign: anchorAlign,
|
|
243
|
+
popupAlign: popupAlign,
|
|
244
|
+
collision: collision,
|
|
245
|
+
animate: false,
|
|
246
|
+
key: "1"
|
|
247
|
+
}, this.v3 ? function () {
|
|
248
|
+
return [// @ts-ignore
|
|
249
|
+
h(MenuItemInternalsList, {
|
|
250
|
+
parentItemId: itemId,
|
|
251
|
+
attrs: _this3.v3 ? undefined : {
|
|
252
|
+
parentItemId: itemId,
|
|
253
|
+
items: _this3.$props.item.items,
|
|
254
|
+
menuGuid: _this3.$props.menuGuid,
|
|
255
|
+
focusedItemId: _this3.$props.focusedItemId,
|
|
256
|
+
lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
|
|
257
|
+
tabbableItemId: _this3.$props.tabbableItemId,
|
|
258
|
+
itemRender: _this3.$props.itemRender,
|
|
259
|
+
linkRender: _this3.$props.linkRender,
|
|
260
|
+
isMenuVertical: _this3.$props.isMenuVertical,
|
|
261
|
+
isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
|
|
262
|
+
originalItemNeeded: _this3.handleOriginalItemNeeded
|
|
263
|
+
},
|
|
264
|
+
items: _this3.$props.item.items,
|
|
265
|
+
menuGuid: _this3.$props.menuGuid,
|
|
266
|
+
focusedItemId: _this3.$props.focusedItemId,
|
|
267
|
+
lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
|
|
268
|
+
tabbableItemId: _this3.$props.tabbableItemId,
|
|
269
|
+
itemRender: _this3.$props.itemRender,
|
|
270
|
+
linkRender: _this3.$props.linkRender,
|
|
271
|
+
isMenuVertical: _this3.$props.isMenuVertical,
|
|
272
|
+
isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
|
|
273
|
+
"class": "k-group k-menu-group k-reset",
|
|
274
|
+
onMouseover: _this3.handleItemMouseOver,
|
|
275
|
+
on: _this3.v3 ? undefined : {
|
|
276
|
+
"mouseover": _this3.handleItemMouseOver,
|
|
277
|
+
"mouseleave": _this3.handleItemMouseLeave,
|
|
278
|
+
"mousedown": _this3.handleMouseDown,
|
|
279
|
+
"blur": _this3.handleItemMouseBlur,
|
|
280
|
+
"focus": _this3.handleItemMouseFocus,
|
|
281
|
+
"click": _this3.handleClick,
|
|
282
|
+
"keydown": _this3.handleKeyDown
|
|
283
|
+
},
|
|
284
|
+
onMouseleave: _this3.handleItemMouseLeave,
|
|
285
|
+
onMousedown: _this3.handleMouseDown,
|
|
286
|
+
onBlur: _this3.handleItemMouseBlur,
|
|
287
|
+
onFocus: _this3.handleItemMouseFocus,
|
|
288
|
+
onClick: _this3.handleClick,
|
|
289
|
+
onKeydown: _this3.handleKeyDown,
|
|
290
|
+
originalItemNeeded: _this3.handleOriginalItemNeeded
|
|
291
|
+
})];
|
|
292
|
+
} : [h(MenuItemInternalsList, {
|
|
293
|
+
parentItemId: itemId,
|
|
294
|
+
attrs: _this3.v3 ? undefined : {
|
|
295
|
+
parentItemId: itemId,
|
|
296
|
+
items: _this3.$props.item.items,
|
|
297
|
+
menuGuid: _this3.$props.menuGuid,
|
|
298
|
+
focusedItemId: _this3.$props.focusedItemId,
|
|
299
|
+
lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
|
|
300
|
+
tabbableItemId: _this3.$props.tabbableItemId,
|
|
301
|
+
itemRender: _this3.$props.itemRender,
|
|
302
|
+
linkRender: _this3.$props.linkRender,
|
|
303
|
+
isMenuVertical: _this3.$props.isMenuVertical,
|
|
304
|
+
isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
|
|
305
|
+
originalItemNeeded: _this3.handleOriginalItemNeeded
|
|
306
|
+
},
|
|
307
|
+
items: _this3.$props.item.items,
|
|
308
|
+
menuGuid: _this3.$props.menuGuid,
|
|
309
|
+
focusedItemId: _this3.$props.focusedItemId,
|
|
310
|
+
lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
|
|
311
|
+
tabbableItemId: _this3.$props.tabbableItemId,
|
|
312
|
+
itemRender: _this3.$props.itemRender,
|
|
313
|
+
linkRender: _this3.$props.linkRender,
|
|
314
|
+
isMenuVertical: _this3.$props.isMenuVertical,
|
|
315
|
+
isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
|
|
316
|
+
"class": "k-group k-menu-group k-reset",
|
|
317
|
+
onMouseover: _this3.handleItemMouseOver,
|
|
318
|
+
on: _this3.v3 ? undefined : {
|
|
319
|
+
"mouseover": _this3.handleItemMouseOver,
|
|
320
|
+
"mouseleave": _this3.handleItemMouseLeave,
|
|
321
|
+
"mousedown": _this3.handleMouseDown,
|
|
322
|
+
"blur": _this3.handleItemMouseBlur,
|
|
323
|
+
"focus": _this3.handleItemMouseFocus,
|
|
324
|
+
"click": _this3.handleClick,
|
|
325
|
+
"keydown": _this3.handleKeyDown
|
|
326
|
+
},
|
|
327
|
+
onMouseleave: _this3.handleItemMouseLeave,
|
|
328
|
+
onMousedown: _this3.handleMouseDown,
|
|
329
|
+
onBlur: _this3.handleItemMouseBlur,
|
|
330
|
+
onFocus: _this3.handleItemMouseFocus,
|
|
331
|
+
onClick: _this3.handleClick,
|
|
332
|
+
onKeydown: _this3.handleKeyDown,
|
|
333
|
+
originalItemNeeded: _this3.handleOriginalItemNeeded
|
|
334
|
+
})])
|
|
335
|
+
);
|
|
336
|
+
};
|
|
337
|
+
|
|
338
|
+
return h("li", {
|
|
339
|
+
"class": this.menuItemClassName,
|
|
340
|
+
style: item.cssStyle,
|
|
341
|
+
tabIndex: itemId === this.$props.tabbableItemId ? 0 : -1,
|
|
342
|
+
attrs: this.v3 ? undefined : {
|
|
343
|
+
tabIndex: itemId === this.$props.tabbableItemId ? 0 : -1,
|
|
344
|
+
role: "menuitem",
|
|
345
|
+
"aria-disabled": item.disabled ? true : undefined,
|
|
346
|
+
"aria-haspopup": item.items.length > 0 ? true : undefined,
|
|
347
|
+
"aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
|
|
348
|
+
"aria-label": item.text,
|
|
349
|
+
"aria-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined
|
|
350
|
+
},
|
|
351
|
+
onMouseover: this.onMouseOver,
|
|
352
|
+
on: this.v3 ? undefined : {
|
|
353
|
+
"mouseover": this.onMouseOver,
|
|
354
|
+
"mouseleave": this.onMouseLeave,
|
|
355
|
+
"mousedown": function mousedown(event) {
|
|
356
|
+
return _this.handleMouseDown(event);
|
|
357
|
+
},
|
|
358
|
+
"focusout": function focusout() {
|
|
359
|
+
return _this.handleBlur(itemId);
|
|
360
|
+
},
|
|
361
|
+
"focusin": function focusin() {
|
|
362
|
+
return _this.handleFocus(itemId);
|
|
363
|
+
},
|
|
364
|
+
"click": function click(event) {
|
|
365
|
+
return _this.handleClick(event, itemId);
|
|
366
|
+
},
|
|
367
|
+
"keydown": this.handleKeyDown
|
|
368
|
+
},
|
|
369
|
+
onMouseleave: this.onMouseLeave,
|
|
370
|
+
onMousedown: function mousedown(event) {
|
|
371
|
+
return _this.handleMouseDown(event);
|
|
372
|
+
},
|
|
373
|
+
onFocusout: function focusout() {
|
|
374
|
+
return _this.handleBlur(itemId);
|
|
375
|
+
},
|
|
376
|
+
onFocusin: function focusin() {
|
|
377
|
+
return _this.handleFocus(itemId);
|
|
378
|
+
},
|
|
379
|
+
onClick: function click(event) {
|
|
380
|
+
return _this.handleClick(event, itemId);
|
|
381
|
+
},
|
|
382
|
+
onKeydown: this.handleKeyDown,
|
|
383
|
+
role: "menuitem",
|
|
384
|
+
"aria-disabled": item.disabled ? true : undefined,
|
|
385
|
+
"aria-haspopup": item.items.length > 0 ? true : undefined,
|
|
386
|
+
"aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
|
|
387
|
+
"aria-label": item.text,
|
|
388
|
+
"aria-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined,
|
|
389
|
+
ref: this.v3 ? function (el) {
|
|
390
|
+
_this.kendoAnchorRef = el;
|
|
391
|
+
} : this._anchor,
|
|
392
|
+
key: "0"
|
|
393
|
+
}, [this.contentRender ? renderContent.call(this) : renderMenuItemLink.call(this), renderPopupIfOpened.call(this)]);
|
|
394
|
+
},
|
|
395
|
+
methods: {
|
|
396
|
+
handleKeyDown: function handleKeyDown(event) {
|
|
397
|
+
this.$emit('keydown', event);
|
|
398
|
+
},
|
|
399
|
+
handleItemMouseOver: function handleItemMouseOver(event) {
|
|
400
|
+
this.$emit('mouseover', event);
|
|
401
|
+
},
|
|
402
|
+
handleItemMouseLeave: function handleItemMouseLeave(event) {
|
|
403
|
+
this.$emit('mouseleave', event);
|
|
404
|
+
},
|
|
405
|
+
handleItemMouseBlur: function handleItemMouseBlur(event) {
|
|
406
|
+
this.$emit('blur', event);
|
|
407
|
+
},
|
|
408
|
+
handleItemMouseFocus: function handleItemMouseFocus(event) {
|
|
409
|
+
this.$emit('focus', event);
|
|
410
|
+
},
|
|
411
|
+
handleClick: function handleClick(event, itemId) {
|
|
412
|
+
this.$emit('click', event, itemId);
|
|
413
|
+
},
|
|
414
|
+
handleBlur: function handleBlur(itemId) {
|
|
415
|
+
this.$emit('blur', itemId);
|
|
416
|
+
},
|
|
417
|
+
handleFocus: function handleFocus(itemId) {
|
|
418
|
+
this.$emit('focus', itemId);
|
|
419
|
+
},
|
|
420
|
+
handleMouseDown: function handleMouseDown(event) {
|
|
421
|
+
this.$emit('mousedown', event);
|
|
422
|
+
},
|
|
423
|
+
handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
|
|
424
|
+
this.$props.originalItemNeeded(event);
|
|
425
|
+
},
|
|
426
|
+
onMouseOver: function onMouseOver(event) {
|
|
427
|
+
this.$emit('mouseover', this.$props.item.id);
|
|
428
|
+
event.stopPropagation();
|
|
429
|
+
},
|
|
430
|
+
onMouseLeave: function onMouseLeave(event) {
|
|
431
|
+
this.$emit('mouseleave', this.$props.item.id);
|
|
432
|
+
event.stopPropagation();
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
};
|
|
436
|
+
var MenuItemInternalVue3 = MenuItemInternal;
|
|
437
|
+
export { MenuItemInternal, MenuItemInternalVue3 };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { DefineComponent } from '../../additionalTypes';
|
|
2
|
+
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
3
|
+
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
|
+
declare type DefaultMethods<V> = {
|
|
5
|
+
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
|
+
};
|
|
7
|
+
import { MenuItemInternalModel } from './../models/MenuItemModel';
|
|
8
|
+
import { BaseMenuItemInternalProps } from './../BaseMenuItemInternalProps';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
|
|
13
|
+
items: MenuItemInternalModel[];
|
|
14
|
+
parentItemId?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* @hidden
|
|
18
|
+
*/
|
|
19
|
+
export interface MenuItemInternalsListState {
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* @hidden
|
|
23
|
+
*/
|
|
24
|
+
export interface MenuItemInternalsListComputed {
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* @hidden
|
|
28
|
+
*/
|
|
29
|
+
export interface MenuItemInternalsListMethods {
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* @hidden
|
|
34
|
+
*/
|
|
35
|
+
export interface MenuItemInternalsListData {
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* @hidden
|
|
39
|
+
*/
|
|
40
|
+
export interface MenuItemInternalsListAll extends Vue, MenuItemInternalsListMethods, MenuItemInternalsListData, MenuItemInternalsListComputed, MenuItemInternalsListState {
|
|
41
|
+
}
|
|
42
|
+
declare let MenuItemInternalsList: ComponentOptions<MenuItemInternalsListAll, DefaultData<MenuItemInternalsListData>, DefaultMethods<MenuItemInternalsListAll>, MenuItemInternalsListComputed, RecordPropsDefinition<MenuItemInternalsListProps>>;
|
|
43
|
+
declare const MenuItemInternalsListVue3: DefineComponent<MenuItemInternalsListProps, any, MenuItemInternalsListData, MenuItemInternalsListComputed, MenuItemInternalsListMethods, {}, {}, {}, string, MenuItemInternalsListProps, MenuItemInternalsListProps, {}>;
|
|
44
|
+
export { MenuItemInternalsList, MenuItemInternalsListVue3 };
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
// @ts-ignore
|
|
2
|
+
import * as Vue from 'vue';
|
|
3
|
+
var allVue = Vue;
|
|
4
|
+
var gh = allVue.h;
|
|
5
|
+
import { MenuItemInternal } from './MenuItemInternal';
|
|
6
|
+
import { getDOMElementId } from './../utils/misc'; // tslint:enable:max-line-length
|
|
7
|
+
|
|
8
|
+
var MenuItemInternalsList = {
|
|
9
|
+
name: 'KendoMenuItemInternalsList',
|
|
10
|
+
// @ts-ignore
|
|
11
|
+
emits: {
|
|
12
|
+
'keydown': null,
|
|
13
|
+
'mouseover': null,
|
|
14
|
+
'mouseleave': null,
|
|
15
|
+
'blur': null,
|
|
16
|
+
'focus': null,
|
|
17
|
+
'click': null,
|
|
18
|
+
'mousedown': null
|
|
19
|
+
},
|
|
20
|
+
props: {
|
|
21
|
+
items: Array,
|
|
22
|
+
parentItemId: String,
|
|
23
|
+
focusedItemId: String,
|
|
24
|
+
lastItemIdToBeOpened: String,
|
|
25
|
+
tabbableItemId: String,
|
|
26
|
+
itemRender: [String, Object, Function],
|
|
27
|
+
linkRender: [String, Object, Function],
|
|
28
|
+
isMenuVertical: Boolean,
|
|
29
|
+
isDirectionRightToLeft: Boolean,
|
|
30
|
+
menuGuid: String,
|
|
31
|
+
originalItemNeeded: Function
|
|
32
|
+
},
|
|
33
|
+
// @ts-ignore
|
|
34
|
+
setup: !gh ? undefined : function () {
|
|
35
|
+
var v3 = !!gh;
|
|
36
|
+
return {
|
|
37
|
+
v3: v3
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
render: function render(createElement) {
|
|
41
|
+
var h = gh || createElement;
|
|
42
|
+
var parentItemId = this.$props.parentItemId;
|
|
43
|
+
|
|
44
|
+
var renderChildItems = function renderChildItems() {
|
|
45
|
+
return this.$props.items.length > 0 ? this.$props.items.map(function (item, index) {
|
|
46
|
+
return (// @ts-ignore
|
|
47
|
+
h(MenuItemInternal, {
|
|
48
|
+
item: item,
|
|
49
|
+
attrs: this.v3 ? undefined : {
|
|
50
|
+
item: item,
|
|
51
|
+
isMenuVertical: this.$props.isMenuVertical,
|
|
52
|
+
isDirectionRightToLeft: this.$props.isDirectionRightToLeft,
|
|
53
|
+
focusedItemId: this.$props.focusedItemId,
|
|
54
|
+
lastItemIdToBeOpened: this.$props.lastItemIdToBeOpened,
|
|
55
|
+
tabbableItemId: this.$props.tabbableItemId,
|
|
56
|
+
itemRender: this.$props.itemRender,
|
|
57
|
+
linkRender: this.$props.linkRender,
|
|
58
|
+
menuGuid: this.$props.menuGuid,
|
|
59
|
+
originalItemNeeded: this.handleOriginalItemNeeded
|
|
60
|
+
},
|
|
61
|
+
isMenuVertical: this.$props.isMenuVertical,
|
|
62
|
+
isDirectionRightToLeft: this.$props.isDirectionRightToLeft,
|
|
63
|
+
focusedItemId: this.$props.focusedItemId,
|
|
64
|
+
lastItemIdToBeOpened: this.$props.lastItemIdToBeOpened,
|
|
65
|
+
tabbableItemId: this.$props.tabbableItemId,
|
|
66
|
+
itemRender: this.$props.itemRender,
|
|
67
|
+
linkRender: this.$props.linkRender,
|
|
68
|
+
menuGuid: this.$props.menuGuid,
|
|
69
|
+
onMouseover: this.handleItemMouseOver,
|
|
70
|
+
on: this.v3 ? undefined : {
|
|
71
|
+
"mouseover": this.handleItemMouseOver,
|
|
72
|
+
"mouseleave": this.handleItemMouseLeave,
|
|
73
|
+
"mousedown": this.handleItemMouseDown,
|
|
74
|
+
"keydown": this.handleKeyDown,
|
|
75
|
+
"blur": this.handleItemMouseBlur,
|
|
76
|
+
"focus": this.handleItemMouseFocus,
|
|
77
|
+
"click": this.handleItemMouseClick
|
|
78
|
+
},
|
|
79
|
+
onMouseleave: this.handleItemMouseLeave,
|
|
80
|
+
onMousedown: this.handleItemMouseDown,
|
|
81
|
+
onKeydown: this.handleKeyDown,
|
|
82
|
+
onBlur: this.handleItemMouseBlur,
|
|
83
|
+
onFocus: this.handleItemMouseFocus,
|
|
84
|
+
onClick: this.handleItemMouseClick,
|
|
85
|
+
originalItemNeeded: this.handleOriginalItemNeeded,
|
|
86
|
+
key: index
|
|
87
|
+
})
|
|
88
|
+
);
|
|
89
|
+
}, this) : null;
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
return h("ul", {
|
|
93
|
+
role: parentItemId !== undefined ? 'menu' : 'menubar',
|
|
94
|
+
attrs: this.v3 ? undefined : {
|
|
95
|
+
role: parentItemId !== undefined ? 'menu' : 'menubar',
|
|
96
|
+
id: parentItemId !== undefined ? getDOMElementId(this.$props.menuGuid, parentItemId) : undefined
|
|
97
|
+
},
|
|
98
|
+
id: parentItemId !== undefined ? getDOMElementId(this.$props.menuGuid, parentItemId) : undefined,
|
|
99
|
+
onMouseover: this.onMouseOver,
|
|
100
|
+
on: this.v3 ? undefined : {
|
|
101
|
+
"mouseover": this.onMouseOver,
|
|
102
|
+
"mouseleave": this.onMouseLeave
|
|
103
|
+
},
|
|
104
|
+
onMouseleave: this.onMouseLeave
|
|
105
|
+
}, [renderChildItems.call(this)]);
|
|
106
|
+
},
|
|
107
|
+
methods: {
|
|
108
|
+
handleKeyDown: function handleKeyDown(event) {
|
|
109
|
+
this.$emit('keydown', event);
|
|
110
|
+
},
|
|
111
|
+
handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
|
|
112
|
+
this.$props.originalItemNeeded(event);
|
|
113
|
+
},
|
|
114
|
+
handleItemMouseOver: function handleItemMouseOver(event) {
|
|
115
|
+
this.$emit('mouseover', event);
|
|
116
|
+
},
|
|
117
|
+
handleItemMouseLeave: function handleItemMouseLeave(event) {
|
|
118
|
+
this.$emit('mouseleave', event);
|
|
119
|
+
},
|
|
120
|
+
handleItemMouseDown: function handleItemMouseDown(event) {
|
|
121
|
+
this.$emit('mousedown', event);
|
|
122
|
+
},
|
|
123
|
+
handleItemMouseBlur: function handleItemMouseBlur(event) {
|
|
124
|
+
this.$emit('blur', event);
|
|
125
|
+
},
|
|
126
|
+
handleItemMouseFocus: function handleItemMouseFocus(event) {
|
|
127
|
+
this.$emit('focus', event);
|
|
128
|
+
},
|
|
129
|
+
handleItemMouseClick: function handleItemMouseClick(event, itemId) {
|
|
130
|
+
this.$emit('click', event, itemId);
|
|
131
|
+
},
|
|
132
|
+
onMouseOver: function onMouseOver(event) {
|
|
133
|
+
if (this.$props.parentItemId !== undefined) {
|
|
134
|
+
this.$emit('mouseover', this.$props.parentItemId);
|
|
135
|
+
event.stopPropagation();
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
onMouseLeave: function onMouseLeave(event) {
|
|
139
|
+
if (this.$props.parentItemId !== undefined) {
|
|
140
|
+
this.$emit('mouseleave', this.$props.parentItemId);
|
|
141
|
+
event.stopPropagation();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
var MenuItemInternalsListVue3 = MenuItemInternalsList;
|
|
147
|
+
export { MenuItemInternalsList, MenuItemInternalsListVue3 };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { DefineComponent } from '../../additionalTypes';
|
|
2
|
+
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
3
|
+
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
|
+
declare type DefaultMethods<V> = {
|
|
5
|
+
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* The properties of the Kendo UI for Vue MenuItemLink component.
|
|
9
|
+
*/
|
|
10
|
+
export interface MenuItemLinkProps {
|
|
11
|
+
/**
|
|
12
|
+
* Specifies whether the MenuItemLink component is opened.
|
|
13
|
+
*/
|
|
14
|
+
opened: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Sets the URL of the MenuItemLink component.
|
|
17
|
+
*/
|
|
18
|
+
url?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
23
|
+
export interface MenuItemLinkState {
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* @hidden
|
|
27
|
+
*/
|
|
28
|
+
export interface MenuItemLinkComputed {
|
|
29
|
+
menuItemClassName: object;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* @hidden
|
|
33
|
+
*/
|
|
34
|
+
export interface MenuItemLinkMethods {
|
|
35
|
+
[key: string]: any;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* @hidden
|
|
39
|
+
*/
|
|
40
|
+
export interface MenuItemLinkData {
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* @hidden
|
|
44
|
+
*/
|
|
45
|
+
export interface MenuItemLinkAll extends Vue, MenuItemLinkMethods, MenuItemLinkData, MenuItemLinkComputed, MenuItemLinkState {
|
|
46
|
+
}
|
|
47
|
+
declare let MenuItemLink: ComponentOptions<MenuItemLinkAll, DefaultData<MenuItemLinkData>, DefaultMethods<MenuItemLinkAll>, MenuItemLinkComputed, RecordPropsDefinition<MenuItemLinkProps>>;
|
|
48
|
+
declare const MenuItemLinkVue3: DefineComponent<MenuItemLinkProps, any, MenuItemLinkData, MenuItemLinkComputed, MenuItemLinkMethods, {}, {}, {}, string, MenuItemLinkProps, MenuItemLinkProps, {}>;
|
|
49
|
+
export { MenuItemLink, MenuItemLinkVue3 };
|