@koumoul/vjsf 2.23.2 → 3.0.0-alpha.1

package/package.json

@@ -1,100 +1,69 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "2.23.2",
+  "version": "3.0.0-alpha.1",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
-  "main": "dist/main.js",
   "scripts": {
-    "lint": "eslint --ext js .",
-    "lint-fix": "eslint --fix --ext js .",
-    "build": "rm -rf dist && webpack && cp lib/VJsf.css dist/main.css",
-    "prepare": "npm run lint && npm test && npm run build && npm run doc-build",
-    "postpublish": "gh-pages-multi deploy -v -s doc/dist -t latest",
-    "test": "jest",
-    "test-watch": "jest --watch",
-    "test-update": "jest --updateSnapshot",
-    "doc-build": "(cd doc && TARGET=https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/ nuxt generate)",
-    "doc-master": "(cd doc && TARGET=https://koumoul-dev.github.io/vuetify-jsonschema-form/master/ nuxt generate) && gh-pages-multi deploy -v -s doc/dist -t master",
-    "doc-2x": "(cd doc && TARGET=https://koumoul-dev.github.io/vuetify-jsonschema-form/2.x/ nuxt generate) && gh-pages-multi deploy -v -s doc/dist -t 2.x",
-    "analyze": "webpack --profile --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "vue"
-    ],
-    "transform": {
-      ".*\\.(vue)$": "vue-jest",
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
-    },
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "lib/**/*.{js,vue}"
-    ],
-    "snapshotSerializers": [
-      "jest-serializer-vue"
-    ],
-    "testEnvironment": "jsdom"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/koumoul-dev/vuetify-jsonschema-form.git"
+    "test": "vitest",
+    "build": "vue-tsc",
+    "watch:build": "vue-tsc --watch"
   },
   "author": "Alban Mouton <alban.mouton@gmail.com>",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/koumoul-dev/vuetify-jsonschema-form/issues"
-  },
-  "homepage": "https://github.com/koumoul-dev/vuetify-jsonschema-form#readme",
-  "dependencies": {
-    "debounce": "^1.2.1",
-    "debounce-promise": "^3.1.2",
-    "debug": "^4.3.3",
-    "fast-copy": "^2.1.1",
-    "fast-equals": "^2.0.4",
-    "match-all": "^1.2.6"
-  },
-  "optionalDependencies": {
-    "@mdi/font": "^6.5.95",
-    "@mdi/js": "^6.5.95",
-    "ajv": "^8.11.0",
-    "ajv-formats": "^2.1.1",
-    "ajv-i18n": "^4.2.0",
-    "expr-eval": "^2.0.2",
-    "markdown-it": "^12.3.2",
-    "property-expr": "^2.0.5",
-    "vuedraggable": "^2.24.3"
+  "files": [
+    "types",
+    "src",
+    "LICENSE"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./src/index.js",
+        "types": "./types/index.d.ts"
+      }
+    },
+    "./components/*": {
+      "import": {
+        "default": "./src/components/*",
+        "types": "./types/components/*.d.ts"
+      }
+    },
+    "./compile": {
+      "import": {
+        "default": "./src/compile/index.js",
+        "types": "./types/compile/index.d.ts"
+      }
+    },
+    "./compat/v2": {
+      "import": {
+        "default": "./src/compat/v2.js",
+        "types": "./types/compat/v2.d.ts"
+      }
+    }
   },
   "peerDependencies": {
-    "vuetify": "^2.0.0"
+    "vue": "^3.3.4",
+    "vuetify": "^3.4.2"
+  },
+  "dependencies": {
+    "@json-layout/core": "0.2.0",
+    "@json-layout/vocabulary": "0.2.0",
+    "@vueuse/core": "^10.5.0",
+    "debug": "^4.3.4",
+    "easymde": "^2.18.0",
+    "ejs": "^3.1.9",
+    "rfdc": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.12",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.11",
-    "@koumoul/data-fair-search-widget": "^0.3.0",
-    "@koumoul/gh-pages-multi": "^0.6.0",
-    "@vue/test-utils": "^1.3.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.4",
-    "eslint": "^6.1.0",
-    "eslint-config-standard": "^13.0.1",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^23.1.1",
-    "eslint-plugin-node": "^9.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "eslint-plugin-vue": "^7.20.0",
-    "jest": "^27.5.1",
-    "jest-serializer-vue": "^2.0.2",
-    "random-words": "^1.1.2",
-    "v-mask": "^2.3.0",
-    "vue-axios": "^2.1.5",
-    "vue-jest": "^3.0.7",
-    "vue-loader": "^15.9.8",
-    "webpack": "^5.72.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2"
+    "@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/"
   }
 }

package/src/compat/v2.js

@@ -0,0 +1,120 @@
+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)
+
+const clone = rfdc()
+
+const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
+  if (!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']) {
+      layout.comp = schema['x-display']
+      delete schema['x-display']
+    }
+
+    if (schema.format === 'hexcolor') {
+      layout.comp = 'color-picker'
+      delete schema.format
+    }
+
+    if (schema['x-props']) {
+      layout.props = schema['x-props']
+      delete schema['x-props']
+    }
+
+    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
+    }
+  }
+
+  if (schema.type === 'object') {
+    if (schema.properties) {
+      for (const propertyKey of Object.keys(schema.properties)) {
+        processFragment(schema.properties[propertyKey])
+      }
+    }
+    if (schema.allOf) {
+      for (const item of schema.allOf) processFragment(item)
+    }
+    if (schema.oneOf) {
+      for (const item of schema.oneOf) processFragment(item)
+    }
+    if (schema.anyOf) {
+      for (const item of schema.anyOf) processFragment(item)
+    }
+  }
+
+  if (schema.type === 'array' && schema.items) {
+    if (Array.isArray(schema.items)) {
+      for (const item of schema.items) processFragment(item)
+    } else {
+      processFragment(schema.items)
+    }
+  }
+}
+
+/**
+ *
+ * @param {object} _schema
+ * @param {import("ajv").default} [_ajv]
+ * @param {string} lang
+ * @returns
+ */
+export function v2compat (_schema, _ajv, lang = 'en') {
+  let ajv = _ajv
+  if (!ajv) {
+    /** @type {import('ajv').Options} */
+    const ajvOpts = { strict: false, allErrors: true }
+    const newAjv = new Ajv(ajvOpts)
+    addFormats.default(newAjv)
+    ajv = newAjv
+  }
+
+  const schema = /** @type {import("ajv").SchemaObject} */ (clone(_schema))
+  schema.$id = schema.$id ?? '_jl'
+  resolveRefs(schema, ajv, lang)
+  processFragment(schema)
+  return schema
+}

package/src/compile/index.js

@@ -0,0 +1,51 @@
+import { readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+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 { 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') {
+  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)) {
+    listComps(comps, layout)
+  }
+  comps.delete('none')
+  const code = ejs.render(template, { compiledLayoutCode, comps, baseImport })
+  return code
+}

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

@@ -0,0 +1,83 @@
+<script setup>
+// @ts-nocheck
+
+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 %>
+
+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 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
+})
+
+</script>
+
+<template>
+  <div ref="el">
+    <tree
+      v-if="statefulLayout && stateTree"
+      :model-value="stateTree"
+      :stateful-layout="statefulLayout"
+    />
+  </div>
+</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/node-slot.vue

@@ -0,0 +1,49 @@
+<script>
+// @ts-nocheck
+
+import { isTextSlot, isMarkdownSlot, isNameSlot } from '@json-layout/vocabulary'
+import { h } from 'vue'
+
+export default {
+  props: {
+    layoutSlot: {
+      /** @type import('vue').PropType<import('@json-layout/vocabulary').Slot> */
+      type: Object,
+      required: true
+    },
+    node: {
+      /** @type import('vue').PropType<import('../types.js').VjsfNode> */
+      type: Object,
+      required: true
+    },
+    statefulLayout: {
+      /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+      type: Object,
+      required: true
+    },
+    tag: {
+      /** @type import('vue').PropType<string> */
+      type: String,
+      default: null
+    }
+  },
+  render () {
+    const renderTag = this.tag ?? (isTextSlot(this.layoutSlot) ? 'p' : 'div')
+
+    if (isTextSlot(this.layoutSlot)) {
+      return h(renderTag, this.layoutSlot.text)
+    }
+    if (isMarkdownSlot(this.layoutSlot)) {
+      return h(renderTag, { innerHTML: this.layoutSlot.markdown })
+    }
+    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.`)
+      } else {
+        return h(renderTag, this.statefulLayout.options.vjsfSlots[this.layoutSlot.name]({ node: this.node, statefulLayout: this.statefulLayout }))
+      }
+    }
+    return null
+  }
+}
+</script>

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

@@ -0,0 +1,55 @@
+<script setup>
+import { VAlert } from 'vuetify/components'
+import { computed } from 'vue'
+
+const props = defineProps({
+  node: {
+    /** @type import('vue').PropType<import('../types.js').VjsfNode> */
+    type: Object,
+    required: true
+  }
+})
+
+const titleDepthBase = computed(() => {
+  if (props.node.options.density === 'compact') return 6
+  if (props.node.options.density === 'comfortable') return 7
+  return 8
+})
+
+const classes = ['text-h1', 'text-h2', 'text-h3', 'text-h4', 'text-h5', 'text-h6', 'text-subtitle-1', 'text-subtitle-2']
+const titleClass = computed(() => {
+  const index = props.node.options.titleDepth
+  if (props.node.options.density === 'compact') return classes[index + 2]
+  if (props.node.options.density === 'comfortable') return classes[index + 1]
+  return classes[index]
+})
+</script>
+
+<template>
+  <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"
+      :class="`${titleClass}`"
+    >
+      {{ node.layout.title }}
+    </component>
+    <p
+      v-if="node.layout.subtitle"
+      :class="`text-subtitle mt-${titleDepthBase - node.options.titleDepth}`"
+    >
+      {{ node.layout.subtitle }}
+    </p>
+    <v-alert
+      v-if="node.error && node.validated"
+      v-bind="node.options.errorAlertProps"
+      :class="`mt-${titleDepthBase - node.options.titleDepth}`"
+      :density="node.options.density"
+    >
+      {{ node.error }}
+    </v-alert>
+  </div>
+</template>

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>