mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-08 16:37:15 +00:00
Update #3965 - For Dock
This commit is contained in:
Tuğçe Küçükoğlu
parent
931edf0158
commit
a8fd3ce6a8
4 changed files with 211 additions and 185 deletions
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="p-dock-list-container" v-bind="ptm('container')">
|
||||
<div :class="cx('container')" v-bind="ptm('container')">
|
||||
<ul
|
||||
ref="list"
|
||||
:id="id"
|
||||
class="p-dock-list"
|
||||
:class="cx('menu')"
|
||||
role="menu"
|
||||
:aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
|
||||
:aria-activedescendant="focused ? focusedOptionId : undefined"
|
||||
|
|
@ -19,21 +19,23 @@
|
|||
<template v-for="(processedItem, index) of model" :key="index">
|
||||
<li
|
||||
:id="getItemId(index)"
|
||||
:class="itemClass(processedItem, index, getItemId(index))"
|
||||
:class="cx('menuitem', { processedItem, index, id: getItemId(index) })"
|
||||
role="menuitem"
|
||||
:aria-label="processedItem.label"
|
||||
:aria-disabled="disabled(processedItem)"
|
||||
@click="onItemClick($event, processedItem)"
|
||||
@mouseenter="onItemMouseEnter(index)"
|
||||
v-bind="getPTOptions(getItemId(index), 'menuitem')"
|
||||
:data-p-focused="isItemActive(getItemId(index))"
|
||||
:data-p-disabled="disabled(processedItem) || false"
|
||||
>
|
||||
<div class="p-menuitem-content" v-bind="getPTOptions(getItemId(index), 'content')">
|
||||
<div :class="cx('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
|
||||
v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
|
||||
:href="href"
|
||||
:class="linkClass({ isActive, isExactActive })"
|
||||
:class="cx('action', { isActive, isExactActive })"
|
||||
:target="processedItem.target"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
|
|
@ -41,25 +43,25 @@
|
|||
v-bind="getPTOptions(getItemId(index), 'action')"
|
||||
>
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
|
||||
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="processedItem"></component>
|
||||
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
|
||||
</a>
|
||||
</router-link>
|
||||
<a
|
||||
v-else
|
||||
v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
|
||||
:href="processedItem.url"
|
||||
:class="linkClass()"
|
||||
:class="cx('action')"
|
||||
:target="processedItem.target"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
v-bind="getPTOptions(getItemId(index), 'action')"
|
||||
>
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
|
||||
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="processedItem"></component>
|
||||
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates['item']" :item="processedItem" :index="index"></component>
|
||||
|
|
@ -146,7 +148,7 @@ export default {
|
|||
});
|
||||
},
|
||||
isSameMenuItem(event) {
|
||||
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
|
||||
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="menuitem"]')));
|
||||
},
|
||||
isItemActive(id) {
|
||||
return id === this.focusedOptionIndex;
|
||||
|
|
@ -241,56 +243,33 @@ export default {
|
|||
this.changeFocusedOptionIndex(0);
|
||||
},
|
||||
onEndKey() {
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
|
||||
},
|
||||
onSpaceKey() {
|
||||
const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
|
||||
const anchorElement = element && DomHandler.findSingle(element, '.p-dock-link');
|
||||
const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
|
||||
|
||||
anchorElement ? anchorElement.click() : element && element.click();
|
||||
},
|
||||
findNextOptionIndex(index) {
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][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.p-dock-item:not(.p-disabled)');
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][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.p-dock-item:not(.p-disabled)');
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
|
||||
|
||||
let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
|
||||
|
||||
this.focusedOptionIndex = menuitems[order].getAttribute('id');
|
||||
},
|
||||
itemClass(item, index, id) {
|
||||
return [
|
||||
'p-dock-item',
|
||||
{
|
||||
'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,
|
||||
'p-dock-item-current': this.currentIndex === index,
|
||||
'p-dock-item-next': this.currentIndex + 1 === index,
|
||||
'p-dock-item-second-next': this.currentIndex + 2 === index
|
||||
}
|
||||
];
|
||||
},
|
||||
linkClass(routerProps) {
|
||||
return [
|
||||
'p-dock-link',
|
||||
{
|
||||
'router-link-active': routerProps && routerProps.isActive,
|
||||
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
|
||||
}
|
||||
];
|
||||
},
|
||||
disabled(item) {
|
||||
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue