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

const data = ref({
  field1: 'Hello',
  field2: 'World',
})
</script>

<template>
  <div class="grid gap-8">
    <AisFieldset
        aria-labelledby="fieldset-label"
        class="grid grid-cols-2 gap-4 my-0"
        size="md"
    >
      <div id="fieldset-label" class="col-span-2 text-2xl font-serif border-b">
        Heading
      </div>
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>
  </div>
</template>

