From 08bd9865e4eccb8811f2bca2ba79dc55f0414308 Mon Sep 17 00:00:00 2001
From: Bob den Otter <bob@twokings.nl>
Date: Fri, 4 Jan 2019 17:36:00 +0100
Subject: [PATCH] Some minor JS cleanup (with Prettier)

`prettier --single-quote --write assets/js/app/editor/Components/**/*`
---
 .../editor/Components/Editor/Date/Date.vue    |  81 +++++-----
 .../editor/Components/Editor/Date/index.md    |  16 +-
 .../editor/Components/Editor/Html/Html.vue    |  37 +++--
 .../editor/Components/Editor/Image/Image.vue  | 149 +++++++++++-------
 .../Components/Editor/Markdown/Markdown.vue   |  21 ++-
 .../Components/Editor/Number/Number.vue       |  18 +--
 .../Components/Editor/Select/Select.vue       |  41 +++--
 .../editor/Components/Editor/Slug/Slug.vue    | 107 +++++++------
 .../editor/Components/Editor/Text/Text.vue    |  30 ++--
 .../Components/Editor/Textarea/Textarea.vue   |  18 +--
 .../js/app/editor/Components/Editor/index.js  |  13 +-
 .../Components/General/Language/Language.vue  |  74 ++++-----
 .../js/app/editor/Components/General/index.js |   4 +-
 package.json                                  |   7 +
 14 files changed, 328 insertions(+), 288 deletions(-)

diff --git a/assets/js/app/editor/Components/Editor/Date/Date.vue b/assets/js/app/editor/Components/Editor/Date/Date.vue
index 570217b7..954cb8e1 100644
--- a/assets/js/app/editor/Components/Editor/Date/Date.vue
+++ b/assets/js/app/editor/Components/Editor/Date/Date.vue
@@ -1,89 +1,89 @@
 <template>
   <div>
-      <div class="input-group">
-        <flat-pickr
-          v-model="val"
-          :config="config"                                                          
-          class="form-control editor--date" 
-          placeholder="Select date" 
-          :name="name"              
-          :form="form"
+    <div class="input-group">
+      <flat-pickr
+        v-model="val"
+        :config="config"
+        class="form-control editor--date"
+        placeholder="Select date"
+        :name="name"
+        :form="form"
+        :disabled="disabled == 1"
+      >
+      </flat-pickr>
+      <div class="input-group-append">
+        <button
+          class="btn btn-secondary"
+          :class="{ 'btn-outline-secondary': disabled == 1 }"
+          type="button"
           :disabled="disabled == 1"
+          data-toggle
         >
-        </flat-pickr>
-        <div class="input-group-append">
-          <button 
-            class="btn btn-secondary"
-            :class="{'btn-outline-secondary': disabled == 1}" 
-            type="button"
-            :disabled="disabled == 1" 
-            data-toggle>
-            <i class="fa fa-calendar">
-              <span aria-hidden="true" class="sr-only">Toggle</span>
-            </i>
-          </button>
-        </div>
+          <i class="fa fa-calendar">
+            <span aria-hidden="true" class="sr-only">Toggle</span>
+          </i>
+        </button>
       </div>
+    </div>
   </div>
 </template>
 
 <script>
 import value from '../../../mixins/value';
 import flatPickr from 'vue-flatpickr-component';
-import { Spanish } from "flatpickr/dist/l10n/es.js"
+import { Spanish } from 'flatpickr/dist/l10n/es.js';
 import { resolve } from 'path';
 
 export default {
+  name: 'editor-date',
 
-  name: "editor-date",
-
-  mixins: [ value ],
+  mixins: [value],
 
   components: {
-      flatPickr
+    flatPickr
   },
 
   props: {
     value: {
       type: String,
-      required: false,
+      required: false
     },
     name: {
       type: String,
-      required: true,
+      required: true
     },
     disabled: {
       type: String,
-      required: true,
+      required: true
     },
     mode: {
       type: String,
       required: true,
-      default: "date"
+      default: 'date'
     },
     form: {
       type: String,
       required: true
     },
     locale: {
-      type: String,
+      type: String
     }
   },
 
-  created(){
-    if(this.locale !== 'en'){
-      const lang = require(`flatpickr/dist/l10n/${this.locale}.js`).default[this.locale];
+  created() {
+    if (this.locale !== 'en') {
+      const lang = require(`flatpickr/dist/l10n/${this.locale}.js`).default[
+        this.locale
+      ];
       this.config.locale = lang;
     }
-    if(this.mode === 'datetime'){
+    if (this.mode === 'datetime') {
       this.config.enableTime = true;
       this.config.altFormat = `F j, Y - h:i K`;
     }
   },
 
-  mounted() {
-
-  },
+  mounted() {},
 
   data: () => {
     return {
@@ -92,10 +92,9 @@ export default {
         altFormat: 'F j, Y',
         altInput: true,
         dateFormat: 'Z',
-        enableTime: false,
+        enableTime: false
       }
-    }
+    };
   }
-
 };
 </script>
diff --git a/assets/js/app/editor/Components/Editor/Date/index.md b/assets/js/app/editor/Components/Editor/Date/index.md
index c802f9df..40607862 100644
--- a/assets/js/app/editor/Components/Editor/Date/index.md
+++ b/assets/js/app/editor/Components/Editor/Date/index.md
@@ -2,11 +2,11 @@
 
 #### Props
 
-| Name          | Type          | 
-| ------------- |-------------- | 
-| value         | `string`      |
-| name          | `string`      |
-| disabled      | `boolean`     |
-| mode          | `string`      |
-| form          | `string`      |
-| locale        | `string`      |
\ No newline at end of file
+| Name     | Type      |
+| -------- | --------- |
+| value    | `string`  |
+| name     | `string`  |
+| disabled | `boolean` |
+| mode     | `string`  |
+| form     | `string`  |
+| locale   | `string`  |
diff --git a/assets/js/app/editor/Components/Editor/Html/Html.vue b/assets/js/app/editor/Components/Editor/Html/Html.vue
index e702dd39..c15ec2e2 100644
--- a/assets/js/app/editor/Components/Editor/Html/Html.vue
+++ b/assets/js/app/editor/Components/Editor/Html/Html.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <trumbowyg :id="name" :name="name" v-model="val" :config="config" ></trumbowyg>
+    <trumbowyg
+      :id="name"
+      :name="name"
+      v-model="val"
+      :config="config"
+    ></trumbowyg>
   </div>
 </template>
 
@@ -9,12 +14,12 @@ import trumbowyg from 'vue-trumbowyg';
 import 'trumbowyg/dist/ui/trumbowyg.css';
 
 export default {
-  name: "editor-html",
+  name: 'editor-html',
   props: ['value', 'label', 'name'],
   components: {
     trumbowyg
   },
-  mounted(){
+  mounted() {
     this.val = this.$options.filters.strip(this.value);
   },
   data: () => {
@@ -22,20 +27,20 @@ export default {
       val: null,
       config: {
         btns: [
-            // ['undo', 'redo'],
-            ['formatting'],
-            ['strong', 'em', 'del'],
-            ['link'],
-            ['insertImage'],
-            ['justifyLeft', 'justifyCenter', 'justifyRight'],
-            ['unorderedList', 'orderedList'],
-            ['horizontalRule'],
-            ['removeformat'],
-            ['fullscreen'],
-            ['viewHTML'],
+          // ['undo', 'redo'],
+          ['formatting'],
+          ['strong', 'em', 'del'],
+          ['link'],
+          ['insertImage'],
+          ['justifyLeft', 'justifyCenter', 'justifyRight'],
+          ['unorderedList', 'orderedList'],
+          ['horizontalRule'],
+          ['removeformat'],
+          ['fullscreen'],
+          ['viewHTML']
         ]
       }
     };
-  },
+  }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/assets/js/app/editor/Components/Editor/Image/Image.vue b/assets/js/app/editor/Components/Editor/Image/Image.vue
index 0aa7e7c1..e64095f0 100644
--- a/assets/js/app/editor/Components/Editor/Image/Image.vue
+++ b/assets/js/app/editor/Components/Editor/Image/Image.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
     class="editor__image"
     @dragenter="onDragEnter"
     @dragleave="onDragLeave"
@@ -9,21 +9,39 @@
     <transition name="fade">
       <div class="editor__image--dragging" v-show="isDragging">
         <i class="fas fa-upload"></i>
-      </div>  
+      </div>
     </transition>
     <div class="row">
       <div class="col-8">
         <div class="input-group mb-3">
-          <input :name="name + '[media]'" type="hidden" :value="media">
-          <input :name="name + '[filename]'" type="text" class="form-control" placeholder="filename" :value="filename">
+          <input :name="name + '[media]'" type="hidden" :value="media" />
+          <input
+            :name="name + '[filename]'"
+            type="text"
+            class="form-control"
+            placeholder="filename"
+            :value="filename"
+          />
         </div>
         <div class="input-group mb-3">
-          <input :name="name + '[alt]'" type="text" class="form-control" placeholder="alt text" :value="alt">
+          <input
+            :name="name + '[alt]'"
+            type="text"
+            class="form-control"
+            placeholder="alt text"
+            :value="alt"
+          />
         </div>
         <div class="input-group mb-3">
-          <input :name="name + '[title]'" type="text" class="form-control" placeholder="title" :value="title">
+          <input
+            :name="name + '[title]'"
+            type="text"
+            class="form-control"
+            placeholder="title"
+            :value="title"
+          />
         </div>
-        <div class="btn-toolbar" role="toolbar" >
+        <div class="btn-toolbar" role="toolbar">
           <div class="btn-group mr-2" role="group">
             <button type="button" class="btn btn-secondary" @click="selectFile">
               <i class="fas fa-fw fa-upload"></i> Upload
@@ -36,20 +54,20 @@
           </div>
         </div>
         <div class="progress mt-3" v-if="progress > 0">
-          <div 
-            class="progress-bar progress-bar-striped progress-bar-animated" 
-            role="progressbar" 
-            :aria-valuenow="progress" 
-            aria-valuemin="0" 
-            aria-valuemax="100" 
-            :style="`width: ${progress}%`">
-          </div>
+          <div
+            class="progress-bar progress-bar-striped progress-bar-animated"
+            role="progressbar"
+            :aria-valuenow="progress"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            :style="`width: ${progress}%`"
+          ></div>
         </div>
       </div>
       <div class="col-4">
         <div class="editor__image--preview">
-          <a 
-            :href="previewImage" 
+          <a
+            :href="previewImage"
             class="editor__image--preview-image"
             :style="`background-image: url('${previewImage}')`"
           >
@@ -57,7 +75,13 @@
         </div>
       </div>
     </div>
-    <input :name="fieldName" type="file" @change="uploadFile($event.target.files[0])" ref="selectFile" class="editor__image--upload">
+    <input
+      :name="fieldName"
+      type="file"
+      @change="uploadFile($event.target.files[0]);"
+      ref="selectFile"
+      class="editor__image--upload"
+    />
   </div>
 </template>
 
@@ -67,19 +91,28 @@ import baguetteBox from 'baguettebox.js';
 import field from '../../../mixins/value';
 
 export default {
-  name: "editor-image",
-  props: ['label', 'filename', 'name', 'thumbnail', 'alt', 'title', 'directory', 'media'],
+  name: 'editor-image',
+  props: [
+    'label',
+    'filename',
+    'name',
+    'thumbnail',
+    'alt',
+    'title',
+    'directory',
+    'media'
+  ],
   mixins: [field],
-  mounted(){
+  mounted() {
     this.previewImage = this.thumbnail;
   },
   updated() {
     baguetteBox.run('.editor__image--preview', {
-      afterShow: () =>{
-        noScroll.on()
+      afterShow: () => {
+        noScroll.on();
       },
-      afterHide: () =>{
-        noScroll.off()
+      afterHide: () => {
+        noScroll.off();
       }
     });
   },
@@ -92,34 +125,35 @@ export default {
     };
   },
   methods: {
-    selectFile(){
-      this.$refs.selectFile.click()
+    selectFile() {
+      this.$refs.selectFile.click();
     },
     onDragEnter(e) {
-        e.preventDefault();
-        this.dragCount++;
-        this.isDragging = true;
-        return false;
+      e.preventDefault();
+      this.dragCount++;
+      this.isDragging = true;
+      return false;
     },
     onDragLeave(e) {
-        e.preventDefault();
-        this.dragCount--;
-        if (this.dragCount <= 0)
-        this.isDragging = false;
+      e.preventDefault();
+      this.dragCount--;
+      if (this.dragCount <= 0) this.isDragging = false;
     },
     onDrop(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.isDragging = false;
-        const image = e.dataTransfer.files[0];
-        return this.uploadFile(image);
+      e.preventDefault();
+      e.stopPropagation();
+      this.isDragging = false;
+      const image = e.dataTransfer.files[0];
+      return this.uploadFile(image);
     },
-    uploadFile(file){
+    uploadFile(file) {
       const thumbnailParams = this.thumbnail.split('?').pop();
       const fd = new FormData();
       const config = {
-        onUploadProgress: (progressEvent) => {
-          const percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total )
+        onUploadProgress: progressEvent => {
+          const percentCompleted = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
           this.progress = percentCompleted;
         },
         headers: {
@@ -127,21 +161,22 @@ export default {
         }
       };
       fd.append('image', file);
-      this.$axios.post(this.directory, fd, config)
-      .then(res => {
-        this.filename = res.data;
-        this.previewImage = `/thumbs/${res.data}?${thumbnailParams}`;
-        this.progress = 0;
-      })
-      .catch(err => {
-        console.log(err);
-        this.progress = 0;
-      })
-    },
+      this.$axios
+        .post(this.directory, fd, config)
+        .then(res => {
+          this.filename = res.data;
+          this.previewImage = `/thumbs/${res.data}?${thumbnailParams}`;
+          this.progress = 0;
+        })
+        .catch(err => {
+          console.log(err);
+          this.progress = 0;
+        });
+    }
   },
-  computed:{
-    fieldName(){
-      return this.name + '[]'
+  computed: {
+    fieldName() {
+      return this.name + '[]';
     }
   }
 };
diff --git a/assets/js/app/editor/Components/Editor/Markdown/Markdown.vue b/assets/js/app/editor/Components/Editor/Markdown/Markdown.vue
index d3c25578..87bd91b2 100644
--- a/assets/js/app/editor/Components/Editor/Markdown/Markdown.vue
+++ b/assets/js/app/editor/Components/Editor/Markdown/Markdown.vue
@@ -1,34 +1,39 @@
 <template>
   <div>
-      <markdown-editor :name="name" :id="name" v-model="val" :configs="config"></markdown-editor>
+    <markdown-editor
+      :name="name"
+      :id="name"
+      v-model="val"
+      :configs="config"
+    ></markdown-editor>
   </div>
 </template>
 
 <script>
-import markdownEditor from 'vue-simplemde/src/markdown-editor'
+import markdownEditor from 'vue-simplemde/src/markdown-editor';
 
 export default {
-  name: "editor-markdown",
+  name: 'editor-markdown',
   props: ['value', 'label', 'name'],
   components: {
     markdownEditor
   },
-  mounted(){
+  mounted() {
     this.val = this.$options.filters.strip(this.value);
   },
   data: () => {
     return {
       val: null,
-      config:{
+      config: {
         spellChecker: false,
         status: false,
         toggleFullScreen: true
       }
     };
-  },
+  }
 };
 </script>
 
 <style scoped>
-  @import '~simplemde/dist/simplemde.min.css';
-</style>
\ No newline at end of file
+@import '~simplemde/dist/simplemde.min.css';
+</style>
diff --git a/assets/js/app/editor/Components/Editor/Number/Number.vue b/assets/js/app/editor/Components/Editor/Number/Number.vue
index 9d77de7c..15ef385b 100644
--- a/assets/js/app/editor/Components/Editor/Number/Number.vue
+++ b/assets/js/app/editor/Components/Editor/Number/Number.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="input-group">
-    <input 
-      :name="name" 
+    <input
+      :name="name"
       class="form-control"
-      placeholder="…" 
-      type="number" 
-      :step="step" 
+      placeholder="…"
+      type="number"
+      :step="step"
       v-model="val"
-    >
+    />
   </div>
 </template>
 
@@ -15,8 +15,8 @@
 import val from '../../../mixins/value';
 
 export default {
-  name: "editor-number",
+  name: 'editor-number',
   props: ['value', 'label', 'name', 'step', 'type', 'disabled'],
-  mixins: [val],
+  mixins: [val]
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/assets/js/app/editor/Components/Editor/Select/Select.vue b/assets/js/app/editor/Components/Editor/Select/Select.vue
index 9560b080..a8623c53 100644
--- a/assets/js/app/editor/Components/Editor/Select/Select.vue
+++ b/assets/js/app/editor/Components/Editor/Select/Select.vue
@@ -15,56 +15,63 @@
       @tag="addTag"
     >
       <template slot="singleLabel" slot-scope="props" v-if="name === 'status'">
-        <span class="status mr-2" :class="`is-${props.option.key}`"></span>{{props.option.key}}
+        <span class="status mr-2" :class="`is-${props.option.key}`"></span>
+        {{ props.option.key }}
       </template>
       <template slot="option" slot-scope="props" v-if="name === 'status'">
-        <span class="status mr-2" :class="`is-${props.option.key}`"></span>{{props.option.key}}
+        <span class="status mr-2" :class="`is-${props.option.key}`"></span>
+        {{ props.option.key }}
       </template>
     </multiselect>
     <input
       type="hidden"
       :id="id"
-      :name="fieldName" 
+      :name="fieldName"
       :form="form"
       :value="sanitized"
-    >
+    />
   </div>
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import Multiselect from 'vue-multiselect';
 
 export default {
-  name: "editor-select",
+  name: 'editor-select',
   props: ['value', 'name', 'id', 'form', 'options', 'multiple', 'taggable'],
   components: { Multiselect },
-  mounted(){
+  mounted() {
     const _values = this.value;
     const _options = this.options;
 
     let filterSelectedItems = _options.filter(item => {
       return _values.includes(item.key) || _values == item.key;
-    })
+    });
 
     this.selected = filterSelectedItems;
   },
   data: () => {
     return {
-      selected: [],
-    }
+      selected: []
+    };
   },
   computed: {
-    sanitized(){
+    sanitized() {
       let filtered;
-      filtered = this.selected.map(item => item.key);
-      return JSON.stringify(filtered);
+      if (this.multiple) {
+        filtered = this.selected.map(item => item.key);
+        return JSON.stringify(filtered);
+      } else {
+        filtered = [this.selected];
+        return JSON.stringify(filtered[0].key);
+      }
     },
     fieldName() {
-      return this.name + '[]'
-    },
+      return this.name + '[]';
+    }
   },
   methods: {
-    addTag (newTag) {
+    addTag(newTag) {
       const tag = {
         key: newTag,
         value: newTag,
@@ -76,4 +83,4 @@ export default {
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/assets/js/app/editor/Components/Editor/Slug/Slug.vue b/assets/js/app/editor/Components/Editor/Slug/Slug.vue
index 2bab430a..ff60fbae 100644
--- a/assets/js/app/editor/Components/Editor/Slug/Slug.vue
+++ b/assets/js/app/editor/Components/Editor/Slug/Slug.vue
@@ -1,43 +1,43 @@
 <template>
   <div>
     <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span class="input-group-text">{{ prefix }}</span>
-        </div>
-        <input 
-          :name="name" 
-          placeholder="…" 
-          type="text"
-          class="form-control" 
-          :class="fieldClass" 
-          :readonly="!edit"
-          v-model="val"
+      <div class="input-group-prepend">
+        <span class="input-group-text">{{ prefix }}</span>
+      </div>
+      <input
+        :name="name"
+        placeholder="…"
+        type="text"
+        class="form-control"
+        :class="fieldClass"
+        :readonly="!edit"
+        v-model="val"
+      />
+      <div class="input-group-append">
+        <button
+          type="button"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          class="btn dropdown-toggle"
+          :class="[{ 'btn-primary': edit }, { 'btn-secondary': !edit }]"
         >
-        <div class="input-group-append" >
-            <button 
-              type="button" 
-              data-toggle="dropdown" 
-              aria-haspopup="true" 
-              aria-expanded="false"
-              class="btn dropdown-toggle"
-              :class="[{'btn-primary': edit}, {'btn-secondary': !edit}]" 
-            >
-              <i class="fas fa-fw" :class="`fa-${icon}`"></i>  {{buttonText}}
-            </button>
-            <div class="dropdown-menu">
-                <a class="dropdown-item" @click="editSlug">
-                    <template v-if="!edit">
-                      <i class="fas fa-pencil-alt fa-fw"></i> Edit
-                    </template>
-                    <template v-else>
-                      <i class="fas fa-lock fa-fw"></i> Lock
-                    </template>
-                </a>
-                <a class="dropdown-item" @click="generateSlug()">
-                    <i class="fas fa-link fa-fw"></i> Generate from: {{generate}}
-                </a>
-            </div>
+          <i class="fas fa-fw" :class="`fa-${icon}`"></i> {{ buttonText }}
+        </button>
+        <div class="dropdown-menu">
+          <a class="dropdown-item" @click="editSlug">
+            <template v-if="!edit">
+              <i class="fas fa-pencil-alt fa-fw"></i> Edit
+            </template>
+            <template v-else>
+              <i class="fas fa-lock fa-fw"></i> Lock
+            </template>
+          </a>
+          <a class="dropdown-item" @click="generateSlug();">
+            <i class="fas fa-link fa-fw"></i> Generate from: {{ generate }}
+          </a>
         </div>
+      </div>
     </div>
   </div>
 </template>
@@ -46,7 +46,7 @@
 import field from '../../../mixins/value';
 
 export default {
-  name: "editor-slug",
+  name: 'editor-slug',
   props: ['value', 'label', 'name', 'prefix', 'fieldClass', 'generate'],
   mixins: [field],
   data: () => {
@@ -56,41 +56,44 @@ export default {
       icon: 'lock'
     };
   },
-  mounted(){
-    setTimeout(()=>{ 
-      const title = document.querySelector(`input[name='fields[${this.generate}]']`).value;
-      if(title.length <= 0){
+  mounted() {
+    setTimeout(() => {
+      const title = document.querySelector(
+        `input[name='fields[${this.generate}]']`
+      ).value;
+      if (title.length <= 0) {
         this.$root.$emit('generate-from-title', true);
       }
     }, 0);
     this.$root.$on('slugify-from-title', data => this.generateSlug());
   },
   methods: {
-    editSlug(){
+    editSlug() {
       this.$root.$emit('generate-from-title', false);
-      if(!this.edit){
+      if (!this.edit) {
         this.edit = true;
-        this.buttonText = "Edit"
-        this.icon = 'pencil-alt'
+        this.buttonText = 'Edit';
+        this.icon = 'pencil-alt';
       } else {
-        const slug = this.$options.filters.slugify(this.val)
+        const slug = this.$options.filters.slugify(this.val);
         this.val = slug;
         this.edit = false;
-        this.buttonText = "Locked"
-        this.icon = 'lock'
+        this.buttonText = 'Locked';
+        this.icon = 'lock';
       }
     },
-    generateSlug(){
-      const title = document.querySelector(`input[name='fields[${this.generate}]']`).value;
+    generateSlug() {
+      const title = document.querySelector(
+        `input[name='fields[${this.generate}]']`
+      ).value;
       const slug = this.$options.filters.slugify(title);
       this.val = slug;
       this.$root.$emit('generate-from-title', true);
 
       this.edit = false;
-      this.buttonText = "Locked"
-      this.icon = 'lock'
+      this.buttonText = 'Locked';
+      this.icon = 'lock';
     }
   }
 };
 </script>
-
diff --git a/assets/js/app/editor/Components/Editor/Text/Text.vue b/assets/js/app/editor/Components/Editor/Text/Text.vue
index 8be37440..fc88c642 100644
--- a/assets/js/app/editor/Components/Editor/Text/Text.vue
+++ b/assets/js/app/editor/Components/Editor/Text/Text.vue
@@ -4,12 +4,12 @@
       :id="id"
       class="form-control"
       :class="getType"
-      :name="name" 
-      placeholder="…" 
-      type="text" 
-      v-model="val" 
-      :disabled="disabled == 1" 
-    >
+      :name="name"
+      placeholder="…"
+      type="text"
+      v-model="val"
+      :disabled="disabled == 1"
+    />
   </div>
 </template>
 
@@ -17,11 +17,11 @@
 import field from '../../../mixins/value';
 
 export default {
-  name: "editor-text",
+  name: 'editor-text',
   props: ['value', 'label', 'name', 'type', 'disabled', 'id'],
   mixins: [field],
   mounted() {
-    this.$root.$on('generate-from-title', data => this.generate = data);
+    this.$root.$on('generate-from-title', data => (this.generate = data));
   },
   data: () => {
     return {
@@ -29,18 +29,18 @@ export default {
     };
   },
   watch: {
-    val(){
-      if(this.generate){
+    val() {
+      if (this.generate) {
         this.$root.$emit('slugify-from-title');
       }
     }
   },
-  computed:{
-    getType(){
-      if(this.type === 'large'){
-        return 'form-control-lg'
+  computed: {
+    getType() {
+      if (this.type === 'large') {
+        return 'form-control-lg';
       }
     }
   }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/assets/js/app/editor/Components/Editor/Textarea/Textarea.vue b/assets/js/app/editor/Components/Editor/Textarea/Textarea.vue
index 9ee9dc6a..248079dd 100644
--- a/assets/js/app/editor/Components/Editor/Textarea/Textarea.vue
+++ b/assets/js/app/editor/Components/Editor/Textarea/Textarea.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-      <textarea 
-        class="form-control field--textarea"
-        :name="name" 
-        v-model="val"
-        rows="10"
-      ></textarea>
+    <textarea
+      class="form-control field--textarea"
+      :name="name"
+      v-model="val"
+      rows="10"
+    ></textarea>
   </div>
 </template>
 
@@ -13,8 +13,8 @@
 import field from '../../../mixins/value';
 
 export default {
-  name: "editor-textarea",
+  name: 'editor-textarea',
   props: ['value', 'label', 'name'],
-  mixins: [field],
+  mixins: [field]
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/assets/js/app/editor/Components/Editor/index.js b/assets/js/app/editor/Components/Editor/index.js
index c4178b6b..2f882b10 100644
--- a/assets/js/app/editor/Components/Editor/index.js
+++ b/assets/js/app/editor/Components/Editor/index.js
@@ -13,15 +13,4 @@ import Textarea from './Textarea/Textarea';
 
 import Image from './Image/Image';
 
-
-export {
-  Text,
-  Slug,
-  Number,
-  Date,
-  Select,
-  Html,
-  Markdown,
-  Textarea,
-  Image
-};
+export { Text, Slug, Number, Date, Select, Html, Markdown, Textarea, Image };
diff --git a/assets/js/app/editor/Components/General/Language/Language.vue b/assets/js/app/editor/Components/General/Language/Language.vue
index f063bcfd..5430c520 100644
--- a/assets/js/app/editor/Components/General/Language/Language.vue
+++ b/assets/js/app/editor/Components/General/Language/Language.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <label>{{label}}</label>
+    <label>{{ label }}</label>
     <multiselect
       v-model="locale"
       track-by="name"
@@ -9,74 +9,66 @@
       :searchable="false"
       :show-labels="false"
       :limit="1"
-      @input="switchLocale()"
+      @input="switchLocale();"
     >
-    <template slot="singleLabel" slot-scope="props">
-      <span 
-        class="fp mr-1"
-        :class="props.option.flag"
-      ></span>
-      <span>{{props.option.name}} <small style="white-space: nowrap">({{props.option.code}})</small></span>
-    </template>
-    <template slot="option" slot-scope="props">
-      <span 
-        class="fp mr-1"
-        :class="props.option.flag"
-      ></span>
-      <span>{{props.option.name}} <small style="white-space: nowrap">({{props.option.code}})</small></span>
-    </template>
+      <template slot="singleLabel" slot-scope="props">
+        <span class="fp mr-1" :class="props.option.flag"></span>
+        <span
+          >{{ props.option.name }}
+          <small style="white-space: nowrap"
+            >({{ props.option.code }})</small
+          ></span
+        >
+      </template>
+      <template slot="option" slot-scope="props">
+        <span class="fp mr-1" :class="props.option.flag"></span>
+        <span
+          >{{ props.option.name }}
+          <small style="white-space: nowrap"
+            >({{ props.option.code }})</small
+          ></span
+        >
+      </template>
     </multiselect>
-    
   </div>
 </template>
 
 <script>
-import Multiselect from 'vue-multiselect'
+import Multiselect from 'vue-multiselect';
 
 export default {
-
-  name: "editor-language",
+  name: 'editor-language',
 
   components: { Multiselect },
 
   props: ['label', 'locales', 'current'],
 
-
-  mounted(){
+  mounted() {
     const url = new URLSearchParams(window.location.search);
 
-
-
-    if(this.current){
-
-      let current = this.locales.filter(locale =>
-        locale.code === this.current
-      )
-      if(current.length > 0){
+    if (this.current) {
+      let current = this.locales.filter(locale => locale.code === this.current);
+      if (current.length > 0) {
         this.locale = current[0];
       } else {
-        this.locale = this.locales[0]
+        this.locale = this.locales[0];
       }
-
     } else {
-
-      this.locale = this.locales[0]
-
+      this.locale = this.locales[0];
     }
   },
 
-  data: () =>{
+  data: () => {
     return {
       locale: {}
-    }
+    };
   },
 
   methods: {
-    switchLocale(){
+    switchLocale() {
       const locale = this.locale.link;
-      return window.location.href = locale;
+      return (window.location.href = locale);
     }
   }
-
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/assets/js/app/editor/Components/General/index.js b/assets/js/app/editor/Components/General/index.js
index 724009c9..6cc8f6cf 100644
--- a/assets/js/app/editor/Components/General/index.js
+++ b/assets/js/app/editor/Components/General/index.js
@@ -1,5 +1,3 @@
 import Language from './Language/Language';
 
-export {
-  Language
-};
\ No newline at end of file
+export { Language };
diff --git a/package.json b/package.json
index 2ffa9142..98e3fb9f 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,13 @@
     "build": "encore production --progress",
     "test": "jest"
   },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ]
+  },
   "browserslist": [
     "> 1%"
   ],