forked from geolba/tethys.backend
44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'checkbox',
|
|
validator: (value) => ['checkbox', 'radio', 'switch'].includes(value),
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
modelValue: {
|
|
type: [Array, String, Number, Boolean],
|
|
default: null,
|
|
},
|
|
inputValue: {
|
|
type: [String, Number, Boolean],
|
|
required: true,
|
|
},
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const computedValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => {
|
|
emit('update:modelValue', value);
|
|
},
|
|
});
|
|
const inputType = computed(() => (props.type === 'radio' ? 'radio' : 'checkbox'));
|
|
</script>
|
|
|
|
<template>
|
|
<label :class="type" class="mr-6 mb-3 last:mr-0">
|
|
<input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
|
|
<span class="check" />
|
|
<span class="pl-2">{{ label }}</span>
|
|
</label>
|
|
</template>
|