Objeto de contexto

_value

As entradas do FormKit têm dois valores — o valor confirmado (node.value) e o valor não confirmado (node._value). Em repouso, esses dois valores são equivalentes, mas o valor não confirmado é o valor bruto não debounced da entrada.

attrs

Um objeto contendo quaisquer atributos que serão passados para o elemento de entrada interno.

fns

Um pequeno objeto de funções utilitárias que são úteis ao escrever esquemas.

{
  // Retorna o comprimento de um dado objeto
  length: (obj: Record<PropertyKey, any>) => Number,
  // Converte um valor para um número
  number: (value: any) => Number,
  // Converte um valor para uma string
  string: (value: any) => String,
  // Retorna a representação JSON de um valor
  json: (value: any) => String | false,
}

handlers

Um pequeno objeto de manipuladores de entrada comuns para uso no esquema. Tenha em mente que os "recursos" de entrada podem substituir ou adicionar manipuladores em uma base de entrada por entrada.

{
  // define o valor de state.blurred como true
  blur: () => void,
  // define o valor de state.touched como true
  touch: () => void,
  // Define o valor da entrada
  DOMInput: (e: Event) => void
}

help

O texto de ajuda da entrada fornecido pela prop help.

id

O identificador único da entrada. Este valor é gerado automaticamente, a menos que a prop id seja definida.

label

O rótulo da entrada fornecido pela prop label.

messages

Um objeto de mensagens visíveis (onde o tipo não é ui — ui). A chave deste objeto é o nome da mensagem, e o valor é um objeto de mensagem central. Por exemplo, para uma entrada exibindo uma única mensagem de validação falha, este objeto pareceria com:

{
  rule_required: {
    // Determina se a mensagem impede a submissão do formulário
    blocking: true,
    // A chave única desta mensagem
    key: 'rule_required',
    // Detalhes adicionais sobre a mensagem, você pode colocar qualquer coisa aqui.
    // Abaixo estão os detalhes meta para mensagens de validação:
    meta: {
      // O nome da mensagem de validação (usado em buscas de mensagem)
      messageKey: 'required',
      // Argumentos que podem ser usados na tradução i18n
      i18nArgs: [{
        node,
        name: 'email',
        args: []
      }]
    },
    // O "tipo" de mensagem — geralmente o plugin que a gerou.
    type: 'validation',
    // O valor da mensagem
    value: 'Email é obrigatório',
    // Se esta mensagem é destinada a ser exibida para os usuários finais — isso não significa
    // que a mensagem está ativamente visível — isso é determinado pelas regras de visibilidade do {tipo},
    // mas se isso for falso, nunca é exibido para os usuários.
    visible: true
  }
}

node

O nó central do input atual. Este objeto não é reativo (dentro do contexto do Vue).

options

Para inputs que aceitam uma propriedade de opções, esta é uma matriz normalizada de objetos de opção.

option

Para inputs que aceitam uma propriedade de opções, este objeto está disponível para chaves de seção que estão dentro da iteração (ou seja, a chave de seção label em um input de checkbox com múltiplos checkboxes). O objeto contém um label, value e, às vezes, attrs:

{
  value: 'foo',
  label: 'Foo',
  attrs: {
    disabled: true
  }
}

state

Estado atual do input:

{
  /**
   * Se o input foi desfocado.
   */
  blurred: boolean
  /**
   * Verdadeiro quando estas condições são atendidas:
   *
   * Ou:
   * - O input tem regras de validação
   * - As regras de validação estão todas sendo cumpridas
   * - Não há erros no input
   * Ou:
   * - O input não tem regras de validação
   * - O input não tem erros
   * - O input está sujo e tem um valor
   *
   * Isso não é destinado a ser usado em formulários/grupos/listas, mas sim em
   * inputs individuais. Imagine colocar uma caixa de seleção verde ao lado de cada input
   * quando o usuário o preenche corretamente — é para isso que eles servem.
   */
  complete: boolean
  /**
   * Uma bandeira que indica se o componente "dono" deste nó foi montado
   * no dom ou não. Ouça o evento `mounted` para ser notificado quando esta
   * bandeira for alterada.
   */
  didMount: boolean
  /**
   * A propriedade dirty-behavior controla como este estado é definido. Por padrão, é
   * considerado sujo se qualquer mutação foi feita no input, mas uma vez que uma mutação
   * foi feita e dirty é `true`, ele para de verificar.
   * 
   * Alternativamente, a propriedade dirty-behavior pode ser definida como `compare`, que irá
   * diferenciar as mudanças entre o valor atual e o valor inicial após
   * cada mutação — isso significa que se o input voltar ao seu valor inicial, dirty se tornará `false` novamente.
   */
  dirty: boolean
  /**
   * Se o input tem erros explícitos colocados nele, ou no caso de um grupo,
   * lista ou formulário, isso é verdadeiro se qualquer um dos filhos tiver erros neles.
   */
  errors: boolean
  /**
   * O estado de carregamento do input ou formulário. Esta propriedade é adicionada apenas enquanto
   * o input está carregando e é removida quando o carregamento é concluído.
   */
  loading: true | undefined
  /**
   * Indica se o input tem a regra de validação "required".
   */
  required: boolean
  /**
   * Verdadeiro quando o input tem regras de validação. Não tem nada a ver com o
   * estado dessas regras de validação.
   */
  rules: boolean
  /**
   * Verdadeiro quando o input completou seu ciclo interno de debounce e o
   * valor foi confirmado no formulário.
   */
  settled: boolean
  /**
   * Se o formulário foi enviado.
   */
  submitted: boolean
  /**
   * Se o input (ou grupo/formulário/lista) está passando por todas as regras de validação. No
   * caso de grupos, formulários e listas, isso inclui o estado de validação
   * de todos os seus filhos.
   */
  valid: boolean
  /**
   * == Adicionado pelo plugin @formkit/validation — incluído no defaultConfig ==
   * Se o input (ou grupo/formulário/lista) está atualmente validando regras — incluindo
   * regras de validação assíncronas. No caso de grupos, formulários e listas, isso inclui
   * o estado de validação de todos os seus filhos.
   */
  validating?: boolean
  /**
   * Se a visibilidade da validação foi satisfeita e quaisquer mensagens de validação
   * devem ser exibidas.
   */
  validationVisible: boolean
}

type

O tipo de entrada fornecido pela propriedade type. Este é o valor que deve ser referenciado ao procurar definições em uma biblioteca de entradas. Exemplos deste valor: text, select ou autocomplete.

ui

Um objeto de mensagens visíveis (indexadas pela key) do tipo ui que pode ser usado na interface. Isso permite o uso de texto localizado para elementos da interface.

classes

Um objeto Proxy para solicitar classes. Este objeto permite que os autores de esquemas solicitem qualquer seção e obtenham um nome de classe gerativo. Por exemplo, $classes.input retornaria (por padrão, sem configuração adicional) formkit-input enquanto $classes.foobar retornaria formkit-foobar.