refactor: improve code structure (#343)

components/modal/ModalDialog.vue

@@ -129,8 +129,7 @@ export default {
         :style="{
           'z-index': zIndex,
         }"
-        class="scrollbar-hide"
+        fixed inset-0 of-y-auto scrollbar-hide overscroll-none
-        fixed inset-0 overflow-y-auto 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>

components/nav/NavBottom.vue

@@ -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
+    of-y-scroll scrollbar-hide overscroll-none
-    class="scrollbar-hide after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-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>

components/nav/NavBottomMoreMenu.vue

@@ -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) => {
+watch(visible, (val) => {
-  if (val && val !== oldVal) {
+  if (val && typeof document !== 'undefined')
-    if (!import.meta.env.SSR && typeof document !== 'undefined')
+    document.addEventListener('click', clickEvent)
-      document.addEventListener('click', clickEvent)
+})
-  }
-}, { flush: 'post' })
 
 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>

unocss.config.ts

@@ -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
+    }],
+  ],
 })