ads-fe 0.0.1

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

@@ -0,0 +1,100 @@
+---
+category: Utilities
+related: useThrottleFn
+---
+
+# useDebounceFn
+
+Debounce execution of a function.
+
+> Debounce is an overloaded waiter: if you keep asking, your requests will be ignored until you stop and give them some time to think about your latest inquiry.
+
+## Usage
+
+```ts
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+
+const debouncedFn = useDebounceFn(() => {
+  // do something
+}, 1000)
+
+useEventListener(window, 'resize', debouncedFn)
+```
+
+You can also pass a 3rd parameter to this, with a maximum wait time, similar to [lodash debounce](https://lodash.com/docs/4.17.15#debounce)
+
+```ts
+import { useDebounceFn, useEventListener } from '@vueuse/core'
+
+// If no invokation after 5000ms due to repeated input,
+// the function will be called anyway.
+const debouncedFn = useDebounceFn(() => {
+  // do something
+}, 1000, { maxWait: 5000 })
+
+useEventListener(window, 'resize', debouncedFn)
+```
+
+Optionally, you can get the return value of the function using promise operations.
+
+```ts
+import { useDebounceFn } from '@vueuse/core'
+
+const debouncedRequest = useDebounceFn(() => 'response', 1000)
+
+debouncedRequest().then((value) => {
+  console.log(value) // 'response'
+})
+
+// or use async/await
+async function doRequest() {
+  const value = await debouncedRequest()
+  console.log(value) // 'response'
+}
+```
+
+Since unhandled rejection error is quite annoying when developer doesn't need the return value, the promise will **NOT** be rejected if the function is canceled **by default**. You need to specify the option `rejectOnCancel: true` to capture the rejection.
+
+```ts
+import { useDebounceFn } from '@vueuse/core'
+
+const debouncedRequest = useDebounceFn(() => 'response', 1000, { rejectOnCancel: true })
+
+debouncedRequest()
+  .then((value) => {
+    // do something
+  })
+  .catch(() => {
+    // do something when canceled
+  })
+
+// calling it again will cancel the previous request and gets rejected
+setTimeout(debouncedRequest, 500)
+```
+
+## Recommended Reading
+
+- [**Debounce vs Throttle**: Definitive Visual Guide](https://kettanaito.com/blog/debounce-vs-throttle)
+
+## Type Declarations
+
+```ts
+export type UseDebounceFnReturn<T extends FunctionArgs> = PromisifyFn<T>
+/**
+ * Debounce execution of a function.
+ *
+ * @see https://vueuse.org/useDebounceFn
+ * @param  fn          A function to be executed after delay milliseconds debounced.
+ * @param  ms          A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ * @param  options     Options
+ *
+ * @return A new, debounce, function.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useDebounceFn<T extends FunctionArgs>(
+  fn: T,
+  ms?: MaybeRefOrGetter<number>,
+  options?: DebounceFilterOptions,
+): UseDebounceFnReturn<T>
+```

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

@@ -0,0 +1,40 @@
+---
+category: State
+related:
+  - useRefHistory
+  - useThrottledRefHistory
+---
+
+# useDebouncedRefHistory
+
+Shorthand for `useRefHistory` with debounced filter.
+
+## Usage
+
+This function takes a snapshot of your counter after 1000ms when the value of it starts to change.
+
+```ts
+import { useDebouncedRefHistory } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const counter = shallowRef(0)
+const { history, undo, redo } = useDebouncedRefHistory(counter, { deep: true, debounce: 1000 })
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with debounce filter.
+ *
+ * @see https://vueuse.org/useDebouncedRefHistory
+ * @param source
+ * @param options
+ */
+export declare function useDebouncedRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options?: Omit<UseRefHistoryOptions<Raw, Serialized>, "eventFilter"> & {
+    debounce?: MaybeRefOrGetter<number>
+  },
+): UseRefHistoryReturn<Raw, Serialized>
+```

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

@@ -0,0 +1,80 @@
+---
+category: Sensors
+---
+
+# useDeviceMotion
+
+Reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent). Provide web developers with information about the speed of changes for the device's position and orientation.
+
+## Usage
+
+```ts
+import { useDeviceMotion } from '@vueuse/core'
+
+const {
+  acceleration,
+  accelerationIncludingGravity,
+  rotationRate,
+  interval,
+} = useDeviceMotion()
+```
+
+> Note: For iOS, you need to use `trigger` and bind it with user interaction.
+> After permission granted, the API will run automatically
+
+| State                        | Type            | Description                                                                                                          |
+| ---------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------- |
+| acceleration                 | `object`        | An object giving the acceleration of the device on the three axis X, Y and Z.                                        |
+| accelerationIncludingGravity | `object`        | An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity.             |
+| rotationRate                 | `object`        | An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. |
+| interval                     | `Number`        | A number representing the interval of time, in milliseconds, at which data is obtained from the device..             |
+| ensurePermissions            | `boolean`       | Indicates whether the platform requires permission to use the API                                                    |
+| permissionGranted            | `boolean`       | Indicates whether the user has granted permission. The default is always false                                       |
+| trigger                      | `Promise<void>` | An async function to request user permission. The API runs automatically once permission is granted                  |
+
+You can find [more information about the state on the MDN](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent#instance_properties).
+
+## Component Usage
+
+```vue
+<template>
+  <UseDeviceMotion v-slot="{ acceleration }">
+    Acceleration: {{ acceleration }}
+  </UseDeviceMotion>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDeviceMotionOptions
+  extends ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Request for permissions immediately if it's not granted,
+   * otherwise label and deviceIds could be empty
+   *
+   * @default false
+   */
+  requestPermissions?: boolean
+}
+/** @deprecated use {@link UseDeviceMotionOptions} instead */
+export type DeviceMotionOptions = UseDeviceMotionOptions
+export interface UseDeviceMotionReturn extends Supportable {
+  acceleration: Ref<DeviceMotionEventAcceleration | null>
+  accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>
+  rotationRate: Ref<DeviceMotionEventRotationRate | null>
+  interval: ShallowRef<number>
+  requirePermissions: ComputedRef<boolean>
+  ensurePermissions: () => Promise<void>
+  permissionGranted: ShallowRef<boolean>
+}
+/**
+ * Reactive DeviceMotionEvent.
+ *
+ * @see https://vueuse.org/useDeviceMotion
+ * @param options
+ */
+export declare function useDeviceMotion(
+  options?: UseDeviceMotionOptions,
+): UseDeviceMotionReturn
+```

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

@@ -0,0 +1,64 @@
+---
+category: Sensors
+---
+
+# useDeviceOrientation
+
+Reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent). Provide web developers with information from the physical orientation of the device running the web page.
+
+## Usage
+
+```ts
+import { useDeviceOrientation } from '@vueuse/core'
+
+const {
+  isAbsolute,
+  alpha,
+  beta,
+  gamma,
+} = useDeviceOrientation()
+```
+
+| State      | Type      | Description                                                                                                                |
+| ---------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
+| isAbsolute | `boolean` | A boolean that indicates whether or not the device is providing orientation data absolutely.                               |
+| alpha      | `number`  | A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.    |
+| beta       | `number`  | A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. |
+| gamma      | `number`  | A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.   |
+
+You can find [more information about the state on the MDN](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent#instance_properties).
+
+## Component Usage
+
+```vue
+<template>
+  <UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
+    Alpha: {{ alpha }}
+    Beta: {{ beta }}
+    Gamma: {{ gamma }}
+  </UseDeviceOrientation>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDeviceOrientationOptions extends ConfigurableWindow {}
+export interface UseDeviceOrientationReturn extends Supportable {
+  isAbsolute: ShallowRef<boolean, boolean>
+  alpha: Ref<number | null, number | null>
+  beta: Ref<number | null, number | null>
+  gamma: Ref<number | null, number | null>
+}
+/**
+ * Reactive DeviceOrientationEvent.
+ *
+ * @see https://vueuse.org/useDeviceOrientation
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useDeviceOrientation(
+  options?: UseDeviceOrientationOptions,
+): UseDeviceOrientationReturn
+```

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

@@ -0,0 +1,47 @@
+---
+category: Sensors
+---
+
+# useDevicePixelRatio
+
+Reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)
+
+> NOTE: there is no event listener for `window.devicePixelRatio` change. So this function uses [`Testing media queries programmatically (window.matchMedia)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) applying the same mechanism as described in [this example](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes).
+
+## Usage
+
+```ts
+import { useDevicePixelRatio } from '@vueuse/core'
+
+const { pixelRatio } = useDevicePixelRatio()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseDevicePixelRatio v-slot="{ pixelRatio }">
+    Pixel Ratio: {{ pixelRatio }}
+  </UseDevicePixelRatio>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDevicePixelRatioOptions extends ConfigurableWindow {}
+export interface UseDevicePixelRatioReturn {
+  pixelRatio: Readonly<ShallowRef<number>>
+  stop: WatchStopHandle
+}
+/**
+ * Reactively track `window.devicePixelRatio`.
+ *
+ * @see https://vueuse.org/useDevicePixelRatio
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useDevicePixelRatio(
+  options?: UseDevicePixelRatioOptions,
+): UseDevicePixelRatioReturn
+```

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

@@ -0,0 +1,89 @@
+---
+category: Sensors
+---
+
+# useDevicesList
+
+Reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices.
+
+## Usage
+
+```ts
+import { useDevicesList } from '@vueuse/core'
+
+const {
+  devices,
+  videoInputs: cameras,
+  audioInputs: microphones,
+  audioOutputs: speakers,
+} = useDevicesList()
+```
+
+## Requesting Permissions
+
+To request permissions, use the `ensurePermissions` method.
+
+```ts
+import { useDevicesList } from '@vueuse/core'
+// ---cut---
+const {
+  ensurePermissions,
+  permissionGranted,
+} = useDevicesList()
+
+await ensurePermissions()
+console.log(permissionsGranted.value)
+```
+
+## Component
+
+```vue
+<template>
+  <UseDevicesList v-slot="{ videoInputs, audioInputs, audioOutputs }">
+    Cameras: {{ videoInputs }}
+    Microphones: {{ audioInputs }}
+    Speakers: {{ audioOutputs }}
+  </UseDevicesList>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDevicesListOptions extends ConfigurableNavigator {
+  onUpdated?: (devices: MediaDeviceInfo[]) => void
+  /**
+   * Request for permissions immediately if it's not granted,
+   * otherwise label and deviceIds could be empty
+   *
+   * @default false
+   */
+  requestPermissions?: boolean
+  /**
+   * Request for types of media permissions
+   *
+   * @default { audio: true, video: true }
+   */
+  constraints?: MediaStreamConstraints
+}
+export interface UseDevicesListReturn extends Supportable {
+  /**
+   * All devices
+   */
+  devices: ShallowRef<MediaDeviceInfo[]>
+  videoInputs: ComputedRef<MediaDeviceInfo[]>
+  audioInputs: ComputedRef<MediaDeviceInfo[]>
+  audioOutputs: ComputedRef<MediaDeviceInfo[]>
+  permissionGranted: ShallowRef<boolean>
+  ensurePermissions: () => Promise<boolean>
+}
+/**
+ * Reactive `enumerateDevices` listing available input/output devices
+ *
+ * @see https://vueuse.org/useDevicesList
+ * @param options
+ */
+export declare function useDevicesList(
+  options?: UseDevicesListOptions,
+): UseDevicesListReturn
+```

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

@@ -0,0 +1,67 @@
+---
+category: Sensors
+related: useUserMedia
+---
+
+# useDisplayMedia
+
+Reactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useDisplayMedia } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const { stream, start } = useDisplayMedia()
+
+// start streaming
+start()
+
+const videoRef = useTemplateRef('video')
+watchEffect(() => {
+  // preview on a video element
+  videoRef.value.srcObject = stream.value
+})
+</script>
+
+<template>
+  <video ref="video" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDisplayMediaOptions extends ConfigurableNavigator {
+  /**
+   * If the stream is enabled
+   * @default false
+   */
+  enabled?: MaybeRef<boolean>
+  /**
+   * If the stream video media constraints
+   */
+  video?: boolean | MediaTrackConstraints | undefined
+  /**
+   * If the stream audio media constraints
+   */
+  audio?: boolean | MediaTrackConstraints | undefined
+}
+export interface UseDisplayMediaReturn extends Supportable {
+  stream: ShallowRef<MediaStream | undefined>
+  start: () => Promise<MediaStream | undefined>
+  stop: () => void
+  enabled: ShallowRef<boolean>
+}
+/**
+ * Reactive `mediaDevices.getDisplayMedia` streaming
+ *
+ * @see https://vueuse.org/useDisplayMedia
+ * @param options
+ */
+export declare function useDisplayMedia(
+  options?: UseDisplayMediaOptions,
+): UseDisplayMediaReturn
+```

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

@@ -0,0 +1,44 @@
+---
+category: Elements
+---
+
+# useDocumentVisibility
+
+Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useDocumentVisibility } from '@vueuse/core'
+
+const visibility = useDocumentVisibility()
+</script>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseDocumentVisibility v-slot="{ visibility }">
+    Document Visibility: {{ visibility }}
+  </UseDocumentVisibility>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDocumentVisibilityOptions extends ConfigurableDocument {}
+export type UseDocumentVisibilityReturn = ShallowRef<DocumentVisibilityState>
+/**
+ * Reactively track `document.visibilityState`.
+ *
+ * @see https://vueuse.org/useDocumentVisibility
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useDocumentVisibility(
+  options?: UseDocumentVisibilityOptions,
+): UseDocumentVisibilityReturn
+```