aico-cli 2.1.7 → 2.1.23

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

@@ -0,0 +1,175 @@
+---
+category: Utilities
+---
+
+# useMemoize
+
+Cache results of functions depending on arguments and keep it reactive. It can also be used for asynchronous functions and will reuse existing promises to avoid fetching the same data at the same time.
+
+::: tip
+The results are not cleared automatically. Call `clear()` in case you no longer need the results or use own caching mechanism to avoid memory leaks.
+:::
+
+## Usage
+
+```ts
+import { useMemoize } from '@vueuse/core'
+
+const getUser = useMemoize(
+  async (userId: number): Promise<UserData> =>
+    axios.get(`users/${userId}`).then(({ data }) => data),
+)
+
+const user1 = await getUser(1) // Request users/1
+const user2 = await getUser(2) // Request users/2
+// ...
+const user1 = await getUser(1) // Retrieve from cache
+
+// ...
+const user1 = await getUser.load(1) // Request users/1
+
+// ...
+getUser.delete(1) // Delete cache from user 1
+getUser.clear() // Clear full cache
+```
+
+Combine with `computed` or `computedAsync` to achieve reactivity:
+
+```ts
+import { computedAsync, useMemoize } from '@vueuse/core'
+
+const getUser = useMemoize(
+  async (userId: number): Promise<UserData> =>
+    axios.get(`users/${userId}`).then(({ data }) => data),
+)
+// ---cut---
+const user1 = computedAsync(() => getUser(1))
+// ...
+await getUser.load(1) // Will also update user1
+```
+
+### Resolving cache key
+
+The key for caching is determined by the arguments given to the function and will be serialized by default with `JSON.stringify`.
+This will allow equal objects to receive the same cache key. In case you want to customize the key you can pass `getKey`
+
+::: warning Performance Consideration
+Using `JSON.stringify` as the default key generator can be **slow for large or complex objects**. For better performance with complex arguments, it's highly recommended to provide a custom `getKey` function that generates keys based on primitive values or unique identifiers.
+:::
+
+#### Basic Example
+
+```ts
+import { useMemoize } from '@vueuse/core'
+// ---cut---
+const getUser = useMemoize(
+  async (userId: number, headers: AxiosRequestHeaders): Promise<UserData> =>
+    axios.get(`users/${userId}`, { headers }).then(({ data }) => data),
+  {
+    // Use only userId to get/set cache and ignore headers
+    getKey: (userId, headers) => userId,
+  },
+)
+```
+
+### Customize cache mechanism
+
+By default, the results are cached within a `Map`. You can implement your own mechanism by passing `cache` as options with following structure:
+
+```ts
+export interface MemoizeCache<Key, Value> {
+  /**
+   * Get value for key
+   */
+  get: (key: Key) => Value | undefined
+  /**
+   * Set value for key
+   */
+  set: (key: Key, value: Value) => void
+  /**
+   * Return flag if key exists
+   */
+  has: (key: Key) => boolean
+  /**
+   * Delete value for key
+   */
+  delete: (key: Key) => void
+  /**
+   * Clear cache
+   */
+  clear: () => void
+}
+```
+
+## Type Declarations
+
+```ts
+type CacheKey = any
+/**
+ * Custom memoize cache handler
+ */
+export interface UseMemoizeCache<Key, Value> {
+  /**
+   * Get value for key
+   */
+  get: (key: Key) => Value | undefined
+  /**
+   * Set value for key
+   */
+  set: (key: Key, value: Value) => void
+  /**
+   * Return flag if key exists
+   */
+  has: (key: Key) => boolean
+  /**
+   * Delete value for key
+   */
+  delete: (key: Key) => void
+  /**
+   * Clear cache
+   */
+  clear: () => void
+}
+/**
+ * Memoized function
+ */
+export interface UseMemoizeReturn<Result, Args extends unknown[]> {
+  /**
+   * Get result from cache or call memoized function
+   */
+  (...args: Args): Result
+  /**
+   * Call memoized function and update cache
+   */
+  load: (...args: Args) => Result
+  /**
+   * Delete cache of given arguments
+   */
+  delete: (...args: Args) => void
+  /**
+   * Clear cache
+   */
+  clear: () => void
+  /**
+   * Generate cache key for given arguments
+   */
+  generateKey: (...args: Args) => CacheKey
+  /**
+   * Cache container
+   */
+  cache: UseMemoizeCache<CacheKey, Result>
+}
+export interface UseMemoizeOptions<Result, Args extends unknown[]> {
+  getKey?: (...args: Args) => string | number
+  cache?: UseMemoizeCache<CacheKey, Result>
+}
+/**
+ * Reactive function result cache based on arguments
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useMemoize<Result, Args extends unknown[]>(
+  resolver: (...args: Args) => Result,
+  options?: UseMemoizeOptions<Result, Args>,
+): UseMemoizeReturn<Result, Args>
+```

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

@@ -0,0 +1,56 @@
+---
+category: Browser
+---
+
+# useMemory
+
+Reactive Memory Info.
+
+## Usage
+
+```ts
+import { useMemory } from '@vueuse/core'
+
+const { isSupported, memory } = useMemory()
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Performance.memory
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Performance/memory
+ */
+export interface MemoryInfo {
+  /**
+   * The maximum size of the heap, in bytes, that is available to the context.
+   */
+  readonly jsHeapSizeLimit: number
+  /**
+   *  The total allocated heap size, in bytes.
+   */
+  readonly totalJSHeapSize: number
+  /**
+   * The currently active segment of JS heap, in bytes.
+   */
+  readonly usedJSHeapSize: number
+  [Symbol.toStringTag]: "MemoryInfo"
+}
+export interface UseMemoryOptions extends UseIntervalFnOptions {
+  interval?: number
+}
+/**
+ * Reactive Memory Info.
+ *
+ * @see https://vueuse.org/useMemory
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useMemory(options?: UseMemoryOptions): {
+  isSupported: ComputedRef<boolean>
+  memory: Ref<MemoryInfo | undefined, MemoryInfo | undefined>
+}
+export type UseMemoryReturn = ReturnType<typeof useMemory>
+```

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

@@ -0,0 +1,36 @@
+---
+category: '@Math'
+---
+
+# useMin
+
+Reactive `Math.min`.
+
+## Usage
+
+```ts
+import { useMin } from '@vueuse/math'
+
+const array = ref([1, 2, 3, 4])
+const min = useMin(array) // Ref<1>
+```
+
+```ts
+import { useMin } from '@vueuse/math'
+
+const a = ref(1)
+const b = ref(3)
+
+const min = useMin(a, b, 2) // Ref<1>
+```
+
+## Type Declarations
+
+```ts
+export declare function useMin(
+  array: MaybeRefOrGetter<MaybeRefOrGetter<number>[]>,
+): ComputedRef<number>
+export declare function useMin(
+  ...args: MaybeRefOrGetter<number>[]
+): ComputedRef<number>
+```

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

@@ -0,0 +1,38 @@
+---
+category: Component
+---
+
+# useMounted
+
+Mounted state in ref.
+
+## Usage
+
+```ts
+import { useMounted } from '@vueuse/core'
+
+const isMounted = useMounted()
+```
+
+Which is essentially a shorthand of:
+
+```ts
+const isMounted = ref(false)
+
+onMounted(() => {
+  isMounted.value = true
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Mounted state in ref.
+ *
+ * @see https://vueuse.org/useMounted
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useMounted(): ShallowRef<boolean, boolean>
+```

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

@@ -0,0 +1,114 @@
+---
+category: Sensors
+---
+
+# useMouse
+
+Reactive mouse position
+
+## Basic Usage
+
+```ts twoslash
+import { useMouse } from '@vueuse/core'
+
+const { x, y, sourceType } = useMouse()
+```
+
+Touch is enabled by default. To only detect mouse changes, set `touch` to `false`.
+The `dragover` event is used to track mouse position while dragging.
+
+```ts twoslash
+import { useMouse } from '@vueuse/core'
+// ---cut---
+const { x, y } = useMouse({ touch: false })
+```
+
+## Custom Extractor
+
+It's also possible to provide a custom extractor function to get the position from the event.
+
+```ts twoslash
+import type { UseMouseEventExtractor } from '@vueuse/core'
+import { useMouse, useParentElement } from '@vueuse/core'
+
+const parentEl = useParentElement()
+
+const extractor: UseMouseEventExtractor = event => (
+  event instanceof MouseEvent
+    ? [event.offsetX, event.offsetY]
+    : null
+)
+
+const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseMouse v-slot="{ x, y }">
+    x: {{ x }}
+    y: {{ y }}
+  </UseMouse>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type UseMouseCoordType = "page" | "client" | "screen" | "movement"
+export type UseMouseSourceType = "mouse" | "touch" | null
+export type UseMouseEventExtractor = (
+  event: MouseEvent | Touch,
+) => [x: number, y: number] | null | undefined
+export interface UseMouseOptions
+  extends ConfigurableWindow,
+    ConfigurableEventFilter {
+  /**
+   * Mouse position based by page, client, screen, or relative to previous position
+   *
+   * @default 'page'
+   */
+  type?: UseMouseCoordType | UseMouseEventExtractor
+  /**
+   * Listen events on `target` element
+   *
+   * @default 'Window'
+   */
+  target?: MaybeRefOrGetter<Window | EventTarget | null | undefined>
+  /**
+   * Listen to `touchmove` events
+   *
+   * @default true
+   */
+  touch?: boolean
+  /**
+   * Listen to `scroll` events on window, only effective on type `page`
+   *
+   * @default true
+   */
+  scroll?: boolean
+  /**
+   * Reset to initial value when `touchend` event fired
+   *
+   * @default false
+   */
+  resetOnTouchEnds?: boolean
+  /**
+   * Initial values
+   */
+  initialValue?: Position
+}
+/**
+ * Reactive mouse position.
+ *
+ * @see https://vueuse.org/useMouse
+ * @param options
+ */
+export declare function useMouse(options?: UseMouseOptions): {
+  x: ShallowRef<number, number>
+  y: ShallowRef<number, number>
+  sourceType: ShallowRef<UseMouseSourceType, UseMouseSourceType>
+}
+export type UseMouseReturn = ReturnType<typeof useMouse>
+```

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

@@ -0,0 +1,123 @@
+---
+category: Elements
+---
+
+# useMouseInElement
+
+Reactive mouse position related to an element
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useMouseInElement } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+
+const { x, y, isOutside } = useMouseInElement(target)
+</script>
+
+<template>
+  <div ref="target">
+    <h1>Hello world</h1>
+  </div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseMouseInElement v-slot="{ elementX, elementY, isOutside }">
+    x: {{ elementX }}
+    y: {{ elementY }}
+    Is Outside: {{ isOutside }}
+  </UseMouseInElement>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vMouseInElement } from '@vueuse/components'
+import { UseMouseSourceType } from '@vueuse/core'
+
+interface MouseInElementType {
+  x: number
+  y: number
+  sourceType: UseMouseSourceType
+  elementX: number
+  elementY: number
+  elementPositionX: number
+  elementPositionY: number
+  elementHeight: number
+  elementWidth: number
+  isOutside: boolean
+}
+
+const options = {
+  handleOutside: true
+}
+function onMouseInElement({ x, y, sourceType, elementX, elementY, elementPositionX, elementPositionY, elementHeight, elementWidth, isOutside }: MouseInElementType) {
+  console.log(x, y, sourceType, elementX, elementY, elementPositionX, elementPositionY, elementHeight, elementWidth, isOutside)
+}
+</script>
+
+<template>
+  <textarea v-mouse-in-element="onMouseInElement" />
+  <!-- with options -->
+  <textarea v-mouse-in-element="[onMouseInElement, options]" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface MouseInElementOptions extends UseMouseOptions {
+  /**
+   * Whether to handle mouse events when the cursor is outside the target element.
+   * When enabled, mouse position will continue to be tracked even when outside the element bounds.
+   *
+   * @default true
+   */
+  handleOutside?: boolean
+  /**
+   * Listen to window resize event
+   *
+   * @default true
+   */
+  windowScroll?: boolean
+  /**
+   * Listen to window scroll event
+   *
+   * @default true
+   */
+  windowResize?: boolean
+}
+/**
+ * Reactive mouse position related to an element.
+ *
+ * @see https://vueuse.org/useMouseInElement
+ * @param target
+ * @param options
+ */
+export declare function useMouseInElement(
+  target?: MaybeElementRef,
+  options?: MouseInElementOptions,
+): {
+  x: ShallowRef<number, number>
+  y: ShallowRef<number, number>
+  sourceType: ShallowRef<UseMouseSourceType, UseMouseSourceType>
+  elementX: ShallowRef<number, number>
+  elementY: ShallowRef<number, number>
+  elementPositionX: ShallowRef<number, number>
+  elementPositionY: ShallowRef<number, number>
+  elementHeight: ShallowRef<number, number>
+  elementWidth: ShallowRef<number, number>
+  isOutside: ShallowRef<boolean, boolean>
+  stop: () => void
+}
+export type UseMouseInElementReturn = ReturnType<typeof useMouseInElement>
+```

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

@@ -0,0 +1,112 @@
+---
+category: Sensors
+---
+
+# useMousePressed
+
+Reactive mouse pressing state. Triggered by `mousedown` `touchstart` on target element and released by `mouseup` `mouseleave` `touchend` `touchcancel` on window.
+
+## Basic Usage
+
+```ts
+import { useMousePressed } from '@vueuse/core'
+
+const { pressed } = useMousePressed()
+```
+
+Touching is enabled by default. To make it only detects mouse changes, set `touch` to `false`
+
+```ts
+import { useMousePressed } from '@vueuse/core'
+// ---cut---
+const { pressed } = useMousePressed({ touch: false })
+```
+
+To only capture `mousedown` and `touchstart` on specific element, you can specify `target` by passing a ref of the element.
+
+```vue
+<script setup lang="ts">
+import { useMousePressed } from '@vueuse/core'
+// ---cut---
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+
+const { pressed } = useMousePressed({ target: el })
+</script>
+
+<template>
+  <div ref="el">
+    Only clicking on this element will trigger the update.
+  </div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseMousePressed v-slot="{ pressed }">
+    Is Pressed: {{ pressed }}
+  </UseMousePressed>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface MousePressedOptions extends ConfigurableWindow {
+  /**
+   * Listen to `touchstart` `touchend` events
+   *
+   * @default true
+   */
+  touch?: boolean
+  /**
+   * Listen to `dragstart` `drop` and `dragend` events
+   *
+   * @default true
+   */
+  drag?: boolean
+  /**
+   * Add event listeners with the `capture` option set to `true`
+   * (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture))
+   *
+   * @default false
+   */
+  capture?: boolean
+  /**
+   * Initial values
+   *
+   * @default false
+   */
+  initialValue?: boolean
+  /**
+   * Element target to be capture the click
+   */
+  target?: MaybeComputedElementRef
+  /**
+   * Callback to be called when the mouse is pressed
+   *
+   * @param event
+   */
+  onPressed?: (event: MouseEvent | TouchEvent | DragEvent) => void
+  /**
+   * Callback to be called when the mouse is released
+   *
+   * @param event
+   */
+  onReleased?: (event: MouseEvent | TouchEvent | DragEvent) => void
+}
+/**
+ * Reactive mouse pressing state.
+ *
+ * @see https://vueuse.org/useMousePressed
+ * @param options
+ */
+export declare function useMousePressed(options?: MousePressedOptions): {
+  pressed: ShallowRef<boolean, boolean>
+  sourceType: ShallowRef<UseMouseSourceType, UseMouseSourceType>
+}
+export type UseMousePressedReturn = ReturnType<typeof useMousePressed>
+```

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

@@ -0,0 +1,62 @@
+---
+category: Elements
+---
+
+# useMutationObserver
+
+Watch for changes being made to the DOM tree. [MutationObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useMutationObserver } from '@vueuse/core'
+import { ref, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const messages = ref([])
+
+useMutationObserver(el, (mutations) => {
+  if (mutations[0])
+    messages.value.push(mutations[0].attributeName)
+}, {
+  attributes: true,
+})
+</script>
+
+<template>
+  <div ref="el">
+    Hello VueUse
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseMutationObserverOptions
+  extends MutationObserverInit,
+    ConfigurableWindow {}
+/**
+ * Watch for changes being made to the DOM tree.
+ *
+ * @see https://vueuse.org/useMutationObserver
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function useMutationObserver(
+  target:
+    | MaybeComputedElementRef
+    | MaybeComputedElementRef[]
+    | MaybeRefOrGetter<MaybeElement[]>,
+  callback: MutationCallback,
+  options?: UseMutationObserverOptions,
+): {
+  isSupported: ComputedRef<boolean>
+  stop: () => void
+  takeRecords: () => MutationRecord[] | undefined
+}
+export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>
+```