primevue 3.16.2 → 3.17.0

package/tieredmenu/TieredMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="popup ? visible : true" :ref="containerRef" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
                 <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
             </div>
         </transition>
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import TieredMenuSub from './TieredMenuSub.vue';
@@ -22,7 +22,7 @@ export default {
             type: Boolean,
             default: false
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -61,26 +61,29 @@ export default {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.target = null;
+
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     methods: {
         itemClick(event) {
             const item = event.item;
+
             if (item.command) {
                 item.command(event);
                 event.originalEvent.preventDefault();
             }
+
             this.hide();
         },
         toggle(event) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event);
+            if (this.visible) this.hide();
+            else this.show(event);
         },
         show(event) {
             this.visible = true;
@@ -120,6 +123,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -152,6 +156,7 @@ export default {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -181,18 +186,21 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-tieredmenu p-component', {
-                'p-tieredmenu-overlay': this.popup,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-tieredmenu p-component',
+                {
+                    'p-tieredmenu-overlay': this.popup,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'TieredMenuSub': TieredMenuSub,
-        'Portal': Portal
+        TieredMenuSub: TieredMenuSub,
+        Portal: Portal
     }
-}
+};
 </script>
 
 <style>

package/tieredmenu/TieredMenuSub.vue

@@ -1,33 +1,42 @@
 <template>
     <ul ref="element" :class="containerClass" role="'menubar' : 'menu'" aria-orientation="horizontal">
         <template v-for="(item, i) of model" :key="label(item) + i.toString()">
-            <li :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
-                @mouseenter="onItemMouseEnter($event, item)" role="none">
+            <li v-if="visible(item) && !item.separator" :class="getItemClass(item)" :style="item.style" @mouseenter="onItemMouseEnter($event, item)" role="none">
                 <template v-if="!template">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                        <a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
-                            <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                            <span class="p-menuitem-text">{{label(item)}}</span>
+                    <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
+                        <a v-ripple :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, { isActive, isExactActive })" @keydown="onItemKeyDown($event, item)" role="menuitem">
+                            <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                            <span class="p-menuitem-text">{{ label(item) }}</span>
                         </a>
                     </router-link>
-                    <a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
-                        @click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
-                        <span :class="['p-menuitem-icon', item.icon]" v-if="item.icon"></span>
-                        <span class="p-menuitem-text">{{label(item)}}</span>
-                        <span class="p-submenu-icon pi pi-angle-right" v-if="item.items"></span>
+                    <a
+                        v-else
+                        v-ripple
+                        :href="item.url"
+                        :class="linkClass(item)"
+                        :target="item.target"
+                        :aria-haspopup="item.items != null"
+                        :aria-expanded="item === activeItem"
+                        @click="onItemClick($event, item)"
+                        @keydown="onItemKeyDown($event, item)"
+                        role="menuitem"
+                        :tabindex="disabled(item) ? null : '0'"
+                    >
+                        <span v-if="item.icon" :class="['p-menuitem-icon', item.icon]"></span>
+                        <span class="p-menuitem-text">{{ label(item) }}</span>
+                        <span v-if="item.items" class="p-submenu-icon pi pi-angle-right"></span>
                     </a>
                 </template>
                 <component v-else :is="template" :item="item"></component>
-                <TieredMenuSub :model="item.items" v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :template="template"
-                    @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
+                <TieredMenuSub v-if="visible(item) && item.items" :key="label(item) + '_sub_'" :model="item.items" :template="template" @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :exact="exact" />
             </li>
-            <li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
+            <li v-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="['p-menu-separator', item.class]" :style="item.style" role="separator"></li>
         </template>
     </ul>
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -60,6 +69,11 @@ export default {
         }
     },
     documentClickListener: null,
+    data() {
+        return {
+            activeItem: null
+        };
+    },
     watch: {
         parentActive(newValue) {
             if (!newValue) {
@@ -67,11 +81,6 @@ export default {
             }
         }
     },
-    data() {
-        return {
-            activeItem: null
-        }
-    },
     updated() {
         if (this.root && this.activeItem) {
             this.bindDocumentClickListener();
@@ -84,6 +93,7 @@ export default {
         onItemMouseEnter(event, item) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -91,14 +101,14 @@ export default {
                 if (this.activeItem || this.popup) {
                     this.activeItem = item;
                 }
-            }
-            else {
+            } else {
                 this.activeItem = item;
             }
         },
         onItemClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -110,10 +120,8 @@ export default {
             }
 
             if (item.items) {
-                if (this.activeItem && item === this.activeItem)
-                    this.activeItem = null;
-                else
-                    this.activeItem = item;
+                if (this.activeItem && item === this.activeItem) this.activeItem = null;
+                else this.activeItem = item;
             }
 
             if (!item.items) {
@@ -135,22 +143,24 @@ export default {
                 //down
                 case 40:
                     var nextItem = this.findNextItem(listItem);
+
                     if (nextItem) {
                         nextItem.children[0].focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
+
                     if (prevItem) {
                         prevItem.children[0].focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //right
                 case 39:
@@ -163,10 +173,10 @@ export default {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
 
             this.$emit('keydown-item', {
@@ -184,32 +194,33 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         getItemClass(item) {
             return [
-                'p-menuitem', item.class, {
+                'p-menuitem',
+                item.class,
+                {
                     'p-menuitem-active': this.activeItem === item
                 }
-            ]
+            ];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -230,22 +241,22 @@ export default {
             }
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return {'p-submenu-list': !this.root};
+            return { 'p-submenu-list': !this.root };
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>

package/tieredmenu/tieredmenu.cjs.js

@@ -42,6 +42,11 @@ var script$1 = {
         }
     },
     documentClickListener: null,
+    data() {
+        return {
+            activeItem: null
+        };
+    },
     watch: {
         parentActive(newValue) {
             if (!newValue) {
@@ -49,11 +54,6 @@ var script$1 = {
             }
         }
     },
-    data() {
-        return {
-            activeItem: null
-        }
-    },
     updated() {
         if (this.root && this.activeItem) {
             this.bindDocumentClickListener();
@@ -66,6 +66,7 @@ var script$1 = {
         onItemMouseEnter(event, item) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -73,14 +74,14 @@ var script$1 = {
                 if (this.activeItem || this.popup) {
                     this.activeItem = item;
                 }
-            }
-            else {
+            } else {
                 this.activeItem = item;
             }
         },
         onItemClick(event, item, navigate) {
             if (this.disabled(item)) {
                 event.preventDefault();
+
                 return;
             }
 
@@ -92,10 +93,8 @@ var script$1 = {
             }
 
             if (item.items) {
-                if (this.activeItem && item === this.activeItem)
-                    this.activeItem = null;
-                else
-                    this.activeItem = item;
+                if (this.activeItem && item === this.activeItem) this.activeItem = null;
+                else this.activeItem = item;
             }
 
             if (!item.items) {
@@ -117,22 +116,24 @@ var script$1 = {
                 //down
                 case 40:
                     var nextItem = this.findNextItem(listItem);
+
                     if (nextItem) {
                         nextItem.children[0].focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
+
                     if (prevItem) {
                         prevItem.children[0].focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //right
                 case 39:
@@ -145,7 +146,7 @@ var script$1 = {
                     }
 
                     event.preventDefault();
-                break;
+                    break;
             }
 
             this.$emit('keydown-item', {
@@ -163,32 +164,33 @@ var script$1 = {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         getItemClass(item) {
             return [
-                'p-menuitem', item.class, {
+                'p-menuitem',
+                item.class,
+                {
                     'p-menuitem-active': this.activeItem === item
                 }
-            ]
+            ];
         },
         linkClass(item, routerProps) {
-            return ['p-menuitem-link', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+            return [
+                'p-menuitem-link',
+                {
+                    'p-disabled': this.disabled(item),
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         bindDocumentClickListener() {
             if (!this.documentClickListener) {
@@ -209,22 +211,22 @@ var script$1 = {
             }
         },
         visible(item) {
-            return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         },
         label(item) {
-            return (typeof item.label === 'function' ? item.label() : item.label);
+            return typeof item.label === 'function' ? item.label() : item.label;
         }
     },
     computed: {
         containerClass() {
-            return {'p-submenu-list': !this.root};
+            return { 'p-submenu-list': !this.root };
         }
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        ripple: Ripple__default["default"]
     }
 };
 
@@ -269,11 +271,11 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           to: item.to,
                           custom: ""
                         }, {
-                          default: vue.withCtx(({navigate, href, isActive, isExactActive}) => [
+                          default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                             vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                               href: href,
                               onClick: $event => ($options.onItemClick($event, item, navigate)),
-                              class: vue.normalizeClass($options.linkClass(item, {isActive, isExactActive})),
+                              class: vue.normalizeClass($options.linkClass(item, { isActive, isExactActive })),
                               onKeydown: $event => ($options.onItemKeyDown($event, item)),
                               role: "menuitem"
                             }, [
@@ -322,8 +324,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                   }, null, 8, ["item"])),
               ($options.visible(item) && item.items)
                 ? (vue.openBlock(), vue.createBlock(_component_TieredMenuSub, {
-                    model: item.items,
                     key: $options.label(item) + '_sub_',
+                    model: item.items,
                     template: $props.template,
                     onLeafClick: $options.onLeafClick,
                     onKeydownItem: $options.onChildItemKeyDown,
@@ -335,9 +337,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
           : vue.createCommentVNode("", true),
         ($options.visible(item) && item.separator)
           ? (vue.openBlock(), vue.createElementBlock("li", {
+              key: 'separator' + i.toString(),
               class: vue.normalizeClass(['p-menu-separator', item.class]),
               style: vue.normalizeStyle(item.style),
-              key: 'separator' + i.toString(),
               role: "separator"
             }, null, 6))
           : vue.createCommentVNode("", true)
@@ -356,7 +358,7 @@ var script = {
             type: Boolean,
             default: false
         },
-		model: {
+        model: {
             type: Array,
             default: null
         },
@@ -395,26 +397,29 @@ var script = {
             this.scrollHandler.destroy();
             this.scrollHandler = null;
         }
+
         this.target = null;
+
         if (this.container && this.autoZIndex) {
             utils.ZIndexUtils.clear(this.container);
         }
+
         this.container = null;
     },
     methods: {
         itemClick(event) {
             const item = event.item;
+
             if (item.command) {
                 item.command(event);
                 event.originalEvent.preventDefault();
             }
+
             this.hide();
         },
         toggle(event) {
-            if (this.visible)
-                this.hide();
-            else
-                this.show(event);
+            if (this.visible) this.hide();
+            else this.show(event);
         },
         show(event) {
             this.visible = true;
@@ -454,6 +459,7 @@ var script = {
                         this.hide();
                     }
                 };
+
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
@@ -486,6 +492,7 @@ var script = {
                         this.hide();
                     }
                 };
+
                 window.addEventListener('resize', this.resizeListener);
             }
         },
@@ -515,16 +522,19 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-tieredmenu p-component', {
-                'p-tieredmenu-overlay': this.popup,
-                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                'p-ripple-disabled': this.$primevue.config.ripple === false
-            }];
+            return [
+                'p-tieredmenu p-component',
+                {
+                    'p-tieredmenu-overlay': this.popup,
+                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                    'p-ripple-disabled': this.$primevue.config.ripple === false
+                }
+            ];
         }
     },
     components: {
-        'TieredMenuSub': script$1,
-        'Portal': Portal__default["default"]
+        TieredMenuSub: script$1,
+        Portal: Portal__default["default"]
     }
 };