diff --git a/api-generator/components/orderlist.js b/api-generator/components/orderlist.js index 2a8f43139..2bded2387 100644 --- a/api-generator/components/orderlist.js +++ b/api-generator/components/orderlist.js @@ -11,6 +11,12 @@ const OrderListProps = [ default: "null", description: "Selected items in the list." }, + { + name: "selectionMode", + type: "string", + default: "null", + description: 'Defines selection mode, options are "single" and "multiple".' + }, { name: "metaKeySelection", type: "boolean", diff --git a/src/components/orderlist/OrderList.d.ts b/src/components/orderlist/OrderList.d.ts index a7a2c834a..376f539f3 100755 --- a/src/components/orderlist/OrderList.d.ts +++ b/src/components/orderlist/OrderList.d.ts @@ -4,6 +4,7 @@ interface OrderListProps { modelValue?: any[]; dataKey?: string; selection?: any[]; + selectionMode?: string; metaKeySelection?: boolean; listStyle?: any; responsive?: boolean; diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue index 737d10a40..1cb4fb30b 100755 --- a/src/components/orderlist/OrderList.vue +++ b/src/components/orderlist/OrderList.vue @@ -40,6 +40,10 @@ export default { type: Array, default: null }, + selectionMode: { + type: String, + default: null + }, dataKey: { type: String, default: null @@ -200,31 +204,46 @@ export default { }, onItemClick(event, item, index) { this.itemTouched = false; + let selection = this.d_selection; let selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection); let selected = (selectedIndex != -1); let metaSelection = this.itemTouched ? false : this.metaKeySelection; + let _selection = []; if (metaSelection) { let metaKey = (event.metaKey || event.ctrlKey); if (selected && metaKey) { - this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex); + _selection = selection.filter((val, index) => index !== selectedIndex); } else { - this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : []; - ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue); + if (this.isMultipleSelectionMode()) { + _selection = (selection && metaKey) ? [...selection] : []; + } + ObjectUtils.insertIntoOrderedArray(item, index, _selection, this.modelValue); } } else { if (selected) { - this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex); + if (this.isSingleSelectionMode()) { + _selection = [...selection]; + } + else if (this.isMultipleSelectionMode()) { + _selection = selection.filter((val, index) => index !== selectedIndex); + } } else { - this.d_selection = this.d_selection ? [...this.d_selection] : []; - ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue); + if (this.isMultipleSelectionMode()) { + _selection = selection ? [...selection] : []; + } + ObjectUtils.insertIntoOrderedArray(item, index, _selection, this.modelValue); } } + let newSelection = [this.d_selection]; + newSelection = _selection; + this.d_selection = newSelection; + this.$emit('update:selection', this.d_selection); this.$emit('selection-change', { originalEvent:event, @@ -347,6 +366,12 @@ export default { document.head.removeChild(this.styleElement); this.styleElement = null; } + }, + isSingleSelectionMode() { + return this.selectionMode === 'single'; + }, + isMultipleSelectionMode() { + return this.selectionMode === 'multiple'; } }, computed: { diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue index b2cb400f9..648118237 100755 --- a/src/views/orderlist/OrderListDoc.vue +++ b/src/views/orderlist/OrderListDoc.vue @@ -89,6 +89,12 @@ import OrderList from 'primevue/orderlist'; null Selected items in the list. + + selectionMode + string + null + Defines selection mode, options are "single" and "multiple". + metaKeySelection boolean