|
|
@@ -1,4 +1,5 @@
|
|
|
<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
import {
|
|
|
AlertDialog,
|
|
|
AlertDialogAction,
|
|
|
@@ -9,17 +10,32 @@ import {
|
|
|
AlertDialogHeader,
|
|
|
AlertDialogTitle,
|
|
|
} from '@/components/ui/alert-dialog'
|
|
|
+import { Switch } from '@/components/ui/switch'
|
|
|
+import { Label } from '@/components/ui/label'
|
|
|
|
|
|
defineProps<{
|
|
|
open: boolean
|
|
|
title?: string
|
|
|
description?: string
|
|
|
+ showCloudflareToggle?: boolean
|
|
|
}>()
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
(e: 'update:open', value: boolean): void
|
|
|
- (e: 'confirm'): void
|
|
|
+ (e: 'confirm', deleteFromCloudflare: boolean): void
|
|
|
}>()
|
|
|
+
|
|
|
+const deleteFromCloudflare = ref(false)
|
|
|
+
|
|
|
+function handleConfirm() {
|
|
|
+ emit('confirm', deleteFromCloudflare.value)
|
|
|
+ deleteFromCloudflare.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function handleCancel() {
|
|
|
+ emit('update:open', false)
|
|
|
+ deleteFromCloudflare.value = false
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -31,11 +47,17 @@ const emit = defineEmits<{
|
|
|
{{ description ?? 'This action cannot be undone.' }}
|
|
|
</AlertDialogDescription>
|
|
|
</AlertDialogHeader>
|
|
|
+ <div v-if="showCloudflareToggle" class="flex items-center gap-3 py-2">
|
|
|
+ <Switch id="cf-delete-toggle" v-model:checked="deleteFromCloudflare" />
|
|
|
+ <Label for="cf-delete-toggle" class="cursor-pointer">
|
|
|
+ Also delete from Cloudflare
|
|
|
+ </Label>
|
|
|
+ </div>
|
|
|
<AlertDialogFooter>
|
|
|
- <AlertDialogCancel @click="emit('update:open', false)">Cancel</AlertDialogCancel>
|
|
|
+ <AlertDialogCancel @click="handleCancel">Cancel</AlertDialogCancel>
|
|
|
<AlertDialogAction
|
|
|
class="bg-destructive text-white hover:bg-destructive/90"
|
|
|
- @click="emit('confirm')"
|
|
|
+ @click="handleConfirm"
|
|
|
>
|
|
|
Delete
|
|
|
</AlertDialogAction>
|