chore: Update Gallery component to use computed hash property for id attribute

Author: ferdiunal

dist/js/field.js

@@ -24,7 +24,7 @@ export default {
     },
     computed: {
         hash() {
-            const hash = this.files.map((file) => file.id).join('_');
+            const hash = this.files.filter((_, i) => i < 3).map((file) => file.id).join('_');
 
             return `${this.id}-${hash}`
         },
@@ -33,7 +33,7 @@ export default {
         this.$nextTick(() => {
             if (!this.lightbox) {
                 this.lightbox = new PhotoSwipeLightbox({
-                    gallery: '#' + this.$props.id,
+                    gallery: '#' + this.hash,
                     showHideAnimationType: 'fade',
                     children: 'a',
                     pswpModule: PhotoSwipe,
@@ -137,7 +137,7 @@ export default {
     },
     methods: {
         onOpen() {
-            document.querySelectorAll(`#${this.hash} a`)?.[0].click();
+            document.querySelector(`#${this.hash} a`)?.click();
         }
     }
 }

resources/js/components/Gallery/Gallery.vue

@@ -1,7 +1,7 @@
 <template>
     <PanelItem :index="index" :field="field">
         <template v-slot:value>
-            <gallery :files="files" v-if="files.length" :id="`gallery-${resource.id.value}`" resourceView="detail" />
+            <gallery :files="files" v-if="files.length" :id="`gallery_${resource.id.value}`" resourceView="detail" />
             <span v-else>—</span>
         </template>
     </PanelItem>

resources/js/fields/DetailField.vue

@@ -1,6 +1,6 @@
 <template>
     <span>
-        <gallery :files="files" v-if="files.length" :id="`gallery-${resource.id.value}`" resourceView="index" />
+        <gallery :files="files" v-if="files.length" :id="`gallery_${resource.id.value}`" resourceView="index" />
         <span v-else>—</span>
     </span>
 </template>