@koumoul/vjsf 3.0.0-alpha.4 → 3.0.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.5",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -22,6 +22,12 @@
         "types": "./types/index.d.ts"
       }
     },
+    "./types.js": {
+      "import": {
+        "default": "./src/types.js",
+        "types": "./types/types.d.ts"
+      }
+    },
     "./components/*": {
       "import": {
         "default": "./src/components/*",
@@ -34,6 +40,23 @@
         "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",
@@ -49,15 +72,13 @@
   },
   "peerDependencies": {
     "vue": "^3.3.4",
-    "vuetify": "^3.4.2"
+    "vuetify": "^3.4.8"
   },
   "dependencies": {
-    "@json-layout/core": "0.5.0",
+    "@json-layout/core": "0.7.0",
     "@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",

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') {
-  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') {
     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

@@ -8,26 +8,41 @@ import { useElementSize } from '@vueuse/core'
 import { defaultOptions } from '<%- baseImport %>/components/options.js'
 import Tree from '<%- baseImport %>/components/tree.vue'
 import { useVjsf, emits } from '<%- baseImport %>/composables/use-vjsf.js'
-<% comps.forEach(function(comp){ %>
-import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/components/nodes/<%= comp %>.vue'
+import '<%- baseImport %>/styles/vjsf.css'
+import { registeredNodeComponents } from '<%- baseImport %>/utils'
+
+<% compImports.forEach(function({compName, compImport}){ %>
+import <%= compName %> from '<%- compImport %>'
 <% }); %>
 
 <%- compiledLayoutCode %>
 
-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)
+const nodeComponents = {
+  <% compImports.forEach(function({comp, compName}){ %>
+  "<%= comp %>": <%= compName %>,
+  <% }); %>  
+  ...registeredNodeComponents
 }
-<% }); %>
 
-const props = defineProps(['modelValue', 'options'])
-const emit = defineEmits(Object.keys(emits))
+const props = defineProps({
+  modelValue: {
+    type: null,
+    default: null
+  },
+  options: {
+    /** @type import('vue').PropType<import('<%- baseImport %>/types.js').PartialVjsfOptions> */
+    type: Object,
+    required: true
+  }
+})
+
+const emit = defineEmits(emits)
 
 const { el, statefulLayout, stateTree } = useVjsf(
   null,
   computed(() => props.modelValue),
   computed(() => props.options),
+  nodeComponents,
   emit,
   null,
   computed(() => compiledLayout)
@@ -35,7 +50,10 @@ const { el, statefulLayout, stateTree } = useVjsf(
 </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

@@ -25,7 +25,7 @@ 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

@@ -7,18 +7,18 @@ import HelpMessage from './fragments/help-message.vue'
 
 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',
@@ -35,6 +35,10 @@ const nodeClasses = computed(() => {
   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>
@@ -48,13 +52,13 @@ const nodeClasses = computed(() => {
       :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"
@@ -64,8 +68,8 @@ const nodeClasses = computed(() => {
       :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"
     />
@@ -76,7 +80,7 @@ const nodeClasses = computed(() => {
       :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
     }

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
     }

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

@@ -6,12 +6,12 @@ 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>

package/src/components/nodes/file-input.vue

@@ -0,0 +1,43 @@
+<script>
+import { defineComponent, h, computed } from 'vue'
+import { VFileInput } from 'vuetify/components'
+import { getInputProps, getCompSlots } from '../../utils/index.js'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfFileInputNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('../../types.js').VjsfStatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['placeholder', 'accept'])
+      if (props.modelValue.layout.multiple) {
+        fieldProps.multiple = true
+      } else {
+        fieldProps.modelValue = props.modelValue.data ? [props.modelValue.data] : props.modelValue.data
+        fieldProps['onUpdate:modelValue'] = (/** @type string */value) => props.statefulLayout.input(props.modelValue, Array.isArray(value) ? value[0] : value)
+      }
+      return fieldProps
+    })
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VFileInput, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>
+
+<style>
+.vjsf-node-text-field.vjsf-readonly.vjsf-summary input {
+  text-overflow: ellipsis;
+}
+</style>

package/src/components/nodes/list.vue

@@ -3,17 +3,17 @@ import { watch, computed, ref } from 'vue'
 import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon, VSheet, VSpacer, VDivider, VRow, VListSubheader } from 'vuetify/components'
 import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
-import { moveArrayItem } from '../../utils/arrays.js'
+import { moveArrayItem } from '../../utils/index.js'
 import useDnd from '../../composables/use-dnd.js'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfListNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfListNode> */
     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
   }
@@ -71,7 +71,7 @@ const buttonDensity = computed(() => {
             <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>

package/src/components/nodes/number-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
     }

package/src/components/nodes/number-field.vue

@@ -1,18 +1,17 @@
 <script>
 import { defineComponent, h, computed } from 'vue'
 import { VTextField } 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').VjsfNumberFieldNode> */
+      /** @type import('vue').PropType<import('../../types.js').VjsfNumberFieldNode> */
       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/one-of-select.vue

@@ -6,12 +6,12 @@ import Node from '../node.vue'
 
 const props = defineProps({
   modelValue: {
-    /** @type import('vue').PropType<import('../types.js').VjsfOneOfSelectNode> */
+    /** @type import('vue').PropType<import('../../types.js').VjsfOneOfSelectNode> */
     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
   }
@@ -49,7 +49,7 @@ const onChange = (/** @type import('@json-layout/core').SkeletonTree */childTree
     <node
       v-for="grandChild of isSection(modelValue.children?.[0]) ? modelValue.children?.[0].children : modelValue.children"
       :key="grandChild.fullKey"
-      :model-value="/** @type import('../types.js').VjsfNode */(grandChild)"
+      :model-value="/** @type import('../../types.js').VjsfNode */(grandChild)"
       :stateful-layout="statefulLayout"
     />
   </v-row>