build(deps): bump the dependencies group across 1 directory with 16 updates (#334)

* build(deps): bump the dependencies group across 1 directory with 16 updates

Bumps the dependencies group with 16 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [i18next](https://github.com/i18next/i18next) | `23.12.1` | `23.14.0` |
| [i18next-http-backend](https://github.com/i18next/i18next-http-backend) | `2.5.2` | `2.6.1` |
| [i18next-vue](https://github.com/i18next/i18next-vue) | `4.0.0` | `5.0.0` |
| [tesseract.js](https://github.com/naptha/tesseract.js) | `5.1.0` | `5.1.1` |
| [vue](https://github.com/vuejs/core) | `3.4.31` | `3.5.3` |
| [vue-router](https://github.com/vuejs/router) | `4.4.0` | `4.4.3` |
| [@playwright/test](https://github.com/microsoft/playwright) | `1.45.1` | `1.47.0` |
| [@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/HEAD/packages/plugin-vue) | `5.0.5` | `5.1.3` |
| [autoprefixer](https://github.com/postcss/autoprefixer) | `10.4.19` | `10.4.20` |
| [postcss](https://github.com/postcss/postcss) | `8.4.39` | `8.4.45` |
| [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/HEAD/plugins/postcss-nesting) | `12.1.5` | `13.0.0` |
| [tailwindcss](https://github.com/tailwindlabs/tailwindcss) | `3.4.4` | `3.4.10` |
| [typescript](https://github.com/Microsoft/TypeScript) | `5.5.3` | `5.5.4` |
| [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) | `5.3.3` | `5.4.3` |
| [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) | `0.20.0` | `0.20.5` |
| [vue-tsc](https://github.com/vuejs/language-tools/tree/HEAD/packages/tsc) | `2.0.26` | `2.1.6` |



Updates `i18next` from 23.12.1 to 23.14.0
- [Release notes](https://github.com/i18next/i18next/releases)
- [Changelog](https://github.com/i18next/i18next/blob/master/CHANGELOG.md)
- [Commits](i18next/i18next@v23.12.1...v23.14.0)

Updates `i18next-http-backend` from 2.5.2 to 2.6.1
- [Changelog](https://github.com/i18next/i18next-http-backend/blob/master/CHANGELOG.md)
- [Commits](i18next/i18next-http-backend@v2.5.2...v2.6.1)

Updates `i18next-vue` from 4.0.0 to 5.0.0
- [Release notes](https://github.com/i18next/i18next-vue/releases)
- [Commits](i18next/i18next-vue@v4.0.0...v5.0.0)

Updates `tesseract.js` from 5.1.0 to 5.1.1
- [Release notes](https://github.com/naptha/tesseract.js/releases)
- [Commits](naptha/tesseract.js@v5.1.0...v5.1.1)

Updates `vue` from 3.4.31 to 3.5.3
- [Release notes](https://github.com/vuejs/core/releases)
- [Changelog](https://github.com/vuejs/core/blob/main/CHANGELOG.md)
- [Commits](vuejs/core@v3.4.31...v3.5.3)

Updates `vue-router` from 4.4.0 to 4.4.3
- [Release notes](https://github.com/vuejs/router/releases)
- [Commits](vuejs/router@v4.4.0...v4.4.3)

Updates `@playwright/test` from 1.45.1 to 1.47.0
- [Release notes](https://github.com/microsoft/playwright/releases)
- [Commits](microsoft/playwright@v1.45.1...v1.47.0)

Updates `@vitejs/plugin-vue` from 5.0.5 to 5.1.3
- [Release notes](https://github.com/vitejs/vite-plugin-vue/releases)
- [Changelog](https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite-plugin-vue/commits/plugin-vue@5.1.3/packages/plugin-vue)

Updates `autoprefixer` from 10.4.19 to 10.4.20
- [Release notes](https://github.com/postcss/autoprefixer/releases)
- [Changelog](https://github.com/postcss/autoprefixer/blob/main/CHANGELOG.md)
- [Commits](postcss/autoprefixer@10.4.19...10.4.20)

Updates `postcss` from 8.4.39 to 8.4.45
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.39...8.4.45)

Updates `postcss-nesting` from 12.1.5 to 13.0.0
- [Changelog](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-nesting/CHANGELOG.md)
- [Commits](https://github.com/csstools/postcss-plugins/commits/HEAD/plugins/postcss-nesting)

Updates `tailwindcss` from 3.4.4 to 3.4.10
- [Release notes](https://github.com/tailwindlabs/tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/v3.4.10/CHANGELOG.md)
- [Commits](tailwindlabs/tailwindcss@v3.4.4...v3.4.10)

Updates `typescript` from 5.5.3 to 5.5.4
- [Release notes](https://github.com/Microsoft/TypeScript/releases)
- [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml)
- [Commits](microsoft/TypeScript@v5.5.3...v5.5.4)

Updates `vite` from 5.3.3 to 5.4.3
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.3/packages/vite)

Updates `vite-plugin-pwa` from 0.20.0 to 0.20.5
- [Release notes](https://github.com/vite-pwa/vite-plugin-pwa/releases)
- [Commits](vite-pwa/vite-plugin-pwa@v0.20.0...v0.20.5)

Updates `vue-tsc` from 2.0.26 to 2.1.6
- [Release notes](https://github.com/vuejs/language-tools/releases)
- [Changelog](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md)
- [Commits](https://github.com/vuejs/language-tools/commits/v2.1.6/packages/tsc)

---
updated-dependencies:
- dependency-name: i18next
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: dependencies
- dependency-name: i18next-http-backend
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: dependencies
- dependency-name: i18next-vue
  dependency-type: direct:production
  update-type: version-update:semver-major
  dependency-group: dependencies
- dependency-name: tesseract.js
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: vue
  dependency-type: direct:production
  update-type: version-update:semver-minor
  dependency-group: dependencies
- dependency-name: vue-router
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: "@playwright/test"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: dependencies
- dependency-name: "@vitejs/plugin-vue"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: dependencies
- dependency-name: autoprefixer
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: postcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: postcss-nesting
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: dependencies
- dependency-name: tailwindcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: typescript
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: vite
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: dependencies
- dependency-name: vite-plugin-pwa
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: dependencies
- dependency-name: vue-tsc
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>

* Fixed new typescript errors

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: jlucaspains <jlucaspains@gmail.com>

Author: dependabot[bot]

package.json

@@ -17,32 +17,32 @@
     "browser-fs-access": "^0.35.0",
     "dexie": "^4.0.8",
     "fraction.js": "^4.3.7",
-    "i18next": "^23.12.1",
+    "i18next": "^23.14.0",
     "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
-    "i18next-vue": "^4.0.0",
+    "i18next-http-backend": "^2.6.1",
+    "i18next-vue": "^5.0.0",
     "lodash.debounce": "^4.0.8",
     "nosleep.js": "^0.12.0",
     "notiwind": "^2.0.1",
-    "tesseract.js": "^5.1.0",
-    "vue": "^3.4.31",
+    "tesseract.js": "^5.1.1",
+    "vue": "^3.5.3",
     "vue-advanced-cropper": "^2.8.9",
     "vue-router": "4",
     "workbox-build": "^7.1.1",
     "workbox-window": "^7.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.1",
+    "@playwright/test": "^1.47.0",
     "@types/lodash.debounce": "^4.0.8",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.39",
-    "postcss-nesting": "^12.1.5",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
+    "@vitejs/plugin-vue": "^5.1.3",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "postcss-nesting": "^13.0.0",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3",
     "vite-plugin-pages": "^0.32.3",
-    "vite-plugin-pwa": "^0.20.0",
-    "vue-tsc": "^2.0.26"
+    "vite-plugin-pwa": "^0.20.5",
+    "vue-tsc": "^2.1.6"
   }
 }

src/components/NutritionFacts.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useTranslation } from "i18next-vue";
+import { Dictionary } from "../services/recipe";
 
 const { t } = useTranslation();
 
-interface Dictionary<T> {
-  [Key: string]: T;
-}
-
 const props = defineProps<{
   nutrition: Dictionary<number>,
   servingPerContainer: number,
@@ -609,8 +606,9 @@ function roundToSpecificDecimalPlace(value: number, decimals: number) {
       <span class="nf-highlight nf-pr" aria-hidden="true" data-testid="addedSugarDv">{{ addedSugar.dv }}%</span>
       <span>
         <span>{{ t('pages.recipe.id.nutrition.includes') }} </span>
-        <span itemprop="" data-testid="addedSugarValue">{{ addedSugar.value }}<span aria-hidden="true">{{ t('pages.recipe.id.nutrition.gramsAcronym')
-            }}</span><span class="sr-only">{{ t('pages.recipe.id.nutrition.grams') }}</span>
+        <span itemprop="" data-testid="addedSugarValue">{{ addedSugar.value }}<span aria-hidden="true">{{
+      t('pages.recipe.id.nutrition.gramsAcronym')
+    }}</span><span class="sr-only">{{ t('pages.recipe.id.nutrition.grams') }}</span>
         </span>
         <span> {{ t('pages.recipe.id.nutrition.addedSugars') }}</span>
       </span>
@@ -631,22 +629,26 @@ function roundToSpecificDecimalPlace(value: number, decimals: number) {
           <span class="nf-pr" aria-hidden="true">{{ vitaminA.dv }}%</span>
         </div>
         <div class="nf-vitamin-column" v-if="vitaminC.value">
-          <span>Vitamin C</span> {{ vitaminC.value }}<span aria-hidden="true">{{ t('pages.recipe.id.nutrition.miligramsAcronym') }}</span>
+          <span>Vitamin C</span> {{ vitaminC.value }}<span aria-hidden="true">{{
+      t('pages.recipe.id.nutrition.miligramsAcronym') }}</span>
           <span class="sr-only">{{ t('pages.recipe.id.nutrition.miligrams') }}</span>
           <span class="nf-pr" aria-hidden="true">{{ vitaminC.dv }}%</span>
         </div>
         <div class="nf-vitamin-column" v-if="vitaminD.value">
-          <span>Vitamin D</span> {{ roundToSpecificDecimalPlace(vitaminD.value, 1) }}<span aria-hidden="true">{{ t('pages.recipe.id.nutrition.microgramAcronym') }}</span>
+          <span>Vitamin D</span> {{ roundToSpecificDecimalPlace(vitaminD.value, 1) }}<span aria-hidden="true">{{
+      t('pages.recipe.id.nutrition.microgramAcronym') }}</span>
           <span class="sr-only">{{ t('pages.recipe.id.nutrition.micrograms') }}</span>
           <span class="nf-pr" aria-hidden="true">{{ vitaminD.dv }}%</span>
         </div>
         <div class="nf-vitamin-column" v-if="calcium.value">
-          <span>Calcium</span> {{ roundToSpecificDecimalPlace(calcium.value, 1) }}<span aria-hidden="true">{{ t('pages.recipe.id.nutrition.miligramsAcronym') }}</span>
+          <span>Calcium</span> {{ roundToSpecificDecimalPlace(calcium.value, 1) }}<span aria-hidden="true">{{
+      t('pages.recipe.id.nutrition.miligramsAcronym') }}</span>
           <span class="sr-only">{{ t('pages.recipe.id.nutrition.miligrams') }}</span>
           <span class="nf-pr" aria-hidden="true">{{ calcium.dv }}%</span>
         </div>
         <div class="nf-vitamin-column" v-if="iron.value">
-          <span>Iron</span> {{ roundToSpecificDecimalPlace(iron.value, 1) }}<span aria-hidden="true">{{ t('pages.recipe.id.nutrition.miligramsAcronym') }}</span>
+          <span>Iron</span> {{ roundToSpecificDecimalPlace(iron.value, 1) }}<span aria-hidden="true">{{
+      t('pages.recipe.id.nutrition.miligramsAcronym') }}</span>
           <span class="sr-only">{{ t('pages.recipe.id.nutrition.miligrams') }}</span>
           <span class="nf-pr" aria-hidden="true">{{ iron.dv }}%</span>
         </div>

src/services/recipe.ts

@@ -32,9 +32,14 @@ export class RecipeMedia {
     id?: number;
 }
 
-export class RecipeNutrition {
+export interface Dictionary<T> {
+    [Key: string]: T;
+  }
+  
+export class RecipeNutrition implements Dictionary<number> {
     constructor(public servingSize: number, public calories: number, public totalFat: number, public saturatedFat: number,
         public unsaturatedFat: number, public transFat: number, public carbohydrates: number,
         public sugar: number, public cholesterol: number, public sodium: number,
         public protein: number, public fiber: number) { }
+    [Key: string]: number;
 }