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:
177
skills/vueuse-functions/references/useWebNotification.md
Normal file
177
skills/vueuse-functions/references/useWebNotification.md
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
category: Browser
|
||||
---
|
||||
|
||||
# useWebNotification
|
||||
|
||||
Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification)
|
||||
|
||||
The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.
|
||||
|
||||
## Usage
|
||||
|
||||
::: tip
|
||||
Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour.
|
||||
:::
|
||||
|
||||
```ts
|
||||
import { useWebNotification } from '@vueuse/core'
|
||||
|
||||
const {
|
||||
isSupported,
|
||||
notification,
|
||||
permissionGranted,
|
||||
show,
|
||||
close,
|
||||
onClick,
|
||||
onShow,
|
||||
onError,
|
||||
onClose,
|
||||
} = useWebNotification({
|
||||
title: 'Hello, VueUse world!',
|
||||
dir: 'auto',
|
||||
lang: 'en',
|
||||
renotify: true,
|
||||
tag: 'test',
|
||||
})
|
||||
|
||||
if (isSupported.value && permissionGranted.value)
|
||||
show()
|
||||
```
|
||||
|
||||
This composable also utilizes the createEventHook utility from '@vueuse/shared`:
|
||||
|
||||
```ts
|
||||
import { useWebNotification } from '@vueuse/core'
|
||||
|
||||
const { onClick, onShow, onError, onClose, } = useWebNotification()
|
||||
// ---cut---
|
||||
onClick((evt: Event) => {
|
||||
// Do something with the notification on:click event...
|
||||
})
|
||||
|
||||
onShow((evt: Event) => {
|
||||
// Do something with the notification on:show event...
|
||||
})
|
||||
|
||||
onError((evt: Event) => {
|
||||
// Do something with the notification on:error event...
|
||||
})
|
||||
|
||||
onClose((evt: Event) => {
|
||||
// Do something with the notification on:close event...
|
||||
})
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface WebNotificationOptions {
|
||||
/**
|
||||
* The title read-only property of the Notification interface indicates
|
||||
* the title of the notification
|
||||
*
|
||||
* @default ''
|
||||
*/
|
||||
title?: string
|
||||
/**
|
||||
* The body string of the notification as specified in the constructor's
|
||||
* options parameter.
|
||||
*
|
||||
* @default ''
|
||||
*/
|
||||
body?: string
|
||||
/**
|
||||
* The text direction of the notification as specified in the constructor's
|
||||
* options parameter.
|
||||
*
|
||||
* @default ''
|
||||
*/
|
||||
dir?: "auto" | "ltr" | "rtl"
|
||||
/**
|
||||
* The language code of the notification as specified in the constructor's
|
||||
* options parameter.
|
||||
*
|
||||
* @default DOMString
|
||||
*/
|
||||
lang?: string
|
||||
/**
|
||||
* The ID of the notification(if any) as specified in the constructor's options
|
||||
* parameter.
|
||||
*
|
||||
* @default ''
|
||||
*/
|
||||
tag?: string
|
||||
/**
|
||||
* The URL of the image used as an icon of the notification as specified
|
||||
* in the constructor's options parameter.
|
||||
*
|
||||
* @default ''
|
||||
*/
|
||||
icon?: string
|
||||
/**
|
||||
* Specifies whether the user should be notified after a new notification
|
||||
* replaces an old one.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
renotify?: boolean
|
||||
/**
|
||||
* A boolean value indicating that a notification should remain active until the
|
||||
* user clicks or dismisses it, rather than closing automatically.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
requireInteraction?: boolean
|
||||
/**
|
||||
* The silent read-only property of the Notification interface specifies
|
||||
* whether the notification should be silent, i.e., no sounds or vibrations
|
||||
* should be issued, regardless of the device settings.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
silent?: boolean
|
||||
/**
|
||||
* Specifies a vibration pattern for devices with vibration hardware to emit.
|
||||
* A vibration pattern, as specified in the Vibration API spec
|
||||
*
|
||||
* @see https://w3c.github.io/vibration/
|
||||
*/
|
||||
vibrate?: number[]
|
||||
}
|
||||
export interface UseWebNotificationOptions
|
||||
extends ConfigurableWindow,
|
||||
WebNotificationOptions {
|
||||
/**
|
||||
* Request for permissions onMounted if it's not granted.
|
||||
*
|
||||
* Can be disabled and calling `ensurePermissions` to grant afterwords.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
requestPermissions?: boolean
|
||||
}
|
||||
/**
|
||||
* Reactive useWebNotification
|
||||
*
|
||||
* @see https://vueuse.org/useWebNotification
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/notification
|
||||
*/
|
||||
export declare function useWebNotification(
|
||||
options?: UseWebNotificationOptions,
|
||||
): {
|
||||
isSupported: ComputedRef<boolean>
|
||||
notification: Ref<Notification | null, Notification | null>
|
||||
ensurePermissions: () => Promise<boolean | undefined>
|
||||
permissionGranted: ShallowRef<boolean, boolean>
|
||||
show: (
|
||||
overrides?: WebNotificationOptions,
|
||||
) => Promise<Notification | undefined>
|
||||
close: () => void
|
||||
onClick: EventHookOn<any>
|
||||
onShow: EventHookOn<any>
|
||||
onError: EventHookOn<any>
|
||||
onClose: EventHookOn<any>
|
||||
}
|
||||
export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>
|
||||
```
|
||||
Reference in New Issue
Block a user