@koumoul/vjsf 2.11.1 → 2.12.0-beta.0

package/dist/third-party.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/** @license URI.js v4.4.1 (c) 2011 Gary Court. License: http://github.com/garycourt/uri-js */
+
+/**!
+ * Sortable 1.10.2
+ * @author	RubaXa   <trash@rubaxa.org>
+ * @author	owenm    <owen23355@gmail.com>
+ * @license MIT
+ */

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'
+import exprEvalParser from './utils/expr-eval-parser'
 const expr = require('property-expr')
 
 const debugExpr = require('debug')('vjsf:expr')
@@ -260,10 +261,7 @@ export default {
     this.$watch(watcher, () => {
       const fullSchema = schemaUtils.prepareFullSchema(this.resolvedSchema, this.value, this.fullOptions)
       // kinda hackish but prevents triggering large rendering chains when nothing meaningful changes
-      if (deepEqual(fullSchema, this.fullSchema)) {
-      } else {
-        this.fullSchema = fullSchema
-      }
+      if (!deepEqual(fullSchema, this.fullSchema)) this.fullSchema = fullSchema
     }, {
       immediate: true,
       deep: true
@@ -280,7 +278,6 @@ export default {
     if (!this.fullSchema || this.fullSchema.const !== undefined || this.display === 'hidden' || (this.fullSchema.readOnly && this.fullOptions.hideReadOnly)) {
       return
     }
-
     if (this.fullSchema['x-if'] && !this.getFromExpr(this.fullSchema['x-if'])) {
       return
     }
@@ -343,6 +340,7 @@ export default {
 
       this._vjsf_getters = this._vjsf_getters || {}
 
+      // newFunction can only be defined on main options (not x-options to prevent injection)
       if (this.initialOptions.evalMethod === 'newFunction') {
         debugExpr(`evaluate expression "${exp}" with newFunction method`, expData)
         // use a powerful meta-programming approach with "new Function", not safe if the schema is user-submitted
@@ -351,6 +349,12 @@ export default {
         const result = this._vjsf_getters[exp](...Object.values(expData))
         debugExpr(`result`, result)
         return result
+      } else if (this.fullOptions.evalMethod === 'evalExpr') {
+        debugExpr(`evaluate expression "${exp}" with exprEval method`, expData)
+        // TODO: conserve compiled expression for reuse ?
+        const result = exprEvalParser.evaluate(exp, expData)
+        debugExpr(result)
+        return result
       } else {
         exp = this.prefixExpr(exp)
         debugExpr(`evaluate expression "${exp}" with propertyExpr method`, expData)
@@ -475,9 +479,15 @@ export default {
         return this.input(undefined)
       }
       let value = this.value
+
+      // create empty objects
       if (this.fullSchema.type === 'object' && [undefined, null].includes(value) && !this.isSelectProp) {
         value = {}
       }
+      // in the special case of objects based on select remove empty objects
+      if (this.fullSchema.type === 'object' && this.isSelectProp && value && Object.keys(value).length === 0) {
+        value = undefined
+      }
 
       // const always wins
       if (this.fullSchema.const !== undefined) value = this.fullSchema.const

package/lib/deps/third-party.js

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

package/lib/mixins/EditableArray.js

@@ -1,4 +1,5 @@
 import copy from 'fast-copy'
+import selectUtils from '../utils/select'
 
 export default {
   data() {
@@ -255,7 +256,7 @@ export default {
           const titleClass = 'py-2 pr-2 ' + this.fullOptions.arrayItemsTitlesClasses[this.sectionDepth] || this.fullOptions.arrayItemsTitlesClasses[this.fullOptions.arrayItemsTitlesClasses.length - 1]
 
           let cardChildren = [
-            h('v-card-title', { props: { primaryTitle: true }, class: titleClass }, [this.itemTitle && item[this.itemTitle], h('v-spacer'), actions]),
+            h('v-card-title', { props: { primaryTitle: true }, class: titleClass }, [selectUtils.getObjectTitle(item, this.itemTitle, this.fullSchema), h('v-spacer'), actions]),
             h('v-card-text', [itemChild])
           ]
 

package/lib/mixins/ObjectContainer.js

@@ -148,7 +148,7 @@ export default {
                   if (childProp.componentInstance.validate(true)) {
                     this.currentStep += 1
                   }
-                } } }, 'continue')])
+                } } }, this.fullOptions.messages.stepperContinue)])
             ])]
           )
         ]
@@ -312,7 +312,7 @@ export default {
             this.triggerChangeCurrentOneOf = true
           }
         }
-        flatChildren.push(h('v-select', { props, on }, [this.renderTooltip(h, 'append-outer')]))
+        flatChildren.push(h('v-select', { props, on, style: (this.subSchemasConstProp && this.subSchemasConstProp['x-style']) || '' }, [this.renderTooltip(h, 'append-outer')]))
         if (this.currentOneOf && this.showCurrentOneOf) {
           flatChildren.push(this.renderChildProp(h, { ...this.currentOneOf, type: 'object', title: null }, 'currentOneOf', this.sectionDepth + 1))
         }

package/lib/mixins/SelectProperty.js

@@ -20,16 +20,14 @@ export default {
       if (this.fullSchema.type === 'array' && this.fullSchema.items && this.fullSchema.items.enum) return true
       if (this.oneOfSelect) return true
       if (this.examplesSelect) return true
-      if (this.fromUrl) return true
+      // WARNING: it is important not to use this.fromUrl here
+      // because it is empty at first when fromUrlParams are not ready yet and it creates initialization problems
+      if (this.fullSchema['x-fromUrl']) return true
       if (this.fromData) return true
       return false
     },
     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.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
+      return selectUtils.isOneOfSelect(this.fullSchema)
     },
     examplesSelect() {
       if (!this.fullSchema) return
@@ -185,13 +183,17 @@ export default {
     },
     renderSelectIcon(h, item) {
       if (!this.itemIcon) return
-      const itemIcon = item[this.itemIcon]
+      let itemIcon = item[this.itemIcon]
       if (!itemIcon) return
-      let iconChild = h('v-icon', null, itemIcon)
+      let iconChild
       if (itemIcon.startsWith('http://') || itemIcon.startsWith('https://')) {
         iconChild = h('img', { domProps: { src: itemIcon }, style: 'height:100%;width:100%;' })
       } else if (itemIcon.startsWith('<?xml') || itemIcon.startsWith('<svg')) {
         iconChild = h('div', { domProps: { innerHTML: itemIcon } })
+      } else {
+        const prefix = this.fullOptions.iconfont + '-'
+        if (this.fullOptions.iconfont && !itemIcon.startsWith(prefix)) itemIcon = prefix + itemIcon
+        iconChild = h('v-icon', null, itemIcon)
       }
       return h('v-avatar', { props: { tile: true, size: 20 }, class: 'mr-2' }, [iconChild])
     },

package/lib/utils/expr-eval-parser.js

@@ -0,0 +1,21 @@
+import { Parser } from 'expr-eval'
+
+export default new Parser({
+  //  Useless in our use case
+  //  mathematical
+  add: false,
+  concatenate: false,
+  divide: false,
+  factorial: false,
+  multiply: false,
+  power: false,
+  remainer: false,
+  substract: false,
+  //  programatic
+  assignement: false,
+
+  //  logical
+  logical: true,
+  comparison: true,
+  in: true
+})

package/lib/utils/options.js

@@ -90,7 +90,8 @@ export const localizedMessages = {
     mdeGuide: 'Documentation de la syntaxe',
     undo: 'Undo',
     redo: 'Redo',
-    selectAll: 'Select all'
+    selectAll: 'Select all',
+    stepperContinue: 'continue'
   },
   fr: {
     required: 'Cette information est obligatoire',
@@ -124,7 +125,8 @@ export const localizedMessages = {
     mdeGuide: 'Syntax documentation',
     undo: 'Défaire',
     redo: 'Refaire',
-    selectAll: 'Tout sélectionner'
+    selectAll: 'Tout sélectionner',
+    stepperContinue: 'continuer'
   },
   es: {
     required: 'Esta información es requerida',
@@ -139,7 +141,8 @@ export const localizedMessages = {
     minItems: 'Al menos {minItems} articulos',
     maxItems: 'Hasta {maxItems} articulos',
     pattern: 'El formato esperado no se respeta',
-    selectAll: 'Seleccionar todo'
+    selectAll: 'Seleccionar todo',
+    stepperContinue: 'continuar'
   },
   de: {
     required: 'Diese Informationen sind erforderlich',
@@ -154,7 +157,8 @@ export const localizedMessages = {
     minItems: 'Mindestens {minItems} Elemente',
     maxItems: 'Bis zu {maxItems} Artikel',
     pattern: 'Das erwartete Format wird nicht eingehalten',
-    selectAll: 'Wählen Sie Alle'
+    selectAll: 'Wählen Sie Alle',
+    stepperContinue: 'weiter'
   },
   ar: {
     required: 'هذه المعلومة مطلوبة',
@@ -169,7 +173,8 @@ export const localizedMessages = {
     minItems: 'قطع {minItems} لا يمكن اختيار أقل من ',
     maxItems: 'قطع {maxItems} لا يمكن اختيار أكثر من ',
     pattern: 'لا يوجد تشابه مع النموذج المطلوب',
-    selectAll: 'اختر الكل'
+    selectAll: 'اختر الكل',
+    stepperContinue: 'استمر'
   },
   tr: {
     required: 'Zorunlu alan',
@@ -184,7 +189,8 @@ export const localizedMessages = {
     minItems: 'En az seçenek sayısı {minItems}',
     maxItems: 'En çok seçenek sayısı {maxItems}',
     pattern: 'İstenilen paten tutmuyor',
-    selectAll: 'Hepsini seç'
+    selectAll: 'Hepsini seç',
+    stepperContinue: 'devam et'
   },
   nl: {
     required: 'Deze informatie is vereist',
@@ -199,7 +205,8 @@ export const localizedMessages = {
     minItems: 'Minimaal {minItems} antwoorden',
     maxItems: 'Maximaal {maxItems} antwoorden',
     pattern: 'Invoer voldoet niet aan verwachte patroon',
-    selectAll: 'Selecteer alles'
+    selectAll: 'Selecteer alles',
+    stepperContinue: 'doorgaan'
   }
 }
 

package/lib/utils/select.js

@@ -106,3 +106,34 @@ selectUtils.fillList = (fullSchema, value, selectItems, itemKey) => {
   })
   return value.filter(item => !!item)
 }
+
+selectUtils.isOneOfSelect = (fullSchema) => {
+  if (!fullSchema) return
+  if (fullSchema.type === 'array' && fullSchema.items && ['string', 'integer', 'number'].includes(fullSchema.items.type) && (fullSchema.items.oneOf || fullSchema.items.anyOf)) return true
+  if (['string', 'integer', 'number'].includes(fullSchema.type) && fullSchema.oneOf && fullSchema.oneOf[0] && fullSchema.oneOf[0].const !== undefined) return true
+  if (['string', 'integer', 'number'].includes(fullSchema.type) && fullSchema.anyOf && fullSchema.anyOf[0] && fullSchema.anyOf[0].const !== undefined) return true
+  return false
+}
+
+// get an object title if x-itemTitles is defined, handle direct values or values matched to a label through a oneOf/anyof
+selectUtils.getObjectTitle = (item, itemTitle, fullSchema) => {
+  if (!itemTitle) return null
+  const titlePropertySchema = fullSchema.items && fullSchema.items.properties && fullSchema.items.properties[itemTitle]
+  if (titlePropertySchema) {
+    const oneOfSelect = selectUtils.isOneOfSelect(titlePropertySchema)
+    if (oneOfSelect) {
+      const of = titlePropertySchema.anyOf || titlePropertySchema.oneOf
+      const ofItem = of.find(ofItem => ofItem.const === item[itemTitle] || (ofItem.enum && ofItem.enum[0] === item[itemTitle]))
+      if (ofItem) return ofItem.title
+    }
+  }
+
+  if (fullSchema.items && (fullSchema.items.oneOf || fullSchema.items.anyOf)) {
+    const of = fullSchema.items.oneOf || fullSchema.items.anyOf
+    const props = of[0].properties
+    const key = Object.keys(props).find(p => !!props[p].const)
+    const ofItem = of.find(ofItem => ofItem.properties[key].const === item[itemTitle])
+    if (ofItem) return ofItem.title
+  }
+  return item[itemTitle]
+}

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "2.11.1",
+  "version": "2.12.0-beta.0",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "main": "dist/main.js",
   "scripts": {
-    "lint": "eslint --ext js,vue .",
-    "lint-fix": "eslint --fix --ext js,vue .",
+    "lint": "eslint --ext js .",
+    "lint-fix": "eslint --fix --ext js .",
     "build": "rm -rf dist && webpack && cp lib/VJsf.css dist/main.css",
     "prepare": "npm run lint && npm test && npm run build && npm run doc-build",
     "postpublish": "gh-pages-multi deploy -v -s doc/dist -t latest",
     "test": "jest",
+    "test-watch": "jest --watch",
     "test-update": "jest --updateSnapshot",
-    "dev": "nuxt doc --port 3133",
-    "doc-dev": "nuxt doc --port 3133",
-    "doc-start": "nuxt build doc && nuxt start doc",
-    "doc-build": "BASE=/vuetify-jsonschema-form/latest/ nuxt generate doc",
-    "doc-master": "BASE=/vuetify-jsonschema-form/master/ nuxt generate doc && gh-pages-multi deploy -v -s doc/dist -t master"
+    "doc-build": "(cd doc && BASE=/vuetify-jsonschema-form/latest/ nuxt generate)",
+    "doc-master": "(cd doc && BASE=/vuetify-jsonschema-form/master/ nuxt generate) && gh-pages-multi deploy -v -s doc/dist -t maste",
+    "analyze": "webpack --profile --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json"
   },
   "jest": {
     "moduleFileExtensions": [
@@ -33,7 +32,8 @@
     ],
     "snapshotSerializers": [
       "jest-serializer-vue"
-    ]
+    ],
+    "testEnvironment": "jsdom"
   },
   "repository": {
     "type": "git",
@@ -46,36 +46,36 @@
   },
   "homepage": "https://github.com/koumoul-dev/vuetify-jsonschema-form#readme",
   "dependencies": {
-    "@mdi/js": "^6.5.95",
-    "ajv": "^8.9.0",
-    "ajv-formats": "^2.1.1",
-    "ajv-i18n": "^4.2.0",
     "debounce": "^1.2.1",
     "debug": "^4.3.3",
     "fast-copy": "^2.1.1",
     "fast-equals": "^2.0.4",
+    "match-all": "^1.2.6"
+  },
+  "optionalDependencies": {
+    "@mdi/font": "^6.5.95",
+    "@mdi/js": "^6.5.95",
+    "ajv": "^8.11.0",
+    "ajv-formats": "^2.1.1",
+    "ajv-i18n": "^4.2.0",
+    "expr-eval": "^2.0.2",
     "markdown-it": "^12.3.2",
-    "match-all": "^1.2.6",
-    "object-hash": "^2.2.0",
     "property-expr": "^2.0.5",
     "vuedraggable": "^2.24.3"
   },
+  "peerDependencies": {
+    "vuetify": "^2.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@koumoul/data-fair-search-widget": "^0.3.0",
     "@koumoul/gh-pages-multi": "^0.6.0",
-    "@mdi/font": "^6.5.95",
-    "@nuxtjs/axios": "^5.13.6",
-    "@nuxtjs/vuetify": "^1.12.3",
-    "@toast-ui/vue-editor": "^2.5.1",
     "@vue/test-utils": "^1.3.0",
-    "axios": "^0.25.0",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.3",
-    "brace": "^0.11.1",
-    "easymde": "^2.16.1",
+    "babel-jest": "^27.5.1",
+    "babel-loader": "^8.2.4",
     "eslint": "^6.1.0",
     "eslint-config-standard": "^13.0.1",
     "eslint-plugin-import": "^2.18.2",
@@ -84,22 +84,14 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.20.0",
-    "highlight.js": "^11.4.0",
-    "jest": "^26.1.0",
+    "jest": "^27.5.1",
     "jest-serializer-vue": "^2.0.2",
-    "mini-css-extract-plugin": "^1.6.2",
-    "nuxt": "^2.15.8",
-    "random-words": "^1.1.0",
-    "sanitize-html": "^2.6.1",
-    "stringify-object": "^3.3.0",
-    "tiptap-vuetify": "^2.24.0",
     "v-mask": "^2.3.0",
     "vue-axios": "^2.1.5",
-    "vue-cropperjs": "^4.2.0",
     "vue-jest": "^3.0.7",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify": "^2.6.2",
-    "webpack-cli": "^4.9.1",
-    "yaml": "^1.10.2"
+    "vue-loader": "^15.9.8",
+    "webpack": "^5.72.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2"
   }
 }

package/test-apps/compiled/README.me

@@ -0,0 +1,10 @@
+# VJSF - test apps - compiled
+
+This page tests loading vjsf and all dependencies from compiled sources.
+
+```
+npm install
+(cd ../.. && npm run build)
+ln -s ../../dist dist
+npm start
+```

package/test-apps/compiled/index.html

@@ -0,0 +1,85 @@
+<html>
+  <head>
+    <title>VJSF - test apps - compiled</title>
+
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
+    <link href="/dist/main.css" rel="stylesheet">
+  </head>
+  <body>
+    <div id="app">
+      <v-app>
+        <v-main>
+          <v-container>
+            <h1>VJSF - Test app - Compiled</h1>
+
+            <h2>Very basic form</h2>
+            <v-form v-model="form1.valid">
+              <v-jsf :schema="form1.schema" :options="form1.options" v-model="form1.model"></v-jsf>
+            </v-form>
+            valid={{form1.valid}}, model={{form1.model}}
+
+            <h2>Form with draggable array elements</h2>
+            <v-form v-model="form2.valid">
+              <v-jsf :schema="form2.schema" :options="form2.options" v-model="form2.model"></v-jsf>
+            </v-form>
+            valid={{form2.valid}}, model={{form2.model}}
+          </v-container>
+          
+        </v-main>
+      </v-app>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
+    <script src="/dist/main.js"></script>
+    <script src="/dist/third-party.js"></script>
+    <script>
+      Vue.component('VJsf', VJsf.default)
+      new Vue({
+        el: '#app',
+        vuetify: new Vuetify(),
+        data() {
+          return {
+            form1: {
+              valid: null,
+              schema: {
+                type: 'object',
+                properties: {
+                  stringProp: { type: 'string', title: `I'm a string`, description: 'This description is used as a help message.' }
+                }
+              },
+              options: {},
+              model: {}
+            },
+            form2: {
+              valid: null,
+              schema: {
+                type: 'object',
+                properties: {
+                  arrayProp: {
+                    type: 'array',
+                    items: {
+                      type: 'object',
+                      properties: {
+                        stringProp: { type: 'string', title: `I'm a string` }
+                      }
+                    }
+                  }
+                }
+              },
+              options: {},
+              model: {
+                arrayProp: [
+                  {stringProp: 'value 1'},
+                  {stringProp: 'value 2'}
+                ]
+              }
+            }
+          }
+        }
+      })
+    </script>
+  </body>
+</html>