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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.2",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -28,6 +28,12 @@
         "types": "./types/components/*.d.ts"
       }
     },
+    "./composables/*": {
+      "import": {
+        "default": "./src/composables/*",
+        "types": "./types/composables/*.d.ts"
+      }
+    },
     "./compile": {
       "import": {
         "default": "./src/compile/index.js",
@@ -43,13 +49,13 @@
   },
   "peerDependencies": {
     "vue": "^3.3.4",
-    "vuetify": "^3.3.20"
+    "vuetify": "^3.4.2"
   },
   "dependencies": {
-    "@json-layout/core": "0.1.0",
-    "@json-layout/vocabulary": "0.1.0",
+    "@json-layout/core": "0.3.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
+    "easymde": "^2.18.0",
     "ejs": "^3.1.9",
     "rfdc": "^1.3.0"
   },

package/src/compat/v2.js

@@ -2,6 +2,7 @@ import ajvModule from 'ajv'
 import rfdc from 'rfdc'
 import addFormats from 'ajv-formats'
 import { resolveRefs } from '@json-layout/core'
+import { isPartialGetItemsObj } from '@json-layout/vocabulary'
 
 // @ts-ignore
 const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
@@ -10,24 +11,61 @@ 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,27 +4,46 @@ 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'
 
 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
  * @returns {string}
  */
-export function compile (schema, baseImport = '@koumoul/vjsf/components') {
+export function compile (schema, baseImport = '@koumoul/vjsf') {
   const compiledLayout = compileLayout(schema, { 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 })

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

@@ -5,10 +5,11 @@ 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'
+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 %>/nodes/<%= comp %>.vue'
+import <%= comp.replace(/-/g, '') %>Node from '<%- baseImport %>/components/nodes/<%= comp %>.vue'
 <% }); %>
 
 <%- compiledLayoutCode %>
@@ -21,55 +22,16 @@ if (!vueInstance?.appContext.app.component('vjsf-node-<%= comp %>')) {
 <% }); %>
 
 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 }
-  }
-})
-
-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)
-}
-
-watch(fullOptions, (newOptions) => {
-  if (!newOptions) {
-    statefulLayout.value = null
-  } else if (statefulLayout.value) {
-    statefulLayout.value.options = newOptions
-  } else {
-    initStatefulLayout()
-  }
-})
-
-// 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(Object.keys(emits))
+
+const { el, statefulLayout, stateTree } = useVjsf(
+  null,
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  emit,
+  null,
+  compiledLayout
+)
 </script>
 
 <template>

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

@@ -0,0 +1,48 @@
+<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 } 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>

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

@@ -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"

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

@@ -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
 })

package/src/components/node.vue

@@ -1,5 +1,7 @@
 <script setup>
-import nodeSlot from './fragments/node-slot.vue'
+import { VCol } from 'vuetify/components'
+import NodeSlot from './fragments/node-slot.vue'
+import HelpMessage from './fragments/help-message.vue'
 
 defineProps({
   modelValue: {
@@ -25,6 +27,7 @@ const beforeAfterClasses = {
 <template>
   <v-col
     :cols="modelValue.cols"
+    :class="`vjsf-node vjsf-node-${modelValue.layout.comp}`"
   >
     <node-slot
       v-if="modelValue.layout.slots?.before"
@@ -35,6 +38,11 @@ const beforeAfterClasses = {
       :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
     />
 
+    <help-message
+      v-if="modelValue.layout.help"
+      :node="modelValue"
+      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+    />
     <node-slot
       v-if="modelValue.layout.slots?.component"
       key="component"
@@ -48,6 +56,7 @@ const beforeAfterClasses = {
       :model-value="modelValue"
       :stateful-layout="statefulLayout"
     />
+
     <node-slot
       v-if="modelValue.layout.slots?.after"
       key="after"

package/src/components/nodes/autocomplete.vue

@@ -0,0 +1,95 @@
+<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 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: Object,
+      required: true
+    },
+    statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    /** @type import('vue').ShallowRef<import('@json-layout/vocabulary').SelectItems> */
+    const items = shallowRef([])
+    /** @type import('vue').Ref<boolean> */
+    const loading = ref(false)
+    /** @type import('vue').Ref<string> */
+    const search = ref('')
+
+    const fieldProps = computed(() => {
+      const fieldProps = getInputProps(props.modelValue, props.statefulLayout, ['multiple'])
+      if (props.modelValue.options.readOnly) fieldProps.menuProps = { modelValue: false }
+      fieldProps.noFilter = true
+      fieldProps['onUpdate:search'] = (/** @type string */searchValue) => {
+        search.value = searchValue
+        refresh()
+      }
+      fieldProps['onUpdate:menu'] = refresh
+      fieldProps.items = items.value
+      fieldProps.loading = loading.value
+      return fieldProps
+    })
+
+    /** @type import('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
+    /** @type string */
+    let lastSearch = ''
+
+    const refresh = async () => {
+      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext && search.value === lastSearch) return
+      loading.value = true
+      items.value = await props.statefulLayout.getItems(props.modelValue, search.value)
+      lastStateTree = props.statefulLayout.stateTree
+      lastContext = props.statefulLayout.options.context ?? null
+      lastSearch = search.value
+      loading.value = false
+    }
+
+    if (!props.modelValue.layout.items) {
+      refresh()
+    }
+
+    const fieldSlots = computed(() => {
+      const slots = getCompSlots(props.modelValue, props.statefulLayout)
+      if (!slots.item) {
+        slots.item = (/** @type {any} */ context) => h(SelectItem, {
+          multiple: props.modelValue.layout.multiple,
+          itemProps: context.props,
+          item: context.item.raw
+        })
+      }
+      if (!slots.selection) {
+        slots.selection = (/** @type {any} */ context) => h(SelectSelection, {
+          multiple: props.modelValue.layout.multiple,
+          last: props.modelValue.layout.multiple && context.index === props.modelValue.data.length - 1,
+          item: context.item.raw
+        })
+      }
+      return slots
+    })
+
+    // @ts-ignore
+    return () => h(VAutocomplete, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>
+
+<template>
+  <v-select
+    v-bind="fieldProps"
+  />
+</template>

package/src/components/nodes/combobox.vue

@@ -0,0 +1,73 @@
+<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'
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      /** @type import('vue').PropType<import('../types.js').VjsfComboboxNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    }
+  },
+  setup (props) {
+    /** @type import('vue').Ref<import('@json-layout/vocabulary').SelectItems> */
+    const items = shallowRef(props.modelValue.layout.items ?? [])
+    /** @type import('vue').Ref<boolean> */
+    const loading = ref(false)
+
+    /** @type import('@json-layout/core').StateTree | null */
+    let lastStateTree = null
+    /** @type Record<string, any> | null */
+    let lastContext = null
+
+    const hasItems = computed(() => {
+      return !!(props.modelValue.layout.items || props.modelValue.layout.getItems)
+    })
+
+    const refresh = async () => {
+      if (props.modelValue.layout.items) return
+      if (props.statefulLayout.stateTree === lastStateTree && props.statefulLayout.options.context === lastContext) return
+      lastStateTree = props.statefulLayout.stateTree
+      lastContext = props.statefulLayout.options.context ?? null
+      if (hasItems.value) {
+        loading.value = true
+        items.value = await props.statefulLayout.getItems(props.modelValue)
+        loading.value = false
+      }
+    }
+
+    if (!props.modelValue.layout.items) {
+      refresh()
+    }
+
+    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) {
+        fieldProps.multiple = true
+        fieldProps.chips = true
+        fieldProps.closableChips = true
+      }
+      fieldProps['onUpdate:menu'] = () => refresh()
+      return fieldProps
+    })
+
+    const fieldSlots = computed(() => getCompSlots(props.modelValue, props.statefulLayout))
+
+    // @ts-ignore
+    return () => h(VCombobox, fieldProps.value, fieldSlots.value)
+  }
+})
+
+</script>

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

@@ -1,7 +1,7 @@
 <script setup>
 import TextFieldMenu from '../fragments/text-field-menu.vue'
-import { VDatePicker } from 'vuetify/labs/VDatePicker'
-import { useDate } from 'vuetify/labs/date'
+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'