devskill 2.0.2

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

@@ -0,0 +1,306 @@
+---
+category: Component
+outline: deep
+---
+
+# createTemplatePromise
+
+Template as Promise. Useful for constructing custom Dialogs, Modals, Toasts, etc.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { createTemplatePromise } from '@vueuse/core'
+
+const TemplatePromise = createTemplatePromise<ReturnType>()
+
+async function open() {
+  const result = await TemplatePromise.start()
+  // button is clicked, result is 'ok'
+}
+</script>
+
+<template>
+  <TemplatePromise v-slot="{ promise, resolve, reject, args }">
+    <!-- your UI -->
+    <button @click="resolve('ok')">
+      OK
+    </button>
+  </TemplatePromise>
+</template>
+```
+
+## Features
+
+- **Programmatic** - call your UI as a promise
+- **Template** - use Vue template to render, not a new DSL
+- **TypeScript** - full type safety via generic type
+- **Renderless** - you take full control of the UI
+- **Transition** - use support Vue transition
+
+This function is migrated from [vue-template-promise](https://github.com/antfu/vue-template-promise)
+
+## Usage
+
+`createTemplatePromise` returns a **Vue Component** that you can directly use in your template with `<script setup>`
+
+```ts twoslash include main
+import { createTemplatePromise } from '@vueuse/core'
+
+const TemplatePromise = createTemplatePromise()
+const MyPromise = createTemplatePromise<boolean>() // with generic type
+```
+
+In template, use `v-slot` to access the promise and resolve functions.
+
+```vue
+<template>
+  <TemplatePromise v-slot="{ promise, resolve, reject, args }">
+    <!-- you can have anything -->
+    <button @click="resolve('ok')">
+      OK
+    </button>
+  </TemplatePromise>
+  <MyPromise v-slot="{ promise, resolve, reject, args }">
+    <!-- another one -->
+  </MyPromise>
+</template>
+```
+
+The slot will not be rendered initially (similar to `v-if="false"`), until you call the `start` method from the component.
+
+```ts
+// @include: main
+// ---cut---
+const result = await TemplatePromise.start()
+```
+
+Once `resolve` or `reject` is called in the template, the promise will be resolved or rejected, returning the value you passed in. Once resolved, the slot will be removed automatically.
+
+### Passing Arguments
+
+You can pass arguments to the `start` with arguments.
+
+```ts twoslash include passing-arguments
+import { createTemplatePromise } from '@vueuse/core'
+
+const TemplatePromise = createTemplatePromise<boolean, [string, number]>()
+```
+
+```ts
+// @include: passing-arguments
+// ---cut---
+const result = await TemplatePromise.start('hello', 123) // Pr
+```
+
+And in the template slot, you can access the arguments via `args` property.
+
+```vue
+<template>
+  <TemplatePromise v-slot="{ args, resolve }">
+    <div>{{ args[0] }}</div>
+    <!-- hello -->
+    <div>{{ args[1] }}</div>
+    <!-- 123 -->
+    <button @click="resolve(true)">
+      OK
+    </button>
+  </TemplatePromise>
+</template>
+```
+
+### Singleton Mode
+
+Use the `singleton` option to ensure only one instance of the promise can be active at a time. If `start` is called while a promise is already active, it will return the existing promise instead of creating a new one.
+
+```ts
+import { createTemplatePromise } from '@vueuse/core'
+
+const TemplatePromise = createTemplatePromise<boolean>({
+  singleton: true,
+})
+
+// These will return the same promise if called in quick succession
+const result1 = TemplatePromise.start()
+const result2 = TemplatePromise.start() // returns the same promise as result1
+```
+
+### Transition
+
+You can use transition to animate the slot.
+
+```vue
+<script setup lang="ts">
+const TemplatePromise = createTemplatePromise<ReturnType>({
+  transition: {
+    name: 'fade',
+    appear: true,
+  },
+})
+</script>
+
+<template>
+  <TemplatePromise v-slot="{ resolve }">
+    <!-- your UI -->
+    <button @click="resolve('ok')">
+      OK
+    </button>
+  </TemplatePromise>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+```
+
+Learn more about [Vue Transition](https://vuejs.org/guide/built-ins/transition.html).
+
+### Slot Props
+
+The slot provides the following props:
+
+| Prop          | Type                                     | Description                                               |
+| ------------- | ---------------------------------------- | --------------------------------------------------------- |
+| `promise`     | `Promise<Return> \| undefined`           | The current promise instance                              |
+| `resolve`     | `(v: Return \| Promise<Return>) => void` | Resolve the promise with a value                          |
+| `reject`      | `(v: any) => void`                       | Reject the promise                                        |
+| `args`        | `Args`                                   | Arguments passed to `start()`                             |
+| `isResolving` | `boolean`                                | `true` when resolving another promise passed to `resolve` |
+| `key`         | `number`                                 | Unique key for list rendering                             |
+
+```vue
+<template>
+  <TemplatePromise v-slot="{ promise, resolve, reject, args, isResolving }">
+    <div v-if="isResolving">
+      Loading...
+    </div>
+    <div v-else>
+      <button @click="resolve('ok')">
+        OK
+      </button>
+      <button @click="reject('cancelled')">
+        Cancel
+      </button>
+    </div>
+  </TemplatePromise>
+</template>
+```
+
+## Motivation
+
+The common approach to call a dialog or a modal programmatically would be like this:
+
+```ts
+const dialog = useDialog()
+const result = await dialog.open({
+  title: 'Hello',
+  content: 'World',
+})
+```
+
+This would work by sending these information to the top-level component and let it render the dialog. However, it limits the flexibility you could express in the UI. For example, you could want the title to be red, or have extra buttons, etc. You would end up with a lot of options like:
+
+```ts
+const result = await dialog.open({
+  title: 'Hello',
+  titleClass: 'text-red',
+  content: 'World',
+  contentClass: 'text-blue text-sm',
+  buttons: [
+    { text: 'OK', class: 'bg-red', onClick: () => {} },
+    { text: 'Cancel', class: 'bg-blue', onClick: () => {} },
+  ],
+  // ...
+})
+```
+
+Even this is not flexible enough. If you want more, you might end up with manual render function.
+
+```ts
+const result = await dialog.open({
+  title: 'Hello',
+  contentSlot: () => h(MyComponent, { content }),
+})
+```
+
+This is like reinventing a new DSL in the script to express the UI template.
+
+So this function allows **expressing the UI in templates instead of scripts**, where it is supposed to be, while still being able to be manipulated programmatically.
+
+## Type Declarations
+
+```ts
+export interface TemplatePromiseProps<Return, Args extends any[] = []> {
+  /**
+   * The promise instance.
+   */
+  promise: Promise<Return> | undefined
+  /**
+   * Resolve the promise.
+   */
+  resolve: (v: Return | Promise<Return>) => void
+  /**
+   * Reject the promise.
+   */
+  reject: (v: any) => void
+  /**
+   * Arguments passed to TemplatePromise.start()
+   */
+  args: Args
+  /**
+   * Indicates if the promise is resolving.
+   * When passing another promise to `resolve`, this will be set to `true` until the promise is resolved.
+   */
+  isResolving: boolean
+  /**
+   * Options passed to createTemplatePromise()
+   */
+  options: TemplatePromiseOptions
+  /**
+   * Unique key for list rendering.
+   */
+  key: number
+}
+export interface TemplatePromiseOptions {
+  /**
+   * Determines if the promise can be called only once at a time.
+   *
+   * @default false
+   */
+  singleton?: boolean
+  /**
+   * Transition props for the promise.
+   */
+  transition?: TransitionGroupProps
+}
+export type TemplatePromise<
+  Return,
+  Args extends any[] = [],
+> = DefineComponent<object> & {
+  new (): {
+    $slots: {
+      default: (_: TemplatePromiseProps<Return, Args>) => any
+    }
+  }
+} & {
+  start: (...args: Args) => Promise<Return>
+}
+/**
+ * Creates a template promise component.
+ *
+ * @see https://vueuse.org/createTemplatePromise
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function createTemplatePromise<Return, Args extends any[] = []>(
+  options?: TemplatePromiseOptions,
+): TemplatePromise<Return, Args>
+```

package/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/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/skills/vueuse-functions/references/from.md

@@ -0,0 +1,80 @@
+---
+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))
+)
+```
+
+## from
+
+The `from` function can accept either a standard RxJS `ObservableInput` or a Vue `ref`. When passed a ref, it creates an Observable that emits whenever the ref's value changes.
+
+### Watch Options
+
+When using `from` with a ref, you can pass Vue's `WatchOptions`:
+
+| Option      | Type                        | Description                        |
+| ----------- | --------------------------- | ---------------------------------- |
+| `immediate` | `boolean`                   | Emit the current value immediately |
+| `deep`      | `boolean`                   | Deeply watch nested objects        |
+| `flush`     | `'pre' \| 'post' \| 'sync'` | Timing of the callback flush       |
+
+## fromEvent
+
+The `fromEvent` function extends RxJS's `fromEvent` to accept a ref to an element. When the ref's value changes (e.g., after the component mounts), it automatically subscribes to the new element.
+
+```ts no-twoslash
+import { fromEvent, useSubscription } from '@vueuse/rxjs'
+import { useTemplateRef } from 'vue'
+
+const button = useTemplateRef('buttonRef')
+
+// Will automatically subscribe when the button element becomes available
+useSubscription(
+  fromEvent(button, 'click').subscribe(() => {
+    console.log('clicked!')
+  })
+)
+```
+
+## 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/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/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/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/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/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
+```