Refactor #4124 - PickList pt context improvements

pull/4148/head
Tuğçe Küçükoğlu 2023-07-13 11:00:06 +03:00
parent 919c53885c
commit f7d4ba1d2d
3 changed files with 6 additions and 17 deletions

View File

@ -49,18 +49,11 @@ const classes = {
sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper', sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
sourceHeader: 'p-picklist-header', sourceHeader: 'p-picklist-header',
sourceList: 'p-picklist-list p-picklist-source-list', sourceList: 'p-picklist-list p-picklist-source-list',
sourceItem: ({ instance, item, id, listIndex }) => [
'p-picklist-item',
{
'p-highlight': instance.isSelected(item, listIndex),
'p-focus': id === instance.focusedOptionId
}
],
buttons: 'p-picklist-buttons p-picklist-transfer-buttons', buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper', targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
targetHeader: 'p-picklist-header', targetHeader: 'p-picklist-header',
targetList: 'p-picklist-list p-picklist-target', targetList: 'p-picklist-list p-picklist-target',
targetItem: ({ instance, item, id, listIndex }) => [ item: ({ instance, item, id, listIndex }) => [
'p-picklist-item', 'p-picklist-item',
{ {
'p-highlight': instance.isSelected(item, listIndex), 'p-highlight': instance.isSelected(item, listIndex),

View File

@ -139,10 +139,6 @@ export interface PickListPassThroughOptions {
* Uses to pass attributes to the source list's DOM element. * Uses to pass attributes to the source list's DOM element.
*/ */
sourceList?: PickListPassThroughOptionType; sourceList?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the source item's DOM element.
*/
sourceItem?: PickListPassThroughOptionType;
/** /**
* Uses to pass attributes to the buttons' DOM element. * Uses to pass attributes to the buttons' DOM element.
*/ */
@ -178,7 +174,7 @@ export interface PickListPassThroughOptions {
/** /**
* Uses to pass attributes to the target item's DOM element. * Uses to pass attributes to the target item's DOM element.
*/ */
targetItem?: PickListPassThroughOptionType; item?: PickListPassThroughOptionType;
/** /**
* Uses to pass attributes to the target controls' DOM element. * Uses to pass attributes to the target controls' DOM element.
*/ */

View File

@ -56,14 +56,14 @@
<li <li
:id="idSource + '_' + i" :id="idSource + '_' + i"
v-ripple v-ripple
:class="cx('sourceItem', { item, id: `${idSource}_${i}`, listIndex: 0 })" :class="cx('item', { item, id: `${idSource}_${i}`, listIndex: 0 })"
@click="onItemClick($event, item, i, 0)" @click="onItemClick($event, item, i, 0)"
@dblclick="onItemDblClick($event, item, 0)" @dblclick="onItemDblClick($event, item, 0)"
@touchend="onItemTouchEnd" @touchend="onItemTouchEnd"
@mousedown="onOptionMouseDown(i, 'sourceList')" @mousedown="onOptionMouseDown(i, 'sourceList')"
role="option" role="option"
:aria-selected="isSelected(item, 0)" :aria-selected="isSelected(item, 0)"
v-bind="getPTOptions(item, 'sourceItem', `${idSource}_${i}`, 0)" v-bind="getPTOptions(item, 'item', `${idSource}_${i}`, 0)"
:data-p-highlight="isSelected(item, 0)" :data-p-highlight="isSelected(item, 0)"
:data-p-focused="`${idSource}_${i}` === focusedOptionId" :data-p-focused="`${idSource}_${i}` === focusedOptionId"
> >
@ -128,7 +128,7 @@
<li <li
:id="idTarget + '_' + i" :id="idTarget + '_' + i"
v-ripple v-ripple
:class="cx('targetItem', { item, id: `${idTarget}_${i}`, listIndex: 1 })" :class="cx('item', { item, id: `${idTarget}_${i}`, listIndex: 1 })"
@click="onItemClick($event, item, i, 1)" @click="onItemClick($event, item, i, 1)"
@dblclick="onItemDblClick($event, item, 1)" @dblclick="onItemDblClick($event, item, 1)"
@keydown="onItemKeyDown($event, 'targetList')" @keydown="onItemKeyDown($event, 'targetList')"
@ -136,7 +136,7 @@
@touchend="onItemTouchEnd" @touchend="onItemTouchEnd"
role="option" role="option"
:aria-selected="isSelected(item, 1)" :aria-selected="isSelected(item, 1)"
v-bind="getPTOptions(item, 'targetItem', `${idTarget}_${i}`, 1)" v-bind="getPTOptions(item, 'item', `${idTarget}_${i}`, 1)"
:data-p-highlight="isSelected(item, 1)" :data-p-highlight="isSelected(item, 1)"
:data-p-focused="`${idTarget}_${i}` === focusedOptionId" :data-p-focused="`${idTarget}_${i}` === focusedOptionId"
> >