chore(vue): add eslint and prettier (#26635)

packages/vue/src/hooks/back-button.ts

@@ -1,15 +1,20 @@
-import { BackButtonEvent } from '@ionic/core/components';
+import type { BackButtonEvent } from "@ionic/core/components";
 
 type Handler = (processNextHandler: () => void) => Promise<any> | void | null;
 export interface UseBackButtonResult {
   unregister: () => void;
 }
 
-export const useBackButton = (priority: number, handler: Handler): UseBackButtonResult => {
-  const callback = (ev: BackButtonEvent) => ev.detail.register(priority, handler);
-  const unregister = () => document.removeEventListener('ionBackButton', callback);
+export const useBackButton = (
+  priority: number,
+  handler: Handler
+): UseBackButtonResult => {
+  const callback = (ev: BackButtonEvent) =>
+    ev.detail.register(priority, handler);
+  const unregister = () =>
+    document.removeEventListener("ionBackButton", callback);
 
-  document.addEventListener('ionBackButton', callback);
+  document.addEventListener("ionBackButton", callback);
 
   return { unregister };
-}
+};

packages/vue/src/hooks/keyboard.ts

@@ -1,40 +1,41 @@
-import { ref, Ref } from 'vue';
+import type { Ref } from "vue";
+import { ref } from "vue";
 
 export interface UseKeyboardResult {
   isOpen: Ref<boolean>;
   keyboardHeight: Ref<number>;
-  unregister: () => void
+  unregister: () => void;
 }
 
 export const useKeyboard = (): UseKeyboardResult => {
-  let isOpen = ref(false);
-  let keyboardHeight = ref(0);
+  const isOpen = ref(false);
+  const 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.removeEventListener("ionKeyboardDidShow", showCallback);
+      window.removeEventListener("ionKeyboardDidHide", hideCallback);
     }
-  }
+  };
 
-  if (typeof (window as any) !== 'undefined') {
-    window.addEventListener('ionKeyboardDidShow', showCallback);
-    window.addEventListener('ionKeyboardDidHide', hideCallback);
+  if (typeof (window as any) !== "undefined") {
+    window.addEventListener("ionKeyboardDidShow", showCallback);
+    window.addEventListener("ionKeyboardDidHide", hideCallback);
   }
 
   return {
     isOpen,
     keyboardHeight,
-    unregister
-  }
-}
+    unregister,
+  };
+};

packages/vue/src/hooks/lifecycle.ts

@@ -1,16 +1,22 @@
-import { LifecycleHooks } from '../utils';
-import { ComponentInternalInstance, getCurrentInstance } from 'vue';
+import type { ComponentInternalInstance } from "vue";
+import { getCurrentInstance } from "vue";
+
+import { LifecycleHooks } from "../utils";
 
 /**
  * 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 => {
+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] = []);
+    const hooks =
+      target.proxy[lifecycleType] || (target.proxy[lifecycleType] = []);
     /**
      * Define property on public instances using `setup` syntax in Vue 3.x
      */
@@ -29,13 +35,20 @@ const injectHook = (lifecycleType: LifecycleHooks, hook: Function, component: Co
 
     return wrappedHook;
   } else {
-    console.warn('[@ionic/vue]: Ionic Lifecycle Hooks can only be used during execution of setup().');
+    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);
-}
+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);

packages/vue/src/hooks/router.ts

@@ -1,11 +1,11 @@
-import { inject } from 'vue';
-import { AnimationBuilder } from '../';
+import { inject } from "vue";
 
-export type RouteAction = 'push' | 'pop' | 'replace';
-export type RouteDirection = 'forward' | 'back' | 'root' | 'none';
+import type { AnimationBuilder } from "../";
+
+export type RouteAction = "push" | "pop" | "replace";
+export type RouteDirection = "forward" | "back" | "root" | "none";
 
 export interface UseIonRouterResult {
-
   /**
    * The location parameter is really of type 'RouteLocationRaw'
    * imported from vue-router, but the @ionic/vue package should
@@ -29,7 +29,9 @@ export interface UseIonRouterResult {
  * while controlling the animation.
  */
 export const useIonRouter = (): UseIonRouterResult => {
-  const { canGoBack, goBack, goForward, handleNavigate } = inject('navManager') as any;
+  const { canGoBack, goBack, goForward, handleNavigate } = inject(
+    "navManager"
+  ) as any;
 
   const navigate = (
     location: any,
@@ -38,23 +40,16 @@ export const useIonRouter = (): UseIonRouterResult => {
     routerAnimation?: AnimationBuilder
   ) => handleNavigate(location, routerAction, routerDirection, routerAnimation);
 
-  const push = (
-    location: any,
-    routerAnimation?: AnimationBuilder
-  ) => navigate(location, 'forward', 'push', routerAnimation);
+  const push = (location: any, routerAnimation?: AnimationBuilder) =>
+    navigate(location, "forward", "push", routerAnimation);
 
-  const replace = (
-    location: any,
-    routerAnimation?: AnimationBuilder
-  ) => navigate(location, 'root', 'replace', routerAnimation);
+  const replace = (location: any, routerAnimation?: AnimationBuilder) =>
+    navigate(location, "root", "replace", routerAnimation);
 
-  const back = (
-    routerAnimation?: AnimationBuilder
-  ) => goBack(routerAnimation);
+  const back = (routerAnimation?: AnimationBuilder) => goBack(routerAnimation);
 
-  const forward = (
-    routerAnimation?: AnimationBuilder
-  ) => goForward(routerAnimation);
+  const forward = (routerAnimation?: AnimationBuilder) =>
+    goForward(routerAnimation);
 
   return {
     canGoBack,
@@ -62,8 +57,6 @@ export const useIonRouter = (): UseIonRouterResult => {
     replace,
     back,
     forward,
-    navigate
-  } as UseIonRouterResult
-}
-
-
+    navigate,
+  } as UseIonRouterResult;
+};