designtopack/src/components/Tabs.vue

<template>
  <div role="tablist" aria-labelledby="tablist">
    <!-- TODO: aria-selected et tabindex ne fonctionnent pas -->
    <button
      v-for="tab in tabs"
      :key="tab.label"
      :id="slugify(tab.label, { lower: true }) + '-label'"
      type="button"
      role="tab"
      :data-icon="tab.icon ?? null"
      :aria-selected="tab.isActive"
      :aria-controls="slugify(tab.label, { lower: true })"
      :tabindex="tab.isActive ? '-1' : null"
      @click="changeTab(tab.id)"
    >
      <span class="label">{{ tab.label }}</span>
      <span class="count">{{ tab.count }}</span>
    </button>
  </div>
</template>

<script setup>
import { computed } from "vue";
import slugify from "slugify";

const { tabs } = defineProps({
  tabs: Array,
});

const emit = defineEmits(["update:currentTab"]);

function changeTab(tabId) {
  emit("update:currentTab", tabId);
}
</script>

<style scoped>
[role="tablist"] {
  --tabs: 2;
  --tab-w: 15rem; /* 240px */
  width: 100%;
  max-width: calc(var(--tabs) * var(--tab-w));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  border-radius: var(--rounded-md);
  background-color: var(--color-grey-200);
  flex-shrink: 1;
}

[role="tab"] {
  --tab-h: 2.5rem;
  --tab-py: var(--space-8);
  --tab-px: var(--space-12);
  --tab-border-w: 4px;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  text-align: left;
  border-radius: var(--rounded-md);
  background-color: var(--background, var(--color-background));
  color: var(--color, var(--color-text));
  z-index: 2;
  padding: var(--tab-py) var(--tab-px);
  margin: 0;
  cursor: pointer;
  gap: var(--space-16);
  width: 100%;
  height: var(--tab-h);
  border: var(--tab-border-w) solid var(--color-grey-200);
  flex-shrink: 1;
}
[role="tab"]:focus-visible {
  z-index: 20;
}
[role="tab"] .label {
  flex-grow: 1;
  font-family: var(--font-serif);
  margin-top: 0.1em;
}
[role="tab"] .count {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: -0.1em;
}

[role="tab"] + [role="tab"] {
  margin-left: calc(var(--tab-border-w) / -2);
}

[role="tab"][aria-selected="true"] {
  --background: var(--color-background);
  z-index: 10;
}
[role="tab"][aria-selected="true"]:hover {
  background-color: var(--color-white-100);
}
[role="tab"][aria-selected="false"] {
  --background: var(--color-grey-200);
}
[role="tab"][aria-selected="false"]:hover {
  --background: var(--color-white-50);
}

[role="tab"][data-icon="favorite"]::before {
  --icon-color: var(--color-grey-400);
}
[role="tab"][data-icon="favorite"][aria-selected="true"]::before {
  --icon-color: var(--color-brand);
}

[role="tabpanel"] {
  width: 100%;
  overflow: auto;
}
</style>