From 22df05757d19cbcfb4ccd33eff22d38fc242eb61 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 24 Jul 2025 10:56:10 +0800
Subject: [PATCH] use rich text in confirmation dialog

---
 next-ui/src/components/dialog/Confirm.vue | 28 ++++++++++++++---------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/next-ui/src/components/dialog/Confirm.vue b/next-ui/src/components/dialog/Confirm.vue
index ce67d77c..a97a40a2 100644
--- a/next-ui/src/components/dialog/Confirm.vue
+++ b/next-ui/src/components/dialog/Confirm.vue
@@ -21,18 +21,22 @@
           <template #text>
             <slot name="warning" />
             <slot name="text">
-              {{
-                $formatMessage(
-                  {
+              <FormattedMessage
+                :messageDescriptor="
+                  defineMessage({
                     description: 'Confirmation dialog: default hint to retype validation text',
-                    defaultMessage: 'Please type {validateText} to confirm.',
-                    id: 'eVoe+D',
-                  },
-                  {
-                    validateText: validateText,
-                  },
-                )
-              }}
+                    defaultMessage: 'Please type <b>{validateText}</b> to confirm.',
+                    id: 'XnidLu',
+                  })
+                "
+                :values="{ validateText: validateText }"
+              >
+                <template #b="Content">
+                  <span class="font-weight-bold">
+                    <component :is="Content" />
+                  </span>
+                </template>
+              </FormattedMessage>
             </slot>
 
             <v-text-field
@@ -72,6 +76,8 @@
 </template>
 
 <script setup lang="ts">
+import { defineMessage } from 'vue-intl'
+
 const showDialog = defineModel<boolean>('dialog', { required: false })
 const emit = defineEmits<{
   confirm: []