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

feat: support set default props for drawer and modal #5390

Merged
merged 2 commits into from
Jan 14, 2025
Merged

feat: support set default props for drawer and modal #5390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
736bc88
feat: support set default props for drawer and modal
mynetfan Jan 14, 2025
8a789bf
docs: fix typo
mynetfan Jan 14, 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
16 changes: 15 additions & 1 deletion apps/web-antd/src/bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { createApp, watchEffect } from 'vue';

import { registerAccessDirective } from '@vben/access';
import { initTippy } from '@vben/common-ui';
import {
initTippy,
setDefaultDrawerProps,
setDefaultModalProps,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
Expand All @@ -19,6 +23,16 @@ async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();

// 设置弹窗的默认配置
setDefaultModalProps({
fullscreenButton: false,
zIndex: 1020,
});
// 设置抽屉的默认配置
setDefaultDrawerProps({
zIndex: 1020,
});

const app = createApp(App);

// 国际化 i18n 配置
Expand Down
15 changes: 14 additions & 1 deletion apps/web-ele/src/bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { createApp, watchEffect } from 'vue';

import { registerAccessDirective } from '@vben/access';
import { initTippy } from '@vben/common-ui';
import {
initTippy,
setDefaultDrawerProps,
setDefaultModalProps,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
Expand All @@ -19,6 +23,15 @@ import { router } from './router';
async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();
// 设置弹窗的默认配置
setDefaultModalProps({
fullscreenButton: false,
zIndex: 2000,
});
// 设置抽屉的默认配置
setDefaultDrawerProps({
zIndex: 2000,
});
const app = createApp(App);

// 注册Element Plus提供的v-loading指令
Expand Down
17 changes: 16 additions & 1 deletion apps/web-naive/src/bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { createApp, watchEffect } from 'vue';

import { registerAccessDirective } from '@vben/access';
import { initTippy } from '@vben/common-ui';
import {
initTippy,
setDefaultDrawerProps,
setDefaultModalProps,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
Expand All @@ -18,6 +22,17 @@ import { router } from './router';
async function bootstrap(namespace: string) {
// 初始化组件适配器
initComponentAdapter();

// 设置弹窗的默认配置
setDefaultModalProps({
fullscreenButton: false,
zIndex: 2000,
});
// 设置抽屉的默认配置
setDefaultDrawerProps({
zIndex: 2000,
});

const app = createApp(App);

// 国际化 i18n 配置
Expand Down
1 change: 1 addition & 0 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 @@ -55,6 +55,7 @@ Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 dra
- `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
- 如果抽屉的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultDrawerProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。

:::

Expand Down
1 change: 1 addition & 0 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 @@ -61,6 +61,7 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
- `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenModal`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
- 如果弹窗的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultModalProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。

:::

Expand Down
2 changes: 1 addition & 1 deletion packages/@core/ui-kit/popup-ui/src/drawer/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type * from './drawer';
export { default as VbenDrawer } from './drawer.vue';
export { useVbenDrawer } from './use-drawer';
export { setDefaultDrawerProps, useVbenDrawer } from './use-drawer';
7 changes: 7 additions & 0 deletions packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ import VbenDrawer from './drawer.vue';

const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');

const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {};

export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
Object.assign(DEFAULT_DRAWER_PROPS, props);
}

export function useVbenDrawer<
TParentDrawerProps extends DrawerProps = DrawerProps,
>(options: DrawerApiOptions = {}) {
Expand Down Expand Up @@ -69,6 +75,7 @@ export function useVbenDrawer<
const injectData = inject<any>(USER_DRAWER_INJECT_KEY, {});

const mergedOptions = {
...DEFAULT_DRAWER_PROPS,
...injectData.options,
...options,
} as DrawerApiOptions;
Expand Down
2 changes: 1 addition & 1 deletion packages/@core/ui-kit/popup-ui/src/modal/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export type * from './modal';
export { default as VbenModal } from './modal.vue';
export { useVbenModal } from './use-modal';
export { setDefaultModalProps, useVbenModal } from './use-modal';
7 changes: 7 additions & 0 deletions packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ import VbenModal from './modal.vue';

const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');

const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {};

export function setDefaultModalProps(props: Partial<ModalProps>) {
Object.assign(DEFAULT_MODAL_PROPS, props);
}

export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
options: ModalApiOptions = {},
) {
Expand Down Expand Up @@ -68,6 +74,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
const injectData = inject<any>(USER_MODAL_INJECT_KEY, {});

const mergedOptions = {
...DEFAULT_MODAL_PROPS,
...injectData.options,
...options,
} as ModalApiOptions;
Expand Down
4 changes: 4 additions & 0 deletions packages/styles/src/antd/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,7 @@
.ant-app .form-valid-error .ant-picker-focused {
box-shadow: 0 0 0 2px rgb(255 38 5 / 6%);
}

.ant-message {
z-index: 1050;
}
16 changes: 15 additions & 1 deletion playground/src/bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { createApp, watchEffect } from 'vue';

import { registerAccessDirective } from '@vben/access';
import { initTippy } from '@vben/common-ui';
import {
initTippy,
setDefaultDrawerProps,
setDefaultModalProps,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { initStores } from '@vben/stores';
import '@vben/styles';
Expand All @@ -20,6 +24,16 @@ async function bootstrap(namespace: string) {
// 初始化组件适配器
await initComponentAdapter();

// 设置弹窗的默认配置
setDefaultModalProps({
fullscreenButton: false,
zIndex: 1020,
});
// 设置抽屉的默认配置
setDefaultDrawerProps({
zIndex: 1020,
});

const app = createApp(App);

// 国际化 i18n 配置
Expand Down
Loading