primevue 3.16.2 → 3.17.0

package/picklist/PickList.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass">
-        <div class="p-picklist-buttons p-picklist-source-controls" v-if="showSourceControls">
+        <div v-if="showSourceControls" class="p-picklist-buttons p-picklist-source-controls">
             <slot name="sourcecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
@@ -9,14 +9,22 @@
             <slot name="sourcecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-            <div class="p-picklist-header" v-if="$slots.sourceheader">
+            <div v-if="$slots.sourceheader" class="p-picklist-header">
                 <slot name="sourceheader"></slot>
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
-                    <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 0)}]" v-ripple
-                        @click="onItemClick($event, item, 0)" @dblclick="onItemDblClick($event, item, 0)" @keydown="onItemKeyDown($event, item, 0)" @touchend="onItemTouchEnd" 
-                        role="option" :aria-selected="isSelected(item, 0)">
+                    <li
+                        v-ripple
+                        tabindex="0"
+                        :class="['p-picklist-item', { 'p-highlight': isSelected(item, 0) }]"
+                        @click="onItemClick($event, item, 0)"
+                        @dblclick="onItemDblClick($event, item, 0)"
+                        @keydown="onItemKeyDown($event, item, 0)"
+                        @touchend="onItemTouchEnd"
+                        role="option"
+                        :aria-selected="isSelected(item, 0)"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
@@ -31,20 +39,28 @@
             <slot name="movecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-            <div class="p-picklist-header" v-if="$slots.targetheader">
+            <div v-if="$slots.targetheader" class="p-picklist-header">
                 <slot name="targetheader"></slot>
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
-                    <li tabindex="0" :class="['p-picklist-item', {'p-highlight': isSelected(item, 1)}]" v-ripple
-                        @click="onItemClick($event, item, 1)" @dblclick="onItemDblClick($event, item, 1)" @keydown="onItemKeyDown($event, item, 1)" @touchend="onItemTouchEnd" 
-                        role="option" :aria-selected="isSelected(item, 1)">
+                    <li
+                        v-ripple
+                        tabindex="0"
+                        :class="['p-picklist-item', { 'p-highlight': isSelected(item, 1) }]"
+                        @click="onItemClick($event, item, 1)"
+                        @dblclick="onItemDblClick($event, item, 1)"
+                        @keydown="onItemKeyDown($event, item, 1)"
+                        @touchend="onItemTouchEnd"
+                        role="option"
+                        :aria-selected="isSelected(item, 1)"
+                    >
                         <slot name="item" :item="item" :index="i"> </slot>
                     </li>
                 </template>
             </transition-group>
         </div>
-        <div class="p-picklist-buttons p-picklist-target-controls" v-if="showTargetControls">
+        <div v-if="showTargetControls" class="p-picklist-buttons p-picklist-target-controls">
             <slot name="targetcontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
@@ -57,7 +73,7 @@
 
 <script>
 import Button from 'primevue/button';
-import {ObjectUtils,UniqueComponentId,DomHandler} from 'primevue/utils';
+import { ObjectUtils, UniqueComponentId, DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -66,11 +82,11 @@ export default {
     props: {
         modelValue: {
             type: Array,
-            default: () => [[],[]]
+            default: () => [[], []]
         },
         selection: {
             type: Array,
-            default: () => [[],[]]
+            default: () => [[], []]
         },
         dataKey: {
             type: String,
@@ -111,6 +127,11 @@ export default {
     data() {
         return {
             d_selection: this.selection
+        };
+    },
+    watch: {
+        selection(newValue) {
+            this.d_selection = newValue;
         }
     },
     updated() {
@@ -128,14 +149,9 @@ export default {
             this.createStyle();
         }
     },
-    watch: {
-        selection(newValue) {
-            this.d_selection = newValue;
-        }
-    },
     methods: {
         getItemKey(item, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
         },
         isSelected(item, listIndex) {
             return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
@@ -152,15 +168,16 @@ export default {
                     if (selectedItemIndex !== 0) {
                         let movedItem = valueList[selectedItemIndex];
                         let temp = valueList[selectedItemIndex - 1];
+
                         valueList[selectedItemIndex - 1] = movedItem;
                         valueList[selectedItemIndex] = temp;
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'up';
@@ -174,7 +191,7 @@ export default {
             }
         },
         moveTop(event, listIndex) {
-            if(this.d_selection) {
+            if (this.d_selection) {
                 let valueList = [...this.modelValue[listIndex]];
                 let selectionList = this.d_selection[listIndex];
 
@@ -184,14 +201,15 @@ export default {
 
                     if (selectedItemIndex !== 0) {
                         let movedItem = valueList.splice(selectedItemIndex, 1)[0];
+
                         valueList.unshift(movedItem);
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'top';
@@ -205,7 +223,7 @@ export default {
             }
         },
         moveDown(event, listIndex) {
-            if(this.d_selection) {
+            if (this.d_selection) {
                 let valueList = [...this.modelValue[listIndex]];
                 let selectionList = this.d_selection[listIndex];
 
@@ -213,18 +231,19 @@ export default {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
 
-                    if (selectedItemIndex !== (valueList.length - 1)) {
+                    if (selectedItemIndex !== valueList.length - 1) {
                         let movedItem = valueList[selectedItemIndex];
                         let temp = valueList[selectedItemIndex + 1];
+
                         valueList[selectedItemIndex + 1] = movedItem;
                         valueList[selectedItemIndex] = temp;
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'down';
@@ -246,16 +265,17 @@ export default {
                     let selectedItem = selectionList[i];
                     let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);
 
-                    if (selectedItemIndex !== (valueList.length - 1)) {
+                    if (selectedItemIndex !== valueList.length - 1) {
                         let movedItem = valueList.splice(selectedItemIndex, 1)[0];
+
                         valueList.push(movedItem);
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[listIndex] = valueList;
 
                 this.reorderDirection = 'bottom';
@@ -278,11 +298,12 @@ export default {
                     let selectedItem = selection[i];
 
                     if (ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
-                        targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList),1)[0]);
+                        targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList), 1)[0]);
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -314,6 +335,7 @@ export default {
                 sourceList = [];
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -336,11 +358,12 @@ export default {
                     let selectedItem = selection[i];
 
                     if (ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
-                        sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList),1)[0]);
+                        sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList), 1)[0]);
                     }
                 }
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -372,6 +395,7 @@ export default {
                 targetList = [];
 
                 let value = [...this.modelValue];
+
                 value[0] = sourceList;
                 value[1] = targetList;
                 this.$emit('update:modelValue', value);
@@ -388,46 +412,42 @@ export default {
             this.itemTouched = false;
             const selectionList = this.d_selection[listIndex];
             const selectedIndex = ObjectUtils.findIndexInList(item, selectionList);
-            const selected = (selectedIndex != -1);
+            const selected = selectedIndex != -1;
             const metaSelection = this.itemTouched ? false : this.metaKeySelection;
             let _selection;
 
             if (metaSelection) {
-                let metaKey = (event.metaKey || event.ctrlKey);
+                let metaKey = event.metaKey || event.ctrlKey;
 
                 if (selected && metaKey) {
                     _selection = selectionList.filter((val, index) => index !== selectedIndex);
-                }
-                else {
-                    _selection = (metaKey) ? selectionList ? [...selectionList] : [] : [];
+                } else {
+                    _selection = metaKey ? (selectionList ? [...selectionList] : []) : [];
                     _selection.push(item);
                 }
-            }
-            else {
+            } else {
                 if (selected) {
                     _selection = selectionList.filter((val, index) => index !== selectedIndex);
-                }
-                else {
+                } else {
                     _selection = selectionList ? [...selectionList] : [];
                     _selection.push(item);
                 }
             }
 
             let newSelection = [...this.d_selection];
+
             newSelection[listIndex] = _selection;
             this.d_selection = newSelection;
 
             this.$emit('update:selection', this.d_selection);
             this.$emit('selection-change', {
-                originalEvent:event,
+                originalEvent: event,
                 value: this.d_selection
             });
         },
         onItemDblClick(event, item, listIndex) {
-            if (listIndex === 0)
-                this.moveToTarget(event);
-            else if (listIndex === 1)
-                this.moveToSource(event);
+            if (listIndex === 0) this.moveToTarget(event);
+            else if (listIndex === 1) this.moveToSource(event);
         },
         onItemTouchEnd() {
             this.itemTouched = true;
@@ -435,85 +455,83 @@ export default {
         onItemKeyDown(event, item, listIndex) {
             let listItem = event.currentTarget;
 
-            switch(event.which) {
+            switch (event.which) {
                 //down
                 case 40:
                     var nextItem = this.findNextItem(listItem);
+
                     if (nextItem) {
                         nextItem.focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //up
                 case 38:
                     var prevItem = this.findPrevItem(listItem);
+
                     if (prevItem) {
                         prevItem.focus();
                     }
 
                     event.preventDefault();
-                break;
+                    break;
 
                 //enter
                 case 13:
                     this.onItemClick(event, item, listIndex);
                     event.preventDefault();
-                break;
+                    break;
 
                 default:
-                break;
+                    break;
             }
         },
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem)
-                return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+            if (nextItem) return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;
+            else return null;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem)
-                return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+            if (prevItem) return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
+            else return null;
         },
         updateListScroll(listElement) {
             const listItems = DomHandler.find(listElement, '.p-picklist-item.p-highlight');
 
             if (listItems && listItems.length) {
-                switch(this.reorderDirection) {
+                switch (this.reorderDirection) {
                     case 'up':
                         DomHandler.scrollInView(listElement, listItems[0]);
-                    break;
+                        break;
 
                     case 'top':
                         listElement.scrollTop = 0;
-                    break;
+                        break;
 
                     case 'down':
                         DomHandler.scrollInView(listElement, listItems[listItems.length - 1]);
-                    break;
+                        break;
 
                     case 'bottom':
                         listElement.scrollTop = listElement.scrollHeight;
-                    break;
+                        break;
 
                     default:
-                    break;
+                        break;
                 }
             }
         },
         createStyle() {
-			if (!this.styleElement) {
+            if (!this.styleElement) {
                 this.$el.setAttribute(this.attributeSelector, '');
-				this.styleElement = document.createElement('style');
-				this.styleElement.type = 'text/css';
-				document.head.appendChild(this.styleElement);
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
 
                 let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
@@ -554,8 +572,8 @@ export default {
 `;
 
                 this.styleElement.innerHTML = innerHTML;
-			}
-		},
+            }
+        },
         destroyStyle() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);
@@ -565,9 +583,12 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-picklist p-component', {
-                'p-picklist-striped': this.stripedRows
-            }];
+            return [
+                'p-picklist p-component',
+                {
+                    'p-picklist-striped': this.stripedRows
+                }
+            ];
         },
         sourceList() {
             return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
@@ -580,12 +601,12 @@ export default {
         }
     },
     components: {
-        'PLButton': Button
+        PLButton: Button
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>
 
 <style>