Refactor #3907 - options have changed as context
parent
6005b67be7
commit
5aab120fe5
|
@ -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
|
||||
|
|
|
@ -149,7 +149,7 @@ export default {
|
|||
},
|
||||
getPTOptions(processedItem, key) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -153,7 +153,7 @@ export default {
|
|||
},
|
||||
getPTOptions(processedItem, key) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem)
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -43,7 +43,7 @@ export default {
|
|||
},
|
||||
getPTOptions(key) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
focused: this.isItemFocused()
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -144,7 +144,7 @@ export default {
|
|||
},
|
||||
getPTOptions(processedItem, key) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem)
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -124,7 +124,7 @@ export default {
|
|||
},
|
||||
getPTOptions(processedItem, key) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -99,7 +99,7 @@ export default {
|
|||
methods: {
|
||||
getPTOptions(key, index) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
order: index
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -130,7 +130,7 @@ export default {
|
|||
},
|
||||
getPTOptions(processedItem, key) {
|
||||
return this.ptm(key, {
|
||||
options: {
|
||||
context: {
|
||||
active: this.isItemActive(processedItem),
|
||||
focused: this.isItemFocused(processedItem)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue