feat: add VbenForm component (#4352)

* feat: add form component

* fix: build error

* feat: add form adapter

* feat: add some component

* feat: add some component

* feat: add example

* feat: suppoer custom action button

* chore: update

* feat: add example

* feat: add formModel,formDrawer demo

* fix: build error

* fix: typo

* fix: ci error

---------

Co-authored-by: jinmao <jinmao88@qq.com>
Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>

playground/src/views/examples/drawer/form-drawer-demo.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter';
+
+defineOptions({
+  name: 'FormDrawerDemo',
+});
+
+const [Form, formApi] = useVbenForm({
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field1',
+      label: '字段1',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      fieldName: 'field2',
+      label: '字段2',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.submitForm();
+    drawerApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = drawerApi.getData<Record<string, any>>();
+      if (values) {
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: '内嵌表单示例',
+});
+</script>
+<template>
+  <Drawer>
+    <Form />
+  </Drawer>
+</template>

playground/src/views/examples/drawer/index.vue

@@ -7,6 +7,7 @@ import DocButton from '../doc-button.vue';
 import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
+import FormDrawerDemo from './form-drawer-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
@@ -26,6 +27,10 @@ const [SharedDataDrawer, sharedDrawerApi] = useVbenDrawer({
   connectedComponent: SharedDataDemo,
 });
 
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: FormDrawerDemo,
+});
+
 function openBaseDrawer() {
   baseDrawerApi.open();
 }
@@ -50,6 +55,14 @@ function openSharedDrawer() {
   });
   sharedDrawerApi.open();
 }
+
+function openFormDrawer() {
+  formDrawerApi.setData({
+    // 表单值
+    values: { field1: 'abc', field2: '123' },
+  });
+  formDrawerApi.open();
+}
 </script>
 
 <template>
@@ -64,6 +77,7 @@ function openSharedDrawer() {
     <AutoHeightDrawer />
     <DynamicDrawer />
     <SharedDataDrawer />
+    <FormDrawer />
 
     <Card class="mb-4" title="基本使用">
       <p class="mb-3">一个基础的抽屉示例</p>
@@ -89,5 +103,12 @@ function openSharedDrawer() {
         打开抽屉并传递数据
       </Button>
     </Card>
+
+    <Card class="mb-4" title="表单抽屉示例">
+      <p class="mb-3">打开抽屉并设置表单schema以及数据</p>
+      <Button type="primary" @click="openFormDrawer">
+        打开抽屉并设置表单schema以及数据
+      </Button>
+    </Card>
   </Page>
 </template>