@koumoul/vjsf 3.0.0-beta.3 → 3.0.0-beta.30

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.3",
+  "version": "3.0.0-beta.30",
   "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": "cp ../README.md README.md && cp ../LICENSE LICENSE"
   },
   "author": "Alban Mouton <alban.mouton@gmail.com>",
   "license": "MIT",
@@ -72,10 +73,10 @@
   },
   "peerDependencies": {
     "vue": "^3.4.3",
-    "vuetify": "^3.4.9"
+    "vuetify": "^3.6.8"
   },
   "dependencies": {
-    "@json-layout/core": "0.9.3",
+    "@json-layout/core": "0.25.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/compat/v2.js

@@ -1,23 +1,96 @@
 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
+ */
+const processFragment = (schema, getJSONRef, schemaId) => {
+  if (schema.$ref) {
+    const [refFragment, refSchemaId] = getJSONRef(schemaId, schema.$ref)
+    processFragment(refFragment, getJSONRef, refSchemaId)
+  }
   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 +105,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 +133,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 +145,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)
     }
-    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)
+  }
+
+  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)
+  }
+
+  if (schema.anyOf) {
+    for (const item of schema.anyOf) processFragment(item, getJSONRef, schemaId)
   }
 
   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)
     } else {
-      processFragment(schema.items)
+      processFragment(schema.items, getJSONRef, schemaId)
     }
   }
+  if (schema.dependencies) {
+    for (const key of Object.keys(schema.dependencies)) {
+      processFragment(schema.dependencies[key], getJSONRef, schemaId)
+    }
+  }
+  if (schema.if) {
+    if (schema.then) processFragment(schema.then, getJSONRef, schemaId)
+    if (schema.else) processFragment(schema.else, getJSONRef, schemaId)
+  }
 }
 
 /**
@@ -111,7 +211,7 @@ 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)
+  processFragment(schema, getJSONRef, schema.$id)
   return schema
 }

package/src/compile/index.js

@@ -37,10 +37,17 @@ 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[componentInfo.name] = componentInfo
+    pluginsImportsByName[componentInfo.name] = pluginImport
+  }
   const compiledLayout = compileLayout(schema, { ...fullOptions, code: true })
   const compiledLayoutCode = serializeCompiledLayout(compiledLayout)
   /** @type Set<string> */
@@ -50,9 +57,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 +74,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,7 @@
 /** @type import("../types.js").PartialVjsfCompileOptions */
 export const defaultOptions = {
-  nodeComponentImports: {
-    markdown: '@koumoul/vjsf-markdown/components/nodes/markdown.vue'
-  }
+  pluginsImports: ['@koumoul/vjsf-markdown'],
+  components: {}
 }
 
 /**
@@ -11,9 +10,6 @@ export const defaultOptions = {
  * @returns
  */
 export const getFullOptions = (options) => {
-  const fullOptions = {
-    ...defaultOptions,
-    nodeComponentImports: { ...defaultOptions.nodeComponentImports, ...options.nodeComponentImports }
-  }
+  const fullOptions = { ...defaultOptions }
   return /** @type import('../types.js').VjsfCompileOptions */ (fullOptions)
 }

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

@@ -39,7 +39,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/help-message.vue

@@ -4,15 +4,17 @@
       <v-alert
         v-show="show"
         color="info"
+        :density="node.options.density"
       >
         <div v-html="node.layout.help" />
       </v-alert>
     </v-slide-x-reverse-transition>
     <v-btn
       color="info"
-      class="vjsf-help-message-toggle"
+      :class="`vjsf-help-message-toggle vjsf-help-message-toggle-${node.options.density}`"
       :icon="show ? 'mdi-close-circle' : 'mdi-information'"
       density="compact"
+      :size="node.options.density !== 'default' ? 'small' : 'default'"
       :title="show ? '' : node.messages.showHelp"
       @click="show = !show"
     />
@@ -45,5 +47,13 @@ const show = ref(false)
   right: -4px;
   z-index: 1;
 }
+.vjsf-help-message-toggle-comfortable {
+  top: -4px;
+  right: -4px;
+}
+.vjsf-help-message-toggle-compact {
+  top: -4px;
+  right: -4px;
+}
 </style>
 ../../../types.js

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

@@ -45,7 +45,7 @@ const titleClass = computed(() => {
     </p>
     <v-alert
       v-if="node.error && node.validated"
-      v-bind="node.options.errorAlertProps"
+      type="error"
       :class="`mt-${titleDepthBase - node.options.titleDepth}`"
       :density="node.options.density"
     >
@@ -53,4 +53,3 @@ const titleClass = computed(() => {
     </v-alert>
   </div>
 </template>
-../../../types.js

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

@@ -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-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"

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

@@ -0,0 +1,101 @@
+<script>
+import { VInput, VLabel, VCheckbox, VSwitch, VSkeletonLoader } from 'vuetify/components'
+import { defineComponent, h, computed } from 'vue'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useGetItems from '../../composables/use-get-items.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxGroupNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    }
+  },
+  setup (props) {
+    const getItems = useGetItems(props)
+
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
+      fieldProps.class.push('v-radio-group') // reuse some styles from radio-group
+      fieldProps.class.push('vjsf-selection-group')
+      return fieldProps
+    })
+
+    const fieldSlots = computed(() => {
+      const slots = getCompSlots(props.modelValue, props.statefulLayout)
+
+      if (!slots.default) {
+        slots.default = () => {
+          /** @type {import('vue').VNode[]} */
+          const children = [h(VLabel, { text: fieldProps.value.label })]
+          if (getItems.loading.value) {
+            children.push(h(VSkeletonLoader, { type: 'chip' }))
+          } else {
+            /** @type {import('vue').VNode[]} */
+            const checkboxes = []
+            for (const item of getItems.items.value) {
+              let modelValue = false
+              if (props.modelValue.layout.multiple) {
+                modelValue = props.modelValue.data?.includes(item.value)
+              } else {
+                modelValue = props.modelValue.data === item.value
+              }
+              checkboxes.push(h(props.type === 'switch' ? VSwitch : VCheckbox, {
+                label: item.title,
+                hideDetails: true,
+                density: props.modelValue.options?.density,
+                key: item.key,
+                modelValue,
+                onClick: () => {
+                  let newValue
+                  if (props.modelValue.layout.multiple) {
+                    newValue = props.modelValue.data ? [...props.modelValue.data] : []
+                    if (newValue.includes(item.value)) {
+                      newValue = newValue.filter((/** @type {any} */v) => v !== item.value)
+                    } else {
+                      newValue.push(item.value)
+                    }
+                  } else {
+                    if (props.modelValue.data === item.value) {
+                      newValue = undefined
+                    } else {
+                      newValue = item.value
+                    }
+                  }
+                  props.statefulLayout.input(props.modelValue, newValue)
+                }
+              }))
+            }
+            children.push(h('div', { class: 'v-selection-control-group' }, checkboxes))
+          }
+          return children
+        }
+      }
+
+      return slots
+    })
+
+    // @ts-ignore
+    return () => {
+      return h(VInput, fieldProps.value, fieldSlots.value)
+    }
+  }
+})
+
+</script>
+
+<style>
+.vjsf-selection-group .v-selection-control-group>.v-input .v-selection-control {
+  min-height: auto;
+}
+</style>

package/src/components/fragments/text-field-menu.vue

@@ -24,11 +24,15 @@ const props = defineProps({
 const fieldProps = computed(() => {
   const fieldProps = getInputProps(props.modelValue, props.statefulLayout, [], false)
   fieldProps.readonly = true
+  fieldProps.clearable = fieldProps.clearable ?? !props.modelValue.skeleton.required
+  fieldProps['onClick:clear'] = () => {
+    props.statefulLayout.input(props.modelValue, null)
+  }
   return fieldProps
 })
 
 const menuProps = computed(() => {
-  const menuProps = getCompProps(props.modelValue, 'menu', false)
+  const menuProps = getCompProps(props.modelValue)
   menuProps.closeOnContentClick = false
   menuProps.disabled = true
   return menuProps

package/src/components/node.vue

@@ -35,7 +35,7 @@ const nodeClasses = computed(() => {
   return classes
 })
 
-if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp]) {
+if (props.modelValue.layout.comp !== 'none' && !props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp]) {
   console.error(`vjsf: missing component to render vjsf node "${props.modelValue.layout.comp}", maybe you forgot to register a component from a plugin ?`)
 }
 
@@ -43,6 +43,7 @@ if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp])
 
 <template>
   <v-col
+    v-if="modelValue.layout.comp !== 'none'"
     :cols="modelValue.cols"
     :class="nodeClasses"
   >
@@ -56,7 +57,7 @@ if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp])
     />
 
     <help-message
-      v-if="modelValue.layout.help"
+      v-if="modelValue.layout.help && !modelValue.options.summary"
       :node="modelValue"
       :class="beforeAfterClasses[modelValue.options.density]"
     />
@@ -69,7 +70,7 @@ if (!props.statefulLayout.options.nodeComponents[props.modelValue.layout.comp])
     />
     <component
       :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
-      v-else-if="modelValue.layout.comp !== 'none' "
+      v-else
       :model-value="modelValue"
       :stateful-layout="statefulLayout"
     />

package/src/components/nodes/autocomplete.vue

@@ -1,7 +1,8 @@
 <script>
 import { VAutocomplete } from 'vuetify/components'
-import { defineComponent, computed, ref, shallowRef, h } from 'vue'
+import { defineComponent, computed, h } from 'vue'
 import { getInputProps, getCompSlots } from '../../utils/index.js'
+import useGetItems from '../../composables/use-get-items.js'
 import SelectItem from '../fragments/select-item.vue'
 import SelectSelection from '../fragments/select-selection.vue'
 
@@ -13,54 +14,27 @@ export default defineComponent({
       required: true
     },
     statefulLayout: {
-    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
   },
   setup (props) {
-    /** @type import('vue').ShallowRef<import('@json-layout/vocabulary').SelectItems> */
-    const items = shallowRef([])
-    /** @type import('vue').Ref<boolean> */
-    const loading = ref(false)
-    /** @type import('vue').Ref<string> */
-    const search = ref('')
+    const getItems = useGetItems(props)
 
     const fieldProps = computed(() => {
       const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
       if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
       fieldProps.noFilter = true
       fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
-        search.value = searchValue
-        refresh()
+        getItems.search.value = searchValue
       }
-      fieldProps['onUpdate:menu'] = refresh
-      fieldProps.items = items.value
-      fieldProps.loading = loading.value
+      fieldProps.items = getItems.items.value
+      fieldProps.loading = getItems.loading.value
+      fieldProps.clearable = fieldProps.clearable ?? !props.modelValue.skeleton.required
       return fieldProps
     })
 
-    /** @type import('@json-layout/core').StateTree | null */
-    let lastStateTree = null
-    /** @type Record<string, any> | null */
-    let lastContext = null
-    /** @type string */
-    let lastSearch = ''
-
-    const refresh = async () => {
-      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext && search.value === lastSearch) return
-      loading.value = true
-      items.value = await props.statefulLayout.getItems(props.modelValue, search.value)
-      lastStateTree = props.statefulLayout.stateTree
-      lastContext = props.statefulLayout.options.context ?? null
-      lastSearch = search.value
-      loading.value = false
-    }
-
-    if (!props.modelValue.layout.items) {
-      refresh()
-    }
-
     const fieldSlots = computed(() => {
       const slots = getCompSlots(props.modelValue, props.statefulLayout)
       if (!slots.item) {
@@ -74,7 +48,7 @@ export default defineComponent({
         slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
           multiple: props.modelValue.layout.multiple,
           last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
-          item: context.item.raw
+          item: getItems.prepareSelectedItem(context.item.raw, context.item.value)
         })
       }
       return slots