feat: eslint update

app/components/app/nav/nav-desktop.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+// Emits
+const emits = defineEmits<{
+  toggleLocaleModal: []
+  toggleSearchMenu: []
+  toggleCartDrawer: []
+}>()
+
 // Links
 const navLinksLeft = [
   { label: 'Shop', path: '/collections/latest' },
@@ -19,24 +26,17 @@ const countryCode = computed(() => shopStore.buyerCountryCode)
 const currencySymbol = computed(() => shopStore.buyerCurrencySymbol)
 const cartTotalItems = computed(() => cartStore.lineItemCount)
 
-// Emits
-const emit = defineEmits<{
-  toggleLocaleModal: []
-  toggleSearchMenu: []
-  toggleCartDrawer: []
-}>()
-
 // Emit events
 const toggleLocaleModal = () => {
-  emit('toggleLocaleModal')
+  emits('toggleLocaleModal')
 }
 
 const toggleSearchMenu = () => {
-  emit('toggleSearchMenu')
+  emits('toggleSearchMenu')
 }
 
 const toggleCartDrawer = () => {
-  emit('toggleCartDrawer')
+  emits('toggleCartDrawer')
 }
 </script>
 

app/components/app/nav/nav-mobile.vue

@@ -1,30 +1,30 @@
 <script setup lang="ts">
 import { useCartStore } from '@/stores/cart'
 
-// Stores
-const cartStore = useCartStore()
-
-// Computed
-const cartTotalItems = computed(() => cartStore.lineItemCount)
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   toggleMobileMenu: []
   toggleSearchMenu: []
   toggleCartDrawer: []
 }>()
 
+// Stores
+const cartStore = useCartStore()
+
+// Computed
+const cartTotalItems = computed(() => cartStore.lineItemCount)
+
 // Emit events
 const toggleMobileMenu = () => {
-  emit('toggleMobileMenu')
+  emits('toggleMobileMenu')
 }
 
 const toggleSearchMenu = () => {
-  emit('toggleSearchMenu')
+  emits('toggleSearchMenu')
 }
 
 const toggleCartDrawer = () => {
-  emit('toggleCartDrawer')
+  emits('toggleCartDrawer')
 }
 </script>
 

app/components/shopify/filter/filter-menu-desktop.vue

@@ -24,35 +24,35 @@ const props = defineProps<{
   activeFilterCount: number
 }>()
 
-// Route
-const route = useRoute()
-
-// Stores
-const appStore = useAppStore()
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   closeFilter: []
   setSortOption: [sortValue: string | null]
   setFilterOption: [filterName: string, filterValue: string]
   clearAllFilters: []
 }>()
 
+// Route
+const route = useRoute()
+
+// Stores
+const appStore = useAppStore()
+
 // Emit events
 const closeFilter = () => {
-  emit('closeFilter')
+  emits('closeFilter')
 }
 
 const setSortOption = (sortValue: string | null) => {
-  emit('setSortOption', sortValue)
+  emits('setSortOption', sortValue)
 }
 
 const setFilterOption = (filterName: string, filterValue: string) => {
-  emit('setFilterOption', filterName, filterValue)
+  emits('setFilterOption', filterName, filterValue)
 }
 
 const clearAllFilters = () => {
-  emit('clearAllFilters')
+  emits('clearAllFilters')
 }
 </script>
 
@@ -89,7 +89,7 @@ const clearAllFilters = () => {
             </h3>
             <div class="flex flex-col">
               <button
-                v-for="option in props.sortOptions"
+                v-for="(option, index) in props.sortOptions"
                 :key="index"
                 :class="{ underline: route.query.sort === option.value || (option.value === null && !route.query.sort) }"
                 class="max-w-fit normal-case decoration-dotted decoration-1 underline-offset-[3px] hover:underline"

app/components/shopify/filter/filter-menu-mobile.vue

@@ -24,35 +24,35 @@ const props = defineProps<{
   activeFilterCount: number
 }>()
 
-// Route
-const route = useRoute()
-
-// Stores
-const appStore = useAppStore()
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   closeFilter: []
   setSortOption: [sortValue: string | null]
   setFilterOption: [filterName: string, filterValue: string]
   clearAllFilters: []
 }>()
 
+// Route
+const route = useRoute()
+
+// Stores
+const appStore = useAppStore()
+
 // Emit events
 const closeFilter = () => {
-  emit('closeFilter')
+  emits('closeFilter')
 }
 
 const setSortOption = (sortValue: string | null) => {
-  emit('setSortOption', sortValue)
+  emits('setSortOption', sortValue)
 }
 
 const setFilterOption = (filterName: string, filterValue: string) => {
-  emit('setFilterOption', filterName, filterValue)
+  emits('setFilterOption', filterName, filterValue)
 }
 
 const clearAllFilters = () => {
-  emit('clearAllFilters')
+  emits('clearAllFilters')
 }
 </script>
 

app/components/shopify/product/form/form-size-options.vue

@@ -10,6 +10,11 @@ const props = defineProps<{
   selectedSize: string
 }>()
 
+// Emits
+const emits = defineEmits<{
+  setSizeOption: [size: string]
+}>()
+
 // Computed
 const sizeOption = computed(() => getSizeOption(props.product.options))
 
@@ -25,14 +30,9 @@ const productSizes = computed(() => {
   }))
 })
 
-// Emits
-const emit = defineEmits<{
-  setSizeOption: [size: string]
-}>()
-
 // Emit events
 const setSizeOption = (size: string) => {
-  emit('setSizeOption', size)
+  emits('setSizeOption', size)
 }
 </script>
 

app/components/shopify/product/product-media-gallery.vue

@@ -17,7 +17,7 @@ const mediaIndex = ref<number>(0)
 // Actions
 const toggleLightbox = (index: number) => {
   mediaIndex.value = index
-  appStore.toggle('mediaLightbox')
+  appStore.toggle('mediaLightbox', true)
 }
 
 // Watchers

app/components/shopify/product/product-media-lightbox.vue

@@ -17,25 +17,24 @@ const closeLightbox = () => {
   appStore.toggle('mediaLightbox', false)
 }
 
-// State
-const mediaRefs = ref<HTMLElement[]>([])
-
-watchEffect(() => {
-  const selectedMediaItem = mediaRefs.value[props.mediaIndex]
-  selectedMediaItem?.scrollIntoView()
-})
+// Refs
+const mediaRefs = useTemplateRef('mediaRefs')
 
 // Watchers
 const { escape } = useMagicKeys()
 
+watch(
+  () => props.mediaIndex,
+  async (index) => {
+    await nextTick()
+    const el = mediaRefs.value?.[index]
+    el?.scrollIntoView()
+  },
+)
+
 if (escape) {
   watch(escape, closeLightbox)
 }
-
-// Cleanup
-onBeforeUnmount(() => {
-  closeLightbox()
-})
 </script>
 
 <template>
@@ -55,8 +54,8 @@ onBeforeUnmount(() => {
     <div class="flex flex-col overflow-auto size-full">
       <div
         v-for="(media, index) in productMedia"
-        ref="mediaRefs"
         :key="media.id"
+        ref="mediaRefs"
         class="aspect-square cursor-zoom-out"
         @click="closeLightbox"
       >

app/components/shopify/search/search-menu-desktop.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import type { ProductFragment } from '@@/types/shopify-storefront'
 
-// Model bindings
-const searchQuery = defineModel<string>()
-
 // Props
 const props = defineProps<{
   products: ProductFragment[]
 }>()
 
+// Emits
+const emits = defineEmits<{
+  submitQuery: []
+  closeSearch: []
+}>()
+
+// Model bindings
+const searchQuery = defineModel<string>()
+
 // Stores
 const appStore = useAppStore()
 
@@ -19,25 +25,20 @@ const defaulSearchLinks = [
   { label: 'Womens Pants', path: '/' },
 ]
 
-// State
-const input = ref<HTMLInputElement | null>(null)
-
-// Emits
-const emit = defineEmits<{
-  submitQuery: []
-  closeSearch: []
-}>()
-
+// Emit events
 const onKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
-    emit('submitQuery')
+    emits('submitQuery')
   }
 }
 
 const closeSearch = () => {
-  emit('closeSearch')
+  emits('closeSearch')
 }
 
+// Refs
+const input = useTemplateRef('inputRef')
+
 // Watchers
 watch(
   () => appStore.searchMenu,
@@ -69,7 +70,7 @@ watch(
       <div class="flex flex-col gap-6 w-full px-6 pt-16 pb-10 mx-auto xl:max-w-6xl">
         <div class="relative w-full">
           <input
-            ref="input"
+            ref="inputRef"
             v-model="searchQuery"
             type="text"
             name="searchInput"

app/components/shopify/search/search-menu-mobile.vue

@@ -1,37 +1,37 @@
 <script setup lang="ts">
 import type { ProductFragment } from '@@/types/shopify-storefront'
 
-// Model bindings
-const searchQuery = defineModel<string>()
-
 // Props
 const props = defineProps<{
   products: ProductFragment[]
 }>()
 
-// Stores
-const appStore = useAppStore()
-
-// State
-const input = ref<HTMLInputElement | null>(null)
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   submitQuery: []
   closeSearch: []
 }>()
 
+// Model bindings
+const searchQuery = defineModel<string>()
+
+// Stores
+const appStore = useAppStore()
+
 // Emit events
 const onKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
-    emit('submitQuery')
+    emits('submitQuery')
   }
 }
 
 const closeSearch = () => {
-  emit('closeSearch')
+  emits('closeSearch')
 }
 
+// Refs
+const input = useTemplateRef('inputRef')
+
 // Watchers
 watch(
   () => appStore.searchMenu,
@@ -62,7 +62,7 @@ watch(
       <div class="flex flex-col gap-10 size-full px-5">
         <div class="relative flex">
           <input
-            ref="input"
+            ref="inputRef"
             v-model="searchQuery"
             type="text"
             name="searchInput"