@koumoul/vjsf 3.0.0-beta.5 → 3.0.0-beta.50

package/README.md

@@ -0,0 +1,21 @@
+# VJSF
+
+*vuetify-json-schema-form* - *@koumoul/vjsf on npm*
+
+Easily create beautiful forms that output valid data.
+
+Based on [Vue.js](https://vuejs.org/) / [Vuetify](https://vuetifyjs.com/) / [JSON Schema](https://json-schema.org/) / [JSON Layout](https://github.com/json-layout/json-layout).
+
+See [the documentation](https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/).
+
+See [the documentation for deprecated v2](https://koumoul-dev.github.io/vuetify-jsonschema-form/2.x/).
+
+![](doc/static/vjsf.gif)
+
+## Bug reports
+
+Bug reports are created using github issues. The examples in the documentation include codepen links, as much as possible please save a duplicate codepen with the minimal schema/config to reproduce your problem.
+
+## Contribute
+
+See [CONTRIBUTE.md](./CONTRIBUTE.md).

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.5",
+  "version": "3.0.0-beta.50",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
     "build": "vue-tsc",
-    "watch:build": "vue-tsc --watch"
+    "watch:build": "vue-tsc --watch",
+    "prepublishOnly": "npm run build && cp ../README.md README.md && cp ../LICENSE LICENSE"
   },
   "author": "Alban Mouton <alban.mouton@gmail.com>",
   "license": "MIT",
@@ -34,22 +35,16 @@
         "default": "./src/components/*"
       }
     },
-    "./composables/*": {
+    "./utils/*.js": {
       "import": {
-        "types": "./types/composables/*.d.ts",
-        "default": "./src/composables/*"
-      }
-    },
-    "./utils": {
-      "import": {
-        "types": "./types/utils/index.d.ts",
-        "default": "./src/utils/index.js"
+        "types": "./types/utils/*.d.ts",
+        "default": "./src/utils/*.js"
       }
     },
-    "./utils/*": {
+    "./composables/*.js": {
       "import": {
-        "types": "./types/utils/*.d.ts",
-        "default": "./src/utils/*"
+        "types": "./types/composables/*.d.ts",
+        "default": "./src/composables/*.js"
       }
     },
     "./styles/*": {
@@ -72,10 +67,10 @@
   },
   "peerDependencies": {
     "vue": "^3.4.3",
-    "vuetify": "^3.4.9"
+    "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "0.11.0",
+    "@json-layout/core": "0.33.1",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"
@@ -84,7 +79,7 @@
     "@types/debug": "^4.1.8",
     "@types/ejs": "^3.1.2",
     "vitest": "^1.1.1",
-    "vue": "^3.4.3",
+    "vue": "^3.5.6",
     "vue-tsc": "^1.8.27"
   }
 }

package/src/compat/v2.js

@@ -1,23 +1,99 @@
 import ajvModule from 'ajv'
 import addFormats from 'ajv-formats'
-import { resolveRefs, clone } from '@json-layout/core'
+import { resolveLocaleRefs, clone } from '@json-layout/core'
 import { isPartialGetItemsObj } from '@json-layout/vocabulary'
 
 // @ts-ignore
 const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 
-const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
+const expressionKeyMappings = {
+  modelRoot: 'rootData',
+  root: 'rootData',
+  model: 'data',
+  value: 'data'
+}
+
+/**
+ * @param {string} expression
+ * @returns {string}
+ */
+const prefixExpression = (expression) => {
+  // looks like a simple expression missing the data. prefix
+  if (expression.match(/^[a-z.]*$/i) && !['data', 'context', 'rootData', 'parent'].some(key => expression.startsWith(key + '.'))) {
+    return 'rootData.' + expression
+  }
+  return expression
+}
+
+/**
+ *
+ * @param {string} expression
+ * @param {'js-eval' | 'js-tpl'} [type]
+ * @returns {{type: 'js-eval' | 'js-tpl', expr: string, pure: boolean}}
+ */
+const fixExpression = (expression, type = 'js-eval') => {
+  let expr = expression
+  let pure = true
+
+  if (expr.includes('parent.value')) {
+    pure = false
+    expr = expr.replace(/parent\.value/g, 'parent.data')
+  }
+
+  for (const [key, value] of Object.entries(expressionKeyMappings)) {
+    expr = expr.replace(new RegExp(`${key}\\.`, 'g'), value + '.')
+  }
+  if (type === 'js-eval') {
+    expr = prefixExpression(expr)
+  }
+  if (type === 'js-tpl') {
+    for (const expressionMatch of expr.matchAll(/\{(.*?)\}/g)) {
+      if (expressionMatch[1] !== 'q') expr = expr.replace(expressionMatch[0], '${' + prefixExpression(expressionMatch[1]) + '}')
+    }
+  }
+
+  if (expr.includes('rootData')) {
+    pure = false
+  }
+
+  return { type, expr, pure }
+}
+
+/**
+ *
+ * @param {import("ajv").SchemaObject} schema
+ * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
+ * @param {string} schemaId
+ * @param {any[]} processed
+ */
+const processFragment = (schema, getJSONRef, schemaId, processed) => {
+  if (processed.includes(schema)) return
+  processed.push(schema)
+  if (schema.$ref) {
+    const [refFragment, refSchemaId] = getJSONRef(schemaId, schema.$ref)
+    processFragment(refFragment, getJSONRef, refSchemaId, processed)
+  }
   if (!schema.layout) {
     /** @type import('@json-layout/vocabulary').PartialCompObject */
     const layout = {}
 
+    if (schema.separator || schema['x-separator']) {
+      layout.separator = schema.separator || schema['x-separator']
+      delete schema.separator
+      delete schema['x-separator']
+    }
+
     if (schema['x-display'] === 'icon' && (schema.enum || schema.items?.enum)) {
       layout.getItems = { itemIcon: schema['x-itemIcon'] || 'data.value' }
       delete schema['x-display']
     }
 
     if (schema['x-display']) {
-      layout.comp = schema['x-display']
+      let display = schema['x-display']
+      if (display === 'radio') display = 'radio-group'
+      if (display === 'checkbox' && schema.type !== 'boolean') display = 'checkbox-group'
+      if (display === 'switch' && schema.type !== 'boolean') display = 'switch-group'
+      layout.comp = display
       delete schema['x-display']
     }
 
@@ -32,18 +108,20 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
     }
 
     if (schema['x-fromData']) {
-      layout.comp = 'select'
-      layout.getItems = { expr: schema['x-fromData'] }
+      layout.comp = layout.comp ?? 'select'
+      layout.getItems = fixExpression(schema['x-fromData'])
       delete schema['x-fromData']
     }
 
+    if (schema['x-if']) {
+      layout.if = fixExpression(schema['x-if'])
+      delete schema['x-if']
+    }
+
     if (schema['x-fromUrl']) {
       /** @type string */
-      let url = schema['x-fromUrl']
-      for (const expressionMatch of url.matchAll(/\{(.*?)\}/g)) {
-        if (expressionMatch[1] !== 'q') url = url.replace(expressionMatch[0], '$' + expressionMatch[0])
-      }
-      layout.getItems = { url }
+      const url = schema['x-fromUrl']
+      layout.getItems = { url: fixExpression(url, 'js-tpl') }
       delete schema['x-fromUrl']
     }
     if (layout.getItems && isPartialGetItemsObj(layout.getItems)) {
@@ -58,6 +136,10 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
       delete schema['x-itemsProp']
     }
 
+    if (schema['x-cols']) {
+      layout.cols = schema['x-cols']
+    }
+
     // compact the layout keyword if possible
     if (Object.keys(layout).length === 1 && 'comp' in layout) {
       schema.layout = layout.comp
@@ -66,30 +148,51 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
     }
   }
 
-  if (schema.type === 'object') {
-    if (schema.properties) {
-      for (const propertyKey of Object.keys(schema.properties)) {
-        processFragment(schema.properties[propertyKey])
-      }
-    }
-    if (schema.allOf) {
-      for (const item of schema.allOf) processFragment(item)
+  if (schema.properties) {
+    for (const propertyKey of Object.keys(schema.properties)) {
+      processFragment(schema.properties[propertyKey], getJSONRef, schemaId, processed)
     }
-    if (schema.oneOf) {
-      for (const item of schema.oneOf) processFragment(item)
-    }
-    if (schema.anyOf) {
-      for (const item of schema.anyOf) processFragment(item)
+  }
+
+  if (schema.allOf) {
+    for (const item of schema.allOf) processFragment(item, getJSONRef, schemaId, processed)
+  }
+
+  if (schema.oneOf) {
+    if (!schema.oneOfLayout) {
+      const constPropertyKey = Object.keys(schema.oneOf[0]?.properties || {})
+        .find(key => !!schema.oneOf[0]?.properties[key].const)
+      if (constPropertyKey) {
+        const constProperty = schema.oneOf[0]?.properties[constPropertyKey]
+        if (constProperty?.title) schema.oneOfLayout = { label: constProperty.title }
+        if (schema.required && Array.isArray(schema.required)) {
+          schema.required = schema.required.filter(key => key !== constPropertyKey)
+        }
+      }
     }
+    for (const item of schema.oneOf) processFragment(item, getJSONRef, schemaId, processed)
+  }
+
+  if (schema.anyOf) {
+    for (const item of schema.anyOf) processFragment(item, getJSONRef, schemaId, processed)
   }
 
   if (schema.type === 'array' && schema.items) {
     if (Array.isArray(schema.items)) {
-      for (const item of schema.items) processFragment(item)
+      for (const item of schema.items) processFragment(item, getJSONRef, schemaId, processed)
     } else {
-      processFragment(schema.items)
+      processFragment(schema.items, getJSONRef, schemaId, processed)
     }
   }
+  if (schema.dependencies) {
+    for (const key of Object.keys(schema.dependencies)) {
+      processFragment(schema.dependencies[key], getJSONRef, schemaId, processed)
+    }
+  }
+  if (schema.if) {
+    if (schema.then) processFragment(schema.then, getJSONRef, schemaId, processed)
+    if (schema.else) processFragment(schema.else, getJSONRef, schemaId, processed)
+  }
 }
 
 /**
@@ -111,7 +214,9 @@ export function v2compat (_schema, _ajv, lang = 'en') {
 
   const schema = /** @type {import("ajv").SchemaObject} */ (clone(_schema))
   schema.$id = schema.$id ?? '_jl'
-  resolveRefs(schema, ajv, lang)
-  processFragment(schema)
+  const getJSONRef = resolveLocaleRefs(schema, ajv, lang)
+  /** @type {any[]} */
+  const processed = []
+  processFragment(schema, getJSONRef, schema.$id, processed)
   return schema
 }

package/src/compile/index.js

@@ -37,10 +37,18 @@ function listComps (comps, layout) {
  * @param {object} schema
  * @param {import('../types.js').PartialVjsfCompileOptions} [options]
  * @param {string} [baseImport]
- * @returns {string}
+ * @returns {Promise<string>}
  */
-export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
+export async function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
   const fullOptions = getFullOptions(options)
+  /** @type {Record<string, string>} */
+  const pluginsImportsByName = {}
+  for (const pluginImport of fullOptions.pluginsImports) {
+    const componentInfo = /** @type {import('@json-layout/vocabulary').ComponentInfo} */((await import(pluginImport + '/info.js')).default)
+    fullOptions.components = fullOptions.components ?? {}
+    fullOptions.components[componentInfo.name] = componentInfo
+    pluginsImportsByName[componentInfo.name] = pluginImport
+  }
   const compiledLayout = compileLayout(schema, { ...fullOptions, code: true })
   const compiledLayoutCode = serializeCompiledLayout(compiledLayout)
   /** @type Set<string> */
@@ -50,9 +58,16 @@ export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
   }
   comps.delete('none')
 
+  /** @type {Record<string, any>} */
+  const pluginsComponents = {}
+
   const compImports = [...comps].map(comp => {
     const compName = comp.replace(/-/g, '') + 'Node'
-    const compImport = fullOptions.nodeComponentImports[comp] ?? `${baseImport}/components/nodes/${comp}.vue`
+    let compImport = `${baseImport}/components/nodes/${comp}.vue`
+    if (pluginsImportsByName[comp]) {
+      compImport = `${pluginsImportsByName[comp]}/node.vue`
+      pluginsComponents[comp] = fullOptions.components?.[comp]
+    }
     return {
       comp,
       compName,
@@ -60,6 +75,6 @@ export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
     }
   })
 
-  const code = ejs.render(template, { compiledLayoutCode, compImports, baseImport })
+  const code = ejs.render(template, { compiledLayoutCode, compImports, baseImport, pluginsComponents })
   return code
 }

package/src/compile/options.js

@@ -1,8 +1,5 @@
-/** @type import("../types.js").PartialVjsfCompileOptions */
 export const defaultOptions = {
-  nodeComponentImports: {
-    markdown: '@koumoul/vjsf-markdown/components/nodes/markdown.vue'
-  }
+  pluginsImports: ['@koumoul/vjsf-markdown']
 }
 
 /**
@@ -11,9 +8,7 @@ export const defaultOptions = {
  * @returns
  */
 export const getFullOptions = (options) => {
-  const fullOptions = {
-    ...defaultOptions,
-    nodeComponentImports: { ...defaultOptions.nodeComponentImports, ...options.nodeComponentImports }
-  }
-  return /** @type import('../types.js').VjsfCompileOptions */ (fullOptions)
+  /** @type {import('../types.js').VjsfCompileOptions} */
+  const fullOptions = { ...defaultOptions, ...options }
+  return fullOptions
 }

package/src/compile/v-jsf-compiled.vue.ejs

@@ -5,7 +5,6 @@ import { StatefulLayout } from '@json-layout/core'
 import { ref, shallowRef, getCurrentInstance, useSlots, computed } from 'vue'
 import { useElementSize } from '@vueuse/core'
 
-import { defaultOptions } from '<%- baseImport %>/components/options.js'
 import Tree from '<%- baseImport %>/components/tree.vue'
 import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
 import '<%- baseImport %>/styles/vjsf.css'
@@ -39,7 +38,7 @@ const emit = defineEmits(emits)
 const { el, statefulLayout, stateTree } = useVjsf(
   null,
   computed(() => props.modelValue),
-  computed(() => props.options),
+  computed(() => ({...props.options, components: <%- JSON.stringify(pluginsComponents) %>})),
   nodeComponents,
   emit,
   null,

package/src/components/fragments/child-subtitle.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import { isSection } from '@json-layout/core'
+
+const { modelValue } = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('@json-layout/core').StateNode> */
+    type: Object,
+    required: true
+  }
+})
+
+const pClass = computed(() => {
+  if (modelValue.options.density === 'default') return 'mt-1 mb-5'
+  if (modelValue.options.density === 'comfortable') return 'mb-4'
+  return 'mb-3'
+})
+</script>
+<template>
+  <p
+    v-if="isSection(modelValue) && modelValue.layout.subtitle"
+    :class="`text-subtitle ${pClass}`"
+    v-html="modelValue.layout.subtitle"
+  />
+</template>

package/src/components/fragments/help-message.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vjsf-help-message">
+  <div :class="`vjsf-help-message vjsf-help-message-${node.options.density}`">
     <v-slide-x-reverse-transition>
       <v-alert
         v-show="show"
@@ -10,9 +10,12 @@
     </v-slide-x-reverse-transition>
     <v-btn
       color="info"
-      class="vjsf-help-message-toggle"
-      :icon="show ? 'mdi-close-circle' : 'mdi-information'"
+      :class="`vjsf-help-message-toggle vjsf-help-message-toggle-${node.options.density}`"
+      :icon="show ? node.options.icons.close : node.options.icons.infoSymbol"
+      :border="0"
+      :elevation="show ? 0 : 2"
       density="compact"
+      :size="node.options.density === 'default' ? 28 : 24"
       :title="show ? '' : node.messages.showHelp"
       @click="show = !show"
     />
@@ -20,7 +23,9 @@
 </template>
 
 <script setup>
-import { VAlert, VBtn, VSlideXReverseTransition } from 'vuetify/components'
+import { VSlideXReverseTransition } from 'vuetify/components/transitions'
+import { VAlert } from 'vuetify/components/VAlert'
+import { VBtn } from 'vuetify/components/VBtn'
 import { ref } from 'vue'
 
 defineProps({
@@ -37,13 +42,33 @@ const show = ref(false)
 <style>
 .vjsf-help-message {
   position: relative;
-  min-height: 10px;
+}
+.vjsf-help-message-compact {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  min-height:24px;
+}
+.vjsf-help-message-comfortable {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  min-height:24px;
+}
+.vjsf-help-message-default {
+  margin-top: 6px;
+  margin-bottom: 6px;
+  min-height:28px;
 }
 .vjsf-help-message-toggle {
   position: absolute;
-  top: -10px;
-  right: -4px;
+  top: 0px;
+  right: 0px;
   z-index: 1;
 }
+.vjsf-help-message .v-alert {
+  padding-right: 22px;
+}
+.vjsf-help-message-default .v-alert {
+  padding-right: 26px;
+}
+
 </style>
-../../../types.js

package/src/components/fragments/section-header.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { VAlert } from 'vuetify/components'
+import { VAlert } from 'vuetify/components/VAlert'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -7,6 +7,10 @@ const props = defineProps({
     /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
     type: Object,
     required: true
+  },
+  hideTitle: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -27,12 +31,12 @@ const titleClass = computed(() => {
 
 <template>
   <div
-    v-if="node.layout.title ?? node.layout.subtitle ?? (node.error && node.validated)"
+    v-if="(node.layout.title && !hideTitle) || node.layout.subtitle || (node.error && node.validated)"
     :class="`mb-${titleDepthBase - node.options.titleDepth} mt-${titleDepthBase - node.options.titleDepth}`"
   >
     <component
       :is="`h${node.options.titleDepth}`"
-      v-if="node.layout.title"
+      v-if="node.layout.title && !hideTitle"
       :class="`${titleClass}`"
     >
       {{ node.layout.title }}
@@ -40,14 +44,12 @@ const titleClass = computed(() => {
     <p
       v-if="node.layout.subtitle"
       :class="`text-subtitle mt-${titleDepthBase - node.options.titleDepth}`"
-    >
-      {{ node.layout.subtitle }}
-    </p>
+      v-html="node.layout.subtitle"
+    />
     <v-alert
       v-if="node.error && node.validated"
       type="error"
       :class="`mt-${titleDepthBase - node.options.titleDepth}`"
-      :density="node.options.density"
     >
       {{ node.error }}
     </v-alert>

package/src/components/fragments/select-item-icon.vue

@@ -2,7 +2,7 @@
 // cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.tsx#L374
 
 import { defineComponent, h, computed } from 'vue'
-import { VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components/VIcon'
 
 export default defineComponent({
   props: {
@@ -20,7 +20,7 @@ export default defineComponent({
       } else if (isSVG.value) {
         return h('div', { innerHTML: props.icon.replace('<svg ', '<svg class="v-icon__svg" '), class: 'v-icon' })
       } else {
-        return h(VIcon, null, props.icon)
+        return h(VIcon, null, () => props.icon)
       }
     }
   }

package/src/components/fragments/select-item.vue

@@ -1,7 +1,8 @@
 <script setup>
 // cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.tsx#L374
 
-import { VListItem, VCheckboxBtn } from 'vuetify/components'
+import { VCheckboxBtn } from 'vuetify/components/VCheckbox'
+import { VListItem } from 'vuetify/components/VList'
 import VSelectItemIcon from './select-item-icon.vue'
 
 defineProps({

package/src/components/fragments/select-selection.vue

@@ -18,6 +18,7 @@ defineProps({
     required: true
   }
 })
+
 </script>
 
 <template>
@@ -26,7 +27,7 @@ defineProps({
       v-if="item.icon"
       :icon="item.icon"
     />
-    {{ item.title }}
+    {{ item.title ?? item.key ?? item.value }}
     <span
       v-if="multiple && !last"
       class="v-select__selection-comma"