44 lines
1.0 KiB
Vue
44 lines
1.0 KiB
Vue
<template>
|
|
<label class="custom-label flex">
|
|
<div :class="'bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2' + classes">
|
|
<input type="checkbox" class="hidden" :checked="checkIt" @click="checkThis">
|
|
<div class="hidden check rounded-sm w-4 h-4 bg-gray-700 pointer-events-none"></div>
|
|
</div>
|
|
<span class="select-none ml-1">{{ label }}</span>
|
|
</label>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CheckBoxField',
|
|
props: {
|
|
checkIt: {
|
|
type: Boolean,
|
|
},
|
|
classes: String,
|
|
label: String,
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data: function () {
|
|
return {
|
|
check: this.checkIt,
|
|
}
|
|
},
|
|
methods: {
|
|
checkThis() {
|
|
this.check = !this.check
|
|
this.$emit('update:field', this.check)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.custom-label input:checked + .check {
|
|
display: block !important;
|
|
}
|
|
</style>
|