This commit is contained in:
dap 2025-04-03 14:02:12 +08:00
commit 63e13069ea
9 changed files with 95 additions and 62 deletions

View File

@ -38,9 +38,16 @@ Alert提供的功能与Modal类似但只适用于简单应用场景。例如
/** 预置的图标类型 */
export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
export type BeforeCloseScope = {
/** 是否为点击确认按钮触发的关闭 */
isConfirm: boolean;
};
export type AlertProps = {
/** 关闭前的回调如果返回false则终止关闭 */
beforeClose?: () => boolean | Promise<boolean | undefined> | undefined;
beforeClose?: (
scope: BeforeCloseScope,
) => boolean | Promise<boolean | undefined> | undefined;
/** 边框 */
bordered?: boolean;
/** 取消按钮的标题 */
@ -81,7 +88,7 @@ export function alert(
/**
* 弹出输入框的函数签名。
* 参数beforeClose会传入用户当前输入的值
* beforeClose的参数会传入用户当前输入的值
* component指定接受用户输入的组件默认为Input
* componentProps 为输入组件设置的属性数据
* defaultValue 默认的值
@ -90,7 +97,10 @@ export function alert(
export async function prompt<T = any>(
options: Omit<AlertProps, 'beforeClose'> & {
beforeClose?: (
val: T,
scope: BeforeCloseScope & {
/** 输入组件的当前值 */
value: T;
},
) => boolean | Promise<boolean | undefined> | undefined;
component?: Component;
componentProps?: Recordable<any>;

View File

@ -20,8 +20,11 @@ function showIconConfirm() {
function showAsyncConfirm() {
confirm({
beforeClose() {
return new Promise((resolve) => setTimeout(resolve, 2000));
beforeClose({ isConfirm }) {
if (isConfirm) {
// false
return new Promise((resolve) => setTimeout(resolve, 2000));
}
},
content: 'This is an alert message with async confirm',
icon: 'success',

View File

@ -96,7 +96,7 @@
"node": ">=20.10.0",
"pnpm": ">=9.12.0"
},
"packageManager": "pnpm@9.15.7",
"packageManager": "pnpm@9.15.9",
"pnpm": {
"peerDependencyRules": {
"allowedVersions": {

View File

@ -2,7 +2,7 @@ import type { Component } from 'vue';
import type { Recordable } from '@vben-core/typings';
import type { AlertProps } from './alert';
import type { AlertProps, BeforeCloseScope } from './alert';
import { h, ref, render } from 'vue';
@ -131,9 +131,10 @@ export function vbenConfirm(
export async function vbenPrompt<T = any>(
options: Omit<AlertProps, 'beforeClose'> & {
beforeClose?: (
val: T,
) => boolean | Promise<boolean | undefined> | undefined;
beforeClose?: (scope: {
isConfirm: boolean;
value: T | undefined;
}) => boolean | Promise<boolean | undefined> | undefined;
component?: Component;
componentProps?: Recordable<any>;
defaultValue?: T;
@ -165,9 +166,12 @@ export async function vbenPrompt<T = any>(
contents.push(componentRef);
const props: AlertProps & Recordable<any> = {
...delegated,
async beforeClose() {
async beforeClose(scope: BeforeCloseScope) {
if (delegated.beforeClose) {
return await delegated.beforeClose(modelValue.value);
return await delegated.beforeClose({
...scope,
value: modelValue.value,
});
}
},
content: h(

View File

@ -2,9 +2,15 @@ import type { Component } from 'vue';
export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning';
export type BeforeCloseScope = {
isConfirm: boolean;
};
export type AlertProps = {
/** 关闭前的回调如果返回false则终止关闭 */
beforeClose?: () => boolean | Promise<boolean | undefined> | undefined;
beforeClose?: (
scope: BeforeCloseScope,
) => boolean | Promise<boolean | undefined> | undefined;
/** 边框 */
bordered?: boolean;
/** 取消按钮的标题 */

View File

@ -92,15 +92,17 @@ function handleConfirm() {
isConfirm.value = true;
emits('confirm');
}
function handleCancel() {
open.value = false;
isConfirm.value = false;
}
const loading = ref(false);
async function handleOpenChange(val: boolean) {
if (!val && props.beforeClose) {
loading.value = true;
try {
const res = await props.beforeClose();
const res = await props.beforeClose({ isConfirm: isConfirm.value });
if (res !== false) {
open.value = false;
}
@ -141,6 +143,7 @@ async function handleOpenChange(val: boolean) {
size="icon"
class="rounded-full"
:disabled="loading"
@click="handleCancel"
>
<X class="text-muted-foreground size-4" />
</VbenButton>
@ -154,22 +157,20 @@ async function handleOpenChange(val: boolean) {
<VbenLoading v-if="loading" :spinning="loading" />
</AlertDialogDescription>
<div class="flex justify-end gap-x-2">
<AlertDialogCancel
v-if="showCancel"
@click="handleCancel"
:disabled="loading"
>
<AlertDialogCancel v-if="showCancel" :disabled="loading">
<component
:is="components.DefaultButton || VbenButton"
variant="ghost"
@click="handleCancel"
>
{{ cancelText || $t('cancel') }}
</component>
</AlertDialogCancel>
<AlertDialogAction @click="handleConfirm">
<AlertDialogAction>
<component
:is="components.PrimaryButton || VbenButton"
:loading="loading"
@click="handleConfirm"
>
{{ confirmText || $t('confirm') }}
</component>

View File

@ -110,3 +110,11 @@ html[data-vxe-ui-theme='dark'] .vxe-grid {
.vxe-tools--operate:not(:has(button)) {
margin-left: 0;
}
.vxe-grid--layout-header-wrapper {
overflow: visible;
}
.vxe-grid--layout-body-content-wrapper {
overflow: hidden;
}

View File

@ -129,7 +129,8 @@ onBeforeUnmount(() => {
function openConfirm() {
confirm({
beforeClose() {
beforeClose({ isConfirm }) {
if (!isConfirm) return;
//
return new Promise((resolve) => {
setTimeout(() => {
@ -150,8 +151,8 @@ function openConfirm() {
async function openPrompt() {
prompt<string>({
async beforeClose(val) {
if (val === '芝士') {
async beforeClose({ isConfirm, value }) {
if (isConfirm && value === '芝士') {
message.error('不能吃芝士');
return false;
}

View File

@ -21,22 +21,22 @@ catalog:
'@commitlint/cli': ^19.8.0
'@commitlint/config-conventional': ^19.8.0
'@ctrl/tinycolor': ^4.1.0
'@eslint/js': ^9.22.0
'@eslint/js': ^9.23.0
'@faker-js/faker': ^9.6.0
'@iconify/json': ^2.2.314
'@iconify/json': ^2.2.323
'@iconify/tailwind': ^1.2.0
'@iconify/vue': ^4.3.0
'@intlify/core-base': ^11.1.2
'@intlify/unplugin-vue-i18n': ^6.0.3
'@intlify/unplugin-vue-i18n': ^6.0.5
'@jspm/generator': ^2.5.1
'@manypkg/get-packages': ^2.2.2
'@nolebase/vitepress-plugin-git-changelog': ^2.15.0
'@playwright/test': ^1.51.0
'@pnpm/workspace.read-manifest': ^1000.1.1
'@nolebase/vitepress-plugin-git-changelog': ^2.15.1
'@playwright/test': ^1.51.1
'@pnpm/workspace.read-manifest': ^1000.1.2
'@stylistic/stylelint-plugin': ^3.1.2
'@tailwindcss/nesting': 0.0.0-insiders.565cd3e
'@tailwindcss/typography': ^0.5.16
'@tanstack/vue-query': ^5.67.2
'@tanstack/vue-query': ^5.71.1
'@tanstack/vue-store': ^0.7.0
'@types/archiver': ^6.0.3
'@types/eslint': ^9.6.1
@ -45,19 +45,19 @@ catalog:
'@types/lodash.clonedeep': ^4.5.9
'@types/lodash.get': ^4.4.9
'@types/lodash.isequal': ^4.5.8
'@types/lodash.set': ^4.3.2
'@types/node': ^22.13.10
'@types/lodash.set': ^4.3.9
'@types/node': ^22.13.17
'@types/nprogress': ^0.2.3
'@types/postcss-import': ^14.0.3
'@types/qrcode': ^1.5.5
'@types/qs': ^6.9.18
'@types/sortablejs': ^1.15.8
'@typescript-eslint/eslint-plugin': ^8.26.0
'@typescript-eslint/parser': ^8.26.0
'@typescript-eslint/eslint-plugin': ^8.29.0
'@typescript-eslint/parser': ^8.29.0
'@vee-validate/zod': ^4.15.0
'@vite-pwa/vitepress': ^0.5.3
'@vitejs/plugin-vue': ^5.2.1
'@vitejs/plugin-vue-jsx': ^4.1.1
'@vite-pwa/vitepress': ^0.5.4
'@vitejs/plugin-vue': ^5.2.3
'@vitejs/plugin-vue-jsx': ^4.1.2
'@vue/reactivity': ^3.5.13
'@vue/shared': ^3.5.13
'@vue/test-utils': ^2.4.6
@ -66,8 +66,8 @@ catalog:
'@vueuse/integrations': ^12.8.2
ant-design-vue: ^4.2.6
archiver: ^7.0.1
autoprefixer: ^10.4.20
axios: ^1.8.2
autoprefixer: ^10.4.21
axios: ^1.8.4
axios-mock-adapter: ^2.1.0
cac: ^6.7.14
chalk: ^5.4.1
@ -76,7 +76,7 @@ catalog:
class-variance-authority: ^0.7.1
clsx: ^2.1.1
commitlint-plugin-function-rules: ^4.0.1
consola: ^3.4.0
consola: ^3.4.2
cross-env: ^7.0.3
cspell: 8.17.2
cssnano: ^7.0.6
@ -87,18 +87,18 @@ catalog:
depcheck: ^1.4.7
dotenv: ^16.4.7
echarts: ^5.6.0
element-plus: ^2.9.6
eslint: ^9.22.0
element-plus: ^2.9.7
eslint: ^9.23.0
eslint-config-turbo: ^2.4.4
eslint-plugin-command: ^0.2.7
eslint-plugin-eslint-comments: ^3.2.0
eslint-plugin-import-x: ^4.6.1
eslint-plugin-jsdoc: ^50.6.3
eslint-plugin-jsonc: ^2.19.1
eslint-plugin-n: ^17.16.2
eslint-plugin-import-x: ^4.10.0
eslint-plugin-jsdoc: ^50.6.9
eslint-plugin-jsonc: ^2.20.0
eslint-plugin-n: ^17.17.0
eslint-plugin-no-only-tests: ^3.3.0
eslint-plugin-perfectionist: ^4.10.0
eslint-plugin-prettier: ^5.2.3
eslint-plugin-perfectionist: ^4.11.0
eslint-plugin-prettier: ^5.2.5
eslint-plugin-regexp: ^2.7.0
eslint-plugin-unicorn: ^56.0.1
eslint-plugin-unused-imports: ^4.1.4
@ -115,7 +115,7 @@ catalog:
is-ci: ^4.1.0
jsonc-eslint-parser: ^2.4.0
jsonwebtoken: ^9.0.2
lint-staged: ^15.4.3
lint-staged: ^15.5.0
lodash.clonedeep: ^4.5.0
lodash.get: ^4.4.2
lodash.set: ^4.3.2
@ -123,13 +123,13 @@ catalog:
lucide-vue-next: ^0.469.0
medium-zoom: ^1.1.0
naive-ui: ^2.41.0
nitropack: ^2.11.6
nitropack: ^2.11.8
nprogress: ^0.2.0
ora: ^8.2.0
pinia: ^2.3.1
pinia-plugin-persistedstate: ^4.2.0
pkg-types: ^1.3.1
playwright: ^1.51.0
playwright: ^1.51.1
postcss: ^8.5.3
postcss-antd-fixes: ^0.2.0
postcss-html: ^1.8.0
@ -144,11 +144,11 @@ catalog:
radix-vue: ^1.9.17
resolve.exports: ^2.0.3
rimraf: ^6.0.1
rollup: ^4.35.0
rollup: ^4.39.0
rollup-plugin-visualizer: ^5.14.0
sass: ^1.85.1
sass: ^1.86.1
sortablejs: ^1.15.6
stylelint: ^16.15.0
stylelint: ^16.17.0
stylelint-config-recess-order: ^5.1.1
stylelint-config-recommended: ^14.0.1
stylelint-config-recommended-scss: ^14.1.0
@ -163,29 +163,29 @@ catalog:
theme-colors: ^0.1.0
tippy.js: ^6.2.5
turbo: ^2.4.4
typescript: ^5.7.3
typescript: ^5.8.2
unbuild: ^3.5.0
unplugin-element-plus: ^0.9.1
vee-validate: ^4.15.0
vite: ^6.2.1
vite: ^6.2.4
vite-plugin-compression: ^0.5.1
vite-plugin-dts: ^4.5.3
vite-plugin-html: ^3.2.2
vite-plugin-lazy-import: ^1.0.7
vite-plugin-pwa: ^0.21.1
vite-plugin-pwa: ^0.21.2
vite-plugin-vue-devtools: ^7.7.2
vitepress: ^1.6.3
vitepress-plugin-group-icons: ^1.3.6
vitepress-plugin-group-icons: ^1.3.8
vitest: ^2.1.9
vue: ^3.5.13
vue-eslint-parser: ^9.4.3
vue-i18n: ^11.1.2
vue-json-viewer: ^3.0.4
vue-router: ^4.5.0
vue-tippy: ^6.6.0
vue-tippy: ^6.7.0
vue-tsc: 2.1.10
vxe-pc-ui: ^4.4.8
vxe-table: 4.10.0
vxe-pc-ui: ^4.5.11
vxe-table: ^4.12.5
watermark-js-plus: ^1.5.8
zod: ^3.24.2
zod-defaults: ^0.1.3