Update PickList.vue

pull/4295/head
mertsincan 2023-08-18 00:36:06 +01:00
parent 77a6fc225c
commit e4651a9d0c
1 changed files with 9 additions and 7 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<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')" data-pc-group-section="controls">
<slot name="sourcecontrolsstart"></slot> <slot name="sourcecontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" :pt="ptm('sourceMoveUpButton')" v-bind="moveUpButtonProps" :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>
@ -32,8 +32,8 @@
</PLButton> </PLButton>
<slot name="sourcecontrolsend"></slot> <slot name="sourcecontrolsend"></slot>
</div> </div>
<div :class="cx('sourceWrapper')" v-bind="ptm('sourceWrapper')"> <div :class="cx('sourceWrapper')" v-bind="ptm('sourceWrapper')" data-pc-group-section="listwrapper">
<div v-if="$slots.sourceheader" :class="cx('sourceHeader')" v-bind="ptm('sourceHeader')"> <div v-if="$slots.sourceheader" :class="cx('sourceHeader')" v-bind="ptm('sourceHeader')" data-pc-group-section="header">
<slot name="sourceheader"></slot> <slot name="sourceheader"></slot>
</div> </div>
<transition-group <transition-group
@ -51,6 +51,7 @@
@blur="onListBlur($event, 'sourceList')" @blur="onListBlur($event, 'sourceList')"
@keydown="onItemKeyDown($event, 'sourceList')" @keydown="onItemKeyDown($event, 'sourceList')"
v-bind="{ ...sourceListProps, ...ptm('sourceList'), ...ptm('transition') }" v-bind="{ ...sourceListProps, ...ptm('sourceList'), ...ptm('transition') }"
data-pc-group-section="list"
> >
<template v-for="(item, i) of sourceList" :key="getItemKey(item, i)"> <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
<li <li
@ -72,7 +73,7 @@
</template> </template>
</transition-group> </transition-group>
</div> </div>
<div :class="cx('buttons')" v-bind="ptm('buttons')"> <div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls">
<slot name="movecontrolsstart"></slot> <slot name="movecontrolsstart"></slot>
<PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" :pt="ptm('moveToTargetButton')" v-bind="moveToTargetProps" :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>
@ -104,8 +105,8 @@
</PLButton> </PLButton>
<slot name="movecontrolsend"></slot> <slot name="movecontrolsend"></slot>
</div> </div>
<div :class="cx('targetWrapper')" v-bind="ptm('targetWrapper')"> <div :class="cx('targetWrapper')" v-bind="ptm('targetWrapper')" data-pc-group-section="listwrapper">
<div v-if="$slots.targetheader" :class="cx('targetHeader')" v-bind="ptm('targetHeader')"> <div v-if="$slots.targetheader" :class="cx('targetHeader')" v-bind="ptm('targetHeader')" data-pc-group-section="header">
<slot name="targetheader"></slot> <slot name="targetheader"></slot>
</div> </div>
<transition-group <transition-group
@ -123,6 +124,7 @@
@blur="onListBlur($event, 'targetList')" @blur="onListBlur($event, 'targetList')"
@keydown="onItemKeyDown($event, 'targetList')" @keydown="onItemKeyDown($event, 'targetList')"
v-bind="{ ...targetListProps, ...ptm('targetList'), ...ptm('transition') }" v-bind="{ ...targetListProps, ...ptm('targetList'), ...ptm('transition') }"
data-pc-group-section="list"
> >
<template v-for="(item, i) of targetList" :key="getItemKey(item, i)"> <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
<li <li
@ -145,7 +147,7 @@
</template> </template>
</transition-group> </transition-group>
</div> </div>
<div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')"> <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
<slot name="targetcontrolsstart"></slot> <slot name="targetcontrolsstart"></slot>
<PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" :pt="ptm('targetMoveUpButton')" v-bind="moveUpButtonProps" :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>