66 lines
2.2 KiB
Vue
66 lines
2.2 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<div class="grid grid-cols-1 gap-2">
|
|
<div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
|
|
<label :for="id" class="p-0 block leading-none relative flex items-start">
|
|
<input :id="id" v-model="inner" type="checkbox" :name="name" class="peer absolute invisible" />
|
|
<span
|
|
class="border-neutral-400 border-4 group-[.info]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.info]:w-4 group-[.info]:h-4 group-[.info]:top-[5px] rounded block top-0"
|
|
></span>
|
|
<span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.info]:top-[0.58rem] group-[.info]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
|
|
<span v-if="label" class="pl-8 group-[.info]:pl-6 pt-1 @sm:pt-0 @sm:group-[.info]:pt-1 text-gray-600 text-sm @sm:text-base @sm:group-[.info]:text-sm">
|
|
<span v-text="label"></span>
|
|
<span v-show="required" class="text-red-800"> *</span>
|
|
</span>
|
|
<hint :value="hint" class="ml-2" v-if="hint"></hint>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from 'vue';
|
|
import Hint from '../Hint.vue';
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const props = defineProps({
|
|
modelValue: {
|
|
required: true,
|
|
validator: (value) => value === true || value === false,
|
|
},
|
|
id: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
name: {
|
|
required: true,
|
|
type: String,
|
|
},
|
|
label: {
|
|
required: false,
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
required: {
|
|
required: false,
|
|
type: Boolean,
|
|
default: () => false,
|
|
},
|
|
hint: {
|
|
required: false,
|
|
validator: (value) => value === null || typeof value === 'string',
|
|
default: () => null,
|
|
},
|
|
intro: {
|
|
required: false,
|
|
validator: (value) => value === null || typeof value === 'string',
|
|
default: () => null,
|
|
},
|
|
});
|
|
|
|
const inner = computed({
|
|
get: () => props.modelValue,
|
|
set: (v) => emit('update:modelValue', v),
|
|
});
|
|
</script>
|