Migrate modal to Vuetify dialog

src/App.vue

@@ -117,10 +117,10 @@
       </v-dialog>
 
       <about-modal :open="modalState.aboutModalOpen" :dismiss="modalActions.closeAboutModal" />
-      <contact-modal :open="modalState.contactModalOpen" :dismiss="modalActions.closeContactModal" />
+      <contact-modal v-model="modalState.contactModalOpen" />
       <getting-started-modal :open="modalState.gettingStartedModalOpen" :dismiss="modalActions.closeGettingStartedModal" />
       <safety-modal v-model="modalState.safetyModalOpen" />
-      <tutorial-modal :open="modalState.tutorialModalOpen" :dismiss="modalActions.closeTutorialModal" />
+      <tutorial-modal v-model:open="modalState.tutorialModalOpen" />
       <ios-version-modal :open="modalState.supportIOSVersionModalOpen" :dismiss="modalActions.closesupportIOSVersionModal" />
       <api-config-modal :open="modalState.apiConfigModalOpen" :dismiss="modalActions.closeApiConfigModal" />
       <!-- alert or modal -->
@@ -133,7 +133,7 @@
     </v-main>
 
   <factory-detail-page />
-  <maintenance-modal :open="maintenanceModalOpen" :dismiss="dismissMaintenanceModal" />
+  <maintenance-modal v-model="maintenanceModalOpen" />
   </v-app>
 </template>
 
@@ -154,13 +154,13 @@ import SafetyModal from '@/components/SafetyModal.vue'
 import IosVersionModal from '@/components/IOSVersionAlertModal.vue'
 import ApiConfigModal from '@/components/ApiConfigModal.vue'
 
-import { MapFactoryController } from './lib/map'
-import { MainMapControllerSymbol } from './symbols'
-import { useModalState } from './lib/hooks'
-import { useAppState } from './lib/appState'
-import { useAlertState } from './lib/useAlert'
+import { MapFactoryController } from '@/lib/map'
+import { MainMapControllerSymbol } from '@/symbols'
+import { useModalState } from '@/lib/hooks'
+import { useAppState } from '@/lib/appState'
+import { useAlertState } from '@/lib/useAlert'
 
-import MaintenanceModal from './components/MaintenanceModal.vue'
+import MaintenanceModal from '@/components/MaintenanceModal.vue'
 
 export default defineComponent({
   name: 'App',

src/components/ContactModal.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="contact-modal-container">
-    <app-modal :open="open" :dismiss="dismiss">
+  <v-dialog v-model="contactModalState" v-bind="$attrs" max-width="350">
+    <div class="contact-modal">
       <div class="page">
         <img width="137" src="/images/cet-logo.png" alt="Citizen of the Earth Taiwan">
 
@@ -15,26 +15,29 @@
           Email: <a href="mailto:cet@cet-taiwan.org">cet@cet-taiwan.org</a><br>
         </p>
       </div>
-    </app-modal>
-  </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script lang="ts">
-import AppModal from '@/components/AppModal.vue'
-import { defineComponent } from 'vue'
+import { defineComponent, computed } from 'vue'
 
 export default defineComponent({
   name: 'ContactModal',
-  components: {
-    AppModal
-  },
   props: {
-    open: {
-      type: Boolean,
-      default: false
-    },
-    dismiss: {
-      type: Function
+    value: {
+      required: true,
+      type: Boolean
+    }
+  },
+  setup (props, context) {
+    const contactModalState = computed({
+      get: () => props.value,
+      set: (value) => context.emit('input', value)
+    })
+
+    return {
+      contactModalState
     }
   }
 })
@@ -44,19 +47,14 @@ export default defineComponent({
 @import '@/styles/page';
 @import '@/styles/variables';
 
-.contact-modal-container .app-modal {
-  top: 25px;
-  max-height: calc(100% - 50px);
-  max-width: calc(100% - 20px);
-  padding-top: 60px;
+.contact-modal {
+  background-color: white;
+  padding: 12px;
+  text-align: center;
 
-  .page {
-    text-align: center;
-
-    h3 {
-      color: $primary-color;
-      line-height: 1.5em;
-    }
+  .page h3 {
+    color: $primary-color;
+    line-height: 1.5em;
   }
 }
 </style>

src/components/MaintenanceModal.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="maintenance-modal-container">
-    <app-modal :open="open" :dismiss="dismiss">
+  <v-dialog v-model="maintenanceModalState" v-bind="$attrs" max-width="600">
+    <div class="maintenance-modal">
       <div class="page">
         <h2>🔧【系統維修中！】</h2>
         <div class="icon-section">
@@ -23,27 +23,37 @@
           </app-button>
         </div>
       </div>
-    </app-modal>
-  </div>
+    </div>
+  </v-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import AppModal from './AppModal.vue'
+import { defineComponent, computed } from 'vue'
 import AppButton from './AppButton.vue'
 import { VIcon } from 'vuetify/lib/components'
 
 export default defineComponent({
   name: 'MaintenanceModal',
-  components: { AppModal, AppButton, VIcon },
+  components: { AppButton, VIcon },
   props: {
-    open: {
-      type: Boolean,
-      required: true
-    },
-    dismiss: {
-      type: Function,
-      required: true
+    value: {
+      required: true,
+      type: Boolean
+    }
+  },
+  setup (props, context) {
+    const maintenanceModalState = computed({
+      get: () => props.value,
+      set: (value) => context.emit('input', value)
+    })
+
+    const dismiss = () => {
+      maintenanceModalState.value = false
+    }
+
+    return {
+      maintenanceModalState,
+      dismiss
     }
   }
 })
@@ -52,48 +62,23 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/styles/variables';
 
-.maintenance-modal-container :deep(.app-modal) {
-  top: 25px;
-  max-height: calc(100% - 50px);
-  max-width: 600px;
-  width: calc(100% - 40px);
+.maintenance-modal {
+  padding: 27px 22px;
+  background-color: white;
 
   .page {
     h2 {
-      color: $primary-color;
+      line-height: normal;
       margin-bottom: 20px;
-      text-align: center;
     }
 
     .icon-section {
-      display: flex;
-      justify-content: center;
+      text-align: center;
       margin-bottom: 16px;
     }
 
     .message-section {
       margin-bottom: 20px;
-
-      .main-message {
-        font-weight: bold;
-        color: #222 !important;
-        margin-bottom: 16px;
-        font-size: 18px;
-      }
-
-      .detail-message {
-        color: #333 !important;
-        font-size: 15px;
-        line-height: 1.8;
-      }
-    }
-
-    .button-section {
-      display: flex;
-      justify-content: center;
-      .app-button {
-        min-width: 120px;
-      }
     }
   }
 }

src/components/SafetyModal.vue

@@ -94,4 +94,3 @@ export default defineComponent({
   }
 }
 </style>
-G