⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

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

📚 Table of Contents

• Imports
• Variables & Constants
• 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

---

Variables & Constants

Name	Type	Kind	Value	Exported
_resolve	(arg0: UseConfirmDialogRevealResult<ConfirmData, CancelData>) => void	let/var	noop	✗

---

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>

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,
  }
}

• 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
   */
  

• Parameters:

• revealed: ShallowRef<boolean>
• Return Type: UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
• Calls:
• createEventHook (from @vueuse/shared)
• revealHook.trigger
• confirmHook.trigger
• _resolve
• cancelHook.trigger
• computed (from vue)

reveal(data: RevealData): Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>

Code

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

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

• Parameters:
• data: RevealData
• Return Type: Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>
• Calls:
• revealHook.trigger

confirm(data: ConfirmData): void

Code

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

    _resolve({ data, isCanceled: false })
  }

• Parameters:
• data: ConfirmData
• Return Type: void
• Calls:
• confirmHook.trigger
• _resolve

cancel(data: CancelData): void

Code

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

• Parameters:
• data: CancelData
• Return Type: void
• Calls:
• cancelHook.trigger
• _resolve

---

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>	✗
reveal	(data?: RevealData) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>	✗
confirm	(data?: ConfirmData) => void	✗
cancel	(data?: CancelData) => void	✗
onReveal	EventHookOn<RevealData>	✗
onConfirm	EventHookOn<ConfirmData>	✗
onCancel	EventHookOn<CancelData>	✗

---

Type Aliases

UseConfirmDialogRevealResult<C, D>

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

---