ads-fe 0.0.1

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

@@ -0,0 +1,57 @@
+---
+category: Sensors
+---
+
+# useFocusWithin
+
+Reactive utility to track if an element or one of its descendants has focus. It is meant to match the behavior of the `:focus-within` CSS pseudo-class. A common use case would be on a form element to see if any of its inputs currently have focus.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useFocusWithin } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+const target = ref()
+const { focused } = useFocusWithin(target)
+
+watch(focused, (focused) => {
+  if (focused)
+    console.log('Target contains the focused element')
+  else
+    console.log('Target does NOT contain the focused element')
+})
+</script>
+
+<template>
+  <form ref="target">
+    <input type="text" placeholder="First Name">
+    <input type="text" placeholder="Last Name">
+    <input type="text" placeholder="Email">
+    <input type="text" placeholder="Password">
+  </form>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseFocusWithinReturn {
+  /**
+   * True if the element or any of its descendants are focused
+   */
+  focused: ComputedRef<boolean>
+}
+/**
+ * Track if focus is contained within the target element
+ *
+ * @see https://vueuse.org/useFocusWithin
+ * @param target The target element to track
+ * @param options Focus within options
+ */
+export declare function useFocusWithin(
+  target: MaybeElementRef,
+  options?: ConfigurableWindow,
+): UseFocusWithinReturn
+```

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

@@ -0,0 +1,28 @@
+---
+category: Sensors
+---
+
+# useFps
+
+Reactive FPS (frames per second).
+
+## Usage
+
+```ts
+import { useFps } from '@vueuse/core'
+
+const fps = useFps()
+```
+
+## Type Declarations
+
+```ts
+export interface UseFpsOptions {
+  /**
+   * Calculate the FPS on every x frames.
+   * @default 10
+   */
+  every?: number
+}
+export declare function useFps(options?: UseFpsOptions): ShallowRef<number>
+```

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

@@ -0,0 +1,74 @@
+---
+category: Browser
+---
+
+# useFullscreen
+
+Reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). It adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to present desired content—such as an online game—using the user's entire screen, removing all browser user interface elements and other applications from the screen until full-screen mode is shut off.
+
+## Usage
+
+```ts
+import { useFullscreen } from '@vueuse/core'
+
+const { isFullscreen, enter, exit, toggle } = useFullscreen()
+```
+
+Fullscreen specified element. Some platforms (like iOS's Safari) only allow fullscreen on video elements.
+
+```vue
+<script setup lang="ts">
+import { useFullscreen } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { isFullscreen, enter, exit, toggle } = useFullscreen(el)
+</script>
+
+<template>
+  <video ref="el" />
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseFullscreen v-slot="{ toggle }">
+    <video />
+    <button @click="toggle">
+      Go Fullscreen
+    </button>
+  </UseFullscreen>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseFullscreenOptions extends ConfigurableDocument {
+  /**
+   * Automatically exit fullscreen when component is unmounted
+   *
+   * @default false
+   */
+  autoExit?: boolean
+}
+export interface UseFullscreenReturn extends Supportable {
+  isFullscreen: ShallowRef<boolean>
+  enter: () => Promise<void>
+  exit: () => Promise<void>
+  toggle: () => Promise<void>
+}
+/**
+ * Reactive Fullscreen API.
+ *
+ * @see https://vueuse.org/useFullscreen
+ * @param target
+ * @param options
+ */
+export declare function useFullscreen(
+  target?: MaybeElementRef,
+  options?: UseFullscreenOptions,
+): UseFullscreenReturn
+```

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

@@ -0,0 +1,75 @@
+---
+category: '@Integrations'
+---
+
+# useFuse
+
+Easily implement fuzzy search using a composable with [Fuse.js](https://github.com/krisk/fuse).
+
+From the Fuse.js website:
+
+> What is fuzzy searching?
+>
+> Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).
+
+## Install Fuse.js as a peer dependency
+
+### NPM
+
+```bash
+npm install fuse.js@^7
+```
+
+### Yarn
+
+```bash
+yarn add fuse.js
+```
+
+## Usage
+
+```ts
+import { useFuse } from '@vueuse/integrations/useFuse'
+import { shallowRef } from 'vue'
+
+const data = [
+  'John Smith',
+  'John Doe',
+  'Jane Doe',
+  'Phillip Green',
+  'Peter Brown',
+]
+
+const input = shallowRef('Jhon D')
+
+const { results } = useFuse(input, data)
+
+/*
+ * Results:
+ *
+ * { "item": "John Doe", "index": 1 }
+ * { "item": "John Smith", "index": 0 }
+ * { "item": "Jane Doe", "index": 2 }
+ *
+ */
+```
+
+## Type Declarations
+
+```ts
+export type FuseOptions<T> = IFuseOptions<T>
+export interface UseFuseOptions<T> {
+  fuseOptions?: FuseOptions<T>
+  resultLimit?: number
+  matchAllWhenSearchEmpty?: boolean
+}
+export interface UseFuseReturn<DataItem> {
+  fuse: Ref<Fuse<DataItem>>
+  results: ComputedRef<FuseResult<DataItem>[]>
+}
+export declare function useFuse<DataItem>(
+  search: MaybeRefOrGetter<string>,
+  data: MaybeRefOrGetter<DataItem[]>,
+  options?: MaybeRefOrGetter<UseFuseOptions<DataItem>>,
+): UseFuseReturn<DataItem>
+```

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

@@ -0,0 +1,176 @@
+---
+category: Browser
+---
+
+# useGamepad
+
+Provides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API).
+
+## Usage
+
+> Due to how the Gamepad API works, you must interact with the page using the gamepad before it will be detected.
+
+```vue
+<script setup lang="ts">
+import { useGamepad } from '@vueuse/core'
+import { computed } from 'vue'
+
+const { isSupported, gamepads } = useGamepad()
+const gamepad = computed(() => gamepads.value.find(g => g.mapping === 'standard'))
+</script>
+
+<template>
+  <span>
+    {{ gamepad.id }}
+  </span>
+</template>
+```
+
+### Gamepad Updates
+
+Currently the Gamepad API does not have event support to update the state of the gamepad. To update the gamepad state, `requestAnimationFrame` is used to poll for gamepad changes. You can control this polling by using the `pause` and `resume` functions provided by `useGamepad`
+
+```ts
+import { useGamepad } from '@vueuse/core'
+
+const { pause, resume, gamepads } = useGamepad()
+
+pause()
+
+// gamepads object will not update
+
+resume()
+
+// gamepads object will update on user input
+```
+
+### Gamepad Connect & Disconnect Events
+
+The `onConnected` and `onDisconnected` events will trigger when a gamepad is connected or disconnected.
+
+```ts
+import { useGamepad } from '@vueuse/core'
+// ---cut---
+const { gamepads, onConnected, onDisconnected } = useGamepad()
+
+onConnected((index) => {
+  console.log(`${gamepads.value[index].id} connected`)
+})
+
+onDisconnected((index) => {
+  console.log(`${index} disconnected`)
+})
+```
+
+### Vibration
+
+> The Gamepad Haptics API is sparse, so check the [compatibility table](https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator#browser_compatibility) before using.
+
+```ts
+import { useGamepad } from '@vueuse/core'
+// ---cut---
+import { computed } from 'vue'
+
+const { gamepads, onConnected, onDisconnected } = useGamepad()
+const gamepad = gamepads.value[0]!
+
+const supportsVibration = computed(() => gamepad.hapticActuators.length > 0)
+function vibrate() {
+  if (supportsVibration.value) {
+    const actuator = gamepad.hapticActuators[0]
+    actuator.playEffect('dual-rumble', {
+      startDelay: 0,
+      duration: 1000,
+      weakMagnitude: 1,
+      strongMagnitude: 1,
+    })
+  }
+}
+```
+
+### Mappings
+
+To make the Gamepad API easier to use, we provide mappings to map a controller to a controllers button layout.
+
+#### Xbox360 Controller
+
+```vue
+<script setup>
+import { mapGamepadToXbox360Controller } from '@vueuse/core'
+
+const controller = mapGamepadToXbox360Controller(gamepad)
+</script>
+
+<template>
+  <span>{{ controller.buttons.a.pressed }}</span>
+  <span>{{ controller.buttons.b.pressed }}</span>
+  <span>{{ controller.buttons.x.pressed }}</span>
+  <span>{{ controller.buttons.y.pressed }}</span>
+</template>
+```
+
+Currently there are only mappings for the Xbox 360 controller. If you have controller you want to add mappings for, feel free to open a PR for more controller mappings!
+
+### SSR Compatibility
+
+This component is designed to be used in the client side. In some cases, SSR might cause some hydration mismatches.
+
+If you are using Nuxt, you can simply rename your component file with the `.client.vue` suffix (e.g., `GamepadComponent.client.vue`) which will automatically make it render only on the client side, avoiding hydration mismatches.
+
+In other frameworks or plain Vue, you can wrap your usage component with a `<ClientOnly>` component to ensure it is only rendered on the client side.
+
+## Type Declarations
+
+```ts
+export interface UseGamepadOptions
+  extends ConfigurableWindow, ConfigurableNavigator {}
+export interface UseGamepadReturn extends Supportable, Pausable {
+  onConnected: EventHookOn<number>
+  onDisconnected: EventHookOn<number>
+  gamepads: Ref<Gamepad[]>
+}
+/**
+ * Maps a standard standard gamepad to an Xbox 360 Controller.
+ */
+export declare function mapGamepadToXbox360Controller(
+  gamepad: Ref<Gamepad | undefined>,
+): ComputedRef<{
+  buttons: {
+    a: GamepadButton
+    b: GamepadButton
+    x: GamepadButton
+    y: GamepadButton
+  }
+  bumper: {
+    left: GamepadButton
+    right: GamepadButton
+  }
+  triggers: {
+    left: GamepadButton
+    right: GamepadButton
+  }
+  stick: {
+    left: {
+      horizontal: number
+      vertical: number
+      button: GamepadButton
+    }
+    right: {
+      horizontal: number
+      vertical: number
+      button: GamepadButton
+    }
+  }
+  dpad: {
+    up: GamepadButton
+    down: GamepadButton
+    left: GamepadButton
+    right: GamepadButton
+  }
+  back: GamepadButton
+  start: GamepadButton
+} | null>
+export declare function useGamepad(
+  options?: UseGamepadOptions,
+): UseGamepadReturn
+```

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

@@ -0,0 +1,63 @@
+---
+category: Sensors
+---
+
+# useGeolocation
+
+Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). It allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
+
+## Usage
+
+```ts
+import { useGeolocation } from '@vueuse/core'
+
+const { coords, locatedAt, error, resume, pause } = useGeolocation()
+```
+
+| State     | Type                                                                          | Description                                                              |
+| --------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| coords    | [`Coordinates`](https://developer.mozilla.org/en-US/docs/Web/API/Coordinates) | information about the position retrieved like the latitude and longitude |
+| locatedAt | `Date`                                                                        | The time of the last geolocation call                                    |
+| error     | `string`                                                                      | An error message in case geolocation API fails.                          |
+| resume    | `function`                                                                    | Control function to resume updating geolocation                          |
+| pause     | `function`                                                                    | Control function to pause updating geolocation                           |
+
+## Config
+
+`useGeolocation` function takes [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object as an optional parameter.
+
+## Component Usage
+
+```vue
+<template>
+  <UseGeolocation v-slot="{ coords: { latitude, longitude } }">
+    Latitude: {{ latitude }}
+    Longitude: {{ longitude }}
+  </UseGeolocation>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseGeolocationOptions
+  extends Partial<PositionOptions>, ConfigurableNavigator {
+  immediate?: boolean
+}
+export interface UseGeolocationReturn extends Supportable {
+  coords: ShallowRef<Omit<GeolocationPosition["coords"], "toJSON">>
+  locatedAt: ShallowRef<number | null>
+  error: ShallowRef<GeolocationPositionError | null>
+  resume: () => void
+  pause: () => void
+}
+/**
+ * Reactive Geolocation API.
+ *
+ * @see https://vueuse.org/useGeolocation
+ * @param options
+ */
+export declare function useGeolocation(
+  options?: UseGeolocationOptions,
+): UseGeolocationReturn
+```

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

@@ -0,0 +1,93 @@
+---
+category: '@Integrations'
+---
+
+# useIDBKeyval
+
+Wrapper for [`idb-keyval`](https://www.npmjs.com/package/idb-keyval).
+
+## Install idb-keyval as a peer dependency
+
+```bash
+npm install idb-keyval@^6
+```
+
+## Usage
+
+```ts
+import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'
+
+// bind object
+const { data: storedObject, isFinished } = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })
+
+// update object
+storedObject.value.hello = 'hola'
+
+// bind boolean
+const flag = useIDBKeyval('my-flag', true) // returns Ref<boolean>
+
+// bind number
+const count = useIDBKeyval('my-count', 0) // returns Ref<number>
+
+// awaiting IDB transaction
+await count.set(10)
+console.log('IDB transaction finished!')
+
+// delete data from idb storage
+storedObject.value = null
+```
+
+## Type Declarations
+
+```ts
+interface Serializer<T> {
+  read: (raw: unknown) => T
+  write: (value: T) => unknown
+}
+export interface UseIDBOptions<T> extends ConfigurableFlush {
+  /**
+   * Watch for deep changes
+   *
+   * @default true
+   */
+  deep?: boolean
+  /**
+   * On error callback
+   *
+   * Default log error to `console.error`
+   */
+  onError?: (error: unknown) => void
+  /**
+   * Use shallow ref as reference
+   *
+   * @default false
+   */
+  shallow?: boolean
+  /**
+   * Write the default value to the storage when it does not exist
+   *
+   * @default true
+   */
+  writeDefaults?: boolean
+  /**
+   * Custom data serialization
+   */
+  serializer?: Serializer<T>
+}
+export interface UseIDBKeyvalReturn<T> {
+  data: RemovableRef<T>
+  isFinished: ShallowRef<boolean>
+  set: (value: T) => Promise<void>
+}
+/**
+ *
+ * @param key
+ * @param initialValue
+ * @param options
+ */
+export declare function useIDBKeyval<T>(
+  key: IDBValidKey,
+  initialValue: MaybeRefOrGetter<T>,
+  options?: UseIDBOptions<T>,
+): UseIDBKeyvalReturn<T>
+```

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

@@ -0,0 +1,88 @@
+---
+category: Sensors
+---
+
+# useIdle
+
+Tracks whether the user is being inactive.
+
+## Usage
+
+```ts
+import { useIdle } from '@vueuse/core'
+
+const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min
+
+console.log(idle.value) // true or false
+```
+
+Programatically resetting:
+
+```ts
+import { useCounter, useIdle } from '@vueuse/core'
+import { watch } from 'vue'
+
+const { inc, count } = useCounter()
+
+const { idle, lastActive, reset } = useIdle(5 * 60 * 1000) // 5 min
+
+watch(idle, (idleValue) => {
+  if (idleValue) {
+    inc()
+    console.log(`Triggered ${count.value} times`)
+    reset() // restarts the idle timer. Does not change lastActive value
+  }
+})
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseIdle v-slot="{ idle }" :timeout="5 * 60 * 1000">
+    Is Idle: {{ idle }}
+  </UseIdle>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseIdleOptions
+  extends ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Event names that listen to for detected user activity
+   *
+   * @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
+   */
+  events?: WindowEventName[]
+  /**
+   * Listen for document visibility change
+   *
+   * @default true
+   */
+  listenForVisibilityChange?: boolean
+  /**
+   * Initial state of the ref idle
+   *
+   * @default false
+   */
+  initialState?: boolean
+}
+export interface UseIdleReturn extends Stoppable {
+  idle: ShallowRef<boolean>
+  lastActive: ShallowRef<number>
+  reset: () => void
+}
+/**
+ * Tracks whether the user is being inactive.
+ *
+ * @see https://vueuse.org/useIdle
+ * @param timeout default to 1 minute
+ * @param options IdleOptions
+ */
+export declare function useIdle(
+  timeout?: number,
+  options?: UseIdleOptions,
+): UseIdleReturn
+```