fix: omit value property of isHydrated in template (#681)
parent
64611083a5
commit
645da2f945
|
@ -31,11 +31,11 @@ const toggleApply = () => {
|
|||
v-if="removable"
|
||||
:aria-label="$t('attachment.remove_label')"
|
||||
hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
|
||||
:class="[isHydrated.value && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
|
||||
:class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
|
||||
mix-blend-difference
|
||||
@click="$emit('remove')"
|
||||
>
|
||||
<div i-ri:close-line text-3 :class="[isHydrated.value && isSmallScreen ? 'text-6' : 'text-3']" />
|
||||
<div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
|
||||
</div>
|
||||
</div>
|
||||
<div absolute right-2 bottom-2>
|
||||
|
|
|
@ -1,14 +1,8 @@
|
|||
export const isHydrated = computed(() => {
|
||||
if (process.server)
|
||||
return { value: false }
|
||||
export const isHydrated = ref(false)
|
||||
|
||||
if (!process.server) {
|
||||
const nuxtApp = useNuxtApp()
|
||||
if (!nuxtApp.isHydrating)
|
||||
return { value: false }
|
||||
|
||||
const hydrated = ref(false)
|
||||
nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
|
||||
hydrated.value = true
|
||||
isHydrated.value = true
|
||||
})
|
||||
return hydrated
|
||||
})
|
||||
}
|
||||
|
|
|
@ -45,8 +45,8 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
|||
<slot />
|
||||
</div>
|
||||
<div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
|
||||
<CommonOfflineChecker :small-screen="isHydrated.value" />
|
||||
<NavBottom v-if="isHydrated.value" />
|
||||
<CommonOfflineChecker :small-screen="isHydrated" />
|
||||
<NavBottom v-if="isHydrated" />
|
||||
</div>
|
||||
</div>
|
||||
<aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
|
||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
|
||||
<CommonAlert v-if="isHydrated && !hideNewsTips" @close="hideNewsTips = true">
|
||||
<p>{{ $t('tooltip.explore_posts_intro') }}</p>
|
||||
</CommonAlert>
|
||||
<!-- TODO: Tabs for trending statuses, tags, and links -->
|
||||
|
|
|
@ -13,7 +13,7 @@ useHeadFixed({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
|
||||
<CommonAlert v-if="isHydrated && !hideNewsTips" @close="hideNewsTips = true">
|
||||
<p>{{ $t('tooltip.explore_links_intro') }}</p>
|
||||
</CommonAlert>
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@ useHeadFixed({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CommonAlert v-if="isHydrated.value && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
|
||||
<CommonAlert v-if="isHydrated && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
|
||||
<p>{{ $t('tooltip.explore_tags_intro') }}</p>
|
||||
</CommonAlert>
|
||||
|
||||
|
|
|
@ -21,8 +21,8 @@ const isRootPath = computedEager(() => route.name === 'settings')
|
|||
</template>
|
||||
<div xl:w-97 lg:w-78 w-full>
|
||||
<SettingsNavItem
|
||||
v-show="currentUser"
|
||||
:command="!!currentUser"
|
||||
v-if="isHydrated && currentUser "
|
||||
command
|
||||
icon="i-ri:user-line"
|
||||
:text="$t('settings.profile.label')"
|
||||
to="/settings/profile"
|
||||
|
|
|
@ -69,6 +69,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
|
|||
<!-- banner -->
|
||||
<div of-hidden bg="gray-500/20" aspect="3">
|
||||
<CommonInputImage
|
||||
v-if="isHydrated"
|
||||
ref="elInputImage"
|
||||
v-model="form.header"
|
||||
:original="onlineSrc.header"
|
||||
|
@ -80,6 +81,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
|
|||
<!-- avatar -->
|
||||
<div px-4>
|
||||
<CommonInputImage
|
||||
v-if="isHydrated"
|
||||
v-model="form.avatar"
|
||||
:original="onlineSrc.avatar"
|
||||
mt--10
|
||||
|
|
Loading…
Reference in New Issue