<script setup lang="ts">
import { useVbenForm } from '#/adapter/form';

import { formSchema } from './config-data';

const [BaseForm] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 在label后显示一个冒号
    colon: true,
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 180,
  },
  // 提交函数
  handleSubmit: onSubmit,
  showDefaultActions: false,
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: formSchema(),
  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
});

async function onSubmit(): Promise<void> {
  // 提交逻辑可以根据需要实现
}
</script>

<template>
  <div>
    <BaseForm />
  </div>
</template>
