fix: add word-wrap toggle to danger confirm dialog

This commit is contained in:
t8y2 committed 2026-06-16 23:00:46 +08:00
1 parent f14973eaef
commit 412bb2be87
8 files changed
+16 -3

No files matched your search

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from "vue";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { AlertTriangle, Loader2 } from "@lucide/vue";
import { AlertTriangle, Loader2, TextWrap } from "@lucide/vue";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
@@ -13,6 +13,7 @@ const { highlight } = useSqlHighlighter();
const open = defineModel<boolean>("open", { default: false });
const suppressFuturePrompts = defineModel<boolean>("suppressFuturePrompts", { default: false });
const wrap = ref(false);
const props = withDefaults(
defineProps<{
@@ -72,7 +73,12 @@ function onConfirm() {
<div class="py-4 min-w-0">
<p class="text-sm text-muted-foreground mb-3">{{ message || t("dangerDialog.message") }}</p>
<pre v-if="code" class="text-xs bg-muted p-3 rounded overflow-auto max-h-40 min-w-0 font-mono whitespace-pre" v-html="highlightedCode" />
<div v-if="code" class="relative">
<Button variant="ghost" size="icon-xs" class="absolute top-1 right-1 z-10 h-6 w-6" :class="wrap ? 'text-foreground bg-accent' : 'text-muted-foreground'" :title="t('dangerDialog.wrapLines')" @click="wrap = !wrap">
<TextWrap class="h-3.5 w-3.5" />
</Button>
<pre class="text-xs bg-muted px-3 pt-3 pb-3 pr-7 rounded overflow-auto max-h-40 min-w-0 font-mono" :class="wrap ? 'whitespace-pre-wrap' : 'whitespace-pre'" v-html="highlightedCode" />
</div>
<div v-if="showSuppressToggle" class="mt-3 flex items-center justify-between gap-4 rounded-md border bg-muted/20 px-3 py-2">
<Label for="danger-confirm-suppress" class="text-sm leading-5">{{ suppressToggleLabel || t("dangerDialog.suppressFuturePrompts") }}</Label>
<Switch id="danger-confirm-suppress" v-model="suppressFuturePrompts" />