vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Components added. Build issues fixed

Browse source
This commit is contained in:
Bahadir Sofuoglu 2022-09-14 14:26:01 +03:00
parent 5b66ed1093
commit 18c3721848
344 changed files with 12446 additions and 8758 deletions
Download patch file Download diff file Expand all files Collapse all files

71
components/dock/DockSub.vue
View file

@ -1,21 +1,35 @@
<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" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
<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)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
<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 :class="['p-dock-action-icon', item.icon]" v-ripple></span>
<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 :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
<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 :class="['p-dock-action-icon', item.icon]" v-ripple></span>
<span v-ripple :class="['p-dock-action-icon', item.icon]"></span>
</template>
<component v-else :is="templates['icon']" :item="item"></component>
</a>
@ -50,7 +64,7 @@ export default {
data() {
return {
currentIndex: -3
}
};
},
methods: {
onListMouseLeave() {
@ -62,6 +76,7 @@ export default {
onItemClick(event, item, navigate) {
if (this.disabled(item)) {
event.preventDefault();
return;
}
@ -77,28 +92,34 @@ export default {
}
},
itemClass(index) {
return ['p-dock-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
}];
return [
'p-dock-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(item, routerProps) {
return ['p-dock-action', {
'p-disabled': this.disabled(item),
'router-link-active': routerProps && routerProps.isActive,
'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
}];
return [
'p-dock-action',
{
'p-disabled': this.disabled(item),
'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);
return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
}
},
directives: {
'ripple': Ripple,
'tooltip': Tooltip
ripple: Ripple,
tooltip: Tooltip
}
}
};
</script>