ads-fe 0.0.1

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

@@ -0,0 +1,54 @@
+---
+category: Elements
+---
+
+# useParentElement
+
+Get parent element of the given element
+
+## Usage
+
+When no argument is passed, it will return the parent element of the current component.
+
+```vue
+<script setup lang="ts">
+import { useParentElement } from '@vueuse/core'
+
+const parentEl = useParentElement()
+
+onMounted(() => {
+  console.log(parentEl.value)
+})
+</script>
+```
+
+It can also accept a `ref` as the first argument.
+
+```vue
+<script setup lang="ts">
+import { useParentElement } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const tooltip = useTemplateRef('tooltip')
+
+const tooltipWrapper = useParentElement(tooltip)
+
+onMounted(() => {
+  console.log(tooltipWrapper.value)
+})
+</script>
+
+<template>
+  <div>
+    <p ref="tooltip" />
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export declare function useParentElement(
+  element?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>,
+): Readonly<ShallowRef<HTMLElement | SVGElement | null | undefined>>
+```

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

@@ -0,0 +1,48 @@
+---
+category: Browser
+---
+
+# usePerformanceObserver
+
+Observe performance metrics.
+
+## Usage
+
+```ts
+import { usePerformanceObserver } from '@vueuse/core'
+
+const entrys = ref<PerformanceEntry[]>([])
+usePerformanceObserver({
+  entryTypes: ['paint'],
+}, (list) => {
+  entrys.value = list.getEntries()
+})
+```
+
+## Type Declarations
+
+```ts
+export type UsePerformanceObserverOptions = PerformanceObserverInit &
+  ConfigurableWindow & {
+    /**
+     * Start the observer immediate.
+     *
+     * @default true
+     */
+    immediate?: boolean
+  }
+/**
+ * Observe performance metrics.
+ *
+ * @see https://vueuse.org/usePerformanceObserver
+ * @param options
+ */
+export declare function usePerformanceObserver(
+  options: UsePerformanceObserverOptions,
+  callback: PerformanceObserverCallback,
+): {
+  isSupported: UseSupportedReturn
+  start: () => void
+  stop: () => void
+}
+```

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

@@ -0,0 +1,78 @@
+---
+category: Browser
+---
+
+# usePermission
+
+Reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API). The Permissions API provides the tools to allow developers to implement a better user experience as far as permissions are concerned.
+
+## Usage
+
+```ts
+import { usePermission } from '@vueuse/core'
+
+const microphoneAccess = usePermission('microphone')
+```
+
+## Type Declarations
+
+```ts
+type DescriptorNamePolyfill =
+  | "accelerometer"
+  | "accessibility-events"
+  | "ambient-light-sensor"
+  | "background-sync"
+  | "camera"
+  | "clipboard-read"
+  | "clipboard-write"
+  | "gyroscope"
+  | "magnetometer"
+  | "microphone"
+  | "notifications"
+  | "payment-handler"
+  | "persistent-storage"
+  | "push"
+  | "speaker"
+  | "local-fonts"
+export type GeneralPermissionDescriptor =
+  | PermissionDescriptor
+  | {
+      name: DescriptorNamePolyfill
+    }
+export interface UsePermissionOptions<
+  Controls extends boolean,
+> extends ConfigurableNavigator {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+}
+export type UsePermissionReturn = Readonly<
+  ShallowRef<PermissionState | undefined>
+>
+export interface UsePermissionReturnWithControls extends Supportable {
+  state: UsePermissionReturn
+  query: () => Promise<PermissionStatus | undefined>
+}
+/**
+ * Reactive Permissions API.
+ *
+ * @see https://vueuse.org/usePermission
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePermission(
+  permissionDesc:
+    | GeneralPermissionDescriptor
+    | GeneralPermissionDescriptor["name"],
+  options?: UsePermissionOptions<false>,
+): UsePermissionReturn
+export declare function usePermission(
+  permissionDesc:
+    | GeneralPermissionDescriptor
+    | GeneralPermissionDescriptor["name"],
+  options: UsePermissionOptions<true>,
+): UsePermissionReturnWithControls
+```

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

@@ -0,0 +1,91 @@
+---
+category: Sensors
+---
+
+# usePointer
+
+Reactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events).
+
+## Basic Usage
+
+```ts
+import { usePointer } from '@vueuse/core'
+
+const { x, y, pressure, pointerType } = usePointer()
+```
+
+## Component Usage
+
+By default, the component will track the pointer on `window`
+
+```vue
+<template>
+  <UsePointer v-slot="{ x, y }">
+    x: {{ x }}
+    y: {{ y }}
+  </UsePointer>
+</template>
+```
+
+To track local position in the element, set `target="self"`:
+
+```vue
+<template>
+  <UsePointer v-slot="{ x, y }" target="self">
+    x: {{ x }} y: {{ y }}
+  </UsePointer>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UsePointerState extends Position {
+  pressure: number
+  pointerId: number
+  tiltX: number
+  tiltY: number
+  width: number
+  height: number
+  twist: number
+  pointerType: PointerType | null
+}
+export interface UsePointerOptions extends ConfigurableWindow {
+  /**
+   * Pointer types that listen to.
+   *
+   * @default ['mouse', 'touch', 'pen']
+   */
+  pointerTypes?: PointerType[]
+  /**
+   * Initial values
+   */
+  initialValue?: MaybeRef<Partial<UsePointerState>>
+  /**
+   * @default window
+   */
+  target?: MaybeRef<EventTarget | null | undefined> | Document | Window
+}
+export interface UsePointerReturn {
+  pressure: Ref<number>
+  pointerId: Ref<number>
+  tiltX: Ref<number>
+  tiltY: Ref<number>
+  width: Ref<number>
+  height: Ref<number>
+  twist: Ref<number>
+  pointerType: Ref<PointerType | null>
+  x: Ref<number>
+  y: Ref<number>
+  isInside: ShallowRef<boolean>
+}
+/**
+ * Reactive pointer state.
+ *
+ * @see https://vueuse.org/usePointer
+ * @param options
+ */
+export declare function usePointer(
+  options?: UsePointerOptions,
+): UsePointerReturn
+```

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

@@ -0,0 +1,59 @@
+---
+category: Sensors
+---
+
+# usePointerLock
+
+Reactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API).
+
+## Basic Usage
+
+```ts
+import { usePointerLock } from '@vueuse/core'
+
+const {
+  isSupported,
+  lock,
+  unlock,
+  element,
+  triggerElement
+} = usePointerLock()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePointerLock v-slot="{ lock }">
+    <canvas />
+    <button @click="lock">
+      Lock Pointer on Canvas
+    </button>
+  </UsePointerLock>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UsePointerLockOptions extends ConfigurableDocument {}
+export interface UsePointerLockReturn extends Supportable {
+  element: ShallowRef<MaybeElement>
+  triggerElement: ShallowRef<MaybeElement>
+  lock: (e: MaybeElementRef | Event) => Promise<MaybeElement>
+  unlock: () => Promise<boolean>
+}
+/**
+ * Reactive pointer lock.
+ *
+ * @see https://vueuse.org/usePointerLock
+ * @param target
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePointerLock(
+  target?: MaybeElementRef,
+  options?: UsePointerLockOptions,
+): UsePointerLockReturn
+```

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: DeepReadonly<Position>
+  readonly posEnd: DeepReadonly<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>
+```