-Updates

+Increase cache size
+json packages
+F7 update version changes

build/webpack.config.js

@@ -201,6 +201,7 @@ module.exports = {
     ...(!isCordova ? [
       new WorkboxPlugin.InjectManifest({
         swSrc: resolvePath('src/service-worker.js'),
+        maximumFileSizeToCacheInBytes: 6 * 1024 * 1024, // or however much you need. This is 6MB.
       })
     ] : []),
   ],

package.json

@@ -28,48 +28,48 @@
   ],
   "dependencies": {
     "alasql": "^1.7.3",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
     "crypto-js": "^4.1.1",
     "dom7": "^4.0.4",
-    "framework7": "^6.3.16",
+    "framework7": "^7.0.7",
     "framework7-icons": "^5.0.5",
     "html2pdf.js": "^0.10.1",
     "localforage": "^1.10.0",
     "skeleton-elements": "^4.0.0",
-    "swiper": "^8.1.0"
+    "swiper": "^8.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/runtime": "^7.17.9",
-    "babel-loader": "^8.2.4",
+    "@babel/core": "^7.19.0",
+    "@babel/plugin-transform-runtime": "^7.18.10",
+    "@babel/preset-env": "^7.19.0",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/runtime": "^7.19.0",
+    "babel-loader": "^8.2.5",
     "chalk": "^5.0.1",
-    "concurrently": "^7.1.0",
-    "copy-webpack-plugin": "^10.2.4",
-    "cpy-cli": "^4.1.0",
+    "concurrently": "^7.4.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "cpy-cli": "^4.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
+    "css-minimizer-webpack-plugin": "^4.1.0",
     "file-loader": "^6.2.0",
     "framework7-loader": "^3.0.2",
     "html-webpack-plugin": "^5.5.0",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
-    "less": "^4.1.2",
-    "less-loader": "^10.2.0",
-    "mini-css-extract-plugin": "^2.6.0",
-    "ora": "^6.1.0",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.4.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "ora": "^6.1.2",
+    "postcss-loader": "^7.0.1",
+    "postcss-preset-env": "^7.8.1",
     "rimraf": "^3.0.2",
     "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.1",
+    "terser-webpack-plugin": "^5.3.6",
     "url-loader": "^4.1.1",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
-    "workbox-webpack-plugin": "^6.5.2"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.0",
+    "workbox-webpack-plugin": "^6.5.4"
   }
 }

src/app.f7.html

@@ -1,6 +1,6 @@
 
 <template>
-  <div id="app" class="theme-dark">
+  <div id="app" class="dark">
 
     <!-- Your main view, should have "view-main" class -->
     <div class="view view-main view-init safe-areas" data-url="/"></div>

src/js/stores/theme.js

@@ -3,7 +3,7 @@ import { localForage } from "./../api/config.js";
 
 const theme = createStore({
   state: {
-    name: 'theme-dark',
+    name: 'dark',
   },
   actions: {
 //Mutations
@@ -13,8 +13,8 @@ const theme = createStore({
 //End mutations
     async checkTheme({ dispatch }, selector){
       let theme = await localForage.getItem('theme');
-      if (theme == null) theme = 'theme-dark';
-      if (theme != 'theme-dark'){ document.querySelector(selector).classList.remove('theme-dark'); }
+      if (theme == null) theme = 'dark';
+      if (theme != 'dark'){ document.querySelector(selector).classList.remove('dark'); }
       dispatch('changeTheme', theme);
     },
     async initTheme({ dispatch }, selector){

src/pages/home/panel-left.f7.html

@@ -1,6 +1,6 @@
 <template>
 <!-- Left panel with cover effect-->
-<div class="panel panel-left panel-reveal theme-dark" @panel:open=${onPanelOpen}>
+<div class="panel panel-left panel-reveal dark" @panel:open=${onPanelOpen}>
   <div class="view">
     <div class="page">
       <div class="navbar">

src/pages/home/panel-right.f7.html

@@ -1,6 +1,6 @@
 <template>
 <!-- Right panel with reveal effect-->
-<div class="panel panel-right panel-reveal theme-dark" @panel:open=${onPanelOpen}>
+<div class="panel panel-right panel-reveal dark" @panel:open=${onPanelOpen}>
   <div class="view">
     <div class="page">
       <div class="navbar">
@@ -73,7 +73,7 @@ export default (props, { $f7, $, $on, $onMounted, $update, $f7router }) => {
   };
 
   $onMounted(async () => {
-    $('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
+    $('#light-theme').prop('checked', (theme != 'dark') ? true : false );
     await themes.dispatch('checkTheme', '.panel-right');
   });
 
@@ -86,12 +86,12 @@ export default (props, { $f7, $, $on, $onMounted, $update, $f7router }) => {
 
   const setTheme = async () => {
     if ($("#light-theme").prop('checked')){
-      $("#app, .panel-right").removeClass("theme-dark");
+      $("#app, .panel-right").removeClass("dark");
     }
     else{
-      $("#app, .panel-right").addClass("theme-dark");
+      $("#app, .panel-right").addClass("dark");
     }
-    let name = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
+    let name = !$("#light-theme").prop('checked') ? 'dark' : '';
     await themes.dispatch('setTheme', name);
   };