Comments (34)
Is anything new here? I wanna use it in my vue3 project. But I have no idea about how to modify it to support vue 3
from easy-dnd.
Update: Started Vue3 support today and plan on finishing it next week! 🥳
from easy-dnd.
Just an update. Majority of functionality is working again. Still a fair bit of code cleanup that I need to do, but progress is definitely being made! :)
from easy-dnd.
Great news. Using render()
has worked! 🥳
Thanks for that @rlemaigre
I am going to be writing all the main components using render() as it seems more efficient
from easy-dnd.
Great news for everyone. Vue 3 beta is now live!
The Vue 2 variant can be found on vue-easy-dnd@^1
as per normal and Vue 3 is v2 or (vue-easy-dnd@latest
).
if anyone is able to, please run it on your Vue 3 projects and report back any problems.
I am taking some time off now over the christmas and new year break so I plan on implementing it into my own Vue 3 project in mid-January, so beta will remain around for a while.
Documentation between both versions are the same. Only difference is any Vue 3 specific code such as how scoped slots and slots are identical.
from easy-dnd.
Implemented it last week in one of our projects, and it is working great! Couldn't notice any differences with the Vue2 version so far.
We are only using the main Drag and Drop components.
Thank you very much @nicholaszuccarelli for the hard work 😄 and enjoy Christmas! 🎄
from easy-dnd.
Great news. I've officially released Vue3 as ^2.0.0
!
Been playing around with the beta on my app and DropList is super stable now. Can't see any differences from the Vue2 version.
Happy days!
If anyone does find a bug, please open a new issue :)
from easy-dnd.
Same for me.
Got the following warning :
[Vue Router warn]: Unexpected error when starting the router: Error: Couldn't resolve component "default" for the following record with path "***" at eval (vue-router.esm-browser.js?954b:1878)
from easy-dnd.
@lukeberryco you probably missed to name your component e.g. :
export default defineComponent({
name:'MyAmazingComp',
components:{...},
setup(){...}
...
})
from easy-dnd.
Interesting, if there is any work happening for upgrading right now
from easy-dnd.
Any updates? Vue 3 is out for awhile
from easy-dnd.
Any updates on this? I would love to use this package for our vue3 projects. Maybe someone who made an initial start were we can work on, don't mind to contribute in this and help but maybe someone made already a head start on this?
from easy-dnd.
I plan on converting my existing Vue2 project to Vue3 at the start of next year and that will also include upgrading this package too. Stay tuned :)
from easy-dnd.
@nicholaszuccarelli Many thanks for your work on this library and on the Vue 3 port in particular.
from easy-dnd.
No worries! Glad to help this project.
It's a great learning experience for me as well, especially because of the Vue3 changes which I'm not familiar with.
from easy-dnd.
No worries! Glad to help this project. It's a great learning experience for me as well, especially because of the Vue3 changes which I'm not familiar with.
Let me know if I can help! Transitioned some other projects to Vue3 recently 😄
from easy-dnd.
Thanks @kimberley2310 :) If I come across any issues next week I'll be sure to shoot a msg across
from easy-dnd.
Stuck on quite a doozy right now!
Because of the Vue3 behaviour for rendering v-if, slots and v-for loops, I am unable to get DropList working as it does on Vue2.
The problem is that every time you drag an item into an inner-DropList (picture below from testing file App7.vue), it is unmounting and remounting the inner DropLists. This is a big problem for very long and complicated droplists, where every drag interaction would cause entire rerendering!
On the Vue2 variant, it does not rerender any of the components because it reuses/saves their specified index within the DropList even when a v-if changes, however Vue3 specifies unique keys to v-ifs which causes every inner-DropList to re-render.
This is the current Vue3 problematic file:
Lines 3 to 29 is where the problem is occurring.
Any help solving this problem would be greatly appreciated.
https://github.com/nicholaszuccarelli/Easy-DnD/blob/vue3-unfinished/lib/src/components/DropList.vue
from easy-dnd.
It's been a long long time since I wrote this so I don't remember well...
I don't see any :key in those v-for's. If I read my docs properly, users are supposed to provide a key for the content of the item slot. Are you sure Vue 3 properly honors those keys ? Maybe something changed with respect to v-for, slots and keys...
Instead of using a v-for on a slot, did you try wrapping the slot in a template and putting the v-for on the template ?
Also, I see those item slots with keys are on different levels in the hierarchy, due to templates with v-ifs. Performance improvements in the virtual dom diffing algorithm may cause Vue 3 to be less smart than Vue2 about this (although it would be surprising that "fake nodes" like templates would mess with this...). Perhaps it would be useful to try to restructure that template to make it simpler (not use those nested levels of template with v-ifs).
You may also try to simplify the template as much as possible (temporarily removing some useful functionality) and see if it works. If it does, add back piece by piece what you removed before, until it breaks again. That might help you to pinpoint the problem.
...just some ideas to play with, hope it can help
from easy-dnd.
I've tried all these steps unfortunately without luck.
due to templates with v-ifs. Performance improvements in the virtual dom diffing algorithm may cause Vue 3 to be less smart than Vue2 about this
Yeah that's right unfortunately. The <templates>
tags are each keyed now in Vue3. This means that the slots within the ifs don't treat them as a single "loop" with a single index as we do with the Vue2 version. This causes the slots to reload every time the drag event interacts with the order position which is incredibly inefficient.
from easy-dnd.
Are you sure about that thing about templates in Vue 3 ? Seems so weird...I always considered template tags as parenthesis : virtual tags used to target a group of other tags to apply a condition or a loop but their presence shouldn't change anything.
...oh I think I get it. It's not related to templates, it's related to v-if, v-else, v-else-if : https://v3-migration.vuejs.org/breaking-changes/key-attribute.html . It seems keys are automatically generated now in that case. What if you force the key explicitly to get back vue 2 behavior ? So on template v-if, you add key = "mykey" and on template v-else, you add key = "mykey" as well (so same key for both branches of condition).
If that doesn't work, you can always use a render function. I never had to do that, and I would be surprised if it really were necessary here. But it would work.
from easy-dnd.
I can't add key = "mykey"
to the tempaltes because it complains with <template> cannot be keyed
. So it must internally key them. But yes you're right about the v3 v-if behaviour.
I'll give render() function a go. Was my last point of attack. It's probably the only way that this will be able to work now.
from easy-dnd.
Using render functions everywhere may make maintenance more difficult and contributions less likely because most people don't know render functions. Also I think render functions may be less efficient than templates sometimes actually (although templates do compile eventually to render functions). That's because the template compiler is very smart in Vue 3 and may produce code that is more efficient than a hand written render function. So I wouldn't rewrite everything with render functions unless there is a compelling reason to do so (like, you do actually need the flexibility of render functions, or you do notice a significant improvement in performance).
Here is another idea worth a try : you could define a "If" component, with a boolean prop and two slots, "true" and "false". When the prop is true, you show the true slot, and the false slot otherwise and of course both slots have the same key (or no key). And that component, you define it with a render function, to get back Vue 2 behavior regarding if-else. Then you use that utility component everywhere you need vue 2 behaving v-if v-else.
What do you think ?
from easy-dnd.
A separate component won't work because it still requires separate if/else states which will still cause the render of separate keys. As far as I can see render() is the only solution to this.
I'll leave DropList as the only render component.
Feel free to have a look at the render() code I used on my fork.
from easy-dnd.
I don't understand this. In a render function, I suppose you can choose the keys as you wish. So what if you have a render function in your "If" component that looks like this :
render() {
if (props.test) {
return vnode(...render true slot..., key = 1)
}
else {
return vnode(...render false slot..., key = 1 too)
}
}
...so when props.test changes value, the render function is called, but it returns a vnode with same key as before. So Vue should try to patch nodes instead of unmount / mount and it should work...maybe. But it's possible I have a bad understanding of how render functions work. I'll take a look at your code.
Another idea I had was simply to use two v-if's instead of a v-if and a v-else to prevent vue from assigning different keys automatically, causing unmounting / mounting when the value of the condition changes. So v-if="condition" and v-if="!condition" instead of v-if v-else.
Thank you for your work on this.
from easy-dnd.
Heres how I understand it now works in Vue3:
For example:
<template v-if="something">
// internal key: A
<slot v-for="i in 5" :key="i" />
// keys 1-5
<template v-else>
// internal key: B
<slot v-for="i in 5" :key="i" />
// keys 1-5
</template>
Internally the keys for each of the slots (for example) would be:
A1, A2, A3, A4, A5 or A(1-5)
B1, B2, B3, B4, B5 or B(1-5)
So any time you create a v-if, that conditional element (including template
) is given an internal key (ie: A, B). Because those conditions change, it causes a rerender for the code inside those specific loops.
But as you mentioned with the render()
example above, because render
internally does not use v-if, v-else-if, v-else
, you are able to produce keys which match the functionality from Vue2
This thought process also matches up with what the migration guide states:
NEW: keys are no longer necessary on v-if/v-else/v-else-if branches, since Vue now automatically generates unique keys
from easy-dnd.
That is great news! I hope to test it in our project maybe this week or next week, so I'll keep you updated :) Enjoy your time off and thanks for all the effort!
from easy-dnd.
Great work !
from easy-dnd.
Thank you. Are you able to produce a CodePen with the error? Or some lines of code showing your component structure etc
from easy-dnd.
Thank you. It's a naming problem. I just solved it
This component is great. Thank you so much for developing this component
from easy-dnd.
Glad you like it!!
Let me know if you come across any other issues.
from easy-dnd.
ok, wish you a merry Christmas on the 25th in advance
from easy-dnd.
Happy new year everyone.
I've released Beta 3 now.
Please note the following:
(REQUIRED FOR Vue 3): Make sure to import the generated CSS file to use the components properly
import 'vue-easy-dnd/dist/dnd.css'
Vue 3 also relies on the Options API and mixins. So make sure you have enabled the Options API on your project (enabled by default)
I've gotten around to installing the plugin on my personal project and have already found some problems with the DropList :-) So I will be looking into these over the next few days.
from easy-dnd.
Beta 4 now available which uses properly Vue3 emits handler. Seems quite stable using DropList now!
from easy-dnd.
Related Issues (20)
- Touchstart event listener causing console warning about scroll-blocking HOT 3
- Mixin introduction error, no component
- Dnd Indicator Mode? Can do it? HOT 1
- Uncaught TypeError in project (.on / .off) HOT 2
- Where can i get source code of a spcified version,like 1.22.0. such as github tags download url HOT 2
- Nested Droplist Example Components not working
- When Easy-DnD is in a dialog, animations only play the first time HOT 2
- Feature request: scrolling speed when dragging HOT 1
- Drag items prevent scroll on mobile, even if there is a `delay` set on the drag items HOT 1
- Please add typescript definitions HOT 2
- Could nice to add a git tag of version 2.1.3 HOT 9
- can not drop again with drop-list HOT 2
- [BUG] DropList DragFeedback item's display is not set to "none" HOT 6
- Errors with @vue/compat HOT 2
- In Safari drag is triggered when option selected in select input field HOT 2
- Is it still being maintained? HOT 3
- Autoscroll flickers when the item is moved during dragging
- Support autoscroll for nested scroll containers
- Reason: ReferenceError: VuePropertyDecorator is not defined
- Is there any Vue3 demo, the main page links are all for Vue2 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from easy-dnd.