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

DTL panel : show proposal corresponding to dialog working for virtual sample (dynamic and static)

Browse source
This commit is contained in:
isUnknown 2025-01-27 11:06:06 +01:00
parent af0c259525
commit c2d00e0edf
5 changed files with 204 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

125
src/components/design-to-light/DTLPanel.vue
View file

@ -1,13 +1,26 @@
<template>
<aside id="dtl-panel" class="text-sm bg-black rounded-2xl" aria-labelledby="dtl-label" @click="preventClose($event)">
<header class="flex items-center | border-b pl-32 pr-16 py-8" data-icon="leaf" style="--column-gap:.5rem">
<aside
id="dtl-panel"
class="text-sm bg-black rounded-2xl"
aria-labelledby="dtl-label"
@click="preventClose($event)"
>
<header
class="flex items-center | border-b pl-32 pr-16 py-8"
data-icon="leaf"
style="--column-gap: 0.5rem"
>
<h2 id="dtl-label" class="font-serif text-xl">Design to Light</h2>
<button @click="emits('close')" class="btn btn--icon btn--transparent | ml-auto" data-icon="close">
<button
@click="emits('close')"
class="btn btn--icon btn--transparent | ml-auto"
data-icon="close"
>
<span class="sr-only">Fermer</span>
</button>
</header>
<nav class="tabs" role="tablist" tabindex="-1">
<button
<button
v-for="(proposal, index) in proposals"
@click="activeProposal = proposal"
role="tab"
@ -18,18 +31,50 @@
</button>
</nav>
<section class="overflow-y" tabindex="-1">
<div id="proposition" class="flex | bg-white-05 text-grey-200 px-32 py-16" style="--column-gap:1rem">
<div
id="proposition"
class="flex | bg-white-05 text-grey-200 px-32 py-16"
style="--column-gap: 1rem"
>
<h3 class="sr-only">Proposition</h3>
<img v-if="activeProposal.thumb" :src="activeProposal.thumb" alt="" width="72" height="72" loading="lazy" class="bg-white rounded-sm">
<p>Données basées sur la proposition <br>du {{ activeProposal.date }} <br>{{ activeProposal.stepLabel }}</p>
<img
v-if="activeProposal.thumb"
:src="activeProposal.thumb"
alt=""
width="72"
height="72"
loading="lazy"
class="bg-white rounded-sm"
/>
<p>
Données basées sur la proposition <br />du {{ activeProposal.date }}
<br />{{ activeProposal.stepLabel }}
</p>
</div>
<div id="note-globale" class="px-32 py-16 border-b flow">
<h3>Note globale</h3>
<div class="flex" style="--column-gap:1rem">
<p :data-grade="activeProposal.grades.global.letter"><strong class="sr-only">{{ activeProposal.grades.global.letter }}</strong></p>
<div class="flex" style="--column-gap: 1rem">
<p :data-grade="activeProposal.grades.global.letter">
<strong class="sr-only">{{
activeProposal.grades.global.letter
}}</strong>
</p>
<div class="flex-1">
<p><strong class="text-md font-medium">{{ activeProposal.grades.global.mention }}</strong> <span class="text-white-50 ml-8">{{ activeProposal.grades.global.number }}/10</span></p>
<input type="range" min="0" max="10" :value="activeProposal.grades.global.number" disabled />
<p>
<strong class="text-md font-medium">{{
activeProposal.grades.global.mention
}}</strong>
<span class="text-white-50 ml-8"
>{{ activeProposal.grades.global.number }}/10</span
>
</p>
<input
type="range"
min="0"
max="10"
:value="activeProposal.grades.global.number"
disabled
/>
<p>{{ activeProposal.grades.global.comment }}</p>
</div>
</div>
@ -38,19 +83,34 @@
<h3>Positionnement</h3>
<dl>
<dt id="design">Design</dt>
<dd><span class="sr-only">{{ activeProposal.grades.position.complexity }}</span></dd>
<dd>
<span class="sr-only">{{
activeProposal.grades.position.complexity
}}</span>
</dd>
<dt id="poids">Poids</dt>
<dd><span class="sr-only">{{ activeProposal.grades.position.weight }}</span></dd>
<dd>
<span class="sr-only">{{
activeProposal.grades.position.weight
}}</span>
</dd>
</dl>
<button
<button
class="dot"
v-for="(proposal, index) in proposals"
@click="activeProposal = proposal"
:aria-selected="proposal.isActive"
:style="'--x:'+activeProposal.grades.position.complexity+';--y:'+activeProposal.grades.position.weight"
:style="
'--x:' +
activeProposal.grades.position.complexity +
';--y:' +
activeProposal.grades.position.weight
"
:title="index === 0 ? 'Proposition initiale' : 'Alternative ' + index"
>
<span class="sr-only">{{ index === 0 ? "Proposition initiale" : "Alternative " + index }}</span>
<span class="sr-only">{{
index === 0 ? "Proposition initiale" : "Alternative " + index
}}</span>
</button>
</div>
<div id="indicateur" class="px-32 py-16 border-b flow">
@ -60,16 +120,35 @@
v-for="indicator in activeProposal.grades.indicators"
:key="indicator.value"
>
<div class="gauge" :data-value="indicator.value < 0 ? indicator.value : '+'+indicator.value">
<label :for="indicator.id" :style="'--value:'+indicator.value">{{ indicator.label }}</label>
<input :id="indicator.id" type="range" min="-5" max="5" orient="vertical" :value="indicator.value" disabled />
<div
class="gauge"
:data-value="
indicator.value < 0 ? indicator.value : '+' + indicator.value
"
>
<label
:for="indicator.id"
:style="'--value:' + indicator.value"
>{{ indicator.label }}</label
>
<input
:id="indicator.id"
type="range"
min="-5"
max="5"
orient="vertical"
:value="indicator.value"
disabled
/>
</div>
</template>
</div>
</div>
<!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
<footer class="p-16">
<button class="btn btn--white w-full">Demander une expertise d’optimisation</button>
<button class="btn btn--white w-full">
Demander une expertise d’optimisation
</button>
</footer>
</section>
</aside>
@ -81,14 +160,16 @@ import dayjs from "dayjs";
import "dayjs/locale/fr";
import { ref, onBeforeUnmount } from "vue";
const { proposals } = defineProps({
proposals: Array,
});
dayjs.locale("fr");
const { page } = storeToRefs(usePageStore());
const emits = defineEmits(["close"]);
const proposals = page.value.designToLight;
proposals[0].isActive = true;
const activeProposal = ref(proposals[0]);