refactor(@vben/playground): type popup data consumers

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

@@ -7,6 +7,10 @@ defineOptions({
   name: 'FormDrawerDemo',
 });
 
+interface FormDrawerData {
+  values?: Record<string, unknown>;
+}
+
 const [Form, formApi] = useVbenForm({
   schema: [
     {
@@ -30,7 +34,7 @@ const [Form, formApi] = useVbenForm({
   ],
   showDefaultActions: false,
 });
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<FormDrawerData>({
   onCancel() {
     drawerApi.close();
   },
@@ -40,14 +44,16 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      const { values } = drawerApi.getData<Record<string, any>>();
+      const data = drawerApi.getData();
-      if (values) {
+      if (data?.values) {
-        formApi.setValues(values);
+        formApi.setValues(data.values);
       }
     }
   },
   title: '内嵌表单示例',
 });
+
+defineExpose({ drawerApi });
 </script>
 <template>
   <Drawer>

playground/src/views/examples/drawer/shared-data-demo.vue

@@ -5,9 +5,14 @@ import { useVbenDrawer } from '@vben/common-ui';
 
 import { message } from 'antdv-next';
 
-const data = ref();
+interface SharedData {
+  content: string;
+  payload: string;
+}
 
-const [Drawer, drawerApi] = useVbenDrawer({
+const data = ref<SharedData>();
+
+const [Drawer, drawerApi] = useVbenDrawer<SharedData>({
   onCancel() {
     drawerApi.close();
   },
@@ -17,10 +22,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      data.value = drawerApi.getData<Record<string, any>>();
+      data.value = drawerApi.getData();
     }
   },
 });
+
+defineExpose({ drawerApi });
 </script>
 <template>
   <Drawer title="数据共享示例">

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

@@ -9,6 +9,10 @@ defineOptions({
   name: 'FormModelDemo',
 });
 
+interface FormModalData {
+  values?: Record<string, unknown>;
+}
+
 const [Form, formApi] = useVbenForm({
   handleSubmit: onSubmit,
   schema: [
@@ -48,7 +52,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-const [Modal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal<FormModalData>({
   fullscreenButton: false,
   onCancel() {
     modalApi.close();
@@ -59,15 +63,17 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      const { values } = modalApi.getData<Record<string, any>>();
+      const data = modalApi.getData();
-      if (values) {
+      if (data?.values) {
-        formApi.setValues(values);
+        formApi.setValues(data.values);
       }
     }
   },
   title: '内嵌表单示例',
 });
 
+defineExpose({ modalApi });
+
 function onSubmit(values: Record<string, any>) {
   message.loading({
     content: '正在提交中...',

playground/src/views/examples/modal/shared-data-demo.vue

@@ -5,9 +5,14 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'antdv-next';
 
-const data = ref();
+interface SharedData {
+  content: string;
+  payload: string;
+}
 
-const [Modal, modalApi] = useVbenModal({
+const data = ref<SharedData>();
+
+const [Modal, modalApi] = useVbenModal<SharedData>({
   onCancel() {
     modalApi.close();
   },
@@ -17,10 +22,12 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen: boolean) {
     if (isOpen) {
-      data.value = modalApi.getData<Record<string, any>>();
+      data.value = modalApi.getData();
     }
   },
 });
+
+defineExpose({ modalApi });
 </script>
 <template>
   <Modal title="数据共享示例">

playground/src/views/system/dept/modules/form.vue

@@ -15,6 +15,11 @@ import { useSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<SystemDeptApi.SystemDept>();
+type DeptModalData =
+  | null
+  | SystemDeptApi.SystemDept
+  | { pid: SystemDeptApi.SystemDept['pid'] };
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', [$t('system.dept.name')])
@@ -32,7 +37,7 @@ function resetForm() {
   formApi.setValues(formData.value || {});
 }
 
-const [Modal, modalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal<DeptModalData>({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (valid) {
@@ -51,17 +56,22 @@ const [Modal, modalApi] = useVbenModal({
   },
   onOpenChange(isOpen) {
     if (isOpen) {
-      const data = modalApi.getData<SystemDeptApi.SystemDept>();
+      const data = modalApi.getData();
       if (data) {
         if (data.pid === 0) {
           data.pid = undefined;
         }
-        formData.value = data;
+        formData.value = 'id' in data ? data : undefined;
-        formApi.setValues(formData.value);
+        formApi.setValues(data);
+      } else {
+        formData.value = undefined;
+        formApi.reset();
       }
     }
   },
 });
+
+defineExpose({ modalApi });
 </script>
 
 <template>

playground/src/views/system/menu/modules/form.vue

@@ -32,6 +32,9 @@ const emit = defineEmits<{
 const formData = ref<SystemMenuApi.SystemMenu>();
 const titleSuffix = ref<string>();
 
+type MenuDrawerData =
+  | SystemMenuApi.SystemMenu
+  | { pid?: SystemMenuApi.SystemMenu['pid'] };
 type MenuSubmitValues = Omit<SystemMenuApi.SystemMenu, 'children' | 'id'>;
 type MenuFormValues = MenuSubmitValues & { linkSrc?: string };
 
@@ -479,25 +482,29 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2 gap-x-4',
 });
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<MenuDrawerData>({
   onConfirm: onSubmit,
   async onOpenChange(isOpen) {
     if (isOpen) {
-      const data = drawerApi.getData<SystemMenuApi.SystemMenu>();
+      const data = drawerApi.getData();
-      if (data) {
+      if (data && 'id' in data) {
         formData.value = data;
         await formApi.setSubmitValues(data);
         titleSuffix.value = formData.value.meta?.title
           ? $t(formData.value.meta.title)
           : '';
       } else {
+        formData.value = undefined;
         formApi.reset();
+        await formApi.setValues(data ?? {});
         titleSuffix.value = '';
       }
     }
   },
 });
 
+defineExpose({ drawerApi });
+
 async function onSubmit() {
   const { valid } = await formApi.validate();
   if (valid) {

playground/src/views/system/role/list.vue

@@ -161,7 +161,7 @@ function onRefresh() {
 }
 
 function onCreate() {
-  formDrawerApi.setData({}).open();
+  formDrawerApi.setData(null).open();
 }
 </script>
 <template>

playground/src/views/system/role/modules/form.vue

@@ -32,7 +32,7 @@ const permissions = ref<DataNode[]>([]);
 const loadingPermissions = ref(false);
 
 const id = ref();
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<null | SystemRoleApi.SystemRole>({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) return;
@@ -50,7 +50,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
   async onOpenChange(isOpen) {
     if (isOpen) {
-      const data = drawerApi.getData<SystemRoleApi.SystemRole>();
+      const data = drawerApi.getData();
       formApi.reset();
 
       if (data) {
@@ -72,6 +72,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
 });
 
+defineExpose({ drawerApi });
+
 async function loadPermissions() {
   loadingPermissions.value = true;
   try {

playground/src/views/system/user/list.vue

@@ -162,7 +162,7 @@ function onRefresh() {
 }
 
 function onCreate() {
-  formDrawerApi.setData({}).open();
+  formDrawerApi.setData(null).open();
 }
 
 async function loadDeptList() {

playground/src/views/system/user/modules/detail.vue

@@ -13,13 +13,15 @@ const detailData = ref<SystemUserApi.SystemUser>();
 
 const items = computed(() => useDescriptionItems(detailData.value));
 
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<SystemUserApi.SystemUser>({
   onOpenChange(isOpen) {
     if (isOpen) {
-      detailData.value = drawerApi.getData<SystemUserApi.SystemUser>();
+      detailData.value = drawerApi.getData();
     }
   },
 });
+
+defineExpose({ drawerApi });
 </script>
 <template>
   <Drawer :footer="false" :title="$t('common.detail')">

playground/src/views/system/user/modules/form.vue

@@ -31,7 +31,7 @@ const permissions = ref<DataNode[]>([]);
 const loadingPermissions = ref(false);
 
 const id = ref();
-const [Drawer, drawerApi] = useVbenDrawer({
+const [Drawer, drawerApi] = useVbenDrawer<null | SystemUserApi.SystemUser>({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) return;
@@ -49,7 +49,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
   async onOpenChange(isOpen) {
     if (isOpen) {
-      const data = drawerApi.getData<SystemUserApi.SystemUser>();
+      const data = drawerApi.getData();
       formApi.reset();
 
       if (data) {
@@ -71,6 +71,8 @@ const [Drawer, drawerApi] = useVbenDrawer({
   },
 });
 
+defineExpose({ drawerApi });
+
 async function loadPermissions() {
   loadingPermissions.value = true;
   try {