@koumoul/vjsf 3.0.0-beta.7 → 3.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.9",
   "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.12.0",
+    "@json-layout/core": "0.14.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "ejs": "^3.1.9"

package/src/compat/v2.js

@@ -11,6 +11,12 @@ const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
     /** @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']

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

@@ -28,7 +28,7 @@ const fieldProps = computed(() => {
 })
 
 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/nodes/color-picker.vue

@@ -18,7 +18,8 @@ const props = defineProps({
 })
 
 const colorPickerProps = computed(() => {
-  const colorPickerProps = getCompProps(props.modelValue, 'colorPicker', true)
+  const colorPickerProps = getCompProps(props.modelValue, true)
+  colorPickerProps.modelValue = props.modelValue.data
   return colorPickerProps
 })
 </script>

package/src/components/nodes/date-picker.vue

@@ -21,7 +21,7 @@ const props = defineProps({
 const vDate = useDate()
 
 const datePickerProps = computed(() => {
-  const datePickerProps = getCompProps(props.modelValue, 'datePicker', true)
+  const datePickerProps = getCompProps(props.modelValue, true)
   datePickerProps.hideActions = true
   if (props.modelValue.data) datePickerProps.modelValue = new Date(props.modelValue.data)
   return datePickerProps

package/src/components/nodes/expansion-panels.vue

@@ -1,8 +1,10 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VContainer, VRow, VIcon } from 'vuetify/components'
+import { computed } from 'vue'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
+import { getCompProps } from '../../utils/index.js'
 
 defineProps({
   modelValue: {
@@ -21,7 +23,7 @@ defineProps({
 
 <template>
   <section-header :node="modelValue" />
-  <v-expansion-panels>
+  <v-expansion-panels v-bind="getCompProps(modelValue, true)">
     <v-expansion-panel
       v-for="(child, i) of modelValue.children"
       :key="child.key"
@@ -37,16 +39,24 @@ defineProps({
         </v-icon>
         {{ child.layout.title ?? child.layout.label }}
       </v-expansion-panel-title>
-      <v-container fluid>
-        <v-row>
-          <node
-            v-for="grandChild of isSection(child) ? child.children : [child]"
-            :key="grandChild.fullKey"
-            :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
-            :stateful-layout="statefulLayout"
-          />
-        </v-row>
-      </v-container>
+      <v-expansion-panel-text>
+        <v-container fluid>
+          <v-row>
+            <node
+              v-for="grandChild of isSection(child) ? child.children : [child]"
+              :key="grandChild.fullKey"
+              :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
+              :stateful-layout="statefulLayout"
+            />
+          </v-row>
+        </v-container>
+      </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
 </template>
+
+<style>
+.vjsf-node-expansion-panels .v-expansion-panel-text__wrapper {
+  padding: 0;
+}
+</style>

package/src/components/nodes/list.vue

@@ -48,6 +48,12 @@ const buttonDensity = computed(() => {
   return props.modelValue.options.density
 })
 
+const pushEmptyItem = () => {
+  const newData = (props.modelValue.data ?? []).concat([undefined])
+  props.statefulLayout.input(props.modelValue, newData)
+  props.statefulLayout.activateItem(props.modelValue, newData.length - 1)
+}
+
 </script>
 
 <template>
@@ -180,7 +186,7 @@ const buttonDensity = computed(() => {
         <v-btn
           color="primary"
           :density="modelValue.options.density"
-          @click="statefulLayout.input(modelValue, (modelValue.data ?? []).concat([undefined]))"
+          @click="pushEmptyItem"
         >
           {{ modelValue.messages.addItem }}
         </v-btn>

package/src/composables/use-vjsf.js

@@ -1,5 +1,5 @@
 import { StatefulLayout, produceCompileOptions } from '@json-layout/core'
-import { inject, shallowRef, computed, ref, watch, useSlots } from 'vue'
+import { inject, toRaw, shallowRef, computed, ref, watch, useSlots } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import { getFullOptions } from '../components/options.js'
 import { registeredNodeComponents } from '../utils/index.js'
@@ -30,6 +30,8 @@ export const emits = {
  */
 export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compile, precompiledLayout) => {
   const el = ref(null)
+
+  // TODO: apply a debounce to width ?
   const { width } = useElementSize(el)
 
   /** @type import('vue').ShallowRef<import('../types.js').VjsfStatefulLayout | null> */
@@ -53,7 +55,7 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
 
   const slots = useSlots()
 
-  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents, ...registeredNodeComponents.value }))
+  const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots, { ...nodeComponents, ...toRaw(registeredNodeComponents.value) }))
 
   // do not use a simple computed here as we want to prevent recompiling the layout when the options are the same
   /** @type {import('vue').Ref<import('@json-layout/core').PartialCompileOptions>} */
@@ -74,7 +76,6 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
   const onStatefulLayoutUpdate = () => {
     if (!statefulLayout.value) return
     stateTree.value = statefulLayout.value.stateTree
-    emit('update:modelValue', statefulLayout.value.data)
     emit('update:state', statefulLayout.value)
     if (form) {
       // cf https://vuetifyjs.com/en/components/forms/#validation-state
@@ -84,21 +85,31 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
     }
   }
 
+  const onDataUpdate = () => {
+    if (statefulLayout.value && modelValue !== statefulLayout.value.data) {
+      emit('update:modelValue', statefulLayout.value.data)
+    }
+  }
+
   const initStatefulLayout = () => {
     if (!width.value) return
 
     // @ts-ignore
     const _statefulLayout = /** @type {import('../types.js').VjsfStatefulLayout} */(new StatefulLayout(
-      compiledLayout.value,
-      compiledLayout.value.skeletonTree,
-      fullOptions.value,
-      modelValue.value
+      toRaw(compiledLayout.value),
+      toRaw(compiledLayout.value.skeletonTree),
+      toRaw(fullOptions.value),
+      toRaw(modelValue.value)
     ))
     statefulLayout.value = _statefulLayout
     onStatefulLayoutUpdate()
+    onDataUpdate()
     _statefulLayout.events.on('update', () => {
       onStatefulLayoutUpdate()
     })
+    _statefulLayout.events.on('data', () => {
+      onDataUpdate()
+    })
     emit('update:state', _statefulLayout)
     _statefulLayout.events.on('autofocus', () => {
       if (!el.value) return
@@ -122,7 +133,7 @@ export const useVjsf = (schema, modelValue, options, nodeComponents, emit, compi
 
   // case where data is updated from outside
   watch(modelValue, (newData) => {
-    if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = newData
+    if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = toRaw(newData)
   })
 
   // case where schema or compile options are updated from outside

package/src/utils/build.js

@@ -1 +1 @@
-export { commonjsDeps } from '@json-layout/core/utils/build'
+export { commonjsDeps, commonjsDepsPaths } from '@json-layout/core/utils/build'

package/src/utils/props.js

@@ -65,7 +65,7 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
   if (node.error && node.validated) {
     fullProps.errorMessages = node.error
   }
-  fullProps.modelValue = node.data
+  fullProps.modelValue = (typeof node.data === 'string' && node.layout.separator) ? node.data.split(/** @type {string} */(node.layout.separator)) : node.data
   if (node.options.readOnly) {
     fullProps.disabled = true
     fullProps.class.push('vjsf-input--readonly')
@@ -82,7 +82,9 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
   }
 
   if (isMainComp) {
-    fullProps['onUpdate:modelValue'] = (/** @type string */value) => statefulLayout.input(node, value)
+    fullProps['onUpdate:modelValue'] = (/** @type string */value) => {
+      return statefulLayout.input(node, (Array.isArray(value) && node.layout.separator) ? value.join(/** @type {string} */(node.layout.separator)) : value)
+    }
     fullProps.onBlur = () => statefulLayout.blur(node)
   }
 
@@ -92,18 +94,14 @@ export function getInputProps (node, statefulLayout, layoutPropsMap, isMainComp
 // calculate the props of components that are not of the field category
 /**
  * @param {import('@json-layout/core').StateNode} node
- * @param {string} comp
  * @param {boolean} isMainComp
  * @returns {Record<string, any>}
  */
-export function getCompProps (node, comp, isMainComp = true) {
+export function getCompProps (node, isMainComp = true) {
   const options = /** @type import('../types.js').VjsfOptions */(node.options)
   /** @type {(Record<string, any> | undefined)[]} */
   const propsLevels = [{ density: options.density }]
-  propsLevels.push(/** @type Record<string, any> | undefined */(options[`${comp}Props`]))
-  if (node.options.readOnly) propsLevels.push(/** @type Record<string, any> | undefined */(options[`${comp}PropsReadOnly`]))
   if (isMainComp) propsLevels.push(node.layout.props)
   const fullProps = mergePropsLevels(propsLevels)
-  if (isMainComp) fullProps.modelValue = node.data
   return fullProps
 }

package/types/compat/v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AA8FA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBApHqB,KAAK"}
+{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAoGA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBA1HqB,KAAK"}

package/types/components/vjsf.vue.d.ts

@@ -1,5 +1,5 @@
 declare const _default: import("vue").DefineComponent<{}, {
-    $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void);
+    $emit: ((event: "update:state", state: import("../types.js").VjsfStatefulLayout) => void) & ((event: "update:modelValue", data: any) => void);
     options: Partial<Omit<import("../types.js").VjsfOptions, "width">> | null;
     modelValue: any;
     schema: Record<string, any>;

package/types/composables/use-vjsf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-vjsf.d.ts","sourceRoot":"","sources":["../../src/composables/use-vjsf.js"],"names":[],"mappings":"AAUA;IACE;;MAEE;gCADO,GAAG;IAGZ;;MAEE;4BADO,OAAO,aAAa,EAAE,kBAAkB;EAGlD;AAWM,gCARI,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,cACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,WACtB,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC,kBAClE,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,QACvC,GAAG;;;;EA2Gb"}
+{"version":3,"file":"use-vjsf.d.ts","sourceRoot":"","sources":["../../src/composables/use-vjsf.js"],"names":[],"mappings":"AAUA;IACE;;MAEE;gCADO,GAAG;IAGZ;;MAEE;4BADO,OAAO,aAAa,EAAE,kBAAkB;EAGlD;AAWM,gCARI,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,cACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,WACtB,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC,kBAClE,OAAO,MAAM,EAAE,OAAO,KAAK,EAAE,SAAS,CAAC,QACvC,GAAG;;;;EAsHb"}

package/types/utils/build.d.ts

@@ -1,2 +1,2 @@
-export { commonjsDeps } from "@json-layout/core/utils/build";
+export { commonjsDeps, commonjsDepsPaths } from "@json-layout/core/utils/build";
 //# sourceMappingURL=build.d.ts.map

package/types/utils/props.d.ts

@@ -15,9 +15,8 @@ export function mergePropsLevels(propsLevels: (Record<string, any> | undefined)[
 export function getInputProps(node: import('../types.js').VjsfNode, statefulLayout: import('../types.js').VjsfStatefulLayout, layoutPropsMap?: (string | [string, string])[] | undefined, isMainComp?: boolean | undefined): Record<string, any>;
 /**
  * @param {import('@json-layout/core').StateNode} node
- * @param {string} comp
  * @param {boolean} isMainComp
  * @returns {Record<string, any>}
  */
-export function getCompProps(node: import('@json-layout/core').StateNode, comp: string, isMainComp?: boolean): Record<string, any>;
+export function getCompProps(node: import('@json-layout/core').StateNode, isMainComp?: boolean): Record<string, any>;
 //# sourceMappingURL=props.d.ts.map

package/types/utils/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/utils/props.js"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,8CAHW,CAAC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,GACjC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAC,CAqBnD;AAID;;;;;;GAMG;AACH,oCANW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,iGAGtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAuC/B;AAGD;;;;;GAKG;AACH,mCALW,OAAO,mBAAmB,EAAE,SAAS,QACrC,MAAM,eACN,OAAO,GACL,OAAO,MAAM,EAAE,GAAG,CAAC,CAY/B"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/utils/props.js"],"names":[],"mappings":"AAkBA;;;GAGG;AACH,8CAHW,CAAC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC,EAAE,GACjC,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG;IAAC,KAAK,EAAE,MAAM,EAAE,CAAA;CAAC,CAqBnD;AAID;;;;;;GAMG;AACH,oCANW,OAAO,aAAa,EAAE,QAAQ,kBAC9B,OAAO,aAAa,EAAE,kBAAkB,iGAGtC,OAAO,MAAM,EAAE,GAAG,CAAC,CAyC/B;AAGD;;;;GAIG;AACH,mCAJW,OAAO,mBAAmB,EAAE,SAAS,eACrC,OAAO,GACL,OAAO,MAAM,EAAE,GAAG,CAAC,CAS/B"}