From 3ac7e6ec7363abee1b9d48cd21d7fc8ad532e1fd 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:59:21 +0300 Subject: [PATCH] Refactor #3907 - For TieredMenu --- api-generator/components/tieredmenu.js | 6 ++ components/lib/tieredmenu/TieredMenu.d.ts | 113 ++++++++++++++++++++ components/lib/tieredmenu/TieredMenu.vue | 5 +- components/lib/tieredmenu/TieredMenuSub.vue | 33 ++++-- 4 files changed, 145 insertions(+), 12 deletions(-) diff --git a/api-generator/components/tieredmenu.js b/api-generator/components/tieredmenu.js index bbe629896..85df8d475 100644 --- a/api-generator/components/tieredmenu.js +++ b/api-generator/components/tieredmenu.js @@ -34,6 +34,12 @@ const TieredMenuProps = [ 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/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts index a8c124c1e..09f34fa37 100755 --- a/components/lib/tieredmenu/TieredMenu.d.ts +++ b/components/lib/tieredmenu/TieredMenu.d.ts @@ -11,6 +11,114 @@ import { VNode } from 'vue'; import { MenuItem } from '../menuitem'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type TieredMenuPassThroughOptionType = TieredMenuPassThroughAttributes | ((options: TieredMenuPassThroughMethodOptions) => TieredMenuPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface TieredMenuPassThroughMethodOptions { + props: TieredMenuProps; + state: TieredMenuState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link TieredMenuProps.pt} + */ +export interface TieredMenuPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the list's DOM element. + */ + menu?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the list item's DOM element. + */ + menuitem?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the action's DOM element. + */ + action?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the icon's DOM element. + */ + icon?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the submenu icon's DOM element. + */ + submenuIcon?: TieredMenuPassThroughOptionType; + /** + * Uses to pass attributes to the separator's DOM element. + */ + separator?: TieredMenuPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface TieredMenuPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines focused item info + */ +export interface TieredMenuFocusedItemInfo { + /** + * Active item index + */ + index: number; + /** + * Active item level + */ + level: number; + /** + * Parent key info + */ + parentKey: string; +} + +/** + * Defines current inline state in TieredMenu component. + */ +export interface TieredMenuState { + /** + * Current id state as a string. + */ + id: string; + /** + * Current focus state as a boolean. + * @defaultValue false + */ + focused: boolean; + /** + * Current focused item info. + * @type {TieredMenuFocusedItemInfo} + */ + focusedItemInfo: TieredMenuFocusedItemInfo; + /** + * Active item path. + * @type {TieredMenuFocusedItemInfo} + */ + activeItemPath: TieredMenuFocusedItemInfo[]; + /** + * Current visible state as a boolean. + * @defaultValue true + */ + visible: boolean; +} + /** * Defines valid properties in TieredMenuMenu component. */ @@ -61,6 +169,11 @@ export interface TieredMenuProps { * Identifier of the underlying menu element. */ 'aria-labelledby'?: string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {TieredMenuPassThroughOptions} + */ + pt?: TieredMenuPassThroughOptions; } /** diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue index 552ddb0eb..bdbab3e7a 100755 --- a/components/lib/tieredmenu/TieredMenu.vue +++ b/components/lib/tieredmenu/TieredMenu.vue @@ -1,7 +1,7 @@