Migracja na Vite

src/components/Global/SearchBox.vue

@@ -9,7 +9,7 @@
 
     <img
       class="search-exit"
-      :src="exitIcon"
+      :src="getIcon('exit')"
       alt="exit-icon"
       @click="clearValue"
     />
@@ -18,11 +18,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from "vue";
+import imageMixin from "../../mixins/imageMixin";
 
 export default defineComponent({
-  data: () => ({
-    exitIcon: require("@/assets/icon-exit.svg"),
-  }),
+  mixins: [imageMixin],
+
   emits: ["update:searchedValue", "clearValue"],
   props: {
     searchedValue: {
@@ -59,7 +59,7 @@ export default defineComponent({
       emit("clearValue");
     };
 
-    const updateValue = (e) => {
+    const updateValue = (e: any) => {
       if (!props.updateOnInput && e.keyCode == 13)
         emit("update:searchedValue", compSearchedValue.value);
     };

src/components/Global/SelectBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="select-box" >
+  <div class="select-box">
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
         <span class="text--primary">{{ prefix }}</span>
@@ -24,13 +24,14 @@
     </div>
 
     <div class="arrow">
-      <img :src="listOpen ? ascIcon : descIcon" alt="arrow-icon" />
+      <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
+import { defineComponent, Ref, ref, computed } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
 
 interface Item {
   id: string;
@@ -40,6 +41,7 @@ interface Item {
 
 export default defineComponent({
   emits: ['selected'],
+  mixins: [imageMixin],
 
   props: {
     itemList: {
@@ -58,11 +60,6 @@ export default defineComponent({
     },
   },
 
-  data: () => ({
-    ascIcon: require('@/assets/icon-arrow-asc.svg'),
-    descIcon: require('@/assets/icon-arrow-desc.svg'),
-  }),
-
   setup(props) {
     let listRef: Ref<Element | null> = ref(null);
     let buttonRef: Ref<HTMLButtonElement | null> = ref(null);

src/components/Global/StopDate.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script lang="ts">
-import dateMixin from '@/mixins/dateMixin';
-import TrainStop from '@/scripts/interfaces/TrainStop';
 import { defineComponent } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import TrainStop from '../../scripts/interfaces/TrainStop';
 
 export default defineComponent({
   mixins: [dateMixin],

src/components/Global/TrainModal.vue

@@ -3,7 +3,7 @@
     <div class="modal_background" @click="closeModal"></div>
     <div class="modal_content" ref="content" tabindex="0">
       <button class="btn exit" @click="closeModal">
-        <img :src="icons.exit" alt="close card" />
+        <img :src="getIcon('exit')" alt="close card" />
       </button>
 
       <TrainInfo :train="store.chosenModalTrain" :extended="false" ref="trainInfo" />
@@ -13,23 +13,20 @@
 </template>
 
 <script lang="ts">
-import trainInfoMixin from '@/mixins/trainInfoMixin';
-import { useStore } from '@/store/store';
 import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useStore } from '../../store/store';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
 import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 
 export default defineComponent({
   components: { TrainInfo, TrainSchedule },
-  mixins: [trainInfoMixin],
+  mixins: [trainInfoMixin, imageMixin],
 
   data() {
     return {
       isTopBarVisible: false,
-
-      icons: {
-        exit: require('@/assets/icon-exit.svg'),
-      },
     };
   },