single track selector working

src/components/Selector.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    id="selector-dropdown"
+    class="flex flex-col"
+    :style="'--image: url(\'' + current.cover + '\');'"
+  >
+    <label for="selector-select" class="text-sm">Choisir une {{ label }}</label>
+    <Select
+      id="selector-select"
+      v-model="current"
+      :options="items"
+      optionLabel="title"
+      class="font-serif"
+      data-icon="chevron-single-down"
+      checkmark
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const { items, label } = defineProps({
+  label: String,
+  items: Array,
+});
+
+const current = ref(items[0]);
+
+watch(current, (newValue) => {
+  changeCurrent(newValue);
+});
+
+const emit = defineEmits(['update:selectedItems']);
+
+function changeCurrent(item) {
+  emit('update:selectedItems', item);
+}
+
+function getFrontViewUrl(track) {
+  if (track.files.length > 1) {
+    return track.files[7].url;
+  } else {
+    return track.files[0].url;
+  }
+}
+</script>
+
+<style>
+#selector-dropdown {
+  --row-gap: 0;
+  align-items: flex-start;
+  position: relative;
+  background: var(--color-background);
+  border-radius: var(--rounded-lg);
+  height: 3.75rem;
+  width: 20rem;
+  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
+}
+#selector-dropdown::before {
+  content: '';
+  position: absolute;
+  left: var(--space-8);
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--rounded-md);
+  background-image: var(--image);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+[role='combobox'],
+#selector-select_list {
+  border: 1px solid var(--color-grey-200);
+}
+[role='combobox']:hover {
+  outline: 1px solid var(--color-grey-400);
+  border-color: var(--color-background);
+}
+[role='combobox'][aria-expanded='true'] {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-color: transparent;
+}
+#selector-select,
+[role='combobox'] {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.875rem var(--space-48) var(--space-8) var(--space-64);
+  cursor: pointer;
+}
+
+/* Icon */
+#selector-select svg {
+  display: none; /* Hide default component svg */
+}
+#selector-select[data-icon]::before {
+  --icon-color: var(--color-grey-700);
+  position: absolute;
+  right: var(--space-8);
+  top: 0.625rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.625rem;
+}
+#selector-dropdown label {
+  color: var(--color-grey-700);
+  letter-spacing: var(--tracking-wider);
+}
+
+/* Options */
+#selector-select_list {
+  margin-top: var(--space-4);
+  border-radius: var(--rounded-md);
+  background: var(--color-background);
+  box-shadow: var(--shadow);
+  padding: var(--space-8);
+}
+#selector-select_list > * {
+  font-family: var(--font-serif);
+  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48);
+  border-radius: var(--rounded-sm);
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  cursor: pointer;
+}
+#selector-select_list > * + * {
+  margin-top: var(--space-4);
+}
+#selector-select_list > *::before {
+  content: '';
+  position: absolute;
+  left: var(--space-8);
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--rounded-sm);
+  background-image: var(--image);
+  background-color: var(--color-grey-200);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+#selector-select_list > *:hover {
+  background-color: var(--color-grey-50);
+}
+#selector-select_list > *:focus,
+#selector-select_list > *:focus-visible,
+#selector-select_list > [data-p-focused='true'] {
+  outline: 2px solid var(--color-focus-ring);
+}
+/* Check */
+#selector-select_list > * > svg {
+  position: absolute;
+  left: 0.875rem;
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-grey-700);
+}
+</style>

src/components/project/virtual-sample/DynamicView.vue

@@ -2,18 +2,11 @@
   <div class="dialog__inner">
     <header class="tracks-header | flex">
       <div class="tracks">
-        <button
-          v-for="(track, index) in tracks"
-          class="btn btn--image"
-          :aria-pressed="activeTracks.includes(track) ? true : false"
-          :aria-controls="track.slug"
-          :id="track.slug"
-          :style="`--btn-image: url(${getFrontViewUrl(track)});`"
-          @click="selectTrack(track)"
-          :data-comments="getCommentsCount(track)"
-        >
-          <span>{{ track.title }}</span>
-        </button>
+        <Selector
+          :label="'piste'"
+          :items="tracks"
+          @update:selectedItems="selectTrack"
+        />
       </div>
       <button
         v-if="tracks.length > 1"
@@ -55,6 +48,7 @@ import { useVirtualSampleStore } from '../../../stores/virtualSample';
 import { useRoute } from 'vue-router';
 import Interactive360 from './Interactive360.vue';
 import SingleImage from './SingleImage.vue';
+import Selector from '../../Selector.vue';
 
 const route = useRoute();
 
@@ -122,14 +116,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-function getFrontViewUrl(track) {
-  if (track.files.length > 1) {
-    return track.files[7].url;
-  } else {
-    return track.files[0].url;
-  }
-}
-
 function selectTrack(track) {
   if (!isCompareModeEnabled.value) {
     activeTracks.value = [track];