ads-fe 0.0.1

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 `null` to disable the limit.
+   *
+   * @default null
+   */
+  fpsLimit?: MaybeRefOrGetter<number | null>
+  /**
+   * 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
+```

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

@@ -0,0 +1,285 @@
+---
+category: State
+related: useManualRefHistory
+---
+
+# useRefHistory
+
+Track the change history of a ref, also provides undo and redo functionality
+
+<CourseLink href="https://vueschool.io/lessons/ref-history-with-vueuse?friend=vueuse">Learn useRefHistory with this FREE video lesson from Vue School!</CourseLink>
+
+## Usage
+
+```ts {5} twoslash include usage
+import { useRefHistory } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const counter = shallowRef(0)
+const { history, undo, redo } = useRefHistory(counter)
+```
+
+Internally, `watch` is used to trigger a history point when the ref value is modified. This means that history points are triggered asynchronously batching modifications in the same "tick".
+
+```ts
+// @include: usage
+// ---cut---
+counter.value += 1
+
+await nextTick()
+console.log(history.value)
+/* [
+  { snapshot: 1, timestamp: 1601912898062 },
+  { snapshot: 0, timestamp: 1601912898061 }
+] */
+```
+
+You can use `undo` to reset the ref value to the last history point.
+
+```ts
+// @include: usage
+// ---cut---
+console.log(counter.value) // 1
+undo()
+console.log(counter.value) // 0
+```
+
+### Objects / arrays
+
+When working with objects or arrays, since changing their attributes does not change the reference, it will not trigger the committing. To track attribute changes, you would need to pass `deep: true`. It will create clones for each history record.
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+// ---cut---
+const state = ref({
+  foo: 1,
+  bar: 'bar',
+})
+
+const { history, undo, redo } = useRefHistory(state, {
+  deep: true,
+})
+
+state.value.foo = 2
+
+await nextTick()
+console.log(history.value)
+/* [
+  { snapshot: { foo: 2, bar: 'bar' } },
+  { snapshot: { foo: 1, bar: 'bar' } }
+] */
+```
+
+#### Custom Clone Function
+
+`useRefHistory` only embeds the minimal clone function `x => JSON.parse(JSON.stringify(x))`. To use a full featured or custom clone function, you can set up via the `clone` options.
+
+For example, using [structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone):
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+
+const refHistory = useRefHistory(target, { clone: structuredClone })
+```
+
+Or by using [lodash's `cloneDeep`](https://lodash.com/docs/4.17.15#cloneDeep):
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+import { cloneDeep } from 'lodash-es'
+
+const refHistory = useRefHistory(target, { clone: cloneDeep })
+```
+
+Or a more lightweight [`klona`](https://github.com/lukeed/klona):
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+import { klona } from 'klona'
+
+const refHistory = useRefHistory(target, { clone: klona })
+```
+
+#### Custom Dump and Parse Function
+
+Instead of using the `clone` options, you can pass custom functions to control the serialization and parsing. In case you do not need history values to be objects, this can save an extra clone when undoing. It is also useful in case you want to have the snapshots already stringified to be saved to local storage for example.
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+
+const refHistory = useRefHistory(target, {
+  dump: JSON.stringify,
+  parse: JSON.parse,
+})
+```
+
+### History Capacity
+
+We will keep all the history by default (unlimited) until you explicitly clear them up, you can set the maximal amount of history to be kept by `capacity` options.
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+// ---cut---
+const refHistory = useRefHistory(target, {
+  capacity: 15, // limit to 15 history records
+})
+
+refHistory.clear() // explicitly clear all the history
+```
+
+### History WatchOptionFlush Timing
+
+From [Vue's documentation](https://vuejs.org/guide/essentials/watchers.html#callback-flush-timing): Vue's reactivity system buffers invalidated effects and flush them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick".
+
+In the same way as `watch`, you can modify the flush timing using the `flush` option.
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+// ---cut---
+const refHistory = useRefHistory(target, {
+  flush: 'sync', // options 'pre' (default), 'post' and 'sync'
+})
+```
+
+The default is `'pre'`, to align this composable with the default for Vue's watchers. This also helps to avoid common issues, like several history points generated as part of a multi-step update to a ref value that can break invariants of the app state. You can use `commit()` in case you need to create multiple history points in the same "tick"
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+// ---cut---
+const r = shallowRef(0)
+const { history, commit } = useRefHistory(r)
+
+r.value = 1
+commit()
+
+r.value = 2
+commit()
+
+console.log(history.value)
+/* [
+  { snapshot: 2 },
+  { snapshot: 1 },
+  { snapshot: 0 },
+] */
+```
+
+On the other hand, when using flush `'sync'`, you can use `batch(fn)` to generate a single history point for several sync operations
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+// ---cut---
+const r = ref({ names: [], version: 1 })
+const { history, batch } = useRefHistory(r, { flush: 'sync' })
+
+batch(() => {
+  r.value.names.push('Lena')
+  r.value.version++
+})
+
+console.log(history.value)
+/* [
+  { snapshot: { names: [ 'Lena' ], version: 2 },
+  { snapshot: { names: [], version: 1 },
+] */
+```
+
+If `{ flush: 'sync', deep: true }` is used, `batch` is also useful when doing a mutable `splice` in an array. `splice` can generate up to three atomic operations that will be pushed to the ref history.
+
+```ts
+import { useRefHistory } from '@vueuse/core'
+// ---cut---
+const arr = ref([1, 2, 3])
+const { history, batch } = useRefHistory(arr, { deep: true, flush: 'sync' })
+
+batch(() => {
+  arr.value.splice(1, 1) // batch ensures only one history point is generated
+})
+```
+
+Another option is to avoid mutating the original ref value using `arr.value = [...arr.value].splice(1,1)`.
+
+## Recommended Readings
+
+- [History and Persistence](https://patak.dev/vue/history-and-persistence.html) - by [@patak-dev](https://github.com/patak-dev)
+
+## Type Declarations
+
+```ts
+export interface UseRefHistoryOptions<Raw, Serialized = Raw>
+  extends ConfigurableEventFilter, ConfigurableFlush {
+  /**
+   * Watch for deep changes, default to false
+   *
+   * When set to true, it will also create clones for values store in the history
+   *
+   * @default false
+   */
+  deep?: boolean
+  /**
+   * Maximum number of history to be kept. Default to unlimited.
+   */
+  capacity?: number
+  /**
+   * Clone when taking a snapshot, shortcut for dump: JSON.parse(JSON.stringify(value)).
+   * Default to false
+   *
+   * @default false
+   */
+  clone?: boolean | CloneFn<Raw>
+  /**
+   * Serialize data into the history
+   */
+  dump?: (v: Raw) => Serialized
+  /**
+   * Deserialize data from the history
+   */
+  parse?: (v: Serialized) => Raw
+  /**
+   * Function to determine if the commit should proceed
+   * @param oldValue Previous value
+   * @param newValue New value
+   * @returns boolean indicating if commit should proceed
+   */
+  shouldCommit?: (oldValue: Raw | undefined, newValue: Raw) => boolean
+}
+export interface UseRefHistoryReturn<
+  Raw,
+  Serialized,
+> extends UseManualRefHistoryReturn<Raw, Serialized> {
+  /**
+   * A ref representing if the tracking is enabled
+   */
+  isTracking: Ref<boolean>
+  /**
+   * Pause change tracking
+   */
+  pause: () => void
+  /**
+   * Resume change tracking
+   *
+   * @param [commit] if true, a history record will be create after resuming
+   */
+  resume: (commit?: boolean) => void
+  /**
+   * A sugar for auto pause and auto resuming within a function scope
+   *
+   * @param fn
+   */
+  batch: (fn: (cancel: Fn) => void) => void
+  /**
+   * Clear the data and stop the watch
+   */
+  dispose: () => void
+}
+/**
+ * Track the change history of a ref, also provides undo and redo functionality.
+ *
+ * @see https://vueuse.org/useRefHistory
+ * @param source
+ * @param options
+ */
+export declare function useRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options?: UseRefHistoryOptions<Raw, Serialized>,
+): UseRefHistoryReturn<Raw, Serialized>
+```