fix: resolve eslint errors and vue template warnings (#33)

src/dashboard/example/components/BracketPanel.vue

@@ -102,9 +102,14 @@ onMounted(() => {
 
 <template>
   <div class="bracket-panel">
-    <QCard flat bordered>
+    <QCard
+      flat
+      bordered
+    >
       <QCardSection class="bracket-panel-header">
-        <div class="text-h4">Bracket</div>
+        <div class="text-h4">
+          Bracket
+        </div>
       </QCardSection>
       <QSeparator />
 

src/dashboard/example/components/ScoreboardPanel.vue

@@ -106,7 +106,9 @@ watchEffect(() => {
 <template>
   <div class="scoreboard-panel">
     <div class="row items-center q-mb-md">
-      <div class="text-h4">Scoreboard</div>
+      <div class="text-h4">
+        Scoreboard
+      </div>
       <QSpace />
       <QBtn
         color="secondary"
@@ -127,14 +129,20 @@ watchEffect(() => {
 
     <div class="row q-col-gutter-lg">
       <div class="col-12 col-md-6">
-        <QCard flat bordered>
+        <QCard
+          flat
+          bordered
+        >
           <QCardSection>
-            <div class="text-subtitle1 text-weight-bold">Lado izquierdo</div>
+            <div class="text-subtitle1 text-weight-bold">
+              Lado izquierdo
+            </div>
           </QCardSection>
           <QSeparator />
           <QCardSection>
             <QSelect
               v-model="scoreboardStore.scoreboard.leftPlayerId"
+              v-model:input-value="leftInput"
               :options="leftPlayerOptions"
               label="Jugador"
               dense
@@ -145,7 +153,6 @@ watchEffect(() => {
               input-debounce="0"
               hide-selected
               fill-input
-              v-model:input-value="leftInput"
               @filter="onLeftFilter"
               @focus="onLeftFocus"
               @blur="onLeftBlur"
@@ -172,14 +179,20 @@ watchEffect(() => {
       </div>
 
       <div class="col-12 col-md-6">
-        <QCard flat bordered>
+        <QCard
+          flat
+          bordered
+        >
           <QCardSection>
-            <div class="text-subtitle1 text-weight-bold">Lado derecho</div>
+            <div class="text-subtitle1 text-weight-bold">
+              Lado derecho
+            </div>
           </QCardSection>
           <QSeparator />
           <QCardSection>
             <QSelect
               v-model="scoreboardStore.scoreboard.rightPlayerId"
+              v-model:input-value="rightInput"
               :options="rightPlayerOptions"
               label="Jugador"
               dense
@@ -190,7 +203,6 @@ watchEffect(() => {
               input-debounce="0"
               hide-selected
               fill-input
-              v-model:input-value="rightInput"
               @filter="onRightFilter"
               @focus="onRightFocus"
               @blur="onRightBlur"
@@ -216,7 +228,6 @@ watchEffect(() => {
         </QCard>
       </div>
     </div>
-
   </div>
 </template>
 

src/dashboard/example/main.vue

@@ -41,7 +41,7 @@ const logoUrl = new URL('./image.png', import.meta.url).href;
             :src="logoUrl"
             alt="Logo"
             class="sidebar-logo"
-          />
+          >
           <div class="q-ml-sm">
             <div class="text-subtitle1 text-weight-bold">
               Control Panel

src/dashboard/example/views/About.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 
+defineOptions({ name: 'AboutView' });
+
 useHead({ title: 'About' });
 </script>
 
 <template>
   <QPage class="q-pa-lg">
-    <div class="text-h4 q-mb-md">About</div>
+    <div class="text-h4 q-mb-md">
+      About
+    </div>
     <div class="text-body1">
       Información del bundle y enlaces relevantes.
     </div>

src/dashboard/example/views/Dashboard.vue

@@ -3,6 +3,8 @@ import { useHead } from '@unhead/vue';
 import BracketPanel from '../components/BracketPanel.vue';
 import ScoreboardPanel from '../components/ScoreboardPanel.vue';
 
+defineOptions({ name: 'DashboardView' });
+
 useHead({ title: 'Dashboard' });
 </script>
 
@@ -10,14 +12,20 @@ useHead({ title: 'Dashboard' });
   <QPage class="q-pa-lg">
     <div class="row q-col-gutter-lg items-start dashboard-panels q-mt-lg">
       <div class="col-12 col-lg-6">
-        <QCard bordered class="dashboard-panel-card">
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
           <QCardSection class="dashboard-panel-content">
             <ScoreboardPanel />
           </QCardSection>
         </QCard>
       </div>
       <div class="col-12 col-lg-6">
-        <QCard bordered class="dashboard-panel-card">
+        <QCard
+          bordered
+          class="dashboard-panel-card"
+        >
           <QCardSection class="dashboard-panel-content">
             <BracketPanel />
           </QCardSection>

src/dashboard/example/views/Graphics.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useHead } from '@unhead/vue';
+
+defineOptions({ name: 'GraphicsView' });
+
 import bundlePackage from '../../../../package.json';
 
 type GraphicConfig = {
@@ -64,12 +67,17 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
 
 <template>
   <QPage class="q-pa-lg">
-    <div class="text-h4 q-mb-md">Graphics</div>
+    <div class="text-h4 q-mb-md">
+      Graphics
+    </div>
     <div class="text-body1 q-mb-lg">
       Controles y estado de gráficos del bundle.
     </div>
 
-    <div v-if="graphics.length === 0" class="text-body2 text-grey-5">
+    <div
+      v-if="graphics.length === 0"
+      class="text-body2 text-grey-5"
+    >
       No hay gráficos configurados en el bundle.
     </div>
 
@@ -79,7 +87,10 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
         :key="graphic.file"
         class="col-12 col-md-6"
       >
-        <QCard bordered class="bg-grey-10">
+        <QCard
+          bordered
+          class="bg-grey-10"
+        >
           <QCardSection class="row items-center justify-between">
             <div>
               <div class="text-h6">
@@ -89,7 +100,10 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
                 {{ graphic.file }}
               </div>
             </div>
-            <QBadge color="primary" outline>
+            <QBadge
+              color="primary"
+              outline
+            >
               {{ graphic.width ?? 1920 }}x{{ graphic.height ?? 1080 }}
             </QBadge>
           </QCardSection>
@@ -97,7 +111,9 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
           <QSeparator />
 
           <QCardSection>
-            <div class="text-caption text-grey-5 q-mb-xs">URL</div>
+            <div class="text-caption text-grey-5 q-mb-xs">
+              URL
+            </div>
             <div class="text-body2 text-mono q-mb-md">
               {{ buildGraphicUrl(graphic) }}
             </div>

src/dashboard/example/views/Players.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
+
+defineOptions({ name: 'PlayersView' });
+
 import type { QTableColumn } from 'quasar';
 import { computed, reactive, ref, watch } from 'vue';
 import type { Schemas } from '../../../types';
@@ -143,7 +146,9 @@ const handleImport = async (event: Event) => {
 <template>
   <QPage class="q-pa-lg players-page">
     <div class="row items-center q-mb-md">
-      <div class="text-h4">Players</div>
+      <div class="text-h4">
+        Players
+      </div>
       <QSpace />
       <QBtn
         color="primary"
@@ -259,11 +264,11 @@ const handleImport = async (event: Event) => {
                   input-debounce="0"
                   hide-selected
                   fill-input
-                  @filter="filterCountries"
                   clearable
                   label="Country"
                   dense
                   outlined
+                  @filter="filterCountries"
                 />
               </div>
               <div class="col-12">

src/dashboard/example/views/Settings.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 
+defineOptions({ name: 'SettingsView' });
+
 useHead({ title: 'Settings' });
 </script>
 
 <template>
   <QPage class="q-pa-lg">
-    <div class="text-h4 q-mb-md">Settings</div>
+    <div class="text-h4 q-mb-md">
+      Settings
+    </div>
     <div class="text-body1">
       Configuración del dashboard y del bundle.
     </div>

src/graphics/scoreboard/main.vue

@@ -89,11 +89,19 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
 <template>
   <div id="scoreboard">
     <div id="back-panel-wrapper">
-      <img id="back-panel" src="./img/back.svg" alt="" />
+      <img
+        id="back-panel"
+        src="./img/back.svg"
+        alt=""
+      >
     </div>
 
     <div id="main-panel-wrapper">
-      <img id="main-panel" src="./img/main.svg" alt="" />
+      <img
+        id="main-panel"
+        src="./img/main.svg"
+        alt=""
+      >
 
       <div id="progress-text-wrapper">
         <div id="progress-text">
@@ -101,23 +109,41 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
         </div>
       </div>
 
-      <div id="p1-games-text-wrapper" class="games-text-wrapper">
+      <div
+        id="p1-games-text-wrapper"
+        class="games-text-wrapper"
+      >
         <div class="games-text">
           {{ scoreboard.leftScore }}
         </div>
       </div>
 
-      <div id="p2-games-text-wrapper" class="games-text-wrapper">
+      <div
+        id="p2-games-text-wrapper"
+        class="games-text-wrapper"
+      >
         <div class="games-text">
           {{ scoreboard.rightScore }}
         </div>
       </div>
 
-      <div id="p1-name-wrapper" class="name-wrapper">
+      <div
-        <img src="./img/name1.svg" alt="" />
+        id="p1-name-wrapper"
+        class="name-wrapper"
+      >
+        <img
+          src="./img/name1.svg"
+          alt=""
+        >
 
-        <div id="p1-name-text-wrapper" class="name-text-wrapper">
+        <div
-          <span v-if="leftTeam" class="team-text">
+          id="p1-name-text-wrapper"
+          class="name-text-wrapper"
+        >
+          <span
+            v-if="leftTeam"
+            class="team-text"
+          >
             {{ leftTeam }}
           </span>
           <span class="gamertag-text">
@@ -131,16 +157,32 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
           class="flag-wrapper"
         >
           <div class="flag-mask">
-            <img class="flag" :src="leftFlagUrl" alt="" />
+            <img
+              class="flag"
+              :src="leftFlagUrl"
+              alt=""
+            >
           </div>
         </div>
       </div>
 
-      <div id="p2-name-wrapper" class="name-wrapper">
+      <div
-        <img src="./img/name2.svg" alt="" />
+        id="p2-name-wrapper"
+        class="name-wrapper"
+      >
+        <img
+          src="./img/name2.svg"
+          alt=""
+        >
 
-        <div id="p2-name-text-wrapper" class="name-text-wrapper">
+        <div
-          <span v-if="rightTeam" class="team-text">
+          id="p2-name-text-wrapper"
+          class="name-text-wrapper"
+        >
+          <span
+            v-if="rightTeam"
+            class="team-text"
+          >
             {{ rightTeam }}
           </span>
           <span class="gamertag-text">
@@ -154,7 +196,11 @@ const roundText = computed(() => scoreboard.value.round || 'Round');
           class="flag-wrapper"
         >
           <div class="flag-mask">
-            <img class="flag" :src="rightFlagUrl" alt="" />
+            <img
+              class="flag"
+              :src="rightFlagUrl"
+              alt=""
+            >
           </div>
         </div>
       </div>