From bc70f24f153e12e0b0125a355b2091d47e28f541 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:58:36 +0300 Subject: [PATCH] Refactor #3907 - For PanelMenu --- api-generator/components/panelmenu.js | 6 ++ components/lib/panelmenu/PanelMenu.d.ts | 116 +++++++++++++++++++++ components/lib/panelmenu/PanelMenu.vue | 38 ++++--- components/lib/panelmenu/PanelMenuList.vue | 3 + components/lib/panelmenu/PanelMenuSub.vue | 28 ++--- 5 files changed, 166 insertions(+), 25 deletions(-) diff --git a/api-generator/components/panelmenu.js b/api-generator/components/panelmenu.js index d15581799..b5711eb58 100644 --- a/api-generator/components/panelmenu.js +++ b/api-generator/components/panelmenu.js @@ -16,6 +16,12 @@ const PanelMenuProps = [ 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/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts index 6785b8abc..e30a959e8 100755 --- a/components/lib/panelmenu/PanelMenu.d.ts +++ b/components/lib/panelmenu/PanelMenu.d.ts @@ -11,6 +11,117 @@ import { VNode } from 'vue'; import { MenuItem } from '../menuitem'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttributes | ((options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface PanelMenuPassThroughMethodOptions { + props: PanelMenuProps; + state: PanelMenuState; +} + +/** + * Custom passthrough(pt) options. + * @see {@link PanelMenuProps.pt} + */ +export interface PanelMenuPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the panel's DOM element. + */ + panel?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the header's DOM element. + */ + header?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the header content's DOM element. + */ + headerContent?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the header action's DOM element. + */ + headerAction?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the header icon's DOM element. + */ + headerIcon?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the submenuIcon's DOM element. + */ + submenuIcon?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the header label's DOM element. + */ + headerLabel?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the submenu icon's DOM element. + */ + submenuicon?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the toggleable content's DOM element. + */ + toggleableContent?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the menu content's DOM element. + */ + menuContent?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the list's DOM element. + */ + menu?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the list item's DOM element. + */ + menuitem?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the action's DOM element. + */ + action?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the icon's DOM element. + */ + icon?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the label's DOM element. + */ + label?: PanelMenuPassThroughOptionType; + /** + * Uses to pass attributes to the separator's DOM element. + */ + separator?: PanelMenuPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface PanelMenuPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in PanelMenu component. + */ +export interface PanelMenuState { + /** + * Current id state as a string. + */ + id: string; + /** + * Active item path. + * @type {MenuItem} + */ + activeItem: MenuItem[]; +} + /** * Custom expanded keys metadata. * @see {@link PanelMenuProps.expandedKeys} @@ -64,6 +175,11 @@ export interface PanelMenuProps { * Index of the element in tabbing order. */ tabindex?: number | string | undefined; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {PanelMenuPassThroughOptions} + */ + pt?: PanelMenuPassThroughOptions; } /** diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue index 63e913660..66342c3d9 100644 --- a/components/lib/panelmenu/PanelMenu.vue +++ b/components/lib/panelmenu/PanelMenu.vue @@ -1,7 +1,7 @@