feat: @dnd-kit/vue

[hanneskuettner]

Vue wrapper for dnd-kit

A somewhat small wrapper mapping the dnd-kit core to the Vue reactivity system.

WIP

Currently doing a self review of all the changes, but I wanted to put this out there, for other people to start having a look.

Notes

This wrapper tries to maintain the same API as the React hooks provided in @dnd-kit/react, notable differences being:

• hooks are renamed to composables to fit the Vue nomenclature
• The useDraggable/useDroppable/useSortable composables only accept an Element ref, but don't return a bindable ref for the element, handle, etc. This is a lot more common in the Vue world, to the best of my knowledge, e.g. as seen in this popular composables library: https://vueuse.org/core/useElementSize/

This allows for the following code, to make an element draggable

<script lang="ts" setup>
  import { useTemplateRef } from 'vue';
  import { useDraggable } from '@dnd-kit/vue';

  const elRef = useTemplateRef('el');
  useDraggable({
    id: 'draggable',
    element: elRef
  });
</script>

<template>
  <button ref="el">
    Draggable
  </button>
</template>

TODO

• Update docs
• Create a Vue storybook

Closes #1221

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5b9c9a5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in StackBlitz

@dnd-kit/abstract

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/abstract@1668

@dnd-kit/collision

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/collision@1668

@dnd-kit/dom

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/dom@1668

@dnd-kit/geometry

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/geometry@1668

@dnd-kit/react

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/react@1668

@dnd-kit/helpers

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/helpers@1668

@dnd-kit/state

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/state@1668

@dnd-kit/vue

npm i https://pkg.pr.new/clauderic/dnd-kit/@dnd-kit/vue@1668

commit: 5b9c9a5

[clauderic]

Heroic effort 🙌 Left a few initial questions as I was reading through the code, I haven't used vue much so I definitely learned a lot!

[clauderic]

Should / can these use batch?

[clauderic]

Can we delegate this responsibility to @dnd-kit/dom? I don't remember why I did this in @dnd-kit/react in the first place and not in @dnd-kit/dom instead

[clauderic]

Leaving a note here for us to make sure we sync this with whatever the latest versions are of other packages before merging

[clauderic]

Can we use batch here also?

[clauderic]

Can this ever be true?

[clauderic]

Does this need to be memoized at all? Not super familiar with vue best practices

[denishsharma]

In Vue, reactivity is opt-in unlike in react it's opt-out, that's why react has useMemo, useCallback, etc. So script will run only once, if we want to make it reactive, then we will have to opt-in using ref, computed, watch, watchEffect etc.

So no memoization is needed.

[3dfactor]

Is this moving forward? What needs to be done for this to get merged/supported?