designtopack/src/components/Selector.vue

<template>
  <div
    class="selector-dropdown | flex flex-col"
    :class="{ 'has-image': getFrontViewUrl(currentValue) }"
    :style="setImage()"
  >
    <label for="selector-select" class="text-sm">{{ label }}</label>

    <MultiSelect
      v-if="isCompareModeEnabled"
      id="selector-multiselect"
      v-model="currentValue"
      :options="items"
      optionLabel="title"
      :placeholder="'Sélectionnez une déclinaison'"
      :maxSelectedLabels="3"
      class="font-serif"
      :class="{ active: currentValue }"
      data-icon="chevron-single-down"
      checkmark
    >
      <template #option="slotProps">
        <img
          alt=""
          :src="getFrontViewUrl(slotProps.option)"
          width="28"
          height="28"
        />
        <p>{{ slotProps.option.title }}</p>
      </template>
    </MultiSelect>

    <Select
      v-else
      id="selector-select"
      v-model="currentValue"
      :options="items"
      optionLabel="title"
      class="font-serif"
      :class="{ active: currentValue }"
      data-icon="chevron-single-down"
      checkmark
    >
      <template #value="slotProps">
        <p v-if="currentValue">
          {{ currentValue.title }}
        </p>
        <p v-else>Sélectionnez une déclinaison</p>
      </template>

      <template #option="slotProps">
        <img
          alt=""
          :src="getFrontViewUrl(slotProps.option)"
          width="28"
          height="28"
        />
        <p>{{ slotProps.option.title }}</p>
      </template>
    </Select>
  </div>
</template>

<script setup>
import { onBeforeMount, ref, watch, nextTick } from 'vue';
import { storeToRefs } from 'pinia';
import { useDialogStore } from '../stores/dialog';

// Props
const { items, label, isCompareModeEnabled, index } = defineProps({
  label: String,
  items: Array,
  isCompareModeEnabled: { type: Boolean, default: false },
  index: Number,
});

// Local state
const currentValue = ref(null);
const syncing = ref(false); // empêche les réactions pendant les mises à jour programmatiques

// Store
const { activeTracks } = storeToRefs(useDialogStore());

// Utils
function isSame(a, b) {
  if (!a || !b) return false;
  if (a.slug && b.slug) return a.slug === b.slug;
  return a.title === b.title;
}

function toVariation(v) {
  if (!v) return null;
  return Array.isArray(v) ? v[v.length - 1] || null : v;
}

// Initialisation : remplir le 1er select localement ET initialiser le store
onBeforeMount(() => {
  syncing.value = true;

  if (index === 0) {
    currentValue.value = items[0] || null;
    // si le store est vide, initialiser avec la variation du premier sélecteur
    if (!activeTracks.value || activeTracks.value.length === 0) {
      const v = toVariation(items[0]);
      if (v) activeTracks.value = [v];
    }
  } else {
    // les autres ne forcent pas le store ; leur currentValue restera à null
    currentValue.value = null;
  }

  nextTick(() => (syncing.value = false));
});

// Quand on bascule compare mode (objet <-> tableau)
watch(
  () => isCompareModeEnabled,
  (flag) => {
    syncing.value = true;
    if (flag) {
      if (currentValue.value && !Array.isArray(currentValue.value)) {
        currentValue.value = [currentValue.value];
      }
    } else {
      if (Array.isArray(currentValue.value)) {
        currentValue.value = currentValue.value[0] || null;
      }
    }
    nextTick(() => (syncing.value = false));
  }
);

// Détection ajout / suppression dans le MultiSelect (côté composant)
// On n'agit que si l'ajout/suppression concerne une variation appartenant à `items`
watch(
  currentValue,
  (newVal, oldVal) => {
    if (syncing.value) return;

    const newItems = Array.isArray(newVal) ? newVal : newVal ? [newVal] : [];
    const oldItems = Array.isArray(oldVal) ? oldVal : oldVal ? [oldVal] : [];

    const added = newItems.find((n) => !oldItems.some((o) => isSame(o, n)));
    const removed = oldItems.find((o) => !newItems.some((n) => isSame(n, o)));

    if (added && items.some((it) => isSame(it, added))) {
      selectTrack(added, 'add');
    } else if (removed && items.some((it) => isSame(it, removed))) {
      selectTrack(removed, 'remove');
    }
  },
  { deep: true }
);

// Quand activeTracks change elsewhere -> synchroniser l'affichage local
// Mais n'adopter que les variations qui appartiennent à ce Selector (`items`)
watch(
  activeTracks,
  (newVal) => {
    syncing.value = true;

    const storeList = Array.isArray(newVal) ? newVal : [];
    // ne garder que les variations du store qui sont dans `items`
    const matched = storeList.filter((av) =>
      items.some((it) => isSame(it, av))
    );

    if (isCompareModeEnabled) {
      currentValue.value = matched.length ? [...matched] : [];
    } else {
      currentValue.value = matched[0] || null;
    }

    nextTick(() => (syncing.value = false));
  },
  { deep: true }
);

// Logique centrale de sélection (ajout / suppression)
// Règles :
// - mode normal -> activeTracks = [variation]
// - mode comparaison -> conserver activeTracks[0] si possible; second élément ajouté/remplacé; suppression gère le cas de la suppression de la première
function selectTrack(track, action = 'add') {
  const variation = toVariation(track);
  if (!variation) return;

  if (!isCompareModeEnabled) {
    activeTracks.value = [variation];
    return;
  }

  if (action === 'remove') {
    const wasFirst =
      activeTracks.value.length && isSame(activeTracks.value[0], variation);
    activeTracks.value = activeTracks.value.filter(
      (t) => !isSame(t, variation)
    );

    // si on a retiré la première et qu'il reste une piste, elle devient naturellement index 0
    // pas d'action supplémentaire nécessaire ici (déjà assuré par le filter)
    return;
  }

  // action === 'add'
  if (activeTracks.value.some((t) => isSame(t, variation))) {
    // déjà présent -> ignore
    return;
  }

  if (activeTracks.value.length === 0) {
    activeTracks.value = [variation];
  } else if (activeTracks.value.length === 1) {
    activeTracks.value = [activeTracks.value[0], variation];
  } else {
    // remplacer le 2e
    activeTracks.value = [activeTracks.value[0], variation];
  }
}

// Helpers pour affichage (inchangés)
function getFrontViewUrl(item) {
  if (!item) return '';
  if (Array.isArray(item)) {
    return item.length > 0 ? getFrontViewUrl(item[0]) : '';
  }
  if (item.files && item.files.length > 1) {
    return item.files[7]?.url || item.files[0].url;
  } else {
    return item.files && item.files[0] ? item.files[0].url : '';
  }
}

function setImage() {
  return getFrontViewUrl(currentValue.value) 
    ? '--image: url(\'' + getFrontViewUrl(currentValue.value) + '\')' 
    : undefined;
}
</script>

<style>
.selector-dropdown {
  --selector-width: 21rem;
  --row-gap: 0;
  align-items: flex-start;
  position: relative;
  background: var(--color-background);
  border-radius: var(--rounded-lg);
  height: 3.75rem;
  min-width: var(--selector-width, 21rem);
  padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
}
.selector-dropdown.has-image,
.selector-dropdown.has-image :is(#selector-select, #selector-multiselect, [role='combobox']) {
  padding-left: var(--space-64);
}
.selector-dropdown.has-image:before {
  content: '';
  position: absolute;
  left: var(--space-8);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rounded-md);
  background-color: var(--dialog-inner-background, #f7f7f7);
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

[role='combobox'],
[id*='select_list'] {
  border: 1px solid var(--color-grey-200);
}
[role='combobox']:hover {
  outline: 0px solid var(--color-grey-400);
  border-color: var(--color-grey-400);
}
[role='combobox'][aria-expanded='true'] {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  border-color: transparent;
}
#selector-select,
#selector-multiselect,
[role='combobox'] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.875rem var(--space-48) var(--space-8) var(--space-16);
  cursor: pointer;
}
[role='combobox'] p,
.selector-dropdown [data-pc-section="labelcontainer"] > [data-pc-section='label'] {
  max-height: 1lh;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#selector-select.active [role='combobox'] {
  border-color: var(--color-focus-ring);
}

/* Icon */
[data-pc-section='dropdown'] {
  display: none; /* Hide default component svg */
}
.selector-dropdown [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);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 1lh;
  padding-right: 1em;
}

/* Options */
[id*='select_list'] {
  margin-top: var(--space-4);
  border-radius: var(--rounded-md);
  background: var(--color-background);
  box-shadow: var(--shadow);
  padding: var(--space-8);
}
[id*='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;
}
[id*='select_list'] > * + * {
  margin-top: var(--space-4);
}
[id*='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(--dialog-inner-background, #f7f7f7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
[id*='select_list'] > *:hover {
  background-color: var(--color-grey-50);
}
[id*='select_list'] > *:focus,
[id*='select_list'] > *:focus-visible,
[id*='select_list'] > [data-p-focused='true'] {
  outline: 2px solid var(--color-focus-ring);
}
/* Check */
#selector-multiselect_list input[type='checkbox'] {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) + 1px);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rounded-sm);
}
#selector-multiselect_list input[type='checkbox']:checked {
  --icon-color: var(--color-focus-ring);
}
[id*='select_list'] > * > svg {
  position: absolute;
  left: 0.875rem;
  width: 1rem;
  height: 1rem;
  color: var(--color-grey-700);
}
[id*='select_list'] img {
  position: absolute;
  left: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  mix-blend-mode: multiply;
}
[id*='select_list'] [aria-selected='true'] img,
#selector-multiselect_list input[type='checkbox'] + [data-pc-section='box'] {
  display: none;
}
#selector-multiselect_list
  [aria-selected='false']
  input[type='checkbox']::before {
  --icon-color: transparent;
}
/* Overlay */
[data-pc-section='overlay'] [data-pc-section='header'] {
  display: none;
}
</style>