refactor: improve code structure (#343)

zio/stable
Ayaka Rizumu 2022-12-05 21:20:23 +08:00 committed by GitHub
parent f2d6159aa1
commit 70db3ea759
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 59 deletions

View File

@ -129,8 +129,7 @@ export default {
:style="{
'z-index': zIndex,
}"
class="scrollbar-hide"
fixed inset-0 overflow-y-auto overscroll-none
fixed inset-0 of-y-auto scrollbar-hide overscroll-none
>
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
@ -189,12 +188,4 @@ export default {
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>

View File

@ -6,8 +6,8 @@ const moreMenuVisible = ref(false)
<template>
<nav
h-14 border="t base" flex flex-row text-xl
of-y-scroll overscroll-none
class="scrollbar-hide after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
of-y-scroll scrollbar-hide overscroll-none
class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
>
<!-- These weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
<template v-if="currentUser">
@ -46,13 +46,3 @@ const moreMenuVisible = ref(false)
</NavBottomMoreMenu>
</nav>
</template>
<style scoped>
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>

View File

@ -1,7 +1,4 @@
<script lang="ts" setup>
import type { ComputedRef } from 'vue'
import type { LocaleObject } from '#i18n'
const props = defineProps<{
modelValue?: boolean
}>()
@ -10,14 +7,6 @@ const emits = defineEmits<{
}>()
const visible = useVModel(props, 'modelValue', emits, { passive: true })
const { t, locale, setLocale } = useI18n()
const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
const toggleLocales = () => {
const codes = locales.value.map(item => item.code)
setLocale(codes[(codes.indexOf(locale.value) + 1) % codes.length])
}
function changeShow() {
visible.value = !visible.value
}
@ -33,19 +22,14 @@ function clickEvent(mouse: MouseEvent) {
}
}
watch(visible, (val, oldVal) => {
if (val && val !== oldVal) {
if (!import.meta.env.SSR && typeof document !== 'undefined')
document.addEventListener('click', clickEvent)
}
}, { flush: 'post' })
watch(visible, (val) => {
if (val && typeof document !== 'undefined')
document.addEventListener('click', clickEvent)
})
onBeforeUnmount(() => {
if (!import.meta.env.SSR)
document.removeEventListener('click', clickEvent)
document.removeEventListener('click', clickEvent)
})
// work around a type error when persisted is passed directly: An object literal cannot have multiple properties with the same name.
const persisted = 'persisted' as string
</script>
<template>
@ -60,22 +44,20 @@ const persisted = 'persisted' as string
leave-active-class="transition duration-250 ease-in children:(transition duration-250 ease-in)"
leave-from-class="opacity-100 children:(transform translate-y-0)"
leave-to-class="opacity-0 children:(transform translate-y-full)"
:[persisted]="true"
>
<div
v-show="visible"
class="scrollbar-hide"
absolute inset-x-0 top-auto bottom-full z-20 h-100vh
flex items-end of-y-scroll of-x-hidden overscroll-none
flex items-end of-y-scroll of-x-hidden scrollbar-hide overscroll-none
bg="black/50"
>
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll mb="-1px"` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
<!-- corresponding to issue: #106, so please don't remove it. -->
<div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" />
<div
class="scrollbar-hide"
flex-1 min-w-48 py-6 mb="-1px"
overflow-y-auto overscroll-none max-h="[calc(100vh-200px)]"
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
border-t-1 border-base
>
@ -97,7 +79,7 @@ const persisted = 'persisted' as string
@click="toggleDark()"
>
<span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 !align-middle" />
{{ !isDark ? t('menu.toggle_theme.dark') : t('menu.toggle_theme.light') }}
{{ !isDark ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
</button>
<!-- Switch languages -->
<NavSelectLanguage>
@ -133,13 +115,3 @@ const persisted = 'persisted' as string
</Transition>
</div>
</template>
<style scoped>
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>

View File

@ -78,4 +78,12 @@ export default defineConfig({
},
},
},
rules: [
// scrollbar-hide
[/^scrollbar-hide$/, (_, { constructCSS }) => {
let res = constructCSS({ 'scrollbar-width': 'none' })
res += `\n${res.replace('{scrollbar-width:none;}', '::-webkit-scrollbar{display: none;}')}`
return res
}],
],
})