<script setup>
import AisFieldset from '@/components/fieldset/AisFieldset.vue'
import AisField from '@/components/field/AisField.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisRadioGroup from '@/components/radio-group/AisRadioGroup.vue'
import { ref } from 'vue'

const data = ref({
  field1: 'Hello',
  field2: 'World',
})

const sizes = ['sm', 'md', 'lg']
const selectedSize = ref('md')
</script>

<template>
  <div class="grid gap-8">
    <AisFieldset
        legend="Fieldset size..."
        class="grid grid-cols-2 gap-4 pt-2"
        :size="selectedSize"
    >
      <AisField label="Fieldset Size" label-mode="sr-only" class="col-span-2">
        <AisRadioGroup v-model="selectedSize" :options="sizes" />
      </AisField>
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>
  </div>
</template>

