aico-cli 2.1.7 → 2.1.23

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

@@ -0,0 +1,91 @@
+---
+category: Utilities
+---
+
+# useCloned
+
+Reactive clone of a ref. By default, it use `JSON.parse(JSON.stringify())` to do the clone.
+
+## Usage
+
+```ts
+import { useCloned } from '@vueuse/core'
+
+const original = ref({ key: 'value' })
+
+const { cloned } = useCloned(original)
+
+original.value.key = 'some new value'
+
+console.log(cloned.value.key) // 'value'
+```
+
+## Manual cloning
+
+```ts
+import { useCloned } from '@vueuse/core'
+
+const original = ref({ key: 'value' })
+
+const { cloned, sync } = useCloned(original, { manual: true })
+
+original.value.key = 'manual'
+
+console.log(cloned.value.key) // 'value'
+
+sync()
+
+console.log(cloned.value.key)// 'manual'
+```
+
+## Custom Clone Function
+
+Using [`klona`](https://www.npmjs.com/package/klona) for example:
+
+```ts
+import { useCloned } from '@vueuse/core'
+import { klona } from 'klona'
+
+const original = ref({ key: 'value' })
+
+const { cloned, isModified, sync } = useCloned(original, { clone: klona })
+```
+
+## Type Declarations
+
+```ts
+export interface UseClonedOptions<T = any> extends WatchOptions {
+  /**
+   * Custom clone function.
+   *
+   * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
+   */
+  clone?: (source: T) => T
+  /**
+   * Manually sync the ref
+   *
+   * @default false
+   */
+  manual?: boolean
+}
+export interface UseClonedReturn<T> {
+  /**
+   * Cloned ref
+   */
+  cloned: Ref<T>
+  /**
+   * Ref indicates whether the cloned data is modified
+   */
+  isModified: Ref<boolean>
+  /**
+   * Sync cloned data with source manually
+   */
+  sync: () => void
+}
+export type CloneFn<F, T = F> = (x: F) => T
+export declare function cloneFnJSON<T>(source: T): T
+export declare function useCloned<T>(
+  source: MaybeRefOrGetter<T>,
+  options?: UseClonedOptions,
+): UseClonedReturn<T>
+```

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

@@ -0,0 +1,171 @@
+---
+category: Browser
+related:
+  - useDark
+  - usePreferredDark
+  - useStorage
+---
+
+# useColorMode
+
+Reactive color mode (dark / light / customs) with auto data persistence.
+
+## Basic Usage
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode() // Ref<'dark' | 'light'>
+```
+
+By default, it will match with users' browser preference using `usePreferredDark` (a.k.a `auto` mode). When reading the ref, it will by default return the current color mode (`dark`, `light` or your custom modes). The `auto` mode can be included in the returned modes by enabling the `emitAuto` option. When writing to the ref, it will trigger DOM updates and persist the color mode to local storage (or your custom storage). You can pass `auto` to set back to auto mode.
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
+// ---cut---
+mode.value // 'dark' | 'light'
+
+mode.value = 'dark' // change to dark mode and persist
+
+mode.value = 'auto' // change to auto mode
+```
+
+## Config
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode({
+  attribute: 'theme',
+  modes: {
+    // custom colors
+    dim: 'dim',
+    cafe: 'cafe',
+  },
+}) // Ref<'dark' | 'light' | 'dim' | 'cafe'>
+```
+
+## Advanced Usage
+
+You can also explicit access to the system preference and storaged user override mode.
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const { system, store } = useColorMode()
+
+system.value // 'dark' | 'light'
+store.value // 'dark' | 'light' | 'auto'
+
+const myColorMode = computed(() => store.value === 'auto' ? system.value : store.value)
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseColorMode v-slot="color">
+    <button @click="color.mode = color.mode === 'dark' ? 'light' : 'dark'">
+      Mode {{ color.mode }}
+    </button>
+  </UseColorMode>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type BasicColorMode = "light" | "dark"
+export type BasicColorSchema = BasicColorMode | "auto"
+export interface UseColorModeOptions<T extends string = BasicColorMode>
+  extends UseStorageOptions<T | BasicColorMode> {
+  /**
+   * CSS Selector for the target element applying to
+   *
+   * @default 'html'
+   */
+  selector?: string | MaybeElementRef
+  /**
+   * HTML attribute applying the target element
+   *
+   * @default 'class'
+   */
+  attribute?: string
+  /**
+   * The initial color mode
+   *
+   * @default 'auto'
+   */
+  initialValue?: MaybeRefOrGetter<T | BasicColorSchema>
+  /**
+   * Prefix when adding value to the attribute
+   */
+  modes?: Partial<Record<T | BasicColorSchema, string>>
+  /**
+   * A custom handler for handle the updates.
+   * When specified, the default behavior will be overridden.
+   *
+   * @default undefined
+   */
+  onChanged?: (
+    mode: T | BasicColorMode,
+    defaultHandler: (mode: T | BasicColorMode) => void,
+  ) => void
+  /**
+   * Custom storage ref
+   *
+   * When provided, `useStorage` will be skipped
+   */
+  storageRef?: Ref<T | BasicColorSchema>
+  /**
+   * Key to persist the data into localStorage/sessionStorage.
+   *
+   * Pass `null` to disable persistence
+   *
+   * @default 'vueuse-color-scheme'
+   */
+  storageKey?: string | null
+  /**
+   * Storage object, can be localStorage or sessionStorage
+   *
+   * @default localStorage
+   */
+  storage?: StorageLike
+  /**
+   * Emit `auto` mode from state
+   *
+   * When set to `true`, preferred mode won't be translated into `light` or `dark`.
+   * This is useful when the fact that `auto` mode was selected needs to be known.
+   *
+   * @default undefined
+   * @deprecated use `store.value` when `auto` mode needs to be known
+   * @see https://vueuse.org/core/useColorMode/#advanced-usage
+   */
+  emitAuto?: boolean
+  /**
+   * Disable transition on switch
+   *
+   * @see https://paco.me/writing/disable-theme-transitions
+   * @default true
+   */
+  disableTransition?: boolean
+}
+export type UseColorModeReturn<T extends string = BasicColorMode> = Ref<
+  T | BasicColorSchema
+> & {
+  store: Ref<T | BasicColorSchema>
+  system: ComputedRef<BasicColorMode>
+  state: ComputedRef<T | BasicColorMode>
+}
+/**
+ * Reactive color mode with auto data persistence.
+ *
+ * @see https://vueuse.org/useColorMode
+ * @param options
+ */
+export declare function useColorMode<T extends string = BasicColorMode>(
+  options?: UseColorModeOptions<T>,
+): UseColorModeReturn<T>
+```

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

@@ -0,0 +1,159 @@
+---
+category: Utilities
+---
+
+# useConfirmDialog
+
+Creates event hooks to support modals and confirmation dialog chains.
+
+Functions can be used on the template, and hooks are a handy skeleton for the business logic of modals dialog or other actions that require user confirmation.
+
+## Functions and hooks
+
+- `reveal()` - triggers `onReveal` hook and sets `revealed.value` to `true`. Returns promise that resolves by `confirm()` or `cancel()`.
+- `confirm()` - sets `isRevealed.value` to `false` and triggers `onConfirm` hook.
+- `cancel()` - sets `isRevealed.value` to `false` and triggers `onCancel` hook.
+
+## Basic Usage
+
+### Using hooks
+
+```vue
+<script setup lang="ts">
+import { useConfirmDialog } from '@vueuse/core'
+
+const { isRevealed, reveal, confirm, cancel, onReveal, onConfirm, onCancel }
+  = useConfirmDialog()
+</script>
+
+<template>
+  <button @click="reveal">
+    Reveal Modal
+  </button>
+
+  <teleport to="body">
+    <div v-if="isRevealed" class="modal-bg">
+      <div class="modal">
+        <h2>Confirm?</h2>
+        <button @click="confirm">
+          Yes
+        </button>
+        <button @click="cancel">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </teleport>
+</template>
+```
+
+### Promise
+
+If you prefer working with promises:
+
+```vue
+<script setup lang="ts">
+import { useConfirmDialog } from '@vueuse/core'
+
+const {
+  isRevealed,
+  reveal,
+  confirm,
+  cancel,
+} = useConfirmDialog()
+
+async function openDialog() {
+  const { data, isCanceled } = await reveal()
+  if (!isCanceled)
+    console.log(data)
+}
+</script>
+
+<template>
+  <button @click="openDialog">
+    Show Modal
+  </button>
+
+  <teleport to="body">
+    <div v-if="isRevealed" class="modal-layout">
+      <div class="modal">
+        <h2>Confirm?</h2>
+        <button @click="confirm(true)">
+          Yes
+        </button>
+        <button @click="confirm(false)">
+          No
+        </button>
+      </div>
+    </div>
+  </teleport>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type UseConfirmDialogRevealResult<C, D> =
+  | {
+      data?: C
+      isCanceled: false
+    }
+  | {
+      data?: D
+      isCanceled: true
+    }
+export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
+  /**
+   * Revealing state
+   */
+  isRevealed: ComputedRef<boolean>
+  /**
+   * Opens the dialog.
+   * Create promise and return it. Triggers `onReveal` hook.
+   */
+  reveal: (
+    data?: RevealData,
+  ) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>
+  /**
+   * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
+   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
+   * Can accept any data and to pass it to `onConfirm` hook.
+   */
+  confirm: (data?: ConfirmData) => void
+  /**
+   * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
+   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
+   * Can accept any data and to pass it to `onCancel` hook.
+   */
+  cancel: (data?: CancelData) => void
+  /**
+   * Event Hook to be triggered right before dialog creating.
+   */
+  onReveal: EventHookOn<RevealData>
+  /**
+   * Event Hook to be called on `confirm()`.
+   * Gets data object from `confirm` function.
+   */
+  onConfirm: EventHookOn<ConfirmData>
+  /**
+   * Event Hook to be called on `cancel()`.
+   * Gets data object from `cancel` function.
+   */
+  onCancel: EventHookOn<CancelData>
+}
+/**
+ * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
+ *
+ * @see https://vueuse.org/useConfirmDialog/
+ * @param revealed `boolean` `ref` that handles a modal window
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useConfirmDialog<
+  RevealData = any,
+  ConfirmData = any,
+  CancelData = any,
+>(
+  revealed?: ShallowRef<boolean>,
+): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
+```

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

@@ -0,0 +1,162 @@
+---
+category: '@Integrations'
+---
+
+# useCookies
+
+Wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie).
+
+::: tip
+When using with Nuxt 3, this functions will **NOT** be auto imported in favor of Nuxt's built-in [`useCookie()`](https://v3.nuxtjs.org/api/composables/use-cookie). Use explicit import if you want to use the function from VueUse.
+:::
+
+## Install
+
+```bash
+npm i universal-cookie@^7
+```
+
+## Usage
+
+### Common usage
+
+```vue
+<script setup lang="ts">
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const cookies = useCookies(['locale'])
+</script>
+
+<template>
+  <div>
+    <strong>locale</strong>: {{ cookies.get('locale') }}
+    <hr>
+    <pre>{{ cookies.getAll() }}</pre>
+    <button @click="cookies.set('locale', 'ru-RU')">
+      Russian
+    </button>
+    <button @click="cookies.set('locale', 'en-US')">
+      English
+    </button>
+  </div>
+</template>
+```
+
+## Options
+
+Access and modify cookies using vue composition-api.
+
+> By default, you should use it inside `setup()`, but this function also works anywhere else.
+
+```ts
+import { useCookies } from '@vueuse/integrations/useCookies'
+// ---cut---
+const {
+  get,
+  getAll,
+  set,
+  remove,
+  addChangeListener,
+  removeChangeListener
+} = useCookies(['cookie-name'], {
+  doNotParse: false,
+  autoUpdateDependencies: false
+})
+```
+
+### `dependencies` (optional)
+
+Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.
+
+### `options` (optional)
+
+- `doNotParse` (boolean = false): do not convert the cookie into an object no matter what. **Passed as default value to `get`/`getAll` methods.**
+- `autoUpdateDependencies` (boolean = false): automatically add cookie names ever provided to `get` method. If **true** then you don't need to care about provided `dependencies`.
+
+### `cookies` (optional)
+
+Let you provide a `universal-cookie` instance (creates a new instance by default)
+
+> Info about methods available in the [universal-cookie api docs](https://www.npmjs.com/package/universal-cookie#api---cookies-class)
+
+## `createCookies([req])`
+
+Create a `universal-cookie` instance using request (default is window.document.cookie) and returns `useCookies` function with provided universal-cookie instance
+
+- req (object): Node's [http.IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage) request object
+
+## Type Declarations
+
+```ts
+/**
+ * Creates a new {@link useCookies} function
+ * @param req - incoming http request (for SSR)
+ * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
+ * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
+ */
+export declare function createCookies(req?: IncomingMessage): (
+  dependencies?: string[] | null,
+  {
+    doNotParse,
+    autoUpdateDependencies,
+  }?: {
+    doNotParse?: boolean | undefined
+    autoUpdateDependencies?: boolean | undefined
+  },
+) => {
+  /**
+   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+   */
+  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
+  /**
+   * Reactive get all cookies
+   */
+  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
+  set: (
+    name: string,
+    value: any,
+    options?: CookieSetOptions | undefined,
+  ) => void
+  remove: (name: string, options?: CookieSetOptions | undefined) => void
+  addChangeListener: (callback: CookieChangeListener) => void
+  removeChangeListener: (callback: CookieChangeListener) => void
+}
+/**
+ * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
+ * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
+ * @param options
+ * @param options.doNotParse - don't try parse value as JSON
+ * @param options.autoUpdateDependencies - automatically update watching dependencies
+ * @param cookies - universal-cookie instance
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useCookies(
+  dependencies?: string[] | null,
+  {
+    doNotParse,
+    autoUpdateDependencies,
+  }?: {
+    doNotParse?: boolean | undefined
+    autoUpdateDependencies?: boolean | undefined
+  },
+  cookies?: Cookie,
+): {
+  /**
+   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+   */
+  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
+  /**
+   * Reactive get all cookies
+   */
+  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
+  set: (
+    name: string,
+    value: any,
+    options?: CookieSetOptions | undefined,
+  ) => void
+  remove: (name: string, options?: CookieSetOptions | undefined) => void
+  addChangeListener: (callback: CookieChangeListener) => void
+  removeChangeListener: (callback: CookieChangeListener) => void
+}
+```

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

@@ -0,0 +1,102 @@
+---
+category: Time
+---
+
+# useCountdown
+
+Wrapper for `useIntervalFn` that provides a countdown timer.
+
+## Usage
+
+```ts
+import { useCountdown } from '@vueuse/core'
+
+const countdownSeconds = 5
+const { remaining, start, stop, pause, resume } = useCountdown(countdownSeconds, {
+  onComplete() {
+
+  },
+  onTick() {
+
+  }
+})
+```
+
+You can use a `ref` to change the initial countdown.
+`start()` and `resume()` also accept a new countdown value for the next countdown.
+
+```ts
+import { useCountdown } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const countdown = shallowRef(5)
+const { start, reset } = useCountdown(countdown, {
+})
+
+// change the countdown value
+countdown.value = 10
+
+// start a new countdown with 2 seconds
+start(2)
+
+// reset the countdown to 4, but do not start it
+reset(4)
+
+// start the countdown with the current value of `countdown`
+start()
+```
+
+## Type Declarations
+
+```ts
+export interface UseCountdownOptions {
+  /**
+   *  Interval for the countdown in milliseconds. Default is 1000ms.
+   */
+  interval?: MaybeRefOrGetter<number>
+  /**
+   * Callback function called when the countdown reaches 0.
+   */
+  onComplete?: () => void
+  /**
+   * Callback function called on each tick of the countdown.
+   */
+  onTick?: () => void
+  /**
+   * Start the countdown immediately
+   *
+   * @default false
+   */
+  immediate?: boolean
+}
+export interface UseCountdownReturn extends Pausable {
+  /**
+   * Current countdown value.
+   */
+  remaining: ShallowRef<number>
+  /**
+   * Resets the countdown and repeatsLeft to their initial values.
+   */
+  reset: (countdown?: MaybeRefOrGetter<number>) => void
+  /**
+   * Stops the countdown and resets its state.
+   */
+  stop: () => void
+  /**
+   * Reset the countdown and start it again.
+   */
+  start: (countdown?: MaybeRefOrGetter<number>) => void
+}
+/**
+ * Wrapper for `useIntervalFn` that provides a countdown timer in seconds.
+ *
+ * @param initialCountdown
+ * @param options
+ *
+ * @see https://vueuse.org/useCountdown
+ */
+export declare function useCountdown(
+  initialCountdown: MaybeRefOrGetter<number>,
+  options?: UseCountdownOptions,
+): UseCountdownReturn
+```