primevue/listbox/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/listbox/BaseListbox.vue","../../src/listbox/Listbox.vue","../../src/listbox/Listbox.vue?vue&type=template&id=212531f3&lang.js"],"sourcesContent":["<script>\nimport BaseEditableHolder from '@primevue/core/baseeditableholder';\nimport ListboxStyle from 'primevue/listbox/style';\n\nexport default {\n    name: 'BaseListbox',\n    extends: BaseEditableHolder,\n    props: {\n        options: Array,\n        optionLabel: null,\n        optionValue: null,\n        optionDisabled: null,\n        optionGroupLabel: null,\n        optionGroupChildren: null,\n        listStyle: null,\n        scrollHeight: {\n            type: String,\n            default: '14rem'\n        },\n        dataKey: null,\n        multiple: {\n            type: Boolean,\n            default: false\n        },\n        metaKeySelection: {\n            type: Boolean,\n            default: false\n        },\n        filter: Boolean,\n        filterPlaceholder: String,\n        filterLocale: String,\n        filterMatchMode: {\n            type: String,\n            default: 'contains'\n        },\n        filterFields: {\n            type: Array,\n            default: null\n        },\n        virtualScrollerOptions: {\n            type: Object,\n            default: null\n        },\n        autoOptionFocus: {\n            type: Boolean,\n            default: true\n        },\n        selectOnFocus: {\n            type: Boolean,\n            default: false\n        },\n        focusOnHover: {\n            type: Boolean,\n            default: true\n        },\n        highlightOnSelect: {\n            type: Boolean,\n            default: true\n        },\n        checkmark: {\n            type: Boolean,\n            default: false\n        },\n        filterMessage: {\n            type: String,\n            default: null\n        },\n        selectionMessage: {\n            type: String,\n            default: null\n        },\n        emptySelectionMessage: {\n            type: String,\n            default: null\n        },\n        emptyFilterMessage: {\n            type: String,\n            default: null\n        },\n        emptyMessage: {\n            type: String,\n            default: null\n        },\n        filterIcon: {\n            type: String,\n            default: undefined\n        },\n        striped: {\n            type: Boolean,\n            default: false\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        }\n    },\n    style: ListboxStyle,\n    provide() {\n        return {\n            $pcListbox: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :id=\"$id\" :class=\"cx('root')\" @focusout=\"onFocusout\" :data-p=\"containerDataP\" v-bind=\"ptmi('root')\">\n        <span\n            ref=\"firstHiddenFocusableElement\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            class=\"p-hidden-accessible p-hidden-focusable\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            @focus=\"onFirstHiddenFocus\"\n            v-bind=\"ptm('hiddenFirstFocusableEl')\"\n            :data-p-hidden-accessible=\"true\"\n            :data-p-hidden-focusable=\"true\"\n        ></span>\n        <div v-if=\"$slots.header\" :class=\"cx('header')\">\n            <slot name=\"header\" :value=\"d_value\" :options=\"visibleOptions\"></slot>\n        </div>\n        <div v-if=\"filter\" :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <IconField :unstyled=\"unstyled\" :pt=\"ptm('pcFilterContainer')\">\n                <InputText\n                    v-model=\"filterValue\"\n                    type=\"text\"\n                    :class=\"cx('pcFilter')\"\n                    :placeholder=\"filterPlaceholder\"\n                    role=\"searchbox\"\n                    autocomplete=\"off\"\n                    :disabled=\"disabled\"\n                    :unstyled=\"unstyled\"\n                    :aria-owns=\"$id + '_list'\"\n                    :aria-activedescendant=\"focusedOptionId\"\n                    :tabindex=\"!disabled && !focused ? tabindex : -1\"\n                    @input=\"onFilterChange\"\n                    @blur=\"onFilterBlur\"\n                    @keydown=\"onFilterKeyDown\"\n                    :pt=\"ptm('pcFilter')\"\n                />\n                <InputIcon :unstyled=\"unstyled\" :pt=\"ptm('pcFilterIconContainer')\">\n                    <slot name=\"filtericon\">\n                        <span v-if=\"filterIcon\" :class=\"filterIcon\" v-bind=\"ptm('filterIcon')\" />\n                        <SearchIcon v-else v-bind=\"ptm('filterIcon')\" />\n                    </slot>\n                </InputIcon>\n            </IconField>\n            <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenFilterResult')\" :data-p-hidden-accessible=\"true\">\n                {{ filterResultMessageText }}\n            </span>\n        </div>\n        <div :class=\"cx('listContainer')\" :style=\"[{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }, listStyle]\" v-bind=\"ptm('listContainer')\">\n            <VirtualScroller :ref=\"virtualScrollerRef\" v-bind=\"virtualScrollerOptions\" :items=\"visibleOptions\" :style=\"[{ height: scrollHeight }, listStyle]\" :tabindex=\"-1\" :disabled=\"virtualScrollerDisabled\" :pt=\"ptm('virtualScroller')\">\n                <template v-slot:content=\"{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }\">\n                    <ul\n                        :ref=\"(el) => listRef(el, contentRef)\"\n                        :id=\"$id + '_list'\"\n                        :class=\"[cx('list'), styleClass]\"\n                        :style=\"contentStyle\"\n                        :tabindex=\"-1\"\n                        role=\"listbox\"\n                        :aria-multiselectable=\"multiple\"\n                        :aria-label=\"ariaLabel\"\n                        :aria-labelledby=\"ariaLabelledby\"\n                        :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n                        :aria-disabled=\"disabled\"\n                        @focus=\"onListFocus\"\n                        @blur=\"onListBlur\"\n                        @keydown=\"onListKeyDown\"\n                        v-bind=\"ptm('list')\"\n                    >\n                        <template v-for=\"(option, i) of items\" :key=\"getOptionRenderKey(option, getOptionIndex(i, getItemOptions))\">\n                            <li v-if=\"isOptionGroup(option)\" :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\" :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\" :class=\"cx('optionGroup')\" role=\"option\" v-bind=\"ptm('optionGroup')\">\n                                <slot name=\"optiongroup\" :option=\"option.optionGroup\" :index=\"getOptionIndex(i, getItemOptions)\">{{ getOptionGroupLabel(option.optionGroup) }}</slot>\n                            </li>\n                            <li\n                                v-else\n                                :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\"\n                                v-ripple\n                                :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\"\n                                :class=\"cx('option', { option, index: i, getItemOptions })\"\n                                role=\"option\"\n                                :aria-label=\"getOptionLabel(option)\"\n                                :aria-selected=\"isSelected(option)\"\n                                :aria-disabled=\"isOptionDisabled(option)\"\n                                :aria-setsize=\"ariaSetSize\"\n                                :aria-posinset=\"getAriaPosInset(getOptionIndex(i, getItemOptions))\"\n                                @click=\"onOptionSelect($event, option, getOptionIndex(i, getItemOptions))\"\n                                @mousedown=\"onOptionMouseDown($event, getOptionIndex(i, getItemOptions))\"\n                                @mousemove=\"onOptionMouseMove($event, getOptionIndex(i, getItemOptions))\"\n                                @touchend=\"onOptionTouchEnd()\"\n                                @dblclick=\"onOptionDblClick($event, option)\"\n                                v-bind=\"getPTOptions(option, getItemOptions, i, 'option')\"\n                                :data-p-selected=\"!checkmark && isSelected(option)\"\n                                :data-p-focused=\"focusedOptionIndex === getOptionIndex(i, getItemOptions)\"\n                                :data-p-disabled=\"isOptionDisabled(option)\"\n                            >\n                                <template v-if=\"checkmark\">\n                                    <CheckIcon v-if=\"isSelected(option)\" :class=\"cx('optionCheckIcon')\" v-bind=\"ptm('optionCheckIcon')\" />\n                                    <BlankIcon v-else :class=\"cx('optionBlankIcon')\" v-bind=\"ptm('optionBlankIcon')\" />\n                                </template>\n                                <slot name=\"option\" :option=\"option\" :selected=\"isSelected(option)\" :index=\"getOptionIndex(i, getItemOptions)\">{{ getOptionLabel(option) }}</slot>\n                            </li>\n                        </template>\n                        <li v-if=\"filterValue && (!items || (items && items.length === 0))\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\">\n                            <slot name=\"emptyfilter\">{{ emptyFilterMessageText }}</slot>\n                        </li>\n                        <li v-else-if=\"!options || (options && options.length === 0)\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\">\n                            <slot name=\"empty\">{{ emptyMessageText }}</slot>\n                        </li>\n                    </ul>\n                </template>\n                <template v-if=\"$slots.loader\" v-slot:loader=\"{ options }\">\n                    <slot name=\"loader\" :options=\"options\"></slot>\n                </template>\n            </VirtualScroller>\n        </div>\n        <slot name=\"footer\" :value=\"d_value\" :options=\"visibleOptions\"></slot>\n        <span v-if=\"!options || (options && options.length === 0)\" role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenEmptyMessage')\" :data-p-hidden-accessible=\"true\">\n            {{ emptyMessageText }}\n        </span>\n        <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSelectedMessage')\" :data-p-hidden-accessible=\"true\">\n            {{ selectedMessageText }}\n        </span>\n        <span\n            ref=\"lastHiddenFocusableElement\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            class=\"p-hidden-accessible p-hidden-focusable\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            @focus=\"onLastHiddenFocus\"\n            v-bind=\"ptm('hiddenLastFocusableEl')\"\n            :data-p-hidden-accessible=\"true\"\n            :data-p-hidden-focusable=\"true\"\n        ></span>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { findSingle, focus, getFirstFocusableElement, isElement } from '@primeuix/utils/dom';\nimport { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';\nimport { FilterService } from '@primevue/core/api';\nimport BlankIcon from '@primevue/icons/blank';\nimport CheckIcon from '@primevue/icons/check';\nimport SearchIcon from '@primevue/icons/search';\nimport IconField from 'primevue/iconfield';\nimport InputIcon from 'primevue/inputicon';\nimport InputText from 'primevue/inputtext';\nimport Ripple from 'primevue/ripple';\nimport VirtualScroller from 'primevue/virtualscroller';\nimport BaseListbox from './BaseListbox.vue';\n\nexport default {\n    name: 'Listbox',\n    extends: BaseListbox,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur', 'filter', 'item-dblclick', 'option-dblclick'],\n    list: null,\n    virtualScroller: null,\n    optionTouched: false,\n    startRangeIndex: -1,\n    searchTimeout: null,\n    searchValue: '',\n    data() {\n        return {\n            filterValue: null,\n            focused: false,\n            focusedOptionIndex: -1\n        };\n    },\n    watch: {\n        options() {\n            this.autoUpdateModel();\n        }\n    },\n    mounted() {\n        this.autoUpdateModel();\n    },\n    methods: {\n        getOptionIndex(index, fn) {\n            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];\n        },\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : typeof option === 'string' ? option : null;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option, index) {\n            return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;\n        },\n        getPTOptions(option, itemOptions, index, key) {\n            return this.ptm(key, {\n                context: {\n                    selected: this.isSelected(option),\n                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),\n                    disabled: this.isOptionDisabled(option)\n                }\n            });\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        isOptionGroup(option) {\n            return this.optionGroupLabel && option.optionGroup && option.group;\n        },\n        getOptionGroupLabel(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupLabel);\n        },\n        getOptionGroupChildren(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupChildren);\n        },\n        getAriaPosInset(index) {\n            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;\n        },\n        onFirstHiddenFocus() {\n            focus(this.list);\n\n            const firstFocusableEl = getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable=\"true\"])');\n\n            this.$refs.lastHiddenFocusableElement.tabIndex = isElement(firstFocusableEl) ? undefined : -1;\n            this.$refs.firstHiddenFocusableElement.tabIndex = -1;\n        },\n        onLastHiddenFocus(event) {\n            const relatedTarget = event.relatedTarget;\n\n            if (relatedTarget === this.list) {\n                const firstFocusableEl = getFirstFocusableElement(this.$el, ':not([data-p-hidden-focusable=\"true\"])');\n\n                focus(firstFocusableEl);\n                this.$refs.firstHiddenFocusableElement.tabIndex = undefined;\n            } else {\n                focus(this.$refs.firstHiddenFocusableElement);\n            }\n\n            this.$refs.lastHiddenFocusableElement.tabIndex = -1;\n        },\n        onFocusout(event) {\n            if (!this.$el.contains(event.relatedTarget) && this.$refs.lastHiddenFocusableElement && this.$refs.firstHiddenFocusableElement) {\n                this.$refs.lastHiddenFocusableElement.tabIndex = this.$refs.firstHiddenFocusableElement.tabIndex = undefined;\n            }\n        },\n        onListFocus(event) {\n            this.focused = true;\n            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();\n            this.autoUpdateModel();\n            this.$emit('focus', event);\n        },\n        onListBlur(event) {\n            this.focused = false;\n            this.focusedOptionIndex = this.startRangeIndex = -1;\n            this.searchValue = '';\n            this.$emit('blur', event);\n        },\n        onListKeyDown(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 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'PageDown':\n                    this.onPageDownKey(event);\n                    break;\n\n                case 'PageUp':\n                    this.onPageUpKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.onSpaceKey(event);\n                    break;\n\n                case 'Tab':\n                    //NOOP\n                    break;\n\n                case 'ShiftLeft':\n                case 'ShiftRight':\n                    this.onShiftKey(event);\n                    break;\n\n                default:\n                    if (this.multiple && event.code === 'KeyA' && metaKey) {\n                        const value = this.visibleOptions.filter((option) => this.isValidOption(option)).map((option) => this.getOptionValue(option));\n\n                        this.updateModel(event, value);\n\n                        event.preventDefault();\n                        break;\n                    }\n\n                    if (!metaKey && isPrintableCharacter(event.key)) {\n                        this.searchOptions(event, event.key);\n                        event.preventDefault();\n                    }\n\n                    break;\n            }\n        },\n        onOptionSelect(event, option, index = -1) {\n            if (this.disabled || this.isOptionDisabled(option)) {\n                return;\n            }\n\n            this.multiple ? this.onOptionSelectMultiple(event, option) : this.onOptionSelectSingle(event, option);\n            this.optionTouched = false;\n            index !== -1 && (this.focusedOptionIndex = index);\n        },\n        onOptionMouseDown(event, index) {\n            this.changeFocusedOptionIndex(event, index);\n        },\n        onOptionMouseMove(event, index) {\n            if (this.focusOnHover && this.focused) {\n                this.changeFocusedOptionIndex(event, index);\n            }\n        },\n        onOptionTouchEnd() {\n            if (this.disabled) {\n                return;\n            }\n\n            this.optionTouched = true;\n        },\n        onOptionDblClick(event, item) {\n            this.$emit('item-dblclick', {\n                originalEvent: event,\n                value: item\n            });\n            this.$emit('option-dblclick', {\n                originalEvent: event,\n                value: item\n            });\n        },\n        onOptionSelectSingle(event, option) {\n            let selected = this.isSelected(option);\n            let valueChanged = false;\n            let value = null;\n            let metaSelection = this.optionTouched ? false : this.metaKeySelection;\n\n            if (metaSelection) {\n                let metaKey = event && (event.metaKey || event.ctrlKey);\n\n                if (selected) {\n                    if (metaKey) {\n                        value = null;\n                        valueChanged = true;\n                    }\n                } else {\n                    value = this.getOptionValue(option);\n                    valueChanged = true;\n                }\n            } else {\n                value = selected ? null : this.getOptionValue(option);\n                valueChanged = true;\n            }\n\n            if (valueChanged) {\n                this.updateModel(event, value);\n            }\n        },\n        onOptionSelectMultiple(event, option) {\n            let selected = this.isSelected(option);\n            let value = null;\n            let metaSelection = this.optionTouched ? false : this.metaKeySelection;\n\n            if (metaSelection) {\n                let metaKey = event.metaKey || event.ctrlKey;\n\n                if (selected) {\n                    value = metaKey ? this.removeOption(option) : [this.getOptionValue(option)];\n                } else {\n                    value = metaKey ? this.d_value || [] : [];\n                    value = [...value, this.getOptionValue(option)];\n                }\n            } else {\n                value = selected ? this.removeOption(option) : [...(this.d_value || []), this.getOptionValue(option)];\n            }\n\n            this.updateModel(event, value);\n        },\n        onOptionSelectRange(event, start = -1, end = -1) {\n            start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));\n            end === -1 && (end = this.findNearestSelectedOptionIndex(start));\n\n            if (start !== -1 && end !== -1) {\n                const rangeStart = Math.min(start, end);\n                const rangeEnd = Math.max(start, end);\n                const value = this.visibleOptions\n                    .slice(rangeStart, rangeEnd + 1)\n                    .filter((option) => this.isValidOption(option))\n                    .map((option) => this.getOptionValue(option));\n\n                this.updateModel(event, value);\n            }\n        },\n        onFilterChange(event) {\n            this.$emit('filter', { originalEvent: event, value: event.target.value, filterValue: this.visibleOptions });\n            this.focusedOptionIndex = this.startRangeIndex = -1;\n        },\n        onFilterBlur() {\n            this.focusedOptionIndex = this.startRangeIndex = -1;\n        },\n        onFilterKeyDown(event) {\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                case 'ArrowRight':\n                    this.onArrowLeftKey(event, true);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event, true);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event, true);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'ShiftLeft':\n                case 'ShiftRight':\n                    this.onShiftKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();\n\n            if (this.multiple && event.shiftKey) {\n                this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);\n            }\n\n            this.changeFocusedOptionIndex(event, optionIndex);\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();\n\n            if (this.multiple && event.shiftKey) {\n                this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);\n            }\n\n            this.changeFocusedOptionIndex(event, optionIndex);\n            event.preventDefault();\n        },\n        onArrowLeftKey(event, pressedInInputText = false) {\n            pressedInInputText && (this.focusedOptionIndex = -1);\n        },\n        onHomeKey(event, pressedInInputText = false) {\n            if (pressedInInputText) {\n                const target = event.currentTarget;\n\n                if (event.shiftKey) {\n                    target.setSelectionRange(0, event.target.selectionStart);\n                } else {\n                    target.setSelectionRange(0, 0);\n                    this.focusedOptionIndex = -1;\n                }\n            } else {\n                let metaKey = event.metaKey || event.ctrlKey;\n                let optionIndex = this.findFirstOptionIndex();\n\n                if (this.multiple && event.shiftKey && metaKey) {\n                    this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);\n                }\n\n                this.changeFocusedOptionIndex(event, optionIndex);\n            }\n\n            event.preventDefault();\n        },\n        onEndKey(event, pressedInInputText = false) {\n            if (pressedInInputText) {\n                const target = event.currentTarget;\n\n                if (event.shiftKey) {\n                    target.setSelectionRange(event.target.selectionStart, target.value.length);\n                } else {\n                    const len = target.value.length;\n\n                    target.setSelectionRange(len, len);\n                    this.focusedOptionIndex = -1;\n                }\n            } else {\n                let metaKey = event.metaKey || event.ctrlKey;\n                let optionIndex = this.findLastOptionIndex();\n\n                if (this.multiple && event.shiftKey && metaKey) {\n                    this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);\n                }\n\n                this.changeFocusedOptionIndex(event, optionIndex);\n            }\n\n            event.preventDefault();\n        },\n        onPageUpKey(event) {\n            this.scrollInView(0);\n            event.preventDefault();\n        },\n        onPageDownKey(event) {\n            this.scrollInView(this.visibleOptions.length - 1);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (this.focusedOptionIndex !== -1) {\n                if (this.multiple && event.shiftKey) this.onOptionSelectRange(event, this.focusedOptionIndex);\n                else this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n            }\n        },\n        onSpaceKey(event) {\n            event.preventDefault();\n            this.onEnterKey(event);\n        },\n        onShiftKey() {\n            this.startRangeIndex = this.focusedOptionIndex;\n        },\n        isOptionMatched(option) {\n            return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));\n        },\n        isValidOption(option) {\n            return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));\n        },\n        isValidSelectedOption(option) {\n            return this.isValidOption(option) && this.isSelected(option);\n        },\n        isEquals(value1, value2) {\n            return equals(value1, value2, this.equalityKey);\n        },\n        isSelected(option) {\n            const optionValue = this.getOptionValue(option);\n\n            if (this.multiple) return (this.d_value || []).some((value) => this.isEquals(value, optionValue));\n            else return this.isEquals(this.d_value, optionValue);\n        },\n        findFirstOptionIndex() {\n            return this.visibleOptions.findIndex((option) => this.isValidOption(option));\n        },\n        findLastOptionIndex() {\n            return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));\n        },\n        findNextOptionIndex(index) {\n            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;\n        },\n        findPrevOptionIndex(index) {\n            const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n        },\n        findSelectedOptionIndex() {\n            if (this.$filled) {\n                if (this.multiple) {\n                    for (let index = this.d_value.length - 1; index >= 0; index--) {\n                        const value = this.d_value[index];\n                        const matchedOptionIndex = this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option) && this.isEquals(value, this.getOptionValue(option)));\n\n                        if (matchedOptionIndex > -1) return matchedOptionIndex;\n                    }\n                } else {\n                    return this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option));\n                }\n            }\n\n            return -1;\n        },\n        findFirstSelectedOptionIndex() {\n            return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;\n        },\n        findLastSelectedOptionIndex() {\n            return this.$filled ? findLastIndex(this.visibleOptions, (option) => this.isValidSelectedOption(option)) : -1;\n        },\n        findNextSelectedOptionIndex(index) {\n            const matchedOptionIndex = this.$filled && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;\n        },\n        findPrevSelectedOptionIndex(index) {\n            const matchedOptionIndex = this.$filled && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : -1;\n        },\n        findNearestSelectedOptionIndex(index, firstCheckUp = false) {\n            let matchedOptionIndex = -1;\n\n            if (this.$filled) {\n                if (firstCheckUp) {\n                    matchedOptionIndex = this.findPrevSelectedOptionIndex(index);\n                    matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;\n                } else {\n                    matchedOptionIndex = this.findNextSelectedOptionIndex(index);\n                    matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;\n                }\n            }\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n        },\n        findFirstFocusedOptionIndex() {\n            const selectedIndex = this.findFirstSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;\n        },\n        findLastFocusedOptionIndex() {\n            const selectedIndex = this.findLastSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;\n        },\n        searchOptions(event, char) {\n            this.searchValue = (this.searchValue || '') + char;\n\n            let optionIndex = -1;\n\n            if (isNotEmpty(this.searchValue)) {\n                if (this.focusedOptionIndex !== -1) {\n                    optionIndex = this.visibleOptions.slice(this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option));\n                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionIndex).findIndex((option) => this.isOptionMatched(option)) : optionIndex + this.focusedOptionIndex;\n                } else {\n                    optionIndex = this.visibleOptions.findIndex((option) => this.isOptionMatched(option));\n                }\n\n                if (optionIndex === -1 && this.focusedOptionIndex === -1) {\n                    optionIndex = this.findFirstFocusedOptionIndex();\n                }\n\n                if (optionIndex !== -1) {\n                    this.changeFocusedOptionIndex(event, optionIndex);\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        removeOption(option) {\n            return this.d_value.filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey));\n        },\n        changeFocusedOptionIndex(event, index) {\n            if (this.focusedOptionIndex !== index) {\n                this.focusedOptionIndex = index;\n                this.scrollInView();\n\n                if (this.selectOnFocus && !this.multiple) {\n                    this.onOptionSelect(event, this.visibleOptions[index]);\n                }\n            }\n        },\n        scrollInView(index = -1) {\n            this.$nextTick(() => {\n                const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;\n                const element = findSingle(this.list, `li[id=\"${id}\"]`);\n\n                if (element) {\n                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });\n                } else if (!this.virtualScrollerDisabled) {\n                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);\n                }\n            });\n        },\n        autoUpdateModel() {\n            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled && !this.multiple && this.focused) {\n                this.focusedOptionIndex = this.findFirstFocusedOptionIndex();\n                this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex]);\n            }\n        },\n        updateModel(event, value) {\n            this.writeValue(value, event);\n            this.$emit('change', { originalEvent: event, value });\n        },\n        listRef(el, contentRef) {\n            this.list = el;\n            contentRef && contentRef(el); // For VirtualScroller\n        },\n        virtualScrollerRef(el) {\n            this.virtualScroller = el;\n        }\n    },\n    computed: {\n        optionsListFlat() {\n            return this.filterValue ? FilterService.filter(this.options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : this.options;\n        },\n        optionsListGroup() {\n            const filteredOptions = [];\n\n            (this.options || []).forEach((optionGroup) => {\n                const optionGroupChildren = this.getOptionGroupChildren(optionGroup) || [];\n                const filteredChildren = this.filterValue ? FilterService.filter(optionGroupChildren, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale) : optionGroupChildren;\n\n                if (filteredChildren?.length) {\n                    filteredOptions.push({ optionGroup, group: true }, ...filteredChildren);\n                }\n            });\n\n            return filteredOptions;\n        },\n        visibleOptions() {\n            return this.optionGroupLabel ? this.optionsListGroup : this.optionsListFlat;\n        },\n        // @deprecated use $filled instead\n        hasSelectedOption() {\n            return isNotEmpty(this.d_value);\n        },\n        equalityKey() {\n            return this.optionValue ? null : this.dataKey;\n        },\n        searchFields() {\n            return this.filterFields || [this.optionLabel];\n        },\n        filterResultMessageText() {\n            return isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;\n        },\n        filterMessageText() {\n            return this.filterMessage || this.$primevue.config.locale.searchMessage || '';\n        },\n        emptyFilterMessageText() {\n            return this.emptyFilterMessage || this.$primevue.config.locale.emptySearchMessage || this.$primevue.config.locale.emptyFilterMessage || '';\n        },\n        emptyMessageText() {\n            return this.emptyMessage || this.$primevue.config.locale.emptyMessage || '';\n        },\n        selectionMessageText() {\n            return this.selectionMessage || this.$primevue.config.locale.selectionMessage || '';\n        },\n        emptySelectionMessageText() {\n            return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';\n        },\n        selectedMessageText() {\n            return this.$filled ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.d_value.length : '1') : this.emptySelectionMessageText;\n        },\n        focusedOptionId() {\n            return this.focusedOptionIndex !== -1 ? `${this.$id}_${this.focusedOptionIndex}` : null;\n        },\n        ariaSetSize() {\n            return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;\n        },\n        virtualScrollerDisabled() {\n            return !this.virtualScrollerOptions;\n        },\n        containerDataP() {\n            return cn({\n                invalid: this.$invalid,\n                disabled: this.disabled\n            });\n        }\n    },\n    directives: {\n        ripple: Ripple\n    },\n    components: {\n        InputText,\n        VirtualScroller,\n        InputIcon,\n        IconField,\n        SearchIcon,\n        CheckIcon,\n        BlankIcon\n    }\n};\n</script>\n","<template>\n    <div :id=\"$id\" :class=\"cx('root')\" @focusout=\"onFocusout\" :data-p=\"containerDataP\" v-bind=\"ptmi('root')\">\n        <span\n            ref=\"firstHiddenFocusableElement\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            class=\"p-hidden-accessible p-hidden-focusable\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            @focus=\"onFirstHiddenFocus\"\n            v-bind=\"ptm('hiddenFirstFocusableEl')\"\n            :data-p-hidden-accessible=\"true\"\n            :data-p-hidden-focusable=\"true\"\n        ></span>\n        <div v-if=\"$slots.header\" :class=\"cx('header')\">\n            <slot name=\"header\" :value=\"d_value\" :options=\"visibleOptions\"></slot>\n        </div>\n        <div v-if=\"filter\" :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <IconField :unstyled=\"unstyled\" :pt=\"ptm('pcFilterContainer')\">\n                <InputText\n                    v-model=\"filterValue\"\n                    type=\"text\"\n                    :class=\"cx('pcFilter')\"\n                    :placeholder=\"filterPlaceholder\"\n                    role=\"searchbox\"\n                    autocomplete=\"off\"\n                    :disabled=\"disabled\"\n                    :unstyled=\"unstyled\"\n                    :aria-owns=\"$id + '_list'\"\n                    :aria-activedescendant=\"focusedOptionId\"\n                    :tabindex=\"!disabled && !focused ? tabindex : -1\"\n                    @input=\"onFilterChange\"\n                    @blur=\"onFilterBlur\"\n                    @keydown=\"onFilterKeyDown\"\n                    :pt=\"ptm('pcFilter')\"\n                />\n                <InputIcon :unstyled=\"unstyled\" :pt=\"ptm('pcFilterIconContainer')\">\n                    <slot name=\"filtericon\">\n                        <span v-if=\"filterIcon\" :class=\"filterIcon\" v-bind=\"ptm('filterIcon')\" />\n                        <SearchIcon v-else v-bind=\"ptm('filterIcon')\" />\n                    </slot>\n                </InputIcon>\n            </IconField>\n            <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenFilterResult')\" :data-p-hidden-accessible=\"true\">\n                {{ filterResultMessageText }}\n            </span>\n        </div>\n        <div :class=\"cx('listContainer')\" :style=\"[{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }, listStyle]\" v-bind=\"ptm('listContainer')\">\n            <VirtualScroller :ref=\"virtualScrollerRef\" v-bind=\"virtualScrollerOptions\" :items=\"visibleOptions\" :style=\"[{ height: scrollHeight }, listStyle]\" :tabindex=\"-1\" :disabled=\"virtualScrollerDisabled\" :pt=\"ptm('virtualScroller')\">\n                <template v-slot:content=\"{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }\">\n                    <ul\n                        :ref=\"(el) => listRef(el, contentRef)\"\n                        :id=\"$id + '_list'\"\n                        :class=\"[cx('list'), styleClass]\"\n                        :style=\"contentStyle\"\n                        :tabindex=\"-1\"\n                        role=\"listbox\"\n                        :aria-multiselectable=\"multiple\"\n                        :aria-label=\"ariaLabel\"\n                        :aria-labelledby=\"ariaLabelledby\"\n                        :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n                        :aria-disabled=\"disabled\"\n                        @focus=\"onListFocus\"\n                        @blur=\"onListBlur\"\n                        @keydown=\"onListKeyDown\"\n                        v-bind=\"ptm('list')\"\n                    >\n                        <template v-for=\"(option, i) of items\" :key=\"getOptionRenderKey(option, getOptionIndex(i, getItemOptions))\">\n                            <li v-if=\"isOptionGroup(option)\" :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\" :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\" :class=\"cx('optionGroup')\" role=\"option\" v-bind=\"ptm('optionGroup')\">\n                                <slot name=\"optiongroup\" :option=\"option.optionGroup\" :index=\"getOptionIndex(i, getItemOptions)\">{{ getOptionGroupLabel(option.optionGroup) }}</slot>\n                            </li>\n                            <li\n                                v-else\n                                :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\"\n                                v-ripple\n                                :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\"\n                                :class=\"cx('option', { option, index: i, getItemOptions })\"\n                                role=\"option\"\n                                :aria-label=\"getOptionLabel(option)\"\n                                :aria-selected=\"isSelected(option)\"\n                                :aria-disabled=\"isOptionDisabled(option)\"\n                                :aria-setsize=\"ariaSetSize\"\n                                :aria-posinset=\"getAriaPosInset(getOptionIndex(i, getItemOptions))\"\n                                @click=\"onOptionSelect($event, option, getOptionIndex(i, getItemOptions))\"\n                                @mousedown=\"onOptionMouseDown($event, getOptionIndex(i, getItemOptions))\"\n                                @mousemove=\"onOptionMouseMove($event, getOptionIndex(i, getItemOptions))\"\n                                @touchend=\"onOptionTouchEnd()\"\n                                @dblclick=\"onOptionDblClick($event, option)\"\n                                v-bind=\"getPTOptions(option, getItemOptions, i, 'option')\"\n                                :data-p-selected=\"!checkmark && isSelected(option)\"\n                                :data-p-focused=\"focusedOptionIndex === getOptionIndex(i, getItemOptions)\"\n                                :data-p-disabled=\"isOptionDisabled(option)\"\n                            >\n                                <template v-if=\"checkmark\">\n                                    <CheckIcon v-if=\"isSelected(option)\" :class=\"cx('optionCheckIcon')\" v-bind=\"ptm('optionCheckIcon')\" />\n                                    <BlankIcon v-else :class=\"cx('optionBlankIcon')\" v-bind=\"ptm('optionBlankIcon')\" />\n                                </template>\n                                <slot name=\"option\" :option=\"option\" :selected=\"isSelected(option)\" :index=\"getOptionIndex(i, getItemOptions)\">{{ getOptionLabel(option) }}</slot>\n                            </li>\n                        </template>\n                        <li v-if=\"filterValue && (!items || (items && items.length === 0))\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\">\n                            <slot name=\"emptyfilter\">{{ emptyFilterMessageText }}</slot>\n                        </li>\n                        <li v-else-if=\"!options || (options && options.length === 0)\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\">\n                            <slot name=\"empty\">{{ emptyMessageText }}</slot>\n                        </li>\n                    </ul>\n                </template>\n                <template v-if=\"$slots.loader\" v-slot:loader=\"{ options }\">\n                    <slot name=\"loader\" :options=\"options\"></slot>\n                </template>\n            </VirtualScroller>\n        </div>\n        <slot name=\"footer\" :value=\"d_value\" :options=\"visibleOptions\"></slot>\n        <span v-if=\"!options || (options && options.length === 0)\" role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenEmptyMessage')\" :data-p-hidden-accessible=\"true\">\n            {{ emptyMessageText }}\n        </span>\n        <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSelectedMessage')\" :data-p-hidden-accessible=\"true\">\n            {{ selectedMessageText }}\n        </span>\n        <span\n            ref=\"lastHiddenFocusableElement\"\n            role=\"presentation\"\n            aria-hidden=\"true\"\n            class=\"p-hidden-accessible p-hidden-focusable\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            @focus=\"onLastHiddenFocus\"\n            v-bind=\"ptm('hiddenLastFocusableEl')\"\n            :data-p-hidden-accessible=\"true\"\n            :data-p-hidden-focusable=\"true\"\n        ></span>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { findSingle, focus, getFirstFocusableElement, isElement } from '@primeuix/utils/dom';\nimport { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';\nimport { FilterService } from '@primevue/core/api';\nimport BlankIcon from '@primevue/icons/blank';\nimport CheckIcon from '@primevue/icons/check';\nimport SearchIcon from '@primevue/icons/search';\nimport IconField from 'primevue/iconfield';\nimport InputIcon from 'primevue/inputicon';\nimport InputText from 'primevue/inputtext';\nimport Ripple from 'primevue/ripple';\nimport VirtualScroller from 'primevue/virtualscroller';\nimport BaseListbox from './BaseListbox.vue';\n\nexport default {\n    name: 'Listbox',\n    extends: BaseListbox,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur', 'filter', 'item-dblclick', 'option-dblclick'],\n    list: null,\n    virtualScroller: null,\n    optionTouched: false,\n    startRangeIndex: -1,\n    searchTimeout: null,\n    searchValue: '',\n    data() {\n        return {\n            filterValue: null,\n            focused: false,\n            focusedOptionIndex: -1\n        };\n    },\n    watch: {\n        options() {\n            this.autoUpdateModel();\n        }\n    },\n    mounted() {\n        this.autoUpdateModel();\n    },\n    methods: {\n        getOptionIndex(index, fn) {\n            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];\n        },\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : typeof option === 'string' ? option : null;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option, index) {\n            return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;\n        },\n        getPTOptions(option, itemOptions, index, key) {\n            return this.ptm(key, {\n                context: {\n                    selected: this.isSelected(option),\n                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),\n                    disabled: this.isOptionDisabled(option)\n                }\n            });\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        isOptionGroup(option) {\n            return this.optionGroupLabel && option.optionGroup && option.group;\n        },\n        getOptionGroupLabel(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupLabel);\n        },\n        getOptionGroupChildren(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupChildren);\n        },\n        getAriaPosInset(index) {\n            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((opti