devskill 2.0.2

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

@@ -0,0 +1,182 @@
+---
+category: Component
+---
+
+# useVModel
+
+Shorthand for v-model binding, props + emit -> ref
+
+> We encourage you to use Vue's [`defineModel`](https://vuejs.org/api/sfc-script-setup.html#definemodel) over this composable, however there are some edge-cases like using `TSX` or the `deep: true` option that `defineModel` doesn't support.
+
+## Usage
+
+```ts
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+
+const data = useVModel(props, 'modelValue', emit)
+```
+
+### Options API
+
+```ts
+import { useVModel } from '@vueuse/core'
+
+export default {
+  setup(props, { emit }) {
+    const data = useVModel(props, 'data', emit)
+
+    console.log(data.value) // props.data
+    data.value = 'foo' // emit('update:data', 'foo')
+  },
+}
+```
+
+## Options
+
+### Passive Mode
+
+By default, `useVModel` returns a computed ref. In passive mode, it creates a local ref that syncs with the prop via `watch`, allowing deep reactivity tracking.
+
+```ts
+const data = useVModel(props, 'modelValue', emit, { passive: true })
+```
+
+### Deep Watching
+
+When using `passive: true`, you can enable deep watching for nested object changes:
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  passive: true,
+  deep: true,
+})
+```
+
+### Clone Values
+
+Clone the prop value to avoid mutating the original object. Set to `true` to use `JSON.parse(JSON.stringify())` or provide a custom clone function.
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  clone: true,
+  // or provide custom clone function
+  // clone: (val) => structuredClone(val),
+})
+```
+
+### Default Value
+
+Provide a default value when the prop is undefined:
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  defaultValue: 'default',
+})
+```
+
+### Custom Event Name
+
+Override the default `update:propName` event name:
+
+```ts
+const data = useVModel(props, 'value', emit, {
+  eventName: 'change',
+})
+```
+
+### Emit Validation
+
+Use `shouldEmit` to validate before emitting. Return `false` to prevent the emit:
+
+```ts
+const data = useVModel(props, 'modelValue', emit, {
+  shouldEmit: (value) => {
+    // Only emit if value is valid
+    return value.length > 0
+  },
+})
+```
+
+## Type Declarations
+
+```ts
+export interface UseVModelOptions<T, Passive extends boolean = false> {
+  /**
+   * When passive is set to `true`, it will use `watch` to sync with props and ref.
+   * Instead of relying on the `v-model` or `.sync` to work.
+   *
+   * @default false
+   */
+  passive?: Passive
+  /**
+   * When eventName is set, it's value will be used to overwrite the emit event name.
+   *
+   * @default undefined
+   */
+  eventName?: string
+  /**
+   * Attempting to check for changes of properties in a deeply nested object or array.
+   * Apply only when `passive` option is set to `true`
+   *
+   * @default false
+   */
+  deep?: boolean
+  /**
+   * Defining default value for return ref when no value is passed.
+   *
+   * @default undefined
+   */
+  defaultValue?: T
+  /**
+   * Clone the props.
+   * Accepts a custom clone function.
+   * When setting to `true`, it will use `JSON.parse(JSON.stringify(value))` to clone.
+   *
+   * @default false
+   */
+  clone?: boolean | CloneFn<T>
+  /**
+   * The hook before triggering the emit event can be used for form validation.
+   * if false is returned, the emit event will not be triggered.
+   *
+   * @default undefined
+   */
+  shouldEmit?: (v: T) => boolean
+}
+/**
+ * Shorthand for v-model binding, props + emit -> ref
+ *
+ * @see https://vueuse.org/useVModel
+ * @param props
+ * @param key (default 'modelValue')
+ * @param emit
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useVModel<
+  P extends object,
+  K extends keyof P,
+  Name extends string,
+>(
+  props: P,
+  key?: K,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<P[K], false>,
+): WritableComputedRef<P[K]>
+export declare function useVModel<
+  P extends object,
+  K extends keyof P,
+  Name extends string,
+>(
+  props: P,
+  key?: K,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<P[K], true>,
+): Ref<UnwrapRef<P[K]>>
+```

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

@@ -0,0 +1,67 @@
+---
+category: Component
+related: useVModel
+---
+
+# useVModels
+
+Shorthand for props v-model binding. Think it like `toRefs(props)` but changes will also trigger emit.
+
+## Usage
+
+```ts
+import { useVModels } from '@vueuse/core'
+
+const props = defineProps({
+  foo: string,
+  bar: number,
+})
+
+const emit = defineEmits(['update:foo', 'update:bar'])
+
+const { foo, bar } = useVModels(props, emit)
+```
+
+### Options API
+
+```ts
+import { useVModels } from '@vueuse/core'
+
+export default {
+  props: {
+    foo: String,
+    bar: Number,
+  },
+  setup(props, { emit }) {
+    const { foo, bar } = useVModels(props, emit)
+
+    console.log(foo.value) // props.foo
+    foo.value = 'foo' // emit('update:foo', 'foo')
+  },
+}
+```
+
+## Type Declarations
+
+```ts
+/**
+ * Shorthand for props v-model binding. Think like `toRefs(props)` but changes will also emit out.
+ *
+ * @see https://vueuse.org/useVModels
+ * @param props
+ * @param emit
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useVModels<P extends object, Name extends string>(
+  props: P,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<any, true>,
+): ToRefs<P>
+export declare function useVModels<P extends object, Name extends string>(
+  props: P,
+  emit?: (name: Name, ...args: any[]) => void,
+  options?: UseVModelOptions<any, false>,
+): ToRefs<P>
+```

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

@@ -0,0 +1,87 @@
+---
+category: Browser
+---
+
+# useVibrate
+
+Reactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
+
+Most modern mobile devices include vibration hardware, which lets software
+code provides physical feedback to the user by causing the device to shake.
+
+The Vibration API offers Web apps the ability to access this hardware,
+if it exists, and does nothing if the device doesn't support it.
+
+## Usage
+
+Vibration is described as a pattern of on-off pulses, which may be of varying
+lengths.
+
+The pattern may consist of either a single integer describing the
+number of milliseconds to vibrate, or an array of integers describing
+a pattern of vibrations and pauses.
+
+```ts
+import { useVibrate } from '@vueuse/core'
+
+// This vibrates the device for 300 ms
+// then pauses for 100 ms before vibrating the device again for another 300 ms:
+const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })
+
+// Start the vibration, it will automatically stop when the pattern is complete:
+vibrate()
+
+// But if you want to stop it, you can:
+stop()
+```
+
+## Type Declarations
+
+```ts
+export interface UseVibrateOptions
+  extends ConfigurableNavigator, ConfigurableScheduler {
+  /**
+   *
+   * Vibration Pattern
+   *
+   * An array of values describes alternating periods in which the
+   * device is vibrating and not vibrating. Each value in the array
+   * is converted to an integer, then interpreted alternately as
+   * the number of milliseconds the device should vibrate and the
+   * number of milliseconds it should not be vibrating
+   *
+   * @default []
+   *
+   */
+  pattern?: MaybeRefOrGetter<Arrayable<number>>
+  /**
+   * Interval to run a persistent vibration, in ms
+   *
+   * Pass `0` to disable
+   *
+   * @deprecated Please use `scheduler` option instead
+   * @default 0
+   *
+   */
+  interval: number
+}
+export interface UseVibrateReturn {
+  isSupported: ComputedRef<boolean>
+  pattern: MaybeRefOrGetter<Arrayable<number>>
+  intervalControls?: Pausable
+  vibrate: (pattern?: Arrayable<number>) => void
+  stop: () => void
+}
+/**
+ * Reactive vibrate
+ *
+ * @see https://vueuse.org/useVibrate
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useVibrate(
+  options?: UseVibrateOptions,
+): UseVibrateReturn
+```

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

@@ -0,0 +1,182 @@
+---
+category: Component
+---
+
+# useVirtualList
+
+::: warning
+Consider using [`@tanstack/vue-virtual`](https://tanstack.com/virtual/v3/docs/framework/vue/vue-virtual) instead, if you are looking for more features.
+:::
+
+Create virtual lists with ease. Virtual lists (sometimes called [_virtual scrollers_](https://vue-virtual-scroller-demo.netlify.app/)) allow you to render a large number of items performantly. They only render the minimum number of DOM nodes necessary to show the items within the `container` element by using the `wrapper` element to emulate the container element's full height.
+
+## Usage
+
+### Simple list
+
+```ts
+import { useVirtualList } from '@vueuse/core'
+
+const { list, containerProps, wrapperProps } = useVirtualList(
+  Array.from(Array.from({ length: 99999 }).keys()),
+  {
+    // Keep `itemHeight` in sync with the item's row.
+    itemHeight: 22,
+  },
+)
+```
+
+### Config
+
+| State      | Type     | Description                                                                                     |
+| ---------- | -------- | ----------------------------------------------------------------------------------------------- |
+| itemHeight | `number` | ensure that the total height of the `wrapper` element is calculated correctly.\*                |
+| itemWidth  | `number` | ensure that the total width of the `wrapper` element is calculated correctly.\*                 |
+| overscan   | `number` | number of pre-rendered DOM nodes. Prevents whitespace between items if you scroll very quickly. |
+
+\* The `itemHeight` or `itemWidth` must be kept in sync with the height of each row rendered. If you are seeing extra whitespace or jitter when scrolling to the bottom of the list, ensure the `itemHeight` or `itemWidth` is the same height as the row.
+
+### Reactive list
+
+```ts
+import { useToggle, useVirtualList } from '@vueuse/core'
+import { computed } from 'vue'
+
+const [isEven, toggle] = useToggle()
+const allItems = Array.from(Array.from({ length: 99999 }).keys())
+const filteredList = computed(() => allItems.filter(i => isEven.value ? i % 2 === 0 : i % 2 === 1))
+
+const { list, containerProps, wrapperProps } = useVirtualList(
+  filteredList,
+  {
+    itemHeight: 22,
+  },
+)
+```
+
+```vue
+<template>
+  <p>Showing {{ isEven ? 'even' : 'odd' }} items</p>
+  <button @click="toggle">
+    Toggle Even/Odd
+  </button>
+  <div v-bind="containerProps" style="height: 300px">
+    <div v-bind="wrapperProps">
+      <div v-for="item in list" :key="item.index" style="height: 22px">
+        Row: {{ item.data }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+### Horizontal list
+
+```ts
+import { useVirtualList } from '@vueuse/core'
+
+const allItems = Array.from(Array.from({ length: 99999 }).keys())
+
+const { list, containerProps, wrapperProps } = useVirtualList(
+  allItems,
+  {
+    itemWidth: 200,
+  },
+)
+```
+
+```vue
+<template>
+  <div v-bind="containerProps" style="height: 300px">
+    <div v-bind="wrapperProps">
+      <div v-for="item in list" :key="item.index" style="width: 200px">
+        Row: {{ item.data }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseVirtualList :list="list" :options="options" height="300px">
+    <template #default="props">
+      <!-- you can get current item of list here -->
+      <div style="height: 22px">
+        Row {{ props.index }} {{ props.data }}
+      </div>
+    </template>
+  </UseVirtualList>
+</template>
+```
+
+To scroll to a specific element, the component exposes `scrollTo(index: number) => void`.
+
+## Type Declarations
+
+```ts
+type UseVirtualListItemSize = number | ((index: number) => number)
+export interface UseHorizontalVirtualListOptions extends UseVirtualListOptionsBase {
+  /**
+   * item width, accept a pixel value or a function that returns the width
+   *
+   * @default 0
+   */
+  itemWidth: UseVirtualListItemSize
+}
+export interface UseVerticalVirtualListOptions extends UseVirtualListOptionsBase {
+  /**
+   * item height, accept a pixel value or a function that returns the height
+   *
+   * @default 0
+   */
+  itemHeight: UseVirtualListItemSize
+}
+export interface UseVirtualListOptionsBase {
+  /**
+   * the extra buffer items outside of the view area
+   *
+   * @default 5
+   */
+  overscan?: number
+}
+export type UseVirtualListOptions =
+  | UseHorizontalVirtualListOptions
+  | UseVerticalVirtualListOptions
+export interface UseVirtualListItem<T> {
+  data: T
+  index: number
+}
+export interface UseVirtualListReturn<T> {
+  list: Ref<UseVirtualListItem<T>[]>
+  scrollTo: (index: number) => void
+  containerProps: {
+    ref: Ref<HTMLElement | null>
+    onScroll: () => void
+    style: StyleValue
+  }
+  wrapperProps: ComputedRef<{
+    style:
+      | {
+          width: string
+          height: string
+          marginTop: string
+        }
+      | {
+          width: string
+          height: string
+          marginLeft: string
+          display: string
+        }
+  }>
+}
+/**
+ * Please consider using [`vue-virtual-scroller`](https://github.com/Akryum/vue-virtual-scroller) if you are looking for more features.
+ */
+export declare function useVirtualList<T = any>(
+  list: MaybeRef<readonly T[]>,
+  options: UseVirtualListOptions,
+): UseVirtualListReturn<T>
+```

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

@@ -0,0 +1,50 @@
+---
+category: Browser
+---
+
+# useWakeLock
+
+Reactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API). Provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.
+
+## Usage
+
+```ts
+import { useWakeLock } from '@vueuse/core'
+
+const { isSupported, isActive, forceRequest, request, release } = useWakeLock()
+```
+
+When `request` is called, the wake lock will be requested if the document is visible. Otherwise, the request will be queued until the document becomes visible. If the request is successful, `isActive` will be **true**. Whenever the document is hidden, the `isActive` will be **false**.
+
+When `release` is called, the wake lock will be released. If there is a queued request, it will be canceled.
+
+To request a wake lock immediately, even if the document is hidden, use `forceRequest`. Note that this may throw an error if the document is hidden.
+
+## Type Declarations
+
+```ts
+type WakeLockType = "screen"
+export interface WakeLockSentinel extends EventTarget {
+  type: WakeLockType
+  released: boolean
+  release: () => Promise<void>
+}
+export type UseWakeLockOptions = ConfigurableNavigator & ConfigurableDocument
+/**
+ * Reactive Screen Wake Lock API.
+ *
+ * @see https://vueuse.org/useWakeLock
+ * @param options
+ *
+ * @__NO_SIDE_EFFECTS__
+ */
+export declare function useWakeLock(options?: UseWakeLockOptions): {
+  sentinel: ShallowRef<WakeLockSentinel | null, WakeLockSentinel | null>
+  isSupported: ComputedRef<boolean>
+  isActive: ComputedRef<boolean>
+  request: (type: WakeLockType) => Promise<void>
+  forceRequest: (type: WakeLockType) => Promise<void>
+  release: () => Promise<void>
+}
+export type UseWakeLockReturn = ReturnType<typeof useWakeLock>
+```