Skip to content

Commit

Permalink
Deprecates itemSelected method in favour of itemIsSelected
Browse files Browse the repository at this point in the history
  • Loading branch information
@syropian
syropian committed Mar 30, 2019
1 parent cc617ff commit 30fb763
Show file tree
Hide file tree
Showing 10 changed files with 248 additions and 108 deletions.
8 changes: 4 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
<div>
<VueMulticlick :items="items" uid="id" v-slot="{ itemClicked, itemSelected }">
<VueMulticlick :items="items" uid="id" v-slot="{ itemClicked, itemIsSelected }">
<ul>
<li v-for="item in items" :key="item.id" :class="{ 'is-selected': itemSelected(item) }" @click="itemClicked">
<li v-for="item in items" :key="item.id" :class="{ 'is-selected': itemIsSelected(item) }" @click="itemClicked">
{{ item.name }}
</li>
</ul>
Expand Down Expand Up @@ -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<br />**end**: Number<br /> | Array |
Expand Down
4 changes: 2 additions & 2 deletions __tests__/VueMulticlick.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down
97 changes: 68 additions & 29 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,30 @@ 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: {
itemClicked: function itemClicked(item) {
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);
}
Expand All @@ -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
});
}
};
Expand Down
97 changes: 68 additions & 29 deletions dist/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,30 @@ 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: {
itemClicked: function itemClicked(item) {
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);
}
Expand All @@ -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
});
}
};
Expand Down

0 comments on commit 30fb763

Please sign in to comment.