ads-fe 0.0.1

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

@@ -0,0 +1,94 @@
+---
+category: Browser
+---
+
+# useTextareaAutosize
+
+Automatically update the height of a textarea depending on the content.
+
+## Usage
+
+### Simple example
+
+```vue
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core'
+
+const { textarea, input } = useTextareaAutosize()
+</script>
+
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    class="resize-none"
+    placeholder="What's on your mind?"
+  />
+</template>
+```
+
+::: info
+
+It's recommended to reset the scrollbar styles for the textarea element to avoid incorrect height values for large amounts of text.
+
+```css
+textarea {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+textarea::-webkit-scrollbar {
+  display: none;
+}
+```
+
+:::
+
+### With `rows` attribute
+
+If you need support for the rows attribute on a textarea element, then you should set the `styleProp` option to `minHeight`.
+
+```vue
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core'
+
+const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
+</script>
+
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    class="resize-none"
+    placeholder="What's on your mind?"
+    rows="3"
+  />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
+  /** Textarea element to autosize. */
+  element?: MaybeRef<HTMLTextAreaElement | undefined | null>
+  /** Textarea content. */
+  input?: MaybeRef<string>
+  /** Watch sources that should trigger a textarea resize. */
+  watch?: WatchSource | MultiWatchSources
+  /** Function called when the textarea size changes. */
+  onResize?: () => void
+  /** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self.  */
+  styleTarget?: MaybeRef<HTMLElement | undefined>
+  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
+  styleProp?: "height" | "minHeight"
+}
+export interface UseTextareaAutosizeReturn {
+  textarea: Ref<HTMLTextAreaElement | undefined | null>
+  input: Ref<string>
+  triggerResize: () => void
+}
+export declare function useTextareaAutosize(
+  options?: UseTextareaAutosizeOptions,
+): UseTextareaAutosizeReturn
+```

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

@@ -0,0 +1,57 @@
+---
+category: Utilities
+related: refThrottled, refDebounced, useDebounceFn
+---
+
+# useThrottleFn
+
+Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.
+
+> Throttle is a spring that throws balls: after a ball flies out it needs some time to shrink back, so it cannot throw any more balls unless it's ready.
+
+## Usage
+
+```ts
+import { useThrottleFn } from '@vueuse/core'
+
+const throttledFn = useThrottleFn(() => {
+  // do something, it will be called at most 1 time per second
+}, 1000)
+
+useEventListener(window, 'resize', throttledFn)
+```
+
+## Recommended Reading
+
+- [**Debounce vs Throttle**: Definitive Visual Guide](https://kettanaito.com/blog/debounce-vs-throttle)
+
+## Type Declarations
+
+```ts
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param   fn             A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+ *                                    to `callback` when the throttled-function is executed.
+ * @param   ms             A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ *                                    (default value: 200)
+ *
+ * @param [trailing] if true, call fn again after the time is up (default value: false)
+ *
+ * @param [leading] if true, call fn on the leading edge of the ms timeout (default value: true)
+ *
+ * @param [rejectOnCancel] if true, reject the last call if it's been cancel (default value: false)
+ *
+ * @return  A new, throttled, function.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useThrottleFn<T extends FunctionArgs>(
+  fn: T,
+  ms?: MaybeRefOrGetter<number>,
+  trailing?: boolean,
+  leading?: boolean,
+  rejectOnCancel?: boolean,
+): PromisifyFn<T>
+```

package/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/skills/vueuse-functions/references/useTimeAgo.md

@@ -0,0 +1,154 @@
+---
+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>, ConfigurableScheduler {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Intervals to update, set 0 to disable auto update
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @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/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
+```