Add Vue component typings

[heyhippari]

This adds proper TypeScript definitions to the Vue components.

I'm not fully sure everything is 100% good, but it was tested on another project and seems to work fine there, so I figured I'd upstream it.

It is probably missing some things like the emits, but it has all the (current) attributes defined. Emits have been added, so it should have everything now.

I was a bit lost with the multiple package.json files in multiple places, so feel free to correct me if I messed something up 😄

Fixes #3916

Edit: I went over the typings again and fixed a bunch of props, all the defaults and added typings for all the emits/event callbacks.
This should now be pretty much complete.

[heyhippari]

Side note, I originally wanted to port the components to TypeScript, to get automatic typings, but I couldn't figure out how to add TypeScript support to the current build system.

If someone is willing to help to get TypeScript up and running with the existing system, porting the Vue components to TypeScript should be fairly straightforward and will yield better typings than this.

[heyhippari]

Drafting this while I look at some of the properties, as some are incorrect. Updated all the typings and added emits/event callback types.

[nolimits4web]

Merged, thanks! I will add build pipeline

[vltansky]

Side note, I originally wanted to port the components to TypeScript, to get automatic typings, but I couldn't figure out how to add TypeScript support to the current build system.

If someone is willing to help to get TypeScript up and running with the existing system, porting the Vue components to TypeScript should be fairly straightforward and will yield better typings than this.

@nolimits4web maybe migrating the source to TS should be considered?

[nolimits4web]

Side note, I originally wanted to port the components to TypeScript, to get automatic typings, but I couldn't figure out how to add TypeScript support to the current build system.
If someone is willing to help to get TypeScript up and running with the existing system, porting the Vue components to TypeScript should be fairly straightforward and will yield better typings than this.

@nolimits4web maybe migrating the source to TS should be considered?

I think yes, will move Vue to .ts in upcoming releases

[JonathanDn]

Hey @MrTimscampi and @nolimits4web I browsed through the correspondense here and the code merged in this PR and had hopes that it would help my case of Vue having a hard time to infer types inside a Vue.extend({...}) component's $refs.

Any clue to what could help ? I am getting the following error:

TS2339: Property '$swiper' does not exist on type 'Vue | Element | (Vue | Element)[]'.
  Property '$swiper' does not exist on type 'Vue'.

What I had done so far but in vain:

• Upgraded Swiper.js to above version 6.5.2(I assume that is when vue types were added based on this merged PR)
• Installed "@types/swiper": "5.4.3" types in hopes this will help

(attached image shows the culprit throwing the type error)

I would appreciate any best practices how to tackle this.

[heyhippari]

it would help my case of Vue having a hard time to infer types inside a Vue.extend({...}) component'

I have usually had to explicitly type all refs in components (using topRef.$swiper as Swiper or something similar, for Swiper).

[JonathanDn]

Yeah I though about doing the same. @MrTimscampi do you know in which module I can possibly import the interface to than type with as Swiper , like what does the import look like for Swiper type?