devskill 2.0.2

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

@@ -0,0 +1,94 @@
+---
+category: Browser
+related:
+  - useClipboard
+---
+
+# useClipboardItems
+
+Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API). Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API). Without user permission, reading or altering the clipboard contents is not permitted.
+
+## Difference from `useClipboard`
+
+`useClipboard` is a "text-only" function, while `useClipboardItems` is a [ClipboardItem](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem) based function. You can use `useClipboardItems` to copy any content supported by [ClipboardItem](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem).
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useClipboardItems } from '@vueuse/core'
+
+const mime = 'text/plain'
+const source = ref([
+  new ClipboardItem({
+    [mime]: new Blob(['plain text'], { type: mime }),
+  })
+])
+
+const { content, copy, copied, isSupported } = useClipboardItems({ source })
+</script>
+
+<template>
+  <div v-if="isSupported">
+    <button @click="copy(source)">
+      <!-- by default, `copied` will be reset in 1.5s -->
+      <span v-if="!copied">Copy</span>
+      <span v-else>Copied!</span>
+    </button>
+    <p>
+      Current copied: <code>{{ content || 'none' }}</code>
+    </p>
+  </div>
+  <p v-else>
+    Your browser does not support Clipboard API
+  </p>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseClipboardItemsOptions<
+  Source,
+> extends ConfigurableNavigator {
+  /**
+   * Enabled reading for clipboard
+   *
+   * @default false
+   */
+  read?: boolean
+  /**
+   * Copy source
+   */
+  source?: Source
+  /**
+   * Milliseconds to reset state of `copied` ref
+   *
+   * @default 1500
+   */
+  copiedDuring?: number
+}
+export interface UseClipboardItemsReturn<Optional> {
+  isSupported: ComputedRef<boolean>
+  content: Readonly<Ref<ClipboardItems>>
+  copied: Readonly<ShallowRef<boolean>>
+  copy: Optional extends true
+    ? (content?: ClipboardItems) => Promise<void>
+    : (text: ClipboardItems) => Promise<void>
+  read: () => void
+}
+/**
+ * Reactive Clipboard API.
+ *
+ * @see https://vueuse.org/useClipboardItems
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useClipboardItems(
+  options?: UseClipboardItemsOptions<undefined>,
+): UseClipboardItemsReturn<false>
+export declare function useClipboardItems(
+  options: UseClipboardItemsOptions<MaybeRefOrGetter<ClipboardItems>>,
+): UseClipboardItemsReturn<true>
+```

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

@@ -0,0 +1,91 @@
+---
+category: Utilities
+---
+
+# useCloned
+
+Reactive clone of a ref. By default, it use `JSON.parse(JSON.stringify())` to do the clone.
+
+## Usage
+
+```ts
+import { useCloned } from '@vueuse/core'
+
+const original = ref({ key: 'value' })
+
+const { cloned } = useCloned(original)
+
+original.value.key = 'some new value'
+
+console.log(cloned.value.key) // 'value'
+```
+
+## Manual cloning
+
+```ts
+import { useCloned } from '@vueuse/core'
+
+const original = ref({ key: 'value' })
+
+const { cloned, sync } = useCloned(original, { manual: true })
+
+original.value.key = 'manual'
+
+console.log(cloned.value.key) // 'value'
+
+sync()
+
+console.log(cloned.value.key)// 'manual'
+```
+
+## Custom Clone Function
+
+Using [`klona`](https://www.npmjs.com/package/klona) for example:
+
+```ts
+import { useCloned } from '@vueuse/core'
+import { klona } from 'klona'
+
+const original = ref({ key: 'value' })
+
+const { cloned, isModified, sync } = useCloned(original, { clone: klona })
+```
+
+## Type Declarations
+
+```ts
+export interface UseClonedOptions<T = any> extends WatchOptions {
+  /**
+   * Custom clone function.
+   *
+   * By default, it use `JSON.parse(JSON.stringify(value))` to clone.
+   */
+  clone?: (source: T) => T
+  /**
+   * Manually sync the ref
+   *
+   * @default false
+   */
+  manual?: boolean
+}
+export interface UseClonedReturn<T> {
+  /**
+   * Cloned ref
+   */
+  cloned: Ref<T>
+  /**
+   * Ref indicates whether the cloned data is modified
+   */
+  isModified: Ref<boolean>
+  /**
+   * Sync cloned data with source manually
+   */
+  sync: () => void
+}
+export type CloneFn<F, T = F> = (x: F) => T
+export declare function cloneFnJSON<T>(source: T): T
+export declare function useCloned<T>(
+  source: MaybeRefOrGetter<T>,
+  options?: UseClonedOptions,
+): UseClonedReturn<T>
+```

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

@@ -0,0 +1,172 @@
+---
+category: Browser
+related:
+  - useDark
+  - usePreferredDark
+  - useStorage
+---
+
+# useColorMode
+
+Reactive color mode (dark / light / customs) with auto data persistence.
+
+## Basic Usage
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode() // Ref<'dark' | 'light'>
+```
+
+By default, it will match with users' browser preference using `usePreferredDark` (a.k.a `auto` mode). When reading the ref, it will by default return the current color mode (`dark`, `light` or your custom modes). The `auto` mode can be included in the returned modes by enabling the `emitAuto` option. When writing to the ref, it will trigger DOM updates and persist the color mode to local storage (or your custom storage). You can pass `auto` to set back to auto mode.
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
+// ---cut---
+mode.value // 'dark' | 'light'
+
+mode.value = 'dark' // change to dark mode and persist
+
+mode.value = 'auto' // change to auto mode
+```
+
+## Config
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode({
+  attribute: 'theme',
+  modes: {
+    // custom colors
+    dim: 'dim',
+    cafe: 'cafe',
+  },
+}) // Ref<'dark' | 'light' | 'dim' | 'cafe'>
+```
+
+## Advanced Usage
+
+You can also explicit access to the system preference and storaged user override mode.
+
+```ts
+import { useColorMode } from '@vueuse/core'
+
+const { system, store } = useColorMode()
+
+system.value // 'dark' | 'light'
+store.value // 'dark' | 'light' | 'auto'
+
+const myColorMode = computed(() => store.value === 'auto' ? system.value : store.value)
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseColorMode v-slot="color">
+    <button @click="color.mode = color.mode === 'dark' ? 'light' : 'dark'">
+      Mode {{ color.mode }}
+    </button>
+  </UseColorMode>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type BasicColorMode = "light" | "dark"
+export type BasicColorSchema = BasicColorMode | "auto"
+export interface UseColorModeOptions<
+  T extends string = BasicColorMode,
+> extends UseStorageOptions<T | BasicColorMode> {
+  /**
+   * CSS Selector for the target element applying to
+   *
+   * @default 'html'
+   */
+  selector?: string | MaybeElementRef
+  /**
+   * HTML attribute applying the target element
+   *
+   * @default 'class'
+   */
+  attribute?: string
+  /**
+   * The initial color mode
+   *
+   * @default 'auto'
+   */
+  initialValue?: MaybeRefOrGetter<T | BasicColorSchema>
+  /**
+   * Prefix when adding value to the attribute
+   */
+  modes?: Partial<Record<T | BasicColorSchema, string>>
+  /**
+   * A custom handler for handle the updates.
+   * When specified, the default behavior will be overridden.
+   *
+   * @default undefined
+   */
+  onChanged?: (
+    mode: T | BasicColorMode,
+    defaultHandler: (mode: T | BasicColorMode) => void,
+  ) => void
+  /**
+   * Custom storage ref
+   *
+   * When provided, `useStorage` will be skipped
+   */
+  storageRef?: Ref<T | BasicColorSchema>
+  /**
+   * Key to persist the data into localStorage/sessionStorage.
+   *
+   * Pass `null` to disable persistence
+   *
+   * @default 'vueuse-color-scheme'
+   */
+  storageKey?: string | null
+  /**
+   * Storage object, can be localStorage or sessionStorage
+   *
+   * @default localStorage
+   */
+  storage?: StorageLike
+  /**
+   * Emit `auto` mode from state
+   *
+   * When set to `true`, preferred mode won't be translated into `light` or `dark`.
+   * This is useful when the fact that `auto` mode was selected needs to be known.
+   *
+   * @default undefined
+   * @deprecated use `store.value` when `auto` mode needs to be known
+   * @see https://vueuse.org/core/useColorMode/#advanced-usage
+   */
+  emitAuto?: boolean
+  /**
+   * Disable transition on switch
+   *
+   * @see https://paco.me/writing/disable-theme-transitions
+   * @default true
+   */
+  disableTransition?: boolean
+}
+export type UseColorModeReturn<T extends string = BasicColorMode> = Ref<
+  T | BasicColorSchema
+> & {
+  store: Ref<T | BasicColorSchema>
+  system: ComputedRef<BasicColorMode>
+  state: ComputedRef<T | BasicColorMode>
+}
+/**
+ * Reactive color mode with auto data persistence.
+ *
+ * @see https://vueuse.org/useColorMode
+ * @param options
+ */
+export declare function useColorMode<T extends string = BasicColorMode>(
+  options?: UseColorModeOptions<T>,
+): UseColorModeReturn<T>
+```

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

@@ -0,0 +1,159 @@
+---
+category: Utilities
+---
+
+# useConfirmDialog
+
+Creates event hooks to support modals and confirmation dialog chains.
+
+Functions can be used on the template, and hooks are a handy skeleton for the business logic of modals dialog or other actions that require user confirmation.
+
+## Functions and hooks
+
+- `reveal()` - triggers `onReveal` hook and sets `revealed.value` to `true`. Returns promise that resolves by `confirm()` or `cancel()`.
+- `confirm()` - sets `isRevealed.value` to `false` and triggers `onConfirm` hook.
+- `cancel()` - sets `isRevealed.value` to `false` and triggers `onCancel` hook.
+
+## Basic Usage
+
+### Using hooks
+
+```vue
+<script setup lang="ts">
+import { useConfirmDialog } from '@vueuse/core'
+
+const { isRevealed, reveal, confirm, cancel, onReveal, onConfirm, onCancel }
+  = useConfirmDialog()
+</script>
+
+<template>
+  <button @click="reveal">
+    Reveal Modal
+  </button>
+
+  <teleport to="body">
+    <div v-if="isRevealed" class="modal-bg">
+      <div class="modal">
+        <h2>Confirm?</h2>
+        <button @click="confirm">
+          Yes
+        </button>
+        <button @click="cancel">
+          Cancel
+        </button>
+      </div>
+    </div>
+  </teleport>
+</template>
+```
+
+### Promise
+
+If you prefer working with promises:
+
+```vue
+<script setup lang="ts">
+import { useConfirmDialog } from '@vueuse/core'
+
+const {
+  isRevealed,
+  reveal,
+  confirm,
+  cancel,
+} = useConfirmDialog()
+
+async function openDialog() {
+  const { data, isCanceled } = await reveal()
+  if (!isCanceled)
+    console.log(data)
+}
+</script>
+
+<template>
+  <button @click="openDialog">
+    Show Modal
+  </button>
+
+  <teleport to="body">
+    <div v-if="isRevealed" class="modal-layout">
+      <div class="modal">
+        <h2>Confirm?</h2>
+        <button @click="confirm(true)">
+          Yes
+        </button>
+        <button @click="confirm(false)">
+          No
+        </button>
+      </div>
+    </div>
+  </teleport>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type UseConfirmDialogRevealResult<C, D> =
+  | {
+      data?: C
+      isCanceled: false
+    }
+  | {
+      data?: D
+      isCanceled: true
+    }
+export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
+  /**
+   * Revealing state
+   */
+  isRevealed: ComputedRef<boolean>
+  /**
+   * Opens the dialog.
+   * Create promise and return it. Triggers `onReveal` hook.
+   */
+  reveal: (
+    data?: RevealData,
+  ) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>
+  /**
+   * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
+   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
+   * Can accept any data and to pass it to `onConfirm` hook.
+   */
+  confirm: (data?: ConfirmData) => void
+  /**
+   * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
+   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
+   * Can accept any data and to pass it to `onCancel` hook.
+   */
+  cancel: (data?: CancelData) => void
+  /**
+   * Event Hook to be triggered right before dialog creating.
+   */
+  onReveal: EventHookOn<RevealData>
+  /**
+   * Event Hook to be called on `confirm()`.
+   * Gets data object from `confirm` function.
+   */
+  onConfirm: EventHookOn<ConfirmData>
+  /**
+   * Event Hook to be called on `cancel()`.
+   * Gets data object from `cancel` function.
+   */
+  onCancel: EventHookOn<CancelData>
+}
+/**
+ * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
+ *
+ * @see https://vueuse.org/useConfirmDialog/
+ * @param revealed `boolean` `ref` that handles a modal window
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useConfirmDialog<
+  RevealData = any,
+  ConfirmData = any,
+  CancelData = any,
+>(
+  revealed?: ShallowRef<boolean>,
+): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
+```

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

@@ -0,0 +1,162 @@
+---
+category: '@Integrations'
+---
+
+# useCookies
+
+Wrapper for [`universal-cookie`](https://www.npmjs.com/package/universal-cookie).
+
+::: tip
+When using with Nuxt 3, this functions will **NOT** be auto imported in favor of Nuxt's built-in [`useCookie()`](https://v3.nuxtjs.org/api/composables/use-cookie). Use explicit import if you want to use the function from VueUse.
+:::
+
+## Install
+
+```bash
+npm i universal-cookie@^7
+```
+
+## Usage
+
+### Common usage
+
+```vue
+<script setup lang="ts">
+import { useCookies } from '@vueuse/integrations/useCookies'
+
+const cookies = useCookies(['locale'])
+</script>
+
+<template>
+  <div>
+    <strong>locale</strong>: {{ cookies.get('locale') }}
+    <hr>
+    <pre>{{ cookies.getAll() }}</pre>
+    <button @click="cookies.set('locale', 'ru-RU')">
+      Russian
+    </button>
+    <button @click="cookies.set('locale', 'en-US')">
+      English
+    </button>
+  </div>
+</template>
+```
+
+## Options
+
+Access and modify cookies using vue composition-api.
+
+> By default, you should use it inside `setup()`, but this function also works anywhere else.
+
+```ts
+import { useCookies } from '@vueuse/integrations/useCookies'
+// ---cut---
+const {
+  get,
+  getAll,
+  set,
+  remove,
+  addChangeListener,
+  removeChangeListener
+} = useCookies(['cookie-name'], {
+  doNotParse: false,
+  autoUpdateDependencies: false
+})
+```
+
+### `dependencies` (optional)
+
+Let you optionally specify a list of cookie names your component depend on or that should trigger a re-render. If unspecified, it will render on every cookie change.
+
+### `options` (optional)
+
+- `doNotParse` (boolean = false): do not convert the cookie into an object no matter what. **Passed as default value to `get`/`getAll` methods.**
+- `autoUpdateDependencies` (boolean = false): automatically add cookie names ever provided to `get` method. If **true** then you don't need to care about provided `dependencies`.
+
+### `cookies` (optional)
+
+Let you provide a `universal-cookie` instance (creates a new instance by default)
+
+> Info about methods available in the [universal-cookie api docs](https://www.npmjs.com/package/universal-cookie#api---cookies-class)
+
+## `createCookies([req])`
+
+Create a `universal-cookie` instance using request (default is window.document.cookie) and returns `useCookies` function with provided universal-cookie instance
+
+- req (object): Node's [http.IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage) request object
+
+## Type Declarations
+
+```ts
+/**
+ * Creates a new {@link useCookies} function
+ * @param req - incoming http request (for SSR)
+ * @see https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie universal-cookie
+ * @description Creates universal-cookie instance using request (default is window.document.cookie) and returns {@link useCookies} function with provided universal-cookie instance
+ */
+export declare function createCookies(req?: IncomingMessage): (
+  dependencies?: string[] | null,
+  {
+    doNotParse,
+    autoUpdateDependencies,
+  }?: {
+    doNotParse?: boolean | undefined
+    autoUpdateDependencies?: boolean | undefined
+  },
+) => {
+  /**
+   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+   */
+  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
+  /**
+   * Reactive get all cookies
+   */
+  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
+  set: (
+    name: string,
+    value: any,
+    options?: CookieSetOptions | undefined,
+  ) => void
+  remove: (name: string, options?: CookieSetOptions | undefined) => void
+  addChangeListener: (callback: CookieChangeListener) => void
+  removeChangeListener: (callback: CookieChangeListener) => void
+}
+/**
+ * Reactive methods to work with cookies (use {@link createCookies} method instead if you are using SSR)
+ * @param dependencies - array of watching cookie's names. Pass empty array if don't want to watch cookies changes.
+ * @param options
+ * @param options.doNotParse - don't try parse value as JSON
+ * @param options.autoUpdateDependencies - automatically update watching dependencies
+ * @param cookies - universal-cookie instance
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useCookies(
+  dependencies?: string[] | null,
+  {
+    doNotParse,
+    autoUpdateDependencies,
+  }?: {
+    doNotParse?: boolean | undefined
+    autoUpdateDependencies?: boolean | undefined
+  },
+  cookies?: Cookie,
+): {
+  /**
+   * Reactive get cookie by name. If **autoUpdateDependencies = true** then it will update watching dependencies
+   */
+  get: <T = any>(name: string, options?: CookieGetOptions | undefined) => T
+  /**
+   * Reactive get all cookies
+   */
+  getAll: <T = any>(options?: CookieGetOptions | undefined) => T
+  set: (
+    name: string,
+    value: any,
+    options?: CookieSetOptions | undefined,
+  ) => void
+  remove: (name: string, options?: CookieSetOptions | undefined) => void
+  addChangeListener: (callback: CookieChangeListener) => void
+  removeChangeListener: (callback: CookieChangeListener) => void
+}
+```