Merge do wersji 1.5.0

footer margin hotfix

hotfixy footera

.gitignore

@@ -6,6 +6,7 @@ node_modules
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
@@ -21,4 +22,7 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-node_modules
+node_modules
+
+# Dev files
+stockInfoDev.json

package.json

@@ -1,22 +1,22 @@
-{
+{
-  "name": "pojazdownik",
+  "name": "pojazdownik",
-  "version": "1.3.0",
+  "version": "1.5.0",
-  "private": true,
+  "private": true,
-  "scripts": {
+  "scripts": {
-    "dev": "vite",
+    "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174"
+    "preview": "yarn build && vite preview --port 4174"
-  },
+  },
-  "dependencies": {
+  "dependencies": {
-    "pinia": "^2.0.17",
+    "pinia": "^2.0.17",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37"
-  },
+  },
-  "devDependencies": {
+  "devDependencies": {
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.1.0",
-    "sass": "^1.55.0",
+    "sass": "^1.59.3",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.2",
-    "vite": "^3.2.1",
+    "vite": "^4.2.1",
-    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-pwa": "^0.14.6",
-    "vue-tsc": "^1.0.9"
+    "vue-tsc": "^1.2.0"
-  }
+  }
-}
+}

src/App.vue

@@ -1,94 +1,37 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
+  <AppModals />
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
-  </div>
+  <AppContainerView />
-
-  <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
-  <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
-
-  <keep-alive>
-    <transition name="card-appear">
-      <RealStockCard />
-    </transition>
-  </keep-alive>
-
-  <div class="app_container">
-    <main>
-      <LogoSection />
-
-      <InputsSection />
-
-      <TrainImageSection />
-
-      <StockSection />
-    </main>
-
-    <footer>
-      <div class="text--grayed" style="margin-bottom: 0.25em">
-        Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
-        <a
-          style="color: #ccc"
-          href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
-          target="_blank"
-        >
-          regulaminem symulatora Train Driver 2</a
-        >!
-      </div>
-      <div class="text--grayed" style="margin-bottom: 0.25em">Strona jest kompletna dla wersji 2022.2.2 symulatora TD2</div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
-    </footer>
-  </div>
 </template>
 
 <script lang="ts">
-import packageInfo from '.././package.json';
-
 import { defineComponent } from 'vue';
-
-import InputsSection from './components/sections/InputsSection.vue';
-
 import { useStore } from './store';
-import TrainImageSection from './components/sections/TrainImageSection.vue';
+import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import LogoSection from './components/sections/LogoSection.vue';
+import AppContainerView from './views/AppContainerView.vue';
-import RealStockCard from './components/cards/RealStockCard.vue';
+import AppModals from './components/app/AppModals.vue';
-import StockSection from './components/sections/StockSection.vue';
 
 export default defineComponent({
-  components: {
+  data() {
-    StockSection,
+    return {
-    InputsSection,
+      store: useStore(),
-    TrainImageSection,
+    };
-    LogoSection,
-    RealStockCard,
   },
-
-  data: () => ({
-    VERSION: packageInfo.version,
-    store: useStore(),
-  }),
-
   async created() {
-    const stockData = await (
+    /* dev info testing */
-      await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json?t=${Math.floor(Date.now() / 60000)}`)
+    // if (import.meta.env['VITE_STOCK_DEV'] == '1') {
-    ).json();
+    //   const data = await import('../stockInfoDev.json');
-
+    //   this.store.stockData = data.default as any;
-    this.store.stockData = stockData;
+    // }
+    this.store.fetchStockInfoData();
+    this.store.handleRouting();
   },
+  components: { ImageFullscreenPreview, AppContainerView, AppModals },
 });
 </script>
 
 <style lang="scss">
-@import './styles/global';
+@import './styles/global.scss';
-
-.app_container {
-  min-height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
 /* APP */
 #app {
@@ -117,65 +60,10 @@ h2 {
   color: #d1d1d1;
 }
 
-.image-preview {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-
-  background: rgba(black, 0.85);
-
-  img {
-    width: 90%;
-    max-width: 800px;
-  }
-}
-
-/* MAIN SECTION */
-
-main {
-  display: grid;
-  gap: 1em 3em;
-
-  width: 100%;
-  max-width: 1300px;
-  min-height: 75vh;
-
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
-
-  // padding: 0 1em;
-  margin-bottom: 2em;
-}
-
-/* FOOTER SECTION */
-
-footer {
-  margin-top: auto;
-  text-align: center;
-  padding: 0 1em;
-}
-
-/* MOBILE VIEWS */
-
 @media screen and (max-width: $breakpointMd) {
   #app {
     font-size: calc(0.7rem + 0.75vw);
   }
-
-  main {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
 }
 </style>
 

src/components/app/AppModals.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <keep-alive>
+      <RealStockCard v-if="store.isRealStockListCardOpen" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import RealStockCard from '../cards/RealStockCard.vue';
+
+export default defineComponent({
+  components: { RealStockCard },
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style scoped></style>

src/components/app/Footer.vue

@@ -0,0 +1,52 @@
+<template>
+  <footer>
+    <div class="text--grayed">
+      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
+      <a
+        style="color: #ccc"
+        href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
+        target="_blank"
+      >
+        regulaminem symulatora Train Driver 2</a
+      >!
+    </div>
+
+    <div class="text--grayed" v-if="store.stockData">
+      Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
+    </div>
+
+    <div>
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import packageInfo from '../../../package.json';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      VERSION: packageInfo.version,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  text-align: center;
+  padding: 1em 1em 0 1em;
+  margin-top: auto;
+}
+</style>

src/components/app/MainContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <main>
+    <LogoSection />
+    <InputsSection />
+    <TrainImageSection />
+    <StockSection />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import LogoSection from '../sections/LogoSection.vue';
+import InputsSection from '../sections/InputsSection.vue';
+import TrainImageSection from '../sections/TrainImageSection.vue';
+import StockSection from '../sections/StockSection.vue';
+
+export default defineComponent({
+  components: { LogoSection, InputsSection, TrainImageSection, StockSection },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/global.scss';
+
+main {
+  display: grid;
+  gap: 1em;
+
+  width: 100%;
+  max-width: 1500px;
+  min-height: 75vh;
+
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 360px minmax(400px, 1fr);
+}
+
+@media screen and (max-width: $breakpointMd) {
+  main {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+</style>

src/components/cards/RealStockCard.vue

@@ -1,39 +1,66 @@
 <template>
-  <div class="real-stock-card g-card" v-if="store.isRealStockListCardOpen">
+  <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 
     <div class="card_content">
-      <div class="top-sticky">
+      <div class="card_nav">
-        <button class="btn btn--text exit-btn" @click="store.isRealStockListCardOpen = false">&lt; POWRÓT</button>
+        <div class="top-pane">
-
-        <div class="header">
           <h1>
-            REALNE ZESTAWIENIA
+            ZESTAWIENIA REALNE by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a>
-            <div>by <a href="https://td2.info.pl/profile/?u=17708" target="_blank">Railtrains997</a></div>
           </h1>
-          <p>
+          <button class="btn exit-btn" @click="store.isRealStockListCardOpen = false">&Cross;</button>
-            Pełne informacje o zestawieniach dostępne na stronie
+        </div>
-            <a href="http://bocznica.eu/files/archiwum/2021r_2021-11-04.html" target="_blank">bocznica.eu</a> (stan na
-            listopad 2021r.)
-          </p>
 
-          <input type="text" tabindex="0" v-model="searchedReadyStockName" placeholder="Szukaj zestawienia..." />
+        <div class="filters" ref="focus" tabindex="0">
+          <input list="readyStockDataList" v-model="searchedReadyStockName" placeholder="Szukaj po nazwie" />
+
+          <datalist id="readyStockDataList">
+            <option v-for="stock in store.readyStockList" :value="stock.stockId">
+              {{ stock.stockId }}
+            </option>
+          </datalist>
+
+          <input list="readyStockStringList" v-model="searchedReadyStockString" placeholder="Szukaj po pojazdach" />
+
+          <datalist id="readyStockStringList">
+            <option v-for="stock in computedAvailableStockTypes" :value="stock">
+              {{ stock }}
+            </option>
+          </datalist>
+
+          <button class="btn" @click="resetStockFilters">RESETUJ</button>
         </div>
       </div>
 
-      <ul v-if="responseStatus == 'loaded'">
+      <ul class="card_list" ref="list" @scroll="onListScroll">
         <li
-          v-for="(stock, key) in computedReadyStockList"
+          v-for="rStock in computedReadyStockList"
-          :key="key"
+          :key="rStock.stockId"
-          tabindex="0"
+          :data-last-selected="store.chosenRealStockName === rStock.stockId"
-          @click="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
-          @keydown.enter="choseStock(stock.name, stock.type, stock.number, stock.stockString)"
         >
-          <img :src="getIconURL(stock.type)" :alt="stock.type" />
+          <div class="stock-title" tabindex="0" @click="chooseStock(rStock)" @keydown.enter="chooseStock(rStock)">
+            <img class="stock-icon" :src="getIconURL(rStock.type)" :alt="rStock.type" />
+            <b class="text--accent" style="margin-left: 5px"> {{ rStock.name }}</b>
+            <div>{{ rStock.number }}</div>
+          </div>
 
-          <b class="text--accent"> {{ stock.name }}</b>
+          <div class="stock-thumbnails" ref="thumbnailsRef">
-          <div>{{ stock.number }}</div>
+            <div class="thumbnail-item" v-for="stockType in rStock.stockString.split(';')">
+              <div class="thumbnail-container">
+                <div>{{ stockType }}</div>
+                <img
+                  :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockType}.png`"
+                  :title="stockType"
+                  style="opacity: 0"
+                  @error="(e) => onStockItemError(e, stockType)"
+                  @load="e => (e.target as HTMLElement).style.opacity = '1'"
+                />
+              </div>
+            </div>
+          </div>
         </li>
+
+        <div class="bottom" ref="bottom"></div>
       </ul>
     </div>
   </div>
@@ -41,85 +68,155 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { Vehicle, IReadyStockList } from '../../types';
 
 import { useStore } from '../../store';
 import imageMixin from '../../mixins/imageMixin';
 import stockMixin from '../../mixins/stockMixin';
 
+import { IReadyStockItem } from '../../types';
+
 interface ResponseJSONData {
   [key: string]: string;
 }
 
+function getVehicleType(stockType: string) {
+  if (/^E/.test(stockType)) return 'loco-e';
+  if (/^S/.test(stockType)) return 'loco-s';
+
+  return 'car-passenger';
+}
+
 export default defineComponent({
   mixins: [imageMixin, stockMixin],
 
-  setup() {
-    return {
-      store: useStore(),
-    };
-  },
-
   data: () => ({
+    store: useStore(),
     responseStatus: 'loading',
     isMobile: 'ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/) ? true : false,
-
+    observer: null as IntersectionObserver | null,
     searchedReadyStockName: '',
+    searchedReadyStockString: '',
+    visibleIndexesTo: 0,
+    lastSelectedStockId: null as string | null,
+    scrollTop: 0,
   }),
 
+  async mounted() {
+    this.mountObserver();
+    this.fetchStockListData();
+  },
+
+  activated() {
+    (this.$refs['focus'] as HTMLElement).focus();
+
+    (this.$refs['list'] as HTMLElement).scrollTo({
+      top: this.scrollTop,
+      behavior: 'auto',
+    });
+  },
+
   computed: {
     computedReadyStockList() {
       if (this.searchedReadyStockName == null) return this.store.readyStockList;
 
-      let filtered: IReadyStockList = {};
+      return this.store.readyStockList
+        .filter(
+          (rs) =>
+            rs.stockId.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()) &&
+            rs.stockString.toLocaleLowerCase().includes(this.searchedReadyStockString.toLocaleLowerCase())
+        )
+        .filter((_, i) => i <= this.visibleIndexesTo);
+    },
 
-      for (let key in this.store.readyStockList) {
+    computedAvailableStockTypes() {
-        if (key.toLocaleLowerCase().includes(this.searchedReadyStockName.toLocaleLowerCase()))
+      return this.store.readyStockList
-          filtered[key] = this.store.readyStockList[key];
+        .reduce((acc, rs) => {
+          rs.stockString.split(';').forEach((s) => {
+            if (!acc.includes(s)) acc.push(s);
+          });
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => (a > b ? 1 : -1));
+    },
+  },
+
+  watch: {
+    computedReadyStockList(curr, prev) {
+      if (curr.length < prev.length) {
+        this.visibleIndexesTo = 20;
+        (this.$refs['list'] as HTMLElement).scrollTo({
+          top: 0,
+        });
       }
-
-      return filtered;
     },
   },
 
   methods: {
+    async fetchStockListData() {
+      const readyStockJSONData: ResponseJSONData = await (
+        await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
+      ).json();
+
+      if (!readyStockJSONData) {
+        this.responseStatus = 'error';
+        return;
+      }
+
+      for (let stockKey in readyStockJSONData) {
+        const [type, number, ...name] = stockKey.split(' ');
+
+        const obj = {
+          number: number.replace(/_/g, '/'),
+          name: name.join(' '),
+          stockString: readyStockJSONData[stockKey],
+          type,
+        };
+
+        this.store.readyStockList.push({
+          ...obj,
+          stockId: `${obj.type} ${obj.number} ${obj.name}`,
+        });
+      }
+
+      this.responseStatus = 'loaded';
+    },
+
+    mountObserver() {
+      this.observer = new IntersectionObserver((entries) => {
+        if (entries[0].intersectionRatio > 0) this.visibleIndexesTo += 20;
+      });
+
+      this.observer.observe(this.$refs['bottom'] as HTMLElement);
+    },
+
     getImageUrl(name: string) {
       return new URL(`./dir/${name}.png`, import.meta.url).href;
     },
 
-    choseStock(name: string, type: string, number: string, stockString: string) {
+    resetStockFilters() {
-      this.loadStockFromString(stockString);
+      this.searchedReadyStockName = '';
+      this.searchedReadyStockString = '';
+    },
+
+    chooseStock(stockItem: IReadyStockItem) {
+      this.loadStockFromString(stockItem.stockString);
+      this.lastSelectedStockId = stockItem.stockId;
       this.store.isRealStockListCardOpen = false;
     },
-  },
 
-  async mounted() {
+    onStockItemError(e: Event, stockType: string) {
-    const readyStockJSONData: ResponseJSONData = await (
+      const imageEl = e.target as HTMLImageElement;
-      await fetch(`https://spythere.github.io/api/td2/data/readyStock.json?t=${Math.floor(Date.now() / 60000)}`)
+      imageEl.src = `images/${getVehicleType(stockType)}-unknown.png`;
-    ).json();
+      imageEl.style.opacity = '1';
+    },
 
-    if (!readyStockJSONData) {
+    onListScroll(e: Event) {
-      this.responseStatus = 'error';
+      const listElement = e.target as HTMLElement;
-      return;
+      const scrollTop = listElement.scrollTop;
-    }
 
-    for (let stockKey in readyStockJSONData) {
+      this.scrollTop = scrollTop;
-      const splittedKey = stockKey.split(' ');
+    },
-
-      let name = '';
-      for (let i = 2; i < splittedKey.length; i++) {
-        name += ' ' + splittedKey[i];
-      }
-
-      this.store.readyStockList[stockKey] = {
-        type: splittedKey[0],
-        number: splittedKey[1].replace(/_/g, '/'),
-        name,
-        stockString: readyStockJSONData[stockKey],
-      };
-    }
-
-    this.responseStatus = 'loaded';
   },
 });
 </script>
@@ -129,106 +226,148 @@ export default defineComponent({
 
 .exit-btn {
   font-size: 1.2em;
-  margin: 0.5em 0;
+  margin: 0.25em 0;
 }
 
-input {
+.btn {
-  width: 100%;
+  background-color: #444;
-  max-width: 250px;
-
-  &::placeholder {
-    font-size: 0.9em;
-    text-align: center;
-  }
 }
 
 .card_content {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: 0.5em;
+
   background-color: #1c1c1c;
   border-radius: 1em;
 
-  height: 85vh;
+  height: 95vh;
   max-width: 1000px;
   width: 90vw;
 
   padding: 0 1em;
 
-  overflow-y: auto;
   z-index: 100;
 
-  .top-sticky {
+  @media screen and (max-width: $breakpointSm) {
-    position: sticky;
+    height: 80vh;
-    top: 0;
+  }
-    background: #1c1c1c;
+}
+
+.top-pane {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5em;
+
+  h1 {
+    color: #aaa;
+  }
+}
+
+.top-sticky {
+  position: sticky;
+  top: 0;
+  background: #1c1c1c;
+}
+
+.filters {
+  display: flex;
+  gap: 0.5em;
+
+  padding: 0.5em 0;
+
+  input {
+    width: 35%;
   }
 
-  .header {
+  @media screen and (max-width: $breakpointSm) {
-    padding-bottom: 1.5em;
+    flex-wrap: wrap;
-    padding-top: 0.5em;
 
-    text-align: center;
+    input {
-    font-size: 1.3em;
+      width: 100%;
-
-    h1 {
-      line-height: 0.9em;
-      margin: 0.5em 0;
-
-      div {
-        font-size: 0.65em;
-        color: #ccc;
-      }
     }
 
-    p {
+    .btn {
-      margin: 1em 0;
+      width: 100%;
-      color: #999;
-      font-size: 0.95em;
     }
   }
+}
 
-  ul {
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+
+  overflow: auto;
+
+  li {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: 1fr 2fr;
-    gap: 1em;
-
-    @media screen and (max-width: 700px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    @media screen and (max-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    @media screen and (max-width: 400px) {
-      grid-template-columns: repeat(1, 1fr);
-    }
-
-    margin-bottom: 1em;
-  }
-
-  ul li {
-    padding: 0.5em;
-
-    cursor: pointer;
-
     background: #2b2b2b;
+    gap: 1rem;
+    padding: 0.1em;
 
-    img {
+    &[data-last-selected='true'] .stock-title {
-      height: 0.85em;
+      border: 1px solid $accentColor;
     }
 
-    span {
+    .stock-title {
-      color: #999;
+      cursor: pointer;
-      font-weight: bold;
+      padding: 0.5em;
+    }
+
+    .stock-icon {
+      height: 0.85em;
     }
 
     &:hover {
       background: #222;
     }
 
-    &:focus {
+    @media screen and (max-width: $breakpointSm) {
-      outline: 1px solid white;
+      grid-template-columns: 1fr;
+      // grid-template-rows: 1fr 1fr;
     }
   }
 }
+
+.stock-thumbnails {
+  display: flex;
+  align-items: flex-end;
+
+  width: 100%;
+
+  overflow: auto;
+  padding: 0.5em;
+}
+
+.thumbnail-item {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100%;
+
+  div {
+    font-size: 0.9em;
+    text-align: center;
+  }
+
+  img {
+    max-width: 250px;
+    max-height: 50px;
+  }
+
+  & > .thumbnail-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+  }
+}
+
+.bottom {
+  padding: 1em;
+}
 </style>
 

src/components/sections/InputsSection.vue

@@ -25,7 +25,7 @@
         >
           <option :value="null" disabled>Wybierz pojazd trakcyjny</option>
           <option v-for="loco in locoOptions" :value="loco" :key="loco.type">
-            {{ loco.type }}
+            {{ loco.type }}<b v-if="loco.supportersOnly">*</b>
           </option>
         </select>
       </div>
@@ -53,7 +53,7 @@
           <option :value="null" disabled>Wybierz wagon</option>
 
           <option v-for="car in carOptions" :value="car" :key="car.type">
-            {{ car.type }}
+            {{ car.type }}<b v-if="car.supportersOnly">*</b>
           </option>
         </select>
       </div>
@@ -107,10 +107,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import { IStock } from '../../types';
 import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
-import { isLocomotive } from '../../utils/vehicleUtils';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
 
@@ -197,22 +195,8 @@ export default defineComponent({
 
       if (!vehicle) return;
 
-      const stockObj: IStock = {
+      const stockObject = this.getStockObject(vehicle, this.store.chosenCargo);
-        id: `${Date.now()}`,
+      this.store.stockList[this.store.chosenStockListIndex] = stockObject;
-        useType: isLocomotive(vehicle) ? vehicle.power : vehicle.useType,
-        type: vehicle.type,
-        length: vehicle.length,
-        mass: vehicle.mass,
-        maxSpeed: vehicle.maxSpeed,
-        isLoco: isLocomotive(vehicle),
-        cargo:
-          !isLocomotive(vehicle) && vehicle.loadable && this.store.chosenCargo ? this.store.chosenCargo : undefined,
-        count: 1,
-        imgSrc: vehicle.imageSrc,
-        supportersOnly: vehicle.supportersOnly,
-      };
-
-      this.store.stockList[this.store.chosenStockListIndex] = stockObj;
     },
   },
 });

src/components/sections/LogoSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="logo-section">
+  <section class="logo-section" @click="navigate">
     <img src="/images/logo.svg" alt="logo pojazdownik" />
   </section>
 </template>
@@ -9,6 +9,12 @@ export default {
   setup() {
     return {};
   },
+
+  methods: {
+    navigate() {
+      window.location.pathname = '';
+    },
+  },
 };
 </script>
 
@@ -21,11 +27,13 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+
+  cursor: pointer;
 }
 
 img {
   max-width: 25em;
-  width: 100%;    
+  width: 100%;
 }
 </style>
 

src/components/sections/StockSection.vue

@@ -3,11 +3,13 @@
     <div class="section_modes">
       <button
         class="btn"
-        v-for="(id, name) in sectionModes"
+        ref="sectionButtonRefs"
+        v-for="(id, name, i) in sectionModes"
         @click="chooseSection(id)"
         :data-selected="store.stockSectionMode == id"
       >
-        {{ name }}
+        <span class="text--accent">{{ i + 1 }}.</span> {{ name }}
+        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
       </button>
     </div>
 
@@ -20,26 +22,52 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, KeepAlive } from 'vue';
+import { computed, KeepAlive, 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: { [key: string]: SectionMode } = {
   SKŁAD: 'stock-list',
-  'GNR. NUMERU': 'number-generator',
+  POJAZDY: 'wiki-list',
-  'GNR. SKŁADU': 'stock-generator',
+  'GNR NUMERU': 'number-generator',
+  'GNR SKŁADU': 'stock-generator',
 };
 
+const sectionKeyIndexes: { [key: number]: SectionMode } = {
+  1: 'stock-list',
+  2: 'wiki-list',
+  3: 'number-generator',
+  4: '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 = sectionKeyIndexes[keyNum];
+      (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;
 
@@ -83,7 +111,8 @@ function chooseSection(sectionId: SectionMode) {
 
 .section_modes {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+
   gap: 0.5em;
 
   margin-bottom: 0.5em;
@@ -110,5 +139,11 @@ function chooseSection(sectionId: SectionMode) {
     }
   }
 }
+
+@media screen and (max-width: 650px) {
+  .section_modes {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+}
 </style>
 

src/components/sections/TrainImageSection.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="train-image-section">
     <div class="train-image__wrapper">
-      <div class="train-image__content">
+      <div class="train-image__content" :class="{'supporter': store.chosenVehicle?.supportersOnly}">
         <transition name="img-message-anim">
           <div class="empty-message" v-if="store.imageLoading && store.chosenVehicle?.imageSrc">
             ŁADOWANIE OBRAZU...
@@ -44,6 +44,8 @@
                 : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
             }}
           </div>
+
+          <b style="color: salmon;" v-if="store.chosenVehicle.supportersOnly">* TYLKO DLA SPONSORÓW</b>
         </div>
       </div>
 
@@ -142,7 +144,7 @@ export default defineComponent({
       width: 100%;
       height: 100%;
 
-      cursor: pointer;
+      cursor: zoom-in;
     }
 
     .empty-message,

src/components/tabs/NumberGeneratorTab.vue

@@ -6,31 +6,40 @@
 
     <div class="tab_content">
       <div class="options">
-        <select v-model="beginRegionName" @change="randomizeTrainNumber">
+        <select v-model="beginRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Początkowy obszar konstrukcyjny</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
-        <select v-model="endRegionName" @change="randomizeTrainNumber">
+        <select v-model="endRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
 
-        <select v-model="categoryRules" @change="randomizeTrainNumber">
+        <select v-model="categoryRules" @change="randomizeTrainNumber()">
           <option :value="null" disabled>Kategoria pociągu</option>
           <option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
         </select>
       </div>
 
-      <div class="generated-number">
+      <div class="generated-number" @click="copyNumber">
-        <span v-if="trainNumber">Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b></span>
+        <span v-if="trainNumber">
-        <span v-else>Wybierz obszary konstrukcyjne i kategorię!</span>
+          Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b>
+        </span>
+        <span v-else>Wybierz kategorię oraz obszary konstrukcyjne (opcjonalnie)</span>
       </div>
 
-      <hr>
+      <div class="tab_links">
-      
+        <a href="https://wiki.td2.info.pl/index.php?title=Zasady_numeracji_poci%C4%85g%C3%B3w" target="_blank">
+          > Szczegółowe zasady numeracji (wikipedia TD2)
+        </a>
+      </div>
+
+      <hr />
+
       <div class="tab_actions">
-        <button class="btn" @click="randomizeTrainNumber">PRZELOSUJ</button>
+        <button class="btn" @click="randomizeTrainNumber(true)">LOSUJ OBSZARY</button>
+        <button class="btn" @click="randomizeTrainNumber(false)">LOSUJ NUMER</button>
       </div>
     </div>
   </div>
@@ -49,22 +58,43 @@ const categoryRules = ref(null) as Ref<string | null>;
 
 const trainNumber = ref(null) as Ref<string | null>;
 
-const randomizeTrainNumber = () => {
+const copyNumber = () => {
-  if (beginRegionName.value == null || endRegionName.value == null || categoryRules.value == null) return '';
+  if (trainNumber.value) {
+    navigator.clipboard.writeText(trainNumber.value);
+    alert('Skopiowano numer do schowka!');
+  }
+};
+
+const randomizeTrainNumber = (randomizeRegions = false) => {
+  if (categoryRules.value == null) return;
+
+  const regionKeys = Object.keys(genData.regionNumbers);
+
+  if (beginRegionName.value == null || randomizeRegions)
+    beginRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
+
+  if (endRegionName.value == null || randomizeRegions)
+    endRegionName.value = regionKeys[(regionKeys.length * Math.random()) << 0] as RegionName;
 
   let number = '';
 
   if (beginRegionName.value == endRegionName.value) {
-    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value];
+    const sameRegionsNumbers = genData.sameRegions[beginRegionName.value!];
     const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
     number += randRegionNumber.toString();
   } else {
-    const beginRegionNumber = genData.regionNumbers[beginRegionName.value];
+    const beginRegionNumber = genData.regionNumbers[beginRegionName.value!];
-    const endRegionNumber = genData.regionNumbers[endRegionName.value];
+    const endRegionNumber = genData.regionNumbers[endRegionName.value!];
 
     number += `${beginRegionNumber}${endRegionNumber}`;
   }
 
+  // Do not roll the rest of number again if only randomize regions
+  if (randomizeRegions) {
+    trainNumber.value = number + trainNumber.value?.substring(2);
+    return;
+  }
+
   const rulesArray = categoryRules.value.split(';').map((r) => ({
     index: r.split(':')[0],
     rule: r.split(':')[1],
@@ -104,6 +134,9 @@ const randomizeTrainNumber = () => {
 .generated-number {
   font-size: 1.3em;
   font-weight: bold;
+  text-align: center;
+
+  cursor: pointer;
 
   margin: 0.5em 0;
   padding: 0.5em;
@@ -111,11 +144,13 @@ const randomizeTrainNumber = () => {
 }
 
 .tab_actions {
-  margin-top: 0.5em;
+  grid-template-columns: 1fr 1fr;
+  margin: 0.5em 0;
+}
 
-  button {
+.tab_links {
-    grid-column: 3;
+  display: flex;
-  }
+  justify-content: flex-end;
 }
 
 @media screen and (max-width: $breakpointMd) {

src/components/tabs/StockGeneratorTab.vue

@@ -99,7 +99,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 
 import stockMixin from '../../mixins/stockMixin';
-import { ICargo, ICarWagon } from '../../types';
+import { ICargo, ICarWagon, IStock } from '../../types';
 import warningsMixin from '../../mixins/warningsMixin';
 
 export default defineComponent({
@@ -180,21 +180,42 @@ export default defineComponent({
         return acc;
       }, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
 
-      const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
+      let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };
 
-      this.store.stockList.length = headingLoco ? 1 : 0;
+      for (let i = 0; i < 10; i++) {
-      const maxMass = this.store.acceptableMass || this.maxMass;
+        const headingLoco = this.store.stockList[0]?.isLoco ? this.store.stockList[0] : undefined;
+        this.store.stockList.length = headingLoco ? 1 : 0;
 
-      new Array(this.maxCarCount).fill(0).forEach(() => {
+        const maxMass =
-        const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          this.store.acceptableMass > 0 ? Math.min(this.store.acceptableMass, this.maxMass) : this.maxMass;
-        const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
-        if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass) return;
+        let exceeded = false;
-        if (this.store.totalLength + carWagon.length > this.maxLength) return;
 
-        this.addCarWagon(carWagon, cargo);
+        while (!exceeded) {
-      });
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
 
+          if (
+            this.store.totalMass + (cargo?.totalMass || carWagon.mass) > maxMass ||
+            this.store.totalLength + carWagon.length > this.maxLength ||
+            this.store.stockList.length > this.maxCarCount
+          ) {
+            exceeded = true;
+            break;
+          }
+
+          this.addCarWagon(carWagon, cargo);
+        }
+
+        const currentGenerationValue = this.store.totalLength + this.store.totalMass + this.store.stockList.length;
+
+        if (bestGeneration.value < currentGenerationValue) {
+          bestGeneration.stockList = this.store.stockList;
+          bestGeneration.value = currentGenerationValue;
+        }
+      }
+
+      this.store.stockList = bestGeneration.stockList;
       this.store.stockSectionMode = 'stock-list';
     },
 
@@ -244,7 +265,7 @@ export default defineComponent({
 .generator_vehicles {
   display: grid;
   gap: 0.5em;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
 
   button {
     position: relative;
@@ -294,12 +315,5 @@ export default defineComponent({
   font-weight: bold;
   color: black;
 }
-
-@media only screen and (max-width: 470px) {
-  .generator_cargo,
-  .generator_vehicles {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
-}
 </style>
 

src/components/tabs/StockListTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="stock-list">
+  <section class="stock-list-tab">
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
@@ -68,7 +68,18 @@
       </span>
     </div>
 
-    <div class="stock_warnings">
+    <div class="stock_cold-start">
+      <label>
+        <input
+          type="checkbox"
+          v-model="store.isColdStart"
+          :disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')"
+        />
+        Zimny start lokomotywy czołowej (tylko elektrowozy typów 303E i 203E)
+      </label>
+    </div>
+
+    <div class="stock_warnings" v-if="stockHasWarnings">
       <div class="warning" v-if="locoNotSuitable">
         Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
       </div>
@@ -94,7 +105,7 @@
       <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
     </div>
 
-    <StockThumbnails :onListItemClick="onListItemClick" :onStockImageError="stockImageError" />
+    <StockThumbnails :onListItemClick="onListItemClick" />
 
     <!-- Stock list -->
     <ul ref="stock_list">
@@ -127,7 +138,7 @@
               {{ i + 1 }}.
             </span>
 
-            <span class="stock-info__type">
+            <span class="stock-info__type" :class="{ supporter: stock.supportersOnly }">
               {{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
             </span>
 
@@ -147,10 +158,11 @@ import { defineComponent } from 'vue';
 import TrainImage from '../sections/TrainImageSection.vue';
 
 import { useStore } from '../../store';
+
+import { locoSupportsColdStart } from '../../utils/locoUtils';
 import warningsMixin from '../../mixins/warningsMixin';
 import imageMixin from '../../mixins/imageMixin';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { IStock } from '../../types';
 import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
 
@@ -177,13 +189,12 @@ export default defineComponent({
   computed: {
     stockString() {
       return this.store.stockList
-        .map((stock) => {
+        .map((stock, i) => {
-          let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
+          let coldStart =
+            i == 0 && this.store.isColdStart && locoSupportsColdStart(stock.constructionType || '') ? ',c' : '';
 
-          let final = s;
+          return stockTypeStr + coldStart;
-          for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
-
-          return final;
         })
         .join(';');
     },
@@ -195,23 +206,16 @@ export default defineComponent({
     chosenStockVehicle() {
       return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
     },
-  },
 
-  methods: {
     stockHasWarnings() {
       return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
     },
+  },
 
-    stockImageError(e: Event, stock: IStock): void {
+  methods: {
-      (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
+    locoSupportsColdStart,
-    },
 
     copyToClipboard() {
-      // if (this.stockHasWarnings()) {
-      //   alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-      //   return;
-      // }
-
       navigator.clipboard.writeText(this.stockString);
 
       setTimeout(() => {
@@ -320,9 +324,6 @@ export default defineComponent({
     downloadStock() {
       if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
 
-      // if (this.stockHasWarnings())
-      //   return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
-
       const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
         this.store.totalMass
       }t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
@@ -398,6 +399,11 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/global';
 
+.stock-list-tab {
+  display: grid;
+  grid-gap: 0.5em;
+}
+
 .warning {
   padding: 0.25em;
   background: $accentColor;
@@ -420,7 +426,6 @@ export default defineComponent({
   flex-wrap: wrap;
 
   padding: 0.5em;
-  margin-bottom: 1em;
 
   background-color: #353a57;
 
@@ -453,7 +458,6 @@ export default defineComponent({
 .stock_actions {
   display: grid;
   gap: 0.5em;
-  margin-bottom: 1em;
 
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 
@@ -475,9 +479,7 @@ export default defineComponent({
 
 ul {
   position: relative;
-
   overflow: auto;
-
   height: 500px;
 }
 
@@ -521,8 +523,8 @@ li > .stock-info {
   }
 }
 
-.stock_warnings {
+.supporter {
-  margin: 0.5em 0;
+  color: salmon;
 }
 
 .stock-info {

src/components/tabs/WikiListTab.vue

@@ -0,0 +1,361 @@
+<template>
+  <section class="wiki-list tab">
+    <div class="tab_header">
+      <h2>LISTA DOSTĘPNYCH POJAZDÓW</h2>
+    </div>
+
+    <div class="tab_content">
+      <div class="actions-panel">
+        <div class="actions-panel_vehicles">
+          <button class="btn btn--choice" @click="changeWikiMode('locomotives')">POJ. TRAKCYJNE</button>
+          <button class="btn btn--choice" @click="changeWikiMode('carWagons')">WAGONY</button>
+        </div>
+
+        <div class="actions-panel_search">
+          <input type="text" placeholder="Wyszukaj pojazd..." v-model="searchedVehicleTypeName" />
+        </div>
+      </div>
+
+      <div class="table-wrapper" @scroll="scrollEvent" ref="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th v-for="header in wikiMode == 'locomotives' ? locoHeaders : carHeaders" @click="toggleSorter(header)">
+                {{ header.name }}
+
+                <span v-if="currentModeSorter.id == header.id">
+                  {{ currentModeSorter.direction == 1 ? `&uArr;` : `&dArr;` }}
+                </span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody v-if="wikiMode == 'locomotives'">
+            <tr
+              v-for="loco in computedLocoList"
+              @click="previewLocomotive(loco)"
+              @keydown.enter="previewLocomotive(loco)"
+              @dblclick="addLocomotive(loco)"
+              tabindex="0"
+            >
+              <td>
+                <img
+                  :src="`https://spythere.github.io/api/td2/images/${loco.type}--300px.jpg`"
+                  loading="lazy"
+                  :alt="`Lokomotywa ${loco.type}`"
+                />
+              </td>
+
+              <td>{{ loco.type }}</td>
+              <td>{{ vehicleTypes[loco.power] }}</td>
+              <td>{{ loco.constructionType }}</td>
+              <td>{{ locoSupportsColdStart(loco.constructionType) ? `&check;` : '&cross;' }}</td>
+              <td>{{ loco.length }}m</td>
+              <td>{{ loco.mass }}t</td>
+              <td>{{ loco.maxSpeed }}km/h</td>
+            </tr>
+          </tbody>
+
+          <tbody v-else>
+            <tr
+              v-for="car in computedCarList"
+              @keydow.enter="previewCarWagon(car)"
+              @click="previewCarWagon(car)"
+              @dblclick="addCarWagon(car)"
+              tabindex="0"
+            >
+              <td>
+                <img
+                  :src="`https://spythere.github.io/api/td2/images/${car.type}--300px.jpg`"
+                  loading="lazy"
+                  :alt="`Lokomotywa ${car.type}`"
+                />
+              </td>
+
+              <td>{{ car.type }}</td>
+              <td>{{ car.constructionType }}</td>
+              <td>{{ car.length }}m</td>
+              <td>{{ car.mass }}t</td>
+              <td>{{ car.maxSpeed }}km/h</td>
+              <td>{{ car.cargoList.length == 0 ? '-' : car.cargoList.length }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import stockPreviewMixin from '../../mixins/stockPreviewMixin';
+import { Vehicle } from '../../types';
+import { isLocomotive } from '../../utils/vehicleUtils';
+import stockMixin from '../../mixins/stockMixin';
+import { locoSupportsColdStart } from '../../utils/locoUtils';
+
+type WikiMode = 'locomotives' | 'carWagons';
+type SorterID =
+  | 'type'
+  | 'constructionType'
+  | 'image'
+  | 'length'
+  | 'mass'
+  | 'maxSpeed'
+  | 'cargoCount'
+  | 'power'
+  | 'coldStart';
+
+interface WikiHeader {
+  name: string;
+  id: SorterID;
+  sortable: boolean;
+}
+
+const locoHeaders: WikiHeader[] = [
+  { name: 'Zdjęcie', id: 'image', sortable: false },
+  { name: 'Nazwa', id: 'type', sortable: true },
+  { name: 'Rodzaj', id: 'power', sortable: true },
+  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
+  { name: 'Zimny start', id: 'coldStart', sortable: true },
+  { name: 'Długość', id: 'length', sortable: true },
+  { name: 'Masa', id: 'mass', sortable: true },
+  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
+];
+
+const carHeaders: WikiHeader[] = [
+  { name: 'Zdjęcie', id: 'image', sortable: false },
+  { name: 'Nazwa', id: 'type', sortable: true },
+  { name: 'Konstrukcja', id: 'constructionType', sortable: true },
+  { name: 'Długość', id: 'length', sortable: true },
+  { name: 'Masa', id: 'mass', sortable: true },
+  { name: 'Prędkość', id: 'maxSpeed', sortable: true },
+  { name: 'Ładunki', id: 'cargoCount', sortable: true },
+];
+
+const vehicleTypes: { [key: string]: string } = {
+  'loco-ezt': 'EZT',
+  'loco-szt': 'SZT',
+  'loco-s': 'Spalinowóz',
+  'loco-e': 'Elektrowóz',
+};
+
+export default defineComponent({
+  mixins: [stockPreviewMixin, stockMixin],
+
+  data() {
+    return {
+      store: useStore(),
+      locoHeaders,
+      carHeaders,
+      vehicleTypes,
+
+      locosScrollTop: 0,
+      carsScrollTop: 0,
+
+      wikiMode: 'locomotives' as WikiMode,
+      searchedVehicleTypeName: '',
+
+      currentLocoSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+
+      currentCarSorter: {
+        id: 'type' as SorterID,
+        direction: 1,
+      },
+    };
+  },
+
+  activated() {
+    const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
+    tableWrapperRef.scrollTo({ top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop });
+  },
+
+  methods: {
+    locoSupportsColdStart,
+
+    scrollEvent(e: Event) {
+      const tableScrollTop = (e.target as HTMLElement).scrollTop;
+
+      if (this.wikiMode == 'locomotives') this.locosScrollTop = tableScrollTop;
+      else this.carsScrollTop = tableScrollTop;
+    },
+
+    changeWikiMode(wikiMode: WikiMode) {
+      this.searchedVehicleTypeName = '';
+      this.wikiMode = wikiMode;
+    },
+
+    toggleSorter(header: WikiHeader) {
+      if (!header.sortable) return;
+
+      if (header.id == this.currentModeSorter.id) this.currentModeSorter.direction *= -1;
+      this.currentModeSorter.id = header.id;
+    },
+
+    sortVehicles(vA: Vehicle, vB: Vehicle) {
+      const { id, direction } = this.currentModeSorter;
+      const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
+      const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
+
+      switch (id) {
+        case 'type':
+        case 'constructionType':
+          return direction == 1 ? vA[id].localeCompare(vB[id]) : vB[id].localeCompare(vA[id]);
+
+        case 'mass':
+        case 'length':
+        case 'maxSpeed':
+          return Math.sign(vA[id] - vB[id]) * direction;
+
+        case 'cargoCount':
+          if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
+
+        case 'coldStart':
+          if (vehiclesAreLocos)
+            return (
+              (locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) *
+              direction
+            );
+
+        default:
+          break;
+      }
+
+      return direction == 1 ? vA.type.localeCompare(vB.type) : vB.type.localeCompare(vA.type);
+    },
+  },
+
+  computed: {
+    currentModeSorter() {
+      return this.wikiMode == 'carWagons' ? this.currentCarSorter : this.currentLocoSorter;
+    },
+
+    computedLocoList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+
+      return this.store.locoDataList
+        .filter((loco) => new RegExp(`${trimmedSearchValue}`, 'i').test(loco.type))
+        .sort(this.sortVehicles);
+    },
+
+    computedCarList() {
+      const trimmedSearchValue = this.searchedVehicleTypeName.trim();
+
+      return this.store.carDataList
+        .filter((car) => new RegExp(`${trimmedSearchValue}`, 'i').test(car.type))
+        .sort(this.sortVehicles);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/tab.scss';
+
+.actions-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  margin: 0.5em 0;
+}
+
+.actions-panel_vehicles {
+  display: flex;
+  gap: 0.5em;
+}
+
+.actions-panel_search {
+  input {
+    width: auto;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  height: 750px;
+  max-height: 95vh;
+}
+
+.wiki-list table {
+  border-collapse: collapse;
+  width: 100%;
+
+  thead {
+    position: sticky;
+    top: 0;
+  }
+
+  th {
+    background-color: #111;
+    padding: 0.5em;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+  }
+
+  tr {
+    cursor: pointer;
+    background-color: #333;
+
+    &:nth-child(odd) {
+      background-color: #444;
+    }
+
+    &:hover {
+      background-color: #666;
+    }
+  }
+
+  td {
+    text-align: center;
+    padding: 0.25em;
+    height: 85px;
+  }
+
+  td:first-child {
+    width: 120px;
+  }
+
+  td img {
+    display: block;
+    width: 120px;
+  }
+}
+
+@media screen and (max-width: $breakpointMd) {
+  .wiki-list table {
+    td {
+      width: 100px;
+      height: auto;
+
+      img {
+        width: 6em;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $breakpointSm) {
+  .actions-panel {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  
+  .actions-panel_vehicles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .actions-panel_search {
+    display: grid;
+  }
+}
+</style>

src/components/utils/ImageFullscreenPreview.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="image-preview"
+    @click="store.vehiclePreviewSrc = ''"
+    @keydown.esc="store.vehiclePreviewSrc = ''"
+    tabindex="0"
+  >
+    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  mounted() {
+    this.$el.focus();
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgba(black, 0.85);
+  cursor: zoom-out;
+
+  img {
+    max-width: 100%;
+    height: auto;
+    max-height: 100%;
+  }
+}
+</style>

src/components/utils/StockThumbnails.vue

@@ -9,7 +9,7 @@
       @dragover="allowDrop"
     >
       <span @click="onListItemClick(stockIndex)" :key="stock.id">
-        <b>
+        <b :class="{ supporter: stock.supportersOnly }">
           {{ stock.type }}
         </b>
 
@@ -33,7 +33,7 @@ import { useStore } from '../../store';
 import { IStock } from '../../types';
 
 const store = useStore();
-const emit = defineEmits(['listItemClick', 'stockImageError']);
+const emit = defineEmits(['listItemClick']);
 
 const thumbnailsRef = ref() as Ref<HTMLElement>;
 const draggedIndex = ref(-1);
@@ -43,7 +43,7 @@ const onListItemClick = (index: number) => {
 };
 
 const stockImageError = (e: Event, stock: IStock) => {
-  emit('stockImageError', e, stock);
+  (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
 };
 
 watch(
@@ -86,10 +86,7 @@ const allowDrop = (e: DragEvent) => {
 <style lang="scss" scoped>
 .stock_thumbnails {
   display: flex;
-  margin: 1em 0;
-
   overflow: auto;
-
   background-color: #353a57;
 
   > div {
@@ -120,5 +117,9 @@ const allowDrop = (e: DragEvent) => {
     max-height: 60px;
   }
 }
+
+.supporter {
+  color: salmon;
+}
 </style>
 

src/constants/numberGeneratorData.json

@@ -27,8 +27,7 @@
   },
   "categories": {
     "ekspres krajowy (EI)": "2:00-99:2",
-    "międzywojewódzki pośpieszny (MP)": "2:050-169:3",
+    "(między)wojewódzki pośpieszny (MP/RP)": "2:050-169:3",
-    "wojewódzki pośpieszny (RP)": "2:050-169:3",
     "wojewódzki osobowy (RO)": "2:200-999:3",
     "próżny \"służbowy\" (PW)": "2:6;3:0-899:3",
     "towarowy do przewozów masowych (TM)": "2:4;3:0-899:3",

src/constants/speedLimits.json

@@ -7,6 +7,14 @@
       "2000": 70
     }
   },
+  "EU07E": {
+    "passenger": {
+      "650": 125
+    },
+    "cargo": {
+      "2000": 70
+    }
+  },
   "EP07": {
     "passenger": {
       "650": 125
@@ -51,3 +59,4 @@
   }
 }
 
+

src/mixins/stockMixin.ts

@@ -29,7 +29,8 @@ export default defineComponent({
         count,
         imgSrc: vehicle.imageSrc,
         useType: isLoco ? vehicle.power : vehicle.useType,
-        supportersOnly: false,
+        supportersOnly: vehicle.supportersOnly,
+        constructionType: vehicle.constructionType,
       };
     },
 
@@ -43,13 +44,6 @@ export default defineComponent({
     },
 
     addLocomotive(loco: ILocomotive) {
-      // const previousStock =
-      //   this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-      // if (previousStock && previousStock.type == loco.type) {
-      //   this.store.stockList[this.store.stockList.length - 1].count++;
-      //   return;
-      // }
-
       const stockObj = this.getStockObject(loco);
 
       if (this.store.stockList.length > 0 && !this.store.stockList[0].isLoco) this.store.stockList.unshift(stockObj);
@@ -57,15 +51,6 @@ export default defineComponent({
     },
 
     addCarWagon(car: ICarWagon, cargo?: ICargo) {
-      // const previousStock =
-      //   this.store.stockList.length > 0 ? this.store.stockList[this.store.stockList.length - 1] : null;
-
-      // if (previousStock && previousStock.type == car.type && previousStock.cargo?.id == cargo?.id) {
-      //   this.store.stockList[this.store.stockList.length - 1].count++;
-
-      //   return;
-      // }
-
       const stockObj = this.getStockObject(car, cargo);
 
       this.store.stockList.push(stockObj);
@@ -83,13 +68,15 @@ export default defineComponent({
 
       this.store.swapVehicles = false;
 
-      stockArray.forEach((type) => {
+      stockArray.forEach((type, i) => {
         let vehicle: Vehicle | null = null;
         let vehicleCargo: ICargo | null = null;
 
         if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type)) {
           const [locoType, coldStart] = type.split(',');
           vehicle = this.store.locoDataList.find((loco) => loco.type == locoType) || null;
+
+          if (i == 0 && coldStart == 'c') this.store.isColdStart = true;
         } else {
           const [carType, cargo] = type.split(':');
           vehicle = this.store.carDataList.find((car) => car.type == carType) || null;

src/mixins/stockPreviewMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { IStock, Vehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, Vehicle } from '../types';
 
 export default defineComponent({
   setup() {
@@ -48,7 +48,7 @@ export default defineComponent({
       });
     },
 
-    previewStock(stock: IStock) {      
+    previewStock(stock: IStock) {
       if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true;
 
       if (stock.isLoco) {
@@ -67,14 +67,26 @@ export default defineComponent({
       }
     },
 
+    previewLocomotive(loco: ILocomotive) {
+      this.store.chosenLoco = loco;
+      this.store.chosenVehicle = loco;
+      this.store.chosenLocoPower = loco.power;
+    },
+
+    previewCarWagon(carWagon: ICarWagon) {
+      this.store.chosenCar = carWagon;
+      this.store.chosenCarUseType = carWagon.useType;
+      this.store.chosenVehicle = carWagon;
+
+      this.store.chosenCargo = null;
+    },
+
     resetPreview() {
-        this.store.chosenVehicle = null;
+      this.store.chosenVehicle = null;
-        this.store.chosenCar = null;
+      this.store.chosenCar = null;
-        this.store.chosenCargo = null;
+      this.store.chosenCargo = null;
-        this.store.chosenLoco = null;
+      this.store.chosenLoco = null;
-    }
+    },
   },
 });
 
-
-

src/mixins/warningsMixin.ts

@@ -26,7 +26,7 @@ export default defineComponent({
         !this.store.isTrainPassenger &&
         this.store.stockList.length > 1 &&
         !this.store.stockList.every((stock) => stock.isLoco) &&
-        this.store.stockList.find((stock) => stock.isLoco && stock.type.startsWith('EP'))
+        this.store.stockList.some((stock) => stock.isLoco && stock.type.startsWith('EP'))
       );
     },
 

src/store.ts

@@ -20,6 +20,8 @@ export const useStore = defineStore({
       chosenCargo: null,
       chosenVehicle: null,
 
+      isColdStart: false,
+
       showSupporter: false,
       imageLoading: false,
 
@@ -29,7 +31,7 @@ export const useStore = defineStore({
       stockList: [],
       cargoOptions: [],
 
-      readyStockList: {},
+      readyStockList: [],
 
       swapVehicles: false,
 
@@ -56,5 +58,29 @@ export const useStore = defineStore({
     chosenRealStock: (state) => chosenRealStock(state),
     acceptableMass: (state) => acceptableMass(state),
   },
+
+  actions: {
+    async fetchStockInfoData() {
+      const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
+      this.stockData = stockData;
+    },
+
+    handleRouting() {
+      switch (window.location.pathname) {
+        case '/numgnr':
+          this.stockSectionMode = 'number-generator';
+          break;
+        case '/stockgnr':
+          this.stockSectionMode = 'stock-generator';
+          break;
+        case '/vehicles':
+          this.stockSectionMode = 'wiki-list';
+          break;
+        default:
+          break;
+      }
+    },
+  },
 });
 
+

src/styles/global.scss

@@ -48,6 +48,8 @@ a {
   color: white;
   text-decoration: none;
 
+  transition: color 250ms;
+
   &:visited {
     color: white;
   }
@@ -132,9 +134,10 @@ button {
 }
 
 select,
-input {
+input[type="text"],
+input[type="number"] {
   background: none;
-  border: 2px solid white;
+  border: 2px solid #aaa;
   outline: none;
 
   padding: 0.25em 0.35em;
@@ -154,8 +157,9 @@ input {
 }
 
 option {
-  color: black;
+  color: white;
   border: none;
+  background-color: $bgColor;
 }
 
 ul {
@@ -176,7 +180,7 @@ ul {
 
 .g-card {
   position: fixed;
-  top: 0;
+  top: 1em;
   left: 0;
 
   width: 100vw;
@@ -184,7 +188,6 @@ ul {
 
   display: flex;
   justify-content: center;
-  align-items: center;
 
   z-index: 200;
 

src/types.ts

@@ -5,9 +5,10 @@ export interface IStore {
   chosenCar: ICarWagon | null;
   chosenLoco: ILocomotive | null;
   chosenCargo: ICargo | null;
-
   chosenVehicle: Vehicle | null;
 
+  isColdStart: boolean;
+
   showSupporter: boolean;
   imageLoading: boolean;
 
@@ -15,7 +16,7 @@ export interface IStore {
   chosenCarUseType: string;
 
   stockList: IStock[];
-  readyStockList: IReadyStockList;
+  readyStockList: IReadyStockItem[];
   cargoOptions: any[][];
 
   chosenStockListIndex: number;
@@ -27,7 +28,7 @@ export interface IStore {
   isRandomizerCardOpen: boolean;
   isRealStockListCardOpen: boolean;
 
-  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator';
+  stockSectionMode: 'stock-list' | 'stock-generator' | 'number-generator' | 'wiki-list';
   stockData?: IStockData;
 }
 
@@ -41,8 +42,10 @@ export interface IStockProps {
 }
 
 export interface IStockData {
+  version: string;
+
   generator: {
-    passenger: [];
+    passenger: any;
     cargo: {
       [key: string]: string[];
     };
@@ -97,8 +100,9 @@ export interface ICargo {
 
 export interface IStock {
   id: string;
-  useType: string;
   type: string;
+  useType: string;
+  constructionType: string;
   length: number;
   mass: number;
   maxSpeed: number;
@@ -109,11 +113,11 @@ export interface IStock {
   imgSrc?: string;
 }
 
-export interface IReadyStockList {
+export interface IReadyStockItem {
-  [key: string]: { stockString: string; type: string; number: string; name: string };
+  stockId: string;
+  stockString: string;
+  type: string;
+  number: string;
+  name: string;
 }
 
-
-
-
-

src/utils/locoUtils.ts

@@ -0,0 +1,5 @@
+const supportedConstructions = ['303e', '203e'];
+
+export function locoSupportsColdStart(constructionType: string) {
+  return new RegExp(`(${supportedConstructions.join('|')})`).test(constructionType);
+}

src/utils/vehicleUtils.ts

@@ -152,13 +152,9 @@ export function chosenRealStock(state: IStore) {
     }, [] as string[])
     .join(';');
 
-  const realStockObj = Object.values(state.readyStockList).find(
+  const realStockObj = state.readyStockList.find((readyStock) => readyStock.stockString == currentStockString);
-    (readyStock) => readyStock.stockString == currentStockString
-  );
 
-  state.chosenRealStockName = realStockObj
+  state.chosenRealStockName = realStockObj?.stockId ?? undefined;
-    ? `${realStockObj.type} ${realStockObj.number} ${realStockObj.name}`
-    : undefined;
 
   return realStockObj;
 }

src/views/AppContainerView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <MainContainer />
+    <Footer />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+import MainContainer from '../components/app/MainContainer.vue';
+import Footer from '../components/app/Footer.vue';
+
+export default defineComponent({
+  components: {
+    MainContainer,
+    Footer,
+  },
+
+  data: () => ({
+    store: useStore(),
+  }),
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

vite.config.ts

@@ -5,33 +5,36 @@ import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    port: 2137,
+  },
   plugins: [
     vue(),
     VitePWA({
       registerType: 'autoUpdate',
+
       workbox: {
-        globPatterns: ['**/*.{js,css,html,png,svg,img}'],
+        // globPatterns: ['**/*.{js,css,html,png,svg,img}'],
-        // runtimeCaching: [
+
-        //   {
+        runtimeCaching: [
-        //     urlPattern: new RegExp(`^https://spythere.github.io/api\/.*`),
+          {
-        //     handler: 'NetworkFirst',
+            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
-        //     options: {
+            handler: 'CacheFirst',
-        //       cacheName: 'github-api-cache',
+            options: {
-        //       expiration: {
+              cacheName: 'swdr-images-cache',
-        //         maxEntries: 2,
+              expiration: {
-        //         maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
+                maxEntries: 50,
-        //       },
+                maxAgeSeconds: 60 * 60 * 24 * 7, // <== 7 days
-        //       cacheableResponse: {
+              },
-        //         statuses: [0, 200],
+              cacheableResponse: {
-        //       },
+                statuses: [404],
-        //     },
+              },
-        //   },
+            },
-        // ],
+          },
-      },
+        ],
-      devOptions: {
-        enabled: true,
       },
     }),
   ],
 });
 
+

yarn.lock

@@ -909,15 +909,115 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@esbuild/android-arm@0.15.13":
+"@esbuild/android-arm64@0.17.15":
-  version "0.15.13"
+  version "0.17.15"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.13.tgz#ce11237a13ee76d5eae3908e47ba4ddd380af86a"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.15.tgz#893ad71f3920ccb919e1757c387756a9bca2ef42"
-  integrity sha512-RY2fVI8O0iFUNvZirXaQ1vMvK0xhCcl0gqRj74Z6yEiO1zAUa7hbsdwZM1kzqbxHK7LFyMizipfXT3JME+12Hw==
+  integrity sha512-0kOB6Y7Br3KDVgHeg8PRcvfLkq+AccreK///B4Z6fNZGr/tNHX0z2VywCc7PTeWp+bPvjA5WMvNXltHw5QjAIA==
 
-"@esbuild/linux-loong64@0.15.13":
+"@esbuild/android-arm@0.17.15":
-  version "0.15.13"
+  version "0.17.15"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.13.tgz#64e8825bf0ce769dac94ee39d92ebe6272020dfc"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.15.tgz#143e0d4e4c08c786ea410b9a7739779a9a1315d8"
-  integrity sha512-+BoyIm4I8uJmH/QDIH0fu7MG0AEx9OXEDXnqptXCwKOlOqZiS4iraH1Nr7/ObLMokW3sOCeBNyD68ATcV9b9Ag==
+  integrity sha512-sRSOVlLawAktpMvDyJIkdLI/c/kdRTOqo8t6ImVxg8yT7LQDUYV5Rp2FKeEosLr6ZCja9UjYAzyRSxGteSJPYg==
+
+"@esbuild/android-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.15.tgz#d2d12a7676b2589864281b2274355200916540bc"
+  integrity sha512-MzDqnNajQZ63YkaUWVl9uuhcWyEyh69HGpMIrf+acR4otMkfLJ4sUCxqwbCyPGicE9dVlrysI3lMcDBjGiBBcQ==
+
+"@esbuild/darwin-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.15.tgz#2e88e79f1d327a2a7d9d06397e5232eb0a473d61"
+  integrity sha512-7siLjBc88Z4+6qkMDxPT2juf2e8SJxmsbNVKFY2ifWCDT72v5YJz9arlvBw5oB4W/e61H1+HDB/jnu8nNg0rLA==
+
+"@esbuild/darwin-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.15.tgz#9384e64c0be91388c57be6d3a5eaf1c32a99c91d"
+  integrity sha512-NbImBas2rXwYI52BOKTW342Tm3LTeVlaOQ4QPZ7XuWNKiO226DisFk/RyPk3T0CKZkKMuU69yOvlapJEmax7cg==
+
+"@esbuild/freebsd-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.15.tgz#2ad5a35bc52ebd9ca6b845dbc59ba39647a93c1a"
+  integrity sha512-Xk9xMDjBVG6CfgoqlVczHAdJnCs0/oeFOspFap5NkYAmRCT2qTn1vJWA2f419iMtsHSLm+O8B6SLV/HlY5cYKg==
+
+"@esbuild/freebsd-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.15.tgz#b513a48446f96c75fda5bef470e64d342d4379cd"
+  integrity sha512-3TWAnnEOdclvb2pnfsTWtdwthPfOz7qAfcwDLcfZyGJwm1SRZIMOeB5FODVhnM93mFSPsHB9b/PmxNNbSnd0RQ==
+
+"@esbuild/linux-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.15.tgz#9697b168175bfd41fa9cc4a72dd0d48f24715f31"
+  integrity sha512-T0MVnYw9KT6b83/SqyznTs/3Jg2ODWrZfNccg11XjDehIved2oQfrX/wVuev9N936BpMRaTR9I1J0tdGgUgpJA==
+
+"@esbuild/linux-arm@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.15.tgz#5b22062c54f48cd92fab9ffd993732a52db70cd3"
+  integrity sha512-MLTgiXWEMAMr8nmS9Gigx43zPRmEfeBfGCwxFQEMgJ5MC53QKajaclW6XDPjwJvhbebv+RzK05TQjvH3/aM4Xw==
+
+"@esbuild/linux-ia32@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.15.tgz#eb28a13f9b60b5189fcc9e98e1024f6b657ba54c"
+  integrity sha512-wp02sHs015T23zsQtU4Cj57WiteiuASHlD7rXjKUyAGYzlOKDAjqK6bk5dMi2QEl/KVOcsjwL36kD+WW7vJt8Q==
+
+"@esbuild/linux-loong64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.15.tgz#32454bdfe144cf74b77895a8ad21a15cb81cfbe5"
+  integrity sha512-k7FsUJjGGSxwnBmMh8d7IbObWu+sF/qbwc+xKZkBe/lTAF16RqxRCnNHA7QTd3oS2AfGBAnHlXL67shV5bBThQ==
+
+"@esbuild/linux-mips64el@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.15.tgz#af12bde0d775a318fad90eb13a0455229a63987c"
+  integrity sha512-ZLWk6czDdog+Q9kE/Jfbilu24vEe/iW/Sj2d8EVsmiixQ1rM2RKH2n36qfxK4e8tVcaXkvuV3mU5zTZviE+NVQ==
+
+"@esbuild/linux-ppc64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.15.tgz#34c5ed145b2dfc493d3e652abac8bd3baa3865a5"
+  integrity sha512-mY6dPkIRAiFHRsGfOYZC8Q9rmr8vOBZBme0/j15zFUKM99d4ILY4WpOC7i/LqoY+RE7KaMaSfvY8CqjJtuO4xg==
+
+"@esbuild/linux-riscv64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.15.tgz#87bd515e837f2eb004b45f9e6a94dc5b93f22b92"
+  integrity sha512-EcyUtxffdDtWjjwIH8sKzpDRLcVtqANooMNASO59y+xmqqRYBBM7xVLQhqF7nksIbm2yHABptoioS9RAbVMWVA==
+
+"@esbuild/linux-s390x@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.15.tgz#20bf7947197f199ddac2ec412029a414ceae3aa3"
+  integrity sha512-BuS6Jx/ezxFuHxgsfvz7T4g4YlVrmCmg7UAwboeyNNg0OzNzKsIZXpr3Sb/ZREDXWgt48RO4UQRDBxJN3B9Rbg==
+
+"@esbuild/linux-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.15.tgz#31b93f9c94c195e852c20cd3d1914a68aa619124"
+  integrity sha512-JsdS0EgEViwuKsw5tiJQo9UdQdUJYuB+Mf6HxtJSPN35vez1hlrNb1KajvKWF5Sa35j17+rW1ECEO9iNrIXbNg==
+
+"@esbuild/netbsd-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.15.tgz#8da299b3ac6875836ca8cdc1925826498069ac65"
+  integrity sha512-R6fKjtUysYGym6uXf6qyNephVUQAGtf3n2RCsOST/neIwPqRWcnc3ogcielOd6pT+J0RDR1RGcy0ZY7d3uHVLA==
+
+"@esbuild/openbsd-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.15.tgz#04a1ec3d4e919714dba68dcf09eeb1228ad0d20c"
+  integrity sha512-mVD4PGc26b8PI60QaPUltYKeSX0wxuy0AltC+WCTFwvKCq2+OgLP4+fFd+hZXzO2xW1HPKcytZBdjqL6FQFa7w==
+
+"@esbuild/sunos-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.15.tgz#6694ebe4e16e5cd7dab6505ff7c28f9c1c695ce5"
+  integrity sha512-U6tYPovOkw3459t2CBwGcFYfFRjivcJJc1WC8Q3funIwX8x4fP+R6xL/QuTPNGOblbq/EUDxj9GU+dWKX0oWlQ==
+
+"@esbuild/win32-arm64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.15.tgz#1f95b2564193c8d1fee8f8129a0609728171d500"
+  integrity sha512-W+Z5F++wgKAleDABemiyXVnzXgvRFs+GVKThSI+mGgleLWluv0D7Diz4oQpgdpNzh4i2nNDzQtWbjJiqutRp6Q==
+
+"@esbuild/win32-ia32@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.15.tgz#c362b88b3df21916ed7bcf75c6d09c6bf3ae354a"
+  integrity sha512-Muz/+uGgheShKGqSVS1KsHtCyEzcdOn/W/Xbh6H91Etm+wiIfwZaBn1W58MeGtfI8WA961YMHFYTthBdQs4t+w==
+
+"@esbuild/win32-x64@0.17.15":
+  version "0.17.15"
+  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.15.tgz"
+  integrity sha512-DjDa9ywLUUmjhV2Y9wUTIF+1XsmuFGvZoCmOWkli1XcNAh5t25cc7fgsCx4Zi/Uurep3TTLyDiKATgGEg61pkA==
 
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
@@ -954,7 +1054,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -1016,13 +1116,13 @@
     "@rollup/pluginutils" "^3.1.0"
     magic-string "^0.25.7"
 
-"@rollup/plugin-replace@^4.0.0":
+"@rollup/plugin-replace@^5.0.1":
-  version "4.0.0"
+  version "5.0.2"
-  resolved "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-4.0.0.tgz"
+  resolved "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.2.tgz"
-  integrity sha512-+rumQFiaNac9y64OHtkHGmdjm7us9bo1PlbgQfdihQtuNxzjpaB064HbRnewUOggLQxVCCyINfStkgmBeQpv1g==
+  integrity sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==
   dependencies:
-    "@rollup/pluginutils" "^3.1.0"
+    "@rollup/pluginutils" "^5.0.1"
-    magic-string "^0.25.7"
+    magic-string "^0.27.0"
 
 "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
@@ -1033,6 +1133,15 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz"
@@ -1048,6 +1157,11 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/estree@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
 "@types/node@*":
   version "18.11.9"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz"
@@ -1065,55 +1179,54 @@
   resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz"
   integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
-"@vitejs/plugin-vue@^3.2.0":
+"@vitejs/plugin-vue@^4.1.0":
-  version "3.2.0"
+  version "4.1.0"
-  resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz"
+  resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz"
-  integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==
+  integrity sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==
 
-"@volar/language-core@1.0.9":
+"@volar/language-core@1.3.0-alpha.0":
-  version "1.0.9"
+  version "1.3.0-alpha.0"
-  resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.0.9.tgz"
+  resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.3.0-alpha.0.tgz"
-  integrity sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==
+  integrity sha512-W3uMzecHPcbwddPu4SJpUcPakRBK/y/BP+U0U6NiPpUX1tONLC4yCawt+QBJqtgJ+sfD6ztf5PyvPL3hQRqfOA==
   dependencies:
-    "@volar/source-map" "1.0.9"
+    "@volar/source-map" "1.3.0-alpha.0"
-    "@vue/reactivity" "^3.2.40"
-    muggle-string "^0.1.0"
 
-"@volar/source-map@1.0.9":
+"@volar/source-map@1.3.0-alpha.0":
-  version "1.0.9"
+  version "1.3.0-alpha.0"
-  resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-1.0.9.tgz"
+  resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-1.3.0-alpha.0.tgz"
-  integrity sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==
+  integrity sha512-jSdizxWFvDTvkPYZnO6ew3sBZUnS0abKCbuopkc0JrIlFbznWC/fPH3iPFIMS8/IIkRxq1Jh9VVG60SmtsdaMQ==
   dependencies:
-    muggle-string "^0.1.0"
+    muggle-string "^0.2.2"
 
-"@volar/typescript@1.0.9":
+"@volar/typescript@1.3.0-alpha.0":
-  version "1.0.9"
+  version "1.3.0-alpha.0"
-  resolved "https://registry.npmjs.org/@volar/typescript/-/typescript-1.0.9.tgz"
+  resolved "https://registry.npmjs.org/@volar/typescript/-/typescript-1.3.0-alpha.0.tgz"
-  integrity sha512-dVziu+ShQUWuMukM6bvK2v2O446/gG6l1XkTh2vfkccw1IzjfbiP1TWQoNo1ipTfZOtu5YJGYAx+o5HNrGXWfQ==
+  integrity sha512-5UItyW2cdH2mBLu4RrECRNJRgtvvzKrSCn2y3v/D61QwIDkGx4aeil6x8RFuUL5TFtV6QvVHXnsOHxNgd+sCow==
   dependencies:
-    "@volar/language-core" "1.0.9"
+    "@volar/language-core" "1.3.0-alpha.0"
 
-"@volar/vue-language-core@1.0.9":
+"@volar/vue-language-core@1.2.0":
-  version "1.0.9"
+  version "1.2.0"
-  resolved "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.0.9.tgz"
+  resolved "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.2.0.tgz"
-  integrity sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww==
+  integrity sha512-w7yEiaITh2WzKe6u8ZdeLKCUz43wdmY/OqAmsB/PGDvvhTcVhCJ6f0W/RprZL1IhqH8wALoWiwEh/Wer7ZviMQ==
   dependencies:
-    "@volar/language-core" "1.0.9"
+    "@volar/language-core" "1.3.0-alpha.0"
-    "@volar/source-map" "1.0.9"
+    "@volar/source-map" "1.3.0-alpha.0"
-    "@vue/compiler-dom" "^3.2.40"
+    "@vue/compiler-dom" "^3.2.47"
-    "@vue/compiler-sfc" "^3.2.40"
+    "@vue/compiler-sfc" "^3.2.47"
-    "@vue/reactivity" "^3.2.40"
+    "@vue/reactivity" "^3.2.47"
-    "@vue/shared" "^3.2.40"
+    "@vue/shared" "^3.2.47"
-    minimatch "^5.1.0"
+    minimatch "^6.1.6"
-    vue-template-compiler "^2.7.10"
+    muggle-string "^0.2.2"
+    vue-template-compiler "^2.7.14"
 
-"@volar/vue-typescript@1.0.9":
+"@volar/vue-typescript@1.2.0":
-  version "1.0.9"
+  version "1.2.0"
-  resolved "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.0.9.tgz"
+  resolved "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.2.0.tgz"
-  integrity sha512-ZLe4y9YNbviACa7uAMCilzxA76gbbSlKfjspXBzk6fCobd8QCIig+VyDYcjANIlm2HhgSCX8jYTzhCKlegh4mw==
+  integrity sha512-zjmRi9y3J1EkG+pfuHp8IbHmibihrKK485cfzsHjiuvJMGrpkWvlO5WVEk8oslMxxeGC5XwBFE9AOlvh378EPA==
   dependencies:
-    "@volar/typescript" "1.0.9"
+    "@volar/typescript" "1.3.0-alpha.0"
-    "@volar/vue-language-core" "1.0.9"
+    "@volar/vue-language-core" "1.2.0"
 
 "@vue/compiler-core@3.2.37":
   version "3.2.37"
@@ -1125,13 +1238,13 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-core@3.2.41":
+"@vue/compiler-core@3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz"
-  integrity sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==
+  integrity sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.41"
+    "@vue/shared" "3.2.47"
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
@@ -1143,13 +1256,13 @@
     "@vue/compiler-core" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-dom@3.2.41", "@vue/compiler-dom@^3.2.40":
+"@vue/compiler-dom@3.2.47", "@vue/compiler-dom@^3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz"
-  integrity sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==
+  integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
   dependencies:
-    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-core" "3.2.47"
-    "@vue/shared" "3.2.41"
+    "@vue/shared" "3.2.47"
 
 "@vue/compiler-sfc@3.2.37":
   version "3.2.37"
@@ -1167,17 +1280,17 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-sfc@^3.2.40":
+"@vue/compiler-sfc@^3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz"
-  integrity sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==
+  integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-core" "3.2.47"
-    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-dom" "3.2.47"
-    "@vue/compiler-ssr" "3.2.41"
+    "@vue/compiler-ssr" "3.2.47"
-    "@vue/reactivity-transform" "3.2.41"
+    "@vue/reactivity-transform" "3.2.47"
-    "@vue/shared" "3.2.41"
+    "@vue/shared" "3.2.47"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
     postcss "^8.1.10"
@@ -1191,13 +1304,13 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-ssr@3.2.41":
+"@vue/compiler-ssr@3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz"
-  integrity sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==
+  integrity sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==
   dependencies:
-    "@vue/compiler-dom" "3.2.41"
+    "@vue/compiler-dom" "3.2.47"
-    "@vue/shared" "3.2.41"
+    "@vue/shared" "3.2.47"
 
 "@vue/devtools-api@^6.2.1":
   version "6.2.1"
@@ -1215,14 +1328,14 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity-transform@3.2.41":
+"@vue/reactivity-transform@3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz"
-  integrity sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==
+  integrity sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==
   dependencies:
     "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.41"
+    "@vue/compiler-core" "3.2.47"
-    "@vue/shared" "3.2.41"
+    "@vue/shared" "3.2.47"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
@@ -1233,12 +1346,12 @@
   dependencies:
     "@vue/shared" "3.2.37"
 
-"@vue/reactivity@^3.2.40":
+"@vue/reactivity@^3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz"
-  integrity sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==
+  integrity sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==
   dependencies:
-    "@vue/shared" "3.2.41"
+    "@vue/shared" "3.2.47"
 
 "@vue/runtime-core@3.2.37":
   version "3.2.37"
@@ -1270,10 +1383,10 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz"
   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
 
-"@vue/shared@3.2.41", "@vue/shared@^3.2.40":
+"@vue/shared@3.2.47", "@vue/shared@^3.2.47":
-  version "3.2.41"
+  version "3.2.47"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
-  integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
+  integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
 acorn@^8.5.0:
   version "8.8.1"
@@ -1580,133 +1693,33 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild-android-64@0.15.13:
+esbuild@^0.17.5:
-  version "0.15.13"
+  version "0.17.15"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.13.tgz#5f25864055dbd62e250f360b38b4c382224063af"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz"
-  integrity sha512-yRorukXBlokwTip+Sy4MYskLhJsO0Kn0/Fj43s1krVblfwP+hMD37a4Wmg139GEsMLl+vh8WXp2mq/cTA9J97g==
+  integrity sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==
-
-esbuild-android-arm64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.13.tgz#d8820f999314efbe8e0f050653a99ff2da632b0f"
-  integrity sha512-TKzyymLD6PiVeyYa4c5wdPw87BeAiTXNtK6amWUcXZxkV51gOk5u5qzmDaYSwiWeecSNHamFsaFjLoi32QR5/w==
-
-esbuild-darwin-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.13.tgz#99ae7fdaa43947b06cd9d1a1c3c2c9f245d81fd0"
-  integrity sha512-WAx7c2DaOS6CrRcoYCgXgkXDliLnFv3pQLV6GeW1YcGEZq2Gnl8s9Pg7ahValZkpOa0iE/ojRVQ87sbUhF1Cbg==
-
-esbuild-darwin-arm64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.13.tgz#bafa1814354ad1a47adcad73de416130ef7f55e3"
-  integrity sha512-U6jFsPfSSxC3V1CLiQqwvDuj3GGrtQNB3P3nNC3+q99EKf94UGpsG9l4CQ83zBs1NHrk1rtCSYT0+KfK5LsD8A==
-
-esbuild-freebsd-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.13.tgz#84ef85535c5cc38b627d1c5115623b088d1de161"
-  integrity sha512-whItJgDiOXaDG/idy75qqevIpZjnReZkMGCgQaBWZuKHoElDJC1rh7MpoUgupMcdfOd+PgdEwNQW9DAE6i8wyA==
-
-esbuild-freebsd-arm64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.13.tgz#033f21de434ec8e0c478054b119af8056763c2d8"
-  integrity sha512-6pCSWt8mLUbPtygv7cufV0sZLeylaMwS5Fznj6Rsx9G2AJJsAjQ9ifA+0rQEIg7DwJmi9it+WjzNTEAzzdoM3Q==
-
-esbuild-linux-32@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.13.tgz#54290ea8035cba0faf1791ce9ae6693005512535"
-  integrity sha512-VbZdWOEdrJiYApm2kkxoTOgsoCO1krBZ3quHdYk3g3ivWaMwNIVPIfEE0f0XQQ0u5pJtBsnk2/7OPiCFIPOe/w==
-
-esbuild-linux-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.15.13.tgz"
-  integrity sha512-rXmnArVNio6yANSqDQlIO4WiP+Cv7+9EuAHNnag7rByAqFVuRusLbGi2697A5dFPNXoO//IiogVwi3AdcfPC6A==
-
-esbuild-linux-arm64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.13.tgz#9323c333924f97a02bdd2ae8912b36298acb312d"
-  integrity sha512-alEMGU4Z+d17U7KQQw2IV8tQycO6T+rOrgW8OS22Ua25x6kHxoG6Ngry6Aq6uranC+pNWNMB6aHFPh7aTQdORQ==
-
-esbuild-linux-arm@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.13.tgz#b407f47b3ae721fe4e00e19e9f19289bef87a111"
-  integrity sha512-Ac6LpfmJO8WhCMQmO253xX2IU2B3wPDbl4IvR0hnqcPrdfCaUa2j/lLMGTjmQ4W5JsJIdHEdW12dG8lFS0MbxQ==
-
-esbuild-linux-mips64le@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.13.tgz#bdf905aae5c0bcaa8f83567fe4c4c1bdc1f14447"
-  integrity sha512-47PgmyYEu+yN5rD/MbwS6DxP2FSGPo4Uxg5LwIdxTiyGC2XKwHhHyW7YYEDlSuXLQXEdTO7mYe8zQ74czP7W8A==
-
-esbuild-linux-ppc64le@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.13.tgz#2911eae1c90ff58a3bd3259cb557235df25aa3b4"
-  integrity sha512-z6n28h2+PC1Ayle9DjKoBRcx/4cxHoOa2e689e2aDJSaKug3jXcQw7mM+GLg+9ydYoNzj8QxNL8ihOv/OnezhA==
-
-esbuild-linux-riscv64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.13.tgz#1837c660be12b1d20d2a29c7189ea703f93e9265"
-  integrity sha512-+Lu4zuuXuQhgLUGyZloWCqTslcCAjMZH1k3Xc9MSEJEpEFdpsSU0sRDXAnk18FKOfEjhu4YMGaykx9xjtpA6ow==
-
-esbuild-linux-s390x@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.13.tgz#d52880ece229d1bd10b2d936b792914ffb07c7fc"
-  integrity sha512-BMeXRljruf7J0TMxD5CIXS65y7puiZkAh+s4XFV9qy16SxOuMhxhVIXYLnbdfLrsYGFzx7U9mcdpFWkkvy/Uag==
-
-esbuild-netbsd-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.13.tgz#de14da46f1d20352b43e15d97a80a8788275e6ed"
-  integrity sha512-EHj9QZOTel581JPj7UO3xYbltFTYnHy+SIqJVq6yd3KkCrsHRbapiPb0Lx3EOOtybBEE9EyqbmfW1NlSDsSzvQ==
-
-esbuild-openbsd-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.13.tgz#45e8a5fd74d92ad8f732c43582369c7990f5a0ac"
-  integrity sha512-nkuDlIjF/sfUhfx8SKq0+U+Fgx5K9JcPq1mUodnxI0x4kBdCv46rOGWbuJ6eof2n3wdoCLccOoJAbg9ba/bT2w==
-
-esbuild-sunos-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.13.tgz#f646ac3da7aac521ee0fdbc192750c87da697806"
-  integrity sha512-jVeu2GfxZQ++6lRdY43CS0Tm/r4WuQQ0Pdsrxbw+aOrHQPHV0+LNOLnvbN28M7BSUGnJnHkHm2HozGgNGyeIRw==
-
-esbuild-windows-32@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.13.tgz#fb4fe77c7591418880b3c9b5900adc4c094f2401"
-  integrity sha512-XoF2iBf0wnqo16SDq+aDGi/+QbaLFpkiRarPVssMh9KYbFNCqPLlGAWwDvxEVz+ywX6Si37J2AKm+AXq1kC0JA==
-
-esbuild-windows-64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.13.tgz#1fca8c654392c0c31bdaaed168becfea80e20660"
-  integrity sha512-Et6htEfGycjDrtqb2ng6nT+baesZPYQIW+HUEHK4D1ncggNrDNk3yoboYQ5KtiVrw/JaDMNttz8rrPubV/fvPQ==
-
-esbuild-windows-arm64@0.15.13:
-  version "0.15.13"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.13.tgz#4ffd01b6b2888603f1584a2fe96b1f6a6f2b3dd8"
-  integrity sha512-3bv7tqntThQC9SWLRouMDmZnlOukBhOCTlkzNqzGCmrkCJI7io5LLjwJBOVY6kOUlIvdxbooNZwjtBvj+7uuVg==
-
-esbuild@^0.15.9:
-  version "0.15.13"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.15.13.tgz"
-  integrity sha512-Cu3SC84oyzzhrK/YyN4iEVy2jZu5t2fz66HEOShHURcjSkOSAVL8C/gfUT+lDJxkVHpg8GZ10DD0rMHRPqMFaQ==
   optionalDependencies:
-    "@esbuild/android-arm" "0.15.13"
+    "@esbuild/android-arm" "0.17.15"
-    "@esbuild/linux-loong64" "0.15.13"
+    "@esbuild/android-arm64" "0.17.15"
-    esbuild-android-64 "0.15.13"
+    "@esbuild/android-x64" "0.17.15"
-    esbuild-android-arm64 "0.15.13"
+    "@esbuild/darwin-arm64" "0.17.15"
-    esbuild-darwin-64 "0.15.13"
+    "@esbuild/darwin-x64" "0.17.15"
-    esbuild-darwin-arm64 "0.15.13"
+    "@esbuild/freebsd-arm64" "0.17.15"
-    esbuild-freebsd-64 "0.15.13"
+    "@esbuild/freebsd-x64" "0.17.15"
-    esbuild-freebsd-arm64 "0.15.13"
+    "@esbuild/linux-arm" "0.17.15"
-    esbuild-linux-32 "0.15.13"
+    "@esbuild/linux-arm64" "0.17.15"
-    esbuild-linux-64 "0.15.13"
+    "@esbuild/linux-ia32" "0.17.15"
-    esbuild-linux-arm "0.15.13"
+    "@esbuild/linux-loong64" "0.17.15"
-    esbuild-linux-arm64 "0.15.13"
+    "@esbuild/linux-mips64el" "0.17.15"
-    esbuild-linux-mips64le "0.15.13"
+    "@esbuild/linux-ppc64" "0.17.15"
-    esbuild-linux-ppc64le "0.15.13"
+    "@esbuild/linux-riscv64" "0.17.15"
-    esbuild-linux-riscv64 "0.15.13"
+    "@esbuild/linux-s390x" "0.17.15"
-    esbuild-linux-s390x "0.15.13"
+    "@esbuild/linux-x64" "0.17.15"
-    esbuild-netbsd-64 "0.15.13"
+    "@esbuild/netbsd-x64" "0.17.15"
-    esbuild-openbsd-64 "0.15.13"
+    "@esbuild/openbsd-x64" "0.17.15"
-    esbuild-sunos-64 "0.15.13"
+    "@esbuild/sunos-x64" "0.17.15"
-    esbuild-windows-32 "0.15.13"
+    "@esbuild/win32-arm64" "0.17.15"
-    esbuild-windows-64 "0.15.13"
+    "@esbuild/win32-ia32" "0.17.15"
-    esbuild-windows-arm64 "0.15.13"
+    "@esbuild/win32-x64" "0.17.15"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -1738,7 +1751,7 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11:
+fast-glob@^3.2.12:
   version "3.2.12"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -2165,6 +2178,13 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz"
+  integrity sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
@@ -2190,22 +2210,29 @@ minimatch@^3.0.4, minimatch@^3.1.1:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^5.0.1, minimatch@^5.1.0:
+minimatch@^5.0.1:
   version "5.1.0"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz"
   integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^6.1.6:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-6.2.0.tgz"
+  integrity sha512-sauLxniAmvnhhRjFwPNnJKaPFYyddAgbYdeUpHULtCT/GhzdCx/MDNy+Y40lBxTQUrMzDE8e0S43Z5uqfO0REg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-muggle-string@^0.1.0:
+muggle-string@^0.2.2:
-  version "0.1.0"
+  version "0.2.2"
-  resolved "https://registry.npmjs.org/muggle-string/-/muggle-string-0.1.0.tgz"
+  resolved "https://registry.npmjs.org/muggle-string/-/muggle-string-0.2.2.tgz"
-  integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==
+  integrity sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==
 
 nanoid@^3.3.4:
   version "3.3.4"
@@ -2277,10 +2304,10 @@ pinia@^2.0.17:
     "@vue/devtools-api" "^6.2.1"
     vue-demi "*"
 
-postcss@^8.1.10, postcss@^8.4.18:
+postcss@^8.1.10, postcss@^8.4.21:
-  version "8.4.18"
+  version "8.4.21"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz"
-  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"
@@ -2406,13 +2433,20 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.43.1, rollup@^2.79.0, rollup@^2.79.1:
+rollup@^2.43.1:
   version "2.79.1"
   resolved "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz"
   integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
   optionalDependencies:
     fsevents "~2.3.2"
 
+rollup@^3.18.0, rollup@^3.7.2:
+  version "3.20.2"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-3.20.2.tgz"
+  integrity sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
@@ -2434,10 +2468,10 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
-sass@^1.55.0:
+sass@^1.59.3:
-  version "1.56.0"
+  version "1.61.0"
-  resolved "https://registry.npmjs.org/sass/-/sass-1.56.0.tgz"
+  resolved "https://registry.npmjs.org/sass/-/sass-1.61.0.tgz"
-  integrity sha512-WFJ9XrpkcnqZcYuLRJh5qiV6ibQOR4AezleeEjTjMsCocYW59dEG19U3fwTTXxzi2Ed3yjPBp727hbbj53pHFw==
+  integrity sha512-PDsN7BrVkNZK2+dj/dpKQAWZavbAQ87IXqVvw2+oEYI+GwlTWkvbQtL7F2cCNbMqJEYKPh1EcjSxsnqIb/kyaQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -2608,10 +2642,10 @@ type-fest@^0.16.0:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz"
   integrity sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==
 
-typescript@^4.8.4:
+typescript@^5.0.2:
-  version "4.8.4"
+  version "5.0.3"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.0.3.tgz"
-  integrity sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==
+  integrity sha512-xv8mOEDnigb/tN9PSMTwSEqAnUvkoXMQlicOb0IUVDBSQCgBSaAAROUZYy2IcUy5qU6XajK5jjjO7TMWqBTKZA==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"
@@ -2678,28 +2712,28 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-vite-plugin-pwa@^0.13.3:
+vite-plugin-pwa@^0.14.6:
-  version "0.13.3"
+  version "0.14.7"
-  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.13.3.tgz"
+  resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.14.7.tgz"
-  integrity sha512-cjWXpZ7slAY14OKz7M8XdgTIi9wjf6OD6NkhiMAc+ogxnbUrecUwLdRtfGPCPsN2ftut5gaN1jTghb11p6IQAA==
+  integrity sha512-dNJaf0fYOWncmjxv9HiSa2xrSjipjff7IkYE5oIUJ2x5HKu3cXgA8LRgzOwTc5MhwyFYRSU0xyN0Phbx3NsQYw==
   dependencies:
-    "@rollup/plugin-replace" "^4.0.0"
+    "@rollup/plugin-replace" "^5.0.1"
     debug "^4.3.4"
-    fast-glob "^3.2.11"
+    fast-glob "^3.2.12"
     pretty-bytes "^6.0.0"
-    rollup "^2.79.0"
+    rollup "^3.7.2"
     workbox-build "^6.5.4"
     workbox-window "^6.5.4"
 
-vite@^3.2.1:
+vite@^4.2.1:
-  version "3.2.3"
+  version "4.2.1"
-  resolved "https://registry.npmjs.org/vite/-/vite-3.2.3.tgz"
+  resolved "https://registry.npmjs.org/vite/-/vite-4.2.1.tgz"
-  integrity sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==
+  integrity sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==
   dependencies:
-    esbuild "^0.15.9"
+    esbuild "^0.17.5"
-    postcss "^8.4.18"
+    postcss "^8.4.21"
     resolve "^1.22.1"
-    rollup "^2.79.1"
+    rollup "^3.18.0"
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -2708,21 +2742,21 @@ vue-demi@*:
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.5.tgz"
   integrity sha512-tO3K2bML3AwiHmVHeKCq6HLef2st4zBXIV5aEkoJl6HZ+gJWxWv2O8wLH8qrA3SX3lDoTDHNghLX1xZg83MXvw==
 
-vue-template-compiler@^2.7.10:
+vue-template-compiler@^2.7.14:
-  version "2.7.13"
+  version "2.7.14"
-  resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.13.tgz"
+  resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz"
-  integrity sha512-jYM6TClwDS9YqP48gYrtAtaOhRKkbYmbzE+Q51gX5YDr777n7tNI/IZk4QV4l/PjQPNh/FVa/E92sh/RqKMrog==
+  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
   dependencies:
     de-indent "^1.0.2"
     he "^1.2.0"
 
-vue-tsc@^1.0.9:
+vue-tsc@^1.2.0:
-  version "1.0.9"
+  version "1.2.0"
-  resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.0.9.tgz"
+  resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.2.0.tgz"
-  integrity sha512-vRmHD1K6DmBymNhoHjQy/aYKTRQNLGOu2/ESasChG9Vy113K6CdP0NlhR0bzgFJfv2eFB9Ez/9L5kIciUajBxQ==
+  integrity sha512-rIlzqdrhyPYyLG9zxsVRa+JEseeS9s8F2BbVVVWRRsTZvJO2BbhLEb2HW3MY+DFma0378tnIqs+vfTzbcQtRFw==
   dependencies:
-    "@volar/vue-language-core" "1.0.9"
+    "@volar/vue-language-core" "1.2.0"
-    "@volar/vue-typescript" "1.0.9"
+    "@volar/vue-typescript" "1.2.0"
 
 vue@^3.2.37:
   version "3.2.37"