<template>
  <v-col
    :cols="xs"
    :sm="sm || xs"
    :md="md || sm || xs"
    :lg="lg || md || sm || xs"
    :xl="xl || lg || md || sm || xs"
    :xxl="xxl || xl || lg || md || sm || xs"
    :class="$attrs.class + ' px-2'"
  >
    <v-radio-group v-model="value">
      <v-radio
        v-for="(item, index) in items"
        :key="index"
        :label="item.text"
        :value="item.value"
      ></v-radio>
    </v-radio-group>
  </v-col>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

//import { PropType } from "nuxt/dist/app/compat/capi";

defineProps({
  name: {
    type: String,
    requird: true
  },
  label: {
    type: String,
    required: true
  },
  xs: { type: String, default: "12" },
  sm: { type: String },
  md: { type: String },
  lg: { type: String },
  xl: { type: String },
  xxl: { type: String },
  required: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String,
    required: true
  },
  items: {
    type: Array<any>, //as PropType<ButtonObject[]>,
    default: () => []
  }
});

const value = ref();

const emit = defineEmits(["update:modelValue"]);

watch(value, newValue => {
  emit("update:modelValue", newValue);
});
</script>
