tugcekucukoglu
parent
f71512afdb
commit
aec93e5eea
|
|
@ -59,25 +59,25 @@ export interface MegaMenuPassThroughOptions {
|
|||
*/
|
||||
root?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list's DOM element.
|
||||
* Used to pass attributes to the root list's DOM element.
|
||||
*/
|
||||
menu?: MegaMenuPassThroughOptionType;
|
||||
rootList?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list item's DOM element.
|
||||
* Used to pass attributes to the item's DOM element.
|
||||
*/
|
||||
menuitem?: MegaMenuPassThroughOptionType;
|
||||
item?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
* Used to pass attributes to the item content's DOM element.
|
||||
*/
|
||||
content?: MegaMenuPassThroughOptionType;
|
||||
itemContent?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the action's DOM element.
|
||||
* Used to pass attributes to the item link's DOM element.
|
||||
*/
|
||||
action?: MegaMenuPassThroughOptionType;
|
||||
itemLink?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
* Used to pass attributes to the item icon's DOM element.
|
||||
*/
|
||||
icon?: MegaMenuPassThroughOptionType;
|
||||
itemIcon?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the label's DOM element.
|
||||
*/
|
||||
|
|
@ -99,17 +99,17 @@ export interface MegaMenuPassThroughOptions {
|
|||
*/
|
||||
column?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the submenu header's DOM element.
|
||||
* Used to pass attributes to the submenu item's DOM element.
|
||||
*/
|
||||
submenuHeader?: MegaMenuPassThroughOptionType;
|
||||
submenuItem?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the submenu's DOM element.
|
||||
*/
|
||||
submenu?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the submenu label's DOM element.
|
||||
* Used to pass attributes to the submenu item label's DOM element.
|
||||
*/
|
||||
submenuLabel?: MegaMenuPassThroughOptionType;
|
||||
submenuItemLabel?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the separator's DOM element.
|
||||
*/
|
||||
|
|
@ -117,7 +117,7 @@ export interface MegaMenuPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the mobile popup menu button's DOM element.
|
||||
*/
|
||||
menubutton?: MegaMenuPassThroughOptionType;
|
||||
button?: MegaMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the start of the component.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@
|
|||
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
<slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)">
|
||||
<slot :id="id" :name="$slots.menubutton ? 'menubutton' : 'button'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
|
||||
<a
|
||||
v-if="model && model.length > 0"
|
||||
ref="menubutton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:class="cx('menubutton')"
|
||||
:class="cx('button')"
|
||||
:aria-haspopup="model.length && model.length > 0 ? true : false"
|
||||
:aria-expanded="mobileActive"
|
||||
:aria-controls="id"
|
||||
:aria-label="$primevue.config.locale.aria?.navigation"
|
||||
@click="menuButtonClick($event)"
|
||||
@keydown="menuButtonKeydown($event)"
|
||||
v-bind="ptm('menubutton')"
|
||||
v-bind="ptm('button')"
|
||||
>
|
||||
<slot name="menubuttonicon">
|
||||
<BarsIcon v-bind="ptm('menubuttonicon')" />
|
||||
<slot :name="$slots.menubuttonicon ? 'menubuttonicon' : 'buttonicon'">
|
||||
<BarsIcon v-bind="ptm('buttonicon')" />
|
||||
</slot>
|
||||
</a>
|
||||
</slot>
|
||||
|
|
@ -421,7 +421,7 @@ export default {
|
|||
onEnterKey(event) {
|
||||
if (this.focusedItemInfo.index !== -1) {
|
||||
const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
|
||||
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
|
||||
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
|
||||
|
||||
anchorElement ? anchorElement.click() : element && element.click();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
|
||||
<li v-if="submenu" :class="[cx('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
|
||||
<ul :class="level === 0 ? cx('rootList') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
|
||||
<li v-if="submenu" :class="[cx('submenuItem', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuItem')">{{ getItemLabel(submenu) }}</li>
|
||||
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
|
||||
<li
|
||||
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
|
||||
:id="getItemId(processedItem)"
|
||||
:style="getItemProp(processedItem, 'style')"
|
||||
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
|
||||
:class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
|
||||
role="menuitem"
|
||||
:aria-label="getItemLabel(processedItem)"
|
||||
:aria-disabled="isItemDisabled(processedItem) || undefined"
|
||||
|
|
@ -15,17 +15,19 @@
|
|||
:aria-level="level + 1"
|
||||
:aria-setsize="getAriaSetSize()"
|
||||
:aria-posinset="getAriaPosInset(index)"
|
||||
v-bind="getPTOptions(processedItem, index, 'menuitem')"
|
||||
v-bind="getPTOptions(processedItem, index, 'item')"
|
||||
:data-p-highlight="isItemActive(processedItem)"
|
||||
:data-p-focused="isItemFocused(processedItem)"
|
||||
:data-p-disabled="isItemDisabled(processedItem)"
|
||||
>
|
||||
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
|
||||
<div :class="cx('itemContent')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'itemContent')">
|
||||
<template v-if="!templates.item">
|
||||
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
|
||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
|
||||
<span :class="level === 0 ? cx('label') : cx('submenuLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuLabel')">{{ getItemLabel(processedItem) }}</span>
|
||||
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'itemLink')">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
|
||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
|
||||
<span :class="level === 0 ? cx('label') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuItemLabel')">
|
||||
{{ getItemLabel(processedItem) }}
|
||||
</span>
|
||||
<template v-if="isItemGroup(processedItem)">
|
||||
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
|
||||
<component v-else :is="horizontal || mobileActive ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
|
||||
|
|
@ -188,17 +190,17 @@ export default {
|
|||
return {
|
||||
action: mergeProps(
|
||||
{
|
||||
class: this.cx('action'),
|
||||
class: this.cx('itemLink'),
|
||||
tabindex: -1,
|
||||
'aria-hidden': true
|
||||
},
|
||||
this.getPTOptions(processedItem, index, 'action')
|
||||
this.getPTOptions(processedItem, index, 'itemLink')
|
||||
),
|
||||
icon: mergeProps(
|
||||
{
|
||||
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
||||
class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
|
||||
},
|
||||
this.getPTOptions(processedItem, index, 'icon')
|
||||
this.getPTOptions(processedItem, index, 'itemIcon')
|
||||
),
|
||||
label: mergeProps(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -15,15 +15,15 @@ const classes = {
|
|||
}
|
||||
],
|
||||
start: 'p-megamenu-start',
|
||||
menubutton: 'p-megamenu-button',
|
||||
menu: 'p-megamenu-root-list',
|
||||
submenuHeader: ({ instance, processedItem }) => [
|
||||
button: 'p-megamenu-button',
|
||||
rootList: 'p-megamenu-root-list',
|
||||
submenuItem: ({ instance, processedItem }) => [
|
||||
'p-megamenu-submenu-item',
|
||||
{
|
||||
'p-disabled': instance.isItemDisabled(processedItem)
|
||||
}
|
||||
],
|
||||
menuitem: ({ instance, processedItem }) => [
|
||||
item: ({ instance, processedItem }) => [
|
||||
'p-megamenu-item',
|
||||
{
|
||||
'p-megamenu-item-active': instance.isItemActive(processedItem),
|
||||
|
|
@ -31,9 +31,9 @@ const classes = {
|
|||
'p-disabled': instance.isItemDisabled(processedItem)
|
||||
}
|
||||
],
|
||||
content: 'p-megamenu-item-content',
|
||||
action: 'p-megamenu-item-link',
|
||||
icon: 'p-megamenu-item-icon',
|
||||
itemContent: 'p-megamenu-item-content',
|
||||
itemLink: 'p-megamenu-item-link',
|
||||
itemIcon: 'p-megamenu-item-icon',
|
||||
label: 'p-megamenu-item-text',
|
||||
submenuIcon: 'p-megamenu-submenu-icon',
|
||||
panel: 'p-megamenu-panel',
|
||||
|
|
@ -70,7 +70,7 @@ const classes = {
|
|||
return columnClass;
|
||||
},
|
||||
submenu: 'p-megamenu-submenu',
|
||||
submenuLabel: 'p-megamenu-submenu-item-label',
|
||||
submenuItemLabel: 'p-megamenu-submenu-item-label',
|
||||
separator: 'p-megamenu-separator',
|
||||
end: 'p-megamenu-end'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -63,27 +63,27 @@ export interface MenuPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the list's DOM element.
|
||||
*/
|
||||
menu?: MenuPassThroughOptionType;
|
||||
list?: MenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the submenu header's DOM element.
|
||||
* Used to pass attributes to the submenu item's DOM element.
|
||||
*/
|
||||
submenuHeader?: MenuPassThroughOptionType;
|
||||
submenuItem?: MenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list item's DOM element.
|
||||
* Used to pass attributes to the item's DOM element.
|
||||
*/
|
||||
menuitem?: MenuPassThroughOptionType;
|
||||
item?: MenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
* Used to pass attributes to the item content's DOM element.
|
||||
*/
|
||||
content?: MenuPassThroughOptionType;
|
||||
itemContent?: MenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the action's DOM element.
|
||||
* Used to pass attributes to the item link's DOM element.
|
||||
*/
|
||||
action?: MenuPassThroughOptionType;
|
||||
itemLink?: MenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
* Used to pass attributes to the item icon's DOM element.
|
||||
*/
|
||||
icon?: MenuPassThroughOptionType;
|
||||
itemIcon?: MenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the label's DOM element.
|
||||
*/
|
||||
|
|
@ -300,7 +300,8 @@ export interface MenuSlots {
|
|||
class: any;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom item template.
|
||||
* @deprecated since v4.0. Use submenuitem slot instead.
|
||||
* Custom submenu header template.
|
||||
* @param {Object} scope - submenuheader slot's params.
|
||||
*/
|
||||
submenuheader(scope: {
|
||||
|
|
@ -309,6 +310,16 @@ export interface MenuSlots {
|
|||
*/
|
||||
item: MenuItem;
|
||||
}): VNode[];
|
||||
/**
|
||||
* Custom submenu item template.
|
||||
* @param {Object} scope - submenuitem slot's params.
|
||||
*/
|
||||
submenuitem(scope: {
|
||||
/**
|
||||
* Menuitem instance
|
||||
*/
|
||||
item: MenuItem;
|
||||
}): VNode[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<ul
|
||||
:ref="listRef"
|
||||
:id="id + '_list'"
|
||||
:class="cx('menu')"
|
||||
:class="cx('list')"
|
||||
role="menu"
|
||||
:tabindex="tabindex"
|
||||
:aria-activedescendant="focused ? focusedOptionId : undefined"
|
||||
|
|
@ -17,12 +17,13 @@
|
|||
@focus="onListFocus"
|
||||
@blur="onListBlur"
|
||||
@keydown="onListKeyDown"
|
||||
v-bind="ptm('menu')"
|
||||
v-bind="ptm('list')"
|
||||
>
|
||||
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
|
||||
<template v-if="item.items && visible(item) && !item.separator">
|
||||
<li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuHeader'), item.class]" role="none" v-bind="ptm('submenuHeader')">
|
||||
<slot name="submenuheader" :item="item">{{ label(item) }}</slot>
|
||||
<li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuItem'), item.class]" role="none" v-bind="ptm('submenuItem')">
|
||||
<!--TODO: submenuheader deprecated since v4.0. Use submenuitem-->
|
||||
<slot :name="$slots.submenuheader ? 'submenuheader' : 'submenuitem'" :item="item">{{ label(item) }}</slot>
|
||||
</li>
|
||||
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
|
||||
<PVMenuitem
|
||||
|
|
@ -205,12 +206,12 @@ export default {
|
|||
event.preventDefault();
|
||||
},
|
||||
onEndKey(event) {
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
|
||||
event.preventDefault();
|
||||
},
|
||||
onEnterKey(event) {
|
||||
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
|
||||
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
|
||||
const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
|
||||
|
||||
this.popup && DomHandler.focus(this.target);
|
||||
anchorElement ? anchorElement.click() : element && element.click();
|
||||
|
|
@ -221,19 +222,19 @@ export default {
|
|||
this.onEnterKey(event);
|
||||
},
|
||||
findNextOptionIndex(index) {
|
||||
const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
|
||||
const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
|
||||
|
||||
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
|
||||
},
|
||||
findPrevOptionIndex(index) {
|
||||
const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
|
||||
const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
|
||||
|
||||
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
|
||||
},
|
||||
changeFocusedOptionIndex(index) {
|
||||
const links = DomHandler.find(this.container, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
const links = DomHandler.find(this.container, 'li[data-pc-section="item"][data-p-disabled="false"]');
|
||||
let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
|
||||
|
||||
order > -1 && (this.focusedOptionIndex = links[order].getAttribute('id'));
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@
|
|||
<li
|
||||
v-if="visible()"
|
||||
:id="id"
|
||||
:class="[cx('menuitem'), item.class]"
|
||||
:class="[cx('item'), item.class]"
|
||||
role="menuitem"
|
||||
:style="item.style"
|
||||
:aria-label="label()"
|
||||
:aria-disabled="disabled()"
|
||||
v-bind="getPTOptions('menuitem')"
|
||||
v-bind="getPTOptions('item')"
|
||||
:data-p-focused="isItemFocused()"
|
||||
:data-p-disabled="disabled() || false"
|
||||
>
|
||||
<div :class="cx('content')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('content')">
|
||||
<div :class="cx('itemContent')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('itemContent')">
|
||||
<template v-if="!templates.item">
|
||||
<a v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
|
||||
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
|
||||
<a v-ripple :href="item.url" :class="cx('itemLink')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink')">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon')" />
|
||||
<span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon')" />
|
||||
<span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -82,17 +82,17 @@ export default {
|
|||
return {
|
||||
action: mergeProps(
|
||||
{
|
||||
class: this.cx('action'),
|
||||
class: this.cx('itemLink'),
|
||||
tabindex: '-1',
|
||||
'aria-hidden': true
|
||||
},
|
||||
this.getPTOptions('action')
|
||||
this.getPTOptions('itemLink')
|
||||
),
|
||||
icon: mergeProps(
|
||||
{
|
||||
class: [this.cx('icon'), item.icon]
|
||||
class: [this.cx('itemIcon'), item.icon]
|
||||
},
|
||||
this.getPTOptions('icon')
|
||||
this.getPTOptions('itemIcon')
|
||||
),
|
||||
label: mergeProps(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9,20 +9,20 @@ const classes = {
|
|||
}
|
||||
],
|
||||
start: 'p-menu-start',
|
||||
menu: 'p-menu-list',
|
||||
submenuHeader: 'p-menu-submenu-item',
|
||||
list: 'p-menu-list',
|
||||
submenuItem: 'p-menu-submenu-item',
|
||||
separator: 'p-menu-separator',
|
||||
end: 'p-menu-end',
|
||||
menuitem: ({ instance }) => [
|
||||
item: ({ instance }) => [
|
||||
'p-menu-item',
|
||||
{
|
||||
'p-focus': instance.id === instance.focusedOptionId,
|
||||
'p-disabled': instance.disabled()
|
||||
}
|
||||
],
|
||||
content: 'p-menu-item-content',
|
||||
action: 'p-menu-item-link',
|
||||
icon: 'p-menu-item-icon',
|
||||
itemContent: 'p-menu-item-content',
|
||||
itemLink: 'p-menu-item-link',
|
||||
itemIcon: 'p-menu-item-icon',
|
||||
label: 'p-menu-item-label'
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue