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

Migrated OrderList to V3

pull/496/head
Cagatay Civici 2020-09-23 13:56:38 +03:00
parent 53d281fe36
commit 6ca5d9a6ad
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}
}

8
src/views/orderlist/OrderListDoc.vue
View File

@ -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>