From 65d6c2a3521f93bc5d0ea2e028f84dc7f426215e Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Sun, 10 Mar 2024 15:33:24 +0400
Subject: [PATCH 1/6] Fix id type to views for getItemsByCategory()

---
 src/views/BlogView.vue      | 8 ++++----
 src/views/LinkView.vue      | 8 ++++----
 src/views/PortfolioView.vue | 8 ++++----
 src/views/ShopView.vue      | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/views/BlogView.vue b/src/views/BlogView.vue
index 2e81e12..73a244e 100644
--- a/src/views/BlogView.vue
+++ b/src/views/BlogView.vue
@@ -232,12 +232,12 @@ export default defineComponent({
      * ? GET ITEMS BY CATEGORY
      * * Retrieves items by category.
      *
-     * @param {{id: string, name: string, cat: string}[]} items - The array of items.
-     * @return {Record<string, { id: string; name: string }[]>} The items filtered by category.
+     * @param {{id: number, name: string, cat: string}[]} items - The array of items.
+     * @return {Record<string, { id: number; name: string }[]>} The items filtered by category.
      */
     getItemsByCategory(
-      items: { id: string; name: string; cat: string }[]
-    ): Record<string, { id: string; name: string }[]> {
+      items: { id: number; name: string; cat: string }[]
+    ): Record<string, { id: number; name: string }[]> {
       return getItemsByCat(items)
     },
 
diff --git a/src/views/LinkView.vue b/src/views/LinkView.vue
index c97b4d4..589ae48 100644
--- a/src/views/LinkView.vue
+++ b/src/views/LinkView.vue
@@ -123,12 +123,12 @@ export default defineComponent({
      * ? GET ITEMS BY CATEGORY
      * * Retrieves items by category.
      *
-     * @param {{id: string, name: string, cat: string}[]} items - The array of items.
-     * @return {Record<string, { id: string; name: string }[]>} The items filtered by category.
+     * @param {{id: number, name: string, cat: string}[]} items - The array of items.
+     * @return {Record<string, { id: number; name: string }[]>} The items filtered by category.
      */
     getItemsByCategory(
-      items: { id: string; name: string; cat: string }[]
-    ): Record<string, { id: string; name: string }[]> {
+      items: { id: number; name: string; cat: string }[]
+    ): Record<string, { id: number; name: string }[]> {
       return getItemsByCat(items)
     }
   }
diff --git a/src/views/PortfolioView.vue b/src/views/PortfolioView.vue
index eb18f9b..85ff915 100644
--- a/src/views/PortfolioView.vue
+++ b/src/views/PortfolioView.vue
@@ -169,12 +169,12 @@ export default defineComponent({
      * ? GET ITEMS BY CATEGORY
      * * Retrieves items by category.
      *
-     * @param {{id: string, name: string, cat: string}[]} items - The array of items.
-     * @return {Record<string, { id: string; name: string }[]>} The items filtered by category.
+     * @param {{id: number, name: string, cat: string}[]} items - The array of items.
+     * @return {Record<string, { id: number; name: string }[]>} The items filtered by category.
      */
     getItemsByCategory(
-      items: { id: string; name: string; cat: string }[]
-    ): Record<string, { id: string; name: string }[]> {
+      items: { id: number; name: string; cat: string }[]
+    ): Record<string, { id: number; name: string }[]> {
       return getItemsByCat(items)
     }
   }
diff --git a/src/views/ShopView.vue b/src/views/ShopView.vue
index 585d4b1..bfb5a47 100644
--- a/src/views/ShopView.vue
+++ b/src/views/ShopView.vue
@@ -163,12 +163,12 @@ export default defineComponent({
      * ? GET ITEMS BY CATEGORY
      * * Retrieves items by category.
      *
-     * @param {{id: string, name: string, cat: string}[]} items - The array of items.
-     * @return {Record<string, { id: string; name: string }[]>} The items filtered by category.
+     * @param {{id: number, name: string, cat: string}[]} items - The array of items.
+     * @return {Record<string, { id: number; name: string }[]>} The items filtered by category.
      */
     getItemsByCategory(
-      items: { id: string; name: string; cat: string }[]
-    ): Record<string, { id: string; name: string }[]> {
+      items: { id: number; name: string; cat: string }[]
+    ): Record<string, { id: number; name: string }[]> {
       return getItemsByCat(items)
     }
   }

From ef79e62f4e728b0ca3a312e9ff2c3ff845192578 Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Sun, 10 Mar 2024 15:33:55 +0400
Subject: [PATCH 2/6] Fix id type to services for getItemsByCat()

---
 src/assets/services.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/assets/services.ts b/src/assets/services.ts
index 6643eb4..6f6ac2a 100644
--- a/src/assets/services.ts
+++ b/src/assets/services.ts
@@ -209,15 +209,15 @@ export const getItemName = (id: number, items: { id: number; name: string }[]):
  * ? GET ITEMS BY CATEGORY
  * * Groups an array of items by category & sorts each category's item list by id or name
  *
- * @param {{id: string, name: string, cat: string}[]} items - The array of items to group
+ * @param {{id: number, name: string, cat: string}[]} items - The array of items to group
  * @param {string} [sortBy="id"] - The property to sort the items by
- * @return {Record<string, {id: string, name: string}[]>} An object where each key is a category & its value is the array of items belonging to that category
+ * @return {Record<string, {id: number, name: string}[]>} An object where each key is a category & its value is the array of items belonging to that category
  */
 export const getItemsByCat = (
-  items: { id: string; name: string; cat: string }[],
+  items: { id: number; name: string; cat: string }[],
   sortBy: string = 'id'
-): Record<string, { id: string; name: string }[]> => {
-  const itemsByCat: Record<string, { id: string; name: string }[]> = {}
+): Record<string, { id: number; name: string; cat: string }[]> => {
+  const itemsByCat: Record<string, { id: number; name: string; cat: string }[]> = {}
 
   for (const item of items) {
     const cat: string = item.cat

From 725932fdadf083166768eb4be45e76811cd28b05 Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Sun, 10 Mar 2024 15:34:18 +0400
Subject: [PATCH 3/6] Add interfaces to all setters

---
 src/components/ArticleSet.vue | 49 +++++++++++-------
 src/components/GallerySet.vue | 45 ++++++++++-------
 src/components/ImageSet.vue   | 65 ++++++++++++------------
 src/components/LinkSet.vue    | 94 +++++++++++++++--------------------
 src/components/OrderSet.vue   | 28 ++++++++---
 src/components/ProductSet.vue | 48 ++++++++++--------
 src/components/ProjectSet.vue | 54 +++++++++++++-------
 src/components/UserSet.vue    | 59 +++++++++++-----------
 8 files changed, 246 insertions(+), 196 deletions(-)

diff --git a/src/components/ArticleSet.vue b/src/components/ArticleSet.vue
index b22f604..f3da5a6 100644
--- a/src/components/ArticleSet.vue
+++ b/src/components/ArticleSet.vue
@@ -82,19 +82,45 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { checkRange, checkRegex, postData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
 import ListElt from './ListElt.vue'
 import Editor from '@tinymce/tinymce-vue'
 
-import { checkRange, checkRegex, postData, setError } from '../assets/services'
+interface Article {
+  id: number
+  name: string
+  text: string
+  image: string
+  alt: string
+  url: string
+  likes: any
+  cat: string
+  createdAt: string
+  updatedAt: string
+}
+
+interface Val {
+  ALERT_CREATED: string
+  ALERT_IMG: string
+  API_URL: string
+  CAT_ARTICLE: string
+  CHECK_STRING: string
+  CHECK_URL: string
+  REGEX_URL: RegExp
+  TEXT_MIN: number
+  TEXT_MAX: number
+}
 
-export default {
+export default defineComponent({
   name: 'ArticleSet',
   components: { BtnElt, CardElt, FieldElt, ListElt, Editor },
-
   props: ['token', 'val'],
+
   data() {
     return {
       name: '',
@@ -103,7 +129,7 @@ export default {
       alt: '',
       url: '',
       cat: ''
-    }
+    } as Article
   },
 
   methods: {
@@ -124,17 +150,7 @@ export default {
         REGEX_URL,
         TEXT_MIN,
         TEXT_MAX
-      }: {
-        ALERT_CREATED: string
-        ALERT_IMG: string
-        API_URL: string
-        CAT_ARTICLE: string
-        CHECK_STRING: string
-        CHECK_URL: string
-        REGEX_URL: RegExp
-        TEXT_MIN: number
-        TEXT_MAX: number
-      } = this.val
+      }: Val = this.val
 
       if (this.url.startsWith('http')) this.url = this.url.split('//')[1]
       if (this.cat === '') this.cat = CAT_ARTICLE
@@ -142,7 +158,6 @@ export default {
       const IS_NAME_CHECKED: boolean = checkRange(this.name, CHECK_STRING)
       const IS_TEXT_CHECKED: boolean = checkRange(this.text, CHECK_STRING, TEXT_MIN, TEXT_MAX)
       const IS_ALT_CHECKED: boolean = checkRange(this.alt, CHECK_STRING)
-
       const IS_URL_CHECKED: boolean = this.url ? checkRegex(this.url, CHECK_URL, REGEX_URL) : true
 
       if (IS_NAME_CHECKED && IS_TEXT_CHECKED && IS_ALT_CHECKED && IS_URL_CHECKED) {
@@ -173,5 +188,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/GallerySet.vue b/src/components/GallerySet.vue
index bb9a54d..a9b4f77 100644
--- a/src/components/GallerySet.vue
+++ b/src/components/GallerySet.vue
@@ -122,24 +122,41 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { checkRange, deleteData, getItemName, postData, putData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
 import ListElt from './ListElt.vue'
 import TableElt from './TableElt.vue'
 
-import { checkRange, deleteData, getItemName, postData, putData, setError } from '../assets/services'
+interface Gallery {
+  id: number
+  name: string
+  author: string
+  cover: string
+}
+
+interface Val {
+  ALERT_CREATED: string
+  ALERT_DELETED: string
+  ALERT_UPDATED: string
+  API_URL: string
+  CHECK_STRING: string
+  TITLE_DELETE: string
+}
 
-export default {
+export default defineComponent({
   name: 'GallerySet',
   components: { BtnElt, CardElt, FieldElt, ListElt, TableElt },
-
   props: ['galleries', 'images', 'token', 'val'],
+
   data() {
     return {
       name: '',
       author: ''
-    }
+    } as Gallery
   },
 
   computed: {
@@ -170,15 +187,7 @@ export default {
      * @returns {Promise<void>} A promise that resolves when the gallery is created.
      */
     async createGallery(): Promise<void> {
-      const {
-        ALERT_CREATED,
-        API_URL,
-        CHECK_STRING
-      }: {
-        ALERT_CREATED: string
-        API_URL: string
-        CHECK_STRING: string
-      } = this.val
+      const { ALERT_CREATED, API_URL, CHECK_STRING }: Val = this.val
 
       const IS_NAME_CHECKED: boolean = checkRange(this.name, CHECK_STRING)
       const IS_AUTHOR_CHECKED: boolean = checkRange(this.author, CHECK_STRING)
@@ -209,13 +218,12 @@ export default {
      * @returns {Promise<void>} A promise that resolves when the gallery is updated.
      */
     async updateGallery(id: number): Promise<void> {
-      const { CHECK_STRING, API_URL, ALERT_UPDATED }: { CHECK_STRING: string; API_URL: string; ALERT_UPDATED: string } =
-        this.val
+      const { CHECK_STRING, API_URL, ALERT_UPDATED }: Val = this.val
 
       const gallery: { id: number; name: string; author: string; cover: string } = this.galleries.find(
         (g: { id: number }) => g.id === id
       )
-      let { name, author, cover }: { name: string; author: string; cover: string } = gallery
+      let { name, author, cover }: Gallery = gallery
 
       const IS_NAME_CHECKED: boolean = gallery && checkRange(name, CHECK_STRING)
       const IS_AUTHOR_CHECKED: boolean = gallery && checkRange(author, CHECK_STRING)
@@ -245,7 +253,8 @@ export default {
      * @returns {Promise<void>}
      */
     async deleteGallery(id: number): Promise<void> {
-      const { TITLE_DELETE, API_URL, ALERT_DELETED } = this.val
+      const { ALERT_DELETED, API_URL, TITLE_DELETE }: Val = this.val
+
       const NAME: string | false = getItemName(id, this.galleries)
 
       if (confirm(`${TITLE_DELETE} ${NAME} ?`)) {
@@ -262,5 +271,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/ImageSet.vue b/src/components/ImageSet.vue
index 31d9357..b7f9bd6 100644
--- a/src/components/ImageSet.vue
+++ b/src/components/ImageSet.vue
@@ -130,6 +130,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { checkRange, deleteData, putData, postData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
@@ -137,18 +140,36 @@ import ListElt from './ListElt.vue'
 import MediaElt from './MediaElt.vue'
 import TableElt from './TableElt.vue'
 
-import { checkRange, deleteData, putData, postData, setError } from '../assets/services'
+interface Image {
+  id: number
+  name: string
+  description: string
+  gallery: number
+  image: string
+}
+
+interface Val {
+  ALERT_CREATED: string
+  ALERT_DELETED: string
+  ALERT_IMAGE: string
+  ALERT_IMG: string
+  ALERT_UPDATED: string
+  API_URL: string
+  CHECK_STRING: string
+  TITLE_DELETE_IMAGE: string
+}
 
-export default {
+export default defineComponent({
   name: 'ImageSet',
   components: { BtnElt, CardElt, FieldElt, ListElt, MediaElt, TableElt },
-
   props: ['galleries', 'images', 'token', 'val'],
+
   data() {
     return {
       description: '',
-      gallery: ''
-    }
+      gallery: 1,
+      image: ''
+    } as Image
   },
 
   computed: {
@@ -156,10 +177,10 @@ export default {
      * ? GET GALLERIES
      * * Retrieves the galleries & transforms them into an array of objects.
      *
-     * @return {Array<{content: string, value: number}>} An array of objects with the content & value properties.
+     * @return {{ content: string; value: number }[]} An array of objects with the content & value properties.
      */
-    getGalleries(): Array<{ content: string; value: number }> {
-      const galleries: Array<{ content: string; value: number }> = []
+    getGalleries(): { content: string; value: number }[] {
+      const galleries: { content: string; value: number }[] = []
 
       for (let i = 0; i < this.galleries.length; i++) {
         galleries.push({
@@ -180,7 +201,7 @@ export default {
      * @returns {Promise<void>}
      */
     async createImage(): Promise<void> {
-      const { CHECK_STRING, API_URL, ALERT_CREATED, ALERT_IMG } = this.val
+      const { ALERT_CREATED, ALERT_IMG, API_URL, CHECK_STRING }: Val = this.val
 
       if (checkRange(this.description, CHECK_STRING)) {
         const img = (document.getElementById('image') as HTMLInputElement)?.files?.[0]
@@ -215,17 +236,7 @@ export default {
      * @returns {Promise<void>}
      */
     async updateImage(id: number): Promise<void> {
-      const {
-        ALERT_IMAGE,
-        ALERT_UPDATED,
-        API_URL,
-        CHECK_STRING
-      }: {
-        ALERT_IMAGE: string
-        ALERT_UPDATED: string
-        API_URL: string
-        CHECK_STRING: string
-      } = this.val
+      const { ALERT_IMAGE, ALERT_UPDATED, API_URL, CHECK_STRING }: Val = this.val
 
       const image: any = this.images.find((i: any) => i.id === id)
       let { name, description, galleryId } = image
@@ -261,17 +272,7 @@ export default {
      * @returns {Promise<void>}
      */
     async deleteImage(id: number): Promise<void> {
-      const {
-        TITLE_DELETE_IMAGE,
-        API_URL,
-        ALERT_IMAGE,
-        ALERT_DELETED
-      }: {
-        TITLE_DELETE_IMAGE: string
-        API_URL: string
-        ALERT_IMAGE: string
-        ALERT_DELETED: string
-      } = this.val
+      const { ALERT_DELETED, ALERT_IMAGE, API_URL, TITLE_DELETE_IMAGE }: Val = this.val
 
       if (confirm(`${TITLE_DELETE_IMAGE} ${id} ?`)) {
         const URL: string = `${API_URL}/images/${id}`
@@ -287,5 +288,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/LinkSet.vue b/src/components/LinkSet.vue
index 63d499a..86e2986 100644
--- a/src/components/LinkSet.vue
+++ b/src/components/LinkSet.vue
@@ -65,7 +65,7 @@
           :title="table[0].cat"
           :items="table"
           v-for="table in getItemsByCategory(links)"
-          :key="table"
+          :key="table[0].id"
           :id="table[0].cat"
         >
           <template #title>
@@ -156,11 +156,7 @@
 </template>
 
 <script lang="ts">
-import BtnElt from './BtnElt.vue'
-import CardElt from './CardElt.vue'
-import FieldElt from './FieldElt.vue'
-import ListElt from './ListElt.vue'
-import TableElt from './TableElt.vue'
+import { defineComponent } from 'vue'
 
 import {
   checkRange,
@@ -173,7 +169,32 @@ import {
   setError
 } from '../assets/services'
 
-export default {
+import BtnElt from './BtnElt.vue'
+import CardElt from './CardElt.vue'
+import FieldElt from './FieldElt.vue'
+import ListElt from './ListElt.vue'
+import TableElt from './TableElt.vue'
+
+interface Link {
+  id: number
+  name: string
+  url: string
+  cat: string
+}
+
+interface Val {
+  ALERT_CREATED: string
+  ALERT_DELETED: string
+  ALERT_UPDATED: string
+  API_URL: string
+  CAT_LINK: string
+  CHECK_STRING: string
+  CHECK_URL: string
+  REGEX_URL: RegExp
+  TITLE_DELETE: string
+}
+
+export default defineComponent({
   name: 'LinkSet',
   components: { BtnElt, CardElt, FieldElt, ListElt, TableElt },
 
@@ -183,7 +204,7 @@ export default {
       name: '',
       url: '',
       cat: ''
-    }
+    } as Link
   },
 
   methods: {
@@ -191,12 +212,12 @@ export default {
      * ? GET ITEMS BY CATEGORY
      * * Retrieves items by category.
      *
-     * @param {{id: string, name: string, cat: string}[]} items - The array of items.
-     * @return {Record<string, { id: string; name: string }[]>} The items filtered by category.
+     * @param {{id: number, name: string, cat: string}[]} items - The array of items.
+     * @return {Record<string, { id: number; name: string }[]>} The items filtered by category.
      */
     getItemsByCategory(
-      items: { id: string; name: string; cat: string }[]
-    ): Record<string, { id: string; name: string }[]> {
+      items: { id: number; name: string; cat: string }[]
+    ): Record<string, { id: number; name: string; cat: string }[]> {
       return getItemsByCat(items, 'name')
     },
 
@@ -207,21 +228,7 @@ export default {
      * @returns {Promise<void>} A Promise that resolves when the link is created
      */
     async createLink(): Promise<void> {
-      const {
-        ALERT_CREATED,
-        API_URL,
-        CAT_LINK,
-        CHECK_STRING,
-        CHECK_URL,
-        REGEX_URL
-      }: {
-        ALERT_CREATED: string
-        API_URL: string
-        CAT_LINK: string
-        CHECK_STRING: string
-        CHECK_URL: string
-        REGEX_URL: RegExp
-      } = this.val
+      const { ALERT_CREATED, API_URL, CAT_LINK, CHECK_STRING, CHECK_URL, REGEX_URL }: Val = this.val
 
       if (this.url.startsWith('http')) this.url = this.url.split('//')[1]
       if (this.cat === '') this.cat = CAT_LINK
@@ -256,29 +263,11 @@ export default {
      * @param {void} - A Promise that resolves when the link is updated
      */
     async updateLink(id: number): Promise<void> {
-      const {
-        CHECK_STRING,
-        REGEX_URL,
-        CHECK_URL,
-        API_URL,
-        ALERT_UPDATED
-      }: {
-        CHECK_STRING: string
-        REGEX_URL: RegExp
-        CHECK_URL: string
-        API_URL: string
-        ALERT_UPDATED: string
-      } = this.val
-
-      const link: { id: number; name: string; url: string; cat: string } | undefined = this.links.find(
-        (l: { id: number }) => l.id === id
-      )
-
-      let { name, url, cat }: { name: string; url: string; cat: string } = link || {
-        name: '',
-        url: '',
-        cat: ''
-      }
+      const { ALERT_UPDATED, API_URL, CHECK_STRING, CHECK_URL, REGEX_URL }: Val = this.val
+
+      const link: Link = this.links.find((l: Link) => l.id === id)
+
+      let { name, url, cat }: Link = link
 
       const IS_NAME_CHECKED: boolean = link ? checkRange(name, CHECK_STRING) : false
       const IS_URL_CHECKED: boolean = link ? checkRegex(url, CHECK_URL, REGEX_URL) : false
@@ -309,8 +298,7 @@ export default {
      * @returns {Promise<void>}
      */
     async deleteLink(id: number): Promise<void> {
-      const { TITLE_DELETE, API_URL, ALERT_DELETED }: { TITLE_DELETE: string; API_URL: string; ALERT_DELETED: string } =
-        this.val
+      const { TITLE_DELETE, API_URL, ALERT_DELETED }: Val = this.val
 
       const NAME: string | false = getItemName(id, this.links)
 
@@ -328,5 +316,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/OrderSet.vue b/src/components/OrderSet.vue
index 19456d3..5dcfd0c 100644
--- a/src/components/OrderSet.vue
+++ b/src/components/OrderSet.vue
@@ -88,14 +88,28 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { deleteData, putData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
 import TableElt from './TableElt.vue'
 
-import { deleteData, putData, setError } from '../assets/services'
+interface Order {
+  id: number
+  status: string
+}
 
-export default {
+interface Val {
+  ALERT_DELETED: string
+  ALERT_ORDER: string
+  ALERT_UPDATED: string
+  API_URL: string
+  TITLE_DELETE_ORDER: string
+}
+
+export default defineComponent({
   name: 'OrderSet',
   components: { BtnElt, CardElt, FieldElt, TableElt },
   props: ['orders', 'token', 'val'],
@@ -109,9 +123,9 @@ export default {
      * @returns {Promise<void>} A promise that resolves when the status is updated.
      */
     async updateStatus(id: number): Promise<void> {
-      const { ALERT_ORDER, ALERT_UPDATED, API_URL }: { ALERT_ORDER: string; ALERT_UPDATED: string; API_URL: string } =
-        this.val
-      const order: { id: number; status: string } | undefined = this.orders.find((o: { id: number }) => o.id === id)
+      const { ALERT_ORDER, ALERT_UPDATED, API_URL }: Val = this.val
+
+      const order: Order | undefined = this.orders.find((o: Order) => o.id === id)
 
       if (order) {
         const URL: string = `${API_URL}/orders/${id}`
@@ -138,7 +152,7 @@ export default {
      * @returns {Promise<void>}
      */
     async deleteOrder(id: number): Promise<void> {
-      const { TITLE_DELETE_ORDER, API_URL, ALERT_ORDER, ALERT_DELETED } = this.val
+      const { ALERT_DELETED, ALERT_ORDER, API_URL, TITLE_DELETE_ORDER }: Val = this.val
 
       if (confirm(`${TITLE_DELETE_ORDER} ${id} ?`)) {
         const URL = `${API_URL}/orders/${id}`
@@ -154,5 +168,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/ProductSet.vue b/src/components/ProductSet.vue
index 49022e7..48f5437 100644
--- a/src/components/ProductSet.vue
+++ b/src/components/ProductSet.vue
@@ -103,15 +103,37 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { checkRange, postData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
 import ListElt from './ListElt.vue'
 import Editor from '@tinymce/tinymce-vue'
 
-import { checkRange, postData, setError } from '../assets/services'
+interface Product {
+  id: number
+  name: string
+  description: string
+  image: string
+  alt: string
+  price: number
+  options: any
+  cat: string
+}
 
-export default {
+interface Val {
+  ALERT_CREATED: string
+  ALERT_IMG: string
+  API_URL: string
+  CAT_PRODUCT: string
+  CHECK_STRING: string
+  TEXT_MAX: number
+  TEXT_MIN: number
+}
+
+export default defineComponent({
   name: 'ProductSet',
   components: { BtnElt, CardElt, FieldElt, ListElt, Editor },
 
@@ -125,7 +147,7 @@ export default {
       price: 0,
       options: [],
       cat: ''
-    }
+    } as Product
   },
 
   methods: {
@@ -136,23 +158,7 @@ export default {
      * @returns {Promise<void>} A promise that resolves when the product is created.
      */
     async createProduct(): Promise<void> {
-      const {
-        ALERT_CREATED,
-        ALERT_IMG,
-        API_URL,
-        CAT_PRODUCT,
-        CHECK_STRING,
-        TEXT_MAX,
-        TEXT_MIN
-      }: {
-        ALERT_CREATED: string
-        ALERT_IMG: string
-        API_URL: string
-        CAT_PRODUCT: string
-        CHECK_STRING: string
-        TEXT_MAX: number
-        TEXT_MIN: number
-      } = this.val
+      const { ALERT_CREATED, ALERT_IMG, API_URL, CAT_PRODUCT, CHECK_STRING, TEXT_MAX, TEXT_MIN }: Val = this.val
 
       this.price = this.price ?? 1
       if (this.cat === '') this.cat = CAT_PRODUCT
@@ -190,5 +196,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/ProjectSet.vue b/src/components/ProjectSet.vue
index ab5afe3..6cb4b49 100644
--- a/src/components/ProjectSet.vue
+++ b/src/components/ProjectSet.vue
@@ -204,6 +204,9 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { checkRange, checkRegex, deleteData, getItemName, postData, putData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
@@ -211,9 +214,32 @@ import ListElt from './ListElt.vue'
 import MediaElt from './MediaElt.vue'
 import TableElt from './TableElt.vue'
 
-import { checkRange, checkRegex, deleteData, getItemName, postData, putData, setError } from '../assets/services'
+interface Project {
+  id: number
+  name: string
+  description: string
+  image: string
+  alt: string
+  url: string
+  cat: string
+}
 
-export default {
+interface Val {
+  ALERT_CREATED: string
+  ALERT_DELETED: string
+  ALERT_IMG: string
+  ALERT_UPDATED: string
+  API_URL: string
+  CAT_PROJECT: string
+  CHECK_STRING: string
+  CHECK_URL: string
+  REGEX_URL: RegExp
+  TEXT_MIN: number
+  TEXT_MAX: number
+  TITLE_DELETE: string
+}
+
+export default defineComponent({
   name: 'ProjectSet',
   components: { BtnElt, CardElt, FieldElt, ListElt, MediaElt, TableElt },
 
@@ -226,7 +252,7 @@ export default {
       alt: '',
       url: '',
       cat: ''
-    }
+    } as Project
   },
 
   methods: {
@@ -247,17 +273,7 @@ export default {
         REGEX_URL,
         TEXT_MIN,
         TEXT_MAX
-      }: {
-        ALERT_CREATED: string
-        ALERT_IMG: string
-        API_URL: string
-        CAT_PROJECT: string
-        CHECK_STRING: string
-        CHECK_URL: string
-        REGEX_URL: RegExp
-        TEXT_MIN: number
-        TEXT_MAX: number
-      } = this.val
+      }: Val = this.val
 
       if (this.url.startsWith('http')) this.url = this.url.split('//')[1]
       if (this.cat === '') this.cat = CAT_PROJECT
@@ -303,10 +319,10 @@ export default {
      * @param {Promise<void>} - A promise that resolves when the project is updated.
      */
     async updateProject(id: number): Promise<void> {
-      const { API_URL, ALERT_UPDATED, CHECK_STRING, REGEX_URL, TEXT_MAX, TEXT_MIN } = this.val
+      const { ALERT_UPDATED, API_URL, CHECK_STRING, REGEX_URL, TEXT_MAX, TEXT_MIN }: Val = this.val
 
-      const project = this.projects.find((p: { id: number }) => p.id === id)
-      let { name, description, image, alt, url, cat } = project
+      const project: Project = this.projects.find((p: Project) => p.id === id)
+      let { name, description, image, alt, url, cat }: Project = project
 
       const IS_NAME_CHECKED: boolean = checkRange(name, CHECK_STRING)
       const IS_DESC_CHECKED: boolean = checkRange(description, CHECK_STRING, TEXT_MIN, TEXT_MAX)
@@ -344,7 +360,7 @@ export default {
      * @returns {Promise<void>}
      */
     async deleteProject(id: number): Promise<void> {
-      const { TITLE_DELETE, API_URL, ALERT_DELETED } = this.val
+      const { ALERT_DELETED, API_URL, TITLE_DELETE }: Val = this.val
 
       const NAME: string | false = getItemName(id, this.projects)
 
@@ -362,5 +378,5 @@ export default {
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/UserSet.vue b/src/components/UserSet.vue
index bedb4f8..ba6397c 100644
--- a/src/components/UserSet.vue
+++ b/src/components/UserSet.vue
@@ -103,26 +103,46 @@
 </template>
 
 <script lang="ts">
+import { defineComponent } from 'vue'
+import { checkRange, checkRegex, deleteData, getItemName, putData, setError } from '../assets/services'
+
 import BtnElt from './BtnElt.vue'
 import CardElt from './CardElt.vue'
 import FieldElt from './FieldElt.vue'
 import MediaElt from './MediaElt.vue'
 import TableElt from './TableElt.vue'
 
-import { checkRange, checkRegex, deleteData, getItemName, putData, setError } from '../assets/services'
+interface User {
+  id: number
+  name: string
+  email: string
+  image: string
+  pass: string
+  role: string
+}
+
+interface Val {
+  ALERT_DELETED: string
+  ALERT_UPDATED: string
+  API_URL: string
+  CHECK_EMAIL: string
+  CHECK_STRING: string
+  REGEX_EMAIL: RegExp
+  TITLE_DELETE: string
+}
 
-export default {
+export default defineComponent({
   name: 'UserSet',
   components: { BtnElt, CardElt, FieldElt, MediaElt, TableElt },
-
   props: ['token', 'users', 'val'],
+
   data() {
     return {
       name: '',
       email: '',
       image: '',
       pass: ''
-    }
+    } as User
   },
 
   methods: {
@@ -134,28 +154,10 @@ export default {
      * @returns {Promise<void>}
      */
     async updateUser(id: number): Promise<void> {
-      const {
-        ALERT_UPDATED,
-        API_URL,
-        CHECK_EMAIL,
-        CHECK_STRING,
-        REGEX_EMAIL
-      }: {
-        ALERT_UPDATED: string
-        API_URL: string
-        CHECK_EMAIL: string
-        CHECK_STRING: string
-        REGEX_EMAIL: RegExp
-      } = this.val
-
-      const user: { id: number; name: string; email: string; image: string; role: string } | undefined =
-        this.users.find((u: { id: number }) => u.id === id)
-      let { name, email, image, role }: { name: string; email: string; image: string; role: string } = user || {
-        name: '',
-        email: '',
-        image: '',
-        role: ''
-      }
+      const { ALERT_UPDATED, API_URL, CHECK_EMAIL, CHECK_STRING, REGEX_EMAIL }: Val = this.val
+
+      const user: User = this.users.find((u: User) => u.id === id)
+      let { name, email, image, role }: User = user
 
       const IS_NAME_CHECKED: boolean = user ? checkRange(name, CHECK_STRING) : false
       const IS_EMAIL_CHECKED: boolean = user ? checkRegex(email, CHECK_EMAIL, REGEX_EMAIL) : false
@@ -190,8 +192,7 @@ export default {
      * @returns {Promise<void>} A Promise that resolves when the user is successfully deleted.
      */
     async deleteUser(id: number): Promise<void> {
-      const { TITLE_DELETE, API_URL, ALERT_DELETED }: { TITLE_DELETE: string; API_URL: string; ALERT_DELETED: string } =
-        this.val
+      const { TITLE_DELETE, API_URL, ALERT_DELETED }: Val = this.val
 
       const NAME: string | false = getItemName(id, this.users)
 
@@ -209,5 +210,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

From 502ef4d96595df8cc5c2af3eb91b1d36d5883c2b Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Sun, 10 Mar 2024 16:42:02 +0400
Subject: [PATCH 4/6] Fix a part of the last type errors to element components

---
 src/components/BtnElt.vue    |  2 +-
 src/components/CardElt.vue   |  2 +-
 src/components/FieldElt.vue  |  4 ++--
 src/components/FootElt.vue   |  8 ++++----
 src/components/ListElt.vue   | 11 +----------
 src/components/MediaElt.vue  | 23 +++++++++++++++++++----
 src/components/NavElt.vue    |  2 +-
 src/components/SliderElt.vue |  9 +++++----
 8 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/components/BtnElt.vue b/src/components/BtnElt.vue
index a47f67e..0c6c517 100644
--- a/src/components/BtnElt.vue
+++ b/src/components/BtnElt.vue
@@ -29,7 +29,7 @@ export default defineComponent({
    * * Setup the component
    *
    * @param {Object} props - The props of the component.
-   * @returns {Object} - The return object containing buttonClass, isBtnTypeButton, and linkClass.
+   * @returns {Object} - The return object containing buttonClass, isBtnTypeButton & linkClass.
    */
   setup(props: { type: string; class: string }): {
     buttonClass: string
diff --git a/src/components/CardElt.vue b/src/components/CardElt.vue
index 405b45c..643fe62 100644
--- a/src/components/CardElt.vue
+++ b/src/components/CardElt.vue
@@ -52,7 +52,7 @@ export default defineComponent({
    * @param {Object} - Object that contains the slots of the component.
    * @returns {{ hasSlot: (name: string) => boolean }} - Object with a function that checks if the component has a slot.
    */
-  setup(props: object, { slots }: { slots: Record<string, unknown> }) {
+  setup(props: object, { slots }: { slots: Record<string, unknown> }): { hasSlot: (name: string) => boolean } {
     /**
      * ? HAS SLOT
      * * Checks if the component has a slot
diff --git a/src/components/FieldElt.vue b/src/components/FieldElt.vue
index bc2dce0..8ee5694 100644
--- a/src/components/FieldElt.vue
+++ b/src/components/FieldElt.vue
@@ -139,12 +139,12 @@ export default defineComponent({
     props: { type: string },
     { slots, emit }: { slots: any; emit: any }
   ): {
-    fieldType: Ref<string>
+    fieldType: string
     getFieldType: () => void
     hasSlot: (name: string) => boolean
     onInput: (event: Event) => void
   } {
-    const fieldType: Ref<string> = ref('')
+    const fieldType: string = ref('')
 
     /**
      * ? HAS SLOT
diff --git a/src/components/FootElt.vue b/src/components/FootElt.vue
index 23897cb..f7d5feb 100644
--- a/src/components/FootElt.vue
+++ b/src/components/FootElt.vue
@@ -67,12 +67,12 @@ export default defineComponent({
     props: Object,
     { slots }: { default: any }
   ): {
-    isMobile: Ref<boolean>
+    isMobile: boolean
     handleResize: () => void
     hasSlot: (name: string) => boolean
     toggleSide: () => void
   } {
-    const isMobile = ref(false)
+    const isMobile = ref(true)
 
     /**
      * ? HAS SLOT
@@ -95,7 +95,7 @@ export default defineComponent({
      */
     const toggleSide = () => {
       const foot = document.getElementById('foot')
-      foot.classList.replace('show', 'hide') || foot.classList.replace('hide', 'show')
+      foot?.classList.replace('show', 'hide') || foot?.classList.replace('hide', 'show')
     }
 
     /**
@@ -113,7 +113,7 @@ export default defineComponent({
      */
     onUnmounted(() => window.removeEventListener('resize', handleResize))
 
-    return { isMobile, handleResize, hasSlot, toggleSide }
+    return { isMobile: isMobile.value, handleResize, hasSlot, toggleSide }
   }
 })
 </script>
diff --git a/src/components/ListElt.vue b/src/components/ListElt.vue
index 017b241..1a9b02c 100644
--- a/src/components/ListElt.vue
+++ b/src/components/ListElt.vue
@@ -52,16 +52,7 @@ export default defineComponent({
    * @param {Object} - Object that contains the slots of the component.
    * @returns {{ hasSlot: (name: string) => boolean }}
    */
-  setup(
-    props: {
-      /* define the type of props here */
-    },
-    {
-      slots
-    }: {
-      /* define the type of slots here */
-    }
-  ) {
+  setup(props: object, { slots }: { slots: Record<string, unknown> }): { hasSlot: (name: string) => boolean } {
     /**
      * ? HAS SLOT
      * * Checks if the component has a slot
diff --git a/src/components/MediaElt.vue b/src/components/MediaElt.vue
index 911e37e..80bce3a 100644
--- a/src/components/MediaElt.vue
+++ b/src/components/MediaElt.vue
@@ -67,12 +67,27 @@ export default defineComponent({
   name: 'MediaElt',
 
   props: {
-    type: { type: String, default: 'img' },
-    width: { type: Number, default: 300 },
-    loop: { type: Boolean, default: false },
+    type: {
+      type: String,
+      default: 'img'
+    },
+    width: {
+      type: Number,
+      default: 300
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
     content: String,
     src: String,
-    medias: Array,
+    medias: [
+      {
+        type: String,
+        src: String,
+        media: String
+      }
+    ],
     alt: String,
     title: String,
     height: Number,
diff --git a/src/components/NavElt.vue b/src/components/NavElt.vue
index 4e968a7..c2bec6f 100644
--- a/src/components/NavElt.vue
+++ b/src/components/NavElt.vue
@@ -113,7 +113,7 @@ export default defineComponent({
      */
     const toggleSide = () => {
       const side = document.getElementById('side')
-      side.classList.replace('show', 'hide') || side.classList.replace('hide', 'show')
+      side?.classList.replace('show', 'hide') || side?.classList.replace('hide', 'show')
     }
 
     /**
diff --git a/src/components/SliderElt.vue b/src/components/SliderElt.vue
index cb6d1df..4742aeb 100644
--- a/src/components/SliderElt.vue
+++ b/src/components/SliderElt.vue
@@ -129,10 +129,11 @@ export default defineComponent({
      * * Refresh the slide
      */
     const refreshSlide = (): void => {
-      if (randomState.value) index.value = getRandomInteger(0, props.slides.length - 1)
+      if (randomState.value) index.value = getRandomInteger(0, props.slides ? props.slides.length - 1 : 0)
 
-      for (let i = 1; i <= props.slides.length; i++) {
+      for (let i = 1; i <= (props.slides ? props.slides.length : 0); i++) {
         const slide = document.getElementById(`slide-${i}`)
+
         if (slide) slide.classList.remove('show')
       }
 
@@ -173,7 +174,7 @@ export default defineComponent({
      * * Go to the previous slide
      */
     const goPrevious = (): void => {
-      index.value = (index.value - 1 + props.slides.length) % props.slides.length
+      index.value = (index.value - 1 + (props.slides?.length || 0)) % (props.slides?.length || 1)
       refreshSlide()
     }
 
@@ -182,7 +183,7 @@ export default defineComponent({
      * * Go to the next slide
      */
     const goNext = (): void => {
-      index.value = (index.value + 1) % props.slides.length
+      index.value = (index.value + 1) % (props.slides?.length || 0)
       refreshSlide()
     }
 

From 87b71172f36d4db86686fd1b28782d806fedfd35 Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Sun, 10 Mar 2024 16:55:56 +0400
Subject: [PATCH 5/6] Fix a part of data type errors to all tests

---
 src/__tests__/App.spec.ts                   | 10 +++++-----
 src/__tests__/assets/services.spe.ts        | 20 +++++---------------
 src/__tests__/components/ArticleSet.spec.ts |  2 +-
 src/__tests__/components/BtnElt.spec.ts     |  2 +-
 src/__tests__/components/CardElt.spec.ts    |  2 +-
 src/__tests__/components/FieldElt.spe.ts    |  2 +-
 src/__tests__/components/FootElt.spec.ts    |  2 +-
 src/__tests__/components/GallerySet.spec.ts |  2 +-
 src/__tests__/components/ImageSet.spec.ts   |  2 +-
 src/__tests__/components/LinkSet.spec.ts    |  2 +-
 src/__tests__/components/ListElt.spec.ts    |  2 +-
 src/__tests__/components/MediaElt.spec.ts   |  2 +-
 src/__tests__/components/NavElt.spec.ts     |  2 +-
 src/__tests__/components/OrderSet.spec.ts   |  2 +-
 src/__tests__/components/ProductSet.spec.ts |  2 +-
 src/__tests__/components/SliderElt.spe.ts   | 16 +++-------------
 src/__tests__/components/TableElt.spec.ts   |  2 +-
 src/__tests__/components/UserSet.spec.ts    |  2 +-
 src/__tests__/views/ArticleView.spe.ts      |  8 ++++----
 src/__tests__/views/BasketView.spe.ts       |  4 ++--
 src/__tests__/views/BlogView.spe.ts         |  8 ++++----
 src/__tests__/views/ContactView.spec.ts     |  2 +-
 src/__tests__/views/ErrorView.spec.ts       |  2 +-
 src/__tests__/views/GalleryView.spe.ts      | 10 +++++-----
 src/__tests__/views/HomeView.spec.ts        |  2 +-
 src/__tests__/views/ImageView.spe.ts        |  8 ++++----
 src/__tests__/views/LegalView.spec.ts       |  2 +-
 src/__tests__/views/LinkView.spe.ts         |  8 ++++----
 src/__tests__/views/LoginView.spe.ts        |  7 +++----
 src/__tests__/views/ProductView.spe.ts      |  8 ++++----
 src/__tests__/views/ProfileView.spec.ts     |  8 ++++----
 src/__tests__/views/ShopView.spe.ts         |  8 ++++----
 32 files changed, 70 insertions(+), 91 deletions(-)

diff --git a/src/__tests__/App.spec.ts b/src/__tests__/App.spec.ts
index cb4092d..d2d1ecc 100644
--- a/src/__tests__/App.spec.ts
+++ b/src/__tests__/App.spec.ts
@@ -17,10 +17,10 @@ const router = createRouter({
   ]
 })
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 /**
  * @vi-environment jsdom
@@ -44,7 +44,7 @@ beforeEach(() => {
   })
 
   wrapper = shallowMount(App, {
-    data() {
+    data(): any {
       return {
         values: values
       }
diff --git a/src/__tests__/assets/services.spe.ts b/src/__tests__/assets/services.spe.ts
index 1890260..7cb5931 100644
--- a/src/__tests__/assets/services.spe.ts
+++ b/src/__tests__/assets/services.spe.ts
@@ -571,31 +571,21 @@ describe('setMeta()', () => {
     setMeta('New Title', 'Description', 'https://example.com')
 
     expect(document.querySelector('title').innerText).toEqual('New Title')
-    expect(document.querySelector('[property="og:title"]').getAttribute('content')).toEqual(
-      'New Title'
-    )
+    expect(document.querySelector('[property="og:title"]').getAttribute('content')).toEqual('New Title')
   })
 
   test('should set the description correctly', () => {
     setMeta('Title', 'New Description', 'https://example.com')
 
-    expect(document.querySelector('[name="description"]').getAttribute('content')).toEqual(
-      'New Description'
-    )
-    expect(document.querySelector('[property="og:description"]').getAttribute('content')).toEqual(
-      'New Description'
-    )
+    expect(document.querySelector('[name="description"]').getAttribute('content')).toEqual('New Description')
+    expect(document.querySelector('[property="og:description"]').getAttribute('content')).toEqual('New Description')
   })
 
   test('should set the url correctly', () => {
     setMeta('Title', 'Description', 'https://example.com/new-url')
 
-    expect(document.querySelector('[property="og:url"]').getAttribute('content')).toEqual(
-      'https://example.com/new-url'
-    )
-    expect(document.querySelector('[rel="canonical"]').getAttribute('href')).toEqual(
-      'https://example.com/new-url'
-    )
+    expect(document.querySelector('[property="og:url"]').getAttribute('content')).toEqual('https://example.com/new-url')
+    expect(document.querySelector('[rel="canonical"]').getAttribute('href')).toEqual('https://example.com/new-url')
   })
 
   test('should set the image correctly', () => {
diff --git a/src/__tests__/components/ArticleSet.spec.ts b/src/__tests__/components/ArticleSet.spec.ts
index 07e2fef..c1e99e4 100644
--- a/src/__tests__/components/ArticleSet.spec.ts
+++ b/src/__tests__/components/ArticleSet.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import ArticleSet from '../../components/ArticleSet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/components/BtnElt.spec.ts b/src/__tests__/components/BtnElt.spec.ts
index 6bced7f..8665330 100644
--- a/src/__tests__/components/BtnElt.spec.ts
+++ b/src/__tests__/components/BtnElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { mount, enableAutoUnmount } from '@vue/test-utils'
 import BtnElt from '../../components/BtnElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/CardElt.spec.ts b/src/__tests__/components/CardElt.spec.ts
index fdb7ac6..5adc5d0 100644
--- a/src/__tests__/components/CardElt.spec.ts
+++ b/src/__tests__/components/CardElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import CardElt from '../../components/CardElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/FieldElt.spe.ts b/src/__tests__/components/FieldElt.spe.ts
index ac4b862..b67747a 100644
--- a/src/__tests__/components/FieldElt.spe.ts
+++ b/src/__tests__/components/FieldElt.spe.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { mount, enableAutoUnmount } from '@vue/test-utils'
 import FieldElt from '../../components/FieldElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/FootElt.spec.ts b/src/__tests__/components/FootElt.spec.ts
index 3ceedf8..7f6fad7 100644
--- a/src/__tests__/components/FootElt.spec.ts
+++ b/src/__tests__/components/FootElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import FootElt from '../../components/FootElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/GallerySet.spec.ts b/src/__tests__/components/GallerySet.spec.ts
index 0e220a9..1672cbe 100644
--- a/src/__tests__/components/GallerySet.spec.ts
+++ b/src/__tests__/components/GallerySet.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import GallerySet from '../../components/GallerySet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/components/ImageSet.spec.ts b/src/__tests__/components/ImageSet.spec.ts
index df65bd2..bda996b 100644
--- a/src/__tests__/components/ImageSet.spec.ts
+++ b/src/__tests__/components/ImageSet.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import ImageSet from '../../components/ImageSet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/components/LinkSet.spec.ts b/src/__tests__/components/LinkSet.spec.ts
index 9bad854..922ecbb 100644
--- a/src/__tests__/components/LinkSet.spec.ts
+++ b/src/__tests__/components/LinkSet.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import * as services from '../../assets/services'
 import LinkSet from '../../components/LinkSet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/components/ListElt.spec.ts b/src/__tests__/components/ListElt.spec.ts
index 97731e9..c9b6f51 100644
--- a/src/__tests__/components/ListElt.spec.ts
+++ b/src/__tests__/components/ListElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import ListElt from '../../components/ListElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/MediaElt.spec.ts b/src/__tests__/components/MediaElt.spec.ts
index e637b32..f39de65 100644
--- a/src/__tests__/components/MediaElt.spec.ts
+++ b/src/__tests__/components/MediaElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import MediaElt from '../../components/MediaElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/NavElt.spec.ts b/src/__tests__/components/NavElt.spec.ts
index c545159..b31b481 100644
--- a/src/__tests__/components/NavElt.spec.ts
+++ b/src/__tests__/components/NavElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import NavElt from '../../components/NavElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/OrderSet.spec.ts b/src/__tests__/components/OrderSet.spec.ts
index 1a4164c..4404185 100644
--- a/src/__tests__/components/OrderSet.spec.ts
+++ b/src/__tests__/components/OrderSet.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import OrderSet from '../../components/OrderSet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/components/ProductSet.spec.ts b/src/__tests__/components/ProductSet.spec.ts
index 0954840..bd8e37d 100644
--- a/src/__tests__/components/ProductSet.spec.ts
+++ b/src/__tests__/components/ProductSet.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import ProductSet from '../../components/ProductSet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/components/SliderElt.spe.ts b/src/__tests__/components/SliderElt.spe.ts
index 363d983..1f5b5b4 100644
--- a/src/__tests__/components/SliderElt.spe.ts
+++ b/src/__tests__/components/SliderElt.spe.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { mount, enableAutoUnmount } from '@vue/test-utils'
 import SliderElt from '../../components/SliderElt.vue'
 
-let wrapper
+let wrapper: any
 
 beforeEach(() => {
   wrapper = mount(SliderElt, {
@@ -262,23 +262,13 @@ describe('checkRandom() method', () => {
   test("must call setRandom(false, 'Random', 'fa-random', 'fa-long-arrow-alt-right') method if randomState is true", () => {
     wrapper.vm.randomState = true
     wrapper.vm.checkRandom()
-    expect(wrapper.vm.setRandom).toHaveBeenCalledWith(
-      false,
-      'Random',
-      'fa-random',
-      'fa-long-arrow-alt-right'
-    )
+    expect(wrapper.vm.setRandom).toHaveBeenCalledWith(false, 'Random', 'fa-random', 'fa-long-arrow-alt-right')
   })
 
   test("must call setRandom(true, 'Normal', 'fa-long-arrow-alt-right', 'fa-random') method if randomState is false", () => {
     wrapper.vm.randomState = false
     wrapper.vm.checkRandom()
-    expect(wrapper.vm.setRandom).toHaveBeenCalledWith(
-      true,
-      'Normal',
-      'fa-long-arrow-alt-right',
-      'fa-random'
-    )
+    expect(wrapper.vm.setRandom).toHaveBeenCalledWith(true, 'Normal', 'fa-long-arrow-alt-right', 'fa-random')
   })
 
   test('must call refreshSlide() method', () => {
diff --git a/src/__tests__/components/TableElt.spec.ts b/src/__tests__/components/TableElt.spec.ts
index 1fc880e..cccca31 100644
--- a/src/__tests__/components/TableElt.spec.ts
+++ b/src/__tests__/components/TableElt.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { enableAutoUnmount, mount } from '@vue/test-utils'
 import TableElt from '../../components/TableElt.vue'
 
-let wrapper
+let wrapper: any
 
 enableAutoUnmount(afterEach)
 
diff --git a/src/__tests__/components/UserSet.spec.ts b/src/__tests__/components/UserSet.spec.ts
index 7e816b4..2da0118 100644
--- a/src/__tests__/components/UserSet.spec.ts
+++ b/src/__tests__/components/UserSet.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import UserSet from '../../components/UserSet.vue'
 
-let wrapper
+let wrapper: any
 
 vi.mock('axios')
 
diff --git a/src/__tests__/views/ArticleView.spe.ts b/src/__tests__/views/ArticleView.spe.ts
index 24a3f3b..b6932ad 100644
--- a/src/__tests__/views/ArticleView.spe.ts
+++ b/src/__tests__/views/ArticleView.spe.ts
@@ -34,10 +34,10 @@ const user = {
   role: role
 }
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 /**
  * @vi-environment jsdom
diff --git a/src/__tests__/views/BasketView.spe.ts b/src/__tests__/views/BasketView.spe.ts
index a26639a..305f87f 100644
--- a/src/__tests__/views/BasketView.spe.ts
+++ b/src/__tests__/views/BasketView.spe.ts
@@ -17,7 +17,7 @@ global.fetch = vi.fn(() =>
   })
 )
 
-let wrapper
+let wrapper: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})
@@ -32,7 +32,7 @@ beforeEach(() => {
         email: 'email@test.com'
       }
     },
-    data() {
+    data(): any {
       return {
         basket: [
           {
diff --git a/src/__tests__/views/BlogView.spe.ts b/src/__tests__/views/BlogView.spe.ts
index 30d6830..f7dac92 100644
--- a/src/__tests__/views/BlogView.spe.ts
+++ b/src/__tests__/views/BlogView.spe.ts
@@ -4,10 +4,10 @@ import { createStore } from 'vuex'
 import * as services from '../../assets/services'
 import BlogView from '../../views/BlogView.vue'
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})
diff --git a/src/__tests__/views/ContactView.spec.ts b/src/__tests__/views/ContactView.spec.ts
index fdbe6a8..79f9588 100644
--- a/src/__tests__/views/ContactView.spec.ts
+++ b/src/__tests__/views/ContactView.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import * as services from '../../assets/services'
 import ContactView from '../../views/ContactView.vue'
 
-let wrapper
+let wrapper: any
 
 /**
  * @vi-environment jsdom
diff --git a/src/__tests__/views/ErrorView.spec.ts b/src/__tests__/views/ErrorView.spec.ts
index 096e2b1..443e913 100644
--- a/src/__tests__/views/ErrorView.spec.ts
+++ b/src/__tests__/views/ErrorView.spec.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'vitest'
 import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import ErrorView from '../../views/ErrorView.vue'
 
-let wrapper
+let wrapper: any
 
 beforeEach(() => {
   wrapper = shallowMount(ErrorView, {
diff --git a/src/__tests__/views/GalleryView.spe.ts b/src/__tests__/views/GalleryView.spe.ts
index d50fd13..4ae3d17 100644
--- a/src/__tests__/views/GalleryView.spe.ts
+++ b/src/__tests__/views/GalleryView.spe.ts
@@ -4,10 +4,10 @@ import { createStore } from 'vuex'
 import * as services from '../../assets/services'
 import GalleryView from '../../views/GalleryView.vue'
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 /**
  * @vi-environment jsdom
@@ -66,7 +66,7 @@ describe('GalleryView', () => {
   })
 
   test('wrapper created hook', () => {
-    expect(serve.setMeta).toHaveBeenCalled()
+    expect(services.setMeta).toHaveBeenCalled()
     expect(actions.listGalleries).toHaveBeenCalled()
   })
 
diff --git a/src/__tests__/views/HomeView.spec.ts b/src/__tests__/views/HomeView.spec.ts
index 2eaa3ea..c482e50 100644
--- a/src/__tests__/views/HomeView.spec.ts
+++ b/src/__tests__/views/HomeView.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import * as services from '../../assets/services'
 import HomeView from '../../views/HomeView.vue'
 
-let wrapper
+let wrapper: any
 
 /**
  * @vi-environment jsdom
diff --git a/src/__tests__/views/ImageView.spe.ts b/src/__tests__/views/ImageView.spe.ts
index 95c1690..8bd8052 100644
--- a/src/__tests__/views/ImageView.spe.ts
+++ b/src/__tests__/views/ImageView.spe.ts
@@ -28,10 +28,10 @@ const mockRouter = {
   push: vi.fn()
 }
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})
diff --git a/src/__tests__/views/LegalView.spec.ts b/src/__tests__/views/LegalView.spec.ts
index 3ed5f26..ebb9f5b 100644
--- a/src/__tests__/views/LegalView.spec.ts
+++ b/src/__tests__/views/LegalView.spec.ts
@@ -3,7 +3,7 @@ import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import * as services from '../../assets/services'
 import LegalView from '../../views/LegalView.vue'
 
-let wrapper
+let wrapper: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})
diff --git a/src/__tests__/views/LinkView.spe.ts b/src/__tests__/views/LinkView.spe.ts
index ad5add9..3134be5 100644
--- a/src/__tests__/views/LinkView.spe.ts
+++ b/src/__tests__/views/LinkView.spe.ts
@@ -4,10 +4,10 @@ import { createStore } from 'vuex'
 import * as services from '../../assets/services'
 import LinkView from '../../views/LinkView.vue'
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})
diff --git a/src/__tests__/views/LoginView.spe.ts b/src/__tests__/views/LoginView.spe.ts
index 6cb2964..abdde98 100644
--- a/src/__tests__/views/LoginView.spe.ts
+++ b/src/__tests__/views/LoginView.spe.ts
@@ -3,8 +3,8 @@ import { shallowMount, enableAutoUnmount } from '@vue/test-utils'
 import * as services from '../../assets/services'
 import LoginView from '../../views/LoginView.vue'
 
-let wrapper
-let setMetaSpy
+let wrapper: any
+let setMetaSpy: any
 
 /**
  * @vi-environment jsdom
@@ -35,8 +35,7 @@ beforeEach(() => {
         FORGOT_PASS: 'Forgot Password',
         INTRO_SIGNIN: 'Sign in to your account',
         INTRO_SIGNUP: 'Sign up to your account',
-        INTRO_FORGOTPASS:
-          "Enter your email address and we'll send you a link to reset your password."
+        INTRO_FORGOTPASS: "Enter your email address and we'll send you a link to reset your password."
       }
     },
     data() {
diff --git a/src/__tests__/views/ProductView.spe.ts b/src/__tests__/views/ProductView.spe.ts
index 10250b5..d292a37 100644
--- a/src/__tests__/views/ProductView.spe.ts
+++ b/src/__tests__/views/ProductView.spe.ts
@@ -28,10 +28,10 @@ const mockRouter = {
   push: vi.fn()
 }
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 /**
  * @vi-environment jsdom
diff --git a/src/__tests__/views/ProfileView.spec.ts b/src/__tests__/views/ProfileView.spec.ts
index 8aa6834..797b807 100644
--- a/src/__tests__/views/ProfileView.spec.ts
+++ b/src/__tests__/views/ProfileView.spec.ts
@@ -4,10 +4,10 @@ import { createStore } from 'vuex'
 import * as services from '../../assets/services'
 import ProfileView from '../../views/ProfileView.vue'
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})
diff --git a/src/__tests__/views/ShopView.spe.ts b/src/__tests__/views/ShopView.spe.ts
index 75537cf..668c655 100644
--- a/src/__tests__/views/ShopView.spe.ts
+++ b/src/__tests__/views/ShopView.spe.ts
@@ -4,10 +4,10 @@ import { createStore } from 'vuex'
 import * as services from '../../assets/services'
 import ShopView from '../../views/ShopView.vue'
 
-let wrapper
-let store
-let actions
-let state
+let wrapper: any
+let store: any
+let actions: any
+let state: any
 
 beforeEach(() => {
   vi.spyOn(services, 'setMeta').mockImplementation(() => {})

From 1336d4a576d34252baa3acdaf9c235e813c7c9bc Mon Sep 17 00:00:00 2001
From: Philippe Beck <philippe@philippebeck.net>
Date: Sun, 10 Mar 2024 17:03:21 +0400
Subject: [PATCH 6/6] Release 3.0.2-alpha

---
 README.md         | 13 ++++++++-----
 package-lock.json |  4 ++--
 package.json      |  2 +-
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index ba36470..584a659 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,14 @@
 # vesan
 
-Vesan is a Frontend Framework made with Vue 3, TypeScript, Vuex, Axios, Sass & Animadio  
-Includes Font-Awesome, Recaptcha, PayPal, TinyMCE, Vitest & Cypress  
+Vesan is a Frontend Framework made with Vue 3, TypeScript & Animadio  
+Includes Axios, Font-Awesome, Recaptcha, PayPal, Sass, TinyMCE, Vitest & Cypress  
 
-Migration from Option API to Composition API in progress (~ 30%)  
-Migration of all scripts from JS to TS in progress (~ 60%)  
-Migration of the tests from Jest to Vitest in progress too (~ 60%)  
+**WARNING**: build is not ready yet on the version 3 *(alpha mode)*
+*For production ready*: use the last version 2
+
+Migration from Option API to Composition API in progress (~ 40%)  
+Migration of all scripts from JS to TS in progress (~ 80%)  
+Migration of the tests from Jest to Vitest in progress too (~ 70%)  
 
 Migration of the store from Vuex to Pinia soon  
 Added e2e tests with Cypress soon too  
diff --git a/package-lock.json b/package-lock.json
index 60ba0c5..c82010c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vesan",
-  "version": "3.0.1-alpha",
+  "version": "3.0.2-alpha",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vesan",
-      "version": "3.0.1-alpha",
+      "version": "3.0.2-alpha",
       "license": "Apache-2.0 License",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.2.1",
diff --git a/package.json b/package.json
index 8958b49..2cc1dc4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vesan",
-  "version": "3.0.1-alpha",
+  "version": "3.0.2-alpha",
   "description": "Frontend Framework with Vue, TypeScript, Vuex, Axios, Sass & Animadio",
   "type": "module",
   "keywords": [