diff --git a/api-generator/components/dock.js b/api-generator/components/dock.js
index 594cf3d33..7fd3997a2 100644
--- a/api-generator/components/dock.js
+++ b/api-generator/components/dock.js
@@ -22,6 +22,12 @@ const DockProps = [
type: "object",
default: "null",
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."
}
];
diff --git a/src/components/dock/Dock.d.ts b/src/components/dock/Dock.d.ts
index 7686ba197..908876ca6 100644
--- a/src/components/dock/Dock.d.ts
+++ b/src/components/dock/Dock.d.ts
@@ -5,6 +5,7 @@ interface DockProps {
model?: any[];
class?: string;
style?: any;
+ exact?: boolean;
}
declare class Dock {
diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index 1c55289fb..eaf85871a 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -1,6 +1,6 @@
-
+
@@ -16,35 +16,10 @@ export default {
},
model: null,
class: null,
- style: null
- },
- data() {
- return {
- 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
- }];
+ style: null,
+ exact: {
+ type: Boolean,
+ default: true
}
},
computed: {
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index 4071b0403..2067794b4 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -3,17 +3,17 @@
-
-
-
+
+
-
+
@@ -37,6 +37,10 @@ export default {
template: {
type: Function,
default: null
+ },
+ exact: {
+ type: Boolean,
+ default: true
}
},
data() {
@@ -51,12 +55,22 @@ export default {
onItemMouseEnter(index) {
this.currentIndex = index;
},
- onItemClick(e, item) {
- if (item.command) {
- item.command({ originalEvent: e, item });
+ onItemClick(event, item, navigate) {
+ if (this.disabled(item)) {
+ event.preventDefault();
+ return;
}
- e.preventDefault();
+ if (item.command) {
+ item.command({
+ originalEvent: event,
+ item: item
+ });
+ }
+
+ if (item.to && navigate) {
+ navigate(event);
+ }
},
itemClass(index) {
return ['p-dock-item', {
@@ -67,6 +81,13 @@ export default {
'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) {
return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
}
diff --git a/src/views/dock/DockDoc.vue b/src/views/dock/DockDoc.vue
index af48ff3ef..2878d907e 100644
--- a/src/views/dock/DockDoc.vue
+++ b/src/views/dock/DockDoc.vue
@@ -83,6 +83,12 @@ import Dock from 'primevue/dock';
null |
Inline style of the element. |
+
+ exact |
+ boolean |
+ true |
+ Whether to apply 'router-link-active-exact' class if route exactly matches the item path. |
+