aico-cli 2.1.7 → 2.1.23

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

@@ -0,0 +1,162 @@
+---
+category: Browser
+---
+
+# useFileSystemAccess
+
+Create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
+
+## Usage
+
+```ts
+import { useFileSystemAccess } from '@vueuse/core'
+
+const {
+  isSupported,
+  data,
+  file,
+  fileName,
+  fileMIME,
+  fileSize,
+  fileLastModified,
+  create,
+  open,
+  save,
+  saveAs,
+  updateData
+} = useFileSystemAccess()
+```
+
+## Type Declarations
+
+```ts
+/**
+ * window.showOpenFilePicker parameters
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#parameters
+ */
+export interface FileSystemAccessShowOpenFileOptions {
+  multiple?: boolean
+  types?: Array<{
+    description?: string
+    accept: Record<string, string[]>
+  }>
+  excludeAcceptAllOption?: boolean
+}
+/**
+ * window.showSaveFilePicker parameters
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/window/showSaveFilePicker#parameters
+ */
+export interface FileSystemAccessShowSaveFileOptions {
+  suggestedName?: string
+  types?: Array<{
+    description?: string
+    accept: Record<string, string[]>
+  }>
+  excludeAcceptAllOption?: boolean
+}
+/**
+ * FileHandle
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle
+ */
+export interface FileSystemFileHandle {
+  getFile: () => Promise<File>
+  createWritable: () => FileSystemWritableFileStream
+}
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream
+ */
+interface FileSystemWritableFileStream extends WritableStream {
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
+   */
+  write: FileSystemWritableFileStreamWrite
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/seek
+   */
+  seek: (position: number) => Promise<void>
+  /**
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/truncate
+   */
+  truncate: (size: number) => Promise<void>
+}
+/**
+ * FileStream.write
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
+ */
+interface FileSystemWritableFileStreamWrite {
+  (data: string | BufferSource | Blob): Promise<void>
+  (options: {
+    type: "write"
+    position: number
+    data: string | BufferSource | Blob
+  }): Promise<void>
+  (options: { type: "seek"; position: number }): Promise<void>
+  (options: { type: "truncate"; size: number }): Promise<void>
+}
+/**
+ * FileStream.write
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write
+ */
+export type FileSystemAccessWindow = Window & {
+  showSaveFilePicker: (
+    options: FileSystemAccessShowSaveFileOptions,
+  ) => Promise<FileSystemFileHandle>
+  showOpenFilePicker: (
+    options: FileSystemAccessShowOpenFileOptions,
+  ) => Promise<FileSystemFileHandle[]>
+}
+export type UseFileSystemAccessCommonOptions = Pick<
+  FileSystemAccessShowOpenFileOptions,
+  "types" | "excludeAcceptAllOption"
+>
+export type UseFileSystemAccessShowSaveFileOptions = Pick<
+  FileSystemAccessShowSaveFileOptions,
+  "suggestedName"
+>
+export type UseFileSystemAccessOptions = ConfigurableWindow &
+  UseFileSystemAccessCommonOptions & {
+    /**
+     * file data type
+     */
+    dataType?: MaybeRefOrGetter<"Text" | "ArrayBuffer" | "Blob">
+  }
+/**
+ * Create and read and write local files.
+ * @see https://vueuse.org/useFileSystemAccess
+ */
+export declare function useFileSystemAccess(): UseFileSystemAccessReturn<
+  string | ArrayBuffer | Blob
+>
+export declare function useFileSystemAccess(
+  options: UseFileSystemAccessOptions & {
+    dataType: "Text"
+  },
+): UseFileSystemAccessReturn<string>
+export declare function useFileSystemAccess(
+  options: UseFileSystemAccessOptions & {
+    dataType: "ArrayBuffer"
+  },
+): UseFileSystemAccessReturn<ArrayBuffer>
+export declare function useFileSystemAccess(
+  options: UseFileSystemAccessOptions & {
+    dataType: "Blob"
+  },
+): UseFileSystemAccessReturn<Blob>
+export declare function useFileSystemAccess(
+  options: UseFileSystemAccessOptions,
+): UseFileSystemAccessReturn<string | ArrayBuffer | Blob>
+export interface UseFileSystemAccessReturn<T = string> {
+  isSupported: ComputedRef<boolean>
+  data: ShallowRef<T | undefined>
+  file: ShallowRef<File | undefined>
+  fileName: ComputedRef<string>
+  fileMIME: ComputedRef<string>
+  fileSize: ComputedRef<number>
+  fileLastModified: ComputedRef<number>
+  open: (_options?: UseFileSystemAccessCommonOptions) => Awaitable<void>
+  create: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
+  save: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
+  saveAs: (_options?: UseFileSystemAccessShowSaveFileOptions) => Awaitable<void>
+  updateData: () => Awaitable<void>
+}
+```

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

@@ -0,0 +1,104 @@
+---
+category: '@Firebase'
+---
+
+# useFirestore
+
+Reactive [Firestore](https://firebase.google.com/docs/firestore) binding. Making it straightforward to **always keep your local data in sync** with remotes databases.
+
+## Usage
+
+```ts {9,12,17,22}
+import { useFirestore } from '@vueuse/firebase/useFirestore'
+import { initializeApp } from 'firebase/app'
+import { collection, doc, getFirestore, limit, orderBy, query } from 'firebase/firestore'
+import { computed, shallowRef } from 'vue'
+
+const app = initializeApp({ projectId: 'MY PROJECT ID' })
+const db = getFirestore(app)
+
+const todos = useFirestore(collection(db, 'todos'))
+
+// or for doc reference
+const user = useFirestore(doc(db, 'users', 'my-user-id'))
+
+// you can also use ref value for reactive query
+const postsLimit = shallowRef(10)
+const postsQuery = computed(() => query(collection(db, 'posts'), orderBy('createdAt', 'desc'), limit(postsLimit.value)))
+const posts = useFirestore(postsQuery)
+
+// you can use the boolean value to tell a query when it is ready to run
+// when it gets falsy value, return the initial value
+const userId = shallowRef('')
+const userQuery = computed(() => userId.value && doc(db, 'users', userId.value))
+const userData = useFirestore(userQuery, null)
+```
+
+## Share across instances
+
+You can reuse the db reference by passing `autoDispose: false`. You can also set an amount of milliseconds before auto disposing the db reference.
+
+Note : Getting a not disposed db reference again don't cost a Firestore read.
+
+```ts
+import { useFirestore } from '@vueuse/firebase/useFirestore'
+import { collection } from 'firebase/firestore'
+// ---cut---
+const todos = useFirestore(collection(db, 'todos'), undefined, { autoDispose: false })
+```
+
+or use `createGlobalState` from the core package
+
+```ts twoslash include store
+// @filename: store.ts
+// ---cut---
+// store.ts
+import { createGlobalState } from '@vueuse/core'
+import { useFirestore } from '@vueuse/firebase/useFirestore'
+
+export const useTodos = createGlobalState(
+  () => useFirestore(collection(db, 'todos')),
+)
+```
+
+```vue
+<!-- app.vue -->
+<script setup lang="ts">
+// @include: store
+// ---cut---
+import { useTodos } from './store'
+
+const todos = useTodos()
+</script>
+```
+
+## Type Declarations
+
+```ts
+export interface UseFirestoreOptions {
+  errorHandler?: (err: Error) => void
+  autoDispose?: boolean | number
+}
+export type FirebaseDocRef<T> = Query<T> | DocumentReference<T>
+type Falsy = false | 0 | "" | null | undefined
+export declare function useFirestore<T extends DocumentData>(
+  maybeDocRef: MaybeRef<DocumentReference<T> | Falsy>,
+  initialValue: T,
+  options?: UseFirestoreOptions,
+): Ref<T | null>
+export declare function useFirestore<T extends DocumentData>(
+  maybeDocRef: MaybeRef<Query<T> | Falsy>,
+  initialValue: T[],
+  options?: UseFirestoreOptions,
+): Ref<T[]>
+export declare function useFirestore<T extends DocumentData>(
+  maybeDocRef: MaybeRef<DocumentReference<T> | Falsy>,
+  initialValue?: T | undefined | null,
+  options?: UseFirestoreOptions,
+): Ref<T | undefined | null>
+export declare function useFirestore<T extends DocumentData>(
+  maybeDocRef: MaybeRef<Query<T> | Falsy>,
+  initialValue?: T[],
+  options?: UseFirestoreOptions,
+): Ref<T[] | undefined>
+```

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

@@ -0,0 +1,31 @@
+---
+category: '@Math'
+---
+
+# useFloor
+
+Reactive `Math.floor`.
+
+## Usage
+
+```ts
+import { useFloor } from '@vueuse/math'
+
+const value = ref(45.95)
+const result = useFloor(value) // 45
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactive `Math.floor`
+ *
+ * @see https://vueuse.org/useFloor
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useFloor(
+  value: MaybeRefOrGetter<number>,
+): ComputedRef<number>
+```

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

@@ -0,0 +1,99 @@
+---
+category: Sensors
+---
+
+# useFocus
+
+Reactive utility to track or set the focus state of a DOM element. State changes to reflect whether the target element is the focused element. Setting reactive value from the outside will trigger `focus` and `blur` events for `true` and `false` values respectively.
+
+## Basic Usage
+
+```ts
+import { useFocus } from '@vueuse/core'
+
+const target = shallowRef()
+const { focused } = useFocus(target)
+
+watch(focused, (focused) => {
+  if (focused)
+    console.log('input element has been focused')
+  else console.log('input element has lost focus')
+})
+```
+
+## Setting initial focus
+
+To focus the element on its first render one can provide the `initialValue` option as `true`. This will trigger a `focus` event on the target element.
+
+```ts
+import { useFocus } from '@vueuse/core'
+
+const target = shallowRef()
+const { focused } = useFocus(target, { initialValue: true })
+```
+
+## Change focus state
+
+Changes of the `focused` reactive ref will automatically trigger `focus` and `blur` events for `true` and `false` values respectively. You can utilize this behavior to focus the target element as a result of another action (e.g. when a button click as shown below).
+
+```vue
+<script setup lang="ts">
+import { useFocus } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const input = shallowRef()
+const { focused } = useFocus(input)
+</script>
+
+<template>
+  <div>
+    <button type="button" @click="focused = true">
+      Click me to focus input below
+    </button>
+    <input ref="input" type="text">
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseFocusOptions extends ConfigurableWindow {
+  /**
+   * Initial value. If set true, then focus will be set on the target
+   *
+   * @default false
+   */
+  initialValue?: boolean
+  /**
+   * Replicate the :focus-visible behavior of CSS
+   *
+   * @default false
+   */
+  focusVisible?: boolean
+  /**
+   * Prevent scrolling to the element when it is focused.
+   *
+   * @default false
+   */
+  preventScroll?: boolean
+}
+export interface UseFocusReturn {
+  /**
+   * If read as true, then the element has focus. If read as false, then the element does not have focus
+   * If set to true, then the element will be focused. If set to false, the element will be blurred.
+   */
+  focused: WritableComputedRef<boolean>
+}
+/**
+ * Track or set the focus state of a DOM element.
+ *
+ * @see https://vueuse.org/useFocus
+ * @param target The target element for the focus and blur events.
+ * @param options
+ */
+export declare function useFocus(
+  target: MaybeElementRef,
+  options?: UseFocusOptions,
+): UseFocusReturn
+```

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

@@ -0,0 +1,245 @@
+---
+category: '@Integrations'
+---
+
+# useFocusTrap
+
+Reactive wrapper for [`focus-trap`](https://github.com/focus-trap/focus-trap).
+
+For more information on what options can be passed, see [`createOptions`](https://github.com/focus-trap/focus-trap#createoptions) in the `focus-trap` documentation.
+
+## Install
+
+```bash
+npm i focus-trap@^7
+```
+
+## Usage
+
+**Basic Usage**
+
+```vue
+<script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const { hasFocus, activate, deactivate } = useFocusTrap(target)
+</script>
+
+<template>
+  <div>
+    <button @click="activate()">
+      Activate
+    </button>
+    <div ref="target">
+      <span>Has Focus: {{ hasFocus }}</span>
+      <input type="text">
+      <button @click="deactivate()">
+        Deactivate
+      </button>
+    </div>
+  </div>
+</template>
+```
+
+**Multiple Refs**
+
+```vue
+<script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { useTemplateRef } from 'vue'
+
+const targetOne = useTemplateRef('targetOne')
+const targetTwo = useTemplateRef('targetTwo')
+const { hasFocus, activate, deactivate } = useFocusTrap([targetOne, targetTwo])
+</script>
+
+<template>
+  <div>
+    <button @click="activate()">
+      Activate
+    </button>
+    <div ref="targetOne">
+      <span>Has Focus: {{ hasFocus }}</span>
+      <input type="text">
+    </div>
+    ...
+    <div ref="targetTow">
+      <p>Another target here</p>
+      <input type="text">
+      <button @click="deactivate()">
+        Deactivate
+      </button>
+    </div>
+  </div>
+</template>
+```
+
+**Dynamic Focus Target**
+
+```vue
+<script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { computed, shallowRef, useTemplateRef } from 'vue'
+
+const left = useTemplateRef('left')
+const right = useTemplateRef('right')
+const currentRef = shallowRef<'left' | 'right'>('left')
+
+const target = computed(() =>
+  currentRef.value === 'left'
+    ? left
+    : currentRef.value === 'right'
+      ? right
+      : null,
+)
+
+const { activate } = useFocusTrap(target)
+</script>
+
+<template>
+  <div>
+    <div ref="left" class="left">
+      ...
+    </div>
+    <div ref="right" class="right">
+      ...
+    </div>
+  </div>
+</template>
+```
+
+**Automatically Focus**
+
+```vue
+<script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const { hasFocus, activate, deactivate } = useFocusTrap(target, { immediate: true })
+</script>
+
+<template>
+  <div>
+    <div ref="target">
+      ...
+    </div>
+  </div>
+</template>
+```
+
+**Conditional Rendering**
+
+This function can't properly activate focus on elements with conditional rendering using `v-if`. This is because they do not exist in the DOM at the time of the focus activation. To solve this you need to activate on the next tick.
+
+```vue
+<script setup lang="ts">
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { nextTick, useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const { activate, deactivate } = useFocusTrap(target, { immediate: true })
+
+const show = ref(false)
+
+async function reveal() {
+  show.value = true
+
+  await nextTick()
+  activate()
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="show" ref="target">
+      ...
+    </div>
+
+    <button @click="reveal">
+      Reveal and Focus
+    </button>
+  </div>
+</template>
+```
+
+## Using Component
+
+With the `UseFocusTrap` component, Focus Trap will be activated automatically on mounting this component and deactivated on unmount.
+
+```vue
+<script setup lang="ts">
+import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
+import { shallowRef } from 'vue'
+
+const show = shallowRef(false)
+</script>
+
+<template>
+  <UseFocusTrap v-if="show" :options="{ immediate: true }">
+    <div class="modal">
+      ...
+    </div>
+  </UseFocusTrap>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseFocusTrapOptions extends Options {
+  /**
+   * Immediately activate the trap
+   */
+  immediate?: boolean
+}
+export interface UseFocusTrapReturn {
+  /**
+   * Indicates if the focus trap is currently active
+   */
+  hasFocus: ShallowRef<boolean>
+  /**
+   * Indicates if the focus trap is currently paused
+   */
+  isPaused: ShallowRef<boolean>
+  /**
+   * Activate the focus trap
+   *
+   * @see https://github.com/focus-trap/focus-trap#trapactivateactivateoptions
+   * @param opts Activate focus trap options
+   */
+  activate: (opts?: ActivateOptions) => void
+  /**
+   * Deactivate the focus trap
+   *
+   * @see https://github.com/focus-trap/focus-trap#trapdeactivatedeactivateoptions
+   * @param opts Deactivate focus trap options
+   */
+  deactivate: (opts?: DeactivateOptions) => void
+  /**
+   * Pause the focus trap
+   *
+   * @see https://github.com/focus-trap/focus-trap#trappause
+   */
+  pause: Fn
+  /**
+   * Unpauses the focus trap
+   *
+   * @see https://github.com/focus-trap/focus-trap#trapunpause
+   */
+  unpause: Fn
+}
+/**
+ * Reactive focus-trap
+ *
+ * @see https://vueuse.org/useFocusTrap
+ */
+export declare function useFocusTrap(
+  target: MaybeRefOrGetter<
+    Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>
+  >,
+  options?: UseFocusTrapOptions,
+): UseFocusTrapReturn
+```

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

@@ -0,0 +1,57 @@
+---
+category: Sensors
+---
+
+# useFocusWithin
+
+Reactive utility to track if an element or one of its decendants has focus. It is meant to match the behavior of the `:focus-within` CSS pseudo-class. A common use case would be on a form element to see if any of its inputs currently have focus.
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useFocusWithin } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+const target = ref()
+const { focused } = useFocusWithin(target)
+
+watch(focused, (focused) => {
+  if (focused)
+    console.log('Target contains the focused element')
+  else
+    console.log('Target does NOT contain the focused element')
+})
+</script>
+
+<template>
+  <form ref="target">
+    <input type="text" placeholder="First Name">
+    <input type="text" placeholder="Last Name">
+    <input type="text" placeholder="Email">
+    <input type="text" placeholder="Password">
+  </form>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseFocusWithinReturn {
+  /**
+   * True if the element or any of its descendants are focused
+   */
+  focused: ComputedRef<boolean>
+}
+/**
+ * Track if focus is contained within the target element
+ *
+ * @see https://vueuse.org/useFocusWithin
+ * @param target The target element to track
+ * @param options Focus within options
+ */
+export declare function useFocusWithin(
+  target: MaybeElementRef,
+  options?: ConfigurableWindow,
+): UseFocusWithinReturn
+```