aico-cli 2.1.1 → 2.1.23

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

@@ -0,0 +1,47 @@
+---
+category: State
+related: useDebouncedRefHistory, useRefHistory
+---
+
+# useThrottledRefHistory
+
+Shorthand for `useRefHistory` with throttled filter.
+
+## Usage
+
+This function takes the first snapshot right after the counter's value was changed and the second with a delay of 1000ms.
+
+```ts
+import { useThrottledRefHistory } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const counter = shallowRef(0)
+const { history, undo, redo } = useThrottledRefHistory(counter, { deep: true, throttle: 1000 })
+```
+
+## Type Declarations
+
+```ts
+export type UseThrottledRefHistoryOptions<Raw, Serialized = Raw> = Omit<
+  UseRefHistoryOptions<Raw, Serialized>,
+  "eventFilter"
+> & {
+  throttle?: MaybeRef<number>
+  trailing?: boolean
+}
+export type UseThrottledRefHistoryReturn<
+  Raw,
+  Serialized = Raw,
+> = UseRefHistoryReturn<Raw, Serialized>
+/**
+ * Shorthand for [useRefHistory](https://vueuse.org/useRefHistory) with throttled filter.
+ *
+ * @see https://vueuse.org/useThrottledRefHistory
+ * @param source
+ * @param options
+ */
+export declare function useThrottledRefHistory<Raw, Serialized = Raw>(
+  source: Ref<Raw>,
+  options?: UseThrottledRefHistoryOptions<Raw, Serialized>,
+): UseThrottledRefHistoryReturn<Raw, Serialized>
+```

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

@@ -0,0 +1,152 @@
+---
+category: Time
+---
+
+# useTimeAgo
+
+Reactive time ago. Automatically update the time ago string when the time changes.
+
+## Usage
+
+```ts
+import { useTimeAgo } from '@vueuse/core'
+
+const timeAgo = useTimeAgo(new Date(2021, 0, 1))
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseTimeAgo v-slot="{ timeAgo }" :time="new Date(2021, 0, 1)">
+    Time Ago: {{ timeAgo }}
+  </UseTimeAgo>
+</template>
+```
+
+## Non-Reactivity Usage
+
+In case you don't need the reactivity, you can use the `formatTimeAgo` function to get the formatted string instead of a Ref.
+
+```ts
+import { formatTimeAgo } from '@vueuse/core'
+
+const timeAgo = formatTimeAgo(new Date(2021, 0, 1)) // string
+```
+
+## Type Declarations
+
+```ts
+export type UseTimeAgoFormatter<T = number> = (
+  value: T,
+  isPast: boolean,
+) => string
+export type UseTimeAgoUnitNamesDefault =
+  | "second"
+  | "minute"
+  | "hour"
+  | "day"
+  | "week"
+  | "month"
+  | "year"
+export interface UseTimeAgoMessagesBuiltIn {
+  justNow: string
+  past: string | UseTimeAgoFormatter<string>
+  future: string | UseTimeAgoFormatter<string>
+  invalid: string
+}
+export type UseTimeAgoMessages<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+> = UseTimeAgoMessagesBuiltIn &
+  Record<UnitNames, string | UseTimeAgoFormatter<number>>
+export interface FormatTimeAgoOptions<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+> {
+  /**
+   * Maximum unit (of diff in milliseconds) to display the full date instead of relative
+   *
+   * @default undefined
+   */
+  max?: UnitNames | number
+  /**
+   * Formatter for full date
+   */
+  fullDateFormatter?: (date: Date) => string
+  /**
+   * Messages for formatting the string
+   */
+  messages?: UseTimeAgoMessages<UnitNames>
+  /**
+   * Minimum display time unit (default is minute)
+   *
+   * @default false
+   */
+  showSecond?: boolean
+  /**
+   * Rounding method to apply.
+   *
+   * @default 'round'
+   */
+  rounding?: "round" | "ceil" | "floor" | number
+  /**
+   * Custom units
+   */
+  units?: UseTimeAgoUnit<UnitNames>[]
+}
+export interface UseTimeAgoOptions<
+  Controls extends boolean,
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+> extends FormatTimeAgoOptions<UnitNames> {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Intervals to update, set 0 to disable auto update
+   *
+   * @default 30_000
+   */
+  updateInterval?: number
+}
+export interface UseTimeAgoUnit<
+  Unit extends string = UseTimeAgoUnitNamesDefault,
+> {
+  max: number
+  value: number
+  name: Unit
+}
+export type UseTimeAgoReturn<Controls extends boolean = false> =
+  Controls extends true
+    ? {
+        timeAgo: ComputedRef<string>
+      } & Pausable
+    : ComputedRef<string>
+/**
+ * Reactive time ago formatter.
+ *
+ * @see https://vueuse.org/useTimeAgo
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useTimeAgo<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options?: UseTimeAgoOptions<false, UnitNames>,
+): UseTimeAgoReturn<false>
+export declare function useTimeAgo<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options: UseTimeAgoOptions<true, UnitNames>,
+): UseTimeAgoReturn<true>
+export declare function formatTimeAgo<
+  UnitNames extends string = UseTimeAgoUnitNamesDefault,
+>(
+  from: Date,
+  options?: FormatTimeAgoOptions<UnitNames>,
+  now?: Date | number,
+): string
+```

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

@@ -0,0 +1,116 @@
+---
+category: Time
+---
+
+# useTimeAgoIntl
+
+Reactive time ago with i18n supported. Automatically update the time ago string when the time changes. Powered by `Intl.RelativeTimeFormat`.
+
+## Usage
+
+```js
+import { useTimeAgoIntl } from '@vueuse/core'
+
+const timeAgoIntl = useTimeAgoIntl(new Date(2021, 0, 1))
+```
+
+## Non-Reactivity Usage
+
+In case you don't need the reactivity, you can use the `formatTimeAgo` function to get the formatted string instead of a Ref.
+
+```js
+import { formatTimeAgoIntl } from '@vueuse/core'
+
+const timeAgoIntl = formatTimeAgoIntl(new Date(2021, 0, 1)) // string
+```
+
+## Type Declarations
+
+```ts
+type Locale = Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale
+export interface FormatTimeAgoIntlOptions {
+  /**
+   * The locale to format with
+   *
+   * @default undefined
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#locales
+   */
+  locale?: Locale
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat#options
+   */
+  relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions
+  /**
+   * Whether to insert spaces between parts.
+   *
+   * Ignored if `joinParts` is provided.
+   *
+   * @default true
+   */
+  insertSpace?: boolean
+  /**
+   * Custom function to join the parts returned by `Intl.RelativeTimeFormat.formatToParts`.
+   *
+   * If provided, it will be used instead of the default join logic.
+   */
+  joinParts?: (
+    parts: Intl.RelativeTimeFormatPart[],
+    locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale,
+  ) => string
+  /**
+   * Custom units
+   */
+  units?: TimeAgoUnit[]
+}
+export interface UseTimeAgoIntlOptions<Controls extends boolean>
+  extends FormatTimeAgoIntlOptions {
+  /**
+   * Expose more controls and the raw `parts` result.
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Update interval in milliseconds, set 0 to disable auto update
+   *
+   * @default 30_000
+   */
+  updateInterval?: number
+}
+type UseTimeAgoReturn<Controls extends boolean = false> = Controls extends true
+  ? {
+      timeAgoIntl: ComputedRef<string>
+      parts: ComputedRef<Intl.RelativeTimeFormatPart[]>
+    } & Pausable
+  : ComputedRef<string>
+export interface TimeAgoUnit {
+  name: Intl.RelativeTimeFormatUnit
+  ms: number
+}
+/**
+ * A reactive wrapper for `Intl.RelativeTimeFormat`.
+ */
+export declare function useTimeAgoIntl(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options?: UseTimeAgoIntlOptions<false>,
+): UseTimeAgoReturn<false>
+export declare function useTimeAgoIntl(
+  time: MaybeRefOrGetter<Date | number | string>,
+  options: UseTimeAgoIntlOptions<true>,
+): UseTimeAgoReturn<true>
+/**
+ * Non-reactive version of useTimeAgoIntl
+ */
+export declare function formatTimeAgoIntl(
+  from: Date,
+  options?: FormatTimeAgoIntlOptions,
+  now?: Date | number,
+): string
+/**
+ * Format parts into a string
+ */
+export declare function formatTimeAgoIntlParts(
+  parts: Intl.RelativeTimeFormatPart[],
+  options?: FormatTimeAgoIntlOptions,
+): string
+```

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

@@ -0,0 +1,75 @@
+---
+category: Animation
+---
+
+# useTimeout
+
+Update value after a given time with controls.
+
+## Usage
+
+```ts
+import { useTimeout } from '@vueuse/core'
+
+const ready = useTimeout(1000)
+```
+
+```ts
+import { useTimeout } from '@vueuse/core'
+// ---cut---
+const { ready, start, stop } = useTimeout(1000, { controls: true })
+```
+
+```ts
+import { promiseTimeout } from '@vueuse/core'
+
+console.log(ready.value) // false
+
+await promiseTimeout(1200)
+
+console.log(ready.value) // true
+```
+
+## Type Declarations
+
+```ts
+export interface UseTimeoutOptions<Controls extends boolean>
+  extends UseTimeoutFnOptions {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Callback on timeout
+   */
+  callback?: Fn
+}
+export type UseTimeoutReturn =
+  | ComputedRef<boolean>
+  | ({
+      readonly ready: ComputedRef<boolean>
+    } & Stoppable)
+/**
+ * @deprecated use UseTimeoutReturn instead
+ */
+export type UseTimoutReturn = UseTimeoutReturn
+/**
+ * Update value after a given time with controls.
+ *
+ * @see   {@link https://vueuse.org/useTimeout}
+ * @param interval
+ * @param options
+ */
+export declare function useTimeout(
+  interval?: MaybeRefOrGetter<number>,
+  options?: UseTimeoutOptions<false>,
+): ComputedRef<boolean>
+export declare function useTimeout(
+  interval: MaybeRefOrGetter<number>,
+  options: UseTimeoutOptions<true>,
+): {
+  ready: ComputedRef<boolean>
+} & Stoppable
+```

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

@@ -0,0 +1,51 @@
+---
+category: Animation
+---
+
+# useTimeoutFn
+
+Wrapper for `setTimeout` with controls.
+
+## Usage
+
+```ts
+import { useTimeoutFn } from '@vueuse/core'
+
+const { isPending, start, stop } = useTimeoutFn(() => {
+  /* ... */
+}, 3000)
+```
+
+## Type Declarations
+
+```ts
+export interface UseTimeoutFnOptions {
+  /**
+   * Start the timer immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Execute the callback immediately after calling `start`
+   *
+   * @default false
+   */
+  immediateCallback?: boolean
+}
+export type UseTimeoutFnReturn<CallbackFn extends AnyFn> = Stoppable<
+  Parameters<CallbackFn> | []
+>
+/**
+ * Wrapper for `setTimeout` with controls.
+ *
+ * @param cb
+ * @param interval
+ * @param options
+ */
+export declare function useTimeoutFn<CallbackFn extends AnyFn>(
+  cb: CallbackFn,
+  interval: MaybeRefOrGetter<number>,
+  options?: UseTimeoutFnOptions,
+): UseTimeoutFnReturn<CallbackFn>
+```

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

@@ -0,0 +1,47 @@
+---
+category: Utilities
+---
+
+# useTimeoutPoll
+
+Use timeout to poll something. It will trigger callback after last task is done.
+
+## Usage
+
+```ts
+import { useTimeoutPoll } from '@vueuse/core'
+
+const count = ref(0)
+
+async function fetchData() {
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  count.value++
+}
+
+// Only trigger after last fetch is done
+const { isActive, pause, resume } = useTimeoutPoll(fetchData, 1000)
+```
+
+## Type Declarations
+
+```ts
+export interface UseTimeoutPollOptions {
+  /**
+   * Start the timer immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Execute the callback immediately after calling `resume`
+   *
+   * @default false
+   */
+  immediateCallback?: boolean
+}
+export declare function useTimeoutPoll(
+  fn: () => Awaitable<void>,
+  interval: MaybeRefOrGetter<number>,
+  options?: UseTimeoutFnOptions,
+): Pausable
+```

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

@@ -0,0 +1,85 @@
+---
+category: Animation
+---
+
+# useTimestamp
+
+Reactive current timestamp
+
+## Usage
+
+```ts
+import { useTimestamp } from '@vueuse/core'
+
+const timestamp = useTimestamp({ offset: 0 })
+```
+
+```ts
+import { useTimestamp } from '@vueuse/core'
+// ---cut---
+const { timestamp, pause, resume } = useTimestamp({ controls: true })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseTimestamp v-slot="{ timestamp, pause, resume }">
+    Current Time: {{ timestamp }}
+    <button @click="pause()">
+      Pause
+    </button>
+    <button @click="resume()">
+      Resume
+    </button>
+  </UseTimestamp>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseTimestampOptions<Controls extends boolean> {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Offset value adding to the value
+   *
+   * @default 0
+   */
+  offset?: number
+  /**
+   * Update the timestamp immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Update interval, or use requestAnimationFrame
+   *
+   * @default requestAnimationFrame
+   */
+  interval?: "requestAnimationFrame" | number
+  /**
+   * Callback on each update
+   */
+  callback?: (timestamp: number) => void
+}
+/**
+ * Reactive current timestamp.
+ *
+ * @see https://vueuse.org/useTimestamp
+ * @param options
+ */
+export declare function useTimestamp(
+  options?: UseTimestampOptions<false>,
+): ShallowRef<number>
+export declare function useTimestamp(options: UseTimestampOptions<true>): {
+  timestamp: ShallowRef<number>
+} & Pausable
+export type UseTimestampReturn = ReturnType<typeof useTimestamp>
+```

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

@@ -0,0 +1,113 @@
+---
+category: Browser
+---
+
+# useTitle
+
+Reactive document title.
+
+::: warning
+This composable isn't compatible with SSR.
+:::
+
+## Usage
+
+```ts
+import { useTitle } from '@vueuse/core'
+
+const title = useTitle()
+console.log(title.value) // print current title
+title.value = 'Hello' // change current title
+```
+
+Set initial title immediately:
+
+```ts
+import { useTitle } from '@vueuse/core'
+// ---cut---
+const title = useTitle('New Title')
+```
+
+Pass a `ref` and the title will be updated when the source ref changes:
+
+```ts
+import { useTitle } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const messages = shallowRef(0)
+
+const title = computed(() => {
+  return !messages.value ? 'No message' : `${messages.value} new messages`
+})
+
+useTitle(title) // document title will match with the ref "title"
+```
+
+Pass an optional template tag [Vue Meta Title Template](https://vue-meta.nuxtjs.org/guide/metainfo.html) to update the title to be injected into this template:
+
+```ts
+import { useTitle } from '@vueuse/core'
+// ---cut---
+const title = useTitle('New Title', {
+  titleTemplate: '%s | My Awesome Website'
+})
+```
+
+::: warning
+`observe` is incompatible with `titleTemplate`.
+:::
+
+## Type Declarations
+
+```ts
+export type UseTitleOptionsBase = {
+  /**
+   * Restore the original title when unmounted
+   * @param originTitle original title
+   * @returns restored title
+   */
+  restoreOnUnmount?:
+    | false
+    | ((
+        originalTitle: string,
+        currentTitle: string,
+      ) => string | null | undefined)
+} & (
+  | {
+      /**
+       * Observe `document.title` changes using MutationObserve
+       * Cannot be used together with `titleTemplate` option.
+       *
+       * @default false
+       */
+      observe?: boolean
+    }
+  | {
+      /**
+       * The template string to parse the title (e.g., '%s | My Website')
+       * Cannot be used together with `observe` option.
+       *
+       * @default '%s'
+       */
+      titleTemplate?: MaybeRef<string> | ((title: string) => string)
+    }
+)
+export type UseTitleOptions = ConfigurableDocument & UseTitleOptionsBase
+/**
+ * Reactive document title.
+ *
+ * @see https://vueuse.org/useTitle
+ * @param newTitle
+ * @param options
+ * @description It's not SSR compatible. Your value will be applied only on client-side.
+ */
+export declare function useTitle(
+  newTitle: ReadonlyRefOrGetter<string | null | undefined>,
+  options?: UseTitleOptions,
+): ComputedRef<string | null | undefined>
+export declare function useTitle(
+  newTitle?: MaybeRef<string | null | undefined>,
+  options?: UseTitleOptions,
+): Ref<string | null | undefined>
+export type UseTitleReturn = ReturnType<typeof useTitle>
+```