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

Refactor #3832 Refactor #3833 - For OrderList

pull/3853/head
Tuğçe Küçükoğlu 2023-04-07 09:47:23 +03:00
parent 30beabe7b8
commit 5017cedd0b
3 changed files with 65 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
api-generator/components/orderlist.js
View File

@ -93,19 +93,35 @@ const OrderListEvents = [
const OrderListSlots = [
{
name: 'header',
description: "Custom content for the component's header"
description: "Custom content for the component's header."
},
{
name: 'item',
description: 'Custom content for the item'
description: 'Custom content for the item.'
},
{
name: 'controlsstart',
description: 'Custom content before the buttons'
description: 'Custom content before the buttons.'
},
{
name: 'controlsend',
description: 'Custom content after the buttons'
description: 'Custom content after the buttons.'
},
{
name: 'movetopicon',
description: 'Custom move top icon template.'
},
{
name: 'moveupicon',
description: 'Custom move up icon template.'
},
{
name: 'movedownicon',
description: 'Custom move down icon template.'
},
{
name: 'movebottomicon',
description: 'Custom move bottom icon template.'
}
];

16
components/lib/orderlist/OrderList.d.ts vendored
View File

@ -149,6 +149,22 @@ export interface OrderListSlots {
* Custom controls end template.
*/
controlsend(): VNode[];
/**
* Custom move up icon template.
*/
moveupicon(): VNode[];
/**
* Custom move top icon template.
*/
movetopicon(): VNode[];
/**
* Custom move down icon template.
*/
movedownicon(): VNode[];
/**
* Custom move bottom icon template.
*/
movebottomicon(): VNode[];
}
/**

34
components/lib/orderlist/OrderList.vue
View File

@ -2,10 +2,26 @@
<div :class="containerClass">
<div class="p-orderlist-controls">
<slot name="controlsstart"></slot>
<OLButton type="button" icon="pi pi-angle-up" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps"></OLButton>
<OLButton type="button" icon="pi pi-angle-double-up" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps"></OLButton>
<OLButton type="button" icon="pi pi-angle-down" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps"></OLButton>
<OLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps"></OLButton>
<OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps">
<slot>
<component :is="$slots.moveupicon || 'AngleUpIcon'" />
</slot>
</OLButton>
<OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps">
<slot name="movetopicon">
<AngleDoubleUpIcon />
</slot>
</OLButton>
<OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps">
<slot name="movedownicon">
<AngleDownIcon />
</slot>
</OLButton>
<OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps">
<slot name="movebottomicon">
<AngleDoubleDownIcon />
</slot>
</OLButton>
<slot name="controlsend"></slot>
</div>
<div class="p-orderlist-list-container">
@ -42,6 +58,10 @@
<script>
import Button from 'primevue/button';
import AngleDoubleDownIcon from 'primevue/icon/angledoubledown';
import AngleDoubleUpIcon from 'primevue/icon/angledoubleup';
import AngleDownIcon from 'primevue/icon/angledown';
import AngleUpIcon from 'primevue/icon/angleup';
import Ripple from 'primevue/ripple';
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
@ -578,7 +598,11 @@ export default {
}
},
components: {
OLButton: Button
OLButton: Button,
AngleUpIcon: AngleUpIcon,
AngleDownIcon: AngleDownIcon,
AngleDoubleUpIcon: AngleDoubleUpIcon,
AngleDoubleDownIcon: AngleDoubleDownIcon
},
directives: {
ripple: Ripple