devskill 2.0.2

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

@@ -0,0 +1,172 @@
+---
+category: Browser
+---
+
+# useBreakpoints
+
+Reactive viewport breakpoints.
+
+## Usage
+
+```ts
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
+const largerThanSm = breakpoints.greater('sm') // only larger than sm
+const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
+const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
+```
+
+```vue
+<script setup lang="ts">
+import { useBreakpoints } from '@vueuse/core'
+
+const breakpoints = useBreakpoints({
+  mobile: 0, // optional
+  tablet: 640,
+  laptop: 1024,
+  desktop: 1280,
+})
+
+// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
+const activeBreakpoint = breakpoints.active()
+
+// true or false
+const laptop = breakpoints.between('laptop', 'desktop')
+</script>
+
+<template>
+  <div :class="activeBreakpoint">
+    ...
+  </div>
+</template>
+```
+
+### Shortcut Methods
+
+You can access breakpoints directly as properties on the returned object. These return reactive refs.
+
+```ts
+const breakpoints = useBreakpoints({
+  tablet: 640,
+  laptop: 1024,
+})
+
+// Equivalent to breakpoints.greaterOrEqual('tablet') with min-width strategy
+const isTablet = breakpoints.tablet
+```
+
+### Strategy
+
+The `strategy` option controls how the shortcut properties behave:
+
+- `min-width` (default, mobile-first): `breakpoints.lg` is `true` when viewport is `>= lg`
+- `max-width` (desktop-first): `breakpoints.lg` is `true` when viewport is `< xl`
+
+```ts
+const breakpoints = useBreakpoints(breakpointsTailwind, {
+  strategy: 'max-width', // desktop-first
+})
+```
+
+### Available Methods
+
+| Method                | Description                                              |
+| --------------------- | -------------------------------------------------------- |
+| `greaterOrEqual(k)`   | Reactive: viewport width >= breakpoint                   |
+| `greater(k)`          | Reactive: viewport width > breakpoint                    |
+| `smallerOrEqual(k)`   | Reactive: viewport width <= breakpoint                   |
+| `smaller(k)`          | Reactive: viewport width < breakpoint                    |
+| `between(a, b)`       | Reactive: viewport width between a and b                 |
+| `isGreaterOrEqual(k)` | Non-reactive: returns boolean immediately                |
+| `isGreater(k)`        | Non-reactive: returns boolean immediately                |
+| `isSmallerOrEqual(k)` | Non-reactive: returns boolean immediately                |
+| `isSmaller(k)`        | Non-reactive: returns boolean immediately                |
+| `isInBetween(a, b)`   | Non-reactive: returns boolean immediately                |
+| `current()`           | Returns computed array of all matching breakpoints       |
+| `active()`            | Returns computed string of the current active breakpoint |
+
+#### Server Side Rendering and Nuxt
+
+If you are using `useBreakpoints` with SSR enabled, then you need to specify which screen size you would like to render on the server and before hydration to avoid an hydration mismatch
+
+```ts
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+const breakpoints = useBreakpoints(breakpointsTailwind, {
+  ssrWidth: 768 // Will enable SSR mode and render like if the screen was 768px wide
+})
+```
+
+Alternatively you can set this up globally for your app using [`provideSSRWidth`](../useSSRWidth/index.md)
+
+## Presets
+
+- Tailwind: `breakpointsTailwind`
+- Bootstrap v5: `breakpointsBootstrapV5`
+- Vuetify v2: `breakpointsVuetifyV2` (deprecated: `breakpointsVuetify`)
+- Vuetify v3: `breakpointsVuetifyV3`
+- Ant Design: `breakpointsAntDesign`
+- Quasar v2: `breakpointsQuasar`
+- Sematic: `breakpointsSematic`
+- Master CSS: `breakpointsMasterCss`
+- Prime Flex: `breakpointsPrimeFlex`
+- ElementUI / ElementPlus: `breakpointsElement`
+
+_Breakpoint presets are deliberately not auto-imported, as they do not start with `use` to have the scope of VueUse. They have to be explicitly imported:_
+
+```js
+import { breakpointsTailwind } from '@vueuse/core'
+// and so on
+```
+
+## Type Declarations
+
+```ts
+export * from "./breakpoints"
+export type Breakpoints<K extends string = string> = Record<
+  K,
+  MaybeRefOrGetter<number | string>
+>
+export interface UseBreakpointsOptions extends ConfigurableWindow {
+  /**
+   * The query strategy to use for the generated shortcut methods like `.lg`
+   *
+   * 'min-width' - .lg will be true when the viewport is greater than or equal to the lg breakpoint (mobile-first)
+   * 'max-width' - .lg will be true when the viewport is smaller than the xl breakpoint (desktop-first)
+   *
+   * @default "min-width"
+   */
+  strategy?: "min-width" | "max-width"
+  ssrWidth?: number
+}
+/**
+ * Reactively viewport breakpoints
+ *
+ * @see https://vueuse.org/useBreakpoints
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useBreakpoints<K extends string>(
+  breakpoints: Breakpoints<K>,
+  options?: UseBreakpointsOptions,
+): Record<K, ComputedRef<boolean>> & {
+  greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
+  smallerOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
+  greater(k: MaybeRefOrGetter<K>): ComputedRef<boolean>
+  smaller(k: MaybeRefOrGetter<K>): ComputedRef<boolean>
+  between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): ComputedRef<boolean>
+  isGreater(k: MaybeRefOrGetter<K>): boolean
+  isGreaterOrEqual(k: MaybeRefOrGetter<K>): boolean
+  isSmaller(k: MaybeRefOrGetter<K>): boolean
+  isSmallerOrEqual(k: MaybeRefOrGetter<K>): boolean
+  isInBetween(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): boolean
+  current: () => ComputedRef<K[]>
+  active(): ComputedRef<"" | K>
+}
+export type UseBreakpointsReturn<K extends string = string> = ReturnType<
+  typeof useBreakpoints<K>
+>
+```

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

@@ -0,0 +1,74 @@
+---
+category: Browser
+---
+
+# useBroadcastChannel
+
+Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel).
+
+Closes a broadcast channel automatically component unmounted.
+
+## Usage
+
+The BroadcastChannel interface represents a named channel that any browsing
+context of a given origin can subscribe to. It allows communication between
+different documents (in different windows, tabs, frames, or iframes) of the
+same origin.
+
+Messages are broadcasted via a message event fired at all BroadcastChannel
+objects listening to the channel.
+
+```ts
+import { useBroadcastChannel } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+const {
+  isSupported,
+  channel,
+  post,
+  close,
+  error,
+  isClosed,
+} = useBroadcastChannel({ name: 'vueuse-demo-channel' })
+
+const message = shallowRef('')
+
+message.value = 'Hello, VueUse World!'
+
+// Post the message to the broadcast channel:
+post(message.value)
+
+// Option to close the channel if you wish:
+close()
+```
+
+## Type Declarations
+
+```ts
+export interface UseBroadcastChannelOptions extends ConfigurableWindow {
+  /**
+   * The name of the channel.
+   */
+  name: string
+}
+/**
+ * Reactive BroadcastChannel
+ *
+ * @see https://vueuse.org/useBroadcastChannel
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
+ * @param options
+ *
+ */
+export declare function useBroadcastChannel<D, P>(
+  options: UseBroadcastChannelOptions,
+): UseBroadcastChannelReturn<D, P>
+export interface UseBroadcastChannelReturn<D, P> {
+  isSupported: ComputedRef<boolean>
+  channel: Ref<BroadcastChannel | undefined>
+  data: Ref<D>
+  post: (data: P) => void
+  close: () => void
+  error: ShallowRef<Event | null>
+  isClosed: ShallowRef<boolean>
+}
+```

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

@@ -0,0 +1,83 @@
+---
+category: Browser
+---
+
+# useBrowserLocation
+
+Reactive browser location
+
+> NOTE: If you're using Vue Router, use [`useRoute`](https://router.vuejs.org/guide/advanced/composition-api.html) provided by Vue Router instead.
+
+## Usage
+
+```ts
+import { useBrowserLocation } from '@vueuse/core'
+
+const location = useBrowserLocation()
+```
+
+## Component Usage
+
+```vue
+<UseBrowserLocation v-slot="location">
+  Browser Location: {{ location }}
+</UseBrowserLocation>
+```
+
+## Type Declarations
+
+```ts
+export interface BrowserLocationState {
+  readonly trigger: string
+  readonly state?: any
+  readonly length?: number
+  readonly origin?: string
+  hash?: string
+  host?: string
+  hostname?: string
+  href?: string
+  pathname?: string
+  port?: string
+  protocol?: string
+  search?: string
+}
+/**
+ * Reactive browser location.
+ *
+ * @see https://vueuse.org/useBrowserLocation
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useBrowserLocation(options?: ConfigurableWindow): Ref<
+  {
+    readonly trigger: string
+    readonly state?: any
+    readonly length?: number | undefined
+    readonly origin?: string | undefined
+    hash?: string | undefined
+    host?: string | undefined
+    hostname?: string | undefined
+    href?: string | undefined
+    pathname?: string | undefined
+    port?: string | undefined
+    protocol?: string | undefined
+    search?: string | undefined
+  },
+  | BrowserLocationState
+  | {
+      readonly trigger: string
+      readonly state?: any
+      readonly length?: number | undefined
+      readonly origin?: string | undefined
+      hash?: string | undefined
+      host?: string | undefined
+      hostname?: string | undefined
+      href?: string | undefined
+      pathname?: string | undefined
+      port?: string | undefined
+      protocol?: string | undefined
+      search?: string | undefined
+    }
+>
+export type UseBrowserLocationReturn = ReturnType<typeof useBrowserLocation>
+```

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

@@ -0,0 +1,52 @@
+---
+category: Utilities
+---
+
+# useCached
+
+Cache a ref with a custom comparator.
+
+## Usage
+
+```ts
+import { useCached } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
+interface Data {
+  value: number
+  extra: number
+}
+
+const source = shallowRef<Data>({ value: 42, extra: 0 })
+const cached = useCached(source, (a, b) => a.value === b.value)
+
+source.value = {
+  value: 42,
+  extra: 1,
+}
+
+console.log(cached.value) // { value: 42, extra: 0 }
+
+source.value = {
+  value: 43,
+  extra: 1,
+}
+
+console.log(cached.value) // { value: 43, extra: 1 }
+```
+
+## Type Declarations
+
+```ts
+export interface UseCachedOptions<D extends boolean = true>
+  extends ConfigurableDeepRefs<D>, WatchOptions {}
+export declare function useCached<T, D extends boolean = true>(
+  refValue: Ref<T>,
+  comparator?: (a: T, b: T) => boolean,
+  options?: UseCachedOptions<D>,
+): UseCachedReturn<T, D>
+export type UseCachedReturn<
+  T = any,
+  D extends boolean = true,
+> = ShallowOrDeepRef<T, D>
+```

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

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

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

@@ -0,0 +1,79 @@
+---
+category: '@Integrations'
+---
+
+# useChangeCase
+
+Reactive wrapper for [`change-case`](https://github.com/blakeembrey/change-case).
+
+Subsitutes `useCamelCase`, `usePascalCase`, `useSnakeCase`, `useSentenceCase`, `useCapitalize`, etc.
+
+## Install
+
+```bash
+npm i change-case@^5
+```
+
+## Usage
+
+```ts
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+
+// `changeCase` will be a computed
+const changeCase = useChangeCase('hello world', 'camelCase')
+changeCase.value // helloWorld
+changeCase.value = 'vue use'
+changeCase.value // vueUse
+// Supported methods
+// export {
+//   camelCase,
+//   capitalCase,
+//   constantCase,
+//   dotCase,
+//   headerCase,
+//   noCase,
+//   paramCase,
+//   pascalCase,
+//   pathCase,
+//   sentenceCase,
+//   snakeCase,
+// } from 'change-case'
+```
+
+or passing a `ref` to it, the returned `computed` will change along with the source ref's changes.
+
+Can be passed into `options` for customization
+
+```ts
+import { useChangeCase } from '@vueuse/integrations/useChangeCase'
+import { shallowRef } from 'vue'
+
+const input = shallowRef('helloWorld')
+const changeCase = useChangeCase(input, 'camelCase', {
+  delimiter: '-',
+})
+changeCase.value // hello-World
+input.value = 'vue use'
+changeCase.value // vue-Use
+```
+
+## Type Declarations
+
+```ts
+type EndsWithCase<T> = T extends `${infer _}Case` ? T : never
+type FilterKeys<T> = {
+  [K in keyof T as K extends string ? K : never]: EndsWithCase<K>
+}
+type ChangeCaseKeys = FilterKeys<typeof changeCase>
+export type ChangeCaseType = ChangeCaseKeys[keyof ChangeCaseKeys]
+export declare function useChangeCase(
+  input: MaybeRef<string>,
+  type: MaybeRefOrGetter<ChangeCaseType>,
+  options?: MaybeRefOrGetter<Options> | undefined,
+): WritableComputedRef<string>
+export declare function useChangeCase(
+  input: MaybeRefOrGetter<string>,
+  type: MaybeRefOrGetter<ChangeCaseType>,
+  options?: MaybeRefOrGetter<Options> | undefined,
+): ComputedRef<string>
+```

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

@@ -0,0 +1,85 @@
+---
+category: '@Math'
+---
+
+# useClamp
+
+Reactively clamp a value between two other values.
+
+## Usage
+
+```ts
+import { useClamp } from '@vueuse/math'
+
+const min = shallowRef(0)
+const max = shallowRef(10)
+const value = useClamp(0, min, max)
+```
+
+### Writable Ref
+
+When you pass a mutable `ref`, the returned value is a **writable computed** that clamps values when setting:
+
+```ts
+import { useClamp } from '@vueuse/math'
+
+const number = shallowRef(0)
+const clamped = useClamp(number, 0, 10)
+
+clamped.value = 15 // clamped.value will be 10
+clamped.value = -5 // clamped.value will be 0
+```
+
+### Read-only Mode
+
+When you pass a getter function or readonly ref, the returned value is a read-only computed:
+
+```ts
+import { useClamp } from '@vueuse/math'
+
+const value = ref(5)
+const clamped = useClamp(() => value.value * 2, 0, 10)
+
+// clamped.value is computed from the getter
+```
+
+### Reactive Bounds
+
+All arguments (value, min, max) can be reactive:
+
+```ts
+import { useClamp } from '@vueuse/math'
+
+const value = shallowRef(5)
+const min = shallowRef(0)
+const max = shallowRef(10)
+
+const clamped = useClamp(value, min, max)
+
+max.value = 3 // clamped.value automatically becomes 3
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Reactively clamp a value between two other values.
+ *
+ * @see https://vueuse.org/useClamp
+ * @param value number
+ * @param min
+ * @param max
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useClamp(
+  value: ReadonlyRefOrGetter<number>,
+  min: MaybeRefOrGetter<number>,
+  max: MaybeRefOrGetter<number>,
+): ComputedRef<number>
+export declare function useClamp(
+  value: MaybeRefOrGetter<number>,
+  min: MaybeRefOrGetter<number>,
+  max: MaybeRefOrGetter<number>,
+): Ref<number>
+```

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

@@ -0,0 +1,123 @@
+---
+category: Browser
+---
+
+# useClipboard
+
+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.
+
+<CourseLink href="https://vueschool.io/lessons/reactive-browser-wrappers-in-vueuse-useclipboard?friend=vueuse">Learn how to reactively save text to the clipboard with this FREE video lesson from Vue School!</CourseLink>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const source = ref('Hello')
+const { text, copy, copied, isSupported } = useClipboard({ 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>{{ text || 'none' }}</code></p>
+  </div>
+  <p v-else>
+    Your browser does not support Clipboard API
+  </p>
+</template>
+```
+
+### Options
+
+| Option         | Type                       | Default | Description                                                       |
+| -------------- | -------------------------- | ------- | ----------------------------------------------------------------- |
+| `source`       | `MaybeRefOrGetter<string>` | —       | Default content to copy when `copy()` is called without arguments |
+| `read`         | `boolean`                  | `false` | Enable reading clipboard content on copy/cut events               |
+| `copiedDuring` | `number`                   | `1500`  | Milliseconds before `copied` resets to `false`                    |
+| `legacy`       | `boolean`                  | `false` | Fallback to `document.execCommand` if Clipboard API unavailable   |
+
+### Return Values
+
+| Property      | Type                               | Description                                       |
+| ------------- | ---------------------------------- | ------------------------------------------------- |
+| `isSupported` | `ComputedRef<boolean>`             | Whether clipboard is supported (native or legacy) |
+| `text`        | `Ref<string>`                      | Current clipboard content (when `read: true`)     |
+| `copied`      | `Ref<boolean>`                     | `true` after successful copy, auto-resets         |
+| `copy`        | `(text?: string) => Promise<void>` | Copy text to clipboard                            |
+
+### Legacy Mode
+
+Set `legacy: true` to keep the ability to copy if [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is not available. It will handle copy with [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) as fallback.
+
+```ts
+const { copy, isSupported } = useClipboard({ legacy: true })
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseClipboard v-slot="{ copy, copied }" source="copy me">
+    <button @click="copy()">
+      {{ copied ? 'Copied' : 'Copy' }}
+    </button>
+  </UseClipboard>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseClipboardOptions<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
+  /**
+   * Whether fallback to document.execCommand('copy') if clipboard is undefined.
+   *
+   * @default false
+   */
+  legacy?: boolean
+}
+export interface UseClipboardReturn<Optional> {
+  isSupported: ComputedRef<boolean>
+  text: Readonly<ShallowRef<string>>
+  copied: Readonly<ShallowRef<boolean>>
+  copy: Optional extends true
+    ? (text?: string) => Promise<void>
+    : (text: string) => Promise<void>
+}
+/**
+ * Reactive Clipboard API.
+ *
+ * @see https://vueuse.org/useClipboard
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useClipboard(
+  options?: UseClipboardOptions<undefined>,
+): UseClipboardReturn<false>
+export declare function useClipboard(
+  options: UseClipboardOptions<MaybeRefOrGetter<string>>,
+): UseClipboardReturn<true>
+```