From f6c1efe79363e3ae65b25a3ee31eb46d4e0bcc02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Wed, 26 Apr 2023 12:57:55 +0300 Subject: [PATCH] Refactor #3907 - For MegaMenu --- api-generator/components/megamenu.js | 6 ++ components/lib/megamenu/MegaMenu.d.ts | 132 ++++++++++++++++++++++++ components/lib/megamenu/MegaMenu.vue | 9 +- components/lib/megamenu/MegaMenuSub.vue | 41 +++++--- 4 files changed, 170 insertions(+), 18 deletions(-) diff --git a/api-generator/components/megamenu.js b/api-generator/components/megamenu.js index aebfd29f2..f0f3a42ff 100644 --- a/api-generator/components/megamenu.js +++ b/api-generator/components/megamenu.js @@ -16,6 +16,12 @@ const MegaMenuProps = [ type: 'boolean', default: 'true', description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path." + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts index fe03044fd..754c73596 100755 --- a/components/lib/megamenu/MegaMenu.d.ts +++ b/components/lib/megamenu/MegaMenu.d.ts @@ -11,6 +11,133 @@ import { VNode } from 'vue'; import { MenuItem } from '../menuitem'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttributes | ((options: MegaMenuPassThroughMethodOptions) => MegaMenuPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface MegaMenuPassThroughMethodOptions { + props: MegaMenuProps; + state: MegaMenuState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link MegaMenuProps.pt} + */ +export interface MegaMenuPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the list's DOM element. + */ + menu?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the submenu header's DOM element. + */ + submenuHeader?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the list item's DOM element. + */ + menuitem?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the action's DOM element. + */ + action?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the icon's DOM element. + */ + icon?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the submenu icon's DOM element. + */ + submenuicon?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the panel's DOM element. + */ + panel?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the grid's DOM element. + */ + grid?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the column's DOM element. + */ + column?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the separator's DOM element. + */ + separator?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the start of the component. + */ + start?: MegaMenuPassThroughOptionType; + /** + * Uses to pass attributes to the end of the component. + */ + end?: MegaMenuPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface MegaMenuPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines focused item info + */ +export interface MegaMenuFocusedItemInfo { + /** + * Active item index + */ + index: number; + /** + * Active item level + */ + level: number; + /** + * Parent key info + */ + parentKey: string; +} + +/** + * Defines current inline state in MegaMenu component. + */ +export interface MegaMenuState { + /** + * Current id state as a string. + */ + id: string; + /** + * Current focus state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current focused item info. + * @type {MegaMenuFocusedItemInfo} + */ + focusedItemInfo: MegaMenuFocusedItemInfo; + /** + * Active item path. + * @type {MenuItem} + */ + activeItem: MenuItem; +} + /** * Defines valid properties in MegaMenu component. */ @@ -46,6 +173,11 @@ export interface MegaMenuProps { * Identifier of the underlying menu element. */ 'aria-labelledby'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {MegaMenuPassThroughOptions} + */ + pt?: MegaMenuPassThroughOptions; } /** diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue index cc47f2f08..c9fd0fc78 100755 --- a/components/lib/megamenu/MegaMenu.vue +++ b/components/lib/megamenu/MegaMenu.vue @@ -1,6 +1,6 @@