@koumoul/vjsf 2.22.0 → 3.0.0-alpha.0

package/package.json

@@ -1,99 +1,63 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "2.22.0",
+  "version": "3.0.0-alpha.0",
   "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",
-    "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.3.20"
+  },
+  "dependencies": {
+    "@json-layout/core": "0.1.0",
+    "@json-layout/vocabulary": "0.1.0",
+    "@vueuse/core": "^10.5.0",
+    "debug": "^4.3.4",
+    "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",
+    "vitest": "^0.34.5",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.15"
   }
 }

package/src/compat/v2.js

@@ -0,0 +1,82 @@
+import ajvModule from 'ajv'
+import rfdc from 'rfdc'
+import addFormats from 'ajv-formats'
+import { resolveRefs } from '@json-layout/core'
+
+// @ts-ignore
+const Ajv = /** @type {typeof ajvModule.default} */ (ajvModule)
+
+const clone = rfdc()
+
+const processFragment = (/** @type {import("ajv").SchemaObject} */schema) => {
+  if (!schema.layout) {
+    schema.layout = {}
+    if (schema['x-display']) {
+      schema.layout.comp = schema['x-display']
+      delete schema['x-display']
+    }
+
+    if (schema.format === 'hexcolor') {
+      schema.layout.comp = 'color-picker'
+      delete schema.format
+    }
+
+    if (schema['x-props']) {
+      schema.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.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,32 @@
+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 { 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 {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)) {
+    if (isCompObject(layout)) comps.add(layout.comp)
+    if (isSwitchStruct(layout)) {
+      for (const switchCase of layout.switch) comps.add(switchCase.comp)
+    }
+  }
+  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/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,52 @@
+<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 :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/text-field-menu.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { VMenu, VTextField } from 'vuetify/components'
+import { computed, ref } from 'vue'
+import { getCompProps, getInputProps } from '../../utils/props.js'
+
+const props = defineProps({
+  modelValue: {
+    /** @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
+  },
+  formattedValue: {
+    /** @type import('vue').PropType<string | null> */
+    type: String,
+    default: null
+  }
+})
+
+const fieldProps = computed(() => {
+  const fieldProps = getInputProps(props.modelValue, props.statefulLayout, false)
+  fieldProps.readonly = true
+  return fieldProps
+})
+
+const menuProps = computed(() => {
+  const menuProps = getCompProps(props.modelValue, 'menu', false)
+  menuProps.closeOnContentClick = false
+  menuProps.disabled = true
+  return menuProps
+})
+
+const textField = ref(null)
+const menuOpened = ref(false)
+
+</script>
+
+<template>
+  <v-text-field
+    ref="textField"
+    v-bind="fieldProps"
+    :model-value="formattedValue ?? modelValue.data"
+    @click:control="e => {menuOpened = !menuOpened; e.stopPropagation()}"
+  >
+    <template #prepend-inner>
+      <slot name="prepend-inner" />
+    </template>
+  </v-text-field>
+  <v-menu
+    v-if="textField"
+    v-bind="menuProps"
+    v-model="menuOpened"
+    class="vjsf-text-field-menu"
+    :activator="textField"
+  >
+    <slot :close="() => menuOpened = false" />
+  </v-menu>
+</template>
+
+<style>
+.vjsf-text-field-menu .v-sheet.v-color-picker {
+  overflow-x: hidden;
+}
+</style>

package/src/components/node.vue

@@ -0,0 +1,60 @@
+<script setup>
+import nodeSlot from './fragments/node-slot.vue'
+
+defineProps({
+  modelValue: {
+    /** @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
+  }
+})
+
+/** @type Record<import('./types.js').Density, string> */
+const beforeAfterClasses = {
+  compact: 'my-1',
+  comfortable: 'my-2',
+  default: 'my-3'
+}
+</script>
+
+<template>
+  <v-col
+    :cols="modelValue.cols"
+  >
+    <node-slot
+      v-if="modelValue.layout.slots?.before"
+      key="before"
+      :layout-slot="modelValue.layout.slots?.before"
+      :node="modelValue"
+      :stateful-layout="statefulLayout"
+      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+    />
+
+    <node-slot
+      v-if="modelValue.layout.slots?.component"
+      key="component"
+      :layout-slot="modelValue.layout.slots?.component"
+      :node="modelValue"
+      :stateful-layout="statefulLayout"
+    />
+    <component
+      :is="`vjsf-node-${modelValue.layout.comp}`"
+      v-else-if="modelValue.layout.comp !== 'none'"
+      :model-value="modelValue"
+      :stateful-layout="statefulLayout"
+    />
+    <node-slot
+      v-if="modelValue.layout.slots?.after"
+      key="after"
+      :layout-slot="modelValue.layout.slots?.after"
+      :node="modelValue"
+      :stateful-layout="statefulLayout"
+      :class="beforeAfterClasses[/** @type import('./types.js').VjsfOptions */(modelValue.options).density]"
+    />
+  </v-col>
+</template>

package/src/components/nodes/checkbox.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { VCheckbox } from 'vuetify/components'
+import { computed } from 'vue'
+import { getInputProps } from '../../utils/props.js'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfCheckboxNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const fieldProps = computed(() => getInputProps(props.modelValue, props.statefulLayout))
+</script>
+
+<template>
+  <v-checkbox
+    v-bind="fieldProps"
+    @update:model-value="value => statefulLayout.input(modelValue, value)"
+  />
+</template>

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

@@ -0,0 +1,43 @@
+<script setup>
+import TextFieldMenu from '../fragments/text-field-menu.vue'
+import { VColorPicker } from 'vuetify/components'
+import { computed } from 'vue'
+import { getCompProps } from '../../utils/props.js'
+
+const props = defineProps({
+  modelValue: {
+    /** @type import('vue').PropType<import('../types.js').VjsfColorPickerNode> */
+    type: Object,
+    required: true
+  },
+  statefulLayout: {
+    /** @type import('vue').PropType<import('@json-layout/core').StatefulLayout> */
+    type: Object,
+    required: true
+  }
+})
+
+const colorPickerProps = computed(() => {
+  const colorPickerProps = getCompProps(props.modelValue, 'colorPicker', true)
+  return colorPickerProps
+})
+</script>
+
+<template>
+  <text-field-menu
+    :model-value="modelValue"
+    :stateful-layout="statefulLayout"
+    :formatted-value="modelValue.data"
+  >
+    <template
+      v-if="modelValue.data"
+      #prepend-inner
+    >
+      <div :style="`height:30px; width: 30px; border-radius: 40px; margin-right:6px; background: ${modelValue.data};`" />
+    </template>
+    <v-color-picker
+      v-bind="colorPickerProps"
+      @update:model-value="value => statefulLayout.input(modelValue, value)"
+    />
+  </text-field-menu>
+</template>