diff --git a/apps/backend-mock/nitro.config.ts b/apps/backend-mock/nitro.config.ts index b3013298de4..c2d7297fb75 100644 --- a/apps/backend-mock/nitro.config.ts +++ b/apps/backend-mock/nitro.config.ts @@ -1,5 +1,6 @@ import errorHandler from './error'; +process.env.COMPATIBILITY_DATE = new Date().toISOString(); export default defineNitroConfig({ devErrorHandler: errorHandler, errorHandler: '~/error', diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json index 60e919fa343..10c8498f3f9 100644 --- a/apps/web-antd/package.json +++ b/apps/web-antd/package.json @@ -1,6 +1,6 @@ { "name": "@vben/web-antd", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://vben.pro", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/apps/web-antd/src/adapter/vxe-table.ts b/apps/web-antd/src/adapter/vxe-table.ts index e47f893833a..06c3f1a4df3 100644 --- a/apps/web-antd/src/adapter/vxe-table.ts +++ b/apps/web-antd/src/adapter/vxe-table.ts @@ -16,6 +16,10 @@ setupVbenVxeTable({ resizable: true, }, minHeight: 180, + formConfig: { + // 全局禁用vxe-table的表单配置，使用formOptions + enabled: false, + }, proxyConfig: { autoLoad: true, response: { diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json index e4e733fd9ea..507f428ec77 100644 --- a/apps/web-ele/package.json +++ b/apps/web-ele/package.json @@ -1,6 +1,6 @@ { "name": "@vben/web-ele", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://vben.pro", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/apps/web-ele/src/adapter/vxe-table.ts b/apps/web-ele/src/adapter/vxe-table.ts index fa1f38930a7..067451e4646 100644 --- a/apps/web-ele/src/adapter/vxe-table.ts +++ b/apps/web-ele/src/adapter/vxe-table.ts @@ -16,6 +16,10 @@ setupVbenVxeTable({ resizable: true, }, minHeight: 180, + formConfig: { + // 全局禁用vxe-table的表单配置，使用formOptions + enabled: false, + }, proxyConfig: { autoLoad: true, response: { diff --git a/apps/web-naive/package.json b/apps/web-naive/package.json index 1d4dae0b337..9fc512d286a 100644 --- a/apps/web-naive/package.json +++ b/apps/web-naive/package.json @@ -1,6 +1,6 @@ { "name": "@vben/web-naive", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://vben.pro", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/apps/web-naive/src/adapter/vxe-table.ts b/apps/web-naive/src/adapter/vxe-table.ts index 8c521da8d8c..271a5baf2fe 100644 --- a/apps/web-naive/src/adapter/vxe-table.ts +++ b/apps/web-naive/src/adapter/vxe-table.ts @@ -16,6 +16,10 @@ setupVbenVxeTable({ resizable: true, }, minHeight: 180, + formConfig: { + // 全局禁用vxe-table的表单配置，使用formOptions + enabled: false, + }, proxyConfig: { autoLoad: true, response: { diff --git a/docs/package.json b/docs/package.json index db10fe673b5..b63d749d920 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@vben/docs", - "version": "5.4.3", + "version": "5.4.4", "private": true, "scripts": { "build": "vitepress build", diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md index 1b8d72965f7..c795b9dedea 100644 --- a/docs/src/components/common-ui/vben-modal.md +++ b/docs/src/components/common-ui/vben-modal.md @@ -110,12 +110,14 @@ const [Modal, modalApi] = useVbenModal({ 以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。 -| 事件名 | 描述 | 类型 | -| --- | --- | --- | -| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` | -| onCancel | 点击取消按钮触发 | `()=>void` | -| onConfirm | 点击确认按钮触发 | `()=>void` | -| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` | +| 事件名 | 描述 | 类型 | 版本号 | +| --- | --- | --- | --- | +| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` | | +| onCancel | 点击取消按钮触发 | `()=>void` | | +| onClosed | 关闭动画播放完毕时触发 | `()=>void` | >5.4.3 | +| onConfirm | 点击确认按钮触发 | `()=>void` | | +| onOpenChange | 关闭或者打开弹窗时触发 | `(isOpen:boolean)=>void` | | +| onOpened | 打开动画播放完毕时触发 | `()=>void` | >5.4.3 | ### Slots diff --git a/docs/src/en/guide/essentials/development.md b/docs/src/en/guide/essentials/development.md index 287c0a96158..da7cfd8cee2 100644 --- a/docs/src/en/guide/essentials/development.md +++ b/docs/src/en/guide/essentials/development.md @@ -150,6 +150,12 @@ To run the `docs` application: pnpm dev:docs ``` +## Public Static Resources + +If you need to use public static resources in the project, such as images, static HTML, etc., and you want to directly import them in the development process through `src="/xxx.png"`. + +You need to put the resource in the corresponding project's `public/static` directory. The import path for the resource should be `src="/static/xxx.png"`. + ## DevTools The project has a built-in [Vue DevTools](https://github.com/vuejs/devtools-next) plugin, which can be used during development. It is disabled by default, but can be enabled in the `.env.development` file. After enabling it, restart the project: diff --git a/docs/src/en/guide/introduction/quick-start.md b/docs/src/en/guide/introduction/quick-start.md index da51b970e0a..d4829dcefd1 100644 --- a/docs/src/en/guide/introduction/quick-start.md +++ b/docs/src/en/guide/introduction/quick-start.md @@ -10,7 +10,7 @@ outline: deep Before starting the project, ensure that your environment meets the following requirements: -- [Node.js](https://nodejs.org/en) version 20 or above. It is recommended to use [fnm](https://github.com/Schniz/fnm) or [nvm](https://github.com/nvm-sh/nvm) for version management. +- [Node.js](https://nodejs.org/en) version 20.15.0 or above. It is recommended to use [fnm](https://github.com/Schniz/fnm), [nvm](https://github.com/nvm-sh/nvm), or directly use [pnpm](https://pnpm.io/cli/env) for version management. - [Git](https://git-scm.com/) any version. To verify if your environment meets the above requirements, you can check the versions using the following commands: diff --git a/docs/src/guide/essentials/development.md b/docs/src/guide/essentials/development.md index 7e64564f20b..556e4c9dd99 100644 --- a/docs/src/guide/essentials/development.md +++ b/docs/src/guide/essentials/development.md @@ -150,6 +150,12 @@ pnpm dev:ele pnpm dev:docs ``` +## 公共静态资源 + +项目中需要使用到的公共静态资源，如：图片、静态HTML等，需要在开发中通过 `src="/xxx.png"` 直接引入的。 + +需要将资源放在对应项目的 `public/static` 目录下。引入的路径为：`src="/static/xxx.png"`。 + ## DevTools 项目内置了 [Vue DevTools](https://github.com/vuejs/devtools-next) 插件，可以在开发过程中使用。默认关闭，可在`.env.development` 内开启，并重新运行项目即可： diff --git a/docs/src/guide/in-depth/loading.md b/docs/src/guide/in-depth/loading.md index ff89dcb895a..60e69378cad 100644 --- a/docs/src/guide/in-depth/loading.md +++ b/docs/src/guide/in-depth/loading.md @@ -6,7 +6,7 @@ ## 原理 -由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个应用的注入一个全局的 `loading html`。 +由 `vite-plugin-inject-app-loading` 插件实现，插件会在每个应用都注入一个全局的 `loading html`。 ## 关闭 diff --git a/docs/src/guide/introduction/quick-start.md b/docs/src/guide/introduction/quick-start.md index 9863e0d4969..1d7437f9bee 100644 --- a/docs/src/guide/introduction/quick-start.md +++ b/docs/src/guide/introduction/quick-start.md @@ -10,7 +10,7 @@ outline: deep 在启动项目前，你需要确保你的环境满足以下要求： -- [Node.js](https://nodejs.org/en) 20.15.0 及以上版本，推荐使用 [fnm](https://github.com/Schniz/fnm) 或者 [nvm](https://github.com/nvm-sh/nvm) 进行版本管理。 +- [Node.js](https://nodejs.org/en) 20.15.0 及以上版本，推荐使用 [fnm](https://github.com/Schniz/fnm) 、 [nvm](https://github.com/nvm-sh/nvm) 或者直接使用[pnpm](https://pnpm.io/cli/env) 进行版本管理。 - [Git](https://git-scm.com/) 任意版本。 验证你的环境是否满足以上要求，你可以通过以下命令查看版本： diff --git a/internal/lint-configs/commitlint-config/package.json b/internal/lint-configs/commitlint-config/package.json index e32b0e4105c..4c6ebea46ff 100644 --- a/internal/lint-configs/commitlint-config/package.json +++ b/internal/lint-configs/commitlint-config/package.json @@ -1,6 +1,6 @@ { "name": "@vben/commitlint-config", - "version": "5.4.3", + "version": "5.4.4", "private": true, "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", diff --git a/internal/lint-configs/stylelint-config/package.json b/internal/lint-configs/stylelint-config/package.json index 9a18202e378..d492731d832 100644 --- a/internal/lint-configs/stylelint-config/package.json +++ b/internal/lint-configs/stylelint-config/package.json @@ -1,6 +1,6 @@ { "name": "@vben/stylelint-config", - "version": "5.4.3", + "version": "5.4.4", "private": true, "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", diff --git a/internal/node-utils/package.json b/internal/node-utils/package.json index 06377d03e27..76e5b83bc8f 100644 --- a/internal/node-utils/package.json +++ b/internal/node-utils/package.json @@ -1,6 +1,6 @@ { "name": "@vben/node-utils", - "version": "5.4.3", + "version": "5.4.4", "private": true, "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", diff --git a/internal/tailwind-config/build.config.ts b/internal/tailwind-config/build.config.ts index e79fb56fabc..1f3c3c22087 100644 --- a/internal/tailwind-config/build.config.ts +++ b/internal/tailwind-config/build.config.ts @@ -4,7 +4,6 @@ export default defineBuildConfig({ clean: true, declaration: true, entries: ['src/index', './src/postcss.config'], - externals: ['@vben/node-utils'], rollup: { emitCJS: true, }, diff --git a/internal/tailwind-config/package.json b/internal/tailwind-config/package.json index e0c65983cc5..f3062b9cf9e 100644 --- a/internal/tailwind-config/package.json +++ b/internal/tailwind-config/package.json @@ -1,6 +1,6 @@ { "name": "@vben/tailwind-config", - "version": "5.4.3", + "version": "5.4.4", "private": true, "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", @@ -12,7 +12,7 @@ "license": "MIT", "type": "module", "scripts": { - "stub": "pnpm unbuild --stub" + "stub": "pnpm unbuild" }, "files": [ "dist" @@ -48,6 +48,7 @@ "dependencies": { "@iconify/json": "catalog:", "@iconify/tailwind": "catalog:", + "@manypkg/get-packages": "catalog:", "@tailwindcss/nesting": "catalog:", "@tailwindcss/typography": "catalog:", "autoprefixer": "catalog:", @@ -60,7 +61,6 @@ "tailwindcss-animate": "catalog:" }, "devDependencies": { - "@types/postcss-import": "catalog:", - "@vben/node-utils": "workspace:*" + "@types/postcss-import": "catalog:" } } diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts index caee73e7b57..dafaaf91e73 100644 --- a/internal/tailwind-config/src/index.ts +++ b/internal/tailwind-config/src/index.ts @@ -2,9 +2,8 @@ import type { Config } from 'tailwindcss'; import path from 'node:path'; -import { getPackagesSync } from '@vben/node-utils'; - import { addDynamicIconSelectors } from '@iconify/tailwind'; +import { getPackagesSync } from '@manypkg/get-packages'; import typographyPlugin from '@tailwindcss/typography'; import animate from 'tailwindcss-animate'; @@ -12,7 +11,7 @@ import { enterAnimationPlugin } from './plugins/entry'; // import defaultTheme from 'tailwindcss/defaultTheme'; -const { packages } = getPackagesSync(); +const { packages } = getPackagesSync(process.cwd()); const tailwindPackages: string[] = []; diff --git a/internal/tsconfig/package.json b/internal/tsconfig/package.json index f978a12c75f..e8d491e2b8b 100644 --- a/internal/tsconfig/package.json +++ b/internal/tsconfig/package.json @@ -1,6 +1,6 @@ { "name": "@vben/tsconfig", - "version": "5.4.3", + "version": "5.4.4", "private": true, "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json index 18250107b9f..5f674f4769b 100644 --- a/internal/vite-config/package.json +++ b/internal/vite-config/package.json @@ -1,6 +1,6 @@ { "name": "@vben/vite-config", - "version": "5.4.3", + "version": "5.4.4", "private": true, "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", @@ -35,7 +35,6 @@ "html-minifier-terser": "catalog:", "nitropack": "catalog:", "resolve.exports": "catalog:", - "vite-plugin-lib-inject-css": "catalog:", "vite-plugin-pwa": "catalog:", "vite-plugin-vue-devtools": "catalog:" }, diff --git a/internal/vite-config/src/config/common.ts b/internal/vite-config/src/config/common.ts index 2addff0cbfe..653f21040b7 100644 --- a/internal/vite-config/src/config/common.ts +++ b/internal/vite-config/src/config/common.ts @@ -3,7 +3,7 @@ import type { UserConfig } from 'vite'; async function getCommonConfig(): Promise { return { build: { - chunkSizeWarningLimit: 1000, + chunkSizeWarningLimit: 2000, reportCompressedSize: false, sourcemap: false, }, diff --git a/internal/vite-config/src/config/library.ts b/internal/vite-config/src/config/library.ts index 759fc7bc3ff..08b8135207f 100644 --- a/internal/vite-config/src/config/library.ts +++ b/internal/vite-config/src/config/library.ts @@ -19,7 +19,6 @@ function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) { const plugins = await loadLibraryPlugins({ dts: false, - injectLibCss: true, injectMetadata: true, isBuild, mode, diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts index 1a8e7c263ee..691d32249a6 100644 --- a/internal/vite-config/src/plugins/index.ts +++ b/internal/vite-config/src/plugins/index.ts @@ -14,7 +14,6 @@ import { visualizer as viteVisualizerPlugin } from 'rollup-plugin-visualizer'; import viteCompressPlugin from 'vite-plugin-compression'; import viteDtsPlugin from 'vite-plugin-dts'; import { createHtmlPlugin as viteHtmlPlugin } from 'vite-plugin-html'; -import { libInjectCss as viteLibInjectCss } from 'vite-plugin-lib-inject-css'; import { VitePWA } from 'vite-plugin-pwa'; import viteVueDevTools from 'vite-plugin-vue-devtools'; @@ -225,7 +224,7 @@ async function loadLibraryPlugins( ): Promise { // 单独取，否则commonOptions拿不到 const isBuild = options.isBuild; - const { dts, injectLibCss, ...commonOptions } = options; + const { dts, ...commonOptions } = options; const commonPlugins = await loadCommonPlugins(commonOptions); return await loadConditionPlugins([ ...commonPlugins, @@ -233,10 +232,6 @@ async function loadLibraryPlugins( condition: isBuild && !!dts, plugins: () => [viteDtsPlugin({ logLevel: 'error' })], }, - { - condition: injectLibCss, - plugins: () => [viteLibInjectCss()], - }, ]); } diff --git a/internal/vite-config/src/typing.ts b/internal/vite-config/src/typing.ts index 907a723e48b..31683cc75bf 100644 --- a/internal/vite-config/src/typing.ts +++ b/internal/vite-config/src/typing.ts @@ -130,9 +130,6 @@ interface ApplicationPluginOptions extends CommonPluginOptions { interface LibraryPluginOptions extends CommonPluginOptions { /** 开启 dts 输出 */ dts?: boolean | PluginOptions; - - /** 是否注入lib css */ - injectLibCss?: boolean; } type ApplicationOptions = ApplicationPluginOptions; diff --git a/package.json b/package.json index eeb59afdf62..0b9b6e65479 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vben-admin-monorepo", - "version": "5.4.3", + "version": "5.4.4", "private": true, "keywords": [ "monorepo", @@ -107,6 +107,7 @@ } }, "overrides": { + "@ast-grep/napi": "catalog:", "@ctrl/tinycolor": "catalog:", "clsx": "catalog:", "pinia": "catalog:", diff --git a/packages/@core/base/design/package.json b/packages/@core/base/design/package.json index 54495aba44f..6bd979adc38 100644 --- a/packages/@core/base/design/package.json +++ b/packages/@core/base/design/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/design", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { @@ -28,7 +28,7 @@ ".": { "types": "./src/index.ts", "development": "./src/index.ts", - "default": "./dist/index.mjs" + "default": "./dist/style.css" } }, "publishConfig": { diff --git a/packages/@core/base/icons/package.json b/packages/@core/base/icons/package.json index 216d11f1e08..ae7eda6ec0a 100644 --- a/packages/@core/base/icons/package.json +++ b/packages/@core/base/icons/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/icons", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json index 747610b04f2..6541b7772f4 100644 --- a/packages/@core/base/shared/package.json +++ b/packages/@core/base/shared/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/shared", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { @@ -81,10 +81,12 @@ "dependencies": { "@ctrl/tinycolor": "catalog:", "@tanstack/vue-store": "catalog:", + "@types/lodash.get": "catalog:", "@vue/shared": "catalog:", "clsx": "catalog:", "defu": "catalog:", "lodash.clonedeep": "catalog:", + "lodash.get": "catalog:", "nprogress": "catalog:", "tailwind-merge": "catalog:", "theme-colors": "catalog:" diff --git a/packages/@core/base/typings/package.json b/packages/@core/base/typings/package.json index 43863abbf7d..4fee2e31b5d 100644 --- a/packages/@core/base/typings/package.json +++ b/packages/@core/base/typings/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/typings", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json index a0a864550b9..b42b9366282 100644 --- a/packages/@core/composables/package.json +++ b/packages/@core/composables/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/composables", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/packages/@core/preferences/package.json b/packages/@core/preferences/package.json index 5961a1b64b1..6eaca4d640d 100644 --- a/packages/@core/preferences/package.json +++ b/packages/@core/preferences/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/preferences", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/packages/@core/ui-kit/layout-ui/package.json b/packages/@core/ui-kit/layout-ui/package.json index 46f8074d92b..15f0b58e1b4 100644 --- a/packages/@core/ui-kit/layout-ui/package.json +++ b/packages/@core/ui-kit/layout-ui/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/layout-ui", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/packages/@core/ui-kit/menu-ui/package.json b/packages/@core/ui-kit/menu-ui/package.json index 39edef3b935..b421d9e4682 100644 --- a/packages/@core/ui-kit/menu-ui/package.json +++ b/packages/@core/ui-kit/menu-ui/package.json @@ -1,6 +1,6 @@ { "name": "@vben-core/menu-ui", - "version": "5.4.3", + "version": "5.4.4", "homepage": "https://github.com/vbenjs/vue-vben-admin", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "repository": { diff --git a/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/packages/@core/ui-kit/menu-ui/src/components/menu.vue index 004300a16e4..ea7a14c05ee 100644 --- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue +++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue @@ -64,7 +64,6 @@ const activePath = ref(props.defaultActive); const items = ref({}); const subMenus = ref({}); const mouseInChild = ref(false); -const defaultSlots: VNodeArrayChildren = slots.default?.() ?? []; const isMenuPopup = computed(() => { return ( @@ -73,6 +72,9 @@ const isMenuPopup = computed(() => { }); const getSlot = computed(() => { + // 更新插槽内容 + const defaultSlots: VNodeArrayChildren = slots.default?.() ?? []; + const originalSlot = flattedChildren(defaultSlots) as VNodeArrayChildren; const slotDefault = sliceIndex.value === -1 diff --git a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts index e12b144fd62..9c2ef200867 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts @@ -110,4 +110,19 @@ describe('modalApi', () => { expect(modalApi.store.state.title).toBe('Batch Title'); expect(modalApi.store.state.confirmText).toBe('Batch Confirm'); }); + + it('should call onClosed callback when provided', () => { + const onClosed = vi.fn(); + const modalApiWithHook = new ModalApi({ onClosed }); + modalApiWithHook.onClosed(); + expect(onClosed).toHaveBeenCalled(); + }); + + it('should call onOpened callback when provided', () => { + const onOpened = vi.fn(); + const modalApiWithHook = new ModalApi({ onOpened }); + modalApiWithHook.open(); + modalApiWithHook.onOpened(); + expect(onOpened).toHaveBeenCalled(); + }); }); diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts index 932271d8c2e..005949e4c66 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts @@ -6,7 +6,12 @@ import { bindMethods, isFunction } from '@vben-core/shared/utils'; export class ModalApi { private api: Pick< ModalApiOptions, - 'onBeforeClose' | 'onCancel' | 'onConfirm' | 'onOpenChange' + | 'onBeforeClose' + | 'onCancel' + | 'onClosed' + | 'onConfirm' + | 'onOpenChange' + | 'onOpened' >; // private prevState!: ModalState; private state!: ModalState; @@ -23,8 +28,10 @@ export class ModalApi { connectedComponent: _, onBeforeClose, onCancel, + onClosed, onConfirm, onOpenChange, + onOpened, ...storeState } = options; @@ -77,8 +84,10 @@ export class ModalApi { this.api = { onBeforeClose, onCancel, + onClosed, onConfirm, onOpenChange, + onOpened, }; bindMethods(this); } @@ -115,6 +124,15 @@ export class ModalApi { } } + /** + * 弹窗关闭动画播放完毕后的回调 + */ + onClosed() { + if (!this.state.isOpen) { + this.api.onClosed?.(); + } + } + /** * 确认操作 */ @@ -122,6 +140,15 @@ export class ModalApi { this.api.onConfirm?.(); } + /** + * 弹窗打开动画播放完毕后的回调 + */ + onOpened() { + if (this.state.isOpen) { + this.api.onOpened?.(); + } + } + open() { this.store.setState((prev) => ({ ...prev, isOpen: true })); } diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts index 360647c1bdc..a824b98a6ed 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts @@ -139,6 +139,11 @@ export interface ModalApiOptions extends ModalState { * 点击取消按钮的回调 */ onCancel?: () => void; + /** + * 弹窗关闭动画结束的回调 + * @returns + */ + onClosed?: () => void; /** * 点击确定按钮的回调 */ @@ -149,4 +154,9 @@ export interface ModalApiOptions extends ModalState { * @returns */ onOpenChange?: (isOpen: boolean) => void; + /** + * 弹窗打开动画结束的回调 + * @returns + */ + onOpened?: () => void; } diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue index 8915dd3d96c..9bacb3966c4 100644 --- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue +++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue @@ -188,10 +188,12 @@ function handleFocusOutside(e: Event) { :show-close="closable" close-class="top-3" @close-auto-focus="handleFocusOutside" + @closed="() => modalApi?.onClosed()" @escape-key-down="escapeKeyDown" @focus-outside="handleFocusOutside" @interact-outside="interactOutside" @open-auto-focus="handerOpenAutoFocus" + @opened="() => modalApi?.onOpened()" @pointer-down-outside="pointerDownOutside" > (), { showClose: true }, ); -const emits = defineEmits<{ close: [] } & DialogContentEmits>(); +const emits = defineEmits< + { close: []; closed: []; opened: [] } & DialogContentEmits +>(); const delegatedProps = computed(() => { const { @@ -44,7 +46,13 @@ const delegatedProps = computed(() => { const forwarded = useForwardPropsEmits(delegatedProps, emits); const contentRef = ref | null>(null); - +function onAnimationEnd() { + if (props.open) { + emits('opened'); + } else { + emits('closed'); + } +} defineExpose({ getContentRef: () => contentRef.value, }); @@ -57,6 +65,7 @@ defineExpose({ formApi, +});