forked from geolba/tethys.backend
57 lines
1.2 KiB
Vue
57 lines
1.2 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>
|