vue3-schema-forms v0.0.36

Vue3 Json Schema Form powered by Vuetify 🚀

Create dynamic and user-friendly forms effortlessly with the Vue3 and Vuetify. This library is designed to simplify form creation by leveraging the JSON Schema format.

Inspired by https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/

Documentation

The documentation and some of the testing was based on the Storybook application 👉 live

Check the changelog here 👉 @latest

Sample app with schema forms configuration 👉 here

Requirements

To relieve the library of dependencies as peerDependencies library takes:

• js@3.4.3
• jstify@3.4.9
• axios@1.6.2 - in order to maintain the configuration from the host (e.g. token interceptor)
• dayjs@1.11.10 - management and formatting of dates including time zones,
• pinia@2.1.7 - managing the status of each form, reference values
• js-i18n@9.6.4 - handling translations in the library
• jsdraggable@4.1.0 - support for drag&drop interaction

npm i vue@3.4.14 vuetify@3.5.1 axios@1.6.5 dayjs@1.11.10 pinia@2.1.7 vue-i18n@9 vuedraggable@next

Installation

You can install vue3-schema-forms using npm:

npm install vue3-schema-forms

Usage

import { createVueSchemaForms } from 'vue3-schema-forms';

const schemaForms = createVueSchemaForms({});

createApp(App)
  .use(schemaForms)
  .mount('#app');

After importing the plugin, we can invoke the form-generating component and pass the appropriate props.

<template>
  <vue-schema-forms
    v-model='model'
    :schema='schema'
    :options='formOptions'
    :default-form-actions='true'
    :validation-behaviour="'messages'"
  >
  </vue-schema-forms>
</template>

<script>
  const formOptions = ref({});
  const model = ref({});
  const schema = ref({
    type: 'object',
    properties: {
      field1: {
        label: 'Field 1',
        layout: {
          component: 'text-field',
        },
      },
    },
  });
</script>

Props description

Options

In options, there are priorities in setting props for form fields:

1. Defaults (!)
2. FieldProps (!!)
3. InputType Props (!!!)
4. Specific props defined in layout (!!!!)

Example: If when defining a layout you specify props as they are in the default they will be overwritten

The following table shows the default values for each field

Component slots

Integrated fields

Plugin options

// example of adding options
const customs = {
  'user-input': UserInput,
};

const vueSchemaForms = createVueSchemaForms({
  customComponents: customs,
  formUpdateLogger: true
});

Tests

1. cd to the project directory
2. Install development dependencies: npm install
3. Run the tests: npm test
4. Run the storybook: npm run storybook
5. Run storybook tests: npm run test-storybook

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

ToDo List

• Ability to add validation functions in schema
• Ability to mark "not-saveable" field in schema/model
• Email input
• Markdown input
• File input
• Table input
• Rsql filter on dictionary
• Signal for form is ready (for autosave but after initial model changes)
• Create datetime field

• Use resolveDepsComposable for deps on fields
• Create editable sections
• Change to use Engine props (decomposition)