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/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>