@koumoul/vjsf 3.0.0-beta.8 → 3.0.0

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.8",
+  "version": "3.0.0",
   "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,19 +67,17 @@
   },
   "peerDependencies": {
     "vue": "^3.4.3",
-    "vuetify": "^3.4.9"
+    "vuetify": "^3.6.13"
   },
   "dependencies": {
-    "@json-layout/core": "0.13.0",
+    "@json-layout/core": "0.33.3",
     "@vueuse/core": "^10.5.0",
-    "debug": "^4.3.4",
-    "ejs": "^3.1.9"
+    "debug": "^4.3.4"
   },
   "devDependencies": {
     "@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,12 +1,78 @@
 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 = {}
@@ -23,7 +89,11 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
     }
 
     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']
     }
 
@@ -38,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)) {
@@ -64,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
@@ -72,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)
+  }
 }
 
 /**
@@ -117,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/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"

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

@@ -0,0 +1,105 @@
+<script>
+import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader'
+import { VInput } from 'vuetify/components/VInput'
+import { VLabel } from 'vuetify/components/VLabel'
+import { VCheckbox } from 'vuetify/components/VCheckbox'
+import { VSwitch } from 'vuetify/components/VSwitch'
+import { defineComponent, h, computed, toRef } from 'vue'
+import useField from '../../composables/use-node.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 nodeRef = toRef(props, 'modelValue')
+    const getItems = useGetItems(nodeRef, props.statefulLayout)
+    const { inputProps, compSlots, localData, layout } = useField(nodeRef, props.statefulLayout, { bindData: false })
+
+    const fieldProps = computed(() => {
+      const fieldProps = { ...inputProps.value }
+      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 = { ...compSlots.value }
+
+      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 (layout.value.multiple) {
+                modelValue = localData.value?.includes(item.value)
+              } else {
+                modelValue = localData.value === item.value
+              }
+              checkboxes.push(h(props.type === 'switch' ? VSwitch : VCheckbox, {
+                label: item.title,
+                hideDetails: true,
+                key: item.key,
+                modelValue,
+                onClick: () => {
+                  let newValue
+                  if (layout.value.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
+    })
+
+    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

@@ -1,7 +1,8 @@
 <script setup>
-import { VMenu, VTextField } from 'vuetify/components'
-import { computed, ref } from 'vue'
-import { getCompProps, getInputProps } from '../../utils/index.js'
+import { VMenu } from 'vuetify/components/VMenu'
+import { VTextField } from 'vuetify/components/VTextField'
+import { computed, ref, toRef } from 'vue'
+import useField from '../../composables/use-node.js'
 
 const props = defineProps({
   modelValue: {
@@ -21,21 +22,29 @@ const props = defineProps({
   }
 })
 
+const { inputProps, skeleton, compProps, data } = useField(
+  toRef(props, 'modelValue'), props.statefulLayout, { isMainComp: false, bindData: false }
+)
+
 const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout, [], false)
+  const fieldProps = { ...inputProps.value }
   fieldProps.readonly = true
+  fieldProps.clearable = fieldProps.clearable ?? !skeleton.value.required
+  fieldProps['onClick:clear'] = () => {
+    props.statefulLayout.input(props.modelValue, null)
+  }
   return fieldProps
 })
 
 const menuProps = computed(() => {
-  const menuProps = getCompProps(props.modelValue)
+  const menuProps = { ...compProps.value }
   menuProps.closeOnContentClick = false
   menuProps.disabled = true
   return menuProps
 })
 
 const textField = ref(null)
-const menuOpened = ref(false)
+const menuOpened = defineModel('menuOpened', { type: Boolean, default: false })
 
 </script>
 
@@ -43,7 +52,7 @@ const menuOpened = ref(false)
   <v-text-field
     ref="textField"
     v-bind="fieldProps"
-    :model-value="formattedValue ?? modelValue.data"
+    :model-value="formattedValue ?? data"
     @click:control="e => {menuOpened = !menuOpened; e.stopPropagation()}"
   >
     <template #prepend-inner>