Fields

Os fields no Nerdify são a base para definir os campos do modelo, com regras de validação, exibição e tipos de dados. Eles integram o backend com o frontend, organizando a lógica de negócio e gerando automaticamente os componentes de entrada nas telas.

Cada campo é declarado com field :name, option1: :value, option2: :value, etc... e pode conter diversas opções complementares. O atributo name é obrigatório. Os demais atributos são opcionais.

⚙️ Opções padrão dos fields

Todos os campos aceitam as seguintes opções padrões:

Opção	Tipo	Descrição
`type`	Symbol	Tipo de campo (ex: `:date`, `:money`, `:string`, etc)
`view`	Symbol	Exibição no frontend (`:readonly`, `:editable`, `:viewonly`)
`layout`	Symbol	Layout do componente (`:inside`, `:outside`, `:inline`)
`label`	Boolean	Se deve ou não incluir o label do campo no frontend
`input_type`	Symbol	Tipo de input renderizado no frontend (ex: `:text`, `:date`, etc)
`default`	Variado	Valor padrão para o campo
`size`	Integer	Número de colunas de 1 a 12
`attribute`	Boolean	Se `true`, não será salvo no banco, apenas na instância
`translate`	Boolean	Se `false`, não será traduzido no frontend
`i18n`	Symbol	Chave customizada para tradução
`styles`	Hash	Estilo visual customizado do campo
`backend_if`	String	Condição ruby executada no backend
`render_if`	String	Condição JS avaliada no frontend — oculta totalmente se `false`
`show_if`	String	Condição JS no frontend — oculta visualmente, mas mantém no DOM
`detect_changes`	Boolean	Habilita evento de detecção ao alterar o campo
`submit_on_change`	Boolean	Submete o formulário ao alterar qualquer campo
`submit_on_input`	Boolean	Submete ao digitar (em campos de texto)
`validate`	Boolean	Condição considerar ou não validações neste campo
`validate_if`	Proc	Proc ruby para aplicar condição obrigatória para a validação ser necessária

🔍 Você também pode passar qualquer outra chave personalizada para uso em templates:

field :cpf, custom_flag: true, info: :demo

Esses valores (info, custom_flag) podem ser utilizados nos templates customizados para lógica condicional ou estilização dinâmica.

✅ Validações suportadas

As validações são baseadas nas validações padrão do Rails, e podem ser aplicadas diretamente como opções:

Validação	Exemplo
`:presence`	`field :nome, presence: true`
`:length`	`length: { maximum: 100 }`
`:inclusion`	`inclusion: %w[ativo inativo pendente]`
`:format`	`format: /\A[A-Za-z]+\z/`
`:uniqueness`	`uniqueness: true`
`:numericality`	`numericality: { greater_than: 0 }`
`:acceptance`	`acceptance: true`
`:absence`	`absence: true`
`:confirmation`	`confirmation: true`
`:validates_associated`	`validates_associated: true`

Você também pode usar validate_if: com um Proc para criar uma condição obrigatória para a execução da validação.

field :password, presence: true, validate_if: -> { new_record? }

Neste exemplo, o campo password só será obrigatório se o modelo não existir no banco ainda (condição definida pelo método new_record?)

📌 Campos com opções específicas adicionais

Alguns tipos de campo suportam opções específicas extras. Por exemplo:

textarea aceita rows: 4
decimal aceita step: 0.1
text pode aceitar mask: "000.000.000-00"
select, checkbox e radio podem aceitar multiple: true, collection: "caminho", translate: true, etc.

Essas opções variam de tipo para tipo, e serão detalhadas na documentação específica sobre cada tipo de campo.

O foco aqui são as opções comuns a todos os fields.

🔎 Inferência automática de tipo

Se o tipo (type:) não for definido, o Nerdify tenta inferir com base no nome do campo:

Padrão de nome	Tipo inferido
`field :initial_date`	`type: :date`
`field :actived?`	`type: :boolean`
Nenhuma inferência	`type: :text`

Essa lógica permite agilidade ao definir campos, reduzindo a necessidade de opções explícitas.

📋 Comportamento padrão por rota

As rotas do Nerdify influenciam o comportamento visual do campo. Se você não definir as opções view e layout diretamente, elas se comportarão por padrão conforme a tabela a seguir:

Rota	`view`	`layout`
`index`	`:viewonly`	`:inline`
`show`	`:readonly`	`:inside`
`new`	`:editable`	`:outside`
`edit`	`:editable`	`:outside`

Esses valores podem ser sobrescritos com as opções view: e layout: diretamente no campo. Por exemplo:

field :name, type: :text, view: :editable, layout: :outside

📦 Tipos suportados de fields

Listar diretamente todos os tipos, com o tipo no backend e o hash padrão ao lado:

Tipo Nerdify	Tipo Backend	Hash padrão
`text`	`String`	`{ default: nil, validate: true, input_type: :text }`
`textarea`	`String`	`{ default: nil, rows: 4, validate: true, input_type: :textarea }`
`number`	`Integer`	`{ default: nil, validate: true, step: 1, input_type: :number }`
`decimal`	`Float`	`{ default: nil, validate: true, step: 0.1, input_type: :decimal }`
`hidden`	`String`	`{ default: nil, validate: true, input_type: :hidden }`
`code`	`String`	`{ default: "", validate: true, input_type: :code }`
`cpf`	`String`	`{ format: /.../, mask: "000.000.000-00", validate: true, input_type: :text }`
`cnpj`	`String`	`{ format: /.../, mask: "00.000.000/0000-00", validate: true, input_type: :text }`
`cpf_or_cnpj`	`String`	`{ mask: "(00) 00000-0000", format: /.../, input_type: :text }`
`phone`	`String`	`{ format: /.../, mask: "(00) 00000-0000", validate: true, input_type: :text }`
`money`	`Money`	`{ mask: :money, validate: true, default: Money.new(0), input_type: :money }`
`credit_card`	`String`	`{ format: /.../, mask: "0000000000000000", validate: true, input_type: :text }`
`cep`	`String`	`{ format: /.../, mask: "00000-000", validate: true, input_type: :text }`
`date`	`Date`	`{ picker: :date, mask: "00/00/0000", validate: true, input_type: :date }`
`month`	`String`	`{ validate: true, input_type: :month }`
`time`	`String`	`{ validate: true, input_type: :time }`
`date_time`	`DateTime`	`{ validate: true, input_type: :date_time }`
`week`	`String`	`{ validate: true, input_type: :week }`
`avatar`	`String`	`{ uploader: ..., validate: true, input_type: :avatar }`
`dropzone`	`Array`	`{ uploader: ..., upload: '../upload', validate: true, input_type: :dropzone }`
`file`	`String`	`{ uploader: ..., validate: true, input_type: :file }`
`image`	`String`	`{ uploader: ..., accept: "image/*", preview: :image, validate: true, input_type: :file }`
`email`	`String`	`{ format: /.../, validate: true, input_type: :text }`
`url`	`String`	`{ format: /.../, validate: true, input_type: :text }`
`html`	`String`	`{ validate: true, input_type: :html }`
`editor`	`String`	`{ validate: true, input_type: :editor }`
`color`	`String`	`{ validate: true, input_type: :color }`
`password`	`String`	`{ validate: true, input_type: :password }`
`select`	`Array`/`String`	`{ multiple: false, validate: true, translate: true, input_type: :select }`
`checkbox`	`Boolean`/`Array`	`{ multiple: false, validate: true, translate: true, input_type: :checkbox }`
`radio`	`String`	`{ multiple: false, validate: true, translate: true, input_type: :radio }`
`zip_code`	`String`	`{ format: /.../, mask: "00000-000", input_type: :text }`
`credit_card_number`	`String`	`{ format: /.../, mask: "0000000000000000000", input_type: :text }`

🧩 Alguns campos possuem opções específicas adicionais — consulte a documentação individual de cada tipo para mais detalhes.

🧩 No frontend, eles são convertidos para componentes do tipo input e o tipo do input é definido pelo valor do atributo input_type, por isso ele é setado como padrão no hash default. Na prática um field :field_name, type: :date para o frontend é convertido em component :input, name: :field_name, input_type: :date. Enquanto no backend ele é convertido na chamada field :date, type: Date do MongoId, usando o tipo da coluna Tipo Backend da tabela acima.

🎨 Estilo visual com `styles`

O Nerdify aplica por padrão o estilo definido na constante Nerdify::Component::INPUT em cada campo. Você pode sobrescrever algum dos valores mantendo o restante usando o merge na constante:

field :name, styles: Nerdify::Component::INPUT.merge({background_color: :primary})

Ou substituir completamente definindo o hash diretamente:

field :name, styles: { background_color: :primary }

A estilização padrão de um field é a seguinte:

{
    background: 'transparent',
    border: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    border_color: 'default',
    rounded: {
        top_left: 0,
        top_right: 0,
        bottom_left: 0,
        bottom_right: 0
    },
    shadow: 0,
    size: 5,
    blur: 0,
    padding: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    margin: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    negative_margin: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0
    },
    align: {
        top: 'vertical',
        left: 'vertical',
        right: 'vertical',
        bottom: 'vertical',
        body: 'vertical'
    }
}

🔍 Acessando definições no console

Você pode acessar os campos definidos com:

Customer.nerdify.inputs                    # Array de campos do modelo
input = Customer.nerdify.inputs.first      # Retorna o primeiro campo do modelo
input.name                                 # Retorna o nome do campo do modelo
input.options[:view]                       # Retorna a view configurada no modelo

Ou para acessar os filhos de um fieldset:

# Retorna o array de filhos do fieldset, podendo conter fields, components,embeds e fieldsets aninhados
Customer.nerdify.fieldsets.first.children

Isso permite inspecionar programaticamente os atributos e opções configuradas para personalizações ou verificações dinâmicas.

Com os fields, o Nerdify torna o processo de definição de modelos e regras de negócio estruturado, automatizado e diretamente conectado à interface final. 🧠✨

⚙️ Opções padrão dos fields​

✅ Validações suportadas​

📌 Campos com opções específicas adicionais​

🔎 Inferência automática de tipo​

📋 Comportamento padrão por rota​

📦 Tipos suportados de fields​

🎨 Estilo visual com styles​

🔍 Acessando definições no console​