mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
tugcekucukoglu
parent
f71512afdb
commit
aec93e5eea
8 changed files with 93 additions and 79 deletions
35
components/lib/menu/Menu.d.ts
vendored
35
components/lib/menu/Menu.d.ts
vendored
|
|
@ -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…
Add table
Add a link
Reference in a new issue