tethys.backend/resources/js/Components/FormCheckRadioGroup.vue

57 lines
1.2 KiB
Vue
Raw Normal View History

2023-03-03 15:54:28 +00:00
<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>