Base ⚡️ FormKit

0.17.3 (Beta 17)

💪 Novas funcionalidades

Adiciona o idioma 🇲🇳 Mongol (mn) - #747
Adiciona o idioma 🇮🇸 Islandês (is) #748
Adiciona novas extensões node.next(), node.previous(), e node.goTo() para entradas multi-step através do plugin MultiStep. Isso permite um controle externo mais fácil da navegação de entrada multi-step. #685
Adiciona nova extensão node.restoreCache() para o plugin localStorage para permitir a restauração de valores de formulário para o cache em caso de falha no envio. #727

🐛 Correções de bugs:

Corrige problemas de hidratação SSR para a entrada multi-step. #720
Corrige problema onde o evento blur poderia causar erros no console na mudança de rota. #735
Corrige problema onde as entradas Pro quebrariam quando usadas com o plugin Floating Labels. #742
MultiStep beforeStepChange agora funciona com chamadas de função async. #743
Corrige problema onde as entradas file não permitiriam o reenvio do mesmo arquivo após chamar reset. #762
Previne conflito de nomes de keyframe CSS Genesis adicionando prefixo fk-.

0.17.2 (Beta 17)

🐛 Correções de bugs:

Corrige um problema que fazia com que v-model’s profundamente aninhados não atualizassem quando uma mutação se originava em profundidade (#722)
Corrige um problema que fazia com que entradas personalizadas que substituíam a família de entradas text reutilizassem o primeiro esquema(#719)
Exporta o tipo FormKitValidationMessage para ajudar a digitar funções de mensagem de validação (#695)

💪 Novas funcionalidades

plugin localStorage agora suporta novas opções: key, control, debounce, beforeSave, e beforeLoad.
plugin localStorage agora pode ser aplicado a qualquer entrada de tipo interno group. ex (form, group, multi-step, etc).

0.17.1 (Beta 17)

🐛 Correções de bugs

Corrigido um bug que causava um erro ao ser lançado quando uma lista dinâmica era inicializada com valores escalares iniciais idênticos (#715)
Corrigido um bug que fazia com que a propriedade value de um slot não fosse atualizada em alguns casos de borda (#717).

0.17.0 (Beta 17)

12 de maio, 2023

💪 Novas funcionalidades

Novo plugin FormKit Zod — Valide seus formulários FormKit usando esquema Zod.
Nova prop dynamic de lista permite que você crie seus próprios repetidores facilmente.
Novo plugin Save to localStorage para salvar o progresso do usuário em formulários e proteger contra a perda de dados no caso de um evento inesperado.
Adiciona novas regras de validação: require_one (obrigado @devoidofgenius), contains_alpha, contains_alphanumeric, contains_alpha_space, contains_symbol, contains_uppercase, contains_lowercase, contains_numeric, symbol, uppercase, e lowercase (obrigado @riderx).
Novo plugin Auto-height textarea para criar entradas textarea com altura redimensionável dinamicamente.
Pro: Nova entrada Slider.
Adiciona novo evento commitRaw que dispara mesmo se não houver alteração no valor da entrada.
FormKitSchema agora pode usar um único nó raiz (em vez de um fragmento)
Todas as entradas FormKit agora usam um nó raiz em vez de um fragmento, o que significa que diretivas Vue padrão como v-show agora funcionam e adicionar uma key a entradas dinâmicas geralmente não é mais necessário (#528).
O plugin AutoAnimate agora suporta a animação da entrada do repetidor e outras entradas Pro.
Valores passados para a função node.reset() se tornam o novo valor padrão para a entrada (#621).
Adiciona chinês tradicional 🇨🇳 (zh-TW)
Adiciona letão 🇱🇻 (lv)
Adiciona tetum 🇹🇱 (tet)
Adiciona nova capacidade de estender um nó central com node.extend().

⚡️ Desempenho

Melhoria dramática no desempenho de montagem de entradas em um formulário grande (5-10x mais rápido).
Melhorou o desempenho de hidratação de um formulário ao diferenciar valores escalares antes de inserir.
Reduziu o ruído no evento @input e removeu o debounce agora desnecessário no evento de mudança.

🐛 Correções de bugs

O @formkit/observer agora observará as mudanças em node._value em instâncias onde você deseja operar no valor de entrada não debounced.
O ícone range em @formkit/icons foi atualizado para mostrar apenas uma alça de controle, pois as entradas de range HTML não suportam múltiplos valores. O antigo ícone de multi-alça foi reaproveitado para a nova entrada slider do FormKit Pro.
Pro: Corrige um bug que fazia com que as entradas repeater aninhadas não hidratassem corretamente (#458).
Pro: Corrige um bug que fazia com que as entradas repeater aninhadas lançassem um erro ao serem removidas (#457).
Corrige um bug que fazia o evento de desfoque disparar várias vezes ao vincular manualmente ao evento @blur em uma entrada personalizada (#413).
Corrige um bug que fazia v-model disparar eventos de entrada apenas em cada outra entrada (#463)
Corrige um bug que fazia o esquema iterar sobre o valor de uma matriz se a matriz tivesse um comprimento de 1 e o único valor na matriz fosse um número (#635)
Corrige um problema que fazia node.walk() terminar prematuramente ao usar stopOnFalse.
Corrige vazamento de memória em navegação SPA e ambientes SSR (#475)

Beta 16 é a primeira versão do FormKit que não tem um identificador de pré-lançamento. Beta 16 e todas as versões beta restantes serão lançadas sob a versão semântica 0.x.x. O primeiro lançamento estável será 1.0.0 e está previsto para o final deste ano. Esta mudança na versão deve ajudar na resolução de dependências do gerenciador de pacotes à medida que completamos nossos ciclos de lançamento beta.

💪 Novos recursos

Pro: Nova entrada Transfer List! Uma ótima opção para ajudar seus usuários a selecionar informações de um grande conjunto de dados.
Pro: O plugin floating labels agora suporta Entradas FormKit Pro.
Pro: A entrada mask input agora suporta várias cores fornecendo uma opção overlay.
Adiciona uma nova prop dirty-behavior que permite aos usuários optar por um comportamento compare que compara o valor atual da entrada com o valor original da entrada. Se a entrada for alterada de volta ao seu estado original, a flag context.state.dirty voltará a ser falsa.
Adiciona traduções i18n para algumas novas regras de ui e validação.

🐛 Correções de bugs

A propriedade options (usada em select, radio, checkboxes e alguns inputs pro) agora pode diferenciar entre valores null e undefined.
Corrige problemas com o módulo @formkit/nuxt e o realce de sintaxe.
Corrige um bug que fazia com que o estado dirty de um input não relacionado fosse incorretamente definido como true quando um objeto (como um grupo) era atualizado (#520).
O plugin floating labels agora esconde placeholders até ser focado (#574).
Corrige um bug que fazia com que os formulários não recebessem o estado submitted como os filhos do formulário em uma submissão de formulário malsucedida (#503).
O input multi-step agora preserva a ordem dos passos ao renderizar condicionalmente os passos (#613).
Corrige um bug de estilo do tailwind para checkboxes e radios (#584).

1.0.0-beta.15

6 de fevereiro de 2023

Este lançamento adiciona novos plugins de primeira parte ao pacote @formkit/addons, envia correções de bugs e atualizações de estilo para usuários de CSS e Tailwind CSS.

💪 Novos recursos

Crie facilmente formulários de várias etapas ou inclua seções de várias etapas dentro de seus formulários com o novo plugin de várias etapas em @formkit/addons. Vem com estilo CSS standalone que você pode importar e que funciona bem com nosso tema genesis. Confira a documentação completa aqui.
Ative rótulos flutuantes para todos os inputs da família text (text, email, url, etc) e textarea com o novo plugin de rótulos flutuantes em @formkit/addons. Confira a documentação completa aqui.
Adiciona novas strings Next e Previous ao objeto de localização da UI para uso em plugins e inputs personalizados.

🐛 Correções de bugs

Corrige o caminho de exportação do tema genesis do Tailwind CSS ausente em @formkit/themes.
Adiciona estilo :focus-visible aos botões para mostrar o estado de foco ao usar a navegação por teclado.
Adiciona estilos loading ausentes para botões submit no tema Genesis do Tailwind CSS.

📘 Artigos

Novo Artigo: Crie um formulário de várias etapas em Vue em 5 minutos

Reverte @formkit/themes/tailwindcss para incluir apenas uma exportação default do plugin FormKitVariants.
Move o tema Genesis do Tailwind fornecido para um novo caminho de exportação de @formkit/themes/dist/tailwindcss/genesis.
Altera o operador de remoção de classe de ! para $remove: para não entrar em conflito com o operador ! integrado do Tailwind que adiciona !important a uma regra de estilo.
Corrige o problema onde os ícones padrão não carregariam ao usar o tema Genesis do FormKit Tailwind fornecido.

Adiciona novo componente <FormKitMessages> que permite a realocação das mensagens de validação e erro de um formulário e a capacidade de entradas group e list exibirem suas próprias mensagens de erro e validação.
Ao remover classes em uma seção de uma entrada FormKit, você pode usar o operador de prefixo ! para remover seletivamente uma classe existente sem precisar usar a sintaxe de objeto de formulário longo. ex outer-class="my-class !formkit-outer" adiciona my-class e remove a classe padrão formkit-outer.
Adiciona Catalão (obrigado @petergithubmgw).
As entradas checkbox e radio agora têm um atributo data-checked em torno de seu respectivo wrapper, facilitando a adição de estilos personalizados para estados verificados vs não verificados.
Melhora as mensagens de validação em um punhado de idiomas (en, pt, zh).
Pro: Nova entrada Mask Pro.
Pro: Adiciona prop empty-message permite que a mensagem seja renderizada na listbox quando nenhuma opção é passada (dropdown, autocomplete e taglist). #502
Pro: Adiciona atributo checked ao formkit-option (dropdown, autocomplete, taglist). #350
Pro: Adiciona prop max para taglist e autocomplete com entradas multiple. #501
Pro: Adiciona prop closeOnSelect manterá a listbox expandida à medida que as seleções são feitas (autocomplete múltiplo e taglist).
Pro: Adiciona prop forceExpanded força a listbox a permanecer aberta para fins de desenvolvimento (dropdown, autocomplete e taglist).
Pro: Todas as entradas Pro agora podem ser desativadas via atributo disabled.

🐛 Correções de bugs

Corrigido um bug onde a regra date_after mostrava uma mensagem de validação incorreta por causa dos fusos horários. #488
Corrigido um bug onde os ids gerados automaticamente não tinham um valor seguro para atributo por causa de caracteres especiais. #517
Os valores v-model agora podem ser inicializados como undefined. #235
Corrigido um bug que fazia com que as props validation-rules inline recursassem inesperadamente. #514
Corrigido um bug que fazia com que o rótulo de checkboxes com várias opções não fosse substituído com sections-schema. #541
Corrigido um bug que fazia com que os rótulos não mudassem dinamicamente em mensagens de validação já renderizadas. #297
Corrigido um bug que fazia com que a prop disabled precisasse de null em vez de false para renderizar o atributo data-disabled no wrapper externo. #511
Corrigido um bug que impedia que os slots fossem condicionais (ou seja, usando v-if no bloco <template v-slot>). #489
Corrigido problemas de compatibilidade com Nuxt e Nuxt playground.
Corrigido um bug que fazia com que as seções não respeitassem adequadamente a prop sections-schema.
Corrigido um problema com variantes de ícones de prefixo e sufixo do Tailwind. #530
Pro: Corrigido um bug taglist onde opções duplicadas eram carregadas da API. #497
Pro: Corrigido um bug onde o taglist renderizava props duplicadas quando a prop multiple estava definida como false. #494
Pro: Corrigido um bug onde as options de autocomplete estavam duplicando quando usadas rapidamente, repetidamente ou com conteúdo colado. #431
Pro: Corrigido um problema onde o valor padrão para autocomplete e taglist não podia ser removido quando o valor fornecido era um objeto literal. #505
Pro: Corrigido um problema onde a listbox ainda estava visível quando nenhuma option era passada. #504

📙 Documentação & Playground

Nova Referência da API — Usuários do TypeScript, comemorem! A Referência da API expõe funcionalidades anteriormente não documentadas.
Nova implementação Tailwind do nosso tema Genesis.
Ao escolher Tailwind CSS no FormKit Playground, o novo Tema Genesis FormKit Tailwind é carregado automaticamente para você, se o seu Playground ainda não tiver um arquivo formkit.config.js.

Pro: Novo Taglist Pro Input agora disponível!
Adiciona o comando npx formkit create-app para inicializar facilmente novos projetos FormKit.
Melhora as mensagens de validação da regra length em todos os idiomas.
Adiciona o idioma grego 🇬🇷 (uk) #460.
Adiciona o idioma norueguês Bokmål 🇳🇴 (nb) #418.
Adiciona o idioma eslovaco 🇸🇰 (sk) #401.
Pro: Todos os Pro Inputs agora podem ser desativados.
Pro: Melhorias no tema Genesis Pro.
Pro: Autocompletes com várias opções selecionadas agora podem ser reordenados via arrastar & soltar.
Pro: Adicionados atributos faltantes ao esquema de mensagem.

🐛 Correções de bugs

Corrigido um bug onde o slot de etiqueta não funcionava sem a propriedade de etiqueta #456.
Corrigido um bug onde você não podia alterar dinamicamente as regras de validação disponíveis #449.
Corrigido um bug onde a troca de chaves não limpava o valor de uma entrada quando dentro de um grupo. #446.
Corrigido um bug onde os métodos do objeto Date eram inacessíveis a partir do Schema #406.
Corrigido um problema de caminho que dificultava o acesso a arquivos por terceiros #404.
Corrigido um bug que impedia o argumento stopIfFalse na função walkTree.
Corrigido um bug onde uma entrada select inicializada com um valor null não tinha um bom valor #415.
Pro: Corrigido um bug onde o evento count:blocking não estava sendo emitido corretamente em Repeaters.
Pro: Atualizados os índices do Repeater para serem números em vez de strings. #422.
Pro: Corrigido um bug de autocomplete onde a próxima página de opções estava substituindo a página atual. #447.
Pro: Corrigido um bug onde os inputs Pro não estavam mostrando mensagens de validação ao desfocar #403.

Estabelece a base para os Inputs do FormKit Pro!

🐛 Correções de bugs

Corrigido um bug onde o slot "ajuda" aparecia duas vezes para elementos checkbox e radio #353.
Corrigido um bug que fazia o plugin FormKit AutoAnimate falhar com o Nuxt #361.
Corrigido um bug de esquema onde uma referência de notação de ponto a uma subpropriedade inexistente fazia [Object object] ser exibido após a referência existir #368.
FormKit agora funciona com Nuxt 3.0.0-rc.8 e 3.0.0-rc.9 #371 e #383.
Corrigido um bug onde os usuários não conseguiam usar hooks via plugin para atualizar valores modelados em v #391.
Corrigido um bug onde os usuários não conseguiam importar @formkit/themes/tailwindcss com TypeScript #376.
Corrigido um bug que fazia os ícones padrão nunca carregarem quando incluídos diretamente na configuração.
Corrigido um bug onde uma validação de checkbox com "obrigatório" funcionava apenas na primeira vez #169.

As definições de entrada agora têm uma propriedade family opcional, que adiciona um atributo data-family e define o valor em node.props.family. Isso é útil para aplicar plugins e estilos a "famílias" inteiras de entradas, como a família de entradas de texto, que se aplicaria a text, email, password, number, etc.
As definições de entrada agora incluem uma propriedade forceTypeProp opcional que garante que o node.props.type seja inicializado como um valor dado, mesmo que a entrada seja registrada sob um nome diferente. Por exemplo, myModifiedCheckbox ainda poderia ter node.props.type reportando "checkbox".
Adiciona o atributo data-multiple a checkboxes e rádios quando eles têm várias opções.
Adiciona novo evento @submit-invalid a entradas type="form". O evento é acionado quando um usuário tenta enviar um formulário, mas ele tem entradas inválidas.
Adiciona nova função auxiliar getValidationMessages a @formkit/validation que extrai um Map de nós e suas mensagens de validação.
Adiciona nova seção decorator-icon a checkboxes e rádios, facilitando o uso de SVGs personalizados em seus checkboxes e rádios.
Adiciona novos ícones "check" e "circle" ao pacote de ícones embutido.
Adiciona 🇦🇿 língua azerbaijana (az).
Adiciona 🇺🇦 língua ucraniana (uk).

🐛 Correções de bugs

Corrigido uma regressão onde uma única caixa de seleção não estava mais exibindo o texto de ajuda (#310).
Corrigido um bug que fazia o plugin AutoAnimate falhar no Nuxt SSR (#330).
Corrigido um bug que fazia com que todos os context.state.dirty dos inputs se tornassem verdadeiros quando um formulário v-modelado era editado (#311).
Corrigido um bug que causava uma condição de corrida entre o evento @change de uma lista de seleção e a propagação do valor v-model (#335).
Corrigido um bug que fazia com que props/attrs condicionais que retornavam arrays retornassem objetos em vez de arrays (#317).
Corrigido um bug que fazia com que inputs de arquivo vazios fossem definidos como indefinidos em vez de um array vazio quando node.reset() é chamado (#319).
Corrigido um bug que fazia com que a propriedade disabled desabilitasse incorretamente checkboxes e inputs de rádio quando definida como um valor falsy (não nulo) (#307).

A seção removeFiles do input de arquivo foi renomeada para fileRemove.
A seção fileRemove (anteriormente removeFiles) costumava renderizar uma tag <a>, isso foi alterado para um button.
Composables de @formkit/inputs foram substituídos por "seções". Isso deve afetar apenas os usuários que estavam criando seus próprios inputs a partir de composables pré-existentes.

🎉 Novos recursos

Ícones! FormKit agora vem com suporte de primeira classe para ícones, incluindo um pacote de ícones licenciado pelo MIT com entrega automática via CDN. Leia mais sobre isso na nova página de documentação de ícones.
AutoAnimate! FormKit agora inclui um plugin AutoAnimate, trazendo suporte AutoAnimate para FormKit com uma única linha de código.
Exportações! Agora você pode exportar qualquer um dos inputs existentes e reestruturá-los à vontade usando a nova ferramenta de linha de comando @formkit/cli. Altere os inputs existentes adicionando, removendo, atualizando ou reordenando seções - ou adicione suas próprias variações de input exportadas e alteradas à sua biblioteca de inputs.
Todos os inputs foram refatorados para usar uma API de composição de esquema muito melhorada que permite a fácil composição e modificação de inputs baseados em esquema.
Adiciona nova propriedade meta à especificação de esquema (#248).
Os temas CSS do FormKit podem ser instalados via CDN usando a nova opção theme em defaultConfig()
Adiciona novos ganchos submit e setErrors.
Adiciona 🇧🇬 língua búlgara.
Adiciona 🇭🇺 língua húngara.
Adiciona 🇰🇿 língua cazaque.
Adiciona 🇷🇸 língua sérvia.
Adiciona 🇹🇯 língua tajique.

🐛 Correções de bugs

Corrigido um bug que fazia a propriedade key não funcionar ao usar o atalho $formkit no esquema (#232).
Corrigido um bug que não chamava os manipuladores de eventos em @blur (#239).
Corrigido um bug que causava 1 iteração a mais do for em navegadores Safari antigos (#299).
Adicionadas chaves automáticas aos inputs do FormKit, o que corrigiu uma série de bugs de reatividade quando chaves explícitas não eram usadas com inputs condicionais.
A prop input-errors agora irá resetar quaisquer erros que tenha definido anteriormente quando for definida como um objeto vazio {} (#277).
Adiciona suporte para diacríticos tchecos/eslovacos nas regras alpha e alpha_spaces (#281).

📙 Documentação

Nova página de documentação para Ícones do FormKit 🎉.
Novo guia para exportar e reestruturar ícones!
Nova documentação usando o plugin AutoAnimate.
Diagramas de input incluem novas seções de ícones.

Os plugins tailwindcss, unocss e windicss agora devem ser importados de seu próprio subcaminho do pacote @formkit/themes. Por exemplo:

import formKitTailwindPlugin from '@formkit/themes/tailwindcss'

🐛 Correções de bugs

Remove importações impróprias de windicss, tailwindcss e unocss.

O evento update:model-value agora só será emitido ao usar a diretiva v-model.
O evento input agora é amortecido para reduzir a quantidade de ruído emitido. Você pode usar o novo input-raw para ouvir cada evento de input.
Erros definidos via setErrors agora são automaticamente limpos no input por padrão. Para reverter para o comportamento anterior, defina preserveErrors: true em seu objeto de configuração global.
O pacote @formkit/tailwindcss agora está obsoleto — tanto o plugin formKitTailwind quanto a função generateClasses foram movidos para o pacote @formkit/themes.

🎉 Novos recursos

Inputs checkbox, radio e select (inputs que usam :options) agora podem usar qualquer tipo de dado como seu valor, como números, objetos ou até mesmo null (#85).
Adiciona novas utilidades node.clearErrors e clearErrors para auxiliar na limpeza de erros de backend de um input ou formulário.
Agora os inputs limpam automaticamente quaisquer erros definidos com node.setErrors() no input do usuário. Você pode substituir este comportamento padrão (para manter o erro no input) com preserve-errors="true".
Adiciona uma nova função node.addProps para adicionar novas props em plugins personalizados.
Adiciona novo gancho message para modificar mensagens à medida que estão sendo definidas.
Adiciona um novo evento central reset — emitido após um formulário ser resetado.
Adiciona uma nova prop index que permite que os inputs sejam injetados em um determinado índice em um tipo list pai.
O evento input do componente <FormKit> agora é amortecido, o que significa que emite muito menos ruído.
Exporta todas as funções de recursos de input import { features } from '@formkit/inputs'.
Adiciona um novo evento input-raw ao componente <FormKit> que é emitido para cada evento de input único em um input, lista, grupo ou formulário (muito ruidoso).
O nó central agora é o segundo argumento dos eventos input, input-raw, submit e submit-raw.
Adiciona novo evento de nó central dom-input-event que tem o objeto Event HTML nativo como payload.
@formkit/themes agora inclui exportações nomeadas para funções de plugin para Tailwind CSS (formKitTailwind), Windi CSS (formKitWindi) e Uno CSS (formKitUno). Ao adicionar o plugin correto ao arquivo de configuração do seu framework CSS, você terá acesso a uma variedade de variantes formkit como formkit-invalid: e formkit-disabled:.
@formkit/themes agora inclui a função auxiliar generateClasses que permite que você forneça facilmente diferentes listas de classes para ${sectionKey}s com base no tipo de input.
Adiciona 🇸🇪 língua sueca.
Adiciona 🇸🇮 língua eslovena.
Adiciona 🇷🇴 língua romena.
Adiciona 🇯🇵 língua japonesa.
Adiciona 🇹🇭 língua tailandesa.
Melhora 🇵🇱 língua polonesa.

🐛 Correções de bugs

🔥 Melhora dramaticamente o desempenho e a confiabilidade do v-model para estruturas profundamente aninhadas como formulários com listas e grupos.
Corrige um problema que fazia com que valores null gerassem erros (#151)
Corrigido um bug que fazia com que validation-visibility não mudasse quando atualizado reativamente (#159)
Corrige um bug que fazia com que a palavra-chave preserve bloqueasse algumas submissões de formulário (#145)
Corrige a digitação TypeScript para a configuração @formkit/tailwind (#143)
Corrige um bug que fazia com que caixas de seleção únicas com um objeto como o on-value não tivessem seu valor inicial definido ao usar a prop :value.
Corrige um bug que fazia com que as regras de validação não fossem atualizadas quando a prop label mudava (#170)
Corrige um bug que causava uma seleção padrão incorreta em listas de seleção com um atributo multiple="false" explícito e um placeholder (#148).
Corrige um bug que fazia com que a prop classes não reagisse à reatividade do Vue ao usar refs aninhados (#155).
Corrige um bug que impedia que os botões de envio fossem desativados quando aplicados usando o atributo disabled no formulário sem especificar disabled="true" (#215)
Corrige um bug do compilador de esquema que fazia com que o espaço em branco de uma string entre aspas em um parêntese fosse removido incorretamente (#150).

Adiciona nova regra de validação alpha_spaces (#83)
Adiciona 🇨🇿 Tcheco (obrigado @dfridrich)
Adiciona Frísio (obrigado @arjendejong12)

📙 Documentação

Nova documentação de configuração que explica a relação das opções de nó, config e props.

🐛 Correções de bugs

Corrige um bug que fazia com que as entradas de rádio perdessem a reatividade quando definidas via node.input() (#139)
Melhora a anotação TypeScript para o evento @submit (#130)
Corrigido um problema que fazia com que os selects não fossem renderizados se definidos como um array vazio (#129)
Corrigido um erro que causava erros de renderização do lado do servidor no Nuxt 3 ao executar um projeto construído (#113)
Corrigido um bug que fazia com que o escopo da variável de esquema fosse perdido ao referenciar dados de iteração dentro do slot de um componente (#91)

O atributo data-loading foi movido do botão de envio de um formulário para a tag <form> em si.

🎉 Novos recursos

Adiciona novo plugin @formkit/tailwindcss para criar facilmente temas Tailwind para seus formulários FormKit. Confira o guia Criar um tema Tailwind CSS para mais detalhes.
Adiciona uma nova função programática reset. Isso pode ser feito em qualquer input, grupo, formulário, ou lista e irá restaurar o valor de volta ao seu estado inicial. Também reseta o objeto context.state (como blurred e dirty).
Melhora a acessibilidade adicionando aria-describedby e aria-live a todos os tipos de input fornecidos. aria-describedby agora direciona para o texto de ajuda, mensagens de validação, e mensagens de erro (rotulagem fornecida por tags <label> que usam o atributo for).
Grupos, listas e formulários agora podem aplicar valores undefined aos seus filhos. Em outras palavras, se um formulário é v-modelado e seu valor é definido como um objeto vazio {}, ele irá limpar todo o formulário.
Adiciona nova propriedade context.state.settled que sinaliza quando o ciclo de debounce interno do input terminou e um valor terminou de ser comprometido com o formulário.
Adiciona atributo data-submitted aos inputs que foram enviados.
Adiciona nova chave de seção fileName (obrigado @santi).
Adiciona nova prop parent que aceita um nó central para casos de uso avançados onde os inputs são desacoplados de seu formulário ou estrutura de dados é desejada.
Adiciona 🇱🇾 Árabe (obrigado @Ahmedelforjani)
Adiciona 🇩🇰 Dinamarquês (obrigado @bjerggaard)
Adiciona 🇮🇩 Indonésio (obrigado @rama-adi)
Adiciona 🇮🇹 Italiano (obrigado @punga78, @Archetipo95)
Adiciona 🇵🇱 Polonês (obrigado @xxSkyy)
Adiciona 🇰🇷 Coreano (obrigado @bwp618)
Adiciona 🇻🇳 Vietnamita (obrigado @oanhnn)
Melhorado 🇫🇷 Francês (obrigado @pop123123123)

🐛 Correções de bugs

Corrige um bug que poderia causar erros de validação para piscar por 20ms antes de resolver ao usar o preenchimento automático do navegador (#99).
Corrige um bug que fazia com que as props de classe (como input-class) dentro dos esquemas não respeitassem adequadamente o comando $reset porque era tratado como uma variável (#61).
Corrige um bug que não permitia que as classes fossem modificadas via props de classe de chave de seção quando a chave de seção tem várias palavras, como file-list-class ou file-item-class (#120).

O tema genesis agora deve ser importado de import '@formkit/themes/genesis.

🎉 Novos recursos

Adiciona envio programático de formulário:
- Pode ser enviado por nó node.submit() (incluindo qualquer nó filho do formulário).
- Pode ser enviado via função this.$formkit.submit('form-id') (para api de composição é submitForm('form-id')).
Melhorou setErrors DX:
- Agora pode ser chamado diretamente em um nó node.setErrors(nodeErrors, childErrors).
- setErrors agora suporta string pura node.setErrors('My error')
O manipulador de envio agora recebe o nó do formulário para fácil configuração de erro.
O nó central do componente <FormKit> agora está disponível via ref de template.
Adiciona o atributo data-invalid à seção outer quando uma entrada tem mensagens de validação falhando que estão atualmente sendo exibidas (exemplo no playground).
Adiciona o atributo data-errors à seção outer quando a entrada tem erros explicitamente colocados (via prop ou setErrors).
Adiciona o atributo data-complete à seção outer quando uma entrada (exemplo no playground):
- Ou:
  - A entrada tem regras de validação.
  - As regras de validação estão todas passando.
  - Não há erros na entrada.
- Ou:
  - A entrada não tem regras de validação.
  - A entrada não tem erros.
  - A entrada está suja e tem um valor.
Novas propriedades context.state:
- state.rules - verdadeiro quando a entrada tem regras de validação.
- state.errors - verdadeiro quando a entrada tem erros explícitos colocados nela.
- state.complete - mesma lógica que data-complete.
- state.validationVisible - verdadeiro quando a condição validation-visibility é atendida (está mostrando erros de validação, se houver).
Refatora o módulo Nuxt 3 para um tempo de construção mais rápido e melhor resolução de arquivos.
Adiciona suporte ao idioma persa 🇮🇷 (obrigado @shahabbasian)
Adiciona suporte ao idioma português 🇧🇷 (obrigado @r-martins)
Adiciona suporte ao idioma turco 🇹🇷 (obrigado @ragokan)
Adiciona suporte ao idioma finlandês 🇫🇮 (obrigado @mihqusta)
Adiciona suporte ao idioma espanhol 🇦🇷 (obrigado @inibg)

📙 Documentação

Adicionada documentação node.setErrors.
Adicionada documentação de envio programático de formulário.
Melhorada a documentação context.state com novas propriedades e melhores descrições.

🐛 Correções de bugs

Corrige um problema que causava erros de renderização do lado do servidor e geração do lado do servidor no Nuxt e vite-ssg/vitesse durante o processo de construção (#81).
Corrige um bug que impedia que os inputs file acionassem eventos onChange personalizados (#90).
Corrige um bug que impedia que os formulários exibissem seu id no DOM.
Corrige um problema de estilo no tema Genesis que fazia com que os itens da lista de seleção ficassem cinza antes que uma opção fosse selecionada ao usar um placeholder (#59)
Corrige um bug que fazia com que a prop :value nos formulários fosse alterada na entrada (#72).
Corrige a inconsistência entre os eventos prop:{propName} emitidos por props padrão e props de entrada personalizadas definidas (#73)

1.0.0-beta.3

22 de fevereiro de 2022

beta.3 seria um lançamento tão bom que decidimos pular e ir direto para beta.4 👀! Brincadeira. Tivemos problemas com o npm e tivemos que aumentar 🤦.

Novo pacote @formkit/nuxt é um módulo Nuxt 3 completo que torna o uso do FormKit com Nuxt 3 o mais simples possível!
defaultConfig agora inclui um novo pacote @formkit/dev que decodifica os códigos de erro do FormKit em mensagens úteis do console (nenhuma ação necessária) (#56).
FormKit agora é oficialmente open-source sob a licença MIT!
A chave preserve agora se aplica a todos os descendentes (#53).
Exporta todas as funções de formatação de texto no pacote @formkit/i18n (#54).
Adiciona suporte ao idioma holandês 🇳🇱 (obrigado @arjendejong12).
Adiciona suporte ao idioma croata 🇭🇷 (obrigado @antemarkic).
Melhora o suporte ao idioma alemão 🇩🇪 (obrigado @tosling).

📙 Documentação

Nova documentação de instalação. Você não precisa mais de um token de autenticação para instalar a partir da organização @formkit!
Documentação de instalação do Nuxt
Documentação de internacionalização melhorada para sobreposições seletivas de mensagens.

🐛 Correções de bugs

Corrige um bug que fazia com que as caixas de seleção multi-seleção não exibissem o valor atual quando definido a partir do nó pai e ao usar a prop options que é armazenada em uma variável externa (#55)
Corrigido um bug que fazia com que o placeholder em entradas de seleção fosse removido se algo causasse a re-renderização da entrada (#52).
Corrigida a cor do placeholder de seleção (#51)

Formulários são automaticamente desabilitados quando um manipulador de envio assíncrono está pendente (#44).
Adicionada uma nova propriedade submit-behavior para optar por não usar os novos formulários automaticamente desabilitados.
Exporta o plugin de vinculação Vue para FormKit como bindings no pacote @formkit/vue.
O tipo button e submit são automaticamente ignorados.
Introduz uma nova chave messages para o defaultConfig para permitir substituições parciais para locais. Isso permite substituições de mensagens seletivas para locais já registrados (#42).
O compilador de esquema agora suporta "indefinido" como uma saída válida (em outras palavras $: undefined produziria o valor undefined em vez da string "indefinido").
Adiciona localização em Hebraico 🇮🇱 (obrigado @Hepi420)
Adiciona localização em Chinês 🇨🇳 (obrigado @myleslee)

🐛 Correções de bugs

Corrigido um problema que fazia com que as caixas de seleção com options não hidratassem corretamente quando repopuladas a partir de um group, list, ou form (#45).
Corrigido um problema que fazia com que as caixas de seleção com options não exibissem corretamente quando faltava a propriedade label (#41).
Melhoria significativa no suporte ao TypeScript para props “sintéticas” (#43).

Altera a propriedade validation-behavior no componente <FormKit> para validation-visibility.
Altera a propriedade schema no componente <FormKit> para sections-schema.

🎉 Novos recursos

Adiciona o tipo de entrada file nativo com suporte para alguns recursos adicionais:
- Repopulação apenas de exibição.
- Arrastar e soltar.
- Limpeza de entrada.
Adiciona a função auxiliar createInput para facilitar a escrita de entradas personalizadas.
Nova propriedade incomplete-message permite personalização inline (ou desativação) da mensagem exibida por um formulário quando ele tenta enviar e todas as suas entradas não são válidas.
Atualiza o defaultConfig para aceitar entradas personalizadas.
Adiciona uma chave de seção de prefixo que permite a injeção de conteúdo imediatamente antes de um elemento de entrada.
Adiciona uma chave de seção de sufixo que permite a injeção de conteúdo imediatamente após um elemento de entrada.
Localização em Russo 🇷🇺 (obrigado @andreimakushkin!)
Refatora o tema Genesis para usar uma estrutura de variável CSS muito mais robusta.
Adiciona um novo recurso aos esquemas que permite aos usuários prefixar propriedades props e attrs com __raw__ para passar o valor bruto em vez de seu resultado analisado (#36).

📙 Documentação

Novo guia criar uma entrada personalizada.
Nova página avançada de documentação de entrada personalizada.
"Chaves de composição" agora serão referidas como "Chaves de seção".
Adiciona documentação sobre plugin.library — o mecanismo que os plugins usam para definir novos tipos de entrada.
Editor de código interativo para exemplos agora suporta vários arquivos.
No FormKit Playground, você pode adicionar novos arquivos e importá-los uns aos outros. O FormKit Playground suporta arquivos .vue, .js, formkit.config.js e tailwind.config.js.
O FormKit Playground agora está localizado em https://formkit.com/playground e os antigos playgrounds https://formkit.com/playground/vue estão obsoletos.

🐛 Correções de bugs

Corrige um bug que impedia a exibição da mensagem incompleta nos formulários (#29).
Corrige as definições de tipo TypeScript para os eventos @submit e @submit-raw.
Corrige a ordem dos números nas mensagens de validação length e between para sempre colocar o número menor primeiro (#35).
Corrige um problema (#32) com listas de seleção onde a prop :options não aceitava valores numéricos.

Nova regra de validação "dicas" — modificadores que alteram o comportamento de uma regra de validação. As dicas suportadas permitem que você:
- Execute uma regra quando o campo estiver vazio.
- Force uma regra a ser executada mesmo quando as regras anteriores estão falhando.
- Debounce uma regra de validação.
- Torne uma regra de validação opcional.
Quando uma entrada está dentro de um formulário e desmontada (como um v-if), agora remove seu valor dos dados do formulário e desregistra seu nó central.
Nova prop preserve permite que as entradas não removam seus dados de grupos, listas e formulários quando são removidos.

🐛 Correções de bugs

Corrigido um problema que fazia com que as opções de rádio e caixa de seleção de valor numérico fossem renderizadas incorretamente.
Corrigido um bug que fazia com que o placeholder não fosse renderizado quando a prop veio depois da prop options.
Corrigido um bug que fazia com que o valor do atraso não fosse respeitado quando definido usando a configuração do ancestral.

O tratamento de erros de formulário chegou. Agora você pode definir erros de entrada em um formulário inteiro, grupo ou lista com a prop input-errors ou os métodos $formkit.setErrors(). Leia mais sobre isso na documentação do formulário.
Novo $formkit.setLocale() muda reativamente o idioma de todas as mensagens exibidas.
Adiciona localidades 🇫🇷 Francês e 🇩🇪 Alemão (obrigado @HoreKk e @digitalkaoz)
Adiciona novo objeto proxy rootConfig que é usado para armazenar a configuração base global e os valores das propriedades (refatoração significativa do sistema de configuração).
Adicionado rastreamento de dependência ledger para instâncias de FormKitObservedNode.
O botão de envio nos formulários agora usa o idioma local para o rótulo "Enviar" padrão.
Novo evento de nó child emitido quando um pai tem um filho adicionado a ele.
A regra length agora pode receber argumentos max/min em qualquer ordem length:15,5 ou length:5,15 avaliam o mesmo.
Adiciona uma nova função getNode para acessar diretamente um nó FormKit usando a API de composição.
Melhora a localização de importação do css @formkit/theme.

🐛 Correções de Bugs

Corrigido um bug que fazia com que os filhos de entradas list às vezes lançassem uma exceção ao exibir erros de validação.
Melhoradas várias das mensagens de erro de validação.
Corrigido um problema com entradas de seleção que impedia chamadas brutas de node.input() de acionar a reatividade no Vue.

Um novo atalho de esquema $formkit para usar entradas FormKit em um esquema (Issue #15).
Nova propriedade disabled em formulários, listas e entradas de grupo que desativa automaticamente todas as entradas filhas (Issue #16).
Nova propriedade submitAttrs em formulários permite que você passe atributos para o botão de envio do formulário.
Adicionada uma nova propriedade universal ignore que impede que os dados de uma entrada sejam usados em um formulário.

🐛 Correções de bugs

Corrigido um problema que impedia que os esquemas renderizassem expressões quando usados dentro da propriedade children de um componente FormKit. (Issue #21).
Adicionada uma verificação no caso de uma função rootClasses retornar incorretamente undefined (Issue #17).
Corrigido um bug que fazia com que o botão de envio de um formulário contaminasse o objeto de dados do formulário com uma propriedade submit_x (Issue #22).
Corrigido um bug que fazia com que os nós de esquema $cmp falhassem ao remontar se o objeto raiz do esquema fosse redefinido, causando uma reanálise completa (Issue #14).

Docs

Primeiros Passos

Essenciais

Inputs

Plugins

Guias

Referência da API

Ferramentas

Sobre

Patrocinadores

Primeiros Passos

Essenciais

Inputs

Plugins

Guias

Docs

Ferramentas

Sobre

Inscreva-se para receber as últimas notícias