vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1206 - Support moving the item in PickList with double-click

pull/1196/head^2
Cagatay Civici 2021-05-12 12:46:16 +03:00
parent 65d36f2a0b
commit fa385602f9
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/picklist/PickList.vue
View File

@ -13,7 +13,8 @@
<transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple"> <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of sourceList" :key="getItemKey(item, i)"> <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
<li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
@click="onItemClick($event, item, i, 0)" @keydown="onItemKeyDown($event, item, i, 0)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 0)"> @click="onItemClick($event, item, 0)" @dblclick="onItemDblClick($event, item, 0)" @keydown="onItemKeyDown($event, item, 0)" @touchend="onItemTouchEnd"
role="option" :aria-selected="isSelected(item, 0)">
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
</template> </template>
@ -32,7 +33,8 @@
<transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple"> <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of targetList" :key="getItemKey(item, i)"> <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
<li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
@click="onItemClick($event, item, i, 1)" @keydown="onItemKeyDown($event, item, i, 1)" @touchend="onItemTouchEnd" role="option" :aria-selected="isSelected(item, 1)"> @click="onItemClick($event, item, 1)" @dblclick="onItemDblClick($event, item, 1)" @keydown="onItemKeyDown($event, item, 1)" @touchend="onItemTouchEnd"
role="option" :aria-selected="isSelected(item, 1)">
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
</template> </template>
@ -364,7 +366,7 @@ export default {
}); });
} }
}, },
onItemClick(event, item, index, listIndex) { onItemClick(event, item, listIndex) {
this.itemTouched = false; this.itemTouched = false;
const selectionList = this.d_selection[listIndex]; const selectionList = this.d_selection[listIndex];
const selectedIndex = ObjectUtils.findIndexInList(item, selectionList); const selectedIndex = ObjectUtils.findIndexInList(item, selectionList);
@ -403,10 +405,16 @@ export default {
value: this.d_selection value: this.d_selection
}); });
}, },
onItemDblClick(event, item, listIndex) {
if (listIndex === 0)
this.moveToTarget(event);
else if (listIndex === 1)
this.moveToSource(event);
},
onItemTouchEnd() { onItemTouchEnd() {
this.itemTouched = true; this.itemTouched = true;
}, },
onItemKeyDown(event, item, index, listIndex) { onItemKeyDown(event, item, listIndex) {
let listItem = event.currentTarget; let listItem = event.currentTarget;
switch(event.which) { switch(event.which) {
@ -432,7 +440,7 @@ export default {
//enter //enter
case 13: case 13:
this.onItemClick(event, item, index, listIndex); this.onItemClick(event, item, listIndex);
event.preventDefault(); event.preventDefault();
break; break;