primevue/megamenu/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/megamenu/BaseMegaMenu.vue","../../src/megamenu/MegaMenuSub.vue","../../src/megamenu/MegaMenuSub.vue?vue&type=template&id=5fbd7786&lang.js","../../src/megamenu/MegaMenu.vue","../../src/megamenu/MegaMenu.vue?vue&type=template&id=8c65d226&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport MegaMenuStyle from 'primevue/megamenu/style';\n\nexport default {\n    name: 'BaseMegaMenu',\n    extends: BaseComponent,\n    props: {\n        model: {\n            type: Array,\n            default: null\n        },\n        orientation: {\n            type: String,\n            default: 'horizontal'\n        },\n        breakpoint: {\n            type: String,\n            default: '960px'\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        scrollHeight: {\n            type: String,\n            default: '20rem'\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: MegaMenuStyle,\n    provide() {\n        return {\n            $pcMegaMenu: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <ul :class=\"level === 0 ? cx('rootList') : cx('submenu')\" :tabindex=\"tabindex\" v-bind=\"level === 0 ? ptm('rootList') : ptm('submenu')\">\n        <li v-if=\"submenu\" :class=\"[cx('submenuLabel', { submenu }), getItemProp(submenu, 'class')]\" :style=\"getItemProp(submenu, 'style')\" role=\"presentation\" v-bind=\"ptm('submenuLabel')\">{{ getItemLabel(submenu) }}</li>\n        <template v-for=\"(processedItem, index) of items\" :key=\"getItemKey(processedItem)\">\n            <li\n                v-if=\"isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')\"\n                :id=\"getItemId(processedItem)\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                :class=\"[cx('item', { processedItem }), getItemProp(processedItem, 'class')]\"\n                role=\"menuitem\"\n                :aria-label=\"getItemLabel(processedItem)\"\n                :aria-disabled=\"isItemDisabled(processedItem) || undefined\"\n                :aria-expanded=\"isItemGroup(processedItem) ? isItemActive(processedItem) : undefined\"\n                :aria-haspopup=\"isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined\"\n                :aria-level=\"level + 1\"\n                :aria-setsize=\"getAriaSetSize()\"\n                :aria-posinset=\"getAriaPosInset(index)\"\n                v-bind=\"getPTOptions(processedItem, index, 'item')\"\n                :data-p-active=\"isItemActive(processedItem)\"\n                :data-p-focused=\"isItemFocused(processedItem)\"\n                :data-p-disabled=\"isItemDisabled(processedItem)\"\n            >\n                <div :class=\"cx('itemContent')\" @click=\"onItemClick($event, processedItem)\" @mouseenter=\"onItemMouseEnter($event, processedItem)\" v-bind=\"getPTOptions(processedItem, index, 'itemContent')\">\n                    <template v-if=\"!templates.item\">\n                        <a v-ripple :href=\"getItemProp(processedItem, 'url')\" :class=\"cx('itemLink')\" :target=\"getItemProp(processedItem, 'target')\" tabindex=\"-1\" v-bind=\"getPTOptions(processedItem, index, 'itemLink')\">\n                            <component v-if=\"templates.itemicon\" :is=\"templates.itemicon\" :item=\"processedItem.item\" :class=\"cx('itemIcon')\" />\n                            <span v-else-if=\"getItemProp(processedItem, 'icon')\" :class=\"[cx('itemIcon'), getItemProp(processedItem, 'icon')]\" v-bind=\"getPTOptions(processedItem, index, 'itemIcon')\" />\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions(processedItem, index, 'itemLabel')\">\n                                {{ getItemLabel(processedItem) }}\n                            </span>\n                            <template v-if=\"isItemGroup(processedItem)\">\n                                <component v-if=\"templates.submenuicon\" :is=\"templates.submenuicon\" :active=\"isItemActive(processedItem)\" :class=\"cx('submenuIcon')\" v-bind=\"getPTOptions(processedItem, index, 'submenuIcon')\" />\n                                <component v-else :is=\"horizontal || mobileActive ? 'AngleDownIcon' : 'AngleRightIcon'\" :class=\"cx('submenuIcon')\" v-bind=\"getPTOptions(processedItem, index, 'submenuIcon')\" />\n                            </template>\n                        </a>\n                    </template>\n                    <component v-else :is=\"templates.item\" :item=\"processedItem.item\" :hasSubmenu=\"isItemGroup(processedItem)\" :label=\"getItemLabel(processedItem)\" :props=\"getMenuItemProps(processedItem, index)\"></component>\n                </div>\n                <div v-if=\"isItemVisible(processedItem) && isItemGroup(processedItem)\" :class=\"cx('overlay')\" v-bind=\"ptm('overlay')\">\n                    <div :class=\"cx('grid')\" v-bind=\"ptm('grid')\">\n                        <div v-for=\"col of processedItem.items\" :key=\"getItemKey(col)\" :class=\"cx('column', { processedItem })\" v-bind=\"ptm('column')\">\n                            <MegaMenuSub\n                                v-for=\"submenu of col\"\n                                :key=\"getSubListKey(submenu)\"\n                                :id=\"getSubListId(submenu)\"\n                                :style=\"sx('submenu', true, { processedItem })\"\n                                role=\"menu\"\n                                :menuId=\"menuId\"\n                                :focusedItemId=\"focusedItemId\"\n                                :submenu=\"submenu\"\n                                :items=\"submenu.items\"\n                                :templates=\"templates\"\n                                :level=\"level + 1\"\n                                :mobileActive=\"mobileActive\"\n                                :pt=\"pt\"\n                                :unstyled=\"unstyled\"\n                                @item-click=\"$emit('item-click', $event)\"\n                                @item-mouseenter=\"$emit('item-mouseenter', $event)\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </li>\n            <li\n                v-if=\"isItemVisible(processedItem) && getItemProp(processedItem, 'separator')\"\n                :id=\"getItemId(processedItem)\"\n                :class=\"[cx('separator'), getItemProp(processedItem, 'class')]\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                role=\"separator\"\n                v-bind=\"ptm('separator')\"\n            ></li>\n        </template>\n    </ul>\n</template>\n\n<script>\nimport { isNotEmpty, resolve } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleDownIcon from '@primevue/icons/angledown';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'MegaMenuSub',\n    hostName: 'MegaMenu',\n    extends: BaseComponent,\n    emits: ['item-click', 'item-mouseenter'],\n    props: {\n        menuId: {\n            type: String,\n            default: null\n        },\n        focusedItemId: {\n            type: String,\n            default: null\n        },\n        horizontal: {\n            type: Boolean,\n            default: false\n        },\n        submenu: {\n            type: Object,\n            default: null\n        },\n        mobileActive: {\n            type: Boolean,\n            default: false\n        },\n        items: {\n            type: Array,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: 0\n        },\n        templates: {\n            type: Object,\n            default: null\n        },\n        activeItem: {\n            type: Object,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        }\n    },\n    methods: {\n        getSubListId(processedItem) {\n            return `${this.getItemId(processedItem)}_list`;\n        },\n        getSubListKey(processedItem) {\n            return this.getSubListId(processedItem);\n        },\n        getItemId(processedItem) {\n            return `${this.menuId}_${processedItem.key}`;\n        },\n        getItemKey(processedItem) {\n            return this.getItemId(processedItem);\n        },\n        getItemProp(processedItem, name, params) {\n            return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined;\n        },\n        getItemLabel(processedItem) {\n            return this.getItemProp(processedItem, 'label');\n        },\n        getPTOptions(processedItem, index, key) {\n            return this.ptm(key, {\n                context: {\n                    item: processedItem.item,\n                    index,\n                    active: this.isItemActive(processedItem),\n                    focused: this.isItemFocused(processedItem),\n                    disabled: this.isItemDisabled(processedItem)\n                }\n            });\n        },\n        isItemActive(processedItem) {\n            return isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;\n        },\n        isItemVisible(processedItem) {\n            return this.getItemProp(processedItem, 'visible') !== false;\n        },\n        isItemDisabled(processedItem) {\n            return this.getItemProp(processedItem, 'disabled');\n        },\n        isItemFocused(processedItem) {\n            return this.focusedItemId === this.getItemId(processedItem);\n        },\n        isItemGroup(processedItem) {\n            return isNotEmpty(processedItem.items);\n        },\n        onItemClick(event, processedItem) {\n            this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });\n            this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });\n        },\n        onItemMouseEnter(event, processedItem) {\n            this.$emit('item-mouseenter', { originalEvent: event, processedItem });\n        },\n        getAriaSetSize() {\n            return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;\n        },\n        getAriaPosInset(index) {\n            return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;\n        },\n        getMenuItemProps(processedItem, index) {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        tabindex: -1\n                    },\n                    this.getPTOptions(processedItem, index, 'itemLink')\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]\n                    },\n                    this.getPTOptions(processedItem, index, 'itemIcon')\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('label')\n                    },\n                    this.getPTOptions(processedItem, index, 'label')\n                ),\n                submenuicon: mergeProps(\n                    {\n                        class: this.cx('submenuIcon')\n                    },\n                    this.getPTOptions(processedItem, index, 'submenuIcon')\n                )\n            };\n        }\n    },\n    components: {\n        AngleRightIcon: AngleRightIcon,\n        AngleDownIcon: AngleDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <ul :class=\"level === 0 ? cx('rootList') : cx('submenu')\" :tabindex=\"tabindex\" v-bind=\"level === 0 ? ptm('rootList') : ptm('submenu')\">\n        <li v-if=\"submenu\" :class=\"[cx('submenuLabel', { submenu }), getItemProp(submenu, 'class')]\" :style=\"getItemProp(submenu, 'style')\" role=\"presentation\" v-bind=\"ptm('submenuLabel')\">{{ getItemLabel(submenu) }}</li>\n        <template v-for=\"(processedItem, index) of items\" :key=\"getItemKey(processedItem)\">\n            <li\n                v-if=\"isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')\"\n                :id=\"getItemId(processedItem)\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                :class=\"[cx('item', { processedItem }), getItemProp(processedItem, 'class')]\"\n                role=\"menuitem\"\n                :aria-label=\"getItemLabel(processedItem)\"\n                :aria-disabled=\"isItemDisabled(processedItem) || undefined\"\n                :aria-expanded=\"isItemGroup(processedItem) ? isItemActive(processedItem) : undefined\"\n                :aria-haspopup=\"isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined\"\n                :aria-level=\"level + 1\"\n                :aria-setsize=\"getAriaSetSize()\"\n                :aria-posinset=\"getAriaPosInset(index)\"\n                v-bind=\"getPTOptions(processedItem, index, 'item')\"\n                :data-p-active=\"isItemActive(processedItem)\"\n                :data-p-focused=\"isItemFocused(processedItem)\"\n                :data-p-disabled=\"isItemDisabled(processedItem)\"\n            >\n                <div :class=\"cx('itemContent')\" @click=\"onItemClick($event, processedItem)\" @mouseenter=\"onItemMouseEnter($event, processedItem)\" v-bind=\"getPTOptions(processedItem, index, 'itemContent')\">\n                    <template v-if=\"!templates.item\">\n                        <a v-ripple :href=\"getItemProp(processedItem, 'url')\" :class=\"cx('itemLink')\" :target=\"getItemProp(processedItem, 'target')\" tabindex=\"-1\" v-bind=\"getPTOptions(processedItem, index, 'itemLink')\">\n                            <component v-if=\"templates.itemicon\" :is=\"templates.itemicon\" :item=\"processedItem.item\" :class=\"cx('itemIcon')\" />\n                            <span v-else-if=\"getItemProp(processedItem, 'icon')\" :class=\"[cx('itemIcon'), getItemProp(processedItem, 'icon')]\" v-bind=\"getPTOptions(processedItem, index, 'itemIcon')\" />\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions(processedItem, index, 'itemLabel')\">\n                                {{ getItemLabel(processedItem) }}\n                            </span>\n                            <template v-if=\"isItemGroup(processedItem)\">\n                                <component v-if=\"templates.submenuicon\" :is=\"templates.submenuicon\" :active=\"isItemActive(processedItem)\" :class=\"cx('submenuIcon')\" v-bind=\"getPTOptions(processedItem, index, 'submenuIcon')\" />\n                                <component v-else :is=\"horizontal || mobileActive ? 'AngleDownIcon' : 'AngleRightIcon'\" :class=\"cx('submenuIcon')\" v-bind=\"getPTOptions(processedItem, index, 'submenuIcon')\" />\n                            </template>\n                        </a>\n                    </template>\n                    <component v-else :is=\"templates.item\" :item=\"processedItem.item\" :hasSubmenu=\"isItemGroup(processedItem)\" :label=\"getItemLabel(processedItem)\" :props=\"getMenuItemProps(processedItem, index)\"></component>\n                </div>\n                <div v-if=\"isItemVisible(processedItem) && isItemGroup(processedItem)\" :class=\"cx('overlay')\" v-bind=\"ptm('overlay')\">\n                    <div :class=\"cx('grid')\" v-bind=\"ptm('grid')\">\n                        <div v-for=\"col of processedItem.items\" :key=\"getItemKey(col)\" :class=\"cx('column', { processedItem })\" v-bind=\"ptm('column')\">\n                            <MegaMenuSub\n                                v-for=\"submenu of col\"\n                                :key=\"getSubListKey(submenu)\"\n                                :id=\"getSubListId(submenu)\"\n                                :style=\"sx('submenu', true, { processedItem })\"\n                                role=\"menu\"\n                                :menuId=\"menuId\"\n                                :focusedItemId=\"focusedItemId\"\n                                :submenu=\"submenu\"\n                                :items=\"submenu.items\"\n                                :templates=\"templates\"\n                                :level=\"level + 1\"\n                                :mobileActive=\"mobileActive\"\n                                :pt=\"pt\"\n                                :unstyled=\"unstyled\"\n                                @item-click=\"$emit('item-click', $event)\"\n                                @item-mouseenter=\"$emit('item-mouseenter', $event)\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </li>\n            <li\n                v-if=\"isItemVisible(processedItem) && getItemProp(processedItem, 'separator')\"\n                :id=\"getItemId(processedItem)\"\n                :class=\"[cx('separator'), getItemProp(processedItem, 'class')]\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                role=\"separator\"\n                v-bind=\"ptm('separator')\"\n            ></li>\n        </template>\n    </ul>\n</template>\n\n<script>\nimport { isNotEmpty, resolve } from '@primeuix/utils/object';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport AngleDownIcon from '@primevue/icons/angledown';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'MegaMenuSub',\n    hostName: 'MegaMenu',\n    extends: BaseComponent,\n    emits: ['item-click', 'item-mouseenter'],\n    props: {\n        menuId: {\n            type: String,\n            default: null\n        },\n        focusedItemId: {\n            type: String,\n            default: null\n        },\n        horizontal: {\n            type: Boolean,\n            default: false\n        },\n        submenu: {\n            type: Object,\n            default: null\n        },\n        mobileActive: {\n            type: Boolean,\n            default: false\n        },\n        items: {\n            type: Array,\n            default: null\n        },\n        level: {\n            type: Number,\n            default: 0\n        },\n        templates: {\n            type: Object,\n            default: null\n        },\n        activeItem: {\n            type: Object,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        }\n    },\n    methods: {\n        getSubListId(processedItem) {\n            return `${this.getItemId(processedItem)}_list`;\n        },\n        getSubListKey(processedItem) {\n            return this.getSubListId(processedItem);\n        },\n        getItemId(processedItem) {\n            return `${this.menuId}_${processedItem.key}`;\n        },\n        getItemKey(processedItem) {\n            return this.getItemId(processedItem);\n        },\n        getItemProp(processedItem, name, params) {\n            return processedItem && processedItem.item ? resolve(processedItem.item[name], params) : undefined;\n        },\n        getItemLabel(processedItem) {\n            return this.getItemProp(processedItem, 'label');\n        },\n        getPTOptions(processedItem, index, key) {\n            return this.ptm(key, {\n                context: {\n                    item: processedItem.item,\n                    index,\n                    active: this.isItemActive(processedItem),\n                    focused: this.isItemFocused(processedItem),\n                    disabled: this.isItemDisabled(processedItem)\n                }\n            });\n        },\n        isItemActive(processedItem) {\n            return isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;\n        },\n        isItemVisible(processedItem) {\n            return this.getItemProp(processedItem, 'visible') !== false;\n        },\n        isItemDisabled(processedItem) {\n            return this.getItemProp(processedItem, 'disabled');\n        },\n        isItemFocused(processedItem) {\n            return this.focusedItemId === this.getItemId(processedItem);\n        },\n        isItemGroup(processedItem) {\n            return isNotEmpty(processedItem.items);\n        },\n        onItemClick(event, processedItem) {\n            this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });\n            this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });\n        },\n        onItemMouseEnter(event, processedItem) {\n            this.$emit('item-mouseenter', { originalEvent: event, processedItem });\n        },\n        getAriaSetSize() {\n            return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;\n        },\n        getAriaPosInset(index) {\n            return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;\n        },\n        getMenuItemProps(processedItem, index) {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        tabindex: -1\n                    },\n                    this.getPTOptions(processedItem, index, 'itemLink')\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]\n                    },\n                    this.getPTOptions(processedItem, index, 'itemIcon')\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('label')\n                    },\n                    this.getPTOptions(processedItem, index, 'label')\n                ),\n                submenuicon: mergeProps(\n                    {\n                        class: this.cx('submenuIcon')\n                    },\n                    this.getPTOptions(processedItem, index, 'submenuIcon')\n                )\n            };\n        }\n    },\n    components: {\n        AngleRightIcon: AngleRightIcon,\n        AngleDownIcon: AngleDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :ref=\"containerRef\" :id=\"$id\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-if=\"$slots.start\" :class=\"cx('start')\" v-bind=\"ptm('start')\">\n            <slot name=\"start\"></slot>\n        </div>\n        <!--TODO: menubutton deprecated since v4.0. Use button-->\n        <slot :id=\"$id\" :name=\"$slots.button ? 'button' : 'menubutton'\" :class=\"cx('button')\" :toggleCallback=\"(event) => menuButtonClick(event)\">\n            <a\n                v-if=\"model && model.length > 0\"\n                ref=\"menubutton\"\n                role=\"button\"\n                tabindex=\"0\"\n                :class=\"cx('button')\"\n                :aria-haspopup=\"model.length && model.length > 0 ? true : false\"\n                :aria-expanded=\"mobileActive\"\n                :aria-controls=\"$id\"\n                :aria-label=\"$primevue.config.locale.aria?.navigation\"\n                @click=\"menuButtonClick($event)\"\n                @keydown=\"menuButtonKeydown($event)\"\n                v-bind=\"ptm('button')\"\n            >\n                <!--TODO: menubuttonicon deprecated since v4.0. Use buttonicon-->\n                <slot :name=\"$slots.buttonicon ? 'buttonicon' : 'menubuttonicon'\">\n                    <BarsIcon v-bind=\"ptm('buttonIcon')\" />\n                </slot>\n            </a>\n        </slot>\n        <MegaMenuSub\n            :ref=\"menubarRef\"\n            :id=\"$id + '_list'\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            role=\"menubar\"\n            :aria-label=\"ariaLabel\"\n            :aria-labelledby=\"ariaLabelledby\"\n            :aria-disabled=\"disabled || undefined\"\n            :aria-orientation=\"orientation\"\n            :aria-activedescendant=\"focused ? focusedItemId : undefined\"\n            :menuId=\"$id\"\n            :focusedItemId=\"focused ? focusedItemId : undefined\"\n            :items=\"processedItems\"\n            :horizontal=\"horizontal\"\n            :templates=\"$slots\"\n            :activeItem=\"activeItem\"\n            :mobileActive=\"mobileActive\"\n            :level=\"0\"\n            :style=\"sx('rootList')\"\n            :pt=\"pt\"\n            :unstyled=\"unstyled\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @keydown=\"onKeyDown\"\n            @item-click=\"onItemClick\"\n            @item-mouseenter=\"onItemMouseEnter\"\n        />\n        <div v-if=\"$slots.end\" :class=\"cx('end')\" v-bind=\"ptm('end')\">\n            <slot name=\"end\"></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { findSingle, focus, isTouchDevice } from '@primeuix/utils/dom';\nimport { findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolve } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport BarsIcon from '@primevue/icons/bars';\nimport BaseMegaMenu from './BaseMegaMenu.vue';\nimport MegaMenuSub from './MegaMenuSub.vue';\n\nexport default {\n    name: 'MegaMenu',\n    extends: BaseMegaMenu,\n    inheritAttrs: false,\n    emits: ['focus', 'blur'],\n    outsideClickListener: null,\n    resizeListener: null,\n    matchMediaListener: null,\n    container: null,\n    menubar: null,\n    searchTimeout: null,\n    searchValue: null,\n    data() {\n        return {\n            mobileActive: false,\n            focused: false,\n            focusedItemInfo: { index: -1, key: '', parentKey: '' },\n            activeItem: null,\n            dirty: false,\n            query: null,\n            queryMatches: false\n        };\n    },\n    watch: {\n        activeItem(newItem) {\n            if (isNotEmpty(newItem)) {\n                this.bindOutsideClickListener();\n                this.bindResizeListener();\n            } else {\n                this.unbindOutsideClickListener();\n                this.unbindResizeListener();\n            }\n        }\n    },\n    mounted() {\n        this.bindMatchMediaListener();\n    },\n    beforeUnmount() {\n        this.mobileActive = false;\n        this.unbindOutsideClickListener();\n        this.unbindResizeListener();\n        this.unbindMatchMediaListener();\n    },\n    methods: {\n        getItemProp(item, name) {\n            return item ? resolve(item[name]) : undefined;\n        },\n        getItemLabel(item) {\n            return this.getItemProp(item, 'label');\n        },\n        isItemDisabled(item) {\n            return this.getItemProp(item, 'disabled');\n        },\n        isItemVisible(item) {\n            return this.getItemProp(item, 'visible') !== false;\n        },\n        isItemGroup(item) {\n            return isNotEmpty(this.getItemProp(item, 'items'));\n        },\n        isItemSeparator(item) {\n            return this.getItemProp(item, 'separator');\n        },\n        getProccessedItemLabel(processedItem) {\n            return processedItem ? this.getItemLabel(processedItem.item) : undefined;\n        },\n        isProccessedItemGroup(processedItem) {\n            return processedItem && isNotEmpty(processedItem.items);\n        },\n        toggle(event) {\n            if (this.mobileActive) {\n                this.mobileActive = false;\n                ZIndex.clear(this.menubar);\n                this.hide();\n            } else {\n                this.mobileActive = true;\n                ZIndex.set('menu', this.menubar, this.$primevue.config.zIndex.menu);\n                setTimeout(() => {\n                    this.show();\n                }, 1);\n            }\n\n            this.bindOutsideClickListener();\n            event.preventDefault();\n        },\n        show() {\n            this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };\n\n            focus(this.menubar);\n        },\n        hide(event, isFocus) {\n            if (this.mobileActive) {\n                this.mobileActive = false;\n                setTimeout(() => {\n                    focus(this.$refs.menubutton, { preventScroll: true });\n                }, 1);\n            }\n\n            this.activeItem = null;\n            this.focusedItemInfo = { index: -1, key: '', parentKey: '' };\n\n            isFocus && focus(this.menubar);\n            this.dirty = false;\n        },\n        onFocus(event) {\n            this.focused = true;\n\n            if (this.focusedItemInfo.index === -1) {\n                const index = this.findFirstFocusedItemIndex();\n                const processedItem = this.findVisibleItem(index);\n\n                this.focusedItemInfo = { index, key: processedItem.key, parentKey: processedItem.parentKey };\n            }\n\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.focused = false;\n            this.focusedItemInfo = { index: -1, key: '', parentKey: '' };\n            this.searchValue = '';\n            this.dirty = false;\n            this.$emit('blur', event);\n        },\n        onKeyDown(event) {\n            if (this.disabled) {\n                event.preventDefault();\n\n                return;\n            }\n\n            const metaKey = event.metaKey || event.ctrlKey;\n\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event);\n                    break;\n\n                case 'ArrowLeft':\n                    this.onArrowLeftKey(event);\n                    break;\n\n                case 'ArrowRight':\n                    this.onArrowRightKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'Space':\n                    this.onSpaceKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                case 'Tab':\n                    this.onTabKey(event);\n                    break;\n\n                case 'PageDown':\n                case 'PageUp':\n                case 'Backspace':\n                case 'ShiftLeft':\n                case 'ShiftRight':\n                    //NOOP\n                    break;\n\n                default:\n                    if (!metaKey && isPrintableCharacter(event.key)) {\n                        this.searchItems(event, event.key);\n                    }\n\n                    break;\n            }\n        },\n        onItemChange(event) {\n            const { processedItem, isFocus } = event;\n\n            if (isEmpty(processedItem)) return;\n\n            const { index, key, parentKey, items } = processedItem;\n            const grouped = isNotEmpty(items);\n\n            grouped && (this.activeItem = processedItem);\n            this.focusedItemInfo = { index, key, parentKey };\n\n            grouped && (this.dirty = true);\n            isFocus && focus(this.menubar);\n        },\n        onItemClick(event) {\n            const { originalEvent, processedItem } = event;\n            const grouped = this.isProccessedItemGroup(processedItem);\n            const root = isEmpty(processedItem.parent);\n            const selected = this.isSelected(processedItem);\n\n            if (selected) {\n                const { index, key, parentKey } = processedItem;\n\n                this.activeItem = null;\n                this.focusedItemInfo = { index, key, parentKey };\n\n                this.dirty = !root;\n\n                if (!this.mobileActive) {\n                    focus(this.menubar, { preventScroll: true });\n                }\n            } else {\n                if (grouped) {\n                    this.onItemChange(event);\n                } else {\n                    this.hide(originalEvent);\n                }\n            }\n        },\n        onItemMouseEnter(event) {\n            if (!this.mobileActive && this.dirty) {\n                this.onItemChange(event);\n            }\n        },\n        menuButtonClick(event) {\n            this.toggle(event);\n        },\n        menuButtonKeydown(event) {\n            (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && this.menuButtonClick(event);\n        },\n        onArrowDownKey(event) {\n            if (this.horizontal) {\n                if (isNotEmpty(this.activeItem) && this.activeItem.key === this.focusedItemInfo.key) {\n                    this.focusedItemInfo = { index: -1, key: '', parentKey: this.activeItem.key };\n                } else {\n                    const processedItem = this.findVisibleItem(this.focusedItemInfo.index);\n                    const grouped = this.isProccessedItemGroup(processedItem);\n\n                    if (grouped) {\n                        this.onItemChange({ originalEvent: event, processedItem });\n                        this.focusedItemInfo = { index: -1, key: processedItem.key, parentKey: processedItem.parentKey };\n                        this.searchValue = '';\n                    }\n                }\n            }\n\n            const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();\n\n            this.changeFocusedItemInfo(event, itemIndex);\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            if (event.altKey && this.horizontal) {\n                if (this.focusedItemInfo.index !== -1) {\n                    const processedItem = this.findVisibleItem(this.focusedItemInfo.index);\n                    const grouped = this.isProccessedItemGroup(processedItem);\n\n                    if (!grouped && isNotEmpty(this.activeItem)) {\n                        if (this.focusedItemInfo.index === 0) {\n                            this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key, parentKey: this.activeItem.parentKey };\n                            this.activeItem = null;\n                        } else {\n                            this.changeFocusedItemInfo(event, this.findFirstItemIndex());\n                        }\n                    }\n                }\n\n                event.preventDefault();\n            } else {\n                const itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex();\n\n                this.changeFocusedItemInfo(event, itemIndex);\n                event.preventDefault();\n            }\n        },\n        onArrowLeftKey(event) {\n            const processedItem = this.findVisibleItem(this.focusedItemInfo.index);\n            const grouped = this.isProccessedItemGroup(processedItem);\n\n            if (grouped) {\n                if (this.horizontal) {\n                    const itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex();\n\n                    this.changeFocusedItemInfo(event, itemIndex);\n                }\n            } else {\n                if (this.vertical && isNotEmpty(this.activeItem)) {\n                    if (processedItem.columnIndex === 0) {\n                        this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key, parentKey: this.activeItem.parentKey };\n                        this.activeItem = null;\n                    }\n                }\n\n                const columnIndex = processedItem.columnIndex - 1;\n                const itemIndex = this.visibleItems.findIndex((item) => item.columnIndex === columnIndex);\n\n                itemIndex !== -1 && this.changeFocusedItemInfo(event, itemIndex);\n            }\n\n            event.preventDefault();\n        },\n        onArrowRightKey(event) {\n            const processedItem = this.findVisibleItem(this.focusedItemInfo.index);\n            const grouped = this.isProccessedItemGroup(processedItem);\n\n            if (grouped) {\n                if (this.vertical) {\n                    if (isNotEmpty(this.activeItem) && this.activeItem.key === processedItem.key) {\n                        this.focusedItemInfo = { index: -1, key: '', parentKey: this.activeItem.key };\n                    } else {\n                        const processedItem = this.findVisibleItem(this.focusedItemInfo.index);\n                        const grouped = this.isProccessedItemGroup(processedItem);\n\n                        if (grouped) {\n                            this.onItemChange({ originalEvent: event, processedItem });\n                            this.focusedItemInfo = { index: -1, key: processedItem.key, parentKey: processedItem.parentKey };\n                            this.searchValue = '';\n                        }\n                    }\n                }\n\n                const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();\n\n                this.changeFocusedItemInfo(event, itemIndex);\n            } else {\n                const columnIndex = processedItem.columnIndex + 1;\n                const itemIndex = this.visibleItems.findIndex((item) => item.columnIndex === columnIndex);\n\n                itemIndex !== -1 && this.changeFocusedItemInfo(event, itemIndex);\n            }\n\n            event.preventDefault();\n        },\n        onHomeKey(event) {\n            this.changeFocusedItemInfo(event, this.findFirstItemIndex());\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            this.changeFocusedItemInfo(event, this.findLastItemIndex());\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (this.focusedItemInfo.index !== -1) {\n                const element = findSingle(this.menubar, `li[id=\"${`${this.focusedItemId}`}\"]`);\n                const anchorElement = element && findSingle(element, 'a[data-pc-section=\"itemlink\"]');\n\n                anchorElement ? anchorElement.click() : element && element.click();\n\n                const processedItem = this.visibleItems[this.focusedItemInfo.index];\n                const grouped = this.isProccessedItemGroup(processedItem);\n\n                !grouped && this.changeFocusedItemInfo(event, this.findFirstFocusedItemIndex());\n            }\n\n            event.preventDefault();\n        },\n        onSpaceKey(event) {\n            this.onEnterKey(event);\n        },\n        onEscapeKey(event) {\n            if (isNotEmpty(this.activeItem)) {\n                this.focusedItemInfo = { index: this.activeItem.index, key: this.activeItem.key };\n                this.activeItem = null;\n            }\n\n            event.preventDefault();\n        },\n        onTabKey(event) {\n            if (this.focusedItemInfo.index !== -1) {\n                const processedItem = this.findVisibleItem(this.focusedItemInfo.index);\n                const grouped = this.isProccessedItemGroup(processedItem);\n\n                !grouped && this.onItemChange({ originalEvent: event, processedItem });\n            }\n\n            this.hide();\n        },\n        bindOutsideClickListener() {\n            if (!this.outsideClickListener) {\n                this.outsideClickListener = (event) => {\n                    const isOutsideContainer = this.container && !this.container.contains(event.target);\n                    const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));\n\n                    if (isOutsideContainer && isOutsideTarget) {\n                        this.hide();\n                    }\n                };\n\n                document.addEventListener('click', this.outsideClickListener, true);\n            }\n        },\n        unbindOutsideClickListener() {\n            if (this.outsideClickListener) {\n                document.removeEventListener('click', this.outsideClickListener, true);\n                this.outsideClickListener = null;\n            }\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = (event) => {\n                    if (!isTouchDevice()) {\n                        this.hide(event, true);\n                    }\n\n                    this.mobileActive = false;\n                };\n\n                window.addEventListener('resize', this.resizeListener);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                this.resizeListener = null;\n            }\n        },\n        bindMatchMediaListener() {\n            if (!this.matchMediaListener) {\n                const query = matchMedia(`(max-width: ${this.breakpoint})`);\n\n                this.query = query;\n                this.queryMatches = query.matches;\n\n                this.matchMediaListener = () => {\n                    this.queryMatches = query.matches;\n                    this.mobileActive = false;\n                };\n\n                this.query.addEventListener('change', this.matchMediaListener);\n            }\n        },\n        unbindMatchMediaListener() {\n            if (this.matchMediaListener) {\n                this.query.removeEventListener('change', this.matchMediaListener);\n                this.matchMediaListener = null;\n            }\n        },\n        isItemMatched(processedItem) {\n            return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem)?.toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());\n        },\n        isValidItem(processedItem) {\n            return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item) && this.isItemVisible(processedItem.item);\n        },\n        isValidSelectedItem(processedItem) {\n            return this.isValidItem(processedItem) && this.isSelected(processedItem);\n        },\n        isSelected(processedItem) {\n            return isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;\n        },\n        findFirstItemIndex() {\n            return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));\n        },\n        findLastItemIndex() {\n            return findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));\n        },\n        findNextItemIndex(index) {\n            const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;\n\n            return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;\n        },\n        findPrevItemIndex(index) {\n            const matchedItemIndex = index > 0 ? findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;\n\n            return matchedItemIndex > -1 ? matchedItemIndex : index;\n        },\n        findSelectedItemIndex() {\n            return this.visibleItems.findIndex((processedItem) => this.isValidSelectedItem(processedItem));\n        },\n        findFirstFocusedItemIndex() {\n            const selectedIndex = this.findSelectedItemIndex();\n\n            return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex;\n        },\n        findLastFocusedItemIndex() {\n            const selectedIndex = this.findSelectedItemIndex();\n\n            return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;\n        },\n        findVisibleItem(index) {\n            return isNotEmpty(this.visibleItems) ? this.visibleItems[index] : null;\n        },\n        searchItems(event, char) {\n            this.searchValue = (this.searchValue || '') + char;\n\n            let itemIndex = -1;\n            let matched = false;\n\n            if (this.focusedItemInfo.index !== -1) {\n                itemIndex = this.visibleItems.slice(this.focusedItemInfo.index).findIndex((processedItem) => this.isItemMatched(processedItem));\n                itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo.index).findIndex((processedItem) => this.isItemMatched(processedItem)) : itemIndex + this.focusedItemInfo.index;\n            } else {\n                itemIndex = this.visibleItems.findIndex((processedItem) => this.isItemMatched(processedItem));\n            }\n\n            if (itemIndex !== -1) {\n                matched = true;\n            }\n\n            if (itemIndex === -1 && this.focusedItemInfo.index === -1) {\n                itemIndex = this.findFirstFocusedItemIndex();\n            }\n\n            if (itemIndex !== -1) {\n                this.changeFocusedItemInfo(event, itemIndex);\n            }\n\n            if (this.searchTimeout) {\n                clearTimeout(this.searchTimeout);\n            }\n\n            this.searchTimeout = setTimeout(() => {\n                this.searchValue = '';\n                this.searchTimeout = null;\n            }, 500);\n\n            return matched;\n        },\n        changeFocusedItemInfo(event, index) {\n            const processedItem = this.findVisibleItem(index);\n\n            this.focusedItemInfo.index = index;\n            this.focusedItemInfo.key = isNotEmpty(processedItem) ? processedItem.key : '';\n            this.scrollInView();\n        },\n        scrollInView(index = -1) {\n            const id = index !== -1 ? `${this.$id}_${index}` : this.focusedItemId;\n            let element;\n\n            if (id === null && this.queryMatches) {\n                element = this.$refs.menubutton;\n            } else {\n                element = findSingle(this.menubar, `li[id=\"${id}\"]`);\n            }\n\n            if (element) {\n                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });\n            }\n        },\n        createProcessedItems(items, level = 0, parent = {}, parentKey = '', columnIndex) {\n            const processedItems = [];\n\n            items &&\n                items.forEach((item, index) => {\n                    const key = (parentKey !== '' ? parentKey + '_' : '') + (columnIndex !== undefined ? columnIndex + '_' : '') + index;\n                    const newItem = {\n                        item,\n                        index,\n                        level,\n                        key,\n                        parent,\n                        parentKey,\n                        columnIndex: columnIndex !== undefined ? columnIndex : parent.columnIndex !== undefined ? parent.columnIndex : index\n                    };\n\n                    newItem['items'] =\n                        level === 0 && item.items && item.items.length > 0 ? item.items.map((_items, _index) => this.createProcessedItems(_items, level + 1, newItem, key, _index)) : this.createProcessedItems(item.items, level + 1, newItem, key);\n                    processedItems.push(newItem);\n                });\n\n            return processedItems;\n        },\n        containerRef(el) {\n            this.container = el;\n        },\n        menubarRef(el) {\n            this.menubar = el ? el.$el : undefined;\n        }\n    },\n    computed: {\n        processedItems() {\n            return this.createProcessedItems(this.model || []);\n        },\n        visibleItems() {\n            const processedItem = isNotEmpty(this.activeItem) ? this.activeItem : null;\n\n            return processedItem && processedItem.key === this.focusedItemInfo.parentKey\n                ? processedItem.items.reduce((items, col) => {\n                      col.forEach((submenu) => {\n                          submenu.items.forEach((a) => {\n                              items.push(a);\n                          });\n                      });\n\n                      return items;\n                  }, [])\n                : this.processedItems;\n        },\n        horizontal() {\n            return this.orientation === 'horizontal';\n        },\n        vertical() {\n            return this.orientation === 'vertical';\n        },\n        focusedItemId() {\n            return isNotEmpty(this.focusedItemInfo.key) ? `${this.$id}_${this.focusedItemInfo.key}` : null;\n        }\n    },\n    components: {\n        MegaMenuSub: MegaMenuSub,\n        BarsIcon: