@koumoul/vjsf 3.0.0-alpha.9 → 3.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-beta.1",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -75,7 +75,7 @@
     "vuetify": "^3.4.9"
   },
   "dependencies": {
-    "@json-layout/core": "0.8.0",
+    "@json-layout/core": "0.9.1",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

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

@@ -2,7 +2,7 @@
 // @ts-nocheck
 
 import { StatefulLayout } from '@json-layout/core'
-import { ref, shallowRef, getCurrentInstance, useSlots } from 'vue'
+import { ref, shallowRef, getCurrentInstance, useSlots, computed } from 'vue'
 import { useElementSize } from '@vueuse/core'
 
 import { defaultOptions } from '<%- baseImport %>/components/options.js'
@@ -28,9 +28,9 @@ const props = defineProps({
     default: null
   },
   options: {
-    /** @type import('vue').PropType<import('<%- baseImport %>/types.js').PartialVjsfOptions> */
+    /** @type import('vue').PropType<import('<%- baseImport %>/types.js').PartialVjsfOptions | null> */
     type: Object,
-    required: true
+    default: null
   }
 })
 

package/src/components/options.js

@@ -1,35 +1,13 @@
-/** @type import("../types.js").PartialVjsfOptions */
+/** @type {import("../types.js").PartialVjsfOptions} */
 export const defaultOptions = {
-  // matches the density prop found in many vuetify components
-  density: 'default',
-  titleDepth: 2,
-  fieldProps: {},
-  fieldPropsCompact: {
-    density: 'compact',
-    hideDetails: 'auto'
-  },
-  fieldPropsComfortable: {
-    density: 'comfortable'
-  },
-  fieldPropsReadOnly: { hideDetails: 'auto', variant: 'plain' },
-  fieldPropsSummary: { hideDetails: true },
-  textfieldProps: {},
-  textfieldPropsReadOnly: {},
-  textareaProps: {},
-  textareaPropsReadOnly: {},
-  // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
-  checkboxProps: { hideDetails: 'auto' },
-  checkboxPropsReadOnly: {},
-  switchProps: { hideDetails: 'auto' },
-  switchPropsReadOnly: {},
   errorAlertProps: { type: 'error', variant: 'tonal' },
-  easyMDEOptions: {},
-  nodeComponents: {}
+  nodeComponents: {},
+  plugins: {}
 }
 
 /**
  *
- * @param {Partial<import("../types.js").VjsfOptions>} options
+ * @param {Partial<import("../types.js").VjsfOptions> | null} options
  * @param {any} form
  * @param {number} width
  * @param {import("vue").Slots} slots
@@ -41,10 +19,10 @@ export const getFullOptions = (options, form, width, slots, nodeComponents) => {
     ...defaultOptions,
     readOnly: !!(form && (form.isDisabled.value || form.isReadonly.value)),
     ...options,
-    context: options.context ? JSON.parse(JSON.stringify(options.context)) : {},
+    context: options?.context ? JSON.parse(JSON.stringify(options.context)) : {},
     width: Math.round(width ?? 0),
     vjsfSlots: { ...slots },
-    nodeComponents: { ...nodeComponents, ...options.nodeComponents }
+    nodeComponents: { ...nodeComponents, ...options?.nodeComponents }
   }
   return /** @type import('../types.js').VjsfOptions */ (fullOptions)
 }

package/src/components/vjsf.vue

@@ -68,9 +68,9 @@ const props = defineProps({
     default: null
   },
   options: {
-    /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions> */
+    /** @type import('vue').PropType<import('../types.js').PartialVjsfOptions | null> */
     type: Object,
-    required: true
+    default: null
   }
 })
 

package/src/composables/use-vjsf.js

@@ -18,7 +18,7 @@ export const emits = {
 /**
  * @param {import('vue').Ref<Object>} schema
  * @param {import('vue').Ref<any>} modelValue
- * @param {import('vue').Ref<import("../types.js").PartialVjsfOptions>} options
+ * @param {import('vue').Ref<import("../types.js").PartialVjsfOptions | null>} options
  * @param {Record<string, import('vue').Component>} nodeComponents
  * @param {any} emit
  * @param {typeof import('@json-layout/core').compile} [compile]

package/src/styles/vjsf.css

@@ -1,7 +1,3 @@
-.vjsf {
-  overflow: hidden;
-}
-
 /* override vuetify styles to manage readOnly fields more usable than the default disabled fields */
 .vjsf-input--readonly.v-input--disabled.v-text-field  .v-field--disabled input {
   pointer-events: auto;

package/src/types.ts

@@ -30,24 +30,9 @@ import {
 export type Density = 'default' | 'comfortable' | 'compact'
 
 export type VjsfStatefulLayoutOptions = StatefulLayoutOptions & {
-  density: Density,
-  fieldProps: Record<string, unknown>,
-  fieldPropsCompact: Record<string, unknown>,
-  fieldPropsComfortable: Record<string, unknown>,
-  fieldPropsReadOnly: Record<string, unknown>,
-  fieldPropsSummary: Record<string, unknown>,
-  textfieldProps: Record<string, unknown>,
-  textfieldPropsReadOnly: Record<string, unknown>,
-  textareaProps: Record<string, unknown>,
-  textareaPropsReadOnly: Record<string, unknown>,
-  checkboxProps: Record<string, unknown>,
-  checkboxPropsReadOnly: Record<string, unknown>,
-  switchProps: Record<string, unknown>,
-  switchPropsReadOnly: Record<string, unknown>,
-  errorAlertProps: Record<string, unknown>,
   vjsfSlots: Record<string, () => unknown>,
-  easyMDEOptions: Record<string, unknown>,
   nodeComponents: Record<string, Component>,
+  plugins: Record<string, unknown>
 }
 
 export type VjsfCompileOptions = CompileOptions & {

package/src/utils/props.js

@@ -1,6 +1,31 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { camelize } from 'vue'
 
+// NOTE: in a previous draft we used to have this in options,
+// but it was not very flexible and not very easy to use, user defined props should be managed
+// by a combination of layout.props, layout.getProps and vuetify defaults provider (https://vuetifyjs.com/en/components/defaults-providers/#usage)
+const defaultProps = {
+  fieldProps: {},
+  fieldPropsCompact: {
+    density: 'compact',
+    hideDetails: 'auto'
+  },
+  fieldPropsComfortable: {
+    density: 'comfortable'
+  },
+  fieldPropsReadOnly: { hideDetails: 'auto', variant: 'plain' },
+  fieldPropsSummary: { hideDetails: true },
+  textfieldProps: {},
+  textfieldPropsReadOnly: {},
+  textareaProps: {},
+  textareaPropsReadOnly: {},
+  // it is not very common to show an error below checkboxes and switches and without hide-details=auto they take a lot of space
+  checkboxProps: { hideDetails: 'auto' },
+  checkboxPropsReadOnly: {},
+  switchProps: { hideDetails: 'auto' },
+  switchPropsReadOnly: {}
+}
+
 /**
  * @param {(Record<string, any> | undefined)[]} propsLevels
  * @returns {Record<string, any> & {class: string[]}}
@@ -38,14 +63,14 @@ export function mergePropsLevels (propsLevels) {
 export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp = true) {
   const options = node.options
   /** @type {(Record<string, any> | undefined)[]} */
-  const propsLevels = [options.fieldProps]
-  if (options.density === 'comfortable') propsLevels.push(options.fieldPropsComfortable)
-  if (options.density === 'compact') propsLevels.push(options.fieldPropsCompact)
-  if (node.options.readOnly) propsLevels.push(options.fieldPropsReadOnly)
+  const propsLevels = [defaultProps.fieldProps]
+  if (options.density === 'comfortable') propsLevels.push(defaultProps.fieldPropsComfortable)
+  if (options.density === 'compact') propsLevels.push(defaultProps.fieldPropsCompact)
+  if (node.options.readOnly) propsLevels.push(defaultProps.fieldPropsReadOnly)
   if (isMainComp) {
     propsLevels.push(/** @type Record<string, any> | undefined */(options[`${node.layout.comp}Props`]))
     if (node.options.readOnly) propsLevels.push(/** @type Record<string, any> | undefined */(options[`${node.layout.comp}PropsReadOnly`]))
-    propsLevels.push(node.layout.props)
+    if (node.props) propsLevels.push(node.props)
   }
 
   const fullProps = mergePropsLevels(propsLevels)