devskill 2.0.2

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

@@ -0,0 +1,34 @@
+---
+category: Component
+---
+
+# tryOnMounted
+
+Safe `onMounted`. Call `onMounted()` if it's inside a component lifecycle, if not, just call the function
+
+## Usage
+
+```ts
+import { tryOnMounted } from '@vueuse/core'
+
+tryOnMounted(() => {
+
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Call onMounted() if it's inside a component lifecycle, if not, just call the function
+ *
+ * @param fn
+ * @param sync if set to false, it will run in the nextTick() of Vue
+ * @param target
+ */
+export declare function tryOnMounted(
+  fn: Fn,
+  sync?: boolean,
+  target?: ComponentInternalInstance | null,
+): void
+```

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

@@ -0,0 +1,31 @@
+---
+category: Component
+---
+
+# tryOnScopeDispose
+
+Safe `onScopeDispose`. Call `onScopeDispose()` if it's inside an effect scope lifecycle, if not, do nothing
+
+## Usage
+
+```ts
+import { tryOnScopeDispose } from '@vueuse/core'
+
+tryOnScopeDispose(() => {
+
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
+ *
+ * @param fn
+ */
+export declare function tryOnScopeDispose(
+  fn: Fn,
+  failSilently?: boolean,
+): boolean
+```

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

@@ -0,0 +1,32 @@
+---
+category: Component
+---
+
+# tryOnUnmounted
+
+Safe `onUnmounted`. Call `onUnmounted()` if it's inside a component lifecycle, if not, do nothing
+
+## Usage
+
+```ts
+import { tryOnUnmounted } from '@vueuse/core'
+
+tryOnUnmounted(() => {
+
+})
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Call onUnmounted() if it's inside a component lifecycle, if not, do nothing
+ *
+ * @param fn
+ * @param target
+ */
+export declare function tryOnUnmounted(
+  fn: Fn,
+  target?: ComponentInternalInstance | null,
+): void
+```

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

@@ -0,0 +1,54 @@
+---
+category: Component
+---
+
+# unrefElement
+
+Retrieves the underlying DOM element from a Vue ref or component instance
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { unrefElement } from '@vueuse/core'
+import { onMounted, useTemplateRef } from 'vue'
+
+const div = useTemplateRef('div') // will be bound to the <div> element
+const hello = useTemplateRef('hello') // will be bound to the HelloWorld Component
+
+onMounted(() => {
+  console.log(unrefElement(div)) // the <div> element
+  console.log(unrefElement(hello)) // the root element of the HelloWorld Component
+})
+</script>
+
+<template>
+  <div ref="div" />
+  <HelloWorld ref="hello" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type VueInstance = ComponentPublicInstance
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> =
+  MaybeRefOrGetter<T>
+export type MaybeElement =
+  | HTMLElement
+  | SVGElement
+  | VueInstance
+  | undefined
+  | null
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> =
+  T extends VueInstance ? Exclude<MaybeElement, VueInstance> : T | undefined
+/**
+ * Get the dom element of a ref of element or Vue component instance
+ *
+ * @param elRef
+ */
+export declare function unrefElement<T extends MaybeElement>(
+  elRef: MaybeComputedElementRef<T>,
+): UnRefElementReturn<T>
+```

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

@@ -0,0 +1,161 @@
+---
+category: Watch
+---
+
+# until
+
+Promised one-time watch for changes
+
+## Usage
+
+#### Wait for some async data to be ready
+
+```ts
+import { until, useAsyncState } from '@vueuse/core'
+
+const { state, isReady } = useAsyncState(
+  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
+  {},
+)
+
+;(async () => {
+  await until(isReady).toBe(true)
+
+  console.log(state) // state is now ready!
+})()
+```
+
+#### Wait for custom conditions
+
+> You can use `invoke` to call the async function.
+
+```ts
+import { invoke, until, useCounter } from '@vueuse/core'
+
+const { count } = useCounter()
+
+invoke(async () => {
+  await until(count).toMatch(v => v > 7)
+
+  alert('Counter is now larger than 7!')
+})
+```
+
+#### Timeout
+
+```ts
+import { until } from '@vueuse/core'
+// ---cut---
+// will be resolve until ref.value === true or 1000ms passed
+await until(ref).toBe(true, { timeout: 1000 })
+
+// will throw if timeout
+try {
+  await until(ref).toBe(true, { timeout: 1000, throwOnTimeout: true })
+  // ref.value === true
+}
+catch (e) {
+  // timeout
+}
+```
+
+#### More Examples
+
+```ts
+import { until } from '@vueuse/core'
+// ---cut---
+await until(ref).toBe(true)
+await until(ref).toMatch(v => v > 10 && v < 100)
+await until(ref).changed()
+await until(ref).changedTimes(10)
+await until(ref).toBeTruthy()
+await until(ref).toBeNull()
+
+await until(ref).not.toBeNull()
+await until(ref).not.toBeTruthy()
+```
+
+## Type Declarations
+
+```ts
+export interface UntilToMatchOptions extends ConfigurableFlushSync {
+  /**
+   * Milliseconds timeout for promise to resolve/reject if the when condition does not meet.
+   * 0 for never timed out
+   *
+   * @default 0
+   */
+  timeout?: number
+  /**
+   * Reject the promise when timeout
+   *
+   * @default false
+   */
+  throwOnTimeout?: boolean
+  /**
+   * `deep` option for internal watch
+   *
+   * @default 'false'
+   */
+  deep?: WatchOptions["deep"]
+}
+export interface UntilBaseInstance<T, Not extends boolean = false> {
+  toMatch: (<U extends T = T>(
+    condition: (v: T) => v is U,
+    options?: UntilToMatchOptions,
+  ) => Not extends true ? Promise<Exclude<T, U>> : Promise<U>) &
+    ((
+      condition: (v: T) => boolean,
+      options?: UntilToMatchOptions,
+    ) => Promise<T>)
+  changed: (options?: UntilToMatchOptions) => Promise<T>
+  changedTimes: (n?: number, options?: UntilToMatchOptions) => Promise<T>
+}
+type Falsy = false | void | null | undefined | 0 | 0n | ""
+export interface UntilValueInstance<
+  T,
+  Not extends boolean = false,
+> extends UntilBaseInstance<T, Not> {
+  readonly not: UntilValueInstance<T, Not extends true ? false : true>
+  toBe: <P = T>(
+    value: MaybeRefOrGetter<P>,
+    options?: UntilToMatchOptions,
+  ) => Not extends true ? Promise<T> : Promise<P>
+  toBeTruthy: (
+    options?: UntilToMatchOptions,
+  ) => Not extends true ? Promise<T & Falsy> : Promise<Exclude<T, Falsy>>
+  toBeNull: (
+    options?: UntilToMatchOptions,
+  ) => Not extends true ? Promise<Exclude<T, null>> : Promise<null>
+  toBeUndefined: (
+    options?: UntilToMatchOptions,
+  ) => Not extends true ? Promise<Exclude<T, undefined>> : Promise<undefined>
+  toBeNaN: (options?: UntilToMatchOptions) => Promise<T>
+}
+export interface UntilArrayInstance<T> extends UntilBaseInstance<T> {
+  readonly not: UntilArrayInstance<T>
+  toContains: (
+    value: MaybeRefOrGetter<ElementOf<ShallowUnwrapRef<T>>>,
+    options?: UntilToMatchOptions,
+  ) => Promise<T>
+}
+/**
+ * Promised one-time watch for changes
+ *
+ * @see https://vueuse.org/until
+ * @example
+ * ```
+ * const { count } = useCounter()
+ *
+ * await until(count).toMatch(v => v > 7)
+ *
+ * alert('Counter is now larger than 7!')
+ * ```
+ */
+export declare function until<T extends unknown[]>(
+  r: WatchSource<T> | MaybeRefOrGetter<T>,
+): UntilArrayInstance<T>
+export declare function until<T>(
+  r: WatchSource<T> | MaybeRefOrGetter<T>,
+): UntilValueInstance<T>
+```

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

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

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

@@ -0,0 +1,85 @@
+---
+category: Elements
+---
+
+# useActiveElement
+
+Reactive `document.activeElement`. Returns a shallow ref that updates when focus changes.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useActiveElement } from '@vueuse/core'
+import { watch } from 'vue'
+
+const activeElement = useActiveElement()
+
+watch(activeElement, (el) => {
+  console.log('focus changed to', el)
+})
+</script>
+```
+
+### Shadow DOM Support
+
+By default, `useActiveElement` will traverse into shadow DOM to find the deeply active element. Set `deep: false` to disable this behavior.
+
+```ts
+import { useActiveElement } from '@vueuse/core'
+
+// Only get the shadow host, not the element inside shadow DOM
+const activeElement = useActiveElement({ deep: false })
+```
+
+### Track Element Removal
+
+Set `triggerOnRemoval: true` to update the active element when the currently active element is removed from the DOM. This uses a `MutationObserver` under the hood.
+
+```ts
+import { useActiveElement } from '@vueuse/core'
+
+const activeElement = useActiveElement({ triggerOnRemoval: true })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseActiveElement v-slot="{ element }">
+    Active element is {{ element?.dataset.id }}
+  </UseActiveElement>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseActiveElementOptions
+  extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot {
+  /**
+   * Search active element deeply inside shadow dom
+   *
+   * @default true
+   */
+  deep?: boolean
+  /**
+   * Track active element when it's removed from the DOM
+   * Using a MutationObserver under the hood
+   * @default false
+   */
+  triggerOnRemoval?: boolean
+}
+/**
+ * Reactive `document.activeElement`
+ *
+ * @see https://vueuse.org/useActiveElement
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useActiveElement<T extends HTMLElement>(
+  options?: UseActiveElementOptions,
+): ShallowRef<T | null | undefined, T | null | undefined>
+export type UseActiveElementReturn = ReturnType<typeof useActiveElement>
+```

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

@@ -0,0 +1,181 @@
+---
+category: Animation
+---
+
+# useAnimate
+
+Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+
+## Usage
+
+### Basic Usage
+
+The `useAnimate` function returns the animation instance and control functions.
+
+```vue
+<script setup lang="ts">
+import { useAnimate } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const {
+  isSupported,
+  animate,
+
+  // actions
+  play,
+  pause,
+  reverse,
+  finish,
+  cancel,
+
+  // states
+  pending,
+  playState,
+  replaceState,
+  startTime,
+  currentTime,
+  timeline,
+  playbackRate,
+} = useAnimate(el, { transform: 'rotate(360deg)' }, 1000)
+</script>
+
+<template>
+  <span ref="el" style="display:inline-block">useAnimate</span>
+</template>
+```
+
+### Custom Keyframes
+
+Either an array of keyframe objects, or a keyframe object, or a `ref`. See [Keyframe Formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) for more details.
+
+```ts
+import { useAnimate } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+// ---cut---
+const keyframes = { transform: 'rotate(360deg)' }
+// Or
+const keyframes = [
+  { transform: 'rotate(0deg)' },
+  { transform: 'rotate(360deg)' },
+]
+// Or
+const keyframes = ref([
+  { clipPath: 'circle(20% at 0% 30%)' },
+  { clipPath: 'circle(20% at 50% 80%)' },
+  { clipPath: 'circle(20% at 100% 30%)' },
+])
+
+useAnimate(el, keyframes, 1000)
+```
+
+### Options
+
+The third argument accepts a duration number or an options object with the following additional properties on top of [KeyframeAnimationOptions](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate#parameters):
+
+```ts
+import { useAnimate } from '@vueuse/core'
+
+useAnimate(el, keyframes, {
+  duration: 1000,
+  // Start playing immediately (default: true)
+  immediate: true,
+  // Commit the end styling state to the element (default: false)
+  commitStyles: false,
+  // Persist the animation (default: false)
+  persist: false,
+  // Callback when animation is initialized
+  onReady(animate) {
+    console.log('Animation ready', animate)
+  },
+  // Callback when an error occurs
+  onError(e) {
+    console.error('Animation error', e)
+  },
+})
+```
+
+### Delaying Start
+
+Set `immediate: false` to prevent the animation from starting automatically.
+
+```ts
+import { useAnimate } from '@vueuse/core'
+
+const { play } = useAnimate(el, keyframes, {
+  duration: 1000,
+  immediate: false,
+})
+
+// Start the animation manually
+play()
+```
+
+## Type Declarations
+
+```ts
+export interface UseAnimateOptions
+  extends KeyframeAnimationOptions, ConfigurableWindow {
+  /**
+   * Will automatically run play when `useAnimate` is used
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Whether to commits the end styling state of an animation to the element being animated
+   * In general, you should use `fill` option with this.
+   *
+   * @default false
+   */
+  commitStyles?: boolean
+  /**
+   * Whether to persists the animation
+   *
+   * @default false
+   */
+  persist?: boolean
+  /**
+   * Executed after animation initialization
+   */
+  onReady?: (animate: Animation) => void
+  /**
+   * Callback when error is caught.
+   */
+  onError?: (e: unknown) => void
+}
+export type UseAnimateKeyframes = MaybeRef<
+  Keyframe[] | PropertyIndexedKeyframes | null
+>
+export interface UseAnimateReturn {
+  isSupported: ComputedRef<boolean>
+  animate: ShallowRef<Animation | undefined>
+  play: () => void
+  pause: () => void
+  reverse: () => void
+  finish: () => void
+  cancel: () => void
+  pending: ComputedRef<boolean>
+  playState: ComputedRef<AnimationPlayState>
+  replaceState: ComputedRef<AnimationReplaceState>
+  startTime: WritableComputedRef<CSSNumberish | number | null>
+  currentTime: WritableComputedRef<CSSNumberish | null>
+  timeline: WritableComputedRef<AnimationTimeline | null>
+  playbackRate: WritableComputedRef<number>
+}
+/**
+ * Reactive Web Animations API
+ *
+ * @see https://vueuse.org/useAnimate
+ * @param target
+ * @param keyframes
+ * @param options
+ */
+export declare function useAnimate(
+  target: MaybeComputedElementRef,
+  keyframes: UseAnimateKeyframes,
+  options?: number | UseAnimateOptions,
+): UseAnimateReturn
+```

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

@@ -0,0 +1,84 @@
+---
+category: Array
+---
+
+# useArrayDifference
+
+Reactive get array difference of two arrays.
+
+By default, it returns the difference of the first array from the second array, so call `A \ B`, [Relative Complement](<https://en.wikipedia.org/wiki/Complement_(set_theory)>) of B in A.
+
+You can pass the `symmetric` option to get the [Symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) of two arrays `A △ B`.
+
+## Usage
+
+### Use with reactive array
+
+```ts
+import { useArrayDifference } from '@vueuse/core'
+
+const list1 = ref([0, 1, 2, 3, 4, 5])
+const list2 = ref([4, 5, 6])
+const result = useArrayDifference(list1, list2)
+// result.value: [0, 1, 2, 3]
+list2.value = [0, 1, 2]
+// result.value: [3, 4, 5]
+```
+
+### Use with reactive array and use function comparison
+
+```ts
+import { useArrayDifference } from '@vueuse/core'
+
+const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
+
+const result = useArrayDifference(list1, list2, (value, othVal) => value.id === othVal.id)
+// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }]
+```
+
+### Symmetric Difference
+
+This composable also supports [Symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference) by passing the `symmetric` option.
+
+```ts {10}
+import { useArrayDifference } from '@vueuse/core'
+
+const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
+const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])
+
+const result = useArrayDifference(
+  list1,
+  list2,
+  (value, othVal) => value.id === othVal.id,
+  { symmetric: true }
+)
+// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 6 }]
+```
+
+## Type Declarations
+
+```ts
+export interface UseArrayDifferenceOptions {
+  /**
+   * Returns asymmetric difference
+   *
+   * @see https://en.wikipedia.org/wiki/Symmetric_difference
+   * @default false
+   */
+  symmetric?: boolean
+}
+export type UseArrayDifferenceReturn<T = any> = ComputedRef<T[]>
+export declare function useArrayDifference<T>(
+  list: MaybeRefOrGetter<T[]>,
+  values: MaybeRefOrGetter<T[]>,
+  key?: keyof T,
+  options?: UseArrayDifferenceOptions,
+): UseArrayDifferenceReturn<T>
+export declare function useArrayDifference<T>(
+  list: MaybeRefOrGetter<T[]>,
+  values: MaybeRefOrGetter<T[]>,
+  compareFn?: (value: T, othVal: T) => boolean,
+  options?: UseArrayDifferenceOptions,
+): UseArrayDifferenceReturn<T>
+```