devskill 2.0.2

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

@@ -0,0 +1,61 @@
+---
+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 {}
+/**
+ * Reactive window scroll.
+ *
+ * @see https://vueuse.org/useWindowScroll
+ * @param options
+ */
+export declare function useWindowScroll(options?: UseWindowScrollOptions): {
+  x: WritableComputedRef<number, number>
+  y: WritableComputedRef<number, number>
+  isScrolling: ShallowRef<boolean, boolean>
+  arrivedState: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  directions: {
+    left: boolean
+    right: boolean
+    top: boolean
+    bottom: boolean
+  }
+  measure(): void
+}
+export type UseWindowScrollReturn = ReturnType<typeof useWindowScroll>
+```

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

@@ -0,0 +1,76 @@
+---
+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"
+}
+/**
+ * Reactive window size.
+ *
+ * @see https://vueuse.org/useWindowSize
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useWindowSize(options?: UseWindowSizeOptions): {
+  width: ShallowRef<number, number>
+  height: ShallowRef<number, number>
+}
+export type UseWindowSizeReturn = ReturnType<typeof useWindowSize>
+```

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,55 @@
+---
+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 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,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  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 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,
+  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 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
+```

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

@@ -0,0 +1,54 @@
+---
+category: Watch
+---
+
+# watchDeep
+
+Shorthand for watching value with `{deep: true}`
+
+## Usage
+
+Similar to `watch`, but with `{ deep: true }`
+
+```ts
+import { watchDeep } from '@vueuse/core'
+
+const nestedObject = ref({ foo: { bar: { deep: 5 } } })
+
+watchDeep(nestedObject, (updated) => {
+  console.log(updated)
+})
+
+onMounted(() => {
+  nestedObject.value.foo.bar.deep = 10
+})
+```
+
+## Type Declarations
+
+```ts
+export declare function watchDeep<
+  T extends Readonly<MultiWatchSources>,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: Omit<WatchOptions<Immediate>, "deep">,
+): WatchHandle
+export declare function watchDeep<
+  T,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: Omit<WatchOptions<Immediate>, "deep">,
+): WatchHandle
+export declare function watchDeep<
+  T extends object,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: Omit<WatchOptions<Immediate>, "deep">,
+): WatchHandle
+```

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

@@ -0,0 +1,192 @@
+---
+category: '@RxJS'
+---
+
+# watchExtractedObservable
+
+Watch the values of an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables.
+
+Automatically unsubscribe on observable change, and automatically unsubscribe from it when the component is unmounted.
+
+Supports all overloads of [`watch`](https://vuejs.org/guide/essentials/watchers.html#basic-example).
+
+## Usage
+
+<!-- TODO: import rxjs error if enable twoslash -->
+
+```ts no-twoslash
+import { watchExtractedObservable } from '@vueuse/rxjs'
+import { computed, reactive, useTemplateRef } from 'vue'
+import { AudioPlayer } from '../my/libs/AudioPlayer'
+
+// setup()
+
+const audio = useTemplateRef('audio')
+const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
+const state = reactive({
+  progress: 0,
+})
+
+watchExtractedObservable(player, p => p.progress$, (percentage) => {
+  state.progress = percentage * 100
+})
+```
+
+If you want to add custom error handling to an `Observable` that might error, you can supply an optional `onError` configuration. Without this, RxJS will treat any error in the supplied `Observable` as an "unhandled error" and it will be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in Node).
+
+You can also supply an optional `onComplete` configuration if you need to attach special behavior when the watched observable completes.
+
+```ts no-twoslash
+import { watchExtractedObservable } from '@vueuse/rxjs'
+import { computed, reactive, useTemplateRef } from 'vue'
+import { AudioPlayer } from '../my/libs/AudioPlayer'
+
+// setup()
+
+const audio = useTemplateRef('audio')
+const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
+const state = reactive({
+  progress: 0,
+})
+
+watchExtractedObservable(player, p => p.progress$, (percentage) => {
+  state.progress = percentage * 100
+}, {
+  onError: (err: unknown) => {
+    console.error(err)
+  },
+  onComplete: () => {
+    state.progress = 100 // or 0, or whatever
+  },
+})
+```
+
+If you want, you can also pass `watch` options as the last argument:
+
+```ts no-twoslash
+import { watchExtractedObservable } from '@vueuse/rxjs'
+import { computed, reactive, useTemplateRef } from 'vue'
+import { AudioPlayer } from '../my/libs/AudioPlayer'
+
+// setup()
+
+const audio = useTemplateRef('audio')
+const player = computed(() => (audio.value ? new AudioPlayer(audio.value) : null))
+const state = reactive({
+  progress: 0,
+})
+
+watchExtractedObservable(player, p => p.progress$, (percentage) => {
+  state.progress = percentage * 100
+}, {
+  onError: (err: unknown) => {
+    console.error(err)
+  }
+}, {
+  immediate: true
+})
+```
+
+## Subscription Options
+
+| Option       | Type                     | Description                          |
+| ------------ | ------------------------ | ------------------------------------ |
+| `onError`    | `(err: unknown) => void` | Error handler for Observable errors  |
+| `onComplete` | `() => void`             | Called when the Observable completes |
+
+## Return Value
+
+Returns a `WatchHandle` that can be used to stop watching:
+
+```ts no-twoslash
+import { watchExtractedObservable } from '@vueuse/rxjs'
+import { ref } from 'vue'
+
+const source = ref({ data$: null })
+
+const stop = watchExtractedObservable(source, s => s.data$, (data) => {
+  console.log(data)
+})
+
+// Later, stop watching
+stop()
+```
+
+## Type Declarations
+
+```ts
+export type OnCleanup = (cleanupFn: () => void) => void
+export type WatchExtractedObservableCallback<
+  Value,
+  OldValue,
+  ObservableElement,
+> = (
+  value: NonNullable<Value>,
+  oldValue: OldValue,
+  onCleanup: OnCleanup,
+) => Observable<ObservableElement>
+export interface WatchExtractedObservableOptions {
+  onError?: (err: unknown) => void
+  onComplete?: () => void
+}
+export declare function watchExtractedObservable<
+  T extends MultiWatchSources,
+  E,
+  Immediate extends Readonly<boolean> = false,
+>(
+  sources: [...T],
+  extractor: WatchExtractedObservableCallback<
+    MapSources<T>,
+    MapOldSources<T, Immediate>,
+    E
+  >,
+  callback: (snapshot: E) => void,
+  subscriptionOptions?: WatchExtractedObservableOptions,
+  watchOptions?: WatchOptions<Immediate>,
+): WatchHandle
+export declare function watchExtractedObservable<
+  T extends Readonly<MultiWatchSources>,
+  E,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  extractor: WatchExtractedObservableCallback<
+    MapSources<T>,
+    MapOldSources<T, Immediate>,
+    E
+  >,
+  callback: (snapshot: E) => void,
+  subscriptionOptions?: WatchExtractedObservableOptions,
+  watchOptions?: WatchOptions<Immediate>,
+): WatchHandle
+export declare function watchExtractedObservable<
+  T,
+  E,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: WatchSource<T>,
+  extractor: WatchExtractedObservableCallback<
+    T,
+    Immediate extends true ? T | undefined : T,
+    E
+  >,
+  callback: (snapshot: E) => void,
+  subscriptionOptions?: WatchExtractedObservableOptions,
+  watchOptions?: WatchOptions<Immediate>,
+): WatchHandle
+export declare function watchExtractedObservable<
+  T extends object,
+  E,
+  Immediate extends Readonly<boolean> = false,
+>(
+  source: T,
+  extractor: WatchExtractedObservableCallback<
+    T,
+    Immediate extends true ? T | undefined : T,
+    E
+  >,
+  callback: (snapshot: E) => void,
+  subscriptionOptions?: WatchExtractedObservableOptions,
+  watchOptions?: WatchOptions<Immediate>,
+): WatchHandle
+```