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" :data-view-transition="supportsViewTransition"
@click="toggleAppearance" @click="toggleAppearance"
> >
<Transition name="fade" mode="out-in"> <ClientOnly>
<VPIconSun v-if="!isDark" class="sun" /> <Transition name="fade" mode="out-in">
<VPIconMoon v-else class="moon" /> <VPIconSun v-if="!isDark" class="sun" />
</Transition> <VPIconMoon v-else class="moon" />
</Transition>
</ClientOnly>
</button> </button>
</template> </template>

View File

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