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

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.31",
   "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.26.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

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,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

@@ -10,9 +10,10 @@
     </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 +46,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,12 +45,10 @@ 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"
     >
       {{ node.error }}
     </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,100 @@
+<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,
+                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

@@ -1,10 +1,12 @@
 <script setup>
 import { computed } from 'vue'
-import { useTheme } from 'vuetify'
-import { VCol } from 'vuetify/components'
+import { useTheme, useDefaults } from 'vuetify'
+import { VCol, VDefaultsProvider } from 'vuetify/components'
 import NodeSlot from './fragments/node-slot.vue'
 import HelpMessage from './fragments/help-message.vue'
 
+useDefaults({}, 'VjsfNode')
+
 const props = defineProps({
   modelValue: {
     /** @type import('vue').PropType<import('../types.js').VjsfNode> */
@@ -35,52 +37,55 @@ 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 ?`)
 }
 
 </script>
 
 <template>
-  <v-col
-    :cols="modelValue.cols"
-    :class="nodeClasses"
-  >
-    <node-slot
-      v-if="modelValue.layout.slots?.before"
-      key="before"
-      :layout-slot="modelValue.layout.slots?.before"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
+  <v-defaults-provider :defaults="{global: { density: props.modelValue.options.density }}">
+    <v-col
+      v-if="modelValue.layout.comp !== 'none'"
+      :cols="modelValue.cols"
+      :class="nodeClasses"
+    >
+      <node-slot
+        v-if="modelValue.layout.slots?.before"
+        key="before"
+        :layout-slot="modelValue.layout.slots?.before"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
 
-    <help-message
-      v-if="modelValue.layout.help"
-      :node="modelValue"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
-    <node-slot
-      v-if="modelValue.layout.slots?.component"
-      key="component"
-      :layout-slot="modelValue.layout.slots?.component"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-    />
-    <component
-      :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
-      v-else-if="modelValue.layout.comp !== 'none' "
-      :model-value="modelValue"
-      :stateful-layout="statefulLayout"
-    />
+      <help-message
+        v-if="modelValue.layout.help && !modelValue.options.summary"
+        :node="modelValue"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
+      <node-slot
+        v-if="modelValue.layout.slots?.component"
+        key="component"
+        :layout-slot="modelValue.layout.slots?.component"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+      />
+      <component
+        :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
+        v-else
+        :model-value="modelValue"
+        :stateful-layout="statefulLayout"
+      />
 
-    <node-slot
-      v-if="modelValue.layout.slots?.after"
-      key="after"
-      :layout-slot="modelValue.layout.slots?.after"
-      :node="modelValue"
-      :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[modelValue.options.density]"
-    />
-  </v-col>
+      <node-slot
+        v-if="modelValue.layout.slots?.after"
+        key="after"
+        :layout-slot="modelValue.layout.slots?.after"
+        :node="modelValue"
+        :stateful-layout="statefulLayout"
+        :class="beforeAfterClasses[modelValue.options.density]"
+      />
+    </v-col>
+  </v-defaults-provider>
 </template>