⬅️ Back to Table of Contents

📄 useConfirmDialog

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	8
⚡ Async/Await Patterns	2
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Async/Await Patterns
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useConfirmDialog/index.ts

📦 Imports

Name	Source
EventHook	@vueuse/shared
EventHookOn	@vueuse/shared
ComputedRef	vue
ShallowRef	vue
createEventHook	@vueuse/shared
noop	@vueuse/shared
computed	vue
shallowRef	vue

---

Async/Await Patterns

Type	Function	Await Expressions	Promise Chains
promise-chain	useConfirmDialog	none	new Promise(...)
promise-chain	reveal	none	new Promise(...)

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useConfirmDialog(revealed: ShallowRef<boolean>): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>

Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.

Parameters:

• revealed any: boolean ref that handles a modal window

See: https://vueuse.org/useConfirmDialog/

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
 *
 * @see https://vueuse.org/useConfirmDialog/
 * @param revealed `boolean` `ref` that handles a modal window
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• createEventHook (from @vueuse/shared)
• revealHook.trigger
• confirmHook.trigger
• _resolve
• cancelHook.trigger
• computed (from vue)

Code

export function useConfirmDialog<
  RevealData = any,
  ConfirmData = any,
  CancelData = any,
>(
  revealed: ShallowRef<boolean> = shallowRef(false),
): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
  const confirmHook: EventHook = createEventHook<ConfirmData>()
  const cancelHook: EventHook = createEventHook<CancelData>()
  const revealHook: EventHook = createEventHook<RevealData>()

  let _resolve: (arg0: UseConfirmDialogRevealResult<ConfirmData, CancelData>) => void = noop

  const reveal = (data?: RevealData) => {
    revealHook.trigger(data)
    revealed.value = true

    return new Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>((resolve) => {
      _resolve = resolve
    })
  }

  const confirm = (data?: ConfirmData) => {
    revealed.value = false
    confirmHook.trigger(data)

    _resolve({ data, isCanceled: false })
  }

  const cancel = (data?: CancelData) => {
    revealed.value = false
    cancelHook.trigger(data)
    _resolve({ data, isCanceled: true })
  }

  return {
    isRevealed: computed(() => revealed.value),
    reveal,
    confirm,
    cancel,
    onReveal: revealHook.on,
    onConfirm: confirmHook.on,
    onCancel: cancelHook.on,
  }
}

Internal helpers

Declared inside another function in this file.

reveal(data: RevealData): Promise<UseConfirmDialogRevealResult<ConfirmData, CancelDat…

Parameters:

• data RevealData

Returns: Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>

Calls:

• revealHook.trigger

Code

(data?: RevealData) => {
    revealHook.trigger(data)
    revealed.value = true

    return new Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>((resolve) => {
      _resolve = resolve
    })
  }

confirm(data: ConfirmData): void

Parameters:

• data ConfirmData

Returns: void

Calls:

• confirmHook.trigger
• _resolve

Code

(data?: ConfirmData) => {
    revealed.value = false
    confirmHook.trigger(data)

    _resolve({ data, isCanceled: false })
  }

cancel(data: CancelData): void

Parameters:

• data CancelData

Returns: void

Calls:

• cancelHook.trigger
• _resolve

Code

(data?: CancelData) => {
    revealed.value = false
    cancelHook.trigger(data)
    _resolve({ data, isCanceled: true })
  }

---

Interfaces

UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>

Interface Code

export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
  /**
   * Revealing state
   */
  isRevealed: ComputedRef<boolean>

  /**
   * Opens the dialog.
   * Create promise and return it. Triggers `onReveal` hook.
   */
  reveal: (data?: RevealData) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>

  /**
   * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
   * Can accept any data and to pass it to `onConfirm` hook.
   */
  confirm: (data?: ConfirmData) => void

  /**
   * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
   * Can accept any data and to pass it to `onCancel` hook.
   */
  cancel: (data?: CancelData) => void

  /**
   * Event Hook to be triggered right before dialog creating.
   */
  onReveal: EventHookOn<RevealData>

  /**
   * Event Hook to be called on `confirm()`.
   * Gets data object from `confirm` function.
   */
  onConfirm: EventHookOn<ConfirmData>

  /**
   * Event Hook to be called on `cancel()`.
   * Gets data object from `cancel` function.
   */
  onCancel: EventHookOn<CancelData>
}

Properties

Name	Type	Optional	Description
isRevealed	ComputedRef<boolean>	✗	not shown
reveal	(data?: RevealData) => Promise<UseConfirmDialogRevealResult<ConfirmData, Canc...	✗	not shown
confirm	(data?: ConfirmData) => void	✗	not shown
cancel	(data?: CancelData) => void	✗	not shown
onReveal	EventHookOn<RevealData>	✗	not shown
onConfirm	EventHookOn<ConfirmData>	✗	not shown
onCancel	EventHookOn<CancelData>	✗	not shown

---

Type Aliases

UseConfirmDialogRevealResult<C, D>

type UseConfirmDialogRevealResult<C, D> = {
    data?: C
    isCanceled: false
  } | {
    data?: D
    isCanceled: true
  };

---

Generated by Syntax Scribe