menduner/src/components/FormUI/radioGroup/index.vue

<template>
  <!-- <div :style="`width: ${item.width || 120}px;`">{{ item.label }}</div> -->
  <v-radio-group
    v-model="value"
    :disabled="item.disabled"
    mandatory
    inline
    :hide-details="item.hideDetails || false"
    class="mr-8"
    @update:modelValue="modelValueUpDate"
  >
    <template v-slot:label>
      <div :style="`width: ${item.width || 120}px;`">{{ item.label }}</div>
    </template>
    <v-radio
      v-for="radio in item.items"
      :key="`${item.key}_radio_${radio.label}`"
      :readonly="radio.readonly"
      :label="radio.label"
      class="mr-3"
      :value="radio.value"
      :color="item.color || 'primary'"
    ></v-radio>
  </v-radio-group>
</template>

<script setup>
import { ref, watch } from 'vue';
defineOptions({ name:'FormUI-v-radio-group'})

const props = defineProps({item: Object, modelValue: [String, Number, Boolean]})
const emit = defineEmits(['update:modelValue', 'change'])

const item = props.item
const value = ref(props.modelValue)

const modelValueUpDate = (val) => {
  value.value = val
  emit('update:modelValue', value.value)
  emit('change', value.value)
}

watch(
  () => props.modelValue,
  (val) => {
    value.value = val
  }
)
</script>

<style lang="scss" scoped>
:deep(.v-input__control) {
  flex-direction: row !important;
}
:deep(.v-selection-control-group) {
  margin-top: 0 !important;
}
:deep(.v-label) {
  margin-left: 0 !important;
}
</style>