ads-fe 0.0.1

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

@@ -0,0 +1,60 @@
+---
+category: Browser
+related: useWebWorkerFn
+---
+
+# useWebWorker
+
+Simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication.
+
+## Usage
+
+```ts
+import { useWebWorker } from '@vueuse/core'
+
+const { data, post, terminate, worker } = useWebWorker('/path/to/worker.js')
+```
+
+| State  | Type                              | Description                                                                                          |
+| ------ | --------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| data   | `Ref<any>`                        | Reference to the latest data received via the worker, can be watched to respond to incoming messages |
+| worker | `ShallowRef<Worker \| undefined>` | Reference to the instance of the WebWorker                                                           |
+
+| Method    | Signature                                                                                                                     | Description                      |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| post      | `(message: any, transfer: Transferable[]): void`<br>`(message: any, options?: StructuredSerializeOptions \| undefined): void` | Sends data to the worker thread. |
+| terminate | `() => void`                                                                                                                  | Stops and terminates the worker. |
+
+## Type Declarations
+
+```ts
+type PostMessage = (typeof Worker.prototype)["postMessage"]
+export interface UseWebWorkerReturn<Data = any> {
+  data: ShallowRef<Data>
+  post: PostMessage
+  terminate: () => void
+  worker: ShallowRef<Worker | undefined>
+}
+type WorkerFn = (...args: unknown[]) => Worker
+/**
+ * Simple Web Workers registration and communication.
+ *
+ * @see https://vueuse.org/useWebWorker
+ * @param url
+ * @param workerOptions
+ * @param options
+ */
+export declare function useWebWorker<T = any>(
+  url: string,
+  workerOptions?: WorkerOptions,
+  options?: ConfigurableWindow,
+): UseWebWorkerReturn<T>
+/**
+ * Simple Web Workers registration and communication.
+ *
+ * @see https://vueuse.org/useWebWorker
+ */
+export declare function useWebWorker<T = any>(
+  worker: Worker | WorkerFn,
+): UseWebWorkerReturn<T>
+```

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

@@ -0,0 +1,102 @@
+---
+category: Browser
+---
+
+# useWebWorkerFn
+
+Run expensive functions without blocking the UI, using a simple syntax that makes use of Promise. A port of [alewin/useWorker](https://github.com/alewin/useWorker).
+
+## Usage
+
+### Basic example
+
+```ts
+import { useWebWorkerFn } from '@vueuse/core'
+
+const { workerFn } = useWebWorkerFn(() => {
+  // some heavy works to do in web worker
+})
+```
+
+### With dependencies
+
+```ts {7-9}
+import { useWebWorkerFn } from '@vueuse/core'
+
+const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
+  dates => dates.sort(dateFns.compareAsc),
+  {
+    timeout: 50000,
+    dependencies: [
+      'https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.js', // dateFns
+    ],
+  },
+)
+```
+
+### With local dependencies
+
+```ts {9-9}
+import { useWebWorkerFn } from '@vueuse/core'
+
+const pow = (a: number) => a * a
+
+const { workerFn, workerStatus, workerTerminate } = useWebWorkerFn(
+  numbers => pow(numbers),
+  {
+    timeout: 50000,
+    localDependencies: [pow]
+  },
+)
+```
+
+## Web Worker
+
+Before you start using this function, we suggest you read the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) documentation.
+
+## Credit
+
+This function is a Vue port of https://github.com/alewin/useWorker by Alessio Koci, with the help of [@Donskelle](https://github.com/Donskelle) to migration.
+
+## Type Declarations
+
+```ts
+export type WebWorkerStatus =
+  | "PENDING"
+  | "SUCCESS"
+  | "RUNNING"
+  | "ERROR"
+  | "TIMEOUT_EXPIRED"
+export interface UseWebWorkerOptions extends ConfigurableWindow {
+  /**
+   * Number of milliseconds before killing the worker
+   *
+   * @default undefined
+   */
+  timeout?: number
+  /**
+   * An array that contains the external dependencies needed to run the worker
+   */
+  dependencies?: string[]
+  /**
+   * An array that contains the local dependencies needed to run the worker
+   */
+  localDependencies?: Function[]
+}
+export interface UseWebWorkerFnReturn<T extends (...fnArgs: any[]) => any> {
+  workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>
+  workerStatus: ShallowRef<WebWorkerStatus>
+  workerTerminate: (status?: WebWorkerStatus) => void
+}
+/**
+ * Run expensive function without blocking the UI, using a simple syntax that makes use of Promise.
+ *
+ * @see https://vueuse.org/useWebWorkerFn
+ * @param fn
+ * @param options
+ */
+export declare function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(
+  fn: T,
+  options?: UseWebWorkerOptions,
+): UseWebWorkerFnReturn<T>
+```

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

@@ -0,0 +1,46 @@
+---
+category: Elements
+---
+
+# useWindowFocus
+
+Reactively track window focus with `window.onfocus` and `window.onblur` events.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useWindowFocus } from '@vueuse/core'
+
+const focused = useWindowFocus()
+</script>
+
+<template>
+  <div>{{ focused }}</div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseWindowFocus v-slot="{ focused }">
+    Document Focus: {{ focused }}
+  </UseWindowFocus>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactively track window focus with `window.onfocus` and `window.onblur`.
+ *
+ * @see https://vueuse.org/useWindowFocus
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useWindowFocus(
+  options?: ConfigurableWindow,
+): ShallowRef<boolean>
+```

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

@@ -0,0 +1,46 @@
+---
+category: Elements
+---
+
+# useWindowScroll
+
+Reactive window scroll
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useWindowScroll } from '@vueuse/core'
+
+const { x, y } = useWindowScroll()
+</script>
+
+<template>
+  <div>
+    read current x, y scroll: {{ x }}, {{ y }}
+  </div>
+  <button @click="x = 100">
+    scroll X to 100
+  </button>
+  <button @click="y = 100">
+    scroll Y to 100
+  </button>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseWindowScrollOptions
+  extends ConfigurableWindow, UseScrollOptions {}
+export interface UseWindowScrollReturn extends UseScrollReturn {}
+/**
+ * Reactive window scroll.
+ *
+ * @see https://vueuse.org/useWindowScroll
+ * @param options
+ */
+export declare function useWindowScroll(
+  options?: UseWindowScrollOptions,
+): UseWindowScrollReturn
+```

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

@@ -0,0 +1,78 @@
+---
+category: Elements
+---
+
+# useWindowSize
+
+Reactive window size
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+
+const { width, height } = useWindowSize()
+</script>
+
+<template>
+  <div>
+    Width: {{ width }}
+    Height: {{ height }}
+  </div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseWindowSize v-slot="{ width, height }">
+    Width: {{ width }}
+    Height: {{ height }}
+  </UseWindowSize>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseWindowSizeOptions extends ConfigurableWindow {
+  initialWidth?: number
+  initialHeight?: number
+  /**
+   * Listen to window `orientationchange` event
+   *
+   * @default true
+   */
+  listenOrientation?: boolean
+  /**
+   * Whether the scrollbar should be included in the width and height
+   * Only effective when `type` is `'inner'`
+   *
+   * @default true
+   */
+  includeScrollbar?: boolean
+  /**
+   * Use `window.innerWidth` or `window.outerWidth` or `window.visualViewport`
+   * visualViewport documentation from MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/VisualViewport)
+   * @default 'inner'
+   */
+  type?: "inner" | "outer" | "visual"
+}
+export interface UseWindowSizeReturn {
+  width: ShallowRef<number>
+  height: ShallowRef<number>
+}
+/**
+ * Reactive window size.
+ *
+ * @see https://vueuse.org/useWindowSize
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useWindowSize(
+  options?: UseWindowSizeOptions,
+): UseWindowSizeReturn
+```

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

@@ -0,0 +1,53 @@
+---
+category: '@Electron'
+---
+
+# useZoomFactor
+
+Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom factor.
+
+## Usage
+
+```ts
+import { useZoomFactor } from '@vueuse/electron'
+
+// enable nodeIntegration if you don't provide webFrame explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+// Ref result will return
+const factor = useZoomFactor()
+console.log(factor.value) // print current zoom factor
+factor.value = 2 // change current zoom factor
+```
+
+Set initial zoom factor immediately
+
+```ts
+import { useZoomFactor } from '@vueuse/electron'
+
+const factor = useZoomFactor(2)
+```
+
+Pass a `ref` and the factor will be updated when the source ref changes
+
+```ts
+import { useZoomFactor } from '@vueuse/electron'
+import { shallowRef } from 'vue'
+
+const factor = shallowRef(1)
+
+useZoomFactor(factor) // zoom factor will match with the ref
+
+factor.value = 2 // zoom factor will change
+```
+
+## Type Declarations
+
+```ts
+export declare function useZoomFactor(factor: MaybeRef<number>): Ref<number>
+export declare function useZoomFactor(
+  webFrame: WebFrame,
+  factor: MaybeRef<number>,
+): Ref<number>
+export declare function useZoomFactor(webFrame: WebFrame): Ref<number>
+export declare function useZoomFactor(): Ref<number>
+```

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

@@ -0,0 +1,53 @@
+---
+category: '@Electron'
+---
+
+# useZoomLevel
+
+Reactive [WebFrame](https://www.electronjs.org/docs/api/web-frame#webframe) zoom level.
+
+## Usage
+
+```ts
+import { useZoomLevel } from '@vueuse/electron'
+
+// enable nodeIntegration if you don't provide webFrame explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+// Ref result will return
+const level = useZoomLevel()
+console.log(level.value) // print current zoom level
+level.value = 2 // change current zoom level
+```
+
+Set initial zoom level immediately
+
+```ts
+import { useZoomLevel } from '@vueuse/electron'
+
+const level = useZoomLevel(2)
+```
+
+Pass a `ref` and the level will be updated when the source ref changes
+
+```ts
+import { useZoomLevel } from '@vueuse/electron'
+import { shallowRef } from 'vue'
+
+const level = shallowRef(1)
+
+useZoomLevel(level) // zoom level will match with the ref
+
+level.value = 2 // zoom level will change
+```
+
+## Type Declarations
+
+```ts
+export declare function useZoomLevel(level: MaybeRef<number>): Ref<number>
+export declare function useZoomLevel(
+  webFrame: WebFrame,
+  level: MaybeRef<number>,
+): Ref<number>
+export declare function useZoomLevel(webFrame: WebFrame): Ref<number>
+export declare function useZoomLevel(): Ref<number>
+```

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

@@ -0,0 +1,53 @@
+---
+category: Watch
+---
+
+# watchArray
+
+Watch for an array with additions and removals.
+
+## Usage
+
+Similar to `watch`, but provides the added and removed elements to the callback function. Pass `{ deep: true }` if the list is updated in place with `push`, `splice`, etc.
+
+```ts
+import { watchArray } from '@vueuse/core'
+
+const list = ref([1, 2, 3])
+
+watchArray(list, (newList, oldList, added, removed) => {
+  console.log(newList) // [1, 2, 3, 4]
+  console.log(oldList) // [1, 2, 3]
+  console.log(added) // [4]
+  console.log(removed) // []
+})
+
+onMounted(() => {
+  list.value = [...list.value, 4]
+})
+```
+
+## Type Declarations
+
+```ts
+export declare type WatchArrayCallback<V = any, OV = any> = (
+  value: V,
+  oldValue: OV,
+  added: V,
+  removed: OV,
+  onCleanup: (cleanupFn: () => void) => void,
+) => any
+/**
+ * Watch for an array with additions and removals.
+ *
+ * @see https://vueuse.org/watchArray
+ */
+export declare function watchArray<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T[]> | T[],
+  cb: WatchArrayCallback<T[], Immediate extends true ? T[] | undefined : T[]>,
+  options?: WatchOptions<Immediate>,
+): WatchHandle
+```

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

@@ -0,0 +1,63 @@
+---
+category: Watch
+---
+
+# watchAtMost
+
+`watch` with the number of times triggered.
+
+## Usage
+
+Similar to `watch` with an extra option `count` which set up the number of times the callback function is triggered. After the count is reached, the watch will be stopped automatically.
+
+```ts
+import { watchAtMost } from '@vueuse/core'
+
+watchAtMost(
+  source,
+  () => { console.log('trigger!') }, // triggered it at most 3 times
+  {
+    count: 3, // the number of times triggered
+  },
+)
+```
+
+## Type Declarations
+
+```ts
+export interface WatchAtMostOptions<
+  Immediate,
+> extends WatchWithFilterOptions<Immediate> {
+  count: MaybeRefOrGetter<number>
+}
+export interface WatchAtMostReturn {
+  stop: WatchStopHandle
+  pause: () => void
+  resume: () => void
+  count: ShallowRef<number>
+}
+export declare function watchAtMost<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options: WatchAtMostOptions<Immediate>,
+): WatchAtMostReturn
+export declare function watchAtMost<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options: WatchAtMostOptions<Immediate>,
+): WatchAtMostReturn
+export declare function watchAtMost<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: T,
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options: WatchAtMostOptions<Immediate>,
+): WatchAtMostReturn
+```

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

@@ -0,0 +1,101 @@
+---
+category: Watch
+alias: debouncedWatch
+---
+
+# watchDebounced
+
+Debounced watch. The callback will only be invoked after the source stops changing for the specified duration.
+
+## Usage
+
+Similar to `watch`, but offering extra options `debounce` and `maxWait` which will be applied to the callback function.
+
+```ts
+import { watchDebounced } from '@vueuse/core'
+
+watchDebounced(
+  source,
+  () => { console.log('changed!') },
+  { debounce: 500, maxWait: 1000 },
+)
+```
+
+### Options
+
+| Option     | Type                       | Default | Description                                |
+| ---------- | -------------------------- | ------- | ------------------------------------------ |
+| `debounce` | `MaybeRefOrGetter<number>` | `0`     | Debounce delay in ms (can be reactive)     |
+| `maxWait`  | `MaybeRefOrGetter<number>` | —       | Maximum wait time before forced invocation |
+
+All standard `watch` options (`deep`, `immediate`, `flush`, etc.) are also supported.
+
+### Reactive Debounce Time
+
+The debounce time can be reactive:
+
+```ts
+import { watchDebounced } from '@vueuse/core'
+
+const debounceMs = ref(500)
+
+watchDebounced(
+  source,
+  () => { console.log('changed!') },
+  { debounce: debounceMs },
+)
+
+// Later, change the debounce time
+debounceMs.value = 1000
+```
+
+## How It Works
+
+It's essentially a shorthand for the following code:
+
+```ts
+import { debounceFilter, watchWithFilter } from '@vueuse/core'
+
+watchWithFilter(
+  source,
+  () => { console.log('changed!') },
+  {
+    eventFilter: debounceFilter(500, { maxWait: 1000 }),
+  },
+)
+```
+
+## Type Declarations
+
+```ts
+export interface WatchDebouncedOptions<Immediate>
+  extends WatchOptions<Immediate>, DebounceFilterOptions {
+  debounce?: MaybeRefOrGetter<number>
+}
+export declare function watchDebounced<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchDebouncedOptions<Immediate>,
+): WatchHandle
+export declare function watchDebounced<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchDebouncedOptions<Immediate>,
+): WatchHandle
+export declare function watchDebounced<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchDebouncedOptions<Immediate>,
+): WatchHandle
+/** @deprecated use `watchDebounced` instead */
+export declare const debouncedWatch: typeof watchDebounced
+```