v-sistec-features 1.31.13 → 1.32.0

package/src/DataAgenda/components/AgendaVueCal.vue

@@ -7,6 +7,7 @@ da lista contendo o recurso atualmente em exibição.
 ========
 -->
 <script setup lang="ts">
+defineSlots<{ [key: string]: any }>();
 import { ref, computed, inject } from 'vue';
 import { VueCal } from 'vue-cal';
 import 'vue-cal/style.css';

package/src/DataAgenda/index.ts

@@ -1,2 +1,3 @@
 import VDataAgenda from "./VDataAgenda.vue";
-export default VDataAgenda;
+export default VDataAgenda;
+

package/src/Modals/components/BotaoFechar.vue

@@ -0,0 +1,74 @@
+<!--
+========
+Componente de botão de fechar padronizado seguindo a identidade visual do ModalReserva.
+Pode ser utilizado dentro de cabeçalhos de modais ou posicionado de forma flutuante no canto
+superior direito, emitindo o evento de clique quando não estiver desabilitado.
+========
+-->
+<template>
+    <button
+        type="button"
+        class="btn-fechar"
+        :class="{ 'btn-fechar-flutuante': flutuante }"
+        :title="titulo"
+        :aria-label="titulo"
+        :disabled="desabilitado"
+        @click="aoClicar"
+    >
+        ×
+    </button>
+</template>
+
+<script setup lang="ts">
+// Propriedades de configuração visual e estado do botão de fechar
+const props = defineProps({
+    titulo: { type: String, default: "Fechar" },
+    desabilitado: { type: Boolean, default: false },
+    flutuante: { type: Boolean, default: false }
+});
+
+// Evento emitido ao acionar o botão
+const emit = defineEmits<{
+    (e: "click", evento: MouseEvent): void;
+}>();
+
+// Recebe o evento de clique do mouse, não devolve valor e repassa o evento caso o botão esteja ativo
+function aoClicar(evento: MouseEvent) {
+    if (props.desabilitado) return;
+    emit("click", evento);
+}
+</script>
+
+<style scoped>
+.btn-fechar {
+    background: transparent;
+    border: none;
+    font-size: 24px;
+    color: var(--text-secondary, var(--tblr-secondary, #64748b));
+    cursor: pointer;
+    line-height: 1;
+    padding: 4px 8px;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.btn-fechar:hover:not(:disabled) {
+    color: var(--text-primary, var(--tblr-body-color, #1e293b));
+    background-color: var(--bg-hover, rgba(0, 0, 0, 0.05));
+}
+
+.btn-fechar:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-fechar-flutuante {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+}
+</style>

package/src/Modals/components/ModalAviso.vue

@@ -0,0 +1,129 @@
+<!--
+========
+Modal especializado para avisos, alertas preventivos ou comunicados da marca.
+Permite alternar entre o amarelo de atenção (Warning) e a cor institucional.
+========
+-->
+<template>
+    <ModalDialogoInterno
+        v-model="exibirModal"
+        :tamanho="tamanho"
+        :cor-topo="usarCorBrand ? 'brand' : 'warning'"
+        :cor-botao-confirmar="usarCorBrand ? 'brand' : 'warning'"
+        :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">
+                <IconAlertCircle
+                    class="icon mb-2 icone-destaque"
+                    :class="usarCorBrand ? '' : 'text-warning'"
+                    :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 { IconAlertCircle } 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 de aviso
+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: "Atenção" },
+    descricao: { type: String, default: "" },
+    textoCancelar: { type: String, default: "Cancelar" },
+    textoConfirmar: { type: String, default: "Entendi" },
+    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 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/ModalBaseDefault.vue

@@ -0,0 +1,374 @@
+<!--
+========
+Componente de modal base padrão para formulários, tabelas e conteúdos extensos.
+Segue a arquitetura e estilização do ModalReserva utilizando Vue e Tabler, com cabeçalho,
+botão de fechar padronizado, barra de status superior e rodapé customizável.
+========
+-->
+<template>
+    <Teleport to="body">
+        <div
+            v-if="exibirModal"
+            :id="id ? String(id) : undefined"
+            class="modal-overlay"
+            @mousedown.self="aoClicarFora"
+        >
+            <div
+                class="modal-card"
+                :class="`modal-tamanho-${tamanhoCalculado}`"
+                role="dialog"
+                aria-modal="true"
+            >
+                <div
+                    v-if="corBarraTopo"
+                    class="modal-status-topo"
+                    :class="classeStatusTopo"
+                    :style="estiloStatusTopo"
+                ></div>
+                <slot name="barrinha-header"></slot>
+
+                <div v-if="!ocultarCabecalho" class="modal-header">
+                    <h3 class="modal-title">
+                        <slot name="title-header">{{ titulo }}</slot>
+                    </h3>
+                    <BotaoFechar
+                        v-if="mostrarBotaoFechar"
+                        :desabilitado="carregando"
+                        @click="cancelarAcao"
+                    />
+                </div>
+
+                <div class="modal-body" :class="classeCorpo">
+                    <slot></slot>
+                    <slot name="conteudo"></slot>
+                    <slot name="content"></slot>
+                </div>
+
+                <div v-if="!ocultarRodape" class="modal-footer">
+                    <slot name="footer" :fechar="cancelarAcao" :confirmar="confirmarAcao">
+                        <button
+                            v-if="mostrarBotaoCancelar"
+                            type="button"
+                            class="btn-cancelar-base"
+                            :disabled="carregando"
+                            @click="cancelarAcao"
+                        >
+                            {{ textoCancelar }}
+                        </button>
+
+                        <div class="acoes-direita-base">
+                            <slot name="botoes-esquerda" :fechar="cancelarAcao" :confirmar="confirmarAcao"></slot>
+
+                            <button
+                                v-if="mostrarBotaoConfirmar"
+                                type="button"
+                                class="btn"
+                                :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>
+
+                            <slot name="botoes-direita" :fechar="cancelarAcao" :confirmar="confirmarAcao"></slot>
+                        </div>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onUnmounted } from "vue";
+import BotaoFechar from "./BotaoFechar.vue";
+
+// Tipagem explícita dos slots do ModalBaseDefault
+defineSlots<{
+    default?: (props: {}) => any;
+    "barrinha-header"?: (props: {}) => any;
+    "title-header"?: (props: {}) => any;
+    conteudo?: (props: {}) => any;
+    content?: (props: {}) => any;
+    "botoes-esquerda"?: (props: { fechar: () => void; confirmar: () => void }) => any;
+    "botoes-direita"?: (props: { fechar: () => void; confirmar: () => void }) => any;
+    footer?: (props: { fechar: () => void; confirmar: () => void }) => any;
+}>();
+
+// Propriedades de configuração do modal padrão
+const props = defineProps({
+    id: { type: [String, Number], default: undefined },
+    modelValue: { type: Boolean, default: false },
+    size: { type: String as () => "sm" | "md" | "lg" | "xl", default: "lg" },
+    tamanho: { type: String as () => "sm" | "md" | "lg" | "xl", default: undefined },
+    titulo: { type: String, default: "" },
+    corBarraTopo: {
+        type: String as () => "brand" | "danger" | "success" | "warning" | "info" | "primary" | "",
+        default: "brand"
+    },
+    textoCancelar: { type: String, default: "Fechar" },
+    textoConfirmar: { type: String, default: "Salvar alterações" },
+    corBotaoConfirmar: {
+        type: String as () => "brand" | "primary" | "danger" | "success" | "warning",
+        default: "brand"
+    },
+    mostrarBotaoCancelar: { type: Boolean, default: true },
+    mostrarBotaoConfirmar: { type: Boolean, default: true },
+    mostrarBotaoFechar: { type: Boolean, default: true },
+    ocultarCabecalho: { type: Boolean, default: false },
+    ocultarRodape: { 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 },
+    classeCorpo: { type: String, default: "" }
+});
+
+// Emissores de eventos para controle externo
+const emit = defineEmits(["update:modelValue", "confirmar", "cancelar", "fechar"]);
+
+// Resolve o tamanho priorizando a propriedade em português
+const tamanhoCalculado = computed(() => props.tamanho || props.size);
+
+// Sincroniza o estado de abertura do modal com o componente pai
+const exibirModal = computed({
+    get: () => props.modelValue,
+    set: (valor: boolean) => emit("update:modelValue", valor)
+});
+
+// Calcula o bloqueio de clique fora do modal
+const bloquearCliqueFora = computed(() => !props.fecharAoClicarFora || props.carregando);
+
+// Calcula o bloqueio da tecla ESC
+const bloquearEsc = computed(() => !props.fecharComEsc || props.carregando);
+
+// Retorna a classe da barra de topo caso não seja brand
+const classeStatusTopo = computed(() => {
+    if (!props.corBarraTopo || props.corBarraTopo === "brand") return "";
+    return `bg-${props.corBarraTopo}`;
+});
+
+// Retorna o 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 {};
+});
+
+// Retorna a classe do botão de confirmação
+const classeBotaoConfirmar = computed(() => {
+    if (props.corBotaoConfirmar === "brand") return "btn-salvar-base";
+    return `btn-${props.corBotaoConfirmar}`;
+});
+
+// Retorna o 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))",
+            color: "var(--text-inverse, #ffffff)"
+        };
+    }
+    return {};
+});
+
+// Recebe o evento de teclado, não devolve valor e fecha o modal se a tecla for ESC
+function aoPressionarTecla(evento: KeyboardEvent) {
+    if (evento.key === "Escape" && exibirModal.value && !bloquearEsc.value) {
+        cancelarAcao();
+    }
+}
+
+// Monitora o estado de abertura para ativar ou remover o evento de teclado
+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 trata o clique no fundo escuro do modal
+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 e fechamento
+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 do modal
+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-tamanho-xl {
+    max-width: 1140px;
+}
+
+.modal-status-topo {
+    height: 4px;
+    width: 100%;
+    flex-shrink: 0;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-light, var(--tblr-border-color, #e6e7e9));
+    background: var(--bg-primary, var(--tblr-bg-surface, #ffffff));
+    flex-shrink: 0;
+}
+
+.modal-title {
+    margin: 0;
+    font-size: 16px;
+    color: var(--text-primary, var(--tblr-body-color, #1e293b));
+    font-weight: 600;
+}
+
+.modal-body {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    background: var(--bg-primary, var(--tblr-bg-surface, #ffffff));
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 16px 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;
+}
+
+.acoes-direita-base {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-left: auto;
+}
+
+.btn-cancelar-base {
+    background: transparent;
+    border: none;
+    color: var(--color-brand, var(--tblr-primary, #206bc4));
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 8px 16px;
+    border-radius: 6px;
+    transition: background 0.2s;
+}
+
+.btn-cancelar-base:hover:not(:disabled) {
+    background: var(--color-brand-light, rgba(32, 107, 196, 0.1));
+}
+
+.btn-cancelar-base:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.btn-salvar-base {
+    border: none;
+    font-weight: 600;
+    font-size: 14px;
+    cursor: pointer;
+    padding: 8px 24px;
+    border-radius: 6px;
+    transition: filter 0.2s;
+}
+
+.btn-salvar-base:hover:not(:disabled) {
+    filter: brightness(0.9);
+}
+
+.btn-salvar-base:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+</style>