FluiEdit4D

Componente moderno de edição de texto para Delphi VCL com design fluido, suporte a GDI+, máscaras inteligentes, ícones internos e personalização visual avançada.

---

📸 Demonstração

Veja o FluiEdit4D em ação no projeto de demonstração interativo:

---

🌟 Destaques e Recursos

• 🎨 Estilos Visuais Modernos: Suporte a estilos fsNormal, fsLabelOnTop e fsOutline (estilo flutuante/cortado moderno no padrão Material/Fluent).
• ✨ Renderização com GDI+: Bordas arredondadas suaves (Rounding) com antialiasing de alta fidelidade e controle de cores para estados padrão e com foco (FocusedColor).
• 🖼️ Ícone Interno Integrado (InnerIcon): Exiba ícones (PNG, JPEG, GIF, BMP) à esquerda ou à direita dentro da caixa de entrada, com modos de escala proporcional, stretch ou tamanho original.
• 🎭 Máscaras Inteligentes (MaskType): Formatação automática pré-configurada para CPF, CNPJ, Data, Telefone, além de formatação dinâmica em tempo real para Moeda (R$) e Decimal, e filtros para Email, Apenas Letras e Apenas Números.
• 💡 Placeholder Avançado (TextHint): Texto de dica renderizado via GDI+ com ajuste fino de transparência (TextHintOpacity).
• 📝 Texto de Ajuda / Helper Text (HelperText): Rótulo inferior com controle de exibição, tipografia e alinhamento (Esquerda, Centro, Direita), ideal para mensagens de validação ou auxílio.
• ⚙️ Acesso aos Controles Internos: Expõe diretamente a instância do Edit: TMaskEdit e EditLabel: TLabel para total flexibilidade.

---

📦 Instalação

1. Abra o Delphi IDE.
2. Abra o pacote FluiEdit4D.dpk localizado na raiz do projeto.
3. No painel Project Manager, clique com o botão direito no projeto FluiEdit4D.bpl:
   • Selecione Build (ou Shift + F9).
   • Selecione Install.
4. O componente será registrado na paleta de componentes sob a categoria FLUI.
5. Adicione o caminho da pasta src ao Library Path do Delphi:
   • Acesse Tools > Options > Language > Delphi > Library.
   • Em Selected Platform (32-bit Windows / 64-bit Windows), adicione o caminho da pasta ...\FluiEdit4D\src ao campo Library Path.

---

📋 Propriedades do Componente

🎨 Design e Aparência

Propriedade	Tipo	Padrão	Descrição
Style	TFluiEditStyle	fsNormal	Define o estilo visual do componente (fsNormal, fsLabelOnTop, fsOutline).
Rounding	Integer	8	Raio de arredondamento dos cantos da borda desenhada em GDI+.
BorderColor	TColor	$00D8D8D8	Cor da borda quando o componente está em repouso (sem foco).
FocusedColor	TColor	$00FF8000	Cor de destaque da borda quando o campo recebe o foco.
BackgroundColor	TColor	clWhite	Cor de fundo do controle e da caixa interna de texto.

---

🏷️ Rótulo Superior (Label)

Propriedade	Tipo	Padrão	Descrição
LabelCaption	string	''	Texto exibido no rótulo (visível nos estilos fsLabelOnTop e fsOutline).
LabelFont	TFont	Size: 10	Configurações de fonte (nome, tamanho, cor, estilo) do rótulo superior.
LabelSpacing	Integer	4	Espaçamento em pixels entre o rótulo e a caixa de edição (fsLabelOnTop).

---

🖼️ Ícone Interno (InnerIcon)

A propriedade InnerIcon é um subcomponente (TFluiInnerIcon) configurável tanto no Object Inspector quanto via código:

Subpropriedade	Tipo	Padrão	Descrição
InnerIcon.Picture	TPicture	nil	Imagem/ícone a ser exibido (PNG com transparência, JPG, GIF ou BMP).
InnerIcon.Position	TFluiInnerIconPosition	ipLeft	Posição do ícone dentro do campo: ipLeft (esquerda) ou ipRight (direita).
InnerIcon.ScaleMode	TFluiInnerIconScaleMode	smProportional	Modo de escala da imagem (smOriginal, smStretch, smProportional).
InnerIcon.Spacing	Integer	4	Espaçamento horizontal entre o ícone e o texto de entrada.
InnerIcon.Visible	Boolean	True	Define se o ícone interno está visível.

---

🎭 Máscaras e Validações

Propriedade	Tipo	Padrão	Descrição
MaskType	TFluiMaskType	mtNone	Define uma máscara ou comportamento pré-configurado para o campo.
EditMask	string	''	Máscara padrão VCL direta do TMaskEdit (sobrescrita se MaskType for alterado).
MaxLength	Integer	0	Quantidade máxima de caracteres permitida (0 = ilimitado).
PasswordChar	Char	#0	Caractere de ocultação de senha (ex: *). #0 exibe o texto normalmente.
ReadOnly	Boolean	False	Define se o campo é somente leitura.

Tipos de Máscara (TFluiMaskType):

Valor	Comportamento
mtNone	Entrada livre sem restrições.
mtCPF	Formatação de CPF (999.999.999-99).
mtCNPJ	Formatação de CNPJ (99.999.999/9999-99).
mtDate	Formatação de Data (99/99/9999).
mtPhone	Formatação de Telefone celular ((99) 99999-9999).
mtEmail	Permite apenas caracteres válidos para endereços de e-mail (a-z, A-Z, 0-9, @, ., _, -).
mtDecimal	Alinhamento à direita com formatação monetária/decimal dinâmica (#,##0.00).
mtCurrency	Alinhamento à direita com prefixo e formatação brasileira em tempo real (R$ #,##0.00).
mtLetters	Permite digitação apenas de letras (a-z, A-Z) e espaços.
mtNumbers	Permite digitação estritamente de números (NumbersOnly := True).

---

💬 Dica de Texto (TextHint)

Propriedade	Tipo	Padrão	Descrição
TextHint	string	''	Texto de orientação/placeholder exibido quando o campo está vazio.
TextHintOpacity	Byte	120	Nível de opacidade do placeholder via GDI+ (de 0 invisível a 255 totalmente opaco).

---

ℹ️ Texto de Ajuda Inferior (HelperText)

Propriedade	Tipo	Padrão	Descrição
EnabledHelperText	Boolean	False	Ativa ou desativa a reserva de espaço e visibilidade do texto de ajuda inferior.
HelperText	string	''	Mensagem de instrução, erro ou auxílio exibida abaixo do campo.
HelperTextFont	TFont	Size: 8, clGray	Fonte personalizada do texto de ajuda.
HelperTextAlignment	TFluiHelperTextAlignment	haLeft	Alinhamento do texto de ajuda (haLeft, haCenter, haRight).

---

🧩 Tipos e Enumeradores

type
  // Estilo visual do componente
  TFluiEditStyle = (
    fsNormal,      // Borda arredondada simples com o campo de texto centralizado
    fsLabelOnTop,  // Rótulo posicionado logo acima da caixa de edição
    fsOutline      // Rótulo embutido cortando a borda superior (estilo outline/floating)
  );

  // Máscaras e formatações automáticas
  TFluiMaskType = (
    mtNone,        // Sem máscara
    mtCPF,         // CPF formatado
    mtCNPJ,        // CNPJ formatado
    mtDate,        // Data dd/mm/aaaa
    mtPhone,       // Telefone celular com DDD
    mtEmail,       // Filtro de caracteres para e-mail
    mtDecimal,     // Formatação decimal contínua (ex: 1.234,56)
    mtCurrency,    // Formatação em Reais (ex: R$ 1.234,56)
    mtLetters,     // Permite apenas letras
    mtNumbers      // Permite apenas dígitos numéricos
  );

  // Posição do ícone em relação ao campo
  TFluiInnerIconPosition = (
    ipLeft,        // Ícone fixado à esquerda do texto
    ipRight        // Ícone fixado à direita do texto
  );

  // Modo de escala do ícone interno
  TFluiInnerIconScaleMode = (
    smOriginal,    // Mantém as dimensões originais da imagem
    smStretch,     // Estica para preencher a área vertical do campo
    smProportional // Redimensiona mantendo a proporção de aspecto (recomendado)
  );

  // Alinhamento do texto de ajuda inferior
  TFluiHelperTextAlignment = (
    haLeft,        // Alinhado à esquerda
    haCenter,      // Centralizado
    haRight        // Alinhado à direita
  );

---

💻 Exemplo de Uso via Código

uses
  FluiEdit4D, Vcl.Graphics;

procedure TFormPrincipal.ConfigurarFluiEdit;
begin
  // Configuração de Estilo e Cores
  FluiEdit.Style := fsOutline;
  FluiEdit.LabelCaption := 'Valor a Transferir';
  FluiEdit.Rounding := 12;
  FluiEdit.BorderColor := $00D0D0D0;
  FluiEdit.FocusedColor := $00D97706; // Laranja moderno / Amber
  FluiEdit.BackgroundColor := clWhite;

  // Dica e Máscara Financeira
  FluiEdit.MaskType := mtCurrency;
  FluiEdit.TextHint := '0,00';
  FluiEdit.TextHintOpacity := 140;

  // Ícone Interno
  FluiEdit.InnerIcon.Picture.LoadFromFile('C:\Icons\money.png');
  FluiEdit.InnerIcon.Position := ipLeft;
  FluiEdit.InnerIcon.ScaleMode := smProportional;
  FluiEdit.InnerIcon.Spacing := 6;
  FluiEdit.InnerIcon.Visible := True;

  // Mensagem de Ajuda no Rodapé
  FluiEdit.EnabledHelperText := True;
  FluiEdit.HelperText := 'Limite diário disponível: R$ 5.000,00';
  FluiEdit.HelperTextAlignment := haLeft;
end;

---

🖥️ Projeto Demo

O repositório inclui um projeto de demonstração interativo dentro da pasta demo/:

• Permite testar dinamicamente em tempo de execução:
  • Cores de fundo, borda e foco
  • Raio de curvatura das bordas (Rounding)
  • Modos de estilo (Normal, LabelOnTop, Outline)
  • Todas as máscaras pré-definidas (CPF, CNPJ, Data, Moeda, etc.)
  • Carregamento e posicionamento de ícones internos
  • Textos de ajuda e seus alinhamentos
• Para executar, abra e compile o projeto demo/Project2.dproj no Delphi.

---

🛠️ Tecnologias e Requisitos

• Embarcadero Delphi: Compatível com Delphi XE ou superior (Delphi 10, 11 Alexandria, 12 Athens).
• Framework: VCL (Visual Component Library).
• Bibliotecas Requeridas: rtl, vcl, vclimg, GDIPOBJ, GDIPAPI (GDI+ nativo do Windows).

---

📄 Licença

Este projeto é disponibilizado sob a licença MIT. Sinta-se livre para usar, estudar, modificar e distribuir em seus projetos pessoais e comerciais.