BaseDialogに統合

Author: NEKOYASAN

src/components/ActionButton.vue

@@ -7,7 +7,7 @@
     @click="$emit('click')"
   >
     <span>{{ text }}</span>
-    <v-icon v-if="logoutIcon">mdi-login-variant</v-icon>
+    <v-icon v-if="icon">{{ icon }}</v-icon>
   </v-btn>
 </template>
 
@@ -30,8 +30,8 @@ export default class ActionButton extends Vue {
   @Prop({ default: false })
   isLoading?: boolean
 
-  @Prop({ default: false })
-  logoutIcon?: boolean
+  @Prop({ default: '' })
+  icon?: string
 }
 </script>
 

src/components/BaseDialog.vue

@@ -18,6 +18,8 @@
           v-for="(action, i) in actions"
           :key="i"
           class="my-3"
+          :theme="action.theme"
+          :icon="action.iconName"
           :text="action.buttonLabel"
           @click="doDialogAction(i)"
         />
@@ -39,6 +41,8 @@ import ActionButton from '@/components/ActionButton.vue'
 
 export type DialogAction = {
   buttonLabel: string
+  iconName: string
+  theme: string
   /**
    * ボタン押下時に実行する処理。実行後に BaseModalDialog を閉じないようにするには true を返す。
    */

src/components/ViewerDialog.vue

@@ -8,20 +8,29 @@
         @input="openCalenderDialog = false"
       />
     </v-dialog>
-    <viewer-dialog
+    <base-dialog
       v-model="openClassIdDialog"
       icon-name="mdi-clipboard-account"
-      default-cancel-button-label="ログアウト"
-      :logout-icon="true"
+      hide-default-cancel-button
       :actions="[
         {
           buttonLabel: '閉じる',
+          iconName: '',
+          theme: 'primary',
           action: () => {
             return false
           }
+        },
+        {
+          buttonLabel: 'ログアウト',
+          iconName: 'mdi-login-variant',
+          theme: 'border',
+          action: () => {
+            clickLogout()
+            return false
+          }
         }
       ]"
-      @clickLogout="clickLogout"
     >
       <template v-slot:title>
         今、ログインしているクラスです
@@ -33,7 +42,7 @@
           <div class="ClassIdModal-Id">{{ classId }}</div>
         </div>
       </template>
-    </viewer-dialog>
+    </base-dialog>
     <v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
       <div class="loader">
         Loading
@@ -83,7 +92,7 @@ import Vue from 'vue'
 import dayjs from 'dayjs'
 import HeaderLogo from '@/assets/svgs/header_logo.svg'
 import CalendarBar from '@/components/CalendarBar.vue'
-import ViewerDialog from '@/components/ViewerDialog.vue'
+import BaseDialog from '@/components/BaseDialog.vue'
 import { vxm } from '@/store'
 
 type LocalData = {
@@ -99,7 +108,7 @@ export default Vue.extend({
   middleware: 'checkClassData',
   components: {
     CalendarBar,
-    ViewerDialog,
+    BaseDialog,
     HeaderLogo
   },
   data(): LocalData {