ads-fe 0.0.1

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

@@ -0,0 +1,90 @@
+---
+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"]
+}
+export type UseImageReturn = UseAsyncStateReturn<
+  HTMLImageElement | undefined,
+  any[],
+  true
+>
+/**
+ * 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>,
+): UseImageReturn
+```

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

@@ -0,0 +1,156 @@
+---
+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
+}
+export interface UseInfiniteScrollReturn {
+  isLoading: ComputedRef<boolean>
+  reset: () => void
+}
+/**
+ * Reactive infinite scroll.
+ *
+ * @see https://vueuse.org/useInfiniteScroll
+ */
+export declare function useInfiniteScroll<T extends InfiniteScrollElement>(
+  element: MaybeRefOrGetter<T>,
+  onLoadMore: (state: UnwrapNestedRefs<UseScrollReturn>) => Awaitable<void>,
+  options?: UseInfiniteScrollOptions<T>,
+): UseInfiniteScrollReturn
+```

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

@@ -0,0 +1,117 @@
+---
+category: Elements
+---
+
+# useIntersectionObserver
+
+Detects changes to 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 Supportable, Pausable {
+  stop: () => void
+}
+/**
+ * Detects changes to 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
+```

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

@@ -0,0 +1,144 @@
+---
+category: '@Electron'
+---
+
+# useIpcRenderer
+
+Provides [ipcRenderer](https://www.electronjs.org/docs/api/ipc-renderer) and all of its APIs with Vue reactivity.
+
+## Usage
+
+```ts
+import { useIpcRenderer } from '@vueuse/electron'
+import { computed } from 'vue'
+
+// enable nodeIntegration if you don't provide ipcRenderer explicitly
+// see: https://www.electronjs.org/docs/api/webview-tag#nodeintegration
+const ipcRenderer = useIpcRenderer()
+
+// Ref result will return
+const result = ipcRenderer.invoke<string>('custom-channel', 'some data')
+const msg = computed(() => result.value?.msg)
+
+// remove listener automatically on unmounted
+ipcRenderer.on('custom-event', (event, ...args) => {
+  console.log(args)
+})
+```
+
+### Available Methods
+
+| Method                                     | Description                                          |
+| ------------------------------------------ | ---------------------------------------------------- |
+| `on(channel, listener)`                    | Listen to channel. Auto-removes listener on unmount. |
+| `once(channel, listener)`                  | Listen to channel once                               |
+| `removeListener(channel, listener)`        | Remove specific listener                             |
+| `removeAllListeners(channel)`              | Remove all listeners for channel                     |
+| `send(channel, ...args)`                   | Send async message to main process                   |
+| `invoke(channel, ...args)`                 | Send message and get response as `ShallowRef`        |
+| `sendSync(channel, ...args)`               | Send sync message and get response as `ShallowRef`   |
+| `postMessage(channel, message, transfer?)` | Send message with transferable objects               |
+| `sendTo(webContentsId, channel, ...args)`  | Send to specific webContents                         |
+| `sendToHost(channel, ...args)`             | Send to webview host                                 |
+
+### With Custom IpcRenderer
+
+If `nodeIntegration` is disabled, you can pass the `ipcRenderer` instance explicitly:
+
+```ts
+import { useIpcRenderer } from '@vueuse/electron'
+import { ipcRenderer } from 'electron'
+
+const ipc = useIpcRenderer(ipcRenderer)
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Result from useIpcRenderer
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer
+ */
+export interface UseIpcRendererReturn {
+  /**
+   * Listens to channel, when a new message arrives listener would be called with listener(event, args...).
+   * [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener) automatically on unmounted.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
+   */
+  on: (channel: string, listener: IpcRendererListener) => IpcRenderer
+  /**
+   * Adds a one time listener function for the event. This listener is invoked only the next time a message is sent to channel, after which it is removed.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereroncechannel-listener
+   */
+  once: (
+    channel: string,
+    listener: (event: IpcRendererEvent, ...args: any[]) => void,
+  ) => IpcRenderer
+  /**
+   * Removes the specified listener from the listener array for the specified channel.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener
+   */
+  removeListener: (
+    channel: string,
+    listener: (...args: any[]) => void,
+  ) => IpcRenderer
+  /**
+   * Removes all listeners, or those of the specified channel.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovealllistenerschannel
+   */
+  removeAllListeners: (channel: string) => IpcRenderer
+  /**
+   * Send an asynchronous message to the main process via channel, along with arguments.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendchannel-args
+   */
+  send: (channel: string, ...args: any[]) => void
+  /**
+   * Returns Promise<any> - Resolves with the response from the main process.
+   * Send a message to the main process via channel and expect a result ~~asynchronously~~.
+   * As composition-api, it makes asynchronous operations look like synchronous.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
+   */
+  invoke: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
+  /**
+   * Returns any - The value sent back by the ipcMain handler.
+   * Send a message to the main process via channel and expect a result synchronously.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendsyncchannel-args
+   */
+  sendSync: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
+  /**
+   * Send a message to the main process, optionally transferring ownership of zero or more MessagePort objects.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererpostmessagechannel-message-transfer
+   */
+  postMessage: (channel: string, message: any, transfer?: MessagePort[]) => void
+  /**
+   * Sends a message to a window with webContentsId via channel.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtowebcontentsid-channel-args
+   */
+  sendTo: (webContentsId: number, channel: string, ...args: any[]) => void
+  /**
+   * Like ipcRenderer.send but the event will be sent to the <webview> element in the host page instead of the main process.
+   *
+   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
+   */
+  sendToHost: (channel: string, ...args: any[]) => void
+}
+/**
+ * Get the `ipcRenderer` module with all APIs.
+ *
+ * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
+ * @see https://vueuse.org/useIpcRenderer
+ */
+export declare function useIpcRenderer(
+  ipcRenderer?: IpcRenderer,
+): UseIpcRendererReturn
+```