🎨 Make date selector modular

src/App.vue

@@ -4,7 +4,16 @@ import TitleBar from "@/components/titlebar-element.vue";
 import BottomNavbar from "@/components/bottom-navbar.vue";
 import DateSelector from "@/components/date-selector.vue";
 import LoadingElement from "@/components/loading-element.vue";
-import { loading, loadingProgress, loadingFailed, theme } from "@/store";
+import {
+  loading,
+  loadingProgress,
+  loadingFailed,
+  theme,
+  selectedDate,
+  selectedDay,
+  changeDay,
+  changeDate,
+} from "@/store";
 import { computed, ref } from "vue";
 
 const autoThemes = { true: "dark", false: "light" };
@@ -33,7 +42,13 @@ const isDataView = computed(() => route.meta.dataView || false);
     />
     <div class="center">
       <main>
-        <DateSelector v-show="isDataView" />
+        <DateSelector
+          :selectedDate="selectedDate"
+          :selectedDay="selectedDay"
+          @changeDay="(inc) => (changeDay += inc)"
+          @changeDate="(date) => (changeDate = date)"
+          v-show="isDataView"
+        />
         <div class="wrapper">
           <RouterView />
         </div>

src/components/date-selector.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { selectedDate, selectedDay, changeDay, changeDate } from "@/store";
+defineProps(["selectedDate", "selectedDay"]);
+defineEmits(["changeDay", "changeDate"]);
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-vue-next";
 import dayjs from "dayjs";
 import { getDateSkippingWeekend } from "@/util";
@@ -17,15 +18,19 @@ const dayNames = [
 
 <template>
   <div class="selector">
-    <ArrowLeftIcon @click="changeDay--" />
+    <ArrowLeftIcon @click="$emit('changeDay', -1)" />
     <span
       class="day"
-      @click="changeDate = getDateSkippingWeekend(dayjs().toDate(), true)"
+      @click="
+        $emit('changeDate', getDateSkippingWeekend(dayjs().toDate(), true))
+      "
     >
-      {{ $t(dayNames[selectedDay + 1]) }},
+      {{ $t(dayNames[selectedDay + 1])
-      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
+      }}{{
+        selectedDate ? ", " + dayjs(selectedDate).format("DD.MM.YYYY") : ""
+      }}
     </span>
-    <ArrowRightIcon @click="changeDay++" />
+    <ArrowRightIcon @click="$emit('changeDay', +1)" />
   </div>
 </template>