From 30fb7638f40e44095da7d5cf2c45a840233636c2 Mon Sep 17 00:00:00 2001 From: Collin Henderson Date: Sat, 30 Mar 2019 14:19:52 -0400 Subject: [PATCH] Deprecates itemSelected method in favour of itemIsSelected --- README.md | 8 +-- __tests__/VueMulticlick.test.js | 4 +- dist/index.js | 97 +++++++++++++++++++++++---------- dist/index.mjs | 97 +++++++++++++++++++++++---------- dist/index.umd.js | 97 +++++++++++++++++++++++---------- dist/index.umd.min.js | 2 +- dist/index.umd.min.js.map | 2 +- example/App.vue | 7 ++- package-lock.json | 28 +++++++--- src/index.js | 14 ++++- 10 files changed, 248 insertions(+), 108 deletions(-) diff --git a/README.md b/README.md index 8ea4db5..1bc1b48 100644 --- a/README.md +++ b/README.md @@ -59,13 +59,13 @@ The easiest way to set item selection states is through the `itemClicked` method ## Retrieving selection states -Of course just setting selection states is often not enough, and you'll want to visually change elements that are currently selected. You can use the `itemSelected` function to check if a given item is currently selected. +Of course just setting selection states is often not enough, and you'll want to visually change elements that are currently selected. You can use the `itemIsSelected` function to check if a given item is currently selected. ```html
- +
    -
  • +
  • {{ item.name }}
@@ -98,7 +98,7 @@ Of course just setting selection states is often not enough, and you'll want to | `appendToSelection` | Pushes an item to the selection list | **item**: Object | null | | `removeFromSelection` | Removes an item from the selection list. | **item**: Object | null | | `getItemIndex` | Returns the index of a given item | **item**: Object | Number | -| `itemSelected` | Returns whether the given item is currently selected or not. | **item**: Object | Boolean | +| `itemIsSelected` | Returns whether the given item is currently selected or not. | **item**: Object | Boolean | | `selectAll` | Pushes all items to the selection list. | N/A | null | | `selectNone` | Removes all items from the selection list. | N/A | null | | `getItemsFromRange` | Retrieves all items between a given range. | **start**: Number
**end**: Number
| Array | diff --git a/__tests__/VueMulticlick.test.js b/__tests__/VueMulticlick.test.js index fe9155a..433c8e9 100644 --- a/__tests__/VueMulticlick.test.js +++ b/__tests__/VueMulticlick.test.js @@ -135,8 +135,8 @@ describe("VueMulticlick", () => { const dupe = sampleItems[4] const notDupe = sampleItems[5] - expect(wrapper.vm.itemSelected(dupe)).toBeTruthy() - expect(wrapper.vm.itemSelected(notDupe)).toBeFalsy() + expect(wrapper.vm.itemIsSelected(dupe)).toBeTruthy() + expect(wrapper.vm.itemIsSelected(notDupe)).toBeFalsy() }) it("can select all items", () => { diff --git a/dist/index.js b/dist/index.js index c6f9063..515c8ce 100644 --- a/dist/index.js +++ b/dist/index.js @@ -47,7 +47,16 @@ var VueMulticlick = { }); }, lastSelectedIndex: function lastSelectedIndex() { - return this.getSelectedItemIndex(this.lastSelected); + if (!this.lastSelected) { + return -1; + } else { + return this.getItemIndex(this.lastSelected); + } + } + }, + watch: { + selectedItems: function selectedItems() { + this.$emit("selected", this.selectedItems); } }, methods: { @@ -55,13 +64,13 @@ var VueMulticlick = { var $event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (($event.metaKey || $event.ctrlKey) && !$event.shiftKey) { - if (this.itemIsDuplicate(item)) { + if (this.itemIsSelected(item)) { this.removeFromSelection(item); } else { this.appendToSelection(item); } } else if ($event.shiftKey) { - this.setSelectedItems(item); + this.setSelectedItemsFromLastSelected(item); } else { this.setSelectedItem(item); } @@ -71,61 +80,91 @@ var VueMulticlick = { setSelectedItem: function setSelectedItem(item) { this.selectedItems = [item]; }, - setSelectedItems: function setSelectedItems(item) { - var itemIndex = this.getSelectedItemIndex(item); + setSelectedItems: function setSelectedItems(items) { + this.selectedItems = items; + }, + setSelectedItemsFromLastSelected: function setSelectedItemsFromLastSelected(item) { + var _this2 = this; + + var itemIndex = this.getItemIndex(item); + var itemsToSelect = []; if (!this.selectedItems.length) { - for (var i = 0; i <= itemIndex; i++) { - this.appendToSelection(this.items[i]); - } + itemsToSelect = this.getItemsFromRange(0, itemIndex); } else { - if (itemIndex >= this.lastSelectedIndex) { - for (var _i = this.lastSelectedIndex; _i <= itemIndex; _i++) { - this.appendToSelection(this.items[_i]); - } - } else { - for (var _i2 = itemIndex; _i2 <= this.lastSelectedIndex; _i2++) { - this.appendToSelection(this.items[_i2]); - } - } + itemsToSelect = this.getItemsFromRange(this.lastSelectedIndex, itemIndex); } + + itemsToSelect.forEach(function (i) { + return _this2.appendToSelection(i); + }); + }, + getItemsFromRange: function getItemsFromRange() { + var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var items = []; + var low = Math.min(start, end); + var high = Math.max(start, end); + + for (var i = low; i <= high; i++) { + items.push(this.items[i]); + } + + return items; }, appendToSelection: function appendToSelection(item) { this.selectedItems = _toConsumableArray(new Set(this.selectedItems.concat([item]))); }, removeFromSelection: function removeFromSelection(item) { - var _this2 = this; + var _this3 = this; this.selectedItems = this.selectedItems.filter(function (i) { - return i[_this2.uid] !== item[_this2.uid]; + return i[_this3.uid] !== item[_this3.uid]; }); }, - getSelectedItemIndex: function getSelectedItemIndex(item) { - var _this3 = this; + getItemIndex: function getItemIndex(item) { + var _this4 = this; return this.items.findIndex(function (i) { - return i[_this3.uid] === item[_this3.uid]; + return i[_this4.uid] === item[_this4.uid]; }); }, - itemIsDuplicate: function itemIsDuplicate(item) { - var _this4 = this; + itemSelected: function itemSelected(item) { + console.warn('The "itemSelected" method is deprecated in favour of "itemIsSelected" and will be removed in a future version.'); + return this.itemIsSelected(item); + }, + itemIsSelected: function itemIsSelected(item) { + var _this5 = this; - return this.selectedItems.map(function (i) { - return i[_this4.uid]; - }).includes(item[this.uid]); + return this.selectedItems.some(function (i) { + return i[_this5.uid] === item[_this5.uid]; + }); }, selectAll: function selectAll() { this.selectedItems = this.items; }, - deselectAll: function deselectAll() { + selectNone: function selectNone() { this.selectedItems = []; } }, render: function render() { return this.$scopedSlots.default({ selectedItems: this.selectedItems, + lastSelectedItem: this.lastSelected, selectedIndexes: this.selectedIndexes, - itemClicked: this.itemClicked + lastSelectedIndex: this.lastSelectedIndex, + itemClicked: this.itemClicked, + setSelectedItem: this.setSelectedItem, + setSelectedItems: this.setSelectedItems, + setSelectedItemsFromLastSelected: this.setSelectedItemsFromLastSelected, + appendToSelection: this.appendToSelection, + removeFromSelection: this.removeFromSelection, + getItemIndex: this.getItemIndex, + getItemsFromRange: this.getItemsFromRange, + itemSelected: this.itemIsSelected, + itemIsSelected: this.itemIsSelected, + selectAll: this.selectAll, + selectNone: this.selectNone }); } }; diff --git a/dist/index.mjs b/dist/index.mjs index 5ca0c5a..7ff935f 100644 --- a/dist/index.mjs +++ b/dist/index.mjs @@ -45,7 +45,16 @@ var VueMulticlick = { }); }, lastSelectedIndex: function lastSelectedIndex() { - return this.getSelectedItemIndex(this.lastSelected); + if (!this.lastSelected) { + return -1; + } else { + return this.getItemIndex(this.lastSelected); + } + } + }, + watch: { + selectedItems: function selectedItems() { + this.$emit("selected", this.selectedItems); } }, methods: { @@ -53,13 +62,13 @@ var VueMulticlick = { var $event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (($event.metaKey || $event.ctrlKey) && !$event.shiftKey) { - if (this.itemIsDuplicate(item)) { + if (this.itemIsSelected(item)) { this.removeFromSelection(item); } else { this.appendToSelection(item); } } else if ($event.shiftKey) { - this.setSelectedItems(item); + this.setSelectedItemsFromLastSelected(item); } else { this.setSelectedItem(item); } @@ -69,61 +78,91 @@ var VueMulticlick = { setSelectedItem: function setSelectedItem(item) { this.selectedItems = [item]; }, - setSelectedItems: function setSelectedItems(item) { - var itemIndex = this.getSelectedItemIndex(item); + setSelectedItems: function setSelectedItems(items) { + this.selectedItems = items; + }, + setSelectedItemsFromLastSelected: function setSelectedItemsFromLastSelected(item) { + var _this2 = this; + + var itemIndex = this.getItemIndex(item); + var itemsToSelect = []; if (!this.selectedItems.length) { - for (var i = 0; i <= itemIndex; i++) { - this.appendToSelection(this.items[i]); - } + itemsToSelect = this.getItemsFromRange(0, itemIndex); } else { - if (itemIndex >= this.lastSelectedIndex) { - for (var _i = this.lastSelectedIndex; _i <= itemIndex; _i++) { - this.appendToSelection(this.items[_i]); - } - } else { - for (var _i2 = itemIndex; _i2 <= this.lastSelectedIndex; _i2++) { - this.appendToSelection(this.items[_i2]); - } - } + itemsToSelect = this.getItemsFromRange(this.lastSelectedIndex, itemIndex); } + + itemsToSelect.forEach(function (i) { + return _this2.appendToSelection(i); + }); + }, + getItemsFromRange: function getItemsFromRange() { + var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var items = []; + var low = Math.min(start, end); + var high = Math.max(start, end); + + for (var i = low; i <= high; i++) { + items.push(this.items[i]); + } + + return items; }, appendToSelection: function appendToSelection(item) { this.selectedItems = _toConsumableArray(new Set(this.selectedItems.concat([item]))); }, removeFromSelection: function removeFromSelection(item) { - var _this2 = this; + var _this3 = this; this.selectedItems = this.selectedItems.filter(function (i) { - return i[_this2.uid] !== item[_this2.uid]; + return i[_this3.uid] !== item[_this3.uid]; }); }, - getSelectedItemIndex: function getSelectedItemIndex(item) { - var _this3 = this; + getItemIndex: function getItemIndex(item) { + var _this4 = this; return this.items.findIndex(function (i) { - return i[_this3.uid] === item[_this3.uid]; + return i[_this4.uid] === item[_this4.uid]; }); }, - itemIsDuplicate: function itemIsDuplicate(item) { - var _this4 = this; + itemSelected: function itemSelected(item) { + console.warn('The "itemSelected" method is deprecated in favour of "itemIsSelected" and will be removed in a future version.'); + return this.itemIsSelected(item); + }, + itemIsSelected: function itemIsSelected(item) { + var _this5 = this; - return this.selectedItems.map(function (i) { - return i[_this4.uid]; - }).includes(item[this.uid]); + return this.selectedItems.some(function (i) { + return i[_this5.uid] === item[_this5.uid]; + }); }, selectAll: function selectAll() { this.selectedItems = this.items; }, - deselectAll: function deselectAll() { + selectNone: function selectNone() { this.selectedItems = []; } }, render: function render() { return this.$scopedSlots.default({ selectedItems: this.selectedItems, + lastSelectedItem: this.lastSelected, selectedIndexes: this.selectedIndexes, - itemClicked: this.itemClicked + lastSelectedIndex: this.lastSelectedIndex, + itemClicked: this.itemClicked, + setSelectedItem: this.setSelectedItem, + setSelectedItems: this.setSelectedItems, + setSelectedItemsFromLastSelected: this.setSelectedItemsFromLastSelected, + appendToSelection: this.appendToSelection, + removeFromSelection: this.removeFromSelection, + getItemIndex: this.getItemIndex, + getItemsFromRange: this.getItemsFromRange, + itemSelected: this.itemIsSelected, + itemIsSelected: this.itemIsSelected, + selectAll: this.selectAll, + selectNone: this.selectNone }); } }; diff --git a/dist/index.umd.js b/dist/index.umd.js index 9d7c37f..413dce7 100644 --- a/dist/index.umd.js +++ b/dist/index.umd.js @@ -51,7 +51,16 @@ }); }, lastSelectedIndex: function lastSelectedIndex() { - return this.getSelectedItemIndex(this.lastSelected); + if (!this.lastSelected) { + return -1; + } else { + return this.getItemIndex(this.lastSelected); + } + } + }, + watch: { + selectedItems: function selectedItems() { + this.$emit("selected", this.selectedItems); } }, methods: { @@ -59,13 +68,13 @@ var $event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; if (($event.metaKey || $event.ctrlKey) && !$event.shiftKey) { - if (this.itemIsDuplicate(item)) { + if (this.itemIsSelected(item)) { this.removeFromSelection(item); } else { this.appendToSelection(item); } } else if ($event.shiftKey) { - this.setSelectedItems(item); + this.setSelectedItemsFromLastSelected(item); } else { this.setSelectedItem(item); } @@ -75,61 +84,91 @@ setSelectedItem: function setSelectedItem(item) { this.selectedItems = [item]; }, - setSelectedItems: function setSelectedItems(item) { - var itemIndex = this.getSelectedItemIndex(item); + setSelectedItems: function setSelectedItems(items) { + this.selectedItems = items; + }, + setSelectedItemsFromLastSelected: function setSelectedItemsFromLastSelected(item) { + var _this2 = this; + + var itemIndex = this.getItemIndex(item); + var itemsToSelect = []; if (!this.selectedItems.length) { - for (var i = 0; i <= itemIndex; i++) { - this.appendToSelection(this.items[i]); - } + itemsToSelect = this.getItemsFromRange(0, itemIndex); } else { - if (itemIndex >= this.lastSelectedIndex) { - for (var _i = this.lastSelectedIndex; _i <= itemIndex; _i++) { - this.appendToSelection(this.items[_i]); - } - } else { - for (var _i2 = itemIndex; _i2 <= this.lastSelectedIndex; _i2++) { - this.appendToSelection(this.items[_i2]); - } - } + itemsToSelect = this.getItemsFromRange(this.lastSelectedIndex, itemIndex); + } + + itemsToSelect.forEach(function (i) { + return _this2.appendToSelection(i); + }); + }, + getItemsFromRange: function getItemsFromRange() { + var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; + var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; + var items = []; + var low = Math.min(start, end); + var high = Math.max(start, end); + + for (var i = low; i <= high; i++) { + items.push(this.items[i]); } + + return items; }, appendToSelection: function appendToSelection(item) { this.selectedItems = _toConsumableArray(new Set(this.selectedItems.concat([item]))); }, removeFromSelection: function removeFromSelection(item) { - var _this2 = this; + var _this3 = this; this.selectedItems = this.selectedItems.filter(function (i) { - return i[_this2.uid] !== item[_this2.uid]; + return i[_this3.uid] !== item[_this3.uid]; }); }, - getSelectedItemIndex: function getSelectedItemIndex(item) { - var _this3 = this; + getItemIndex: function getItemIndex(item) { + var _this4 = this; return this.items.findIndex(function (i) { - return i[_this3.uid] === item[_this3.uid]; + return i[_this4.uid] === item[_this4.uid]; }); }, - itemIsDuplicate: function itemIsDuplicate(item) { - var _this4 = this; + itemSelected: function itemSelected(item) { + console.warn('The "itemSelected" method is deprecated in favour of "itemIsSelected" and will be removed in a future version.'); + return this.itemIsSelected(item); + }, + itemIsSelected: function itemIsSelected(item) { + var _this5 = this; - return this.selectedItems.map(function (i) { - return i[_this4.uid]; - }).includes(item[this.uid]); + return this.selectedItems.some(function (i) { + return i[_this5.uid] === item[_this5.uid]; + }); }, selectAll: function selectAll() { this.selectedItems = this.items; }, - deselectAll: function deselectAll() { + selectNone: function selectNone() { this.selectedItems = []; } }, render: function render() { return this.$scopedSlots.default({ selectedItems: this.selectedItems, + lastSelectedItem: this.lastSelected, selectedIndexes: this.selectedIndexes, - itemClicked: this.itemClicked + lastSelectedIndex: this.lastSelectedIndex, + itemClicked: this.itemClicked, + setSelectedItem: this.setSelectedItem, + setSelectedItems: this.setSelectedItems, + setSelectedItemsFromLastSelected: this.setSelectedItemsFromLastSelected, + appendToSelection: this.appendToSelection, + removeFromSelection: this.removeFromSelection, + getItemIndex: this.getItemIndex, + getItemsFromRange: this.getItemsFromRange, + itemSelected: this.itemIsSelected, + itemIsSelected: this.itemIsSelected, + selectAll: this.selectAll, + selectNone: this.selectNone }); } }; diff --git a/dist/index.umd.min.js b/dist/index.umd.min.js index 8339b0b..8081a8a 100644 --- a/dist/index.umd.min.js +++ b/dist/index.umd.min.js @@ -1,2 +1,2 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VueMulticlick=t()}(this,function(){"use strict";function e(e){return function(e){if(Array.isArray(e)){for(var t=0,i=new Array(e.length);t1&&void 0!==arguments[1]?arguments[1]:{};!t.metaKey&&!t.ctrlKey||t.shiftKey?t.shiftKey?this.setSelectedItems(e):this.setSelectedItem(e):this.itemIsDuplicate(e)?this.removeFromSelection(e):this.appendToSelection(e),this.lastSelected=e},setSelectedItem:function(e){this.selectedItems=[e]},setSelectedItems:function(e){var t=this.getSelectedItemIndex(e);if(this.selectedItems.length)if(t>=this.lastSelectedIndex)for(var i=this.lastSelectedIndex;i<=t;i++)this.appendToSelection(this.items[i]);else for(var n=t;n<=this.lastSelectedIndex;n++)this.appendToSelection(this.items[n]);else for(var s=0;s<=t;s++)this.appendToSelection(this.items[s])},appendToSelection:function(t){this.selectedItems=e(new Set(this.selectedItems.concat([t])))},removeFromSelection:function(e){var t=this;this.selectedItems=this.selectedItems.filter(function(i){return i[t.uid]!==e[t.uid]})},getSelectedItemIndex:function(e){var t=this;return this.items.findIndex(function(i){return i[t.uid]===e[t.uid]})},itemIsDuplicate:function(e){var t=this;return this.selectedItems.map(function(e){return e[t.uid]}).includes(e[this.uid])},selectAll:function(){this.selectedItems=this.items},deselectAll:function(){this.selectedItems=[]}},render:function(){return this.$scopedSlots.default({selectedItems:this.selectedItems,selectedIndexes:this.selectedIndexes,itemClicked:this.itemClicked})}};return"undefined"!=typeof window&&window.Vue&&window.Vue.component(t.name,t),t}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VueMulticlick=t()}(this,function(){"use strict";function e(e){return function(e){if(Array.isArray(e)){for(var t=0,s=new Array(e.length);t1&&void 0!==arguments[1]?arguments[1]:{};!t.metaKey&&!t.ctrlKey||t.shiftKey?t.shiftKey?this.setSelectedItemsFromLastSelected(e):this.setSelectedItem(e):this.itemIsSelected(e)?this.removeFromSelection(e):this.appendToSelection(e),this.lastSelected=e},setSelectedItem:function(e){this.selectedItems=[e]},setSelectedItems:function(e){this.selectedItems=e},setSelectedItemsFromLastSelected:function(e){var t=this,s=this.getItemIndex(e);(this.selectedItems.length?this.getItemsFromRange(this.lastSelectedIndex,s):this.getItemsFromRange(0,s)).forEach(function(e){return t.appendToSelection(e)})},getItemsFromRange:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=[],i=Math.min(e,t),n=Math.max(e,t),c=i;c<=n;c++)s.push(this.items[c]);return s},appendToSelection:function(t){this.selectedItems=e(new Set(this.selectedItems.concat([t])))},removeFromSelection:function(e){var t=this;this.selectedItems=this.selectedItems.filter(function(s){return s[t.uid]!==e[t.uid]})},getItemIndex:function(e){var t=this;return this.items.findIndex(function(s){return s[t.uid]===e[t.uid]})},itemSelected:function(e){return console.warn('The "itemSelected" method is deprecated in favour of "itemIsSelected" and will be removed in a future version.'),this.itemIsSelected(e)},itemIsSelected:function(e){var t=this;return this.selectedItems.some(function(s){return s[t.uid]===e[t.uid]})},selectAll:function(){this.selectedItems=this.items},selectNone:function(){this.selectedItems=[]}},render:function(){return this.$scopedSlots.default({selectedItems:this.selectedItems,lastSelectedItem:this.lastSelected,selectedIndexes:this.selectedIndexes,lastSelectedIndex:this.lastSelectedIndex,itemClicked:this.itemClicked,setSelectedItem:this.setSelectedItem,setSelectedItems:this.setSelectedItems,setSelectedItemsFromLastSelected:this.setSelectedItemsFromLastSelected,appendToSelection:this.appendToSelection,removeFromSelection:this.removeFromSelection,getItemIndex:this.getItemIndex,getItemsFromRange:this.getItemsFromRange,itemSelected:this.itemIsSelected,itemIsSelected:this.itemIsSelected,selectAll:this.selectAll,selectNone:this.selectNone})}};return"undefined"!=typeof window&&window.Vue&&window.Vue.component(t.name,t),t}); //# sourceMappingURL=index.umd.min.js.map diff --git a/dist/index.umd.min.js.map b/dist/index.umd.min.js.map index 48fb557..f12c3af 100644 --- a/dist/index.umd.min.js.map +++ b/dist/index.umd.min.js.map @@ -1 +1 @@ -{"version":3,"file":"index.umd.min.js","sources":["../src/index.js"],"sourcesContent":["const VueMulticlick = {\n name: \"vue-multiclick\",\n props: {\n items: {\n type: Array,\n required: true\n },\n uid: {\n type: String,\n required: true\n }\n },\n data() {\n return {\n selectedItems: [],\n lastSelected: null\n }\n },\n computed: {\n selectedIndexes() {\n return this.selectedItems.map(item => this.items.indexOf(item))\n },\n lastSelectedIndex() {\n return this.getSelectedItemIndex(this.lastSelected)\n }\n },\n methods: {\n itemClicked(item, $event = {}) {\n if (($event.metaKey || $event.ctrlKey) && !$event.shiftKey) {\n if (this.itemIsDuplicate(item)) {\n this.removeFromSelection(item)\n } else {\n this.appendToSelection(item)\n }\n } else if ($event.shiftKey) {\n this.setSelectedItems(item)\n } else {\n this.setSelectedItem(item)\n }\n this.lastSelected = item\n },\n setSelectedItem(item) {\n this.selectedItems = [item]\n },\n setSelectedItems(item) {\n const itemIndex = this.getSelectedItemIndex(item)\n\n if (!this.selectedItems.length) {\n for (let i = 0; i <= itemIndex; i++) {\n this.appendToSelection(this.items[i])\n }\n } else {\n if (itemIndex >= this.lastSelectedIndex) {\n for (let i = this.lastSelectedIndex; i <= itemIndex; i++) {\n this.appendToSelection(this.items[i])\n }\n } else {\n for (let i = itemIndex; i <= this.lastSelectedIndex; i++) {\n this.appendToSelection(this.items[i])\n }\n }\n }\n },\n appendToSelection(item) {\n this.selectedItems = [...new Set(this.selectedItems.concat([item]))]\n },\n removeFromSelection(item) {\n this.selectedItems = this.selectedItems.filter(i => i[this.uid] !== item[this.uid])\n },\n getSelectedItemIndex(item) {\n return this.items.findIndex(i => {\n return i[this.uid] === item[this.uid]\n })\n },\n itemIsDuplicate(item) {\n return this.selectedItems.map(i => i[this.uid]).includes(item[this.uid])\n },\n selectAll() {\n this.selectedItems = this.items\n },\n deselectAll() {\n this.selectedItems = []\n }\n },\n render() {\n return this.$scopedSlots.default({\n selectedItems: this.selectedItems,\n selectedIndexes: this.selectedIndexes,\n itemClicked: this.itemClicked\n })\n }\n}\n\nif (typeof window !== \"undefined\" && window.Vue) {\n window.Vue.component(VueMulticlick.name, VueMulticlick)\n}\n\nexport default VueMulticlick\n"],"names":["VueMulticlick","name","props","items","type","Array","required","uid","String","data","selectedItems","lastSelected","computed","selectedIndexes","this","map","item","_this","indexOf","lastSelectedIndex","getSelectedItemIndex","methods","itemClicked","$event","metaKey","ctrlKey","shiftKey","setSelectedItems","setSelectedItem","itemIsDuplicate","removeFromSelection","appendToSelection","itemIndex","length","i","Set","concat","filter","_this2","findIndex","_this3","_this4","includes","selectAll","deselectAll","render","$scopedSlots","default","window","Vue","component"],"mappings":"whBAAA,IAAMA,EAAgB,CACpBC,KAAM,iBACNC,MAAO,CACLC,MAAO,CACLC,KAAMC,MACNC,UAAU,GAEZC,IAAK,CACHH,KAAMI,OACNF,UAAU,IAGdG,sBACS,CACLC,cAAe,GACfC,aAAc,OAGlBC,SAAU,CACRC,6CACSC,KAAKJ,cAAcK,IAAI,SAAAC,UAAQC,EAAKd,MAAMe,QAAQF,MAE3DG,oCACSL,KAAKM,qBAAqBN,KAAKH,gBAG1CU,QAAS,CACPC,qBAAYN,OAAMO,yDAAS,IACpBA,EAAOC,UAAWD,EAAOE,SAAaF,EAAOG,SAMvCH,EAAOG,cACXC,iBAAiBX,QAEjBY,gBAAgBZ,GARjBF,KAAKe,gBAAgBb,QAClBc,oBAAoBd,QAEpBe,kBAAkBf,QAOtBL,aAAeK,GAEtBY,yBAAgBZ,QACTN,cAAgB,CAACM,IAExBW,0BAAiBX,OACTgB,EAAYlB,KAAKM,qBAAqBJ,MAEvCF,KAAKJ,cAAcuB,UAKlBD,GAAalB,KAAKK,sBACf,IAAIe,EAAIpB,KAAKK,kBAAmBe,GAAKF,EAAWE,SAC9CH,kBAAkBjB,KAAKX,MAAM+B,aAG/B,IAAIA,EAAIF,EAAWE,GAAKpB,KAAKK,kBAAmBe,SAC9CH,kBAAkBjB,KAAKX,MAAM+B,aAVjC,IAAIA,EAAI,EAAGA,GAAKF,EAAWE,SACzBH,kBAAkBjB,KAAKX,MAAM+B,KAcxCH,2BAAkBf,QACXN,gBAAoB,IAAIyB,IAAIrB,KAAKJ,cAAc0B,OAAO,CAACpB,OAE9Dc,6BAAoBd,mBACbN,cAAgBI,KAAKJ,cAAc2B,OAAO,SAAAH,UAAKA,EAAEI,EAAK/B,OAASS,EAAKsB,EAAK/B,QAEhFa,8BAAqBJ,qBACZF,KAAKX,MAAMoC,UAAU,SAAAL,UACnBA,EAAEM,EAAKjC,OAASS,EAAKwB,EAAKjC,QAGrCsB,yBAAgBb,qBACPF,KAAKJ,cAAcK,IAAI,SAAAmB,UAAKA,EAAEO,EAAKlC,OAAMmC,SAAS1B,EAAKF,KAAKP,OAErEoC,0BACOjC,cAAgBI,KAAKX,OAE5ByC,4BACOlC,cAAgB,KAGzBmC,yBACS/B,KAAKgC,aAAaC,QAAQ,CAC/BrC,cAAeI,KAAKJ,cACpBG,gBAAiBC,KAAKD,gBACtBS,YAAaR,KAAKQ,sBAKF,oBAAX0B,QAA0BA,OAAOC,KAC1CD,OAAOC,IAAIC,UAAUlD,EAAcC,KAAMD"} \ No newline at end of file +{"version":3,"file":"index.umd.min.js","sources":["../src/index.js"],"sourcesContent":["const VueMulticlick = {\n name: \"vue-multiclick\",\n props: {\n items: {\n type: Array,\n required: true\n },\n uid: {\n type: String,\n required: true\n }\n },\n data() {\n return {\n selectedItems: [],\n lastSelected: null\n }\n },\n computed: {\n selectedIndexes() {\n return this.selectedItems.map(item => this.items.indexOf(item))\n },\n lastSelectedIndex() {\n if (!this.lastSelected) {\n return -1\n } else {\n return this.getItemIndex(this.lastSelected)\n }\n }\n },\n watch: {\n selectedItems() {\n this.$emit(\"selected\", this.selectedItems)\n }\n },\n methods: {\n itemClicked(item, $event = {}) {\n if (($event.metaKey || $event.ctrlKey) && !$event.shiftKey) {\n if (this.itemIsSelected(item)) {\n this.removeFromSelection(item)\n } else {\n this.appendToSelection(item)\n }\n } else if ($event.shiftKey) {\n this.setSelectedItemsFromLastSelected(item)\n } else {\n this.setSelectedItem(item)\n }\n this.lastSelected = item\n },\n setSelectedItem(item) {\n this.selectedItems = [item]\n },\n setSelectedItems(items) {\n this.selectedItems = items\n },\n setSelectedItemsFromLastSelected(item) {\n const itemIndex = this.getItemIndex(item)\n let itemsToSelect = []\n\n if (!this.selectedItems.length) {\n itemsToSelect = this.getItemsFromRange(0, itemIndex)\n } else {\n itemsToSelect = this.getItemsFromRange(this.lastSelectedIndex, itemIndex)\n }\n itemsToSelect.forEach(i => this.appendToSelection(i))\n },\n getItemsFromRange(start = 0, end = 0) {\n const items = []\n const low = Math.min(start, end)\n const high = Math.max(start, end)\n\n for (let i = low; i <= high; i++) {\n items.push(this.items[i])\n }\n\n return items\n },\n appendToSelection(item) {\n this.selectedItems = [...new Set(this.selectedItems.concat([item]))]\n },\n removeFromSelection(item) {\n this.selectedItems = this.selectedItems.filter(i => i[this.uid] !== item[this.uid])\n },\n getItemIndex(item) {\n return this.items.findIndex(i => {\n return i[this.uid] === item[this.uid]\n })\n },\n itemSelected(item) {\n console.warn(\n 'The \"itemSelected\" method is deprecated in favour of \"itemIsSelected\" and will be removed in a future version.'\n )\n return this.itemIsSelected(item)\n },\n itemIsSelected(item) {\n return this.selectedItems.some(i => i[this.uid] === item[this.uid])\n },\n selectAll() {\n this.selectedItems = this.items\n },\n selectNone() {\n this.selectedItems = []\n }\n },\n render() {\n return this.$scopedSlots.default({\n selectedItems: this.selectedItems,\n lastSelectedItem: this.lastSelected,\n selectedIndexes: this.selectedIndexes,\n lastSelectedIndex: this.lastSelectedIndex,\n itemClicked: this.itemClicked,\n setSelectedItem: this.setSelectedItem,\n setSelectedItems: this.setSelectedItems,\n setSelectedItemsFromLastSelected: this.setSelectedItemsFromLastSelected,\n appendToSelection: this.appendToSelection,\n removeFromSelection: this.removeFromSelection,\n getItemIndex: this.getItemIndex,\n getItemsFromRange: this.getItemsFromRange,\n itemSelected: this.itemIsSelected,\n itemIsSelected: this.itemIsSelected,\n selectAll: this.selectAll,\n selectNone: this.selectNone\n })\n }\n}\n\nif (typeof window !== \"undefined\" && window.Vue) {\n window.Vue.component(VueMulticlick.name, VueMulticlick)\n}\n\nexport default VueMulticlick\n"],"names":["VueMulticlick","name","props","items","type","Array","required","uid","String","data","selectedItems","lastSelected","computed","selectedIndexes","this","map","item","_this","indexOf","lastSelectedIndex","getItemIndex","watch","$emit","methods","itemClicked","$event","metaKey","ctrlKey","shiftKey","setSelectedItemsFromLastSelected","setSelectedItem","itemIsSelected","removeFromSelection","appendToSelection","setSelectedItems","itemIndex","length","getItemsFromRange","forEach","i","_this2","start","end","low","Math","min","high","max","push","Set","concat","filter","_this3","findIndex","_this4","itemSelected","console","warn","some","_this5","selectAll","selectNone","render","$scopedSlots","default","lastSelectedItem","window","Vue","component"],"mappings":"whBAAA,IAAMA,EAAgB,CACpBC,KAAM,iBACNC,MAAO,CACLC,MAAO,CACLC,KAAMC,MACNC,UAAU,GAEZC,IAAK,CACHH,KAAMI,OACNF,UAAU,IAGdG,sBACS,CACLC,cAAe,GACfC,aAAc,OAGlBC,SAAU,CACRC,6CACSC,KAAKJ,cAAcK,IAAI,SAAAC,UAAQC,EAAKd,MAAMe,QAAQF,MAE3DG,oCACOL,KAAKH,aAGDG,KAAKM,aAAaN,KAAKH,eAFtB,IAMdU,MAAO,CACLX,8BACOY,MAAM,WAAYR,KAAKJ,iBAGhCa,QAAS,CACPC,qBAAYR,OAAMS,yDAAS,IACpBA,EAAOC,UAAWD,EAAOE,SAAaF,EAAOG,SAMvCH,EAAOG,cACXC,iCAAiCb,QAEjCc,gBAAgBd,GARjBF,KAAKiB,eAAef,QACjBgB,oBAAoBhB,QAEpBiB,kBAAkBjB,QAOtBL,aAAeK,GAEtBc,yBAAgBd,QACTN,cAAgB,CAACM,IAExBkB,0BAAiB/B,QACVO,cAAgBP,GAEvB0B,0CAAiCb,cACzBmB,EAAYrB,KAAKM,aAAaJ,IAG/BF,KAAKJ,cAAc0B,OAGNtB,KAAKuB,kBAAkBvB,KAAKK,kBAAmBgB,GAF/CrB,KAAKuB,kBAAkB,EAAGF,IAI9BG,QAAQ,SAAAC,UAAKC,EAAKP,kBAAkBM,MAEpDF,qCAAkBI,yDAAQ,EAAGC,yDAAM,EAC3BvC,EAAQ,GACRwC,EAAMC,KAAKC,IAAIJ,EAAOC,GACtBI,EAAOF,KAAKG,IAAIN,EAAOC,GAEpBH,EAAII,EAAKJ,GAAKO,EAAMP,IAC3BpC,EAAM6C,KAAKlC,KAAKX,MAAMoC,WAGjBpC,GAET8B,2BAAkBjB,QACXN,gBAAoB,IAAIuC,IAAInC,KAAKJ,cAAcwC,OAAO,CAAClC,OAE9DgB,6BAAoBhB,mBACbN,cAAgBI,KAAKJ,cAAcyC,OAAO,SAAAZ,UAAKA,EAAEa,EAAK7C,OAASS,EAAKoC,EAAK7C,QAEhFa,sBAAaJ,qBACJF,KAAKX,MAAMkD,UAAU,SAAAd,UACnBA,EAAEe,EAAK/C,OAASS,EAAKsC,EAAK/C,QAGrCgD,sBAAavC,UACXwC,QAAQC,KACN,kHAEK3C,KAAKiB,eAAef,IAE7Be,wBAAef,qBACNF,KAAKJ,cAAcgD,KAAK,SAAAnB,UAAKA,EAAEoB,EAAKpD,OAASS,EAAK2C,EAAKpD,QAEhEqD,0BACOlD,cAAgBI,KAAKX,OAE5B0D,2BACOnD,cAAgB,KAGzBoD,yBACShD,KAAKiD,aAAaC,QAAQ,CAC/BtD,cAAeI,KAAKJ,cACpBuD,iBAAkBnD,KAAKH,aACvBE,gBAAiBC,KAAKD,gBACtBM,kBAAmBL,KAAKK,kBACxBK,YAAaV,KAAKU,YAClBM,gBAAiBhB,KAAKgB,gBACtBI,iBAAkBpB,KAAKoB,iBACvBL,iCAAkCf,KAAKe,iCACvCI,kBAAmBnB,KAAKmB,kBACxBD,oBAAqBlB,KAAKkB,oBAC1BZ,aAAcN,KAAKM,aACnBiB,kBAAmBvB,KAAKuB,kBACxBkB,aAAczC,KAAKiB,eACnBA,eAAgBjB,KAAKiB,eACrB6B,UAAW9C,KAAK8C,UAChBC,WAAY/C,KAAK+C,qBAKD,oBAAXK,QAA0BA,OAAOC,KAC1CD,OAAOC,IAAIC,UAAUpE,EAAcC,KAAMD"} \ No newline at end of file diff --git a/example/App.vue b/example/App.vue index f80a113..88ae929 100644 --- a/example/App.vue +++ b/example/App.vue @@ -2,22 +2,23 @@
Number of items selected: {{ numSelected }} +

  • {{ item.name }} diff --git a/package-lock.json b/package-lock.json index e39e2c2..cf2f7c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4617,12 +4617,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4637,17 +4639,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4764,7 +4769,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4776,6 +4782,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4790,6 +4797,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4797,12 +4805,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4821,6 +4831,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4901,7 +4912,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4913,6 +4925,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5034,6 +5047,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/index.js b/src/index.js index 869857f..1ef6afa 100644 --- a/src/index.js +++ b/src/index.js @@ -30,13 +30,13 @@ const VueMulticlick = { }, watch: { selectedItems() { - this.$emit('selected', this.selectedItems) + this.$emit("selected", this.selectedItems) } }, methods: { itemClicked(item, $event = {}) { if (($event.metaKey || $event.ctrlKey) && !$event.shiftKey) { - if (this.itemSelected(item)) { + if (this.itemIsSelected(item)) { this.removeFromSelection(item) } else { this.appendToSelection(item) @@ -69,6 +69,7 @@ const VueMulticlick = { const items = [] const low = Math.min(start, end) const high = Math.max(start, end) + for (let i = low; i <= high; i++) { items.push(this.items[i]) } @@ -87,6 +88,12 @@ const VueMulticlick = { }) }, itemSelected(item) { + console.warn( + 'The "itemSelected" method is deprecated in favour of "itemIsSelected" and will be removed in a future version.' + ) + return this.itemIsSelected(item) + }, + itemIsSelected(item) { return this.selectedItems.some(i => i[this.uid] === item[this.uid]) }, selectAll() { @@ -110,7 +117,8 @@ const VueMulticlick = { removeFromSelection: this.removeFromSelection, getItemIndex: this.getItemIndex, getItemsFromRange: this.getItemsFromRange, - itemSelected: this.itemSelected, + itemSelected: this.itemIsSelected, + itemIsSelected: this.itemIsSelected, selectAll: this.selectAll, selectNone: this.selectNone })