@progress/kendo-vue-layout 3.13.0 → 3.14.0-dev.202309120904

package/dist/es/drawer/Drawer.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { DrawerNavigation } from './DrawerNavigation';
-import { getDir, validatePackage, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { getDir, validatePackage, shouldShowValidationUI, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -61,6 +61,7 @@ var DrawerVue2 = {
   },
   created: function created() {
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   data: function data() {
     var _a = this.$props,
@@ -87,7 +88,8 @@ var DrawerVue2 = {
         miniWidth: miniWidth,
         items: items,
         item: itemRender
-      }
+      },
+      showLicenseWatermark: false
     };
   },
   mounted: function mounted() {
@@ -177,8 +179,10 @@ var DrawerVue2 = {
       },
       item: itemRender,
       attrs: this.v3 ? undefined : {
-        item: itemRender
-      }
+        item: itemRender,
+        showLicenseWatermark: this.showLicenseWatermark
+      },
+      showLicenseWatermark: this.showLicenseWatermark
     }), defaultSlot]);
   },
   methods: {

package/dist/es/drawer/DrawerNavigation.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { DrawerItem } from './DrawerItem';
-import { getDefaultSlots, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { getDefaultSlots, templateRendering, getListeners, getTemplate, WatermarkOverlay } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -46,7 +46,8 @@ var DrawerNavigationVue2 = {
   name: 'KendoDrawerNavigation',
   props: {
     item: [Object],
-    tabIndex: Number
+    tabIndex: Number,
+    showLicenseWatermark: Boolean
   },
   inject: {
     kendoDrawer: {
@@ -122,6 +123,7 @@ var DrawerNavigationVue2 = {
       WebkitTransitionDuration: (customSettings && customSettings.duration) + 'ms',
       transitionDuration: (customSettings && customSettings.duration) + 'ms'
     };
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     var drawerAnimation = expanded ? mode === 'push' ? expandPush : expandOverlay : mode === 'push' ? collapsePush : dir === 'ltr' && position === 'start' || dir === 'rtl' && position === 'end' ? mini ? collapseOverlayMini : collapseOverlay : mini ? collapseOverlayMini : collapseOverlayRtl;
     var drawerItems = items && h("ul", {
       "class": 'k-drawer-items',
@@ -175,7 +177,7 @@ var DrawerNavigationVue2 = {
         }
       });
       return itemRendering;
-    }, this)]);
+    }, this), watermark]);
     var drawerNavigation = h("div", {
       style: drawerAnimation,
       "class": this.navigationClassNames

package/dist/es/menu/components/MenuItemInternal.d.ts

@@ -32,6 +32,7 @@ export interface MenuItemInternalComputed {
     currentFocused: boolean;
     popupClassName: string;
     menuItemClassName: object;
+    hasItems: boolean;
 }
 /**
  * @hidden

package/dist/es/menu/components/MenuItemInternal.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, guid, getTemplate, setRef, getRef, Icon } from '@progress/kendo-vue-common';
+import { classNames, guid, getTemplate, setRef, getRef, Icon, getIconName } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc';
@@ -82,6 +82,9 @@ var MenuItemInternalVue2 = {
     }
   },
   computed: {
+    hasItems: function hasItems() {
+      return this.$props.item.items.length > 0;
+    },
     currentItemRender: function currentItemRender() {
       return this.$props.item.render || this.$props.itemRender;
     },
@@ -93,7 +96,7 @@ var MenuItemInternalVue2 = {
     },
     currentOpened: function currentOpened() {
       var props = this.$props;
-      return props.item.items.length > 0 && shouldOpenItem(props.item.id, props.lastItemIdToBeOpened) &&
+      return this.hasItems && shouldOpenItem(props.item.id, props.lastItemIdToBeOpened) &&
       // HACK: Wait for the second render because otherwise the scenario of
       // popup inside popup throws an error (for example, hover of item with id '0_0').
       !this.isFirstRender;
@@ -134,10 +137,19 @@ var MenuItemInternalVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var item = this.$props.item;
-    var itemId = item.id;
+    var _a = this.$props.item,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon,
+      id = _a.id,
+      contentParentItemId = _a.contentParentItemId,
+      items = _a.items,
+      text = _a.text,
+      cssStyle = _a.cssStyle,
+      disabled = _a.disabled,
+      url = _a.url;
+    var itemId = id;
     var renderContent = function renderContent() {
-      var parentItemId = this.$props.item.contentParentItemId;
+      var parentItemId = contentParentItemId;
       var contentRender = function contentRender(args) {
         return getTemplate.call(this, {
           h: h,
@@ -157,21 +169,22 @@ var MenuItemInternalVue2 = {
       })]);
     };
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
-      return this.$props.item.icon ? h(Icon, {
-        name: this.$props.item.icon,
+      return icon || svgIcon ? h(Icon, {
+        name: getIconName(icon),
         attrs: this.v3 ? undefined : {
-          name: this.$props.item.icon
+          name: getIconName(icon),
+          icon: svgIcon
         },
-        key: "0"
+        icon: svgIcon
       }) : null;
     };
     var renderArrowIfApplicable = function renderArrowIfApplicable() {
-      return this.$props.item.items.length > 0 ?
+      return this.hasItems ?
       // @ts-ignore
       h(MenuItemArrow, {
-        itemId: this.$props.item.id,
+        itemId: id,
         attrs: this.v3 ? undefined : {
-          itemId: this.$props.item.id,
+          itemId: id,
           verticalMenu: this.$props.isMenuVertical,
           dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
         },
@@ -180,28 +193,28 @@ var MenuItemInternalVue2 = {
         key: "2"
       }) : null;
     };
-    var originalItem = this.$props.originalItemNeeded(item.id);
+    var originalItem = this.$props.originalItemNeeded(id);
     var renderMenuItemLink = function renderMenuItemLink() {
       var _this2 = this;
       var defaultItemRender = h("span", {
         "class": "k-menu-link-text"
-      }, [item.text]);
+      }, [text]);
       var textOrItemRender = getTemplate.call(this, {
         h: h,
         template: this.currentItemRender,
         defaultRendering: defaultItemRender,
         additionalProps: {
           item: originalItem,
-          itemId: item.id,
+          itemId: id,
           key: '1'
         }
       });
       var defaultLink =
       // @ts-ignore function children
       h(MenuItemLink, {
-        url: item.url,
+        url: url,
         attrs: this.v3 ? undefined : {
-          url: item.url,
+          url: url,
           opened: this.currentOpened,
           focused: this.currentFocused
         },
@@ -216,7 +229,7 @@ var MenuItemInternalVue2 = {
         defaultRendering: defaultLink,
         additionalProps: {
           item: originalItem,
-          itemId: item.id,
+          itemId: id,
           opened: this.currentOpened,
           dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
         }
@@ -341,15 +354,15 @@ var MenuItemInternalVue2 = {
     };
     return h("li", {
       "class": this.menuItemClassName,
-      style: item.cssStyle,
+      style: cssStyle,
       tabindex: itemId === this.$props.tabbableItemId ? 0 : -1,
       attrs: this.v3 ? undefined : {
         tabindex: itemId === this.$props.tabbableItemId ? 0 : -1,
         role: "menuitem",
-        "aria-disabled": item.disabled ? true : undefined,
-        "aria-haspopup": item.items.length > 0 ? true : undefined,
-        "aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
-        "aria-label": item.text,
+        "aria-disabled": disabled ? true : undefined,
+        "aria-haspopup": this.hasItems ? true : undefined,
+        "aria-expanded": this.hasItems ? this.currentOpened : undefined,
+        "aria-label": text,
         "aria-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined
       },
       onMouseover: this.onMouseOver,
@@ -385,10 +398,10 @@ var MenuItemInternalVue2 = {
       },
       onKeydown: this.handleKeyDown,
       role: "menuitem",
-      "aria-disabled": item.disabled ? true : undefined,
-      "aria-haspopup": item.items.length > 0 ? true : undefined,
-      "aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
-      "aria-label": item.text,
+      "aria-disabled": disabled ? true : undefined,
+      "aria-haspopup": this.hasItems ? true : undefined,
+      "aria-expanded": this.hasItems ? this.currentOpened : undefined,
+      "aria-label": text,
       "aria-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined,
       ref: setRef(this, 'kendoAnchor', this._anchor),
       key: "0"

package/dist/es/menu/models/BaseMenuItem.d.ts

@@ -11,9 +11,13 @@ export interface BaseMenuItem {
      */
     url?: string;
     /**
-     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     * Specifies the name of the [FontIcon]({% slug overview_icon %}) that will be rendered for the item).
      */
     icon?: string;
+    /**
+     * Specifies the name of the [SVGIcon]({% slug overview_svgicon %}) that will be rendered for the item).
+     */
+    svgIcon?: string;
     /**
      * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
      */

package/dist/es/menu/utils/prepareInputItemsForInternalWork.js

@@ -16,7 +16,7 @@ export function prepareInputItemsForInternalWork(models) {
 }
 function copyInputItemWithoutChildren(inputModel) {
     var result = {};
-    var text = inputModel.text, url = inputModel.url, icon = inputModel.icon, disabled = inputModel.disabled, cssClass = inputModel.cssClass, popupClass = inputModel.popupClass, cssStyle = inputModel.cssStyle, render = inputModel.render, linkRender = inputModel.linkRender, contentRender = inputModel.contentRender, data = inputModel.data;
+    var text = inputModel.text, url = inputModel.url, icon = inputModel.icon, svgIcon = inputModel.svgIcon, disabled = inputModel.disabled, cssClass = inputModel.cssClass, popupClass = inputModel.popupClass, cssStyle = inputModel.cssStyle, render = inputModel.render, linkRender = inputModel.linkRender, contentRender = inputModel.contentRender, data = inputModel.data;
     if (text !== undefined) {
         result.text = text;
     }
@@ -26,6 +26,9 @@ function copyInputItemWithoutChildren(inputModel) {
     if (icon !== undefined) {
         result.icon = icon;
     }
+    if (svgIcon !== undefined) {
+        result.svgIcon = svgIcon;
+    }
     if (disabled !== undefined) {
         result.disabled = disabled;
     }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1693312682,
+    publishDate: 1694508796,
     version: '',
     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'
 };

package/dist/es/panelbar/PanelBar.js

@@ -27,7 +27,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { PanelBarItem } from './PanelBarItem';
 import { renderChildren, getInitialState, flatVisibleChildren, flatChildren, isArrayEqual, getFirstId } from './util';
 import { classNames, Keys } from '@progress/kendo-vue-common';
-import { validatePackage } from '@progress/kendo-vue-common';
+import { validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { NavigationAction } from './interfaces/NavigationAction';
 /**
@@ -66,6 +66,7 @@ var PanelBarVue2 = {
   created: function created() {
     this.activeDescendant = null;
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   data: function data() {
     var initialState = getInitialState(this.$props, this.expandMode);
@@ -115,7 +116,8 @@ var PanelBarVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    var className = classNames('k-panelbar', this.$props.className);
+    var className = classNames('k-panelbar', 'k-pos-relative', this.$props.className);
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     return h("ul", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -144,7 +146,7 @@ var PanelBarVue2 = {
       }, item), {
         item: item
       }));
-    }, this)]);
+    }, this), watermark]);
   },
   methods: {
     handleSelect: function handleSelect(event) {

package/dist/es/tabstrip/TabStrip.js

@@ -19,7 +19,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { TabStripNavigation } from './TabStripNavigation';
 import { TabStripContent } from './TabStripContent';
-import { Keys, classNames, getDefaultSlots, validatePackage, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { Keys, classNames, getDefaultSlots, validatePackage, shouldShowValidationUI, WatermarkOverlay, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -51,7 +51,8 @@ var TabStripVue2 = {
   data: function data() {
     return {
       currentShowAll: true,
-      currentTabs: []
+      currentTabs: [],
+      showLicenseWatermark: false
     };
   },
   computed: {
@@ -90,6 +91,7 @@ var TabStripVue2 = {
       return _this.compTabs.length - 1;
     }, _a);
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   watch: {
     selected: function selected(_prevIndex, _nextIndex) {
@@ -235,7 +237,8 @@ var TabStripVue2 = {
       _c = _b.tabIndex,
       tabIndex = _c === void 0 ? 0 : _c;
     var bottom = tabPosition === 'bottom';
-    var componentClasses = classNames('k-widget', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+    var componentClasses = classNames('k-widget', 'k-pos-relative', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     var renderContent = function renderContent(currentTabProps) {
       var selected = currentTabProps.selected,
         tabContentStyle = currentTabProps.tabContentStyle;
@@ -299,7 +302,7 @@ var TabStripVue2 = {
       },
       onKeydown: this.onKeyDown,
       tabIndex: tabIndex
-    })]);
+    }), watermark]);
   }
 };
 /**

package/dist/es/tilelayout/TileLayout.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getListeners, getTemplate, getter, templateRendering, validatePackage, guid } from '@progress/kendo-vue-common';
+import { getListeners, getTemplate, getter, templateRendering, validatePackage, shouldShowValidationUI, WatermarkOverlay, guid } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Tile } from './Tile';
 /**
@@ -42,10 +42,12 @@ var TileLayoutVue2 = {
   },
   created: function created() {
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   data: function data() {
     return {
-      currentPositions: []
+      currentPositions: [],
+      showLicenseWatermark: false
     };
   },
   computed: {
@@ -80,7 +82,8 @@ var TileLayoutVue2 = {
       var _a;
       var autoFlow = this.$props.autoFlow;
       return _a = {
-        'k-tilelayout': true
+        'k-tilelayout': true,
+        'k-pos-relative': true
       }, _a[AUTO_FLOW_CLASSES[autoFlow]] = true, _a;
     }
   },
@@ -110,6 +113,7 @@ var TileLayoutVue2 = {
       gap: gapValue,
       padding: gapValue
     };
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     return h("div", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -213,7 +217,7 @@ var TileLayoutVue2 = {
           "class": 'k-tilelayout-item-body k-card-body'
         }, [tile.body ? bodyContent : tile.bodyText])]])
       );
-    }, this)]);
+    }, this), watermark]);
   },
   methods: {
     focus: function focus() {

package/dist/esm/drawer/Drawer.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { DrawerNavigation } from './DrawerNavigation.js';
-import { getDir, validatePackage, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { getDir, validatePackage, shouldShowValidationUI, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 /**
  * @hidden
@@ -61,6 +61,7 @@ var DrawerVue2 = {
   },
   created: function created() {
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   data: function data() {
     var _a = this.$props,
@@ -87,7 +88,8 @@ var DrawerVue2 = {
         miniWidth: miniWidth,
         items: items,
         item: itemRender
-      }
+      },
+      showLicenseWatermark: false
     };
   },
   mounted: function mounted() {
@@ -177,8 +179,10 @@ var DrawerVue2 = {
       },
       item: itemRender,
       attrs: this.v3 ? undefined : {
-        item: itemRender
-      }
+        item: itemRender,
+        showLicenseWatermark: this.showLicenseWatermark
+      },
+      showLicenseWatermark: this.showLicenseWatermark
     }), defaultSlot]);
   },
   methods: {

package/dist/esm/drawer/DrawerNavigation.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { DrawerItem } from './DrawerItem.js';
-import { getDefaultSlots, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { getDefaultSlots, templateRendering, getListeners, getTemplate, WatermarkOverlay } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -46,7 +46,8 @@ var DrawerNavigationVue2 = {
   name: 'KendoDrawerNavigation',
   props: {
     item: [Object],
-    tabIndex: Number
+    tabIndex: Number,
+    showLicenseWatermark: Boolean
   },
   inject: {
     kendoDrawer: {
@@ -122,6 +123,7 @@ var DrawerNavigationVue2 = {
       WebkitTransitionDuration: (customSettings && customSettings.duration) + 'ms',
       transitionDuration: (customSettings && customSettings.duration) + 'ms'
     };
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     var drawerAnimation = expanded ? mode === 'push' ? expandPush : expandOverlay : mode === 'push' ? collapsePush : dir === 'ltr' && position === 'start' || dir === 'rtl' && position === 'end' ? mini ? collapseOverlayMini : collapseOverlay : mini ? collapseOverlayMini : collapseOverlayRtl;
     var drawerItems = items && h("ul", {
       "class": 'k-drawer-items',
@@ -175,7 +177,7 @@ var DrawerNavigationVue2 = {
         }
       });
       return itemRendering;
-    }, this)]);
+    }, this), watermark]);
     var drawerNavigation = h("div", {
       style: drawerAnimation,
       "class": this.navigationClassNames

package/dist/esm/menu/components/MenuItemInternal.d.ts

@@ -32,6 +32,7 @@ export interface MenuItemInternalComputed {
     currentFocused: boolean;
     popupClassName: string;
     menuItemClassName: object;
+    hasItems: boolean;
 }
 /**
  * @hidden

package/dist/esm/menu/components/MenuItemInternal.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, guid, getTemplate, setRef, getRef, Icon } from '@progress/kendo-vue-common';
+import { classNames, guid, getTemplate, setRef, getRef, Icon, getIconName } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils.js';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc.js';
@@ -82,6 +82,9 @@ var MenuItemInternalVue2 = {
     }
   },
   computed: {
+    hasItems: function hasItems() {
+      return this.$props.item.items.length > 0;
+    },
     currentItemRender: function currentItemRender() {
       return this.$props.item.render || this.$props.itemRender;
     },
@@ -93,7 +96,7 @@ var MenuItemInternalVue2 = {
     },
     currentOpened: function currentOpened() {
       var props = this.$props;
-      return props.item.items.length > 0 && shouldOpenItem(props.item.id, props.lastItemIdToBeOpened) &&
+      return this.hasItems && shouldOpenItem(props.item.id, props.lastItemIdToBeOpened) &&
       // HACK: Wait for the second render because otherwise the scenario of
       // popup inside popup throws an error (for example, hover of item with id '0_0').
       !this.isFirstRender;
@@ -134,10 +137,19 @@ var MenuItemInternalVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var item = this.$props.item;
-    var itemId = item.id;
+    var _a = this.$props.item,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon,
+      id = _a.id,
+      contentParentItemId = _a.contentParentItemId,
+      items = _a.items,
+      text = _a.text,
+      cssStyle = _a.cssStyle,
+      disabled = _a.disabled,
+      url = _a.url;
+    var itemId = id;
     var renderContent = function renderContent() {
-      var parentItemId = this.$props.item.contentParentItemId;
+      var parentItemId = contentParentItemId;
       var contentRender = function contentRender(args) {
         return getTemplate.call(this, {
           h: h,
@@ -157,21 +169,22 @@ var MenuItemInternalVue2 = {
       })]);
     };
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
-      return this.$props.item.icon ? h(Icon, {
-        name: this.$props.item.icon,
+      return icon || svgIcon ? h(Icon, {
+        name: getIconName(icon),
         attrs: this.v3 ? undefined : {
-          name: this.$props.item.icon
+          name: getIconName(icon),
+          icon: svgIcon
         },
-        key: "0"
+        icon: svgIcon
       }) : null;
     };
     var renderArrowIfApplicable = function renderArrowIfApplicable() {
-      return this.$props.item.items.length > 0 ?
+      return this.hasItems ?
       // @ts-ignore
       h(MenuItemArrow, {
-        itemId: this.$props.item.id,
+        itemId: id,
         attrs: this.v3 ? undefined : {
-          itemId: this.$props.item.id,
+          itemId: id,
           verticalMenu: this.$props.isMenuVertical,
           dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
         },
@@ -180,28 +193,28 @@ var MenuItemInternalVue2 = {
         key: "2"
       }) : null;
     };
-    var originalItem = this.$props.originalItemNeeded(item.id);
+    var originalItem = this.$props.originalItemNeeded(id);
     var renderMenuItemLink = function renderMenuItemLink() {
       var _this2 = this;
       var defaultItemRender = h("span", {
         "class": "k-menu-link-text"
-      }, [item.text]);
+      }, [text]);
       var textOrItemRender = getTemplate.call(this, {
         h: h,
         template: this.currentItemRender,
         defaultRendering: defaultItemRender,
         additionalProps: {
           item: originalItem,
-          itemId: item.id,
+          itemId: id,
           key: '1'
         }
       });
       var defaultLink =
       // @ts-ignore function children
       h(MenuItemLink, {
-        url: item.url,
+        url: url,
         attrs: this.v3 ? undefined : {
-          url: item.url,
+          url: url,
           opened: this.currentOpened,
           focused: this.currentFocused
         },
@@ -216,7 +229,7 @@ var MenuItemInternalVue2 = {
         defaultRendering: defaultLink,
         additionalProps: {
           item: originalItem,
-          itemId: item.id,
+          itemId: id,
           opened: this.currentOpened,
           dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
         }
@@ -341,15 +354,15 @@ var MenuItemInternalVue2 = {
     };
     return h("li", {
       "class": this.menuItemClassName,
-      style: item.cssStyle,
+      style: cssStyle,
       tabindex: itemId === this.$props.tabbableItemId ? 0 : -1,
       attrs: this.v3 ? undefined : {
         tabindex: itemId === this.$props.tabbableItemId ? 0 : -1,
         role: "menuitem",
-        "aria-disabled": item.disabled ? true : undefined,
-        "aria-haspopup": item.items.length > 0 ? true : undefined,
-        "aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
-        "aria-label": item.text,
+        "aria-disabled": disabled ? true : undefined,
+        "aria-haspopup": this.hasItems ? true : undefined,
+        "aria-expanded": this.hasItems ? this.currentOpened : undefined,
+        "aria-label": text,
         "aria-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined
       },
       onMouseover: this.onMouseOver,
@@ -385,10 +398,10 @@ var MenuItemInternalVue2 = {
       },
       onKeydown: this.handleKeyDown,
       role: "menuitem",
-      "aria-disabled": item.disabled ? true : undefined,
-      "aria-haspopup": item.items.length > 0 ? true : undefined,
-      "aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
-      "aria-label": item.text,
+      "aria-disabled": disabled ? true : undefined,
+      "aria-haspopup": this.hasItems ? true : undefined,
+      "aria-expanded": this.hasItems ? this.currentOpened : undefined,
+      "aria-label": text,
       "aria-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined,
       ref: setRef(this, 'kendoAnchor', this._anchor),
       key: "0"