Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: modal and drawer api support chain calls #5351

Merged
merged 2 commits into from
Jan 11, 2025
Merged

perf: modal and drawer api support chain calls #5351

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1cfb9e
perf: modal and drawer api support chain calls
mynetfan Jan 11, 2025
3817d5a
fix: typo
mynetfan Jan 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/src/components/common-ui/vben-drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | 获取可响应式状态 | - |
6 changes: 3 additions & 3 deletions docs/src/components/common-ui/vben-modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,11 +143,11 @@ const [Modal, modalApi] = useVbenModal({

### modalApi

| 事件名 | 描述 | 类型 |
| 方法 | 描述 | 类型 |
| --- | --- | --- |
| setState | 动态设置弹窗状态属性 | `setState(props) \| setState((prev)=>(props))` |
| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial<ModalState>)\| Partial<ModalState>)=>modelApi` |
mynetfan marked this conversation as resolved.
Show resolved Hide resolved
| open | 打开弹窗 | `()=>void` |
| close | 关闭弹窗 | `()=>void` |
| setData | 设置共享数据 | `<T>(data:T)=>void` |
| setData | 设置共享数据 | `<T>(data:T)=>modelApi` |
| getData | 获取共享数据 | `<T>()=>T` |
| useStore | 获取可响应式状态 | - |
3 changes: 1 addition & 2 deletions docs/src/demos/vben-drawer/dynamic/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ function open() {
}

function handleUpdateTitle() {
drawerApi.setState({ title: '外部动态标题' });
drawerApi.open();
drawerApi.setState({ title: '外部动态标题' }).open();
}
</script>

Expand Down
11 changes: 6 additions & 5 deletions docs/src/demos/vben-drawer/shared-data/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
});

function open() {
drawerApi.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
});
drawerApi.open();
drawerApi
.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
})
.open();
}
</script>

Expand Down
3 changes: 1 addition & 2 deletions docs/src/demos/vben-modal/dynamic/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ function openModal() {
}

function handleUpdateTitle() {
modalApi.setState({ title: '外部动态标题' });
modalApi.open();
modalApi.setState({ title: '外部动态标题' }).open();
}
</script>

Expand Down
11 changes: 6 additions & 5 deletions docs/src/demos/vben-modal/shared-data/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ const [Modal, modalApi] = useVbenModal({
});

function openModal() {
modalApi.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
});
modalApi.open();
modalApi
.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
})
.open();
}
</script>

Expand Down
2 changes: 2 additions & 0 deletions packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export class DrawerApi {

setData<T>(payload: T) {
this.sharedData.payload = payload;
return this;
}

setState(
Expand All @@ -153,5 +154,6 @@ export class DrawerApi {
} else {
this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
}
return this;
}
}
2 changes: 2 additions & 0 deletions packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ export class ModalApi {

setData<T>(payload: T) {
this.sharedData.payload = payload;
return this;
}

setState(
Expand All @@ -163,5 +164,6 @@ export class ModalApi {
} else {
this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
}
return this;
}
}
41 changes: 19 additions & 22 deletions playground/src/views/examples/drawer/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -42,25 +42,21 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
});

function openBaseDrawer(placement: DrawerPlacement = 'right') {
baseDrawerApi.setState({ placement });
baseDrawerApi.open();
baseDrawerApi.setState({ placement }).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 });
} else {
inContentDrawerApi.setState({ zIndex: undefined });
state.zIndex = 199;
}
inContentDrawerApi.open();
inContentDrawerApi.setState(state).open();
}

function openMaxContentDrawer() {
// 这里只是用来演示方便。实际上自己使用的时候可以直接将这些配置卸载Drawer的属性里
inContentDrawerApi.setState({ class: 'w-full', placement: 'right' });
inContentDrawerApi.open();
inContentDrawerApi.setState({ class: 'w-full', placement: 'right' }).open();
}

function openAutoHeightDrawer() {
Expand All @@ -72,24 +68,25 @@ function openDynamicDrawer() {
}

function handleUpdateTitle() {
dynamicDrawerApi.setState({ title: '外部动态标题' });
dynamicDrawerApi.open();
dynamicDrawerApi.setState({ title: '外部动态标题' }).open();
}

function openSharedDrawer() {
sharedDrawerApi.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
});
sharedDrawerApi.open();
sharedDrawerApi
.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
})
.open();
}

function openFormDrawer() {
formDrawerApi.setData({
// 表单值
values: { field1: 'abc', field2: '123' },
});
formDrawerApi.open();
formDrawerApi
.setData({
// 表单值
values: { field1: 'abc', field2: '123' },
})
.open();
}
</script>

Expand Down
25 changes: 13 additions & 12 deletions playground/src/views/examples/modal/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,24 +63,25 @@ function openDynamicModal() {
}

function openSharedModal() {
sharedModalApi.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
});
sharedModalApi.open();
sharedModalApi
.setData({
content: '外部传递的数据 content',
payload: '外部传递的数据 payload',
})
.open();
}

function handleUpdateTitle() {
dynamicModalApi.setState({ title: '外部动态标题' });
dynamicModalApi.open();
dynamicModalApi.setState({ title: '外部动态标题' }).open();
}

function openFormModal() {
formModalApi.setData({
// 表单值
values: { field1: 'abc' },
});
formModalApi.open();
formModalApi
.setData({
// 表单值
values: { field1: 'abc' },
})
.open();
}
</script>

Expand Down
Loading