Merge branch 'main' of https://github.com/Tommertom/svelte-ionic-app

Author: Tommertom

components/IonPage.svelte

@@ -8,6 +8,7 @@
   export const ionViewDidEnter = () => {};
   export const ionViewWillLeave = undefined; // unsupported as we cannot use beforeNavigate in npm library
   export const ionViewDidLeave = () => {};
+  export let animation = {in: { x: 1000, duration: 300 }, out: { x: -1000, duration: 300 }};
 
   ionViewWillEnter();
 
@@ -32,6 +33,10 @@
   });
 </script>
 
-<div class="ion-page" in:fly={{ x: 1000, duration: 300 }} out:fly={{ x: -1000, duration: 300 }}>
+<div
+  class="ion-page"
+  in:fly={animation.in}
+  out:fly={animation.out}
+>
   <slot />
 </div>

index.ts

@@ -20,7 +20,7 @@ import { initialize } from "@ionic/core/components";
 import type { IonicConfig } from "@ionic/core/components";
 
 import { defineIonComponents } from "./components/defineComponents";
-import { MenuI } from "@ionic/core/dist/types/components/menu/menu-interface";
+import type { MenuI } from "@ionic/core/dist/types/interface";
 export { defineComponent } from "./components/defineComponents";
 
 // all exports

package.json

@@ -31,6 +31,6 @@
     "svelte": "^3.55.1"
   },
   "dependencies": {
-    "@ionic/core": "^7.0.2"
+    "@ionic/core": "^7.0.3"
   }
-}
+}

src/IonPage.svelte

@@ -8,6 +8,7 @@
   export const ionViewDidEnter = () => {};
   export const ionViewWillLeave = undefined; // unsupported as we cannot use beforeNavigate in npm library
   export const ionViewDidLeave = () => {};
+  export let animation = {in: { x: 1000, duration: 300 }, out: { x: -1000, duration: 300 }};
 
   ionViewWillEnter();
 
@@ -34,8 +35,8 @@
 
 <div
   class="ion-page"
-  in:fly={{ x: 1000, duration: 300 }}
-  out:fly={{ x: -1000, duration: 300 }}
+  in:fly={animation.in}
+  out:fly={animation.out}
 >
   <slot />
 </div>