ads-fe 0.0.1

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

@@ -0,0 +1,235 @@
+---
+category: Sensors
+---
+
+# onLongPress
+
+Listen for a long press on an element. Returns a stop function.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { onLongPress } from '@vueuse/core'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const htmlRefHook = useTemplateRef('htmlRefHook')
+const longPressedHook = shallowRef(false)
+
+function onLongPressCallbackHook(e: PointerEvent) {
+  longPressedHook.value = true
+}
+function resetHook() {
+  longPressedHook.value = false
+}
+
+onLongPress(
+  htmlRefHook,
+  onLongPressCallbackHook,
+  {
+    modifiers: {
+      prevent: true
+    }
+  }
+)
+</script>
+
+<template>
+  <p>Long Pressed: {{ longPressedHook }}</p>
+
+  <button ref="htmlRefHook" class="ml-2 button small">
+    Press long
+  </button>
+
+  <button class="ml-2 button small" @click="resetHook">
+    Reset
+  </button>
+</template>
+```
+
+### Custom Delay
+
+By default, the handler fires after 500ms. You can customize this with the `delay` option. It can be a number or a function that receives the `PointerEvent`.
+
+```ts
+import { onLongPress } from '@vueuse/core'
+
+// Fixed delay
+onLongPress(target, handler, { delay: 1000 })
+
+// Dynamic delay based on event
+onLongPress(target, handler, {
+  delay: ev => ev.pointerType === 'touch' ? 800 : 500,
+})
+```
+
+### Distance Threshold
+
+The long press will be canceled if the pointer moves more than the threshold (default: 10 pixels). Set to `false` to disable movement detection.
+
+```ts
+import { onLongPress } from '@vueuse/core'
+
+// Custom threshold
+onLongPress(target, handler, { distanceThreshold: 20 })
+
+// Disable movement detection
+onLongPress(target, handler, { distanceThreshold: false })
+```
+
+### On Mouse Up Callback
+
+You can provide an `onMouseUp` callback to be notified when the pointer is released.
+
+```ts
+import { onLongPress } from '@vueuse/core'
+
+onLongPress(target, handler, {
+  onMouseUp(duration, distance, isLongPress, pointerEvent) {
+    console.log(`Held for ${duration}ms, moved ${distance}px, long press: ${isLongPress}, x: ${pointerEvent.clientX}`)
+  },
+})
+```
+
+### Modifiers
+
+The following modifiers are available:
+
+| Modifier  | Description                                  |
+| --------- | -------------------------------------------- |
+| `stop`    | Calls `event.stopPropagation()`              |
+| `once`    | Removes event listener after first trigger   |
+| `prevent` | Calls `event.preventDefault()`               |
+| `capture` | Uses capture mode for event listener         |
+| `self`    | Only trigger if target is the element itself |
+
+```ts
+onLongPress(target, handler, {
+  modifiers: {
+    prevent: true,
+    stop: true,
+  },
+})
+```
+
+## Component Usage
+
+```vue
+<script setup lang="ts">
+import { OnLongPress } from '@vueuse/components'
+import { shallowRef } from 'vue'
+
+const longPressedComponent = shallowRef(false)
+
+function onLongPressCallbackComponent(e: PointerEvent) {
+  longPressedComponent.value = true
+}
+function resetComponent() {
+  longPressedComponent.value = false
+}
+</script>
+
+<template>
+  <p>Long Pressed: {{ longPressedComponent }}</p>
+
+  <OnLongPress
+    as="button"
+    class="ml-2 button small"
+    @trigger="onLongPressCallbackComponent"
+  >
+    Press long
+  </OnLongPress>
+
+  <button class="ml-2 button small" @click="resetComponent">
+    Reset
+  </button>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vOnLongPress } from '@vueuse/components'
+import { shallowRef } from 'vue'
+
+const longPressedDirective = shallowRef(false)
+
+function onLongPressCallbackDirective(e: PointerEvent) {
+  longPressedDirective.value = true
+}
+function resetDirective() {
+  longPressedDirective.value = false
+}
+</script>
+
+<template>
+  <p>Long Pressed: {{ longPressedDirective }}</p>
+
+  <button
+    v-on-long-press.prevent="onLongPressCallbackDirective"
+    class="ml-2 button small"
+  >
+    Press long
+  </button>
+
+  <button
+    v-on-long-press="[onLongPressCallbackDirective, { delay: 1000, modifiers: { stop: true } }]"
+    class="ml-2 button small"
+  >
+    Press long (with options)
+  </button>
+
+  <button class="ml-2 button small" @click="resetDirective">
+    Reset
+  </button>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface OnLongPressOptions {
+  /**
+   * Time in ms till `longpress` gets called
+   *
+   * @default 500
+   */
+  delay?: number | ((ev: PointerEvent) => number)
+  modifiers?: OnLongPressModifiers
+  /**
+   * Allowance of moving distance in pixels,
+   * The action will get canceled When moving too far from the pointerdown position.
+   * @default 10
+   */
+  distanceThreshold?: number | false
+  /**
+   * Function called when the ref element is released.
+   * @param duration how long the element was pressed in ms
+   * @param distance distance from the pointerdown position
+   * @param isLongPress whether the action was a long press or not
+   * @param pointerEvent the native {@link PointerEvent} triggered by the browser
+   */
+  onMouseUp?: (
+    duration: number,
+    distance: number,
+    isLongPress: boolean,
+    pointerEvent: PointerEvent,
+  ) => void
+}
+export interface OnLongPressModifiers {
+  stop?: boolean
+  once?: boolean
+  prevent?: boolean
+  capture?: boolean
+  self?: boolean
+}
+export type OnLongPressReturn = () => void
+/** @deprecated use {@link OnLongPressReturn} instead */
+export type UseOnLongPressReturn = OnLongPressReturn
+export declare function onLongPress(
+  target: MaybeElementRef,
+  handler: (evt: PointerEvent) => void,
+  options?: OnLongPressOptions,
+): OnLongPressReturn
+```

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

@@ -0,0 +1,53 @@
+---
+category: Sensors
+---
+
+# onStartTyping
+
+Fires when users start typing on non-editable elements. Useful for auto-focusing an input field when the user starts typing anywhere on the page.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { onStartTyping } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const input = useTemplateRef('input')
+
+onStartTyping(() => {
+  if (!input.value.active)
+    input.value.focus()
+})
+</script>
+
+<template>
+  <input ref="input" type="text" placeholder="Start typing to focus">
+</template>
+```
+
+## How It Works
+
+The callback only fires when:
+
+- No editable element (`<input>`, `<textarea>`, or `contenteditable`) is focused
+- The pressed key is alphanumeric (A-Z, 0-9)
+- No modifier keys (Ctrl, Alt, Meta) are held
+
+This allows users to start typing anywhere on the page without accidentally triggering the callback when using keyboard shortcuts or interacting with form fields.
+
+## Type Declarations
+
+```ts
+/**
+ * Fires when users start typing on non-editable elements.
+ *
+ * @see https://vueuse.org/onStartTyping
+ * @param callback
+ * @param options
+ */
+export declare function onStartTyping(
+  callback: (event: KeyboardEvent) => void,
+  options?: ConfigurableDocument,
+): void
+```

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

@@ -0,0 +1,37 @@
+---
+category: State
+---
+
+# provideLocal
+
+Extended `provide` with ability to call `injectLocal` to obtain the value in the same component.
+
+## Usage
+
+```vue
+<script setup>
+import { injectLocal, provideLocal } from '@vueuse/core'
+
+provideLocal('MyInjectionKey', 1)
+const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
+</script>
+```
+
+## Type Declarations
+
+```ts
+export type ProvideLocalReturn = void
+/**
+ * On the basis of `provide`, it is allowed to directly call inject to obtain the value after call provide in the same component.
+ *
+ * @example
+ * ```ts
+ * provideLocal('MyInjectionKey', 1)
+ * const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
+ * ```
+ */
+export declare function provideLocal<T, K = LocalProvidedKey<T>>(
+  key: K,
+  value: K extends InjectionKey<infer V> ? V : T,
+): ProvideLocalReturn
+```

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

@@ -0,0 +1,144 @@
+---
+category: Reactivity
+alias: createReactiveFn
+---
+
+# reactify
+
+Converts plain functions into reactive functions. The converted function accepts refs as its arguments and returns a ComputedRef, with proper typing.
+
+::: tip
+Interested to see some application or looking for some pre-reactified functions?
+
+Check out [⚗️ Vue Chemistry](https://github.com/antfu/vue-chemistry)!
+:::
+
+## Usage
+
+Basic example
+
+```ts
+import { reactify } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+// a plain function
+function add(a: number, b: number): number {
+  return a + b
+}
+
+// now it accept refs and returns a computed ref
+// (a: number | Ref<number>, b: number | Ref<number>) => ComputedRef<number>
+const reactiveAdd = reactify(add)
+
+const a = shallowRef(1)
+const b = shallowRef(2)
+const sum = reactiveAdd(a, b)
+
+console.log(sum.value) // 3
+
+a.value = 5
+
+console.log(sum.value) // 7
+```
+
+An example of implementing a reactive [Pythagorean theorem](https://en.wikipedia.org/wiki/Pythagorean_theorem).
+
+<!-- eslint-skip -->
+
+```ts
+import { reactify } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const pow = reactify(Math.pow)
+const sqrt = reactify(Math.sqrt)
+const add = reactify((a: number, b: number) => a + b)
+
+const a = shallowRef(3)
+const b = shallowRef(4)
+const c = sqrt(add(pow(a, 2), pow(b, 2)))
+console.log(c.value) // 5
+
+// 5:12:13
+a.value = 5
+b.value = 12
+console.log(c.value) // 13
+```
+
+You can also do it this way:
+
+```ts
+import { reactify } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+function pythagorean(a: number, b: number) {
+  return Math.sqrt(a ** 2 + b ** 2)
+}
+
+const a = shallowRef(3)
+const b = shallowRef(4)
+
+const c = reactify(pythagorean)(a, b)
+console.log(c.value) // 5
+```
+
+Another example of making reactive `stringify`
+
+```ts
+import { reactify } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const stringify = reactify(JSON.stringify)
+
+const obj = shallowRef(42)
+const dumped = stringify(obj)
+
+console.log(dumped.value) // '42'
+
+obj.value = { foo: 'bar' }
+
+console.log(dumped.value) // '{"foo":"bar"}'
+```
+
+## Type Declarations
+
+```ts
+export type Reactified<T, Computed extends boolean> = T extends (
+  ...args: infer A
+) => infer R
+  ? (
+      ...args: {
+        [K in keyof A]: Computed extends true
+          ? MaybeRefOrGetter<A[K]>
+          : MaybeRef<A[K]>
+      }
+    ) => ComputedRef<R>
+  : never
+export type ReactifyReturn<
+  T extends AnyFn = AnyFn,
+  K extends boolean = true,
+> = Reactified<T, K>
+export interface ReactifyOptions<T extends boolean> {
+  /**
+   * Accept passing a function as a reactive getter
+   *
+   * @default true
+   */
+  computedGetter?: T
+}
+/**
+ * Converts plain function into a reactive function.
+ * The converted function accepts refs as it's arguments
+ * and returns a ComputedRef, with proper typing.
+ *
+ * @param fn - Source function
+ * @param options - Options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function reactify<T extends AnyFn, K extends boolean = true>(
+  fn: T,
+  options?: ReactifyOptions<K>,
+): ReactifyReturn<T, K>
+/** @deprecated use `reactify` instead */
+export declare const createReactiveFn: typeof reactify
+```

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

@@ -0,0 +1,62 @@
+---
+category: Reactivity
+---
+
+# reactifyObject
+
+Apply `reactify` to an object
+
+## Usage
+
+```ts
+import { reactifyObject } from '@vueuse/core'
+
+const reactifiedConsole = reactifyObject(console)
+
+const a = ref('42')
+
+reactifiedConsole.log(a) // no longer need `.value`
+```
+
+## Type Declarations
+
+```ts
+export type ReactifyNested<
+  T,
+  Keys extends keyof T = keyof T,
+  S extends boolean = true,
+> = {
+  [K in Keys]: T[K] extends AnyFn ? Reactified<T[K], S> : T[K]
+}
+export type ReactifyObjectReturn<
+  T,
+  Keys extends keyof T,
+  S extends boolean = true,
+> = ReactifyNested<T, Keys, S>
+export interface ReactifyObjectOptions<
+  T extends boolean,
+> extends ReactifyOptions<T> {
+  /**
+   * Includes names from Object.getOwnPropertyNames
+   *
+   * @default true
+   */
+  includeOwnProperties?: boolean
+}
+/**
+ * Apply `reactify` to an object
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function reactifyObject<T extends object, Keys extends keyof T>(
+  obj: T,
+  keys?: (keyof T)[],
+): ReactifyObjectReturn<T, Keys, true>
+export declare function reactifyObject<
+  T extends object,
+  S extends boolean = true,
+>(
+  obj: T,
+  options?: ReactifyObjectOptions<S>,
+): ReactifyObjectReturn<T, keyof T, S>
+```

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

@@ -0,0 +1,34 @@
+---
+category: Reactivity
+---
+
+# reactiveComputed
+
+Computed reactive object. Instead of returning a ref that `computed` does, `reactiveComputed` returns a reactive object.
+
+## Usage
+
+```ts
+import { reactiveComputed } from '@vueuse/core'
+
+const state = reactiveComputed(() => {
+  return {
+    foo: 'bar',
+    bar: 'baz',
+  }
+})
+
+state.bar // 'baz'
+```
+
+## Type Declarations
+
+```ts
+export type ReactiveComputedReturn<T extends object> = UnwrapNestedRefs<T>
+/**
+ * Computed reactive object.
+ */
+export declare function reactiveComputed<T extends object>(
+  fn: ComputedGetter<T>,
+): ReactiveComputedReturn<T>
+```

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

@@ -0,0 +1,86 @@
+---
+category: Reactivity
+---
+
+# reactiveOmit
+
+Reactively omit fields from a reactive object.
+
+## Usage
+
+### Basic Usage
+
+```ts
+import { reactiveOmit } from '@vueuse/core'
+
+const obj = reactive({
+  x: 0,
+  y: 0,
+  elementX: 0,
+  elementY: 0,
+})
+
+const picked = reactiveOmit(obj, 'x', 'elementX') // { y: number, elementY: number }
+```
+
+### Predicate Usage
+
+```ts
+import { reactiveOmit } from '@vueuse/core'
+
+const obj = reactive({
+  bar: 'bar',
+  baz: 'should be omit',
+  foo: 'foo2',
+  qux: true,
+})
+
+const picked = reactiveOmit(obj, (value, key) => key === 'baz' || value === true)
+// { bar: string, foo: string }
+```
+
+### Scenarios
+
+#### Selectively passing props to child
+
+```vue
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+
+const props = defineProps<{
+  value: string
+  color?: string
+  font?: string
+}>()
+
+const childProps = reactiveOmit(props, 'value')
+</script>
+
+<template>
+  <div>
+    <!-- only passes "color" and "font" props to child -->
+    <ChildComp v-bind="childProps" />
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type ReactiveOmitReturn<
+  T extends object,
+  K extends keyof T | undefined = undefined,
+> = [K] extends [undefined] ? Partial<T> : Omit<T, Extract<K, keyof T>>
+export type ReactiveOmitPredicate<T> = (
+  value: T[keyof T],
+  key: keyof T,
+) => boolean
+export declare function reactiveOmit<T extends object, K extends keyof T>(
+  obj: T,
+  ...keys: (K | K[])[]
+): ReactiveOmitReturn<T, K>
+export declare function reactiveOmit<T extends object>(
+  obj: T,
+  predicate: ReactiveOmitPredicate<T>,
+): ReactiveOmitReturn<T>
+```