vue form json schema

Vue Forme JSON Schema

Un générateur de formulaire basé sur le schéma JSON, apportez vos composants!

Utilisez n'importe quel composant Vue ou élément HTML!

Il n'y a pas de composants préconçus pour que vous puissiez en puander votre forme avec. Au lieu de cela, vous pouvez utiliser n'importe quel composant ou élément qui émet un événement, personnalisé ou natif.

Notez que essentiellement tous les composants Vue qui utilise v-model émet un événement input (ou similaire). Voir le guide de Vue pour plus d'informations

Installation

Mise à niveau de V1? Consultez les notes de version V2 pour voir si et comment la migration vous affecte.

Installer à partir de NPM

npm install vue-form-json-schema

Importer dans votre application

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

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

Remarque Si vous n'utilisez pas WebPack / Rollup et que vous souhaitez utiliser la version ESM, vous devez importer VueFormjSonschema comme ceci:

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

Consultez les démos ou voyez un exemple minimal dans les instructions d'utilisation pour commencer.

Umd

Si vous utilisez la version UMD, vous pouvez trouver plus d'exemples dans le dossier examples du repo GitHub et de la démo UMD ci-dessous.

Si vous souhaitez utiliser vue-form-json-schema directement dans un navigateur, vous pouvez le faire en utilisant la version UMD. La version UMD se déroule automatiquement le composant vue-form-json-schema si Vue se trouve sur la fenêtre. L'ensemble du module est également disponible sur window.VueFormJsonSchema où les exportations nommées telles que par exemple vfjsFieldMixin sont accessibles.

Hébergé par unkpg

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

Vous pouvez substituer vue-form-json-schema@latest à une version fixe, comme [email protected]

Installé à partir de NPM

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

Démo

Notez que toutes les démos utilisent le style bootstrap, mais aucun style n'est inclus dans ce package et c'est à vous de savoir quel styles doivent être utilisés.

Démo minimal

Le moins de configuration pour rendre un élément input .

Démo UI imbriqué

Utilisation de classes bootstrap pour montrer comment la mise en page peut être différente pour les appareils avec différentes tailles d'écran. Dans cet exemple, deux champs d'entrée seront enveloppés à l'intérieur d'une div avec des classes col-12 col-sm-6 . Essayez de redimensionner la fenêtre de votre navigateur, voyez-le aussi en action.

Visibilité conditionnelle et démo d'animation

Parfois, un champ ne doit être affiché que si une condition est remplie. Utilise <transition> pour fournir une animation.

Vue Components Demo

Découvrez comment utiliser vos propres composants Vue ou tiers dans vue-form-json-schema .

Vue Async Chargement de la forme

Chargement du formulaire à partir d'un backend? Consultez cet exemple.

Formulaire d'enregistrement avec validation

Un exemple plus complet avec des messages de validation et d'erreur

Exemple de formulaire d'enregistrement avec des propriétés imbriquées

Le formulaire d'enregistrement ci-dessus où les clés du modèle de formulaire sont imbriquées sous une autre clé

Démos UMD

Tous les exemples ci-dessus sont reproduits à l'aide de la version UMD dans le dossier examples de ce référentiel.

Version en ligne de la première démo

Caractéristiques

• Prend en charge n'importe quel élément HTML ou composant VUE
• Petit ( 32K non compressé, 6.5K gziped)
• Schéma JSON standardisé pour l'annotation et la validation (par AJV)
• La disposition est indépendante de la structure des données

Documentation

Gitbook

Usage

Exemple de base avec un champ

Pour utiliser la version UMD, consultez le dossier examples où toutes les démos ci-dessus sont reproduites à l'aide de la version UMD

Voir la démo

 < 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 >

Dépendances

AJV

Pour la validation du formulaire en utilisant le schéma JSON et la validation interne

Loger

get , set et merge sont utilisés dans tout le package. La taille du faisceau est cependant très importante et est toujours prise en compte et nous supprimons donc fortement Lodash pour n'inclure que les nécessités absolues

Vue

Testé avec v2.5.9 mais fonctionnera probablement sur n'importe quelle version> = v2.4.0

FAIRE

• Des tests d'écriture
• Ajouter le support i18n
  • Ajouté dans 1.15.2 avec options.ajv.locale paramètre
• Écrivez cette lecture
• Utilisez AJV en interne pour valider:
  • vfs-global Prop ui-schema
  • vfs-component ui-schema
• Écrire des documents
• Publier avec GitBook