designtopack/src/components/Tabs.vue

<template>
  <header 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) + '-label'"
      type="button"
      role="tab"
      :aria-selected="tab.isActive"
      :aria-controls="slugify(tab.label)"
      :tabindex="tab.isActive ? '-1' : false"
      @click="changeTab(tab.id)"
    >
      <span class="label">{{ tab.label }}</span>
      <span class="count">{{ tab.count }}</span>
    </button>
  </header>
</template>

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

const { currentProjects, archivedProjects } = defineProps({
  currentProjects: Array,
  archivedProjects: Array,
});

const tabs = computed(() => {
  return [
    {
      label: "Projets en cours",
      id: "currentProjects",
      count: currentProjects.length,
      isActive: true,
    },
    {
      label: "Projets archivés",
      id: "archivedProjects",
      count: archivedProjects.length,
      isActive: false,
    },
  ];
});

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

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

<style scoped>
[role="tablist"] {
  width: fit-content;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto var(--space-12);
  border-radius: var(--rounded-full);
  height: 3.75rem; /* 60px */
}

[role="tab"] {
  --tab-height: 2.5rem;
  --tab-py: var(--space-12);
  --tab-px: var(--space-16);
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-md);
  border-radius: var(--rounded-full);
  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);
  height: var(--tab-height);
}
[role="tab"]:focus,
[role="tab"]:hover {
}
[role="tab"] .label {
  flex-grow: 1;
  font-family: var(--font-serif);
}
[role="tab"] .count {
  font-size: var(--text-sm);
  font-weight: 500;
}

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

[role="tab"][aria-selected="true"] + [aria-selected="false"]::before {
  content: "";
  display: inline-block;
  height: var(--tab-height);
  width: calc(var(--tab-px) * 2);
  position: absolute;
  left: calc(var(--tab-px) * -1);
  background-color: var(--color-grey-200);
  z-index: -1;
}

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