mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Components update v.3.21.0
This commit is contained in:
Bahadır Sofuoğlu
parent
18497d55b1
commit
defd6ff6e2
242 changed files with 28022 additions and 17523 deletions
|
|
@ -1,41 +1,59 @@
|
|||
<template>
|
||||
<div class="p-dock-list-container">
|
||||
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
|
||||
<li v-for="(item, index) of model" :key="index" :class="itemClass(index)" role="none" @mouseenter="onItemMouseEnter(index)">
|
||||
<template v-if="!templates['item']">
|
||||
<router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
|
||||
<a
|
||||
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
|
||||
:href="href"
|
||||
role="menuitem"
|
||||
:class="linkClass(item, { isActive, isExactActive })"
|
||||
:target="item.target"
|
||||
@click="onItemClick($event, item, navigate)"
|
||||
>
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="item"></component>
|
||||
</a>
|
||||
</router-link>
|
||||
<a
|
||||
v-else
|
||||
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
|
||||
:href="item.url"
|
||||
role="menuitem"
|
||||
:class="linkClass(item)"
|
||||
:target="item.target"
|
||||
@click="onItemClick($event, item)"
|
||||
:tabindex="disabled(item) ? null : '0'"
|
||||
>
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
|
||||
<ul
|
||||
ref="list"
|
||||
:id="id"
|
||||
class="p-dock-list"
|
||||
role="menu"
|
||||
:aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
|
||||
:aria-activedescendant="focused ? focusedOptionId : undefined"
|
||||
:tabindex="tabindex"
|
||||
:aria-label="ariaLabel"
|
||||
:aria-labelledby="ariaLabelledby"
|
||||
@focus="onListFocus"
|
||||
@blur="onListBlur"
|
||||
@keydown="onListKeyDown"
|
||||
@mouseleave="onListMouseLeave"
|
||||
>
|
||||
<template v-for="(processedItem, index) of model" :key="index">
|
||||
<li
|
||||
:id="getItemId(index)"
|
||||
:class="itemClass(processedItem, index, getItemId(index))"
|
||||
role="menuitem"
|
||||
:aria-label="processedItem.label"
|
||||
:aria-disabled="disabled(processedItem)"
|
||||
@click="onItemClick($event, processedItem)"
|
||||
@mouseenter="onItemMouseEnter(index)"
|
||||
>
|
||||
<div class="p-menuitem-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 })"
|
||||
:target="processedItem.target"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
@click="onItemActionClick($event, processedItem, navigate)"
|
||||
>
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="processedItem"></component>
|
||||
</a>
|
||||
</router-link>
|
||||
<a v-else v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }" :href="processedItem.url" :class="linkClass()" :target="processedItem.target" tabindex="-1" aria-hidden="true">
|
||||
<template v-if="!templates['icon']">
|
||||
<span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="processedItem"></component>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates['icon']" :item="item"></component>
|
||||
</a>
|
||||
</template>
|
||||
<component v-else :is="templates['item']" :item="item"></component>
|
||||
</li>
|
||||
<component v-else :is="templates['item']" :item="processedItem" :index="index"></component>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -43,10 +61,16 @@
|
|||
<script>
|
||||
import Ripple from 'primevue/ripple';
|
||||
import Tooltip from 'primevue/tooltip';
|
||||
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||
|
||||
export default {
|
||||
name: 'DockSub',
|
||||
emits: ['focus', 'blur'],
|
||||
props: {
|
||||
position: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
model: {
|
||||
type: Array,
|
||||
default: null
|
||||
|
|
@ -59,42 +83,164 @@ export default {
|
|||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
tooltipOptions: null
|
||||
tooltipOptions: null,
|
||||
menuId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tabindex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
'aria-label': {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
'aria-labelledby': {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: -3
|
||||
currentIndex: -3,
|
||||
focused: false,
|
||||
focusedOptionIndex: -1
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getItemId(index) {
|
||||
return `${this.id}_${index}`;
|
||||
},
|
||||
getItemProp(processedItem, name) {
|
||||
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
|
||||
},
|
||||
isSameMenuItem(event) {
|
||||
return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
|
||||
},
|
||||
onListMouseLeave() {
|
||||
this.currentIndex = -3;
|
||||
},
|
||||
onItemMouseEnter(index) {
|
||||
this.currentIndex = index;
|
||||
},
|
||||
onItemClick(event, item, navigate) {
|
||||
if (this.disabled(item)) {
|
||||
event.preventDefault();
|
||||
onItemActionClick(event, navigate) {
|
||||
navigate && navigate(event);
|
||||
},
|
||||
onItemClick(event, processedItem) {
|
||||
if (this.isSameMenuItem(event)) {
|
||||
const command = this.getItemProp(processedItem, 'command');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.command) {
|
||||
item.command({
|
||||
originalEvent: event,
|
||||
item: item
|
||||
});
|
||||
}
|
||||
|
||||
if (item.to && navigate) {
|
||||
navigate(event);
|
||||
command && command({ originalEvent: event, item: processedItem.item });
|
||||
}
|
||||
},
|
||||
itemClass(index) {
|
||||
onListFocus(event) {
|
||||
this.focused = true;
|
||||
this.changeFocusedOptionIndex(0);
|
||||
this.$emit('focus', event);
|
||||
},
|
||||
onListBlur(event) {
|
||||
this.focused = false;
|
||||
this.focusedOptionIndex = -1;
|
||||
this.$emit('blur', event);
|
||||
},
|
||||
onListKeyDown(event) {
|
||||
switch (event.code) {
|
||||
case 'ArrowDown': {
|
||||
if (this.position === 'left' || this.position === 'right') this.onArrowDownKey();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ArrowUp': {
|
||||
if (this.position === 'left' || this.position === 'right') this.onArrowUpKey();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ArrowRight': {
|
||||
if (this.position === 'top' || this.position === 'bottom') this.onArrowDownKey();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'ArrowLeft': {
|
||||
if (this.position === 'top' || this.position === 'bottom') this.onArrowUpKey();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'Home': {
|
||||
this.onHomeKey();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'End': {
|
||||
this.onEndKey();
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'Enter':
|
||||
|
||||
case 'Space': {
|
||||
this.onSpaceKey(event);
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
onArrowDownKey() {
|
||||
const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
|
||||
|
||||
this.changeFocusedOptionIndex(optionIndex);
|
||||
},
|
||||
onArrowUpKey() {
|
||||
const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
|
||||
|
||||
this.changeFocusedOptionIndex(optionIndex);
|
||||
},
|
||||
onHomeKey() {
|
||||
this.changeFocusedOptionIndex(0);
|
||||
},
|
||||
onEndKey() {
|
||||
this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
|
||||
},
|
||||
onSpaceKey() {
|
||||
const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
|
||||
const anchorElement = element && DomHandler.findSingle(element, '.p-dock-link');
|
||||
|
||||
anchorElement ? anchorElement.click() : element && element.click();
|
||||
},
|
||||
findNextOptionIndex(index) {
|
||||
const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
|
||||
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 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)');
|
||||
|
||||
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': id === this.focusedOptionIndex,
|
||||
'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,
|
||||
|
|
@ -103,11 +249,10 @@ export default {
|
|||
}
|
||||
];
|
||||
},
|
||||
linkClass(item, routerProps) {
|
||||
linkClass(routerProps) {
|
||||
return [
|
||||
'p-dock-action',
|
||||
'p-dock-link',
|
||||
{
|
||||
'p-disabled': this.disabled(item),
|
||||
'router-link-active': routerProps && routerProps.isActive,
|
||||
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
|
||||
}
|
||||
|
|
@ -117,6 +262,14 @@ export default {
|
|||
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
id() {
|
||||
return this.menuId || UniqueComponentId();
|
||||
},
|
||||
focusedOptionId() {
|
||||
return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
|
||||
}
|
||||
},
|
||||
directives: {
|
||||
ripple: Ripple,
|
||||
tooltip: Tooltip
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue