<script setup>
import { ref, watch } from "vue";
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: { type: Boolean, required: true },
  color: { type: String, required: false }
});
const dialogVisible = ref(props.modelValue);
watch(() => props.modelValue, (newValue) => {
  dialogVisible.value = newValue;
});
watch(() => dialogVisible.value, (newValue) => {
  emit("update:modelValue", newValue);
});
</script>

<template>
  <v-dialog
    v-model="dialogVisible"
    persistent
    max-width="500"
  >
    <v-card :color="props.color">
      <v-card-text>
        <v-row>
          <v-col class="text-center">
            <slot>กรุณารอสักครู่</slot>
          </v-col>
        </v-row>
      </v-card-text>
      <v-progress-linear indeterminate />
    </v-card>
  </v-dialog>
</template>
