designtopack/src/components/inspirations/Selector.vue

<template>
  <!-- TODO: dynamiser la valeur de l'attribut style: url('inspiration.cover') -->
  <div
    id="inspirations-dropdown"
    class="flex"
    style="
      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    "
  >
    <label for="inspirations-select" class="text-sm">Choisir une inspiration</label>
    <Select
      id="inspirations-select"
      v-model="selectedInspiration"
      :options="inspirations"
      optionLabel="name"
      optionValue="value"
      class="font-serif"
      data-icon="chevron-single-down"
      checkmark
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

const selectedInspiration = ref("shape-of-nature");
const inspirations = ref([
  { name: "Shape of Nature", value: "shape-of-nature" },
  { name: "Inspiration Title", value: "inspiration-title" },
]);
</script>

<style>
#inspirations-dropdown {
  --direction: column;
  --items: flex-start;
  --wrap: no-wrap;
  --row-gap: 0;
  position: absolute;
  top: 0;
  right: 0;
  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);
  margin-bottom: var(--space-16);
}
#inspirations-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"],
#inspirations-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;
}
#inspirations-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 */
#inspirations-select svg {
  display: none; /* Hide default component svg */
}
#inspirations-select[data-icon]::before {
  --icon-color: var(--color-grey-700);
  position: absolute;
  right: var(--space-8);
  top: .625rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: .625rem;
}
#inspirations-dropdown label {
  color: var(--color-grey-700);
  letter-spacing: var(--tracking-wider);
}

/* Options */
#inspirations-select_list {
  margin-top: var(--space-4);
  border-radius: var(--rounded-md);
  background: var(--color-background);
  box-shadow: var(--shadow);
  padding: var(--space-8);
}
#inspirations-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;
}
#inspirations-select_list > * + * {
  margin-top: var(--space-4);
}
#inspirations-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;
}
#inspirations-select_list > *:hover {
  background-color: var(--color-grey-50);
}
#inspirations-select_list > *:focus,
#inspirations-select_list > *:focus-visible,
#inspirations-select_list > [data-p-focused="true"] {
  outline: 2px solid var(--color-focus-ring);
}
/* Check */
#inspirations-select_list > * > svg {
  position: absolute;
  left: .875rem;
  width: 1rem;
  height: 1rem;
  color: var(--color-grey-700);
}
</style>