refactor: improve code structure (#343)
parent
f2d6159aa1
commit
70db3ea759
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
}],
|
||||
],
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue