v-sistec-features 1.31.13 → 1.32.0

package/src/Modals/components/ModalConfirmacaoSimples.vue

@@ -0,0 +1,306 @@
+<!--
+========
+Componente de modal de confirmação simples e compacto.
+Segue o layout minimalista alinhado à esquerda sem dependência do Bootstrap, utilizando
+BotaoFechar, controle nativo de eventos e slots para botões extras.
+========
+-->
+<template>
+    <Teleport to="body">
+        <div
+            v-if="exibirModal"
+            class="modal-overlay"
+            @mousedown.self="aoClicarFora"
+        >
+            <div
+                class="modal-card"
+                :class="`modal-tamanho-${tamanho}`"
+                role="dialog"
+                aria-modal="true"
+            >
+                <div
+                    v-if="corBarraTopo"
+                    class="modal-status-topo"
+                    :class="classeStatusTopo"
+                    :style="estiloStatusTopo"
+                ></div>
+
+                <BotaoFechar
+                    v-if="mostrarBotaoFechar"
+                    flutuante
+                    :desabilitado="carregando"
+                    @click="cancelarAcao"
+                />
+
+                <div class="modal-body" :class="{ 'pe-5': mostrarBotaoFechar }">
+                    <div class="modal-titulo-simples">
+                        <slot name="titulo">{{ titulo }}</slot>
+                    </div>
+                    <div class="modal-descricao-simples mt-1">
+                        <slot>{{ descricao }}</slot>
+                    </div>
+                    <div v-if="slots.conteudo" class="mt-3">
+                        <slot name="conteudo"></slot>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <slot name="footer" :cancelar="cancelarAcao" :confirmar="confirmarAcao">
+                        <button
+                            v-if="mostrarBotaoCancelar"
+                            type="button"
+                            class="btn btn-link link-secondary me-auto text-nowrap px-2"
+                            :disabled="carregando"
+                            @click="cancelarAcao"
+                        >
+                            {{ textoCancelar }}
+                        </button>
+
+                        <div class="d-flex gap-2 align-items-center flex-wrap ms-auto">
+                            <slot name="botoes-extras" :cancelar="cancelarAcao" :confirmar="confirmarAcao"></slot>
+
+                            <button
+                                type="button"
+                                class="btn text-nowrap"
+                                :class="classeBotaoConfirmar"
+                                :style="estiloBotaoConfirmar"
+                                :disabled="desabilitarConfirmar || carregando"
+                                @click="confirmarAcao"
+                            >
+                                <span
+                                    v-if="carregando"
+                                    class="spinner-border spinner-border-sm me-2"
+                                    role="status"
+                                ></span>
+                                {{ textoConfirmar }}
+                            </button>
+                        </div>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, watch, onUnmounted, type Slots } from "vue";
+import BotaoFechar from "./BotaoFechar.vue";
+// Tipagem explícita dos slots do modal simples
+defineSlots<{
+    default?: (props: {}) => any;
+    titulo?: (props: {}) => any;
+    conteudo?: (props: {}) => any;
+    "botoes-extras"?: (props: { cancelar: () => void; confirmar: () => void }) => any;
+    footer?: (props: { cancelar: () => void; confirmar: () => void }) => any;
+}>();
+
+// Instância de slots para checagem no template
+const slots: Slots = useSlots();
+
+
+// Propriedades de configuração do modal simples compacto
+const props = defineProps({
+    modelValue: { type: Boolean, default: false },
+    tamanho: { type: String as () => "sm" | "md" | "lg", default: "sm" },
+    titulo: { type: String, default: "Você tem certeza?" },
+    descricao: { type: String, default: "Se você prosseguir, perderá todos os seus dados." },
+    textoCancelar: { type: String, default: "Cancelar" },
+    textoConfirmar: { type: String, default: "Sim, deletar" },
+    corBotaoConfirmar: {
+        type: String as () => "danger" | "primary" | "success" | "warning" | "brand",
+        default: "danger"
+    },
+    corBarraTopo: {
+        type: String as () => "brand" | "danger" | "success" | "warning" | "info" | "",
+        default: ""
+    },
+    mostrarBotaoCancelar: { type: Boolean, default: true },
+    mostrarBotaoFechar: { type: Boolean, default: false },
+    fecharAoClicarFora: { type: Boolean, default: true },
+    fecharComEsc: { type: Boolean, default: true },
+    fecharAoConfirmar: { type: Boolean, default: false },
+    desabilitarConfirmar: { type: Boolean, default: false },
+    carregando: { type: Boolean, default: false }
+});
+
+// Eventos emitidos pelo modal
+const emit = defineEmits(["update:modelValue", "confirmar", "cancelar", "fechar"]);
+
+// Sincroniza a visibilidade com o v-model
+const exibirModal = computed({
+    get: () => props.modelValue,
+    set: (valor: boolean) => emit("update:modelValue", valor)
+});
+
+// Controle de bloqueio de clique fora
+const bloquearCliqueFora = computed(() => !props.fecharAoClicarFora || props.carregando);
+
+// Controle de bloqueio da tecla ESC
+const bloquearEsc = computed(() => !props.fecharComEsc || props.carregando);
+
+// Classe CSS da barra de topo opcional
+const classeStatusTopo = computed(() => {
+    if (!props.corBarraTopo || props.corBarraTopo === "brand") return "";
+    return `bg-${props.corBarraTopo}`;
+});
+
+// Estilo inline para barra de topo com var(--color-brand)
+const estiloStatusTopo = computed(() => {
+    if (props.corBarraTopo === "brand") {
+        return { backgroundColor: "var(--color-brand, var(--tblr-primary, #206bc4))" };
+    }
+    return {};
+});
+
+// Classe CSS do botão de confirmação
+const classeBotaoConfirmar = computed(() => {
+    if (props.corBotaoConfirmar === "brand") return "btn-brand-custom text-white";
+    return `btn-${props.corBotaoConfirmar}`;
+});
+
+// Estilo inline do botão de confirmação quando configurado como brand
+const estiloBotaoConfirmar = computed(() => {
+    if (props.corBotaoConfirmar === "brand") {
+        return {
+            backgroundColor: "var(--color-brand, var(--tblr-primary, #206bc4))",
+            borderColor: "var(--color-brand, var(--tblr-primary, #206bc4))"
+        };
+    }
+    return {};
+});
+
+// Recebe o evento de teclado, não devolve valor e fecha o modal ao pressionar ESC
+function aoPressionarTecla(evento: KeyboardEvent) {
+    if (evento.key === "Escape" && exibirModal.value && !bloquearEsc.value) {
+        cancelarAcao();
+    }
+}
+
+// Registra e limpa o listener da tecla ESC conforme abertura do modal
+watch(
+    exibirModal,
+    (aberto) => {
+        if (typeof window === "undefined") return;
+        if (aberto) {
+            window.addEventListener("keydown", aoPressionarTecla);
+        } else {
+            window.removeEventListener("keydown", aoPressionarTecla);
+        }
+    },
+    { immediate: true }
+);
+
+onUnmounted(() => {
+    if (typeof window !== "undefined") {
+        window.removeEventListener("keydown", aoPressionarTecla);
+    }
+});
+
+// Não recebe parâmetros, não devolve valor e fecha o modal ao clicar no fundo escuro
+function aoClicarFora() {
+    if (bloquearCliqueFora.value) return;
+    cancelarAcao();
+}
+
+// Não recebe parâmetros, não devolve valor e fecha o modal emitindo os eventos de cancelamento
+function cancelarAcao() {
+    if (props.carregando) return;
+    exibirModal.value = false;
+    emit("cancelar");
+    emit("fechar");
+}
+
+// Não recebe parâmetros, não devolve valor e emite o evento de confirmação para o componente pai
+function confirmarAcao() {
+    if (props.desabilitarConfirmar || props.carregando) return;
+    emit("confirmar");
+    if (props.fecharAoConfirmar) {
+        exibirModal.value = false;
+    }
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 16px;
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1050;
+    backdrop-filter: blur(2px);
+}
+
+.modal-card {
+    background: var(--bg-modal, var(--bg-primary, var(--tblr-bg-surface, #ffffff)));
+    color: var(--text-primary, var(--tblr-body-color, #1e293b));
+    width: 100%;
+    max-height: calc(100vh - 32px);
+    border-radius: 12px;
+    box-shadow: var(--shadow-float, 0 10px 25px rgba(0, 0, 0, 0.15));
+    border: 1px solid var(--border-light, var(--tblr-border-color, rgba(0, 0, 0, 0.08)));
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+}
+
+.modal-tamanho-sm {
+    max-width: 400px;
+}
+
+.modal-tamanho-md {
+    max-width: 540px;
+}
+
+.modal-tamanho-lg {
+    max-width: 720px;
+}
+
+.modal-status-topo {
+    height: 4px;
+    width: 100%;
+    flex-shrink: 0;
+}
+
+.modal-body {
+    padding: 20px;
+    background: var(--bg-primary, var(--tblr-bg-surface, #ffffff));
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.modal-titulo-simples {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-primary, var(--tblr-body-color, #1e293b));
+}
+
+.modal-descricao-simples {
+    font-size: 14px;
+    color: var(--text-secondary, var(--tblr-secondary, #64748b));
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 14px 20px;
+    border-top: 1px solid var(--border-light, var(--tblr-border-color, #e6e7e9));
+    background: var(--bg-secondary, var(--tblr-bg-surface-secondary, #f8fafc));
+    flex-shrink: 0;
+}
+
+.btn-brand-custom:hover:not(:disabled) {
+    filter: brightness(0.92);
+}
+</style>

package/src/Modals/components/ModalInformacao.vue

@@ -0,0 +1,129 @@
+<!--
+========
+Modal especializado para comunicados, ajuda e informações gerais (Info).
+Por padrão oculta o botão de cancelar e fecha automaticamente ao clicar em Entendi.
+========
+-->
+<template>
+    <ModalDialogoInterno
+        v-model="exibirModal"
+        :tamanho="tamanho"
+        :cor-topo="usarCorBrand ? 'brand' : 'info'"
+        :cor-botao-confirmar="usarCorBrand ? 'brand' : 'info'"
+        :titulo="titulo"
+        :descricao="descricao"
+        :texto-cancelar="textoCancelar"
+        :texto-confirmar="textoConfirmar"
+        :mostrar-botao-cancelar="mostrarBotaoCancelar"
+        :mostrar-botao-confirmar="mostrarBotaoConfirmar"
+        :mostrar-botao-fechar="mostrarBotaoFechar"
+        :fechar-ao-clicar-fora="fecharAoClicarFora"
+        :fechar-com-esc="fecharComEsc"
+        :fechar-ao-confirmar="fecharAoConfirmar"
+        :desabilitar-confirmar="desabilitarConfirmar"
+        :carregando="carregando"
+        @confirmar="emit('confirmar')"
+        @cancelar="emit('cancelar')"
+        @fechar="emit('fechar')"
+    >
+        <template #icone>
+            <slot name="icone">
+                <IconInfoCircle
+                    class="icon mb-2 icone-destaque"
+                    :class="usarCorBrand ? '' : 'text-info'"
+                    :style="usarCorBrand ? { color: 'var(--color-brand, var(--tblr-primary))' } : {}"
+                    stroke-width="1.5"
+                />
+            </slot>
+        </template>
+
+        <template v-if="slots.titulo" #titulo>
+            <slot name="titulo"></slot>
+        </template>
+
+        <template v-if="slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <template v-if="slots.conteudo" #conteudo>
+            <slot name="conteudo"></slot>
+        </template>
+
+        <template v-if="slots.extra" #extra>
+            <slot name="extra"></slot>
+        </template>
+
+        <template v-if="slots['botoes-esquerda']" #botoes-esquerda="escopo">
+            <slot name="botoes-esquerda" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots['botoes-meio']" #botoes-meio="escopo">
+            <slot name="botoes-meio" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots['botoes-direita']" #botoes-direita="escopo">
+            <slot name="botoes-direita" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots.footer" #footer="escopo">
+            <slot name="footer" v-bind="escopo"></slot>
+        </template>
+    </ModalDialogoInterno>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import { IconInfoCircle } from "@tabler/icons-vue";
+import ModalDialogoInterno, { type EscopoRodapeModal } from "./interno/ModalDialogoInterno.vue";
+
+// Tipagem dos slots aceitos pelo componente
+defineSlots<{
+    default?: (props: {}) => any;
+    icone?: (props: {}) => any;
+    titulo?: (props: {}) => any;
+    conteudo?: (props: {}) => any;
+    extra?: (props: {}) => any;
+    "botoes-esquerda"?: (props: EscopoRodapeModal) => any;
+    "botoes-meio"?: (props: EscopoRodapeModal) => any;
+    "botoes-direita"?: (props: EscopoRodapeModal) => any;
+    footer?: (props: EscopoRodapeModal) => any;
+}>();
+
+// Instância de slots para verificação segura no template
+const slots = useSlots();
+
+// Propriedades de configuração do modal informativo
+const props = defineProps({
+    modelValue: { type: Boolean, default: false },
+    tamanho: { type: String as () => "sm" | "md" | "lg", default: "sm" },
+    usarCorBrand: { type: Boolean, default: false },
+    titulo: { type: String, default: "Informação" },
+    descricao: { type: String, default: "" },
+    textoCancelar: { type: String, default: "Fechar" },
+    textoConfirmar: { type: String, default: "Entendi" },
+    mostrarBotaoCancelar: { type: Boolean, default: false },
+    mostrarBotaoConfirmar: { type: Boolean, default: true },
+    mostrarBotaoFechar: { type: Boolean, default: true },
+    fecharAoClicarFora: { type: Boolean, default: true },
+    fecharComEsc: { type: Boolean, default: true },
+    fecharAoConfirmar: { type: Boolean, default: true },
+    desabilitarConfirmar: { type: Boolean, default: false },
+    carregando: { type: Boolean, default: false }
+});
+
+// Eventos emitidos para o componente pai
+const emit = defineEmits(["update:modelValue", "confirmar", "cancelar", "fechar"]);
+
+// Sincroniza o estado de abertura do modal
+const exibirModal = computed({
+    get: () => props.modelValue,
+    set: (valor: boolean) => emit("update:modelValue", valor)
+});
+</script>
+
+<style scoped>
+.icone-destaque {
+    width: 3.5rem;
+    height: 3.5rem;
+}
+</style>

package/src/Modals/components/ModalPerigo.vue

@@ -0,0 +1,123 @@
+<!--
+========
+Modal especializado para ações destrutivas ou alertas de erro (Danger).
+Configura automaticamente o tema vermelho e o ícone de triângulo de alerta.
+========
+-->
+<template>
+    <ModalDialogoInterno
+        v-model="exibirModal"
+        :tamanho="tamanho"
+        cor-topo="danger"
+        cor-botao-confirmar="danger"
+        :titulo="titulo"
+        :descricao="descricao"
+        :texto-cancelar="textoCancelar"
+        :texto-confirmar="textoConfirmar"
+        :mostrar-botao-cancelar="mostrarBotaoCancelar"
+        :mostrar-botao-confirmar="mostrarBotaoConfirmar"
+        :mostrar-botao-fechar="mostrarBotaoFechar"
+        :fechar-ao-clicar-fora="fecharAoClicarFora"
+        :fechar-com-esc="fecharComEsc"
+        :fechar-ao-confirmar="fecharAoConfirmar"
+        :desabilitar-confirmar="desabilitarConfirmar"
+        :carregando="carregando"
+        @confirmar="emit('confirmar')"
+        @cancelar="emit('cancelar')"
+        @fechar="emit('fechar')"
+    >
+        <template #icone>
+            <slot name="icone">
+                <IconAlertTriangle class="icon mb-2 text-danger icone-destaque" stroke-width="1.5" />
+            </slot>
+        </template>
+
+        <template v-if="slots.titulo" #titulo>
+            <slot name="titulo"></slot>
+        </template>
+
+        <template v-if="slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <template v-if="slots.conteudo" #conteudo>
+            <slot name="conteudo"></slot>
+        </template>
+
+        <template v-if="slots.extra" #extra>
+            <slot name="extra"></slot>
+        </template>
+
+        <template v-if="slots['botoes-esquerda']" #botoes-esquerda="escopo">
+            <slot name="botoes-esquerda" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots['botoes-meio']" #botoes-meio="escopo">
+            <slot name="botoes-meio" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots['botoes-direita']" #botoes-direita="escopo">
+            <slot name="botoes-direita" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots.footer" #footer="escopo">
+            <slot name="footer" v-bind="escopo"></slot>
+        </template>
+    </ModalDialogoInterno>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import { IconAlertTriangle } from "@tabler/icons-vue";
+import ModalDialogoInterno, { type EscopoRodapeModal } from "./interno/ModalDialogoInterno.vue";
+
+// Tipagem dos slots aceitos pelo componente
+defineSlots<{
+    default?: (props: {}) => any;
+    icone?: (props: {}) => any;
+    titulo?: (props: {}) => any;
+    conteudo?: (props: {}) => any;
+    extra?: (props: {}) => any;
+    "botoes-esquerda"?: (props: EscopoRodapeModal) => any;
+    "botoes-meio"?: (props: EscopoRodapeModal) => any;
+    "botoes-direita"?: (props: EscopoRodapeModal) => any;
+    footer?: (props: EscopoRodapeModal) => any;
+}>();
+
+// Instância de slots para verificação segura no template
+const slots = useSlots();
+
+// Propriedades customizáveis do modal de perigo
+const props = defineProps({
+    modelValue: { type: Boolean, default: false },
+    tamanho: { type: String as () => "sm" | "md" | "lg", default: "sm" },
+    titulo: { type: String, default: "Você tem certeza?" },
+    descricao: { type: String, default: "Esta ação não poderá ser desfeita." },
+    textoCancelar: { type: String, default: "Cancelar" },
+    textoConfirmar: { type: String, default: "Deletar" },
+    mostrarBotaoCancelar: { type: Boolean, default: true },
+    mostrarBotaoConfirmar: { type: Boolean, default: true },
+    mostrarBotaoFechar: { type: Boolean, default: true },
+    fecharAoClicarFora: { type: Boolean, default: true },
+    fecharComEsc: { type: Boolean, default: true },
+    fecharAoConfirmar: { type: Boolean, default: false },
+    desabilitarConfirmar: { type: Boolean, default: false },
+    carregando: { type: Boolean, default: false }
+});
+
+// Eventos repassados ao componente pai
+const emit = defineEmits(["update:modelValue", "confirmar", "cancelar", "fechar"]);
+
+// Liga o estado do v-model ao componente interno
+const exibirModal = computed({
+    get: () => props.modelValue,
+    set: (valor: boolean) => emit("update:modelValue", valor)
+});
+</script>
+
+<style scoped>
+.icone-destaque {
+    width: 3.5rem;
+    height: 3.5rem;
+}
+</style>

package/src/Modals/components/ModalSucesso.vue

@@ -0,0 +1,123 @@
+<!--
+========
+Modal especializado para feedbacks de conclusão e sucesso (Success).
+Configura automaticamente o tema verde e o ícone de verificação concluída.
+========
+-->
+<template>
+    <ModalDialogoInterno
+        v-model="exibirModal"
+        :tamanho="tamanho"
+        cor-topo="success"
+        cor-botao-confirmar="success"
+        :titulo="titulo"
+        :descricao="descricao"
+        :texto-cancelar="textoCancelar"
+        :texto-confirmar="textoConfirmar"
+        :mostrar-botao-cancelar="mostrarBotaoCancelar"
+        :mostrar-botao-confirmar="mostrarBotaoConfirmar"
+        :mostrar-botao-fechar="mostrarBotaoFechar"
+        :fechar-ao-clicar-fora="fecharAoClicarFora"
+        :fechar-com-esc="fecharComEsc"
+        :fechar-ao-confirmar="fecharAoConfirmar"
+        :desabilitar-confirmar="desabilitarConfirmar"
+        :carregando="carregando"
+        @confirmar="emit('confirmar')"
+        @cancelar="emit('cancelar')"
+        @fechar="emit('fechar')"
+    >
+        <template #icone>
+            <slot name="icone">
+                <IconCircleCheck class="icon mb-2 text-success icone-destaque" stroke-width="1.5" />
+            </slot>
+        </template>
+
+        <template v-if="slots.titulo" #titulo>
+            <slot name="titulo"></slot>
+        </template>
+
+        <template v-if="slots.default" #default>
+            <slot></slot>
+        </template>
+
+        <template v-if="slots.conteudo" #conteudo>
+            <slot name="conteudo"></slot>
+        </template>
+
+        <template v-if="slots.extra" #extra>
+            <slot name="extra"></slot>
+        </template>
+
+        <template v-if="slots['botoes-esquerda']" #botoes-esquerda="escopo">
+            <slot name="botoes-esquerda" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots['botoes-meio']" #botoes-meio="escopo">
+            <slot name="botoes-meio" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots['botoes-direita']" #botoes-direita="escopo">
+            <slot name="botoes-direita" v-bind="escopo"></slot>
+        </template>
+
+        <template v-if="slots.footer" #footer="escopo">
+            <slot name="footer" v-bind="escopo"></slot>
+        </template>
+    </ModalDialogoInterno>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import { IconCircleCheck } from "@tabler/icons-vue";
+import ModalDialogoInterno, { type EscopoRodapeModal } from "./interno/ModalDialogoInterno.vue";
+
+// Tipagem dos slots aceitos pelo componente
+defineSlots<{
+    default?: (props: {}) => any;
+    icone?: (props: {}) => any;
+    titulo?: (props: {}) => any;
+    conteudo?: (props: {}) => any;
+    extra?: (props: {}) => any;
+    "botoes-esquerda"?: (props: EscopoRodapeModal) => any;
+    "botoes-meio"?: (props: EscopoRodapeModal) => any;
+    "botoes-direita"?: (props: EscopoRodapeModal) => any;
+    footer?: (props: EscopoRodapeModal) => any;
+}>();
+
+// Instância de slots para verificação segura no template
+const slots = useSlots();
+
+// Propriedades customizáveis do modal de sucesso
+const props = defineProps({
+    modelValue: { type: Boolean, default: false },
+    tamanho: { type: String as () => "sm" | "md" | "lg", default: "sm" },
+    titulo: { type: String, default: "Operação concluída" },
+    descricao: { type: String, default: "" },
+    textoCancelar: { type: String, default: "Voltar" },
+    textoConfirmar: { type: String, default: "Continuar" },
+    mostrarBotaoCancelar: { type: Boolean, default: true },
+    mostrarBotaoConfirmar: { type: Boolean, default: true },
+    mostrarBotaoFechar: { type: Boolean, default: true },
+    fecharAoClicarFora: { type: Boolean, default: true },
+    fecharComEsc: { type: Boolean, default: true },
+    fecharAoConfirmar: { type: Boolean, default: true },
+    desabilitarConfirmar: { type: Boolean, default: false },
+    carregando: { type: Boolean, default: false }
+});
+
+// Eventos emitidos para o componente pai
+const emit = defineEmits(["update:modelValue", "confirmar", "cancelar", "fechar"]);
+
+// Sincroniza o v-model com o estado do modal
+const exibirModal = computed({
+    get: () => props.modelValue,
+    set: (valor: boolean) => emit("update:modelValue", valor)
+});
+</script>
+
+<style scoped>
+.icone-destaque {
+    width: 3.5rem;
+    height: 3.5rem;
+}
+</style>