primevue/picklist/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/picklist/BasePickList.vue","../../src/picklist/PickList.vue","../../src/picklist/PickList.vue?vue&type=template&id=364535c6&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport PickListStyle from 'primevue/picklist/style';\n\nexport default {\n    name: 'BasePickList',\n    extends: BaseComponent,\n    props: {\n        modelValue: {\n            type: Array,\n            default: () => [[], []]\n        },\n        selection: {\n            type: Array,\n            default: () => [[], []]\n        },\n        dataKey: {\n            type: String,\n            default: null\n        },\n        listStyle: {\n            type: null,\n            default: null\n        },\n        metaKeySelection: {\n            type: Boolean,\n            default: false\n        },\n        autoOptionFocus: {\n            type: Boolean,\n            default: true\n        },\n        focusOnHover: {\n            type: Boolean,\n            default: true\n        },\n        responsive: {\n            type: Boolean,\n            default: true\n        },\n        breakpoint: {\n            type: String,\n            default: '960px'\n        },\n        striped: {\n            type: Boolean,\n            default: false\n        },\n        scrollHeight: {\n            type: String,\n            default: '14rem'\n        },\n        showSourceControls: {\n            type: Boolean,\n            default: true\n        },\n        showTargetControls: {\n            type: Boolean,\n            default: true\n        },\n        buttonProps: {\n            type: Object,\n            default() {\n                return { severity: 'secondary' };\n            }\n        },\n        moveUpButtonProps: {\n            type: null,\n            default: null\n        },\n        moveTopButtonProps: {\n            type: null,\n            default: null\n        },\n        moveDownButtonProps: {\n            type: null,\n            default: null\n        },\n        moveBottomButtonProps: {\n            type: null,\n            default: null\n        },\n        moveToTargetProps: {\n            type: null,\n            default: null\n        },\n        moveAllToTargetProps: {\n            type: null,\n            default: null\n        },\n        moveToSourceProps: {\n            type: null,\n            default: null\n        },\n        moveAllToSourceProps: {\n            type: null,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        disabled: {\n            type: Boolean,\n            default: false\n        }\n    },\n    style: PickListStyle,\n    provide() {\n        return {\n            $pcPickList: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-if=\"showSourceControls\" :class=\"cx('sourceControls')\" v-bind=\"ptm('sourceControls')\" data-pc-group-section=\"controls\">\n            <slot name=\"sourcecontrolsstart\"></slot>\n            <Button :aria-label=\"moveUpAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveUp($event, 0)\" v-bind=\"{ ...buttonProps, ...moveUpButtonProps }\" :pt=\"ptm('pcSourceMoveUpButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"moveupicon\">\n                        <AngleUpIcon v-bind=\"ptm('pcSourceMoveUpButton')['icon']\" data-pc-section=\"moveupicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveTopAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveTop($event, 0)\" v-bind=\"{ ...buttonProps, ...moveTopButtonProps }\" :pt=\"ptm('pcSourceMoveTopButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetopicon\">\n                        <AngleDoubleUpIcon v-bind=\"ptm('pcSourceMoveTopButton')['icon']\" data-pc-section=\"movetopicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveDownAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveDown($event, 0)\" v-bind=\"{ ...buttonProps, ...moveDownButtonProps }\" :pt=\"ptm('pcSourceMoveDownButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movedownicon\">\n                        <AngleDownIcon v-bind=\"ptm('pcSourceMoveDownButton')['icon']\" data-pc-section=\"movedownicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveBottomAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveBottom($event, 0)\" v-bind=\"{ ...buttonProps, ...moveBottomButtonProps }\" :pt=\"ptm('pcSourceMoveBottomButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movebottomicon\">\n                        <AngleDoubleDownIcon v-bind=\"ptm('pcSourceMoveBottomButton')['icon']\" data-pc-section=\"movebottomicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <slot name=\"sourcecontrolsend\"></slot>\n        </div>\n        <div :class=\"cx('sourceListContainer')\" v-bind=\"ptm('sourceListContainer')\" data-pc-group-section=\"listcontainer\">\n            <Listbox\n                ref=\"sourceList\"\n                :id=\"idSource + '_list'\"\n                :modelValue=\"d_selection[0]\"\n                :options=\"sourceList\"\n                multiple\n                :metaKeySelection=\"metaKeySelection\"\n                :listStyle=\"listStyle\"\n                :scrollHeight=\"scrollHeight\"\n                :tabindex=\"sourceList && sourceList.length > 0 ? tabindex : -1\"\n                :dataKey=\"dataKey\"\n                :autoOptionFocus=\"autoOptionFocus\"\n                :focusOnHover=\"focusOnHover\"\n                :striped=\"striped\"\n                :disabled=\"disabled\"\n                :pt=\"ptm('pcListbox')\"\n                :unstyled=\"unstyled\"\n                @focus=\"onListFocus($event, 'sourceList')\"\n                @blur=\"onListBlur($event, 'sourceList')\"\n                @change=\"onChangeSelection($event, 0)\"\n                @item-dblclick=\"onItemDblClick($event, 0)\"\n                data-pc-group-section=\"list\"\n            >\n                <template v-if=\"$slots.sourceheader\" #header>\n                    <slot name=\"sourceheader\"></slot>\n                </template>\n                <template #option=\"{ option, selected, index }\">\n                    <slot :name=\"$slots.option ? 'option' : 'item'\" :item=\"option\" :option=\"option\" :selected=\"selected\" :index=\"index\" />\n                </template>\n                <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->\n            </Listbox>\n        </div>\n        <div :class=\"cx('transferControls')\" v-bind=\"ptm('transferControls')\" data-pc-group-section=\"controls\">\n            <slot name=\"movecontrolsstart\"></slot>\n            <Button :aria-label=\"moveToTargetAriaLabel\" @click=\"moveToTarget\" :disabled=\"moveDisabled(0)\" v-bind=\"{ ...buttonProps, ...moveToTargetProps }\" :pt=\"ptm('pcMoveToTargetButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetotargeticon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'\" v-bind=\"ptm('pcMoveToTargetButton')['icon']\" data-pc-section=\"movetotargeticon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveAllToTargetAriaLabel\" @click=\"moveAllToTarget\" :disabled=\"moveAllDisabled('sourceList')\" v-bind=\"{ ...buttonProps, ...moveAllToTargetProps }\" :pt=\"ptm('pcMoveAllToTargetButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movealltotargeticon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'\" v-bind=\"ptm('pcMoveAllToTargetButton')['icon']\" data-pc-section=\"movealltotargeticon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveToSourceAriaLabel\" @click=\"moveToSource\" :disabled=\"moveDisabled(1)\" v-bind=\"{ ...buttonProps, ...moveToSourceProps }\" :pt=\"ptm('pcMoveToSourceButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetosourceicon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'\" v-bind=\"ptm('pcMoveToSourceButton')['icon']\" data-pc-section=\"movetosourceicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveAllToSourceAriaLabel\" @click=\"moveAllToSource\" :disabled=\"moveAllDisabled('targetList')\" v-bind=\"{ ...buttonProps, ...moveAllToSourceProps }\" :pt=\"ptm('pcMoveAllToSourceButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movealltosourceicon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'\" v-bind=\"ptm('pcMoveAllToSourceButton')['icon']\" data-pc-section=\"movealltosourceicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <slot name=\"movecontrolsend\"></slot>\n        </div>\n        <div :class=\"cx('targetListContainer')\" v-bind=\"ptm('targetListContainer')\" data-pc-group-section=\"listcontainer\">\n            <Listbox\n                ref=\"targetList\"\n                :id=\"idTarget + '_list'\"\n                :modelValue=\"d_selection[1]\"\n                :options=\"targetList\"\n                multiple\n                :metaKeySelection=\"metaKeySelection\"\n                :listStyle=\"listStyle\"\n                :scrollHeight=\"scrollHeight\"\n                :tabindex=\"targetList && targetList.length > 0 ? tabindex : -1\"\n                :dataKey=\"dataKey\"\n                :autoOptionFocus=\"autoOptionFocus\"\n                :focusOnHover=\"focusOnHover\"\n                :striped=\"striped\"\n                :disabled=\"disabled\"\n                :pt=\"ptm('pcListbox')\"\n                :unstyled=\"unstyled\"\n                @focus=\"onListFocus($event, 'targetList')\"\n                @blur=\"onListBlur($event, 'targetList')\"\n                @change=\"onChangeSelection($event, 1)\"\n                @item-dblclick=\"onItemDblClick($event, 1)\"\n                data-pc-group-section=\"list\"\n            >\n                <template v-if=\"$slots.targetheader\" #header>\n                    <slot name=\"targetheader\"></slot>\n                </template>\n                <template #option=\"{ option, selected, index }\">\n                    <slot :name=\"$slots.option ? 'option' : 'item'\" :item=\"option\" :option=\"option\" :selected=\"selected\" :index=\"index\" />\n                </template>\n                <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->\n            </Listbox>\n        </div>\n        <div v-if=\"showTargetControls\" :class=\"cx('targetControls')\" v-bind=\"ptm('targetControls')\" data-pc-group-section=\"controls\">\n            <slot name=\"targetcontrolsstart\"></slot>\n            <Button :aria-label=\"moveUpAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveUp($event, 1)\" v-bind=\"{ ...buttonProps, ...moveUpButtonProps }\" :pt=\"ptm('pcTargetMoveUpButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"moveupicon\">\n                        <AngleUpIcon v-bind=\"ptm('pcTargetMoveUpButton')['icon']\" data-pc-section=\"moveupicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveTopAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveTop($event, 1)\" v-bind=\"{ ...buttonProps, ...moveTopButtonProps }\" :pt=\"ptm('pcTargetMoveTopButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetopicon\">\n                        <AngleDoubleUpIcon v-bind=\"ptm('pcTargetMoveTopButton')['icon']\" data-pc-section=\"movetopicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveDownAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveDown($event, 1)\" v-bind=\"{ ...buttonProps, ...moveDownButtonProps }\" :pt=\"ptm('pcTargetMoveDownButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movedownicon\">\n                        <AngleDownIcon v-bind=\"ptm('pcTargetMoveDownButton')['icon']\" data-pc-section=\"movedownicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveBottomAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveBottom($event, 1)\" v-bind=\"{ ...buttonProps, ...moveBottomButtonProps }\" :pt=\"ptm('pcTargetMoveBottomButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movebottomicon\">\n                        <AngleDoubleDownIcon v-bind=\"ptm('pcTargetMoveBottomButton')['icon']\" data-pc-section=\"movebottomicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <slot name=\"targetcontrolsend\"></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { find, scrollInView, setAttribute } from '@primeuix/utils/dom';\nimport { findIndexInList, isEmpty } from '@primeuix/utils/object';\nimport AngleDoubleDownIcon from '@primevue/icons/angledoubledown';\nimport AngleDoubleLeftIcon from '@primevue/icons/angledoubleleft';\nimport AngleDoubleRightIcon from '@primevue/icons/angledoubleright';\nimport AngleDoubleUpIcon from '@primevue/icons/angledoubleup';\nimport AngleDownIcon from '@primevue/icons/angledown';\nimport AngleLeftIcon from '@primevue/icons/angleleft';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport AngleUpIcon from '@primevue/icons/angleup';\nimport Button from 'primevue/button';\nimport Listbox from 'primevue/listbox';\nimport Ripple from 'primevue/ripple';\nimport BasePickList from './BasePickList.vue';\n\nexport default {\n    name: 'PickList',\n    extends: BasePickList,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],\n    itemTouched: false,\n    reorderDirection: null,\n    styleElement: null,\n    media: null,\n    mediaChangeListener: null,\n    data() {\n        return {\n            d_selection: this.selection,\n            viewChanged: false\n        };\n    },\n    watch: {\n        selection(newValue) {\n            this.d_selection = newValue;\n        },\n        breakpoint() {\n            this.destroyMedia();\n            this.initMedia();\n        }\n    },\n    updated() {\n        if (this.reorderDirection) {\n            this.updateListScroll(this.$refs.sourceList.$el);\n            this.updateListScroll(this.$refs.targetList.$el);\n            this.reorderDirection = null;\n        }\n    },\n    beforeUnmount() {\n        this.destroyStyle();\n        this.destroyMedia();\n    },\n    mounted() {\n        if (this.responsive) {\n            this.createStyle();\n            this.initMedia();\n        }\n    },\n    methods: {\n        updateSelection(event) {\n            this.$emit('update:selection', this.d_selection);\n            this.$emit('selection-change', {\n                originalEvent: event,\n                value: this.d_selection\n            });\n        },\n        onChangeSelection(params, listIndex) {\n            this.d_selection[listIndex] = params.value;\n            this.updateSelection(params.event);\n        },\n        onListFocus(event, listType) {\n            this.$emit('focus', event, listType);\n        },\n        onListBlur(event, listType) {\n            this.$emit('blur', event, listType);\n        },\n        onReorderUpdate(event, value, listIndex) {\n            this.$emit('update:modelValue', value);\n            this.$emit('reorder', {\n                originalEvent: event,\n                value: value,\n                direction: this.reorderDirection,\n                listIndex\n            });\n        },\n        onItemDblClick(event, listIndex) {\n            if (listIndex === 0) this.moveToTarget({ event: event.originalEvent });\n            else if (listIndex === 1) this.moveToSource({ event: event.originalEvent });\n        },\n        moveUp(event, listIndex) {\n            if (this.d_selection && this.d_selection[listIndex]) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = 0; i < selectionList.length; i++) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== 0) {\n                        let movedItem = valueList[selectedItemIndex];\n                        let temp = valueList[selectedItemIndex - 1];\n\n                        valueList[selectedItemIndex - 1] = movedItem;\n                        valueList[selectedItemIndex] = temp;\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'up';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveTop(event, listIndex) {\n            if (this.d_selection) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = 0; i < selectionList.length; i++) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== 0) {\n                        let movedItem = valueList.splice(selectedItemIndex, 1)[0];\n\n                        valueList.unshift(movedItem);\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'top';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveDown(event, listIndex) {\n            if (this.d_selection) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = selectionList.length - 1; i >= 0; i--) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== valueList.length - 1) {\n                        let movedItem = valueList[selectedItemIndex];\n                        let temp = valueList[selectedItemIndex + 1];\n\n                        valueList[selectedItemIndex + 1] = movedItem;\n                        valueList[selectedItemIndex] = temp;\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'down';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveBottom(event, listIndex) {\n            if (this.d_selection) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = selectionList.length - 1; i >= 0; i--) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== valueList.length - 1) {\n                        let movedItem = valueList.splice(selectedItemIndex, 1)[0];\n\n                        valueList.push(movedItem);\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'bottom';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveToTarget(event) {\n            let selection = this.d_selection && this.d_selection[0] ? this.d_selection[0] : null;\n            let sourceList = [...this.modelValue[0]];\n            let targetList = [...this.modelValue[1]];\n\n            if (selection) {\n                for (let i = 0; i < selection.length; i++) {\n                    let selectedItem = selection[i];\n\n                    if (findIndexInList(selectedItem, targetList) == -1) {\n                        targetList.push(sourceList.splice(findIndexInList(selectedItem, sourceList), 1)[0]);\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[0] = sourceList;\n                value[1] = targetList;\n                this.$emit('update:modelValue', value);\n\n                this.$emit('move-to-target', {\n                    originalEvent: event,\n                    items: [...new Set(selection)]\n                });\n\n                this.d_selection[0] = [];\n                this.updateSelection(event);\n            }\n        },\n        moveAllToTarget(event) {\n            if (this.modelValue[0]) {\n                let sourceList = [...this.modelValue[0]];\n                let targetList = [...this.modelValue[1]];\n\n                this.$emit('move-all-to-target', {\n                    originalEvent: event,\n                    items: sourceList\n                });\n\n                targetList = [...targetList, ...sourceList];\n                sourceList = [];\n\n                let value = [...this.modelValue];\n\n                value[0] = sourceList;\n                value[1] = targetList;\n                this.$emit('update:modelValue', value);\n\n                this.d_selection = [[], []];\n                this.updateSelection(event);\n            }\n        },\n        moveToSource(event) {\n            let selection = this.d_selection && this.d_selection[1] ? this.d_selection[1] : null;\n            let sourceList = [...this.modelValue[0]];\n            let targetList = [...this.modelValue[1]];\n\n            if (selection) {\n                for (let i = 0; i < selection.length; i++) {\n                    let selectedItem = selection[i];\n\n                    if (findIndexInList(selectedItem, sourceList) == -1) {\n                        sourceList.push(targetList.splice(findIndexInList(selectedItem, targetList), 1)[0]);\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[0] = sourceList;\n                value[1] = targetList;\n                this.$emit('update:modelValue', value);\n\n                this.$emit('move-to-source', {\n                    originalEvent: event,\n                    items: [...new Set(selection)]\n                });\n\n                this.d_selection[1] = [];\n                this.updateSelection(event);\n            }\n        },\n        moveAllToSource(event) {\n            if (this.modelValue[1]) {\n                let sourceList = [...this.modelValue[0]];\n                let targetList = [...this.modelValue[1]];\n\n                this.$emit('move-all-to-source', {\n                    originalEvent: event,\n                    items: targetList\n                });\n\n                sourceList = [...sourceList, ...targetList];\n                targetList = [];\n\n                let value = [...this.modelValue];\n\n                value[0] = sourceList;\n                value[1] = targetList;\n                this.$emit('update:modelValue', value);\n\n                this.d_selection = [[], []];\n                this.updateSelection(event);\n            }\n        },\n        onItemClick(event, item, index, listIndex) {\n            const listType = listIndex === 0 ? 'sourceList' : 'targetList';\n\n            this.itemTouched = false;\n            const selectionList = this.d_selection[listIndex];\n            const selectedIndex = findIndexInList(item, selectionList);\n            const selected = selectedIndex != -1;\n            const metaSelection = this.itemTouched ? false : this.metaKeySelection;\n            const selectedId = find(this.$refs[listType].$el, '[data-pc-section=\"item\"]')[index].getAttribute('id');\n\n            this.focusedOptionIndex = selectedId;\n            let _selection;\n\n            if (metaSelection) {\n                let metaKey = event.metaKey || event.ctrlKey;\n\n                if (selected && metaKey) {\n                    _selection = selectionList.filter((val, index) => index !== selectedIndex);\n                } else {\n                    _selection = metaKey ? (selectionList ? [...selectionList] : []) : [];\n                    _selection.push(item);\n                }\n            } else {\n                if (selected) {\n                    _selection = selectionList.filter((val, index) => index !== selectedIndex);\n                } else {\n                    _selection = selectionList ? [...selectionList] : [];\n                    _selection.push(item);\n                }\n            }\n\n            let newSelection = [...this.d_selection];\n\n            newSelection[listIndex] = _selection;\n            this.d_selection = newSelection;\n\n            this.updateSelection(event);\n        },\n        updateListScroll(listElement) {\n            const listItems = find(listElement, '[data-pc-section=\"item\"][data-p-selected=\"true\"]');\n\n            if (listItems && listItems.length) {\n                switch (this.reorderDirection) {\n                    case 'up':\n                        scrollInView(listElement, listItems[0]);\n                        break;\n\n                    case 'top':\n                        listElement.scrollTop = 0;\n                        break;\n\n                    case 'down':\n                        scrollInView(listElement, listItems[listItems.length - 1]);\n                        break;\n\n                    case 'bottom':\n                        listElement.scrollTop = listElement.scrollHeight;\n                        break;\n\n                    default:\n                        break;\n                }\n            }\n        },\n        initMedia() {\n            this.media = window.matchMedia(`(max-width: ${this.breakpoint})`);\n            this.viewChanged = this.media.matches;\n            this.bindMediaChangeListener();\n        },\n        destroyMedia() {\n            this.unbindMediaChangeListener();\n        },\n        bindMediaChangeListener() {\n            if (this.media && !this.mediaChangeListener) {\n                this.mediaChangeListener = (event) => {\n                    this.viewChanged = event.matches;\n                };\n\n                this.media.addEventListener('change', this.mediaChangeListener);\n            }\n        },\n        unbindMediaChangeListener() {\n            if (this.media && this.mediaChangeListener) {\n                this.media.removeEventListener('change', this.mediaChangeListener);\n                this.mediaChangeListener = null;\n            }\n        },\n        createStyle() {\n            if (!this.styleElement && !this.isUnstyled) {\n                this.styleElement = document.createElement('style');\n                this.styleElement.type = 'text/css';\n                setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);\n                document.head.appendChild(this.styleElement);\n\n                let innerHTML = `\n@media screen and (max-width: ${this.breakpoint}) {\n    .p-picklist[${this.$attrSelector}] {\n        flex-direction: column;\n    }\n\n    .p-picklist[${this.$attrSelector}] .p-picklist-controls {\n        flex-direction: row;\n    }\n}\n`;\n\n                this.styleElement.innerHTML = innerHTML;\n            }\n        },\n        destroyStyle() {\n            if (this.styleElement) {\n                document.head.removeChild(this.styleElement);\n                this.styleElement = null;\n            }\n        },\n        moveDisabled(index) {\n            return this.disabled ? true : this.d_selection && (!this.d_selection[index] || !this.d_selection[index].length) ? true : false;\n        },\n        moveAllDisabled(list) {\n            return this.disabled ? true : isEmpty(this[list]);\n        }\n    },\n    computed: {\n        idSource() {\n            return `${this.$id}_source`;\n        },\n        idTarget() {\n            return `${this.$id}_target`;\n        },\n        sourceList() {\n            return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;\n        },\n        targetList() {\n            return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;\n        },\n        moveUpAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;\n        },\n        moveTopAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveTop : undefined;\n        },\n        moveDownAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveDown : undefined;\n        },\n        moveBottomAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;\n        },\n        moveToTargetAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToTarget : undefined;\n        },\n        moveAllToTargetAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToTarget : undefined;\n        },\n        moveToSourceAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToSource : undefined;\n        },\n        moveAllToSourceAriaLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToSource : undefined;\n        }\n    },\n    components: {\n        Listbox,\n        Button,\n        AngleRightIcon,\n        AngleLeftIcon,\n        AngleDownIcon,\n        AngleUpIcon,\n        AngleDoubleRightIcon,\n        AngleDoubleLeftIcon,\n        AngleDoubleDownIcon,\n        AngleDoubleUpIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-if=\"showSourceControls\" :class=\"cx('sourceControls')\" v-bind=\"ptm('sourceControls')\" data-pc-group-section=\"controls\">\n            <slot name=\"sourcecontrolsstart\"></slot>\n            <Button :aria-label=\"moveUpAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveUp($event, 0)\" v-bind=\"{ ...buttonProps, ...moveUpButtonProps }\" :pt=\"ptm('pcSourceMoveUpButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"moveupicon\">\n                        <AngleUpIcon v-bind=\"ptm('pcSourceMoveUpButton')['icon']\" data-pc-section=\"moveupicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveTopAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveTop($event, 0)\" v-bind=\"{ ...buttonProps, ...moveTopButtonProps }\" :pt=\"ptm('pcSourceMoveTopButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetopicon\">\n                        <AngleDoubleUpIcon v-bind=\"ptm('pcSourceMoveTopButton')['icon']\" data-pc-section=\"movetopicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveDownAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveDown($event, 0)\" v-bind=\"{ ...buttonProps, ...moveDownButtonProps }\" :pt=\"ptm('pcSourceMoveDownButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movedownicon\">\n                        <AngleDownIcon v-bind=\"ptm('pcSourceMoveDownButton')['icon']\" data-pc-section=\"movedownicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveBottomAriaLabel\" :disabled=\"moveDisabled(0)\" @click=\"moveBottom($event, 0)\" v-bind=\"{ ...buttonProps, ...moveBottomButtonProps }\" :pt=\"ptm('pcSourceMoveBottomButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movebottomicon\">\n                        <AngleDoubleDownIcon v-bind=\"ptm('pcSourceMoveBottomButton')['icon']\" data-pc-section=\"movebottomicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <slot name=\"sourcecontrolsend\"></slot>\n        </div>\n        <div :class=\"cx('sourceListContainer')\" v-bind=\"ptm('sourceListContainer')\" data-pc-group-section=\"listcontainer\">\n            <Listbox\n                ref=\"sourceList\"\n                :id=\"idSource + '_list'\"\n                :modelValue=\"d_selection[0]\"\n                :options=\"sourceList\"\n                multiple\n                :metaKeySelection=\"metaKeySelection\"\n                :listStyle=\"listStyle\"\n                :scrollHeight=\"scrollHeight\"\n                :tabindex=\"sourceList && sourceList.length > 0 ? tabindex : -1\"\n                :dataKey=\"dataKey\"\n                :autoOptionFocus=\"autoOptionFocus\"\n                :focusOnHover=\"focusOnHover\"\n                :striped=\"striped\"\n                :disabled=\"disabled\"\n                :pt=\"ptm('pcListbox')\"\n                :unstyled=\"unstyled\"\n                @focus=\"onListFocus($event, 'sourceList')\"\n                @blur=\"onListBlur($event, 'sourceList')\"\n                @change=\"onChangeSelection($event, 0)\"\n                @item-dblclick=\"onItemDblClick($event, 0)\"\n                data-pc-group-section=\"list\"\n            >\n                <template v-if=\"$slots.sourceheader\" #header>\n                    <slot name=\"sourceheader\"></slot>\n                </template>\n                <template #option=\"{ option, selected, index }\">\n                    <slot :name=\"$slots.option ? 'option' : 'item'\" :item=\"option\" :option=\"option\" :selected=\"selected\" :index=\"index\" />\n                </template>\n                <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->\n            </Listbox>\n        </div>\n        <div :class=\"cx('transferControls')\" v-bind=\"ptm('transferControls')\" data-pc-group-section=\"controls\">\n            <slot name=\"movecontrolsstart\"></slot>\n            <Button :aria-label=\"moveToTargetAriaLabel\" @click=\"moveToTarget\" :disabled=\"moveDisabled(0)\" v-bind=\"{ ...buttonProps, ...moveToTargetProps }\" :pt=\"ptm('pcMoveToTargetButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetotargeticon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'\" v-bind=\"ptm('pcMoveToTargetButton')['icon']\" data-pc-section=\"movetotargeticon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveAllToTargetAriaLabel\" @click=\"moveAllToTarget\" :disabled=\"moveAllDisabled('sourceList')\" v-bind=\"{ ...buttonProps, ...moveAllToTargetProps }\" :pt=\"ptm('pcMoveAllToTargetButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movealltotargeticon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'\" v-bind=\"ptm('pcMoveAllToTargetButton')['icon']\" data-pc-section=\"movealltotargeticon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveToSourceAriaLabel\" @click=\"moveToSource\" :disabled=\"moveDisabled(1)\" v-bind=\"{ ...buttonProps, ...moveToSourceProps }\" :pt=\"ptm('pcMoveToSourceButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetosourceicon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'\" v-bind=\"ptm('pcMoveToSourceButton')['icon']\" data-pc-section=\"movetosourceicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveAllToSourceAriaLabel\" @click=\"moveAllToSource\" :disabled=\"moveAllDisabled('targetList')\" v-bind=\"{ ...buttonProps, ...moveAllToSourceProps }\" :pt=\"ptm('pcMoveAllToSourceButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movealltosourceicon\" :viewChanged=\"viewChanged\">\n                        <component :is=\"viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'\" v-bind=\"ptm('pcMoveAllToSourceButton')['icon']\" data-pc-section=\"movealltosourceicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <slot name=\"movecontrolsend\"></slot>\n        </div>\n        <div :class=\"cx('targetListContainer')\" v-bind=\"ptm('targetListContainer')\" data-pc-group-section=\"listcontainer\">\n            <Listbox\n                ref=\"targetList\"\n                :id=\"idTarget + '_list'\"\n                :modelValue=\"d_selection[1]\"\n                :options=\"targetList\"\n                multiple\n                :metaKeySelection=\"metaKeySelection\"\n                :listStyle=\"listStyle\"\n                :scrollHeight=\"scrollHeight\"\n                :tabindex=\"targetList && targetList.length > 0 ? tabindex : -1\"\n                :dataKey=\"dataKey\"\n                :autoOptionFocus=\"autoOptionFocus\"\n                :focusOnHover=\"focusOnHover\"\n                :striped=\"striped\"\n                :disabled=\"disabled\"\n                :pt=\"ptm('pcListbox')\"\n                :unstyled=\"unstyled\"\n                @focus=\"onListFocus($event, 'targetList')\"\n                @blur=\"onListBlur($event, 'targetList')\"\n                @change=\"onChangeSelection($event, 1)\"\n                @item-dblclick=\"onItemDblClick($event, 1)\"\n                data-pc-group-section=\"list\"\n            >\n                <template v-if=\"$slots.targetheader\" #header>\n                    <slot name=\"targetheader\"></slot>\n                </template>\n                <template #option=\"{ option, selected, index }\">\n                    <slot :name=\"$slots.option ? 'option' : 'item'\" :item=\"option\" :option=\"option\" :selected=\"selected\" :index=\"index\" />\n                </template>\n                <!-- //TODO: item slot deprecated since v4.0. Use option slot. -->\n            </Listbox>\n        </div>\n        <div v-if=\"showTargetControls\" :class=\"cx('targetControls')\" v-bind=\"ptm('targetControls')\" data-pc-group-section=\"controls\">\n            <slot name=\"targetcontrolsstart\"></slot>\n            <Button :aria-label=\"moveUpAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveUp($event, 1)\" v-bind=\"{ ...buttonProps, ...moveUpButtonProps }\" :pt=\"ptm('pcTargetMoveUpButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"moveupicon\">\n                        <AngleUpIcon v-bind=\"ptm('pcTargetMoveUpButton')['icon']\" data-pc-section=\"moveupicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveTopAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveTop($event, 1)\" v-bind=\"{ ...buttonProps, ...moveTopButtonProps }\" :pt=\"ptm('pcTargetMoveTopButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movetopicon\">\n                        <AngleDoubleUpIcon v-bind=\"ptm('pcTargetMoveTopButton')['icon']\" data-pc-section=\"movetopicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveDownAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveDown($event, 1)\" v-bind=\"{ ...buttonProps, ...moveDownButtonProps }\" :pt=\"ptm('pcTargetMoveDownButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movedownicon\">\n                        <AngleDownIcon v-bind=\"ptm('pcTargetMoveDownButton')['icon']\" data-pc-section=\"movedownicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <Button :aria-label=\"moveBottomAriaLabel\" :disabled=\"moveDisabled(1)\" @click=\"moveBottom($event, 1)\" v-bind=\"{ ...buttonProps, ...moveBottomButtonProps }\" :pt=\"ptm('pcTargetMoveBottomButton')\" :unstyled=\"unstyled\">\n                <template #icon>\n                    <slot name=\"movebottomicon\">\n                        <AngleDoubleDownIcon v-bind=\"ptm('pcTargetMoveBottomButton')['icon']\" data-pc-section=\"movebottomicon\" />\n                    </slot>\n                </template>\n            </Button>\n            <slot name=\"targetcontrolsend\"></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { find, scrollInView, setAttribute } from '@primeuix/utils/dom';\nimport { findIndexInList, isEmpty } from '@primeuix/utils/object';\nimport AngleDoubleDownIcon from '@primevue/icons/angledoubledown';\nimport AngleDoubleLeftIcon from '@primevue/icons/angledoubleleft';\nimport AngleDoubleRightIcon from '@primevue/icons/angledoubleright';\nimport AngleDoubleUpIcon from '@primevue/icons/angledoubleup';\nimport AngleDownIcon from '@primevue/icons/angledown';\nimport AngleLeftIcon from '@primevue/icons/angleleft';\nimport AngleRightIcon from '@primevue/icons/angleright';\nimport AngleUpIcon from '@primevue/icons/angleup';\nimport Button from 'primevue/button';\nimport Listbox from 'primevue/listbox';\nimport Ripple from 'primevue/ripple';\nimport BasePickList from './BasePickList.vue';\n\nexport default {\n    name: 'PickList',\n    extends: BasePickList,\n    inheritAttrs: false,\n    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],\n    itemTouched: false,\n    reorderDirection: null,\n    styleElement: null,\n    media: null,\n    mediaChangeListener: null,\n    data() {\n        return {\n            d_selection: this.selection,\n            viewChanged: false\n        };\n    },\n    watch: {\n        selection(newValue) {\n            this.d_selection = newValue;\n        },\n        breakpoint() {\n            this.destroyMedia();\n            this.initMedia();\n        }\n    },\n    updated() {\n        if (this.reorderDirection) {\n            this.updateListScroll(this.$refs.sourceList.$el);\n            this.updateListScroll(this.$refs.targetList.$el);\n            this.reorderDirection = null;\n        }\n    },\n    beforeUnmount() {\n        this.destroyStyle();\n        this.destroyMedia();\n    },\n    mounted() {\n        if (this.responsive) {\n            this.createStyle();\n            this.initMedia();\n        }\n    },\n    methods: {\n        updateSelection(event) {\n            this.$emit('update:selection', this.d_selection);\n            this.$emit('selection-change', {\n                originalEvent: event,\n                value: this.d_selection\n            });\n        },\n        onChangeSelection(params, listIndex) {\n            this.d_selection[listIndex] = params.value;\n            this.updateSelection(params.event);\n        },\n        onListFocus(event, listType) {\n            this.$emit('focus', event, listType);\n        },\n        onListBlur(event, listType) {\n            this.$emit('blur', event, listType);\n        },\n        onReorderUpdate(event, value, listIndex) {\n            this.$emit('update:modelValue', value);\n            this.$emit('reorder', {\n                originalEvent: event,\n                value: value,\n                direction: this.reorderDirection,\n                listIndex\n            });\n        },\n        onItemDblClick(event, listIndex) {\n            if (listIndex === 0) this.moveToTarget({ event: event.originalEvent });\n            else if (listIndex === 1) this.moveToSource({ event: event.originalEvent });\n        },\n        moveUp(event, listIndex) {\n            if (this.d_selection && this.d_selection[listIndex]) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = 0; i < selectionList.length; i++) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== 0) {\n                        let movedItem = valueList[selectedItemIndex];\n                        let temp = valueList[selectedItemIndex - 1];\n\n                        valueList[selectedItemIndex - 1] = movedItem;\n                        valueList[selectedItemIndex] = temp;\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'up';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveTop(event, listIndex) {\n            if (this.d_selection) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = 0; i < selectionList.length; i++) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== 0) {\n                        let movedItem = valueList.splice(selectedItemIndex, 1)[0];\n\n                        valueList.unshift(movedItem);\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'top';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveDown(event, listIndex) {\n            if (this.d_selection) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = selectionList.length - 1; i >= 0; i--) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== valueList.length - 1) {\n                        let movedItem = valueList[selectedItemIndex];\n                        let temp = valueList[selectedItemIndex + 1];\n\n                        valueList[selectedItemIndex + 1] = movedItem;\n                        valueList[selectedItemIndex] = temp;\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'down';\n                this.onReorderUpdate(event, value, listIndex);\n            }\n        },\n        moveBottom(event, listIndex) {\n            if (this.d_selection) {\n                let valueList = [...this.modelValue[listIndex]];\n                let selectionList = this.d_selection[listIndex];\n\n                for (let i = selectionList.length - 1; i >= 0; i--) {\n                    let selectedItem = selectionList[i];\n                    let selectedItemIndex = findIndexInList(selectedItem, valueList);\n\n                    if (selectedItemIndex !== valueList.length - 1) {\n                        let movedItem = valueList.splice(selectedItemIndex, 1)[0];\n\n                        valueList.push(movedItem);\n                    } else {\n                        break;\n                    }\n                }\n\n                let value = [...this.modelValue];\n\n                value[listIndex] = valueList;\n\n                this.reorderDirection = 'bottom';\n                this.onReorderUpdate(event, value, listIndex);\n