2019-04-03 18:43:24 -07:00
|
|
|
import Checkbox from '../checkbox/checkbox.js'
|
|
|
|
|
2019-04-03 19:38:48 -07:00
|
|
|
const SelectableList = {
|
2019-04-03 18:43:24 -07:00
|
|
|
components: {
|
|
|
|
Checkbox
|
|
|
|
},
|
2019-04-03 19:48:00 -07:00
|
|
|
props: {
|
|
|
|
items: {
|
|
|
|
type: Array,
|
|
|
|
default: () => []
|
2019-04-03 20:26:13 -07:00
|
|
|
},
|
|
|
|
getKey: {
|
|
|
|
type: Function,
|
|
|
|
default: item => item
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
selected: []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggle (checked, item) {
|
2019-04-03 20:35:43 -07:00
|
|
|
const oldChecked = this.isSelected(item)
|
2019-04-03 20:26:13 -07:00
|
|
|
if (checked !== oldChecked) {
|
|
|
|
const key = this.getKey(item)
|
|
|
|
if (checked) {
|
|
|
|
this.selected.push(key)
|
|
|
|
} else {
|
|
|
|
this.selected.splice(this.selected.indexOf(key), 1)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2019-04-03 20:35:43 -07:00
|
|
|
isSelected (item) {
|
2019-04-03 20:26:13 -07:00
|
|
|
return this.selected.indexOf(this.getKey(item)) !== -1
|
2019-04-03 19:48:00 -07:00
|
|
|
}
|
2019-04-03 18:43:24 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-03 19:38:48 -07:00
|
|
|
export default SelectableList
|