@koumoul/vjsf 3.0.0-alpha.1 → 3.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.11",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -22,12 +22,41 @@
         "types": "./types/index.d.ts"
       }
     },
+    "./types.js": {
+      "import": {
+        "default": "./src/types.js",
+        "types": "./types/types.d.ts"
+      }
+    },
     "./components/*": {
       "import": {
         "default": "./src/components/*",
         "types": "./types/components/*.d.ts"
       }
     },
+    "./composables/*": {
+      "import": {
+        "default": "./src/composables/*",
+        "types": "./types/composables/*.d.ts"
+      }
+    },
+    "./utils": {
+      "import": {
+        "default": "./src/utils/index.js",
+        "types": "./types/utils/index.d.ts"
+      }
+    },
+    "./utils/*": {
+      "import": {
+        "default": "./src/utils/*",
+        "types": "./types/utils/*.d.ts"
+      }
+    },
+    "./styles/*": {
+      "import": {
+        "default": "./src/styles/*"
+      }
+    },
     "./compile": {
       "import": {
         "default": "./src/compile/index.js",
@@ -42,28 +71,20 @@
     }
   },
   "peerDependencies": {
-    "vue": "^3.3.4",
-    "vuetify": "^3.4.2"
+    "vue": "^3.4.3",
+    "vuetify": "^3.4.9"
   },
   "dependencies": {
-    "@json-layout/core": "0.2.0",
-    "@json-layout/vocabulary": "0.2.0",
+    "@json-layout/core": "0.8.1",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
-    "easymde": "^2.18.0",
-    "ejs": "^3.1.9",
-    "rfdc": "^1.3.0"
+    "ejs": "^3.1.9"
   },
   "devDependencies": {
     "@types/debug": "^4.1.8",
     "@types/ejs": "^3.1.2",
-    "relative-deps": "^1.0.7",
-    "vitest": "^0.34.5",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.15"
-  },
-  "relativeDependencies": {
-    "@json-layout/core": "../../json-layout/core/",
-    "@json-layout/vocabulary": "../../json-layout/vocabulary/"
+    "vitest": "^1.1.1",
+    "vue": "^3.4.3",
+    "vue-tsc": "^1.8.27"
   }
 }

package/src/compat/v2.js

@@ -1,14 +1,11 @@
 import ajvModule from 'ajv'
-import rfdc from 'rfdc'
 import addFormats from 'ajv-formats'
-import { resolveRefs } from '@json-layout/core'
+import { resolveRefs, clone } from '@json-layout/core'
 import { isPartialGetItemsObj } from '@json-layout/vocabulary'
 
 // @ts-ignore
 const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
 
-const clone = rfdc()
-
 const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
   if (!schema.layout) {
     /** @type import('@json-layout/vocabulary').PartialCompObject */

package/src/compile/index.js

@@ -5,6 +5,7 @@ import ejs from 'ejs'
 import { compile as compileLayout } from '@json-layout/core'
 import { serialize as serializeCompiledLayout } from '@json-layout/core/src/compile/serialize'
 import { childIsCompObject, isCompObject, isSwitchStruct } from '@json-layout/vocabulary'
+import { getFullOptions } from './options.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
@@ -34,11 +35,13 @@ function listComps (comps, layout) {
 
 /**
  * @param {object} schema
- * @param {string} baseImport
+ * @param {import('../types.js').PartialVjsfCompileOptions} [options]
+ * @param {string} [baseImport]
  * @returns {string}
  */
-export function compile (schema, baseImport = '@koumoul/vjsf/components') {
-  const compiledLayout = compileLayout(schema, { code: true })
+export function compile (schema, options = {}, baseImport = '@koumoul/vjsf') {
+  const fullOptions = getFullOptions(options)
+  const compiledLayout = compileLayout(schema, { ...fullOptions, code: true })
   const compiledLayoutCode = serializeCompiledLayout(compiledLayout)
   /** @type Set<string> */
   const comps = new Set([])
@@ -46,6 +49,17 @@ export function compile (schema, baseImport = '@koumoul/vjsf/components') {
     listComps(comps, layout)
   }
   comps.delete('none')
-  const code = ejs.render(template, { compiledLayoutCode, comps, baseImport })
+
+  const compImports = [...comps].map(comp => {
+    const compName = comp.replace(/-/g, '') + 'Node'
+    const compImport = fullOptions.nodeComponentImports[comp] ?? `${baseImport}/components/nodes/${comp}.vue`
+    return {
+      comp,
+      compName,
+      compImport
+    }
+  })
+
+  const code = ejs.render(template, { compiledLayoutCode, compImports, baseImport })
   return code
 }

package/src/compile/options.js

@@ -0,0 +1,19 @@
+/** @type import("../types.js").PartialVjsfCompileOptions */
+export const defaultOptions = {
+  nodeComponentImports: {
+    markdown: '@koumoul/vjsf-markdown/components/nodes/markdown.vue'
+  }
+}
+
+/**
+ *
+ * @param {import("../types.js").PartialVjsfCompileOptions} options
+ * @returns
+ */
+export const getFullOptions = (options) => {
+  const fullOptions = {
+    ...defaultOptions,
+    nodeComponentImports: { ...defaultOptions.nodeComponentImports, ...options.nodeComponentImports }
+  }
+  return /** @type import('../types.js').VjsfCompileOptions */ (fullOptions)
+}

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

@@ -2,78 +2,56 @@
 // @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 %>/options.js'
-import Tree from '<%- baseImport %>/tree.vue'
-<% comps.forEach(function(comp){ %>
-import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/nodes/<%= comp %>.vue'
-<% }); %>
-
-<%- compiledLayoutCode %>
+import { defaultOptions } from '<%- baseImport %>/components/options.js'
+import Tree from '<%- baseImport %>/components/tree.vue'
+import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
+import '<%- baseImport %>/styles/vjsf.css'
 
-const vueInstance = getCurrentInstance()
-<% comps.forEach(function(comp){ %>
-if (!vueInstance?.appContext.app.component('vjsf-node-<%= comp %>')) {
-  vueInstance.appContext.app.component('vjsf-node-<%= comp %>', <%= comp.replace(/-/g, '') %>Node)
-}
+<% compImports.forEach(function({compName, compImport}){ %>
+import <%= compName %> from '<%- compImport %>'
 <% }); %>
 
-const props = defineProps(['modelValue', 'options'])
-const emit = defineEmits(['update:modelValue', 'update:state'])
-
-const statefulLayout = shallowRef(null)
-const stateTree = shallowRef(null)
-
-const el = ref(null)
-const { width } = useElementSize(el)
-
-const slots = useSlots()
-
-const fullOptions = computed(() => {
-  if (!width.value) return null
-  return {
-    ...defaultOptions,
-    ...props.options,
-    context: props.options.context ? JSON.parse(JSON.stringify(props.options.context)) : {},
-    width: Math.round(width.value),
-    vjsfSlots: { ...slots }
-  }
-})
+<%- compiledLayoutCode %>
 
-const initStatefulLayout = () => {
-  if (!fullOptions.value) return
-  const _statefulLayout = new StatefulLayout(compiledLayout, compiledLayout.skeletonTree, fullOptions.value, props.modelValue)
-  statefulLayout.value = _statefulLayout
-  stateTree.value = _statefulLayout.stateTree
-  _statefulLayout.events.on('update', () => {
-    stateTree.value = _statefulLayout.stateTree
-    emit('update:modelValue', _statefulLayout.data)
-    emit('update:state', _statefulLayout)
-  })
-  emit('update:state', _statefulLayout)
+const nodeComponents = {
+  <% compImports.forEach(function({comp, compName}){ %>
+  "<%= comp %>": <%= compName %>,
+  <% }); %>  
 }
 
-watch(fullOptions, (newOptions) => {
-  if (!newOptions) {
-    statefulLayout.value = null
-  } else if (statefulLayout.value) {
-    statefulLayout.value.options = newOptions
-  } else {
-    initStatefulLayout()
+const props = defineProps({
+  modelValue: {
+    type: null,
+    default: null
+  },
+  options: {
+    /** @type import('vue').PropType<import('<%- baseImport %>/types.js').PartialVjsfOptions | null> */
+    type: Object,
+    default: null
   }
 })
 
-// case where data is updated from outside
-watch(() => props.modelValue, (newData) => {
-  if (statefulLayout.value && statefulLayout.value.data !== newData) statefulLayout.value.data = newData
-})
-
+const emit = defineEmits(emits)
+
+const { el, statefulLayout, stateTree } = useVjsf(
+  null,
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  nodeComponents,
+  emit,
+  null,
+  computed(() => compiledLayout)
+)
 </script>
 
 <template>
-  <div ref="el">
+  <div
+    ref="el"
+    class="vjsf"
+  >
     <tree
       v-if="statefulLayout && stateTree"
       :model-value="stateTree"

package/src/components/fragments/help-message.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script setup>
-import { VAlert, VBtn } from 'vuetify/components'
+import { VAlert, VBtn, VSlideXReverseTransition } from 'vuetify/components'
 import { ref } from 'vue'
 
 defineProps({
   node: {
-    /** @type import('vue').PropType<import('../types.js').VjsfNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
     type: Object,
     required: true
   }
@@ -46,3 +46,4 @@ const show = ref(false)
   z-index: 1;
 }
 </style>
+../../../types.js

package/src/components/fragments/node-slot.vue

@@ -12,12 +12,12 @@ export default {
       required: true
     },
     node: {
-      /** @type import('vue').PropType<import('../types.js').VjsfNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     },
@@ -38,7 +38,7 @@ export default {
     }
     if (isNameSlot(this.layoutSlot)) {
       if (!this.statefulLayout.options.vjsfSlots[this.layoutSlot.name]) {
-        console.error(`layout references a code slot "${this.layoutSlot.name}" that was not provided.`)
+        console.error(`vjsf: layout references a code slot "${this.layoutSlot.name}" that was not provided.`)
       } else {
         return h(renderTag, this.statefulLayout.options.vjsfSlots[this.layoutSlot.name]({ node: this.node, statefulLayout: this.statefulLayout }))
       }

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

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 
 const props = defineProps({
   node: {
-    /** @type import('vue').PropType<import('../types.js').VjsfNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
     type: Object,
     required: true
   }
@@ -53,3 +53,4 @@ const titleClass = computed(() => {
     </v-alert>
   </div>
 </template>
+../../../types.js

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

@@ -1,16 +1,16 @@
 <script setup>
 import { VMenu, VTextField } from 'vuetify/components'
 import { computed, ref } from 'vue'
-import { getCompProps, getInputProps } from '../../utils/props.js'
+import { getCompProps, getInputProps } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   },

package/src/components/node.vue

@@ -1,33 +1,50 @@
 <script setup>
+import { computed } from 'vue'
+import { useTheme } from 'vuetify'
 import { VCol } from 'vuetify/components'
 import NodeSlot from './fragments/node-slot.vue'
 import HelpMessage from './fragments/help-message.vue'
 
-defineProps({
+const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('./types.js').VjsfNode> */
+    /** @type import('vue').PropType<import('../types.js').VjsfNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
 })
 
-/** @type Record<import('./types.js').Density, string> */
+/** @type Record<import('../types.js').Density, string> */
 const beforeAfterClasses = {
   compact: 'my-1',
   comfortable: 'my-2',
   default: 'my-3'
 }
+
+const theme = useTheme()
+
+const nodeClasses = computed(() => {
+  let classes = `vjsf-node vjsf-node-${props.modelValue.layout.comp} vjsf-density-${props.modelValue.options.density}`
+  if (props.modelValue.options.readOnly) classes += ' vjsf-readonly'
+  if (props.modelValue.options.summary) classes += ' vjsf-summary'
+  if (theme.current.value.dark) classes += ' vjsf-dark'
+  return classes
+})
+
+if (!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="`vjsf-node vjsf-node-${modelValue.layout.comp}`"
+    :class="nodeClasses"
   >
     <node-slot
       v-if="modelValue.layout.slots?.before"
@@ -35,13 +52,13 @@ const beforeAfterClasses = {
       :layout-slot="modelValue.layout.slots?.before"
       :node="modelValue"
       :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+      :class="beforeAfterClasses[modelValue.options.density]"
     />
 
     <help-message
       v-if="modelValue.layout.help"
       :node="modelValue"
-      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+      :class="beforeAfterClasses[modelValue.options.density]"
     />
     <node-slot
       v-if="modelValue.layout.slots?.component"
@@ -51,8 +68,8 @@ const beforeAfterClasses = {
       :stateful-layout="statefulLayout"
     />
     <component
-      :is="`vjsf-node-${modelValue.layout.comp}`"
-      v-else-if="modelValue.layout.comp !== 'none'"
+      :is="props.statefulLayout.options.nodeComponents[modelValue.layout.comp]"
+      v-else-if="modelValue.layout.comp !== 'none' "
       :model-value="modelValue"
       :stateful-layout="statefulLayout"
     />
@@ -63,7 +80,7 @@ const beforeAfterClasses = {
       :layout-slot="modelValue.layout.slots?.after"
       :node="modelValue"
       :stateful-layout="statefulLayout"
-      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+      :class="beforeAfterClasses[modelValue.options.density]"
     />
   </v-col>
 </template>

package/src/components/nodes/autocomplete.vue

@@ -1,20 +1,19 @@
 <script>
 import { VAutocomplete } from 'vuetify/components'
 import { defineComponent, computed, ref, shallowRef, h } from 'vue'
-import { getInputProps } from '../../utils/props.js'
-import { getCompSlots } from '../../utils/slots.js'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 import SelectItem from '../fragments/select-item.vue'
 import SelectSelection from '../fragments/select-selection.vue'
 
 export default defineComponent({
   props: {
     modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfSelectNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfSelectNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
@@ -87,9 +86,3 @@ export default defineComponent({
 })
 
 </script>
-
-<template>
-  <v-select
-    v-bind="fieldProps"
-  />
-</template>

package/src/components/nodes/checkbox.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { VCheckbox } from 'vuetify/components'
 import { computed } from 'vue'
-import { getInputProps } from '../../utils/props.js'
+import { getInputProps } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfCheckboxNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfCheckboxNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }

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

@@ -2,16 +2,16 @@
 import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VColorPicker } from 'vuetify/components'
 import { computed } from 'vue'
-import { getCompProps } from '../../utils/props.js'
+import { getCompProps } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfColorPickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfColorPickerNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }

package/src/components/nodes/combobox.vue

@@ -1,18 +1,17 @@
 <script>
 import { defineComponent, h, computed, shallowRef, ref } from 'vue'
 import { VCombobox } from 'vuetify/components'
-import { getInputProps } from '../../utils/props.js'
-import { getCompSlots } from '../../utils/slots.js'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
 
 export default defineComponent({
   props: {
     modelValue: {
-      /** @type import('vue').PropType<import('../types.js').VjsfComboboxNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfComboboxNode> */
       type: Object,
       required: true
     },
     statefulLayout: {
-      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
       type: Object,
       required: true
     }
@@ -37,7 +36,6 @@ export default defineComponent({
       if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
       lastStateTree = props.statefulLayout.stateTree
       lastContext = props.statefulLayout.options.context ?? null
-      console.log('HAS ITEMS ?', hasItems.value)
       if (hasItems.value) {
         loading.value = true
         items.value = await props.statefulLayout.getItems(props.modelValue)
@@ -52,6 +50,7 @@ export default defineComponent({
     const fieldProps = computed(() => {
       const fieldProps = getInputProps(props.modelValue, props.statefulLayout)
       fieldProps.loading = loading.value
+      fieldProps.returnObject = false
       if (hasItems.value) fieldProps.items = items.value
       if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
       if (props.modelValue.layout.multiple) {

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

@@ -3,17 +3,16 @@ import TextFieldMenu from '../fragments/text-field-menu.vue'
 import { VDatePicker } from 'vuetify/components/VDatePicker'
 import { useDate } from 'vuetify'
 import { computed } from 'vue'
-import { getCompProps } from '../../utils/props.js'
-import { getDateTimeParts } from '../../utils/dates.js'
+import { getCompProps, getDateTimeParts } from '../../utils/index.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfDatePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDatePickerNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }

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

@@ -2,12 +2,12 @@
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfDateTimePickerNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfDateTimePickerNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }

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

@@ -1,17 +1,17 @@
 <script setup>
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer } from 'vuetify/components'
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VContainer, VRow, VIcon } from 'vuetify/components'
 import { isSection } from '@json-layout/core'
 import Node from '../node.vue'
 import SectionHeader from '../fragments/section-header.vue'
 
 defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfExpansionPanelsNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfExpansionPanelsNode> */
     type: Object,
     required: true
   },
   statefulLayout: {
-    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
     type: Object,
     required: true
   }
@@ -42,7 +42,7 @@ defineProps({
           <node
             v-for="grandChild of isSection(child) ? child.children : [child]"
             :key="grandChild.fullKey"
-            :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+            :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
             :stateful-layout="statefulLayout"
           />
         </v-row>