devskill 2.0.2

package/skills/vueuse-functions/references/logicOr.md

@@ -0,0 +1,40 @@
+---
+category: '@Math'
+alias: or
+related: logicAnd, logicNot
+---
+
+# logicOr
+
+`OR` conditions for refs.
+
+## Usage
+
+```ts
+import { whenever } from '@vueuse/core'
+import { logicOr } from '@vueuse/math'
+
+const a = ref(true)
+const b = ref(false)
+
+whenever(logicOr(a, b), () => {
+  console.log('either a or b is truthy!')
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * `OR` conditions for refs.
+ *
+ * @see https://vueuse.org/logicOr
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function logicOr(
+  ...args: MaybeRefOrGetter<any>[]
+): ComputedRef<boolean>
+/** @deprecated use `logicOr` instead */
+export declare const or: typeof logicOr
+```

package/skills/vueuse-functions/references/makeDestructurable.md

@@ -0,0 +1,41 @@
+---
+category: Utilities
+---
+
+# makeDestructurable
+
+Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
+
+## Usage
+
+TypeScript Example:
+
+```ts twoslash include main
+import { makeDestructurable } from '@vueuse/core'
+
+const foo = { name: 'foo' }
+const bar = 1024
+
+const obj = makeDestructurable(
+  { foo, bar } as const,
+  [foo, bar] as const,
+)
+```
+
+Usage:
+
+```ts twoslash
+// @include: main
+// ---cut---
+let { foo, bar } = obj
+let [foo, bar] = obj
+```
+
+## Type Declarations
+
+```ts
+export declare function makeDestructurable<
+  T extends Record<string, unknown>,
+  A extends readonly any[],
+>(obj: T, arr: A): T & A
+```

package/skills/vueuse-functions/references/onClickOutside.md

@@ -0,0 +1,221 @@
+---
+category: Sensors
+---
+
+# onClickOutside
+
+Listen for clicks outside of an element. Useful for modals or dropdowns.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+
+onClickOutside(target, event => console.log(event))
+</script>
+
+<template>
+  <div ref="target">
+    Hello world
+  </div>
+  <div>Outside element</div>
+</template>
+```
+
+### Return Value
+
+By default, `onClickOutside` returns a `stop` function to remove the event listeners.
+
+```ts
+const stop = onClickOutside(target, handler)
+
+// Later, stop listening
+stop()
+```
+
+### Controls
+
+If you need more control over triggering the handler, you can use the `controls` option. This returns an object with `stop`, `cancel`, and `trigger` functions.
+
+```ts
+const { stop, cancel, trigger } = onClickOutside(
+  modalRef,
+  (event) => {
+    modal.value = false
+  },
+  { controls: true },
+)
+
+// cancel prevents the next click from triggering the handler
+cancel()
+
+// trigger manually fires the handler
+trigger(event)
+
+// stop removes all event listeners
+stop()
+```
+
+### Ignore Elements
+
+Use the `ignore` option to prevent certain elements from triggering the handler. Provide elements as an array of Refs or CSS selectors.
+
+```ts
+const ignoreElRef = useTemplateRef('ignoreEl')
+
+onClickOutside(
+  target,
+  event => console.log(event),
+  { ignore: [ignoreElRef, '.ignore-class', '#ignore-id'] },
+)
+```
+
+### Capture Phase
+
+By default, the event listener uses the capture phase (`capture: true`). Set `capture: false` to use the bubbling phase instead.
+
+```ts
+onClickOutside(target, handler, { capture: false })
+```
+
+### Detect Iframe Clicks
+
+Clicks inside an iframe are not detected by default. Enable `detectIframe` to also trigger the handler when focus moves to an iframe.
+
+```ts
+onClickOutside(target, handler, { detectIframe: true })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <OnClickOutside :options="{ ignore: [/* ... */] }" @trigger="count++">
+    <div>
+      Click Outside of Me
+    </div>
+  </OnClickOutside>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { shallowRef } from 'vue'
+
+const modal = shallowRef(false)
+function closeModal() {
+  modal.value = false
+}
+</script>
+
+<template>
+  <button @click="modal = true">
+    Open Modal
+  </button>
+  <div v-if="modal" v-on-click-outside="closeModal">
+    Hello World
+  </div>
+</template>
+```
+
+You can also set the handler as an array to set the configuration items of the instruction.
+
+```vue
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const modal = shallowRef(false)
+
+const ignoreElRef = useTemplateRef('ignoreEl')
+
+const onClickOutsideHandler = [
+  (ev) => {
+    console.log(ev)
+    modal.value = false
+  },
+  { ignore: [ignoreElRef] },
+]
+</script>
+
+<template>
+  <button @click="modal = true">
+    Open Modal
+  </button>
+
+  <div ref="ignoreElRef">
+    click outside ignore element
+  </div>
+
+  <div v-if="modal" v-on-click-outside="onClickOutsideHandler">
+    Hello World
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface OnClickOutsideOptions<
+  Controls extends boolean = false,
+> extends ConfigurableWindow {
+  /**
+   * List of elements that should not trigger the event,
+   * provided as Refs or CSS Selectors.
+   */
+  ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]>
+  /**
+   * Use capturing phase for internal event listener.
+   * @default true
+   */
+  capture?: boolean
+  /**
+   * Run handler function if focus moves to an iframe.
+   * @default false
+   */
+  detectIframe?: boolean
+  /**
+   * Use controls to cancel/trigger listener.
+   * @default false
+   */
+  controls?: Controls
+}
+export type OnClickOutsideHandler<
+  T extends OnClickOutsideOptions<boolean> = OnClickOutsideOptions,
+> = (
+  event:
+    | (T["detectIframe"] extends true ? FocusEvent : never)
+    | (T["controls"] extends true ? Event : never)
+    | PointerEvent,
+) => void
+interface OnClickOutsideControlsReturn {
+  stop: Fn
+  cancel: Fn
+  trigger: (event: Event) => void
+}
+/**
+ * Listen for clicks outside of an element.
+ *
+ * @see https://vueuse.org/onClickOutside
+ * @param target
+ * @param handler
+ * @param options
+ */
+export declare function onClickOutside<T extends OnClickOutsideOptions>(
+  target: MaybeComputedElementRef,
+  handler: OnClickOutsideHandler<T>,
+  options?: T,
+): Fn
+export declare function onClickOutside<T extends OnClickOutsideOptions<true>>(
+  target: MaybeComputedElementRef,
+  handler: OnClickOutsideHandler<T>,
+  options: T,
+): OnClickOutsideControlsReturn
+```

package/skills/vueuse-functions/references/onElementRemoval.md

@@ -0,0 +1,88 @@
+---
+category: Sensors
+---
+
+# onElementRemoval
+
+Fires when the element or any element containing it is removed from the DOM.
+
+## Usage
+
+```vue {13}
+<script setup lang="ts">
+import { onElementRemoval } from '@vueuse/core'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const btnRef = useTemplateRef('btn')
+const btnState = shallowRef(true)
+const removedCount = shallowRef(0)
+
+function btnOnClick() {
+  btnState.value = !btnState.value
+}
+
+onElementRemoval(btnRef, () => ++removedCount.value)
+</script>
+
+<template>
+  <button
+    v-if="btnState"
+    @click="btnOnClick"
+  >
+    recreate me
+  </button>
+  <button
+    v-else
+    ref="btnRef"
+    @click="btnOnClick"
+  >
+    remove me
+  </button>
+  <b>removed times: {{ removedCount }}</b>
+</template>
+```
+
+### Callback with Mutation Records
+
+The callback receives an array of `MutationRecord` objects that triggered the removal.
+
+```ts
+import { onElementRemoval } from '@vueuse/core'
+
+onElementRemoval(targetRef, (mutationRecords) => {
+  console.log('Element removed', mutationRecords)
+})
+```
+
+### Return Value
+
+Returns a stop function to stop observing.
+
+```ts
+const stop = onElementRemoval(targetRef, callback)
+
+// Later, stop observing
+stop()
+```
+
+## Type Declarations
+
+```ts
+export interface OnElementRemovalOptions
+  extends
+    ConfigurableWindow,
+    ConfigurableDocumentOrShadowRoot,
+    WatchOptionsBase {}
+/**
+ * Fires when the element or any element containing it is removed.
+ *
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function onElementRemoval(
+  target: MaybeElementRef,
+  callback: (mutationRecords: MutationRecord[]) => void,
+  options?: OnElementRemovalOptions,
+): Fn
+```

package/skills/vueuse-functions/references/onKeyStroke.md

@@ -0,0 +1,211 @@
+---
+category: Sensors
+---
+
+# onKeyStroke
+
+Listen for keyboard keystrokes. By default, listens on `keydown` events on `window`.
+
+## Usage
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+
+onKeyStroke('ArrowDown', (e) => {
+  e.preventDefault()
+})
+```
+
+See [this table](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) for all key codes.
+
+### Return Value
+
+Returns a stop function to remove the event listener.
+
+```ts
+const stop = onKeyStroke('Escape', handler)
+
+// Later, stop listening
+stop()
+```
+
+### Listen To Multiple Keys
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+
+onKeyStroke(['s', 'S', 'ArrowDown'], (e) => {
+  e.preventDefault()
+})
+
+// listen to all keys by passing `true` or skipping the key parameter
+onKeyStroke(true, (e) => {
+  e.preventDefault()
+})
+onKeyStroke((e) => {
+  e.preventDefault()
+})
+```
+
+### Custom Key Predicate
+
+You can pass a custom function to determine which keys should trigger the handler.
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+
+onKeyStroke(
+  e => e.key === 'A' && e.shiftKey,
+  (e) => {
+    console.log('Shift+A pressed')
+  },
+)
+```
+
+### Custom Event Target
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+
+onKeyStroke('A', (e) => {
+  console.log('Key A pressed on document')
+}, { target: document })
+```
+
+### Ignore Repeated Events
+
+The callback will trigger only once when pressing `A` and **holding down**. The `dedupe` option can also be a reactive ref.
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+
+onKeyStroke('A', (e) => {
+  console.log('Key A pressed')
+}, { dedupe: true })
+```
+
+Reference: [KeyboardEvent.repeat](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat)
+
+### Passive Mode
+
+Set `passive: true` to use a passive event listener.
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+
+onKeyStroke('A', handler, { passive: true })
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vOnKeyStroke } from '@vueuse/components'
+
+function onUpdate(e: KeyboardEvent) {
+  // impl...
+}
+</script>
+
+<template>
+  <input v-on-key-stroke:c,v="onUpdate" type="text">
+  <!-- with options -->
+  <input v-on-key-stroke:c,v="[onUpdate, { eventName: 'keyup' }]" type="text">
+</template>
+```
+
+### Custom Keyboard Event
+
+```ts
+import { onKeyStroke } from '@vueuse/core'
+// ---cut---
+onKeyStroke('Shift', (e) => {
+  console.log('Shift key up')
+}, { eventName: 'keyup' })
+```
+
+Or
+
+```ts
+import { onKeyUp } from '@vueuse/core'
+// ---cut---
+onKeyUp('Shift', () => console.log('Shift key up'))
+```
+
+## Shorthands
+
+- `onKeyDown` - alias for `onKeyStroke(key, handler, {eventName: 'keydown'})`
+- `onKeyPressed` - alias for `onKeyStroke(key, handler, {eventName: 'keypress'})`
+- `onKeyUp` - alias for `onKeyStroke(key, handler, {eventName: 'keyup'})`
+
+## Type Declarations
+
+```ts
+export type KeyPredicate = (event: KeyboardEvent) => boolean
+export type KeyFilter = true | string | string[] | KeyPredicate
+export type KeyStrokeEventName = "keydown" | "keypress" | "keyup"
+export interface OnKeyStrokeOptions {
+  eventName?: KeyStrokeEventName
+  target?: MaybeRefOrGetter<EventTarget | null | undefined>
+  passive?: boolean
+  /**
+   * Set to `true` to ignore repeated events when the key is being held down.
+   *
+   * @default false
+   */
+  dedupe?: MaybeRefOrGetter<boolean>
+}
+/**
+ * Listen for keyboard keystrokes.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ */
+export declare function onKeyStroke(
+  key: KeyFilter,
+  handler: (event: KeyboardEvent) => void,
+  options?: OnKeyStrokeOptions,
+): () => void
+export declare function onKeyStroke(
+  handler: (event: KeyboardEvent) => void,
+  options?: OnKeyStrokeOptions,
+): () => void
+/**
+ * Listen to the keydown event of the given key.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ * @param key
+ * @param handler
+ * @param options
+ */
+export declare function onKeyDown(
+  key: KeyFilter,
+  handler: (event: KeyboardEvent) => void,
+  options?: Omit<OnKeyStrokeOptions, "eventName">,
+): () => void
+/**
+ * Listen to the keypress event of the given key.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ * @param key
+ * @param handler
+ * @param options
+ */
+export declare function onKeyPressed(
+  key: KeyFilter,
+  handler: (event: KeyboardEvent) => void,
+  options?: Omit<OnKeyStrokeOptions, "eventName">,
+): () => void
+/**
+ * Listen to the keyup event of the given key.
+ *
+ * @see https://vueuse.org/onKeyStroke
+ * @param key
+ * @param handler
+ * @param options
+ */
+export declare function onKeyUp(
+  key: KeyFilter,
+  handler: (event: KeyboardEvent) => void,
+  options?: Omit<OnKeyStrokeOptions, "eventName">,
+): () => void
+```