json-schema

Library for converting JsonSchema to Form in field validation

For Vue 3

? Installation

npm i v3-json-schema-form

? Usage

// index.js
import App from "./App.vue";
import { createApp } from "vue";
import SchemaForm from "v3-json-schema-form/dist/schema-form.es.js";
import "v3-json-schema-form/dist/style.css";

const app = createApp(App);
app.use(SchemaForm);
app.mount("#app");

<!-- component.vue -->
<template>
  <schema-form
    :schema="schema"
    :form-data="form"
    @on-change-form="onChangeForm"
    @onSubmit="onSubmit"
  />
</template>
<script>
  import json from "./json-schema";

  export default {
    name: "component",
    data() {
      return {
        schema: json,
        form: {},
      };
    },
    methods: {
      onChangeForm(newForm) {
        this.form = newForm;
      },
      onSubmit() {
        console.table(this.form);
      },
    },
  };
</script>

schema JSON parameters:

properties – An Object with entity fields of the form

  • type – field value type (“object” or “array” or “string” or “boolean” or “number”)

  • title – the output title of the field/node

  • description – the output description of the field/node

  • default – default value

  • properties – only for type=”object”. This is an object with the same fields as the parent: type, title, properties, items, etc.

  • items – only for type=”array”, This is an object describing an element of the form array, which has the same fields as the parent: type, title, properties, items, etc.

  • validation – validation field/node:

    • required – Boolean. Is it necessary to fill in field/node
    • minimum / maximum – limiting the value for numbers
    • minlength / maxlength – limitation of the allowed number of characters
    • hardValue – fixed mandatory value

  • ui:

    • inputType:
      • all built-in input types (view here)
      • “select”
      • “textarea”
    • draggable – Boolean. Only for inputType=”file” – Drag and Drop
    • autofocus – Boolean
    • placeholder – String
    • description – String. Description of the input under the heading
    • mask – input mask ({ mask: “+7(000)000-00-00”, lazy: true }) (use vue-imask library)

  • customErrors – Object, in which the keys are the type of error from the validation field, and the value of the field is the text of the custom error

  • enum – Array with a list of possible values (for types “radio”, “checkbox”, “select”)

    • ["val-1"] – a one-dimensional array with values. Then the value and the label of the element will be the same
    • [{ caption: "one", value: 1, disabled: true }] – multidimensional array, where caption, value are specified specifically

  • grid – Object – custom item position in the grid

    • column(optional parameter) – Number – occupied column (on all screen resolutions)
    • row(optional parameter) – Number – occupied row (on all screen resolutions)
    • media(optional parameter) – Object of type { "768": { column: 1, row: 2 } } (the key is the width of the screen above which it will be applied value (768+)). media permissions can be as many as you want. Has a higher priority than grid.column or grid.row

Notes

  1. What you need to get radio, checkbox, select:
  • for the radio list, it is necessary that the node has the field enum: [], and the type is string || number || boolean (if there is the default field, then, of the corresponding type "default": "foo")
  • for the list of checkboxes it is necessary that the node has the field enum: [], and the type is array (if there is the default field, then, of the corresponding type "default": ["foo", "bar"])
  • for the list of options select-a it is necessary that the node has the field enum: [] and the field "ui":{"inputType":"select"}. If its type is array, then it is a multiple-choice selector, if type with the value string||number|| boolean, then it is a regular select
  • if you forget to specify the enum field, it will be a completely different type of node
  1. Toggle
  • for a standard toggler, you only need to specify "type": "boolean" ("default": true/false)

GitHub

View Github