devskill 2.0.2

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

@@ -0,0 +1,80 @@
+---
+category: Sensors
+---
+
+# usePointerSwipe
+
+Reactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { usePointerSwipe } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { isSwiping, direction } = usePointerSwipe(el)
+</script>
+
+<template>
+  <div ref="el">
+    Swipe here
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UsePointerSwipeOptions {
+  /**
+   * @default 50
+   */
+  threshold?: number
+  /**
+   * Callback on swipe start.
+   */
+  onSwipeStart?: (e: PointerEvent) => void
+  /**
+   * Callback on swipe move.
+   */
+  onSwipe?: (e: PointerEvent) => void
+  /**
+   * Callback on swipe end.
+   */
+  onSwipeEnd?: (e: PointerEvent, direction: UseSwipeDirection) => void
+  /**
+   * Pointer types to listen to.
+   *
+   * @default ['mouse', 'touch', 'pen']
+   */
+  pointerTypes?: PointerType[]
+  /**
+   * Disable text selection on swipe.
+   *
+   * @default false
+   */
+  disableTextSelect?: boolean
+}
+export interface UsePointerSwipeReturn {
+  readonly isSwiping: ShallowRef<boolean>
+  direction: Readonly<ShallowRef<UseSwipeDirection>>
+  readonly posStart: Position
+  readonly posEnd: Position
+  distanceX: Readonly<ComputedRef<number>>
+  distanceY: Readonly<ComputedRef<number>>
+  stop: () => void
+}
+/**
+ * Reactive swipe detection based on PointerEvents.
+ *
+ * @see https://vueuse.org/usePointerSwipe
+ * @param target
+ * @param options
+ */
+export declare function usePointerSwipe(
+  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
+  options?: UsePointerSwipeOptions,
+): UsePointerSwipeReturn
+```

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

@@ -0,0 +1,49 @@
+---
+category: '@Math'
+---
+
+# usePrecision
+
+Reactively set the precision of a number.
+
+## Usage
+
+```ts
+import { usePrecision } from '@vueuse/math'
+
+const value = ref(3.1415)
+const result = usePrecision(value, 2) // 3.14
+
+const ceilResult = usePrecision(value, 2, {
+  math: 'ceil'
+}) // 3.15
+
+const floorResult = usePrecision(value, 3, {
+  math: 'floor'
+}) // 3.141
+```
+
+## Type Declarations
+
+```ts
+export interface UsePrecisionOptions {
+  /**
+   * Method to use for rounding
+   *
+   * @default 'round'
+   */
+  math?: "floor" | "ceil" | "round"
+}
+/**
+ * Reactively set the precision of a number.
+ *
+ * @see https://vueuse.org/usePrecision
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePrecision(
+  value: MaybeRefOrGetter<number>,
+  digits: MaybeRefOrGetter<number>,
+  options?: MaybeRefOrGetter<UsePrecisionOptions>,
+): ComputedRef<number>
+```

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

@@ -0,0 +1,42 @@
+---
+category: Browser
+---
+
+# usePreferredColorScheme
+
+Reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query.
+
+## Usage
+
+```ts
+import { usePreferredColorScheme } from '@vueuse/core'
+
+const preferredColor = usePreferredColorScheme()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredColorScheme v-slot="{ colorScheme }">
+    Preferred Color Scheme: {{ colorScheme }}
+  </UsePreferredColorScheme>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type ColorSchemeType = "dark" | "light" | "no-preference"
+/**
+ * Reactive prefers-color-scheme media query.
+ *
+ * @see https://vueuse.org/usePreferredColorScheme
+ * @param [options]
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePreferredColorScheme(
+  options?: ConfigurableWindow,
+): ComputedRef<ColorSchemeType>
+```

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

@@ -0,0 +1,42 @@
+---
+category: Browser
+---
+
+# usePreferredContrast
+
+Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query.
+
+## Usage
+
+```ts
+import { usePreferredContrast } from '@vueuse/core'
+
+const preferredContrast = usePreferredContrast()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredContrast v-slot="{ contrast }">
+    Preferred Contrast: {{ contrast }}
+  </UsePreferredContrast>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type ContrastType = "more" | "less" | "custom" | "no-preference"
+/**
+ * Reactive prefers-contrast media query.
+ *
+ * @see https://vueuse.org/usePreferredContrast
+ * @param [options]
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePreferredContrast(
+  options?: ConfigurableWindow,
+): ComputedRef<ContrastType>
+```

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

@@ -0,0 +1,41 @@
+---
+category: Browser
+---
+
+# usePreferredDark
+
+Reactive dark theme preference.
+
+## Usage
+
+```ts
+import { usePreferredDark } from '@vueuse/core'
+
+const isDark = usePreferredDark()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredDark v-slot="{ prefersDark }">
+    Prefers Dark: {{ prefersDark }}
+  </UsePreferredDark>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive dark theme preference.
+ *
+ * @see https://vueuse.org/usePreferredDark
+ * @param [options]
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePreferredDark(
+  options?: ConfigurableWindow,
+): ComputedRef<boolean>
+```

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

@@ -0,0 +1,41 @@
+---
+category: Browser
+---
+
+# usePreferredLanguages
+
+Reactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages). It provides web developers with information about the user's preferred languages. For example, this may be useful to adjust the language of the user interface based on the user's preferred languages in order to provide better experience.
+
+## Usage
+
+```ts
+import { usePreferredLanguages } from '@vueuse/core'
+
+const languages = usePreferredLanguages()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredLanguages v-slot="{ languages }">
+    Preferred Languages: {{ languages }}
+  </UsePreferredLanguages>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive Navigator Languages.
+ *
+ * @see https://vueuse.org/usePreferredLanguages
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePreferredLanguages(
+  options?: ConfigurableWindow,
+): ShallowRef<readonly string[]>
+```

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

@@ -0,0 +1,42 @@
+---
+category: Browser
+---
+
+# usePreferredReducedMotion
+
+Reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query.
+
+## Usage
+
+```ts
+import { usePreferredReducedMotion } from '@vueuse/core'
+
+const preferredMotion = usePreferredReducedMotion()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredReducedMotion v-slot="{ motion }">
+    Preferred Reduced Motion: {{ motion }}
+  </UsePreferredReducedMotion>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type ReducedMotionType = "reduce" | "no-preference"
+/**
+ * Reactive prefers-reduced-motion media query.
+ *
+ * @see https://vueuse.org/usePreferredReducedMotion
+ * @param [options]
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePreferredReducedMotion(
+  options?: ConfigurableWindow,
+): ComputedRef<ReducedMotionType>
+```

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

@@ -0,0 +1,42 @@
+---
+category: Browser
+---
+
+# usePreferredReducedTransparency
+
+Reactive [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query.
+
+## Usage
+
+```ts
+import { usePreferredReducedTransparency } from '@vueuse/core'
+
+const preferredTransparency = usePreferredReducedTransparency()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePreferredReducedTransparency v-slot="{ transparency }">
+    Preferred Reduced transparency: {{ transparency }}
+  </UsePreferredReducedTransparency>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type ReducedTransparencyType = "reduce" | "no-preference"
+/**
+ * Reactive prefers-reduced-transparency media query.
+ *
+ * @see https://vueuse.org/usePreferredReducedTransparency
+ * @param [options]
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePreferredReducedTransparency(
+  options?: ConfigurableWindow,
+): ComputedRef<ReducedTransparencyType>
+```

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

@@ -0,0 +1,40 @@
+---
+category: Utilities
+---
+
+# usePrevious
+
+Holds the previous value of a ref.
+
+## Usage
+
+```ts
+import { usePrevious } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const counter = shallowRef('Hello')
+const previous = usePrevious(counter)
+
+console.log(previous.value) // undefined
+
+counter.value = 'World'
+
+console.log(previous.value) // Hello
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Holds the previous value of a ref.
+ *
+ * @see   {@link https://vueuse.org/usePrevious}
+ */
+export declare function usePrevious<T>(
+  value: MaybeRefOrGetter<T>,
+): Readonly<ShallowRef<T | undefined>>
+export declare function usePrevious<T>(
+  value: MaybeRefOrGetter<T>,
+  initialValue: T,
+): Readonly<ShallowRef<T>>
+```

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

@@ -0,0 +1,38 @@
+---
+category: '@Math'
+related: createGenericProjection
+---
+
+# useProjection
+
+Reactive numeric projection from one domain to another.
+
+## Usage
+
+```ts
+import { useProjection } from '@vueuse/math'
+
+const input = ref(0)
+const projected = useProjection(input, [0, 10], [0, 100])
+
+input.value = 5 // projected.value === 50
+input.value = 10 // projected.value === 100
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive numeric projection from one domain to another.
+ *
+ * @see https://vueuse.org/useProjection
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useProjection(
+  input: MaybeRefOrGetter<number>,
+  fromDomain: MaybeRefOrGetter<readonly [number, number]>,
+  toDomain: MaybeRefOrGetter<readonly [number, number]>,
+  projector?: ProjectorFunction<number, number>,
+): ComputedRef<number>
+```

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

@@ -0,0 +1,53 @@
+---
+category: '@Integrations'
+---
+
+# useQRCode
+
+Wrapper for [`qrcode`](https://github.com/soldair/node-qrcode).
+
+## Install
+
+```bash
+npm i qrcode@^1
+```
+
+## Usage
+
+```ts
+import { useQRCode } from '@vueuse/integrations/useQRCode'
+
+// `qrcode` will be a ref of data URL
+const qrcode = useQRCode('text-to-encode')
+```
+
+or passing a `ref` to it, the returned data URL ref will change along with the source ref's changes.
+
+```ts
+import { useQRCode } from '@vueuse/integrations/useQRCode'
+import { shallowRef } from 'vue'
+
+const text = shallowRef('text-to-encode')
+const qrcode = useQRCode(text)
+```
+
+```html
+<input v-model="text" type="text" />
+<img :src="qrcode" alt="QR Code" />
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Wrapper for qrcode.
+ *
+ * @see https://vueuse.org/useQRCode
+ * @param text
+ * @param options
+ */
+export declare function useQRCode(
+  text: MaybeRefOrGetter<string>,
+  options?: QRCode.QRCodeToDataURLOptions,
+): ShallowRef<string, string>
+```

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

@@ -0,0 +1,83 @@
+---
+category: '@Firebase'
+---
+
+# useRTDB
+
+Reactive [Firebase Realtime Database](https://firebase.google.com/docs/database) binding. Making it straightforward to **always keep your local data in sync** with remotes databases.
+
+## Usage
+
+```ts
+import { useRTDB } from '@vueuse/firebase/useRTDB'
+import { initializeApp } from 'firebase/app'
+import { getDatabase } from 'firebase/database'
+
+const app = initializeApp({ /* config */ })
+const db = getDatabase(app)
+
+// in setup()
+const todos = useRTDB(db.ref('todos'))
+```
+
+## Options
+
+| Option         | Type                   | Default         | Description                                               |
+| -------------- | ---------------------- | --------------- | --------------------------------------------------------- |
+| `autoDispose`  | `boolean`              | `true`          | Automatically unsubscribe when the component is unmounted |
+| `errorHandler` | `(err: Error) => void` | `console.error` | Custom error handler for database errors                  |
+
+## Return Value
+
+Returns a `Ref<T | undefined>` that is automatically updated when the database value changes.
+
+## Reusing Database References
+
+You can reuse the db reference by passing `autoDispose: false`
+
+```ts
+const todos = useRTDB(db.ref('todos'), { autoDispose: false })
+```
+
+or use `createGlobalState` from the core package
+
+```ts twoslash include store
+// @filename: store.ts
+// ---cut---
+// store.ts
+import { createGlobalState } from '@vueuse/core'
+import { useRTDB } from '@vueuse/firebase/useRTDB'
+
+export const useTodos = createGlobalState(
+  () => useRTDB(db.ref('todos')),
+)
+```
+
+```vue
+<!-- app.vue -->
+<script setup lang="ts">
+// @include: store
+// ---cut---
+import { useTodos } from './store'
+
+const todos = useTodos()
+</script>
+```
+
+## Type Declarations
+
+```ts
+export interface UseRTDBOptions {
+  errorHandler?: (err: Error) => void
+  autoDispose?: boolean
+}
+/**
+ * Reactive Firebase Realtime Database binding.
+ *
+ * @see https://vueuse.org/useRTDB
+ */
+export declare function useRTDB<T = any>(
+  docRef: DatabaseReference,
+  options?: UseRTDBOptions,
+): Ref<T | undefined, T | undefined>
+```

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

@@ -0,0 +1,68 @@
+---
+category: Animation
+---
+
+# useRafFn
+
+Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+
+## Usage
+
+```ts
+import { useRafFn } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const count = shallowRef(0)
+
+const { pause, resume } = useRafFn(() => {
+  count.value++
+  console.log(count.value)
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseRafFnCallbackArguments {
+  /**
+   * Time elapsed between this and the last frame.
+   */
+  delta: number
+  /**
+   * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}.
+   */
+  timestamp: DOMHighResTimeStamp
+}
+export interface UseRafFnOptions extends ConfigurableWindow {
+  /**
+   * Start the requestAnimationFrame loop immediately on creation
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * The maximum frame per second to execute the function.
+   * Set to `undefined` to disable the limit.
+   *
+   * @default undefined
+   */
+  fpsLimit?: MaybeRefOrGetter<number>
+  /**
+   * After the requestAnimationFrame loop executed once, it will be automatically stopped.
+   *
+   * @default false
+   */
+  once?: boolean
+}
+/**
+ * Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
+ *
+ * @see https://vueuse.org/useRafFn
+ * @param fn
+ * @param options
+ */
+export declare function useRafFn(
+  fn: (args: UseRafFnCallbackArguments) => void,
+  options?: UseRafFnOptions,
+): Pausable
+```