ads-fe 0.0.1

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

@@ -0,0 +1,106 @@
+---
+category: Sensors
+---
+
+# useNetwork
+
+Reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API). The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.
+
+## Usage
+
+```ts
+import { useNetwork } from '@vueuse/core'
+
+const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()
+
+console.log(isOnline.value)
+```
+
+To use as an object, wrap it with `reactive()`
+
+```ts
+import { useNetwork } from '@vueuse/core'
+// ---cut---
+import { reactive } from 'vue'
+
+const network = reactive(useNetwork())
+
+console.log(network.isOnline)
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseNetwork v-slot="{ isOnline, type }">
+    Is Online: {{ isOnline }}
+    Type: {{ type }}
+  </UseNetwork>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseNetworkOptions extends ConfigurableWindow {}
+export type NetworkType =
+  | "bluetooth"
+  | "cellular"
+  | "ethernet"
+  | "none"
+  | "wifi"
+  | "wimax"
+  | "other"
+  | "unknown"
+export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
+export interface NetworkState extends Supportable {
+  /**
+   * If the user is currently connected.
+   */
+  isOnline: Readonly<ShallowRef<boolean>>
+  /**
+   * The time since the user was last connected.
+   */
+  offlineAt: Readonly<ShallowRef<number | undefined>>
+  /**
+   * At this time, if the user is offline and reconnects
+   */
+  onlineAt: Readonly<ShallowRef<number | undefined>>
+  /**
+   * The download speed in Mbps.
+   */
+  downlink: Readonly<ShallowRef<number | undefined>>
+  /**
+   * The max reachable download speed in Mbps.
+   */
+  downlinkMax: Readonly<ShallowRef<number | undefined>>
+  /**
+   * The detected effective speed type.
+   */
+  effectiveType: Readonly<ShallowRef<NetworkEffectiveType | undefined>>
+  /**
+   * The estimated effective round-trip time of the current connection.
+   */
+  rtt: Readonly<ShallowRef<number | undefined>>
+  /**
+   * If the user activated data saver mode.
+   */
+  saveData: Readonly<ShallowRef<boolean | undefined>>
+  /**
+   * The detected connection/network type.
+   */
+  type: Readonly<ShallowRef<NetworkType>>
+}
+export type UseNetworkReturn = Readonly<NetworkState>
+/**
+ * Reactive Network status.
+ *
+ * @see https://vueuse.org/useNetwork
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNetwork(
+  options?: UseNetworkOptions,
+): UseNetworkReturn
+```

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

@@ -0,0 +1,83 @@
+---
+category: Animation
+---
+
+# useNow
+
+Reactive current Date instance.
+
+## Usage
+
+```ts
+import { useNow } from '@vueuse/core'
+
+const now = useNow()
+```
+
+```ts
+import { useNow } from '@vueuse/core'
+// ---cut---
+const { now, pause, resume } = useNow({ controls: true })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseNow v-slot="{ now, pause, resume }">
+    Now: {{ now }}
+    <button @click="pause()">
+      Pause
+    </button>
+    <button @click="resume()">
+      Resume
+    </button>
+  </UseNow>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseNowOptions<
+  Controls extends boolean,
+> extends ConfigurableScheduler {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Start the clock immediately
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Update interval in milliseconds, or use requestAnimationFrame
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default requestAnimationFrame
+   */
+  interval?: "requestAnimationFrame" | number
+}
+export type UseNowReturn<Controls extends boolean> = Controls extends true
+  ? {
+      now: ShallowRef<Date>
+    } & Pausable
+  : ShallowRef<Date>
+/**
+ * Reactive current Date instance.
+ *
+ * @see https://vueuse.org/useNow
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNow(options?: UseNowOptions<false>): ShallowRef<Date>
+export declare function useNow(options: UseNowOptions<true>): {
+  now: ShallowRef<Date>
+} & Pausable
+```

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

@@ -0,0 +1,55 @@
+---
+category: Browser
+---
+
+# useObjectUrl
+
+Reactive URL representing an object.
+
+Creates an URL for the provided `File`, `Blob`, or `MediaSource` via [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) and automatically releases the URL via [URL.revokeObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL) when the source changes or the component is unmounted.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useObjectUrl } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const file = shallowRef()
+const url = useObjectUrl(file)
+
+function onFileChange(event) {
+  file.value = event.target.files[0]
+}
+</script>
+
+<template>
+  <input type="file" @change="onFileChange">
+
+  <a :href="url">Open file</a>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseObjectUrl v-slot="url" :object="file">
+    <a :href="url">Open file</a>
+  </UseObjectUrl>
+</template>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive URL representing an object.
+ *
+ * @see https://vueuse.org/useObjectUrl
+ * @param object
+ */
+export declare function useObjectUrl(
+  object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>,
+): Readonly<ShallowRef<string | undefined, string | undefined>>
+```

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

@@ -0,0 +1,91 @@
+---
+category: '@RxJS'
+---
+
+# useObservable
+
+Use an RxJS [`Observable`](https://rxjs.dev/guide/observable), return a `ref`, and automatically unsubscribe from it when the component is unmounted.
+
+## Usage
+
+<!-- TODO: import rxjs error if enable twoslash -->
+
+```ts no-twoslash
+import { useObservable } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+import { mapTo, scan, startWith } from 'rxjs/operators'
+
+// setup()
+const count = useObservable(
+  interval(1000).pipe(
+    mapTo(1),
+    startWith(0),
+    scan((total, next) => next + total),
+  ),
+)
+```
+
+### Initial Value
+
+You can provide an initial value that will be used before the Observable emits its first value:
+
+```ts no-twoslash
+import { useObservable } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+
+const count = useObservable(
+  interval(1000),
+  { initialValue: 0 },
+)
+// count.value is 0 until the first emission
+```
+
+### Error Handling
+
+If you want to add custom error handling to an `Observable` that might error, you can supply an optional `onError` configuration. Without this, RxJS will treat any error in the supplied `Observable` as an "unhandled error" and it will be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in Node).
+
+```ts no-twoslash
+import { useObservable } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+// setup()
+const count = useObservable(
+  interval(1000).pipe(
+    map((n) => {
+      if (n === 10)
+        throw new Error('oops')
+
+      return n + n
+    }),
+  ),
+  {
+    onError: (err) => {
+      console.log(err.message) // "oops"
+    },
+  },
+)
+```
+
+### Options
+
+| Option         | Type                 | Description                              |
+| -------------- | -------------------- | ---------------------------------------- |
+| `initialValue` | `T`                  | Value to use before the Observable emits |
+| `onError`      | `(err: any) => void` | Error handler for Observable errors      |
+
+## Type Declarations
+
+```ts
+export interface UseObservableOptions<I> {
+  onError?: (err: any) => void
+  /**
+   * The value that should be set if the observable has not emitted.
+   */
+  initialValue?: I | undefined
+}
+export declare function useObservable<H, I = undefined>(
+  observable: Observable<H>,
+  options?: UseObservableOptions<I | undefined>,
+): Readonly<Ref<H | I>>
+```

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,43 @@
+---
+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
+export interface UsePageLeaveOptions extends ConfigurableWindow {}
+export type UsePageLeaveReturn = ShallowRef<boolean>
+/**
+ * Reactive state to show whether mouse leaves the page.
+ *
+ * @see https://vueuse.org/usePageLeave
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function usePageLeave(
+  options?: UsePageLeaveOptions,
+): UsePageLeaveReturn
+```

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
+```