select : load first image

src/components/Selector.vue

@@ -52,25 +52,38 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { onBeforeMount, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useDialogStore } from '../stores/dialog';
 
-const { items, label, isCompareModeEnabled } = defineProps({
+// Props
+const { items, label, isCompareModeEnabled, index } = defineProps({
   label: String,
   items: Array,
   isCompareModeEnabled: {
     type: Boolean,
     default: false,
   },
+  index: Number,
 });
 
+// Emitters
 const emit = defineEmits(['update:selectedItems']);
 
+// Variables
 const currentValue = ref(null);
 
+// Stores
 const { activeTracks } = storeToRefs(useDialogStore());
 
+// Hooks
+onBeforeMount(() => {
+  if (index === 0) {
+    currentValue.value = items[0];
+  }
+});
+
+// Watchers
 watch(
   () => isCompareModeEnabled,
   (newValue) => {
@@ -94,6 +107,7 @@ watch(activeTracks, (newValue) => {
   }
 });
 
+// Functions
 function changeCurrent(item) {
   emit('update:selectedItems', item);
 }