Migration to nuxt 4
Used codemods CLI and reworked most alias'd path that stopped working
This commit is contained in:
Alexis
46
app/components/calendar/menu/Menu.vue
Normal file
46
app/components/calendar/menu/Menu.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<script lang="ts" setup>
|
||||
import { useCalendar } from "@/stores/CalendarStore"
|
||||
import { breakpointsTailwind } from "@vueuse/core"
|
||||
|
||||
const breakpoints = useBreakpoints(
|
||||
breakpointsTailwind
|
||||
)
|
||||
|
||||
const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="md:mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors">
|
||||
<div class="px-5 md:px-8 flex items-center justify-between gap-2">
|
||||
<menu class="flex items-center md:gap-2">
|
||||
<li>
|
||||
<LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" />
|
||||
</li>
|
||||
<li class="max-md:hidden">
|
||||
<LazyCalendarMenuToday v-if="defaultDate" />
|
||||
</li>
|
||||
<li class="ml-2 md:ml-4">
|
||||
<CalendarCurrentDate />
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
<menu class="flex items-center gap-2">
|
||||
<li>
|
||||
<CalendarSearchCTA />
|
||||
</li>
|
||||
<ClientOnly>
|
||||
<li v-if="breakpoints.md.value">
|
||||
<CalendarCategoriesCTA />
|
||||
</li>
|
||||
</ClientOnly>
|
||||
<li>
|
||||
<CalendarOptionsCTA />
|
||||
</li>
|
||||
</menu>
|
||||
</div>
|
||||
|
||||
<div class="ml-4 md:ml-8">
|
||||
<CalendarMenuSubnav />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
230
app/components/calendar/menu/MenuSubnav.vue
Normal file
230
app/components/calendar/menu/MenuSubnav.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<script lang="ts" setup>
|
||||
import { PhCaretDoubleLeft, PhCaretDoubleRight, PhCaretLeft, PhCaretRight } from "@phosphor-icons/vue"
|
||||
|
||||
const { currentDate } = useCalendar()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
interface DirectionLabels {
|
||||
pastFar: string
|
||||
pastNear: string
|
||||
futureNear: string
|
||||
futureFar: string
|
||||
}
|
||||
|
||||
const { currentConfig, decrementViewMonth, incrementViewMonth, decrementViewYear, incrementViewYear } =
|
||||
useCalendar()
|
||||
|
||||
const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
|
||||
switch (currentConfig.viewType) {
|
||||
case "month":
|
||||
return {
|
||||
pastFar: t("entity.calendar.years.prevSingular"),
|
||||
pastNear: t("entity.calendar.months.prevSingular"),
|
||||
futureNear: t("entity.calendar.months.nextSingular"),
|
||||
futureFar: t("entity.calendar.years.nextSingular")
|
||||
}
|
||||
|
||||
case "year":
|
||||
return {
|
||||
pastFar: t("entity.calendar.decades.prevSingular"),
|
||||
pastNear: t("entity.calendar.years.prevSingular"),
|
||||
futureNear: t("entity.calendar.years.nextSingular"),
|
||||
futureFar: t("entity.calendar.decades.nextSingular")
|
||||
}
|
||||
|
||||
case "decade":
|
||||
return {
|
||||
pastFar: t("entity.calendar.centuries.prevSingular"),
|
||||
pastNear: t("entity.calendar.decades.prevSingular"),
|
||||
futureNear: t("entity.calendar.decades.nextSingular"),
|
||||
futureFar: t("entity.calendar.centuries.nextSingular")
|
||||
}
|
||||
|
||||
case "century":
|
||||
default:
|
||||
return {
|
||||
pastFar: t("entity.calendar.millenias.prevSingular"),
|
||||
pastNear: t("entity.calendar.centuries.prevSingular"),
|
||||
futureNear: t("entity.calendar.centuries.nextSingular"),
|
||||
futureFar: t("entity.calendar.millenias.nextSingular")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function toPastFar(): void {
|
||||
switch (currentConfig.viewType) {
|
||||
case "month":
|
||||
decrementViewYear()
|
||||
break
|
||||
|
||||
case "year":
|
||||
decrementViewYear(10)
|
||||
break
|
||||
|
||||
case "decade":
|
||||
decrementViewYear(100)
|
||||
break
|
||||
|
||||
case "century":
|
||||
default:
|
||||
decrementViewYear(1000)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function toPastNear(): void {
|
||||
switch (currentConfig.viewType) {
|
||||
case "month":
|
||||
decrementViewMonth()
|
||||
break
|
||||
|
||||
case "year":
|
||||
decrementViewYear()
|
||||
break
|
||||
|
||||
case "decade":
|
||||
decrementViewYear(10)
|
||||
break
|
||||
|
||||
case "century":
|
||||
default:
|
||||
decrementViewYear(100)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function toFutureNear(): void {
|
||||
switch (currentConfig.viewType) {
|
||||
case "month":
|
||||
incrementViewMonth()
|
||||
break
|
||||
|
||||
case "year":
|
||||
incrementViewYear()
|
||||
break
|
||||
|
||||
case "decade":
|
||||
incrementViewYear(10)
|
||||
break
|
||||
|
||||
case "century":
|
||||
default:
|
||||
incrementViewYear(100)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function toFutureFar(): void {
|
||||
switch (currentConfig.viewType) {
|
||||
case "month":
|
||||
incrementViewYear()
|
||||
break
|
||||
|
||||
case "year":
|
||||
incrementViewYear(10)
|
||||
break
|
||||
|
||||
case "decade":
|
||||
incrementViewYear(100)
|
||||
break
|
||||
|
||||
case "century":
|
||||
default:
|
||||
incrementViewYear(1000)
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex gap-2">
|
||||
<div class="grid items-center w-40 px-3 md:px-4 py-2 bg-white dark:bg-black border-border border-x-[1px] border-t-[1px] rounded-t-sm text-sm max-md:text-xs transition-colors">
|
||||
<ClientOnly>
|
||||
<span>{{ currentDate.currentDateTitle }}</span>
|
||||
|
||||
<template #fallback>
|
||||
<span class="inline-block">
|
||||
<UiSkeleton class="h-[19px] w-full rounded-sm" />
|
||||
</span>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<div>
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="rounded-t-sm rounded-b-none border-b-0"
|
||||
@click="toPastFar()"
|
||||
>
|
||||
<PhCaretDoubleLeft size="18" />
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>{{ activeDirectionLabels.pastFar }}</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
<div>
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="rounded-t-sm rounded-b-none border-b-0"
|
||||
@click="toPastNear()"
|
||||
>
|
||||
<PhCaretLeft size="18" />
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>{{ activeDirectionLabels.pastNear }}</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
<div>
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="rounded-t-sm rounded-b-none border-b-0"
|
||||
@click="toFutureNear()"
|
||||
>
|
||||
<PhCaretRight size="18" />
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>{{ activeDirectionLabels.futureNear }}</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
<div>
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<UiButton
|
||||
variant="outline"
|
||||
size="icon"
|
||||
class="rounded-t-sm rounded-b-none border-b-0"
|
||||
@click="toFutureFar()"
|
||||
>
|
||||
<PhCaretDoubleRight size="18" />
|
||||
</UiButton>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>{{ activeDirectionLabels.futureFar }}</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
41
app/components/calendar/menu/MenuToday.vue
Normal file
41
app/components/calendar/menu/MenuToday.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<script lang="ts" setup>
|
||||
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
|
||||
import { PhCalendar } from "@phosphor-icons/vue"
|
||||
|
||||
const { defaultDate, jumpToDefaultDate, getFormattedDateTitle, currentDate } = useCalendar()
|
||||
|
||||
const defaultDateFormatted: string = getFormattedDateTitle(defaultDate, true)
|
||||
|
||||
const buttonDisabledState: ComputedRef<boolean> = computed<boolean>(() => {
|
||||
return currentDate.currentMonth === defaultDate.month && currentDate.currentYear === defaultDate.year
|
||||
})
|
||||
|
||||
const breakpoints = useBreakpoints(
|
||||
breakpointsTailwind
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UiTooltipProvider :delay-duration="250">
|
||||
<UiTooltip>
|
||||
<UiTooltipTrigger as-child>
|
||||
<ClientOnly>
|
||||
<UiButton
|
||||
:size="breakpoints.md.value ? 'default' : 'icon'"
|
||||
variant="secondary"
|
||||
:disabled="buttonDisabledState" @click="jumpToDefaultDate"
|
||||
>
|
||||
<PhCalendar v-if="!breakpoints.md.value" size="20" weight="fill" />
|
||||
|
||||
<span v-if="breakpoints.md.value">
|
||||
{{ $t('entity.calendar.date.today') }}
|
||||
</span>
|
||||
</UiButton>
|
||||
</ClientOnly>
|
||||
</UiTooltipTrigger>
|
||||
<UiTooltipContent>
|
||||
<p>{{ defaultDateFormatted }}</p>
|
||||
</UiTooltipContent>
|
||||
</UiTooltip>
|
||||
</UiTooltipProvider>
|
||||
</template>
|
||||
Reference in New Issue
Block a user