devskill 2.0.2

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

@@ -0,0 +1,117 @@
+---
+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, ConfigurableScheduler {
+  /**
+   * Expose more controls and the raw `parts` result.
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Update interval in milliseconds, set 0 to disable auto update
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @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/skills/vueuse-functions/references/useTimeout.md

@@ -0,0 +1,113 @@
+---
+category: Animation
+---
+
+# useTimeout
+
+Reactive value that becomes `true` after a given time.
+
+## Usage
+
+```ts
+import { useTimeout } from '@vueuse/core'
+
+const ready = useTimeout(1000)
+```
+
+After 1 second, `ready.value` becomes `true`.
+
+### With Controls
+
+```ts
+import { useTimeout } from '@vueuse/core'
+
+const { ready, start, stop, isPending } = useTimeout(1000, { controls: true })
+
+// Check if timeout is pending
+console.log(isPending.value) // true
+
+// Stop the timeout
+stop()
+
+// Start/restart the timeout
+start()
+```
+
+### Options
+
+| Option      | Type         | Default | Description                                      |
+| ----------- | ------------ | ------- | ------------------------------------------------ |
+| `controls`  | `boolean`    | `false` | Expose `start`, `stop`, and `isPending` controls |
+| `immediate` | `boolean`    | `true`  | Start the timeout immediately                    |
+| `callback`  | `() => void` | —       | Called when the timeout completes                |
+
+### Callback on Timeout
+
+```ts
+import { useTimeout } from '@vueuse/core'
+
+useTimeout(1000, {
+  callback: () => {
+    console.log('Timeout completed!')
+  },
+})
+```
+
+### Reactive Interval
+
+The timeout duration can be reactive:
+
+```ts
+import { useTimeout } from '@vueuse/core'
+
+const duration = ref(1000)
+const ready = useTimeout(duration)
+
+// Change the duration (only affects future timeouts when using controls)
+duration.value = 2000
+```
+
+## 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/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/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/skills/vueuse-functions/references/useTimestamp.md

@@ -0,0 +1,89 @@
+---
+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,
+> extends ConfigurableScheduler {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Offset value adding to the value
+   *
+   * @default 0
+   */
+  offset?: number
+  /**
+   * Update the timestamp immediately
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Update interval, or use requestAnimationFrame
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @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/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>
+```

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

@@ -0,0 +1,54 @@
+---
+category: Utilities
+---
+
+# useToNumber
+
+Reactively convert a string ref to number.
+
+## Usage
+
+```ts
+import { useToNumber } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const str = shallowRef('123')
+const number = useToNumber(str)
+
+number.value // 123
+```
+
+## Type Declarations
+
+```ts
+export interface UseToNumberOptions {
+  /**
+   * Method to use to convert the value to a number.
+   *
+   * Or a custom function for the conversion.
+   *
+   * @default 'parseFloat'
+   */
+  method?: "parseFloat" | "parseInt" | ((value: string | number) => number)
+  /**
+   * The base in mathematical numeral systems passed to `parseInt`.
+   * Only works with `method: 'parseInt'`
+   */
+  radix?: number
+  /**
+   * Replace NaN with zero
+   *
+   * @default false
+   */
+  nanToZero?: boolean
+}
+/**
+ * Reactively convert a string ref to number.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useToNumber(
+  value: MaybeRefOrGetter<number | string>,
+  options?: UseToNumberOptions,
+): ComputedRef<number>
+```

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

@@ -0,0 +1,34 @@
+---
+category: Utilities
+---
+
+# useToString
+
+Reactively convert a ref to string.
+
+## Usage
+
+```ts
+import { useToString } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const number = shallowRef(3.14)
+const str = useToString(number)
+
+str.value // '3.14'
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactively convert a ref to string.
+ *
+ * @see https://vueuse.org/useToString
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useToString(
+  value: MaybeRefOrGetter<unknown>,
+): ComputedRef<string>
+```