prettier

ionic-team · Jan 25, 2025 · e3d28dc · e3d28dc
1 parent 793a6fa
commit e3d28dc
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 108 deletions.
diff --git a/packages/vue/src/components/IonApp.ts b/packages/vue/src/components/IonApp.ts
@@ -3,21 +3,24 @@ import type { VNode } from "vue";
 import { h, defineComponent, shallowRef } from "vue";
 
 const userComponents = shallowRef([]);
-export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-  defineCustomElement();
-  return () => {
-    return h(
-      "ion-app",
-      {
-        name: "IonApp",
-        ...attrs,
-      },
-      [slots.default && slots.default(), ...userComponents.value]
-    );
-  };
-}, {
-  name: "IonApp",
-});
+export const IonApp = /*@__PURE__*/ defineComponent(
+  (_, { attrs, slots }) => {
+    defineCustomElement();
+    return () => {
+      return h(
+        "ion-app",
+        {
+          name: "IonApp",
+          ...attrs,
+        },
+        [slots.default && slots.default(), ...userComponents.value]
+      );
+    };
+  },
+  {
+    name: "IonApp",
+  }
+);
 
 /**
  * When rendering user components inside of

diff --git a/packages/vue/src/components/IonBackButton.ts b/packages/vue/src/components/IonBackButton.ts
@@ -34,7 +34,8 @@ export const IonBackButton = /*@__PURE__*/ defineComponent(
         slots.default && slots.default()
       );
     };
-  }, {
+  },
+  {
     name: "IonBackButton",
   }
 );
diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts
@@ -4,53 +4,56 @@ import { defineComponent, h, shallowRef } from "vue";
 
 import { VueDelegate } from "../framework-delegate";
 
-export const IonNav = /*@__PURE__*/ defineComponent((props) => {
-  defineCustomElement();
-  const views = shallowRef([]);
+export const IonNav = /*@__PURE__*/ defineComponent(
+  (props) => {
+    defineCustomElement();
+    const views = shallowRef([]);
 
-  /**
-   * Allows us to create the component
-   * within the Vue application context.
-   */
-  const addView = (component: VNode) =>
-    (views.value = [...views.value, component]);
-  const removeView = (component: VNode) =>
-    (views.value = views.value.filter((cmp) => cmp !== component));
+    /**
+     * Allows us to create the component
+     * within the Vue application context.
+     */
+    const addView = (component: VNode) =>
+      (views.value = [...views.value, component]);
+    const removeView = (component: VNode) =>
+      (views.value = views.value.filter((cmp) => cmp !== component));
 
-  const delegate = VueDelegate(addView, removeView);
-  return () => {
-    return h("ion-nav", { ...props, delegate }, views.value);
-  };
-}, {
-  name: "IonNav",
-  /**
-   * The default values follow what is defined at
-   * https://ionicframework.com/docs/api/nav#properties
-   * otherwise the default values on the Web Component
-   * may be overridden. For example, if the default animated value
-   * is not `true` below, then Vue would default the prop to `false`
-   * which would override the Web Component default of `true`.
-   */
-  props: {
-    animated: {
-      type: Boolean,
-      default: true,
-    },
-    animation: {
-      type: Function,
-      default: undefined,
-    },
-    root: {
-      type: [Function, Object, String],
-      default: undefined,
-    },
-    rootParams: {
-      type: Object,
-      default: undefined,
-    },
-    swipeGesture: {
-      type: Boolean,
-      default: undefined,
+    const delegate = VueDelegate(addView, removeView);
+    return () => {
+      return h("ion-nav", { ...props, delegate }, views.value);
+    };
+  },
+  {
+    name: "IonNav",
+    /**
+     * The default values follow what is defined at
+     * https://ionicframework.com/docs/api/nav#properties
+     * otherwise the default values on the Web Component
+     * may be overridden. For example, if the default animated value
+     * is not `true` below, then Vue would default the prop to `false`
+     * which would override the Web Component default of `true`.
+     */
+    props: {
+      animated: {
+        type: Boolean,
+        default: true,
+      },
+      animation: {
+        type: Function,
+        default: undefined,
+      },
+      root: {
+        type: [Function, Object, String],
+        default: undefined,
+      },
+      rootParams: {
+        type: Object,
+        default: undefined,
+      },
+      swipeGesture: {
+        type: Boolean,
+        default: undefined,
+      },
     },
   }
-});
+);
diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
@@ -44,7 +44,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
     let previousMatchedRouteRef: Ref | undefined;
     let previousMatchedPath: string | undefined;
 
-    provide(viewDepthKey, depth + 1 as 0);
+    provide(viewDepthKey, (depth + 1) as 0);
     provide(matchedRouteKey, matchedRouteRef);
 
     const ionRouterOutlet = ref();

diff --git a/packages/vue/src/utils/overlays.ts b/packages/vue/src/utils/overlays.ts
@@ -1,5 +1,5 @@
-import type { VNode, ComponentOptions } from 'vue';
-import { defineComponent, h, ref, onMounted } from 'vue';
+import type { VNode, ComponentOptions } from "vue";
+import { defineComponent, h, ref, onMounted } from "vue";
 
 // TODO(FW-2969): types
 
@@ -20,10 +20,10 @@ export const defineOverlayContainer = <Props extends object>(
   const createControllerComponent = (options: ComponentOptions) => {
     return defineComponent<Props & OverlayProps>((props, { slots, emit }) => {
       const eventListeners = [
-        { componentEv: `${name}-will-present`, frameworkEv: 'willPresent' },
-        { componentEv: `${name}-did-present`, frameworkEv: 'didPresent' },
-        { componentEv: `${name}-will-dismiss`, frameworkEv: 'willDismiss' },
-        { componentEv: `${name}-did-dismiss`, frameworkEv: 'didDismiss' },
+        { componentEv: `${name}-will-present`, frameworkEv: "willPresent" },
+        { componentEv: `${name}-did-present`, frameworkEv: "didPresent" },
+        { componentEv: `${name}-will-dismiss`, frameworkEv: "willDismiss" },
+        { componentEv: `${name}-did-dismiss`, frameworkEv: "didDismiss" },
       ];
 
       if (defineCustomElement !== undefined) {
@@ -33,8 +33,8 @@ export const defineOverlayContainer = <Props extends object>(
       const overlay = ref();
       const onVnodeMounted = async () => {
         const isOpen = props.isOpen;
-        isOpen && (await present(props))
-      }
+        isOpen && (await present(props));
+      };
 
       const onVnodeUpdated = async (node: VNode, prevNode: VNode) => {
         const isOpen = node.props!.isOpen;
@@ -51,11 +51,11 @@ export const defineOverlayContainer = <Props extends object>(
         } else {
           await dismiss();
         }
-      }
+      };
 
       const onVnodeBeforeUnmount = async () => {
         await dismiss();
-      }
+      };
 
       const dismiss = async () => {
         if (!overlay.value) return;
@@ -67,7 +67,7 @@ export const defineOverlayContainer = <Props extends object>(
         await overlay.value;
 
         overlay.value = undefined;
-      }
+      };
 
       const present = async (props: Readonly<Props>) => {
         /**
@@ -93,7 +93,10 @@ export const defineOverlayContainer = <Props extends object>(
          */
         for (const key in props) {
           const value = props[key] as any;
-          if (Object.prototype.hasOwnProperty.call(props, key) && value !== EMPTY_PROP) {
+          if (
+            Object.prototype.hasOwnProperty.call(props, key) &&
+            value !== EMPTY_PROP
+          ) {
             restOfProps[key] = value;
           }
         }
@@ -110,32 +113,29 @@ export const defineOverlayContainer = <Props extends object>(
         const component = slots.default && slots.default()[0];
         overlay.value = controller.create({
           ...restOfProps,
-          component
+          component,
         });
 
         overlay.value = await overlay.value;
 
-        eventListeners.forEach(eventListener => {
+        eventListeners.forEach((eventListener) => {
           overlay.value.addEventListener(eventListener.componentEv, () => {
             emit(eventListener.frameworkEv);
           });
-        })
+        });
 
         await overlay.value.present();
-      }
+      };
 
       return () => {
-        return h(
-          'div',
-          {
-            style: { display: 'none' },
-            onVnodeMounted,
-            onVnodeUpdated,
-            onVnodeBeforeUnmount,
-            isOpen: props.isOpen === true
-          }
-        );
-      }
+        return h("div", {
+          style: { display: "none" },
+          onVnodeMounted,
+          onVnodeUpdated,
+          onVnodeBeforeUnmount,
+          isOpen: props.isOpen === true,
+        });
+      };
     }, options);
   };
   const createInlineComponent = (options: any) => {
@@ -147,9 +147,18 @@ export const defineOverlayContainer = <Props extends object>(
       const elementRef = ref();
 
       onMounted(() => {
-        elementRef.value.addEventListener('ion-mount', () => isOpen.value = true);
-        elementRef.value.addEventListener('will-present', () => isOpen.value = true);
-        elementRef.value.addEventListener('did-dismiss', () => isOpen.value = false);
+        elementRef.value.addEventListener(
+          "ion-mount",
+          () => (isOpen.value = true)
+        );
+        elementRef.value.addEventListener(
+          "will-present",
+          () => (isOpen.value = true)
+        );
+        elementRef.value.addEventListener(
+          "did-dismiss",
+          () => (isOpen.value = false)
+        );
       });
 
       return () => {
@@ -163,7 +172,10 @@ export const defineOverlayContainer = <Props extends object>(
          */
         for (const key in props) {
           const value = (props as any)[key];
-          if (Object.prototype.hasOwnProperty.call(props, key) && value !== EMPTY_PROP) {
+          if (
+            Object.prototype.hasOwnProperty.call(props, key) &&
+            value !== EMPTY_PROP
+          ) {
             restOfProps[key] = value;
           }
         }
@@ -174,11 +186,11 @@ export const defineOverlayContainer = <Props extends object>(
          */
         const renderChildren = () => {
           if (hasDelegateHost) {
-            return h('div', { className: 'ion-delegate-host ion-page' }, slots);
+            return h("div", { className: "ion-delegate-host ion-page" }, slots);
           }
 
           return slots;
-        }
+        };
 
         return h(
           name,
@@ -190,27 +202,32 @@ export const defineOverlayContainer = <Props extends object>(
            * the value of the prop will be the empty string which is
            * why we still call renderChildren() in that case.
            */
-          (isOpen.value || restOfProps.keepContentsMounted || restOfProps.keepContentsMounted === '') ? renderChildren() : undefined
-        )
-      }
+          isOpen.value ||
+            restOfProps.keepContentsMounted ||
+            restOfProps.keepContentsMounted === ""
+            ? renderChildren()
+            : undefined
+        );
+      };
     }, options);
-  }
+  };
 
   const options: ComponentOptions = {
     name,
     props: {
-      'isOpen': DEFAULT_EMPTY_PROP,
-      ...(componentProps.reduce((acc, prop) => {
+      isOpen: DEFAULT_EMPTY_PROP,
+      ...componentProps.reduce((acc, prop) => {
         acc[prop] = DEFAULT_EMPTY_PROP;
         return acc;
-      }, {} as Record<string, unknown>)),
+      }, {} as Record<string, unknown>),
     },
-    emits: typeof controller !== 'undefined'
-      ? ['willPresent', 'didPresent', 'willDismiss', 'didDismiss']
-      : undefined
-  }
+    emits:
+      typeof controller !== "undefined"
+        ? ["willPresent", "didPresent", "willDismiss", "didDismiss"]
+        : undefined,
+  };
 
   return controller !== undefined
     ? createControllerComponent(options)
     : createInlineComponent(options);
-}
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,7 +34,8 @@ export const IonBackButton = /*@__PURE__*/ defineComponent( @@
             slots.default && slots.default()
           );
         };
-      }, {
+      },
+      {
         name: "IonBackButton",
       }
     );