@archbase/template 3.0.22 → 3.0.25

package/dist/template/src/ArchbaseFormTemplate.d.ts

@@ -2,8 +2,11 @@ import { AlertVariant, ButtonVariant } from '@mantine/core';
 import { default as React } from 'react';
 import { ArchbaseDataSource } from '../../data/src';
 import { ArchbaseTemplateSecurityProps } from './ArchbaseTemplateCommonTypes';
+export type FormButtonsPosition = 'header' | 'footer' | 'both';
 export interface ArchbaseFormTemplateProps<T, ID> extends ArchbaseTemplateSecurityProps {
     title: string;
+    /** Subtítulo exibido abaixo do título no header */
+    subtitle?: string;
     dataSource: ArchbaseDataSource<T, ID>;
     variant?: ButtonVariant | AlertVariant | string;
     /** Referência para o componente interno */
@@ -20,16 +23,47 @@ export interface ArchbaseFormTemplateProps<T, ID> extends ArchbaseTemplateSecuri
     withBorder?: boolean;
     children?: React.ReactNode | React.ReactNode[];
     radius?: string | number | undefined;
+    /**
+     * Posição dos botões Save/Cancel.
+     * - 'header': No header à direita (padrão moderno)
+     * - 'footer': No rodapé (padrão legado)
+     * - 'both': Em ambos
+     * @default 'footer'
+     */
+    buttonsPosition?: FormButtonsPosition;
+    /** Label do botão salvar */
+    saveLabel?: string;
+    /** Label do botão cancelar */
+    cancelLabel?: string;
+    /** Callback ao clicar no botão voltar (exibido no header) */
+    onBack?: () => void;
     /** Alinhamento dos botões no footer: 'left' | 'center' | 'right' */
     footerAlign?: 'left' | 'center' | 'right';
-    /** Conteúdo adicional a ser exibido no footer (à esquerda dos botões se footerAlign='right', à direita se footerAlign='left') */
+    /** Conteúdo adicional a ser exibido no footer */
     footerContent?: React.ReactNode;
     onSave?: (entityToSave: any) => void;
-    onCancel?: () => void;
+    /** Callback de cancelar. Quando buttonsPosition inclui 'header', recebe closeForm. */
+    onCancel?: ((closeForm: () => void) => void) | (() => void);
     onBeforeSave?: (entityToSave: T) => void;
     onAfterSave?: (savedEntity: T) => void;
     onBeforeCancel?: () => void;
     onAfterCancel?: () => void;
     onError?: (error: string) => void;
+    /**
+     * Caminho da rota para o navigation listener (usado para fechar abas).
+     */
+    routePath?: string;
+    /**
+     * Callback chamado antes de fechar a aba.
+     * Retorne true para permitir o fechamento, false para cancelar.
+     */
+    onBeforeClose?: () => boolean | void;
+    /**
+     * Hook de navigation listener (ex: useArchbaseNavigationListener de @archbase/admin).
+     * Assinatura: (id: string, onUserCloseRequest: () => void) => { closeAllowed: (payload?: any) => void }
+     */
+    useNavigationListener?: (id: string, onUserCloseRequest: () => void) => {
+        closeAllowed: (payload?: any) => void;
+    };
 }
-export declare function ArchbaseFormTemplate<T extends object, ID>({ innerRef, title, isError, isCanceling, isSaving, error, clearError, autoCloseAlertError, width, height, withBorder, children, radius, variant, footerAlign, footerContent, dataSource, onSave, onCancel, onBeforeSave, onAfterSave, onBeforeCancel, onAfterCancel, onError, resourceName, resourceDescription, requiredPermissions, fallbackComponent, securityOptions, ...rest }: ArchbaseFormTemplateProps<T, ID>): import("react/jsx-runtime").JSX.Element;
+export declare function ArchbaseFormTemplate<T extends object, ID>({ innerRef, title, subtitle, isError, isCanceling, isSaving, isLoading, error, clearError, autoCloseAlertError, width, height, withBorder, children, radius, variant, buttonsPosition, saveLabel, cancelLabel, onBack, footerAlign, footerContent, dataSource, onSave, onCancel, onBeforeSave, onAfterSave, onBeforeCancel, onAfterCancel, onError, routePath, onBeforeClose, useNavigationListener, resourceName, resourceDescription, requiredPermissions, fallbackComponent, securityOptions, ...rest }: ArchbaseFormTemplateProps<T, ID>): import("react/jsx-runtime").JSX.Element;

package/dist/template/src/ArchbaseTwoColumnFormTemplate.d.ts

@@ -0,0 +1,179 @@
+import { AlertVariant, ButtonVariant } from '@mantine/core';
+import { default as React, CSSProperties, ReactNode } from 'react';
+import { ArchbaseDataSource } from '../../data/src';
+import { ArchbaseTemplateSecurityProps } from './ArchbaseTemplateCommonTypes';
+export interface TwoColumnFormTab {
+    /** Identificador único da tab */
+    value: string;
+    /** Label exibido na tab */
+    label: string;
+    /** Ícone opcional para a tab */
+    icon?: ReactNode;
+    /** Conteúdo da tab */
+    content: ReactNode;
+}
+export interface TwoColumnFormHeaderAction {
+    /** Identificador único da ação */
+    id: string;
+    /** Label do botão */
+    label: string;
+    /** Ícone do botão */
+    icon?: ReactNode;
+    /** Cor do botão */
+    color?: string;
+    /** Variante do botão */
+    variant?: ButtonVariant;
+    /** Handler de clique */
+    onClick: () => void;
+    /** Desabilitar botão */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+}
+export type ButtonsPosition = 'header' | 'footer' | 'both';
+export interface ArchbaseTwoColumnFormTemplateProps<T, ID> extends ArchbaseTemplateSecurityProps {
+    /** Título do formulário */
+    title: string;
+    /** Subtítulo (ex: "Last Update 28 April 2024 at 8:43 PM") */
+    subtitle?: string;
+    /** DataSource para o formulário */
+    dataSource: ArchbaseDataSource<T, ID>;
+    /** Variante de estilo */
+    variant?: ButtonVariant | AlertVariant | string;
+    /** Callback ao clicar no botão voltar */
+    onBack?: () => void;
+    /** Ações customizadas no header (além de Save/Cancel) */
+    headerActions?: TwoColumnFormHeaderAction[];
+    /** Mostrar botão de deletar no header */
+    showDeleteButton?: boolean;
+    /** Callback ao clicar em deletar */
+    onDelete?: () => void;
+    /** Label do botão salvar */
+    saveLabel?: string;
+    /** Label do botão cancelar */
+    cancelLabel?: string;
+    /**
+     * Posição dos botões Save/Cancel.
+     * - 'header': No header (padrão moderno SaaS - recomendado)
+     * - 'footer': No rodapé (padrão tradicional)
+     * - 'both': Em ambos (para forms muito longos)
+     * @default 'header'
+     */
+    buttonsPosition?: ButtonsPosition;
+    /** Conteúdo da coluna esquerda (mídia, galeria, etc) */
+    leftColumnContent?: ReactNode;
+    /** Largura da coluna esquerda (span do Grid, 1-12). Default: 6 */
+    leftColumnSpan?: number;
+    /** Esconder coluna esquerda */
+    hideLeftColumn?: boolean;
+    /** Título da seção do formulário */
+    formTitle?: string;
+    /** Subtítulo da seção do formulário */
+    formSubtitle?: string;
+    /** Badge de status (ex: "Status: Draft") */
+    statusBadge?: ReactNode;
+    /** Tabs do formulário (se não usar tabs, use children) */
+    tabs?: TwoColumnFormTab[];
+    /** Tab ativa inicial */
+    defaultTab?: string;
+    /** Variante das tabs */
+    tabsVariant?: 'default' | 'outline' | 'pills';
+    /** Conteúdo do formulário (quando não usa tabs) */
+    children?: ReactNode;
+    /** Largura total */
+    width?: number | string;
+    /** Altura total */
+    height?: number | string;
+    /** Borda */
+    withBorder?: boolean;
+    /** Raio das bordas */
+    radius?: string | number;
+    /** Estilo customizado */
+    style?: CSSProperties;
+    /** Referência interna */
+    innerRef?: React.RefObject<HTMLInputElement>;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Cancelando */
+    isCanceling?: boolean;
+    /** Salvando */
+    isSaving?: boolean;
+    /** Estado de erro */
+    isError?: boolean;
+    /** Mensagem de erro */
+    error?: string;
+    /** Limpar erro */
+    clearError?: () => void;
+    /** Auto close do alerta de erro (ms) */
+    autoCloseAlertError?: number;
+    /** Callback customizado de salvar (sobrescreve comportamento padrão) */
+    onSave?: (entityToSave: T) => void;
+    /** Callback customizado de cancelar (sobrescreve comportamento padrão). Recebe closeForm para fechar o form/aba quando pronto. */
+    onCancel?: (closeForm: () => void) => void;
+    /** Callback antes de salvar */
+    onBeforeSave?: (entityToSave: T) => void;
+    /** Callback após salvar */
+    onAfterSave?: (savedEntity: T) => void;
+    /** Callback antes de cancelar */
+    onBeforeCancel?: () => void;
+    /** Callback após cancelar */
+    onAfterCancel?: () => void;
+    /** Callback de erro */
+    onError?: (error: string) => void;
+    /**
+     * Caminho da rota para o navigation listener (usado para fechar abas).
+     * Quando fornecido, integra com useArchbaseNavigationListener.
+     */
+    routePath?: string;
+    /**
+     * Callback chamado antes de fechar a aba.
+     * Retorne true para permitir o fechamento, false para cancelar.
+     */
+    onBeforeClose?: () => boolean | void;
+    /**
+     * Hook de navigation listener (ex: useArchbaseNavigationListener de @archbase/admin).
+     * Quando fornecido, integra com o sistema de navegação por abas.
+     * Assinatura: (id: string, onUserCloseRequest: () => void) => { closeAllowed: (payload?: any) => void }
+     */
+    useNavigationListener?: (id: string, onUserCloseRequest: () => void) => {
+        closeAllowed: (payload?: any) => void;
+    };
+}
+export declare function ArchbaseTwoColumnFormTemplate<T extends object, ID>({ title, subtitle, onBack, headerActions, showDeleteButton, onDelete, saveLabel, cancelLabel, buttonsPosition, leftColumnContent, leftColumnSpan, hideLeftColumn, formTitle, formSubtitle, statusBadge, tabs, defaultTab, tabsVariant, children, width, height, withBorder, radius, style, innerRef, isLoading, isCanceling, isSaving, isError, error, clearError, autoCloseAlertError, dataSource, variant, onSave, onCancel, onBeforeSave, onAfterSave, onBeforeCancel, onAfterCancel, onError, routePath, onBeforeClose, useNavigationListener, resourceName, resourceDescription, requiredPermissions, fallbackComponent, securityOptions, ...rest }: ArchbaseTwoColumnFormTemplateProps<T, ID>): import("react/jsx-runtime").JSX.Element;
+interface FormSectionCardProps {
+    /** Título do card */
+    title: string;
+    /** Descrição/subtítulo */
+    description?: string;
+    /** Ícone de ação no header (ex: botão +) */
+    headerAction?: ReactNode;
+    /** Conteúdo do card */
+    children: ReactNode;
+}
+/**
+ * Card para seções auxiliares na coluna esquerda (Visibility, Related Items, etc)
+ */
+export declare function FormSectionCard({ title, description, headerAction, children }: FormSectionCardProps): import("react/jsx-runtime").JSX.Element;
+interface ImageGalleryItem {
+    id: string;
+    url: string;
+    alt?: string;
+    isCover?: boolean;
+}
+interface FormImageGalleryProps {
+    /** Lista de imagens */
+    images: ImageGalleryItem[];
+    /** Callback ao clicar para adicionar imagem */
+    onAddImage?: () => void;
+    /** Callback ao remover imagem */
+    onRemoveImage?: (id: string) => void;
+    /** Callback ao definir como cover */
+    onSetCover?: (id: string) => void;
+    /** Máximo de imagens */
+    maxImages?: number;
+}
+/**
+ * Galeria de imagens para coluna esquerda (padrão do design)
+ */
+export declare function FormImageGallery({ images, onAddImage, onRemoveImage, onSetCover, maxImages }: FormImageGalleryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/template/src/index.d.ts

@@ -6,6 +6,7 @@ export * from './ArchbaseMasonryTemplate';
 export * from './ArchbasePanelTemplate';
 export * from './ArchbaseSpaceTemplate';
 export * from './ArchbaseSearchTemplate';
+export * from './ArchbaseTwoColumnFormTemplate';
 export * from './ArchbaseLookupDataTemplate';
 export * from './ArchbaseLookupDataTemplate.types';
 export * from './ArchbaseTemplateCommonTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/template",
-  "version": "3.0.22",
+  "version": "3.0.25",
   "description": "Template components for Archbase React v3 - High-level templates and layouts",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -13,7 +13,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
-    }
+    },
+    "./dist/index.css": "./dist/index.css"
   },
   "files": [
     "dist",
@@ -29,18 +30,18 @@
     "react-dom": "^18.3.0 || ^19.2.0"
   },
   "dependencies": {
+    "@archbase/advanced": "3.0.25",
+    "@archbase/components": "3.0.25",
+    "@archbase/core": "3.0.25",
+    "@archbase/data": "3.0.25",
+    "@archbase/layout": "3.0.25",
+    "@archbase/security": "3.0.25",
+    "@archbase/security-ui": "3.0.25",
     "@rehooks/component-size": "^1.0.3",
     "dayjs": "^1.11.13",
     "i18next": "^25.3.1",
     "lodash": "^4.17.21",
-    "react-i18next": "^15.1.2",
-    "@archbase/advanced": "3.0.22",
-    "@archbase/components": "3.0.22",
-    "@archbase/core": "3.0.22",
-    "@archbase/data": "3.0.22",
-    "@archbase/layout": "3.0.22",
-    "@archbase/security": "3.0.22",
-    "@archbase/security-ui": "3.0.22"
+    "react-i18next": "^15.1.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.6",