<template>
  <div class="form-section">
    <FormLayout ref="formLayoutRef" v-bind="$attrs">
      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
        <slot :name="slotName" v-bind="slotProps" />
      </template>
    </FormLayout>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import FormLayout from './FormLayout.vue';

defineOptions({
  name: 'FormSectionLayout',
  inheritAttrs: false,
});

const formLayoutRef = ref(null);

defineExpose({
  get formRef() {
    return formLayoutRef.value?.formRef;
  },
  validate: (...args) => formLayoutRef.value?.validate(...args),
  validateField: (...args) => formLayoutRef.value?.validateField(...args),
  resetFields: (...args) => formLayoutRef.value?.resetFields(...args),
  clearValidate: (...args) => formLayoutRef.value?.clearValidate(...args),
  scrollToField: (...args) => formLayoutRef.value?.scrollToField(...args),
});
</script>

<style scoped lang="scss">
.form-section {
  flex-shrink: 0;
  margin-bottom: 1rem;
}
</style>
