Re-enable key Vue lint rules and fix resulting violations

Co-Authored-By: Codex <codex@openai.com>

src/components/Compare/SidebarStates.vue

@@ -112,9 +112,9 @@
         <div class="pt-1 pb-4 border-b border-neutral-300">
           <p class="h2">Log Timeframe</p>
           <div class="space-y-2 text-sm text-center">
-            <span class="block">{{ primaryStatData.started_at }}&nbsp</span>
+            <span class="block">{{ primaryStatData.started_at }}&nbsp;</span>
             <span class="block">~</span>
-            <span class="block">&nbsp{{ primaryStatData.completed_at }}</span>
+            <span class="block">&nbsp;{{ primaryStatData.completed_at }}</span>
           </div>
         </div>
         <!-- Case Duration -->
@@ -250,9 +250,11 @@
         <div class="pt-1 pb-4 border-b border-neutral-300">
           <p class="h2">Log Timeframe</p>
           <div class="space-y-2 text-sm text-center">
-            <span class="block">{{ secondaryStatData.started_at }}&nbsp</span>
+            <span class="block">{{ secondaryStatData.started_at }}&nbsp;</span>
             <span class="block">~</span>
-            <span class="block">&nbsp{{ secondaryStatData.completed_at }}</span>
+            <span class="block"
+              >&nbsp;{{ secondaryStatData.completed_at }}</span
+            >
           </div>
         </div>
         <!-- Case Duration -->

src/components/Discover/Conformance/ConformanceResults.vue

@@ -75,7 +75,7 @@
             ><span class="text-cfm-primary">{{
               data.charts.cases.conforming
             }}</span
-            >&nbsp/&nbsp{{ data.charts.cases.total }}</span
+            >&nbsp;/&nbsp;{{ data.charts.cases.total }}</span
           >
         </div>
         <Chart
@@ -253,9 +253,7 @@
               data.timeTrend.chart === null
             "
           ></div>
-          <p v-else="data.loops === null" class="h2 text-base">
-            Non-conformance Issues
-          </p>
+          <p v-else class="h2 text-base">Non-conformance Issues</p>
         </div>
         <div
           class="flex w-full"
@@ -285,7 +283,7 @@
                 ><span class="text-cfm-secondary">{{
                   data.timeTrend.not_conforming
                 }}</span
-                >&nbsp/&nbsp{{ data.timeTrend.total }}</span
+                >&nbsp;/&nbsp;{{ data.timeTrend.total }}</span
               >
             </p>
             <Chart

src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue

@@ -83,7 +83,7 @@
                   </div>
                   <span
                     class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger"
-                    @click.stop.native="moveSeqItem(index, element)"
+                    @click.stop="moveSeqItem(index, element)"
                     >close</span
                   >
                 </div>

src/components/Discover/Map/Filter/ActAndSeq.vue

@@ -4,7 +4,7 @@
     class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
   >
     <div class="flex justify-between items-center my-2 flex-wrap">
-      <p class="h2">Activity List&nbsp({{ data.length }})</p>
+      <p class="h2">Activity List&nbsp;({{ data.length }})</p>
     </div>
     <!-- Table -->
     <div
@@ -76,7 +76,7 @@
     class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm"
   >
     <p class="h2 border-b border-500 my-2">
-      Sequence&nbsp({{ listSeq.length }})
+      Sequence&nbsp;({{ listSeq.length }})
     </p>
     <!-- No Data -->
     <div
@@ -117,7 +117,7 @@
                 </div>
                 <span
                   class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger"
-                  @click.stop.native="moveSeqItem(index, element)"
+                  @click.stop="moveSeqItem(index, element)"
                   >close</span
                 >
               </div>

src/components/Discover/Map/Filter/ActOcc.vue

@@ -3,7 +3,7 @@
     class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
   >
     <div class="flex justify-between items-center my-2 flex-wrap">
-      <p class="h2">{{ tableTitle }}&nbsp({{ tableData.length }})</p>
+      <p class="h2">{{ tableTitle }}&nbsp;({{ tableData.length }})</p>
     </div>
     <!-- Table -->
     <div

src/components/Discover/Map/Filter/ActOccCase.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 h-full">
     <div class="flex justify-between items-center my-2">
-      <p class="h2">{{ tableTitle }}&nbsp({{ data.length }})</p>
+      <p class="h2">{{ tableTitle }}&nbsp;({{ data.length }})</p>
     </div>
     <!-- Table -->
     <div

src/components/Discover/StatusBar.vue

@@ -92,8 +92,8 @@
       <li class="bg-neutral-10 rounded p-3 w-full">
         <p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
         <div class="px-2 space-y-2 min-w-[140px] h-[40px]">
-          <span class="inline-block">{{ statData.started_at }}&nbsp</span>
-          <span class="inline-block">~&nbsp{{ statData.completed_at }}</span>
+          <span class="inline-block">{{ statData.started_at }}&nbsp;</span>
+          <span class="inline-block">~&nbsp;{{ statData.completed_at }}</span>
         </div>
       </li>
       <li class="bg-neutral-10 rounded p-3 w-full">

src/components/durationjs.vue

@@ -98,7 +98,7 @@ const props = defineProps({
   },
   size: {
     type: String,
-    default: false,
+    default: "md",
     required: true,
   },
   value: {