OrderList animation

public/themes/luna-amber/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #212121;
   background-color: #FFB300;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;

public/themes/luna-blue/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #1f7ed0;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;

public/themes/luna-green/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #1ea04c;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;

public/themes/luna-pink/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #cc285c;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #dedede;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #4c4c4c;

public/themes/nova-colored/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #a6a6a6;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #007ad9;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #a6a6a6;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #333333;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #eaeaea;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #333333;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #eaeaea;

public/themes/nova-dark/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #a6a6a6;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #007ad9;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #a6a6a6;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #333333;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #eaeaea;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #333333;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #eaeaea;

public/themes/nova-light/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #a6a6a6;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #007ad9;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #a6a6a6;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #333333;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #eaeaea;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #333333;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #eaeaea;

public/themes/rhea/theme.css

@@ -940,9 +940,6 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #dadada;
-}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -968,9 +965,6 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #7B95A3;
 }
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #dadada;
-}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2363,10 +2357,10 @@ body .p-picklist .p-picklist-list .p-picklist-item {
   border: 0 none;
   color: #666666;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
   background-color: #f4f4f4;
@@ -2449,10 +2443,10 @@ body .p-orderlist .p-orderlist-list .p-orderlist-item {
   border: 0 none;
   color: #666666;
   background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
+  -moz-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  -webkit-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
 }
 body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
   background-color: #f4f4f4;

src/components/orderlist/OrderList.vue

@@ -12,7 +12,7 @@
             </div>
             <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)">
+                    @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd">
                     <slot name="item" :item="item" :index="i"> </slot>
                 </li>
             </transition-group>
@@ -57,7 +57,7 @@ export default {
     },
     updated() {
         if (this.reorderDirection) {
-            //this.updateListScroll();
+            this.updateListScroll();
             this.reorderDirection = null;
         }
     },
@@ -209,7 +209,7 @@ export default {
                 value: this.d_selection
             });   
         },
-        onItemTouchEnd(event) {
+        onItemTouchEnd() {
             this.itemTouched = true;
         },
         onItemKeyDown(event, item, index) {
@@ -263,24 +263,24 @@ export default {
                 return null;
         },
         updateListScroll() {
-            const listItems = DomHandler.find(this.$refs.list, '.p-orderlist-item.p-highlight');
+            const listItems = DomHandler.find(this.$refs.list.$el, '.p-orderlist-item.p-highlight');
 
             if (listItems && listItems.length) {
                 switch(this.reorderDirection) {
                     case 'up':
-                        DomHandler.scrollInView(this.$refs.list, listItems[0]);
+                        DomHandler.scrollInView(this.$refs.list.$el, listItems[0]);
                     break;
                     
                     case 'top':
-                        this.$refs.list.scrollTop = 0;
+                        this.$refs.list.$el.scrollTop = 0;
                     break;
                     
                     case 'down':
-                        DomHandler.scrollInView(this.$refs.list, listItems[listItems.length - 1]);
+                        DomHandler.scrollInView(this.$refs.list.$el, listItems[listItems.length - 1]);
                     break;
                     
                     case 'bottom':
-                        this.$refs.list.scrollTop = this.$refs.list.scrollHeight;
+                        this.$refs.list.$el.scrollTop = this.$refs.list.$el.scrollHeight;
                     break;
                     
                     default:
@@ -392,11 +392,6 @@ 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%;

src/views/orderlist/OrderListDemo.vue

@@ -8,7 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <OrderList v-model="cars" header="List of Cars" listStyle="height:20em" dataKey="vin">
+            <OrderList v-model="cars" header="List of Cars" listStyle="height:auto" dataKey="vin">
                 <template #header>
                     List of Cars
                 </template>
@@ -39,7 +39,7 @@ export default {
         this.carService = new CarService();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.carService.getCarsSmall().then(data => this.cars = data.slice(0,5));
     },
     components: {
         'OrderListDoc': OrderListDoc