@progress/kendo-vue-layout 2.5.1 → 2.5.2-dev.202110121006

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

@@ -0,0 +1,417 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var ref = allVue.ref;
+import { classNames, guid } 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';
+import { MenuItemLink } from './MenuItemLink';
+import { MenuItemInternalsList } from './MenuItemInternalsList';
+import { MenuItemArrow } from './MenuItemArrow'; // tslint:enable:max-line-length
+
+var MenuItemInternal = {
+  name: 'KendoMenuItemInternal',
+  props: {
+    item: Object,
+    focusedItemId: String,
+    lastItemIdToBeOpened: String,
+    tabbableItemId: String,
+    itemRender: [String, Object, Function],
+    linkRender: [String, Object, Function],
+    isMenuVertical: Boolean,
+    isDirectionRightToLeft: Boolean,
+    menuGuid: String
+  },
+  created: function created() {
+    this.itemElement = null;
+    this.isFirstRender = true;
+    this._anchor = guid();
+  },
+  data: function data() {
+    return {
+      opened: false
+    };
+  },
+  mounted: function mounted() {
+    this.itemElement = this.$refs[this._anchor];
+    var focusedItemId = this.$props.focusedItemId;
+    var currentItemId = this.$props.item.id; // If the menu item component has been just mounted due to
+    // keyboard navigation and it is the selected one.
+
+    if (focusedItemId && focusedItemId === currentItemId) {
+      this.itemElement.focus();
+    }
+
+    this.isFirstRender = false;
+  },
+  updated: function updated() {
+    var focusedItemId = this.$props.focusedItemId;
+    var currentItemId = this.$props.item.id;
+
+    if (focusedItemId) {// If the item has been navigated to via the keyboard navigation
+      // (Clicking and focusing an item also come here).
+      // if (prevProps.focusedItemId !== focusedItemId
+      //     && focusedItemId === currentItemId
+      //     // https://github.com/telerik/kendo-react/issues/216 :
+      //     // No need to focus the wrapping menu item DOM element
+      //     // when a child DOM element was clicked.
+      //     && !this.itemElement.contains(document.activeElement)) {
+      //     this.itemElement.focus();
+      // }
+    } else if (document.activeElement === this.itemElement) {
+      this.itemElement.blur();
+    }
+  },
+  computed: {
+    currnetItemRender: function currnetItemRender() {
+      return this.$props.item.render || this.$props.itemRender;
+    },
+    currentLinkRender: function currentLinkRender() {
+      return this.$props.item.linkRender || this.$props.linkRender;
+    },
+    contentRender: function contentRender() {
+      return this.$props.item.contentParentItemId ? this.$props.item.contentRender : null;
+    },
+    currentOpened: function currentOpened() {
+      var props = this.$props;
+      return props.item.items.length > 0 && 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;
+    },
+    popupClassName: function popupClassName() {
+      return classNames({
+        'k-menu-popup': true,
+        'k-rtl': this.$props.isDirectionRightToLeft
+      });
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    var kendoAnchorRef = ref(null);
+    return {
+      v3: v3,
+      kendoAnchorRef: kendoAnchorRef
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var item = this.$props.item;
+    var itemId = item.id;
+
+    var renderContent = function renderContent() {
+      var parentItemId = this.$props.item.contentParentItemId;
+      return h("div", {
+        "class": "k-content",
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [h(this.contentRender, {
+        item: this.handleOriginalItemNeeded(parentItemId),
+        attrs: this.v3 ? undefined : {
+          item: this.handleOriginalItemNeeded(parentItemId),
+          itemId: parentItemId
+        },
+        itemId: parentItemId
+      })]);
+    };
+
+    var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
+      return this.$props.item.icon ? h("span", {
+        "class": "k-icon k-i-" + this.$props.item.icon,
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        },
+        key: "0"
+      }) : null;
+    };
+
+    var renderArrowIfApplicable = function renderArrowIfApplicable() {
+      return this.$props.item.items.length > 0 ? // @ts-ignore
+      h(MenuItemArrow, {
+        itemId: this.$props.item.id,
+        attrs: this.v3 ? undefined : {
+          itemId: this.$props.item.id,
+          verticalMenu: this.$props.isMenuVertical,
+          dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
+        },
+        verticalMenu: this.$props.isMenuVertical,
+        dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft),
+        key: "2"
+      }) : null;
+    };
+
+    var renderMenuItemLink = function renderMenuItemLink() {
+      var _this2 = this;
+
+      if (this.currentLinkRender) {
+        return h(this.currentLinkRender, {
+          item: this.$props.onOriginalItemNeeded(item.id),
+          attrs: this.v3 ? undefined : {
+            item: this.$props.onOriginalItemNeeded(item.id),
+            itemId: item.id,
+            opened: this.currentOpened,
+            dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
+          },
+          itemId: item.id,
+          opened: this.currentOpened,
+          dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
+        });
+      } else {
+        var textOrItemRender = this.currnetItemRender ? h(this.currnetItemRender, {
+          item: this.$props.onOriginalItemNeeded(item.id),
+          attrs: this.v3 ? undefined : {
+            item: this.$props.onOriginalItemNeeded(item.id),
+            itemId: item.id
+          },
+          itemId: item.id,
+          key: "1"
+        }) : item.text;
+        return (// @ts-ignore function children
+          h(MenuItemLink, {
+            url: item.url,
+            attrs: this.v3 ? undefined : {
+              url: item.url,
+              opened: this.currentOpened
+            },
+            opened: this.currentOpened
+          }, this.v3 ? function () {
+            return [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]];
+          } : [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]])
+        );
+      }
+    };
+
+    var renderPopupIfOpened = function renderPopupIfOpened() {
+      var _this3 = this;
+
+      var _a = getPopupSettings(itemId, this.$props.isMenuVertical, this.$props.isDirectionRightToLeft),
+          anchorAlign = _a.anchorAlign,
+          popupAlign = _a.popupAlign,
+          collision = _a.collision;
+
+      return (// @ts-ignore function children
+        h(Popup, {
+          anchor: this._anchor,
+          attrs: this.v3 ? undefined : {
+            anchor: this._anchor,
+            show: this.currentOpened,
+            popupClass: this.popupClassName,
+            anchorAlign: anchorAlign,
+            popupAlign: popupAlign,
+            collision: collision,
+            animate: false
+          },
+          show: this.currentOpened,
+          popupClass: this.popupClassName,
+          anchorAlign: anchorAlign,
+          popupAlign: popupAlign,
+          collision: collision,
+          animate: false,
+          key: "1"
+        }, this.v3 ? function () {
+          return [// @ts-ignore
+          h(MenuItemInternalsList, {
+            parentItemId: itemId,
+            attrs: _this3.v3 ? undefined : {
+              parentItemId: itemId,
+              items: _this3.$props.item.items,
+              menuGuid: _this3.$props.menuGuid,
+              focusedItemId: _this3.$props.focusedItemId,
+              lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
+              tabbableItemId: _this3.$props.tabbableItemId,
+              itemRender: _this3.$props.itemRender,
+              linkRender: _this3.$props.linkRender,
+              isMenuVertical: _this3.$props.isMenuVertical,
+              isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft
+            },
+            items: _this3.$props.item.items,
+            menuGuid: _this3.$props.menuGuid,
+            focusedItemId: _this3.$props.focusedItemId,
+            lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
+            tabbableItemId: _this3.$props.tabbableItemId,
+            itemRender: _this3.$props.itemRender,
+            linkRender: _this3.$props.linkRender,
+            isMenuVertical: _this3.$props.isMenuVertical,
+            isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
+            "class": "k-group k-menu-group k-reset",
+            onMouseover: _this3.handleItemMouseOver,
+            on: _this3.v3 ? undefined : {
+              "mouseover": _this3.handleItemMouseOver,
+              "mouseleave": _this3.handleItemMouseLeave,
+              "mousedown": _this3.handleItemMouseDown,
+              "blur": _this3.handleItemMouseBlur,
+              "focus": _this3.handleItemMouseFocus,
+              "click": _this3.handleItemMouseClick,
+              "originalitemneeded": _this3.handleOriginalItemNeeded
+            },
+            onMouseleave: _this3.handleItemMouseLeave,
+            onMousedown: _this3.handleItemMouseDown,
+            onBlur: _this3.handleItemMouseBlur,
+            onFocus: _this3.handleItemMouseFocus,
+            onClick: _this3.handleItemMouseClick,
+            onOriginalitemneeded: _this3.handleOriginalItemNeeded
+          })];
+        } : [h(MenuItemInternalsList, {
+          parentItemId: itemId,
+          attrs: _this3.v3 ? undefined : {
+            parentItemId: itemId,
+            items: _this3.$props.item.items,
+            menuGuid: _this3.$props.menuGuid,
+            focusedItemId: _this3.$props.focusedItemId,
+            lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
+            tabbableItemId: _this3.$props.tabbableItemId,
+            itemRender: _this3.$props.itemRender,
+            linkRender: _this3.$props.linkRender,
+            isMenuVertical: _this3.$props.isMenuVertical,
+            isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft
+          },
+          items: _this3.$props.item.items,
+          menuGuid: _this3.$props.menuGuid,
+          focusedItemId: _this3.$props.focusedItemId,
+          lastItemIdToBeOpened: _this3.$props.lastItemIdToBeOpened,
+          tabbableItemId: _this3.$props.tabbableItemId,
+          itemRender: _this3.$props.itemRender,
+          linkRender: _this3.$props.linkRender,
+          isMenuVertical: _this3.$props.isMenuVertical,
+          isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
+          "class": "k-group k-menu-group k-reset",
+          onMouseover: _this3.handleItemMouseOver,
+          on: _this3.v3 ? undefined : {
+            "mouseover": _this3.handleItemMouseOver,
+            "mouseleave": _this3.handleItemMouseLeave,
+            "mousedown": _this3.handleItemMouseDown,
+            "blur": _this3.handleItemMouseBlur,
+            "focus": _this3.handleItemMouseFocus,
+            "click": _this3.handleItemMouseClick,
+            "originalitemneeded": _this3.handleOriginalItemNeeded
+          },
+          onMouseleave: _this3.handleItemMouseLeave,
+          onMousedown: _this3.handleItemMouseDown,
+          onBlur: _this3.handleItemMouseBlur,
+          onFocus: _this3.handleItemMouseFocus,
+          onClick: _this3.handleItemMouseClick,
+          onOriginalitemneeded: _this3.handleOriginalItemNeeded
+        })])
+      );
+    };
+
+    return h("li", {
+      "class": this.menuItemClassName,
+      style: item.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-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined
+      },
+      onMouseover: this.onMouseOver,
+      on: this.v3 ? undefined : {
+        "mouseover": this.onMouseOver,
+        "mouseleave": this.onMouseLeave,
+        "mousedown": function mousedown(event) {
+          return _this.handleMouseDown(event);
+        },
+        "focusout": function focusout() {
+          return _this.handleBlur(itemId);
+        },
+        "focusin": function focusin() {
+          return _this.handleFocus(itemId);
+        },
+        "click": function click(event) {
+          return _this.handleClick(event, itemId);
+        }
+      },
+      onMouseleave: this.onMouseLeave,
+      onMousedown: function mousedown(event) {
+        return _this.handleMouseDown(event);
+      },
+      onFocusout: function focusout() {
+        return _this.handleBlur(itemId);
+      },
+      onFocusin: function focusin() {
+        return _this.handleFocus(itemId);
+      },
+      onClick: function click(event) {
+        return _this.handleClick(event, itemId);
+      },
+      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-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined,
+      ref: this.v3 ? function (el) {
+        _this.kendoAnchorRef = el;
+      } : this._anchor,
+      key: "0"
+    }, [this.contentRender ? renderContent.call(this) : renderMenuItemLink.call(this), renderPopupIfOpened.call(this)]);
+  },
+  methods: {
+    handleItemMouseOver: function handleItemMouseOver(event) {
+      this.$emit('mouseover', event);
+    },
+    handleItemMouseLeave: function handleItemMouseLeave(event) {
+      this.$emit('mouseleave', event);
+    },
+    handleItemMouseDown: function handleItemMouseDown(event) {
+      this.$emit('mousedown', event);
+    },
+    handleItemMouseBlur: function handleItemMouseBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleItemMouseFocus: function handleItemMouseFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleItemMouseClick: function handleItemMouseClick(event) {
+      this.$emit('click', event);
+    },
+    handleClick: function handleClick(event, itemId) {
+      this.$emit('click', event, itemId);
+    },
+    handleBlur: function handleBlur(itemId) {
+      this.$emit('blur', itemId);
+    },
+    handleFocus: function handleFocus(itemId) {
+      this.$emit('focus', itemId);
+    },
+    handleMouseDown: function handleMouseDown(event) {
+      this.$emit('mousedown', event);
+    },
+    handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
+      this.$emit('originalitemneeded', event);
+    },
+    onMouseOver: function onMouseOver(event) {
+      this.$emit('mouseover', this.$props.item.id);
+      event.stopPropagation();
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      this.$emit('mouseleave', this.$props.item.id);
+      event.stopPropagation();
+    },
+    menuItemClassName: function menuItemClassName() {
+      var _a;
+
+      var item = this.$props.item;
+      return _a = {
+        'k-item': true,
+        'k-menu-item': true,
+        'k-first': isFirstItemFromSiblings(item.id),
+        'k-last': item.isLastFromSiblings,
+        'k-state-disabled': item.disabled
+      }, _a[item.cssClass ? item.cssClass : ''] = item.cssClass, _a;
+    }
+  }
+};
+var MenuItemInternalVue3 = MenuItemInternal;
+export { MenuItemInternal, MenuItemInternalVue3 };

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

@@ -0,0 +1,44 @@
+import { DefineComponent } from '../../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { MenuItemInternalModel } from './../models/MenuItemModel';
+import { BaseMenuItemInternalProps } from './../BaseMenuItemInternalProps';
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
+    items: MenuItemInternalModel[];
+    parentItemId?: string;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListState {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListComputed {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListData {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalsListAll extends Vue, MenuItemInternalsListMethods, MenuItemInternalsListData, MenuItemInternalsListComputed, MenuItemInternalsListState {
+}
+declare let MenuItemInternalsList: ComponentOptions<MenuItemInternalsListAll, DefaultData<MenuItemInternalsListData>, DefaultMethods<MenuItemInternalsListAll>, MenuItemInternalsListComputed, RecordPropsDefinition<MenuItemInternalsListProps>>;
+declare const MenuItemInternalsListVue3: DefineComponent<MenuItemInternalsListProps, any, MenuItemInternalsListData, MenuItemInternalsListComputed, MenuItemInternalsListMethods, {}, {}, {}, string, MenuItemInternalsListProps, MenuItemInternalsListProps, {}>;
+export { MenuItemInternalsList, MenuItemInternalsListVue3 };

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

@@ -0,0 +1,131 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { MenuItemInternal } from './MenuItemInternal';
+import { getDOMElementId } from './../utils/misc'; // tslint:enable:max-line-length
+
+var MenuItemInternalsList = {
+  name: 'KendoMenuItemInternalsList',
+  props: {
+    items: Array,
+    parentItemId: String,
+    focusedItemId: String,
+    lastItemIdToBeOpened: String,
+    tabbableItemId: String,
+    itemRender: [String, Object, Function],
+    linkRender: [String, Object, Function],
+    isMenuVertical: Boolean,
+    isDirectionRightToLeft: Boolean,
+    menuGuid: String
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var parentItemId = this.$props.parentItemId;
+
+    var renderChildItems = function renderChildItems() {
+      return this.$props.items.length > 0 ? this.$props.items.map(function (item, index) {
+        return (// @ts-ignore
+          h(MenuItemInternal, {
+            item: item,
+            attrs: this.v3 ? undefined : {
+              item: item,
+              isMenuVertical: this.$props.isMenuVertical,
+              isDirectionRightToLeft: this.$props.isDirectionRightToLeft,
+              focusedItemId: this.$props.focusedItemId,
+              lastItemIdToBeOpened: this.$props.lastItemIdToBeOpened,
+              tabbableItemId: this.$props.tabbableItemId,
+              itemRender: this.$props.itemRender,
+              linkRender: this.$props.linkRender,
+              menuGuid: this.$props.menuGuid
+            },
+            isMenuVertical: this.$props.isMenuVertical,
+            isDirectionRightToLeft: this.$props.isDirectionRightToLeft,
+            focusedItemId: this.$props.focusedItemId,
+            lastItemIdToBeOpened: this.$props.lastItemIdToBeOpened,
+            tabbableItemId: this.$props.tabbableItemId,
+            itemRender: this.$props.itemRender,
+            linkRender: this.$props.linkRender,
+            menuGuid: this.$props.menuGuid,
+            onMouseover: this.handleItemMouseOver,
+            on: this.v3 ? undefined : {
+              "mouseover": this.handleItemMouseOver,
+              "mouseleave": this.handleItemMouseLeave,
+              "mousedown": this.handleItemMouseDown,
+              "blur": this.handleItemMouseBlur,
+              "focus": this.handleItemMouseFocus,
+              "click": this.handleItemMouseClick,
+              "originalitemneeded": this.handleOriginalItemNeeded
+            },
+            onMouseleave: this.handleItemMouseLeave,
+            onMousedown: this.handleItemMouseDown,
+            onBlur: this.handleItemMouseBlur,
+            onFocus: this.handleItemMouseFocus,
+            onClick: this.handleItemMouseClick,
+            onOriginalitemneeded: this.handleOriginalItemNeeded,
+            key: index
+          })
+        );
+      }, this) : null;
+    };
+
+    return h("ul", {
+      role: parentItemId !== undefined ? 'menu' : 'menubar',
+      attrs: this.v3 ? undefined : {
+        role: parentItemId !== undefined ? 'menu' : 'menubar',
+        id: parentItemId !== undefined ? getDOMElementId(this.$props.menuGuid, parentItemId) : undefined
+      },
+      id: parentItemId !== undefined ? getDOMElementId(this.$props.menuGuid, parentItemId) : undefined,
+      onMouseover: this.onMouseOver,
+      on: this.v3 ? undefined : {
+        "mouseover": this.onMouseOver,
+        "mouseleave": this.onMouseLeave
+      },
+      onMouseleave: this.onMouseLeave
+    }, [renderChildItems.call(this)]);
+  },
+  methods: {
+    handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
+      this.$emit('originalitemneeded', event);
+    },
+    handleItemMouseOver: function handleItemMouseOver(event) {
+      this.$emit('mouseover', event);
+    },
+    handleItemMouseLeave: function handleItemMouseLeave(event) {
+      this.$emit('mouseleave', event);
+    },
+    handleItemMouseDown: function handleItemMouseDown(event) {
+      this.$emit('mousedown', event);
+    },
+    handleItemMouseBlur: function handleItemMouseBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleItemMouseFocus: function handleItemMouseFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleItemMouseClick: function handleItemMouseClick(event, itemId) {
+      this.$emit('click', event, itemId);
+    },
+    onMouseOver: function onMouseOver(event) {
+      if (this.$props.parentItemId !== undefined) {
+        this.$emit('mouseover', this.$props.parentItemId);
+        event.stopPropagation();
+      }
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      if (this.$props.parentItemId !== undefined) {
+        this.$emit('mouseleave', this.$props.parentItemId);
+        event.stopPropagation();
+      }
+    }
+  }
+};
+var MenuItemInternalsListVue3 = MenuItemInternalsList;
+export { MenuItemInternalsList, MenuItemInternalsListVue3 };

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

@@ -0,0 +1,49 @@
+import { DefineComponent } from '../../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * The properties of the Kendo UI for Vue MenuItemLink component.
+ */
+export interface MenuItemLinkProps {
+    /**
+     * Specifies whether the MenuItemLink component is opened.
+     */
+    opened: boolean;
+    /**
+     * Sets the URL of the MenuItemLink component.
+     */
+    url?: string;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemLinkState {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemLinkComputed {
+    menuItemClassName: object;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemLinkMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemLinkData {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemLinkAll extends Vue, MenuItemLinkMethods, MenuItemLinkData, MenuItemLinkComputed, MenuItemLinkState {
+}
+declare let MenuItemLink: ComponentOptions<MenuItemLinkAll, DefaultData<MenuItemLinkData>, DefaultMethods<MenuItemLinkAll>, MenuItemLinkComputed, RecordPropsDefinition<MenuItemLinkProps>>;
+declare const MenuItemLinkVue3: DefineComponent<MenuItemLinkProps, any, MenuItemLinkData, MenuItemLinkComputed, MenuItemLinkMethods, {}, {}, {}, string, MenuItemLinkProps, MenuItemLinkProps, {}>;
+export { MenuItemLink, MenuItemLinkVue3 };

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

@@ -0,0 +1,57 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { getDefaultSlots } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+
+var MenuItemLink = {
+  name: 'KendoMenuItemLink',
+  props: {
+    opened: Boolean,
+    url: String
+  },
+  computed: {
+    menuItemClassName: function menuItemClassName() {
+      return {
+        'k-link': true,
+        'k-menu-link': true,
+        'k-state-active': this.$props.opened
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+
+    if (this.$props.url) {
+      return h("a", {
+        "class": this.getMenuItemClassName(),
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation",
+          href: this.props.url,
+          tabIndex: -1
+        },
+        href: this.props.url,
+        tabIndex: -1
+      }, [this.props.children]);
+    } else {
+      return h("span", {
+        "class": this.menuItemClassName,
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [defaultSlot]);
+    }
+  }
+};
+var MenuItemLinkVue3 = MenuItemLink;
+export { MenuItemLink, MenuItemLinkVue3 };