Refactor #5592 - Breadcrumb, ContextMenu, Dock
tugcekucukoglu
parent
28d77998c0
commit
f71512afdb
|
|
@ -57,15 +57,15 @@ export interface BreadcrumbPassThroughOptions {
|
|||
/**
|
||||
* Used to pass attributes to the list's DOM element.
|
||||
*/
|
||||
menu?: BreadcrumbPassThroughOptionType;
|
||||
list?: BreadcrumbPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list item's DOM element.
|
||||
* Used to pass attributes to the item's DOM element.
|
||||
*/
|
||||
menuitem?: BreadcrumbPassThroughOptionType;
|
||||
item?: BreadcrumbPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the action's DOM element.
|
||||
* Used to pass attributes to the item link's DOM element.
|
||||
*/
|
||||
action?: BreadcrumbPassThroughOptionType;
|
||||
itemLink?: BreadcrumbPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<nav :class="cx('root')" v-bind="ptmi('root')">
|
||||
<ol :class="cx('menu')" v-bind="ptm('menu')">
|
||||
<BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
|
||||
<ol :class="cx('list')" v-bind="ptm('list')">
|
||||
<BreadcrumbItem v-if="home" :item="home" :class="cx('homeItem')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('homeItem')" />
|
||||
<template v-for="(item, i) of model" :key="item.label + '_' + i">
|
||||
<li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
|
||||
<slot name="separator">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
|
||||
<li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
|
||||
<template v-if="!templates.item">
|
||||
<a :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
|
||||
<a :href="item.url || '#'" :class="cx('itemLink')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('itemLink', ptmOptions)">
|
||||
<component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
|
||||
<span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
|
||||
<span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
|
||||
|
|
@ -62,11 +62,11 @@ export default {
|
|||
return {
|
||||
action: mergeProps(
|
||||
{
|
||||
class: this.cx('action'),
|
||||
class: this.cx('itemLink'),
|
||||
'aria-current': this.isCurrentUrl(),
|
||||
onClick: ($event) => this.onClick($event)
|
||||
},
|
||||
this.ptm('action', this.ptmOptions)
|
||||
this.ptm('itemLink', this.ptmOptions)
|
||||
),
|
||||
icon: mergeProps(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import BaseStyle from 'primevue/base/style';
|
|||
|
||||
const classes = {
|
||||
root: 'p-breadcrumb p-component',
|
||||
menu: 'p-breadcrumb-list',
|
||||
home: 'p-breadcrumb-home-item',
|
||||
list: 'p-breadcrumb-list',
|
||||
homeItem: 'p-breadcrumb-home-item',
|
||||
separator: 'p-breadcrumb-separator',
|
||||
menuitem: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
|
||||
action: 'p-breadcrumb-item-link',
|
||||
item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
|
||||
itemLink: 'p-breadcrumb-item-link',
|
||||
icon: 'p-breadcrumb-item-icon',
|
||||
label: 'p-breadcrumb-item-label'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -62,29 +62,29 @@ export interface ContextMenuPassThroughOptions {
|
|||
*/
|
||||
root?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list's DOM element.
|
||||
* Used to pass attributes to the root list's DOM element.
|
||||
*/
|
||||
menu?: ContextMenuPassThroughOptionType;
|
||||
rootList?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list item's DOM element.
|
||||
* Used to pass attributes to the item's DOM element.
|
||||
*/
|
||||
menuitem?: ContextMenuPassThroughOptionType;
|
||||
item?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
* Used to pass attributes to the item content's DOM element.
|
||||
*/
|
||||
content?: ContextMenuPassThroughOptionType;
|
||||
itemContent?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the action's DOM element.
|
||||
* Used to pass attributes to the item link's DOM element.
|
||||
*/
|
||||
action?: ContextMenuPassThroughOptionType;
|
||||
itemLink?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
* Used to pass attributes to the item icon's DOM element.
|
||||
*/
|
||||
icon?: ContextMenuPassThroughOptionType;
|
||||
itemIcon?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the label's DOM element.
|
||||
* Used to pass attributes to the item label's DOM element.
|
||||
*/
|
||||
label?: ContextMenuPassThroughOptionType;
|
||||
itemLabel?: ContextMenuPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the submenu icon's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<ContextMenuSub
|
||||
:ref="listRef"
|
||||
:id="id + '_list'"
|
||||
:class="cx('menu')"
|
||||
:class="cx('rootList')"
|
||||
role="menubar"
|
||||
:root="true"
|
||||
:tabindex="tabindex"
|
||||
|
|
@ -319,7 +319,7 @@ export default {
|
|||
onEnterKey(event) {
|
||||
if (this.focusedItemInfo.index !== -1) {
|
||||
const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`);
|
||||
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();
|
||||
const processedItem = this.visibleItems[this.focusedItemInfo.index];
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<transition name="p-contextmenusub" @enter="onEnter" v-bind="ptm('menu.transition')">
|
||||
<ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('menu')">
|
||||
<ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('rootList')">
|
||||
<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,23 +15,23 @@
|
|||
:aria-level="level + 1"
|
||||
:aria-setsize="getAriaSetSize()"
|
||||
:aria-posinset="getAriaPosInset(index)"
|
||||
v-bind="getPTOptions('menuitem', processedItem, index)"
|
||||
v-bind="getPTOptions('item', processedItem, index)"
|
||||
:data-p-highlight="isItemActive(processedItem)"
|
||||
:data-p-focused="isItemFocused(processedItem)"
|
||||
:data-p-disabled="isItemDisabled(processedItem)"
|
||||
>
|
||||
<div
|
||||
:class="cx('content')"
|
||||
:class="cx('itemContent')"
|
||||
@click="onItemClick($event, processedItem)"
|
||||
@mouseenter="onItemMouseEnter($event, processedItem)"
|
||||
@mousemove="onItemMouseMove($event, processedItem)"
|
||||
v-bind="getPTOptions('content', processedItem, index)"
|
||||
v-bind="getPTOptions('itemContent', processedItem, index)"
|
||||
>
|
||||
<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('action', processedItem, index)">
|
||||
<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('icon', processedItem, index)" />
|
||||
<span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ 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('itemLink', processedItem, index)">
|
||||
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
|
||||
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('itemIcon', processedItem, index)" />
|
||||
<span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
|
||||
<template v-if="getItemProp(processedItem, 'items')">
|
||||
<component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
|
||||
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" />
|
||||
|
|
@ -189,23 +189,23 @@ export default {
|
|||
return {
|
||||
action: mergeProps(
|
||||
{
|
||||
class: this.cx('action'),
|
||||
class: this.cx('itemLink'),
|
||||
tabindex: -1,
|
||||
'aria-hidden': true
|
||||
},
|
||||
this.getPTOptions('action', processedItem, index)
|
||||
this.getPTOptions('itemLink', processedItem, index)
|
||||
),
|
||||
icon: mergeProps(
|
||||
{
|
||||
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
||||
class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
|
||||
},
|
||||
this.getPTOptions('icon', processedItem, index)
|
||||
this.getPTOptions('itemIcon', processedItem, index)
|
||||
),
|
||||
label: mergeProps(
|
||||
{
|
||||
class: this.cx('label')
|
||||
class: this.cx('itemLabel')
|
||||
},
|
||||
this.getPTOptions('label', processedItem, index)
|
||||
this.getPTOptions('itemLabel', processedItem, index)
|
||||
),
|
||||
submenuicon: mergeProps(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ const classes = {
|
|||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
menu: 'p-contextmenu-root-list',
|
||||
menuitem: ({ instance, processedItem }) => [
|
||||
rootList: 'p-contextmenu-root-list',
|
||||
item: ({ instance, processedItem }) => [
|
||||
'p-contextmenu-item',
|
||||
{
|
||||
'p-contextmenu-item-active': instance.isItemActive(processedItem),
|
||||
|
|
@ -16,10 +16,10 @@ const classes = {
|
|||
'p-disabled': instance.isItemDisabled(processedItem)
|
||||
}
|
||||
],
|
||||
content: 'p-contextmenu-item-content',
|
||||
action: 'p-contextmenu-item-link',
|
||||
icon: 'p-contextmenu-item-icon',
|
||||
label: 'p-contextmenu-item-label',
|
||||
itemContent: 'p-contextmenu-item-content',
|
||||
itemLink: 'p-contextmenu-item-link',
|
||||
itemIcon: 'p-contextmenu-item-icon',
|
||||
itemLabel: 'p-contextmenu-item-label',
|
||||
submenuIcon: 'p-contextmenu-submenu-icon',
|
||||
submenu: 'p-contextmenu-submenu',
|
||||
separator: 'p-contextmenu-separator'
|
||||
|
|
|
|||
|
|
@ -59,29 +59,29 @@ export interface DockPassThroughOptions {
|
|||
*/
|
||||
root?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the container's DOM element.
|
||||
* Used to pass attributes to the list container's DOM element.
|
||||
*/
|
||||
container?: DockPassThroughOptionType;
|
||||
listContainer?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list's DOM element.
|
||||
*/
|
||||
menu?: DockPassThroughOptionType;
|
||||
list?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the list item's DOM element.
|
||||
* Used to pass attributes to the item's DOM element.
|
||||
*/
|
||||
menuitem?: DockPassThroughOptionType;
|
||||
item?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the content's DOM element.
|
||||
* Used to pass attributes to the item content's DOM element.
|
||||
*/
|
||||
content?: DockPassThroughOptionType;
|
||||
itemContent?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the action's DOM element.
|
||||
* Used to pass attributes to the item link's DOM element.
|
||||
*/
|
||||
action?: DockPassThroughOptionType;
|
||||
itemLink?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the icon's DOM element.
|
||||
* Used to pass attributes to the item icon's DOM element.
|
||||
*/
|
||||
icon?: DockPassThroughOptionType;
|
||||
itemIcon?: DockPassThroughOptionType;
|
||||
/**
|
||||
* Used to manage all lifecycle hooks.
|
||||
* @see {@link BaseComponent.ComponentHooks}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div :class="cx('container')" v-bind="ptm('container')">
|
||||
<div :class="cx('listContainer')" v-bind="ptm('listContainer')">
|
||||
<ul
|
||||
ref="list"
|
||||
:id="id"
|
||||
:class="cx('menu')"
|
||||
:class="cx('list')"
|
||||
role="menu"
|
||||
:aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
|
||||
:aria-activedescendant="focused ? focusedOptionId : undefined"
|
||||
|
|
@ -14,36 +14,36 @@
|
|||
@blur="onListBlur"
|
||||
@keydown="onListKeyDown"
|
||||
@mouseleave="onListMouseLeave"
|
||||
v-bind="ptm('menu')"
|
||||
v-bind="ptm('list')"
|
||||
>
|
||||
<template v-for="(processedItem, index) of model" :key="index">
|
||||
<li
|
||||
:id="getItemId(index)"
|
||||
:class="cx('menuitem', { processedItem, id: getItemId(index) })"
|
||||
:class="cx('item', { processedItem, id: getItemId(index) })"
|
||||
role="menuitem"
|
||||
:aria-label="processedItem.label"
|
||||
:aria-disabled="disabled(processedItem)"
|
||||
@click="onItemClick($event, processedItem)"
|
||||
@mouseenter="onItemMouseEnter(index)"
|
||||
v-bind="getPTOptions('menuitem', processedItem, index)"
|
||||
v-bind="getPTOptions('item', processedItem, index)"
|
||||
:data-p-focused="isItemActive(getItemId(index))"
|
||||
:data-p-disabled="disabled(processedItem) || false"
|
||||
>
|
||||
<div :class="cx('content')" v-bind="getPTOptions('content', processedItem, index)">
|
||||
<div :class="cx('itemContent')" v-bind="getPTOptions('itemContent', processedItem, index)">
|
||||
<template v-if="!templates['item']">
|
||||
<a
|
||||
v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
|
||||
:href="processedItem.url"
|
||||
:class="cx('action')"
|
||||
:class="cx('itemLink')"
|
||||
:target="processedItem.target"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
v-bind="getPTOptions('action', processedItem, index)"
|
||||
v-bind="getPTOptions('itemLink', processedItem, index)"
|
||||
>
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', processedItem, index)"></span>
|
||||
<span v-ripple :class="[cx('itemIcon'), processedItem.icon]" v-bind="getPTOptions('itemIcon', processedItem, index)"></span>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
|
||||
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('itemIcon')"></component>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates['item']" :item="processedItem" :index="index" :label="processedItem.label" :props="getMenuItemProps(processedItem, index)"></component>
|
||||
|
|
@ -130,7 +130,7 @@ export default {
|
|||
});
|
||||
},
|
||||
isSameMenuItem(event) {
|
||||
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="menuitem"]')));
|
||||
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="item"]')));
|
||||
},
|
||||
isItemActive(id) {
|
||||
return id === this.focusedOptionIndex;
|
||||
|
|
@ -223,28 +223,28 @@ export default {
|
|||
this.changeFocusedOptionIndex(0);
|
||||
},
|
||||
onEndKey() {
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]').length - 1);
|
||||
},
|
||||
onSpaceKey() {
|
||||
const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
|
||||
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
|
||||
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="itemlink"]');
|
||||
|
||||
anchorElement ? anchorElement.click() : element && element.click();
|
||||
},
|
||||
findNextOptionIndex(index) {
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
|
||||
const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
|
||||
|
||||
return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
|
||||
},
|
||||
findPrevOptionIndex(index) {
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
|
||||
const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
|
||||
|
||||
return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
|
||||
},
|
||||
changeFocusedOptionIndex(index) {
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="item"][data-p-disabled="false"]');
|
||||
|
||||
let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
|
||||
|
||||
|
|
@ -259,15 +259,15 @@ export default {
|
|||
{
|
||||
tabindex: -1,
|
||||
'aria-hidden': true,
|
||||
class: this.cx('action')
|
||||
class: this.cx('itemLink')
|
||||
},
|
||||
this.getPTOptions('action', item, index)
|
||||
this.getPTOptions('itemLink', item, index)
|
||||
),
|
||||
icon: mergeProps(
|
||||
{
|
||||
class: [this.cx('icon'), item.icon]
|
||||
class: [this.cx('itemIcon'), item.icon]
|
||||
},
|
||||
this.getPTOptions('icon', item, index)
|
||||
this.getPTOptions('itemIcon', item, index)
|
||||
)
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,18 +8,18 @@ const classes = {
|
|||
'p-dock-mobile': instance.queryMatches
|
||||
}
|
||||
],
|
||||
container: 'p-dock-list-container',
|
||||
menu: 'p-dock-list',
|
||||
menuitem: ({ instance, processedItem, id }) => [
|
||||
listContainer: 'p-dock-list-container',
|
||||
list: 'p-dock-list',
|
||||
item: ({ instance, processedItem, id }) => [
|
||||
'p-dock-item',
|
||||
{
|
||||
'p-focus': instance.isItemActive(id),
|
||||
'p-disabled': instance.disabled(processedItem)
|
||||
}
|
||||
],
|
||||
content: 'p-dock-item-content',
|
||||
action: 'p-dock-item-link',
|
||||
icon: 'p-dock-item-icon'
|
||||
itemContent: 'p-dock-item-content',
|
||||
itemLink: 'p-dock-item-link',
|
||||
itemIcon: 'p-dock-item-icon'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
|
|
|
|||
Loading…
Reference in New Issue