Refactor #4739 - For PanelMenu

components/lib/panelmenu/BasePanelMenu.vue

@@ -14,10 +14,6 @@ export default {
             type: Object,
             default: null
         },
-        exact: {
-            type: Boolean,
-            default: true
-        },
         tabindex: {
             type: Number,
             default: 0

components/lib/panelmenu/PanelMenu.d.ts

@@ -258,6 +258,7 @@ export interface PanelMenuProps {
     expandedKeys?: PanelMenuExpandedKeys;
     /**
      * Whether to apply 'router-link-active-exact' class if route exactly matches the item path.
+     * @deprecated since v3.40.0.
      * @defaultValue true
      */
     exact?: boolean | undefined;

components/lib/panelmenu/PanelMenu.vue

@@ -19,14 +19,7 @@
                 >
                     <div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
                         <template v-if="!$slots.item">
-                            <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
+                            <a :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)">
-                                <a :href="href" :class="cx('headerAction', { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions('headerAction', item, index)">
-                                    <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" />
-                                    <span v-else-if="getItemProp(item, 'icon')" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" v-bind="getPTOptions('headerIcon', item, index)" />
-                                    <span :class="cx('headerLabel')" v-bind="getPTOptions('headerLabel', item, index)">{{ getItemLabel(item) }}</span>
-                                </a>
-                            </router-link>
-                            <a v-else :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)">
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
                                     <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
                                 </slot>
@@ -48,7 +41,6 @@
                                 :expandedKeys="expandedKeys"
                                 @item-toggle="changeExpandedKeys"
                                 @header-focus="updateFocusedHeader"
-                                :exact="exact"
                                 :pt="pt"
                                 :unstyled="unstyled"
                             />
@@ -83,11 +75,6 @@ export default {
             this.id = newValue || UniqueComponentId();
         }
     },
-    beforeMount() {
-        if (!this.$slots.item) {
-            console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
-        }
-    },
     mounted() {
         this.id = this.id || UniqueComponentId();
     },
@@ -200,9 +187,6 @@ export default {
             headerAction ? headerAction.click() : this.onHeaderClick(event, item);
             event.preventDefault();
         },
-        onHeaderActionClick(event, navigate) {
-            navigate && navigate(event);
-        },
         findNextHeader(panelElement, selfCheck = false) {
             const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
             const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');

components/lib/panelmenu/PanelMenuList.vue

@@ -10,7 +10,6 @@
         :items="processedItems"
         :templates="templates"
         :activeItemPath="activeItemPath"
-        :exact="exact"
         @focus="onFocus"
         @blur="onBlur"
         @keydown="onKeyDown"
@@ -47,10 +46,6 @@ export default {
         expandedKeys: {
             type: Object,
             default: null
-        },
-        exact: {
-            type: Boolean,
-            default: true
         }
     },
     searchTimeout: null,

components/lib/panelmenu/PanelMenuSub.vue

@@ -18,14 +18,7 @@
             >
                 <div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
                     <template v-if="!templates.item">
-                        <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
+                        <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
-                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action', processedItem, index)">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
-                                <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
-                            </a>
-                        </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
                             <template v-if="isItemGroup(processedItem)">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
                                 <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', processedItem, index)" />
@@ -57,7 +50,6 @@
                             :level="level + 1"
                             :templates="templates"
                             :activeItemPath="activeItemPath"
-                            :exact="exact"
                             @item-toggle="onItemToggle"
                             :pt="pt"
                             :unstyled="unstyled"
@@ -115,10 +107,6 @@ export default {
             type: Object,
             default: null
         },
-        exact: {
-            type: Boolean,
-            default: true
-        },
         tabindex: {
             type: Number,
             default: -1
@@ -170,9 +158,6 @@ export default {
         onItemToggle(event) {
             this.$emit('item-toggle', event);
         },
-        onItemActionClick(event, navigate) {
-            navigate && navigate(event);
-        },
         getAriaSetSize() {
             return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },

components/lib/panelmenu/style/PanelMenuStyle.js

@@ -48,13 +48,7 @@ const classes = {
         }
     ],
     headerContent: 'p-panelmenu-header-content',
-    headerAction: ({ instance, isActive, isExactActive }) => [
+    headerAction: 'p-panelmenu-header-action',
-        'p-panelmenu-header-action',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': instance.exact && isExactActive
-        }
-    ],
     headerIcon: 'p-menuitem-icon',
     headerLabel: 'p-menuitem-text',
     toggleableContent: 'p-toggleable-content',
@@ -68,13 +62,7 @@ const classes = {
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ props, isActive, isExactActive }) => [
+    action: 'p-menuitem-link',
-        'p-menuitem-link',
-        {
-            'router-link-active': isActive,
-            'router-link-active-exact': props.exact && isExactActive
-        }
-    ],
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text',
     submenuIcon: 'p-submenu-icon',