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/modal/form-model-demo.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+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 [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.submitForm();
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: '内嵌表单示例',
+});
+</script>
+<template>
+  <Modal>
+    <Form />
+  </Modal>
+</template>

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

@@ -8,6 +8,7 @@ import AutoHeightDemo from './auto-height-demo.vue';
 import BaseDemo from './base-demo.vue';
 import DragDemo from './drag-demo.vue';
 import DynamicDemo from './dynamic-demo.vue';
+import FormModalDemo from './form-model-demo.vue';
 import SharedDataDemo from './shared-data-demo.vue';
 
 const [BaseModal, baseModalApi] = useVbenModal({
@@ -31,6 +32,10 @@ const [SharedDataModal, sharedModalApi] = useVbenModal({
   connectedComponent: SharedDataDemo,
 });
 
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
 function openBaseModal() {
   baseModalApi.open();
 }
@@ -59,6 +64,14 @@ function handleUpdateTitle() {
   dynamicModalApi.setState({ title: '外部动态标题' });
   dynamicModalApi.open();
 }
+
+function openFormModal() {
+  formModalApi.setData({
+    // 表单值
+    values: { field1: 'abc' },
+  });
+  formModalApi.open();
+}
 </script>
 
 <template>
@@ -74,7 +87,7 @@ function handleUpdateTitle() {
     <DragModal />
     <DynamicModal />
     <SharedDataModal />
-
+    <FormModal />
     <Card class="mb-4" title="基本使用">
       <p class="mb-3">一个基础的弹窗示例</p>
       <Button type="primary" @click="openBaseModal">打开弹窗</Button>
@@ -104,5 +117,10 @@ function handleUpdateTitle() {
         打开弹窗并传递数据
       </Button>
     </Card>
+
+    <Card class="mb-4" title="表单弹窗示例">
+      <p class="mb-3">弹窗与表单结合</p>
+      <Button type="primary" @click="openFormModal"> 打开弹窗 </Button>
+    </Card>
   </Page>
 </template>