diff --git a/package.json b/package.json index f83d2f8..d98bb1d 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "type": "module", "scripts": { "build": "vite build && tsc", + "dev": "vite build --watch", "prepublish": "npm run build" }, "repository": { @@ -34,6 +35,7 @@ "@formio/js": "5.0.0-rc.69", "@types/node": "^18.17.5", "@types/vue": "^2.0.0", + "@types/lodash": "^4.14.202", "@vue/compiler-sfc": "^3.4.15", "typescript": "^5.3.3", "typescript-eslint-parser": "^22.0.0", @@ -45,6 +47,6 @@ "dist" ], "dependencies": { - "@ungap/structured-clone": "^1.2.0" + "lodash": "^4.17.21" } } diff --git a/src/components/Form.ts b/src/components/Form.ts index 8e597e8..2d54cad 100644 --- a/src/components/Form.ts +++ b/src/components/Form.ts @@ -1,6 +1,6 @@ import { defineComponent, ref, onMounted, onBeforeUnmount, watch, CSSProperties, PropType, Prop, toRefs, toRaw } from 'vue'; import { EventEmitter, Form as FormClass, Webform } from '@formio/js'; -import structuredClone from '@ungap/structured-clone'; +import { cloneDeep as structuredClone } from 'lodash'; import { FormConstructor, FormHandlers, FormProps, FormSource } from '../types'; import useFormioRef from '../composables/useFormioRef'; @@ -240,7 +240,6 @@ export const Form = defineComponent({ props.formioform, props.onFormReady, props.formReady, - props.form, props.src, props.options, props.url, @@ -253,6 +252,28 @@ export const Form = defineComponent({ }, ); + // Handle form schema updates intelligently + watch( + () => props.form, + (newForm, oldForm) => { + if (instanceIsReady.value && formInstance.value && newForm && oldForm) { + // Update the form schema without recreating the instance + formInstance.value.form = newForm; + // Trigger a rebuild to apply schema changes + formInstance.value.build(formioRef.value); + } else if ( + instanceIsReady.value && + formInstance.value && + newForm && + !oldForm + ) { + // Initial form load + formInstance.value.form = newForm; + } + }, + { deep: true }, + ); + watch( () => [ instanceIsReady.value, diff --git a/src/components/FormBuilder.ts b/src/components/FormBuilder.ts index ef398e3..0a2626d 100644 --- a/src/components/FormBuilder.ts +++ b/src/components/FormBuilder.ts @@ -1,7 +1,7 @@ import { defineComponent, h, onMounted, onBeforeUnmount, ref, watch, PropType, toRaw } from 'vue'; import { FormBuilder as FormioFormBuilder } from '@formio/js'; import { Component } from '@formio/core'; -import structuredClone from '@ungap/structured-clone'; +import { cloneDeep as structuredClone } from 'lodash'; import { FormBuilderHandlers, FormBuilderProps, FormType } from '../types'; import useFormioRef from '../composables/useFormioRef';