gonna upgrade to ionic 7, this commit will probably break the production env

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/no-deprecated-slot-attribute': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    'vue/multi-word-component-names': 'off', 
   },
   overrides: [
     {

src/router/index.ts

@@ -56,11 +56,6 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Blurry Wallpapers',
     component: Blurry_Wallpapers,
   },
-  {
-    path: '/details/Tipper_by_myCALC',
-    name: 'Tipper by myCALC',
-    component: Tipper_by_myCALC,
-  },
   {
     path: '/details/PufferIcons_Filled',
     name: 'PufferIcons Filled',
@@ -71,11 +66,6 @@ const routes: Array<RouteRecordRaw> = [
     name: 'WallCat',
     component: WallCat,
   },
-  {
-    path: '/details/Tipper3',
-    name: 'Tipper3',
-    component: Tipper3,
-  },
   {
     path: '/details/BetterAperture',
     name: 'BetterAperture',

src/views/Apps.vue

@@ -24,7 +24,7 @@
         <ion-content class="ion-padding modalContent">
           <img src="../assets/Icon_Puffercat_Apps.png" class="logoAbout">
           <h1>Puffercat Apps</h1>
-          <h4>v1.0.0-b3 (Beta 3)</h4>
+          <h4>v1.0.0-b4 (Beta 4)</h4>
           <br>
           <br>
           <div class="tableLabel">
@@ -90,15 +90,15 @@
       </ion-header>
       <ion-grid>
 <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/PufferIcons')">
-      <a href="/details/PufferIcons"><img src="../assets/Icon_PufferIcons.png" class="icon"></a>
+      <img src="../assets/Icon_PufferIcons.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/PufferIcons')">
         <ion-row>
-          <ion-column><a href="/details/PufferIcons" class="hidden-link"><h4 class="size-appname">PufferIcons</h4></a></ion-column>
+          <ion-column><h4 class="size-appname">PufferIcons</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/PufferIcons"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column></a>
+          <ion-column button @click="() => router.push('/details/PufferIcons')"><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col>
@@ -109,15 +109,15 @@
     </ion-col>
   </ion-row>
   <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/Puffercat_Apps')">
-      <a href="/details/Puffercat_Apps"><img src="../assets/Icon_Puffercat_Apps.png" class="icon"></a>
+      <img src="../assets/Icon_Puffercat_Apps.png" class="icon">
     </ion-col>
     <ion-col size="auto" class="description-column">
         <ion-row>
-          <a href="/details/Puffercat_Apps" class="hidden-link"><ion-column><h4 class="size-appname">Puffercat Apps</h4></ion-column></a>
+          <ion-column button @click="() => router.push('/details/Puffercat_Apps')"><h4 class="size-appname">Puffercat Apps</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/Puffercat_Apps" class="hidden-link"><ion-column><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column></a>
+          <ion-column button @click="() => router.push('/details/Puffercat_Apps')"><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col class="download-column">
@@ -198,28 +198,12 @@
       <ion-button shape="round" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Blurry_Wallpapers/blurry-wallpapers-1.0.3.apk"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
-  <ion-row class="column-bottom">
-    <ion-col size="auto">
-      <a href="/details/Tipper_by_myCALC" class="hidden-link"><img src="../assets/Icon_Tipper.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/Tipper_by_myCALC" class="hidden-link"><ion-column><h4 class="size-appname">Tipper by myCALC</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-          <a href="/details/Tipper_by_myCALC" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
-        </ion-row>
-    </ion-col>
-    <ion-col class="download-column">
-      <ion-button shape="round" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Tipper_by_myCALC/tipper-by-mycalc-1.1-dev.apk"><ion-icon :icon="arrowDown" /></ion-button>
-    </ion-col>
-  </ion-row>
 </ion-grid>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { defineComponent } from 'vue';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
     IonModal,
@@ -230,21 +214,13 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid,
     IonLabel, IonPopover } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
+import { useRouter } from 'vue-router';
 
-export default  defineComponent({
+const router = useRouter();
-  name: 'Tab1Page',
+</script>
-  components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
+
-      IonModal,
+<script lang="ts">
-      IonItem,
+export default defineComponent ({
-      IonList, IonPopover },
-  setup() {
-    return {
-      logoAndroid,
-      arrowDown,
-      logoPwa,
-      ellipsisVertical
-    }
-  },
   methods: {
       dismiss() {
         (this.$refs.modal as InstanceType<typeof IonModal>).$el.dismiss();

src/views/ComingSoon.vue

@@ -24,7 +24,7 @@
         <ion-content class="ion-padding modalContent">
           <img src="../assets/Icon_Puffercat_Apps.png" class="logoAbout">
           <h1>Puffercat Apps</h1>
-          <h4>v1.0.0-b3 (Beta 3)</h4>
+          <h4>v1.0.0-b4 (Beta 4)</h4>
           <br>
           <br>
           <div class="tableLabel">
@@ -137,22 +137,6 @@
       <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
-  <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/Tipper3" class="hidden-link"><img src="../assets/Icon_Tipper3.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/Tipper3" class="hidden-link"><ion-column><h4 class="size-appname">Tipper3</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-         <a href="/details/Tipper3" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
-        </ion-row>
-    </ion-col>
-    <ion-col class="download-column">
-      <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
-    </ion-col>
-  </ion-row>
 </ion-grid>
     </ion-content>
   </ion-page>

src/views/Tipper3.vue

@@ -1,187 +0,0 @@
-<template>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar>
-    <ion-buttons slot="start">
-    <ion-back-button default-href="/tabs/soon"></ion-back-button>
-  </ion-buttons>
-          <ion-title>Tipper3</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content :fullscreen="true">
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">Tipper3</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-grid>
-    <ion-row class="column-standard2">
-      <ion-col class="bannerColumn">
-        
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col size="auto">
-        <img src="../assets/Icon_Tipper3.png" class="icon">
-      </ion-col>
-      <ion-col size="auto" class="description-column">
-          <ion-row style="padding: 0px; margin: 0px;">
-            <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>Tipper3</strong></p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon"></p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
-          </ion-row>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard2">
-      <ion-col>
-        <ion-button disabled="true" expand="full" shape="round" style="margin: 0px;">Coming Soon</ion-button>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Description</strong></h4>
-        The replacement for Tipper by myCALC. A tip calculator designed with Google's Material Design 3 guidelines and Material you that feels native to Android.<br>
-<br>
-    </ion-col>
-    </ion-row>
-   <!-- <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Screenshots (early development)</strong></h4>
-        <div class="scrollScreenshots">
-        <img src="../assets/Screenshot_WallCat_1.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_2.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_3.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_4.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_5.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_6.jpg" class="screenshot">
-        </div>
-        <br>
-    </ion-col>
-    </ion-row>-->
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Links</strong></h4>
-        <a href="mailto:puffercatt+tipper3@gmail.com" class="">E-mail</a>
-        <br>
-        <a href="https://pufferrom.t.me" class="">Telegram channel (releases)</a>
-        <br>
-        <a href="https://puffercatchannel.t.me" class="">Telegram channel (general)</a>
-        <br>
-        <a href="https://puffercatrom.t.me" class="">Support group</a>
-        <br>
-        <br>
-    </ion-col>
-    </ion-row>
-  </ion-grid>
-      </ion-content>
-    </ion-page>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
-      IonModal,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel } from '@ionic/vue';
-  import ExploreContainer from '@/components/ExploreContainer.vue';
-  import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
-  
-  export default  defineComponent({
-    name: 'Tab1Page',
-    components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonIcon, IonButtons, IonBackButton},
-    setup() {
-      return {
-        logoAndroid,
-        arrowDown,
-        logoPwa,
-        ellipsisVertical
-      }
-    }
-  });
-  </script>
-  
-  <style scoped>
-    .column-standard {
-      background-color: var(--ion-color-light-shade);
-      color: var(--ion-color-light-contrast);
-      padding: 15px;
-      border-radius: 25px;
-      margin: 5px;
-      margin-top: 15px;
-    } .icon {
-      width: 90px;
-      margin-right: 5px;
-    } ion-button {
-      --box-shadow: 0px;
-    } .download-column {
-      text-align: right;
-      display: flex;
-      justify-content: right;
-      align-items: center;
-    } .description-column {
-      align-items: center;
-    } .size-appname {
-    font-size: 20px;
-  } .size-appname-icon {
-    font-size: 15px;
-  } .logoAbout {
-    width: 125px;
-    margin: 10px;
-    margin-top: 20px;
-  } .modalContent {
-    text-align: center;
-      display: flex;
-      justify-content: center;
-  } .tableLabel {
-    text-align: left;
-  } .vueLogoLight {
-    display: inline;
-  } .vueLogoDark {
-    display: none;
-  } @media (prefers-color-scheme: dark) {
-    .vueLogoLight {
-      display: none;
-    } .vueLogoDark {
-      display: inline;
-    }
-  } .aboutFrameworkLogo {
-    width: 175px;
-  } .bannerColumn {
-    height: 200px;
-    background-image: url("../assets/Banner_Tipper3.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 25px;
-  } .column-standard2 {
-      background-color: transparent;
-      color: var(--ion-color-light-contrast);
-    padding: 0px;
-      border-radius: 25px;
-      margin: 5px;
-      margin-top: 15px;
-    } ion-button {
-    --box-shadow: 0px;
-  } .screenshot {
-    height: 600px;
-    border-radius: 30px;
-  } div.scrollScreenshots {
-  overflow: auto;
-  white-space: nowrap;
-}
-
-div.scrollScreenshots img {
-  display: inline-block;
-  padding: 10px;
-} .hidden-link {
-    text-decoration-line: none;
-    color: var(--ion-color-light-contrast);
-  }
-  </style>

src/views/Tipper_by_myCALC.vue

@@ -1,200 +0,0 @@
-<template>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar>
-    <ion-buttons slot="start">
-    <ion-back-button default-href="/"></ion-back-button>
-  </ion-buttons>
-          <ion-title>Tipper by myCALC</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content :fullscreen="true">
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">Tipper by myCALC</ion-title>
-          </ion-toolbar>
-        </ion-header>
-        <ion-grid>
-    <ion-row class="column-standard2">
-      <ion-col class="bannerColumn">
-        
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col size="auto">
-        <img src="../assets/Icon_Tipper.png" class="icon">
-      </ion-col>
-      <ion-col size="auto" class="description-column">
-          <ion-row style="padding: 0px; margin: 0px;">
-            <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>Tipper by myCALC</strong></p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon">version 1.1-dev</p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
-          </ion-row>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard2">
-      <ion-col>
-        <ion-button href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Tipper_by_myCALC/tipper-by-mycalc-1.1-dev.apk" expand="full" shape="round" style="margin: 0px;" download="Tipper-latest.apk">Download</ion-button>
-      </ion-col>
-      <ion-col>
-        <ion-button href="https://play.google.com/store/apps/details?id=pl.kacperzacharski.puffercat.tipper" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Changelog - 1.1-dev</strong></h4>
-        <ul>
-            <li>Added Material Design 3 support</li>
-        </ul>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Description</strong></h4>
-        Minimal and easy to use open-source tip calculator.<br>
-Tipper by myCALC is a modern and simple tip calculating app.<br>
-Works with a lot of currencies.<br>
-<br>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Screenshots</strong></h4>
-        <div class="scrollScreenshots">
-        <img src="../assets/Screenshot_Tipper_1.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_2.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_3.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_4.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_5.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_6.webp" class="screenshot">
-        </div>
-        <br>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Links</strong></h4>
-        <a href="mailto:puffercatt+mycalc@gmail.com" class="">E-mail</a>
-        <br>
-        <a href="https://cdn.puffercat.xyz/c/mycalc/tipper-privacy/" class="">Privacy policy</a>
-        <br>
-        <a href="https://github.com/KZacharski/tipperbymycalc" class="">GitHub repo</a>
-        <br>
-        <br>
-    </ion-col>
-    </ion-row>
-  </ion-grid>
-      </ion-content>
-    </ion-page>
-  </template>
-  
-  <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
-      IonModal,
-      IonItem,
-      IonList,
-      IonAvatar,
-      IonImg,
-      IonLabel } from '@ionic/vue';
-  import ExploreContainer from '@/components/ExploreContainer.vue';
-  import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
-  
-  export default  defineComponent({
-    name: 'Tab1Page',
-    components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonIcon, IonButtons, IonBackButton},
-    setup() {
-      return {
-        logoAndroid,
-        arrowDown,
-        logoPwa,
-        ellipsisVertical
-      }
-    }
-  });
-  </script>
-  
-  <style scoped>
-    .column-standard {
-      background-color: var(--ion-color-light-shade);
-      color: var(--ion-color-light-contrast);
-      padding: 15px;
-      border-radius: 25px;
-      margin: 5px;
-      margin-top: 15px;
-    } .icon {
-      width: 90px;
-      margin-right: 5px;
-    } ion-button {
-      --box-shadow: 0px;
-    } .download-column {
-      text-align: right;
-      display: flex;
-      justify-content: right;
-      align-items: center;
-    } .description-column {
-      align-items: center;
-    } .size-appname {
-    font-size: 20px;
-  } .size-appname-icon {
-    font-size: 15px;
-  } .logoAbout {
-    width: 125px;
-    margin: 10px;
-    margin-top: 20px;
-  } .modalContent {
-    text-align: center;
-      display: flex;
-      justify-content: center;
-  } .tableLabel {
-    text-align: left;
-  } .vueLogoLight {
-    display: inline;
-  } .vueLogoDark {
-    display: none;
-  } @media (prefers-color-scheme: dark) {
-    .vueLogoLight {
-      display: none;
-    } .vueLogoDark {
-      display: inline;
-    }
-  } .aboutFrameworkLogo {
-    width: 175px;
-  } .bannerColumn {
-    height: 200px;
-    background-image: url("../assets/Banner_Tipper.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 25px;
-  } .column-standard2 {
-      background-color: transparent;
-      color: var(--ion-color-light-contrast);
-    padding: 0px;
-      border-radius: 25px;
-      margin: 5px;
-      margin-top: 15px;
-    } ion-button {
-    --box-shadow: 0px;
-  } .screenshot {
-    height: 600px;
-    width: auto;
-    border-radius: 30px;
-  } div.scrollScreenshots {
-  overflow: auto;
-  white-space: nowrap;
-  object-fit: none;
-}
-
-div.scrollScreenshots img {
-  display: inline-block;
-  padding: 10px;
-} .hidden-link {
-    text-decoration-line: none;
-    color: var(--ion-color-light-contrast);
-  }
-  </style>

tests/e2e/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     'cypress/globals': true
   },
   rules: {
+    'vue/multi-word-component-names': 'off', 
     strict: 'off'
   }
 }