From 6ca5d9a6adeb5958d831e454c0165784fb5de71e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 23 Sep 2020 13:56:38 +0300
Subject: [PATCH] Migrated OrderList to V3

---
 src/components/orderlist/OrderList.vue | 24 ++++++++++++------------
 src/views/orderlist/OrderListDoc.vue   |  8 ++++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/orderlist/OrderList.vue b/src/components/orderlist/OrderList.vue
index 3d13551d7..31145a799 100755
--- a/src/components/orderlist/OrderList.vue
+++ b/src/components/orderlist/OrderList.vue
@@ -11,7 +11,7 @@
                 <slot name="header"></slot>
             </div>
             <transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle" role="listbox" aria-multiselectable="multiple">
-                <template v-for="(item, i) of value" :key="getItemKey(item, i)">
+                <template v-for="(item, i) of modelValue" :key="getItemKey(item, i)">
                     <li tabindex="0" :class="['p-orderlist-item', {'p-highlight': isSelected(item)}]" v-ripple
                         @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd"
                         role="option" :aria-selected="isSelected(item)">
@@ -31,7 +31,7 @@ import Ripple from '../ripple/Ripple';
 
 export default {
     props: {
-        value: {
+        modelValue: {
             type: Array,
             default: null
         },
@@ -74,7 +74,7 @@ export default {
         },
         moveUp() {
             if (this.d_selection) {
-                let value = [...this.value];
+                let value = [...this.modelValue];
 
                 for (let i = 0; i < this.d_selection.length; i++) {
                     let selectedItem = this.d_selection[i];
@@ -92,7 +92,7 @@ export default {
                 }
 
                 this.reorderDirection = 'up';
-                this.$emit('input', value);
+                this.$emit('update:modelValue', value);
                 this.$emit('reorder', {
                     originalEvent: event,
                     value: value,
@@ -102,7 +102,7 @@ export default {
         },
         moveTop() {
             if(this.d_selection) {
-                let value = [...this.value];
+                let value = [...this.modelValue];
 
                 for (let i = 0; i < this.d_selection.length; i++) {
                     let selectedItem = this.d_selection[i];
@@ -118,7 +118,7 @@ export default {
                 }
 
                 this.reorderDirection = 'top';
-                this.$emit('input', value);
+                this.$emit('update:modelValue', value);
                 this.$emit('reorder', {
                     originalEvent: event,
                     value: value,
@@ -128,7 +128,7 @@ export default {
         },
         moveDown() {
             if(this.d_selection) {
-                let value = [...this.value];
+                let value = [...this.modelValue];
 
                 for (let i = this.d_selection.length - 1; i >= 0; i--) {
                     let selectedItem = this.d_selection[i];
@@ -146,7 +146,7 @@ export default {
                 }
 
                 this.reorderDirection = 'down';
-                this.$emit('input', value);
+                this.$emit('update:modelValue', value);
                 this.$emit('reorder', {
                     originalEvent: event,
                     value: value,
@@ -156,7 +156,7 @@ export default {
         },
         moveBottom() {
             if (this.d_selection) {
-                let value = [...this.value];
+                let value = [...this.modelValue];
 
                 for (let i = this.d_selection.length - 1; i >= 0; i--) {
                     let selectedItem = this.d_selection[i];
@@ -172,7 +172,7 @@ export default {
                 }
 
                 this.reorderDirection = 'bottom';
-                this.$emit('input', value);
+                this.$emit('update:modelValue', value);
                 this.$emit('reorder', {
                     originalEvent: event,
                     value: value,
@@ -194,7 +194,7 @@ export default {
                 }
                 else {
                     this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
+                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
                 }
             }
             else {
@@ -203,7 +203,7 @@ export default {
                 }
                 else {
                     this.d_selection = this.d_selection ? [...this.d_selection] : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
+                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
                 }
             }
 
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index 7a1b86f7f..e6c14e5d6 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -32,15 +32,15 @@ import OrderList from 'primevue/orderlist';
 </CodeHighlight>
 
                 <h5>Selection</h5>
-                <p>In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the sync operator so that
+                <p>In case you'd need to access the selected items in the list, define a binding to the <i>selection</i> property with the v-model directive so that
                 it gets updated when the user makes a selection. Since it is two-way binding enabled, your changes to the selection will be reflected as well.  Note that
                 this is optional and only necessary when you need to access the selection.</p>
 
-                <p>Use the sync operator to enable two-way binding.</p>
+                <p>Use the v-model directive to enable two-way binding.</p>
 
 <CodeHighlight>
 <template v-pre>
-&lt;OrderList v-model="cars" dataKey="vin" :selection.sync="selection"&gt;
+&lt;OrderList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
     &lt;template #header&gt;
         List of Cars
     &lt;/template&gt;
@@ -74,7 +74,7 @@ import OrderList from 'primevue/orderlist';
 						</thead>
 						<tbody>
                             <tr>
-                                <td>value</td>
+                                <td>modelValue</td>
                                 <td>array</td>
                                 <td>null</td>
                                 <td>Value of the component.</td>