diff --git a/.gitignore b/.gitignore index 2930af1..10094a4 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ bower_components/ .vscode/ +yarn.lock diff --git a/dist/vue-mover.css b/dist/vue-mover.css index ffac528..8e927e0 100644 --- a/dist/vue-mover.css +++ b/dist/vue-mover.css @@ -50,4 +50,10 @@ color: #F0F0F0; font-weight: 600; opacity: 0.80; +} +.no-left-right { + cursor: ns-resize; +} +.mover-selected.no-left-right { + background-color: LightSteelBlue; } \ No newline at end of file diff --git a/dist/vue-mover.js b/dist/vue-mover.js index e13ec64..1a7596d 100644 --- a/dist/vue-mover.js +++ b/dist/vue-mover.js @@ -72,8 +72,8 @@ ------------------- by Rick Strahl, West Wind Technologies - Version 0.3.2 - February 9th, 2018 + Version 0.3.3 + January 14th, 2019 depends on: ----------- @@ -108,19 +108,22 @@ { value: "vitem1", displayValue: "vItem 1", - isSelected: false + isSelected: false, + isLeftRightMoveable: true }, { value: "vitem2", displayValue: "vItem 2", - isSelected: true + isSelected: true, + isLeftRightMoveable: false }, ], selectedItems: [ { value: "xitem3", displayValue: "xItem 3", - isSelected: false + isSelected: false, + isLeftRightMoveable: true } ] } @@ -149,9 +152,9 @@ var vue = Vue.component("mover", { type: String, default: "top" }, - // Array of objects to bind to left list. { value: "xxx", displayValue: "show", isSelected: false} + // Array of objects to bind to left list. { value: "xxx", displayValue: "show", isSelected: false, isLeftRightMoveable: true} leftItems: Array, - // Array of objects to bind right list. { value: "xxx", displayValue: "show", isSelected: false} + // Array of objects to bind right list. { value: "xxx", displayValue: "show", isSelected: false, isLeftRightMoveable: true} rightItems: Array, // The ID assigned to the wrapping element of this component targetId: { @@ -180,7 +183,7 @@ var vue = Vue.component("mover", { '
\n' + '
{{item.displayValue}}
' + '\n' + @@ -212,7 +215,7 @@ var vue = Vue.component("mover", { '
\n' + '
{{item.displayValue}}
' + '\n' + @@ -230,6 +233,19 @@ var vue = Vue.component("mover", { // hook up sortable - call from end of data retrieval initialize: function (vue) { + // Assume isLeftRightMoveable is true if not defined - backwards compatability + for (var key in vm.selectedItems) { + if (vm.selectedItems.hasOwnProperty(key) && vm.selectedItems[key].isLeftRightMoveable === undefined) { + vm.selectedItems[key].isLeftRightMoveable = true; + } + } + + for (var key in vm.unselectedItems) { + if (vm.unselectedItems.hasOwnProperty(key) && vm.unselectedItems[key].isLeftRightMoveable === undefined) { + vm.unselectedItems[key].isLeftRightMoveable = true; + } + } + var options = { group: "_mvgp_" + new Date().getTime(), ghostClass: "mover-ghost", @@ -258,6 +274,10 @@ var vue = Vue.component("mover", { items.forEach(function (itm) { itm.isSelected = false; }); + + if (!item.isLeftRightMoveable) + return; + item.isSelected = true; vm.selectedItem = item; vm.selectedList = items; @@ -272,6 +292,9 @@ var vue = Vue.component("mover", { if (!item) return; + if (!item.isLeftRightMoveable) + return; + // remove item and select next item var selectNext = false; var idx = vm.unselectedItems.findIndex(function (itm) { @@ -310,6 +333,9 @@ var vue = Vue.component("mover", { if (!item) return; + if (!item.isLeftRightMoveable) + return; + // remove item var selectNext = false; @@ -343,6 +369,8 @@ var vue = Vue.component("mover", { moveAllRight: function () { for (var i = vm.unselectedItems.length - 1; i >= 0; i--) { var item = vm.unselectedItems[i]; + if (!item.isLeftRightMoveable) + continue; vm.unselectedItems.splice(i, 1); vm.selectedItems.push(item); } @@ -350,6 +378,8 @@ var vue = Vue.component("mover", { moveAllLeft: function () { for (var i = vm.selectedItems.length - 1; i >= 0; i--) { var item = vm.selectedItems[i]; + if (!item.isLeftRightMoveable) + continue; vm.selectedItems.splice(i, 1); vm.unselectedItems.push(item); } diff --git a/dist/vue-mover.min.js b/dist/vue-mover.min.js index aae9d4b..459b34a 100644 --- a/dist/vue-mover.min.js +++ b/dist/vue-mover.min.js @@ -1 +1 @@ -!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}},methods:{raiseItemMoved:function(e,t,n){this.lastMovedItem={item:e,targetList:t,listType:n},this.$emit("item-moved",this.lastMovedItem)}},template:'
\n
\n
{{titleLeft}}
\n
\n
{{item.displayValue}}
\n
\n
\n\n
\n \n \n \n \n\n
\n\n
\n
{{titleRight}}
\n
\n
{{item.displayValue}}
\n
\n
\n
\n',data:function(){var e={selectedSortable:null,selectedItem:{},selectedList:null,selectedItems:this.rightItems,unselectedItems:this.leftItems,lastMovedItem:null,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),t.raiseItemMoved(n,e.selectedItems,"right")},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),t.raiseItemMoved(n,e.unselectedItems,"left")},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-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>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var s=arguments[1],i=0;i\n
\n
{{titleLeft}}
\n
\n
{{item.displayValue}}
\n
\n
\n\n
\n \n \n \n \n\n
\n\n
\n
{{titleRight}}
\n
\n
{{item.displayValue}}
\n
\n
\n
\n',data:function(){var e={selectedSortable:null,selectedItem:{},selectedList:null,selectedItems:this.rightItems,unselectedItems:this.leftItems,lastMovedItem:null,initialize:function(t){for(var s in e.selectedItems)e.selectedItems.hasOwnProperty(s)&&void 0===e.selectedItems[s].isLeftRightMoveable&&(e.selectedItems[s].isLeftRightMoveable=!0);for(var s in e.unselectedItems)e.unselectedItems.hasOwnProperty(s)&&void 0===e.unselectedItems[s].isLeftRightMoveable&&(e.unselectedItems[s].isLeftRightMoveable=!0);var n={group:"_mvgp_"+(new Date).getTime(),ghostClass:"mover-ghost",chosenClass:"mover-selected",onAdd:e.onListDrop,onUpdate:e.onSorted},i=t.targetId,l=document.getElementById(i+"LeftItems");e.unselectedSortable=Sortable.create(l,n);var o=document.getElementById(i+"RightItems");e.selectedSortable=Sortable.create(o,n),t.normalizeLists&&e.normalizeListValues()},selectItem:function(t,s){(t||(s.length>0&&(t=s[0]),t))&&(s.forEach(function(e){e.isSelected=!1}),t.isLeftRightMoveable&&(t.isSelected=!0,e.selectedItem=t,e.selectedList=s))},moveRight:function(s,n){if(!s)s=e.unselectedItems.find(function(e){return e.isSelected});if(s&&s.isLeftRightMoveable){var i=e.unselectedItems.findIndex(function(e){return e.value==s.value});if(e.unselectedItems.splice(i,1),e.unselectedItems.length>0&&e.selectItem(e.unselectedItems[i],e.unselectedItems),"number"==typeof n)e.selectedItems.splice(n,0,s);else if("top"==t.movedItemLocation)e.selectedItems.unshift(s);else{e.selectedItems.push(s);var l=this.$el.querySelector(".mover-right>.mover-panel");setTimeout(function(){l.scrollTop=l.scrollHeight})}setTimeout(function(){e.selectItem(s,e.selectedItems),t.raiseItemMoved(s,e.selectedItems,"right")},10)}},moveLeft:function(s,n){if((s=e.selectedItems.find(function(e){return e.isSelected}))&&s.isLeftRightMoveable){var i=e.selectedItems.findIndex(function(e){return e.value==s.value});if(e.selectedItems.splice(i,1),e.selectedItems.length>0&&e.selectItem(e.selectedItems[i],e.selectedItems),"number"==typeof n)e.unselectedItems.splice(n,0,s);else if("top"==t.movedItemLocation)e.unselectedItems.unshift(s);else{e.unselectedItems.push(s);var l=this.$el.querySelector(".mover-left>.mover-panel");setTimeout(function(){l.scrollTop=l.scrollHeight})}setTimeout(function(){e.selectItem(s,e.unselectedItems),t.raiseItemMoved(s,e.unselectedItems,"left")},10)}},moveAllRight:function(){for(var t=e.unselectedItems.length-1;t>=0;t--){var s=e.unselectedItems[t];s.isLeftRightMoveable&&(e.unselectedItems.splice(t,1),e.selectedItems.push(s))}},moveAllLeft:function(){for(var t=e.selectedItems.length-1;t>=0;t--){var s=e.selectedItems[t];s.isLeftRightMoveable&&(e.selectedItems.splice(t,1),e.unselectedItems.push(s))}},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 s,n=t.item.dataset.id,i=t.item.dataset.side;"left"==i?(s=e.unselectedItems,e.unselectedItems=[]):(s=e.selectedItems,e.selectedItems=[]);var l=s.find(function(e){return e.value==n});l&&setTimeout(function(){s.splice(t.oldIndex,1),s.splice(t.newIndex,0,l),"left"==i?(e.unselectedItems=s,e.selectItem(l,e.unselectedItems)):(e.selectedItems=s,e.selectItem(l,e.selectedItems))})},onListDrop:function(t){var s=t.item.dataset.id,n=t.item.dataset.side,i=t.newIndex;if("left"==n){var l=e.unselectedItems.find(function(e){return e.value==s});e.moveRight(l,i),l.isSelected=!0;var o=e.unselectedItems;e.unselectedItems=[],setTimeout(function(){e.unselectedItems=o})}else{(l=e.selectedItems.find(function(e){return e.value==s})).isSelected=!0,e.moveLeft(l,i);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-1&&e.unselectedItems.splice(n,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),s=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var n=arguments[1],i=0;i>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var n=arguments[1],i=0;i\n' + '
{{item.displayValue}}
' + '\n' + @@ -143,7 +146,7 @@ var vue = Vue.component("mover", { '
\n' + '
{{item.displayValue}}
' + '\n' + @@ -161,6 +164,19 @@ var vue = Vue.component("mover", { // hook up sortable - call from end of data retrieval initialize: function (vue) { + // Assume isLeftRightMoveable is true if not defined - backwards compatability + for (var key in vm.selectedItems) { + if (vm.selectedItems.hasOwnProperty(key) && vm.selectedItems[key].isLeftRightMoveable === undefined) { + vm.selectedItems[key].isLeftRightMoveable = true; + } + } + + for (var key in vm.unselectedItems) { + if (vm.unselectedItems.hasOwnProperty(key) && vm.unselectedItems[key].isLeftRightMoveable === undefined) { + vm.unselectedItems[key].isLeftRightMoveable = true; + } + } + var options = { group: "_mvgp_" + new Date().getTime(), ghostClass: "mover-ghost", @@ -189,6 +205,10 @@ var vue = Vue.component("mover", { items.forEach(function (itm) { itm.isSelected = false; }); + + if (!item.isLeftRightMoveable) + return; + item.isSelected = true; vm.selectedItem = item; vm.selectedList = items; @@ -203,6 +223,9 @@ var vue = Vue.component("mover", { if (!item) return; + if (!item.isLeftRightMoveable) + return; + // remove item and select next item var selectNext = false; var idx = vm.unselectedItems.findIndex(function (itm) { @@ -241,6 +264,9 @@ var vue = Vue.component("mover", { if (!item) return; + if (!item.isLeftRightMoveable) + return; + // remove item var selectNext = false; @@ -274,6 +300,8 @@ var vue = Vue.component("mover", { moveAllRight: function () { for (var i = vm.unselectedItems.length - 1; i >= 0; i--) { var item = vm.unselectedItems[i]; + if (!item.isLeftRightMoveable) + continue; vm.unselectedItems.splice(i, 1); vm.selectedItems.push(item); } @@ -281,6 +309,8 @@ var vue = Vue.component("mover", { moveAllLeft: function () { for (var i = vm.selectedItems.length - 1; i >= 0; i--) { var item = vm.selectedItems[i]; + if (!item.isLeftRightMoveable) + continue; vm.selectedItems.splice(i, 1); vm.unselectedItems.push(item); }