[6.x] Vue 3 #11339
Draft
[6.x] Vue 3 #11339
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Includes all the dependencies that were already figured out from the other branch.
This is as-is, with import paths updated.
This doesn't actually make it work yet. This code was taken from other branch.
The old way was triggering a warning which is resolved by using shallowRef. This is mostly changing some syntax and moving things around. No logic change.
- Use modelValue prop and update:model-value event so v-model works - Add emits because you have to now - Render function returns first element otherwise this.$el would be a text node. - Swap $on hook:destroyed for the vue 3 way
- Import Fieldtype everywhere rather than relying on it being on window. (Will figure out the best solution for addons later) - Bring back registration of fieldtypes - Bard fieldtypes are commented out since they are quite broken at the moment. - Remove StatusFieldtype as its not used anymore.
…ypes are ... For a little bit of consistency.
- Use new v-calendar - CSS changed a bit due to html changes. - $screens was removed and the suggested migration path was using vue-screen-utils - v-calendar props etc needed to change - Use v-calendar's native popovers instead of our popover components. This *might* reintroduce the z-index issues that we introduced the popovers for initially. Not sure. - HTML indentation is a bit weird because I was trying to only modify the appropriate lines. Didn't want to reformat the whole template and make the diff harder to understand.
Vue would proxy the class. Then accessing private properties on the class throws errors. By marking as raw, it avoids Vue adding the proxy.
Popover: - firstChild is changed to firstElementChild because text nodes would now be included. - class has to become a prop now. Portal: - There's no longer a wrapper div and targetClass prop, so we have to add it ourselves. - The provide prop needs a default otherwise theres an error. Portals: - Passing around a vue instance isn't viable anymore. Replace it with a reactive array in the class. Stack: - Same as earlier - need to add a wrapper div in v-portal. Stacks: - Can't pass around vue instance, so instead pass along the portals class which now has that reactive array.
Before, if you added class="" to a DropdownList, the class would get added to the trigger wrapper and the popover content itself. Now you need to be explicit. <popover class="added to popover" trigger-class="added to trigger wrapper">
Slugify component can no longer v-model. Inject storeName rather than traversing which causes errors. It's already provided.
It uses a fork of vue-toasted (what we used for vue 2) that has vue 3 support. I've consolidated the mixin+bus into one class. Also, simplified and tidied up a few bits.
Converted to beforeUnmount before the $on hook: thing no longer works.
Switch to vue-final-modal since vue-js-modal doesn't support vue 3. Remove shiftY, adaptive, scrollable, and draggable props. There's not a migration path. Removed body-scroll-lock stuff since the new modal is locked by default and scrollable prop is gone. In Modal.vue@close, there's a $wait so it kills the component after the css transition.
In Editor, I removed the modal stuff as it was dead code already. It hasn't been a modal in ages - it was converted to a stack but those lines weren't removed.
Allows things like class="" to be set on it and passed along.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This upgrades Vue 2 to Vue 3.
This takes over from the awesome progress of #10430.