@progress/kendo-vue-layout 2.5.1 → 2.5.2

package/dist/npm/menu/components/Menu.js

@@ -0,0 +1,320 @@
+"use strict";
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuVue3 = exports.Menu = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var kendo_vue_common_2 = require("@progress/kendo-vue-common");
+
+var itemsIdsUtils_1 = require("../utils/itemsIdsUtils");
+
+var prepareInputItemsForInternalWork_1 = require("../utils/prepareInputItemsForInternalWork");
+
+var getNewItemIdUponKeyboardNavigation_1 = require("../utils/getNewItemIdUponKeyboardNavigation");
+
+var hoverDelay_1 = require("../utils/hoverDelay");
+
+var MenuItemInternalsList_1 = require("./MenuItemInternalsList");
+
+var DirectionHolder_1 = require("../utils/DirectionHolder");
+
+var MouseOverHandler_1 = require("../utils/MouseOverHandler");
+
+var package_metadata_1 = require("../../package-metadata"); // tslint:enable:max-line-length
+
+
+var Menu = {
+  name: 'KendoMenu',
+  props: {
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    items: Array,
+    dir: String,
+    hoverOpenDelay: Number,
+    hoverCloseDelay: Number,
+    openOnClick: Boolean,
+    itemRender: [String, Object, Function],
+    linkRender: [String, Object, Function],
+    customCloseItemIds: Array
+  },
+  created: function created() {
+    kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
+    this.mouseOverHandler = new MouseOverHandler_1.MouseOverHandler(this.$props.openOnClick, this.reset, this.onItemMouseOver); // private itemHoverRequest: any;
+    // private itemLeaveRequest: any;
+    // private menuWrapperEl: any;
+
+    this.guid = kendo_vue_common_2.guid();
+    this.directionHolder = new DirectionHolder_1.DirectionHolder();
+    this.inputItems = [];
+    this.currentItems = []; // private mouseOverHandler: MouseOverHandler;
+  },
+  mounted: function mounted() {
+    this.isFirstRender = false;
+  },
+  updated: function updated() {
+    // Reset the Menu upon big UI changes
+    // to avoid misleading the user and to
+    // keep the component consistent.
+    // if (Boolean(prevProps.vertical) !== Boolean(this.$props.vertical) ||
+    //     this.directionHolder.hasDirectionChanged()) {
+    //     this.reset();
+    // }
+    this.mouseOverHandler.OpenOnClick = this.$props.openOnClick;
+  },
+  destroyed: function destroyed() {
+    this.clearItemHoverAndLeaveRequestsIfApplicable();
+  },
+  data: function data() {
+    return {
+      focusedItemId: itemsIdsUtils_1.EMPTY_ID,
+      hoveredItemId: itemsIdsUtils_1.EMPTY_ID,
+      tabbableItemId: itemsIdsUtils_1.ZERO_LEVEL_ZERO_ITEM_ID,
+      isFirstRender: true
+    };
+  },
+  computed: {
+    menuClassName: function menuClassName() {
+      return {
+        'k-widget': true,
+        'k-reset': true,
+        'k-header': true,
+        'k-menu': true,
+        'k-menu-horizontal': !this.$props.vertical,
+        'k-menu-vertical': this.$props.vertical
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    this.prepareItems();
+
+    if (!this.isFirstRender) {
+      this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());
+    }
+
+    var lastItemIdToBeOpened = this.hoveredItemId ? this.hoveredItemId : this.focusedItemId ? itemsIdsUtils_1.getDirectParentId(this.focusedItemId) : itemsIdsUtils_1.EMPTY_ID;
+    return h("div", {
+      "class": this.getMenuWrapperClassName(),
+      ref: function ref(el) {
+        return _this.menuWrapperEl = el;
+      }
+    }, [// @ts-ignore
+    h(MenuItemInternalsList_1.MenuItemInternalsList, {
+      "class": this.menuClassName,
+      "aria-orientation": this.$props.vertical ? 'vertical' : undefined,
+      attrs: this.v3 ? undefined : {
+        "aria-orientation": this.$props.vertical ? 'vertical' : undefined,
+        items: this.currentItems,
+        isMenuVertical: this.$props.vertical,
+        isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(),
+        focusedItemId: this.focusedItemId,
+        lastItemIdToBeOpened: lastItemIdToBeOpened,
+        tabbableItemId: this.tabbableItemId,
+        itemRender: kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this)),
+        linkRender: kendo_vue_common_1.templateRendering.call(this, this.$props.linkRender, kendo_vue_common_1.getListeners.call(this)),
+        menuGuid: this.guid,
+        originalItemNeeded: this.getInputItem
+      },
+      items: this.currentItems,
+      isMenuVertical: this.$props.vertical,
+      isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(),
+      focusedItemId: this.focusedItemId,
+      lastItemIdToBeOpened: lastItemIdToBeOpened,
+      tabbableItemId: this.tabbableItemId,
+      itemRender: kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this)),
+      linkRender: kendo_vue_common_1.templateRendering.call(this, this.$props.linkRender, kendo_vue_common_1.getListeners.call(this)),
+      menuGuid: this.guid,
+      onMouseleave: this.onItemMouseLeave,
+      on: this.v3 ? undefined : {
+        "mouseleave": this.onItemMouseLeave,
+        "mouseover": this.onItemMouseOver,
+        "mousedown": this.onItemMouseDown,
+        "keydown": this.onKeyDown,
+        "focus": this.onItemFocus,
+        "click": this.onItemClick,
+        "blur": this.onItemBlur
+      },
+      onMouseover: this.onItemMouseOver,
+      onMousedown: this.onItemMouseDown,
+      onKeydown: this.onKeyDown,
+      onFocus: this.onItemFocus,
+      onClick: this.onItemClick,
+      onBlur: this.onItemBlur,
+      originalItemNeeded: this.getInputItem
+    })]);
+  },
+  methods: {
+    reset: function reset() {
+      this.clearItemHoverAndLeaveRequestsIfApplicable();
+      this.focusedItemId = itemsIdsUtils_1.EMPTY_ID;
+      this.hoveredItemId = itemsIdsUtils_1.EMPTY_ID;
+      this.tabbableItemId = itemsIdsUtils_1.ZERO_LEVEL_ZERO_ITEM_ID;
+    },
+    onKeyDown: function onKeyDown(event) {
+      // The focusedItemId may be empty when contentRender is used.
+      // For example, content with input.
+      if (this.focusedItemId !== itemsIdsUtils_1.EMPTY_ID) {
+        var currentItem = itemsIdsUtils_1.getItemById(this.focusedItemId, this.currentItems);
+        var newItemId = getNewItemIdUponKeyboardNavigation_1.getNewItemIdUponKeyboardNavigation(this.currentItems, currentItem.id, event.keyCode, event.key, this.$props.vertical, this.directionHolder.getIsDirectionRightToLeft());
+
+        if (currentItem.id !== newItemId) {
+          event.preventDefault();
+          this.setFocusedItemId(newItemId);
+        }
+
+        if ((event.keyCode === kendo_vue_common_2.Keys.enter || event.keyCode === kendo_vue_common_2.Keys.space) && !currentItem.disabled) {
+          this.mouseOverHandler.handleItemSelectedViaKeyboard();
+          this.dispatchSelectEventIfWired(event, currentItem.id);
+
+          if (!event.defaultPrevented && currentItem.items.length === 0 && currentItem.url) {
+            window.location.assign(currentItem.url);
+          }
+        }
+      }
+    },
+    onItemMouseOver: function onItemMouseOver(itemId) {
+      if (this.mouseOverHandler.IsMouseOverEnabled) {
+        // The `over` event can get fired even without actually leaving the item.
+        // For example, move the mouse little by little over the item content.
+        this.clearItemHoverAndLeaveRequestsIfApplicable();
+        var that_1 = this;
+        this.itemHoverRequest = window.setTimeout(function () {
+          that_1.setHoveredItemId(itemId);
+          that_1.itemHoverRequest = null;
+        }, hoverDelay_1.getHoverOpenDelay(__assign({}, this.$props)));
+      }
+    },
+    onItemMouseLeave: function onItemMouseLeave(itemId) {
+      if (this.mouseOverHandler.IsMouseOverEnabled && this.isItemWithDefaultClose(itemId)) {
+        // Both the `leave` and `hover` requests are cleared
+        // to be defensive and consistent with the `over` handler.
+        this.clearItemHoverAndLeaveRequestsIfApplicable();
+        var that_2 = this;
+        this.itemLeaveRequest = window.setTimeout(function () {
+          that_2.setHoveredItemId(itemsIdsUtils_1.EMPTY_ID);
+          that_2.itemLeaveRequest = null;
+        }, hoverDelay_1.getHoverCloseDelay(__assign({}, this.$props)));
+      }
+    },
+    onItemMouseDown: function onItemMouseDown() {
+      this.mouseOverHandler.handleItemMouseDown();
+    },
+    onItemFocus: function onItemFocus(itemId) {
+      this.setFocusedItemId(itemId);
+      this.mouseOverHandler.handleItemFocus();
+    },
+    onItemClick: function onItemClick(event, itemId) {
+      var item = itemsIdsUtils_1.getItemById(itemId, this.currentItems);
+
+      if (!item.disabled) {
+        this.setFocusedItemId(itemId);
+        this.mouseOverHandler.handleItemClick(itemId, this.isItemWithDefaultClose(itemId));
+        this.dispatchSelectEventIfWired(event, itemId);
+
+        if (!event.defaultPrevented && item.url) {
+          window.location.assign(item.url);
+        }
+      }
+    },
+    onItemBlur: function onItemBlur(itemId) {
+      if (this.isItemWithDefaultClose(itemId)) {
+        this.setFocusedItemId(itemsIdsUtils_1.EMPTY_ID);
+      }
+    },
+    getInputItem: function getInputItem(itemId) {
+      return itemsIdsUtils_1.getItemById(itemId, this.inputItems);
+    },
+    setFocusedItemId: function setFocusedItemId(focusedItemId) {
+      var tabbableItemId = focusedItemId === itemsIdsUtils_1.EMPTY_ID ? this.tabbableItemId : itemsIdsUtils_1.getRootParentId(focusedItemId);
+      var hoveredItemId = focusedItemId === itemsIdsUtils_1.EMPTY_ID || itemsIdsUtils_1.isIdEmptyOrZeroLevel(this.hoveredItemId) && itemsIdsUtils_1.isIdEmptyOrZeroLevel(focusedItemId) ? this.hoveredItemId : itemsIdsUtils_1.EMPTY_ID;
+      this.hoveredItemId = hoveredItemId;
+      this.focusedItemId = focusedItemId;
+      this.tabbableItemId = tabbableItemId;
+    },
+    setHoveredItemId: function setHoveredItemId(hoveredItemId) {
+      if (itemsIdsUtils_1.isIdEmptyOrZeroLevel(hoveredItemId) && itemsIdsUtils_1.isIdEmptyOrZeroLevel(this.focusedItemId)) {
+        this.hoveredItemId = hoveredItemId;
+      } else {
+        this.hoveredItemId = hoveredItemId;
+        this.focusedItemId = itemsIdsUtils_1.EMPTY_ID;
+        this.tabbableItemId = itemsIdsUtils_1.ZERO_LEVEL_ZERO_ITEM_ID;
+      }
+    },
+    getMenuWrapperClassName: function getMenuWrapperClassName() {
+      return {
+        'k-rtl': this.directionHolder.getIsDirectionRightToLeft()
+      };
+    },
+    clearItemHoverAndLeaveRequestsIfApplicable: function clearItemHoverAndLeaveRequestsIfApplicable() {
+      if (this.itemHoverRequest) {
+        clearTimeout(this.itemHoverRequest);
+        this.itemHoverRequest = null;
+      }
+
+      if (this.itemLeaveRequest) {
+        clearTimeout(this.itemLeaveRequest);
+        this.itemLeaveRequest = null;
+      }
+    },
+    isItemWithDefaultClose: function isItemWithDefaultClose(itemId) {
+      return !this.$props.customCloseItemIds || this.$props.customCloseItemIds.indexOf(itemId) === -1;
+    },
+    checkIsDirectionRightToLeft: function checkIsDirectionRightToLeft() {
+      return this.$props.dir !== undefined ? this.$props.dir === 'rtl' : this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === 'rtl';
+    },
+    prepareItems: function prepareItems() {
+      var _a = prepareInputItemsForInternalWork_1.prepareInputItemsForInternalWork.call(this, this.$props.items),
+          items = _a.items,
+          inputItems = _a.inputItems;
+
+      this.currentItems = items;
+      this.inputItems = inputItems;
+    },
+    dispatchSelectEventIfWired: function dispatchSelectEventIfWired(event, itemId) {
+      this.$emit('select', {
+        event: event,
+        compontent: this,
+        item: this.getInputItem(itemId),
+        itemId: itemId
+      });
+    }
+  }
+};
+exports.Menu = Menu;
+var MenuVue3 = Menu;
+exports.MenuVue3 = MenuVue3;

package/dist/npm/menu/components/MenuItemArrow.d.ts

@@ -0,0 +1,65 @@
+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 MenuItemArrow component.
+ */
+export interface MenuItemArrowProps {
+    /**
+     * Sets the item id of the MenuItemArrow component.
+     */
+    itemId: string;
+    /**
+     * Sets the direction of the MenuItemArrow component.
+     */
+    dir: 'ltr' | 'rtl' | string;
+    /**
+     * Specifies whether the Menu which holds the MenuItemArrow component is vertical.
+     */
+    verticalMenu?: boolean;
+}
+/**
+ * @hidden
+ */
+export declare const downArrowClass = "k-i-arrow-60-down";
+/**
+ * @hidden
+ */
+export declare const rightArrowClass = "k-i-arrow-60-right";
+/**
+ * @hidden
+ */
+export declare const leftArrowClass = "k-i-arrow-60-left";
+/**
+ * @hidden
+ */
+export interface MenuItemArrowState {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemArrowComputed {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemArrowMethods {
+    [key: string]: any;
+    getArrowClassName: () => object;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemArrowData {
+}
+/**
+ * @hidden
+ */
+export interface MenuItemArrowAll extends Vue, MenuItemArrowMethods, MenuItemArrowData, MenuItemArrowComputed, MenuItemArrowState {
+}
+declare let MenuItemArrow: ComponentOptions<MenuItemArrowAll, DefaultData<MenuItemArrowData>, DefaultMethods<MenuItemArrowAll>, MenuItemArrowComputed, RecordPropsDefinition<MenuItemArrowProps>>;
+declare const MenuItemArrowVue3: DefineComponent<MenuItemArrowProps, any, MenuItemArrowData, MenuItemArrowComputed, MenuItemArrowMethods, {}, {}, {}, string, MenuItemArrowProps, MenuItemArrowProps, {}>;
+export { MenuItemArrow, MenuItemArrowVue3 };

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuItemArrowVue3 = exports.MenuItemArrow = exports.leftArrowClass = exports.rightArrowClass = exports.downArrowClass = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var misc_1 = require("../utils/misc");
+/**
+ * @hidden
+ */
+
+
+exports.downArrowClass = 'k-i-arrow-60-down';
+/**
+ * @hidden
+ */
+
+exports.rightArrowClass = 'k-i-arrow-60-right';
+/**
+ * @hidden
+ */
+
+exports.leftArrowClass = 'k-i-arrow-60-left'; // tslint:enable:max-line-length
+
+var MenuItemArrow = {
+  name: 'KendoMenuItemArrow',
+  props: {
+    itemId: String,
+    dir: String,
+    verticalMenu: Boolean
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("span", {
+      "class": this.getArrowClassName(),
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation"
+      }
+    });
+  },
+  methods: {
+    getArrowClassName: function getArrowClassName() {
+      var _a;
+
+      var childrenPosition = misc_1.getChildrenPosition(this.$props.itemId, this.$props.verticalMenu === true, this.$props.dir === 'rtl');
+      return _a = {
+        'k-icon': true,
+        'k-menu-expand-arrow': true
+      }, _a[exports.downArrowClass] = childrenPosition === 'downward', _a[exports.rightArrowClass] = childrenPosition === 'rightward', _a[exports.leftArrowClass] = childrenPosition === 'leftward', _a;
+    }
+  }
+};
+exports.MenuItemArrow = MenuItemArrow;
+var MenuItemArrowVue3 = MenuItemArrow;
+exports.MenuItemArrowVue3 = MenuItemArrowVue3;

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

@@ -0,0 +1,55 @@
+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 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;
+    popupClassName: string;
+    menuItemClassName: object;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalData {
+    opened: boolean;
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalAll extends Vue, MenuItemInternalMethods, MenuItemInternalData, MenuItemInternalComputed, MenuItemInternalState {
+}
+declare let MenuItemInternal: ComponentOptions<MenuItemInternalAll, DefaultData<MenuItemInternalData>, DefaultMethods<MenuItemInternalAll>, MenuItemInternalComputed, RecordPropsDefinition<MenuItemInternalProps>>;
+declare const MenuItemInternalVue3: DefineComponent<MenuItemInternalProps, any, MenuItemInternalData, MenuItemInternalComputed, MenuItemInternalMethods, {}, {}, {}, string, MenuItemInternalProps, MenuItemInternalProps, {}>;
+export { MenuItemInternal, MenuItemInternalVue3 };