devskill 2.0.2

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

@@ -0,0 +1,317 @@
+---
+category: Elements
+---
+
+# useDraggable
+
+Make elements draggable.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useDraggable } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+
+// `style` will be a helper computed for `left: ?px; top: ?px;`
+const { x, y, style } = useDraggable(el, {
+  initialValue: { x: 40, y: 40 },
+})
+</script>
+
+<template>
+  <div ref="el" :style="style" style="position: fixed">
+    Drag me! I am at {{ x }}, {{ y }}
+  </div>
+</template>
+```
+
+### Return Values
+
+| Property     | Type                   | Description                             |
+| ------------ | ---------------------- | --------------------------------------- |
+| `x`          | `Ref<number>`          | Current x position                      |
+| `y`          | `Ref<number>`          | Current y position                      |
+| `position`   | `Ref<{x, y}>`          | Current position object                 |
+| `isDragging` | `ComputedRef<boolean>` | Whether currently dragging              |
+| `style`      | `ComputedRef<string>`  | CSS style string `left: ?px; top: ?px;` |
+
+### Options
+
+```ts
+useDraggable(el, {
+  // Initial position (default: { x: 0, y: 0 })
+  initialValue: { x: 40, y: 40 },
+  // Restrict dragging to specific axis: 'x', 'y', or 'both' (default)
+  axis: 'both',
+  // Only trigger when clicking directly on the element (default: false)
+  exact: false,
+  // Prevent default browser behavior (default: false)
+  preventDefault: true,
+  // Stop event propagation (default: false)
+  stopPropagation: false,
+  // Use capture phase for events (default: true)
+  capture: true,
+  // Disable dragging (default: false)
+  disabled: false,
+  // Mouse buttons that trigger drag (default: [0] - left button)
+  buttons: [0],
+  // Pointer types to listen to (default: ['mouse', 'touch', 'pen'])
+  pointerTypes: ['mouse', 'touch', 'pen'],
+  // Custom drag handle element (default: target element)
+  handle: handleRef,
+  // Container element for bounds (default: none)
+  containerElement: containerRef,
+  // Element to attach pointermove/pointerup events (default: window)
+  draggingElement: window,
+  // Callbacks
+  onStart: (position, event) => {
+    // Return false to prevent dragging
+  },
+  onMove: (position, event) => {},
+  onEnd: (position, event) => {},
+})
+```
+
+### Prevent Default
+
+Set `preventDefault: true` to override the default drag-and-drop behavior of certain elements in the browser (e.g., images).
+
+```ts
+import { useDraggable } from '@vueuse/core'
+
+const { x, y, style } = useDraggable(el, {
+  preventDefault: true,
+})
+```
+
+### Container Bounds
+
+Use `containerElement` to constrain dragging within a container.
+
+```ts
+import { useDraggable } from '@vueuse/core'
+
+const { x, y } = useDraggable(el, {
+  containerElement: containerRef,
+})
+```
+
+Set `autoScroll: true` to enable auto-scroll when dragging near the edges.
+
+```ts
+const { x, y, style } = useDraggable(el, {
+  autoScroll: {
+    speed: 2, // Control the speed of auto-scroll.
+    margin: 30, // Set the margin from the edge that triggers auto-scroll.
+    direction: 'both' // Determine the direction of auto-scroll.
+  },
+})
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseDraggable v-slot="{ x, y }" :initial-value="{ x: 10, y: 10 }">
+    Drag me! I am at {{ x }}, {{ y }}
+  </UseDraggable>
+</template>
+```
+
+For component usage, additional props `storageKey` and `storageType` can be passed to the component and enable the persistence of the element position.
+
+```vue
+<template>
+  <UseDraggable storage-key="vueuse-draggable" storage-type="session">
+    Refresh the page and I am still in the same position!
+  </UseDraggable>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDraggableOptions {
+  /**
+   * Only start the dragging when click on the element directly
+   *
+   * @default false
+   */
+  exact?: MaybeRefOrGetter<boolean>
+  /**
+   * Prevent events defaults
+   *
+   * @default false
+   */
+  preventDefault?: MaybeRefOrGetter<boolean>
+  /**
+   * Prevent events propagation
+   *
+   * @default false
+   */
+  stopPropagation?: MaybeRefOrGetter<boolean>
+  /**
+   * Whether dispatch events in capturing phase
+   *
+   * @default true
+   */
+  capture?: boolean
+  /**
+   * Element to attach `pointermove` and `pointerup` events to.
+   *
+   * @default window
+   */
+  draggingElement?: MaybeRefOrGetter<
+    HTMLElement | SVGElement | Window | Document | null | undefined
+  >
+  /**
+   * Element for calculating bounds (If not set, it will use the event's target).
+   *
+   * @default undefined
+   */
+  containerElement?: MaybeRefOrGetter<
+    HTMLElement | SVGElement | null | undefined
+  >
+  /**
+   * Handle that triggers the drag event
+   *
+   * @default target
+   */
+  handle?: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>
+  /**
+   * Pointer types that listen to.
+   *
+   * @default ['mouse', 'touch', 'pen']
+   */
+  pointerTypes?: PointerType[]
+  /**
+   * Initial position of the element.
+   *
+   * @default { x: 0, y: 0 }
+   */
+  initialValue?: MaybeRefOrGetter<Position>
+  /**
+   * Callback when the dragging starts. Return `false` to prevent dragging.
+   */
+  onStart?: (position: Position, event: PointerEvent) => void | false
+  /**
+   * Callback during dragging.
+   */
+  onMove?: (position: Position, event: PointerEvent) => void
+  /**
+   * Callback when dragging end.
+   */
+  onEnd?: (position: Position, event: PointerEvent) => void
+  /**
+   * Axis to drag on.
+   *
+   * @default 'both'
+   */
+  axis?: "x" | "y" | "both"
+  /**
+   * Disabled drag and drop.
+   *
+   * @default false
+   */
+  disabled?: MaybeRefOrGetter<boolean>
+  /**
+   * Mouse buttons that are allowed to trigger drag events.
+   *
+   * - `0`: Main button, usually the left button or the un-initialized state
+   * - `1`: Auxiliary button, usually the wheel button or the middle button (if present)
+   * - `2`: Secondary button, usually the right button
+   * - `3`: Fourth button, typically the Browser Back button
+   * - `4`: Fifth button, typically the Browser Forward button
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button#value
+   * @default [0]
+   */
+  buttons?: MaybeRefOrGetter<number[]>
+  /**
+   * Whether to restrict dragging within the visible area of the container.
+   *
+   * If enabled, the draggable element will not leave the visible area of its container,
+   * ensuring it remains within the viewport of the container during the drag.
+   *
+   * @default false
+   */
+  restrictInView?: MaybeRefOrGetter<boolean>
+  /**
+   * Whether to enable auto-scroll when dragging near the edges.
+   *
+   * @default false
+   */
+  autoScroll?: MaybeRefOrGetter<
+    | boolean
+    | {
+        /**
+         * Speed of auto-scroll.
+         *
+         * @default 2
+         */
+        speed?: MaybeRefOrGetter<number | Position>
+        /**
+         * Margin from the edge to trigger auto-scroll.
+         *
+         * @default 30
+         */
+        margin?: MaybeRefOrGetter<number | Position>
+        /**
+         * Direction of auto-scroll.
+         *
+         * @default 'both'
+         */
+        direction?: "x" | "y" | "both"
+      }
+  >
+}
+/**
+ * Make elements draggable.
+ *
+ * @see https://vueuse.org/useDraggable
+ * @param target
+ * @param options
+ */
+export declare function useDraggable(
+  target: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>,
+  options?: UseDraggableOptions,
+):
+  | {
+      position: Ref<
+        {
+          x: number
+          y: number
+        },
+        | Position
+        | {
+            x: number
+            y: number
+          }
+      >
+      isDragging: ComputedRef<boolean>
+      style: ComputedRef<string>
+      x: Ref<number, number>
+      y: Ref<number, number>
+    }
+  | {
+      position: Ref<
+        {
+          x: number
+          y: number
+        },
+        | Position
+        | {
+            x: number
+            y: number
+          }
+      >
+      isDragging: ComputedRef<boolean>
+      style: ComputedRef<string>
+      x: Ref<number, number>
+      y: Ref<number, number>
+    }
+export type UseDraggableReturn = ReturnType<typeof useDraggable>
+```

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

@@ -0,0 +1,65 @@
+---
+category: '@Integrations'
+---
+
+# useDrauu
+
+Reactive instance for [drauu](https://github.com/antfu/drauu).
+
+## Install
+
+```bash
+npm i drauu@^0
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { toRefs } from '@vueuse/core'
+import { useDrauu } from '@vueuse/integrations/useDrauu'
+import { useTemplateRef } from 'vue'
+
+const target = useTemplateRef('target')
+const { undo, redo, canUndo, canRedo, brush } = useDrauu(target)
+const { color, size } = toRefs(brush)
+</script>
+
+<template>
+  <svg ref="target" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export type UseDrauuOptions = Omit<Options, "el">
+export interface UseDrauuReturn {
+  drauuInstance: Ref<Drauu | undefined>
+  load: (svg: string) => void
+  dump: () => string | undefined
+  clear: () => void
+  cancel: () => void
+  undo: () => boolean | undefined
+  redo: () => boolean | undefined
+  canUndo: ShallowRef<boolean>
+  canRedo: ShallowRef<boolean>
+  brush: Ref<Brush>
+  onChanged: EventHookOn
+  onCommitted: EventHookOn
+  onStart: EventHookOn
+  onEnd: EventHookOn
+  onCanceled: EventHookOn
+}
+/**
+ * Reactive drauu
+ *
+ * @see https://vueuse.org/useDrauu
+ * @param target The target svg element
+ * @param options Drauu Options
+ */
+export declare function useDrauu(
+  target: MaybeComputedElementRef,
+  options?: UseDrauuOptions,
+): UseDrauuReturn
+```

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

@@ -0,0 +1,83 @@
+---
+category: Elements
+---
+
+# useDropZone
+
+Create a zone where files can be dropped.
+
+::: warning
+
+Due to Safari browser limitations, file type validation is only possible during the drop event, not during drag events. As a result, the `isOverDropZone` value will always be `true` during drag operations in Safari, regardless of file type.
+
+:::
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useDropZone } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const dropZoneRef = useTemplateRef('dropZoneRef')
+
+function onDrop(files: File[] | null) {
+  // called when files are dropped on zone
+}
+
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+  onDrop,
+  // specify the types of data to be received.
+  dataTypes: ['image/jpeg'],
+  // control multi-file drop
+  multiple: true,
+  // whether to prevent default behavior for unhandled events
+  preventDefaultForUnhandled: false,
+})
+</script>
+
+<template>
+  <div ref="dropZoneRef">
+    Drop files here
+  </div>
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseDropZoneReturn {
+  files: ShallowRef<File[] | null>
+  isOverDropZone: ShallowRef<boolean>
+}
+export interface UseDropZoneOptions {
+  /**
+   * Allowed data types, if not set, all data types are allowed.
+   * Also can be a function to check the data types.
+   */
+  dataTypes?:
+    | MaybeRef<readonly string[]>
+    | ((types: readonly string[]) => boolean)
+  /**
+   * Similar to dataTypes, but exposes the DataTransferItemList for custom validation.
+   * If provided, this function takes precedence over dataTypes.
+   */
+  checkValidity?: (items: DataTransferItemList) => boolean
+  onDrop?: (files: File[] | null, event: DragEvent) => void
+  onEnter?: (files: File[] | null, event: DragEvent) => void
+  onLeave?: (files: File[] | null, event: DragEvent) => void
+  onOver?: (files: File[] | null, event: DragEvent) => void
+  /**
+   * Allow multiple files to be dropped. Defaults to true.
+   */
+  multiple?: boolean
+  /**
+   * Prevent default behavior for unhandled events. Defaults to false.
+   */
+  preventDefaultForUnhandled?: boolean
+}
+export declare function useDropZone(
+  target: MaybeRefOrGetter<HTMLElement | Document | null | undefined>,
+  options?: UseDropZoneOptions | UseDropZoneOptions["onDrop"],
+): UseDropZoneReturn
+```

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

@@ -0,0 +1,131 @@
+---
+category: Elements
+---
+
+# useElementBounding
+
+Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { useElementBounding } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseElementBounding v-slot="{ width, height }">
+    Width: {{ width }} Height: {{ height }}
+  </UseElementBounding>
+</template>
+```
+
+## Directive Usage
+
+```vue
+<script setup lang="ts">
+import { vElementBounding } from '@vueuse/components'
+
+interface BoundingType {
+  height: number
+  bottom: number
+  left: number
+  right: number
+  top: number
+  width: number
+  x: number
+  y: number
+}
+
+function onBounding({ height, bottom, left, right, top, width, x, y }: BoundingType) {
+  console.log(height, bottom, left, right, top, width, x, y)
+}
+
+const options = {
+  reset: true,
+  windowResize: true,
+  windowScroll: true,
+  immediate: true,
+  updateTiming: 'sync',
+}
+</script>
+
+<template>
+  <textarea v-element-bounding="onBounding" />
+  <!-- with options -->
+  <textarea v-element-bounding="[onBounding, options]" />
+</template>
+```
+
+## Type Declarations
+
+```ts
+export interface UseElementBoundingOptions {
+  /**
+   * Reset values to 0 on component unmounted
+   *
+   * @default true
+   */
+  reset?: boolean
+  /**
+   * Listen to window resize event
+   *
+   * @default true
+   */
+  windowResize?: boolean
+  /**
+   * Listen to window scroll event
+   *
+   * @default true
+   */
+  windowScroll?: boolean
+  /**
+   * Immediately call update on component mounted
+   *
+   * @default true
+   */
+  immediate?: boolean
+  /**
+   * Timing to recalculate the bounding box
+   *
+   * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
+   * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
+   *
+   * @default 'sync'
+   */
+  updateTiming?: "sync" | "next-frame"
+}
+/**
+ * Reactive bounding box of an HTML element.
+ *
+ * @see https://vueuse.org/useElementBounding
+ * @param target
+ */
+export declare function useElementBounding(
+  target: MaybeComputedElementRef,
+  options?: UseElementBoundingOptions,
+): {
+  height: ShallowRef<number, number>
+  bottom: ShallowRef<number, number>
+  left: ShallowRef<number, number>
+  right: ShallowRef<number, number>
+  top: ShallowRef<number, number>
+  width: ShallowRef<number, number>
+  x: ShallowRef<number, number>
+  y: ShallowRef<number, number>
+  update: () => void
+}
+export type UseElementBoundingReturn = ReturnType<typeof useElementBounding>
+```

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

@@ -0,0 +1,48 @@
+---
+category: Sensors
+---
+
+# useElementByPoint
+
+Reactive element by point.
+
+## Usage
+
+```ts
+import { useElementByPoint, useMouse } from '@vueuse/core'
+
+const { x, y } = useMouse({ type: 'client' })
+const { element } = useElementByPoint({ x, y })
+```
+
+## Type Declarations
+
+```ts
+export interface UseElementByPointOptions<Multiple extends boolean = false>
+  extends ConfigurableDocument, ConfigurableScheduler {
+  x: MaybeRefOrGetter<number>
+  y: MaybeRefOrGetter<number>
+  multiple?: MaybeRefOrGetter<Multiple>
+  /** @deprecated Please use `scheduler` option instead */
+  immediate?: boolean
+  /** @deprecated Please use `scheduler` option instead */
+  interval?: "requestAnimationFrame" | number
+}
+export interface UseElementByPointReturn<
+  Multiple extends boolean = false,
+> extends Pausable {
+  isSupported: ComputedRef<boolean>
+  element: ShallowRef<
+    Multiple extends true ? HTMLElement[] : HTMLElement | null
+  >
+}
+/**
+ * Reactive element by point.
+ *
+ * @see https://vueuse.org/useElementByPoint
+ * @param options - UseElementByPointOptions
+ */
+export declare function useElementByPoint<M extends boolean = false>(
+  options: UseElementByPointOptions<M>,
+): UseElementByPointReturn<M>
+```