pojazdownik/src/components/sections/StockSection.vue

<template>
  <section class="stock-section">
    <div class="section_modes">
      <button
        v-for="(id, i) in sectionModes"
        :key="id"
        class="btn"
        ref="sectionButtonRefs"
        @click="chooseSection(id)"
        :data-selected="store.stockSectionMode == id"
      >
        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
      </button>
    </div>

    <transition name="tab-change" mode="out-in">
      <keep-alive>
        <component :is="chosenSectionComponent"></component>
      </keep-alive>
    </transition>
  </section>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "../../store";
import StockListTab from "../tabs/StockListTab.vue";
import StockGeneratorTab from "../tabs/StockGeneratorTab.vue";
import NumberGeneratorTab from "../tabs/NumberGeneratorTab.vue";
import WikiListTab from "../tabs/WikiListTab.vue";

const sectionButtonRefs = ref([]);

const store = useStore();
type SectionMode = typeof store.stockSectionMode;

const sectionModes: SectionMode[] = [
  "stock-list",
  "wiki-list",
  "number-generator",
  "stock-generator",
];

onMounted(() => {
  window.addEventListener("keydown", (e) => {
    if (e.target instanceof HTMLInputElement) return;

    if (/[1234]/.test(e.key)) {
      const keyNum = Number(e.key);
      store.stockSectionMode = sectionModes[keyNum - 1];
      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement).focus();
    }
  });
});

const chosenSectionComponent = computed(() => {
  switch (store.stockSectionMode) {
    case "stock-list":
      return StockListTab;

    case "wiki-list":
      return WikiListTab;

    case "stock-generator":
      return StockGeneratorTab;

    case "number-generator":
      return NumberGeneratorTab;

    default:
      return StockListTab;
  }
});

function chooseSection(sectionId: SectionMode) {
  store.stockSectionMode = sectionId;
}
</script>

<style lang="scss">
@import "../../styles/global.scss";

// Tab change animation
.tab-change {
  &-enter-from,
  &-leave-to {
    opacity: 0;
  }

  &-enter-active,
  &-leave-active {
    transition: all 100ms ease-in-out;
  }
}

// Section styles
.stock-section {
  grid-row: 1 / 4;
  grid-column: 2;

  overflow: hidden;
  padding: 1px;
}

.section_modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 0.5em;

  margin-bottom: 1em;

  button {
    position: relative;
    border-radius: 0.5em 0.5em 0 0;

    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);

      content: "";
      width: 0;
      height: 2px;
      transition: all 100ms;
      background-color: $accentColor;
    }

    &[data-selected="true"]::after {
      width: 100%;
    }
  }
}

@media screen and (max-width: 650px) {
  .section_modes {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
</style>