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