feat(vue3): migrate to vue3#884
Conversation
53cadea to
2a77b56
Compare
|
@susnux I worked a bit on the migration, but I could use help with the Typescript stuff. |
2a77b56 to
eb35f30
Compare
I will have a look - for the moment I rebased it and fixed some minor issues. |
c8bfcb3 to
5de88d4
Compare
|
Hi @susnux! |
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com> Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org> Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
|
Pushed an update:
|
|
@raimund-schluessler I'll take over the PR to prepare the release soon, if it's ok |
|
Great, please go ahead! |
| h(dialog, { | ||
| props, | ||
| on: { | ||
| close: (...rest: unknown[]) => { | ||
| onClose(...rest.map(v => toRaw(v))) | ||
| vue.$destroy() | ||
| }, | ||
| onClose: (...rest: unknown[]) => { | ||
| onClose(...rest.map(v => toRaw(v))) | ||
| vue.unmount() | ||
| }, | ||
| }), |
There was a problem hiding this comment.
AFAIK, this won't work in Vue 3. We can only pass propsData as the second argument. We need to find another workaround to listen to the close event or simply remove the onClose() handler.
We also need to mount the component explicitly here.
My proposed solution:
const vue = createApp(dialog, props)
vue.mount(el)There was a problem hiding this comment.
The latest version isn't pushed yet, waiting for the nextcloud-vue release.
Also, it (ideally) relies on spawnDialog from nextcloud-vue.
There was a problem hiding this comment.
We can only pass
propsDataas the second argument
This is true for createApp().mount(), not for h
Problem here is that props should be destructured.
There was a problem hiding this comment.
We need to find another workaround to listen to the close event or simply remove the
onClose()handler.
In Vue 3 event handlers always passed as onEven param.
<comp @event="handler" /> is h(comp, { onEvent: handler })
There was a problem hiding this comment.
TIL. I wasn't aware of the advanced features of h.
There was a problem hiding this comment.
for dialogs library this createApp is fine, but for nextcloud-vue it can cause unwanted behavior:
- it does not allow globally registered components in the dialog
- it does not allow to access registered pinia
Use case would be e.g. a settings store for dialog you spawn with API.
No description provided.