aico-cli 2.1.1 → 2.1.23

package/templates/skills/vueuse-functions/references/useNProgress.md

@@ -0,0 +1,78 @@
+---
+category: '@Integrations'
+---
+
+# useNProgress
+
+Reactive wrapper for [`nprogress`](https://github.com/rstacruz/nprogress).
+
+## Install
+
+```bash
+npm i nprogress@^0
+```
+
+## Usage
+
+```ts {6}
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+
+const { isLoading } = useNProgress()
+
+function toggle() {
+  isLoading.value = !isLoading.value
+}
+```
+
+### Passing a progress percentage
+
+You can pass a percentage to indicate where the bar should start from.
+
+```ts {3}
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+
+const { progress } = useNProgress(0.5)
+
+function done() {
+  progress.value = 1.0
+}
+```
+
+> To change the progress percentage, set `progress.value = n`, where n is a number between 0..1.
+
+### Customization
+
+Just edit [nprogress.css](https://github.com/rstacruz/nprogress/blob/master/nprogress.css) to your liking. Tip: you probably only want to find and replace occurrences of #29d.
+
+You can [configure](https://github.com/rstacruz/nprogress#configuration) it by passing an object as a second parameter.
+
+```ts {4}
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+
+useNProgress(null, {
+  minimum: 0.1,
+  // ...
+})
+```
+
+## Type Declarations
+
+```ts
+export type UseNProgressOptions = Partial<NProgressOptions>
+/**
+ * Reactive progress bar.
+ *
+ * @see https://vueuse.org/useNProgress
+ */
+export declare function useNProgress(
+  currentProgress?: MaybeRefOrGetter<number | null | undefined>,
+  options?: UseNProgressOptions,
+): {
+  isLoading: WritableComputedRef<boolean, boolean>
+  progress: Ref<number | null | undefined, number | null | undefined>
+  start: () => nprogress.NProgress
+  done: (force?: boolean) => nprogress.NProgress
+  remove: () => void
+}
+export type UseNProgressReturn = ReturnType<typeof useNProgress>
+```

package/templates/skills/vueuse-functions/references/useNavigatorLanguage.md

@@ -0,0 +1,57 @@
+---
+category: Sensors
+---
+
+# useNavigatorLanguage
+
+Reactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language).
+
+## Usage
+
+```ts
+import { useNavigatorLanguage } from '@vueuse/core'
+
+const { language } = useNavigatorLanguage()
+
+watch(language, () => {
+  // Listen to the value changing
+})
+```
+
+## Type Declarations
+
+```ts
+export interface NavigatorLanguageState {
+  isSupported: ComputedRef<boolean>
+  /**
+   *
+   * ISO 639-1 standard Language Code
+   *
+   * @info The detected user agent language preference as a language tag
+   * (which is sometimes referred to as a "locale identifier").
+   * This consists of a 2-3 letter base language tag that indicates a
+   * language, optionally followed by additional subtags separated by
+   * '-'. The most common extra information is the country or region
+   * variant (like 'en-US' or 'fr-CA').
+   *
+   *
+   * @see https://www.iso.org/iso-639-language-codes.html
+   * @see https://www.loc.gov/standards/iso639-2/php/code_list.php
+   *
+   */
+  language: ShallowRef<string | undefined>
+}
+/**
+ *
+ * Reactive useNavigatorLanguage
+ *
+ * Detects the currently selected user language and returns a reactive language
+ * @see https://vueuse.org/useNavigatorLanguage
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNavigatorLanguage(
+  options?: ConfigurableWindow,
+): Readonly<NavigatorLanguageState>
+export type UseNavigatorLanguageReturn = ReturnType<typeof useNavigatorLanguage>
+```

package/templates/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 type NetworkType =
+  | "bluetooth"
+  | "cellular"
+  | "ethernet"
+  | "none"
+  | "wifi"
+  | "wimax"
+  | "other"
+  | "unknown"
+export type NetworkEffectiveType = "slow-2g" | "2g" | "3g" | "4g" | undefined
+export interface NetworkState {
+  isSupported: ComputedRef<boolean>
+  /**
+   * 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>>
+}
+/**
+ * Reactive Network status.
+ *
+ * @see https://vueuse.org/useNetwork
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNetwork(
+  options?: ConfigurableWindow,
+): Readonly<NetworkState>
+export type UseNetworkReturn = ReturnType<typeof useNetwork>
+```

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

@@ -0,0 +1,75 @@
+---
+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> {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Start the clock immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Update interval in milliseconds, or use requestAnimationFrame
+   *
+   * @default requestAnimationFrame
+   */
+  interval?: "requestAnimationFrame" | number
+}
+/**
+ * Reactive current Date instance.
+ *
+ * @see https://vueuse.org/useNow
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useNow(options?: UseNowOptions<false>): Ref<Date>
+export declare function useNow(options: UseNowOptions<true>): {
+  now: Ref<Date>
+} & Pausable
+export type UseNowReturn = ReturnType<typeof useNow>
+```

package/templates/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<Ref<string | undefined, string | undefined>>
+```

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

@@ -0,0 +1,67 @@
+---
+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),
+  ),
+)
+```
+
+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"
+    },
+  },
+)
+```
+
+## 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/templates/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/templates/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>>
+```