feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
159
skills/vueuse-functions/references/useConfirmDialog.md
Normal file
159
skills/vueuse-functions/references/useConfirmDialog.md
Normal file
@@ -0,0 +1,159 @@
|
||||
---
|
||||
category: Utilities
|
||||
---
|
||||
|
||||
# useConfirmDialog
|
||||
|
||||
Creates event hooks to support modals and confirmation dialog chains.
|
||||
|
||||
Functions can be used on the template, and hooks are a handy skeleton for the business logic of modals dialog or other actions that require user confirmation.
|
||||
|
||||
## Functions and hooks
|
||||
|
||||
- `reveal()` - triggers `onReveal` hook and sets `revealed.value` to `true`. Returns promise that resolves by `confirm()` or `cancel()`.
|
||||
- `confirm()` - sets `isRevealed.value` to `false` and triggers `onConfirm` hook.
|
||||
- `cancel()` - sets `isRevealed.value` to `false` and triggers `onCancel` hook.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
### Using hooks
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useConfirmDialog } from '@vueuse/core'
|
||||
|
||||
const { isRevealed, reveal, confirm, cancel, onReveal, onConfirm, onCancel }
|
||||
= useConfirmDialog()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="reveal">
|
||||
Reveal Modal
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
<div v-if="isRevealed" class="modal-bg">
|
||||
<div class="modal">
|
||||
<h2>Confirm?</h2>
|
||||
<button @click="confirm">
|
||||
Yes
|
||||
</button>
|
||||
<button @click="cancel">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Promise
|
||||
|
||||
If you prefer working with promises:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useConfirmDialog } from '@vueuse/core'
|
||||
|
||||
const {
|
||||
isRevealed,
|
||||
reveal,
|
||||
confirm,
|
||||
cancel,
|
||||
} = useConfirmDialog()
|
||||
|
||||
async function openDialog() {
|
||||
const { data, isCanceled } = await reveal()
|
||||
if (!isCanceled)
|
||||
console.log(data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button @click="openDialog">
|
||||
Show Modal
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
<div v-if="isRevealed" class="modal-layout">
|
||||
<div class="modal">
|
||||
<h2>Confirm?</h2>
|
||||
<button @click="confirm(true)">
|
||||
Yes
|
||||
</button>
|
||||
<button @click="confirm(false)">
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export type UseConfirmDialogRevealResult<C, D> =
|
||||
| {
|
||||
data?: C
|
||||
isCanceled: false
|
||||
}
|
||||
| {
|
||||
data?: D
|
||||
isCanceled: true
|
||||
}
|
||||
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>
|
||||
}
|
||||
/**
|
||||
* 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__
|
||||
*/
|
||||
export declare function useConfirmDialog<
|
||||
RevealData = any,
|
||||
ConfirmData = any,
|
||||
CancelData = any,
|
||||
>(
|
||||
revealed?: ShallowRef<boolean>,
|
||||
): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
|
||||
```
|
||||
Reference in New Issue
Block a user