devskill 2.0.2

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

@@ -0,0 +1,325 @@
+---
+category: '@Integrations'
+---
+
+# useAxios
+
+Wrapper for [`axios`](https://github.com/axios/axios).
+
+## Install
+
+```bash
+npm i axios@^1
+```
+
+## Usage
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+const { data, isFinished } = useAxios('/api/posts')
+```
+
+### Return Values
+
+| Property           | Type                         | Description                              |
+| ------------------ | ---------------------------- | ---------------------------------------- |
+| `data`             | `Ref<T>`                     | Response data                            |
+| `response`         | `Ref<AxiosResponse>`         | Full axios response                      |
+| `error`            | `Ref<unknown>`               | Error if request failed                  |
+| `isFinished`       | `Ref<boolean>`               | Request has completed (success or error) |
+| `isLoading`        | `Ref<boolean>`               | Request is in progress                   |
+| `isAborted`        | `Ref<boolean>`               | Request was aborted                      |
+| `abort` / `cancel` | `() => void`                 | Abort the current request                |
+| `execute`          | `(url?, config?) => Promise` | Execute/re-execute the request           |
+
+### With Axios Instance
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+import axios from 'axios'
+
+const instance = axios.create({
+  baseURL: '/api',
+})
+
+const { data, isFinished } = useAxios('/posts', instance)
+```
+
+### With Config Options
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+import axios from 'axios'
+
+const instance = axios.create({
+  baseURL: '/api',
+})
+
+const { data, isFinished } = useAxios('/posts', { method: 'POST' }, instance)
+```
+
+### Manual Execution
+
+When you don't pass a `url`, the request won't fire immediately:
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+const { execute } = useAxios()
+execute(url)
+```
+
+The `execute` function `url` is optional - `url2` will replace `url1`:
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+const { execute } = useAxios(url1, {}, { immediate: false })
+execute(url2)
+```
+
+The `execute` function can accept config only:
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+const { execute } = useAxios(url1, { method: 'GET' }, { immediate: false })
+execute({ params: { key: 1 } })
+execute({ params: { key: 2 } })
+```
+
+### Awaiting Results
+
+The return value is thenable, so you can await it:
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+const { data, isFinished, error } = await useAxios('/api/posts')
+// data is now populated
+```
+
+Or await the execute function:
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+const { execute } = useAxios()
+const result = await execute(url)
+```
+
+### Options
+
+```ts
+const { data } = useAxios('/api/posts', config, instance, {
+  // Execute immediately (default: true if url provided)
+  immediate: true,
+  // Use shallowRef for data (default: true)
+  shallow: true,
+  // Abort previous request on new execute (default: true)
+  abortPrevious: true,
+  // Reset data before executing (default: false)
+  resetOnExecute: false,
+  // Initial data value
+  initialData: [],
+  // Callbacks
+  onSuccess: data => console.log('Success:', data),
+  onError: error => console.error('Error:', error),
+  onFinish: () => console.log('Finished'),
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseAxiosReturn<
+  T,
+  R = AxiosResponse<T>,
+  _D = any,
+  O extends UseAxiosOptions = UseAxiosOptions<T>,
+> {
+  /**
+   * Axios Response
+   */
+  response: ShallowRef<R | undefined>
+  /**
+   * Axios response data
+   */
+  data: O extends UseAxiosOptionsWithInitialData<T>
+    ? Ref<T>
+    : Ref<T | undefined>
+  /**
+   * Indicates if the request has finished
+   */
+  isFinished: Ref<boolean>
+  /**
+   * Indicates if the request is currently loading
+   */
+  isLoading: Ref<boolean>
+  /**
+   * Indicates if the request was canceled
+   */
+  isAborted: Ref<boolean>
+  /**
+   * Any errors that may have occurred
+   */
+  error: ShallowRef<unknown | undefined>
+  /**
+   * Aborts the current request
+   */
+  abort: (message?: string | undefined) => void
+  /**
+   * Alias to `abort`
+   */
+  cancel: (message?: string | undefined) => void
+  /**
+   * Alias to `isAborted`
+   */
+  isCanceled: Ref<boolean>
+}
+export interface StrictUseAxiosReturn<
+  T,
+  R,
+  D,
+  O extends UseAxiosOptions = UseAxiosOptions<T>,
+> extends UseAxiosReturn<T, R, D, O> {
+  /**
+   * Manually call the axios request
+   */
+  execute: (
+    url?: string | AxiosRequestConfig<D>,
+    config?: AxiosRequestConfig<D>,
+  ) => Promise<StrictUseAxiosReturn<T, R, D, O>>
+}
+export interface EasyUseAxiosReturn<T, R, D> extends UseAxiosReturn<T, R, D> {
+  /**
+   * Manually call the axios request
+   */
+  execute: (
+    url: string,
+    config?: AxiosRequestConfig<D>,
+  ) => Promise<EasyUseAxiosReturn<T, R, D>>
+}
+export interface UseAxiosOptionsBase<T = any> {
+  /**
+   * Will automatically run axios request when `useAxios` is used
+   *
+   */
+  immediate?: boolean
+  /**
+   * Use shallowRef.
+   *
+   * @default true
+   */
+  shallow?: boolean
+  /**
+   * Abort previous request when a new request is made.
+   *
+   * @default true
+   */
+  abortPrevious?: boolean
+  /**
+   * Callback when error is caught.
+   */
+  onError?: (e: unknown) => void
+  /**
+   * Callback when success is caught.
+   */
+  onSuccess?: (data: T) => void
+  /**
+   * Sets the state to initialState before executing the promise.
+   */
+  resetOnExecute?: boolean
+  /**
+   * Callback when request is finished.
+   */
+  onFinish?: () => void
+}
+export interface UseAxiosOptionsWithInitialData<
+  T,
+> extends UseAxiosOptionsBase<T> {
+  /**
+   * Initial data
+   */
+  initialData: T
+}
+export type UseAxiosOptions<T = any> =
+  | UseAxiosOptionsBase<T>
+  | UseAxiosOptionsWithInitialData<T>
+export declare function useAxios<
+  T = any,
+  R = AxiosResponse<T>,
+  D = any,
+  O extends UseAxiosOptionsWithInitialData<T> =
+    UseAxiosOptionsWithInitialData<T>,
+>(
+  url: string,
+  config?: AxiosRequestConfig<D>,
+  options?: O,
+): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
+export declare function useAxios<
+  T = any,
+  R = AxiosResponse<T>,
+  D = any,
+  O extends UseAxiosOptionsWithInitialData<T> =
+    UseAxiosOptionsWithInitialData<T>,
+>(
+  url: string,
+  instance?: AxiosInstance,
+  options?: O,
+): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
+export declare function useAxios<
+  T = any,
+  R = AxiosResponse<T>,
+  D = any,
+  O extends UseAxiosOptionsWithInitialData<T> =
+    UseAxiosOptionsWithInitialData<T>,
+>(
+  url: string,
+  config: AxiosRequestConfig<D>,
+  instance: AxiosInstance,
+  options?: O,
+): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
+export declare function useAxios<
+  T = any,
+  R = AxiosResponse<T>,
+  D = any,
+  O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
+>(
+  url: string,
+  config?: AxiosRequestConfig<D>,
+  options?: O,
+): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
+export declare function useAxios<
+  T = any,
+  R = AxiosResponse<T>,
+  D = any,
+  O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
+>(
+  url: string,
+  instance?: AxiosInstance,
+  options?: O,
+): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
+export declare function useAxios<
+  T = any,
+  R = AxiosResponse<T>,
+  D = any,
+  O extends UseAxiosOptionsBase<T> = UseAxiosOptionsBase<T>,
+>(
+  url: string,
+  config: AxiosRequestConfig<D>,
+  instance: AxiosInstance,
+  options?: O,
+): StrictUseAxiosReturn<T, R, D, O> & Promise<StrictUseAxiosReturn<T, R, D, O>>
+export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
+  config?: AxiosRequestConfig<D>,
+): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
+export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
+  instance?: AxiosInstance,
+): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
+export declare function useAxios<T = any, R = AxiosResponse<T>, D = any>(
+  config?: AxiosRequestConfig<D>,
+  instance?: AxiosInstance,
+): EasyUseAxiosReturn<T, R, D> & Promise<EasyUseAxiosReturn<T, R, D>>
+```

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

@@ -0,0 +1,136 @@
+---
+category: Utilities
+---
+
+# useBase64
+
+Reactive base64 transforming. Supports plain text, buffer, files, canvas, objects, maps, sets and images.
+
+## Usage
+
+```ts
+import { useBase64 } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const text = shallowRef('')
+
+const { base64, promise, execute } = useBase64(text)
+```
+
+### Supported Input Types
+
+- `string` - Plain text
+- `Blob` - File or blob data
+- `ArrayBuffer` - Binary data
+- `HTMLCanvasElement` - Canvas element
+- `HTMLImageElement` - Image element
+- `Object` / `Array` / `Map` / `Set` - Serialized to JSON
+
+### Return Values
+
+| Property  | Description                               |
+| --------- | ----------------------------------------- |
+| `base64`  | The resulting base64 string               |
+| `promise` | The promise of the current transformation |
+| `execute` | Manually trigger the transformation       |
+
+### Data URL Format
+
+By default, the output is in Data URL format (e.g., `data:text/plain;base64,...`). Set `dataUrl: false` to get raw base64.
+
+```ts
+const { base64 } = useBase64(text, { dataUrl: false })
+// Returns raw base64 without the data URL prefix
+```
+
+### Canvas and Image Options
+
+When transforming canvas or image elements, you can specify the MIME type and quality.
+
+```ts
+const canvas = document.querySelector('canvas')
+
+const { base64 } = useBase64(canvas, {
+  type: 'image/jpeg', // MIME type
+  quality: 0.8, // Image quality (0-1, for jpeg/webp)
+})
+```
+
+### Custom Serializer
+
+For objects, arrays, maps and sets, you can provide a custom serializer. Otherwise, the data will be serialized using `JSON.stringify` (maps are converted to objects, sets to arrays).
+
+```ts
+const data = shallowRef({ foo: 'bar' })
+
+const { base64 } = useBase64(data, {
+  serializer: v => JSON.stringify(v, null, 2),
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseBase64Options {
+  /**
+   * Output as Data URL format
+   *
+   * @default true
+   */
+  dataUrl?: boolean
+}
+export interface ToDataURLOptions extends UseBase64Options {
+  /**
+   * MIME type
+   */
+  type?: string | undefined
+  /**
+   * Image quality of jpeg or webp
+   */
+  quality?: any
+}
+export interface UseBase64ObjectOptions<T> extends UseBase64Options {
+  serializer?: (v: T) => string
+}
+export interface UseBase64Return {
+  base64: ShallowRef<string>
+  promise: ShallowRef<Promise<string>>
+  execute: () => Promise<string>
+}
+export declare function useBase64(
+  target: MaybeRefOrGetter<string | undefined>,
+  options?: UseBase64Options,
+): UseBase64Return
+export declare function useBase64(
+  target: MaybeRefOrGetter<Blob | undefined>,
+  options?: UseBase64Options,
+): UseBase64Return
+export declare function useBase64(
+  target: MaybeRefOrGetter<ArrayBuffer | undefined>,
+  options?: UseBase64Options,
+): UseBase64Return
+export declare function useBase64(
+  target: MaybeRefOrGetter<HTMLCanvasElement | undefined>,
+  options?: ToDataURLOptions,
+): UseBase64Return
+export declare function useBase64(
+  target: MaybeRefOrGetter<HTMLImageElement | undefined>,
+  options?: ToDataURLOptions,
+): UseBase64Return
+export declare function useBase64<T extends Record<string, unknown>>(
+  target: MaybeRefOrGetter<T>,
+  options?: UseBase64ObjectOptions<T>,
+): UseBase64Return
+export declare function useBase64<T extends Map<string, unknown>>(
+  target: MaybeRefOrGetter<T>,
+  options?: UseBase64ObjectOptions<T>,
+): UseBase64Return
+export declare function useBase64<T extends Set<unknown>>(
+  target: MaybeRefOrGetter<T>,
+  options?: UseBase64ObjectOptions<T>,
+): UseBase64Return
+export declare function useBase64<T>(
+  target: MaybeRefOrGetter<T[]>,
+  options?: UseBase64ObjectOptions<T[]>,
+): UseBase64Return
+```

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

@@ -0,0 +1,78 @@
+---
+category: Sensors
+---
+
+# useBattery
+
+Reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API), more often referred to as the Battery API, provides information about the system's battery charge level and lets you be notified by events that are sent when the battery level or charging status change. This can be used to adjust your app's resource usage to reduce battery drain when the battery is low, or to save changes before the battery runs out in order to prevent data loss.
+
+## Usage
+
+```ts
+import { useBattery } from '@vueuse/core'
+
+const { isSupported, charging, chargingTime, dischargingTime, level } = useBattery()
+```
+
+| State           | Type      | Description                                                       |
+| --------------- | --------- | ----------------------------------------------------------------- |
+| isSupported     | `Boolean` | If the Battery Status API is supported in the current browser.    |
+| charging        | `Boolean` | If the device is currently charging.                              |
+| chargingTime    | `Number`  | The number of seconds until the device becomes fully charged.     |
+| dischargingTime | `Number`  | The number of seconds before the device becomes fully discharged. |
+| level           | `Number`  | A number between 0 and 1 representing the current charge level.   |
+
+::: warning Browser Support
+The Battery Status API has limited browser support. It is currently only available in Chromium-based browsers. Always check `isSupported` before using the values.
+:::
+
+## Use-cases
+
+Our applications normally are not empathetic to battery level, we can make a few adjustments to our applications that will be more friendly to low battery users.
+
+- Trigger a special "dark-mode" battery saver theme settings.
+- Stop auto playing videos in news feeds.
+- Disable some background workers that are not critical.
+- Limit network calls and reduce CPU/Memory consumption.
+
+## Component Usage
+
+```vue
+<template>
+  <UseBattery v-slot="{ isSupported, charging, level }">
+    <div v-if="isSupported">
+      <p>Is Charging: {{ charging }}</p>
+      <p>Battery Level: {{ (level * 100).toFixed(0) }}%</p>
+    </div>
+    <div v-else>
+      Battery API not supported
+    </div>
+  </UseBattery>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface BatteryManager extends EventTarget {
+  charging: boolean
+  chargingTime: number
+  dischargingTime: number
+  level: number
+}
+/**
+ * Reactive Battery Status API.
+ *
+ * @see https://vueuse.org/useBattery
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useBattery(options?: ConfigurableNavigator): {
+  isSupported: ComputedRef<boolean>
+  charging: ShallowRef<boolean, boolean>
+  chargingTime: ShallowRef<number, number>
+  dischargingTime: ShallowRef<number, number>
+  level: ShallowRef<number, number>
+}
+export type UseBatteryReturn = ReturnType<typeof useBattery>
+```

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

@@ -0,0 +1,175 @@
+---
+category: Browser
+---
+
+# useBluetooth
+
+Reactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API). Provides the ability to connect and interact with Bluetooth Low Energy peripherals.
+
+The Web Bluetooth API lets websites discover and communicate with devices over the Bluetooth 4 wireless standard using the Generic Attribute Profile (GATT).
+
+N.B. It is currently partially implemented in Android M, Chrome OS, Mac, and Windows 10. For a full overview of browser compatibility please see [Web Bluetooth API Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API#browser_compatibility)
+
+N.B. There are a number of caveats to be aware of with the web bluetooth API specification. Please refer to the [Web Bluetooth W3C Draft Report](https://webbluetoothcg.github.io/web-bluetooth/) for numerous caveats around device detection and connection.
+
+N.B. This API is not available in Web Workers (not exposed via WorkerNavigator).
+
+## Usage Default
+
+```vue
+<script setup lang="ts">
+import { useBluetooth } from '@vueuse/core'
+
+const {
+  isSupported,
+  isConnected,
+  device,
+  requestDevice,
+  server,
+  error,
+} = useBluetooth({
+  acceptAllDevices: true,
+})
+</script>
+
+<template>
+  <button @click="requestDevice()">
+    Request Bluetooth Device
+  </button>
+  <div v-if="error">
+    Error: {{ error }}
+  </div>
+</template>
+```
+
+### Return Values
+
+| Property        | Type                             | Description                                |
+| --------------- | -------------------------------- | ------------------------------------------ |
+| `isSupported`   | `ComputedRef<boolean>`           | Whether the Web Bluetooth API is supported |
+| `isConnected`   | `Ref<boolean>`                   | Whether a device is currently connected    |
+| `device`        | `Ref<BluetoothDevice>`           | The connected Bluetooth device             |
+| `server`        | `Ref<BluetoothRemoteGATTServer>` | The GATT server for the connected device   |
+| `error`         | `Ref<unknown>`                   | Any error that occurred during connection  |
+| `requestDevice` | `() => Promise<void>`            | Function to request a Bluetooth device     |
+
+When the device has paired and is connected, you can then work with the server object as you wish.
+
+## Usage Battery Level Example
+
+This sample illustrates the use of the Web Bluetooth API to read battery level and be notified of changes from a nearby Bluetooth Device advertising Battery information with Bluetooth Low Energy.
+
+Here, we use the characteristicvaluechanged event listener to handle reading battery level characteristic value. This event listener will optionally handle upcoming notifications as well.
+
+```vue
+<script setup lang="ts">
+import { useBluetooth, useEventListener, watchPausable } from '@vueuse/core'
+
+const {
+  isSupported,
+  isConnected,
+  device,
+  requestDevice,
+  server,
+} = useBluetooth({
+  acceptAllDevices: true,
+  optionalServices: [
+    'battery_service',
+  ],
+})
+
+const batteryPercent = ref<undefined | number>()
+
+const isGettingBatteryLevels = ref(false)
+
+async function getBatteryLevels() {
+  isGettingBatteryLevels.value = true
+
+  // Get the battery service:
+  const batteryService = await server.getPrimaryService('battery_service')
+
+  // Get the current battery level
+  const batteryLevelCharacteristic = await batteryService.getCharacteristic(
+    'battery_level',
+  )
+
+  // Listen to when characteristic value changes on `characteristicvaluechanged` event:
+  useEventListener(batteryLevelCharacteristic, 'characteristicvaluechanged', (event) => {
+    batteryPercent.value = event.target.value.getUint8(0)
+  }, { passive: true })
+
+  // Convert received buffer to number:
+  const batteryLevel = await batteryLevelCharacteristic.readValue()
+
+  batteryPercent.value = await batteryLevel.getUint8(0)
+}
+
+const { stop } = watchPausable(isConnected, (newIsConnected) => {
+  if (!newIsConnected || !server.value || isGettingBatteryLevels.value)
+    return
+  // Attempt to get the battery levels of the device:
+  getBatteryLevels()
+  // We only want to run this on the initial connection, as we will use an event listener to handle updates:
+  stop()
+})
+</script>
+
+<template>
+  <button @click="requestDevice()">
+    Request Bluetooth Device
+  </button>
+</template>
+```
+
+More samples can be found on [Google Chrome's Web Bluetooth Samples](https://googlechrome.github.io/samples/web-bluetooth/).
+
+## Type Declarations
+
+```ts
+export interface UseBluetoothRequestDeviceOptions {
+  /**
+   *
+   * An array of BluetoothScanFilters. This filter consists of an array
+   * of BluetoothServiceUUIDs, a name parameter, and a namePrefix parameter.
+   *
+   */
+  filters?: BluetoothLEScanFilter[] | undefined
+  /**
+   *
+   * An array of BluetoothServiceUUIDs.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTService/uuid
+   *
+   */
+  optionalServices?: BluetoothServiceUUID[] | undefined
+}
+export interface UseBluetoothOptions
+  extends UseBluetoothRequestDeviceOptions, ConfigurableNavigator {
+  /**
+   *
+   * A boolean value indicating that the requesting script can accept all Bluetooth
+   * devices. The default is false.
+   *
+   * !! This may result in a bunch of unrelated devices being shown
+   * in the chooser and energy being wasted as there are no filters.
+   *
+   *
+   * Use it with caution.
+   *
+   * @default false
+   *
+   */
+  acceptAllDevices?: boolean
+}
+export declare function useBluetooth(
+  options?: UseBluetoothOptions,
+): UseBluetoothReturn
+export interface UseBluetoothReturn {
+  isSupported: ComputedRef<boolean>
+  isConnected: Readonly<ShallowRef<boolean>>
+  device: ShallowRef<BluetoothDevice | undefined>
+  requestDevice: () => Promise<void>
+  server: ShallowRef<BluetoothRemoteGATTServer | undefined>
+  error: ShallowRef<unknown | null>
+}
+```