Migracja z wersji Vue 2 na Vue 3

src/components/Global/ActionButton.vue

@@ -5,13 +5,12 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { defineComponent } from "vue";
 
-@Component
-export default class ActionButton extends Vue {}
+export default defineComponent({});
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "../../styles/variables";
 @import "../../styles/responsive";
 
@@ -40,15 +39,12 @@ export default class ActionButton extends Vue {}
   img {
     width: 1.25em;
     vertical-align: middle;
-
     margin-right: 0.35em;
   }
 
   p {
     font-size: 1em;
     overflow: hidden;
-
-    transition: max-width 0.35s ease-in-out;
   }
 
   &.open {

src/components/Global/SearchBox.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="search-box">
-    <input v-model="searchedItem" :placeholder="title" />
-
-    <img
-      class="search-exit"
-      :src="exitIcon"
-      alt="exit-icon"
-      @click="() => (searchedItem = '')"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop, Model } from "vue-property-decorator";
-
-@Component
-export default class SearchBox extends Vue {
-  @Prop({ required: true }) title!: string;
-  @Model("changed") readonly searchedItem!: string;
-
-  //   @Emit("changed")
-  //   onItemChanged() {
-  //     return this.searchedItem;
-  //   }
-
-  exitIcon = require("@/assets/icon-exit.svg");
-
-  //   searchedItem: string = "";
-
-  //   @Watch("searchedItem")
-  //   watchSelectedItem(item) {
-  //     this.onItemChanged();
-  //   }
-}
-</script>
-
-<style lang="scss" scoped>
-.search {
-  &-box {
-    position: relative;
-
-    background: #333;
-    border-radius: 0.5em;
-    min-width: 200px;
-  }
-
-  &-exit {
-    position: absolute;
-    cursor: pointer;
-
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-
-    width: 1em;
-  }
-}
-
-input {
-  border: none;
-
-  min-width: 85%;
-  padding: 0.35em 0.5em;
-}
-</style>

src/components/Global/SelectBox.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="select-box">
     <div class="select-box_content">
-      <button class="selected" @click="toggleBox">
-        {{ selectedItemComp ? selectedItemComp.value : "" }}
+      <button
+        class="selected"
+        @click="toggleBox"
+      >
+        {{ computedSelectedItem.value }}
       </button>
 
-      <div class="options" v-if="boxVisible">
-        <div class="option" v-for="item in itemList" :key="item.id">
+      <div
+        class="options"
+        v-if="boxVisible"
+      >
+        <div
+          class="option"
+          v-for="item in itemList"
+          :key="item.id"
+        >
           <label :for="item.id">
             <input
               type="button"
@@ -15,7 +25,7 @@
               @click="selectOption(item)"
             />
 
-            <span :style="selectedItemComp.id == item.id ? 'color: gold;' : ''">
+            <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''">
               {{ item.value }}
             </span>
           </label>
@@ -24,51 +34,79 @@
     </div>
 
     <div class="arrow">
-      <img :src="boxVisible ? ascIcon : descIcon" alt="arrow-icon" />
+      <img
+        :src="boxVisible ? ascIcon : descIcon"
+        alt="arrow-icon"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+import {
+  computed,
+  defineComponent,
+  defineEmit,
+  Ref,
+  ref,
+} from "@vue/runtime-core";
 
-@Component
-export default class SelectBox extends Vue {
-  @Prop({ required: true }) itemList!: { id: string | number; value: string }[];
-  @Prop({ default: 0 }) defaultItemIndex!: number;
-
-  boxVisible = false;
-
-  test() {
-    console.log("test");
-  }
-
-  @Emit("selected")
-  onItemSelected() {
-    return this.selectedItem;
-  }
-
-  ascIcon = require("@/assets/icon-arrow-asc.svg");
-  descIcon = require("@/assets/icon-arrow-desc.svg");
-
-  selectedItem: { id: string | number; value: string } | null = null;
-
-  get selectedItemComp() {
-    if (!this.selectedItem) return this.itemList[this.defaultItemIndex];
-
-    return this.itemList.find((item) => item.id === this.selectedItem?.id);
-  }
-
-  toggleBox() {
-    this.boxVisible = !this.boxVisible;
-  }
-
-  selectOption(item: { id: string | number; value: string }) {
-    this.selectedItem = item;
-    this.boxVisible = false;
-    this.onItemSelected();
-  }
+interface Item {
+  id: string | number;
+  value: string;
 }
+
+export default defineComponent({
+  emits: ["selected"],
+
+  props: {
+    itemList: {
+      type: Array as () => Item[],
+      required: true,
+    },
+
+    defaultItemIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  data: () => ({
+    ascIcon: require("@/assets/icon-arrow-asc.svg"),
+    descIcon: require("@/assets/icon-arrow-desc.svg"),
+  }),
+
+  setup(props) {
+    let boxVisible = ref(false);
+    let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);
+
+    const computedSelectedItem = computed(() => {
+      return (
+        props.itemList.find((item) => item.id === selectedItem.value.id) ||
+        props.itemList[props.defaultItemIndex]
+      );
+    });
+
+    return {
+      computedSelectedItem,
+      boxVisible,
+      selectedItem,
+    };
+  },
+
+  methods: {
+    selectOption(item: Item) {
+      this.selectedItem = item;
+      this.boxVisible = false;
+
+      this.$emit("selected", item);
+    },
+
+    toggleBox() {
+      this.boxVisible = !this.boxVisible;
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/components/Global/UpdateModal.vue

@@ -1,97 +0,0 @@
-<template>
-  <div class="modal">
-    <div class="header">
-      <span>Stacj</span>
-      <img src="@/assets/trainlogo.png" alt="trainlogo" />
-      <span>wnik</span>
-      <sup style="font-size: 0.5em; margin-left: 10px;" class="title">1.4</sup>
-    </div>
-
-    <div class="title">Dziennik Aktywności Scenerii dostępny w wersji beta!</div>
-
-    <div class="content">
-      Do użytku został oddany Dziennik Aktywności Scenerii, który pozwala na dostęp do informacji kto i kiedy dyżurował na danej stacji.
-      Aby przejść do zakładki z dziennikiem wystarczy wybrać opcję "DZIENNIK" w menu na górze strony. Funkcjonalność ta jest nadal w trakcie prac,
-      więc informacje, które pokazuje, mogą być niepoprawne, a dane kasowane w ramach dalszych testów.
-      <div style="text-align: center; font-weight: bold; margin: 0.5em 0;">Miłego korzystania!</div>
-    </div>
-
-    <button class="button" @click="toggleUpdateModal">PRZYJĄŁEM!</button>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-@Component
-export default class UpdateModal extends Vue {
-  @Prop() currentVersion!: string;
-
-  STORAGE_ID = "modal_update";
-
-  toggleUpdateModal(type: string) {
-    this.$emit("toggleUpdateModal");
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive";
-
-.modal {
-  z-index: 100;
-
-  padding: 1em;
-
-  border-radius: 1em;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  width: 65%;
-  max-width: 950px;
-
-  max-height: 95vh;
-  overflow: auto;
-
-  transform: translate(-50%, -50%);
-
-  background: rgba(black, 0.85);
-  color: white;
-
-  text-align: center;
-
-  @include smallScreen() {
-    font-size: 0.8em;
-    width: 95%;
-  }
-}
-
-.header {
-  font-size: 4.5em;
-
-  img {
-    width: 0.8em;
-  }
-}
-
-.title {
-  font-size: 2em;
-}
-
-.content {
-  font-size: 1.4em;
-
-  text-align: justify;
-
-  ul {
-    list-style: square inside;
-  }
-}
-
-.button {
-  font-size: 1.25em;
-  margin: 0 auto;
-}
-</style>