visua-vue/src/components/modal/VConfirmModal.vue

<script setup lang="ts">
import ConfirmDialog from 'primevue/confirmdialog';
import type { ConfirmDialogProps } from 'primevue/confirmdialog';
import VButtonGroup from '../button/VButtonGroup.vue';
import styles from '@visua/typography.module.css';

const props = withDefaults(defineProps<ConfirmDialogProps>(), {
  group: '',
  draggable: true,
  breakpoints: undefined,
})
</script>

<template>
  <ConfirmDialog
    :group="props.group"
    :draggable="props.draggable"
    :breakpoints="props.breakpoints"
    role="alert"
  >
    <template #container="slotProps">
      <div class="container">
        <div
          class='header'
          :class="[styles['titles-H6-XXS']]"
          :style="('danger' in slotProps.message.acceptProps) ? {color: 'var(--text-default-error)'} : {color: 'var(--text-default-warning)'}"
        >
          <i :class="slotProps.message.icon" style="font-weight:lighter;"></i>
          <span style="width: 100%;">{{ slotProps.message.header }}</span>
        </div>
        <span>{{ slotProps.message.message }}</span>
          <VButtonGroup
            :title="slotProps.message.group"
            inline-layout-when="always"
            size="sm"
            align="right"
            :buttons="[
              {
                ...slotProps.message.acceptProps,
                onclick: slotProps.acceptCallback
              },
              {
                ...slotProps.message.rejectProps,
                onclick: slotProps.rejectCallback
              }
            ]"
          />
        </div>
    </template>
  </ConfirmDialog>
</template>

<style lang="css" scoped>
.container{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.header{
  display: flex;
  flex-direction: row;
  gap: var(--p-dialog-header-gap);
  align-items: baseline;
}
</style>