@koumoul/vjsf 3.0.0-alpha.0 → 3.0.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.10",
   "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,22 +71,20 @@
     }
   },
   "peerDependencies": {
-    "vue": "^3.3.4",
-    "vuetify": "^3.3.20"
+    "vue": "^3.4.3",
+    "vuetify": "^3.4.9"
   },
   "dependencies": {
-    "@json-layout/core": "0.1.0",
-    "@json-layout/vocabulary": "0.1.0",
+    "@json-layout/core": "0.8.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
-    "ejs": "^3.1.9",
-    "rfdc": "^1.3.0"
+    "ejs": "^3.1.9"
   },
   "devDependencies": {
     "@types/debug": "^4.1.8",
     "@types/ejs": "^3.1.2",
-    "vitest": "^0.34.5",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.15"
+    "vitest": "^1.1.1",
+    "vue": "^3.4.3",
+    "vue-tsc": "^1.8.27"
   }
 }

package/src/compat/v2.js

@@ -1,33 +1,68 @@
 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) {
-    schema.layout = {}
+    /** @type import('@json-layout/vocabulary').PartialCompObject */
+    const layout = {}
+
+    if (schema['x-display'] === 'icon' && (schema.enum || schema.items?.enum)) {
+      layout.getItems = { itemIcon: schema['x-itemIcon'] || 'data.value' }
+      delete schema['x-display']
+    }
+
     if (schema['x-display']) {
-      schema.layout.comp = schema['x-display']
+      layout.comp = schema['x-display']
       delete schema['x-display']
     }
 
     if (schema.format === 'hexcolor') {
-      schema.layout.comp = 'color-picker'
+      layout.comp = 'color-picker'
       delete schema.format
     }
 
     if (schema['x-props']) {
-      schema.layout.props = schema['x-props']
+      layout.props = schema['x-props']
       delete schema['x-props']
     }
 
-    if (Object.keys(schema.layout).length === 1 && 'comp' in schema.layout) {
-      schema.layout = schema.layout.comp
+    if (schema['x-fromData']) {
+      layout.comp = 'select'
+      layout.getItems = { expr: schema['x-fromData'] }
+      delete schema['x-fromData']
+    }
+
+    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 }
+      delete schema['x-fromUrl']
+    }
+    if (layout.getItems && isPartialGetItemsObj(layout.getItems)) {
+      if (schema['x-itemKey']) layout.getItems.itemKey = `data["${schema['x-itemKey']}"]`
+      if (schema['x-itemTitle']) layout.getItems.itemTitle = `data["${schema['x-itemTitle']}"]`
+      if (schema['x-itemValue']) layout.getItems.itemValue = `data["${schema['x-itemValue']}"]`
+      if (schema['x-itemIcon']) layout.getItems.itemIcon = `data["${schema['x-itemIcon']}"]`
+      if (schema['x-itemsProp']) layout.getItems.itemsResults = `data["${schema['x-itemsProp']}"]`
+      delete schema['x-itemKey']
+      delete schema['x-itemTitle']
+      delete schema['x-itemValue']
+      delete schema['x-itemsProp']
+    }
+
+    // compact the layout keyword if possible
+    if (Object.keys(layout).length === 1 && 'comp' in layout) {
+      schema.layout = layout.comp
+    } else if (Object.keys(layout).length > 0) {
+      schema.layout = layout
     }
   }
 

package/src/compile/index.js

@@ -4,29 +4,62 @@ import path from 'path'
 import ejs from 'ejs'
 import { compile as compileLayout } from '@json-layout/core'
 import { serialize as serializeCompiledLayout } from '@json-layout/core/src/compile/serialize'
-import { isCompObject, isSwitchStruct } from '@json-layout/vocabulary'
+import { childIsCompObject, isCompObject, isSwitchStruct } from '@json-layout/vocabulary'
+import { getFullOptions } from './options.js'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const template = readFileSync(path.join(__dirname, 'v-jsf-compiled.vue.ejs'), 'utf8')
 
+/**
+ *
+ * @param {Set<string>} comps
+ * @param {import('@json-layout/vocabulary').NormalizedLayout} layout
+ */
+function listComps (comps, layout) {
+  if (isCompObject(layout)) {
+    comps.add(layout.comp)
+    if (layout.children) {
+      for (const child of /** @type {import('@json-layout/vocabulary').Children} */(layout.children)) {
+        if (childIsCompObject(child)) {
+          listComps(comps, child)
+        }
+      }
+    }
+  } else if (isSwitchStruct(layout)) {
+    for (const switchCase of layout.switch) {
+      listComps(comps, switchCase)
+    }
+  }
+}
+
 /**
  * @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([])
   for (const layout of Object.values(compiledLayout.normalizedLayouts)) {
-    if (isCompObject(layout)) comps.add(layout.comp)
-    if (isSwitchStruct(layout)) {
-      for (const switchCase of layout.switch) comps.add(switchCase.comp)
-    }
+    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

@@ -5,75 +5,53 @@ import { StatefulLayout } from '@json-layout/core'
 import { ref, shallowRef, getCurrentInstance, useSlots } 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

@@ -0,0 +1,49 @@
+<template>
+  <div class="vjsf-help-message">
+    <v-slide-x-reverse-transition>
+      <v-alert
+        v-show="show"
+        color="info"
+      >
+        <div v-html="node.layout.help" />
+      </v-alert>
+    </v-slide-x-reverse-transition>
+    <v-btn
+      color="info"
+      class="vjsf-help-message-toggle"
+      :icon="show ? 'mdi-close-circle' : 'mdi-information'"
+      density="compact"
+      :title="show ? '' : node.messages.showHelp"
+      @click="show = !show"
+    />
+  </div>
+</template>
+
+<script setup>
+import { VAlert, VBtn, VSlideXReverseTransition } from 'vuetify/components'
+import { ref } from 'vue'
+
+defineProps({
+  node: {
+    /** @type import('vue').PropType<import('../../types.js').VjsfNode> */
+    type: Object,
+    required: true
+  }
+})
+
+const show = ref(false)
+</script>
+
+<style>
+.vjsf-help-message {
+  position: relative;
+  min-height: 10px;
+}
+.vjsf-help-message-toggle {
+  position: absolute;
+  top: -10px;
+  right: -4px;
+  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
   }
@@ -26,7 +26,10 @@ const titleClass = computed(() => {
 </script>
 
 <template>
-  <div :class="`mb-${titleDepthBase - node.options.titleDepth} mt-${titleDepthBase - node.options.titleDepth}`">
+  <div
+    v-if="node.layout.title ?? 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"
@@ -50,3 +53,4 @@ const titleClass = computed(() => {
     </v-alert>
   </div>
 </template>
+../../../types.js

package/src/components/fragments/select-item-icon.vue

@@ -0,0 +1,28 @@
+<script>
+// 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'
+
+export default defineComponent({
+  props: {
+    icon: {
+      type: String,
+      required: true
+    }
+  },
+  setup (props) {
+    const isUrl = computed(() => props.icon.startsWith('http://') || props.icon.startsWith('https://'))
+    const isSVG = computed(() => props.icon.startsWith('<?xml') || props.icon.startsWith('<svg'))
+    return () => {
+      if (isUrl.value) {
+        return h('img', { src: props.icon, style: 'height:100%;width:100%;' })
+      } 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)
+      }
+    }
+  }
+})
+</script>

package/src/components/fragments/select-item.vue

@@ -0,0 +1,43 @@
+<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 VSelectItemIcon from './select-item-icon.vue'
+
+defineProps({
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  itemProps: {
+    type: Object,
+    required: true
+  },
+  item: {
+    /** @type import('vue').PropType<import('@json-layout/vocabulary').SelectItem> */
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <v-list-item v-bind="itemProps">
+    <template
+      v-if="item.icon || multiple"
+      #prepend="{isSelected}"
+    >
+      <v-checkbox-btn
+        v-if="multiple"
+        :key="item.key"
+        :ripple="false"
+        tabindex="-1"
+        :model-value="isSelected"
+      />
+      <v-select-item-icon
+        v-if="item.icon"
+        :icon="item.icon"
+      />
+    </template>
+  </v-list-item>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup>
+// cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.tsx#L453
+
+import VSelectItemIcon from './select-item-icon.vue'
+
+defineProps({
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  last: {
+    type: Boolean,
+    default: false
+  },
+  item: {
+    /** @type import('vue').PropType<import('@json-layout/vocabulary').SelectItem> */
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <span class="v-select__selection-text">
+    <v-select-item-icon
+      v-if="item.icon"
+      :icon="item.icon"
+    />
+    {{ item.title }}
+    <span
+      v-if="multiple && !last"
+      class="v-select__selection-comma"
+    >,</span>
+  </span>
+</template>

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
   },
@@ -22,7 +22,7 @@ const props = defineProps({
 })
 
 const fieldProps = computed(() => {
-  const fieldProps = getInputProps(props.modelValue, props.statefulLayout, false)
+  const fieldProps = getInputProps(props.modelValue, props.statefulLayout, [], false)
   fieldProps.readonly = true
   return fieldProps
 })