5772ab7aa3
There still exists an issue with one Adobe led library ; @international-dates don't seem to compile their sourcemaps correctly. I don't think this is something I can fix however, and it may require hacks and workarounds to solve from what I've gathered
25 lines
770 B
Vue
25 lines
770 B
Vue
<script lang="ts" setup>
|
|
import { getRelativeString } from '@/models/Date'
|
|
import { useCalendar } from '@/stores/CalendarStore'
|
|
import { storeToRefs } from 'pinia'
|
|
import { computed } from 'vue'
|
|
|
|
import { PhMapPin } from '@phosphor-icons/vue'
|
|
|
|
const { defaultDate, getFormattedDateTitle } = useCalendar()
|
|
const { selectedDate } = storeToRefs(useCalendar())
|
|
|
|
const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
|
|
|
|
const dateDifference = computed(() => getRelativeString(defaultDate, selectedDate.value))
|
|
</script>
|
|
|
|
<template>
|
|
<h1 class="text-2xl font-bold flex items-center gap-1">
|
|
<PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
|
|
</h1>
|
|
<h2 class="text-lg italic opacity-75">
|
|
{{ dateDifference }}
|
|
</h2>
|
|
</template>
|