refactor(vote): ♻️ extract mask component

PatchyVideo · Dec 7, 2023 · a74ff78 · a74ff78
1 parent 83853e8
commit a74ff78
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 138 deletions.
diff --git a/packages/vote/src/common/components/Mask.vue b/packages/vote/src/common/components/Mask.vue
@@ -0,0 +1,51 @@
+<template>
+  <Transition name="mask">
+    <div
+      v-if="open"
+      class="fixed inset-0 backdrop-filter backdrop-blur-sm"
+      :style="'z-index:' + props.zIndex"
+      @click="closeMask()"
+      @touchmove.stop.prevent
+    />
+  </Transition>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: true,
+  },
+  clickToClose: {
+    type: Boolean,
+    default: false,
+  },
+  zIndex: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:open', value: boolean): void
+}>()
+
+const open = useVModel(props, 'open', emit)
+
+function closeMask() {
+  props.clickToClose && (open.value = false)
+}
+</script>
+
+<style lang="postcss" scoped>
+.mask-enter-active,
+.mask-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.mask-enter-from,
+.mask-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/packages/vote/src/common/components/VoteMessageBox.vue b/packages/vote/src/common/components/VoteMessageBox.vue
@@ -2,7 +2,7 @@
   <transition name="messageBox">
     <div
       v-if="open"
-      class="fixed max-h-2/3 top-1/2 mx-auto left-0 right-0 -mt-60 p-2 w-19/20 max-w-70ch rounded bg-subaccent bg-opacity-90 shadow z-51 flex flex-col"
+      class="fixed max-h-2/3 top-1/2 mx-auto left-0 right-0 -mt-70 p-2 w-19/20 max-w-70ch rounded bg-subaccent bg-opacity-90 shadow z-51 flex flex-col"
     >
       <div class="flex justify-between items-center">
         <div class="text-lg truncate">{{ props.title }}</div>
@@ -14,14 +14,13 @@
       </div>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-subaccent bg-opacity-0 z-50" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" />
 </template>
 
 <script lang="ts" setup>
 import { onBeforeUnmount, watchEffect } from 'vue'
 import { useVModel } from '@vueuse/core'
+import Mask from '@/common/components/Mask.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -62,12 +61,4 @@ onBeforeUnmount(() => {
 .messageBox-leave-to {
   @apply opacity-0;
 }
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/home/UserHome.vue b/packages/vote/src/home/UserHome.vue
@@ -27,7 +27,7 @@
       <Transition name="userList">
         <div
           v-if="userListOpen"
-          class="absolute min-w-30 text-center top-6 z-51 right-0.5 rounded bg-subaccent p-2 shadow"
+          class="absolute min-w-30 text-center top-6 z-51 right-0.5 rounded bg-subaccent bg-opacity-90 p-2 shadow"
         >
           <img
             class="absolute -top-5 right-2 h-11 w-11 rounded-full ring-2 ring-accent-color-200 cursor-pointer"
@@ -50,15 +50,7 @@
           </div>
         </div>
       </Transition>
-      <!-- Mask -->
-      <Transition name="mask">
-        <div
-          v-if="userListOpen"
-          class="fixed inset-0 bg-subaccent bg-opacity-0 z-50"
-          @click="userListOpen = false"
-          @touchmove.prevent.passive
-        ></div>
-      </Transition>
+      <Mask v-model:open="userListOpen" click-to-close />
     </div>
 
     <!-- Main Content -->
@@ -294,16 +286,7 @@
                 </div>
               </div>
             </Transition>
-            <!-- Mask -->
-            <Transition name="mask">
-              <div
-                v-if="userListOpen"
-                class="fixed inset-0 bg-subaccent bg-opacity-0 z-50"
-                @click="() => (userListOpen = false)"
-                @keydown.escape="() => (userListOpen = false)"
-                @touchmove.prevent.passive
-              ></div>
-            </Transition>
+            <Mask v-model:open="userListOpen" click-to-close />
           </div>
         </div>
         <!-- Main Content -->
@@ -357,6 +340,7 @@ import UserQuestionnaireDp from '@/home/components/UserQuestionnaireDp.vue'
 import UserVoteDp from '@/home/components/UserVoteDp.vue'
 import VoteDoujinDp from '@/vote-doujin/components/VoteDoujinDp.vue'
 import Copyright from '@/common/components/Copyright.vue'
+import Mask from '@/common/components/Mask.vue'
 import { screenSizes } from '@/tailwindcss'
 import {
   deleteUserData,
@@ -482,14 +466,4 @@ const dpTabs = [
 .userList-leave-to {
   opacity: 0;
 }
-
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/home/components/LoginBox.vue b/packages/vote/src/home/components/LoginBox.vue
@@ -133,9 +133,7 @@
       </div>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-black bg-opacity-20 z-50" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" />
 </template>
 <script lang="ts" setup>
 import { computed, ref, shallowRef, watchEffect } from 'vue'
@@ -144,6 +142,7 @@ import { gql, useMutation } from '@/graphql'
 import type { Mutation } from '@/graphql'
 import { setUserDataToLocalStorage } from '@/home/lib/user'
 import { popMessageText } from '@/common/lib/popMessage'
+import Mask from '@/common/components/Mask.vue'
 
 const props = defineProps({
   open: {
@@ -405,12 +404,4 @@ const codeEl = shallowRef<HTMLInputElement | null>()
 .loginBox-leave-to {
   @apply opacity-0;
 }
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/questionnaire/components/QuestionnaireChange.vue b/packages/vote/src/questionnaire/components/QuestionnaireChange.vue
@@ -42,16 +42,15 @@
     </div>
     <div class="text-right text-accent-color-600 cursor-pointer" @click="close()">▲收起</div>
   </div>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-black bg-opacity-20 z-50" @touchmove.stop.prevent @click="close()"></div>
-  </Transition>
+  <Mask v-model:open="open" click-to-close />
 </template>
 
 <script lang="ts" setup>
 import { onMounted, ref, watch, watchEffect } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { questionDone, questionnaireKeyToName } from '@/questionnaire/lib/questionnaireData'
+import Mask from '@/common/components/Mask.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -124,13 +123,3 @@ function changeQuestion(big: string, small: string, index: number): void {
   close()
 }
 </script>
-<style lang="postcss" scoped>
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
-</style>
diff --git a/packages/vote/src/vote-character/components/AdvancedFilter.vue b/packages/vote/src/vote-character/components/AdvancedFilter.vue
@@ -38,9 +38,7 @@
       </div>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-subaccent bg-opacity-0 z-52" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" :z-index="52" />
 </template>
 
 <script lang="ts" setup>
@@ -60,6 +58,7 @@ import {
   worksListAfterFilterTem,
 } from '@/vote-character/lib/workList'
 import VoteSelect from '@/common/components/VoteSelect.vue'
+import Mask from '@/common/components/Mask.vue'
 
 const props = defineProps({
   open: {
@@ -102,12 +101,4 @@ function resetFilter(): void {
 .advancedFilter-leave-to {
   @apply opacity-0;
 }
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/vote-character/components/CharacterSelect.vue b/packages/vote/src/vote-character/components/CharacterSelect.vue
@@ -64,9 +64,7 @@
       </div>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-subaccent bg-opacity-0 z-50" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" />
   <AdvancedFilter v-model:open="advancedFilterOpen" />
 </template>
 
@@ -86,6 +84,7 @@ import {
 import { characters } from '@/vote-character/lib/voteData'
 import VoteSelect from '@/common/components/VoteSelect.vue'
 import AutoComplete from '@/common/components/AutoComplete.vue'
+import Mask from '@/common/components/Mask.vue'
 
 const props = defineProps({
   open: {
@@ -149,12 +148,4 @@ function characterSelect(id: string): void {
 .selectBox-leave-to {
   @apply opacity-0;
 }
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/vote-couple/components/AdvancedFilter.vue b/packages/vote/src/vote-couple/components/AdvancedFilter.vue
@@ -38,9 +38,7 @@
       </div>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-subaccent bg-opacity-0 z-52" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" :z-index="52" />
 </template>
 
 <script lang="ts" setup>
@@ -60,6 +58,7 @@ import {
   worksListAfterFilterTem,
 } from '@/vote-couple/lib/workList'
 import VoteSelect from '@/common/components/VoteSelect.vue'
+import Mask from '@/common/components/Mask.vue'
 
 const props = defineProps({
   open: {
@@ -103,12 +102,4 @@ function resetFilter(): void {
 .advancedFilter-leave-to {
   @apply opacity-0;
 }
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/vote-couple/components/CharacterSelect.vue b/packages/vote/src/vote-couple/components/CharacterSelect.vue
@@ -56,9 +56,7 @@
       </div>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-subaccent bg-opacity-0 z-50" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" />
   <AdvancedFilter v-model:open="advancedFilterOpen" />
 </template>
 
@@ -75,6 +73,7 @@ import { characterList } from '@/vote-character/lib/characterList'
 import { Couple } from '@/vote-couple/lib/couple'
 import { filterForKind, workSelected } from '@/vote-couple/lib/workList'
 import { pinin } from '@/common/lib/pinin'
+import Mask from '@/common/components/Mask.vue'
 
 const props = defineProps({
   open: {
@@ -202,12 +201,4 @@ function characterSelect(id: string): void {
 .selectBox-leave-to {
   @apply opacity-0;
 }
-.mask-enter-active,
-.mask-leave-active {
-  @apply transition-all duration-200;
-}
-.mask-enter-from,
-.mask-leave-to {
-  @apply bg-opacity-0;
-}
 </style>
diff --git a/packages/vote/src/vote-doujin/components/EditDoujin.vue b/packages/vote/src/vote-doujin/components/EditDoujin.vue
@@ -145,23 +145,22 @@
           <button class="px-5 py-1 rounded text-white bg-accent-color-600" @click="comfirmEdit()">确定</button>
         </div>
       </div>
-      <!-- Mask for fetching messages  -->
       <Transition name="mask">
         <div
           v-if="fetchLoading"
-          class="absolute top-0 bottom-0 left-0 right-0 rounded flex justify-center filter drop-shadow-md backdrop-filter backdrop-blur-sm"
+          class="absolute inset-0 rounded flex justify-center backdrop-filter backdrop-blur-sm"
           @touchmove.stop.prevent
         >
           <div class="flex items-center text-accent-color-600 font-bold text-lg">
-            <icon-uil-spinner-alt class="animate-spin" />少女祈祷中...
+            <icon-uil-spinner-alt class="animate-spin" />
+            少女祈祷中...
           </div>
         </div>
       </Transition>
     </div>
   </transition>
-  <Transition name="mask">
-    <div v-if="open" class="fixed inset-0 bg-black bg-opacity-20 z-39" @touchmove.stop.prevent></div>
-  </Transition>
+  <Mask v-model:open="open" :z-index="39" />
+
   <VoteMessageBox v-model:open="noticeOpen" title="提名规则">
     <div class="flex flex-col overflow-auto">
       <ul class="space-y-2 p-2 list-disc list-inside">
@@ -212,6 +211,7 @@ import { doujinValid } from '@/vote-doujin/lib/doujinList'
 import { doujins, setVoteDataDoujins } from '@/vote-doujin/lib/voteData'
 import VoteSelect from '@/common/components/VoteSelect.vue'
 import VoteMessageBox from '@/common/components/VoteMessageBox.vue'
+import Mask from '@/common/components/Mask.vue'
 import { popConfirmText, popMessageText } from '@/common/lib/popMessage'
 
 const props = defineProps({