run lint + fix build output (#19)

* run lint + fix build output

* remove unused env var

lib/components/base/Slider.vue

@@ -3,27 +3,27 @@
     <div class="slider-component">
       <div class="slide-container">
         <input
-            ref="input"
-            v-model="currentValue"
-            type="range"
-            :min="min"
-            :max="max"
-            :step="step"
-            class="slider"
-            :style="{
-              '--current-value': currentValue,
-              '--min-value': min,
-              '--max-value': max
-            }"
-            @input="onInput($refs.input.value)"
-        >
+          ref="input"
+          v-model="currentValue"
+          type="range"
+          :min="min"
+          :max="max"
+          :step="step"
+          class="slider"
+          :style="{
+            '--current-value': currentValue,
+            '--min-value': min,
+            '--max-value': max,
+          }"
+          @input="onInput($refs.input.value)"
+        />
         <div class="slider-range">
           <span>
-              {{ min }}
-            </span>
+            {{ min }}
+          </span>
           <span>
-              {{ max }}
-            </span>
+            {{ max }}
+          </span>
         </div>
       </div>
     </div>
@@ -39,28 +39,28 @@
 
 <script>
 export default {
-  name: "Slider",
+  name: 'Slider',
   props: {
     value: {
       type: Number,
-      default: 0
+      default: 0,
     },
     min: {
       type: Number,
-      default: 0
+      default: 0,
     },
     max: {
       type: Number,
-      default: 100
+      default: 100,
     },
     step: {
       type: Number,
-      default: 10
+      default: 10,
     },
     forceStep: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   emits: ['input'],
   data() {
@@ -68,16 +68,16 @@ export default {
       sliderWidth: 0,
       objectPosition: 0,
       startOffset: 0,
-      currentValue: Math.max(this.min, this.value).toString()
-    };
+      currentValue: Math.max(this.min, this.value).toString(),
+    }
   },
   computed: {
     inputValueValid: {
       get() {
-        return this.$refs.value.value;
+        return this.$refs.value.value
       },
       set(newValue) {
-        const parsedValue = parseInt(newValue);
+        const parsedValue = parseInt(newValue)
         if (parsedValue < this.min) {
           this.currentValue = this.min.toString()
         } else if (parsedValue > this.max) {
@@ -85,18 +85,20 @@ export default {
         } else if (!parsedValue) {
           this.currentValue = this.min.toString()
         } else {
-          this.currentValue = (parsedValue - (this.forceStep ? parsedValue % this.step : 0)).toString()
+          this.currentValue = (
+            parsedValue - (this.forceStep ? parsedValue % this.step : 0)
+          ).toString()
         }
-        this.$refs.value.value = this.currentValue;
-        this.$emit('input', parseInt(this.currentValue));
-      }
-    }
+        this.$refs.value.value = this.currentValue
+        this.$emit('input', parseInt(this.currentValue))
+      },
+    },
   },
   methods: {
     onInput(value) {
-      this.inputValueValid = parseInt(value);
+      this.inputValueValid = parseInt(value)
     },
-  }
+  },
 }
 </script>
 
@@ -119,13 +121,15 @@ export default {
   -webkit-appearance: none;
   appearance: none;
   border-radius: var(--radius-sm);
-  height: .25rem;
-  background:  linear-gradient(
-      to right,
-      var(--color-brand),
-      var(--color-brand) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
-      var(--color-base) calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
-      var(--color-base) 100%
+  height: 0.25rem;
+  background: linear-gradient(
+    to right,
+    var(--color-brand),
+    var(--color-brand)
+      calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+    var(--color-base)
+      calc((var(--current-value) - var(--min-value)) / (var(--max-value) - var(--min-value)) * 100%),
+    var(--color-base) 100%
   );
   background-size: 100% 100%;
   outline: none;
@@ -135,38 +139,38 @@ export default {
 .slider-component .slide-container .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: .75rem;
-  height: .75rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider::-moz-range-thumb {
-  width: .75rem;
-  height: .75rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider:hover::-webkit-slider-thumb {
   width: 1rem;
   height: 1rem;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-component .slide-container .slider:hover::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  transition: .2s;
+  transition: 0.2s;
 }
 
 .slider-input {
   width: 6rem;
-  margin-left: .75rem;
+  margin-left: 0.75rem;
 }
 
 .slider-range {