46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
Vue.component('tt-checkbox', {
|
|
props: {
|
|
label: String,
|
|
required: Boolean,
|
|
row: Boolean,
|
|
value: [String, Number],
|
|
hint: String,
|
|
additionalProps: Object,
|
|
sm: { type: Boolean, default: false },
|
|
},
|
|
data() {
|
|
return {
|
|
checkedValue: this.value,
|
|
};
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.checkedValue = val;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$emit('input', this.checkedValue);
|
|
},
|
|
template: `
|
|
<div class="form-group" :class="{'row': row}">
|
|
<slot name="prepend"></slot>
|
|
<label
|
|
:class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
|
|
v-if="label"
|
|
:for="label">{{ label }}</label>
|
|
|
|
<input type="checkbox"
|
|
:id="label"
|
|
:name="label"
|
|
class="form-control float-left"
|
|
:class="{'form-control-sm': sm, 'col-sm-8': row}"
|
|
:required="required"
|
|
v-bind="additionalProps"
|
|
v-model="checkedValue"
|
|
@input="$emit('input', $event.target.checked ? 1 : 0)"
|
|
>
|
|
<small v-if="hint" class="form-text text-muted">{{ hint }}</small>
|
|
</div>
|
|
`
|
|
});
|