devskill 2.0.2

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

@@ -0,0 +1,199 @@
+---
+category: Utilities
+---
+
+# useOffsetPagination
+
+Reactive offset pagination.
+
+## Usage
+
+```ts
+import { useOffsetPagination } from '@vueuse/core'
+
+function fetchData({ currentPage, currentPageSize }: { currentPage: number, currentPageSize: number }) {
+  fetch(currentPage, currentPageSize).then((responseData) => {
+    data.value = responseData
+  })
+}
+
+const {
+  currentPage,
+  currentPageSize,
+  pageCount,
+  isFirstPage,
+  isLastPage,
+  prev,
+  next,
+} = useOffsetPagination({
+  total: database.value.length,
+  page: 1,
+  pageSize: 10,
+  onPageChange: fetchData,
+  onPageSizeChange: fetchData,
+})
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseOffsetPagination
+    v-slot="{
+      currentPage,
+      currentPageSize,
+      next,
+      prev,
+      pageCount,
+      isFirstPage,
+      isLastPage,
+    }"
+    :total="database.length"
+    @page-change="fetchData"
+    @page-size-change="fetchData"
+  >
+    <div class="gap-x-4 gap-y-2 grid-cols-2 inline-grid items-center">
+      <div opacity="50">
+        total:
+      </div>
+      <div>{{ database.length }}</div>
+      <div opacity="50">
+        pageCount:
+      </div>
+      <div>{{ pageCount }}</div>
+      <div opacity="50">
+        currentPageSize:
+      </div>
+      <div>{{ currentPageSize }}</div>
+      <div opacity="50">
+        currentPage:
+      </div>
+      <div>{{ currentPage }}</div>
+      <div opacity="50">
+        isFirstPage:
+      </div>
+      <div>{{ isFirstPage }}</div>
+      <div opacity="50">
+        isLastPage:
+      </div>
+      <div>{{ isLastPage }}</div>
+    </div>
+    <div>
+      <button :disabled="isFirstPage" @click="prev">
+        prev
+      </button>
+      <button :disabled="isLastPage" @click="next">
+        next
+      </button>
+    </div>
+  </UseOffsetPagination>
+</template>
+```
+
+Component event supported props event callback and event listener.
+
+event listener:
+
+```vue
+<template>
+  <UseOffsetPagination
+    v-slot="{
+      currentPage,
+      currentPageSize,
+      next,
+      prev,
+      pageCount,
+      isFirstPage,
+      isLastPage,
+    }"
+    :total="database.length"
+    @page-change="fetchData"
+    @page-size-change="fetchData"
+    @page-count-change="onPageCountChange"
+  >
+    <!-- your code -->
+  </UseOffsetPagination>
+</template>
+```
+
+or props event callback:
+
+```vue
+<template>
+  <UseOffsetPagination
+    v-slot="{
+      currentPage,
+      currentPageSize,
+      next,
+      prev,
+      pageCount,
+      isFirstPage,
+      isLastPage,
+    }"
+    :total="database.length"
+    :on-page-change="fetchData"
+    :on-page-size-change="fetchData"
+    :on-page-count-change="onPageCountChange"
+  >
+    <!-- your code -->
+  </UseOffsetPagination>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseOffsetPaginationOptions {
+  /**
+   * Total number of items.
+   */
+  total?: MaybeRefOrGetter<number>
+  /**
+   * The number of items to display per page.
+   * @default 10
+   */
+  pageSize?: MaybeRefOrGetter<number>
+  /**
+   * The current page number.
+   * @default 1
+   */
+  page?: MaybeRef<number>
+  /**
+   * Callback when the `page` change.
+   */
+  onPageChange?: (
+    returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
+  ) => unknown
+  /**
+   * Callback when the `pageSize` change.
+   */
+  onPageSizeChange?: (
+    returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
+  ) => unknown
+  /**
+   * Callback when the `pageCount` change.
+   */
+  onPageCountChange?: (
+    returnValue: UnwrapNestedRefs<UseOffsetPaginationReturn>,
+  ) => unknown
+}
+export interface UseOffsetPaginationReturn {
+  currentPage: Ref<number>
+  currentPageSize: Ref<number>
+  pageCount: ComputedRef<number>
+  isFirstPage: ComputedRef<boolean>
+  isLastPage: ComputedRef<boolean>
+  prev: () => void
+  next: () => void
+}
+export type UseOffsetPaginationInfinityPageReturn = Omit<
+  UseOffsetPaginationReturn,
+  "isLastPage"
+>
+export declare function useOffsetPagination(
+  options: Omit<UseOffsetPaginationOptions, "total">,
+): UseOffsetPaginationInfinityPageReturn
+export declare function useOffsetPagination(
+  options: UseOffsetPaginationOptions,
+): UseOffsetPaginationReturn
+```

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

@@ -0,0 +1,41 @@
+---
+category: Sensors
+---
+
+# useOnline
+
+Reactive online state. A wrapper of `useNetwork`.
+
+## Usage
+
+```ts
+import { useOnline } from '@vueuse/core'
+
+const online = useOnline()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseOnline v-slot="{ isOnline }">
+    Is Online: {{ isOnline }}
+  </UseOnline>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive online state.
+ *
+ * @see https://vueuse.org/useOnline
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useOnline(
+  options?: ConfigurableWindow,
+): Readonly<ShallowRef<boolean>>
+```

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

@@ -0,0 +1,42 @@
+---
+category: Sensors
+---
+
+# usePageLeave
+
+Reactive state to show whether the mouse leaves the page.
+
+## Usage
+
+```ts
+import { usePageLeave } from '@vueuse/core'
+
+const isLeft = usePageLeave()
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UsePageLeave v-slot="{ isLeft }">
+    Has Left Page: {{ isLeft }}
+  </UsePageLeave>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive state to show whether mouse leaves the page.
+ *
+ * @see https://vueuse.org/usePageLeave
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePageLeave(
+  options?: ConfigurableWindow,
+): ShallowRef<boolean, boolean>
+export type UsePageLeaveReturn = ReturnType<typeof usePageLeave>
+```

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

@@ -0,0 +1,58 @@
+---
+category: Sensors
+---
+
+# useParallax
+
+Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse` if orientation is not supported.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useParallax } from '@vueuse/core'
+
+const container = ref(null)
+const { tilt, roll, source } = useParallax(container)
+</script>
+
+<template>
+  <div ref="container" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseParallaxOptions extends ConfigurableWindow {
+  deviceOrientationTiltAdjust?: (i: number) => number
+  deviceOrientationRollAdjust?: (i: number) => number
+  mouseTiltAdjust?: (i: number) => number
+  mouseRollAdjust?: (i: number) => number
+}
+export interface UseParallaxReturn {
+  /**
+   * Roll value. Scaled to `-0.5 ~ 0.5`
+   */
+  roll: ComputedRef<number>
+  /**
+   * Tilt value. Scaled to `-0.5 ~ 0.5`
+   */
+  tilt: ComputedRef<number>
+  /**
+   * Sensor source, can be `mouse` or `deviceOrientation`
+   */
+  source: ComputedRef<"deviceOrientation" | "mouse">
+}
+/**
+ * Create parallax effect easily. It uses `useDeviceOrientation` and fallback to `useMouse`
+ * if orientation is not supported.
+ *
+ * @param target
+ * @param options
+ */
+export declare function useParallax(
+  target: MaybeElementRef,
+  options?: UseParallaxOptions,
+): UseParallaxReturn
+```

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: ComputedRef<boolean>
+  start: () => void
+  stop: () => void
+}
+```

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

@@ -0,0 +1,79 @@
+---
+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 {
+  state: UsePermissionReturn
+  isSupported: ComputedRef<boolean>
+  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,89 @@
+---
+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
+}
+/**
+ * Reactive pointer state.
+ *
+ * @see https://vueuse.org/usePointer
+ * @param options
+ */
+export declare function usePointer(options?: UsePointerOptions): {
+  isInside: ShallowRef<boolean, boolean>
+  pressure: Ref<number, number>
+  pointerId: Ref<number, number>
+  tiltX: Ref<number, number>
+  tiltY: Ref<number, number>
+  width: Ref<number, number>
+  height: Ref<number, number>
+  twist: Ref<number, number>
+  pointerType: Ref<PointerType | null, PointerType | null>
+  x: Ref<number, number>
+  y: Ref<number, number>
+}
+export type UsePointerReturn = ReturnType<typeof usePointer>
+```

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

@@ -0,0 +1,60 @@
+---
+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 {}
+/**
+ * Reactive pointer lock.
+ *
+ * @see https://vueuse.org/usePointerLock
+ * @param target
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePointerLock(
+  target?: MaybeElementRef,
+  options?: UsePointerLockOptions,
+): {
+  isSupported: ComputedRef<boolean>
+  element: ShallowRef<MaybeElement, MaybeElement>
+  triggerElement: ShallowRef<MaybeElement, MaybeElement>
+  lock: (e: MaybeElementRef | Event) => Promise<HTMLElement | SVGElement>
+  unlock: () => Promise<boolean>
+}
+export type UsePointerLockReturn = ReturnType<typeof usePointerLock>
+```