96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
<template>
|
||
<Dialog
|
||
id="virtual-sample"
|
||
v-model:visible="isOpen"
|
||
modal
|
||
:draggable="false"
|
||
header="Titre du rendu"
|
||
class="dialog"
|
||
:class="{ 'with-comments': isCommentsOpen }"
|
||
:closeOnEscape="true"
|
||
>
|
||
<template #header>
|
||
<div class="dialog__tabs">
|
||
<button
|
||
v-if="step.files.dynamic"
|
||
class="btn btn--transparent | font-serif"
|
||
data-icon="cursor"
|
||
:aria-pressed="activeTab === 'dynamic' ? true : false"
|
||
@click="activeTab = 'dynamic'"
|
||
>
|
||
<span>Vue Dynamique</span>
|
||
</button>
|
||
<button
|
||
v-if="step.files.static"
|
||
@click="activeTab = 'static'"
|
||
class="btn btn--transparent | font-serif"
|
||
data-icon="image"
|
||
:aria-pressed="activeTab === 'static' ? true : false"
|
||
>
|
||
<span>Vue statique</span>
|
||
</button>
|
||
</div>
|
||
<h2 class="font-serif text-lg">Échantillon virtuel</h2>
|
||
</template>
|
||
|
||
<DynamicView v-if="activeTab === 'dynamic'" />
|
||
<StaticView v-if="activeTab === 'static'" />
|
||
|
||
<template #footer>
|
||
<a
|
||
v-if="currentFile"
|
||
id="download-image"
|
||
class="btn btn--white-10"
|
||
data-icon="download"
|
||
:href="currentFile.url"
|
||
download
|
||
>
|
||
<span>{{
|
||
activeTab === "dynamic" ? "Télécharger l’image" : "Télécharger le PDF"
|
||
}}</span>
|
||
</a>
|
||
<button
|
||
id="loop-animation"
|
||
class="btn btn--transparent btn--outline"
|
||
data-icon="loop"
|
||
>
|
||
<span>Animation en boucle</span>
|
||
</button>
|
||
<button
|
||
id="toggle-comments"
|
||
:aria-pressed="isCommentsOpen"
|
||
class="btn btn--transparent btn--outline"
|
||
data-icon="comment"
|
||
@click="isCommentsOpen = !isCommentsOpen"
|
||
>
|
||
<span class="sr-only">Afficher les commentaires</span>
|
||
</button>
|
||
</template>
|
||
</Dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { storeToRefs } from "pinia";
|
||
import Dialog from "primevue/dialog";
|
||
import DynamicView from "./DynamicView.vue";
|
||
import StaticView from "./StaticView.vue";
|
||
import { ref } from "vue";
|
||
import { useVirtualSampleStore } from "../../../stores/virtualSample";
|
||
import { useDialogStore } from "../../../stores/dialog";
|
||
|
||
const { file } = defineProps({
|
||
file: Object,
|
||
});
|
||
|
||
const { activeTab, currentFile, step } = storeToRefs(useVirtualSampleStore());
|
||
const { isCommentsOpen } = storeToRefs(useDialogStore());
|
||
|
||
// Variables
|
||
const isOpen = ref(true);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dialog__inner {
|
||
padding: var(--space-16);
|
||
}
|
||
</style>
|