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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koumoul/vjsf",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "description": "Generate forms for the vuetify UI library (vuejs) based on annotated JSON schemas.",
   "scripts": {
     "test": "vitest",
@@ -52,7 +52,7 @@
     "vuetify": "^3.4.2"
   },
   "dependencies": {
-    "@json-layout/core": "0.3.0",
+    "@json-layout/core": "0.4.0",
     "@vueuse/core": "^10.5.0",
     "debug": "^4.3.4",
     "easymde": "^2.18.0",

package/src/compat/v2.js

@@ -1,14 +1,11 @@
 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) {
     /** @type import('@json-layout/vocabulary').PartialCompObject */

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

@@ -30,7 +30,7 @@ const { el, statefulLayout, stateTree } = useVjsf(
   computed(() => props.options),
   emit,
   null,
-  compiledLayout
+  computed(() => compiledLayout)
 )
 </script>
 

package/src/components/nodes/list.vue

@@ -1,9 +1,8 @@
 <script setup>
 import { watch, computed, ref } from 'vue'
 import { VList, VListItem, VListItemAction, VBtn, VMenu, VIcon } from 'vuetify/components'
-import { isSection } from '@json-layout/core'
+import { isSection, clone } from '@json-layout/core'
 import Node from '../node.vue'
-import clone from '../../utils/clone.js'
 import { moveArrayItem } from '../../utils/arrays.js'
 import useDnd from '../../composables/use-dnd.js'
 

package/src/components/nodes/markdown.vue

@@ -3,8 +3,7 @@ import { defineComponent, h, computed, onMounted, ref, onUnmounted, watch } from
 import { VInput, VLabel } from 'vuetify/components'
 import { getInputProps } from '../../utils/props.js'
 import { getCompSlots } from '../../utils/slots.js'
-// import 'easymde/dist/easymde.min.css'
-// import EasyMDE from 'easymde'
+import 'easymde/dist/easymde.min.css'
 
 export default defineComponent({
   props: {
@@ -29,7 +28,7 @@ export default defineComponent({
       fieldSlots.default = () => [
         h('div', { style: 'width:100%' }, [
           h(VLabel, { text: fieldProps.value.label }),
-          h('textarea', { ref: element })
+          h('textarea', { ref: element, style: 'display:none' })
         ])
       ]
       return fieldSlots
@@ -41,8 +40,6 @@ export default defineComponent({
     const initEasyMDE = async () => {
       if (!element.value) throw new Error('component was not mounted for markdown editor')
 
-      // @ts-ignore
-      await import('easymde/dist/easymde.min.css')
       const EasyMDE = (await import('easymde')).default
 
       const messages = props.modelValue.messages
@@ -187,6 +184,10 @@ export default defineComponent({
       easymde.codemirror.on('focus', () => {
         if (blurTimeout) clearTimeout(blurTimeout)
       })
+
+      if (props.modelValue.autofocus) {
+        easymde.codemirror.focus()
+      }
     }
 
     onMounted(initEasyMDE)
@@ -203,8 +204,16 @@ export default defineComponent({
     })
 
     // update easymde config from outside
-    watch(() => [props.modelValue.messages, props.modelValue.options.easyMDEOptions], () => {
-      initEasyMDE()
+    watch(() => [props.modelValue.messages, props.modelValue.options.easyMDEOptions], (newValues, oldValues) => {
+      if (newValues[0] !== oldValues[0] || newValues[1] !== oldValues[1]) {
+        initEasyMDE()
+      }
+    })
+
+    props.statefulLayout.events.on('autofocus', () => {
+      if (props.modelValue.autofocus && easymde) {
+        easymde.codemirror.focus()
+      }
     })
 
     return () => h(VInput, fieldProps.value, fieldSlots.value)

package/src/components/vjsf.vue

@@ -88,7 +88,7 @@ const { el, statefulLayout, stateTree } = useVjsf(
   computed(() => props.options),
   emit,
   compile,
-  props.precompiledLayout
+  computed(() => props.precompiledLayout)
 )
 
 </script>

package/src/composables/use-vjsf.js

@@ -19,8 +19,8 @@ export const emits = {
  * @param {import('vue').Ref<any>} modelValue
  * @param {import('vue').Ref<import("../components/types.js").PartialVjsfOptions>} options
  * @param {any} emit
- * @param {typeof import('@json-layout/core').compile} compile
- * @param {import('@json-layout/core').CompiledLayout} [precompiledLayout]
+ * @param {typeof import('@json-layout/core').compile} [compile]
+ * @param {import('vue').Ref<import('@json-layout/core').CompiledLayout>} [precompiledLayout]
  */
 export const useVjsf = (schema, modelValue, options, emit, compile, precompiledLayout) => {
   const el = ref(null)
@@ -50,7 +50,8 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
   const fullOptions = computed(() => getFullOptions(options.value, form, width.value, slots))
 
   const compiledLayout = computed(() => {
-    if (precompiledLayout) return precompiledLayout
+    if (precompiledLayout?.value) return precompiledLayout?.value
+    if (!compile) throw new Error('compile function is not available')
     const compiledLayout = compile(schema.value, fullOptions.value)
     return compiledLayout
   })
@@ -87,13 +88,16 @@ export const useVjsf = (schema, modelValue, options, emit, compile, precompiledL
       // @ts-ignore
       const autofocusNodeElement = el.value.querySelector('.vjsf-input--autofocus')
       if (autofocusNodeElement) {
-        const autofocusInputElement = autofocusNodeElement.querySelector('input')
+        const autofocusInputElement = autofocusNodeElement.querySelector('input') ?? autofocusNodeElement.querySelector('textarea:not([style*="display: none"]')
         if (autofocusInputElement) autofocusInputElement.focus()
       }
     })
   }
 
   watch(fullOptions, (newOptions) => {
+    // in case of runtime compilation the watch on compiledLayout will be triggered
+    if (!precompiledLayout) return
+
     if (statefulLayout.value) {
       statefulLayout.value.options = newOptions
     } else {

package/types/compat/v2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AAiGA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBAvHqB,KAAK"}
+{"version":3,"file":"v2.d.ts","sourceRoot":"","sources":["../../src/compat/v2.js"],"names":[],"mappings":"AA8FA;;;;;;GAMG;AACH,kCALW,MAAM,+CAEN,MAAM,0BAkBhB;sBApHqB,KAAK"}

package/types/components/nodes/markdown.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/markdown.vue.js"],"names":[],"mappings":";;QAYM,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;QAL5E,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC"}
+{"version":3,"file":"markdown.vue.d.ts","sourceRoot":"","sources":["../../../src/components/nodes/markdown.vue.js"],"names":[],"mappings":";;QAWM,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC;;;;;;;QAL5E,2EAA2E;cAAjE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,aAAa,EAAE,gBAAgB,CAAC;;;;QAKxE,+EAA+E;cAArE,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,mBAAmB,EAAE,cAAc,CAAC"}

package/types/components/vjsf.vue.d.ts

@@ -1,12 +1,12 @@
 declare const _default: import("vue").DefineComponent<{}, {
     $emit: ((event: "update:modelValue", data: any) => void) & ((event: "update:state", state: import("@json-layout/core").StatefulLayout) => void);
-    modelValue: any;
     options: Partial<Omit<import("./types.js").VjsfOptions, "width">>;
+    modelValue: any;
     schema: Record<string, any>;
     precompiledLayout: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout;
     $props: {
-        readonly modelValue?: any;
         readonly options?: Partial<Omit<import("./types.js").VjsfOptions, "width">> | undefined;
+        readonly modelValue?: any;
         readonly schema?: Record<string, any> | undefined;
         readonly precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined;
     };

package/types/composables/use-vjsf.d.ts

@@ -8,7 +8,7 @@ export const emits: {
     */
     'update:state': (state: StatefulLayout) => boolean;
 };
-export function useVjsf(schema: import('vue').Ref<Object>, modelValue: import('vue').Ref<any>, options: import('vue').Ref<import("../components/types.js").PartialVjsfOptions>, emit: any, compile: typeof import('@json-layout/core').compile, precompiledLayout?: import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout | undefined): {
+export function useVjsf(schema: import('vue').Ref<Object>, modelValue: import('vue').Ref<any>, options: import('vue').Ref<import("../components/types.js").PartialVjsfOptions>, emit: any, compile?: typeof import("@json-layout/core").compile | undefined, precompiledLayout?: import("vue").Ref<import("../../../node_modules/@json-layout/core/types/compile/types.js").CompiledLayout> | undefined): {
     el: import("vue").Ref<null>;
     statefulLayout: import("vue").ShallowRef<StatefulLayout | null>;
     stateTree: import("vue").ShallowRef<import("../../../node_modules/@json-layout/core/types/state/types.js").StateTree | null>;

package/types/composables/use-vjsf.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-vjsf.d.ts","sourceRoot":"","sources":["../../src/composables/use-vjsf.js"],"names":[],"mappings":"AAKA;IACE;;MAEE;gCADO,GAAG;IAGZ;;MAEE;4BADO,cAAc;EAGxB;AAUM,gCAPI,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,cACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,WACtB,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,wBAAwB,EAAE,kBAAkB,CAAC,QACtE,GAAG,WACH,cAAc,mBAAmB,EAAE,OAAO;;;;EA6FpD;+BAlH8B,mBAAmB"}
+{"version":3,"file":"use-vjsf.d.ts","sourceRoot":"","sources":["../../src/composables/use-vjsf.js"],"names":[],"mappings":"AAKA;IACE;;MAEE;gCADO,GAAG;IAGZ;;MAEE;4BADO,cAAc;EAGxB;AAUM,gCAPI,OAAO,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,cACzB,OAAO,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,WACtB,OAAO,KAAK,EAAE,GAAG,CAAC,OAAO,wBAAwB,EAAE,kBAAkB,CAAC,QACtE,GAAG;;;;EAkGb;+BAtH8B,mBAAmB"}

package/src/utils/clone.js

@@ -1,3 +0,0 @@
-import rfdc from 'rfdc'
-
-export default rfdc()