allOf at the root of the schema is render with an accordion.
A render with tabs would be nice. It could be configurated with an option to the lib.

Hello,

I need to add an action next to an element.
Example: My action

How to proceed ?

Thanks a lot.

It is so common scenario, you have item list, all of them are complex objects (each item has Name and Value property)
End-user sees Name Property on DropDown.
But we save Value property at the back-end (json result)

Is there any way to implement it, I tried so many combinations with object,array, enum. But all of them failed.
Thanks.

Currently in demo page there is no reference to what options are used. Probably they should be displayed below data.

Thanks

It is time to take a good look at the state of this library and take some actions for a clean and stable v1.

Using render functions

We use vue templates for now, the main Property.vue template is verbose with a lot of redundancy.

• rewrite templates with render functions. It will allow us to reuse much more code, better for maintenance and future changes. Work already in progress in the render-functions branch.

model replaced with v-model

• We should have a look at the v-model convention in vuejs and conform to it.

improve i18n support

• [] evaluate possibility of using vue-i18n without making the lib too much heavier

Better slots

• Rename prepend and append into before and after.
• Expose all slots of the underlying vuetify components (for example append, prepend, append-outer, etc. for v-text-field).
• Improve slot names. Using similar convention as now, for example "myProperty-append" but remove the numbers from the key, for example "myArray.0.myItemProperty" devient "myArray.myItemProperty".
• Support filling the slots directly from annotations in the schema for simple text/markdown content ("x-slots": {"append-outer": "[a link](a url)"})
• Document slots in the Readme.

Better JSON schema integration

For now the object produced by the library is not strictly validated by the JSON schema that is used to create the form.

• Integrate ajv and display warnings when the form is considered valid but the JSON schema really is not. These cases should not be allowed anymore.
• remove null values from objects. This is the main cause of invalid objects produced by the lib from my experience.

Better rendering of arrays of objects

The current rendering (a list of forms for each object in the array) is not very intuitive.

• Implement an alternative with modals or menus.
• If the alternative looks much better, make it the new default.

Shorter name

• publish under @koumoul/v-jsf
• use component name "v-jsf" in demo and everywhere relevant

Hello

Using the date or date-time fields would result in two "input boxes" being rendered. Not sure what the purpose of the second field, is there a way to hide or get rid of the other one?

Thanks

Your demo site is not online.

The tool is good enough, but it lacks some features like, text masking, custom validation rules, file handling(apparently), and custom fields. I'm not a JS expert, but I can imagine that this could be achieved by two methods: first, creating new properties every a time a functionality is needed; second, devise a mean to developers inject their own components to cover for some functionality that is not ready out of the box. I'm more tempted to say that the second method is more viable, due to the usage of slots, because it can add flexibility to the component and give more time to add new functionalities that follow the identity of the package.

Hello! how can I perform conditional required fields without using dependencies?

thanks!

Actually if you modify fullSchema within a slot, nothing happens. That's because fullSchema is a computed property, when it could be returned in data.

Thanks

Vuetify 2.0 now uses mdi icon set. We need an option to configure this library to use another icon set. Date pickers use the event icon code which is the one of material icons, for mdi it is calendar

Is there a way to add a text as a property in the form? Just like you can get when setting form description but anywhere in the form and as many times as I wish.

How can I use your cool library in other language?

Thanks.

Hi, this project is looking quite interesting!

Playing around with it, I noticed that the date-time format for strings is not really working right now, because the v-date-picker only manipulates the date portion of the value.

I prepared a fix that uses the darrenfang/vuetify-datetime-picker. It is probably still lacking some features, but may be a start for date-time support:

x1B@1408dee

Feel free to pick these changes, or let me know if I should open a PR. Best, Michael

It would be usefull to be able to pick a value within a range. Either integer or decimal. Options for such field would be :

• min value
• max value
• increment step amount

Problem:

Whenever I set model properties from outside, the root model gets updated and all immediate Property.vue. But, everything under allOf and anyOf doesn't get updated. Which causes the form to revert to the original value.

Solution:

I'm currently placing this on modelWrapper watcher, not sure if there's a better place for it.

if (newVal.hasOwnProperty('root')) {
  // re-hydrate currentOneOf sub-models
  if (this.subModels.hasOwnProperty('currentOneOf')) {
    Object.keys(this.subModels.currentOneOf).forEach(subModel => {
      this.$set(this.subModels.currentOneOf, subModel, newVal.root[subModel])
    })
  }
}

// re-hydrate allOf sub-models
if (newVal.hasOwnProperty('currentOneOf') && this.fullSchema.hasOwnProperty('allOf')) {
  this.fullSchema.allOf.forEach((allOf, i) => {
    Object.keys(this.subModels[`allOf-${i}`]).forEach(prop => {
      if (!_.isEqual(this.subModels[`allOf-${i}`][prop], newVal.currentOneOf[prop])) {
        this.$set(this.subModels[`allOf-${i}`], prop, newVal.currentOneOf[prop])
      }
    })
  })
}

Might be helpful to include this as well:
(I'm using lodash isEqual to compare properties, this allows for object comparison)

applySubModels () {
  // console.log('Apply sub models')
  Object.keys(this.subModels).forEach(subModel => {
    Object.keys(this.subModels[subModel]).forEach(key => {
      if (!_.isEqual(this.modelWrapper[this.modelKey][key], this.subModels[subModel][key])) {
        // console.log('Sub model updated?', this.modelWrapper[this.modelKey][key], this.subModels[subModel][key])
        this.$set(this.modelWrapper[this.modelKey], key, this.subModels[subModel][key])
      }
    })
  })
},

How can I use Your component via JS file?
Like:

for example.

I have to provide an empty {} options object to avoid an error.

following error arises if $vuetify.icons.iconfont is not md or mdi
Cannot convert undefined or null to object

this seems to be a problem, in lib/index.vue:43

specifically here:

const iconfont = vuetifyVersion === 1 ? 'md' : ((this.$vuetify.icons && this.$vuetify.icons.iconfont) || 'mdi')
const icons = {
        md: {
          // all the icons
        },
        mdi: {
          // all the icons
        }
      }[iconfont]

so this code fails if the iconfont is not md or mdi.
we have to add:

1. a iconset for some other iconfont (e.g. fontawesome)
2. fallback to md/mdi if there is an unknown iconfont provided

will make a PR with a basic solution for that.

cheers,
c.

there is a radio button style in vuetify jsonschema ?

Sometimes, boolean value are mapped to integers (0 = false, 1 = true). It would be nice if the input for integer type could be set to a checkbox, either with a format or x-display attribute

Demos are not enough. All supported functionalities must be properly documented, both for users and for maintenance.

This issue is not very useful.. It is mostly a commitment to do it someday :)

Hello,

I have an issue with tabulation, Koumoul overwrite my global object when I change data in the last tab.
tab1 and tab2 share the same properties object (customFields).

customFields object is ok

customFields object is overwritten by next data from the last tab

Have you an idea ?

Thanks

{
"$id": "https://example.com/person.schema.json",
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"x-options": {
"allOfTabs": true
},
"allOf": [
{
"$ref": "#/definitions/tab0"
},
{
"$ref": "#/definitions/tab1"
},
{
"$ref": "#/definitions/tab2"
}
],
"definitions": {
"tab0": {
"title": "Général",
"properties": {
"customId": {
"type": "string",
"title": "Code Client",
"x-class": "xs4",
"readOnly": true
},
"name": {
"type": "string",
"title": "Nom",
"x-class": "xs4"
},
"email": {
"type": "string",
"title": "E-mail",
"x-class": "xs4",
"format": "email"
},
"phone": {
"type": "string",
"title": "Téléphone",
"x-class": "xs4",
"format": "tel"
},
"fax": {
"type": "string",
"title": "Fax",
"x-class": "xs4",
"format": "tel"
}
}
},
"tab1": {
"title": "Adresse",
"properties": {
"customFields": {
"type": "object",
"properties": {
"Adresse1": {
"type": "string",
"title": "Adresse 1",
"x-class": "xs4",
"format": "text"
},
"Adresse2": {
"type": "string",
"title": "Adresse 2",
"x-class": "xs4",
"format": "text"
},
"CodePostal": {
"type": "string",
"title": "Code Postal",
"x-class": "xs4",
"format": "text"
},
"Ville": {
"type": "string",
"title": "Ville",
"x-class": "xs4",
"format": "text"
},
"Dpt": {
"type": "string",
"title": "Département",
"x-class": "xs4",
"format": "text"
}
}
}
}
},
"tab2": {
"title": "Détails",
"properties": {
"customFields": {
"type": "object",
"properties": {
"Cible": {
"type": "array",
"title": "Cible",
"x-class": "xs4",
"items": {
"type": "string",
"oneOf": [
{
"const": "ABA",
"title": "ABA"
},
{
"const": "ADE",
"title": "ADE"
},
{
"const": "BVI",
"title": "BVI"
},
{
"const": "CJE",
"title": "CJE"
},
{
"const": "EMA",
"title": "EMA"
}
]
}
},
"TelSiege": {
"type": "string",
"title": "Téléphone Siège",
"x-class": "xs4",
"format": "tel"
},
"Effectif": {
"type": "integer",
"title": "Effectif",
"x-class": "xs4",
"format": "text"
},
"Ca": {
"type": "integer",
"title": "Chiffre d'Affaire",
"x-class": "xs4",
"format": "text"
}
}
}
}
}
}
}

Hi,

I have test the "Array" exemple from the demo page
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/

When i test the first "fruits" field, a click on the (x) of each items do not remove them.
Adding items works fine.

Hello.
Nice plugin. Can you add options with groups like this?
https://www.screencast.com/t/Uap1PHeujT79

Hy!

I want to assign one form value to more output values. For example for the output of:

{
  "this": {"createdAt": ""},
  "that": {"createdAt": ""},
}

I want only one "createdAt" input on the form, but want to assign the same value to both sub element.
As I googled const with $data had this thing in the past.

Use either a format or x-display attribute to render a string field as a select of icon in a collection passed in the settings (material-icons by default, but could be mdi).

I can't find a way to put 2 inputs on the same row. Is this supported?

hi is there a way to pass in prepend-icon to input field ?

'oneOf' field const = 0 doesn't work when number type property.
like this:
"P1": {
"type": "number",
"title": "P1-t",
"oneOf": [
{ "const": 0, "title": "T0" },
{ "const": 1, "title": "T1" }
]
}
when I select 'T0', return is error val "T0"(string), but 'T1', return is correct val 1.

Using the regular v-text-field, it is not really possible to enter long text including newlines.
Maybe the form could offer a v-textarea instead if the schema specifies an explicit maxLength of, say, more than 160 characters, indicating longer text content.

Hello, is there a way to hide fields on form from json schema using your plugin?

btw, this is awesome! You saved us a lot of time!

Thank you!

Format password doesn't work. This should generated password field, but nothing is showed.

            'password': {
              type: 'string',
              label: 'Password',
              model: 'password',
              disabled: false,
              min: 6,
              required: true,
              hint: 'Minimum 6 characters',
              passwordVisible: false
            },

Whole scheme is here:

  schema: {
          'type': 'object',
          'required': [
            'username',
            'email',
            'password',
            'roles'
          ],
          'properties': {
            'username': {
              'type': 'string'
            },
            'email': {
              'type': 'string',
              'format': 'email'
            },
            'password': {
              type: 'string',
              label: 'Password',
              model: 'password',
              disabled: false,
              min: 6,
              required: true,
              hint: 'Minimum 6 characters',
              passwordVisible: false
            },
            'roles': {
              'type': 'array',
              'items': {
                'type': 'string'
              },
              'x-fromUrl': this.$config.serverAddr + '/roles',
              'x-itemTitle': 'name',
              'x-itemKey': 'id'
            }
          }
        },

Hi! Thank you so much for this repository, it is a very good start towards composable forms and CMS systems!

I was wondering what kind of options I would have if I wanted to implement file input in the JSON schema format and what changes I'd have to make in order to create a new transformer for file input field. Moreover, I am wondering how to deal with async data and how to populate the model with the results of file uploading / cropping / etc. Any details on that would be very helpful.

Thank you!

Prepend and append doesn't work on OneOf and AllOf properties, they work fine on normal properties tho. v-slot:property also doesn't replace referenced properties.

Upgrade to use Vuetify 2.x

I have begun the work of switching to vue-cli and using vuetify 2.x components. It is mostly working, but there is some more debugging to do. I can make a pull request when it is ready for review if that would be appreciated.

How would you reset form fields value to null? is there an easy way to do it?

Description field support rich formatting (markdown) and we can put links in. But we cannot interact with it because it's in a tooltip. A solution could be to make the tooltip persistent on click.

applySubModels() {
  // console.log('Apply sub models')
  Object.keys(this.subModels).forEach(subModel => {
    Object.keys(this.subModels[subModel]).forEach(key => {
      if (this.modelWrapper[this.modelKey][key] !== this.subModels[subModel][key]) {
        // console.log(`Apply submodel ${this.modelKey}.${key}`, JSON.stringify(this.subModels[subModel][key]))
        this.$set(this.modelWrapper[this.modelKey], key, this.subModels[subModel][key])
      }
    })
  })
},

The comparison should consider if models are objects, (maybe use lodash isEqual).

how to add outlined on vuetify?

Where I can add error messages from ajax response?

Actually I have a situiation where the default slot of a form should be displayed depending on variables outside the schema (and should not be placed in schema either), but the prepend slot should always remain visible.

I cannot use x-class or x-display because they affect the v-flex surrounding prepend, default and append slots.

I thought in proposing changes in schema that only affects a certain slot, but It will get messy, and this case is extremly particular.

What I propose is to export Property in index.vue, so someone could just simply

import VJsonschemaForm, { Property } from '@koumoul/vuetify-jsonschema-form'

and use Property within a slot.

This would mean that any data needed for Property, should also be passed to the slot.

Thanks

Right now, markdown shows up in the schema's description tooltips. However, the root object's description is not rendered with markdown:

{
    "type": "object",
    "description": "I am *not* markdown",
    "properties": {
        "text": {"type": "number", "description": "I *am* markdown"}
    }
}

Would it be possible to make the root object description also render with markdown?

I believe options shouls optionally be specified within schema. It could be added in the root element with x-options or something. For example:

{
 "$id": "https://example.com/person.schema.json",
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "Combinations",
  "description": "Rendering a root allOf as tabs",
  "x-options": {
     "allOfTabs": true
  }
.....
}

Thanks for this library!

Hello,

First thanks for this lib.

How add a readonly input ?
I find accordion to group by fields, but have you the same thing with v-tabs ?
Can we put the fields in columns ?

Vincent

if you change both schema and data, fields are rendered properly but data is not shown (all fields show empty value).

Check this codepen: https://codepen.io/fcordova/pen/GRgZmRz

If you first click 'LOAD DATA 1' form is shown perfectly, but once you click 'form data 2' the form is rendered empty. If you reload the page and begin with data 2, it's also rendered fine but then data 1 can't be rendered anymore.

Hi, really like this library, just had a question -
is it possible to assign different elements (textfields, selects, etc) to different divs.
some elements would then go to class A and some class B, so that the structure of the form can be designed via divs.

<v-form>
<div class = 'A'>
</div>
<div class = 'B'>
</div>
</v-form>

Thanks

When I use it in development mode, it normally loads form elements. But when I build for the production version, some elements and even whole fields do not appear.

I had a similar problem with v-currency-field, which did not appear in the build. After an update, they put a treeshake module into nuxt and it loaded normally. I think that might be the case too (or a way to solve the problem)

I have a project where I perform some tests and in it, on the page "inspire.vue", in production mode, I can see the error

https://github.com/KammerR/nuxtVcurrencyBuild/tree/master/basicNuxt

A screenshot to see what happens in production mode

enums can only be used with strings, and object can only be selected in a list if it is filled from an ajax query.

We should be able to select an object among one in an enum