Fix more hydration issues. (#37)

This commit is contained in:
Alessandro Jean 2023-09-09 18:58:18 -03:00 committed by GitHub
parent 1f878c9f23
commit 0906da5826
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 50 deletions

View File

@ -29,10 +29,12 @@ onMounted(() => {
:data-view-transition="supportsViewTransition"
@click="toggleAppearance"
>
<Transition name="fade" mode="out-in">
<VPIconSun v-if="!isDark" class="sun" />
<VPIconMoon v-else class="moon" />
</Transition>
<ClientOnly>
<Transition name="fade" mode="out-in">
<VPIconSun v-if="!isDark" class="sun" />
<VPIconMoon v-else class="moon" />
</Transition>
</ClientOnly>
</button>
</template>

View File

@ -40,53 +40,55 @@ const labelPosition = computed(() => isSmallScreen.value ? "top" : "right")
</script>
<template>
<div class="filters-list">
<ElForm label-width="120px" :label-position="labelPosition">
<ElFormItem label="Search:">
<ElInput
:model-value="search"
placeholder="Search extensions by name or ID..."
clearable
@update:model-value="$emit('update:search', $event)"
/>
</ElFormItem>
<ElFormItem label="Languages:">
<ElSelect
:model-value="lang"
placeholder="Show specific languages..."
multiple
clearable
@update:model-value="$emit('update:lang', $event)"
>
<ElOption
v-for="[group] in extensions"
:key="group.lang"
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
:value="group.lang"
<ClientOnly>
<div class="filters-list">
<ElForm label-width="120px" :label-position="labelPosition">
<ElFormItem label="Search:">
<ElInput
:model-value="search"
placeholder="Search extensions by name or ID..."
clearable
@update:model-value="$emit('update:search', $event)"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="Sort by:">
<ElRadioGroup
:model-value="sort"
@update:model-value="$emit('update:sort', $event)"
>
<ElRadio label="Ascending" />
<ElRadio label="Descending" />
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="Display mode:">
<ElRadioGroup
:model-value="nsfw"
@update:model-value="$emit('update:nsfw', $event)"
>
<ElRadio label="NSFW" />
<ElRadio label="SFW" />
<ElRadio label="Show all" />
</ElRadioGroup>
</ElFormItem>
</ElForm>
</div>
</ElFormItem>
<ElFormItem label="Languages:">
<ElSelect
:model-value="lang"
placeholder="Show specific languages..."
multiple
clearable
@update:model-value="$emit('update:lang', $event)"
>
<ElOption
v-for="[group] in extensions"
:key="group.lang"
:label="group.lang === 'en' ? simpleLangName(group.lang) : langName(group.lang)"
:value="group.lang"
/>
</ElSelect>
</ElFormItem>
<ElFormItem label="Sort by:">
<ElRadioGroup
:model-value="sort"
@update:model-value="$emit('update:sort', $event)"
>
<ElRadio label="Ascending" />
<ElRadio label="Descending" />
</ElRadioGroup>
</ElFormItem>
<ElFormItem label="Display mode:">
<ElRadioGroup
:model-value="nsfw"
@update:model-value="$emit('update:nsfw', $event)"
>
<ElRadio label="NSFW" />
<ElRadio label="SFW" />
<ElRadio label="Show all" />
</ElRadioGroup>
</ElFormItem>
</ElForm>
</div>
</ClientOnly>
</template>
<style lang="stylus">