devskill 2.0.2

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

@@ -0,0 +1,88 @@
+---
+category: Sensors
+---
+
+# useIdle
+
+Tracks whether the user is being inactive.
+
+## Usage
+
+```ts
+import { useIdle } from '@vueuse/core'
+
+const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min
+
+console.log(idle.value) // true or false
+```
+
+Programatically resetting:
+
+```ts
+import { useCounter, useIdle } from '@vueuse/core'
+import { watch } from 'vue'
+
+const { inc, count } = useCounter()
+
+const { idle, lastActive, reset } = useIdle(5 * 60 * 1000) // 5 min
+
+watch(idle, (idleValue) => {
+  if (idleValue) {
+    inc()
+    console.log(`Triggered ${count.value} times`)
+    reset() // restarts the idle timer. Does not change lastActive value
+  }
+})
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseIdle v-slot="{ idle }" :timeout="5 * 60 * 1000">
+    Is Idle: {{ idle }}
+  </UseIdle>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseIdleOptions
+  extends ConfigurableWindow, ConfigurableEventFilter {
+  /**
+   * Event names that listen to for detected user activity
+   *
+   * @default ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']
+   */
+  events?: WindowEventName[]
+  /**
+   * Listen for document visibility change
+   *
+   * @default true
+   */
+  listenForVisibilityChange?: boolean
+  /**
+   * Initial state of the ref idle
+   *
+   * @default false
+   */
+  initialState?: boolean
+}
+export interface UseIdleReturn extends Stoppable {
+  idle: ShallowRef<boolean>
+  lastActive: ShallowRef<number>
+  reset: () => void
+}
+/**
+ * Tracks whether the user is being inactive.
+ *
+ * @see https://vueuse.org/useIdle
+ * @param timeout default to 1 minute
+ * @param options IdleOptions
+ */
+export declare function useIdle(
+  timeout?: number,
+  options?: UseIdleOptions,
+): UseIdleReturn
+```

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

@@ -0,0 +1,86 @@
+---
+category: Browser
+---
+
+# useImage
+
+Reactive load an image in the browser, you can wait the result to display it or show a fallback.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useImage } from '@vueuse/core'
+
+const avatarUrl = 'https://place.dog/300/200'
+const { isLoading } = useImage({ src: avatarUrl })
+</script>
+
+<template>
+  <span v-if="isLoading">Loading</span>
+  <img v-else :src="avatarUrl">
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseImage src="https://place.dog/300/200">
+    <template #loading>
+      Loading..
+    </template>
+
+    <template #error>
+      Failed
+    </template>
+  </UseImage>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseImageOptions {
+  /** Address of the resource */
+  src: string
+  /** Images to use in different situations, e.g., high-resolution displays, small monitors, etc. */
+  srcset?: string
+  /** Image sizes for different page layouts */
+  sizes?: string
+  /** Image alternative information */
+  alt?: string
+  /** Image classes */
+  class?: string
+  /** Image loading */
+  loading?: HTMLImageElement["loading"]
+  /** Image CORS settings */
+  crossorigin?: string
+  /** Referrer policy for fetch https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
+  referrerPolicy?: HTMLImageElement["referrerPolicy"]
+  /** Image width */
+  width?: HTMLImageElement["width"]
+  /** Image height */
+  height?: HTMLImageElement["height"]
+  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding */
+  decoding?: HTMLImageElement["decoding"]
+  /** Provides a hint of the relative priority to use when fetching the image */
+  fetchPriority?: HTMLImageElement["fetchPriority"]
+  /** Provides a hint of the importance of the image */
+  ismap?: HTMLImageElement["isMap"]
+  /** The partial URL (starting with #) of an image map associated with the element */
+  usemap?: HTMLImageElement["useMap"]
+}
+/**
+ * Reactive load an image in the browser, you can wait the result to display it or show a fallback.
+ *
+ * @see https://vueuse.org/useImage
+ * @param options Image attributes, as used in the <img> tag
+ * @param asyncStateOptions
+ */
+export declare function useImage<Shallow extends true>(
+  options: MaybeRefOrGetter<UseImageOptions>,
+  asyncStateOptions?: UseAsyncStateOptions<Shallow>,
+): UseAsyncStateReturn<HTMLImageElement | undefined, any[], true>
+export type UseImageReturn = ReturnType<typeof useImage>
+```

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

@@ -0,0 +1,157 @@
+---
+category: Sensors
+---
+
+# useInfiniteScroll
+
+Infinite scrolling of the element.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useInfiniteScroll } from '@vueuse/core'
+import { ref, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const data = ref([1, 2, 3, 4, 5, 6])
+
+const { reset } = useInfiniteScroll(
+  el,
+  () => {
+    // load more
+    data.value.push(...moreData)
+  },
+  {
+    distance: 10,
+    canLoadMore: () => {
+      // inidicate when there is no more content to load so onLoadMore stops triggering
+      // if (noMoreContent) return false
+      return true // for demo purposes
+    },
+  }
+)
+
+function resetList() {
+  data.value = []
+  reset()
+}
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in data">
+      {{ item }}
+    </div>
+  </div>
+  <button @click="resetList()">
+    Reset
+  </button>
+</template>
+```
+
+## Direction
+
+Different scroll directions require different CSS style settings:
+
+| Direction          | Required CSS                                          |
+| ------------------ | ----------------------------------------------------- |
+| `bottom` (default) | No special settings required                          |
+| `top`              | `display: flex;`<br>`flex-direction: column-reverse;` |
+| `left`             | `display: flex;`<br>`flex-direction: row-reverse;`    |
+| `right`            | `display: flex;`                                      |
+
+::: warning
+Make sure to indicate when there is no more content to load with `canLoadMore`, otherwise `onLoadMore` will trigger as long as there is space for more content.
+:::
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vInfiniteScroll } from '@vueuse/components'
+import { ref } from 'vue'
+
+const data = ref([1, 2, 3, 4, 5, 6])
+
+function onLoadMore() {
+  const length = data.value.length + 1
+  data.value.push(...Array.from({ length: 5 }, (_, i) => length + i))
+}
+function canLoadMore() {
+  // inidicate when there is no more content to load so onLoadMore stops triggering
+  // if (noMoreContent) return false
+  return true // for demo purposes
+}
+</script>
+
+<template>
+  <div v-infinite-scroll="onLoadMore">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+
+  <!-- with options -->
+  <div v-infinite-scroll="[onLoadMore, { distance: 10, canLoadMore }]">
+    <div v-for="item in data" :key="item">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+type InfiniteScrollElement =
+  | HTMLElement
+  | SVGElement
+  | Window
+  | Document
+  | null
+  | undefined
+export interface UseInfiniteScrollOptions<
+  T extends InfiniteScrollElement = InfiniteScrollElement,
+> extends UseScrollOptions {
+  /**
+   * The minimum distance between the bottom of the element and the bottom of the viewport
+   *
+   * @default 0
+   */
+  distance?: number
+  /**
+   * The direction in which to listen the scroll.
+   *
+   * @default 'bottom'
+   */
+  direction?: "top" | "bottom" | "left" | "right"
+  /**
+   * The interval time between two load more (to avoid too many invokes).
+   *
+   * @default 100
+   */
+  interval?: number
+  /**
+   * A function that determines whether more content can be loaded for a specific element.
+   * Should return `true` if loading more content is allowed for the given element,
+   * and `false` otherwise.
+   */
+  canLoadMore?: (el: T) => boolean
+}
+/**
+ * Reactive infinite scroll.
+ *
+ * @see https://vueuse.org/useInfiniteScroll
+ */
+export declare function useInfiniteScroll<T extends InfiniteScrollElement>(
+  element: MaybeRefOrGetter<T>,
+  onLoadMore: (
+    state: UnwrapNestedRefs<ReturnType<typeof useScroll>>,
+  ) => Awaitable<void>,
+  options?: UseInfiniteScrollOptions<T>,
+): {
+  isLoading: ComputedRef<boolean>
+  reset(): void
+}
+```

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

@@ -0,0 +1,118 @@
+---
+category: Elements
+---
+
+# useIntersectionObserver
+
+Detects that a target element's visibility.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useIntersectionObserver } from '@vueuse/core'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const targetIsVisible = shallowRef(false)
+
+const { stop } = useIntersectionObserver(
+  target,
+  ([entry], observerElement) => {
+    targetIsVisible.value = entry?.isIntersecting || false
+  },
+)
+</script>
+
+<template>
+  <div ref="target">
+    <h1>Hello world</h1>
+  </div>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vIntersectionObserver } from '@vueuse/components'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const root = useTemplateRef('root')
+
+const isVisible = shallowRef(false)
+
+function onIntersectionObserver([entry]: IntersectionObserverEntry[]) {
+  isVisible.value = entry?.isIntersecting || false
+}
+</script>
+
+<template>
+  <div>
+    <p>
+      Scroll me down!
+    </p>
+    <div v-intersection-observer="onIntersectionObserver">
+      <p>Hello world!</p>
+    </div>
+  </div>
+
+  <!-- with options -->
+  <div ref="root">
+    <p>
+      Scroll me down!
+    </p>
+    <div v-intersection-observer="[onIntersectionObserver, { root }]">
+      <p>Hello world!</p>
+    </div>
+  </div>
+</template>
+```
+
+[IntersectionObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)
+
+## Type Declarations
+
+```ts
+export interface UseIntersectionObserverOptions extends ConfigurableWindow {
+  /**
+   * Start the IntersectionObserver immediately on creation
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * The Element or Document whose bounds are used as the bounding box when testing for intersection.
+   */
+  root?: MaybeComputedElementRef | Document
+  /**
+   * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
+   */
+  rootMargin?: MaybeRefOrGetter<string>
+  /**
+   * Either a single number or an array of numbers between 0.0 and 1.
+   * @default 0
+   */
+  threshold?: number | number[]
+}
+export interface UseIntersectionObserverReturn extends Pausable {
+  isSupported: ComputedRef<boolean>
+  stop: () => void
+}
+/**
+ * Detects that a target element's visibility.
+ *
+ * @see https://vueuse.org/useIntersectionObserver
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function useIntersectionObserver(
+  target:
+    | MaybeComputedElementRef
+    | MaybeRefOrGetter<MaybeElement[]>
+    | MaybeComputedElementRef[],
+  callback: IntersectionObserverCallback,
+  options?: UseIntersectionObserverOptions,
+): UseIntersectionObserverReturn
+```

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

@@ -0,0 +1,112 @@
+---
+category: Animation
+---
+
+# useInterval
+
+Reactive counter that increases on every interval.
+
+## Usage
+
+```ts
+import { useInterval } from '@vueuse/core'
+
+// count will increase every 200ms
+const counter = useInterval(200)
+```
+
+### With Controls
+
+```ts
+import { useInterval } from '@vueuse/core'
+
+const { counter, reset, pause, resume, isActive } = useInterval(200, {
+  controls: true,
+})
+
+// Reset counter to 0
+reset()
+
+// Pause/resume the interval
+pause()
+resume()
+```
+
+### Options
+
+| Option      | Type                      | Default | Description                                                |
+| ----------- | ------------------------- | ------- | ---------------------------------------------------------- |
+| `controls`  | `boolean`                 | `false` | Expose `pause`, `resume`, `reset`, and `isActive` controls |
+| `immediate` | `boolean`                 | `true`  | Start the interval immediately                             |
+| `callback`  | `(count: number) => void` | —       | Called on every interval with the current count            |
+
+### Reactive Interval
+
+The interval can be reactive:
+
+```ts
+import { useInterval } from '@vueuse/core'
+
+const intervalMs = ref(1000)
+const counter = useInterval(intervalMs)
+
+// Change the interval dynamically
+intervalMs.value = 500
+```
+
+### Callback on Every Interval
+
+```ts
+import { useInterval } from '@vueuse/core'
+
+useInterval(1000, {
+  callback: (count) => {
+    console.log(`Tick ${count}`)
+  },
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseIntervalOptions<Controls extends boolean> {
+  /**
+   * Expose more controls
+   *
+   * @default false
+   */
+  controls?: Controls
+  /**
+   * Execute the update immediately on calling
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Callback on every interval
+   */
+  callback?: (count: number) => void
+}
+export interface UseIntervalControls {
+  counter: ShallowRef<number>
+  reset: () => void
+}
+export type UseIntervalReturn =
+  | Readonly<ShallowRef<number>>
+  | Readonly<UseIntervalControls & Pausable>
+/**
+ * Reactive counter increases on every interval
+ *
+ * @see https://vueuse.org/useInterval
+ * @param interval
+ * @param options
+ */
+export declare function useInterval(
+  interval?: MaybeRefOrGetter<number>,
+  options?: UseIntervalOptions<false>,
+): Readonly<ShallowRef<number>>
+export declare function useInterval(
+  interval: MaybeRefOrGetter<number>,
+  options: UseIntervalOptions<true>,
+): Readonly<UseIntervalControls & Pausable>
+```

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

@@ -0,0 +1,50 @@
+---
+category: Animation
+---
+
+# useIntervalFn
+
+Wrapper for `setInterval` with controls
+
+## Usage
+
+```ts
+import { useIntervalFn } from '@vueuse/core'
+
+const { pause, resume, isActive } = useIntervalFn(() => {
+  /* your function */
+}, 1000)
+```
+
+## Type Declarations
+
+```ts
+export interface UseIntervalFnOptions {
+  /**
+   * Start the timer immediately
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Execute the callback immediately after calling `resume`
+   *
+   * @default false
+   */
+  immediateCallback?: boolean
+}
+export type UseIntervalFnReturn = Pausable
+/**
+ * Wrapper for `setInterval` with controls
+ *
+ * @see https://vueuse.org/useIntervalFn
+ * @param cb
+ * @param interval
+ * @param options
+ */
+export declare function useIntervalFn(
+  cb: Fn,
+  interval?: MaybeRefOrGetter<number>,
+  options?: UseIntervalFnOptions,
+): UseIntervalFnReturn
+```