@koumoul/vjsf 2.4.0 → 2.6.0

package/lib/VJsfNoDeps.js

@@ -16,6 +16,7 @@ import MarkdownEditor from './mixins/MarkdownEditor'
 import Tooltip from './mixins/Tooltip'
 import Validatable from './mixins/Validatable'
 import Dependent from './mixins/Dependent'
+const expr = require('property-expr')
 
 const debugFlag = global.navigator && global.navigator.cookieEnabled && global.localStorage && global.localStorage.debug
 
@@ -42,6 +43,7 @@ export default {
     schema: { type: Object, required: true },
     value: { required: true },
     options: { type: Object },
+    optionsRoot: { type: Object },
     modelRoot: { type: [Object, Array, String, Number, Boolean] },
     modelKey: { type: [String, Number], default: 'root' },
     parentKey: { type: String, default: '' },
@@ -55,6 +57,9 @@ export default {
     }
   },
   computed: {
+    initialOptions() {
+      return this.fullKey === 'root' ? (this.options || {}) : this.optionsRoot
+    },
     fullOptions() {
       this.debug('compute fullOptions')
       const _global = (typeof window !== 'undefined' && window) || (typeof global !== 'undefined' && global) || {}
@@ -72,17 +77,32 @@ export default {
 
       fullOptions.httpLib = fullOptions.httpLib || this.axios || this.$http || this.$axios || _global.axios
 
+      // validator function generator is either given or prepared using ajv if present in the context
       if (!fullOptions.validator) {
+        const ajvLocalize = fullOptions.ajvLocalize || _global.ajvLocalize
+        const ajvAddFormats = fullOptions.ajvAddFormats || _global.ajvAddFormats
+        const localizeAjv = !!ajvLocalize && fullOptions.locale && ajvLocalize[fullOptions.locale]
         let ajv = fullOptions.ajv
         if (!ajv) {
-          const Ajv = _global.Ajv || (_global.ajv7 && _global.ajv7.default) || (_global.ajv2019 && _global.ajv2019.default)
-          if (Ajv) ajv = new Ajv()
+          const Ajv = fullOptions.Ajv || _global.Ajv || (_global.ajv7 && _global.ajv7.default) || (_global.ajv2019 && _global.ajv2019.default)
+          // TODO: use strict mode but remove our x-* annotations before
+          if (Ajv) {
+            ajv = new Ajv(localizeAjv ? { allErrors: true, messages: false, strict: false } : { strict: false })
+            if (ajvAddFormats) ajvAddFormats(ajv)
+            ajv.addFormat('hexcolor', /^#[0-9A-Fa-f]{6,8}$/)
+          }
         }
         if (ajv) {
           fullOptions.validator = (schema) => {
             const validate = ajv.compile(schema)
             return (model) => {
-              if (!validate(model)) return validate.errors
+              const valid = validate(model)
+              if (!valid) {
+                if (localizeAjv) {
+                  ajvLocalize[fullOptions.locale](validate.errors)
+                }
+                return ajv.errorsText(validate.errors, { dataVar: '' })
+              }
             }
           }
         }
@@ -133,7 +153,7 @@ export default {
     rules() {
       this.debug('compute rules')
       if (!this.fullSchema) return
-      return getRules(this.fullSchema, this.fullOptions, this.required, this.isOneOfSelect)
+      return getRules(this.schema, this.fullSchema, this.fullOptions, this.required, this.isOneOfSelect)
     },
     disabled() {
       if (!this.fullSchema) return
@@ -254,7 +274,7 @@ export default {
       return
     }
 
-    if (this.fullSchema['x-if'] && !this.parsePath(this.watchKey(this.fullSchema['x-if']))) {
+    if (this.fullSchema['x-if'] && !this.getFromExpr(this.fullSchema['x-if'])) {
       return
     }
 
@@ -309,15 +329,35 @@ export default {
       }
       return this._vjsf_cache[key].value
     },
-    // inspired by https://github.com/vuejs/vue/blob/dev/src/core/util/lang.js#L29
-    parsePath(path) {
-      const segments = path.split('.')
-      let obj = this
-      for (let i = 0; i < segments.length; i++) {
-        if (!obj) return
-        obj = obj[segments[i]]
+    // used by all functionalities that require looking into the data or the context (x-if, fromData, etc)
+    getFromExpr(exp) {
+      const expData = {
+        modelRoot: this.modelRoot,
+        root: this.modelRoot,
+        model: this.value,
+        value: this.value,
+        context: this.options.context
+      }
+      this._vjsf_getters = this._vjsf_getters || {}
+
+      if (this.initialOptions.evalMethod === 'newFunction') {
+        // use a powerful meta-programming approach with "new Function", not safe if the schema is user-submitted
+        // eslint-disable-next-line no-new-func
+        this._vjsf_getters[exp] = this._vjsf_getters[exp] || new Function(...Object.keys(expData), `return ${exp}`)
+        return this._vjsf_getters[exp](...Object.values(expData))
+      } else {
+        exp = this.prefixExpr(exp)
+        // otherwise a safer but not as powerful deep getter method
+        this._vjsf_getters[exp] = this._vjsf_getters[exp] || expr.getter(exp, true)
+        return this._vjsf_getters[exp](expData)
       }
-      return obj
+    },
+    // used by getFromExpr to support simpler expressions that look into the root model by default
+    prefixExpr(key) {
+      if (key.startsWith('context.') || key.startsWith('model.') || key.startsWith('value.') || key.startsWith('modelRoot.') || key.startsWith('root.')) return key
+      // no specific prefix found, we use modelRoot for retro-compatibility
+      if (this.modelRoot) return 'root.' + key
+      return 'model.' + key
     },
     renderPropSlots(h) {
       const slots = []
@@ -441,15 +481,6 @@ export default {
         value = this.value.filter(item => ![undefined, null].includes(item))
       }
       return this.input(this.fixProperties(value), true)
-    },
-    watchKey(key) {
-      if (key.startsWith('context.')) return 'options.' + key
-      if (key.startsWith('root.')) return key.replace('root.', 'modelRoot.')
-      if (key.startsWith('modelRoot.')) return key
-
-      // no specific prefix found, we use modelRoot for retro-compatibility
-      if (this.modelRoot) return 'modelRoot.' + key
-      return 'value.' + key
     }
   }
 }

package/lib/deps/third-party.js

@@ -7,3 +7,5 @@ const _global = (typeof window !== 'undefined' && window) || (typeof global !==
 _global.markdownit = require('markdown-it')
 Vue.component('draggable', Draggable)
 _global.Ajv = require('ajv')
+_global.ajvLocalize = require('ajv-i18n')
+_global.ajvAddFormats = require('ajv-formats')

package/lib/mixins/EditableArray.js

@@ -104,6 +104,7 @@ export default {
           modelKey,
           parentKey: `${this.fullKey}.`,
           options: { ...this.fullOptions, hideReadOnly: false },
+          optionsRoot: this.initialOptions,
           sectionDepth: this.sectionDepth + 1,
           separateValidation: false
         },
@@ -171,6 +172,7 @@ export default {
           modelKey: `item-${i}`,
           parentKey: `${this.fullKey}.`,
           options,
+          optionsRoot: this.initialOptions,
           sectionDepth: this.sectionDepth + 1,
           separateValidation: this.fullOptions.editMode !== 'inline'
         },

package/lib/mixins/ObjectContainer.js

@@ -197,6 +197,7 @@ export default {
           parentKey: `${this.fullKey}.`,
           required: forceRequired || !!(this.fullSchema.required && this.fullSchema.required.includes(schema.key)),
           options: { ...this.fullOptions, autofocus: this.fullOptions.autofocus && this.objectContainerChildrenCount === 1 },
+          optionsRoot: this.initialOptions,
           sectionDepth
         },
         class: this.fullOptions.childrenClass,
@@ -303,7 +304,7 @@ export default {
           value: this.currentOneOf,
           label: (this.subSchemasConstProp && this.subSchemasConstProp.title) || this.fullSchema.title,
           items: this.subSchemas
-            .filter(item => !item['x-if'] || !!this.parsePath(this.watchKey(item['x-if'])))
+            .filter(item => !item['x-if'] || !!this.getFromExpr(item['x-if']))
             .filter(item => item.properties && item.properties[this.subSchemasConstProp.key]),
           required: this.subSchemasRequired,
           clearable: !this.subSchemasRequired,
@@ -324,6 +325,9 @@ export default {
         }
       }
       return [h('v-row', { class: `ma-0 ${this.fullOptions.objectContainerClass}` }, [
+        // display a local error only we don't already have an error displayed in the children
+        (this.localRuleError && !this.dedupChildrenWithValidatedErrors.length) && h('v-col', { props: { cols: 12 }, class: { 'px-0': true, 'error--text': true } }, this.localRuleError),
+        // display the description as block of text on top of section
         this.fullSchema.description && !this.subSchemasConstProp && h('v-col', { props: { cols: 12 }, class: { 'pa-0': true }, domProps: { innerHTML: this.htmlDescription } })]
         .concat(flatChildren).concat(sectionsChildren))
       ]

package/lib/mixins/SelectProperty.js

@@ -27,7 +27,8 @@ export default {
     oneOfSelect() {
       if (!this.fullSchema) return
       if (this.fullSchema.type === 'array' && this.fullSchema.items && ['string', 'integer', 'number'].includes(this.fullSchema.items.type) && (this.fullSchema.items.oneOf || this.fullSchema.items.anyOf)) return true
-      if (['string', 'integer', 'number'].includes(this.fullSchema.type) && (this.fullSchema.oneOf || this.fullSchema.anyOf)) return true
+      if (['string', 'integer', 'number'].includes(this.fullSchema.type) && this.fullSchema.oneOf && this.fullSchema.oneOf[0] && this.fullSchema.oneOf[0].const !== undefined) return true
+      if (['string', 'integer', 'number'].includes(this.fullSchema.type) && this.fullSchema.anyOf && this.fullSchema.anyOf[0] && this.fullSchema.anyOf[0].const !== undefined) return true
       return false
     },
     examplesSelect() {
@@ -104,7 +105,7 @@ export default {
         const of = schema.anyOf || schema.oneOf
         this.openEndedSelect = schema.anyOf && !!schema.anyOf.find(item => !item.const && !item.enum)
         this.rawSelectItems = of
-          .filter(item => !item['x-if'] || !!this.parsePath(this.watchKey(item['x-if'])))
+          .filter(item => !item['x-if'] || !!this.getFromExpr(item['x-if']))
           .filter(item => !!item.const || !!item.enum)
           .map(item => ({ ...item, [this.itemKey]: item.const || (item.enum && item.enum[0]), [this.itemTitle]: item.title }))
       }
@@ -119,14 +120,14 @@ export default {
       // Case of a select based on an array somewhere in the data
       if (this.fullSchema['x-fromData']) {
         this.openEndedSelect = this.customTag === 'v-combobox' || this.fullSchema['x-display'] === 'combobox'
-        this.$watch(this.watchKey(this.fullSchema['x-fromData']), (val) => {
+        this.$watch(() => this.getFromExpr(this.fullSchema['x-fromData']), (val) => {
           this.rawSelectItems = val
         }, { immediate: true })
       }
       // Watch the dynamic parts of the URL used to fill the select field
       if (this.fromUrlKeys) {
         this.fromUrlKeys.forEach(key => {
-          this.$watch(this.watchKey(key), (val) => {
+          this.$watch(() => this.getFromExpr(key), (val) => {
             this.fromUrlParams[key] = val
             this.fetchSelectItems()
           }, { immediate: true })

package/lib/mixins/SimpleProperty.js

@@ -31,7 +31,10 @@ export default {
       const scopedSlots = {}
       let tooltipSlot = 'append-outer'
 
-      if (this.fullSchema.type === 'string') {
+      const sep = this.fullSchema.separator || this.fullSchema['x-separator']
+
+      // simple string
+      if (this.fullSchema.type === 'string' && !sep) {
         if (this.display === 'textarea' || (this.fullSchema.maxLength && this.fullSchema.maxLength > 1000 && this.display !== 'single-line')) {
           tag = 'v-textarea'
           Object.assign(props, this.fullOptions.textareaProps)
@@ -43,6 +46,34 @@ export default {
         }
       }
 
+      // multivalued string with separator
+      if (this.fullSchema.type === 'string' && sep) {
+        tag = 'v-combobox'
+        Object.assign(props, this.fullOptions.comboboxProps)
+        props.chips = true
+        props.multiple = true
+        props.appendIcon = ''
+        props.type = 'string'
+        props.validateOnBlur = true
+        props.value = this.value ? this.value.split(sep) : []
+
+        on.input = value => this.input(value.join(sep))
+
+        scopedSlots.selection = slotProps => {
+          const onClose = () => {
+            const value = this.value ? this.value.split(sep) : []
+            value.splice(slotProps.index, 1)
+            this.input(value.join(sep))
+            this.change()
+          }
+          return h('v-chip', {
+            props: { close: true },
+            on: { 'click:close': onClose }
+          }, slotProps.item)
+        }
+      }
+
+      // simple boolean
       if (['number', 'integer'].includes(this.fullSchema.type)) {
         if (this.display === 'slider') {
           tag = 'v-slider'
@@ -83,7 +114,7 @@ export default {
         props.appendIcon = ''
         props.type = 'string'
         props.validateOnBlur = true
-        const itemRules = getRules(schemaUtils.prepareFullSchema(this.fullSchema.items, null, this.fullOptions), this.fullOptions)
+        const itemRules = getRules(this.fullSchema.items, schemaUtils.prepareFullSchema(this.fullSchema.items, null, this.fullOptions), this.fullOptions)
         props.rules = props.rules.concat([(values) => {
           const valuesMessages = values.map(value => {
             const brokenRule = itemRules.find(rule => {

package/lib/mixins/Validatable.js

@@ -34,15 +34,23 @@ export default {
     },
     hasError() {
       this.debug('compute hasError')
-      return !!this.inputs.find(input => input.hasError) || !!this.containerError
+      return !!this.inputs.find(input => input.hasError) || !!this.localRuleError
     },
-    hasValidatedChildError() {
-      this.debug('compute hasValidatedChildError')
-      return !!this.inputs.find(input => input.hasValidatedChildError || (input.hasError && (input.validated || input.shouldValidate)))
+    hasValidatedError() {
+      this.debug('compute hasValidatedError')
+      return !!this.inputs.find(input => input.hasValidatedError || (input.hasError && (input.validated || input.shouldValidate))) ||
+        (this.localRuleError && (this.validated || this.shouldValidate))
     },
     childrenWithValidatedErrors() {
       this.debug('compute childrenWithValidatedErrors')
-      return Object.keys(this.childrenInputs).filter(key => !!this.childrenInputs[key].hasValidatedChildError)
+      return Object.keys(this.childrenInputs).filter(key => !!this.childrenInputs[key].hasValidatedError)
+    },
+    localRuleError() {
+      if (!this.validated || !this.rules || !this.rules.length) return false
+      const brokenRule = this.rules.find(rule => {
+        return typeof rule(this.value) === 'string'
+      })
+      return brokenRule && brokenRule(this.value)
     }
   },
   watch: {

package/lib/utils/options.js

@@ -51,7 +51,9 @@ export const defaultOptions = {
   autofocus: false,
   httpOptions: {},
   selectAll: false,
-  autoFixArrayItems: true
+  autoFixArrayItems: true,
+  useValidator: false,
+  evalMethod: 'propertyExpr'
 }
 
 export const localizedMessages = {

package/lib/utils/rules.js

@@ -1,6 +1,6 @@
 import { deepEqual } from 'fast-equals'
 
-export const getRules = (fullSchema, options, required, isOneOfSelect) => {
+export const getRules = (schema, fullSchema, options, required, isOneOfSelect) => {
   const rules = []
   if (required) {
     rules.push((val) => (val !== undefined && val !== null && val !== '') || options.messages.required)
@@ -54,6 +54,11 @@ export const getRules = (fullSchema, options, required, isOneOfSelect) => {
     rules.push((val) => (val === undefined || val === null || !val.find(valItem => !fullSchema.items.oneOf.find(item => deepEqual(item.const, valItem)))) || '')
   }
 
+  // ajv validation
+  if (options.validator && options.useValidator) {
+    rules.push(getAjvRule(schema, options.validator))
+  }
+
   const customRules = (fullSchema['x-rules'] || []).map(rule => {
     if (typeof rule === 'string') {
       const ruleFunction = options.rules && options.rules[rule]
@@ -65,3 +70,12 @@ export const getRules = (fullSchema, options, required, isOneOfSelect) => {
   }).filter(rule => !!rule)
   return rules.concat(customRules)
 }
+
+const getAjvRule = (schema, validator, locale) => {
+  const validate = validator(schema)
+  return (val) => {
+    if (val === null || val === undefined) return true
+    const error = validate(val)
+    return !error || error
+  }
+}

package/lib/utils/schema.js

@@ -30,6 +30,13 @@ schemaUtils.prepareFullSchema = (schema, value, options) => {
 
   if (!fullSchema.type && fullSchema.properties) fullSchema.type = 'object'
 
+  // detect type from combination info
+  if (!fullSchema.type) {
+    const combination = fullSchema.anyOf || fullSchema.oneOf || fullSchema.allOf
+    const typedCombinationItem = combination && combination.find(c => !!c.type)
+    if (typedCombinationItem) fullSchema.type = typedCombinationItem.type
+  }
+
   // manage null type in an array, for example ['string', 'null']
   if (Array.isArray(fullSchema.type)) {
     fullSchema.nullable = fullSchema.type.includes('null')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "main": "dist/main.js",
   "scripts": {
@@ -47,14 +47,16 @@
   "homepage": "https://github.com/koumoul-dev/vuetify-jsonschema-form#readme",
   "dependencies": {
     "@mdi/js": "^5.5.55",
-    "ajv": "^6.12.0",
+    "ajv": "^8.6.2",
+    "ajv-formats": "^2.1.1",
+    "ajv-i18n": "^4.1.0",
     "debounce": "^1.2.0",
     "fast-copy": "^2.1.1",
     "fast-equals": "^2.0.0",
     "markdown-it": "^8.4.2",
     "match-all": "^1.2.5",
     "object-hash": "^2.1.1",
-    "property-expr": "^1.5.1",
+    "property-expr": "^2.0.4",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {