50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<script setup>
|
|
import { useSlots } from "vue";
|
|
|
|
const props = defineProps(["df", "value", "read_only"]);
|
|
let slots = useSlots();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="control checkbox" :class="{ editable: slots.label }">
|
|
<!-- checkbox -->
|
|
<label v-if="slots.label" class="field-controls">
|
|
<div class="checkbox">
|
|
<input type="checkbox" disabled />
|
|
<slot name="label" />
|
|
</div>
|
|
<slot name="actions" />
|
|
</label>
|
|
<label v-else>
|
|
<input
|
|
type="checkbox"
|
|
:checked="value"
|
|
:disabled="read_only"
|
|
@change="event => $emit('update:modelValue', event.target.checked)"
|
|
/>
|
|
<span class="label-area" :class="{ reqd: df.reqd }">{{ df.label }}</span>
|
|
</label>
|
|
|
|
<!-- description -->
|
|
<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
label, input {
|
|
margin-bottom: 0 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label .checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
input {
|
|
background-color: var(--fg-color);
|
|
box-shadow: none;
|
|
border: 1px solid var(--gray-400);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
</style>
|