@progress/kendo-vue-layout 3.5.0 → 3.5.1-dev.202208150613

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

@@ -0,0 +1,68 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getChildrenPosition } from '../utils/misc.js';
+/**
+ * @hidden
+ */
+
+export var downArrowClass = 'k-i-arrow-60-down';
+/**
+ * @hidden
+ */
+
+export var rightArrowClass = 'k-i-arrow-60-right';
+/**
+ * @hidden
+ */
+
+export var leftArrowClass = 'k-i-arrow-60-left';
+/**
+ * @hidden
+ */
+
+var MenuItemArrowVue2 = {
+  name: 'KendoMenuItemArrow',
+  props: {
+    itemId: String,
+    dir: String,
+    verticalMenu: Boolean
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("span", {
+      "class": "k-menu-expand-arrow"
+    }, [h("span", {
+      "class": this.getArrowClassName(),
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      }
+    })]);
+  },
+  methods: {
+    getArrowClassName: function getArrowClassName() {
+      var _a;
+
+      var childrenPosition = getChildrenPosition(this.$props.itemId, this.$props.verticalMenu === true, this.$props.dir === 'rtl');
+      return _a = {
+        'k-icon': true
+      }, _a[downArrowClass] = childrenPosition === 'downward', _a[rightArrowClass] = childrenPosition === 'rightward', _a[leftArrowClass] = childrenPosition === 'leftward', _a;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var MenuItemArrow = MenuItemArrowVue2;
+export { MenuItemArrow, MenuItemArrowVue2 };

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

@@ -0,0 +1,61 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../../additionalTypes';
+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 MenuItemInternalProps extends BaseMenuItemInternalProps {
+    item: MenuItemInternalModel;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalState {
+    itemElement: any;
+    isFirstRender: boolean;
+    prevFocusedItemId?: string;
+    kendoAnchorRef: any;
+    _anchor: string;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalComputed {
+    currentItemRender: any;
+    currentLinkRender: any;
+    contentRender: any;
+    currentOpened: boolean;
+    currentFocused: boolean;
+    popupClassName: string;
+    menuItemClassName: object;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalData {
+    opened: boolean;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalAll extends Vue2type, MenuItemInternalMethods, MenuItemInternalData, MenuItemInternalComputed, MenuItemInternalState {
+}
+/**
+ * @hidden
+ */
+declare let MenuItemInternalVue2: ComponentOptions<MenuItemInternalAll, DefaultData<MenuItemInternalData>, DefaultMethods<MenuItemInternalAll>, MenuItemInternalComputed, RecordPropsDefinition<MenuItemInternalProps>>;
+/**
+ * @hidden
+ */
+declare const MenuItemInternal: DefineComponent<MenuItemInternalProps, any, MenuItemInternalData, MenuItemInternalComputed, MenuItemInternalMethods, {}, {}, {}, string, MenuItemInternalProps, MenuItemInternalProps, {}>;
+export { MenuItemInternal, MenuItemInternalVue2 };

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

@@ -0,0 +1,454 @@
+// @ts-ignore
+import * as Vue from 'vue';
+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 } 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';
+import { MenuItemLink } from './MenuItemLink.js';
+import { MenuItemInternalsList } from './MenuItemInternalsList.js';
+import { MenuItemArrow } from './MenuItemArrow.js';
+/**
+ * @hidden
+ */
+
+var MenuItemInternalVue2 = {
+  name: 'KendoMenuItemInternal',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'mouseover': null,
+    'mouseleave': null,
+    'blur': null,
+    'focus': null,
+    'click': null,
+    'mousedown': null
+  },
+  props: {
+    item: Object,
+    focusedItemId: String,
+    lastItemIdToBeOpened: String,
+    tabbableItemId: String,
+    itemRender: [String, Object, Function],
+    linkRender: [String, Object, Function],
+    isMenuVertical: Boolean,
+    isDirectionRightToLeft: Boolean,
+    menuGuid: String,
+    originalItemNeeded: Function
+  },
+  created: function created() {
+    this.itemElement = null;
+    this.prevFocusedItemId = this.$props.focusedItemId;
+    this.isFirstRender = true;
+    this._anchor = guid();
+  },
+  data: function data() {
+    return {
+      opened: false
+    };
+  },
+  mounted: function mounted() {
+    this.itemElement = getRef(this, 'kendoAnchor', 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) {
+      this.itemElement.focus();
+    }
+
+    this.isFirstRender = false;
+  },
+  watch: {
+    focusedItemId: function focusedItemId(_, oldValue) {
+      this.prevFocusedItemId = oldValue;
+    }
+  },
+  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 (this.prevFocusedItemId !== focusedItemId && focusedItemId === currentItemId // 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: {
+    currentItemRender: function currentItemRender() {
+      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;
+    },
+    currentFocused: function currentFocused() {
+      var focusedItemId = this.$props.focusedItemId;
+      var currentItemId = this.$props.item.id;
+      return focusedItemId === currentItemId;
+    },
+    popupClassName: function popupClassName() {
+      return classNames({
+        'k-menu-popup': true,
+        'k-rtl': this.$props.isDirectionRightToLeft
+      });
+    },
+    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-disabled': item.disabled
+      }, _a[item.cssClass ? item.cssClass : ''] = item.cssClass, _a;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    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;
+
+      var contentRender = function contentRender(args) {
+        return getTemplate.call(this, {
+          h: h,
+          template: this.contentRender,
+          additionalProps: args
+        });
+      };
+
+      return h("div", {
+        "class": "k-content",
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [contentRender.call(this, {
+        item: this.handleOriginalItemNeeded(parentItemId),
+        itemId: parentItemId
+      })]);
+    };
+
+    var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
+      return this.$props.item.icon ? h("span", {
+        "class": "k-icon k-i-".concat(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 originalItem = this.$props.originalItemNeeded(item.id);
+
+    var renderMenuItemLink = function renderMenuItemLink() {
+      var _this2 = this;
+
+      var defaultItemRender = h("span", {
+        "class": "k-menu-link-text"
+      }, [item.text]);
+      var textOrItemRender = getTemplate.call(this, {
+        h: h,
+        template: this.currentItemRender,
+        defaultRendering: defaultItemRender,
+        additionalProps: {
+          item: originalItem,
+          itemId: item.id,
+          key: '1'
+        }
+      });
+      var defaultLink = // @ts-ignore function children
+      h(MenuItemLink, {
+        url: item.url,
+        attrs: this.v3 ? undefined : {
+          url: item.url,
+          opened: this.currentOpened,
+          focused: this.currentFocused
+        },
+        opened: this.currentOpened,
+        focused: this.currentFocused
+      }, this.v3 ? function () {
+        return [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]];
+      } : [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]]);
+      return getTemplate.call(this, {
+        h: h,
+        template: this.currentLinkRender,
+        defaultRendering: defaultLink,
+        additionalProps: {
+          item: originalItem,
+          itemId: item.id,
+          opened: this.currentOpened,
+          dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
+        }
+      });
+    };
+
+    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,
+              originalItemNeeded: _this3.handleOriginalItemNeeded
+            },
+            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.handleMouseDown,
+              "blur": _this3.handleItemMouseBlur,
+              "focus": _this3.handleItemMouseFocus,
+              "click": _this3.handleClick,
+              "keydown": _this3.handleKeyDown
+            },
+            onMouseleave: _this3.handleItemMouseLeave,
+            onMousedown: _this3.handleMouseDown,
+            onBlur: _this3.handleItemMouseBlur,
+            onFocus: _this3.handleItemMouseFocus,
+            onClick: _this3.handleClick,
+            onKeydown: _this3.handleKeyDown,
+            originalItemNeeded: _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,
+            originalItemNeeded: _this3.handleOriginalItemNeeded
+          },
+          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.handleMouseDown,
+            "blur": _this3.handleItemMouseBlur,
+            "focus": _this3.handleItemMouseFocus,
+            "click": _this3.handleClick,
+            "keydown": _this3.handleKeyDown
+          },
+          onMouseleave: _this3.handleItemMouseLeave,
+          onMousedown: _this3.handleMouseDown,
+          onBlur: _this3.handleItemMouseBlur,
+          onFocus: _this3.handleItemMouseFocus,
+          onClick: _this3.handleClick,
+          onKeydown: _this3.handleKeyDown,
+          originalItemNeeded: _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);
+        },
+        "keydown": this.handleKeyDown
+      },
+      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);
+      },
+      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-owns": this.currentOpened ? getDOMElementId(this.$props.menuGuid, itemId) : undefined,
+      ref: setRef(this, 'kendoAnchor', this._anchor),
+      key: "0"
+    }, [this.contentRender ? renderContent.call(this) : renderMenuItemLink.call(this), renderPopupIfOpened.call(this)]);
+  },
+  methods: {
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', event);
+    },
+    handleItemMouseOver: function handleItemMouseOver(event) {
+      this.$emit('mouseover', event);
+    },
+    handleItemMouseLeave: function handleItemMouseLeave(event) {
+      this.$emit('mouseleave', event);
+    },
+    handleItemMouseBlur: function handleItemMouseBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleItemMouseFocus: function handleItemMouseFocus(event) {
+      this.$emit('focus', 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) {
+      return this.$props.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();
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var MenuItemInternal = MenuItemInternalVue2;
+export { MenuItemInternal, MenuItemInternalVue2 };

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

@@ -0,0 +1,49 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../../additionalTypes';
+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 Vue2type, MenuItemInternalsListMethods, MenuItemInternalsListData, MenuItemInternalsListComputed, MenuItemInternalsListState {
+}
+/**
+ * @hidden
+ */
+declare let MenuItemInternalsListVue2: ComponentOptions<MenuItemInternalsListAll, DefaultData<MenuItemInternalsListData>, DefaultMethods<MenuItemInternalsListAll>, MenuItemInternalsListComputed, RecordPropsDefinition<MenuItemInternalsListProps>>;
+/**
+ * @hidden
+ */
+declare const MenuItemInternalsList: DefineComponent<MenuItemInternalsListProps, any, MenuItemInternalsListData, MenuItemInternalsListComputed, MenuItemInternalsListMethods, {}, {}, {}, string, MenuItemInternalsListProps, MenuItemInternalsListProps, {}>;
+export { MenuItemInternalsList, MenuItemInternalsListVue2 };