vue-dnd-kit

Documentación/API

Tipos comunes

Los tipos pequeños a los que remiten todas las páginas de la API — claves, coordenadas, rectángulos, refs de elementos y opciones reactivas.

Editar esta página

Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés

Opciones reactivas

La mayoría de las opciones aceptan un valor, una ref o un getter, y se leen cuando se necesitan: un cambio se aplica, como muy tarde, en el siguiente arrastre. Las tablas las marcan con valor · ref · getter.

Un valor, un getter o cualquier ref (escribible, shallow, computed, readonly — por ejemplo de useTemplateRef) que la biblioteca solo lee. A diferencia del MaybeRefOrGetter de Vue, acepta Ref<string> donde se espera string | number.

type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)

Un valor o cualquier ref, para opciones en las que una función es un valor en sí (un componente de overlay, una regla de aceptación, una animación personalizada), así que un getter no se podría distinguir. Guarda los componentes en una shallowRef (o en un computed): Vue no debe hacerlos reactivos.

type MaybeReadonlyRef = T | Readonly<Ref<T>>

Elementos

El elemento con el que trabaja un composable (makeDraggable(target)): el elemento, una ref de plantilla (useTemplateRef) o un getter. Puede cambiar (un v-if): la biblioteca lo sigue.

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

Un elemento: un elemento HTML o SVG, o una instancia de componente (su elemento raíz, $el), tal como los da una ref de plantilla. null o undefined mientras no hay ninguno (aún no montado).

type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefined

Claves y geometría

Un id o una clave: de un elemento arrastrable, un destino de drop, una lista, un ítem de una lista.

type Key = string | number

Un punto o un desplazamiento, en px: una posición desde la esquina superior izquierda del viewport, o un desplazamiento desde donde empezó el arrastre (delta, transform).

x
number

Horizontal, crece hacia la derecha.

y
number

Vertical, crece hacia abajo.

Un ancho y un alto, en px.

width
number

Ancho en px.

height
number

Alto en px.

Una caja en px, en coordenadas del viewport, tal como la da getBoundingClientRect().

top
number

Su borde superior, desde la parte de arriba del viewport.

left
number

Su borde izquierdo, desde la izquierda del viewport.

width
number

Su ancho.

height
number

Su alto.

right
number

Su borde derecho, desde la izquierda del viewport: left + width.

bottom
number

Su borde inferior, desde la parte de arriba del viewport: top + height.

Estado

Lo que está haciendo el provider:

  • 'idle': nada;
  • 'activating': una pulsación espera su condición de activación (una distancia, una pulsación larga);
  • 'dragging': hay un arrastre en curso;
  • 'dropping': se está decidiendo un drop (un onBeforeDrop asíncrono), o un overlay aún aterriza;
  • 'selecting': un área de selección dibuja su rectángulo.
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

Cómo se mueve un arrastre, sea cual sea el sensor que lo dirige (SensorActivation.type): 'pointer' sigue puntos, 'keyboard' se mueve de ítem en ítem.

type SensorType = 'pointer' | 'keyboard'

El tipo de puntero que pulsó (PointerEvent.pointerType): la activación se configura por tipo.

type PointerKind = 'mouse' | 'touch' | 'pen'

Un valor, o una promesa de él: lo que devuelve un hook que puede ser asíncrono (onBeforeDrop).

type MaybePromise = T | Promise<T>