implemented device name

src/components/ui/dialog/confirm.vue

@@ -20,13 +20,15 @@
           class="btn-error btn-outline w-full sm:w-auto"
           @click="onAbort"
         >
-          <Icon name="mdi:close" /> {{ abortLabel ?? t('abort') }}
+          <Icon :name="abortIcon || 'mdi:close'" />
+          {{ abortLabel ?? t('abort') }}
         </UiButton>
         <UiButton
           class="btn-primary w-full sm:w-auto"
           @click="onConfirm"
         >
-          <Icon name="mdi:check" /> {{ confirmLabel ?? t('confirm') }}
+          <Icon :name="confirmIcon || 'mdi:check'" />
+          {{ confirmLabel ?? t('confirm') }}
         </UiButton>
       </slot>
     </template>
@@ -34,7 +36,13 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ confirmLabel?: string; abortLabel?: string; title?: string }>()
+defineProps<{
+  confirmLabel?: string
+  abortLabel?: string
+  title?: string
+  abortIcon?: string
+  confirmIcon?: string
+}>()
 
 const open = defineModel<boolean>('open', { default: false })
 

src/components/ui/dialog/index.vue

@@ -25,7 +25,7 @@
         class="overlay-animation-target overlay-open:duration-300 overlay-open:opacity-100 transition-all ease-out modal-dialog"
       >
         <div class="modal-content justify-between">
-          <div class="modal-header">
+          <div class="modal-header py-0 sm:py-4">
             <div
               v-if="title || $slots.title"
               class="modal-title py-4 break-all"
@@ -49,7 +49,7 @@
             </button>
           </div>
 
-          <div class="modal-body text-sm sm:text-base grow">
+          <div class="modal-body text-sm sm:text-base grow mt-0 pt-0">
             <slot />
           </div>