Refactor #3907 - options have changed as context

pull/3913/head
Tuğçe Küçükoğlu 2023-04-28 13:15:44 +03:00
parent 6005b67be7
commit 5aab120fe5
16 changed files with 75 additions and 24 deletions

View File

@ -20,7 +20,7 @@ export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAtt
export interface ContextMenuPassThroughMethodOptions {
props: ContextMenuProps;
state: ContextMenuState;
options: ContextMenuOptions;
context: ContextMenuContext;
}
/**
@ -129,7 +129,7 @@ export interface ContextMenuState {
/**
* Defines current options in ContextMenu component.
*/
export interface ContextMenuOptions {
export interface ContextMenuContext {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

View File

@ -149,7 +149,7 @@ export default {
},
getPTOptions(processedItem, key) {
return this.ptm(key, {
options: {
context: {
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

View File

@ -19,6 +19,7 @@ export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((op
export interface DockPassThroughMethodOptions {
props: DockProps;
state: DockState;
context: DockContext;
}
/**
@ -88,6 +89,17 @@ export interface DockState {
focusedOptionIndex: number;
}
/**
* Defines current options in Dock component.
*/
export interface DockContext {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false
*/
active: boolean;
}
/**
* Defines tooltip options
*/

View File

@ -25,9 +25,9 @@
:aria-disabled="disabled(processedItem)"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter(index)"
v-bind="ptm('menuitem')"
v-bind="getPTOptions(getItemId(index), 'menuitem')"
>
<div class="p-menuitem-content" v-bind="ptm('content')">
<div class="p-menuitem-content" v-bind="getPTOptions(getItemId(index), 'content')">
<template v-if="!templates['item']">
<router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
<a
@ -38,10 +38,10 @@
tabindex="-1"
aria-hidden="true"
@click="onItemActionClick($event, processedItem, navigate)"
v-bind="ptm('action')"
v-bind="getPTOptions(getItemId(index), 'action')"
>
<template v-if="!templates['icon']">
<span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="ptm('icon')"></span>
<span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem"></component>
</a>
@ -54,10 +54,10 @@
:target="processedItem.target"
tabindex="-1"
aria-hidden="true"
v-bind="ptm('action')"
v-bind="getPTOptions(getItemId(index), 'action')"
>
<template v-if="!templates['icon']">
<span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="ptm('icon')"></span>
<span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem"></component>
</a>
@ -138,9 +138,19 @@ export default {
getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
},
getPTOptions(id, key) {
return this.ptm(key, {
context: {
active: this.isItemActive(id)
}
});
},
isSameMenuItem(event) {
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
},
isItemActive(id) {
return id === this.focusedOptionIndex;
},
onListMouseLeave() {
this.currentIndex = -3;
},
@ -262,7 +272,7 @@ export default {
return [
'p-dock-item',
{
'p-focus': id === this.focusedOptionIndex,
'p-focus': this.isItemActive(id),
'p-disabled': this.disabled(item),
'p-dock-item-second-prev': this.currentIndex - 2 === index,
'p-dock-item-prev': this.currentIndex - 1 === index,

View File

@ -19,7 +19,7 @@ export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttribute
export interface MegaMenuPassThroughMethodOptions {
props: MegaMenuProps;
state: MegaMenuState;
options: MegaMenuOptions;
context: MegaMenuContext;
}
/**
@ -142,7 +142,7 @@ export interface MegaMenuState {
/**
* Defines current options in MegaMenu component.
*/
export interface MegaMenuOptions {
export interface MegaMenuContext {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

View File

@ -153,7 +153,7 @@ export default {
},
getPTOptions(processedItem, key) {
return this.ptm(key, {
options: {
context: {
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

View File

@ -19,6 +19,7 @@ export declare type MenuPassThroughOptionType = MenuPassThroughAttributes | ((op
export interface MenuPassThroughMethodOptions {
props: MenuProps;
state: MenuState;
context: MenuContext;
}
/**
@ -107,6 +108,17 @@ export interface MenuState {
selectedOptionIndex: number;
}
/**
* Defines current options in Menu component.
*/
export interface MenuContext {
/**
* Current focused state of menuitem as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/**
* Defines valid properties in Menu component.
*/

View File

@ -43,7 +43,7 @@ export default {
},
getPTOptions(key) {
return this.ptm(key, {
options: {
context: {
focused: this.isItemFocused()
}
});

View File

@ -19,7 +19,7 @@ export declare type MenubarPassThroughOptionType = MenubarPassThroughAttributes
export interface MenubarPassThroughMethodOptions {
props: MenubarProps;
state: MenubarState;
options: MenubarOptions;
context: MenubarContext;
}
/**
@ -139,7 +139,7 @@ export interface MenubarState {
/**
* Defines current options in Menubar component.
*/
export interface MenubarOptions {
export interface MenubarContext {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

View File

@ -144,7 +144,7 @@ export default {
},
getPTOptions(processedItem, key) {
return this.ptm(key, {
options: {
context: {
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

View File

@ -19,6 +19,7 @@ export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttribu
export interface PanelMenuPassThroughMethodOptions {
props: PanelMenuProps;
state: PanelMenuState;
context: PanelMenuContext;
}
/**
@ -122,6 +123,22 @@ export interface PanelMenuState {
activeItem: MenuItem[];
}
/**
* Defines current options in PanelMenu component.
*/
export interface PanelMenuContext {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false
*/
active: boolean;
/**
* Current focused state of menuitem as a boolean.
* @defaultValue false
*/
focused: boolean;
}
/**
* Custom expanded keys metadata.
* @see {@link PanelMenuProps.expandedKeys}

View File

@ -124,7 +124,7 @@ export default {
},
getPTOptions(processedItem, key) {
return this.ptm(key, {
options: {
context: {
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}

View File

@ -19,7 +19,7 @@ export declare type TabMenuPassThroughOptionType = TabMenuPassThroughAttributes
export interface TabMenuPassThroughMethodOptions {
props: TabMenuProps;
state: TabMenuState;
options: TabMenuOptions;
context: TabMenuContext;
}
/**
@ -78,7 +78,7 @@ export interface TabMenuState {
/**
* Defines current options in TabMenu component.
*/
export interface TabMenuOptions {
export interface TabMenuContext {
/**
* Order of the menuitem
*/

View File

@ -99,7 +99,7 @@ export default {
methods: {
getPTOptions(key, index) {
return this.ptm(key, {
options: {
context: {
order: index
}
});

View File

@ -19,7 +19,7 @@ export declare type TieredMenuPassThroughOptionType = TieredMenuPassThroughAttri
export interface TieredMenuPassThroughMethodOptions {
props: TieredMenuProps;
state: TieredMenuState;
options: TieredMenuOptions;
context: TieredMenuContext;
}
/**
@ -123,7 +123,7 @@ export interface TieredMenuState {
/**
* Defines current options in TieredMenu component.
*/
export interface TieredMenuOptions {
export interface TieredMenuContext {
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

View File

@ -130,7 +130,7 @@ export default {
},
getPTOptions(processedItem, key) {
return this.ptm(key, {
options: {
context: {
active: this.isItemActive(processedItem),
focused: this.isItemFocused(processedItem)
}