chore(): sync with main

packages/vue/src/components/IonTabBar.ts

@@ -115,9 +115,10 @@ export const IonTabBar = defineComponent({
          * land on /tabs/tab1/child instead of /tabs/tab1.
          */
         if (activeTab !== prevActiveTab || (prevHref !== currentRoute.pathname)) {
+          const search = (currentRoute.search !== undefined) ? `?${currentRoute.search}` : '';
           tabs[activeTab] = {
             ...tabs[activeTab],
-            currentHref: currentRoute.pathname + (currentRoute.search || '')
+            currentHref: currentRoute.pathname + search
           }
         }
 

packages/vue/src/hooks.ts

@@ -0,0 +1,112 @@
+import { BackButtonEvent } from '@ionic/core';
+import {
+  inject,
+  ref,
+  Ref,
+  ComponentInternalInstance,
+  getCurrentInstance
+} from 'vue';
+import { LifecycleHooks } from './utils';
+
+type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
+
+export interface IonRouter {
+  canGoBack: (deep?: number) => boolean;
+}
+
+export interface IonKeyboardRef {
+  isOpen: Ref<boolean>;
+  keyboardHeight: Ref<number>;
+  unregister: () => void
+}
+
+export const useBackButton = (priority: number, handler: Handler) => {
+  const callback = (ev: BackButtonEvent) => ev.detail.register(priority, handler);
+  const unregister = () => document.removeEventListener('ionBackButton', callback);
+
+  document.addEventListener('ionBackButton', callback);
+
+  return { unregister };
+}
+
+export const useIonRouter = (): IonRouter => {
+  const { canGoBack } = inject('navManager') as any;
+
+  return {
+    canGoBack
+  } as IonRouter
+}
+
+export const useKeyboard = (): IonKeyboardRef => {
+  let isOpen = ref(false);
+  let keyboardHeight = ref(0);
+
+  const showCallback = (ev: CustomEvent) => {
+    isOpen.value = true;
+    keyboardHeight.value = ev.detail.keyboardHeight;
+  }
+
+  const hideCallback = () => {
+    isOpen.value = false;
+    keyboardHeight.value = 0;
+  }
+
+  const unregister = () => {
+    if (typeof (window as any) !== 'undefined') {
+      window.removeEventListener('ionKeyboardDidShow', showCallback);
+      window.removeEventListener('ionKeyboardDidHide', hideCallback);
+    }
+  }
+
+  if (typeof (window as any) !== 'undefined') {
+    window.addEventListener('ionKeyboardDidShow', showCallback);
+    window.addEventListener('ionKeyboardDidHide', hideCallback);
+  }
+
+  return {
+    isOpen,
+    keyboardHeight,
+    unregister
+  }
+}
+
+/**
+ * Creates an returns a function that
+ * can be used to provide a lifecycle hook.
+ */
+const injectHook = (lifecycleType: LifecycleHooks, hook: Function, component: ComponentInternalInstance | null): Function | undefined => {
+  if (component) {
+
+    // Add to public instance so it is accessible to IonRouterOutlet
+    const target = component as any;
+    const hooks = target.proxy[lifecycleType] || (target.proxy[lifecycleType] = []);
+    /**
+     * Define property on public instances using `setup` syntax in Vue 3.x
+     */
+    if (target.exposed) {
+      target.exposed[lifecycleType] = hooks;
+    }
+    const wrappedHook = (...args: unknown[]) => {
+      if (target.isUnmounted) {
+        return;
+      }
+
+      return args ? hook(...args) : hook();
+    };
+
+    hooks.push(wrappedHook);
+
+    return wrappedHook;
+  } else {
+    console.warn('[@ionic/vue]: Ionic Lifecycle Hooks can only be used during execution of setup().');
+  }
+}
+
+const createHook = <T extends Function = () => any>(lifecycle: LifecycleHooks) => {
+  return (hook: T, target: ComponentInternalInstance | null = getCurrentInstance()) => injectHook(lifecycle, hook, target);
+}
+
+export const onIonViewWillEnter = createHook(LifecycleHooks.WillEnter);
+export const onIonViewDidEnter = createHook(LifecycleHooks.DidEnter);
+export const onIonViewWillLeave = createHook(LifecycleHooks.WillLeave);
+export const onIonViewDidLeave = createHook(LifecycleHooks.DidLeave);