Lazy loading de componentes y corregir warnings ESLint

Author: runer0101

src/App.vue

@@ -1,11 +1,12 @@
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
-import SimplexInput from './components/SimplexInput.vue'
-import SimplexSolution from './components/SimplexSolution.vue'
-import TransporteInput from './components/TransporteInput.vue'
-import CompararTodos from './components/CompararTodos.vue'
+import { ref, onMounted, onUnmounted, nextTick, watch, defineAsyncComponent } from 'vue'
 import { vRipple } from './directives/ripple.js'
 
+const SimplexInput = defineAsyncComponent(() => import('./components/SimplexInput.vue'))
+const SimplexSolution = defineAsyncComponent(() => import('./components/SimplexSolution.vue'))
+const TransporteInput = defineAsyncComponent(() => import('./components/TransporteInput.vue'))
+const CompararTodos = defineAsyncComponent(() => import('./components/CompararTodos.vue'))
+
 // ===== ESTADO REACTIVO =====
 const numVariables = ref(2)
 const numConstraints = ref(2)
@@ -142,10 +143,10 @@ watch(currentView, (newVal) => {
             </div>
             <button
               v-ripple
-              @click="startSolving('simplex')"
               class="btn-method btn-simplex"
               aria-label="Resolver con Método Simplex"
               :aria-busy="currentView === 'simplex'"
+              @click="startSolving('simplex')"
             >
               Resolver con Simplex
             </button>
@@ -167,9 +168,9 @@ watch(currentView, (newVal) => {
             </div>
             <button
               v-ripple
-              @click="startSolving('grafico')"
               class="btn-method btn-graphic"
               aria-label="Resolver con Método Gráfico"
+              @click="startSolving('grafico')"
             >
               Resolver con Gráfico
             </button>
@@ -191,9 +192,9 @@ watch(currentView, (newVal) => {
             </div>
             <button
               v-ripple
-              @click="startSolving('penalizacion')"
               class="btn-method btn-penalty"
               aria-label="Resolver con Métodos de Transporte"
+              @click="startSolving('penalizacion')"
             >
               Resolver Transporte
             </button>
@@ -209,9 +210,9 @@ watch(currentView, (newVal) => {
             </div>
             <button
               v-ripple
-              @click="startSolving('todos')"
               class="btn-compare-all"
               aria-label="Comparar todos los métodos disponibles"
+              @click="startSolving('todos')"
             >
               Comparar Todos los Métodos
             </button>
@@ -280,21 +281,21 @@ watch(currentView, (newVal) => {
       <section v-else class="method-view" role="region" aria-label="Resolución de problemas">
         <!-- Navigation Bar -->
         <nav class="method-navigation" role="navigation" aria-label="Métodos disponibles">
-          <button 
-            @click="backToWelcome" 
+          <button
             class="nav-back-btn"
             aria-label="Volver a inicio"
+            @click="backToWelcome"
           >
             ← Inicio
           </button>
 
           <!-- Mobile Hamburger Button -->
-          <button 
-            class="hamburger-btn" 
-            @click="mobileMenuOpen = !mobileMenuOpen" 
+          <button
+            class="hamburger-btn"
             :class="{ open: mobileMenuOpen }"
             :aria-expanded="mobileMenuOpen"
             aria-label="Menú de métodos"
+            @click="mobileMenuOpen = !mobileMenuOpen"
           >
             <span class="hamburger-line" aria-hidden="true"></span>
             <span class="hamburger-line" aria-hidden="true"></span>
@@ -304,42 +305,42 @@ watch(currentView, (newVal) => {
           <!-- Method Tabs -->
           <div class="method-tabs" :class="{ 'mobile-open': mobileMenuOpen }" role="tablist">
             <button
-              @click="goToMethod('simplex')"
-              :class="{ active: currentView === 'simplex' }"
               class="method-tab"
+              :class="{ active: currentView === 'simplex' }"
               role="tab"
               :aria-selected="currentView === 'simplex'"
               aria-label="Método Simplex"
+              @click="goToMethod('simplex')"
             >
               Método Simplex
             </button>
             <button
-              @click="goToMethod('grafico')"
-              :class="{ active: currentView === 'grafico' }"
               class="method-tab"
+              :class="{ active: currentView === 'grafico' }"
               role="tab"
               :aria-selected="currentView === 'grafico'"
               aria-label="Método Gráfico"
+              @click="goToMethod('grafico')"
             >
               Método Gráfico
             </button>
             <button
-              @click="goToMethod('penalizacion')"
-              :class="{ active: currentView === 'penalizacion' }"
               class="method-tab"
+              :class="{ active: currentView === 'penalizacion' }"
               role="tab"
               :aria-selected="currentView === 'penalizacion'"
               aria-label="Métodos de Transporte"
+              @click="goToMethod('penalizacion')"
             >
               Métodos de Transporte
             </button>
             <button
-              @click="goToMethod('todos')"
-              :class="{ active: currentView === 'todos' }"
               class="method-tab method-tab-all"
+              :class="{ active: currentView === 'todos' }"
               role="tab"
               :aria-selected="currentView === 'todos'"
               aria-label="Comparar todos los métodos"
+              @click="goToMethod('todos')"
             >
               Comparar Todos
             </button>
@@ -358,10 +359,10 @@ watch(currentView, (newVal) => {
           <SimplexInput
             v-else
             :key="currentView"
-            v-model:numVariables="numVariables"
-            v-model:numConstraints="numConstraints"
-            v-model:problemType="problemType"
-            :selectedMethod="selectedMethod"
+            v-model:num-variables="numVariables"
+            v-model:num-constraints="numConstraints"
+            v-model:problem-type="problemType"
+            :selected-method="selectedMethod"
             @solve="handleSolve"
           />
         </div>
@@ -370,7 +371,7 @@ watch(currentView, (newVal) => {
       <!-- Sección de Solución -->
       <section v-if="currentView === 'solution' && problemData" class="solution-section" role="region" aria-label="Solución del problema">
         <SimplexSolution
-          :problemData="problemData"
+          :problem-data="problemData"
           @reset="handleNewProblem"
         />
       </section>

src/components/CompararTodos.vue

@@ -531,12 +531,12 @@ const esProblemaTransporte = computed(() => {
               <label for="num-vars">Número de Variables:</label>
               <input
                 id="num-vars"
-                type="number"
                 v-model.number="numVariables"
-                @input="initializeMatrices"
+                type="number"
                 min="2"
                 max="10"
                 class="form-input"
+                @input="initializeMatrices"
               >
               <small>Mínimo 2, Máximo 10</small>
             </div>
@@ -545,12 +545,12 @@ const esProblemaTransporte = computed(() => {
               <label for="num-constraints">Número de Restricciones:</label>
               <input
                 id="num-constraints"
-                type="number"
                 v-model.number="numConstraints"
-                @input="initializeMatrices"
+                type="number"
                 min="1"
                 max="10"
                 class="form-input"
+                @input="initializeMatrices"
               >
               <small>Mínimo 1, Máximo 10</small>
             </div>
@@ -728,13 +728,13 @@ const esProblemaTransporte = computed(() => {
 
       <!-- Botones de acción -->
       <div class="action-buttons">
-        <button @click="loadExample" class="btn btn-secondary btn-example">
+        <button class="btn btn-secondary btn-example" @click="loadExample">
           Cargar Ejemplo Simple (Simplex + Gráfico)
         </button>
-        <button @click="loadTransportExample" class="btn btn-secondary btn-example">
+        <button class="btn btn-secondary btn-example" @click="loadTransportExample">
           Cargar Ejemplo Transporte
         </button>
-        <button @click="compareAllMethods" class="btn btn-secondary btn-solve-main">
+        <button class="btn btn-secondary btn-solve-main" @click="compareAllMethods">
           Resolver y Comparar Métodos
         </button>
       </div>
@@ -879,7 +879,8 @@ const esProblemaTransporte = computed(() => {
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="method in validationResults.transportComparison.methods" :key="method.name"
+                <tr
+v-for="method in validationResults.transportComparison.methods" :key="method.name"
                     :class="{ 'best-transport-row': method.name === validationResults.transportComparison.best.method }">
                   <td>
                     {{ method.name }}
@@ -919,7 +920,7 @@ const esProblemaTransporte = computed(() => {
 
       <!-- Botón para nuevo problema al final -->
       <div class="final-actions">
-        <button @click="resetComparison" class="btn btn-secondary btn-new-problem">
+        <button class="btn btn-secondary btn-new-problem" @click="resetComparison">
           Nuevo Problema
         </button>
       </div>

src/components/MethodExplanation.vue

@@ -41,16 +41,16 @@ const headerDescription = computed(() => {
 
     <div class="explanation-nav">
       <button
-        @click="activeSection = 'intro'"
         :class="{ active: activeSection === 'intro' }"
         class="nav-btn"
+        @click="activeSection = 'intro'"
       >
         Introducción
       </button>
       <button
-        @click="activeSection = 'steps'"
         :class="{ active: activeSection === 'steps' }"
         class="nav-btn"
+        @click="activeSection = 'steps'"
       >
         Pasos del Algoritmo
       </button>

src/components/SimplexInput.vue

@@ -111,23 +111,23 @@ initializeMatrices()
     <!-- Sistema de Pestañas -->
     <div class="tabs-container">
       <button
-        @click="activeTab = 'calculadora'"
         :class="{ active: activeTab === 'calculadora' }"
         class="tab-btn"
+        @click="activeTab = 'calculadora'"
       >
         Calculadora
       </button>
       <button
-        @click="activeTab = 'pasoapaso'"
         :class="{ active: activeTab === 'pasoapaso' }"
         class="tab-btn"
+        @click="activeTab = 'pasoapaso'"
       >
         Paso a Paso
       </button>
       <button
-        @click="activeTab = 'teoria'"
         :class="{ active: activeTab === 'teoria' }"
         class="tab-btn"
+        @click="activeTab = 'teoria'"
       >
         Teoría
       </button>
@@ -196,7 +196,7 @@ initializeMatrices()
           </div>
         </div>
 
-        <button @click="activeTab = 'calculadora'" class="btn-go-calculator">
+        <button class="btn-go-calculator" @click="activeTab = 'calculadora'">
           Ir a la Calculadora
         </button>
       </div>
@@ -205,7 +205,7 @@ initializeMatrices()
     <!-- Contenido: Teoría -->
     <div v-else-if="activeTab === 'teoria'" class="tab-content">
       <div class="method-explanation-section">
-        <MethodExplanation :selectedMethod="selectedMethod" />
+        <MethodExplanation :selected-method="selectedMethod" />
       </div>
     </div>
 
@@ -220,8 +220,8 @@ initializeMatrices()
           <label for="num-vars">Número de Variables:</label>
           <input
             id="num-vars"
-            type="number"
             v-model.number="numVariables"
+            type="number"
             min="1"
             max="10"
             class="form-input"
@@ -233,8 +233,8 @@ initializeMatrices()
           <label for="num-constraints">Número de Restricciones:</label>
           <input
             id="num-constraints"
-            type="number"
             v-model.number="numConstraints"
+            type="number"
             min="1"
             max="10"
             class="form-input"
@@ -284,7 +284,7 @@ initializeMatrices()
       </div>
 
       <div class="examples-section">
-        <button @click="showExamples = !showExamples" class="btn btn-secondary">
+        <button class="btn btn-secondary" @click="showExamples = !showExamples">
           {{ showExamples ? 'Ocultar Ejemplos' : 'Ver Ejemplos' }}
         </button>
 
@@ -366,7 +366,7 @@ initializeMatrices()
     </div>
 
     <div class="action-buttons">
-      <button @click="handleSolve" class="btn btn-secondary btn-solve-large">
+      <button class="btn btn-secondary btn-solve-large" @click="handleSolve">
         Resolver Problema
       </button>
     </div>