v-sistec-features 1.31.13 → 1.32.0

package/src/Modals/components/interno/ModalDialogoInterno.vue

@@ -0,0 +1,365 @@
+<!--
+========
+Componente base interno para modais de diálogo, alerta e decisão.
+Construído sem dependência de Bootstrap, utilizando Teleport, controle nativo de tecla ESC,
+clique no overlay e estilização compatível com o ModalReserva e Tabler.
+========
+-->
+<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="corTopo"
+                    class="modal-status-topo"
+                    :class="classeStatusTopo"
+                    :style="estiloStatusTopo"
+                ></div>
+
+                <BotaoFechar
+                    v-if="mostrarBotaoFechar"
+                    flutuante
+                    :desabilitado="carregando"
+                    @click="cancelarAcao"
+                />
+
+                <div class="modal-body text-center py-4 px-4">
+                    <slot name="icone"></slot>
+
+                    <h3 v-if="titulo || slots.titulo" class="modal-titulo-dialogo mb-2">
+                        <slot name="titulo">{{ titulo }}</slot>
+                    </h3>
+
+                    <div class="modal-descricao-dialogo">
+                        <slot>{{ descricao }}</slot>
+                    </div>
+
+                    <div v-if="slots.conteudo" class="mt-3 text-start">
+                        <slot name="conteudo"></slot>
+                    </div>
+
+                    <div v-if="slots.extra" class="mt-3">
+                        <slot name="extra"></slot>
+                    </div>
+                </div>
+
+                <div v-if="!ocultarRodape" class="modal-footer">
+                    <div class="w-100">
+                        <div class="row g-2 align-items-center">
+                            <slot
+                                name="footer"
+                                :cancelar="cancelarAcao"
+                                :confirmar="confirmarAcao"
+                            >
+                                <slot
+                                    name="botoes-esquerda"
+                                    :cancelar="cancelarAcao"
+                                    :confirmar="confirmarAcao"
+                                ></slot>
+
+                                <div v-if="mostrarBotaoCancelar" class="col">
+                                    <button
+                                        type="button"
+                                        class="btn w-100 botao-secundario-modal"
+                                        :disabled="carregando"
+                                        @click="cancelarAcao"
+                                    >
+                                        {{ textoCancelar }}
+                                    </button>
+                                </div>
+
+                                <slot
+                                    name="botoes-meio"
+                                    :cancelar="cancelarAcao"
+                                    :confirmar="confirmarAcao"
+                                ></slot>
+
+                                <div v-if="mostrarBotaoConfirmar" class="col">
+                                    <button
+                                        type="button"
+                                        class="btn w-100"
+                                        :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
+                                    name="botoes-direita"
+                                    :cancelar="cancelarAcao"
+                                    :confirmar="confirmarAcao"
+                                ></slot>
+                            </slot>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots, watch, onUnmounted, type Slots } from "vue";
+import BotaoFechar from "../BotaoFechar.vue";
+
+// Interface do escopo fornecido aos slots do rodapé
+export interface EscopoRodapeModal {
+    cancelar: () => void;
+    confirmar: () => void;
+}
+
+// Declaração explícita dos slots para validação do vue-tsc nos componentes filhos
+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;
+}>();
+
+// Acesso tipado aos slots recebidos pelo componente
+const slots: Slots = useSlots();
+
+// Propriedades estruturais repassadas pelos componentes filhos especializados
+const props = defineProps({
+    modelValue: { type: Boolean, default: false },
+    tamanho: { type: String as () => "sm" | "md" | "lg" | "xl", default: "sm" },
+    corTopo: {
+        type: String as () => "brand" | "danger" | "success" | "warning" | "info" | "primary" | "",
+        default: "brand"
+    },
+    corBotaoConfirmar: {
+        type: String as () => "brand" | "danger" | "success" | "warning" | "info" | "primary",
+        default: "brand"
+    },
+    titulo: { type: String, default: "" },
+    descricao: { type: String, default: "" },
+    textoCancelar: { type: String, default: "Cancelar" },
+    textoConfirmar: { type: String, default: "Confirmar" },
+    mostrarBotaoCancelar: { type: Boolean, default: true },
+    mostrarBotaoConfirmar: { type: Boolean, default: true },
+    mostrarBotaoFechar: { type: Boolean, default: true },
+    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 }
+});
+
+// Eventos padrões de ciclo de vida e decisão do modal
+const emit = defineEmits(["update:modelValue", "confirmar", "cancelar", "fechar"]);
+
+// Controla a visibilidade do modal sincronizada com o v-model
+const exibirModal = computed({
+    get: () => props.modelValue,
+    set: (valor: boolean) => emit("update:modelValue", valor)
+});
+
+// Impede o fechamento ao clicar no fundo escuro se configurado ou se estiver carregando
+const bloquearCliqueFora = computed(() => !props.fecharAoClicarFora || props.carregando);
+
+// Impede o fechamento pela tecla ESC se configurado ou se estiver carregando
+const bloquearEsc = computed(() => !props.fecharComEsc || props.carregando);
+
+// Define a classe de cor da barra de topo para cores padrão do Tabler
+const classeStatusTopo = computed(() => {
+    if (!props.corTopo || props.corTopo === "brand") return "";
+    return `bg-${props.corTopo}`;
+});
+
+// Aplica a variável CSS --color-brand na barra de topo quando selecionada
+const estiloStatusTopo = computed(() => {
+    if (props.corTopo === "brand") {
+        return { backgroundColor: "var(--color-brand, var(--tblr-primary, #206bc4))" };
+    }
+    return {};
+});
+
+// Define a classe visual do botão principal de confirmação
+const classeBotaoConfirmar = computed(() => {
+    if (props.corBotaoConfirmar === "brand") return "btn-brand-custom text-white";
+    return `btn-${props.corBotaoConfirmar}`;
+});
+
+// Aplica a cor da marca ao botão principal 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 se permitido
+function aoPressionarTecla(evento: KeyboardEvent) {
+    if (evento.key === "Escape" && exibirModal.value && !bloquearEsc.value) {
+        cancelarAcao();
+    }
+}
+
+// Observa a abertura do modal para registrar ou remover o listener da tecla ESC
+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
+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
+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-body {
+    background: var(--bg-primary, var(--tblr-bg-surface, #ffffff));
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.modal-titulo-dialogo {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary, var(--tblr-body-color, #1e293b));
+}
+
+.modal-descricao-dialogo {
+    color: var(--text-secondary, var(--tblr-secondary, #64748b));
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.modal-footer {
+    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;
+}
+
+.botao-secundario-modal {
+    background: var(--bg-primary, var(--tblr-bg-surface, #ffffff));
+    border: 1px solid var(--border-light, var(--tblr-border-color, #cbd5e1));
+    color: var(--text-primary, var(--tblr-body-color, #1e293b));
+    font-weight: 600;
+}
+
+.botao-secundario-modal:hover:not(:disabled) {
+    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
+}
+
+.btn-brand-custom {
+    font-weight: 600;
+}
+
+.btn-brand-custom:hover:not(:disabled) {
+    filter: brightness(0.92);
+}
+</style>

package/src/Modals/index.ts

@@ -0,0 +1,32 @@
+/*
+========
+Arquivo principal de exportação do módulo de Modais (v-sistec-features/Modals).
+Disponibiliza todos os 9 componentes de modal e o componente BotaoFechar prontos para uso.
+========
+*/
+
+import BotaoFechar from "./components/BotaoFechar.vue";
+import ModalBaseDefault from "./components/ModalBaseDefault.vue";
+import ModalConfirmacao from "./components/ModalConfirmacao.vue";
+import ModalPerigo from "./components/ModalPerigo.vue";
+import ModalSucesso from "./components/ModalSucesso.vue";
+import ModalAviso from "./components/ModalAviso.vue";
+import ModalInformacao from "./components/ModalInformacao.vue";
+import ModalConfirmacaoCheckbox from "./components/ModalConfirmacaoCheckbox.vue";
+import ModalConfirmacaoInput from "./components/ModalConfirmacaoInput.vue";
+import ModalConfirmacaoSimples from "./components/ModalConfirmacaoSimples.vue";
+
+export {
+    BotaoFechar,
+    ModalBaseDefault,
+    ModalConfirmacao,
+    ModalPerigo,
+    ModalSucesso,
+    ModalAviso,
+    ModalInformacao,
+    ModalConfirmacaoCheckbox,
+    ModalConfirmacaoInput,
+    ModalConfirmacaoSimples
+};
+
+export default ModalBaseDefault;

package/src/core/plugin.ts

@@ -1,41 +1,30 @@
-import type { App } from 'vue';
-/*esse é o plugin que vai configurar as partes excenciais de todas as aplicações
-* do sistec
-*
-* Observações:
-* import de tabler-themes deve ser feito depois do tabler.min.css ou não funcionará
-* 
-* até o momento as funções são
-* - importar o css e js do tabler
-* - disponibilizar o tabler globalmente como window.bootstrap 
-* (as novas versões do tabler não incluem mais o bootstrap, então isso foi necessário)
-* 
-* - futuras funções podem ser adicionadas aqui
-* - como adicionar componentes globais
-* - adicionar diretivas globais
-* - adicionar filtros globais
-* - adicionar mixins globais
-* - adicionar propriedades globais
-* 
-* para usar o plugin, basta fazer app.use(SistecPlugin) na aplicação vue
+/*
+==========================================================================
+Plugin principal do Sistec atualizado.
+Realiza a configuração global das dependências na aplicação consumidora
+através de iteração.
+==========================================================================
 */
 
-// Configurações do Tabler
+import type { App } from 'vue';
 import '@tabler/core/dist/css/tabler.min.css';
-import '@tabler/core/dist/css/tabler-themes.min.css'
+import '@tabler/core/dist/css/tabler-themes.min.css';
 import * as Tabler from '@tabler/core/dist/js/tabler.min.js';
-import vRequired from "v-required"
-import '../assets/v-required-style.css'
+import vRequired from "v-required";
+import '../assets/v-required-style.css';
 import Toast, { type PluginOptions as ToastPluginOptions } from "vue-toastification";
 import "vue-toastification/dist/index.css";
 
+
 import { DATA_TABLE_CONFIG, type DataTableGlobalConfig } from '@/DatatableVue/config/datatableConfig';
-export interface SistecOptions {
-  dataTable?: DataTableGlobalConfig; // Configurações opcionais da tabela
-  toast?: ToastPluginOptions;        // Configurações opcionais do Toast
+
+export interface OpcoesSistec {
+  dataTable?: DataTableGlobalConfig;
+  toast?: ToastPluginOptions;
 }
 
-const defaultToastOptions: ToastPluginOptions = {
+// Configuração padrão base para mesclar com as opções recebidas pelo plugin
+const opcoesPadraoToast: ToastPluginOptions = {
   transition: "Vue-Toastification__bounce",
   maxToasts: 20,
   newestOnTop: true,
@@ -43,23 +32,27 @@ const defaultToastOptions: ToastPluginOptions = {
 };
 
 const SistecPlugin = {
-  // até o momento não usamos opções nem o app, mas deixei aqui caso precise no futuro
-  install: (app: App, options: SistecOptions = {}) => {
-    // Disponibiliza o Tabler globalmente
+  /*
+  Função: install
+  Recebe: aplicativo (instância do Vue), opcoes (configurações do usuário)
+  Devolve: Nada
+  Por que é usada: Injeta os plugins, configurações e varre os objetos de 
+  componentes e diretivas do Bootstrap para registrá-los um por um no 
+  escopo global.
+  */
+  install: (app: App, opcoes: OpcoesSistec = {}) => {
     (window as any).bootstrap = Tabler;
 
+    app.directive('required', vRequired);
 
+    const opcoesFinaisToast = { ...opcoesPadraoToast, ...opcoes.toast };
+    app.use(Toast, opcoesFinaisToast);
 
-    // futuros upgrades podem ser feitos aqui
-    // Ex: app.component('MeuComponente', MeuComponente);
-    app.directive('required', vRequired);
-    // Aqui um merge: Opções do usuário > Padrão do Sistec
-    const finalToastOptions = { ...defaultToastOptions, ...options.toast };
-    app.use(Toast, finalToastOptions);
-    // CONFIGURAÇÃO DO DATATABLE
-    // Se o usuário passou configurações goblais de tabela, fazemos o provide AQUI.
-    const tableConfig = options.dataTable || {}; 
-    app.provide(DATA_TABLE_CONFIG, tableConfig);
+    const configuracaoTabela = opcoes.dataTable || {};
+    app.provide(DATA_TABLE_CONFIG, configuracaoTabela);
+
+    
   }
 };
+
 export { SistecPlugin };

package/src/types/global.d.ts

@@ -1 +1,7 @@
-declare module '@tabler/core/dist/js/tabler.min.js';
+declare module '@tabler/core/dist/js/tabler.min.js';
+/* Para o typescript conseguir ver os components vue e conseguir exportar eles*/
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/dist/Pagination.d.ts

@@ -1,27 +0,0 @@
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DefineComponent } from 'vue';
-import { PublicProps } from 'vue';
-
-export declare const Pagination: DefineComponent<PaginationProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-tradePage: () => any;
-}, string, PublicProps, Readonly<PaginationProps> & Readonly<{
-onTradePage?: (() => any) | undefined;
-}>, {
-page_starts_at: number;
-filtering: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-
-declare interface PaginationObject {
-    current_page: number;
-    count: number;
-    limit_per_page: number;
-}
-
-declare interface PaginationProps {
-    pagination: PaginationObject;
-    filtering?: boolean;
-    page_starts_at?: number;
-}
-
-export { }

package/dist/core.d.ts

@@ -1,117 +0,0 @@
-import { App } from 'vue';
-import { Component } from 'vue';
-import { MaybeRefOrGetter } from 'vue';
-import { PluginOptions } from 'vue-toastification';
-
-declare interface ApiProps {
-    fetch: Function;
-    endpoint: string;
-    fetch_name?: string;
-    data_key?: string;
-    total_key?: string;
-    filter_param_name?: string;
-    search_param_name?: string;
-    page_param_name?: string;
-    page_size_param_name?: string;
-    add_params?: Record<string, any> | (() => Record<string, any>);
-    add_params_keep_page?: Record<string, any> | (() => Record<string, any>);
-    silent_params?: Record<string, any> | (() => Record<string, any>);
-    deactivate_default_params?: boolean;
-    disable_request?: MaybeRefOrGetter<boolean>;
-}
-
-declare interface BehaviorProps {
-    frontend_pagination?: boolean;
-    limit_per_page?: number;
-    page_starts_at?: number;
-    min_loading_delay?: number;
-    retry_attempts?: number;
-    retry_delay?: number;
-    immediate?: boolean;
-    storage_id?: string;
-    use_column_manager?: boolean;
-    show_header_when_empty?: boolean;
-    item_key?: string;
-    type_loading?: 'placeholder' | 'spiner-table' | 'spiner';
-    custom_loading?: Component | null;
-}
-
-declare interface BodyClass {
-    class_content?: string;
-    class_container?: string;
-}
-
-declare type ClassProps = (ColumnManagerClass & PaginationClass & BodyClass & TableClass & FiltersClass);
-
-/**
- * =====================================================
- *  Tipagem para classes CSS.
- *  Por que é usada: Agrupa as opções de estilização estrutural do datatable.
- * =====================================================
- * **/
-declare interface ColumnManagerClass {
-    class_column_manager_dropdown?: string;
-    class_column_manager_dropdown_menu?: string;
-    class_column_manager_button?: string;
-    disable_class_column_manager_default?: boolean;
-}
-
-declare type DataTableGlobalConfig = Partial<VDataTableProps>;
-
-declare interface ExtraFeaturesProps {
-    use_checkbox?: boolean;
-    deactivate_selected_info?: boolean;
-    use_expandable_items?: boolean;
-    close_expanded_item_on_expand_new?: boolean;
-    scroll_to_expanded_item?: boolean;
-    type_animation_expand?: 'fade' | 'expand' | 'none';
-    deactivate_animation_expand?: boolean;
-    type_button_expand?: 'arrow' | 'plus';
-}
-
-declare interface FiltersClass {
-    class_filters?: string;
-    class_page_size?: string;
-}
-
-declare interface PaginationClass {
-    class_pagination?: string;
-}
-
-declare interface PaginationProps {
-    first_text_page_size?: string;
-    second_text_page_size?: string;
-}
-
-declare interface SearchProps {
-    list_filter?: any[];
-    placeholder_search?: string;
-    disable_search?: boolean;
-    deactivate_search_empty?: boolean;
-    deactivate_search_on_clear?: boolean;
-    custom_frontend_filter?: ((item: any, search: string, filter: string) => boolean) | null;
-}
-
-declare interface SistecOptions {
-    dataTable?: DataTableGlobalConfig;
-    toast?: PluginOptions;
-}
-
-export declare const SistecPlugin: {
-    install: (app: App, options?: SistecOptions) => void;
-};
-
-declare interface TableClass {
-    class_table?: string;
-}
-
-declare interface TeleportsProps {
-    search_teleport?: string | HTMLElement | null;
-    pagination_teleport?: string | HTMLElement | null;
-    extra_actions_teleport?: string | HTMLElement | null;
-    column_manager_teleport?: string | HTMLElement | null;
-}
-
-declare type VDataTableProps = (ApiProps & ClassProps & BehaviorProps & SearchProps & PaginationProps & ExtraFeaturesProps & TeleportsProps);
-
-export { }

package/dist/datatableConfig-BMFlKtgh.js

@@ -1,4 +0,0 @@
-const a = Symbol("DataTableConfig");
-export {
-  a as D
-};

package/dist/iframeCommunicator.d.ts

@@ -1,22 +0,0 @@
-import { Ref } from 'vue';
-
-/**
- * Um Composable para gerenciar a comunicação entre um iframe e sua janela pai.
- * @param onMessageReceived - Uma função de callback que será executada quando uma mensagem for recebida do pai.
- */
-export declare function useIframeCommunicator(onMessageReceived?: (event: MessageEvent) => void): {
-    isInIframe: Readonly<Ref<boolean, boolean>>;
-    sendMessage: (message: any, targetOrigin?: string) => void;
-};
-
-/**
- * Um composable "tudo-em-um" que configura a comunicação de temas com a janela pai.
- * para usar, bastar importar e chamar useTheme() na raiz do component app do iframe
- */
-export declare function useTheme(): {
-    theme: Readonly<Ref<string, string>>;
-    themePalette: Readonly<Ref<string, string>>;
-    themePrimary: Readonly<Ref<string, string>>;
-};
-
-export { }