Merge pull request #157 from jousepo/master

Added #draft-6 examples json-schema support in string, number, integer and array items

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 }

doc/examples/index.js

@@ -18,6 +18,7 @@ import editableArray from './editable-array'
 import editableArrayInline from './editable-array-inline'
 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'
@@ -57,6 +58,7 @@ const examples = [
   editableArrayInline,
   prefilledArrays,
   defaultValues,
+  exampleValues,
   classes,
   vuetifyProps,
   slots,

doc/examples/validation-basic.js

@@ -17,7 +17,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 (letters only)`, pattern: '^[a-zA-Z]*$', 'x-options': { messages: { pattern: 'Only letters are accepted' } } },
+    patternStringProp: { type: 'string', title: `I'm a string with a pattern (letters only)`, pattern: '^[a-zA-Z]*$', examples: ['valid', 'not-valid'], 'x-options': { messages: { pattern: 'Only letters are accepted' } } },
     ruleStringProp: { type: 'number', title: `I'm a number with a custom rule (even numbers only)`, 'x-rules': ['even'] },
     limitedInteger: { type: 'integer', title: `I'm a integer with min/max value and bad initial value`, minimum: 0, maximum: 100 },
     limitedString: { type: 'string', title: `I'm a string with min/max length and bad initial value`, minLength: 10, maxLength: 100 },

lib/mixins/SimpleProperty.js

@@ -54,6 +54,14 @@ export default {
         on.input = value => this.input(this.fullSchema.type === 'integer' ? parseInt(value, 10) : parseFloat(value))
       }
 
+      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
+        props.chips = false
+        props.multiple = false
+      }
+
       if (this.fullSchema.type === 'boolean') {
         tooltipSlot = 'append'
         if (this.display === 'switch') {
@@ -77,6 +85,9 @@ export default {
         props.appendIcon = ''
         props.type = 'string'
         props.validateOnBlur = true
+        if (this.fullSchema.examples && this.fullSchema.examples.length > 0) {
+          props.items = this.fullSchema.examples
+        }
         const itemRules = getRules(schemaUtils.prepareFullSchema(this.fullSchema.items, null, this.fullOptions), this.fullOptions)
         props.rules = props.rules.concat([(values) => {
           const valuesMessages = values.map(value => {
@@ -97,6 +108,8 @@ export default {
               .filter(val => !isNaN(val))
             this.input(vals)
           }
+        } else if (this.fullSchema.examples) {
+          props.items = this.fullSchema.examples
         }
 
         scopedSlots.selection = slotProps => {