Fixed #171 - Ability to disable PanelMenu items

src/components/panelmenu/PanelMenu.vue

@@ -3,7 +3,7 @@
         <template v-for="(item, index) of model">
             <div :key="item.label + '_' + index" :class="getPanelClass(item)" :style="item.style">
                 <div :class="getHeaderClass(item)" :style="item.style">
-                    <a :href="item.url || '#'" class="p-panelmenu-header-link" @click="onItemClick($event, item)"
+                    <a :href="item.url" class="p-panelmenu-header-link" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'"
                         :aria-expanded="isActive(item)" :id="ariaId +'_header'" :aria-controls="ariaId +'_content'">
                         <span v-if="item.items" :class="getPanelToggleIcon(item)"></span>
                         <span v-if="item.icon" :class="getPanelIcon(item)"></span>
@@ -63,7 +63,7 @@ export default {
                 this.activeItem = item;
         },
         getPanelClass(item) {
-            return ['p-panelmenu-panel', item.class, {'p-disabled': item.disabled}];
+            return ['p-panelmenu-panel', item.class];
         },
         getPanelToggleIcon(item) {
             const active = item === this.activeItem;
@@ -76,7 +76,7 @@ export default {
             return item === this.activeItem;
         },
         getHeaderClass(item) {
-            return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item)}];
+            return ['p-component p-panelmenu-header', {'p-highlight': this.isActive(item), 'p-disabled': item.disabled}];
         }
     },
     components: {

src/components/panelmenu/PanelMenuSub.vue

@@ -2,13 +2,13 @@
     <ul class="p-submenu-list" role="tree">
         <template v-for="(item, i) of model">
             <li role="none" :class="getItemClass(item)" :style="item.style" v-if="item.visible !== false && !item.separator" :key="item.label + i">
-                <router-link v-if="item.to" :to="item.to" class="p-menuitem-link" @click.native="onItemClick($event, item)"
+                <router-link v-if="item.to && !item.disabled" :to="item.to" :class="getLinkClass(item)" @click.native="onItemClick($event, item)"
                     role="treeitem" :aria-expanded="isActive(item)">
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </router-link>
-                <a v-else :href="item.url||'#'" class="p-menuitem-link" :target="item.target" @click="onItemClick($event, item)"
+                <a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" @click="onItemClick($event, item)"
-                    role="treeitem" :aria-expanded="isActive(item)">
+                    role="treeitem" :aria-expanded="isActive(item)" :tabindex="item.disabled ? null : '0'">
                     <span :class="getSubmenuIcon(item)" v-if="item.items"></span>
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
@@ -62,7 +62,10 @@ export default {
                 this.activeItem = item;
         },
         getItemClass(item) {
-            return ['p-menuitem', item.className, {'p-disabled': item.disabled}];
+            return ['p-menuitem', item.className];
+        },
+        getLinkClass(item) {
+            return ['p-menuitem-link', {'p-disabled': item.disabled}];
         },
         isActive(item) {
             return item === this.activeItem;