aico-cli 2.1.7 → 2.1.23

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

@@ -0,0 +1,51 @@
+---
+category: Utilities
+related: reactify
+---
+
+# createUnrefFn
+
+Make a plain function accepting ref and raw values as arguments.
+Returns the same value the unconverted function returns, with proper typing.
+
+::: tip
+Make sure you're using the right tool for the job. Using `reactify`
+might be more pertinent in some cases where you want to evaluate the function on each changes of it's arguments.
+:::
+
+## Usage
+
+```ts
+import { createUnrefFn } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const url = shallowRef('https://httpbin.org/post')
+const data = shallowRef({ foo: 'bar' })
+
+function post(url, data) {
+  return fetch(url, { data })
+}
+const unrefPost = createUnrefFn(post)
+
+post(url, data) /* ❌ Will throw an error because the arguments are refs */
+unrefPost(url, data) /* ✔️ Will Work because the arguments will be auto unref */
+```
+
+## Type Declarations
+
+```ts
+export type UnrefFn<T> = T extends (...args: infer A) => infer R
+  ? (
+      ...args: {
+        [K in keyof A]: MaybeRef<A[K]>
+      }
+    ) => R
+  : never
+/**
+ * Make a plain function accepting ref and raw values as arguments.
+ * Returns the same value the unconverted function returns, with proper typing.
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createUnrefFn<T extends Function>(fn: T): UnrefFn<T>
+```

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

@@ -0,0 +1,76 @@
+---
+category: Reactivity
+---
+
+# extendRef
+
+Add extra attributes to Ref.
+
+## Usage
+
+> Please note the extra attribute will not be accessible in Vue's template.
+
+```ts
+import { extendRef } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const myRef = shallowRef('content')
+
+const extended = extendRef(myRef, { foo: 'extra data' })
+
+extended.value === 'content'
+extended.foo === 'extra data'
+```
+
+Refs will be unwrapped and be reactive
+
+```ts
+import { extendRef } from '@vueuse/core'
+// ---cut---
+const myRef = shallowRef('content')
+const extraRef = shallowRef('extra')
+
+const extended = extendRef(myRef, { extra: extraRef })
+
+extended.value === 'content'
+extended.extra === 'extra'
+
+extended.extra = 'new data' // will trigger update
+extraRef.value === 'new data'
+```
+
+## Type Declarations
+
+```ts
+export type ExtendRefReturn<T = any> = Ref<T>
+export interface ExtendRefOptions<Unwrap extends boolean = boolean> {
+  /**
+   * Is the extends properties enumerable
+   *
+   * @default false
+   */
+  enumerable?: boolean
+  /**
+   * Unwrap for Ref properties
+   *
+   * @default true
+   */
+  unwrap?: Unwrap
+}
+/**
+ * Overload 1: Unwrap set to false
+ */
+export declare function extendRef<
+  R extends Ref<any>,
+  Extend extends object,
+  Options extends ExtendRefOptions<false>,
+>(ref: R, extend: Extend, options?: Options): ShallowUnwrapRef<Extend> & R
+/**
+ * Overload 2: Unwrap unset or set to true
+ */
+export declare function extendRef<
+  R extends Ref<any>,
+  Extend extends object,
+  Options extends ExtendRefOptions,
+>(ref: R, extend: Extend, options?: Options): Extend & R
+```

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

@@ -0,0 +1,48 @@
+---
+category: '@RxJS'
+---
+
+# from / fromEvent
+
+Wrappers around RxJS's [`from()`](https://rxjs.dev/api/index/function/from) and [`fromEvent()`](https://rxjs.dev/api/index/function/fromEvent) to allow them to accept `ref`s.
+
+## Usage
+
+<!-- TODO: import rxjs error if enable twoslash -->
+
+```ts no-twoslash
+import { from, fromEvent, toObserver, useSubscription } from '@vueuse/rxjs'
+import { interval } from 'rxjs'
+import { map, mapTo, takeUntil, withLatestFrom } from 'rxjs/operators'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const count = shallowRef(0)
+const button = useTemplateRef('buttonRef')
+
+useSubscription(
+  interval(1000)
+    .pipe(
+      mapTo(1),
+      takeUntil(fromEvent(button, 'click')),
+      withLatestFrom(from(count, {
+        immediate: true,
+        deep: false,
+      })),
+      map(([curr, total]) => curr + total),
+    )
+    .subscribe(toObserver(count)), // same as ).subscribe(val => (count.value = val))
+)
+```
+
+## Type Declarations
+
+```ts
+export declare function from<T>(
+  value: ObservableInput<T> | Ref<T>,
+  watchOptions?: WatchOptions,
+): Observable<T>
+export declare function fromEvent<T extends HTMLElement | null>(
+  value: MaybeRef<T>,
+  event: string,
+): Observable<Event>
+```

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

@@ -0,0 +1,30 @@
+---
+category: Utilities
+---
+
+# get
+
+Shorthand for accessing `ref.value`
+
+## Usage
+
+```ts
+import { get } from '@vueuse/core'
+
+const a = ref(42)
+
+console.log(get(a)) // 42
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Shorthand for accessing `ref.value`
+ */
+export declare function get<T>(ref: MaybeRef<T>): T
+export declare function get<T, K extends keyof T>(
+  ref: MaybeRef<T>,
+  key: K,
+): T[K]
+```

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

@@ -0,0 +1,35 @@
+---
+category: State
+---
+
+# injectLocal
+
+Extended `inject` with ability to call `provideLocal` to provide the value in the same component.
+
+## Usage
+
+```vue
+<script setup>
+import { injectLocal, provideLocal } from '@vueuse/core'
+
+provideLocal('MyInjectionKey', 1)
+const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
+</script>
+```
+
+## Type Declarations
+
+```ts
+/**
+ * On the basis of `inject`, it is allowed to directly call inject to obtain the value after call provide in the same component.
+ *
+ * @example
+ * ```ts
+ * injectLocal('MyInjectionKey', 1)
+ * const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
+ * ```
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare const injectLocal: typeof inject
+```

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

@@ -0,0 +1,31 @@
+---
+category: Utilities
+---
+
+# isDefined
+
+Non-nullish checking type guard for Ref.
+
+## Usage
+
+```ts
+import { isDefined } from '@vueuse/core'
+
+const example = ref(Math.random() ? 'example' : undefined) // Ref<string | undefined>
+
+if (isDefined(example))
+  example // Ref<string>
+```
+
+## Type Declarations
+
+```ts
+export type IsDefinedReturn = boolean
+export declare function isDefined<T>(
+  v: ComputedRef<T>,
+): v is ComputedRef<Exclude<T, null | undefined>>
+export declare function isDefined<T>(
+  v: Ref<T>,
+): v is Ref<Exclude<T, null | undefined>>
+export declare function isDefined<T>(v: T): v is Exclude<T, null | undefined>
+```

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

@@ -0,0 +1,40 @@
+---
+category: '@Math'
+alias: and
+related: logicNot, logicOr
+---
+
+# logicAnd
+
+`AND` condition for refs.
+
+## Usage
+
+```ts
+import { whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
+
+const a = ref(true)
+const b = ref(false)
+
+whenever(logicAnd(a, b), () => {
+  console.log('both a and b are now truthy!')
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * `AND` conditions for refs.
+ *
+ * @see https://vueuse.org/logicAnd
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function logicAnd(
+  ...args: MaybeRefOrGetter<any>[]
+): ComputedRef<boolean>
+/** @deprecated use `logicAnd` instead */
+export declare const and: typeof logicAnd
+```

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

@@ -0,0 +1,36 @@
+---
+category: '@Math'
+alias: not
+---
+
+# logicNot
+
+`NOT` condition for ref.
+
+## Usage
+
+```ts
+import { whenever } from '@vueuse/core'
+import { logicNot } from '@vueuse/math'
+
+const a = ref(true)
+
+whenever(logicNot(a), () => {
+  console.log('a is now falsy!')
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * `NOT` conditions for refs.
+ *
+ * @see https://vueuse.org/logicNot
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function logicNot(v: MaybeRefOrGetter<any>): ComputedRef<boolean>
+/** @deprecated use `logicNot` instead */
+export declare const not: typeof logicNot
+```

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

@@ -0,0 +1,40 @@
+---
+category: '@Math'
+alias: or
+related: logicAnd, logicNot
+---
+
+# logicOr
+
+`OR` conditions for refs.
+
+## Usage
+
+```ts
+import { whenever } from '@vueuse/core'
+import { logicOr } from '@vueuse/math'
+
+const a = ref(true)
+const b = ref(false)
+
+whenever(logicOr(a, b), () => {
+  console.log('either a or b is truthy!')
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * `OR` conditions for refs.
+ *
+ * @see https://vueuse.org/logicOr
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function logicOr(
+  ...args: MaybeRefOrGetter<any>[]
+): ComputedRef<boolean>
+/** @deprecated use `logicOr` instead */
+export declare const or: typeof logicOr
+```

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

@@ -0,0 +1,41 @@
+---
+category: Utilities
+---
+
+# makeDestructurable
+
+Make isomorphic destructurable for object and array at the same time. See [this blog](https://antfu.me/posts/destructuring-with-object-or-array/) for more details.
+
+## Usage
+
+TypeScript Example:
+
+```ts twoslash include main
+import { makeDestructurable } from '@vueuse/core'
+
+const foo = { name: 'foo' }
+const bar = 1024
+
+const obj = makeDestructurable(
+  { foo, bar } as const,
+  [foo, bar] as const,
+)
+```
+
+Usage:
+
+```ts twoslash
+// @include: main
+// ---cut---
+let { foo, bar } = obj
+let [foo, bar] = obj
+```
+
+## Type Declarations
+
+```ts
+export declare function makeDestructurable<
+  T extends Record<string, unknown>,
+  A extends readonly any[],
+>(obj: T, arr: A): T & A
+```

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

@@ -0,0 +1,187 @@
+---
+category: Sensors
+---
+
+# onClickOutside
+
+Listen for clicks outside of an element. Useful for modal or dropdown.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+
+onClickOutside(target, event => console.log(event))
+</script>
+
+<template>
+  <div ref="target">
+    Hello world
+  </div>
+  <div>Outside element</div>
+</template>
+```
+
+If you need more control over triggering the handler, you can use the `controls` option.
+
+```ts
+const { cancel, trigger } = onClickOutside(
+  modalRef,
+  (event) => {
+    modal.value = false
+  },
+  { controls: true },
+)
+
+useEventListener('pointermove', (e) => {
+  cancel()
+  // or
+  trigger(e)
+})
+```
+
+If you want to ignore certain elements, you can use the `ignore` option. Provide the elements to ignore as an array of Refs or CSS Selectors.
+
+```ts
+const ignoreElRef = useTemplateRef('ignoreEl')
+const ignoreElSelector = '.ignore-el'
+
+onClickOutside(
+  target,
+  event => console.log(event),
+  { ignore: [ignoreElRef, ignoreElSelector] },
+)
+```
+
+## Component Usage
+
+```vue
+<template>
+  <OnClickOutside :options="{ ignore: [/* ... */] }" @trigger="count++">
+    <div>
+      Click Outside of Me
+    </div>
+  </OnClickOutside>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { shallowRef } from 'vue'
+
+const modal = shallowRef(false)
+function closeModal() {
+  modal.value = false
+}
+</script>
+
+<template>
+  <button @click="modal = true">
+    Open Modal
+  </button>
+  <div v-if="modal" v-on-click-outside="closeModal">
+    Hello World
+  </div>
+</template>
+```
+
+You can also set the handler as an array to set the configuration items of the instruction.
+
+```vue
+<script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const modal = shallowRef(false)
+
+const ignoreElRef = useTemplateRef('ignoreEl')
+
+const onClickOutsideHandler = [
+  (ev) => {
+    console.log(ev)
+    modal.value = false
+  },
+  { ignore: [ignoreElRef] },
+]
+</script>
+
+<template>
+  <button @click="modal = true">
+    Open Modal
+  </button>
+
+  <div ref="ignoreElRef">
+    click outside ignore element
+  </div>
+
+  <div v-if="modal" v-on-click-outside="onClickOutsideHandler">
+    Hello World
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface OnClickOutsideOptions<Controls extends boolean = false>
+  extends ConfigurableWindow {
+  /**
+   * List of elements that should not trigger the event,
+   * provided as Refs or CSS Selectors.
+   */
+  ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]>
+  /**
+   * Use capturing phase for internal event listener.
+   * @default true
+   */
+  capture?: boolean
+  /**
+   * Run handler function if focus moves to an iframe.
+   * @default false
+   */
+  detectIframe?: boolean
+  /**
+   * Use controls to cancel/trigger listener.
+   * @default false
+   */
+  controls?: Controls
+}
+export type OnClickOutsideHandler<
+  T extends OnClickOutsideOptions<boolean> = OnClickOutsideOptions,
+> = (
+  event:
+    | (T["detectIframe"] extends true ? FocusEvent : never)
+    | (T["controls"] extends true ? Event : never)
+    | PointerEvent,
+) => void
+interface OnClickOutsideControlsReturn {
+  stop: Fn
+  cancel: Fn
+  trigger: (event: Event) => void
+}
+/**
+ * Listen for clicks outside of an element.
+ *
+ * @see https://vueuse.org/onClickOutside
+ * @param target
+ * @param handler
+ * @param options
+ */
+export declare function onClickOutside<T extends OnClickOutsideOptions>(
+  target: MaybeComputedElementRef,
+  handler: OnClickOutsideHandler<T>,
+  options?: T,
+): Fn
+export declare function onClickOutside<T extends OnClickOutsideOptions<true>>(
+  target: MaybeComputedElementRef,
+  handler: OnClickOutsideHandler<T>,
+  options: T,
+): OnClickOutsideControlsReturn
+```

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

@@ -0,0 +1,64 @@
+---
+category: Sensors
+---
+
+# onElementRemoval
+
+Fires when the element or any element containing it is removed.
+
+## Usage
+
+```vue {13}
+<script setup lang="ts">
+import { onElementRemoval } from '@vueuse/core'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const btnRef = useTemplateRef('btn')
+const btnState = shallowRef(true)
+const removedCount = shallowRef(0)
+
+function btnOnClick() {
+  btnState.value = !btnState.value
+}
+
+onElementRemoval(btnRef, () => ++removedCount.value)
+</script>
+
+<template>
+  <button
+    v-if="btnState"
+    @click="btnOnClick"
+  >
+    recreate me
+  </button>
+  <button
+    v-else
+    ref="btnRef"
+    @click="btnOnClick"
+  >
+    remove me
+  </button>
+  <b>removed times: {{ removedCount }}</b>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface OnElementRemovalOptions
+  extends ConfigurableWindow,
+    ConfigurableDocumentOrShadowRoot,
+    WatchOptionsBase {}
+/**
+ * Fires when the element or any element containing it is removed.
+ *
+ * @param target
+ * @param callback
+ * @param options
+ */
+export declare function onElementRemoval(
+  target: MaybeElementRef,
+  callback: (mutationRecords: MutationRecord[]) => void,
+  options?: OnElementRemovalOptions,
+): Fn
+```