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:
99
skills/vueuse-functions/references/useFocus.md
Normal file
99
skills/vueuse-functions/references/useFocus.md
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
category: Sensors
|
||||
---
|
||||
|
||||
# useFocus
|
||||
|
||||
Reactive utility to track or set the focus state of a DOM element. State changes to reflect whether the target element is the focused element. Setting reactive value from the outside will trigger `focus` and `blur` events for `true` and `false` values respectively.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```ts
|
||||
import { useFocus } from '@vueuse/core'
|
||||
|
||||
const target = shallowRef()
|
||||
const { focused } = useFocus(target)
|
||||
|
||||
watch(focused, (focused) => {
|
||||
if (focused)
|
||||
console.log('input element has been focused')
|
||||
else console.log('input element has lost focus')
|
||||
})
|
||||
```
|
||||
|
||||
## Setting initial focus
|
||||
|
||||
To focus the element on its first render one can provide the `initialValue` option as `true`. This will trigger a `focus` event on the target element.
|
||||
|
||||
```ts
|
||||
import { useFocus } from '@vueuse/core'
|
||||
|
||||
const target = shallowRef()
|
||||
const { focused } = useFocus(target, { initialValue: true })
|
||||
```
|
||||
|
||||
## Change focus state
|
||||
|
||||
Changes of the `focused` reactive ref will automatically trigger `focus` and `blur` events for `true` and `false` values respectively. You can utilize this behavior to focus the target element as a result of another action (e.g. when a button click as shown below).
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useFocus } from '@vueuse/core'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const input = shallowRef()
|
||||
const { focused } = useFocus(input)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button type="button" @click="focused = true">
|
||||
Click me to focus input below
|
||||
</button>
|
||||
<input ref="input" type="text">
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Type Declarations
|
||||
|
||||
```ts
|
||||
export interface UseFocusOptions extends ConfigurableWindow {
|
||||
/**
|
||||
* Initial value. If set true, then focus will be set on the target
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
initialValue?: boolean
|
||||
/**
|
||||
* Replicate the :focus-visible behavior of CSS
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
focusVisible?: boolean
|
||||
/**
|
||||
* Prevent scrolling to the element when it is focused.
|
||||
*
|
||||
* @default false
|
||||
*/
|
||||
preventScroll?: boolean
|
||||
}
|
||||
export interface UseFocusReturn {
|
||||
/**
|
||||
* If read as true, then the element has focus. If read as false, then the element does not have focus
|
||||
* If set to true, then the element will be focused. If set to false, the element will be blurred.
|
||||
*/
|
||||
focused: WritableComputedRef<boolean>
|
||||
}
|
||||
/**
|
||||
* Track or set the focus state of a DOM element.
|
||||
*
|
||||
* @see https://vueuse.org/useFocus
|
||||
* @param target The target element for the focus and blur events.
|
||||
* @param options
|
||||
*/
|
||||
export declare function useFocus(
|
||||
target: MaybeElementRef,
|
||||
options?: UseFocusOptions,
|
||||
): UseFocusReturn
|
||||
```
|
||||
Reference in New Issue
Block a user