upgrade third party dependencies

package.json

@@ -20,13 +20,13 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@vuepic/vue-datepicker": "^11.0.2",
+    "@vuepic/vue-datepicker": "^11.0.3",
-    "axios": "^1.11.0",
+    "axios": "^1.12.2",
     "cbor-js": "^0.1.0",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.2.0",
     "dom7": "^4.0.6",
-    "echarts": "^5.5.1",
+    "echarts": "^6.0.0",
     "framework7": "^8.3.4",
     "framework7-icons": "^5.0.5",
     "framework7-vue": "^8.3.4",
@@ -40,42 +40,42 @@
     "skeleton-elements": "^4.0.1",
     "swiper": "^10.2.0",
     "ua-parser-js": "^1.0.39",
-    "vue": "^3.5.21",
+    "vue": "^3.5.22",
-    "vue-echarts": "^7.0.3",
+    "vue-echarts": "^8.0.1",
     "vue-i18n": "^11.1.12",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.3",
     "vue3-perfect-scrollbar": "^2.0.0",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.9.7"
+    "vuetify": "^3.10.7"
   },
   "devDependencies": {
-    "@jest/globals": "^30.1.2",
+    "@jest/globals": "^30.2.0",
     "@tsconfig/node24": "^24.0.1",
     "@types/cbor-js": "^0.1.1",
     "@types/crypto-js": "^4.2.2",
     "@types/git-rev-sync": "^2.0.2",
     "@types/jalaali-js": "^1.2.0",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.9.1",
     "@types/ua-parser-js": "^0.7.39",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/tsconfig": "^0.8.1",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
-    "eslint": "^9.35.0",
+    "eslint": "^9.38.0",
-    "eslint-plugin-vue": "^10.4.0",
+    "eslint-plugin-vue": "^10.5.1",
     "git-rev-sync": "^3.0.2",
-    "jest": "^30.1.3",
+    "jest": "^30.2.0",
-    "postcss-preset-env": "^10.3.1",
+    "postcss-preset-env": "^10.4.0",
-    "sass": "^1.92.1",
+    "sass": "^1.93.2",
-    "ts-jest": "^29.4.1",
+    "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
-    "vite": "^7.1.4",
+    "vite": "^7.1.12",
-    "vite-plugin-checker": "^0.10.3",
+    "vite-plugin-checker": "^0.11.0",
-    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-pwa": "^1.1.0",
     "vite-plugin-vuetify": "^2.1.2",
-    "vue-tsc": "^3.0.6"
+    "vue-tsc": "^3.1.2"
   },
   "browserslist": [
     "last 5 Chrome versions",

src/components/common/MonthPicker.vue

@@ -8,9 +8,8 @@
                      :year-first="isYearFirst"
                      :range="isDateRange ? { partialRange: false } : undefined"
                      v-model="dateTime">
-        <!-- @vue-expect-error It seems to be a bug in vue-date-picker (https://github.com/Vuepic/vue-datepicker/issues/1154), when using the month picker, it does not provide the value and text props in the slot, but provides the year. -->
+        <template #year="{ value }">
-        <template #year="{ year }">
+            {{ getDisplayYear(value) }}
-            {{ getDisplayYear(year) }}
         </template>
         <template #year-overlay-value="{ value }">
             {{ getDisplayYear(value) }}

src/components/desktop/AccountBalanceTrendsChart.vue

@@ -224,19 +224,25 @@ const chartOptions = computed<object>(() => {
         },
         grid: {
             left: yAxisWidth.value,
-            right: 20
+            right: 20,
+            top: 0,
+            bottom: 20
         },
         xAxis: [
             {
                 type: 'category',
                 data: allDisplayDateRanges.value,
-                inverse: textDirection.value === TextDirection.RTL
+                inverse: textDirection.value === TextDirection.RTL,
+                axisLabel: {
+                    color: isDarkMode.value ? '#888' : '#666'
+                }
             }
         ],
         yAxis: [
             {
                 type: 'value',
                 axisLabel: {
+                    color: isDarkMode.value ? '#888' : '#666',
                     formatter: (value: string) => {
                         return formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.account.currency);
                     }

src/components/desktop/MonthlyTrendsChart.vue

@@ -347,6 +347,8 @@ const chartOptions = computed<object>(() => {
         },
         legend: {
             orient: 'horizontal',
+            type: 'scroll',
+            top: 0,
             data: allSeries.value.map(item => item.name),
             selected: selectedLegends.value,
             textStyle: {
@@ -358,19 +360,24 @@ const chartOptions = computed<object>(() => {
         },
         grid: {
             left: yAxisWidth.value,
-            right: 20
+            right: 20,
+            bottom: 40
         },
         xAxis: [
             {
                 type: 'category',
                 data: allDisplayDateRanges.value,
-                inverse: textDirection.value === TextDirection.RTL
+                inverse: textDirection.value === TextDirection.RTL,
+                axisLabel: {
+                    color: isDarkMode.value ? '#888' : '#666'
+                }
             }
         ],
         yAxis: [
             {
                 type: 'value',
                 axisLabel: {
+                    color: isDarkMode.value ? '#888' : '#666',
                     formatter: (value: string) => {
                         return formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.defaultCurrency);
                     }

src/components/desktop/PieChart.vue

@@ -17,6 +17,8 @@ import { itemAndIndex } from '@/core/base.ts';
 import type { ColorStyleValue } from '@/core/color.ts';
 import { ThemeType } from '@/core/theme.ts';
 
+import { getObjectOwnFieldCount } from '@/lib/common.ts';
+
 interface DesktopPieChartDataItem extends CommonPieChartDataItem {
     itemStyle: {
         color: ColorStyleValue;
@@ -35,7 +37,7 @@ const theme = useTheme();
 const { formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
 const { selectedIndex, validItems } = usePieChartBase(props);
 
-const selectedLegends = ref<Record<string, boolean> | null>(null);
+const selectedLegends = ref<Record<string, boolean>>({});
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 
@@ -48,7 +50,7 @@ const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
         if (props.idField && item[props.idField]) {
             id = item[props.idField] as string;
         } else {
-            id = item[props.nameField] as string;;
+            id = item[props.nameField] as string;
         }
 
         map[id] = item;
@@ -75,7 +77,7 @@ const seriesData = computed<DesktopPieChartDataItem[]>(() => {
 
 const hasUnselectedItem = computed<boolean>(() => {
     for (const item of validItems.value) {
-        if (selectedLegends.value && !selectedLegends.value[item.id]) {
+        if (getObjectOwnFieldCount(selectedLegends.value) && !selectedLegends.value[item.id]) {
             return true;
         }
     }
@@ -89,7 +91,7 @@ const firstItemAndHalfCurrentItemTotalPercent = computed<number>(() => {
     let firstToCurrentTotalValue = 0;
 
     for (const [item, index] of itemAndIndex(validItems.value)) {
-        if (selectedLegends.value && !selectedLegends.value[item.id]) {
+        if (getObjectOwnFieldCount(selectedLegends.value) && !selectedLegends.value[item.id]) {
             continue;
         }
 
@@ -153,6 +155,8 @@ const chartOptions = computed<object>(() => {
         },
         legend: {
             orient: 'horizontal',
+            type: 'scroll',
+            top: 0,
             data: validItems.value.map(item => item.name),
             selected: selectedLegends.value,
             textStyle: {
@@ -169,6 +173,7 @@ const chartOptions = computed<object>(() => {
                 data: seriesData.value,
                 top: 50,
                 startAngle: -90 + firstItemAndHalfCurrentItemTotalPercent.value * 360,
+                radius: [0, '75%'],
                 emphasis: {
                     itemStyle: {
                         shadowBlur: 10,
@@ -251,12 +256,12 @@ function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
 <style scoped>
 .pie-chart-container {
     width: 100%;
-    height: 400px;
+    height: 460px;
 }
 
 @media (min-width: 600px) {
     .pie-chart-container {
-        height: 500px;
+        height: 560px;
     }
 }
 

third-party-dependencies.json

@@ -173,7 +173,7 @@
         "name": "vuejs/core",
         "copyright": "Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors",
         "url": "https://github.com/vuejs/core",
-        "licenseUrl": "https://github.com/vuejs/core/blob/v3.5.21/LICENSE"
+        "licenseUrl": "https://github.com/vuejs/core/blob/v3.5.22/LICENSE"
     },
     {
         "name": "Pinia",
@@ -185,7 +185,7 @@
         "name": "vue-router",
         "copyright": "Copyright (c) 2019-present Eduardo San Martin Morote",
         "url": "https://github.com/vuejs/router",
-        "licenseUrl": "https://github.com/vuejs/router/blob/v4.5.1/LICENSE"
+        "licenseUrl": "https://github.com/vuejs/router/blob/v4.6.3/LICENSE"
     },
     {
         "name": "vue-i18n",
@@ -197,7 +197,7 @@
         "name": "vuetify",
         "copyright": "Copyright (c) 2016-now Vuetify, LLC",
         "url": "https://vuetifyjs.com",
-        "licenseUrl": "https://github.com/vuetifyjs/vuetify/blob/v3.9.7/LICENSE.md"
+        "licenseUrl": "https://github.com/vuetifyjs/vuetify/blob/v3.10.7/packages/vuetify/LICENSE.md"
     },
     {
         "name": "register-service-worker",
@@ -245,13 +245,13 @@
         "name": "Apache ECharts",
         "copyright": "Copyright © 2017-2025, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.",
         "url": "https://echarts.apache.org/",
-        "licenseUrl": "https://github.com/apache/echarts/blob/5.5.1/LICENSE"
+        "licenseUrl": "https://github.com/apache/echarts/blob/6.0.0/LICENSE"
     },
     {
         "name": "vue-echarts",
         "copyright": "Copyright (c) 2016-present GU Yiling & ECOMFE",
         "url": "https://github.com/ecomfe/vue-echarts",
-        "licenseUrl": "https://github.com/ecomfe/vue-echarts/blob/v7.0.3/LICENSE"
+        "licenseUrl": "https://github.com/ecomfe/vue-echarts/blob/v8.0.1/LICENSE"
     },
     {
         "name": "vue3-perfect-scrollbar",
@@ -263,13 +263,13 @@
         "name": "@vuepic/vue-datepicker",
         "copyright": "Copyright (c) 2021-present Vuepic",
         "url": "https://vue3datepicker.com/",
-        "licenseUrl": "https://github.com/Vuepic/vue-datepicker/blob/v11.0.2/LICENSE"
+        "licenseUrl": "https://github.com/Vuepic/vue-datepicker/blob/v11.0.3/LICENSE"
     },
     {
         "name": "axios",
         "copyright": "Copyright (c) 2014-present Matt Zabriskie & Collaborators",
         "url": "https://axios-http.com",
-        "licenseUrl": "https://github.com/axios/axios/blob/v1.11.0/LICENSE"
+        "licenseUrl": "https://github.com/axios/axios/blob/v1.12.2/LICENSE"
     },
     {
         "name": "Moment.js",