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> <slot name="header"></slot>
</div> </div>
<transition-group ref="list" name="p-orderlist-flip" tag="ul" class="p-orderlist-list" :style="listStyle" role="listbox" aria-multiselectable="multiple"> <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 <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" @click="onItemClick($event, item, i)" @keydown="onItemKeyDown($event, item, i)" @touchend="onItemTouchEnd"
role="option" :aria-selected="isSelected(item)"> role="option" :aria-selected="isSelected(item)">
@ -31,7 +31,7 @@ import Ripple from '../ripple/Ripple';
export default { export default {
props: { props: {
value: { modelValue: {
type: Array, type: Array,
default: null default: null
}, },
@ -74,7 +74,7 @@ export default {
}, },
moveUp() { moveUp() {
if (this.d_selection) { if (this.d_selection) {
let value = [...this.value]; let value = [...this.modelValue];
for (let i = 0; i < this.d_selection.length; i++) { for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
@ -92,7 +92,7 @@ export default {
} }
this.reorderDirection = 'up'; this.reorderDirection = 'up';
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('reorder', { this.$emit('reorder', {
originalEvent: event, originalEvent: event,
value: value, value: value,
@ -102,7 +102,7 @@ export default {
}, },
moveTop() { moveTop() {
if(this.d_selection) { if(this.d_selection) {
let value = [...this.value]; let value = [...this.modelValue];
for (let i = 0; i < this.d_selection.length; i++) { for (let i = 0; i < this.d_selection.length; i++) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
@ -118,7 +118,7 @@ export default {
} }
this.reorderDirection = 'top'; this.reorderDirection = 'top';
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('reorder', { this.$emit('reorder', {
originalEvent: event, originalEvent: event,
value: value, value: value,
@ -128,7 +128,7 @@ export default {
}, },
moveDown() { moveDown() {
if(this.d_selection) { if(this.d_selection) {
let value = [...this.value]; let value = [...this.modelValue];
for (let i = this.d_selection.length - 1; i >= 0; i--) { for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
@ -146,7 +146,7 @@ export default {
} }
this.reorderDirection = 'down'; this.reorderDirection = 'down';
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('reorder', { this.$emit('reorder', {
originalEvent: event, originalEvent: event,
value: value, value: value,
@ -156,7 +156,7 @@ export default {
}, },
moveBottom() { moveBottom() {
if (this.d_selection) { if (this.d_selection) {
let value = [...this.value]; let value = [...this.modelValue];
for (let i = this.d_selection.length - 1; i >= 0; i--) { for (let i = this.d_selection.length - 1; i >= 0; i--) {
let selectedItem = this.d_selection[i]; let selectedItem = this.d_selection[i];
@ -172,7 +172,7 @@ export default {
} }
this.reorderDirection = 'bottom'; this.reorderDirection = 'bottom';
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('reorder', { this.$emit('reorder', {
originalEvent: event, originalEvent: event,
value: value, value: value,
@ -194,7 +194,7 @@ export default {
} }
else { else {
this.d_selection = (metaKey) ? this.d_selection ? [...this.d_selection] : [] : []; 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 { else {
@ -203,7 +203,7 @@ export default {
} }
else { else {
this.d_selection = this.d_selection ? [...this.d_selection] : []; 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> </CodeHighlight>
<h5>Selection</h5> <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 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> 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> <CodeHighlight>
<template v-pre> <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; &lt;template #header&gt;
List of Cars List of Cars
&lt;/template&gt; &lt;/template&gt;
@ -74,7 +74,7 @@ import OrderList from 'primevue/orderlist';
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>value</td> <td>modelValue</td>
<td>array</td> <td>array</td>
<td>null</td> <td>null</td>
<td>Value of the component.</td> <td>Value of the component.</td>