75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
class="form-check"
|
|
:class="!stacked ? 'form-check-inline' : ''"
|
|
>
|
|
<input
|
|
:id="id+'_'+option.value"
|
|
v-model="value"
|
|
:value="option.value"
|
|
class="form-check-input"
|
|
:class="fieldClass"
|
|
:type="radio ? 'radio' : 'checkbox'"
|
|
:name="name"
|
|
>
|
|
<label
|
|
class="form-check-label"
|
|
:for="id+'_'+option.value"
|
|
>
|
|
<slot :name="'label('+option.value+')'">
|
|
<template v-if="option.description">
|
|
<strong>{{ option.text }}</strong>
|
|
<br>
|
|
<small>{{ option.description }}</small>
|
|
</template>
|
|
<template v-else>
|
|
{{ option.text }}
|
|
</template>
|
|
</slot>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {useVModel} from "@vueuse/core";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Number, Boolean, Array],
|
|
required: true
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: (props) => props.id
|
|
},
|
|
fieldClass: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
options: {
|
|
type: Array<any>,
|
|
required: true
|
|
},
|
|
radio: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
stacked: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const value = useVModel(props, 'modelValue', emit);
|
|
</script>
|