Fix: Update month input when clicking on preselected ranges

package.json

@@ -14,8 +14,11 @@
   "main": "background.js",
   "dependencies": {
     "core-js": "^3.6.5",
+    "date-fns": "^2.23.0",
+    "vls": "^0.7.4",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.8"
+    "vue-router": "^4.0.8",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -9,7 +9,7 @@ import Nav from './components/nav.vue'
 export default {
   name: 'App',
   components: {
-    Nav
+      Nav
   }
 }
 </script>

src/components/CreateMonth.vue

@@ -0,0 +1,130 @@
+<template>
+<div id="create-month" >
+    <div class="month-presentation" id="new-month">
+      <div class="date">
+          <input type="month" v-model="monthDate">
+      </div>
+      <div class="datas">
+        <ul>
+            <li> 
+                <label for="ca-theo">CA théorique</label>
+                <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" >
+            </li>
+            <li> 
+                <label for="ca-retro">CA rétrocession</label>
+                <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" >
+            </li>
+            <li> 
+                <label for="ca-react">CA réactualisé</label>
+                <input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" >
+            </li>
+            <li> 
+                <label for="nbr-seances">Nombre de séances effectuées</label>
+                <input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" >
+            </li>
+            <li> 
+                <label for="retro">Montant de la rétrocession</label>
+                <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" >
+            </li>
+            <li> 
+                <label for="remuneration">Rémunération effectuée</label>
+                <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
+            </li>
+        </ul>
+      </div>
+      <div class="actions">
+        <button class="validate" @click="save"> Valider </button>
+        <button class="cancel" @click="cancel"> Annuler </button>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+const today = new Date();
+function formatDate(date) {
+    var y = ''+date.getFullYear()
+    var m = ''+(date.getMonth()+1)
+    if (m.length < 2) { m = '0'+m}
+    return [y, m].join('-')
+}
+
+export default {
+  name: 'NewMonth',
+  props: {
+  },
+  components: {
+  },
+  data () {
+      return {
+            monthDate: formatDate(today),
+            monthCopy: Object,
+          }
+  },
+  mounted () {
+      this.monthCopy = this.theEmptyMonth
+  },
+  computed: {
+    ...mapGetters('travail', {
+        'theEmptyMonth': 'TheEmptyMonth',
+    }),
+  },
+  methods: {
+    ...mapActions('travail', {
+        'createMonth': 'createMonth',
+    }),
+    save: function () {
+        console.log("save")
+        console.log(this.monthCopy)
+        this.createMonth({date: this.monthDate, month: this.monthCopy})
+    },
+    cancel: function () {
+      this.monthCopy = this.theEmptyMonth
+    },
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    .month-presentation {
+        display: inline-flex;
+        flex-direction: row;
+        background-color: palegreen;
+        align-items: center;
+        justify-content: space-between;
+        border-radius: 10px;
+        width: 100%;
+        }
+    .month-presentation > * {
+        margin: 20px;
+    }
+
+    .date > input {
+        font-size: 1.2em;
+        font-weight: bold;
+        display: inline-flex;
+        width: 6rem;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+    }
+    li {
+        margin: 3px;
+        width: 30%;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+</style>

src/components/MonthForm.vue

@@ -0,0 +1,69 @@
+<template>
+<form>
+    <ul>
+        <li>
+        <label for="ca-theo">CA théorique</label>
+        <input type="number" id="ca-theo">
+        </li>
+        <li>
+        <label for="ca-retro">CA rétrocession</label>
+        <input type="number" id="ca-retro">
+        </li>
+        <li>
+        <label for="ca-react">CA réactualisé</label>
+        <input type="number" id="ca-react">
+        </li>
+        <li>
+        <label for="nbr-seance">Nombre de séances effectuées</label>
+        <input type="number" id="nbr-seance">
+        </li>
+        <li>
+        <label for="retro">Montant de la rétrocession</label>
+        <input type="number" id="retro">
+        </li>
+        <li>
+        <label for="remumeration">Rémunération effectuée</label>
+        <input type="number" id="remumeration">
+        </li>
+    </ul>
+</form>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'MonthForm',
+  props: {
+      editMonth: {}
+  },
+  computed: {
+    ...mapGetters({
+        TheEmpty: "travail/TheEmptyMonth",
+    })
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+    flex-flow: row wrap;
+}
+li {
+    margin: 3px;
+    width: 30%;
+    display: flex;
+    flex-direction: column-reverse;
+}
+li > label {
+    font-size: 0.8em;
+}
+input {
+    width: 4em;
+    font-size: 1.5em;
+}
+
+</style>

src/components/MonthPresentation.vue

@@ -0,0 +1,128 @@
+<template>
+<div class="month-presentation">
+  <div class="date">
+    {{ TheDate }}
+  </div>
+  <div id="display">
+    <ul>
+        <li> 
+            <label for="ca-theo">CA "Séances effectuées"</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="ca-retro">CA "Séances facturées"</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="ca-react">CA "Séances facturées" réactualisé</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="nbr-seances">Nombre de séances effectuées</label>
+            <span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
+            <input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="retro">Montant de la rétrocession</label>
+            <span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.retro" id="retro" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="remuneration">Rémunération </label>
+            <span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
+            <input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
+        </li>
+    </ul>
+  </div>
+  <div class="actions">
+    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
+    <button class="validate" @click="save" v-show="editing"> Valider </button>
+    <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
+  </div>
+</div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+export default {
+  name: 'MonthPresentation',
+  props: {
+      TheDate: String,
+      TheMonth: {
+          type: Object,
+      }
+  },
+  data () {
+      return {
+          editing: false,
+          monthCopy: Object,
+      }
+  },
+  mounted: function () {
+        this.monthCopy =  {...this.TheMonth}
+      },
+  computed: {
+  },
+  methods: {
+    ...mapActions('travail', {
+        'updateMonth': 'updateMonth',
+    }),
+      toggleEdit: function () {
+          this.editing = !this.editing
+          },
+      save: function () {
+          this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
+          this.toggleEdit()
+          },
+      cancel: function () {
+          this.monthCopy =  {...this.TheMonth}
+          this.toggleEdit()
+          },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+    .month-presentation {
+        display: inline-flex;
+        flex-direction: row;
+        background-color: mintcream;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border-radius: 10px;
+        }
+    .month-presentation > * {
+        margin: 20px;
+    }
+
+    .date {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+    }
+    li {
+        margin: 3px;
+        width: 30%;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    .novisible {
+        display: None;
+    }
+</style>

src/components/MonthsUl.vue

@@ -0,0 +1,42 @@
+<template>
+<ul>
+    <li v-for="date in dates" :key="date">
+         <month-presentation :TheDate=date :TheMonth=getMonth(date)></month-presentation>
+    </li>
+</ul>
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import MonthPresentation from "./MonthPresentation"
+export default {
+  name: 'Months',
+  components: {
+        MonthPresentation: MonthPresentation
+  }, 
+  props: {
+  },
+  computed: {
+    ...mapGetters({
+        dates: "travail/MonthsDate",
+        getMonth: "travail/getMonth",
+    })
+  },
+}
+</script>
+
+<style scoped>
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    padding-bottom: 10px;
+}
+
+li:last-of-type {
+    padding-bottom: 0;
+    }
+
+</style>

src/components/hightlights.vue

@@ -0,0 +1,80 @@
+<template>
+<div id="hightlights"> 
+    <div class="hightlight">
+        <ul>
+            <li>{{ ca }}</li>
+            <li>CA</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caMean }}</li>
+            <li>CA moyen</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caTheo }}</li>
+            <li>CA des séances effectuées</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ caTheo - ca }}</li>
+            <li>Non facturé</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remuneration }}</li>
+            <li>Rémunération</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ remunerationMean }}</li>
+            <li>Rémunération moyenne</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocession }}</li>
+            <li>Rétrocession</li>
+        </ul>
+    </div>
+    <div class="hightlight">
+        <ul>
+            <li>{{ retrocessionMean }}</li>
+            <li>Rétrocession moyenne</li>
+        </ul>
+    </div>
+</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'Hightlights',
+    components: {
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters('travail', {
+            ca: "ca",
+            caMean: "caMean",
+            caTheo: "caTheo",
+            remuneration: "remuneration",
+            remunerationMean: "remunerationMean",
+            retrocession: "retrocession",
+            retrocessionMean: "retrocessionMean",
+        })
+      },
+      methods: {
+      },
+}
+</script>
+
+<style scoped>
+</style>

src/components/monthSelector.vue

@@ -0,0 +1,135 @@
+<template>
+<ul>
+    <li>
+    <h2>Période</h2>
+    </li>
+    <li>
+      <input type="month" @input="updateStart" v-model="start">
+      <input type="month" @input="updateEnd" v-model="end">
+    </li>
+    <li>
+        <button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
+        <button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
+        <button @click="setRangeAll" :active='selected=="all"'>Tout</button>
+    </li>
+</ul>
+
+</template>
+
+<script>
+
+import { mapGetters, mapActions } from 'vuex'
+import { setMonth, addMonths, format, parseISO } from 'date-fns'
+
+const today = new Date();
+
+export default {
+    name: 'MonthSelector',
+    components: {
+    },
+    data () {
+        return {
+            selected: "",
+            start: "", 
+            end: "",
+            }
+    },
+    computed: {
+        ...mapGetters('travail', {
+            range: "range",
+            monthsDate: "MonthsDate",
+        })
+    },
+    watch: {
+        range: function (newRange, oldRange) {
+            this.start = this.range.start
+            this.end = this.range.end
+        },
+    },
+    mounted () {
+        this.setRangeFromJanuary()
+        this.start = this.range.start
+        this.end = this.range.end
+    },
+    methods: {
+        ...mapActions('travail', {
+            setRange: "setRange",
+        }),
+        updateStart: function () {
+            this.selected = "custom"
+            this.setRange({start: this.start, end: this.end})
+        },
+        updateEnd: function () {
+            this.selected = "custom"
+            this.setRange({start: this.start, end: this.end})
+        },
+        setRangeFromJanuary: function () {
+            const start = setMonth(today, 0)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.selected = "january"
+            this.setRange(range)
+        }, 
+        setRange1year: function () {
+            const start = addMonths(new Date(), -12)
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(today, 'yyyy-MM'), 
+            }
+            this.selected = "year"
+            this.setRange(range)
+        }, 
+        setRangeAll: function () {
+            const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
+            const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
+            const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
+            const range = {
+                start: format(start, 'yyyy-MM'), 
+                end: format(end, 'yyyy-MM'),
+            }
+            this.selected = "all"
+            this.setRange(range)
+        }, 
+    },
+}
+</script>
+
+<style scoped>
+    ul {
+            list-style-type: none;
+            padding: 0;
+            display: flex;
+            flex-flow: column wrap;
+    }
+    ul > * {
+        margin-top: 10px;
+    }
+    li {
+            list-style-type: none;
+            display: flex;
+            flex-flow: row;
+            justify-content: space-around;
+
+    }
+    h2 {
+        margin: 0;
+    }
+    input {
+        border: none;
+        color: white;
+        padding: 15px 32px;
+        text-align: center;
+        display: inline-block;
+        font-size: 16px;
+        border-radius: 5px;
+        color: black;
+    }
+    button {
+        flex-basis: 33%;
+        height: 3rem;
+        background-color: white;
+
+    }
+</style>

src/main.js

@@ -1,8 +1,11 @@
 import { createApp } from 'vue'
 import App from '@/App.vue'
 import router from '@/router'
+import store from '@/store'
+import '@/style.css'
 
 
 const app = createApp(App)
 app.use(router)
+app.use(store)
 app.mount('#app')

src/store/index.js

@@ -0,0 +1,11 @@
+import { createStore } from 'vuex'
+import travailStore from "./travail"
+
+// Create a new store instance.
+const store = createStore({
+    modules:{
+        travail: travailStore,
+    }
+})
+
+export default store

src/store/travail/index.js

@@ -0,0 +1,198 @@
+function monthCA(month) {
+    if (month.ca_react) {
+        return month.ca_react
+    } else {
+        return month.ca_retro
+    }
+}
+
+const travail = {
+    namespaced: true,
+    state() {
+        return {
+            empty: {
+                ca_theo: null, // ca théorique basé sur les séances effectuées
+                nbr_seances: null, // Nombre de séances effectuées sur le mois
+                ca_retro: null, // ca au moment de la rétrocession
+                ca_react: null, // ca réactualisé
+                retro: 0, // montant de la rétrocession
+                remuneration: 0, // rémunération décidée
+            },
+            months: {
+                "2021-01": {
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
+                    ca_retro: 6747, // ca au moment de la rétrocession
+                    ca_react: null, // ca réactualisé
+                    retro: 893, // montant de la rétrocession
+                    remuneration: 2000, // rémunération décidée
+                },
+                "2021-02": {
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
+                    ca_retro: 5183, // ca au moment de la rétrocession
+                    ca_react: null, // ca réactualisé
+                    retro: 665, // montant de la rétrocession
+                    remuneration: 1500, // rémunération décidée
+                },
+                "2021-03": {
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
+                    ca_retro: 7088, // ca au moment de la rétrocession
+                    ca_react: null, // ca réactualisé
+                    retro: 855, // montant de la rétrocession
+                    remuneration: 2000, // rémunération décidée
+                },
+                "2021-04": {
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
+                    ca_retro: 4194, // ca au moment de la rétrocession
+                    ca_react: 5630, // ca réactualisé
+                    retro: 627, // montant de la rétrocession
+                    remuneration: 2000, // rémunération décidée
+                },
+                "2021-05": {
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
+                    ca_retro: 5564, // ca au moment de la rétrocession
+                    ca_react: 6335, // ca réactualisé
+                    retro: 699, // montant de la rétrocession
+                    remuneration: 2800, // rémunération décidée
+                },
+                "2021-06": {
+                    ca_theo: null, // ca théorique basé sur les séances effectuées
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
+                    ca_retro: 5442, // ca au moment de la rétrocession
+                    ca_react: 6335, // ca réactualisé
+                    retro: 638, // montant de la rétrocession
+                    remuneration: 2800, // rémunération décidée
+                },
+            },
+            range: {
+                start: "2021-01",
+                end: "2021-08",
+            },
+        }
+    },
+    getters: {
+        TheEmptyMonth(state) { return { ...state.empty } },
+        range(state) { return state.range },
+        MonthsDate(state) {
+            // Get months inside the range
+            return Object.keys(state.months).filter(date => (date >= state.range.start) && (date <= state.range.end)).sort().reverse()
+        },
+        MonthsAllDate(state) {
+            // Get all the months
+            return Object.keys(state.months).sort().reverse()
+        },
+        months: (state, getters) => {
+            // Get in range months
+            return Object.keys(state.months)
+                .filter(a => getters.MonthsDate.includes(a))
+                .reduce((acc, v) => {
+                    acc[v] = state.months[v];
+                    return acc;
+                }, {})
+        },
+        getMonth: (state) => (date) => {
+            return state.months[date]
+        },
+        count: (state, getters) => { 
+            // Amount of mounts
+            return Object.keys(getters.months).length 
+        },
+        ca: (state, getters) => {
+            // Total CA (ca_react if sets, ca_retro otherwise)
+            return Object.values(getters.months).map(a => monthCA(a)).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        caMean: (state, getters) => {
+            // Mean of CA
+            return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        caTheo: (state, getters) => {
+            // Total theorical CA
+            return Object.values(getters.months).map(a => a.ca_theo).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remuneration: (state, getters) => {
+            // Total remuneration
+            return Object.values(getters.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            )
+        },
+        remunerationMean: (state, getters) => {
+            // Mean of remuneration
+            return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
+                (acc, v) => acc + v,
+                0
+            ) / getters.count)
+        },
+        retrocession: (state, getters) => {
+            // Total retrocession
+            return Object.values(getters.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                )
+        },
+        retrocessionMean: (state, getters) => {
+            // Mean of retrocession
+            return Math.floor(
+                Object.values(getters.months)
+                .map(a => a.retro)
+                .reduce(
+                    (acc, v) => acc + v,
+                    0
+                ) / getters.count
+            )
+        },
+    },
+    mutations: {
+        updateMonth(state, { date, month }) {
+            state.months[date] = month
+        },
+        createMonth (state, { date, month }) {
+            state.months[date] = month
+        },
+            setRange(state, range) {
+        state.range = range
+        }, 
+    },
+    actions: {
+        updateMonth(context, { date, month }) {
+            // update month's datas 
+            if (date in context.state.months) {
+                context.commit('updateMonth', { date, month })
+            } else {
+                console.log("This month does not exists")
+            }
+        },
+        createMonth(context, { date, month }) {
+            // Create a new month
+            if (!(date in context.state.months)) {
+                console.log(date)
+                context.commit('createMonth', { date, month })
+                console.log(context.state.months)
+            } else {
+                console.log("This month already exists")
+            }
+        },
+        setRange(context, range) {
+            context.commit("setRange", range)
+        },
+
+    },
+}
+
+export default travail
+

src/style.css

@@ -0,0 +1,27 @@
+
+.actions {
+    display: inline-flex;
+    flex-direction: column;
+    width: 120px;
+}
+
+button {
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    display: inline-block;
+    width: 100%;
+    font-size: 16px;
+    border-radius: 5px;
+    color: black;
+    }
+.validate {
+  background-color: green;
+}
+.cancel {
+  background-color: red;
+}
+.edit {
+  background-color: orange;
+}

src/views/home.vue

@@ -1,3 +1,62 @@
 <template>
 <h1>Home</h1>
+<section id="selector">
+   <month-selector> 
+   </month-selector> 
+</section>
+<div id="content">
+    <section id="months">
+        <h2> Mois </h2>
+        <create-month></create-month>
+        <months-list></months-list>
+    </section>
+    <section id="stats">
+        <h2>Résumé</h2>
+        <highlights></highlights> 
+    </section>
+</div>
 </template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import MonthsList from '../components/MonthsUl.vue'
+import CreateMonth from '../components/CreateMonth.vue'
+import MonthSelector from '../components/monthSelector.vue'
+import Highlights from '../components/hightlights.vue'
+export default {
+    name: 'home',
+    components: {
+        MonthsList: MonthsList,
+        CreateMonth: CreateMonth,
+        MonthSelector: MonthSelector,
+        highlights: Highlights,
+        },
+    data () {
+        return {}
+        },
+    computed: {
+        ...mapGetters({
+            count: "datas/count",
+        })
+      },
+      methods: {
+        ...mapActions({
+        })
+      },
+}
+</script>
+
+<style scoped>
+#content {
+    display: inline-flex;
+    flex-direction: row;
+    background-color: red;
+    margin: 0;
+}
+#content > * {
+    margin: 10px;
+}
+#months {
+    flex-basis: 60%;
+}
+</style>

yarn.lock

@@ -9,6 +9,13 @@
   dependencies:
     "@babel/highlight" "^7.12.13"
 
+"@babel/code-frame@7.12.11":
+  "integrity" "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw=="
+  "resolved" "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz"
+  "version" "7.12.11"
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.14.4":
   "integrity" "sha512-i2wXrWQNkH6JplJQGn3Rd2I4Pij8GdHkXwHMxm+zV5YG/Jci+bCNrWZEWC4o+umiDkRrRs4dVzH3X4GP7vyjQQ=="
   "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.4.tgz"
@@ -243,7 +250,7 @@
     "@babel/traverse" "^7.14.0"
     "@babel/types" "^7.14.0"
 
-"@babel/highlight@^7.12.13":
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
   "integrity" "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg=="
   "resolved" "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz"
   "version" "7.14.0"
@@ -938,6 +945,21 @@
     "dir-compare" "^2.4.0"
     "fs-extra" "^9.0.1"
 
+"@eslint/eslintrc@^0.4.3":
+  "integrity" "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw=="
+  "resolved" "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz"
+  "version" "0.4.3"
+  dependencies:
+    "ajv" "^6.12.4"
+    "debug" "^4.1.1"
+    "espree" "^7.3.0"
+    "globals" "^13.9.0"
+    "ignore" "^4.0.6"
+    "import-fresh" "^3.2.1"
+    "js-yaml" "^3.13.1"
+    "minimatch" "^3.0.4"
+    "strip-json-comments" "^3.1.1"
+
 "@hapi/address@2.x.x":
   "integrity" "sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ=="
   "resolved" "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz"
@@ -970,6 +992,20 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@humanwhocodes/config-array@^0.5.0":
+  "integrity" "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg=="
+  "resolved" "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz"
+  "version" "0.5.0"
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.0"
+    "debug" "^4.1.1"
+    "minimatch" "^3.0.4"
+
+"@humanwhocodes/object-schema@^1.2.0":
+  "integrity" "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w=="
+  "resolved" "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz"
+  "version" "1.2.0"
+
 "@intervolga/optimize-cssnano-plugin@^1.0.5":
   "integrity" "sha512-zN69TnSr0viRSU6cEDIcuPcP67QcpQ6uHACg58FiN9PDrU6SLyGW3MR4tiISbYxy1kDWAVPwD+XwQTWE5cigAA=="
   "resolved" "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz"
@@ -1532,7 +1568,7 @@
   optionalDependencies:
     "prettier" "^1.18.2"
 
-"@vue/devtools-api@^6.0.0-beta.10":
+"@vue/devtools-api@^6.0.0-beta.10", "@vue/devtools-api@^6.0.0-beta.11":
   "integrity" "sha512-oZ0n/N4UWpkMvbR1OrBtu+YhaVADo+bYX5lxo9tou7h10p0+v2K9yzzaZATVr0lqHb7iY1wALfO8yojwg0MTHw=="
   "resolved" "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.13.tgz"
   "version" "6.0.0-beta.13"
@@ -1744,7 +1780,7 @@
     "mime-types" "~2.1.24"
     "negotiator" "0.6.2"
 
-"acorn-jsx@^5.2.0":
+"acorn-jsx@^5.2.0", "acorn-jsx@^5.3.1":
   "integrity" "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng=="
   "resolved" "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz"
   "version" "5.3.1"
@@ -1797,6 +1833,16 @@
     "json-schema-traverse" "^0.4.1"
     "uri-js" "^4.2.2"
 
+"ajv@^8.0.1":
+  "integrity" "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w=="
+  "resolved" "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz"
+  "version" "8.6.2"
+  dependencies:
+    "fast-deep-equal" "^3.1.1"
+    "json-schema-traverse" "^1.0.0"
+    "require-from-string" "^2.0.2"
+    "uri-js" "^4.2.2"
+
 "alphanum-sort@^1.0.0":
   "integrity" "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM="
   "resolved" "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz"
@@ -1814,6 +1860,11 @@
   "resolved" "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz"
   "version" "3.2.4"
 
+"ansi-colors@^4.1.1":
+  "integrity" "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA=="
+  "resolved" "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz"
+  "version" "4.1.1"
+
 "ansi-escapes@^4.2.1":
   "integrity" "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="
   "resolved" "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz"
@@ -2036,6 +2087,11 @@
   "resolved" "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz"
   "version" "1.0.0"
 
+"astral-regex@^2.0.0":
+  "integrity" "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ=="
+  "resolved" "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz"
+  "version" "2.0.0"
+
 "async-each@^1.0.1":
   "integrity" "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
   "resolved" "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz"
@@ -2485,6 +2541,11 @@
     "stat-mode" "^1.0.0"
     "temp-file" "^3.3.7"
 
+"builtin-modules@^1.1.1":
+  "integrity" "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8="
+  "resolved" "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz"
+  "version" "1.1.1"
+
 "builtin-status-codes@^3.0.0":
   "integrity" "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
   "resolved" "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz"
@@ -2987,7 +3048,7 @@
   dependencies:
     "delayed-stream" "~1.0.0"
 
-"commander@^2.18.0", "commander@^2.20.0":
+"commander@^2.12.1", "commander@^2.18.0", "commander@^2.20.0":
   "integrity" "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
   "resolved" "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   "version" "2.20.3"
@@ -3269,6 +3330,15 @@
     "shebang-command" "^2.0.0"
     "which" "^2.0.1"
 
+"cross-spawn@^7.0.2":
+  "integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
+  "resolved" "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  "version" "7.0.3"
+  dependencies:
+    "path-key" "^3.1.0"
+    "shebang-command" "^2.0.0"
+    "which" "^2.0.1"
+
 "cross-spawn@^7.0.3":
   "integrity" "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w=="
   "resolved" "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -3465,6 +3535,11 @@
   dependencies:
     "assert-plus" "^1.0.0"
 
+"date-fns@^2.23.0":
+  "integrity" "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA=="
+  "resolved" "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz"
+  "version" "2.23.0"
+
 "debug@^2.2.0":
   "integrity" "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="
   "resolved" "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -3548,7 +3623,7 @@
   "resolved" "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz"
   "version" "0.6.0"
 
-"deep-is@~0.1.3":
+"deep-is@^0.1.3", "deep-is@~0.1.3":
   "integrity" "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
   "resolved" "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz"
   "version" "0.1.3"
@@ -3655,6 +3730,11 @@
   "resolved" "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz"
   "version" "2.1.0"
 
+"diff@^4.0.1":
+  "integrity" "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
+  "resolved" "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
+  "version" "4.0.2"
+
 "diffie-hellman@^5.0.0":
   "integrity" "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg=="
   "resolved" "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz"
@@ -3964,6 +4044,13 @@
     "memory-fs" "^0.5.0"
     "tapable" "^1.0.0"
 
+"enquirer@^2.3.5":
+  "integrity" "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg=="
+  "resolved" "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
+  "version" "2.3.6"
+  dependencies:
+    "ansi-colors" "^4.1.1"
+
 "entities@^1.1.1":
   "integrity" "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
   "resolved" "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
@@ -4077,7 +4164,7 @@
     "object-hash" "^1.1.4"
     "rimraf" "^2.6.1"
 
-"eslint-plugin-vue@^7.0.0":
+"eslint-plugin-vue@^7.0.0", "eslint-plugin-vue@^7.10.0":
   "integrity" "sha512-xdr6e4t/L2moRAeEQ9HKgge/hFq+w9v5Dj+BA54nTAzSFdUyKLiSOdZaRQjCHMY0Pk2WaQBFH9QiWG60xiC+6A=="
   "resolved" "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.10.0.tgz"
   "version" "7.10.0"
@@ -4095,7 +4182,7 @@
     "esrecurse" "^4.1.0"
     "estraverse" "^4.1.1"
 
-"eslint-scope@^5.0.0":
+"eslint-scope@^5.0.0", "eslint-scope@^5.1.1":
   "integrity" "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw=="
   "resolved" "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
   "version" "5.1.1"
@@ -4117,11 +4204,16 @@
   dependencies:
     "eslint-visitor-keys" "^1.1.0"
 
-"eslint-visitor-keys@^1.0.0", "eslint-visitor-keys@^1.1.0":
+"eslint-visitor-keys@^1.0.0", "eslint-visitor-keys@^1.1.0", "eslint-visitor-keys@^1.3.0":
   "integrity" "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
   "resolved" "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
   "version" "1.3.0"
 
+"eslint-visitor-keys@^2.0.0":
+  "integrity" "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+  "resolved" "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  "version" "2.1.0"
+
 "eslint@^6.2.0 || ^7.0.0", "eslint@^6.7.2", "eslint@>= 1.6.0 < 7.0.0", "eslint@>= 4.12.1", "eslint@>=1.6.0 <7.0.0", "eslint@>=5.0.0":
   "integrity" "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig=="
   "resolved" "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz"
@@ -4165,6 +4257,52 @@
     "text-table" "^0.2.0"
     "v8-compile-cache" "^2.0.3"
 
+"eslint@^7.27.0":
+  "integrity" "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA=="
+  "resolved" "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz"
+  "version" "7.32.0"
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    "@eslint/eslintrc" "^0.4.3"
+    "@humanwhocodes/config-array" "^0.5.0"
+    "ajv" "^6.10.0"
+    "chalk" "^4.0.0"
+    "cross-spawn" "^7.0.2"
+    "debug" "^4.0.1"
+    "doctrine" "^3.0.0"
+    "enquirer" "^2.3.5"
+    "escape-string-regexp" "^4.0.0"
+    "eslint-scope" "^5.1.1"
+    "eslint-utils" "^2.1.0"
+    "eslint-visitor-keys" "^2.0.0"
+    "espree" "^7.3.1"
+    "esquery" "^1.4.0"
+    "esutils" "^2.0.2"
+    "fast-deep-equal" "^3.1.3"
+    "file-entry-cache" "^6.0.1"
+    "functional-red-black-tree" "^1.0.1"
+    "glob-parent" "^5.1.2"
+    "globals" "^13.6.0"
+    "ignore" "^4.0.6"
+    "import-fresh" "^3.0.0"
+    "imurmurhash" "^0.1.4"
+    "is-glob" "^4.0.0"
+    "js-yaml" "^3.13.1"
+    "json-stable-stringify-without-jsonify" "^1.0.1"
+    "levn" "^0.4.1"
+    "lodash.merge" "^4.6.2"
+    "minimatch" "^3.0.4"
+    "natural-compare" "^1.4.0"
+    "optionator" "^0.9.1"
+    "progress" "^2.0.0"
+    "regexpp" "^3.1.0"
+    "semver" "^7.2.1"
+    "strip-ansi" "^6.0.0"
+    "strip-json-comments" "^3.1.0"
+    "table" "^6.0.9"
+    "text-table" "^0.2.0"
+    "v8-compile-cache" "^2.0.3"
+
 "espree@^6.1.2", "espree@^6.2.1":
   "integrity" "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw=="
   "resolved" "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz"
@@ -4174,6 +4312,24 @@
     "acorn-jsx" "^5.2.0"
     "eslint-visitor-keys" "^1.1.0"
 
+"espree@^7.3.0":
+  "integrity" "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g=="
+  "resolved" "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz"
+  "version" "7.3.1"
+  dependencies:
+    "acorn" "^7.4.0"
+    "acorn-jsx" "^5.3.1"
+    "eslint-visitor-keys" "^1.3.0"
+
+"espree@^7.3.1":
+  "integrity" "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g=="
+  "resolved" "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz"
+  "version" "7.3.1"
+  dependencies:
+    "acorn" "^7.4.0"
+    "acorn-jsx" "^5.3.1"
+    "eslint-visitor-keys" "^1.3.0"
+
 "esprima@^4.0.0":
   "integrity" "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
   "resolved" "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz"
@@ -4430,7 +4586,7 @@
   "resolved" "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz"
   "version" "1.3.0"
 
-"fast-deep-equal@^3.1.1":
+"fast-deep-equal@^3.1.1", "fast-deep-equal@^3.1.3":
   "integrity" "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
   "resolved" "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   "version" "3.1.3"
@@ -4452,7 +4608,7 @@
   "resolved" "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   "version" "2.1.0"
 
-"fast-levenshtein@~2.0.6":
+"fast-levenshtein@^2.0.6", "fast-levenshtein@~2.0.6":
   "integrity" "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
   "resolved" "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   "version" "2.0.6"
@@ -4490,6 +4646,13 @@
   dependencies:
     "flat-cache" "^2.0.1"
 
+"file-entry-cache@^6.0.1":
+  "integrity" "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg=="
+  "resolved" "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  "version" "6.0.1"
+  dependencies:
+    "flat-cache" "^3.0.4"
+
 "file-loader@*", "file-loader@^4.2.0":
   "integrity" "sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA=="
   "resolved" "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz"
@@ -4608,11 +4771,24 @@
     "rimraf" "2.6.3"
     "write" "1.0.3"
 
+"flat-cache@^3.0.4":
+  "integrity" "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg=="
+  "resolved" "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  "version" "3.0.4"
+  dependencies:
+    "flatted" "^3.1.0"
+    "rimraf" "^3.0.2"
+
 "flatted@^2.0.0":
   "integrity" "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
   "resolved" "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz"
   "version" "2.0.2"
 
+"flatted@^3.1.0":
+  "integrity" "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA=="
+  "resolved" "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz"
+  "version" "3.2.2"
+
 "flush-write-stream@^1.0.0":
   "integrity" "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w=="
   "resolved" "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz"
@@ -4842,6 +5018,13 @@
   dependencies:
     "is-glob" "^4.0.1"
 
+"glob-parent@^5.1.2":
+  "integrity" "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="
+  "resolved" "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  "version" "5.1.2"
+  dependencies:
+    "is-glob" "^4.0.1"
+
 "glob-parent@~5.1.0":
   "integrity" "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="
   "resolved" "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -4854,7 +5037,7 @@
   "resolved" "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz"
   "version" "0.3.0"
 
-"glob@^7.0.3", "glob@^7.1.2", "glob@^7.1.3", "glob@^7.1.4", "glob@^7.1.6":
+"glob@^7.0.3", "glob@^7.1.1", "glob@^7.1.2", "glob@^7.1.3", "glob@^7.1.4", "glob@^7.1.6":
   "integrity" "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ=="
   "resolved" "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
   "version" "7.1.7"
@@ -4908,6 +5091,20 @@
   dependencies:
     "type-fest" "^0.8.1"
 
+"globals@^13.6.0":
+  "integrity" "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g=="
+  "resolved" "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz"
+  "version" "13.10.0"
+  dependencies:
+    "type-fest" "^0.20.2"
+
+"globals@^13.9.0":
+  "integrity" "sha512-piHC3blgLGFjvOuMmWZX60f+na1lXFDhQXBf1UYp2fXPXqvEUbOhNwi6BsQ0bQishwedgnjkwv1d9zKf+MWw3g=="
+  "resolved" "https://registry.npmjs.org/globals/-/globals-13.10.0.tgz"
+  "version" "13.10.0"
+  dependencies:
+    "type-fest" "^0.20.2"
+
 "globalthis@^1.0.1":
   "integrity" "sha512-ZQnSFO1la8P7auIOQECnm0sSuoMeaSq0EEdXMBFF2QJO4uNcwbyhSgG3MruWNbFTqCLmxVwGOl7LZ9kASvHdeQ=="
   "resolved" "https://registry.npmjs.org/globalthis/-/globalthis-1.0.2.tgz"
@@ -5395,7 +5592,7 @@
     "caller-path" "^2.0.0"
     "resolve-from" "^3.0.0"
 
-"import-fresh@^3.0.0":
+"import-fresh@^3.0.0", "import-fresh@^3.2.1":
   "integrity" "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw=="
   "resolved" "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   "version" "3.3.0"
@@ -5986,6 +6183,11 @@
   "resolved" "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   "version" "0.4.1"
 
+"json-schema-traverse@^1.0.0":
+  "integrity" "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+  "resolved" "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  "version" "1.0.0"
+
 "json-schema@0.2.3":
   "integrity" "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
   "resolved" "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz"
@@ -6137,6 +6339,14 @@
     "prelude-ls" "~1.1.2"
     "type-check" "~0.3.2"
 
+"levn@^0.4.1":
+  "integrity" "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="
+  "resolved" "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  "version" "0.4.1"
+  dependencies:
+    "prelude-ls" "^1.2.1"
+    "type-check" "~0.4.0"
+
 "lie@~3.3.0":
   "integrity" "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ=="
   "resolved" "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz"
@@ -6210,6 +6420,11 @@
   "resolved" "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
   "version" "4.3.0"
 
+"lodash.clonedeep@^4.5.0":
+  "integrity" "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+  "resolved" "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz"
+  "version" "4.5.0"
+
 "lodash.debounce@^4.0.8":
   "integrity" "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
   "resolved" "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -6235,7 +6450,7 @@
   "resolved" "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz"
   "version" "4.1.2"
 
-"lodash.merge@^4.6.1":
+"lodash.merge@^4.6.1", "lodash.merge@^4.6.2":
   "integrity" "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
   "resolved" "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   "version" "4.6.2"
@@ -6245,6 +6460,11 @@
   "resolved" "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz"
   "version" "4.6.0"
 
+"lodash.truncate@^4.4.2":
+  "integrity" "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM="
+  "resolved" "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
+  "version" "4.4.2"
+
 "lodash.uniq@^4.5.0":
   "integrity" "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
   "resolved" "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
@@ -7013,6 +7233,18 @@
     "type-check" "~0.3.2"
     "word-wrap" "~1.2.3"
 
+"optionator@^0.9.1":
+  "integrity" "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw=="
+  "resolved" "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  "version" "0.9.1"
+  dependencies:
+    "deep-is" "^0.1.3"
+    "fast-levenshtein" "^2.0.6"
+    "levn" "^0.4.1"
+    "prelude-ls" "^1.2.1"
+    "type-check" "^0.4.0"
+    "word-wrap" "^1.2.3"
+
 "ora@^3.4.0":
   "integrity" "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg=="
   "resolved" "https://registry.npmjs.org/ora/-/ora-3.4.0.tgz"
@@ -7751,6 +7983,11 @@
     "nanoid" "^3.1.23"
     "source-map-js" "^0.6.2"
 
+"prelude-ls@^1.2.1":
+  "integrity" "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
+  "resolved" "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  "version" "1.2.1"
+
 "prelude-ls@~1.1.2":
   "integrity" "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
   "resolved" "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -7771,6 +8008,11 @@
   "resolved" "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz"
   "version" "1.19.1"
 
+"prettier@^2.3.0":
+  "integrity" "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ=="
+  "resolved" "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz"
+  "version" "2.3.2"
+
 "pretty-error@^2.0.2":
   "integrity" "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw=="
   "resolved" "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz"
@@ -8104,6 +8346,11 @@
   "resolved" "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz"
   "version" "2.0.1"
 
+"regexpp@^3.1.0":
+  "integrity" "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
+  "resolved" "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
+  "version" "3.2.0"
+
 "regexpu-core@^4.7.1":
   "integrity" "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ=="
   "resolved" "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz"
@@ -8204,6 +8451,11 @@
   "resolved" "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz"
   "version" "2.1.1"
 
+"require-from-string@^2.0.2":
+  "integrity" "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
+  "resolved" "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
+  "version" "2.0.2"
+
 "require-main-filename@^2.0.0":
   "integrity" "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
   "resolved" "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
@@ -8236,7 +8488,7 @@
   "resolved" "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz"
   "version" "0.2.1"
 
-"resolve@^1.10.0", "resolve@^1.12.0", "resolve@^1.14.2", "resolve@^1.20.0":
+"resolve@^1.10.0", "resolve@^1.12.0", "resolve@^1.14.2", "resolve@^1.20.0", "resolve@^1.3.2":
   "integrity" "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A=="
   "resolved" "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz"
   "version" "1.20.0"
@@ -8464,6 +8716,11 @@
   dependencies:
     "semver" "^6.3.0"
 
+"semver@^5.3.0":
+  "integrity" "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+  "resolved" "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
+  "version" "5.7.1"
+
 "semver@^5.5.0":
   "integrity" "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
   "resolved" "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz"
@@ -8674,6 +8931,15 @@
     "astral-regex" "^1.0.0"
     "is-fullwidth-code-point" "^2.0.0"
 
+"slice-ansi@^4.0.0":
+  "integrity" "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ=="
+  "resolved" "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz"
+  "version" "4.0.0"
+  dependencies:
+    "ansi-styles" "^4.0.0"
+    "astral-regex" "^2.0.0"
+    "is-fullwidth-code-point" "^3.0.0"
+
 "snapdragon-node@^2.0.1":
   "integrity" "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw=="
   "resolved" "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
@@ -9076,7 +9342,7 @@
   "resolved" "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz"
   "version" "2.0.0"
 
-"strip-json-comments@^3.0.1":
+"strip-json-comments@^3.0.1", "strip-json-comments@^3.1.0", "strip-json-comments@^3.1.1":
   "integrity" "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
   "resolved" "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   "version" "3.1.1"
@@ -9169,6 +9435,18 @@
     "slice-ansi" "^2.1.0"
     "string-width" "^3.0.0"
 
+"table@^6.0.9":
+  "integrity" "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg=="
+  "resolved" "https://registry.npmjs.org/table/-/table-6.7.1.tgz"
+  "version" "6.7.1"
+  dependencies:
+    "ajv" "^8.0.1"
+    "lodash.clonedeep" "^4.5.0"
+    "lodash.truncate" "^4.4.2"
+    "slice-ansi" "^4.0.0"
+    "string-width" "^4.2.0"
+    "strip-ansi" "^6.0.0"
+
 "tapable@^1.0.0", "tapable@^1.1.3":
   "integrity" "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
   "resolved" "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz"
@@ -9401,7 +9679,7 @@
   "resolved" "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz"
   "version" "1.2.0"
 
-"tslib@^1.9.0":
+"tslib@^1.13.0", "tslib@^1.8.1", "tslib@^1.9.0":
   "integrity" "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   "version" "1.14.1"
@@ -9411,6 +9689,32 @@
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz"
   "version" "2.2.0"
 
+"tslint@6.1.3":
+  "integrity" "sha512-IbR4nkT96EQOvKE2PW/djGz8iGNeJ4rF2mBfiYaR/nvUWYKJhLwimoJKgjIFEIDibBtOevj7BqCRL4oHeWWUCg=="
+  "resolved" "https://registry.npmjs.org/tslint/-/tslint-6.1.3.tgz"
+  "version" "6.1.3"
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "builtin-modules" "^1.1.1"
+    "chalk" "^2.3.0"
+    "commander" "^2.12.1"
+    "diff" "^4.0.1"
+    "glob" "^7.1.1"
+    "js-yaml" "^3.13.1"
+    "minimatch" "^3.0.4"
+    "mkdirp" "^0.5.3"
+    "resolve" "^1.3.2"
+    "semver" "^5.3.0"
+    "tslib" "^1.13.0"
+    "tsutils" "^2.29.0"
+
+"tsutils@^2.29.0":
+  "integrity" "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA=="
+  "resolved" "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz"
+  "version" "2.29.0"
+  dependencies:
+    "tslib" "^1.8.1"
+
 "tty-browserify@0.0.0":
   "integrity" "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
   "resolved" "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
@@ -9433,6 +9737,13 @@
   "resolved" "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz"
   "version" "0.14.5"
 
+"type-check@^0.4.0", "type-check@~0.4.0":
+  "integrity" "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="
+  "resolved" "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  "version" "0.4.0"
+  dependencies:
+    "prelude-ls" "^1.2.1"
+
 "type-check@~0.3.2":
   "integrity" "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I="
   "resolved" "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz"
@@ -9485,6 +9796,11 @@
   "resolved" "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   "version" "0.0.6"
 
+"typescript@^4.3.2", "typescript@>=2.1.0 || >=2.1.0-dev || >=2.2.0-dev || >=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >= 3.0.0-dev || >= 3.1.0-dev", "typescript@>=2.3.0-dev || >=2.4.0-dev || >=2.5.0-dev || >=2.6.0-dev || >=2.7.0-dev || >=2.8.0-dev || >=2.9.0-dev || >=3.0.0-dev || >= 3.1.0-dev || >= 3.2.0-dev || >= 4.0.0-dev":
+  "integrity" "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA=="
+  "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz"
+  "version" "4.3.5"
+
 "uglify-js@3.4.x":
   "integrity" "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw=="
   "resolved" "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz"
@@ -9793,6 +10109,17 @@
   dependencies:
     "version-compare" "^1.0.0"
 
+"vls@^0.7.4":
+  "integrity" "sha512-uU5HCIK5vX096eMA5fBwyR7tv36m1Ssy910w5ILT5OvCUTXgBR58gZRJWrL2HxCyG8oYXC+oFWjhJc7+ExBUgQ=="
+  "resolved" "https://registry.npmjs.org/vls/-/vls-0.7.4.tgz"
+  "version" "0.7.4"
+  dependencies:
+    "eslint" "^7.27.0"
+    "eslint-plugin-vue" "^7.10.0"
+    "prettier" "^2.3.0"
+    "tslint" "6.1.3"
+    "typescript" "^4.3.2"
+
 "vm-browserify@^1.0.1":
   "integrity" "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
   "resolved" "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz"
@@ -9881,7 +10208,7 @@
   "resolved" "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   "version" "1.9.1"
 
-"vue@^2 || ^3.0.0-0", "vue@^3.0.0", "vue@3.0.11":
+"vue@^2 || ^3.0.0-0", "vue@^3.0.0", "vue@^3.0.2", "vue@3.0.11":
   "integrity" "sha512-3/eUi4InQz8MPzruHYSTQPxtM3LdZ1/S/BvaU021zBnZi0laRUyH6pfuE4wtUeLvI8wmUNwj5wrZFvbHUXL9dw=="
   "resolved" "https://registry.npmjs.org/vue/-/vue-3.0.11.tgz"
   "version" "3.0.11"
@@ -9890,6 +10217,13 @@
     "@vue/runtime-dom" "3.0.11"
     "@vue/shared" "3.0.11"
 
+"vuex@^4.0.2":
+  "integrity" "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q=="
+  "resolved" "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz"
+  "version" "4.0.2"
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
+
 "watchpack-chokidar2@^2.0.1":
   "integrity" "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww=="
   "resolved" "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz"
@@ -10102,7 +10436,7 @@
   dependencies:
     "string-width" "^4.0.0"
 
-"word-wrap@~1.2.3":
+"word-wrap@^1.2.3", "word-wrap@~1.2.3":
   "integrity" "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
   "resolved" "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
   "version" "1.2.3"