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 class="dialog__inner" id="verre-brut">
    <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 } = useVirtualSampleStore();
const { openedFile } = storeToRefs(useDialogStore());
const activeTab = ref(Object.keys(step.files.static)[0]);

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

<style scoped>
.dialog__inner {
  background-color: inherit;
  height: calc(100% - 3.5rem) !important;
}

[role="tablist"] {
  height: 3.5rem;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  border-bottom: 1px solid var(--color-grey-700);
  padding-top: 7px;
}
[role="tab"] {
  --tab-h: 3rem;
  --tab-min-w: none;
  --tab-py: var(--space-8);
  --tab-px: var(--space-12);
  --tab-border-w: 1px;
  --tab-color: var(--color-grey-400);
  --tab-background: transparent;
  --tab-border-color: transparent;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--text-md);
  text-align: center;
  background-color: transparent;
  color: var(--tab-color);
  padding: var(--tab-py) var(--tab-px);
  margin: 0;
  cursor: pointer;
  gap: var(--space-4);
  min-width: var(--tab-min-w);
  height: var(--tab-h);
  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
}
[role="tab"][aria-selected="true"] {
  --tab-border-color: var(--color-white);
  --tab-color: var(--color-white);
}
[role="tab"]:focus-visible {
  z-index: 20;
}
[role="tab"] .label {
  flex-grow: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: -0.1em;
}
</style>