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

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

const isDisabled = ref(false)
</script>

<template>
  <div class="grid gap-6">
    <AisFieldset
        legend="Fieldset"
        class="grid grid-cols-2 gap-4 pt-2"
        size="md"
        :disabled="isDisabled"
    >
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>

    <AisCheckbox v-model="isDisabled" class="border-t pt-2">Disable fieldset</AisCheckbox>
  </div>
</template>

