devskill 2.0.2

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

@@ -0,0 +1,235 @@
+---
+category: '@Integrations'
+---
+
+# useSortable
+
+Wrapper for [`sortable`](https://github.com/SortableJS/Sortable).
+
+For more information on what options can be passed, see [`Sortable.options`](https://github.com/SortableJS/Sortable#options) in the `Sortable` documentation.
+
+::: warning
+Currently, `useSortable` only implements drag-and-drop sorting for a single list.
+:::
+
+## Install
+
+```bash
+npm i sortablejs@^1
+```
+
+## Usage
+
+### Use template ref
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+useSortable(el, list)
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in list" :key="item.id">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+```
+
+### Use specifies the selector to operate on
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef, useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+const animation = 200
+
+const { option } = useSortable(el, list, {
+  handle: '.handle',
+  // or option set
+  // animation
+})
+
+// You can use the option method to set and get the option of Sortable
+option('animation', animation)
+// option('animation') // 200
+</script>
+
+<template>
+  <div ref="el">
+    <div v-for="item in list" :key="item.id">
+      <span>{{ item.name }}</span>
+      <span class="handle">*</span>
+    </div>
+  </div>
+</template>
+```
+
+### Use a selector to get the root element
+
+```vue
+<script setup lang="ts">
+import { useSortable } from '@vueuse/integrations/useSortable'
+import { shallowRef } from 'vue'
+
+const list = shallowRef([{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 3, name: 'c' }])
+
+useSortable('#dv', list)
+</script>
+
+<template>
+  <div id="dv">
+    <div v-for="item in list" :key="item.id">
+      <span>{{ item.name }}</span>
+    </div>
+  </div>
+</template>
+```
+
+### Return Values
+
+| Property | Description                                                      |
+| -------- | ---------------------------------------------------------------- |
+| `start`  | Initialize the Sortable instance (called automatically on mount) |
+| `stop`   | Destroy the Sortable instance                                    |
+| `option` | Get or set Sortable options at runtime                           |
+
+```ts
+const { start, stop, option } = useSortable(el, list)
+
+// Stop sorting
+stop()
+
+// Start sorting again
+start()
+
+// Get/set options
+option('animation', 200) // set
+const animation = option('animation') // get
+```
+
+### Watch Element Changes
+
+Use the `watchElement` option to automatically reinitialize Sortable when the element changes (useful with `v-if`).
+
+```ts
+import { useSortable } from '@vueuse/integrations/useSortable'
+
+useSortable(el, list, {
+  watchElement: true, // auto-reinitialize when element changes
+})
+```
+
+### Custom Update Handler
+
+If you want to handle the `onUpdate` yourself, you can pass in `onUpdate` parameters, and we also exposed a function to move the item position.
+
+```ts
+import { moveArrayElement, useSortable } from '@vueuse/integrations/useSortable'
+
+useSortable(el, list, {
+  onUpdate: (e) => {
+    // do something
+    moveArrayElement(list, e.oldIndex, e.newIndex, e)
+    // nextTick required here as moveArrayElement is executed in a microtask
+    // so we need to wait until the next tick until that is finished.
+    nextTick(() => {
+      /* do something */
+    })
+  }
+})
+```
+
+### Helper Functions
+
+The following helper functions are also exported:
+
+| Function                                   | Description                                           |
+| ------------------------------------------ | ----------------------------------------------------- |
+| `moveArrayElement(list, from, to, event?)` | Move an element in an array from one index to another |
+| `insertNodeAt(parent, element, index)`     | Insert a DOM node at a specific index                 |
+| `removeNode(node)`                         | Remove a DOM node from its parent                     |
+
+## Type Declarations
+
+```ts
+export interface UseSortableReturn {
+  /**
+   * start sortable instance
+   */
+  start: () => void
+  /**
+   * destroy sortable instance
+   */
+  stop: () => void
+  /**
+   * Options getter/setter
+   * @param name a Sortable.Options property.
+   * @param value a value.
+   */
+  option: (<K extends keyof Sortable.Options>(
+    name: K,
+    value: Sortable.Options[K],
+  ) => void) &
+    (<K extends keyof Sortable.Options>(name: K) => Sortable.Options[K])
+}
+export interface UseSortableOptions extends Options, ConfigurableDocument {
+  /**
+   * Watch the element reference for changes and automatically reinitialize Sortable
+   * when the element changes.
+   *
+   * When `false` (default), Sortable is only initialized once on mount.
+   * You must manually call `start()` if the element reference changes.
+   *
+   * When `true`, automatically watches the element reference and reinitializes
+   * Sortable whenever it changes (e.g., conditional rendering with v-if).
+   *
+   * @default false
+   */
+  watchElement?: boolean
+}
+export declare function useSortable<T>(
+  selector: string,
+  list: MaybeRef<T[]>,
+  options?: UseSortableOptions,
+): UseSortableReturn
+export declare function useSortable<T>(
+  el: MaybeRefOrGetter<MaybeElement>,
+  list: MaybeRef<T[]>,
+  options?: UseSortableOptions,
+): UseSortableReturn
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+export declare function insertNodeAt(
+  parentElement: Element,
+  element: Element,
+  index: number,
+): void
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+export declare function removeNode(node: Node): void
+export declare function moveArrayElement<T>(
+  list: MaybeRef<T[]>,
+  from: number,
+  to: number,
+  e?: Sortable.SortableEvent | null,
+): void
+```

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

@@ -0,0 +1,90 @@
+---
+category: Array
+---
+
+# useSorted
+
+reactive sort array
+
+## Usage
+
+```ts
+import { useSorted } from '@vueuse/core'
+
+// general sort
+const source = [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
+const sorted = useSorted(source)
+console.log(sorted.value) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+console.log(source) // [10, 3, 5, 7, 2, 1, 8, 6, 9, 4]
+
+// object sort
+const objArr = [{
+  name: 'John',
+  age: 40,
+}, {
+  name: 'Jane',
+  age: 20,
+}, {
+  name: 'Joe',
+  age: 30,
+}, {
+  name: 'Jenny',
+  age: 22,
+}]
+const objSorted = useSorted(objArr, (a, b) => a.age - b.age)
+```
+
+### dirty mode
+
+dirty mode will change the source array.
+
+```ts
+const source = ref([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
+const sorted = useSorted(source, (a, b) => a - b, {
+  dirty: true,
+})
+console.log(source)// output: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
+```
+
+## Type Declarations
+
+```ts
+export type UseSortedCompareFn<T = any> = (a: T, b: T) => number
+export type UseSortedFn<T = any> = (
+  arr: T[],
+  compareFn: UseSortedCompareFn<T>,
+) => T[]
+export interface UseSortedOptions<T = any> {
+  /**
+   * sort algorithm
+   */
+  sortFn?: UseSortedFn<T>
+  /**
+   * compare function
+   */
+  compareFn?: UseSortedCompareFn<T>
+  /**
+   * change the value of the source array
+   * @default false
+   */
+  dirty?: boolean
+}
+/**
+ * reactive sort array
+ *
+ * @see https://vueuse.org/useSorted
+ */
+export declare function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  compareFn?: UseSortedCompareFn<T>,
+): Ref<T[]>
+export declare function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  options?: UseSortedOptions<T>,
+): Ref<T[]>
+export declare function useSorted<T = any>(
+  source: MaybeRefOrGetter<T[]>,
+  compareFn?: UseSortedCompareFn<T>,
+  options?: Omit<UseSortedOptions<T>, "compareFn">,
+): Ref<T[]>
+```

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

@@ -0,0 +1,94 @@
+---
+category: Sensors
+---
+
+# useSpeechRecognition
+
+Reactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition).
+
+> [Can I use?](https://caniuse.com/mdn-api_speechrecognitionevent)
+
+## Usage
+
+```ts
+import { useSpeechRecognition } from '@vueuse/core'
+
+const {
+  isSupported,
+  isListening,
+  isFinal,
+  result,
+  start,
+  stop,
+} = useSpeechRecognition()
+```
+
+### Options
+
+The following shows the default values of the options, they will be directly passed to [SpeechRecognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition).
+
+```ts
+import { useSpeechRecognition } from '@vueuse/core'
+// ---cut---
+useSpeechRecognition({
+  lang: 'en-US',
+  interimResults: true,
+  continuous: true,
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseSpeechRecognitionOptions extends ConfigurableWindow {
+  /**
+   * Controls whether continuous results are returned for each recognition, or only a single result.
+   *
+   * @default true
+   */
+  continuous?: boolean
+  /**
+   * Controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final
+   *
+   * @default true
+   */
+  interimResults?: boolean
+  /**
+   * Language for SpeechRecognition
+   *
+   * @default 'en-US'
+   */
+  lang?: MaybeRefOrGetter<string>
+  /**
+   * A number representing the maximum returned alternatives for each result.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/maxAlternatives
+   * @default 1
+   */
+  maxAlternatives?: number
+}
+/**
+ * Reactive SpeechRecognition.
+ *
+ * @see https://vueuse.org/useSpeechRecognition
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition SpeechRecognition
+ * @param options
+ */
+export declare function useSpeechRecognition(
+  options?: UseSpeechRecognitionOptions,
+): {
+  isSupported: ComputedRef<boolean>
+  isListening: ShallowRef<boolean, boolean>
+  isFinal: ShallowRef<boolean, boolean>
+  recognition: SpeechRecognition | undefined
+  result: ShallowRef<string, string>
+  error: ShallowRef<
+    Error | SpeechRecognitionErrorEvent | undefined,
+    Error | SpeechRecognitionErrorEvent | undefined
+  >
+  toggle: (value?: boolean) => void
+  start: () => void
+  stop: () => void
+}
+export type UseSpeechRecognitionReturn = ReturnType<typeof useSpeechRecognition>
+```

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

@@ -0,0 +1,105 @@
+---
+category: Sensors
+---
+
+# useSpeechSynthesis
+
+Reactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis).
+
+> [Can I use?](https://caniuse.com/mdn-api_speechsynthesis)
+
+## Usage
+
+```ts
+import { useSpeechSynthesis } from '@vueuse/core'
+
+const {
+  isSupported,
+  isPlaying,
+  status,
+  voiceInfo,
+  utterance,
+  error,
+  stop,
+  toggle,
+  speak,
+} = useSpeechSynthesis()
+```
+
+### Options
+
+The following shows the default values of the options, they will be directly passed to [SpeechSynthesis API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis).
+
+```ts
+import { useSpeechSynthesis } from '@vueuse/core'
+// ---cut---
+useSpeechSynthesis({
+  lang: 'en-US',
+  pitch: 1,
+  rate: 1,
+  volume: 1,
+})
+```
+
+## Type Declarations
+
+```ts
+export type UseSpeechSynthesisStatus = "init" | "play" | "pause" | "end"
+export interface UseSpeechSynthesisOptions extends ConfigurableWindow {
+  /**
+   * Language for SpeechSynthesis
+   *
+   * @default 'en-US'
+   */
+  lang?: MaybeRefOrGetter<string>
+  /**
+   * Gets and sets the pitch at which the utterance will be spoken at.
+   *
+   * @default 1
+   */
+  pitch?: MaybeRefOrGetter<SpeechSynthesisUtterance["pitch"]>
+  /**
+   * Gets and sets the speed at which the utterance will be spoken at.
+   *
+   * @default 1
+   */
+  rate?: MaybeRefOrGetter<SpeechSynthesisUtterance["rate"]>
+  /**
+   * Gets and sets the voice that will be used to speak the utterance.
+   */
+  voice?: MaybeRef<SpeechSynthesisVoice>
+  /**
+   * Gets and sets the volume that the utterance will be spoken at.
+   *
+   * @default 1
+   */
+  volume?: MaybeRefOrGetter<SpeechSynthesisUtterance["volume"]>
+  /**
+   * Callback function that is called when the boundary event is triggered.
+   */
+  onBoundary?: (event: SpeechSynthesisEvent) => void
+}
+/**
+ * Reactive SpeechSynthesis.
+ *
+ * @see https://vueuse.org/useSpeechSynthesis
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis SpeechSynthesis
+ */
+export declare function useSpeechSynthesis(
+  text: MaybeRefOrGetter<string>,
+  options?: UseSpeechSynthesisOptions,
+): {
+  isSupported: ComputedRef<boolean>
+  isPlaying: ShallowRef<boolean, boolean>
+  status: ShallowRef<UseSpeechSynthesisStatus, UseSpeechSynthesisStatus>
+  utterance: ComputedRef<SpeechSynthesisUtterance>
+  error: ShallowRef<
+    SpeechSynthesisErrorEvent | undefined,
+    SpeechSynthesisErrorEvent | undefined
+  >
+  stop: () => void
+  toggle: (value?: boolean) => void
+  speak: () => void
+}
+export type UseSpeechSynthesisReturn = ReturnType<typeof useSpeechSynthesis>
+```

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

@@ -0,0 +1,137 @@
+---
+category: Utilities
+---
+
+# useStepper
+
+Provides helpers for building a multi-step wizard interface.
+
+## Usage
+
+### Steps as array
+
+```ts
+import { useStepper } from '@vueuse/core'
+
+const {
+  steps,
+  stepNames,
+  index,
+  current,
+  next,
+  previous,
+  isFirst,
+  isLast,
+  goTo,
+  goToNext,
+  goToPrevious,
+  goBackTo,
+  isNext,
+  isPrevious,
+  isCurrent,
+  isBefore,
+  isAfter,
+} = useStepper([
+  'billing-address',
+  'terms',
+  'payment',
+])
+
+// Access the step through `current`
+console.log(current.value) // 'billing-address'
+```
+
+### Steps as object
+
+```ts
+import { useStepper } from '@vueuse/core'
+
+const {
+  steps,
+  stepNames,
+  index,
+  current,
+  next,
+  previous,
+  isFirst,
+  isLast,
+  goTo,
+  goToNext,
+  goToPrevious,
+  goBackTo,
+  isNext,
+  isPrevious,
+  isCurrent,
+  isBefore,
+  isAfter,
+} = useStepper({
+  'user-information': {
+    title: 'User information',
+  },
+  'billing-address': {
+    title: 'Billing address',
+  },
+  'terms': {
+    title: 'Terms',
+  },
+  'payment': {
+    title: 'Payment',
+  },
+})
+
+// Access the step object through `current`
+console.log(current.value.title) // 'User information'
+```
+
+## Type Declarations
+
+```ts
+export interface UseStepperReturn<StepName, Steps, Step> {
+  /** List of steps. */
+  steps: Readonly<Ref<Steps>>
+  /** List of step names. */
+  stepNames: Readonly<Ref<StepName[]>>
+  /** Index of the current step. */
+  index: Ref<number>
+  /** Current step. */
+  current: ComputedRef<Step>
+  /** Next step, or undefined if the current step is the last one. */
+  next: ComputedRef<StepName | undefined>
+  /** Previous step, or undefined if the current step is the first one. */
+  previous: ComputedRef<StepName | undefined>
+  /** Whether the current step is the first one. */
+  isFirst: ComputedRef<boolean>
+  /** Whether the current step is the last one. */
+  isLast: ComputedRef<boolean>
+  /** Get the step at the specified index. */
+  at: (index: number) => Step | undefined
+  /** Get a step by the specified name. */
+  get: (step: StepName) => Step | undefined
+  /** Go to the specified step. */
+  goTo: (step: StepName) => void
+  /** Go to the next step. Does nothing if the current step is the last one. */
+  goToNext: () => void
+  /** Go to the previous step. Does nothing if the current step is the previous one. */
+  goToPrevious: () => void
+  /** Go back to the given step, only if the current step is after. */
+  goBackTo: (step: StepName) => void
+  /** Checks whether the given step is the next step. */
+  isNext: (step: StepName) => boolean
+  /** Checks whether the given step is the previous step. */
+  isPrevious: (step: StepName) => boolean
+  /** Checks whether the given step is the current step. */
+  isCurrent: (step: StepName) => boolean
+  /** Checks if the current step is before the given step. */
+  isBefore: (step: StepName) => boolean
+  /** Checks if the current step is after the given step. */
+  isAfter: (step: StepName) => boolean
+}
+export declare function useStepper<T extends string | number>(
+  steps: MaybeRef<T[]>,
+  initialStep?: T,
+): UseStepperReturn<T, T[], T>
+export declare function useStepper<T extends Record<string, any>>(
+  steps: MaybeRef<T>,
+  initialStep?: keyof T,
+): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>
+```