Add support for ion-tabs

[michaeltintiuc]

Add support for ion-tabs.

The implementation creates only a single Vue component for ion-tabs, the rest of the functionality is kept as a web component.

Features

• Ability to pass a string or an array of strings of route names to match tabs against to ion-tab via :routes attribute. This enables us to match multiple routes against a single tab for instances of multi-language URLs or SEO-oriented URLs.

• Ability to pass an object containing route data to ion-tab-button, identical to router-link via :to attribute. This enables us to have advanced functionality, starting with using route names for redirection and going as far as passing meta and reactive props data to the route object.

• Ability to pass a custom click handler to ion-tab-button allowing the user to completely override and customize the behaviour.

• Listen to IonTabsWillChange and IonTabsDidChange events, the latter is emitted after a successful navigation and all of the async hooks have resolved

Events lifecycle

1. Custom ion-tab-button click handler
2. IonTabsWillChange event listeners
3. Vue router update hooks
4. IonTabsDidChange event listeners
5. Vue hooks (created, mounted, etc)

Usage

Define the routes:

new IonicVueRouter({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue'),
      children: [
        { path: 'speakers', name: 'speakers' },
        { path: 'schedule', name: 'schedule' },
        { path: 'map', name: 'map' },
      ],
    },
  ],
})

Listen to events:

<ion-tabs @IonTabsWillChange="beforeTabChange" @IonTabsDidChange="afterTabChange">
  ...
</ion-tabs>

The listener function will receive a single parameter of type { path: string } or Route:

interface Route {
  path: string;
  name?: string;
  hash: string;
  query: Dictionary<string | string[]>;
  params: Dictionary<string>;
  fullPath: string;
  matched: RouteRecord[];
  redirectedFrom?: string;
  meta?: any;
}

The contents of the object depend on what you provided (or didn't) as value to the :to attribute to the given ion-tab-button element

Provide a click-handler to ion-tab-button

<ion-tab-button tab="settings" @click="foo">...</ion-tab-button>

This function will be called as the first one, before any other hooks or event listeners.

Tab as a wrapper for a Vue component:

<ion-tab tab="schedule">
  <Schedule />
</ion-tab>

Tab as part of the Vue component:

<Schedule />

<!-- contents of Schedule.vue -->
<ion-tab tab="schedule">
  <ion-content>...</ion-content>
</ion-tab>

Tabs can be rendered via the router (ionic or base) and can also be stored in cache with keep-alive:

<keep-alive>
  <router-view />
</keep-alive>

Since ion-tabs require a router, I have exported the existing ionic/vue router.

Quality of Life improvements:

• Updated usage docs for ion-tabs
• Fixed broken controller cache, as it would call the createApi method each time the $ionic getter would be queried.
• Updates for @ionic/core v4 stable release
• Minor typing fixes