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

Migrated PickList to V3

pull/496/head
Cagatay Civici 2020-09-23 14:01:35 +03:00
parent e337897771
commit adb6978198
4 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/orderlist/OrderList.d.ts vendored
View File

@ -1,7 +1,7 @@
import Vue, {VNode} from 'vue'; import Vue, {VNode} from 'vue';
export declare class OrderList extends Vue { export declare class OrderList extends Vue {
value?: any[]; modelValue?: any[];
dataKey?: string; dataKey?: string;
selection?: any[]; selection?: any[];
metaKeySelection?: boolean; metaKeySelection?: boolean;

2
src/components/picklist/PickList.d.ts vendored
View File

@ -1,7 +1,7 @@
import Vue, {VNode} from 'vue'; import Vue, {VNode} from 'vue';
export declare class PickList extends Vue { export declare class PickList extends Vue {
value?: any[][]; modelValue?: any[][];
selection?: any[][]; selection?: any[][];
dataKey?: string; dataKey?: string;
metaKeySelection?: boolean; metaKeySelection?: boolean;

66
src/components/picklist/PickList.vue
View File

@ -55,7 +55,7 @@ import Ripple from '../ripple/Ripple';
export default { export default {
props: { props: {
value: { modelValue: {
type: Array, type: Array,
default: () => [[],[]] default: () => [[],[]]
}, },
@ -104,7 +104,7 @@ export default {
}, },
moveUp(event, listIndex) { moveUp(event, listIndex) {
if (this.d_selection && this.d_selection[listIndex]) { if (this.d_selection && this.d_selection[listIndex]) {
let valueList = [...this.value[listIndex]]; let valueList = [...this.modelValue[listIndex]];
let selectionList = this.d_selection[listIndex]; let selectionList = this.d_selection[listIndex];
for (let i = 0; i < selectionList.length; i++) { for (let i = 0; i < selectionList.length; i++) {
@ -122,11 +122,11 @@ export default {
} }
} }
let value = [...this.value]; let value = [...this.modelValue];
value[listIndex] = valueList; value[listIndex] = valueList;
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,
@ -137,7 +137,7 @@ export default {
}, },
moveTop(event, listIndex) { moveTop(event, listIndex) {
if(this.d_selection) { if(this.d_selection) {
let valueList = [...this.value[listIndex]]; let valueList = [...this.modelValue[listIndex]];
let selectionList = this.d_selection[listIndex]; let selectionList = this.d_selection[listIndex];
for (let i = 0; i < selectionList.length; i++) { for (let i = 0; i < selectionList.length; i++) {
@ -153,11 +153,11 @@ export default {
} }
} }
let value = [...this.value]; let value = [...this.modelValue];
value[listIndex] = valueList; value[listIndex] = valueList;
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,
@ -167,7 +167,7 @@ export default {
}, },
moveDown(event, listIndex) { moveDown(event, listIndex) {
if(this.d_selection) { if(this.d_selection) {
let valueList = [...this.value[listIndex]]; let valueList = [...this.modelValue[listIndex]];
let selectionList = this.d_selection[listIndex]; let selectionList = this.d_selection[listIndex];
for (let i = selectionList.length - 1; i >= 0; i--) { for (let i = selectionList.length - 1; i >= 0; i--) {
@ -185,11 +185,11 @@ export default {
} }
} }
let value = [...this.value]; let value = [...this.modelValue];
value[listIndex] = valueList; value[listIndex] = valueList;
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,
@ -199,7 +199,7 @@ export default {
}, },
moveBottom(event, listIndex) { moveBottom(event, listIndex) {
if (this.d_selection) { if (this.d_selection) {
let valueList = [...this.value[listIndex]]; let valueList = [...this.modelValue[listIndex]];
let selectionList = this.d_selection[listIndex]; let selectionList = this.d_selection[listIndex];
for (let i = selectionList.length - 1; i >= 0; i--) { for (let i = selectionList.length - 1; i >= 0; i--) {
@ -215,11 +215,11 @@ export default {
} }
} }
let value = [...this.value]; let value = [...this.modelValue];
value[listIndex] = valueList; value[listIndex] = valueList;
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,
@ -229,8 +229,8 @@ export default {
}, },
moveToTarget(event) { moveToTarget(event) {
let selection = this.d_selection && this.d_selection[0] ? this.d_selection[0] : null; let selection = this.d_selection && this.d_selection[0] ? this.d_selection[0] : null;
let sourceList = [...this.value[0]]; let sourceList = [...this.modelValue[0]];
let targetList = [...this.value[1]]; let targetList = [...this.modelValue[1]];
if (selection) { if (selection) {
for (let i = 0; i < selection.length; i++) { for (let i = 0; i < selection.length; i++) {
@ -241,10 +241,10 @@ export default {
} }
} }
let value = [...this.value]; let value = [...this.modelValue];
value[0] = sourceList; value[0] = sourceList;
value[1] = targetList; value[1] = targetList;
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('move-to-target', { this.$emit('move-to-target', {
originalEvent: event, originalEvent: event,
@ -260,9 +260,9 @@ export default {
} }
}, },
moveAllToTarget(event) { moveAllToTarget(event) {
if (this.value[0]) { if (this.modelValue[0]) {
let sourceList = [...this.value[0]]; let sourceList = [...this.modelValue[0]];
let targetList = [...this.value[1]]; let targetList = [...this.modelValue[1]];
this.$emit('move-all-to-target', { this.$emit('move-all-to-target', {
originalEvent: event, originalEvent: event,
@ -272,10 +272,10 @@ export default {
targetList = [...targetList, ...sourceList]; targetList = [...targetList, ...sourceList];
sourceList = []; sourceList = [];
let value = [...this.value]; let value = [...this.modelValue];
value[0] = sourceList; value[0] = sourceList;
value[1] = targetList; value[1] = targetList;
this.$emit('input', value); this.$emit('update:modelValue', value);
this.d_selection[0] = []; this.d_selection[0] = [];
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -287,8 +287,8 @@ export default {
}, },
moveToSource(event) { moveToSource(event) {
let selection = this.d_selection && this.d_selection[1] ? this.d_selection[1] : null; let selection = this.d_selection && this.d_selection[1] ? this.d_selection[1] : null;
let sourceList = [...this.value[0]]; let sourceList = [...this.modelValue[0]];
let targetList = [...this.value[1]]; let targetList = [...this.modelValue[1]];
if (selection) { if (selection) {
for (let i = 0; i < selection.length; i++) { for (let i = 0; i < selection.length; i++) {
@ -299,10 +299,10 @@ export default {
} }
} }
let value = [...this.value]; let value = [...this.modelValue];
value[0] = sourceList; value[0] = sourceList;
value[1] = targetList; value[1] = targetList;
this.$emit('input', value); this.$emit('update:modelValue', value);
this.$emit('move-to-source', { this.$emit('move-to-source', {
originalEvent: event, originalEvent: event,
@ -318,9 +318,9 @@ export default {
} }
}, },
moveAllToSource(event) { moveAllToSource(event) {
if (this.value[1]) { if (this.modelValue[1]) {
let sourceList = [...this.value[0]]; let sourceList = [...this.modelValue[0]];
let targetList = [...this.value[1]]; let targetList = [...this.modelValue[1]];
this.$emit('move-all-to-source', { this.$emit('move-all-to-source', {
originalEvent: event, originalEvent: event,
@ -330,10 +330,10 @@ export default {
sourceList = [...sourceList, ...targetList]; sourceList = [...sourceList, ...targetList];
targetList = []; targetList = [];
let value = [...this.value]; let value = [...this.modelValue];
value[0] = sourceList; value[0] = sourceList;
value[1] = targetList; value[1] = targetList;
this.$emit('input', value); this.$emit('update:modelValue', value);
this.d_selection[1] = []; this.d_selection[1] = [];
this.$emit('update:selection', this.d_selection); this.$emit('update:selection', this.d_selection);
@ -464,10 +464,10 @@ export default {
}, },
computed: { computed: {
sourceList() { sourceList() {
return this.value && this.value[0] ? this.value[0] : null; return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
}, },
targetList() { targetList() {
return this.value && this.value[1] ? this.value[1] : null; return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
} }
}, },
components: { components: {

6
src/views/picklist/PickListDoc.vue
View File

@ -51,13 +51,13 @@ import PickList from 'primevue/picklist';
</CodeHighlight> </CodeHighlight>
<h5>Selection</h5> <h5>Selection</h5>
<p>In case you 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 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>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;PickList v-model="cars" dataKey="vin" :selection.sync="selection"&gt; &lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
@ -88,7 +88,7 @@ import PickList from 'primevue/picklist';
</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 as a multidimensional array.</td> <td>Value of the component as a multidimensional array.</td>