💄 eslint errors

src/App.vue

@@ -6,15 +6,15 @@
 </template>
 
 <script>
-import Navbar from './components/navbar/Navbar';
-import MainContainer from './components/main/MainContainer';
+import Navbar from './components/navbar/Navbar.vue';
+import MainContainer from './components/main/MainContainer.vue';
 
 export default {
   name: 'app',
   components: {
     'main--navbar': Navbar,
     'main--container': MainContainer,
-  }
+  },
 };
 </script>
 

src/components/control-panel/ControlPanel.vue

@@ -7,17 +7,17 @@
 </template>
 
 <script>
-import ImageLoader from './ImageLoader';
-import FilterPanel from './filter-panel/FilterPanel';
-import SaveImagePanel from './save-image/SaveImagePanel';
+import ImageLoader from './ImageLoader.vue';
+import FilterPanel from './filter-panel/FilterPanel.vue';
+import SaveImagePanel from './save-image/SaveImagePanel.vue';
 
 export default {
   components: {
     'image-loader': ImageLoader,
     'filter-panel': FilterPanel,
-    'save-image-panel': SaveImagePanel
-  }
-}
+    'save-image-panel': SaveImagePanel,
+  },
+};
 </script>
 
 <style scoped>

src/components/control-panel/ImageLoader.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="image-loader--outer flex-1 flexbox flexdir-col">
-    <label 
+    <label
       class="image-loader--label flex-1"
       for="image-loader--input"
       >Load Image
     </label>
 
     <div class="image-loader--input-wrapper flex-1">
-      <input 
+      <input
         @input="getImageSize($event)"
-        type="text" 
+        type="text"
         class="image-loader--input"
         id="image-loader--input"
       >
@@ -34,24 +34,24 @@ export default {
   computed: {
     imageSize() {
       return this.$store.getters.getImage;
-    }
+    },
   },
   methods: {
     ...mapActions(['setImageSource_STORE', 'setImageSize_STORE']),
-    getImageSize($event) { 
+    getImageSize($event) {
       const loadedImage = document.createElement('img');
       loadedImage.onload = () => {
         this.setImageSource_STORE(loadedImage.src);
         const payload = {
           width: loadedImage.width,
-          height: loadedImage.height
+          height: loadedImage.height,
         };
         this.setImageSize_STORE(payload);
-      }
+      };
       loadedImage.src = `${corsProxy}${$event.target.value}`;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>

src/components/control-panel/filter-panel/FilterInfo.vue

@@ -13,19 +13,21 @@
 export default {
   props: ['filter'],
   filters: {
+    // eslint-disable-next-line object-shorthand, func-names
     capitalize: function (value) {
       if (!value) return '';
       if (value.includes('-')) {
         const capitalized = value.split('-')
-          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .map(word => word.charAt(0).toUpperCase() + word.slice(1))
           .join(' ');
         return capitalized;
       }
-      value = value.toString()
-      return value.charAt(0).toUpperCase() + value.slice(1)
-    }
+      // eslint-disable-next-line no-param-reassign
+      value = value.toString();
+      return value.charAt(0).toUpperCase() + value.slice(1);
+    },
   },
-}
+};
 </script>
 
 <style scoped>

src/components/control-panel/filter-panel/FilterInput.vue

@@ -1,27 +1,27 @@
 <template>
   <div class="filter-input--outer">
     <filter-info :filter="filter"></filter-info>
-    <input 
+    <input
       v-model="filter.current"
       @mousemove="updateFilterValue(filter)"
       @change="updateFilterValue(filter)"
       :id="filter.name"
       :min="filter.min"
       :max="filter.max"
-      class="filter-input--input" 
-      type="range" 
+      class="filter-input--input"
+      type="range"
       >
   </div>
 </template>
 
 <script>
-import FilterInfo from './FilterInfo';
 import { mapActions } from 'vuex';
+import FilterInfo from './FilterInfo.vue';
 
 export default {
   props: ['filter', 'index'],
   components: {
-    'filter-info': FilterInfo
+    'filter-info': FilterInfo,
   },
   methods: {
     ...mapActions(['setFilterValue_STORE']),
@@ -31,14 +31,13 @@ export default {
         filterNewValue: filter.current,
       };
       this.setFilterValue_STORE(payload);
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
 .filter-input--input {
   width: 100%;
 }
 </style>
-

src/components/control-panel/filter-panel/FilterPanel.vue

@@ -3,7 +3,7 @@
     <h2 class="filter-panel--title">Filters</h2>
 
     <div class="filter-panel--input-group-wrapper flex-1 flexbox flexdir-col">
-      <filter-input 
+      <filter-input
         v-for="(filter, index) in filters" :key="index"
         :filter="filter"
         :index="index"
@@ -16,18 +16,18 @@
 </template>
 
 <script>
-import FilterInput from './FilterInput';
+import FilterInput from './FilterInput.vue';
 
 export default {
   components: {
-    'filter-input': FilterInput
+    'filter-input': FilterInput,
   },
   computed: {
-    filters () {
+    filters() {
       return this.$store.getters.getFilters;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>

src/components/control-panel/save-image/CustomImageName.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="custom-image-name--outer flexbox flexdir-col">
-
-    <label 
+    <label
       class="custom-image-name--label flex-1"
       for="custom-image-name"
       >Custom Name
       </label>
 
     <div class="custom-image-name--input--outer">
-      <input 
+      <input
         v-model="customImageName_STORE"
-        type="text" 
+        type="text"
         class="custom-image-name--input--inner"
         id="custom-image-name"
       >
@@ -27,10 +26,10 @@ export default {
       },
       set(value) {
         this.$store.commit('setCustomImageName_MUTA', value);
-      }
-    }
+      },
+    },
   },
-}
+};
 </script>
 
 <style scoped>

src/components/control-panel/save-image/DownloadButton.vue

@@ -1,45 +1,43 @@
 <template>
-
-<div class="download-button--outer flexbox flex-1 flex-justify-end">
-  <button
-    @click="downloadImage"
-    class="download-button--inner pointer"
-    >Download
-  </button>
-</div>
-
+  <div class="download-button--outer flexbox flex-1 flex-justify-end">
+    <button
+      @click="downloadImage"
+      class="download-button--inner pointer"
+      >Download
+    </button>
+  </div>
 </template>
 
 <script>
 export default {
   computed: {
     image() {
       return this.$store.getters.getImage;
-    }
+    },
   },
   methods: {
     downloadImage() {
       const imageToDownload = new Image(this.image.width, this.image.height);
       imageToDownload.crossOrigin = 'Anonymous';
       imageToDownload.onload = () => {
-        let canvas = document.createElement('canvas');
+        const canvas = document.createElement('canvas');
         canvas.width = this.image.width;
         canvas.height = this.image.height;
         const ctx = canvas.getContext('2d');
         ctx.filter = this.image.filterString;
         ctx.drawImage(imageToDownload, 0, 0, this.image.width, this.image.height);
-        canvas.toBlob(blob => {
+        canvas.toBlob((blob) => {
           const link = document.createElement('a');
           const url = URL.createObjectURL(blob);
           link.setAttribute('href', url);
           link.setAttribute('download', this.image.customImageName);
           link.click();
-        }, this.image.selectedFormat)
-      }
+        }, this.image.selectedFormat);
+      };
       imageToDownload.src = this.image.source;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>

src/components/control-panel/save-image/ImageFormat.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="image-format--outer">
-    <select 
+    <select
       v-model="selectFormat_STORE"
       class="image-format--input">
        <option value="image/png">PNG</option>
@@ -18,10 +18,10 @@ export default {
       },
       set(value) {
         this.$store.commit('setImageFormat_MUTA', value);
-      }
-    }
-  }
-}
+      },
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -33,5 +33,4 @@ export default {
   border: 2px solid var(--navbarBlack);
   font-size: .85rem;
 }
-
 </style>

src/components/control-panel/save-image/SaveImagePanel.vue

@@ -9,17 +9,17 @@
 </template>
 
 <script>
-import CustomImageName from './CustomImageName';
-import ImageFormat from './ImageFormat';
-import DownloadButton from './DownloadButton';
+import CustomImageName from './CustomImageName.vue';
+import ImageFormat from './ImageFormat.vue';
+import DownloadButton from './DownloadButton.vue';
 
 export default {
   components: {
     'custom-image-name': CustomImageName,
     'image-format': ImageFormat,
-    'download-button': DownloadButton
-  }
-}
+    'download-button': DownloadButton,
+  },
+};
 </script>
 
 <style>
@@ -31,4 +31,3 @@ export default {
   padding: 0 1rem;
 }
 </style>
-

src/components/display/Display_Container.vue

@@ -5,25 +5,23 @@
 </template>
 
 <script>
-import Display_Image from './Display_Image';
+import DisplayImage from './Display_Image.vue';
 
 export default {
   components: {
-    'display-image': Display_Image,
+    'display-image': DisplayImage,
   },
   computed: {
     filters() {
       return this.$store.getters.getFilters
-        .map((filter, index) => {
-          return {
-            name: filter.name,
-            currentValue: filter.current,
-            suffix: filter.suffix,
-          }
-        })
+        .map(filter => ({
+          name: filter.name,
+          currentValue: filter.current,
+          suffix: filter.suffix,
+        }));
     },
   },
-}
+};
 </script>
 
 <style scoped>