Resolved ALL eslint issues for project

src/components/ui/DarkmodeToggle.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="darkToggle">
-    <span @click="toggleDarkmode">{{ darkmodeToggleIcon }}</span>
+    <span @click="toggleDarkmode" @keydown.enter="toggleDarkmode">{{
+      darkmodeToggleIcon
+    }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref, computed } from "vue";
 
-  let darkmode = ref(systemDarkModeEnabled());
+  function systemDarkModeEnabled() {
+    const computedStyle = window.getComputedStyle(document.body);
+    if (computedStyle?.colorScheme != null) {
+      return computedStyle.colorScheme.includes("dark");
+    }
+    return false;
+  }
+
+  const darkmode = ref(systemDarkModeEnabled());
   const darkmodeToggleIcon = computed(() => {
     return darkmode.value ? "🌝" : "🌚";
   });
@@ -16,14 +26,6 @@
     darkmode.value = !darkmode.value;
     document.body.className = darkmode.value ? "dark" : "light";
   }
-
-  function systemDarkModeEnabled() {
-    const computedStyle = window.getComputedStyle(document.body);
-    if (computedStyle["colorScheme"] != null) {
-      return computedStyle.colorScheme.includes("dark");
-    }
-    return false;
-  }
 </script>
 
 <style lang="scss" scoped>

src/components/ui/Hamburger.vue

@@ -2,9 +2,9 @@
   <div
     class="nav__hamburger"
     :class="{ open: isOpen }"
+    tabindex="0"
     @click="toggle"
     @keydown.enter="toggle"
-    tabindex="0"
   >
     <div v-for="(_, index) in 3" :key="index" class="bar"></div>
   </div>

src/components/ui/Loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`loader type-${type}`">
+  <div :class="`loader type-${type || LoaderHeightType.Page}`">
     <i class="loader--icon">
       <i class="loader--icon-spinner" />
     </i>
@@ -13,17 +13,13 @@
 
 <script setup lang="ts">
   import { defineProps } from "vue";
-
-  enum LoaderHeightType {
-    Page = "page",
-    Section = "section"
-  }
+  import LoaderHeightType from "../../interfaces/ILoader";
 
   interface Props {
     type?: LoaderHeightType;
   }
 
-  const { type = LoaderHeightType.Page } = defineProps<Props>();
+  defineProps<Props>();
 </script>
 
 <style lang="scss" scoped>

src/components/ui/LoadingPlaceholder.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="text-input__loading" :style="`margin-top: ${top}rem`">
+  <div class="text-input__loading" :style="`margin-top: ${top || 0}rem`">
     <div
-      class="text-input__loading--line"
-      :class="lineClass"
-      v-for="l in Array(count)"
+      v-for="l in Array(count || 1)"
       :key="l"
+      class="text-input__loading--line"
+      :class="lineClass || ''"
     ></div>
   </div>
 </template>
@@ -13,12 +13,12 @@
   import { defineProps } from "vue";
 
   interface Props {
-    count?: Number;
-    lineClass?: String;
-    top?: Number;
+    count?: number;
+    lineClass?: string;
+    top?: number;
   }
 
-  const { count = 1, lineClass = "", top = 0 } = defineProps<Props>();
+  defineProps<Props>();
 </script>
 
 <style lang="scss" scoped>

src/components/ui/SeasonedButton.vue

@@ -1,27 +1,26 @@
 <template>
   <button
     type="button"
-    @click="emit('click')"
     :class="{ active: active, fullwidth: fullWidth }"
+    @click="emit('click')"
   >
     <slot></slot>
   </button>
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, defineEmits } from "vue";
-  import type { Ref } from "vue";
+  import { defineProps, defineEmits } from "vue";
 
   interface Props {
-    active?: Boolean;
-    fullWidth?: Boolean;
+    active?: boolean;
+    fullWidth?: boolean;
   }
 
   interface Emit {
     (e: "click");
   }
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
   const emit = defineEmits<Emit>();
 </script>
 

src/components/ui/SeasonedInput.vue

@@ -2,9 +2,10 @@
   <div class="group" :class="{ completed: modelValue, focus }">
     <component :is="inputIcon" v-if="inputIcon" />
 
+    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
     <input
       class="input"
-      :type="toggledType || type"
+      :type="toggledType || type || 'text'"
       :placeholder="placeholder"
       :value="modelValue"
       @input="handleInput"
@@ -15,10 +16,10 @@
 
     <i
       v-if="modelValue && type === 'password'"
-      @click="toggleShowPassword"
-      @keydown.enter="toggleShowPassword"
       class="show noselect"
       tabindex="0"
+      @click="toggleShowPassword"
+      @keydown.enter="toggleShowPassword"
       >{{ toggledType == "password" ? "show" : "hide" }}</i
     >
   </div>
@@ -43,16 +44,16 @@
     (e: "update:modelValue", value: string);
   }
 
-  const { placeholder, type = "text", modelValue } = defineProps<Props>();
+  const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
 
-  const toggledType: Ref<string> = ref(type);
+  const toggledType: Ref<string> = ref(props.type);
   const focus: Ref<boolean> = ref(false);
 
   const inputIcon = computed(() => {
-    if (type === "password") return IconKey;
-    if (type === "email") return IconEmail;
-    if (type === "torrents") return IconBinoculars;
+    if (props.type === "password") return IconKey;
+    if (props.type === "email") return IconEmail;
+    if (props.type === "torrents") return IconBinoculars;
     return false;
   });
 

src/components/ui/SeasonedMessages.vue

@@ -1,15 +1,15 @@
 <template>
   <transition-group name="fade">
     <div
-      class="card"
       v-for="(message, index) in messages"
       :key="generateMessageKey(index, message)"
+      class="card"
       :class="message.type || 'warning'"
     >
       <span class="pinstripe"></span>
       <div class="content">
         <h2 class="title">
-          {{ message.title }}
+          {{ message.title || titleFromType(message.type) }}
         </h2>
         <span v-if="message.message" class="message">{{
           message.message
@@ -27,7 +27,6 @@
     ErrorMessageTypes,
     IErrorMessage
   } from "../../interfaces/IErrorMessage";
-  import type { Ref } from "vue";
 
   interface Props {
     messages: IErrorMessage[];
@@ -52,8 +51,9 @@
   }
 
   function dismiss(index: number) {
-    props.messages.splice(index, 1);
-    emit("update:messages", [...props.messages]);
+    const _messages = [...props.messages];
+    _messages.splice(index, 1);
+    emit("update:messages", _messages);
   }
 
   function generateMessageKey(

src/components/ui/ToggleButton.vue

@@ -4,8 +4,8 @@
       v-for="option in options"
       :key="option"
       class="toggle-button"
-      @click="toggleTo(option)"
       :class="selected === option ? 'selected' : null"
+      @click="() => toggleTo(option)"
     >
       {{ option }}
     </button>
@@ -13,8 +13,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, defineProps, defineEmits } from "vue";
-  import type { Ref } from "vue";
+  import { defineProps, defineEmits } from "vue";
 
   interface Props {
     options: string[];