134 lines
2.3 KiB
Vue
134 lines
2.3 KiB
Vue
<template>
|
|
<div class="ui-check-list" :class="{'is-disabled': disabled, 'is-inline': inline }">
|
|
<label v-for="item in list" class="ui-native-check ui-check-list-item">
|
|
<input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" />
|
|
<span class="ui-native-check-toggle"></span>
|
|
<span v-localize="item.name"></span>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { map as _map, filter as _filter } from 'underscore';
|
|
|
|
export default {
|
|
name: 'uiCheckList',
|
|
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
items: {
|
|
type: [Array, Function, Promise],
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
inline: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxItems: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
reverse: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
|
|
data: () => ({
|
|
list: []
|
|
}),
|
|
|
|
|
|
watch: {
|
|
items()
|
|
{
|
|
this.init();
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
this.init();
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
init()
|
|
{
|
|
if (typeof this.items === 'function')
|
|
{
|
|
this.items().then(res =>
|
|
{
|
|
this.list = res;
|
|
});
|
|
}
|
|
else
|
|
{
|
|
this.list = JSON.parse(JSON.stringify(this.items));
|
|
}
|
|
},
|
|
|
|
isChecked(item)
|
|
{
|
|
let index = this.value.indexOf(item.id);
|
|
return (!this.reverse && index > -1) || (this.reverse && index < 0);
|
|
},
|
|
|
|
onChange(item)
|
|
{
|
|
let index = this.value.indexOf(item.id);
|
|
let value = JSON.parse(JSON.stringify(this.value));
|
|
|
|
if (index < 0)
|
|
{
|
|
value.push(item.id);
|
|
}
|
|
else
|
|
{
|
|
value.splice(index, 1);
|
|
}
|
|
|
|
this.$emit('input', value);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ui-check-list-item
|
|
{
|
|
display: block;
|
|
|
|
& + .ui-check-list-item
|
|
{
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
|
|
.ui-check-list.is-inline .ui-check-list-item
|
|
{
|
|
display: inline-block;
|
|
|
|
& + .ui-check-list-item
|
|
{
|
|
margin-top: 0;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.ui-native-check-toggle
|
|
{
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
</style> |