modal

components/Master/CardList.vue

@@ -11,7 +11,9 @@ withDefaults(
         // type: () => ({}),
     }
 )
-const emit = defineEmits(["detail"]);
+// const emit = defineEmits(["detail"]);
+
+const detail = ref(false);
 </script>
 <template>
     <v-card
@@ -88,11 +90,14 @@ const emit = defineEmits(["detail"]);
               </div>
             </template>
             <template v-slot:actions>
-              <v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn>
+              <v-btn color="primary" class="ms-auto" @click="detail= !detail">Detail</v-btn>
+              <!-- <MasterModal :title="'detail'"/> -->
+              <!-- <v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn> -->
                <!-- <v-btn v-for="itemButton in showButtons" @click="$emit(itemButton.tipe, props?.item)" :color="itemButton.color" class="ms-auto">
                     <v-icon :color="itemButton.color">{{ itemButton.icon }}</v-icon>
                     {{ itemButton.text }}
                 </v-btn> -->
             </template>
           </v-card>
+          <MasterModal :dialog="detail" @dialog="detail = $event"/>
 </template>

components/Master/modal.vue

@@ -0,0 +1,40 @@
+<script setup>
+  import { ref } from 'vue'
+
+  const props = defineProps({
+      title:{
+        type: String
+      },
+      dialog: {
+          type: Boolean
+      }
+  })
+//   const dialog = ref(false)
+</script>
+<template>
+  <div class="text-center pa-4">
+    <!-- <v-btn @click="dialog = true" class="ms-auto">
+      coba
+    </v-btn> -->
+
+    <v-dialog
+      v-model="props.dialog"
+      width="auto"
+    >
+      <v-card
+        max-width="400"
+        prepend-icon="mdi-update"
+        text="Your application will relaunch automatically after the update is complete."
+        title="Update in progress"
+      >
+        <template v-slot:actions>
+          <v-btn
+            class="ms-auto"
+            text="Ok"
+            @click="$emit('dialog', false)"
+          ></v-btn>
+        </template>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>

pages/Setting/typeUser/index.vue

@@ -13,11 +13,14 @@ const detailType = (item) => {
   console.log(item); //simpan pinia
   navigateTo(`/Setting/typeUser/HakAkses`);
 };
-const dialog = ref(false);
-
+// const dialog = ref(false);
+const detail = ref(false);
 </script>
 <!-- ini list -->
 <template>
+  <div class="d-flex pt-6 align-center justify-end">
+        <v-btn class="mr-16" color="primary" variant="tonal" @click="detail= !detail"><v-icon>mdi-plus</v-icon> Tipe User</v-btn>
+    </div>
   <v-row no-gutters>
     <div class="d-flex justify-space-between">
       <template v-if="typeUser && typeUser.length > 0">
@@ -32,4 +35,5 @@ const dialog = ref(false);
       </template>
     </div>
   </v-row>
+  <MasterModal :dialog="detail" @dialog="detail = $event"/>
 </template>