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

Refactor #4124 - PickList pt context improvements

pull/4148/head
Tuğçe Küçükoğlu 2023-07-13 10:42:00 +03:00
parent 487c2375f6
commit 3c68ccc1b1
3 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/lib/picklist/BasePickList.vue
View File

@ -49,7 +49,7 @@ 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',
item: ({ instance, item, id, listIndex }) => [ sourceItem: ({ instance, item, id, listIndex }) => [
'p-picklist-item', 'p-picklist-item',
{ {
'p-highlight': instance.isSelected(item, listIndex), 'p-highlight': instance.isSelected(item, listIndex),
@ -60,6 +60,13 @@ const classes = {
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 }) => [
'p-picklist-item',
{
'p-highlight': instance.isSelected(item, listIndex),
'p-focus': id === instance.focusedOptionId
}
],
targetControls: 'p-picklist-buttons p-picklist-target-controls' targetControls: 'p-picklist-buttons p-picklist-target-controls'
}; };

8
components/lib/picklist/PickList.d.ts vendored
View File

@ -138,6 +138,10 @@ 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.
*/ */
@ -170,6 +174,10 @@ export interface PickListPassThroughOptions {
* Uses to pass attributes to the target list's DOM element. * Uses to pass attributes to the target list's DOM element.
*/ */
targetList?: PickListPassThroughOptionType; targetList?: PickListPassThroughOptionType;
/**
* Uses to pass attributes to the target item's DOM element.
*/
targetItem?: PickListPassThroughOptionType;
/** /**
* Uses to pass attributes to the target controls' DOM element. * Uses to pass attributes to the target controls' DOM element.
*/ */

42
components/lib/picklist/PickList.vue
View File

@ -2,28 +2,28 @@
<div :class="cx('root')" v-bind="ptm('root')"> <div :class="cx('root')" v-bind="ptm('root')">
<div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')"> <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')">
<slot name="sourcecontrolsstart"></slot> <slot name="sourcecontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="{ ...moveUpButtonProps, ...ptm('sourceMoveUpButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" :pt="ptm('sourceMoveUpButton')" v-bind="moveUpButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" /> <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="{ ...moveTopButtonProps, ...ptm('sourceMoveTopButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" :pt="ptm('sourceMoveTopButton')" v-bind="moveTopButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" /> <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="{ ...moveDownButtonProps, ...ptm('sourceMoveDownButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" :pt="ptm('sourceMoveDownButton')" v-bind="moveDownButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" /> <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="{ ...moveBottomButtonProps, ...ptm('sourceMoveBottomButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" :pt="ptm('sourceMoveBottomButton')" v-bind="moveBottomButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" /> <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" />
@ -56,16 +56,16 @@
<li <li
:id="idSource + '_' + i" :id="idSource + '_' + i"
v-ripple v-ripple
:class="cx('item', { item, id: `${idSource}_${i}`, listIndex: 0 })" :class="cx('sourceItem', { 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, 'item')" v-bind="getPTOptions(item, 'sourceItem', `${idSource}_${i}`, 0)"
:data-p-highlight="isSelected(item, 0)" :data-p-highlight="isSelected(item, 0)"
:data-p-focused="`${id}_${i}` === focusedOptionId" :data-p-focused="`${idSource}_${i}` === focusedOptionId"
> >
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
@ -74,28 +74,28 @@
</div> </div>
<div :class="cx('buttons')" v-bind="ptm('buttons')"> <div :class="cx('buttons')" v-bind="ptm('buttons')">
<slot name="movecontrolsstart"></slot> <slot name="movecontrolsstart"></slot>
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...moveToTargetProps, ...ptm('moveToTargetButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" :pt="ptm('moveToTargetButton')" v-bind="moveToTargetProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetotargeticon" :viewChanged="viewChanged"> <slot name="movetotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" /> <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="{ ...moveAllToTargetProps, ...ptm('moveAllToTargetButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" :pt="ptm('moveAllToTargetButton')" v-bind="moveAllToTargetProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movealltotargeticon" :viewChanged="viewChanged"> <slot name="movealltotargeticon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" /> <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="{ ...moveToSourceProps, ...ptm('moveToSourceButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" :pt="ptm('moveToSourceButton')" v-bind="moveToSourceProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetosourceicon" :viewChanged="viewChanged"> <slot name="movetosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" /> <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="{ ...moveAllToSourceProps, ...ptm('moveAllToSourceButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" :pt="ptm('moveAllToSourceButton')" v-bind="moveAllToSourceProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movealltosourceicon" :viewChanged="viewChanged"> <slot name="movealltosourceicon" :viewChanged="viewChanged">
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" /> <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" />
@ -128,7 +128,7 @@
<li <li
:id="idTarget + '_' + i" :id="idTarget + '_' + i"
v-ripple v-ripple
:class="cx('item', { item, id: `${idTarget}_${i}`, listIndex: 1 })" :class="cx('targetItem', { 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,9 +136,9 @@
@touchend="onItemTouchEnd" @touchend="onItemTouchEnd"
role="option" role="option"
:aria-selected="isSelected(item, 1)" :aria-selected="isSelected(item, 1)"
v-bind="getPTOptions(item, 'item')" v-bind="getPTOptions(item, 'targetItem', `${idTarget}_${i}`, 1)"
:data-p-highlight="isSelected(item, 1)" :data-p-highlight="isSelected(item, 1)"
:data-p-focused="`${id}_${i}` === focusedOptionId" :data-p-focused="`${idTarget}_${i}` === focusedOptionId"
> >
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
@ -147,28 +147,28 @@
</div> </div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')"> <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')">
<slot name="targetcontrolsstart"></slot> <slot name="targetcontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="{ ...moveUpButtonProps, ...ptm('targetMoveUpButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" :pt="ptm('targetMoveUpButton')" v-bind="moveUpButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="moveupicon"> <slot name="moveupicon">
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" /> <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="{ ...moveTopButtonProps, ...ptm('targetMoveTopButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" :pt="ptm('targetMoveTopButton')" v-bind="moveTopButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movetopicon"> <slot name="movetopicon">
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" /> <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="{ ...moveDownButtonProps, ...ptm('targetMoveDownButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" :pt="ptm('targetMoveDownButton')" v-bind="moveDownButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movedownicon"> <slot name="movedownicon">
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" /> <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" />
</slot> </slot>
</template> </template>
</PLButton> </PLButton>
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="{ ...moveBottomButtonProps, ...ptm('targetMoveBottomButton') }" :unstyled="unstyled"> <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" :pt="ptm('targetMoveBottomButton')" v-bind="moveBottomButtonProps" :unstyled="unstyled">
<template #icon> <template #icon>
<slot name="movebottomicon"> <slot name="movebottomicon">
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" /> <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" />
@ -250,11 +250,11 @@ export default {
getItemKey(item, index) { getItemKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index; return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
}, },
getPTOptions(item, key) { getPTOptions(item, key, id, listIndex) {
return this.ptm(key, { return this.ptm(key, {
context: { context: {
active: this.isSelected(item), active: this.isSelected(item, listIndex),
focused: this.id === this.focusedOptionId focused: id === this.focusedOptionId
} }
}); });
}, },