perf: modal and drawer api support chain calls (#5351)

* perf: modal and drawer api support chain calls

* fix: typo

docs/src/components/common-ui/vben-drawer.md

@@ -133,13 +133,13 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | close-icon     | 关闭按钮图标        |
 | extra          | 额外内容(标题右侧)  |
 
-### modalApi
+### drawerApi
 
-| 事件名 | 描述 | 类型 |
+| 方法 | 描述 | 类型 |
 | --- | --- | --- |
-| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>drawerApi` |
 | open | 打开弹窗 | `()=>void` |
 | close | 关闭弹窗 | `()=>void` |
-| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>drawerApi` |
 | getData | 获取共享数据 | `<T>()=>T` |
 | useStore | 获取可响应式状态 | - |

docs/src/components/common-ui/vben-modal.md

@@ -143,11 +143,11 @@ const [Modal, modalApi] = useVbenModal({
 
 ### modalApi
 
-| 事件名 | 描述 | 类型 |
+| 方法 | 描述 | 类型 |
 | --- | --- | --- |
-| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
+| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>modalApi` |
 | open | 打开弹窗 | `()=>void` |
 | close | 关闭弹窗 | `()=>void` |
-| setData | 设置共享数据 | `<T>(data:T)=>void` |
+| setData | 设置共享数据 | `<T>(data:T)=>modalApi` |
 | getData | 获取共享数据 | `<T>()=>T` |
 | useStore | 获取可响应式状态 | - |

docs/src/demos/vben-drawer/dynamic/index.vue

@@ -13,8 +13,7 @@ function open() {
 }
 
 function handleUpdateTitle() {
-  drawerApi.setState({ title: '外部动态标题' });
+  drawerApi.setState({ title: '外部动态标题' }).open();
-  drawerApi.open();
 }
 </script>
 

docs/src/demos/vben-drawer/shared-data/index.vue

@@ -9,11 +9,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 function open() {
-  drawerApi.setData({
+  drawerApi
-    content: '外部传递的数据 content',
+    .setData({
-    payload: '外部传递的数据 payload',
+      content: '外部传递的数据 content',
-  });
+      payload: '外部传递的数据 payload',
-  drawerApi.open();
+    })
+    .open();
 }
 </script>
 

docs/src/demos/vben-modal/dynamic/index.vue

@@ -13,8 +13,7 @@ function openModal() {
 }
 
 function handleUpdateTitle() {
-  modalApi.setState({ title: '外部动态标题' });
+  modalApi.setState({ title: '外部动态标题' }).open();
-  modalApi.open();
 }
 </script>
 

docs/src/demos/vben-modal/shared-data/index.vue

@@ -9,11 +9,12 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 function openModal() {
-  modalApi.setData({
+  modalApi
-    content: '外部传递的数据 content',
+    .setData({
-    payload: '外部传递的数据 payload',
+      content: '外部传递的数据 content',
-  });
+      payload: '外部传递的数据 payload',
-  modalApi.open();
+    })
+    .open();
 }
 </script>
 

packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts

@@ -141,6 +141,7 @@ export class DrawerApi {
 
   setData<T>(payload: T) {
     this.sharedData.payload = payload;
+    return this;
   }
 
   setState(
@@ -153,5 +154,6 @@ export class DrawerApi {
     } else {
       this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
     }
+    return this;
   }
 }

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -151,6 +151,7 @@ export class ModalApi {
 
   setData<T>(payload: T) {
     this.sharedData.payload = payload;
+    return this;
   }
 
   setState(
@@ -163,5 +164,6 @@ export class ModalApi {
     } else {
       this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
     }
+    return this;
   }
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { DrawerPlacement } from '@vben/common-ui';
+import type { DrawerPlacement, DrawerState } from '@vben/common-ui';
 
 import { Page, useVbenDrawer } from '@vben/common-ui';
 
@@ -42,25 +42,21 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
 });
 
 function openBaseDrawer(placement: DrawerPlacement = 'right') {
-  baseDrawerApi.setState({ placement });
+  baseDrawerApi.setState({ placement }).open();
-  baseDrawerApi.open();
 }
 
 function openInContentDrawer(placement: DrawerPlacement = 'right') {
-  inContentDrawerApi.setState({ class: '', placement });
+  const state: Partial<DrawerState> = { class: '', placement };
   if (placement === 'top') {
     // 页面顶部区域的层级只有200，所以设置一个低于200的值，抽屉从顶部滑出来的时候才比较合适
-    inContentDrawerApi.setState({ zIndex: 199 });
+    state.zIndex = 199;
-  } else {
-    inContentDrawerApi.setState({ zIndex: undefined });
   }
-  inContentDrawerApi.open();
+  inContentDrawerApi.setState(state).open();
 }
 
 function openMaxContentDrawer() {
   // 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
-  inContentDrawerApi.setState({ class: 'w-full', placement: 'right' });
+  inContentDrawerApi.setState({ class: 'w-full', placement: 'right' }).open();
-  inContentDrawerApi.open();
 }
 
 function openAutoHeightDrawer() {
@@ -72,24 +68,25 @@ function openDynamicDrawer() {
 }
 
 function handleUpdateTitle() {
-  dynamicDrawerApi.setState({ title: '外部动态标题' });
+  dynamicDrawerApi.setState({ title: '外部动态标题' }).open();
-  dynamicDrawerApi.open();
 }
 
 function openSharedDrawer() {
-  sharedDrawerApi.setData({
+  sharedDrawerApi
-    content: '外部传递的数据 content',
+    .setData({
-    payload: '外部传递的数据 payload',
+      content: '外部传递的数据 content',
-  });
+      payload: '外部传递的数据 payload',
-  sharedDrawerApi.open();
+    })
+    .open();
 }
 
 function openFormDrawer() {
-  formDrawerApi.setData({
+  formDrawerApi
-    // 表单值
+    .setData({
-    values: { field1: 'abc', field2: '123' },
+      // 表单值
-  });
+      values: { field1: 'abc', field2: '123' },
-  formDrawerApi.open();
+    })
+    .open();
 }
 </script>
 

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

@@ -63,24 +63,25 @@ function openDynamicModal() {
 }
 
 function openSharedModal() {
-  sharedModalApi.setData({
+  sharedModalApi
-    content: '外部传递的数据 content',
+    .setData({
-    payload: '外部传递的数据 payload',
+      content: '外部传递的数据 content',
-  });
+      payload: '外部传递的数据 payload',
-  sharedModalApi.open();
+    })
+    .open();
 }
 
 function handleUpdateTitle() {
-  dynamicModalApi.setState({ title: '外部动态标题' });
+  dynamicModalApi.setState({ title: '外部动态标题' }).open();
-  dynamicModalApi.open();
 }
 
 function openFormModal() {
-  formModalApi.setData({
+  formModalApi
-    // 表单值
+    .setData({
-    values: { field1: 'abc' },
+      // 表单值
-  });
+      values: { field1: 'abc' },
-  formModalApi.open();
+    })
+    .open();
 }
 </script>