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

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

@@ -0,0 +1,152 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { MenuItemInternal } from './MenuItemInternal.js';
+import { getDOMElementId } from './../utils/misc.js';
+/**
+ * @hidden
+ */
+
+var MenuItemInternalsListVue2 = {
+  name: 'KendoMenuItemInternalsList',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'mouseover': null,
+    'mouseleave': null,
+    'blur': null,
+    'focus': null,
+    'click': null,
+    'mousedown': null
+  },
+  props: {
+    items: Array,
+    parentItemId: {
+      type: String,
+      default: undefined
+    },
+    focusedItemId: String,
+    lastItemIdToBeOpened: String,
+    tabbableItemId: String,
+    itemRender: [String, Object, Function],
+    linkRender: [String, Object, Function],
+    isMenuVertical: Boolean,
+    isDirectionRightToLeft: Boolean,
+    menuGuid: String,
+    originalItemNeeded: Function
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    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,
+              originalItemNeeded: this.handleOriginalItemNeeded
+            },
+            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,
+              "keydown": this.handleKeyDown,
+              "blur": this.handleItemMouseBlur,
+              "focus": this.handleItemMouseFocus,
+              "click": this.handleItemMouseClick
+            },
+            onMouseleave: this.handleItemMouseLeave,
+            onMousedown: this.handleItemMouseDown,
+            onKeydown: this.handleKeyDown,
+            onBlur: this.handleItemMouseBlur,
+            onFocus: this.handleItemMouseFocus,
+            onClick: this.handleItemMouseClick,
+            originalItemNeeded: 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
+    }, [renderChildItems.call(this)]);
+  },
+  methods: {
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', event);
+    },
+    handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
+      return this.$props.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();
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var MenuItemInternalsList = MenuItemInternalsListVue2;
+export { MenuItemInternalsList, MenuItemInternalsListVue2 };

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

@@ -0,0 +1,58 @@
+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;
+};
+/**
+ * The properties of the Kendo UI for Vue MenuItemLink component.
+ */
+export interface MenuItemLinkProps {
+    /**
+     * Specifies whether the MenuItemLink component is opened.
+     */
+    opened: boolean;
+    /**
+     * Specifies whether the MenuItemLink component is focused.
+     */
+    focused: 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 Vue2type, MenuItemLinkMethods, MenuItemLinkData, MenuItemLinkComputed, MenuItemLinkState {
+}
+/**
+ * @hidden
+ */
+declare let MenuItemLinkVue2: ComponentOptions<MenuItemLinkAll, DefaultData<MenuItemLinkData>, DefaultMethods<MenuItemLinkAll>, MenuItemLinkComputed, RecordPropsDefinition<MenuItemLinkProps>>;
+/**
+ * @hidden
+ */
+declare const MenuItemLink: DefineComponent<MenuItemLinkProps, any, MenuItemLinkData, MenuItemLinkComputed, MenuItemLinkMethods, {}, {}, {}, string, MenuItemLinkProps, MenuItemLinkProps, {}>;
+export { MenuItemLink, MenuItemLinkVue2 };

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

@@ -0,0 +1,67 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var MenuItemLinkVue2 = {
+  name: 'KendoMenuItemLink',
+  props: {
+    opened: Boolean,
+    focused: Boolean,
+    url: String
+  },
+  computed: {
+    menuItemClassName: function menuItemClassName() {
+      return {
+        'k-link': true,
+        'k-menu-link': true,
+        'k-active': this.$props.opened,
+        'k-focus': this.$props.focused
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+
+    if (this.$props.url) {
+      return h("a", {
+        "class": this.menuItemClassName,
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation",
+          href: this.$props.url,
+          tabindex: -1
+        },
+        href: this.$props.url,
+        tabindex: -1
+      }, [defaultSlot]);
+    } else {
+      return h("span", {
+        "class": this.menuItemClassName,
+        role: "presentation",
+        attrs: this.v3 ? undefined : {
+          role: "presentation"
+        }
+      }, [defaultSlot]);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var MenuItemLink = MenuItemLinkVue2;
+export { MenuItemLink, MenuItemLinkVue2 };

package/dist/esm/menu/consts.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @hidden
+ */
+export declare const POPUP_SETTINGS_RTL: {
+    downward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+    leftward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+};
+/**
+ * @hidden
+ */
+export declare const POPUP_SETTINGS: {
+    downward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+    rightward: {
+        anchorAlign: {
+            vertical: string;
+            horizontal: string;
+        };
+        popupAlign: any;
+        collision: {
+            vertical: string;
+            horizontal: string;
+        };
+    };
+};

package/dist/esm/menu/consts.js

@@ -0,0 +1,70 @@
+/**
+ * @hidden
+ */
+var POPUP_ALIGN = {
+    vertical: 'top',
+    horizontal: 'left'
+};
+/**
+ * @hidden
+ */
+var POPUP_ALIGN_RTL = {
+    vertical: 'top',
+    horizontal: 'right'
+};
+/**
+ * @hidden
+ */
+var VERTICAL_COLLISION = {
+    vertical: 'flip',
+    horizontal: 'fit'
+};
+/**
+ * @hidden
+ */
+var HORIZONTAL_COLLISION = {
+    vertical: 'fit',
+    horizontal: 'flip'
+};
+/**
+ * @hidden
+ */
+export var POPUP_SETTINGS_RTL = {
+    downward: {
+        anchorAlign: {
+            vertical: 'bottom',
+            horizontal: 'right'
+        },
+        popupAlign: POPUP_ALIGN_RTL,
+        collision: VERTICAL_COLLISION
+    },
+    leftward: {
+        anchorAlign: {
+            vertical: 'top',
+            horizontal: 'left'
+        },
+        popupAlign: POPUP_ALIGN_RTL,
+        collision: HORIZONTAL_COLLISION
+    }
+};
+/**
+ * @hidden
+ */
+export var POPUP_SETTINGS = {
+    downward: {
+        anchorAlign: {
+            vertical: 'bottom',
+            horizontal: 'left'
+        },
+        popupAlign: POPUP_ALIGN,
+        collision: VERTICAL_COLLISION
+    },
+    rightward: {
+        anchorAlign: {
+            vertical: 'top',
+            horizontal: 'right'
+        },
+        popupAlign: POPUP_ALIGN,
+        collision: HORIZONTAL_COLLISION
+    }
+};

package/dist/esm/menu/events.d.ts

@@ -0,0 +1,14 @@
+import { MenuItemModel } from './models/MenuItemModel';
+/**
+ * The arguments for the `select` event of the Menu. If the item has a URL and the event is prevented, navigation to the URL does not occur.
+ */
+export interface MenuSelectEvent {
+    /**
+     * The id of selected item. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
+     */
+    itemId: string;
+    /**
+     * The selected item.
+     */
+    item: MenuItemModel;
+}

package/dist/esm/menu/events.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

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

@@ -0,0 +1,45 @@
+/**
+ * An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
+ */
+export interface BaseMenuItem {
+    /**
+     * Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
+     */
+    text?: string;
+    /**
+     * Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
+     */
+    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)).
+     */
+    icon?: string;
+    /**
+     * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
+     */
+    disabled?: boolean;
+    /**
+     * The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
+     */
+    cssClass?: string;
+    /**
+     * The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
+     */
+    cssStyle?: any;
+    /**
+     * A Vue functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
+     */
+    render?: any;
+    /**
+     * A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
+     */
+    linkRender?: any;
+    /**
+     * A Vue functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
+     */
+    contentRender?: any;
+    /**
+     * Represents any additional data that is associated with the Menu item.
+     */
+    data?: any;
+}

package/dist/esm/menu/models/BaseMenuItem.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/menu/models/MenuItemModel.d.ts

@@ -0,0 +1,19 @@
+import { BaseMenuItem } from './BaseMenuItem';
+/**
+ * The interface for describing items that can be passed to the `items` property of the Menu as an alternative to passing them as children.
+ */
+export interface MenuItemModel extends BaseMenuItem {
+    /**
+     * Specifies the children of the item.
+     */
+    items?: MenuItemModel[];
+}
+/**
+ * @hidden
+ */
+export interface MenuItemInternalModel extends BaseMenuItem {
+    id: string;
+    items: MenuItemInternalModel[];
+    contentParentItemId?: string;
+    isLastFromSiblings: boolean;
+}

package/dist/esm/menu/models/MenuItemModel.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/menu/utils/DirectionHolder.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export declare class DirectionHolder {
+    private phase;
+    private previousIsDirectionRightToLeft?;
+    private isDirectionRightToLeft?;
+    getIsDirectionRightToLeft(): boolean;
+    setIsDirectionRightToLeft(value: boolean): void;
+    hasDirectionChanged(): boolean;
+}

package/dist/esm/menu/utils/DirectionHolder.js

@@ -0,0 +1,24 @@
+/**
+ * @hidden
+ */
+var DirectionHolder = /** @class */ (function () {
+    function DirectionHolder() {
+        // The phase changes in the following sequence:
+        // NotInitialized -> Initialized -> NewValueReceived.
+        this.phase = 'Initialized';
+    }
+    DirectionHolder.prototype.getIsDirectionRightToLeft = function () {
+        return this.isDirectionRightToLeft;
+    };
+    DirectionHolder.prototype.setIsDirectionRightToLeft = function (value) {
+        this.phase = this.phase === 'NotInitialized' ? 'Initialized' : 'NewValueReceived';
+        this.previousIsDirectionRightToLeft = this.isDirectionRightToLeft;
+        this.isDirectionRightToLeft = value;
+    };
+    DirectionHolder.prototype.hasDirectionChanged = function () {
+        return this.phase === 'NewValueReceived' ?
+            this.previousIsDirectionRightToLeft !== this.isDirectionRightToLeft : false;
+    };
+    return DirectionHolder;
+}());
+export { DirectionHolder };

package/dist/esm/menu/utils/MouseOverHandler.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @hidden
+ */
+export declare class MouseOverHandler {
+    private openOnClick;
+    private resetMenu;
+    private openItem;
+    private isMouseOverEnabled;
+    private mouseDown;
+    constructor(openOnClick: boolean | undefined, resetMenu: any, openItem: any);
+    set OpenOnClick(value: boolean | undefined);
+    handleItemSelectedViaKeyboard(): void;
+    get IsMouseOverEnabled(): boolean;
+    handleItemMouseDown(): void;
+    handleItemFocus(): void;
+    handleItemClick(itemId: string, clickedItemIsWithDefaultClose: boolean): void;
+}

package/dist/esm/menu/utils/MouseOverHandler.js

@@ -0,0 +1,64 @@
+/**
+ * @hidden
+ */
+var MouseOverHandler = /** @class */ (function () {
+    function MouseOverHandler(openOnClick, resetMenu, openItem) {
+        this.openOnClick = openOnClick;
+        this.resetMenu = resetMenu;
+        this.openItem = openItem;
+        this.openOnClick = openOnClick;
+        this.isMouseOverEnabled = openOnClick ? false : true;
+    }
+    Object.defineProperty(MouseOverHandler.prototype, "OpenOnClick", {
+        set: function (value) {
+            if (Boolean(value) !== Boolean(this.openOnClick)) {
+                this.mouseDown = false;
+                this.isMouseOverEnabled = value ? false : true;
+            }
+            this.openOnClick = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MouseOverHandler.prototype.handleItemSelectedViaKeyboard = function () {
+        if (this.openOnClick) {
+            this.isMouseOverEnabled = false;
+            this.resetMenu();
+        }
+    };
+    Object.defineProperty(MouseOverHandler.prototype, "IsMouseOverEnabled", {
+        get: function () {
+            return this.isMouseOverEnabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MouseOverHandler.prototype.handleItemMouseDown = function () {
+        this.mouseDown = true;
+    };
+    MouseOverHandler.prototype.handleItemFocus = function () {
+        // Keep opening on mouse over upon tabbing
+        // and keyboard navigation. However, discard the event
+        // upon click because a cycle occurs and the item does not open.
+        if (this.openOnClick && !this.mouseDown) {
+            this.isMouseOverEnabled = true;
+        }
+        this.mouseDown = false;
+    };
+    MouseOverHandler.prototype.handleItemClick = function (itemId, clickedItemIsWithDefaultClose) {
+        if (this.openOnClick) {
+            if (this.isMouseOverEnabled) {
+                if (clickedItemIsWithDefaultClose) {
+                    this.isMouseOverEnabled = false;
+                    this.resetMenu();
+                }
+            }
+            else {
+                this.isMouseOverEnabled = true;
+                this.openItem(itemId);
+            }
+        }
+    };
+    return MouseOverHandler;
+}());
+export { MouseOverHandler };

package/dist/esm/menu/utils/getNewItemIdUponKeyboardNavigation.d.ts

@@ -0,0 +1,7 @@
+import { MenuItemInternalModel } from '../models/MenuItemModel';
+/**
+ * @hidden
+ * Returns the `itemId` (string) for applicable key codes even when the id has not changed.
+ * For key codes that are not applicable, returns `undefined`.
+ */
+export declare function getNewItemIdUponKeyboardNavigation(sourceItems: MenuItemInternalModel[], sourceItemId: string, keyCode: number, key: string, isMenuVertical?: boolean, isDirectionRightToLeft?: boolean): string;