feat(dialog): add beforeClose prop to DialogClose component to control closing behavior

Author: honghuangdc

headless/src/components/alert-dialog/alert-dialog-close.vue

@@ -13,7 +13,7 @@ const { setCancelElement } = useAlertDialogContentContext('AlertDialogClose');
 </script>
 
 <template>
-  <DialogClose :ref="setCancelElement" :as="as" :as-child="asChild">
+  <DialogClose :ref="setCancelElement" :as="as" :as-child="asChild" :before-close="beforeClose">
     <slot />
   </DialogClose>
 </template>

headless/src/components/dialog/dialog-close.vue

@@ -13,10 +13,17 @@ const props = defineProps<DialogCloseProps>();
 const { onOpenChange } = useDialogRootContext('DialogClose');
 
 const tag = computed(() => (props.as === 'button' ? 'button' : undefined));
+
+const onClose = async () => {
+  const result = await props.beforeClose?.();
+  if (result !== false) {
+    onOpenChange(false);
+  }
+};
 </script>
 
 <template>
-  <Primitive :as="as" :as-child="asChild" :type="tag" @click="onOpenChange(false)">
+  <Primitive :as="as" :as-child="asChild" :type="tag" @click="onClose">
     <slot />
   </Primitive>
 </template>

headless/src/components/dialog/types.ts

@@ -5,6 +5,7 @@ import type {
   DismissableLayerProps,
   FocusScopeEmits,
   ForceMountProps,
+  MaybePromise,
   PropsToContext,
   TrapFocusProps
 } from '../../types';
@@ -56,7 +57,13 @@ export interface DialogTitleProps extends /** @vue-ignore */ HTMLAttributes {}
 
 export interface DialogDescriptionProps extends /** @vue-ignore */ HTMLAttributes {}
 
-export interface DialogCloseProps extends PrimitiveProps, /** @vue-ignore */ ButtonHTMLAttributes {}
+export interface DialogCloseProps extends PrimitiveProps, /** @vue-ignore */ ButtonHTMLAttributes {
+  /**
+   * Called before the dialog is closed. Can be used to prevent the dialog from closing.
+   * @returns A boolean or a promise that resolves to a boolean. if returns `false`, the dialog will not close.
+   */
+  beforeClose?: () => MaybePromise<boolean>;
+}
 
 export interface DialogHeaderProps extends /** @vue-ignore */ HTMLAttributes {}
 

src/components/alert-dialog/alert-dialog-action.vue

@@ -19,7 +19,7 @@ const { size } = useSizeContext('AlertDialogAction');
 </script>
 
 <template>
-  <DialogClose as-child>
+  <DialogClose as-child :before-close="beforeClose">
     <slot name="content">
       <Button v-bind="forwardedProps" :size="size">
         <slot>{{ text }}</slot>

src/components/alert-dialog/types.ts

@@ -1,4 +1,4 @@
-import type { AlertDialogRootEmits } from '@soybeanjs/headless';
+import type { AlertDialogRootEmits, MaybePromise } from '@soybeanjs/headless';
 import type { ThemeColor } from '@/theme';
 import type { DialogProps } from '../dialog/types';
 import type { ButtonProps } from '../button/types';
@@ -27,4 +27,9 @@ export interface AlertDialogActionProps extends ButtonProps {
    * @defaultValue 'Confirm'
    */
   text?: string;
+  /**
+   * Called before the dialog is closed. Can be used to prevent the dialog from closing.
+   * @returns A boolean or a promise that resolves to a boolean. if returns `false`, the dialog will not close.
+   */
+  beforeClose?: () => MaybePromise<boolean>;
 }

src/components/dialog/dialog-close.vue

@@ -13,7 +13,7 @@ const { size } = useSizeContext('DialogClose');
 </script>
 
 <template>
-  <DialogClose :size="size" as-child>
+  <DialogClose :size="size" as-child :before-close="beforeClose">
     <slot />
   </DialogClose>
 </template>