Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed hydration mismatches

Browse Source
This commit is contained in:
Alexis
2025-04-25 15:23:03 +02:00
parent f7f12feaec
commit 2d2069cae6
3 changed files with 39 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/calendar/SearchCTA.vue Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts" setup>
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { PhMagnifyingGlass } from "@phosphor-icons/vue"
const { revealAdvancedSearch, } = useCalendar()
const breakpoints = useBreakpoints(
breakpointsTailwind
)
</script>
<template>
<ClientOnly>
<UiButton
:search-slash="breakpoints.lg.value"
:size="breakpoints.lg.value ? 'default' : 'icon'"
@click="revealAdvancedSearch()"
>
<PhMagnifyingGlass size="20" weight="light" />
<span class="max-lg:hidden">
{{ $t('entity.advancedSearch.title') }}
</span>
</UiButton>
</ClientOnly>
</template>

22
components/calendar/dialog/QuickCreateEvent.vue
View File

@@ -23,17 +23,19 @@ const breakpoints = useBreakpoints(
</script> </script>
<template> <template>
<UiButton <ClientOnly>
class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl" <UiButton
:size="breakpoints.lg.value ? 'default' : 'icon'" class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
@click="toggleDialog" :size="breakpoints.lg.value ? 'default' : 'icon'"
> @click="toggleDialog"
<PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" /> >
<PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
<strong class="font-semibold max-lg:hidden"> <strong class="font-semibold max-lg:hidden">
{{ $t("entity.calendar.event.newEvent") }} {{ $t("entity.calendar.event.newEvent") }}
</strong> </strong>
</UiButton> </UiButton>
</ClientOnly>
<UiDialog v-model:open="isDialogOpen"> <UiDialog v-model:open="isDialogOpen">
<UiDialogContent <UiDialogContent

20
components/calendar/menu/Menu.vue
View File

@@ -1,15 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
import { useCalendar } from "~/stores/CalendarStore" import { useCalendar } from "~/stores/CalendarStore"
import { PhMagnifyingGlass } from "@phosphor-icons/vue"
const { revealAdvancedSearch, } = useCalendar()
const { isReadOnly, defaultDate } = storeToRefs(useCalendar()) const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
const breakpoints = useBreakpoints(
breakpointsTailwind
)
</script> </script>
<template> <template>
@@ -29,17 +21,7 @@ const breakpoints = useBreakpoints(
<menu class="flex items-center gap-2"> <menu class="flex items-center gap-2">
<li> <li>
<UiButton <CalendarSearchCTA />
:search-slash="breakpoints.lg.value"
:size="breakpoints.lg.value ? 'default' : 'icon'"
@click="revealAdvancedSearch()"
>
<PhMagnifyingGlass size="20" weight="light" />
<span class="max-lg:hidden">
{{ $t('entity.advancedSearch.title') }}
</span>
</UiButton>
</li> </li>
<li> <li>
<CalendarCategoriesCTA /> <CalendarCategoriesCTA />