devskill 2.0.2

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

@@ -0,0 +1,61 @@
+---
+category: Elements
+---
+
+# useMutationObserver
+
+Watch for changes being made to the DOM tree. [MutationObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useMutationObserver } from '@vueuse/core'
+import { ref, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const messages = ref([])
+
+useMutationObserver(el, (mutations) => {
+  if (mutations[0])
+    messages.value.push(mutations[0].attributeName)
+}, {
+  attributes: true,
+})
+</script>
+
+<template>
+  <div ref="el">
+    Hello VueUse
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseMutationObserverOptions
+  extends MutationObserverInit, ConfigurableWindow {}
+/**
+ * Watch for changes being made to the DOM tree.
+ *
+ * @see https://vueuse.org/useMutationObserver
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function useMutationObserver(
+  target:
+    | MaybeComputedElementRef
+    | MaybeComputedElementRef[]
+    | MaybeRefOrGetter<MaybeElement[]>,
+  callback: MutationCallback,
+  options?: UseMutationObserverOptions,
+): {
+  isSupported: ComputedRef<boolean>
+  stop: () => void
+  takeRecords: () => MutationRecord[] | undefined
+}
+export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>
+```

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

@@ -0,0 +1,78 @@
+---
+category: '@Integrations'
+---
+
+# useNProgress
+
+Reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress).
+
+## Install
+
+```bash
+npm i nprogress@^0
+```
+
+## Usage
+
+```ts {6}
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+
+const { isLoading } = useNProgress()
+
+function toggle() {
+  isLoading.value = !isLoading.value
+}
+```
+
+### Passing a progress percentage
+
+You can pass a percentage to indicate where the bar should start from.
+
+```ts {3}
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+
+const { progress } = useNProgress(0.5)
+
+function done() {
+  progress.value = 1.0
+}
+```
+
+> To change the progress percentage, set `progress.value = n`, where n is a number between 0..1.
+
+### Customization
+
+Just edit [nprogress.css](https://github.com/rstacruz/nprogress/blob/master/nprogress.css) to your liking. Tip: you probably only want to find and replace occurrences of #29d.
+
+You can [configure](https://github.com/rstacruz/nprogress#configuration) it by passing an object as a second parameter.
+
+```ts {4}
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+
+useNProgress(null, {
+  minimum: 0.1,
+  // ...
+})
+```
+
+## Type Declarations
+
+```ts
+export type UseNProgressOptions = Partial<NProgressOptions>
+/**
+ * Reactive progress bar.
+ *
+ * @see https://vueuse.org/useNProgress
+ */
+export declare function useNProgress(
+  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
+  options?: UseNProgressOptions,
+): {
+  isLoading: WritableComputedRef<boolean, boolean>
+  progress: Ref<number | null | undefined, number | null | undefined>
+  start: () => nprogress.NProgress
+  done: (force?: boolean) => nprogress.NProgress
+  remove: () => void
+}
+export type UseNProgressReturn = ReturnType<typeof useNProgress>
+```

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

@@ -0,0 +1,57 @@
+---
+category: Sensors
+---
+
+# useNavigatorLanguage
+
+Reactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language).
+
+## Usage
+
+```ts
+import { useNavigatorLanguage } from '@vueuse/core'
+
+const { language } = useNavigatorLanguage()
+
+watch(language, () => {
+  // Listen to the value changing
+})
+```
+
+## Type Declarations
+
+```ts
+export interface NavigatorLanguageState {
+  isSupported: ComputedRef<boolean>
+  /**
+   *
+   * ISO 639-1 standard Language Code
+   *
+   * @info The detected user agent language preference as a language tag
+   * (which is sometimes referred to as a "locale identifier").
+   * This consists of a 2-3 letter base language tag that indicates a
+   * language, optionally followed by additional subtags separated by
+   * '-'. The most common extra information is the country or region
+   * variant (like 'en-US' or 'fr-CA').
+   *
+   *
+   * @see https://www.iso.org/iso-639-language-codes.html
+   * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
+   *
+   */
+  language: ShallowRef<string | undefined>
+}
+/**
+ *
+ * Reactive useNavigatorLanguage
+ *
+ * Detects the currently selected user language and returns a reactive language
+ * @see https://vueuse.org/useNavigatorLanguage
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNavigatorLanguage(
+  options?: ConfigurableWindow,
+): Readonly<NavigatorLanguageState>
+export type UseNavigatorLanguageReturn = ReturnType<typeof useNavigatorLanguage>
+```

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

@@ -0,0 +1,106 @@
+---
+category: Sensors
+---
+
+# useNetwork
+
+Reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API). The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.
+
+## Usage
+
+```ts
+import { useNetwork } from '@vueuse/core'
+
+const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()
+
+console.log(isOnline.value)
+```
+
+To use as an object, wrap it with `reactive()`
+
+```ts
+import { useNetwork } from '@vueuse/core'
+// ---cut---
+import { reactive } from 'vue'
+
+const network = reactive(useNetwork())
+
+console.log(network.isOnline)
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseNetwork v-slot="{ isOnline, type }">
+    Is Online: {{ isOnline }}
+    Type: {{ type }}
+  </UseNetwork>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type NetworkType =
+  | "bluetooth"
+  | "cellular"
+  | "ethernet"
+  | "none"
+  | "wifi"
+  | "wimax"
+  | "other"
+  | "unknown"
+export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
+export interface NetworkState {
+  isSupported: ComputedRef<boolean>
+  /**
+   * If the user is currently connected.
+   */
+  isOnline: Readonly<ShallowRef<boolean>>
+  /**
+   * The time since the user was last connected.
+   */
+  offlineAt: Readonly<ShallowRef<number | undefined>>
+  /**
+   * At this time, if the user is offline and reconnects
+   */
+  onlineAt: Readonly<ShallowRef<number | undefined>>
+  /**
+   * The download speed in Mbps.
+   */
+  downlink: Readonly<ShallowRef<number | undefined>>
+  /**
+   * The max reachable download speed in Mbps.
+   */
+  downlinkMax: Readonly<ShallowRef<number | undefined>>
+  /**
+   * The detected effective speed type.
+   */
+  effectiveType: Readonly<ShallowRef<NetworkEffectiveType | undefined>>
+  /**
+   * The estimated effective round-trip time of the current connection.
+   */
+  rtt: Readonly<ShallowRef<number | undefined>>
+  /**
+   * If the user activated data saver mode.
+   */
+  saveData: Readonly<ShallowRef<boolean | undefined>>
+  /**
+   * The detected connection/network type.
+   */
+  type: Readonly<ShallowRef<NetworkType>>
+}
+/**
+ * Reactive Network status.
+ *
+ * @see https://vueuse.org/useNetwork
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNetwork(
+  options?: ConfigurableWindow,
+): Readonly<NetworkState>
+export type UseNetworkReturn = ReturnType<typeof useNetwork>
+```

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

@@ -0,0 +1,79 @@
+---
+category: Animation
+---
+
+# useNow
+
+Reactive current Date instance.
+
+## Usage
+
+```ts
+import { useNow } from '@vueuse/core'
+
+const now = useNow()
+```
+
+```ts
+import { useNow } from '@vueuse/core'
+// ---cut---
+const { now, pause, resume } = useNow({ controls: true })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseNow v-slot="{ now, pause, resume }">
+    Now: {{ now }}
+    <button @click="pause()">
+      Pause
+    </button>
+    <button @click="resume()">
+      Resume
+    </button>
+  </UseNow>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseNowOptions<
+  Controls extends boolean,
+> extends ConfigurableScheduler {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Start the clock immediately
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Update interval in milliseconds, or use requestAnimationFrame
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default requestAnimationFrame
+   */
+  interval?: "requestAnimationFrame" | number
+}
+/**
+ * Reactive current Date instance.
+ *
+ * @see https://vueuse.org/useNow
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
+export declare function useNow(options: UseNowOptions<true>): {
+  now: Ref<Date>
+} & Pausable
+export type UseNowReturn = ReturnType<typeof useNow>
+```

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

@@ -0,0 +1,55 @@
+---
+category: Browser
+---
+
+# useObjectUrl
+
+Reactive URL representing an object.
+
+Creates an URL for the provided `File`, `Blob`, or `MediaSource` via [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) and automatically releases the URL via [URL.revokeObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL) when the source changes or the component is unmounted.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useObjectUrl } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const file = shallowRef()
+const url = useObjectUrl(file)
+
+function onFileChange(event) {
+  file.value = event.target.files[0]
+}
+</script>
+
+<template>
+  <input type="file" @change="onFileChange">
+
+  <a :href="url">Open file</a>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseObjectUrl v-slot="url" :object="file">
+    <a :href="url">Open file</a>
+  </UseObjectUrl>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive URL representing an object.
+ *
+ * @see https://vueuse.org/useObjectUrl
+ * @param object
+ */
+export declare function useObjectUrl(
+  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
+): Readonly<Ref<string | undefined, string | undefined>>
+```

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

@@ -0,0 +1,91 @@
+---
+category: '@RxJS'
+---
+
+# useObservable
+
+Use an RxJS [`Observable`](https://rxjs.dev/guide/observable), return a `ref`, and automatically unsubscribe from it when the component is unmounted.
+
+## Usage
+
+<!-- TODO: import rxjs error if enable twoslash -->
+
+```ts no-twoslash
+import { useObservable } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+import { mapTo, scan, startWith } from 'rxjs/operators'
+
+// setup()
+const count = useObservable(
+  interval(1000).pipe(
+    mapTo(1),
+    startWith(0),
+    scan((total, next) => next + total),
+  ),
+)
+```
+
+### Initial Value
+
+You can provide an initial value that will be used before the Observable emits its first value:
+
+```ts no-twoslash
+import { useObservable } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+
+const count = useObservable(
+  interval(1000),
+  { initialValue: 0 },
+)
+// count.value is 0 until the first emission
+```
+
+### Error Handling
+
+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).
+
+```ts no-twoslash
+import { useObservable } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+// setup()
+const count = useObservable(
+  interval(1000).pipe(
+    map((n) => {
+      if (n === 10)
+        throw new Error('oops')
+
+      return n + n
+    }),
+  ),
+  {
+    onError: (err) => {
+      console.log(err.message) // "oops"
+    },
+  },
+)
+```
+
+### Options
+
+| Option         | Type                 | Description                              |
+| -------------- | -------------------- | ---------------------------------------- |
+| `initialValue` | `T`                  | Value to use before the Observable emits |
+| `onError`      | `(err: any) => void` | Error handler for Observable errors      |
+
+## Type Declarations
+
+```ts
+export interface UseObservableOptions<I> {
+  onError?: (err: any) => void
+  /**
+   * The value that should be set if the observable has not emitted.
+   */
+  initialValue?: I | undefined
+}
+export declare function useObservable<H, I = undefined>(
+  observable: Observable<H>,
+  options?: UseObservableOptions<I | undefined>,
+): Readonly<Ref<H | I>>
+```