#1254 for Dock
parent
23f842e203
commit
30a1d5c72d
api-generator/components
src
components/dock
views/dock
|
@ -22,6 +22,12 @@ const DockProps = [
|
||||||
type: "object",
|
type: "object",
|
||||||
default: "null",
|
default: "null",
|
||||||
description: "Inline style of the element."
|
description: "Inline style of the element."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "exact",
|
||||||
|
type: "boolean",
|
||||||
|
default: "true",
|
||||||
|
description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,7 @@ interface DockProps {
|
||||||
model?: any[];
|
model?: any[];
|
||||||
class?: string;
|
class?: string;
|
||||||
style?: any;
|
style?: any;
|
||||||
|
exact?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare class Dock {
|
declare class Dock {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="containerClass" :style="style">
|
<div :class="containerClass" :style="style">
|
||||||
<DockSub :model="model" :template="$slots.item"></DockSub>
|
<DockSub :model="model" :template="$slots.item" :exact="exact"></DockSub>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -16,35 +16,10 @@ export default {
|
||||||
},
|
},
|
||||||
model: null,
|
model: null,
|
||||||
class: null,
|
class: null,
|
||||||
style: null
|
style: null,
|
||||||
},
|
exact: {
|
||||||
data() {
|
type: Boolean,
|
||||||
return {
|
default: true
|
||||||
currentIndex: -3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onListMouseLeave() {
|
|
||||||
this.currentIndex = -3;
|
|
||||||
},
|
|
||||||
onItemMouseEnter(index) {
|
|
||||||
this.currentIndex = index;
|
|
||||||
},
|
|
||||||
onItemClick(e, item) {
|
|
||||||
if (item.command) {
|
|
||||||
item.command({ originalEvent: e, item });
|
|
||||||
}
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
},
|
|
||||||
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
|
|
||||||
}];
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -3,17 +3,17 @@
|
||||||
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
|
<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" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
|
||||||
<template v-if="!template">
|
<template v-if="!template">
|
||||||
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
|
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
|
||||||
<a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
|
<a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
|
||||||
:data-pr-tooltip="item.label" @click="onItemClick(e, item)">
|
:data-pr-tooltip="item.label" @click="onItemClick($event, item, navigate)">
|
||||||
<template v-if="typeof item.icon === 'string'">
|
<template v-if="typeof item.icon === 'string'">
|
||||||
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
|
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
|
||||||
</template>
|
</template>
|
||||||
<component v-else :is="item.icon"></component>
|
<component v-else :is="item.icon"></component>
|
||||||
</a>
|
</a>
|
||||||
</router-link>
|
</router-link>
|
||||||
<a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
|
<a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
|
||||||
:data-pr-tooltip="item.label" @click="onItemClick($event, item)">
|
:data-pr-tooltip="item.label" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
|
||||||
<template v-if="typeof item.icon === 'string'">
|
<template v-if="typeof item.icon === 'string'">
|
||||||
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
|
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
|
||||||
</template>
|
</template>
|
||||||
|
@ -37,6 +37,10 @@ export default {
|
||||||
template: {
|
template: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: null
|
default: null
|
||||||
|
},
|
||||||
|
exact: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -51,12 +55,22 @@ export default {
|
||||||
onItemMouseEnter(index) {
|
onItemMouseEnter(index) {
|
||||||
this.currentIndex = index;
|
this.currentIndex = index;
|
||||||
},
|
},
|
||||||
onItemClick(e, item) {
|
onItemClick(event, item, navigate) {
|
||||||
if (item.command) {
|
if (this.disabled(item)) {
|
||||||
item.command({ originalEvent: e, item });
|
event.preventDefault();
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
e.preventDefault();
|
if (item.command) {
|
||||||
|
item.command({
|
||||||
|
originalEvent: event,
|
||||||
|
item: item
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.to && navigate) {
|
||||||
|
navigate(event);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
itemClass(index) {
|
itemClass(index) {
|
||||||
return ['p-dock-item', {
|
return ['p-dock-item', {
|
||||||
|
@ -67,6 +81,13 @@ export default {
|
||||||
'p-dock-item-second-next': (this.currentIndex + 2) === 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
|
||||||
|
}];
|
||||||
|
},
|
||||||
disabled(item) {
|
disabled(item) {
|
||||||
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
|
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
|
||||||
}
|
}
|
||||||
|
|
|
@ -83,6 +83,12 @@ import Dock from 'primevue/dock';
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Inline style of the element.</td>
|
<td>Inline style of the element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>exact</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>true</td>
|
||||||
|
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue