@ghentcdh/json-forms-vue 0.6.6 → 0.6.8

package/index.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const toolsVue = require("@ghentcdh/tools-vue");
 const ui = require("@ghentcdh/ui");
 const core = require("@jsonforms/core");
-const vue$1 = require("@jsonforms/vue");
 const vue = require("vue");
+const vue$1 = require("@jsonforms/vue");
 const vueVanilla = require("@jsonforms/vue-vanilla");
+const lodashEs = require("lodash-es");
 const testers = require("@jsonforms/core/src/testers/testers");
 const jsonFormsCore = require("@ghentcdh/json-forms-core");
 const vueRouter = require("vue-router");
-const lodashEs = require("lodash-es");
 const core$1 = require("@vueuse/core");
 class FormStore {
   constructor(schema) {
@@ -48,158 +48,169 @@ const useVanillaControlCustom = (input, adaptTarget = (v) => v.value) => {
     isTouched.value = true;
     isFocused.value = false;
   };
-  const controlWrapper2 = vue.computed(() => {
+  const controlWrapper = vue.computed(() => {
     return {
       ...vanillaControl.controlWrapper.value,
+      ...lodashEs.omit(vanillaControl.appliedOptions.value, "styles"),
       isFocused: isFocused.value,
       isTouched: isTouched.value
     };
   });
   return {
     ...vanillaControl,
-    controlWrapper: controlWrapper2,
+    controlWrapper,
     isFocused,
     isTouched,
     onFocus,
     onBlur
+    // handleChange,
   };
 };
-const controlRenderer$8 = vue.defineComponent({
-  name: "BooleanControlRenderer",
-  components: {
-    ControlWrapper: ui.ControlWrapper
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    const control = useVanillaControlCustom(
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  __name: "BooleanControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(vue$1.useJsonFormsControl(props), (target) => {
+      return Boolean(target.value) ?? false;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Checkbox), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        onChange: vue.unref(onChange),
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "onChange", "onFocus", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  __name: "IntegerControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(
       vue$1.useJsonFormsControl(props),
-      (target) => {
-        return Boolean(target.value) ?? false;
-      }
+      (target) => target.value === "" ? void 0 : Number(target.value)
     );
-    if (control.control.value.data === void 0) {
-      control.handleChange(control.control.value.path, false);
-    }
-    return control;
-  },
-  computed: {
-    controlWrapper() {
-      return controlWrapper;
-    }
+    const steps = vue.computed(() => appliedOptions.value.steps ?? 1);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.InputNumber), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        steps: steps.value,
+        onChange: vue.unref(onChange),
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "steps", "onChange", "onFocus", "onBlur"]);
+    };
   }
 });
-const entry$8 = {
-  renderer: controlRenderer$8,
-  tester: core.rankWith(1, core.isBooleanControl)
-};
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  __name: "MarkdownControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const {
+      control,
+      handleChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper
+    } = useVanillaControlCustom(vue$1.useJsonFormsControl(props));
+    const changeValue = (value) => {
+      handleChange(control.value.path, value);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Markdown), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        onChange: changeValue,
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "onFocus", "onBlur"]);
+    };
   }
-  return target;
-};
-const _hoisted_1$a = { class: "flex justify-around flex-col h-full" };
-const _hoisted_2$3 = { class: "fieldset-label" };
-const _hoisted_3$3 = ["id", "checked", "disabled", "autofocus", "placeholder"];
-const _hoisted_4$2 = { class: "font-bold text-gray-500 text-sm" };
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_control_wrapper = vue.resolveComponent("control-wrapper");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-    vue.createVNode(_component_control_wrapper, vue.mergeProps(_ctx.controlWrapper, {
-      styles: _ctx.styles,
-      "hide-label": true
-    }), {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("label", _hoisted_2$3, [
-          vue.createElementVNode("input", {
-            id: _ctx.control.id + "-input",
-            type: "checkbox",
-            class: vue.normalizeClass(["checkbox"]),
-            checked: _ctx.control.data,
-            disabled: !_ctx.control.enabled,
-            autofocus: _ctx.appliedOptions.focus,
-            placeholder: _ctx.appliedOptions.placeholder,
-            onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
-            onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-            onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
-          }, null, 40, _hoisted_3$3),
-          vue.createElementVNode("span", _hoisted_4$2, vue.toDisplayString(_ctx.control.label), 1)
-        ])
-      ]),
-      _: 1
-    }, 16, ["styles"])
-  ]);
-}
-const BooleanControlRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$8, [["render", _sfc_render$7]]);
-const showErrors = (isTouched, isFocused, errors) => {
-  return !!(isTouched && errors);
-};
-const inputClasses = (styles, isFocused, isTouched, errors) => {
-  return [
-    styles?.control.input,
-    { "input-error": showErrors(isTouched, isFocused, errors) }
-  ];
-};
-const controlRenderer$7 = vue.defineComponent({
-  name: "IntegerControlRenderer",
-  components: {
-    ControlWrapper: ui.ControlWrapper
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    return useVanillaControlCustom(
+});
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  __name: "NumberControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(
       vue$1.useJsonFormsControl(props),
       (target) => target.value === "" ? void 0 : Number(target.value)
     );
-  },
-  computed: {
-    step() {
-      const options = this.appliedOptions;
-      return options.step ?? 1;
-    },
-    inputClass() {
-      return inputClasses(
-        this.styles,
-        this.isFocused,
-        this.isTouched,
-        this.controlWrapper?.errors
-      );
-    }
+    const steps = vue.computed(() => appliedOptions.value.steps ?? 0.01);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.InputNumber), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        steps: steps.value,
+        onChange: vue.unref(onChange),
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "steps", "onChange", "onFocus", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  __name: "StringControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const {
+      control,
+      onChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper,
+      styles
+    } = useVanillaControlCustom(vue$1.useJsonFormsControl(props));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Input), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        styles: vue.unref(styles),
+        onChange: vue.unref(onChange),
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "styles", "onChange", "onFocus", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  __name: "TextAreaControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(vue$1.useJsonFormsControl(props));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Textarea), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        onChange: vue.unref(onChange),
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "onChange", "onFocus", "onBlur"]);
+    };
   }
 });
-const entry$7 = {
-  renderer: controlRenderer$7,
-  tester: core.rankWith(1, core.isIntegerControl)
-};
-const _hoisted_1$9 = ["id", "step", "value", "disabled", "autofocus", "placeholder"];
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_control_wrapper = vue.resolveComponent("control-wrapper");
-  return vue.openBlock(), vue.createBlock(_component_control_wrapper, vue.mergeProps(_ctx.controlWrapper, { styles: _ctx.styles }), {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("input", {
-        id: _ctx.control.id + "-input",
-        autocomplete: "off",
-        type: "number",
-        step: _ctx.step,
-        class: vue.normalizeClass(_ctx.inputClass),
-        value: _ctx.control.data,
-        disabled: !_ctx.control.enabled,
-        autofocus: _ctx.appliedOptions.focus,
-        placeholder: _ctx.appliedOptions.placeholder,
-        onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
-        onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-        onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
-      }, null, 42, _hoisted_1$9)
-    ]),
-    _: 1
-  }, 16, ["styles"]);
-}
-const IntegerControlRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$7, [["render", _sfc_render$6]]);
 const isAutoCompleteControl = testers.and(
   // uiTypeIs('Control'),
   testers.optionIs("format", jsonFormsCore.ControlType.autocomplete)
@@ -216,10 +227,6 @@ const isMarkdownControl = testers.and(
   core.uiTypeIs("Control"),
   testers.optionIs("format", jsonFormsCore.ControlType.markdown)
 );
-const isFixedArray = testers.and(
-  testers.schemaTypeIs("array"),
-  testers.optionIs("format", jsonFormsCore.ControlType.fixedArray)
-);
 const isArrayRenderer = testers.and(
   testers.schemaTypeIs("array")
   // optionIs('format', ControlType.array),
@@ -230,228 +237,61 @@ const isCustomControl = (customType) => {
     testers.optionIs("type", customType)
   );
 };
-const controlRenderer$6 = vue.defineComponent({
-  name: "MarkdownControlRenderer",
-  components: {
-    Markdown: ui.Markdown
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    const control = useVanillaControlCustom(
-      vue$1.useJsonFormsControl(props),
-      (target) => target.value ?? void 0
-    );
-    const field = control.appliedOptions.value.field;
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  __name: "AutocompleteControlRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const {
+      control,
+      handleChange: _handleChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper
+    } = useVanillaControlCustom(vue$1.useJsonFormsControl(props));
+    const field = vue.computed(() => appliedOptions.value.field);
     const handleChange = (result) => {
-      const { path } = control.control.value;
-      control.handleChange(path, result);
+      const { path } = control.value;
+      _handleChange(path, result);
     };
-    return { ...control, field, handleChange };
-  }
-});
-const entry$6 = {
-  renderer: controlRenderer$6,
-  tester: core.rankWith(1, isMarkdownControl)
-};
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Markdown = vue.resolveComponent("Markdown");
-  return vue.openBlock(), vue.createBlock(_component_Markdown, vue.mergeProps(_ctx.controlWrapper, {
-    modelValue: _ctx.control.data,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.control.data = $event),
-    enabled: _ctx.control.enabled,
-    config: _ctx.appliedOptions,
-    onChange: _ctx.handleChange,
-    onFocus: _ctx.onFocus,
-    onBlur: _ctx.onBlur
-  }), null, 16, ["modelValue", "enabled", "config", "onChange", "onFocus", "onBlur"]);
-}
-const MarkdownControlRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$6, [["render", _sfc_render$5]]);
-const controlRenderer$5 = vue.defineComponent({
-  name: "NumberControlRenderer",
-  components: {
-    ControlWrapper: ui.ControlWrapper
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    return useVanillaControlCustom(
-      vue$1.useJsonFormsControl(props),
-      (target) => target.value === "" ? void 0 : Number(target.value)
-    );
-  },
-  computed: {
-    step() {
-      const options = this.appliedOptions;
-      return options.step ?? 0.1;
-    },
-    inputClass() {
-      return inputClasses(
-        this.styles,
-        this.isFocused,
-        this.isTouched,
-        this.controlWrapper?.errors
-      );
-    }
-  }
-});
-const entry$5 = {
-  renderer: controlRenderer$5,
-  tester: core.rankWith(1, core.isNumberControl)
-};
-const _hoisted_1$8 = ["id", "step", "value", "disabled", "autofocus", "placeholder"];
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_control_wrapper = vue.resolveComponent("control-wrapper");
-  return vue.openBlock(), vue.createBlock(_component_control_wrapper, vue.mergeProps(_ctx.controlWrapper, { styles: _ctx.styles }), {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("input", {
-        id: _ctx.control.id + "-input",
-        autocomplete: "off",
-        type: "number",
-        step: _ctx.step,
-        class: vue.normalizeClass(_ctx.inputClass),
-        value: _ctx.control.data,
-        disabled: !_ctx.control.enabled,
-        autofocus: _ctx.appliedOptions.focus,
-        placeholder: _ctx.appliedOptions.placeholder,
-        onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
-        onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-        onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
-      }, null, 42, _hoisted_1$8)
-    ]),
-    _: 1
-  }, 16, ["styles"]);
-}
-const NumberControlRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$5, [["render", _sfc_render$4]]);
-const controlRenderer$4 = vue.defineComponent({
-  name: "StringControlRenderer",
-  components: {
-    ControlWrapper: ui.ControlWrapper
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    return useVanillaControlCustom(
-      vue$1.useJsonFormsControl(props),
-      (target) => target.value ?? void 0
-    );
-  },
-  computed: {
-    inputClass() {
-      return inputClasses(
-        this.styles,
-        this.isFocused,
-        this.isTouched,
-        this.controlWrapper?.errors
-      );
-    }
-  }
-});
-const entry$4 = {
-  renderer: controlRenderer$4,
-  tester: core.rankWith(1, isStringFormat)
-};
-const _hoisted_1$7 = ["id", "value", "disabled", "autofocus", "placeholder"];
-function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ControlWrapper = vue.resolveComponent("ControlWrapper");
-  return vue.openBlock(), vue.createBlock(_component_ControlWrapper, vue.mergeProps(_ctx.controlWrapper, { styles: _ctx.styles }), {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("input", {
-        id: _ctx.control.id + "-input",
-        type: "text",
-        class: vue.normalizeClass(_ctx.inputClass),
-        value: _ctx.control.data,
-        disabled: !_ctx.control.enabled,
-        autofocus: _ctx.appliedOptions.focus,
-        placeholder: _ctx.appliedOptions.placeholder,
-        autocomplete: "off",
-        onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
-        onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
-        onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
-      }, null, 42, _hoisted_1$7)
-    ]),
-    _: 1
-  }, 16, ["styles"]);
-}
-const StringControlRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$4, [["render", _sfc_render$3]]);
-const controlRenderer$3 = vue.defineComponent({
-  name: "TextAreaControlRenderer",
-  components: {
-    ControlWrapper: ui.ControlWrapper
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    return useVanillaControlCustom(
-      vue$1.useJsonFormsControl(props),
-      (target) => target.value ?? void 0
-    );
-  }
-});
-const entry$3 = {
-  renderer: controlRenderer$3,
-  tester: core.rankWith(1, isTextAreaControl)
-};
-const controlRenderer$2 = vue.defineComponent({
-  name: "AutocompleteControlRenderer",
-  components: {
-    Autocomplete: ui.Autocomplete
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    const control = useVanillaControlCustom(
-      vue$1.useJsonFormsControl(props),
-      (target) => target.value ?? void 0
-    );
-    const field = control.appliedOptions.value.field;
-    const handleChange = (result) => {
-      const { path } = control.control.value;
-      control.handleChange(path, result);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Autocomplete), vue.mergeProps(vue.unref(controlWrapper), {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        config: vue.unref(appliedOptions),
+        "label-key": field.value?.label,
+        "value-key": field.value?.id,
+        onChange: handleChange,
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "config", "label-key", "value-key", "onFocus", "onBlur"]);
     };
-    return { ...control, field, handleChange };
   }
 });
-const entry$2 = {
-  renderer: controlRenderer$2,
-  tester: core.rankWith(1, isAutoCompleteControl)
-};
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Autocomplete = vue.resolveComponent("Autocomplete");
-  return vue.openBlock(), vue.createBlock(_component_Autocomplete, vue.mergeProps(_ctx.controlWrapper, {
-    modelValue: _ctx.control.data,
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.control.data = $event),
-    enabled: _ctx.control.enabled,
-    config: _ctx.appliedOptions,
-    "label-key": _ctx.field?.label,
-    "value-key": _ctx.field?.id,
-    onChange: _ctx.handleChange,
-    onFocus: _ctx.onFocus,
-    onBlur: _ctx.onBlur
-  }), null, 16, ["modelValue", "enabled", "config", "label-key", "value-key", "onChange", "onFocus", "onBlur"]);
-}
-const AutocompleteControlRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$2, [["render", _sfc_render$2]]);
 const controlRenderers = [
   // First custom renderers on format
-  entry$6,
-  entry$2,
-  entry$3,
-  // multiStringControlRendererEntry,
-  // enumControlRendererEntry,
-  // oneOfEnumControlRendererEntry,
-  // dateControlRendererEntry,
-  // dateTimeControlRendererEntry,
-  // timeControlRendererEntry,
-  entry$8,
+  {
+    tester: core.rankWith(10, isMarkdownControl),
+    renderer: _sfc_main$e
+  },
+  {
+    tester: core.rankWith(10, isAutoCompleteControl),
+    renderer: _sfc_main$a
+  },
+  {
+    tester: core.rankWith(10, isTextAreaControl),
+    renderer: _sfc_main$b
+  },
   // Renderers based on type if no format is provided
-  entry$4,
-  entry$5,
-  entry$7
+  { tester: core.rankWith(10, isStringFormat), renderer: _sfc_main$c },
+  { tester: core.rankWith(10, core.isNumberControl), renderer: _sfc_main$d },
+  {
+    tester: core.rankWith(10, core.isIntegerControl),
+    renderer: _sfc_main$f
+  },
+  { tester: core.rankWith(10, core.isBooleanControl), renderer: _sfc_main$g }
 ];
 const actionMap = {
   edit: (router, action) => ({
@@ -486,255 +326,233 @@ class FormState {
 const useFormState = (form) => {
   return FormState.getInstance();
 };
-const controlRenderer$1 = vue.defineComponent({
-  name: "ArrayListRenderer",
-  components: {
-    DispatchRenderer: vue$1.DispatchRenderer,
-    Btn: ui.Btn
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
+const _hoisted_1$8 = ["title"];
+const _hoisted_2$2 = { key: 0 };
+const _hoisted_3$1 = {
+  key: 1,
+  class: "list-row"
+};
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ArrayRenderer",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
     const vanillaArrayControl = vueVanilla.useVanillaArrayControl(
       vue$1.useJsonFormsArrayControl(props)
     );
-    const control = vanillaArrayControl.control.value;
-    if (!control.data || control.data.length < 1) {
+    const { styles, childUiSchema, control, appliedOptions } = vanillaArrayControl;
+    if (!control.value.data || control.value.data.length < 1) {
       vanillaArrayControl.addItem(
-        control.path,
-        core.createDefaultValue(control.schema, control.rootSchema)
+        control.value.path,
+        core.createDefaultValue(control.value.schema, control.value.rootSchema)
       )();
     }
-    return vanillaArrayControl;
-  },
-  computed: {
-    IconEnum() {
-      return ui.IconEnum;
-    },
-    noData() {
-      return !this.control.data || this.control.data.length === 0;
-    },
-    actions() {
-      const actions = this.uischema.options?.actions ?? [];
-      return mapArrayActions(vueRouter.useRouter(), actions);
-    },
-    showDelete() {
-      return this.control.data?.length > 1;
-    },
-    translations() {
-      const jsonforms = vue.inject("jsonforms");
-      return core.getArrayTranslations(
-        jsonforms?.i18n?.translate ?? core.defaultJsonFormsI18nState.translate,
-        core.arrayDefaultTranslations,
-        this.control.i18nKeyPrefix,
-        this.control.label
-      );
-    },
-    labelKey() {
-      const key = this.uischema?.options?.labelKey;
+    const noData = vue.computed(
+      () => !control.value.data || control.value.data.length === 0
+    );
+    const actions = vue.computed(() => {
+      const actions2 = props.uischema.options?.actions ?? [];
+      return mapArrayActions(vueRouter.useRouter(), actions2);
+    });
+    const showDelete = vue.computed(() => control.value.data?.length > 1);
+    vue.computed(() => {
+      const key = control.value.uischema?.options?.labelKey;
       if (!key) return null;
       return key;
-    }
-  },
-  methods: {
-    composePaths: core.composePaths,
-    createDefaultValue: core.createDefaultValue,
-    deleteButtonClick(index) {
-      this.removeItems(this.control.path, [index])();
-    },
-    dispatchEvent: (event, data) => {
+    });
+    const deleteButtonClick = (index) => {
+      vanillaArrayControl.removeItems(control.value.path, [index])();
+    };
+    const dispatchEvent = (event, data) => {
       const form_id = "";
       useFormState().dispatchEvent(form_id, event, data);
-    },
-    addButtonClick() {
-      this.addItem(
-        this.control.path,
-        core.createDefaultValue(this.control.schema, this.control.rootSchema)
+    };
+    const addButtonClick = () => {
+      vanillaArrayControl.addItem(
+        control.value.path,
+        core.createDefaultValue(control.value.schema, control.value.rootSchema)
       )();
-    }
+    };
+    const showActions = vue.computed(() => {
+      return !appliedOptions.value.hideActions;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        title: vue.unref(control).label
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            "flex gap-2",
+            vue.unref(appliedOptions)?.layout === "row" ? "flex-row items-center" : "flex-col"
+          ])
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(control).data, (element, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: `${vue.unref(control).path}-${index}`,
+              class: "flex-1"
+            }, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([
+                  "flex gap-2",
+                  vue.unref(appliedOptions)?.layout === "row" ? "flex-col" : "flex-row items-center"
+                ])
+              }, [
+                vue.createElementVNode("div", null, [
+                  vue.createVNode(vue.unref(vue$1.DispatchRenderer), {
+                    schema: vue.unref(control).schema,
+                    uischema: vue.unref(childUiSchema),
+                    path: vue.unref(core.composePaths)(vue.unref(control).path, `${index}`),
+                    enabled: vue.unref(control).enabled,
+                    renderers: vue.unref(control).renderers,
+                    cells: vue.unref(control).cells
+                  }, null, 8, ["schema", "uischema", "path", "enabled", "renderers", "cells"])
+                ]),
+                showActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(actions.value, (action) => {
+                    return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                      action.show(element) ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+                        key: action.label,
+                        icon: action.icon,
+                        outline: true,
+                        onClick: ($event) => dispatchEvent(action.label, element)
+                      }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+                    ], 64);
+                  }), 256)),
+                  showDelete.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+                    key: 0,
+                    icon: vue.unref(ui.IconEnum).Delete,
+                    outline: true,
+                    onClick: ($event) => deleteButtonClick(index)
+                  }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+                ])) : vue.createCommentVNode("", true)
+              ], 2)
+            ]);
+          }), 128)),
+          noData.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(["list-row", vue.unref(styles).arrayList.noData])
+          }, " No data ", 2)) : vue.createCommentVNode("", true),
+          showActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+            vue.createVNode(vue.unref(ui.Btn), {
+              icon: vue.unref(ui.IconEnum).Plus,
+              outline: true,
+              onClick: addButtonClick
+            }, {
+              default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
+                vue.createTextVNode(" Add ", -1)
+              ])]),
+              _: 1
+            }, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true)
+        ], 2)
+      ], 8, _hoisted_1$8);
+    };
   }
 });
-const entry$1 = {
-  renderer: controlRenderer$1,
-  tester: core.rankWith(2, isArrayRenderer)
-};
-const _hoisted_1$6 = { class: "fieldset" };
-const _hoisted_2$2 = { class: "flex gap-2 items-center" };
-const _hoisted_3$2 = { class: "mt-3 flex gap-2" };
-const _hoisted_4$1 = { class: "py-2" };
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dispatch_renderer = vue.resolveComponent("dispatch-renderer");
-  const _component_Btn = vue.resolveComponent("Btn");
-  return _ctx.control.visible ? (vue.openBlock(), vue.createElementBlock("fieldset", {
-    key: 0,
-    class: vue.normalizeClass(_ctx.styles.arrayList.root)
-  }, [
-    !_ctx.labelKey ? (vue.openBlock(), vue.createElementBlock("legend", {
-      key: 0,
-      class: vue.normalizeClass(_ctx.styles.arrayList.legend)
-    }, [
-      vue.createElementVNode("label", {
-        class: vue.normalizeClass(_ctx.styles.arrayList.label)
-      }, vue.toDisplayString(_ctx.control.label), 3)
-    ], 2)) : vue.createCommentVNode("", true),
-    vue.createElementVNode("div", null, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.control.data, (element, index) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          key: `${_ctx.control.path}-${index}`
-        }, [
-          vue.createElementVNode("fieldset", _hoisted_1$6, [
-            _ctx.labelKey ? (vue.openBlock(), vue.createElementBlock("legend", {
-              key: 0,
-              class: vue.normalizeClass(_ctx.styles.arrayList.legend)
-            }, vue.toDisplayString(element[_ctx.labelKey]?.toLowerCase()), 3)) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_2$2, [
-              vue.createVNode(_component_dispatch_renderer, {
-                schema: _ctx.control.schema,
-                uischema: _ctx.childUiSchema,
-                path: _ctx.composePaths(_ctx.control.path, `${index}`),
-                enabled: _ctx.control.enabled,
-                renderers: _ctx.control.renderers,
-                cells: _ctx.control.cells
-              }, null, 8, ["schema", "uischema", "path", "enabled", "renderers", "cells"]),
-              vue.createElementVNode("div", _hoisted_3$2, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (action) => {
-                  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                    action.show(element) ? (vue.openBlock(), vue.createBlock(_component_Btn, {
-                      key: action.label,
-                      icon: action.icon,
-                      outline: true,
-                      onClick: ($event) => _ctx.dispatchEvent(action.label, element)
-                    }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
-                  ], 64);
-                }), 256)),
-                _ctx.showDelete ? (vue.openBlock(), vue.createBlock(_component_Btn, {
-                  key: 0,
-                  icon: _ctx.IconEnum.Delete,
-                  outline: true,
-                  onClick: ($event) => _ctx.deleteButtonClick(index)
-                }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
-              ])
-            ])
+const arrayRenderers = [
+  {
+    tester: core.rankWith(12, isArrayRenderer),
+    renderer: _sfc_main$9
+  }
+];
+const _hoisted_1$7 = { class: "flex flex-col gap-4" };
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "CollapseLayout",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const jsonLayout = vue$1.useJsonFormsLayout(props);
+    const { layout, renderers, cells } = jsonLayout;
+    const title = vue.computed(() => {
+      const { titleKey, title: title2 } = layout?.value.uischema?.options ?? {};
+      if (title2) return title2;
+      if (titleKey) return layout?.value.data[titleKey];
+      return layout?.value.uischema?.options?.titleKey;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Collapse), { title: title.value }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1$7, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(layout).uischema.elements, (element, index) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(vue$1.DispatchRenderer), {
+                key: index,
+                schema: vue.unref(layout).schema,
+                uischema: element,
+                path: vue.unref(layout).path,
+                renderers: vue.unref(renderers),
+                cells: vue.unref(cells)
+              }, null, 8, ["schema", "uischema", "path", "renderers", "cells"]);
+            }), 128))
           ])
-        ]);
-      }), 128))
-    ]),
-    vue.createElementVNode("div", _hoisted_4$1, [
-      vue.createVNode(_component_Btn, {
-        icon: _ctx.IconEnum.Plus,
-        outline: true,
-        onClick: _ctx.addButtonClick
-      }, {
-        default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
-          vue.createTextVNode(" Add ", -1)
-        ])]),
+        ]),
         _: 1
-      }, 8, ["icon", "onClick"])
-    ]),
-    _ctx.noData ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 1,
-      class: vue.normalizeClass(_ctx.styles.arrayList.noData)
-    }, vue.toDisplayString(_ctx.translations.noDataMessage), 3)) : vue.createCommentVNode("", true)
-  ], 2)) : vue.createCommentVNode("", true);
-}
-const ArrayRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$1, [["render", _sfc_render$1]]);
-const controlRenderer = vue.defineComponent({
-  name: "FixedArrayListRenderer",
-  components: {
-    DispatchRenderer: vue$1.DispatchRenderer
-  },
-  props: {
-    ...vue$1.rendererProps()
-  },
-  setup(props) {
-    return vueVanilla.useVanillaArrayControl(vue$1.useJsonFormsArrayControl(props));
-  },
-  computed: {
-    noData() {
-      return !this.control.data || this.control.data.length === 0;
-    },
-    translations() {
-      const jsonforms = vue.inject("jsonforms");
-      return core.getArrayTranslations(
-        jsonforms?.i18n?.translate ?? core.defaultJsonFormsI18nState.translate,
-        core.arrayDefaultTranslations,
-        this.control.i18nKeyPrefix,
-        this.control.label
-      );
-    },
-    labelKey() {
-      const key = this.uischema?.options?.labelKey;
-      if (!key) return null;
-      return key;
-    }
-  },
-  methods: {
-    composePaths: core.composePaths,
-    createDefaultValue: core.createDefaultValue
+      }, 8, ["title"]);
+    };
+  }
+});
+const _hoisted_1$6 = { class: "flex flex-row gap-4 items-center" };
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "HorizontalLayout",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { layout, renderers, cells } = vue$1.useJsonFormsLayout(props);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(layout).uischema.elements, (element, index) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(vue$1.DispatchRenderer), {
+            key: index,
+            schema: vue.unref(layout).schema,
+            uischema: element,
+            path: vue.unref(layout).path,
+            renderers: vue.unref(renderers),
+            cells: vue.unref(cells)
+          }, null, 8, ["schema", "uischema", "path", "renderers", "cells"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const _hoisted_1$5 = { class: "flex flex-col gap-4" };
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "VerticalLayout",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { layout, renderers, cells } = vue$1.useJsonFormsLayout(props);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(layout).uischema.elements, (element, index) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(vue$1.DispatchRenderer), {
+            key: index,
+            schema: vue.unref(layout).schema,
+            uischema: element,
+            path: vue.unref(layout).path,
+            renderers: vue.unref(renderers),
+            cells: vue.unref(cells)
+          }, null, 8, ["schema", "uischema", "path", "renderers", "cells"]);
+        }), 128))
+      ]);
+    };
   }
 });
-const entry = {
-  renderer: controlRenderer,
-  tester: core.rankWith(2, isFixedArray)
-};
-const _hoisted_1$5 = { class: "fieldset" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dispatch_renderer = vue.resolveComponent("dispatch-renderer");
-  return _ctx.control.visible ? (vue.openBlock(), vue.createElementBlock("fieldset", {
-    key: 0,
-    class: vue.normalizeClass(_ctx.styles.arrayList.root)
-  }, [
-    !_ctx.labelKey ? (vue.openBlock(), vue.createElementBlock("legend", {
-      key: 0,
-      class: vue.normalizeClass(_ctx.styles.arrayList.legend)
-    }, [
-      vue.createElementVNode("label", {
-        class: vue.normalizeClass(_ctx.styles.arrayList.label)
-      }, vue.toDisplayString(_ctx.control.label), 3)
-    ], 2)) : vue.createCommentVNode("", true),
-    vue.createElementVNode("div", {
-      class: vue.normalizeClass(_ctx.styles.fixedArrayList.root)
-    }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.control.data, (element, index) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          key: `${_ctx.control.path}-${index}`,
-          class: vue.normalizeClass(_ctx.styles.fixedArrayList.item)
-        }, [
-          vue.createElementVNode("fieldset", _hoisted_1$5, [
-            _ctx.labelKey ? (vue.openBlock(), vue.createElementBlock("legend", {
-              key: 0,
-              class: vue.normalizeClass(_ctx.styles.arrayList.legend)
-            }, vue.toDisplayString(element[_ctx.labelKey]?.toLowerCase()), 3)) : vue.createCommentVNode("", true),
-            vue.createVNode(_component_dispatch_renderer, {
-              schema: _ctx.control.schema,
-              uischema: _ctx.childUiSchema,
-              path: _ctx.composePaths(_ctx.control.path, `${index}`),
-              enabled: _ctx.control.enabled,
-              renderers: _ctx.control.renderers,
-              cells: _ctx.control.cells
-            }, null, 8, ["schema", "uischema", "path", "enabled", "renderers", "cells"])
-          ])
-        ], 2);
-      }), 128))
-    ], 2),
-    _ctx.noData ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 1,
-      class: vue.normalizeClass(_ctx.styles.arrayList.noData)
-    }, vue.toDisplayString(_ctx.translations.noDataMessage), 3)) : vue.createCommentVNode("", true)
-  ], 2)) : vue.createCommentVNode("", true);
-}
-const FixedArrayRenderer = /* @__PURE__ */ _export_sfc(controlRenderer, [["render", _sfc_render]]);
-const arrayRenderers = [
-  entry,
-  entry$1
-];
 const layoutRenderers = [
-  //  LayoutRenderer
+  {
+    tester: core.rankWith(10, core.uiTypeIs(jsonFormsCore.LayoutTypes.VerticalLayout)),
+    renderer: _sfc_main$6
+  },
+  {
+    tester: core.rankWith(10, core.uiTypeIs(jsonFormsCore.LayoutTypes.HorizontalLayout)),
+    renderer: _sfc_main$7
+  },
+  {
+    tester: core.rankWith(10, core.uiTypeIs(jsonFormsCore.LayoutTypes.CollapseLayout)),
+    renderer: _sfc_main$8
+  }
 ];
 const _hoisted_1$4 = { class: "" };
 const _hoisted_2$1 = { class: "flex gap-2 items-center mb-2" };
-const _hoisted_3$1 = { class: "flex gap-2" };
+const _hoisted_3 = { class: "flex gap-2" };
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "table-filter",
   props: {
@@ -778,7 +596,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             _: 1
           })) : vue.createCommentVNode("", true)
         ]),
-        vue.createElementVNode("div", _hoisted_3$1, [
+        vue.createElementVNode("div", _hoisted_3, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.filters, (filter) => {
             return vue.openBlock(), vue.createBlock(vue.unref(ui.BtnBadge), {
               key: filter.key,
@@ -1108,12 +926,12 @@ const customRenderers = [
 const customRenderesName = customRenderers.map((c) => {
   return c.renderer.name;
 });
-const useVanillaRenderers = vueVanilla.vanillaRenderers.filter(
+vueVanilla.vanillaRenderers.filter(
   (v) => !customRenderesName.includes(v.renderer.name)
 );
 const tailwindRenderers = [
-  ...customRenderers,
-  ...useVanillaRenderers
+  ...vueVanilla.vanillaRenderers,
+  ...customRenderers
 ];
 const _hoisted_1$1 = ["id"];
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
@@ -1129,7 +947,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     "modelValue": {},
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ vue.mergeModels(["valid", "change", "submit"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ vue.mergeModels(["valid", "change", "submit", "errors"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const properties = __props;
     const _JSON_FORM_ID = `json-form-${Date.now()}`;
@@ -1142,6 +960,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       valid.value = event.errors.length === 0;
       emits("valid", valid.value);
       emits("change", event.data);
+      emits("errors", event.errors);
+      toolsVue.Debugger.debug(event.errors);
     };
     const onSubmit = (event) => {
       event.preventDefault();
@@ -1182,10 +1002,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "card w-full shadow border-2" };
-const _hoisted_2 = { class: "card-body" };
-const _hoisted_3 = { class: "card-title" };
-const _hoisted_4 = { class: "card-actions flex justify-end" };
+const _hoisted_1 = { class: "card-actions flex justify-between" };
+const _hoisted_2 = { class: "flex justify-end gap-2" };
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "form-with-actions.component",
   props: /* @__PURE__ */ vue.mergeModels({
@@ -1202,23 +1020,33 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const properties = __props;
     const valid = vue.ref(false);
     const formData = vue.useModel(__props, "modelValue");
+    const submitted = vue.ref(false);
     const store = new FormStore(properties.formSchema);
     const emits = __emit;
     const save = () => {
+      submitted.value = true;
+      if (!valid.value) {
+        return;
+      }
       store.save(formData.value.id, formData.value).then(() => {
         emits("success");
       });
     };
     const clear = () => {
       formData.value = { id: null };
+      submitted.value = false;
     };
     const onValid = (v) => {
+      submitted.value = false;
       valid.value = v;
     };
+    const title = vue.computed(() => {
+      if (!properties.updateTitle) return properties.createTitle;
+      return formData.value?.id ? properties.updateTitle : properties.createTitle;
+    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", _hoisted_2, [
-          vue.createElementVNode("h1", _hoisted_3, vue.toDisplayString(formData.value?.id ? __props.updateTitle : __props.createTitle), 1),
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Collapse), { title: title.value }, {
+        default: vue.withCtx(() => [
           vue.createVNode(_sfc_main$2, {
             id: `form_${properties.id}`,
             modelValue: formData.value,
@@ -1228,29 +1056,41 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             onValid: _cache[1] || (_cache[1] = ($event) => onValid($event)),
             onSubmit: save
           }, null, 8, ["id", "modelValue", "schema", "uischema"]),
-          vue.createElementVNode("div", _hoisted_4, [
-            vue.createVNode(vue.unref(ui.Btn), {
-              outline: true,
-              onClick: clear
-            }, {
-              default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
-                vue.createTextVNode(" Clear ", -1)
-              ])]),
-              _: 1
-            }),
-            vue.createVNode(vue.unref(ui.Btn), {
-              color: vue.unref(ui.Color).primary,
-              disabled: !valid.value,
-              onClick: save
-            }, {
-              default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
-                vue.createTextVNode(" Save ", -1)
-              ])]),
-              _: 1
-            }, 8, ["color", "disabled"])
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createElementVNode("div", null, [
+              !valid.value && submitted.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Alert), {
+                key: 0,
+                message: "The form is not valid",
+                type: "error"
+              })) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "actions"),
+              !formData.value.id ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+                key: 0,
+                outline: true,
+                onClick: clear
+              }, {
+                default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                  vue.createTextVNode(" Clear ", -1)
+                ])]),
+                _: 1
+              })) : vue.createCommentVNode("", true),
+              vue.createVNode(vue.unref(ui.Btn), {
+                color: vue.unref(ui.Color).primary,
+                disabled: submitted.value,
+                onClick: save
+              }, {
+                default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                  vue.createTextVNode(" Save ", -1)
+                ])]),
+                _: 1
+              }, 8, ["color", "disabled"])
+            ])
           ])
-        ])
-      ]);
+        ]),
+        _: 3
+      }, 8, ["title"]);
     };
   }
 });
@@ -1375,7 +1215,7 @@ const createRepository = (formSchemaModel, httpRequest, options = {}) => {
   const create = (object, options2) => {
     return httpRequest.post(getDataUri(), object, options2).then((response) => {
       handleSuccess(`Created ${notificationEntity}`);
-      return response;
+      return response.data;
     }).catch((response) => {
       handleError(response, `Failed to create ${notificationEntity}`);
     });
@@ -1383,13 +1223,17 @@ const createRepository = (formSchemaModel, httpRequest, options = {}) => {
   const patch = (id, object, options2) => {
     return httpRequest.patch(getDataUri(id), object, options2).then((response) => {
       handleSuccess(`Saved ${notificationEntity}`);
-      return response;
+      return response.data;
     }).catch((response) => {
       handleError(response, `Failed to save ${notificationEntity}`);
     });
   };
   const get = (id, options2) => {
-    return httpRequest.get(getDataUri(id), options2);
+    return httpRequest.get(getDataUri(id), options2).then((response) => {
+      return response.data;
+    }).catch((response) => {
+      handleError(response, `Failed to load data`);
+    });
   };
   const _delete = (id, options2) => {
     return httpRequest.delete(getDataUri(id), options2).then((response) => {
@@ -1404,26 +1248,25 @@ const createRepository = (formSchemaModel, httpRequest, options = {}) => {
       objects.map((object) => httpRequest.post(getDataUri(), object, options2))
     ).then((response) => {
       handleSuccess(`Created ${notificationEntity}`);
-      return response;
+      return response.data;
     }).catch((response) => {
       handleError(response, `Failed to save ${notificationEntity}`);
     });
   };
   return { create, patch, createMulti, delete: _delete, get };
 };
-exports.ArrayRenderer = ArrayRenderer;
-exports.AutocompleteControlRenderer = AutocompleteControlRenderer;
-exports.BooleanControlRenderer = BooleanControlRenderer;
-exports.FixedArrayRenderer = FixedArrayRenderer;
+exports.ArrayRenderer = _sfc_main$9;
+exports.AutocompleteControlRenderer = _sfc_main$a;
+exports.BooleanControlRenderer = _sfc_main$g;
 exports.FormComponent = _sfc_main$2;
 exports.FormModal = _sfc_main;
 exports.FormModalService = FormModalService;
 exports.FormStore = FormStore;
 exports.FormWithActions = _sfc_main$1;
 exports.FormWithTableComponent = _sfc_main$3;
-exports.IntegerControlRenderer = IntegerControlRenderer;
-exports.NumberControlRenderer = NumberControlRenderer;
-exports.StringControlRenderer = StringControlRenderer;
+exports.IntegerControlRenderer = _sfc_main$f;
+exports.NumberControlRenderer = _sfc_main$d;
+exports.StringControlRenderer = _sfc_main$c;
 exports.TableComponent = _sfc_main$4;
 exports.arrayRenderers = arrayRenderers;
 exports.controlRenderers = controlRenderers;
@@ -1431,10 +1274,9 @@ exports.createRepository = createRepository;
 exports.isArrayRenderer = isArrayRenderer;
 exports.isAutoCompleteControl = isAutoCompleteControl;
 exports.isCustomControl = isCustomControl;
-exports.isFixedArray = isFixedArray;
 exports.isMarkdownControl = isMarkdownControl;
 exports.isStringFormat = isStringFormat;
 exports.isTextAreaControl = isTextAreaControl;
 exports.layoutRenderers = layoutRenderers;
-exports.markdownControlRenderer = MarkdownControlRenderer;
+exports.markdownControlRenderer = _sfc_main$e;
 exports.useFormState = useFormState;