feat: nullable properties

Author: albanm

doc/examples/index.js

@@ -23,6 +23,7 @@ import validationSections from './validation-sections'
 import tuples from './tuples'
 import readOnly from './read-only'
 import localization from './localization'
+import nullable from './nullable'
 import resolvedSchema from './_resolved-schema'
 import selectFilledDeps from './_select-filled-deps'
 import selectFilledHttp from './_select-filled-http'
@@ -54,6 +55,7 @@ const examples = [
   tuples,
   readOnly,
   localization,
+  nullable,
   resolvedSchema,
   selectFilledDeps,
   selectFilledHttp,

doc/examples/nullable.js

@@ -0,0 +1,20 @@
+const id = 'nullable'
+
+const title = 'Nullable properties'
+
+const description = `Properties with basic types can support alternative "null" type.
+
+In this case VJsf will set null values when initializing empty properties or when clearing an existing property.`
+
+const schema = {
+  type: 'object',
+  properties: {
+    stringProp: { type: ['string', 'null'], title: `I'm a nullable string` },
+    dateProp: { type: ['string', 'null'], title: `I'm a clearable date`, format: 'date' },
+    selectProp: { type: ['string', 'null'], title: `I'm a clearable string from an enum`, enum: ['value 1', 'value 2', null] }
+  }
+}
+
+const model = {}
+
+export default { id, title, description, schema, model }

lib/VJsfNoDeps.js

@@ -180,7 +180,12 @@ export default {
       this.$emit('change', this.value)
     },
     input(value) {
-      this.$emit('input', value)
+      if (value === null || value === undefined || value === '') {
+        if (this.fullSchema.nullable) this.$emit('input', null)
+        else this.$emit('input', undefined)
+      } else {
+        this.$emit('input', value)
+      }
     },
     defaultValue(schema) {
       if (schema.type === 'object' && !schema['x-fromUrl'] && !schema['x-fromData'] && !schema.enum) return {}
@@ -221,7 +226,7 @@ export default {
 
       // console.log('Init from schema', this.modelKey)
       if (this.fullSchema.readOnly && this.fullOptions.deleteReadOnly) {
-        return this.$emit('input', undefined)
+        return this.input(undefined)
       }
       let model = this.value
       if (this.fullSchema.type === 'object' && [undefined, null].includes(model) && !this.isSelectProp) {
@@ -235,7 +240,7 @@ export default {
       if (this.fullSchema.type === 'array') {
         model = model.filter(item => ![undefined, null].includes(item))
       }
-      this.$emit('input', model)
+      this.input(model)
     }
   }
 }

lib/mixins/EditableArray.js

@@ -102,7 +102,7 @@ export default {
                   // TODO: rethink parts of reactivity
                   this.$nextTick(() => this.$refs['roItem-' + i].initFromSchema())
                 }
-                this.$emit('input', this.value)
+                this.input(this.value)
                 this.$emit('change', this.value)
                 this.shouldValidate = true
                 this.editabledArrayProp.currentDialog = null
@@ -160,7 +160,7 @@ export default {
                 class: { 'vjsf-array-delete-button': true },
                 on: { click: () => {
                   const value = this.value.filter(i => i !== item)
-                  this.$emit('input', value)
+                  this.input(value)
                   this.$emit('change', value)
                   this.shouldValidate = true
                   header.componentInstance.validate()
@@ -174,7 +174,7 @@ export default {
             class: 'row',
             style: 'cursor: move;',
             on: { input: (value) => {
-              this.$emit('input', value)
+              this.input(value)
               this.$emit('change', value)
               this.shouldValidate = true
               this.$nextTick(() => {

lib/mixins/ObjectContainer.js

@@ -38,7 +38,7 @@ export default {
         this.showCurrentOneOf = true
         if (!this.currentOneOf) this.$set(this.subModels, 'currentOneOf', {})
         else this.fixProperties()
-        this.$emit('input', this.value)
+        this.input(this.value)
         this.$emit('change', this.value)
       })
     },
@@ -117,7 +117,7 @@ export default {
         if (schema.default !== undefined) value = JSON.parse(JSON.stringify(schema.default))
         if (value !== undefined && value !== null) {
           this.$set(wrapper, modelKey, value)
-          this.$emit('input', this.value)
+          this.input(this.value)
         }
       }
       return h('v-jsf', {
@@ -136,8 +136,8 @@ export default {
         on: {
           error: e => this.$emit('error', e),
           input: v => {
-            if (v === null || v === undefined || v === '') {
-              // set empty value instead of deleting key in the special case of he parts
+            if (v === undefined) {
+              // set empty value instead of deleting key in the special case of the parts
               // of a tuple (except the last part), otherwise we move last parts of the array to the beginning of the array
               if (Array.isArray(wrapper) && parseInt(modelKey) < (wrapper.length - 1)) {
                 this.$set(wrapper, modelKey, v)

lib/mixins/SelectProperty.js

@@ -139,7 +139,7 @@ export default {
     updateSelectItems() {
       const selectItems = selectUtils.getSelectItems(this.rawSelectItems, this.fullSchema, this.itemKey, this.itemIcon)
       if (this.display === 'list') {
-        this.$emit('input', selectUtils.fillList(this.fullSchema, this.value, selectItems, this.itemKey))
+        this.input(selectUtils.fillList(this.fullSchema, this.value, selectItems, this.itemKey))
       }
 
       selectUtils.fillSelectItems(this.fullSchema, this.value, selectItems, this.itemKey, this.returnObject)
@@ -170,7 +170,7 @@ export default {
       const value = item[this.itemKey]
       const on = {
         change: (inputValue) => {
-          this.$emit('input', inputValue)
+          this.input(inputValue)
           this.$emit('change', inputValue)
         }
       }

lib/utils/schema.js

@@ -21,6 +21,11 @@ schemaUtils.prepareFullSchema = (schema, value) => {
   if (fullSchema.pattern) fullSchema.patternRegexp = new RegExp(fullSchema.pattern)
 
   if (!fullSchema.type && fullSchema.properties) fullSchema.type = 'object'
+  if (Array.isArray(fullSchema.type)) {
+    fullSchema.nullable = fullSchema.type.includes('null')
+    fullSchema.type = fullSchema.type.find(t => t !== 'null')
+    if (fullSchema.nullable && fullSchema.enum) fullSchema.enum = fullSchema.enum.filter(v => v !== null)
+  }
   if (fullSchema.type !== 'object') return fullSchema
 
   // Properties as array for easier loops