primevue/panelmenu/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/panelmenu/BasePanelMenu.vue","../../src/panelmenu/PanelMenuSub.vue","../../src/panelmenu/PanelMenuSub.vue?vue&type=template&id=6c9d8240&lang.js","../../src/panelmenu/PanelMenuList.vue","../../src/panelmenu/PanelMenuList.vue?vue&type=template&id=e8284d84&lang.js","../../src/panelmenu/PanelMenu.vue","../../src/panelmenu/PanelMenu.vue?vue&type=template&id=f6435148&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport PanelMenuStyle from 'primevue/panelmenu/style';\n\nexport default {\n    name: 'BasePanelMenu',\n    extends: BaseComponent,\n    props: {\n        model: {\n            type: Array,\n            default: null\n        },\n        expandedKeys: {\n            type: Object,\n            default: null\n        },\n        multiple: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        }\n    },\n    style: PanelMenuStyle,\n    provide() {\n        return {\n            $pcPanelMenu: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <ul :class=\"cx('submenu')\" :tabindex=\"tabindex\">\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                :class=\"[cx('item', { processedItem }), getItemProp(processedItem, 'class')]\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                role=\"treeitem\"\n                :aria-label=\"getItemLabel(processedItem)\"\n                :aria-expanded=\"isItemGroup(processedItem) ? isItemActive(processedItem) : undefined\"\n                :aria-level=\"level + 1\"\n                :aria-setsize=\"getAriaSetSize()\"\n                :aria-posinset=\"getAriaPosInset(index)\"\n                v-bind=\"getPTOptions('item', processedItem, index)\"\n                :data-p-focused=\"isItemFocused(processedItem)\"\n                :data-p-disabled=\"isItemDisabled(processedItem)\"\n            >\n                <div :class=\"cx('itemContent')\" @click=\"onItemClick($event, processedItem)\" @mousemove=\"onItemMouseMove($event, processedItem)\" v-bind=\"getPTOptions('itemContent', processedItem, index)\">\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('itemLink', processedItem, index)\">\n                            <template v-if=\"isItemGroup(processedItem)\">\n                                <component v-if=\"templates.submenuicon\" :is=\"templates.submenuicon\" :class=\"cx('submenuIcon')\" :active=\"isItemActive(processedItem)\" v-bind=\"getPTOptions('submenuIcon', processedItem, index)\" />\n                                <component v-else :is=\"isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'\" :class=\"cx('submenuIcon')\" v-bind=\"getPTOptions('submenuIcon', processedItem, index)\" />\n                            </template>\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('itemIcon', processedItem, index)\" />\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions('itemLabel', processedItem, index)\">{{ getItemLabel(processedItem) }}</span>\n                        </a>\n                    </template>\n                    <component\n                        v-else\n                        :is=\"templates.item\"\n                        :item=\"processedItem.item\"\n                        :root=\"false\"\n                        :active=\"isItemActive(processedItem)\"\n                        :hasSubmenu=\"isItemGroup(processedItem)\"\n                        :label=\"getItemLabel(processedItem)\"\n                        :props=\"getMenuItemProps(processedItem, index)\"\n                    ></component>\n                </div>\n                <transition name=\"p-toggleable-content\" v-bind=\"ptm('transition')\">\n                    <div v-show=\"isItemActive(processedItem)\" :class=\"cx('contentContainer')\" v-bind=\"ptm('contentContainer')\">\n                        <PanelMenuSub\n                            v-if=\"isItemVisible(processedItem) && isItemGroup(processedItem)\"\n                            :id=\"getItemId(processedItem) + '_list'\"\n                            role=\"group\"\n                            :panelId=\"panelId\"\n                            :focusedItemId=\"focusedItemId\"\n                            :items=\"processedItem.items\"\n                            :level=\"level + 1\"\n                            :templates=\"templates\"\n                            :activeItemPath=\"activeItemPath\"\n                            @item-toggle=\"onItemToggle\"\n                            @item-mousemove=\"$emit('item-mousemove', $event)\"\n                            :pt=\"pt\"\n                            :unstyled=\"unstyled\"\n                            v-bind=\"ptm('submenu')\"\n                        />\n                    </div>\n                </transition>\n            </li>\n            <li\n                v-if=\"isItemVisible(processedItem) && getItemProp(processedItem, 'separator')\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                :class=\"[cx('separator'), getItemProp(processedItem, 'class')]\"\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 ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'PanelMenuSub',\n    hostName: 'PanelMenu',\n    extends: BaseComponent,\n    emits: ['item-toggle', 'item-mousemove'],\n    props: {\n        panelId: {\n            type: String,\n            default: null\n        },\n        focusedItemId: {\n            type: String,\n            default: null\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        activeItemPath: {\n            type: Object,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: -1\n        }\n    },\n    methods: {\n        getItemId(processedItem) {\n            return `${this.panelId}_${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(key, processedItem, index) {\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 this.activeItemPath.some((path) => path.key === processedItem.key);\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-toggle', { processedItem, expanded: !this.isItemActive(processedItem) });\n        },\n        onItemToggle(event) {\n            this.$emit('item-toggle', event);\n        },\n        onItemMouseMove(event, processedItem) {\n            this.$emit('item-mousemove', { 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('itemLink', processedItem, index)\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]\n                    },\n                    this.getPTOptions('itemIcon', processedItem, index)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('itemLabel')\n                    },\n                    this.getPTOptions('itemLabel', processedItem, index)\n                ),\n                submenuicon: mergeProps(\n                    {\n                        class: this.cx('submenuIcon')\n                    },\n                    this.getPTOptions('submenuicon', processedItem, index)\n                )\n            };\n        }\n    },\n    components: {\n        ChevronRightIcon: ChevronRightIcon,\n        ChevronDownIcon: ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <ul :class=\"cx('submenu')\" :tabindex=\"tabindex\">\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                :class=\"[cx('item', { processedItem }), getItemProp(processedItem, 'class')]\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                role=\"treeitem\"\n                :aria-label=\"getItemLabel(processedItem)\"\n                :aria-expanded=\"isItemGroup(processedItem) ? isItemActive(processedItem) : undefined\"\n                :aria-level=\"level + 1\"\n                :aria-setsize=\"getAriaSetSize()\"\n                :aria-posinset=\"getAriaPosInset(index)\"\n                v-bind=\"getPTOptions('item', processedItem, index)\"\n                :data-p-focused=\"isItemFocused(processedItem)\"\n                :data-p-disabled=\"isItemDisabled(processedItem)\"\n            >\n                <div :class=\"cx('itemContent')\" @click=\"onItemClick($event, processedItem)\" @mousemove=\"onItemMouseMove($event, processedItem)\" v-bind=\"getPTOptions('itemContent', processedItem, index)\">\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('itemLink', processedItem, index)\">\n                            <template v-if=\"isItemGroup(processedItem)\">\n                                <component v-if=\"templates.submenuicon\" :is=\"templates.submenuicon\" :class=\"cx('submenuIcon')\" :active=\"isItemActive(processedItem)\" v-bind=\"getPTOptions('submenuIcon', processedItem, index)\" />\n                                <component v-else :is=\"isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'\" :class=\"cx('submenuIcon')\" v-bind=\"getPTOptions('submenuIcon', processedItem, index)\" />\n                            </template>\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('itemIcon', processedItem, index)\" />\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions('itemLabel', processedItem, index)\">{{ getItemLabel(processedItem) }}</span>\n                        </a>\n                    </template>\n                    <component\n                        v-else\n                        :is=\"templates.item\"\n                        :item=\"processedItem.item\"\n                        :root=\"false\"\n                        :active=\"isItemActive(processedItem)\"\n                        :hasSubmenu=\"isItemGroup(processedItem)\"\n                        :label=\"getItemLabel(processedItem)\"\n                        :props=\"getMenuItemProps(processedItem, index)\"\n                    ></component>\n                </div>\n                <transition name=\"p-toggleable-content\" v-bind=\"ptm('transition')\">\n                    <div v-show=\"isItemActive(processedItem)\" :class=\"cx('contentContainer')\" v-bind=\"ptm('contentContainer')\">\n                        <PanelMenuSub\n                            v-if=\"isItemVisible(processedItem) && isItemGroup(processedItem)\"\n                            :id=\"getItemId(processedItem) + '_list'\"\n                            role=\"group\"\n                            :panelId=\"panelId\"\n                            :focusedItemId=\"focusedItemId\"\n                            :items=\"processedItem.items\"\n                            :level=\"level + 1\"\n                            :templates=\"templates\"\n                            :activeItemPath=\"activeItemPath\"\n                            @item-toggle=\"onItemToggle\"\n                            @item-mousemove=\"$emit('item-mousemove', $event)\"\n                            :pt=\"pt\"\n                            :unstyled=\"unstyled\"\n                            v-bind=\"ptm('submenu')\"\n                        />\n                    </div>\n                </transition>\n            </li>\n            <li\n                v-if=\"isItemVisible(processedItem) && getItemProp(processedItem, 'separator')\"\n                :style=\"getItemProp(processedItem, 'style')\"\n                :class=\"[cx('separator'), getItemProp(processedItem, 'class')]\"\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 ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport Ripple from 'primevue/ripple';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'PanelMenuSub',\n    hostName: 'PanelMenu',\n    extends: BaseComponent,\n    emits: ['item-toggle', 'item-mousemove'],\n    props: {\n        panelId: {\n            type: String,\n            default: null\n        },\n        focusedItemId: {\n            type: String,\n            default: null\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        activeItemPath: {\n            type: Object,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: -1\n        }\n    },\n    methods: {\n        getItemId(processedItem) {\n            return `${this.panelId}_${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(key, processedItem, index) {\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 this.activeItemPath.some((path) => path.key === processedItem.key);\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-toggle', { processedItem, expanded: !this.isItemActive(processedItem) });\n        },\n        onItemToggle(event) {\n            this.$emit('item-toggle', event);\n        },\n        onItemMouseMove(event, processedItem) {\n            this.$emit('item-mousemove', { 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('itemLink', processedItem, index)\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]\n                    },\n                    this.getPTOptions('itemIcon', processedItem, index)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('itemLabel')\n                    },\n                    this.getPTOptions('itemLabel', processedItem, index)\n                ),\n                submenuicon: mergeProps(\n                    {\n                        class: this.cx('submenuIcon')\n                    },\n                    this.getPTOptions('submenuicon', processedItem, index)\n                )\n            };\n        }\n    },\n    components: {\n        ChevronRightIcon: ChevronRightIcon,\n        ChevronDownIcon: ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <PanelMenuSub\n        :id=\"panelId + '_list'\"\n        :class=\"cx('rootList')\"\n        role=\"tree\"\n        :tabindex=\"-1\"\n        :aria-activedescendant=\"focused ? focusedItemId : undefined\"\n        :panelId=\"panelId\"\n        :focusedItemId=\"focused ? focusedItemId : undefined\"\n        :items=\"processedItems\"\n        :templates=\"templates\"\n        :activeItemPath=\"activeItemPath\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @keydown=\"onKeyDown\"\n        @item-toggle=\"onItemToggle\"\n        @item-mousemove=\"onItemMouseMove\"\n        :pt=\"pt\"\n        :unstyled=\"unstyled\"\n        v-bind=\"ptm('rootList')\"\n    />\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { findSingle, focus } from '@primeuix/utils/dom';\nimport { resolve, isNotEmpty, isPrintableCharacter, findLast, isEmpty } from '@primeuix/utils/object';\nimport PanelMenuSub from './PanelMenuSub.vue';\n\nexport default {\n    name: 'PanelMenuList',\n    hostName: 'PanelMenu',\n    extends: BaseComponent,\n    emits: ['item-toggle', 'header-focus'],\n    props: {\n        panelId: {\n            type: String,\n            default: null\n        },\n        items: {\n            type: Array,\n            default: null\n        },\n        templates: {\n            type: Object,\n            default: null\n        },\n        expandedKeys: {\n            type: Object,\n            default: null\n        }\n    },\n    searchTimeout: null,\n    searchValue: null,\n    data() {\n        return {\n            focused: false,\n            focusedItem: null,\n            activeItemPath: []\n        };\n    },\n    watch: {\n        expandedKeys(newValue) {\n            this.autoUpdateActiveItemPath(newValue);\n        }\n    },\n    created() {\n        this.autoUpdateActiveItemPath(this.expandedKeys);\n    },\n    methods: {\n        getItemProp(processedItem, name) {\n            return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;\n        },\n        getItemLabel(processedItem) {\n            return this.getItemProp(processedItem, 'label');\n        },\n        isItemVisible(processedItem) {\n            return this.getItemProp(processedItem, 'visible') !== false;\n        },\n        isItemDisabled(processedItem) {\n            return this.getItemProp(processedItem, 'disabled');\n        },\n        isItemActive(processedItem) {\n            return this.activeItemPath.some((path) => path.key === processedItem.parentKey);\n        },\n        isItemGroup(processedItem) {\n            return isNotEmpty(processedItem.items);\n        },\n        onFocus(event) {\n            this.focused = true;\n            this.focusedItem = this.focusedItem || (this.isElementInPanel(event, event.relatedTarget) ? this.findFirstItem() : this.findLastItem());\n        },\n        onBlur() {\n            this.focused = false;\n            this.focusedItem = null;\n            this.searchValue = '';\n        },\n        onKeyDown(event) {\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                case 'Tab':\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        onArrowDownKey(event) {\n            const processedItem = isNotEmpty(this.focusedItem) ? this.findNextItem(this.focusedItem) : this.findFirstItem();\n\n            this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true });\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const processedItem = isNotEmpty(this.focusedItem) ? this.findPrevItem(this.focusedItem) : this.findLastItem();\n\n            this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true });\n            event.preventDefault();\n        },\n        onArrowLeftKey(event) {\n            if (isNotEmpty(this.focusedItem)) {\n                const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);\n\n                if (matched) {\n                    this.activeItemPath = this.activeItemPath.filter((p) => p.key !== this.focusedItem.key);\n                } else {\n                    this.focusedItem = isNotEmpty(this.focusedItem.parent) ? this.focusedItem.parent : this.focusedItem;\n                }\n\n                event.preventDefault();\n            }\n        },\n        onArrowRightKey(event) {\n            if (isNotEmpty(this.focusedItem)) {\n                const grouped = this.isItemGroup(this.focusedItem);\n\n                if (grouped) {\n                    const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);\n\n                    if (matched) {\n                        this.onArrowDownKey(event);\n                    } else {\n                        this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItem.parentKey);\n                        this.activeItemPath.push(this.focusedItem);\n                    }\n                }\n\n                event.preventDefault();\n            }\n        },\n        onHomeKey(event) {\n            this.changeFocusedItem({ originalEvent: event, processedItem: this.findFirstItem(), allowHeaderFocus: false });\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            this.changeFocusedItem({ originalEvent: event, processedItem: this.findLastItem(), focusOnNext: true, allowHeaderFocus: false });\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (isNotEmpty(this.focusedItem)) {\n                const element = findSingle(this.$el, `li[id=\"${`${this.focusedItemId}`}\"]`);\n                const anchorElement = element && (findSingle(element, '[data-pc-section=\"itemlink\"]') || findSingle(element, 'a,button'));\n\n                anchorElement ? anchorElement.click() : element && element.click();\n            }\n\n            event.preventDefault();\n        },\n        onSpaceKey(event) {\n            this.onEnterKey(event);\n        },\n        onItemToggle(event) {\n            const { processedItem, expanded } = event;\n\n            if (this.expandedKeys) {\n                this.$emit('item-toggle', { item: processedItem.item, expanded });\n            } else {\n                this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== processedItem.parentKey);\n                expanded && this.activeItemPath.push(processedItem);\n            }\n\n            this.focusedItem = processedItem;\n            focus(this.$el);\n        },\n        onItemMouseMove(event) {\n            if (this.focused) {\n                this.focusedItem = event.processedItem;\n            }\n        },\n        isElementInPanel(event, element) {\n            const panel = event.currentTarget.closest('[data-pc-section=\"panel\"]');\n\n            return panel && panel.contains(element);\n        },\n        isItemMatched(processedItem) {\n            return this.isValidItem(processedItem) && this.getItemLabel(processedItem)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));\n        },\n        isVisibleItem(processedItem) {\n            return !!processedItem && (processedItem.level === 0 || this.isItemActive(processedItem)) && this.isItemVisible(processedItem);\n        },\n        isValidItem(processedItem) {\n            return !!processedItem && !this.isItemDisabled(processedItem) && !this.getItemProp(processedItem, 'separator');\n        },\n        findFirstItem() {\n            return this.visibleItems.find((processedItem) => this.isValidItem(processedItem));\n        },\n        findLastItem() {\n            return findLast(this.visibleItems, (processedItem) => this.isValidItem(processedItem));\n        },\n        findNextItem(processedItem) {\n            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);\n            const matchedItem = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).find((pItem) => this.isValidItem(pItem)) : undefined;\n\n            return matchedItem || processedItem;\n        },\n        findPrevItem(processedItem) {\n            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);\n            const matchedItem = index > 0 ? findLast(this.visibleItems.slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined;\n\n            return matchedItem || processedItem;\n        },\n        searchItems(event, char) {\n            this.searchValue = (this.searchValue || '') + char;\n\n            let matchedItem = null;\n            let matched = false;\n\n            if (isNotEmpty(this.focusedItem)) {\n                const focusedItemIndex = this.visibleItems.findIndex((processedItem) => processedItem.key === this.focusedItem.key);\n\n                matchedItem = this.visibleItems.slice(focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem));\n                matchedItem = isEmpty(matchedItem) ? this.visibleItems.slice(0, focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem)) : matchedItem;\n            } else {\n                matchedItem = this.visibleItems.find((processedItem) => this.isItemMatched(processedItem));\n            }\n\n            if (isNotEmpty(matchedItem)) {\n                matched = true;\n            }\n\n            if (isEmpty(matchedItem) && isEmpty(this.focusedItem)) {\n                matchedItem = this.findFirstItem();\n            }\n\n            if (isNotEmpty(matchedItem)) {\n                this.changeFocusedItem({\n                    originalEvent: event,\n                    processedItem: matchedItem,\n                    allowHeaderFocus: false\n                });\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        changeFocusedItem(event) {\n            const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event;\n\n            if (isNotEmpty(this.focusedItem) && this.focusedItem.key !== processedItem.key) {\n                this.focusedItem = processedItem;\n                this.scrollInView();\n            } else if (allowHeaderFocus) {\n                this.$emit('header-focus', { originalEvent, focusOnNext, selfCheck });\n            }\n        },\n        scrollInView() {\n            const element = findSingle(this.$el, `li[id=\"${`${this.focusedItemId}`}\"]`);\n\n            if (element) {\n                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });\n            }\n        },\n        autoUpdateActiveItemPath(expandedKeys) {\n            this.activeItemPath = Object.entries(expandedKeys || {}).reduce((acc, [key, val]) => {\n                if (val) {\n                    const processedItem = this.findProcessedItemByItemKey(key);\n\n                    processedItem && acc.push(processedItem);\n                }\n\n                return acc;\n            }, []);\n        },\n        findProcessedItemByItemKey(key, processedItems, level = 0) {\n            processedItems = processedItems || (level === 0 && this.processedItems);\n\n            if (!processedItems) return null;\n\n            for (let i = 0; i < processedItems.length; i++) {\n                const processedItem = processedItems[i];\n\n                if (this.getItemProp(processedItem, 'key') === key) return processedItem;\n\n                const matchedItem = this.findProcessedItemByItemKey(key, processedItem.items, level + 1);\n\n                if (matchedItem) return matchedItem;\n            }\n        },\n        createProcessedItems(items, level = 0, parent = {}, parentKey = '') {\n            const processedItems = [];\n\n            items &&\n                items.forEach((item, index) => {\n                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;\n                    const newItem = {\n                        item,\n                        index,\n                        level,\n                        key,\n                        parent,\n                        parentKey\n                    };\n\n                    newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key);\n                    processedItems.push(newItem);\n                });\n\n            return processedItems;\n        },\n        flatItems(processedItems, processedFlattenItems = []) {\n            processedItems &&\n                processedItems.forEach((processedItem) => {\n                    if (this.isVisibleItem(processedItem)) {\n                        processedFlattenItems.push(processedItem);\n                        this.flatItems(processedItem.items, processedFlattenItems);\n                    }\n                });\n\n            return processedFlattenItems;\n        }\n    },\n    computed: {\n        processedItems() {\n            return this.createProcessedItems(this.items || []);\n        },\n        visibleItems() {\n            return this.flatItems(this.processedItems);\n        },\n        focusedItemId() {\n            return isNotEmpty(this.focusedItem) ? `${this.panelId}_${this.focusedItem.key}` : null;\n        }\n    },\n    components: {\n        PanelMenuSub: PanelMenuSub\n    }\n};\n</script>\n","<template>\n    <PanelMenuSub\n        :id=\"panelId + '_list'\"\n        :class=\"cx('rootList')\"\n        role=\"tree\"\n        :tabindex=\"-1\"\n        :aria-activedescendant=\"focused ? focusedItemId : undefined\"\n        :panelId=\"panelId\"\n        :focusedItemId=\"focused ? focusedItemId : undefined\"\n        :items=\"processedItems\"\n        :templates=\"templates\"\n        :activeItemPath=\"activeItemPath\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @keydown=\"onKeyDown\"\n        @item-toggle=\"onItemToggle\"\n        @item-mousemove=\"onItemMouseMove\"\n        :pt=\"pt\"\n        :unstyled=\"unstyled\"\n        v-bind=\"ptm('rootList')\"\n    />\n</template>\n\n<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport { findSingle, focus } from '@primeuix/utils/dom';\nimport { resolve, isNotEmpty, isPrintableCharacter, findLast, isEmpty } from '@primeuix/utils/object';\nimport PanelMenuSub from './PanelMenuSub.vue';\n\nexport default {\n    name: 'PanelMenuList',\n    hostName: 'PanelMenu',\n    extends: BaseComponent,\n    emits: ['item-toggle', 'header-focus'],\n    props: {\n        panelId: {\n            type: String,\n            default: null\n        },\n        items: {\n            type: Array,\n            default: null\n        },\n        templates: {\n            type: Object,\n            default: null\n        },\n        expandedKeys: {\n            type: Object,\n            default: null\n        }\n    },\n    searchTimeout: null,\n    searchValue: null,\n    data() {\n        return {\n            focused: false,\n            focusedItem: null,\n            activeItemPath: []\n        };\n    },\n    watch: {\n        expandedKeys(newValue) {\n            this.autoUpdateActiveItemPath(newValue);\n        }\n    },\n    created() {\n        this.autoUpdateActiveItemPath(this.expandedKeys);\n    },\n    methods: {\n        getItemProp(processedItem, name) {\n            return processedItem && processedItem.item ? resolve(processedItem.item[name]) : undefined;\n        },\n        getItemLabel(processedItem) {\n            return this.getItemProp(processedItem, 'label');\n        },\n        isItemVisible(processedItem) {\n            return this.getItemProp(processedItem, 'visible') !== false;\n        },\n        isItemDisabled(processedItem) {\n            return this.getItemProp(processedItem, 'disabled');\n        },\n        isItemActive(processedItem) {\n            return this.activeItemPath.some((path) => path.key === processedItem.parentKey);\n        },\n        isItemGroup(processedItem) {\n            return isNotEmpty(processedItem.items);\n        },\n        onFocus(event) {\n            this.focused = true;\n            this.focusedItem = this.focusedItem || (this.isElementInPanel(event, event.relatedTarget) ? this.findFirstItem() : this.findLastItem());\n        },\n        onBlur() {\n            this.focused = false;\n            this.focusedItem = null;\n            this.searchValue = '';\n        },\n        onKeyDown(event) {\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                case 'Tab':\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        onArrowDownKey(event) {\n            const processedItem = isNotEmpty(this.focusedItem) ? this.findNextItem(this.focusedItem) : this.findFirstItem();\n\n            this.changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true });\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const processedItem = isNotEmpty(this.focusedItem) ? this.findPrevItem(this.focusedItem) : this.findLastItem();\n\n            this.changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true });\n            event.preventDefault();\n        },\n        onArrowLeftKey(event) {\n            if (isNotEmpty(this.focusedItem)) {\n                const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);\n\n                if (matched) {\n                    this.activeItemPath = this.activeItemPath.filter((p) => p.key !== this.focusedItem.key);\n                } else {\n                    this.focusedItem = isNotEmpty(this.focusedItem.parent) ? this.focusedItem.parent : this.focusedItem;\n                }\n\n                event.preventDefault();\n            }\n        },\n        onArrowRightKey(event) {\n            if (isNotEmpty(this.focusedItem)) {\n                const grouped = this.isItemGroup(this.focusedItem);\n\n                if (grouped) {\n                    const matched = this.activeItemPath.some((p) => p.key === this.focusedItem.key);\n\n                    if (matched) {\n                        this.onArrowDownKey(event);\n                    } else {\n                        this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItem.parentKey);\n                        this.activeItemPath.push(this.focusedItem);\n                    }\n                }\n\n                event.preventDefault();\n            }\n        },\n        onHomeKey(event) {\n            this.changeFocusedItem({ originalEvent: event, processedItem: this.findFirstItem(), allowHeaderFocus: false });\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            this.changeFocusedItem({ originalEvent: event, processedItem: this.findLastItem(), focusOnNext: true, allowHeaderFocus: false });\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (isNotEmpty(this.focusedItem)) {\n                const element = findSingle(this.$el, `li[id=\"${`${this.focusedItemId}`}\"]`);\n                const anchorElement = element && (findSingle(element, '[data-pc-section=\"itemlink\"]') || findSingle(element, 'a,button'));\n\n                anchorElement ? anchorElement.click() : element && element.click();\n            }\n\n            event.preventDefault();\n        },\n        onSpaceKey(event) {\n            this.onEnterKey(event);\n        },\n        onItemToggle(event) {\n            const { processedItem, expanded } = event;\n\n            if (this.expandedKeys) {\n                this.$emit('item-toggle', { item: processedItem.item, expanded });\n            } else {\n                this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== processedItem.parentKey);\n                expanded && this.activeItemPath.push(processedItem);\n            }\n\n            this.focusedItem = processedItem;\n            focus(this.$el);\n        },\n        onItemMouseMove(event) {\n            if (this.focused) {\n                this.focusedItem = event.processedItem;\n            }\n        },\n        isElementInPanel(event, element) {\n            const panel = event.currentTarget.closest('[data-pc-section=\"panel\"]');\n\n            return panel && panel.contains(element);\n        },\n        isItemMatched(processedItem) {\n            return this.isValidItem(processedItem) && this.getItemLabel(processedItem)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));\n        },\n        isVisibleItem(processedItem) {\n            return !!processedItem && (processedItem.level === 0 || this.isItemActive(processedItem)) && this.isItemVisible(processedItem);\n        },\n        isValidItem(processedItem) {\n            return !!processedItem && !this.isItemDisabled(processedItem) && !this.getItemProp(processedItem, 'separator');\n        },\n        findFirstItem() {\n            return this.visibleItems.find((processedItem) => this.isValidItem(processedItem));\n        },\n        findLastItem() {\n            return findLast(this.visibleItems, (processedItem) => this.isValidItem(processedItem));\n        },\n        findNextItem(processedItem) {\n            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);\n            const matchedItem = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).find((pItem) => this.isValidItem(pItem)) : undefined;\n\n            return matchedItem || processedItem;\n        },\n        findPrevItem(processedItem) {\n            const index = this.visibleItems.findIndex((item) => item.key === processedItem.key);\n            const matchedItem = index > 0 ? findLast(this.visibleItems.slice(0, index), (pItem) => this.isValidItem(pItem)) : undefined;\n\n            return matchedItem || processedItem;\n        },\n        searchItems(event, char) {\n            this.searchValue = (this.searchValue || '') + char;\n\n            let matchedItem = null;\n            let matched = false;\n\n            if (isNotEmpty(this.focusedItem)) {\n                const focusedItemIndex = this.visibleItems.findIndex((processedItem) => processedItem.key === this.focusedItem.key);\n\n                matchedItem = this.visibleItems.slice(focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem));\n                matchedItem = isEmpty(matchedItem) ? this.visibleItems.slice(0, focusedItemIndex).find((processedItem) => this.isItemMatched(processedItem)) : matchedItem;\n            } else {\n                matchedItem = this.visibleItems.find((processedItem) => this.isItemMatched(processedItem));\n            }\n\n            if (isNotEmpty(matchedItem)) {\n                matched = true;\n            }\n\n            if (isEmpty(matchedItem) && isEmpty(this.focusedItem)) {\n                matchedItem = this.findFirstItem();\n            }\n\n            if (isNotEmpty(matchedItem)) {\n                this.changeFocusedItem({\n                    originalEvent: event,\n                    processedItem: matchedItem,\n                    allowHeaderFocus: false\n                });\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        changeFocusedItem(event) {\n            const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event;\n\n            if (isNotEmpty(this.focusedItem) && this.focusedItem.key !== processedItem.key) {\n                this.focusedItem = processedItem;\n                this.scrollInView();\n            } else if (allowHeaderFocus) {\n                this.$emit('header-focus', { originalEvent, focusOnNext, selfCheck });\n            }\n        },\n        scrollInView() {\n            const element = findSingle(this.$el, `li[id=\"${`${this.focusedItemId}`}\"]`);\n\n            if (element) {\n                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });\n            }\n        },\n        autoUpdateActiveItemPath(expandedKeys) {\n            this.activeItemPath = Object.entries(expandedKeys || {}).reduce((acc, [key, val]) => {\n                if (val) {\n                    const processedItem = this.findProcessedItemByItemKey(key);\n\n                    processedItem && acc.push(processedItem);\n                }\n\n                return acc;\n            }, []);\n        },\n        findProcessedItemByItemKey(key, processedItems, level = 0) {\n            processedItems = processedItems || (level === 0 && this.processedItems);\n\n            if (!processedItems) return null;\n\n            for (let i = 0; i < processedItems.length; i++) {\n                const processedItem = processedItems[i];\n\n                if (this.getItemProp(processedItem, 'key') === key) return processedItem;\n\n                const matchedItem = this.findProcessedItemByItemKey(key, processedItem.items, level + 1);\n\n                if (matchedItem) return matchedItem;\n            }\n        },\n        createProcessedItems(items, level = 0, parent = {}, parentKey = '') {\n            const processedItems = [];\n\n            items &&\n                items.forEach((item, index) => {\n                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;\n                    const newItem = {\n                        item,\n                        index,\n                        level,\n                        key,\n                        parent,\n                        parentKey\n                    };\n\n                    newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key);\n                    processedItems.push(newItem);\n                });\n\n            return processedItems;\n        },\n        flatItems(processedItems, processedFlattenItems = []) {\n            processedItems &&\n                processedItems.forEach((process