DeleteModal.vue 982 Bytes
<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number
}>(), {
  count: 0
})

const { t } = useAppI18n()

const open = ref(false)

const title = computed(() => t('customers.deleteModal.title', {
  count: props.count,
  suffix: props.count > 1 ? 's' : ''
}))

async function onSubmit() {
  await new Promise(resolve => setTimeout(resolve, 1000))
  open.value = false
}
</script>

<template>
  <UModal
    v-model:open="open"
    :title="title"
    :description="t('customers.deleteModal.description')"
  >
    <slot />

    <template #body>
      <div class="flex justify-end gap-2">
        <UButton
          :label="t('common.cancel')"
          color="neutral"
          variant="subtle"
          @click="open = false"
        />
        <UButton
          :label="t('common.delete')"
          color="error"
          variant="solid"
          loading-auto
          @click="onSubmit"
        />
      </div>
    </template>
  </UModal>
</template>