vue form json schema

Vue forma json esquema

Um gerador de formulários baseado em esquema JSON, traga seus componentes!

Use qualquer componente VUE ou elemento HTML!

Não há componentes pré -construídos para você confundir seu formulário junto com. Em vez disso, você pode usar qualquer componente ou elemento que emite um evento, personalizado ou nativo.

Observe que essencialmente todos os componentes do VUE que usam v-model emite um evento input (ou similar). Veja o guia de Vue para mais informações

Instalação

Atualizando de V1? Confira as notas de versão do V2 para ver se e como a migração o afeta.

Instale a partir do NPM

npm install vue-form-json-schema

Importar para o seu aplicativo

 import Vue from 'vue' ;
import VueFormJsonSchema from 'vue-form-json-schema' ;

Vue . component ( 'vue-form-json-schema' , VueFormJsonSchema ) ;

Nota Se você não estiver usando o WebPack / Rollp e deseja usar a versão ESM, é necessário importar VueFormJsonschema como este:

 import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js' ;

Confira as demos ou veja um exemplo mínimo nas instruções de uso para começar.

Umd

Se você estiver usando a versão UMD, poderá encontrar mais exemplos na pasta examples do Repo Github e da demonstração UMD abaixo.

Se você deseja usar vue-form-json-schema diretamente em um navegador, pode fazê-lo usando a versão UMD. A versão UMD automaticamente o componente vue-form-json-schema se o VUE for encontrado na janela. Todo o módulo também está disponível no window.VueFormJsonSchema , onde as exportações nomeadas, como por exemplo, vfjsFieldMixin podem ser acessadas.

Hospedado por UNKPG

<script src="https://unpkg.com/vue-form-json-schema@latest/dist/vue-form-json-schema.umd.js"></script>

Você pode substituir vue-form-json-schema@latest de uma versão fixa, como [email protected]

Instalado a partir do NPM

<script src="../node_modules/dist/vue-form-json-schema.umd.js"></script>

Demonstração

Observe que todas as demos usam estilo de bootstrap, mas nenhum estilo está incluído neste pacote e cabe a você quais estilos devem ser usados.

Demonstração mínima

A menor quantidade de configuração para renderizar um elemento input .

Demonstração de interface do usuário aninhada

Usando classes de bootstrap para mostrar como o layout pode ser diferente para dispositivos com diferentes tamanhos de tela. Neste exemplo, dois campos de entrada serão embrulhados dentro de uma div com classes col-12 col-sm-6 . Tente redimensionar a janela do navegador também vê -la em ação.

Demonstração de visibilidade e animação condicional

Às vezes, um campo só deve ser mostrado se uma condição for atendida. Usa <transition> para fornecer animação.

Demoção dos componentes do VUE

Veja como usar seus próprios componentes Vue ou terceiros no vue-form-json-schema .

Vue ASYNC Carregando de forma

Carregando o formulário de um back -end? Confira este exemplo.

Formulário de inscrição com validação

Um exemplo mais completo com mensagens de validação e erro

Exemplo de formulário de registro com propriedades aninhadas

O formulário de registro acima, onde as teclas do modelo de formulário são aninhadas sob outra chave

Demos umd

Todos os exemplos acima são replicados usando a versão UMD na pasta examples deste repositório.

Versão online da primeira demonstração

Características

• Suporta qualquer elemento HTML ou componente VUE
• Pequeno ( 32K não compactado, 6.5K gzipped)
• Esquema JSON padronizado para anotação e validação (por AJV)
• O layout é independente da estrutura de dados

Documentação

Gitbook

Uso

Exemplo básico com um campo

Para usar a versão UMD, confira a pasta examples onde todas as demos acima são replicadas usando a versão UMD

Veja demonstração

 < template >
    < vue-form-json-schema
      v-model = "model"
      : schema = "schema"
      : ui-schema = "uiSchema"
    >
  </ vue-form-json-schema >
</ template >

< script >
  export default {
    data ( ) {
      return {
        // An object which holds the form values
        model : { } ,
        // A valid JSON Schema object
        schema : {
          type : 'object' ,
          properties : {
            firstName : {
              type : 'string' ,
            } ,
          } ,
        } ,
        // Array of HTML elements or Vue components
        uiSchema : [ {
          component : 'input' ,
          model : 'firstName' ,
          // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
          fieldOptions : {
            class : [ 'form-control' ] ,
            on : [ 'input' ] ,
            attrs : {
              placeholder : 'Please enter your first name' ,
            } ,
          } ,
        } ] ,
      } ;
    }
  } ;
< / script >

Dependências

AJV

Para validação de formulário usando o esquema JSON e a validação interna

Lodash

get , set and merge são usados em todo o pacote. No entanto, o tamanho do pacote é muito importante e é sempre considerado e, por isso

Vue

Testado com v2.5.9, mas provavelmente funcionará em qualquer versão> = v2.4.0

PENDÊNCIA

• Escreva testes
• Adicione o suporte I18N
  • Adicionado em 1.15.2 com options.ajv.locale Configuração
• Escreva este readme
• Use AJV internamente para validar:
  • vfs-global Prop ui-schema
  • vfs-component Prop ui-schema
• Escreva documentos
• Publique com o Gitbook