mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-08 16:37:15 +00:00
Refactor #3924 - For PickList
This commit is contained in:
Tuğçe Küçükoğlu
parent
e8c8343c08
commit
9ccf18dd16
4 changed files with 196 additions and 34 deletions
|
|
@ -1,39 +1,39 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
|
||||
<div :class="containerClass" v-bind="ptm('root')">
|
||||
<div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls" v-bind="ptm('sourceControls')">
|
||||
<slot name="sourcecontrolsstart"></slot>
|
||||
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps">
|
||||
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')">
|
||||
<template #icon>
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
<AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps">
|
||||
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')">
|
||||
<template #icon>
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
<AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps">
|
||||
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')">
|
||||
<template #icon>
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
<AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps">
|
||||
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps" :pt="ptm('sourceMoveBottomButton')">
|
||||
<template #icon>
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
<AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<slot name="sourcecontrolsend"></slot>
|
||||
</div>
|
||||
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
|
||||
<div v-if="$slots.sourceheader" class="p-picklist-header">
|
||||
<div class="p-picklist-list-wrapper p-picklist-source-wrapper" v-bind="ptm('sourceWrapper')">
|
||||
<div v-if="$slots.sourceheader" class="p-picklist-header" v-bind="ptm('sourceHeader')">
|
||||
<slot name="sourceheader"></slot>
|
||||
</div>
|
||||
<transition-group
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
@focus="onListFocus($event, 'sourceList')"
|
||||
@blur="onListBlur($event, 'sourceList')"
|
||||
@keydown="onItemKeyDown($event, 'sourceList')"
|
||||
v-bind="sourceListProps"
|
||||
v-bind="{ ...sourceListProps, ...ptm('sourceList') }"
|
||||
>
|
||||
<template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
|
||||
<li
|
||||
|
|
@ -63,46 +63,47 @@
|
|||
@mousedown="onOptionMouseDown(i, 'sourceList')"
|
||||
role="option"
|
||||
:aria-selected="isSelected(item, 0)"
|
||||
v-bind="getPTOptions(item, 'item')"
|
||||
>
|
||||
<slot name="item" :item="item" :index="i"> </slot>
|
||||
</li>
|
||||
</template>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="p-picklist-buttons p-picklist-transfer-buttons">
|
||||
<div class="p-picklist-buttons p-picklist-transfer-buttons" v-bind="ptm('buttons')">
|
||||
<slot name="movecontrolsstart"></slot>
|
||||
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps">
|
||||
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')">
|
||||
<template #icon>
|
||||
<slot name="movetotargeticon" :viewChanged="viewChanged">
|
||||
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" />
|
||||
<component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps">
|
||||
<PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps" :pt="ptm('moveAllToTargetButton')">
|
||||
<template #icon>
|
||||
<slot name="movealltotargeticon" :viewChanged="viewChanged">
|
||||
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" />
|
||||
<component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps">
|
||||
<PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')">
|
||||
<template #icon>
|
||||
<slot name="movetosourceicon" :viewChanged="viewChanged">
|
||||
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" />
|
||||
<component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps">
|
||||
<PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveSourceDisabled('targetList')" v-bind="moveAllToSourceProps" :pt="ptm('moveAllToSourceButton')">
|
||||
<template #icon>
|
||||
<slot name="movealltosourceicon" :viewChanged="viewChanged">
|
||||
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" />
|
||||
<component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<slot name="movecontrolsend"></slot>
|
||||
</div>
|
||||
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
|
||||
<div v-if="$slots.targetheader" class="p-picklist-header">
|
||||
<div class="p-picklist-list-wrapper p-picklist-target-wrapper" v-bind="ptm('targetWrapper')">
|
||||
<div v-if="$slots.targetheader" class="p-picklist-header" v-bind="ptm('targetHeader')">
|
||||
<slot name="targetheader"></slot>
|
||||
</div>
|
||||
<transition-group
|
||||
|
|
@ -119,7 +120,7 @@
|
|||
@focus="onListFocus($event, 'targetList')"
|
||||
@blur="onListBlur($event, 'targetList')"
|
||||
@keydown="onItemKeyDown($event, 'targetList')"
|
||||
v-bind="targetListProps"
|
||||
v-bind="{ ...targetListProps, ...ptm('targetList') }"
|
||||
>
|
||||
<template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
|
||||
<li
|
||||
|
|
@ -133,39 +134,40 @@
|
|||
@touchend="onItemTouchEnd"
|
||||
role="option"
|
||||
:aria-selected="isSelected(item, 1)"
|
||||
v-bind="getPTOptions(item, 'item')"
|
||||
>
|
||||
<slot name="item" :item="item" :index="i"> </slot>
|
||||
</li>
|
||||
</template>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
|
||||
<div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls" v-bind="ptm('targetControls')">
|
||||
<slot name="targetcontrolsstart"></slot>
|
||||
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps">
|
||||
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')">
|
||||
<template #icon>
|
||||
<slot name="moveupicon">
|
||||
<AngleUpIcon />
|
||||
<AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps">
|
||||
<PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')">
|
||||
<template #icon>
|
||||
<slot name="movetopicon">
|
||||
<AngleDoubleUpIcon />
|
||||
<AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps">
|
||||
<PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')">
|
||||
<template #icon>
|
||||
<slot name="movedownicon">
|
||||
<AngleDownIcon />
|
||||
<AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps">
|
||||
<PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps" :pt="ptm('targetMoveBottomButton')">
|
||||
<template #icon>
|
||||
<slot name="movebottomicon">
|
||||
<AngleDoubleDownIcon />
|
||||
<AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" />
|
||||
</slot>
|
||||
</template>
|
||||
</PLButton>
|
||||
|
|
@ -175,6 +177,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Button from 'primevue/button';
|
||||
import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
|
||||
import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
|
||||
|
|
@ -189,6 +192,7 @@ import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
|||
|
||||
export default {
|
||||
name: 'PickList',
|
||||
extends: BaseComponent,
|
||||
emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],
|
||||
props: {
|
||||
modelValue: {
|
||||
|
|
@ -328,6 +332,14 @@ export default {
|
|||
getItemKey(item, index) {
|
||||
return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
|
||||
},
|
||||
getPTOptions(item, key) {
|
||||
return this.ptm(key, {
|
||||
context: {
|
||||
active: this.isSelected(item),
|
||||
focused: this.id === this.focusedOptionId
|
||||
}
|
||||
});
|
||||
},
|
||||
isSelected(item, listIndex) {
|
||||
return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue