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:
87
skills/vueuse-functions/references/useKeyModifier.md
Normal file
87
skills/vueuse-functions/references/useKeyModifier.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
category: Sensors
|
||||
---
|
||||
|
||||
# useKeyModifier
|
||||
|
||||
Reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState). Tracks state of any of the [supported modifiers](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#browser_compatibility) - see Browser Compatibility notes.
|
||||
|
||||
<CourseLink href="https://vueschool.io/lessons/alt-drag-to-clone-tasks?friend=vueuse">Learn useKeyModifier with this FREE video lesson from Vue School!</CourseLink>
|
||||
|
||||
## Usage
|
||||
|
||||
```ts
|
||||
import { useKeyModifier } from '@vueuse/core'
|
||||
|
||||
const capsLockState = useKeyModifier('CapsLock')
|
||||
|
||||
console.log(capsLockState.value)
|
||||
```
|
||||
|
||||
## Events
|
||||
|
||||
You can customize which events will prompt the state to update. By default, these are `mouseup`, `mousedown`, `keyup`, `keydown`. To customize these events:
|
||||
|
||||
```ts
|
||||
import { useKeyModifier } from '@vueuse/core'
|
||||
|
||||
const capsLockState = useKeyModifier('CapsLock', { events: ['mouseup', 'mousedown'] })
|
||||
|
||||
console.log(capsLockState) // null
|
||||
|
||||
// Caps Lock turned on with key press
|
||||
console.log(capsLockState) // null
|
||||
|
||||
// Mouse button clicked
|
||||
console.log(capsLockState) // true
|
||||
```
|
||||
|
||||
## Initial State
|
||||
|
||||
By default, the returned ref will be `Ref<null>` until the first event is received. You can explicitly pass the initial state to it via:
|
||||
|
||||
```ts
|
||||
import { useKeyModifier } from '@vueuse/core'
|
||||
// ---cut---
|
||||
const capsLockState1 = useKeyModifier('CapsLock') // Ref<boolean | null>
|
||||
const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // Ref<boolean>
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export type KeyModifier =
|
||||
| "Alt"
|
||||
| "AltGraph"
|
||||
| "CapsLock"
|
||||
| "Control"
|
||||
| "Fn"
|
||||
| "FnLock"
|
||||
| "Meta"
|
||||
| "NumLock"
|
||||
| "ScrollLock"
|
||||
| "Shift"
|
||||
| "Symbol"
|
||||
| "SymbolLock"
|
||||
export interface UseModifierOptions<Initial> extends ConfigurableDocument {
|
||||
/**
|
||||
* Event names that will prompt update to modifier states
|
||||
*
|
||||
* @default ['mousedown', 'mouseup', 'keydown', 'keyup']
|
||||
*/
|
||||
events?: WindowEventName[]
|
||||
/**
|
||||
* Initial value of the returned ref
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
initial?: Initial
|
||||
}
|
||||
export type UseKeyModifierReturn<Initial> = ShallowRef<
|
||||
Initial extends boolean ? boolean : boolean | null
|
||||
>
|
||||
export declare function useKeyModifier<Initial extends boolean | null>(
|
||||
modifier: KeyModifier,
|
||||
options?: UseModifierOptions<Initial>,
|
||||
): UseKeyModifierReturn<Initial>
|
||||
```
|
||||
Reference in New Issue
Block a user