[WIP] Chore Vue 3 migration

[Michal-Dziedzinski]

Related issue

Scope of work

Vue 3 migration in progress

Done:

• Install Vue 3 latest realese
• Add eslint rule about current component tags order
• $listeners removed
• Remove inline-template attribute
• Replace refering to elements from $el to $refs
• useMitt composable created to handle events
• Change the way of registering global components
• Import nextTick from vue package
• Replace Vue.observable to reactive
• Change directives hooks lifecycles

To check:

• Is useMitt composable working

To Do:

• Implement Teleports
• Fix v-model directives
• Issue with dynamic directive argument v-slot:[name]

Problems to resolve

• Vue2-leaflet is not compatible with Vue 3 yet https://github.com/vue-leaflet/vue-leaflet last commits 3 months ago
• Storybook Vue 3 version is not ready yet https://github.com/storybookjs/storybook/issues/10654
• $children does not exist in this object in Vue 3, it is needed to find another way to resolve SfAccordion and SfTabs issues
• elm property does not exists in this.$slots, so it's not possible to get innerHTML and offsetHeight properties

Screenshots of visual changes

Checklist

• No commented blocks of code left
• Run tests and docs
• Self code-reviewed

If applicable:

• I followed composition rules for my component
• I tested the component in most common device sizes (can be tested in Storybook from viewport addon in top menu)
• I accept Individual Contributor License Agreement

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}