Update PickList.vue
parent
77a6fc225c
commit
e4651a9d0c
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue