vue-dnd-kit

Documentation/API

Types communs

Les petits types auxquels renvoient toutes les pages de l'API — clés, coordonnées, rectangles, refs d'éléments et options réactives.

Modifier cette page

Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais

Options réactives

La plupart des options acceptent une valeur, une ref ou un getter, et sont lues au moment où elles sont nécessaires : un changement s'applique au plus tard au glissement suivant. Les tableaux les signalent par valeur · ref · getter.

Une valeur, un getter ou n'importe quelle ref (modifiable, shallow, computed, readonly — par exemple issue de useTemplateRef) que la bibliothèque se contente de lire. Contrairement au MaybeRefOrGetter de Vue, il accepte Ref<string> là où string | number est attendu.

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

Une valeur ou n'importe quelle ref, pour les options où une fonction est une valeur à part entière (un composant d'overlay, une règle d'acceptation, une animation personnalisée), et où un getter ne pourrait donc pas être distingué. Gardez les composants dans une shallowRef (ou un computed) : Vue ne doit pas les rendre réactifs.

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

Éléments

L'élément sur lequel travaille un composable (makeDraggable(target)) : l'élément, une ref de template (useTemplateRef) ou un getter. Il peut changer (un v-if) : la bibliothèque le suit.

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

Un élément : un élément HTML ou SVG, ou une instance de composant (son élément racine, $el), tels que les donne une ref de template. null ou undefined tant qu'il n'y en a pas (pas encore monté).

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

Clés et géométrie

Un id ou une clé : d'un élément déplaçable, d'une cible de dépôt, d'une liste, d'un item de liste.

type Key = string | number

Un point ou un décalage, en px : une position depuis le coin supérieur gauche du viewport, ou un décalage depuis l'endroit où le glissement a commencé (delta, transform).

x
number

Horizontal, croissant vers la droite.

y
number

Vertical, croissant vers le bas.

Une largeur et une hauteur, en px.

width
number

Largeur en px.

height
number

Hauteur en px.

Une boîte en px, en coordonnées du viewport, telle que la donne getBoundingClientRect().

top
number

Son bord supérieur, depuis le haut du viewport.

left
number

Son bord gauche, depuis la gauche du viewport.

width
number

Sa largeur.

height
number

Sa hauteur.

right
number

Son bord droit, depuis la gauche du viewport : left + width.

bottom
number

Son bord inférieur, depuis le haut du viewport : top + height.

Statut

Ce que fait le provider :

  • 'idle' : rien ;
  • 'activating' : un appui attend sa condition d'activation (une distance, un appui long) ;
  • 'dragging' : un glissement est en cours ;
  • 'dropping' : un dépôt est en cours de décision (un onBeforeDrop asynchrone), ou un overlay atterrit encore ;
  • 'selecting' : une zone de sélection dessine son rectangle.
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

Comment un glissement se déplace, quel que soit le capteur qui le pilote (SensorActivation.type) : 'pointer' suit des points, 'keyboard' se déplace d'item en item.

type SensorType = 'pointer' | 'keyboard'

Le type de pointeur qui a appuyé (PointerEvent.pointerType) : l'activation se règle par type.

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

Une valeur, ou une promesse de cette valeur : ce que renvoie un hook qui peut être asynchrone (onBeforeDrop).

type MaybePromise = T | Promise<T>