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

redesign tabs

Browse source
This commit is contained in:
isUnknown 2024-09-10 09:12:52 +02:00
parent 893d173c59
commit 0075a37ab2
4 changed files with 52 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/Projects.vue
View file

@ -1,8 +1,16 @@
<template> <template>
<h2 id="tabslist" class="sr-only">Projets</h2> <h2 id="tabslist" class="sr-only">Projets</h2>
<template v-if="projects.children"> <template v-if="projects.length > 0">
<Tabs :projects="projects.children" @update:currentTab="changeTab" /> <Tabs
<TabPanel :projects="projects.children" :currentTab="currentTab" /> :currentProjects="currentProjects"
:archivedProjects="archivedProjects"
@update:currentTab="changeTab"
/>
<TabPanel
:currentProjects="currentProjects"
:archivedProjects="archivedProjects"
:currentTab="currentTab"
/>
</template> </template>
</template> </template>
<script setup> <script setup>
@ -12,9 +20,11 @@ import { useProjectsStore } from "../stores/projects";
import { ref } from "vue"; import { ref } from "vue";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const { projects } = storeToRefs(useProjectsStore()); const { projects, currentProjects, archivedProjects } = storeToRefs(
useProjectsStore()
);
const currentTab = ref("current"); const currentTab = ref("currentProjects");
function changeTab(newValue) { function changeTab(newValue) {
currentTab.value = newValue; currentTab.value = newValue;

16
src/components/TabPanel.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<!-- TODO: rendre dynamique id + aria-labelledby --> <!-- TODO: rendre dynamique id + aria-labelledby -->
<section <section
v-if="currentTab === 'current'" v-if="currentTab === 'currentProjects'"
id="projets-en-cours" id="projets-en-cours"
role="tabpanel" role="tabpanel"
tabindex="0" tabindex="0"
@ -31,18 +31,10 @@
<script setup> <script setup>
import Project from "./Project.vue"; import Project from "./Project.vue";
import { computed } from "vue";
const { projects, currentTab } = defineProps({ const { currentTab, currentProjects, archivedProjects } = defineProps({
projects: Array, currentProjects: Array,
archivedProjects: Array,
currentTab: String, currentTab: String,
}); });
const currentProjects = computed(() => {
return projects.filter((child) => child.status === "listed");
});
const archivedProjects = computed(() => {
return projects.filter((child) => child.status === "unlisted");
});
</script> </script>

37
src/components/Tabs.vue
View file

@ -19,27 +19,30 @@
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { computed } from "vue";
import slugify from "slugify"; import slugify from "slugify";
const { projects } = defineProps({ const { currentProjects, archivedProjects } = defineProps({
projects: Array, currentProjects: Array,
archivedProjects: Array,
}); });
const tabs = ref([ const tabs = computed(() => {
{ return [
label: "Projets en cours", {
id: "current", label: "Projets en cours",
count: projects.filter((project) => project.status === "listed").length, id: "currentProjects",
isActive: true, count: currentProjects.length,
}, isActive: true,
{ },
label: "Projets archivés", {
id: "archived", label: "Projets archivés",
count: projects.filter((project) => project.status === "unlisted").length, id: "archivedProjects",
isActive: false, count: archivedProjects.length,
}, isActive: false,
]); },
];
});
const emit = defineEmits(["update:currentTab"]); const emit = defineEmits(["update:currentTab"]);

17
src/stores/projects.js
View file

@ -1,12 +1,21 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { useApiStore } from "./api.js"; import { useApiStore } from "./api.js";
import { ref } from "vue"; import { ref, computed } from "vue";
export const useProjectsStore = defineStore("projects", () => { export const useProjectsStore = defineStore("projects", () => {
const projects = ref([]); const projects = ref([]);
const api = useApiStore(); const currentProjects = computed(() => {
api.fetchPageData("projects").then((json) => (projects.value = json)); return projects.value.filter((project) => project.status === "listed");
});
const archivedProjects = computed(() => {
return projects.value.filter((project) => project.status === "unlisted");
});
return { projects }; const api = useApiStore();
api
.fetchPageData("projects")
.then((json) => (projects.value = json.children));
return { projects, currentProjects, archivedProjects };
}); });