designtopack/src/components/project/virtual-sample/StaticView.vue

<template>
  <header role="tablist" aria-labelledby="tablist">
    <button
      v-if="step.files.static.rawGlass"
      id="verre-brut-label"
      type="button"
      role="tab"
      :aria-selected="activeTab === 'rawGlass' ? true : false"
      aria-controls="verre-brut"
      tabindex="-1"
      @click="activeTab = 'rawGlass'"
    >
      <span class="label">Verre brut</span>
    </button>
    <button
      v-if="step.files.static.finishedGlass"
      id="verre-paracheve-label"
      type="button"
      role="tab"
      :aria-selected="activeTab === 'finishedGlass' ? true : false"
      aria-controls="verre-paracheve"
      @click="activeTab = 'finishedGlass'"
    >
      <span class="label">Verre parachevé</span>
    </button>
  </header>
  <div id="vpv-container" class="dialog__inner">
    <PdfViewer />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useVirtualSampleStore } from '../../../stores/virtualSample';
import PdfViewer from '../PdfViewer.vue';
import { storeToRefs } from 'pinia';
import { useDialogStore } from '../../../stores/dialog';

const { step } = storeToRefs(useVirtualSampleStore());
const { openedFile, activeTracks } = storeToRefs(useDialogStore());
const activeTab = ref(Object.keys(step.value.files.static)[0]);

activeTracks.value = [];

watch(
  activeTab,
  (newVal) => {
    openedFile.value = step.value.files.static[newVal];
  },
  { immediate: true }
);
</script>