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

Fixed #1758 - PickList slots before and after the buttons

pull/1280/head^2
Cagatay Civici 2021-11-15 17:04:20 +03:00
parent 099574edc7
commit cec116a24e
5 changed files with 75 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
api-generator/components/picklist.js
View File

@ -160,7 +160,7 @@ const PickListEvents = [
const PickListSlots = [
{
name: "sourceHeader",
name: "sourceheader",
description: "Custom content for the component's source header"
},
{
@ -168,8 +168,32 @@ const PickListSlots = [
description: "Custom content for the item"
},
{
name: "targetHeader",
name: "targetheader",
description: "Custom content for the component's target header"
},
{
name: "sourcecontrolsstart",
description: "Custom content before source control buttons"
},
{
name: "sourcecontrolsend",
description: "Custom content after source control buttons"
},
{
name: "movecontrolsstart",
description: "Custom content before move buttons"
},
{
name: "movecontrolsend",
description: "Custom content after move buttons"
},
{
name: "targetcontrolsstart",
description: "Custom content before target control buttons"
},
{
name: "targetcontrolsend",
description: "Custom content after target control buttons"
}
];

10
src/components/picklist/PickList.d.ts vendored
View File

@ -29,8 +29,14 @@ declare class PickList {
$slots: {
header: VNode[];
item: PickListItemSlotInterface;
sourceHeader: VNode[];
targetHeader: VNode[];
sourceheader: VNode[];
targetheader: VNode[];
sourcecontrolsstart: VNode[];
sourcecontrolsend: VNode[];
movecontrolsstart: VNode[];
movecontrolsend: VNode[];
targetcontrolsstart: VNode[];
targetcontrolsend: VNode[];
}
}

14
src/components/picklist/PickList.vue
View File

@ -1,14 +1,16 @@
<template>
<div class="p-picklist p-component">
<div class="p-picklist-buttons p-picklist-source-controls">
<slot name="sourcecontrolsstart"></slot>
<PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
<PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
<PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
<slot name="sourcecontrolsend"></slot>
</div>
<div class="p-picklist-list-wrapper p-picklist-source-wrapper">
<div class="p-picklist-header" v-if="$slots.sourceHeader">
<slot name="sourceHeader"></slot>
<div class="p-picklist-header" v-if="$slots.sourceheader">
<slot name="sourceheader"></slot>
</div>
<transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
@ -21,14 +23,16 @@
</transition-group>
</div>
<div class="p-picklist-buttons p-picklist-transfer-buttons">
<slot name="movecontrolsstart"></slot>
<PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
<PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
<PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
<PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
<slot name="movecontrolsend"></slot>
</div>
<div class="p-picklist-list-wrapper p-picklist-target-wrapper">
<div class="p-picklist-header" v-if="$slots.targetHeader">
<slot name="targetHeader"></slot>
<div class="p-picklist-header" v-if="$slots.targetheader">
<slot name="targetheader"></slot>
</div>
<transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
<template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
@ -41,10 +45,12 @@
</transition-group>
</div>
<div class="p-picklist-buttons p-picklist-target-controls">
<slot name="targetcontrolsstart"></slot>
<PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
<PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
<PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
<PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
<slot name="targetcontrolsend"></slot>
</div>
</div>
</template>

4
src/views/picklist/PickListDemo.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation">
<div class="card">
<PickList v-model="products" listStyle="height:342px" dataKey="id">
<template #sourceHeader>
<template #sourceheader>
Available
</template>
<template #targetHeader>
<template #targetheader>
Selected
</template>
<template #item="slotProps">

32
src/views/picklist/PickListDoc.vue
View File

@ -32,7 +32,9 @@ import PickList from 'primevue/picklist';
</code></pre>
<h5>Templates</h5>
<p>In addition to the mandatory "item" template, picklist provides "sourceHeader" and "targetHeader" slots as optional templates.</p>
<p>In addition to the mandatory "item" template, picklist provides "sourceheader" and "targetheader" slots to define content
at header sections. Similarly custom content can be placed before and after the button controls for each section can be templates. View
the slots section for more information.</p>
<pre v-code><code><template v-pre>
&lt;PickList v-model="cars" dataKey="vin"&gt;
&lt;template #sourceHeader&gt;
@ -223,11 +225,35 @@ import PickList from 'primevue/picklist';
index: Index of the item</td>
</tr>
<tr>
<td>sourceHeader</td>
<td>sourceheader</td>
<td>-</td>
</tr>
<tr>
<td>targetHeader</td>
<td>targetheader</td>
<td>-</td>
</tr>
<tr>
<td>sourcecontrolsstart</td>
<td>-</td>
</tr>
<tr>
<td>sourcecontrolsend</td>
<td>-</td>
</tr>
<tr>
<td>movecontrolsstart</td>
<td>-</td>
</tr>
<tr>
<td>movecontrolsend</td>
<td>-</td>
</tr>
<tr>
<td>targetcontrolsstart</td>
<td>-</td>
</tr>
<tr>
<td>targetcontrolsend</td>
<td>-</td>
</tr>
</tbody>