roma219/vue-jsonschema-form

JSON Schema based Form Generator built with Vue.js

Hi there 👋

vue-jsonschema-form's Issues

vuelidate not found error

Describe the bug

It seems there is an issue with running vue-jsonschem-form, caused by a dependency problem with vuelidate.

To Reproduce

Assuming the following is installed:

1. npm install @roma219/vue-jsonschema-form
2. npm install @types/vuelidate

Then the following component in a vue 2.7 app:
Simple Component to Test:

<template>
  <JsonSchema :schema="schema" v-model="model"/>
</template>

<script>
  import JsonSchema from '@roma219/vue-jsonschema-form';

  let SCHEMA2 = {
    type: 'array',
    items: {
        type: 'object',
        properties: {
            a: { type: 'string' },
            b: { type: 'number' }
        }
    }
};

  export default {
      components: {
          JsonSchema
      },
    data: () => ({
      schema: SCHEMA2,
      model: {}
    })
  };
</script>

and running it with:
To run:
npm run serve

leads to:
What Happens?

 INFO  Starting development server...


 ERROR  Failed to compile with 1 error                                         15:14:28

 error  in ./node_modules/@roma219/vue-jsonschema-form/dist/entry.js

Module not found: Error: Can't resolve 'vuelidate' in 'src/node_modules/@roma219/vue-jsonschema-form/dist'

ERROR in ./node_modules/@roma219/vue-jsonschema-form/dist/entry.js 1:19-63
Module not found: Error: Can't resolve 'vuelidate' in ...

Expected behavior

Web App should work.

Make styling based on Pure optional

Is your feature request related to a problem? Please describe.
I'm trying to use this package together with Quasar native inputs (https://quasar.dev).

I'm overriding the components props to use Quasar widgets but the Pure-based default styling make the output quite messy.

Describe the solution you'd like

• Remove the Pure-based styling by the default bundle using HTML5-native inputs only.
• Add docs to explain how to style them with Pure (shouldn't be enough to include it in the <style></style> block of the parent component?)

Thank you for this nice package!

Simple example leads to `TypeError`

Describe the bug

[Vue warn]: Error in render: "TypeError: can't convert undefined to object"

get entry.js:20
    VueJS 3
    render entry.js:20
    VueJS 36

To Reproduce

Simple Component to Test:

<template>
  <JsonSchema :schema="schema" v-model="model"/>
</template>

<script>
  import JsonSchema from '@roma219/vue-jsonschema-form';

  let SCHEMA2 = {
    type: 'array',
    items: {
        type: 'object',
        properties: {
            a: { type: 'string' },
            b: { type: 'number' }
        }
    }
};

  export default {
      components: {
          JsonSchema
      },
    data: () => ({
      schema: SCHEMA2,
      model: {}
    })
  };
</script>

and running it with:
To run:
npm run serve

leads to:
What Happens?

1. TypeError
2. Nothing is displayed

Expected behavior;

Web App should work.

Why can you not use the data object to build the form?

When I do:

data() { return { schema: {} } }

It just does not bring anything back, it is almost like it is relying on the global const

Custom Wrapper Config

Can you please tell me where to use wrapper config code for a custom wrapper?

{ componentName: 'CustomWrapper', props: (propName, schema, uiSchema) => ({ title: schema.title || propName }) }

Array of Objects - When adding a new object - TypeError: Cannot add property _Ctor, object is not extensible

Describe the bug
When i try to add a Array of Objects like the example in the docs

array: {
type: "array",
title: "Users",
items: {
type: "object",
properties: {
name: {
type: "string",
title: "Username",
},
},
},
},

If i click the plus icon I get this error and none of the properties display

vue.runtime.esm.js:5143 Uncaught (in promise) TypeError: Cannot add property _Ctor, object is not extensible
at Function.Vue.extend (vue.runtime.esm.js:5143)
at ensureCtor (vue.runtime.esm.js:3598)
at vue.runtime.esm.js:3665
at vue.runtime.esm.js:336