vue-mover/dist/vue-mover.min.js

A simple list picker vue-component, with drag and drop and sortable items.

!function(e){function t(s){if(n[s])return n[s].exports;var i=n[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,s){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:s})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t){if(!Sortable)throw new Error("[vue-mover] cannot locate `Sortablejs` dependency.");var n=Vue.component("mover",{vue:n,props:{titleLeft:{type:String,default:"Available"},titleRight:{type:String,default:"Selected"},movedItemLocation:{type:String,default:"top"},leftItems:Array,rightItems:Array,targetId:{type:String,default:"Mover"},normalizeLists:{type:Boolean,default:!0},fontAwesome:{type:Boolean,default:!0}},template:'<div :id="targetId" class="mover-container">\n    <div id="MoverLeft" class="mover-panel-box mover-left">\n        <div class="mover-header">{{titleLeft}}</div>\n        <div :id="targetId + \'LeftItems\'" class="mover-panel ">\n           <div class="mover-item"\n                v-for="item in unselectedItems"\n                :class="{\'mover-selected\': item.isSelected }"\n                v-on:click="selectItem(item, unselectedItems)"\n                :data-id="item.value" data-side="left"\n                >{{item.displayValue}}</div>\n         </div>\n    </div>\n\n    <div class="mover-controls" >\n        <button type="button" v-on:click="moveAllRight()">\n                <i v-if="fontAwesome" class="fa fa-forward fa-1.5x" aria-hidden="true"></i>\n                <b v-if="!fontAwesome" aria-hidden="true">>></b>\n        </button>\n        <button type="button" v-on:click="moveRight()" style="margin-bottom: 30px;" >\n            <i v-if="fontAwesome" class="fa fa-caret-right fa-2x" aria-hidden="true"></i>\n            <b v-if="!fontAwesome" aria-hidden="true">></b>\n        </button>\n        <button type="button" v-on:click="moveLeft()">\n            <i v-if="fontAwesome" class="fa fa-caret-left fa-2x" aria-hidden="true"></i>\n            <b v-if="!fontAwesome" aria-hidden="true"><</b>\n        </button>\n        <button type="button" v-on:click="moveAllLeft()">\n            <i v-if="fontAwesome" class="fa fa-backward" aria-hidden="true"></i>\n            <b v-if="!fontAwesome" aria-hidden="true"><<</b>\n        </button>\n\n    </div>\n\n    <div id="MoverRight" class="mover-panel-box mover-right">\n        <div class="mover-header">{{titleRight}}</div>\n        <div :id="targetId + \'RightItems\'" class="mover-panel">\n           <div class="mover-item"\n                v-for="item in selectedItems"\n                :class="{\'mover-selected\': item.isSelected }"\n                v-on:click="selectItem(item, selectedItems)"\n                :data-id="item.value" data-side="right"\n                >{{item.displayValue}}</div>\n         </div>\n    </div>\n</div>\n',data:function(){var e={selectedSortable:null,selectedItem:{},selectedList:null,selectedItems:this.rightItems,unselectedItems:this.leftItems,initialize:function(t){var n={group:"_mvgp_"+(new Date).getTime(),ghostClass:"mover-ghost",chosenClass:"mover-selected",onAdd:e.onListDrop,onUpdate:e.onSorted},s=t.targetId,i=document.getElementById(s+"LeftItems");e.unselectedSortable=Sortable.create(i,n);var l=document.getElementById(s+"RightItems");e.selectedSortable=Sortable.create(l,n),t.normalizeLists&&e.normalizeListValues()},selectItem:function(t,n){(t||(n.length>0&&(t=n[0]),t))&&(n.forEach(function(e){e.isSelected=!1}),t.isSelected=!0,e.selectedItem=t,e.selectedList=n)},moveRight:function(n,s){if(!n)var n=e.unselectedItems.find(function(e){return e.isSelected});if(n){var i=e.unselectedItems.findIndex(function(e){return e.value==n.value});if(e.unselectedItems.splice(i,1),e.unselectedItems.length>0&&e.selectItem(e.unselectedItems[i],e.unselectedItems),"number"==typeof s)e.selectedItems.splice(s,0,n);else if("top"==t.movedItemLocation)e.selectedItems.unshift(n);else{e.selectedItems.push(n);var l=this.$el.querySelector(".mover-right>.mover-panel");setTimeout(function(){l.scrollTop=l.scrollHeight})}setTimeout(function(){e.selectItem(n,e.selectedItems)},10)}},moveLeft:function(n,s){if(n=e.selectedItems.find(function(e){return e.isSelected})){var i=e.selectedItems.findIndex(function(e){return e.value==n.value});if(e.selectedItems.splice(i,1),e.selectedItems.length>0&&e.selectItem(e.selectedItems[i],e.selectedItems),"number"==typeof s)e.unselectedItems.splice(s,0,n);else if("top"==t.movedItemLocation)e.unselectedItems.unshift(n);else{e.unselectedItems.push(n);var l=this.$el.querySelector(".mover-left>.mover-panel");setTimeout(function(){l.scrollTop=l.scrollHeight})}setTimeout(function(){e.selectItem(n,e.unselectedItems)},10)}},moveAllRight:function(){for(var t=e.unselectedItems.length-1;t>=0;t--){var n=e.unselectedItems[t];e.unselectedItems.splice(t,1),e.selectedItems.push(n)}},moveAllLeft:function(){for(var t=e.selectedItems.length-1;t>=0;t--){var n=e.selectedItems[t];e.selectedItems.splice(t,1),e.unselectedItems.push(n)}},refreshListDisplay:function(){setTimeout(function(){var t=e.selectedItems;e.selectedItems=[],e.selectedItems=t,t=e.unselectedItems,e.unselectedItems=[],e.unselectedItems=t},10)},onSorted:function(t){var n,s=t.item.dataset.id,i=t.item.dataset.side;"left"==i?(n=e.unselectedItems,e.unselectedItems=[]):(n=e.selectedItems,e.selectedItems=[]);var l=n.find(function(e){return e.value==s});l&&setTimeout(function(){n.splice(t.oldIndex,1),n.splice(t.newIndex,0,l),"left"==i?(e.unselectedItems=n,e.selectItem(l,e.unselectedItems)):(e.selectedItems=n,e.selectItem(l,e.selectedItems))})},onListDrop:function(t){var n=t.item.dataset.id,s=t.item.dataset.side,i=t.newIndex;if("left"==s){var l=e.unselectedItems.find(function(e){return e.value==n});e.moveRight(l,i),l.isSelected=!0;o=e.unselectedItems;e.unselectedItems=[],setTimeout(function(){e.unselectedItems=o})}else{(l=e.selectedItems.find(function(e){return e.value==n})).isSelected=!0,e.moveLeft(l,i);var o=e.selectedItems;e.selectedItems=[],setTimeout(function(){e.selectedItems=o})}},normalizeListValues:function(){if(e.selectedItems&&0!=e.selectedItems.length&&e.unselectedItems&&0!=e.unselectedItems.length)for(var t=0;t<e.selectedItems.length;t++){var n=e.selectedItems[t],s=e.unselectedItems.findIndex(function(e){return e.value==n.value});s>-1&&e.unselectedItems.splice(s,1)}}},t=this;return setTimeout(function(){e.initialize(t)}),e}});Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var s=arguments[1],i=0;i<n;){var l=t[i];if(e.call(s,l,i,t))return l;i++}}}),Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var s=arguments[1],i=0;i<n;){var l=t[i];if(e.call(s,l,i,t))return i;i++}return-1}})}]);