fcad-core-dragon 2.0.0-beta.0 → 2.0.0-beta.10

package/documentation/composants_critiques/app-base.md

@@ -0,0 +1,311 @@
+# Base App
+
+
+
+## Aperçu
+
+Composant racine pour utilisation de la librairie.  
+
+## Référence du composant
+
+**AppBase** `<app-base/>` 
+
+## Comportement
+
+Ce composant reçoit les premières données de configuration pour la création de application. Les données sont fournie au composant sous forme de props. Il valide le type certaines des données fournie et fait afficher un message d'erreur à lécran et dans la console du navigateur, lorsque des erreurs sont détectées. Une fois les données validées, le composant les transmet au Store de application.
+
+Le composants est également en charge de faire la communication avec le serveur et les autres module de stockage. Il gère la recuperation et la mise à jours des données de progression dans l'application.
+
+
+
+::: tip Note
+Le composant rendra l'application inutilisable Lorsque des erreurs de configuration seront détéctée.
+Prêtez attention au message(s) affiché(s) par le composant dans la console du navigateur et l'application. Cela vous permettra de savoir ce qui doit être corrigé.
+:::
+
+## Paramètres
+
+Aucun paramètre n'est nécessaire pour ce composant.
+
+### Props
+
+| Propriété | Type  | Description &nbsp;&nbsp;&nbsp;  | valeur par défaut | 
+|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
+| appConfig | Object | Récoit les données de configuration de application | Doit contenir au minimum les valeurs suivantes: `{lang(String), specification(String), id(String), crs_id(String), idb_id(String), no_menu(Boolean), is_single_activity(Boolean), auto_next_activity(Boolean) }`.   Valeur Optionnelles: `{remote(Boolean), actor (Oject), linkedResource(Object) }`.   Référez-vous à la section ci dessous pour plus de details|
+
+### Exemple
+
+Voici ci dessous un exemple d'utilisation du composant dans une application 
+
+
+```vue 
+<!--App.vue-->
+<template>
+  <app-base :app-config="$data">
+</template>
+<script>
+export default {
+  data() {
+    return {
+      lang: 'fr', // Set Language for the Activities and App French (fr)| English(en)
+      specification: 'xapi', // connection specification (xapi|scorm)
+      id: 'v2', // This activity ID
+      crs_id: 'template_fcad_dragon', //The Group ID this activity is part of.
+      idb_id: '$template_fcad_dragon', // This activity ID in LocalDB. Only when APP is not remote.
+      no_menu: false, // Set permission to view and navigate to SUMMARY VIEW (true|false) -default :false; (CAN BE REMOVED)
+      is_single_activity: false, //set app as a single activity ( ex:Introduction | Conclusion | Prep_devoir)(true|false) - default:false; (CAN BE REMOVED)
+      auto_next_activity: true, // set Previous/Next can allow navigation between activities. Set false if do not want navigation between activities with Previous/Next button (true|false) - default:true
+      // remote: false, // Force App to access server remotely while in production mode (true|false) - default:false, (CAN BE REMOVED)
+      actor: {
+        name: 'Luke Skywalker',
+        mbox: 'mailto:skywalker2@mymailbox.com'
+      }
+    }
+  }
+}
+</script>
+```
+
+
+
+### Paramètres Pour AppConfig 
+
+<h3>⚙️<b>actor</b></h3> 
+Défini l'agent pour l'envoi des statements xAPI
+
+- **Type:** `Object`
+- **Usage:** `Optionel` 
+- **Valeur(s):** 
+  - `name (String)`- nom de agent
+  - `mbox(String)`- l'email de l'agent. Doit commencer par <i>mailto:</i>  
+
+<h3>⚙️<b>auto_next_activity</b></h3>  
+Défini si la navigation est permise entre activité. Doit être mis à `false` si on ne veut pas de navigation entre les activités avec les boutons de navigation Précedent/Suivant button.
+
+- **Type:** `Boolean`
+- **Usage:** `Requis` 
+- **Valeur(s):** `true|false` valeur par defaut est `true`
+
+<h3>⚙️<b>crs_id</b></h3>  
+Défini l'identification du group auquel doit faire partie l'activité (l'application).
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):** Sans Objet. Doit être défini.
+
+<h3>⚙️<b>id</b></h3> 
+Défini l'identification de l'application. Doit être unique pour éviter toute corruption de données.
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):**  Sans Objet. Doit être défini.
+
+
+<h3>⚙️<b>idb_id</b></h3> 
+Défini l'identification pour l'environement de stockage local (indexDB).  Doit être unique pour eviter toute corruption de données.
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):**  Sans Objet. Doit être défini.
+
+<h3>⚙️<b>is_single_activity</b></h3>  
+Configure l'application pour être traité comme étant une activité independante.
+
+- **Type:** `Boolean`
+- **Usage:** `Requis` 
+- **Valeur(s):** `true|false` valeur par defaut est `false`
+
+
+<h3>⚙️<b>no_menu</b></h3>  
+Défini si le menu (sommaire) de l'application doit être accessible où non.
+
+- **Type:** `Boolean`
+- **Usage:** `Requis` 
+- **Valeur(s):** `[true|false]` valeur par defaut est `false`. Mettre à `true` si la page sommaire ne doit pas être accessible
+
+<h3>⚙️<b>lang</b></h3>  
+Défini la langue dans la quelle sera presenté l'application.
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):** `[fr|en]` valeur par defaut est `fr` pour la langue française. Mettre à `en` pour avoir l'application en anglais.
+
+<h3>⚙️<b>specification</b></h3>  
+Défini la norme de specification à utiliser par l'application pour la gestion des données (xAPI ou Scorm).
+
+- **Type:** `String`
+- **Usage:** `Requis` 
+- **Valeur(s):** `[fr|en]` valeur par defaut est `fr` pour la langue française. Mettre à `en` pour avoir l'application en anglais.
+
+
+#### TYPE_QUESTION
+
+**Type:** `String` _(choix_mult | choix_unique | dropdown | reponse_ouverte | texte_tableau | texte_troue | texte_troue_select)__
+
+**Usage:** Obligatoire.  
+Définie le type de question.
+
+### Slots
+`content`[named-slot] - permet de recevoir tout le contenu HTML à afficher.
+
+
+## Liste d'écouteurs
+
+le composant écoutes globalement les émetteurs ci-dessous attachés au `$bus`
+
+::: details <b>set-comp-status</b>
+
+Utilisé pour définir le status d'un composant. Un composant peut ainsi émettre son état en indicant s'il est prêt ou non. `AppBase` mettra à jour global de application selon les états des composants. 
+
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| name | \{String\} | `` | `(éditable)`nom du composant qui émet. |
+| status | \{String\} | `[loading\|ready]` | `(éditable)` status à communiquer|
+| updateTracker | \{Function\} | `name, status` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+| compStatusTracker | \{Array\} | `[]` | `(non-éditable)` Ce paramettre est mis à jour dans le `store`. |
+
+- Exemple
+
+```js
+// Le composant toto indique sont status de loading
+this.$bus.$emit('set-comp-status', 'comp_toto', 'loading')
+// AppBase met ajour le status du tracker dans le store 
+// AppBase met le status de toute l'application à LOADING
+
+//Deux minutes plus tard composant toto indique qu'il est prêt
+setTimeout(()=>this.$bus.$emit('set-comp-status', 'comp_toto', 'ready'), 2000)
+// AppBase met ajour le status du tracker dans le store 
+// AppBase met le status de toute l'application à READY 
+```
+ ::: tip Note
+  l'Application passe seulement à l'état `ready` quand TOUS les composants qui émettent cet événement sont en status `ready`.
+
+
+:::
+
+
+
+
+::: details <b>reset-userdata</b>
+
+Utilisé pour reinitialiser la progression de utilisateur
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| resetUserData | \{Function\} |  | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+
+- Exemple
+
+```js
+// Le composant toto demande de rénitialiser la progression
+this.$bus.$emit('reset-userdata')
+// AppBase réinitalise la progression
+```
+:::
+
+::: details <b>fire-exit-event</b>
+
+Cet  évènement  utilisé pour signaler la fermeture de l'application dans le navigateur.
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| cb | \{Function\} | `` | `(éditable, optionnel)`fonction à executer après la réalisation de l'événement |
+| option | \{Boolean\} | `[true\|false]` | `(éditable)` indique si la fonction associée doit utiliser l'API Fecth ou pas|
+| endLesson | \{Function\} | `cb, option` | `(non-éditable)` Cette fonction est executée par application lorsque évènement est réçu|
+
+- Exemple
+
+```js
+ // Le composant AppBaseModule annonce la fermeture de application en cour avant de lancer une autre leçon.
+this.$bus.$emit('fire-exit-event', () => {
+  window.location.replace(newUrlToLaunch)// newUrlToLaunch est url dans le LRS vers la prochaine ressource à initializer 
+}) 
+// AppBase exécute la fermeture de l'application
+
+```
+
+:::
+
+::: details <b>move-to-target</b>
+
+Utilisé pour signaler le déplacement (skip) vers un élément du DOM
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| target | \{String\} | `` | `(éditable, requis)`Attribut ID de l'élément HTML vers quel va se faire le deplacement |
+| opt | \{Object\} | `{ top, left, behavior}` | `(éditable, optionnel)` paramettre de scroll|
+| moveTo | \{Function\} | `target, opt` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+- Exemple
+
+```js
+// Le composant toto demande de scroller vers une DIV avec ID main
+this.$bus.$emit('move-to-target', 'main')
+// AppBase déplace le contenu de l'écran vers la DIV main
+```
+:::
+
+::: details <b>send-xapi-statement</b>
+
+Utilisé pour demander l'envoi d'un nouveau statement vers le LRS
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| stmt | \{Object\} | `` | `(éditable, requis)` objet statement à envoyer au LRS|
+| cb | \{Function\} | `[loading\|ready]` | `(éditable)` fonction à executer après la réalisation de l'envoi|
+| withFetch | \{Boolean\} | `[true\|false]` | `(éditable)`Defini si l'API Fetch doit être utilisé ou non|
+| sendXapiStatements | \{Function\} | `stmt, cb, withFetch` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+- Exemple
+
+```js
+ // Le composant toto demande l'envoi d'un statement
+ let stmt = {...} // ceci est un statement abstrait (voir la spécification xAPI pour la definition de statement)
+ this.$bus.$emit('send-xapi-statement', stmt)
+//  AppBase met ajour le status du tracker dans le store 
+//  AppBase envoie le statement vers le LRS 
+```
+:::
+
+::: details <b>reset-focus-on</b>
+
+Force le focus sur un element dans application
+
+| **Paramettre associés**<img width=200/> | **type** | **valeur** | **Description** | 
+|----|----|----|---------|
+| e | \{Objet\} | `` | `(éditable,requis)` l'HTMLElement qui doit recevoir le focus |
+| resetFocus | \{Function\} | `e` | `(non-éditable)`Cette fonction est executée lorsque évènement est récu|
+
+- Exemple
+
+```js
+// Le composant toto demande le focus sur une DIV main
+let main = document.querySelector('#main')
+this.$bus.$emit('reset-focus-on', main)
+// AppBase force le focus sur main
+```
+:::
+
+<!-- - __`set-comp-status`__ `(loading | ready)`: utiliser pour setter l'etat d'un composant this.updateTracker
+- `send-xapi-statement`, this.onSendXapiStatement
+- `reset-userdata`, this.resetUserData
+- `fire-exit-event`, this.endLesson
+- `move-to-target`, this.skipToMain
+- `reset-focus-on`, this.resetFocus -->
+
+
+
+
+## Style
+
+`.app-page`[class]
+
+Aucune manipulation requise.
+
+
+
+## Accessibilité
+Aucune manipulation requise.
+

package/documentation/composants_critiques/main.md

@@ -0,0 +1,15 @@
+# Main
+Fichier de configuration qui sert de point entrée principal de la librairie FCAD
+
+## Aperçu/ Utilité
+
+- Enregistement global des plugins 
+- Enregistrement global des composants
+- Création de stogage local
+- Configuration de connection au serveur
+- Configuration de l'application
+
+::: warning  Important
+  Lorsque vous créez un nouveau `composant global`, engegistrez le dans ce fichier.
+:::
+

package/documentation/demarrage.md

@@ -0,0 +1,50 @@
+# Guide de démarrage
+Logiciels requis pour le développement du FCAD.
+
+## Vérifier la compatibilité de Node.js et npm
+
+Node.js <b>22.12.0</b> ou plus récent et npm <b>10.9.0</b> ou plus récent sont requis.
+
+**Commandes pour vérifier les versions installées sur votre poste**
+
+```shell
+node -v
+npm -v
+```
+
+::: info
+Il faut contacter la DRI pour procéder à la mise à jour de l'installation globale de Node.js et npm sur votre machine.
+:::
+
+## Dépendances globales
+
+Les paquets npm suivants doivent être installés globalement sur votre poste : yalc, nodemon
+
+```shell
+npm install -g yalc nodemon
+```
+
+::: warning AVERTISSEMENT
+il est possible qu'un redémarrage soit nécessaire suite à l'installation de yalc
+:::
+
+## Récupération du code et utilisation de yalc
+
+Le code source se trouve sur notre instance de gitlab https://git.crosemont.qc.ca/fcad/core/fcad-core-2
+
+::: warning AVERTISSEMENT
+L'utilisation de Git Bash comme terminal par défaut est fortement recommandée.
+:::
+
+Une fois le répertoire git cloné, il faut installer les dépendances. 
+
+```shell
+npm install
+```
+
+Le script <b>watch</b> dans package.json sert à monitorer tout changement dans le code et à publier automatiquement vers yalc.
+
+```shell
+npm run watch
+```
+

package/documentation/deploiement.md

@@ -0,0 +1,58 @@
+# Déploiement sur le registre npm
+
+Le FCAD 2 est disponible en tant que paquet npm nommé <b>fcad-core-dragon</b>.
+
+https://www.npmjs.com/package/fcad-core-dragon
+
+## Pré-requis
+Il faut d’abord s’assurer d’être connecté à npm en exécutant la commande :
+```shell
+npm login
+```
+Le compte npm à utiliser est [<b>cg_distance</b>](https://www.npmjs.com/~cg_distance)
+
+## Version pre-release vs version stable
+
+Par convention, il faut d'abord publier une version pre-release qui sera testée par les intégrateurs. Tout problème/bogue relevé pourra être corrigé avant d'en arriver à la publication d'une version stable. Une version pre-release portera le suffixe <b>-beta.x</b> et aura le tag <b>next</b> sur npm.
+
+L'installation de la dernière version <b>pre-release</b> se fait à l'aide de la commande : 
+```shell
+npm install fcad-core-dragon@next
+```
+
+L'installation de la dernière version <b>stable</b> se fait à l'aide de la commande : 
+```shell
+npm install fcad-core-dragon@latest
+```
+
+![Versions sur npm](/npm_version.png)
+<small>*Capture écran de la page affichant [l'historique complet des versions sur npm](https://www.npmjs.com/package/fcad-core-dragon?activeTab=versions)</small>
+
+## Procédure à suivre
+
+- La première étape du déploiement consiste à lister les derniers changements dans CHANGELOG.md suivi d'un commit/push.
+
+- Il faut ensuite utiliser la commande <b>npm version</b> pour incrémenter le numéro de version de notre paquet npm.
+
+  <small>Admettons que nous sommes présentement sur la version <b>2.0.0</b></small>
+
+
+  ```shell
+  # pour une version pre-release
+  npm version 2.0.0-beta.1
+  # pour une version stable
+  npm version 2.0.1
+  ```
+  ::: warning AVERTISSEMENT
+  Un nouveau commit sera créé suite à l'exécution de la commande npm version. Il faut donc faire un push pour s'assurer que le changement aboutisse sur le serveur git.
+  :::
+
+
+- Il faut finalement utiliser la commande <b>npm publish</b> pour déployer la nouvelle version sur le registre npm.
+
+  ```shell
+  # pour une version pre-release
+  npm publish --tag next
+  # pour une version stable
+  npm publish
+  ```

package/documentation/index.md

@@ -0,0 +1,33 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: 'FCAD 2'
+  text: 'Documentation technique'
+  tagline: Pour les développeurs
+  actions:
+    - theme: brand
+      text: Guide de démarrage
+      link: /demarrage
+    - theme: alt
+      text: Code source sur Gitlab
+      link: https://git.crosemont.qc.ca/fcad/core/fcad-core-2
+    - theme: alt
+      text: fcad-core-dragon sur npm
+      link: https://www.npmjs.com/package/fcad-core-dragon
+
+features:
+  - icon: 
+      src: /vuejs.svg
+    title: Vue.js 3
+    details: Le FCAD 2 utilise la dernière version du framework JavaScript Vue.js
+  - icon: 
+      src: /vite.svg
+    title: Vite
+    details: Vite est utilisé pour le développement local ainsi que la compilation finale
+  - icon: 
+      src: /vuetify.svg
+    title: Vuetify
+    details: La librairie Vuetify est utilisée pour créer notre interface utilisateur
+---

package/documentation/markdown-examples.md

@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

package/documentation/public/vite.svg

@@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>

package/documentation/public/vuejs.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>

package/documentation/public/vuetify.svg

@@ -0,0 +1,6 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M203.087 130.155L144.963 230.852L200 326.236L272.896 199.975L345.758 73.7152H235.651L203.087 130.155Z" fill="#1697F6"/>
+<path d="M127.137 199.975L130.955 206.615L185.328 112.393L207.668 73.7152H200H54.2415L127.137 199.975Z" fill="#AEDDFF"/>
+<path d="M235.651 73.7152C263.203 164.385 200 326.236 200 326.236L144.963 230.852L235.651 73.7152Z" fill="#1867C0"/>
+<path d="M207.668 73.7152C91.586 73.7152 130.955 206.615 130.955 206.615L207.668 73.7152Z" fill="#7BC6FF"/>
+</svg>

package/eslint.config.js

@@ -0,0 +1,60 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,mjs,cjs,vue}']
+  },
+  globalIgnores([
+    '**/.DS_Store',
+    '**/node_modules',
+    '**/dist/**',
+    '**/coverage/**',
+    '**/yalc.lock',
+    '**/package-lock.json',
+    '**/.zip',
+    '**/.env.local',
+    '**/.env.*.local',
+    '**/npm-debug.log*',
+    '**/.idea',
+    '**/.vscode',
+    '**/*.suo',
+    '**/*.ntvs*',
+    '**/*.njsproj',
+    '**/*.sln',
+    '**/*.sw?',
+    '**/\\_*',
+    '**/.gitignore'
+  ]),
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser
+      }
+    }
+  },
+  js.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+  {
+    rules: {
+      'no-unused-vars': [
+        'warn',
+        { vars: 'local', args: 'none', ignoreRestSiblings: true }
+      ],
+      'vue/no-unused-vars': 'warn',
+      'no-prototype-builtins': 'off',
+      'vue/html-self-closing': 'off',
+      'vue/no-v-html': 'off',
+      'vue/no-v-text-v-html-on-component': 'off',
+      'vue/no-deprecated-delete-set': 'warn',
+      'vue/max-attributes-per-line': 'off',
+      'vue/singleline-html-element-content-newline': 'off',
+      'vue/component-name-in-template-casing': ['error', 'kebab-case']
+    }
+  },
+  skipFormatting
+])