118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
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>
|