From b135e040428748bd58609504e922e1b77dc71a84 Mon Sep 17 00:00:00 2001 From: chema Date: Mon, 21 Sep 2020 11:38:01 +0200 Subject: [PATCH 1/2] https://github.com/koumoul-dev/vuetify-jsonschema-form/issues/156 --- doc/examples/example-values.js | 19 +++++++++++++++++++ doc/examples/index.js | 2 ++ doc/examples/validation-basic.js | 2 +- lib/mixins/SimpleProperty.js | 15 +++++++++++++++ 4 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 doc/examples/example-values.js diff --git a/doc/examples/example-values.js b/doc/examples/example-values.js new file mode 100644 index 00000000..8553eca1 --- /dev/null +++ b/doc/examples/example-values.js @@ -0,0 +1,19 @@ +const id = 'example-values' + +const title = 'Example values' + +const description = `The \`example\` keyword from JSON schema is used to suggest values in a "string", "number", "integer" or "array" but is not required as the "enum" keyword.` + +const schema = { + type: 'object', + properties: { + stringProp: { type: 'string', title: `I'm a string with some examples`, default: `I'm a default value`, examples: [`I'm a suggested value`, `Hey!!! I'm another suggestion`] }, + numberProp: { type: 'number', title: `I'm a number with some examples`, default: 1, examples: [11, 22, 33, 44, 55] }, + stringArrayProp: { type: 'array', title: `I'm an array of strings with some examples`, items: { type: 'string' }, examples: [`I'm a suggested value`, `Hey!!! I'm another suggestion`] }, + numberArrayProp: { type: 'array', title: `I'm an array of numbers with some examples`, items: { type: 'number' }, examples: [1, 2, 3, 4, 5] } + } +} + +const model = {} + +export default { id, title, description, schema, model } diff --git a/doc/examples/index.js b/doc/examples/index.js index d7bda79a..4b7fced8 100644 --- a/doc/examples/index.js +++ b/doc/examples/index.js @@ -15,6 +15,7 @@ import sectionsTab from './sections-tabs' import editableArray from './editable-array' import prefilledArrays from './prefilled-arrays' import defaultValues from './default-values' +import exampleValues from './example-values' import classes from './classes' import vuetifyProps from './vuetify-props' import slots from './slots' @@ -46,6 +47,7 @@ const examples = [ editableArray, prefilledArrays, defaultValues, + exampleValues, classes, vuetifyProps, slots, diff --git a/doc/examples/validation-basic.js b/doc/examples/validation-basic.js index a91bcf84..bcff1d94 100644 --- a/doc/examples/validation-basic.js +++ b/doc/examples/validation-basic.js @@ -15,7 +15,7 @@ const schema = { required: ['requiredStringProp'], properties: { requiredStringProp: { type: 'string', title: `I'm a required string` }, - patternStringProp: { type: 'string', title: `I'm a string with a pattern`, pattern: '^[a-zA-Z]*$', 'x-options': { messages: { pattern: 'Only letters are accepted' } } }, + patternStringProp: { type: 'string', title: `I'm a string with a pattern`, pattern: '^[a-zA-Z]*$', examples: ['valid', 'not-valid'], 'x-options': { messages: { pattern: 'Only letters are accepted' } } }, ruleStringProp: { type: 'number', title: `I'm a string with a custom rule`, 'x-rules': ['even'] }, limitedInteger: { type: 'integer', title: `I'm a integer with min/max value`, minimum: 0, maximum: 100 }, limitedString: { type: 'string', title: `I'm a string with min/max length`, minLength: 10, maxLength: 100 }, diff --git a/lib/mixins/SimpleProperty.js b/lib/mixins/SimpleProperty.js index 3fdb2a1d..3e58b436 100644 --- a/lib/mixins/SimpleProperty.js +++ b/lib/mixins/SimpleProperty.js @@ -47,6 +47,14 @@ export default { on.input = value => this.input(this.fullSchema.type === 'integer' ? parseInt(value, 10) : parseFloat(value)) } + if (this.fullSchema.examples && ['string', 'number', 'integer'].includes(this.fullSchema.type)) { + tag = 'v-combobox' + props.validateOnBlur = true + props.items = this.fullSchema.examples + props.chips = false + props.multiple = false + } + if (this.fullSchema.type === 'boolean') { tag = 'v-checkbox' tooltipSlot = 'append' @@ -65,6 +73,11 @@ export default { props.appendIcon = '' props.type = 'string' props.validateOnBlur = true + + if (this.fullSchema.examples) { + props.items = this.fullSchema.examples + } + const itemRules = getRules(schemaUtils.prepareFullSchema(this.fullSchema.items), this.fullOptions) props.rules = props.rules.concat([(values) => { const valuesMessages = values.map(value => { @@ -85,6 +98,8 @@ export default { .filter(val => !isNaN(val)) this.input(vals) } + } else if (this.fullSchema.examples) { + props.items = this.fullSchema.examples } scopedSlots.selection = slotProps => { From e4ae01dbc610b5b2c8ca0f7a793e10509732cd12 Mon Sep 17 00:00:00 2001 From: chema Date: Mon, 21 Sep 2020 11:42:22 +0200 Subject: [PATCH 2/2] Added validation of examples length --- lib/mixins/SimpleProperty.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/mixins/SimpleProperty.js b/lib/mixins/SimpleProperty.js index 3e58b436..43e10e86 100644 --- a/lib/mixins/SimpleProperty.js +++ b/lib/mixins/SimpleProperty.js @@ -47,7 +47,7 @@ export default { on.input = value => this.input(this.fullSchema.type === 'integer' ? parseInt(value, 10) : parseFloat(value)) } - if (this.fullSchema.examples && ['string', 'number', 'integer'].includes(this.fullSchema.type)) { + if (this.fullSchema.examples && this.fullSchema.examples.length > 0 && ['string', 'number', 'integer'].includes(this.fullSchema.type)) { tag = 'v-combobox' props.validateOnBlur = true props.items = this.fullSchema.examples @@ -74,7 +74,7 @@ export default { props.type = 'string' props.validateOnBlur = true - if (this.fullSchema.examples) { + if (this.fullSchema.examples && this.fullSchema.examples.length > 0) { props.items = this.fullSchema.examples }