From 01c0996c7110453e08b64ce46d3826962e99333f Mon Sep 17 00:00:00 2001
From: Ahmed Darrazi <ahmeddarrazi@adsmac.local>
Date: Sat, 3 Jan 2026 05:15:04 +0100
Subject: [PATCH] fix(vue): add lang attrs, fix ESLint issues in Vue components

---
 resources/js/components/GridCanvas.vue       |  6 +++---
 resources/js/components/SelectionSidebar.vue |  4 +++-
 resources/js/components/UploadModal.vue      | 13 +++++++------
 resources/js/pages/PublicGrid/Index.vue      |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/GridCanvas.vue b/resources/js/components/GridCanvas.vue
index bd334b4..c6b8549 100644
--- a/resources/js/components/GridCanvas.vue
+++ b/resources/js/components/GridCanvas.vue
@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 
 const props = defineProps({
@@ -23,7 +23,7 @@ const height = 800;
 
   let isPanning = false;
   let start = { x: 0, y: 0 };
-  let offset = { x: 0, y: 0 };
+  const offset = { x: 0, y: 0 };
   let scale = 1;
   let pinchActive = false;
   let lastDistance = 0;
@@ -186,7 +186,7 @@ onMounted(() => {
     drawGrid();
   });
 
-  c.addEventListener('pointerup', (e) => {
+  c.addEventListener('pointerup', () => {
     if (selecting && selection) {
       // finalize selection and emit one last time
       const relX = selection.x - offset.x;
diff --git a/resources/js/components/SelectionSidebar.vue b/resources/js/components/SelectionSidebar.vue
index 99e48c0..2a8e70a 100644
--- a/resources/js/components/SelectionSidebar.vue
+++ b/resources/js/components/SelectionSidebar.vue
@@ -9,7 +9,9 @@
   </aside>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { computed } from 'vue';
+
 const props = defineProps({
   cellCount: { type: Number, default: 0 },
   pricePerCell: { type: Number, default: 0 },
diff --git a/resources/js/components/UploadModal.vue b/resources/js/components/UploadModal.vue
index 1ab15a0..362332d 100644
--- a/resources/js/components/UploadModal.vue
+++ b/resources/js/components/UploadModal.vue
@@ -14,17 +14,18 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
-const props = defineProps({ selection: { type: Object, default: null } });
-const preview = ref(null);
+defineProps({ selection: { type: Object, default: null } });
+const preview = ref<string | null>(null);
 
-function onFile(e) {
-  const file = e.target.files && e.target.files[0];
+function onFile(e: Event) {
+  const input = e.target as HTMLInputElement | null;
+  const file = input && input.files ? input.files[0] : null;
   if (!file) return;
   const reader = new FileReader();
   reader.onload = (ev) => {
-    preview.value = ev.target.result;
+    preview.value = ev.target && (ev.target as FileReader).result as string | null;
   };
   reader.readAsDataURL(file);
 }
diff --git a/resources/js/pages/PublicGrid/Index.vue b/resources/js/pages/PublicGrid/Index.vue
index 3caf067..b068cf7 100644
--- a/resources/js/pages/PublicGrid/Index.vue
+++ b/resources/js/pages/PublicGrid/Index.vue
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import GridCanvas from '@/components/GridCanvas.vue';
 import SelectionSidebar from '@/components/SelectionSidebar.vue';