feat : middleware and refresh token

2026-04-06 13:55:31 +07:00
parent d438fb0f5f
commit 4325bae76f
16 changed files with 1127 additions and 476 deletions
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+type ConfirmDialogMode = {
+  modelValue: boolean;
+  title?: string;
+  message?: string;
+
+  confirmText?: string;
+  cancelText?: string;
+
+  confirmColor?: string;
+  cancelColor?: string;
+
+  persistent?: boolean;
+  maxWidth?: number | string;
+
+  loading?: boolean;
+
+  // Kalau true: klik "Ya" langsung tutup.
+  // Kalau false: parent yang nutup (cocok untuk async delete/update).
+  closeOnConfirm?: boolean;
+};
+
+const props = withDefaults(defineProps<ConfirmDialogMode>(), {
+  title: 'Konfirmasi',
+  message: 'Apakah Anda yakin?',
+  confirmText: 'Ya',
+  cancelText: 'Tidak',
+  confirmColor: 'success',
+  cancelColor: 'error',
+  persistent: true,
+  maxWidth: 500,
+  loading: false,
+  closeOnConfirm: true,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'confirm'): void;
+  (e: 'cancel'): void;
+}>();
+
+const close = () => emit('update:modelValue', false);
+
+const onCancel = () => {
+  emit('cancel');
+  close();
+};
+
+const onConfirm = () => {
+  emit('confirm');
+  if (props.closeOnConfirm) close();
+};
+</script>
+
+<template>
+  <v-dialog
+    location="top"
+    transition="dialog-top-transition"
+    :model-value="props.modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+    :persistent="props.persistent"
+    :max-width="props.maxWidth"
+  >
+    <v-card class="pa-6">
+      <v-card-title class="text-h5">
+        <slot name="title">{{ props.title }}</slot>
+      </v-card-title>
+
+      <v-card-text>
+        <slot>{{ props.message }}</slot>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          :color="props.cancelColor"
+          variant="tonal"
+          flat
+          :disabled="props.loading"
+          @click="onCancel"
+        >
+          {{ props.cancelText }}
+        </v-btn>
+
+        <v-btn
+          :color="props.confirmColor"
+          variant="tonal"
+          flat
+          :loading="props.loading"
+          :disabled="props.loading"
+          @click="onConfirm"
+        >
+          {{ props.confirmText }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>