studio-variable/designtopack
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

projects : prepare empty state

Browse source
This commit is contained in:
isUnknown 2024-11-21 16:58:19 +01:00
parent 62a159fa9b
commit b76c62fa70
2 changed files with 32 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/Projects.vue
View file

@ -1,35 +1,35 @@
<template> <template>
<h2 id="tabslist" class="sr-only">Projets</h2> <h2 id="tabslist" class="sr-only">Projets</h2>
<template v-if="projects.length > 0"> <Tabs :tabs="tabs" @update:currentTab="changeTab" />
<Tabs :tabs="tabs" @update:currentTab="changeTab" /> <section
<section v-if="currentTab === 'currentProjects'"
v-if="currentTab === 'currentProjects'" id="projets-en-cours"
id="projets-en-cours" role="tabpanel"
role="tabpanel" tabindex="0"
tabindex="0" aria-labelledby="projets-en-cours-label"
aria-labelledby="projets-en-cours-label" class="flow"
class="flow" :class="{ empty: currentProjects.length === 0 }"
> >
<Project <Project
v-for="project in currentProjects" v-for="project in currentProjects"
:key="project.id" :key="project.id"
:project="project" :project="project"
/> />
</section> </section>
<section <section
v-else v-else
id="projets-archives" id="projets-archives"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
aria-labelledby="projet-archives-label" aria-labelledby="projet-archives-label"
> :class="{ empty: archivedProjects.length === 0 }"
<Project >
v-for="project in archivedProjects" <Project
:key="project.id" v-for="project in archivedProjects"
:project="project" :key="project.id"
/> :project="project"
</section> />
</template> </section>
</template> </template>
<script setup> <script setup>
import Tabs from "./Tabs.vue"; import Tabs from "./Tabs.vue";

5
src/components/Tabs.vue
View file

@ -4,12 +4,12 @@
<button <button
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.label" :key="tab.label"
:id="slugify(tab.label, {lower: true}) + '-label'" :id="slugify(tab.label, { lower: true }) + '-label'"
type="button" type="button"
role="tab" role="tab"
:data-icon="tab.icon ?? null" :data-icon="tab.icon ?? null"
:aria-selected="tab.isActive" :aria-selected="tab.isActive"
:aria-controls="slugify(tab.label, {lower: true})" :aria-controls="slugify(tab.label, { lower: true })"
:tabindex="tab.isActive ? '-1' : null" :tabindex="tab.isActive ? '-1' : null"
@click="changeTab(tab.id)" @click="changeTab(tab.id)"
> >
@ -107,7 +107,6 @@ function changeTab(tabId) {
--icon-color: var(--color-brand); --icon-color: var(--color-brand);
} }
[role="tabpanel"] { [role="tabpanel"] {
width: 100%; width: 100%;
overflow: auto; overflow: auto;