tethys.backend/resources/js/Components/FormCheckRadioGroup.vue
Arno Kaimbacher a7142f694f
All checks were successful
CI Pipeline / japa-tests (push) Successful in 51s
- prettier formatting
- npm updates
- new SearchMap.vue component
2023-10-31 15:38:43 +01:00

55 lines
1.3 KiB
Vue

<script setup>
import { computed } from 'vue';
import FormCheckRadio from '@/Components/FormCheckRadio.vue';
const props = defineProps({
options: {
type: Object,
default: () => {},
},
name: {
type: String,
required: true,
},
type: {
type: String,
default: 'checkbox',
validator: (value) => ['checkbox', 'radio', 'switch'].includes(value),
},
componentClass: {
type: String,
default: null,
},
isColumn: Boolean,
modelValue: {
type: [Array, String, Number, Boolean, Object],
default: null,
},
});
const emit = defineEmits(['update:modelValue']);
const computedValue = computed({
get: () => props.modelValue,
set: (value) => {
emit('update:modelValue', value);
},
});
</script>
<template>
<div class="flex justify-start flex-wrap -mb-3" :class="{ 'flex-col': isColumn }">
<!-- :input-value="key" -->
<!-- :label="value" -->
<!-- :input-value="value.id"
:label="value.name" -->
<FormCheckRadio
v-for="(value, key) in options"
:key="key"
v-model="computedValue"
:type="type"
:name="name"
:input-value="key"
:label="value"
:class="componentClass"
/>
</div>
</template>