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

Animation for orderlist

pull/41/head
cagataycivici 2019-07-16 16:48:32 +03:00
parent e158ddca9d
commit 062e01b8f5
2 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/orderlist/OrderList.vue
View File

@ -10,12 +10,12 @@
<div class="p-orderlist-caption" v-if="$slots.header"> <div class="p-orderlist-caption" v-if="$slots.header">
<slot name="header"></slot> <slot name="header"></slot>
</div> </div>
<ul ref="list" class="p-orderlist-list" :style="listStyle"> <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle">
<li tabindex="0" v-for="(item, i) of value" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" <li tabindex="0" v-for="(item, i) of value" :key="getItemKey(item, i)" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]"
@click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd($event)"> @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd($event)">
<slot name="item" :item="item" :index="i"> </slot> <slot name="item" :item="item" :index="i"> </slot>
</li> </li>
</ul> </transition-group>
</div> </div>
</div> </div>
</template> </template>
@ -57,13 +57,13 @@ export default {
}, },
updated() { updated() {
if (this.reorderDirection) { if (this.reorderDirection) {
this.updateListScroll(); //this.updateListScroll();
this.reorderDirection = null; this.reorderDirection = null;
} }
}, },
methods: { methods: {
getItemKey(item, index) { getItemKey(item, index) {
return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index; return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
}, },
isSelected(item) { isSelected(item) {
return ObjectUtils.findIndexInList(item, this.d_selection) != -1; return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
@ -384,7 +384,7 @@ export default {
} }
.p-orderlist.p-state-disabled .p-orderlist-list { .p-orderlist.p-state-disabled .p-orderlist-list {
overflow:hidden; overflow: hidden;
} }
.p-orderlist .p-orderlist-droppoint { .p-orderlist .p-orderlist-droppoint {
@ -392,6 +392,11 @@ export default {
list-style-type: none; list-style-type: none;
} }
.p-orderlist-flip-move {
transition: transform .2s;
z-index: 1;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.p-orderlist-controls { .p-orderlist-controls {
width: 100%; width: 100%;

33
src/views/orderlist/OrderListDemo.vue
View File

@ -8,14 +8,14 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<OrderList v-model="cars" header="List of Cars" listStyle="height:20em"> <OrderList v-model="cars" header="List of Cars" listStyle="height:20em" dataKey="vin">
<template #header> <template #header>
List of Cars List of Cars
</template> </template>
<template #item="slotProps"> <template #item="slotProps">
<div class="p-clearfix"> <div class="p-caritem">
<img :src="'demo/images/car/' + slotProps.item.brand + '.png'" style="display:inline-block;margin:2px 0 2px 2px" width="48"> <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div> <div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
</div> </div>
</template> </template>
</OrderList> </OrderList>
@ -45,4 +45,27 @@ export default {
'OrderListDoc': OrderListDoc 'OrderListDoc': OrderListDoc
} }
} }
</script> </script>
<style lang="scss" scoped>
.p-caritem {
&:after {
content: "";
display: table;
clear: both;
}
img {
display:inline-block;
margin:2px 0 2px 2px;
width: 48px;
height: 48px;
}
div {
font-size:14px;
float:right;
margin: 16px 6px 0 0;
}
}
</style>