primevue 3.17.0 → 3.18.0

package/menu/menu.esm.js

@@ -1,31 +1,40 @@
-import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler } from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
-import Ripple from 'primevue/ripple';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, createBlock, withCtx, withDirectives, createCommentVNode, createElementVNode, toDisplayString, resolveDynamicComponent, createVNode, Transition, mergeProps, renderList, renderSlot, createTextVNode } from 'vue';
 import Portal from 'primevue/portal';
+import { ObjectUtils, ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, UniqueComponentId } from 'primevue/utils';
+import Ripple from 'primevue/ripple';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, createBlock, withCtx, withDirectives, createCommentVNode, toDisplayString, resolveDynamicComponent, createVNode, Transition, mergeProps, renderList, renderSlot, createTextVNode } from 'vue';
 
 var script$1 = {
     name: 'Menuitem',
     inheritAttrs: false,
-    emits: ['click'],
+    emits: ['item-click'],
     props: {
         item: null,
         template: null,
-        exact: null
+        exact: null,
+        id: null,
+        focusedOptionId: null
     },
     methods: {
-        onClick(event, navigate) {
-            this.$emit('click', {
-                originalEvent: event,
-                item: this.item,
-                navigate: navigate
-            });
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        onItemClick(event) {
+            const command = this.getItemProp(this.item, 'command');
+
+            command && command({ originalEvent: event, item: this.item.item });
+            this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id });
+        },
+        containerClass() {
+            return ['p-menuitem', this.item.class, { 'p-focus': this.id === this.focusedOptionId, 'p-disabled': this.disabled() }];
         },
-        linkClass(item, routerProps) {
+        linkClass(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
                 }
@@ -34,27 +43,23 @@ var script$1 = {
         visible() {
             return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
         },
-        disabled(item) {
-            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+        disabled() {
+            return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;
         },
         label() {
             return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
         }
     },
-    computed: {
-        containerClass() {
-            return ['p-menuitem', this.item.class];
-        }
-    },
     directives: {
         ripple: Ripple
     }
 };
 
-const _hoisted_1$1 = ["href", "onClick"];
-const _hoisted_2$1 = { class: "p-menuitem-text" };
-const _hoisted_3 = ["href", "target", "tabindex"];
-const _hoisted_4 = { class: "p-menuitem-text" };
+const _hoisted_1$1 = ["id", "aria-label", "aria-disabled"];
+const _hoisted_2$1 = ["href", "onClick"];
+const _hoisted_3$1 = { class: "p-menuitem-text" };
+const _hoisted_4 = ["href", "target"];
+const _hoisted_5 = { class: "p-menuitem-text" };
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = resolveComponent("router-link");
@@ -63,63 +68,71 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return ($options.visible())
     ? (openBlock(), createElementBlock("li", {
         key: 0,
-        class: normalizeClass($options.containerClass),
-        role: "none",
-        style: normalizeStyle($props.item.style)
+        id: $props.id,
+        class: normalizeClass($options.containerClass()),
+        role: "menuitem",
+        style: normalizeStyle($props.item.style),
+        "aria-label": $options.label(),
+        "aria-disabled": $options.disabled()
       }, [
-        (!$props.template)
-          ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-              ($props.item.to && !$options.disabled($props.item))
-                ? (openBlock(), createBlock(_component_router_link, {
-                    key: 0,
-                    to: $props.item.to,
-                    custom: ""
-                  }, {
-                    default: withCtx(({ navigate, href, isActive, isExactActive }) => [
-                      withDirectives((openBlock(), createElementBlock("a", {
-                        href: href,
-                        onClick: $event => ($options.onClick($event, navigate)),
-                        class: normalizeClass($options.linkClass($props.item, { isActive, isExactActive })),
-                        role: "menuitem"
-                      }, [
-                        ($props.item.icon)
-                          ? (openBlock(), createElementBlock("span", {
-                              key: 0,
-                              class: normalizeClass(['p-menuitem-icon', $props.item.icon])
-                            }, null, 2))
-                          : createCommentVNode("", true),
-                        createElementVNode("span", _hoisted_2$1, toDisplayString($options.label()), 1)
-                      ], 10, _hoisted_1$1)), [
-                        [_directive_ripple]
-                      ])
-                    ]),
-                    _: 1
-                  }, 8, ["to"]))
-                : withDirectives((openBlock(), createElementBlock("a", {
-                    key: 1,
-                    href: $props.item.url,
-                    class: normalizeClass($options.linkClass($props.item)),
-                    onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
-                    target: $props.item.target,
-                    role: "menuitem",
-                    tabindex: $options.disabled($props.item) ? null : '0'
-                  }, [
-                    ($props.item.icon)
-                      ? (openBlock(), createElementBlock("span", {
-                          key: 0,
-                          class: normalizeClass(['p-menuitem-icon', $props.item.icon])
-                        }, null, 2))
-                      : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_4, toDisplayString($options.label()), 1)
-                  ], 10, _hoisted_3)), [
-                    [_directive_ripple]
-                  ])
-            ], 64))
-          : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
-              key: 1,
-              item: $props.item
-            }, null, 8, ["item"]))
-      ], 6))
+        createElementVNode("div", {
+          class: "p-menuitem-content",
+          onClick: _cache[0] || (_cache[0] = $event => ($options.onItemClick($event)))
+        }, [
+          (!$props.template)
+            ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                ($props.item.to && !$options.disabled())
+                  ? (openBlock(), createBlock(_component_router_link, {
+                      key: 0,
+                      to: $props.item.to,
+                      custom: ""
+                    }, {
+                      default: withCtx(({ navigate, href, isActive, isExactActive }) => [
+                        withDirectives((openBlock(), createElementBlock("a", {
+                          href: href,
+                          class: normalizeClass($options.linkClass({ isActive, isExactActive })),
+                          tabindex: "-1",
+                          "aria-hidden": "true",
+                          onClick: $event => ($options.onItemActionClick($event, navigate))
+                        }, [
+                          ($props.item.icon)
+                            ? (openBlock(), createElementBlock("span", {
+                                key: 0,
+                                class: normalizeClass(['p-menuitem-icon', $props.item.icon])
+                              }, null, 2))
+                            : createCommentVNode("", true),
+                          createElementVNode("span", _hoisted_3$1, toDisplayString($options.label()), 1)
+                        ], 10, _hoisted_2$1)), [
+                          [_directive_ripple]
+                        ])
+                      ]),
+                      _: 1
+                    }, 8, ["to"]))
+                  : withDirectives((openBlock(), createElementBlock("a", {
+                      key: 1,
+                      href: $props.item.url,
+                      class: normalizeClass($options.linkClass()),
+                      target: $props.item.target,
+                      tabindex: "-1",
+                      "aria-hidden": "true"
+                    }, [
+                      ($props.item.icon)
+                        ? (openBlock(), createElementBlock("span", {
+                            key: 0,
+                            class: normalizeClass(['p-menuitem-icon', $props.item.icon])
+                          }, null, 2))
+                        : createCommentVNode("", true),
+                      createElementVNode("span", _hoisted_5, toDisplayString($options.label()), 1)
+                    ], 10, _hoisted_4)), [
+                      [_directive_ripple]
+                    ])
+              ], 64))
+            : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
+                key: 1,
+                item: $props.item
+              }, null, 8, ["item"]))
+        ])
+      ], 14, _hoisted_1$1))
     : createCommentVNode("", true)
 }
 
@@ -128,7 +141,7 @@ script$1.render = render$1;
 var script = {
     name: 'Menu',
     inheritAttrs: false,
-    emits: ['show', 'hide'],
+    emits: ['show', 'hide', 'focus', 'blur'],
     props: {
         popup: {
             type: Boolean,
@@ -153,11 +166,26 @@ var script = {
         exact: {
             type: Boolean,
             default: true
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
         }
     },
     data() {
         return {
-            overlayVisible: false
+            overlayVisible: false,
+            focused: false,
+            focusedOptionIndex: -1,
+            selectedOptionIndex: -1
         };
     },
     target: null,
@@ -165,6 +193,13 @@ var script = {
     scrollHandler: null,
     resizeListener: null,
     container: null,
+    list: null,
+    mounted() {
+        if (!this.popup) {
+            this.bindResizeListener();
+            this.bindOutsideClickListener();
+        }
+    },
     beforeUnmount() {
         this.unbindResizeListener();
         this.unbindOutsideClickListener();
@@ -198,7 +233,115 @@ var script = {
                 event.navigate(event.originalEvent);
             }
 
-            this.hide();
+            if (this.overlayVisible) this.hide();
+
+            if (!this.popup && this.focusedOptionIndex !== event.id) {
+                this.focusedOptionIndex = event.id;
+            }
+        },
+        onListFocus(event) {
+            this.focused = true;
+
+            if (!this.popup) {
+                if (this.selectedOptionIndex !== -1) {
+                    this.changeFocusedOptionIndex(this.selectedOptionIndex);
+                    this.selectedOptionIndex = -1;
+                } else this.changeFocusedOptionIndex(0);
+            }
+
+            this.$emit('focus', event);
+        },
+        onListBlur(event) {
+            this.focused = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onListKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'Enter':
+                    this.onEnterKey(event);
+                    break;
+
+                case 'Space':
+                    this.onSpaceKey(event);
+                    break;
+
+                case 'Tab':
+                    this.overlayVisible && this.hide();
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+
+            this.changeFocusedOptionIndex(optionIndex);
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            if (event.altKey && this.popup) {
+                DomHandler.focus(this.target);
+                this.hide();
+                event.preventDefault();
+            } else {
+                const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+
+                this.changeFocusedOptionIndex(optionIndex);
+                event.preventDefault();
+            }
+        },
+        onHomeKey(event) {
+            this.changeFocusedOptionIndex(0);
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            this.changeFocusedOptionIndex(DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)').length - 1);
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
+            const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-link');
+
+            this.popup && DomHandler.focus(this.target);
+            anchorElement ? anchorElement.click() : element && element.click();
+
+            event.preventDefault();
+        },
+        onSpaceKey(event) {
+            this.onEnterKey(event);
+        },
+        findNextOptionIndex(index) {
+            const links = DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+            const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        },
+        findPrevOptionIndex(index) {
+            const links = DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+            const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        },
+        changeFocusedOptionIndex(index) {
+            const links = DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+            let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+
+            this.focusedOptionIndex = links[order].getAttribute('id');
         },
         toggle(event) {
             if (this.overlayVisible) this.hide();
@@ -222,6 +365,11 @@ var script = {
                 ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
             }
 
+            if (this.popup) {
+                DomHandler.focus(this.list);
+                this.changeFocusedOptionIndex(0);
+            }
+
             this.$emit('show');
         },
         onLeave() {
@@ -242,8 +390,13 @@ var script = {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.overlayVisible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
+                    const isOutsideContainer = this.container && !this.container.contains(event.target);
+                    const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
+
+                    if (this.overlayVisible && isOutsideContainer && isOutsideTarget) {
                         this.hide();
+                    } else if (!this.popup && isOutsideContainer && isOutsideTarget) {
+                        this.focusedOptionIndex = -1;
                     }
                 };
 
@@ -289,9 +442,6 @@ var script = {
                 this.resizeListener = null;
             }
         },
-        isTargetClicked(event) {
-            return this.target && (this.target === event.target || this.target.contains(event.target));
-        },
         visible(item) {
             return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
@@ -309,6 +459,9 @@ var script = {
                 originalEvent: event,
                 target: this.target
             });
+        },
+        listRef(el) {
+            this.list = el;
         }
     },
     computed: {
@@ -321,25 +474,29 @@ var script = {
                     'p-ripple-disabled': this.$primevue.config.ripple === false
                 }
             ];
+        },
+        separatorClass(item) {
+            return ['p-menu-separator p-menuitem-separator', item.class]; // TODO: the 'p-menu-separator' class is deprecated since v3.18.0.
+        },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
         }
     },
     components: {
-        Menuitem: script$1,
+        PVMenuitem: script$1,
         Portal: Portal
     }
 };
 
-const _hoisted_1 = {
-  class: "p-menu-list p-reset",
-  role: "menu"
-};
-const _hoisted_2 = {
-  key: 0,
-  class: "p-submenu-header"
-};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
+const _hoisted_3 = ["id"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Menuitem = resolveComponent("Menuitem");
+  const _component_PVMenuitem = resolveComponent("PVMenuitem");
   const _component_Portal = resolveComponent("Portal");
 
   return (openBlock(), createBlock(_component_Portal, {
@@ -358,11 +515,24 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (openBlock(), createElementBlock("div", mergeProps({
                 key: 0,
                 ref: $options.containerRef,
+                id: $options.id,
                 class: $options.containerClass
               }, _ctx.$attrs, {
-                onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
               }), [
-                createElementVNode("ul", _hoisted_1, [
+                createElementVNode("ul", {
+                  ref: $options.listRef,
+                  id: $options.id + '_list',
+                  class: "p-menu-list p-reset",
+                  role: "menu",
+                  tabindex: $props.tabindex,
+                  "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+                  "aria-label": _ctx.ariaLabel,
+                  "aria-labelledby": _ctx.ariaLabelledby,
+                  onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onListFocus && $options.onListFocus(...args))),
+                  onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onListBlur && $options.onListBlur(...args))),
+                  onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onListKeyDown && $options.onListKeyDown(...args)))
+                }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, i) => {
                     return (openBlock(), createElementBlock(Fragment, {
                       key: $options.label(item) + i.toString()
@@ -370,28 +540,35 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       (item.items && $options.visible(item) && !item.separator)
                         ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                             (item.items)
-                              ? (openBlock(), createElementBlock("li", _hoisted_2, [
+                              ? (openBlock(), createElementBlock("li", {
+                                  key: 0,
+                                  id: $options.id + '_' + i,
+                                  class: "p-submenu-header",
+                                  role: "none"
+                                }, [
                                   renderSlot(_ctx.$slots, "item", { item: item }, () => [
                                     createTextVNode(toDisplayString($options.label(item)), 1)
                                   ])
-                                ]))
+                                ], 8, _hoisted_3))
                               : createCommentVNode("", true),
                             (openBlock(true), createElementBlock(Fragment, null, renderList(item.items, (child, j) => {
                               return (openBlock(), createElementBlock(Fragment, {
-                                key: child.label + i + j
+                                key: child.label + i + '_' + j
                               }, [
                                 ($options.visible(child) && !child.separator)
-                                  ? (openBlock(), createBlock(_component_Menuitem, {
+                                  ? (openBlock(), createBlock(_component_PVMenuitem, {
                                       key: 0,
+                                      id: $options.id + '_' + i + '_' + j,
                                       item: child,
-                                      onClick: $options.itemClick,
                                       template: _ctx.$slots.item,
-                                      exact: $props.exact
-                                    }, null, 8, ["item", "onClick", "template", "exact"]))
+                                      exact: $props.exact,
+                                      focusedOptionId: $options.focusedOptionId,
+                                      onItemClick: $options.itemClick
+                                    }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                                   : ($options.visible(child) && child.separator)
                                     ? (openBlock(), createElementBlock("li", {
                                         key: 'separator' + i + j,
-                                        class: normalizeClass(['p-menu-separator', child.class]),
+                                        class: normalizeClass($options.separatorClass(item)),
                                         style: normalizeStyle(child.style),
                                         role: "separator"
                                       }, null, 6))
@@ -402,21 +579,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         : ($options.visible(item) && item.separator)
                           ? (openBlock(), createElementBlock("li", {
                               key: 'separator' + i.toString(),
-                              class: normalizeClass(['p-menu-separator', item.class]),
+                              class: normalizeClass($options.separatorClass(item)),
                               style: normalizeStyle(item.style),
                               role: "separator"
                             }, null, 6))
-                          : (openBlock(), createBlock(_component_Menuitem, {
+                          : (openBlock(), createBlock(_component_PVMenuitem, {
                               key: $options.label(item) + i.toString(),
+                              id: $options.id + '_' + i,
                               item: item,
-                              onClick: $options.itemClick,
                               template: _ctx.$slots.item,
-                              exact: $props.exact
-                            }, null, 8, ["item", "onClick", "template", "exact"]))
+                              exact: $props.exact,
+                              focusedOptionId: $options.focusedOptionId,
+                              onItemClick: $options.itemClick
+                            }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                     ], 64))
                   }), 128))
-                ])
-              ], 16))
+                ], 40, _hoisted_2)
+              ], 16, _hoisted_1))
             : createCommentVNode("", true)
         ]),
         _: 3

package/menu/menu.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t,ConnectedOverlayScrollHandler as i}from"primevue/utils";import n from"primevue/overlayeventbus";import l from"primevue/ripple";import{resolveComponent as s,resolveDirective as r,openBlock as a,createElementBlock as o,normalizeClass as c,normalizeStyle as d,Fragment as u,createBlock as m,withCtx as p,withDirectives as h,createCommentVNode as b,createElementVNode as v,toDisplayString as y,resolveDynamicComponent as k,createVNode as f,Transition as g,mergeProps as C,renderList as L,renderSlot as x,createTextVNode as E}from"vue";import z from"primevue/portal";var A={name:"Menuitem",inheritAttrs:!1,emits:["click"],props:{item:null,template:null,exact:null},methods:{onClick(e,t){this.$emit("click",{originalEvent:e,item:this.item,navigate:t})},linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label(){return"function"==typeof this.item.label?this.item.label():this.item.label}},computed:{containerClass(){return["p-menuitem",this.item.class]}},directives:{ripple:l}};const S=["href","onClick"],w={class:"p-menuitem-text"},O=["href","target","tabindex"],T={class:"p-menuitem-text"};A.render=function(e,t,i,n,l,f){const g=s("router-link"),C=r("ripple");return f.visible()?(a(),o("li",{key:0,class:c(f.containerClass),role:"none",style:d(i.item.style)},[i.template?(a(),m(k(i.template),{key:1,item:i.item},null,8,["item"])):(a(),o(u,{key:0},[i.item.to&&!f.disabled(i.item)?(a(),m(g,{key:0,to:i.item.to,custom:""},{default:p((({navigate:e,href:t,isActive:n,isExactActive:l})=>[h((a(),o("a",{href:t,onClick:t=>f.onClick(t,e),class:c(f.linkClass(i.item,{isActive:n,isExactActive:l})),role:"menuitem"},[i.item.icon?(a(),o("span",{key:0,class:c(["p-menuitem-icon",i.item.icon])},null,2)):b("",!0),v("span",w,y(f.label()),1)],10,S)),[[C]])])),_:1},8,["to"])):h((a(),o("a",{key:1,href:i.item.url,class:c(f.linkClass(i.item)),onClick:t[0]||(t[0]=(...e)=>f.onClick&&f.onClick(...e)),target:i.item.target,role:"menuitem",tabindex:f.disabled(i.item)?null:"0"},[i.item.icon?(a(),o("span",{key:0,class:c(["p-menuitem-icon",i.item.icon])},null,2)):b("",!0),v("span",T,y(f.label()),1)],10,O)),[[C]])],64))],6)):b("",!0)};var $={name:"Menu",inheritAttrs:!1,emits:["show","hide"],props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0}},data:()=>({overlayVisible:!1}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,beforeUnmount(){this.unbindResizeListener(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.target=null,this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},methods:{itemClick(e){const t=e.item;this.disabled(t)||(t.command&&t.command(e),t.to&&e.navigate&&e.navigate(e.originalEvent),this.hide())},toggle(e){this.overlayVisible?this.hide():this.show(e)},show(e){this.overlayVisible=!0,this.target=e.currentTarget},hide(){this.overlayVisible=!1,this.target=null},onEnter(t){this.alignOverlay(),this.bindOutsideClickListener(),this.bindResizeListener(),this.bindScrollListener(),this.autoZIndex&&e.set("menu",t,this.baseZIndex+this.$primevue.config.zIndex.menu),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.unbindScrollListener(),this.$emit("hide")},onAfterLeave(t){this.autoZIndex&&e.clear(t)},alignOverlay(){t.absolutePosition(this.container,this.target),this.container.style.minWidth=t.getOuterWidth(this.target)+"px"},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.overlayVisible&&this.container&&!this.container.contains(e.target)&&!this.isTargetClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new i(this.target,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!t.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},isTargetClicked(e){return this.target&&(this.target===e.target||this.target.contains(e.target))},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,containerRef(e){this.container=e},onOverlayClick(e){n.emit("overlay-click",{originalEvent:e,target:this.target})}},computed:{containerClass(){return["p-menu p-component",{"p-menu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]}},components:{Menuitem:A,Portal:z}};const H={class:"p-menu-list p-reset",role:"menu"},V={key:0,class:"p-submenu-header"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-menu-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-menu ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menu .p-menuitem-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menu .p-menuitem-text {\n    line-height: 1;\n}\n"),$.render=function(e,t,i,n,l,r){const h=s("Menuitem"),k=s("Portal");return a(),m(k,{appendTo:i.appendTo,disabled:!i.popup},{default:p((()=>[f(g,{name:"p-connected-overlay",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave},{default:p((()=>[!i.popup||l.overlayVisible?(a(),o("div",C({key:0,ref:r.containerRef,class:r.containerClass},e.$attrs,{onClick:t[0]||(t[0]=(...e)=>r.onOverlayClick&&r.onOverlayClick(...e))}),[v("ul",H,[(a(!0),o(u,null,L(i.model,((t,n)=>(a(),o(u,{key:r.label(t)+n.toString()},[t.items&&r.visible(t)&&!t.separator?(a(),o(u,{key:0},[t.items?(a(),o("li",V,[x(e.$slots,"item",{item:t},(()=>[E(y(r.label(t)),1)]))])):b("",!0),(a(!0),o(u,null,L(t.items,((t,l)=>(a(),o(u,{key:t.label+n+l},[r.visible(t)&&!t.separator?(a(),m(h,{key:0,item:t,onClick:r.itemClick,template:e.$slots.item,exact:i.exact},null,8,["item","onClick","template","exact"])):r.visible(t)&&t.separator?(a(),o("li",{key:"separator"+n+l,class:c(["p-menu-separator",t.class]),style:d(t.style),role:"separator"},null,6)):b("",!0)],64)))),128))],64)):r.visible(t)&&t.separator?(a(),o("li",{key:"separator"+n.toString(),class:c(["p-menu-separator",t.class]),style:d(t.style),role:"separator"},null,6)):(a(),m(h,{key:r.label(t)+n.toString(),item:t,onClick:r.itemClick,template:e.$slots.item,exact:i.exact},null,8,["item","onClick","template","exact"]))],64)))),128))])],16)):b("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo","disabled"])};export{$ as default};
+import e from"primevue/overlayeventbus";import i from"primevue/portal";import{ObjectUtils as t,ZIndexUtils as n,DomHandler as s,ConnectedOverlayScrollHandler as l,UniqueComponentId as o}from"primevue/utils";import a from"primevue/ripple";import{resolveComponent as r,resolveDirective as d,openBlock as c,createElementBlock as u,normalizeClass as p,normalizeStyle as h,createElementVNode as m,Fragment as b,createBlock as f,withCtx as v,withDirectives as y,createCommentVNode as x,toDisplayString as k,resolveDynamicComponent as g,createVNode as I,Transition as L,mergeProps as O,renderList as C,renderSlot as w,createTextVNode as E}from"vue";var A={name:"Menuitem",inheritAttrs:!1,emits:["item-click"],props:{item:null,template:null,exact:null,id:null,focusedOptionId:null},methods:{getItemProp:(e,i)=>e&&e.item?t.getItemValue(e.item[i]):void 0,onItemActionClick(e,i){i&&i(e)},onItemClick(e){const i=this.getItemProp(this.item,"command");i&&i({originalEvent:e,item:this.item.item}),this.$emit("item-click",{originalEvent:e,item:this.item,id:this.id})},containerClass(){return["p-menuitem",this.item.class,{"p-focus":this.id===this.focusedOptionId,"p-disabled":this.disabled()}]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label}},directives:{ripple:a}};const S=["id","aria-label","aria-disabled"],K=["href","onClick"],z={class:"p-menuitem-text"},$=["href","target"],D={class:"p-menuitem-text"};A.render=function(e,i,t,n,s,l){const o=r("router-link"),a=d("ripple");return l.visible()?(c(),u("li",{key:0,id:t.id,class:p(l.containerClass()),role:"menuitem",style:h(t.item.style),"aria-label":l.label(),"aria-disabled":l.disabled()},[m("div",{class:"p-menuitem-content",onClick:i[0]||(i[0]=e=>l.onItemClick(e))},[t.template?(c(),f(g(t.template),{key:1,item:t.item},null,8,["item"])):(c(),u(b,{key:0},[t.item.to&&!l.disabled()?(c(),f(o,{key:0,to:t.item.to,custom:""},{default:v((({navigate:e,href:i,isActive:n,isExactActive:s})=>[y((c(),u("a",{href:i,class:p(l.linkClass({isActive:n,isExactActive:s})),tabindex:"-1","aria-hidden":"true",onClick:i=>l.onItemActionClick(i,e)},[t.item.icon?(c(),u("span",{key:0,class:p(["p-menuitem-icon",t.item.icon])},null,2)):x("",!0),m("span",z,k(l.label()),1)],10,K)),[[a]])])),_:1},8,["to"])):y((c(),u("a",{key:1,href:t.item.url,class:p(l.linkClass()),target:t.item.target,tabindex:"-1","aria-hidden":"true"},[t.item.icon?(c(),u("span",{key:0,class:p(["p-menuitem-icon",t.item.icon])},null,2)):x("",!0),m("span",D,k(l.label()),1)],10,$)),[[a]])],64))])],14,S)):x("",!0)};var V={name:"Menu",inheritAttrs:!1,emits:["show","hide","focus","blur"],props:{popup:{type:Boolean,default:!1},model:{type:Array,default:null},appendTo:{type:String,default:"body"},autoZIndex:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},exact:{type:Boolean,default:!0},tabindex:{type:Number,default:0},"aria-label":{type:String,default:null},"aria-labelledby":{type:String,default:null}},data:()=>({overlayVisible:!1,focused:!1,focusedOptionIndex:-1,selectedOptionIndex:-1}),target:null,outsideClickListener:null,scrollHandler:null,resizeListener:null,container:null,list:null,mounted(){this.popup||(this.bindResizeListener(),this.bindOutsideClickListener())},beforeUnmount(){this.unbindResizeListener(),this.unbindOutsideClickListener(),this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.target=null,this.container&&this.autoZIndex&&n.clear(this.container),this.container=null},methods:{itemClick(e){const i=e.item;this.disabled(i)||(i.command&&i.command(e),i.to&&e.navigate&&e.navigate(e.originalEvent),this.overlayVisible&&this.hide(),this.popup||this.focusedOptionIndex===e.id||(this.focusedOptionIndex=e.id))},onListFocus(e){this.focused=!0,this.popup||(-1!==this.selectedOptionIndex?(this.changeFocusedOptionIndex(this.selectedOptionIndex),this.selectedOptionIndex=-1):this.changeFocusedOptionIndex(0)),this.$emit("focus",e)},onListBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onListKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDownKey(e);break;case"ArrowUp":this.onArrowUpKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e);break;case"Enter":this.onEnterKey(e);break;case"Space":this.onSpaceKey(e);break;case"Tab":this.overlayVisible&&this.hide()}},onArrowDownKey(e){const i=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(i),e.preventDefault()},onArrowUpKey(e){if(e.altKey&&this.popup)s.focus(this.target),this.hide(),e.preventDefault();else{const i=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(i),e.preventDefault()}},onHomeKey(e){this.changeFocusedOptionIndex(0),e.preventDefault()},onEndKey(e){this.changeFocusedOptionIndex(s.find(this.container,"li.p-menuitem:not(.p-disabled)").length-1),e.preventDefault()},onEnterKey(e){const i=s.findSingle(this.list,`li[id="${this.focusedOptionIndex}"]`),t=i&&s.findSingle(i,".p-menuitem-link");this.popup&&s.focus(this.target),t?t.click():i&&i.click(),e.preventDefault()},onSpaceKey(e){this.onEnterKey(e)},findNextOptionIndex(e){const i=[...s.find(this.container,"li.p-menuitem:not(.p-disabled)")].findIndex((i=>i.id===e));return i>-1?i+1:0},findPrevOptionIndex(e){const i=[...s.find(this.container,"li.p-menuitem:not(.p-disabled)")].findIndex((i=>i.id===e));return i>-1?i-1:0},changeFocusedOptionIndex(e){const i=s.find(this.container,"li.p-menuitem:not(.p-disabled)");let t=e>=i.length?i.length-1:e<0?0:e;this.focusedOptionIndex=i[t].getAttribute("id")},toggle(e){this.overlayVisible?this.hide():this.show(e)},show(e){this.overlayVisible=!0,this.target=e.currentTarget},hide(){this.overlayVisible=!1,this.target=null},onEnter(e){this.alignOverlay(),this.bindOutsideClickListener(),this.bindResizeListener(),this.bindScrollListener(),this.autoZIndex&&n.set("menu",e,this.baseZIndex+this.$primevue.config.zIndex.menu),this.popup&&(s.focus(this.list),this.changeFocusedOptionIndex(0)),this.$emit("show")},onLeave(){this.unbindOutsideClickListener(),this.unbindResizeListener(),this.unbindScrollListener(),this.$emit("hide")},onAfterLeave(e){this.autoZIndex&&n.clear(e)},alignOverlay(){s.absolutePosition(this.container,this.target),this.container.style.minWidth=s.getOuterWidth(this.target)+"px"},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{const i=this.container&&!this.container.contains(e.target),t=!(this.target&&(this.target===e.target||this.target.contains(e.target)));this.overlayVisible&&i&&t?this.hide():!this.popup&&i&&t&&(this.focusedOptionIndex=-1)},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},bindScrollListener(){this.scrollHandler||(this.scrollHandler=new l(this.target,(()=>{this.overlayVisible&&this.hide()}))),this.scrollHandler.bindScrollListener()},unbindScrollListener(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},bindResizeListener(){this.resizeListener||(this.resizeListener=()=>{this.overlayVisible&&!s.isTouchDevice()&&this.hide()},window.addEventListener("resize",this.resizeListener))},unbindResizeListener(){this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null)},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,containerRef(e){this.container=e},onOverlayClick(i){e.emit("overlay-click",{originalEvent:i,target:this.target})},listRef(e){this.list=e}},computed:{containerClass(){return["p-menu p-component",{"p-menu-overlay":this.popup,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},separatorClass:e=>["p-menu-separator p-menuitem-separator",e.class],id(){return this.$attrs.id||o()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{PVMenuitem:A,Portal:i}};const F=["id"],H=["id","tabindex","aria-activedescendant","aria-label","aria-labelledby"],R=["id"];!function(e,i){void 0===i&&(i={});var t=i.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===t&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-menu-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-menu ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-menu .p-menuitem-link {\n    cursor: pointer;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-menu .p-menuitem-text {\n    line-height: 1;\n}\n"),V.render=function(e,i,t,n,s,l){const o=r("PVMenuitem"),a=r("Portal");return c(),f(a,{appendTo:t.appendTo,disabled:!t.popup},{default:v((()=>[I(L,{name:"p-connected-overlay",onEnter:l.onEnter,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave},{default:v((()=>[!t.popup||s.overlayVisible?(c(),u("div",O({key:0,ref:l.containerRef,id:l.id,class:l.containerClass},e.$attrs,{onClick:i[3]||(i[3]=(...e)=>l.onOverlayClick&&l.onOverlayClick(...e))}),[m("ul",{ref:l.listRef,id:l.id+"_list",class:"p-menu-list p-reset",role:"menu",tabindex:t.tabindex,"aria-activedescendant":s.focused?l.focusedOptionId:void 0,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,onFocus:i[0]||(i[0]=(...e)=>l.onListFocus&&l.onListFocus(...e)),onBlur:i[1]||(i[1]=(...e)=>l.onListBlur&&l.onListBlur(...e)),onKeydown:i[2]||(i[2]=(...e)=>l.onListKeyDown&&l.onListKeyDown(...e))},[(c(!0),u(b,null,C(t.model,((i,n)=>(c(),u(b,{key:l.label(i)+n.toString()},[i.items&&l.visible(i)&&!i.separator?(c(),u(b,{key:0},[i.items?(c(),u("li",{key:0,id:l.id+"_"+n,class:"p-submenu-header",role:"none"},[w(e.$slots,"item",{item:i},(()=>[E(k(l.label(i)),1)]))],8,R)):x("",!0),(c(!0),u(b,null,C(i.items,((s,a)=>(c(),u(b,{key:s.label+n+"_"+a},[l.visible(s)&&!s.separator?(c(),f(o,{key:0,id:l.id+"_"+n+"_"+a,item:s,template:e.$slots.item,exact:t.exact,focusedOptionId:l.focusedOptionId,onItemClick:l.itemClick},null,8,["id","item","template","exact","focusedOptionId","onItemClick"])):l.visible(s)&&s.separator?(c(),u("li",{key:"separator"+n+a,class:p(l.separatorClass(i)),style:h(s.style),role:"separator"},null,6)):x("",!0)],64)))),128))],64)):l.visible(i)&&i.separator?(c(),u("li",{key:"separator"+n.toString(),class:p(l.separatorClass(i)),style:h(i.style),role:"separator"},null,6)):(c(),f(o,{key:l.label(i)+n.toString(),id:l.id+"_"+n,item:i,template:e.$slots.item,exact:t.exact,focusedOptionId:l.focusedOptionId,onItemClick:l.itemClick},null,8,["id","item","template","exact","focusedOptionId","onItemClick"]))],64)))),128))],40,H)],16,F)):x("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3},8,["appendTo","disabled"])};export{V as default};