feat(nuxt-admin): add modal delete confirmation

starter/nuxt-admin/components/Dashboard/Table.vue

@@ -3,7 +3,7 @@
 import '@gits-id/pagination/src/VPagination.scss';
 import '@gits-id/table/src/VDataTable.scss';
 import '@gits-id/table/src/VDataTablePagination.scss';
-import type {VDataTableHeader} from '@gits-id/ui';
+import type {VDataTableHeader, VDataTableItem} from '@gits-id/ui';
 
 const headers = ref<VDataTableHeader[]>([
   {
@@ -271,6 +271,22 @@ const statusColor: Record<string, string> = {
   Customer: 'success',
   Churned: 'default',
 };
+
+const selectedItem = ref();
+const dialogDelete = ref(false);
+
+const deleteItem = (item: VDataTableItem) => {
+  selectedItem.value = item;
+  dialogDelete.value = true;
+};
+
+const onItemDeleted = () => {
+  const index = items.value.findIndex(
+    (item) => item.company.name === selectedItem.value.company.name,
+  );
+  items.value.splice(index, 1);
+  dialogDelete.value = false;
+};
 </script>
 
 <template>
@@ -353,9 +369,17 @@ const statusColor: Record<string, string> = {
         {{ item.about.description }}
       </div>
     </template>
-    <template #item.action>
+    <template #item.action="{item}">
       <VBtn text fab size="sm" prefix-icon="ic:round-edit"></VBtn>
-      <VBtn text fab size="sm" prefix-icon="ic:round-delete"></VBtn>
+      <VBtn
+        text
+        fab
+        size="sm"
+        prefix-icon="ic:round-delete"
+        @click="deleteItem(item)"
+      ></VBtn>
     </template>
   </VDataTable>
+
+  <ModalDelete v-model="dialogDelete" @yes="onItemDeleted" />
 </template>

starter/nuxt-admin/components/Modal/ModalDelete.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {useVModel} from '@vueuse/core';
+
+interface Props {
+  modelValue?: boolean;
+  message?: string;
+  yesText?: string;
+  noText?: string;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  message: 'Are you sure want to delete this item?',
+  yesText: 'Yes, delete it!',
+  noText: 'Cancel',
+  title: 'Delete Confirmation',
+});
+
+const emit =
+  defineEmits<{
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'yes'): void;
+    (e: 'no'): void;
+  }>();
+
+const isOpen = useVModel(props, 'modelValue', emit);
+
+const yes = () => {
+  emit('yes');
+  isOpen.value = false;
+};
+
+const no = () => {
+  emit('no');
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <VModal v-model="isOpen" :title="title" hide-x-button>
+    {{ message }}
+    <template #footer>
+      <VBtn @click="no"> {{ noText }}</VBtn>
+      <VBtn color="error" @click="yes"> {{ yesText }}</VBtn>
+    </template>
+  </VModal>
+</template>