2019-04-04 12:43:24 +11:00
|
|
|
import Checkbox from '../checkbox/checkbox.js'
|
|
|
|
|
2019-04-04 13:38:48 +11:00
|
|
|
const SelectableList = {
|
2019-04-04 12:43:24 +11:00
|
|
|
components: {
|
|
|
|
Checkbox
|
|
|
|
},
|
2019-04-04 13:48:00 +11:00
|
|
|
props: {
|
|
|
|
items: {
|
|
|
|
type: Array,
|
|
|
|
default: () => []
|
2019-04-04 14:26:13 +11:00
|
|
|
},
|
|
|
|
getKey: {
|
|
|
|
type: Function,
|
|
|
|
default: item => item
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
selected: []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
toggle (checked, item) {
|
2019-04-04 14:35:43 +11:00
|
|
|
const oldChecked = this.isSelected(item)
|
2019-04-04 14:26:13 +11: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-04 14:35:43 +11:00
|
|
|
isSelected (item) {
|
2019-04-04 14:26:13 +11:00
|
|
|
return this.selected.indexOf(this.getKey(item)) !== -1
|
2019-04-04 13:48:00 +11:00
|
|
|
}
|
2019-04-04 12:43:24 +11:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-04 13:38:48 +11:00
|
|
|
export default SelectableList
|