From 062e01b8f52eac88e7f2935a233330261ec87cda Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 16 Jul 2019 16:48:32 +0300
Subject: [PATCH] Animation for orderlist

---
 src/components/orderlist/OrderList.vue | 15 ++++++++----
 src/views/orderlist/OrderListDemo.vue  | 33 ++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index 158bc7fc0..05f5063f9 100644
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -10,12 +10,12 @@
             <div class="p-orderlist-caption" v-if="$slots.header">
                 <slot name="header"></slot>
             </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)}]" 
                     @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd($event)">
                     <slot name="item" :item="item" :index="i"> </slot>
                 </li>
-            </ul>
+            </transition-group>
         </div>
     </div>
 </template>
@@ -57,13 +57,13 @@ export default {
     },
     updated() {
         if (this.reorderDirection) {
-            this.updateListScroll();
+            //this.updateListScroll();
             this.reorderDirection = null;
         }
     },
     methods: {
         getItemKey(item, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
         },
         isSelected(item) {
             return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
@@ -384,7 +384,7 @@ export default {
 }
 
 .p-orderlist.p-state-disabled .p-orderlist-list {
-    overflow:hidden;
+    overflow: hidden;
 }
 
 .p-orderlist .p-orderlist-droppoint {
@@ -392,6 +392,11 @@ export default {
     list-style-type: none;
 }
 
+.p-orderlist-flip-move {
+    transition: transform .2s;
+    z-index: 1;
+}
+
 @media (max-width: 767px) {
     .p-orderlist-controls {
         width: 100%;
diff --git a/src/views/orderlist/OrderListDemo.vue b/src/views/orderlist/OrderListDemo.vue
index 0eb4fba66..464c076ed 100644
--- a/src/views/orderlist/OrderListDemo.vue
+++ b/src/views/orderlist/OrderListDemo.vue
@@ -8,14 +8,14 @@
         </div>
 
         <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>
                     List of Cars
                 </template>
                 <template #item="slotProps">
-                    <div class="p-clearfix">
-                        <img :src="'demo/images/car/' + slotProps.item.brand + '.png'" style="display:inline-block;margin:2px 0 2px 2px" width="48">
-                        <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
+                    <div class="p-caritem">
+                        <img :src="'demo/images/car/' + slotProps.item.brand + '.png'">
+                        <div>{{slotProps.item.brand}} - {{slotProps.item.year}} - {{slotProps.item.color}}</div>
                     </div>
                 </template>
             </OrderList>
@@ -45,4 +45,27 @@ export default {
         'OrderListDoc': OrderListDoc
     }
 }
-</script>
\ No newline at end of file
+</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>
\ No newline at end of file