@ghentcdh/json-forms-vue 0.6.7 → 0.6.8

package/index.mjs

@@ -1,13 +1,13 @@
-import { useApi } from "@ghentcdh/tools-vue";
-import { NotificationService, Checkbox, InputNumber, Markdown, Input, Textarea, Autocomplete, IconEnum, Btn, BtnBadge, TextCell, Table, hasCustomEventListener, Card, ModalService, myStyles, Color, Modal } from "@ghentcdh/ui";
-import { uiTypeIs, rankWith, isNumberControl, isIntegerControl, isBooleanControl, createDefaultValue, composePaths, getArrayTranslations, defaultJsonFormsI18nState, arrayDefaultTranslations } from "@jsonforms/core";
-import { ref, computed, defineComponent, openBlock, createBlock, unref, mergeProps, inject, resolveComponent, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, createVNode, withCtx, createTextVNode, watch, useModel, provide, mergeModels, renderSlot } from "vue";
-import { useJsonFormsControl, rendererProps, DispatchRenderer, useJsonFormsArrayControl, JsonForms } from "@jsonforms/vue";
+import { useApi, Debugger } from "@ghentcdh/tools-vue";
+import { NotificationService, Checkbox, InputNumber, Markdown, Input, Textarea, Autocomplete, IconEnum, Btn, Collapse, BtnBadge, TextCell, Table, hasCustomEventListener, Card, ModalService, myStyles, Alert, Color, Modal } from "@ghentcdh/ui";
+import { uiTypeIs, rankWith, isNumberControl, isIntegerControl, isBooleanControl, createDefaultValue, composePaths } from "@jsonforms/core";
+import { ref, computed, defineComponent, openBlock, createBlock, unref, mergeProps, createElementBlock, createElementVNode, normalizeClass, Fragment, renderList, createVNode, createCommentVNode, withCtx, createTextVNode, watch, toDisplayString, useModel, provide, mergeModels, renderSlot } from "vue";
+import { useJsonFormsControl, rendererProps, useJsonFormsArrayControl, DispatchRenderer, useJsonFormsLayout, JsonForms } from "@jsonforms/vue";
 import { useVanillaControl, useVanillaArrayControl, vanillaRenderers } from "@jsonforms/vue-vanilla";
+import { omit, isArray } from "lodash-es";
 import { and, optionIs, or, schemaTypeIs } from "@jsonforms/core/src/testers/testers";
-import { ControlType, RequestSchema, extractFilters, findColumnDef } from "@ghentcdh/json-forms-core";
+import { ControlType, LayoutTypes, RequestSchema, extractFilters, findColumnDef } from "@ghentcdh/json-forms-core";
 import { useRouter, useRoute } from "vue-router";
-import { isArray } from "lodash-es";
 import { computedAsync } from "@vueuse/core";
 class FormStore {
   constructor(schema) {
@@ -49,6 +49,7 @@ const useVanillaControlCustom = (input, adaptTarget = (v) => v.value) => {
   const controlWrapper = computed(() => {
     return {
       ...vanillaControl.controlWrapper.value,
+      ...omit(vanillaControl.appliedOptions.value, "styles"),
       isFocused: isFocused.value,
       isTouched: isTouched.value
     };
@@ -63,7 +64,7 @@ const useVanillaControlCustom = (input, adaptTarget = (v) => v.value) => {
     // handleChange,
   };
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "BooleanControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
@@ -84,7 +85,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "IntegerControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
@@ -108,28 +109,36 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "MarkdownControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
     const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(useJsonFormsControl(props), (target) => {
-      return Boolean(target.value) ?? false;
-    });
+    const {
+      control,
+      handleChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper
+    } = useVanillaControlCustom(useJsonFormsControl(props));
+    const changeValue = (value) => {
+      handleChange(control.value.path, value);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Markdown), mergeProps(unref(controlWrapper), {
         modelValue: unref(control).data,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(control).data = $event),
         enabled: unref(control).enabled,
         config: unref(appliedOptions),
-        onChange: unref(onChange),
+        onChange: changeValue,
         onFocus: unref(onFocus),
         onBlur: unref(onBlur)
-      }), null, 16, ["modelValue", "enabled", "config", "onChange", "onFocus", "onBlur"]);
+      }), null, 16, ["modelValue", "enabled", "config", "onFocus", "onBlur"]);
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "NumberControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
@@ -153,26 +162,35 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "StringControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
     const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(useJsonFormsControl(props));
+    const {
+      control,
+      onChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper,
+      styles
+    } = useVanillaControlCustom(useJsonFormsControl(props));
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Input), mergeProps(unref(controlWrapper), {
         modelValue: unref(control).data,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(control).data = $event),
         enabled: unref(control).enabled,
         config: unref(appliedOptions),
+        styles: unref(styles),
         onChange: unref(onChange),
         onFocus: unref(onFocus),
         onBlur: unref(onBlur)
-      }), null, 16, ["modelValue", "enabled", "config", "onChange", "onFocus", "onBlur"]);
+      }), null, 16, ["modelValue", "enabled", "config", "styles", "onChange", "onFocus", "onBlur"]);
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "TextAreaControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
@@ -207,10 +225,6 @@ const isMarkdownControl = and(
   uiTypeIs("Control"),
   optionIs("format", ControlType.markdown)
 );
-const isFixedArray = and(
-  schemaTypeIs("array"),
-  optionIs("format", ControlType.fixedArray)
-);
 const isArrayRenderer = and(
   schemaTypeIs("array")
   // optionIs('format', ControlType.array),
@@ -221,15 +235,24 @@ const isCustomControl = (customType) => {
     optionIs("type", customType)
   );
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "AutocompleteControlRenderer",
   props: { ...rendererProps() },
   setup(__props) {
     const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(useJsonFormsControl(props), (target) => {
-      return target?.value ?? void 0;
-    });
+    const {
+      control,
+      handleChange: _handleChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper
+    } = useVanillaControlCustom(useJsonFormsControl(props));
     const field = computed(() => appliedOptions.value.field);
+    const handleChange = (result) => {
+      const { path } = control.value;
+      _handleChange(path, result);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Autocomplete), mergeProps(unref(controlWrapper), {
         modelValue: unref(control).data,
@@ -238,10 +261,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         config: unref(appliedOptions),
         "label-key": field.value?.label,
         "value-key": field.value?.id,
-        onChange: unref(onChange),
+        onChange: handleChange,
         onFocus: unref(onFocus),
         onBlur: unref(onBlur)
-      }), null, 16, ["modelValue", "enabled", "config", "label-key", "value-key", "onChange", "onFocus", "onBlur"]);
+      }), null, 16, ["modelValue", "enabled", "config", "label-key", "value-key", "onFocus", "onBlur"]);
     };
   }
 });
@@ -249,24 +272,24 @@ const controlRenderers = [
   // First custom renderers on format
   {
     tester: rankWith(10, isMarkdownControl),
-    renderer: _sfc_main$a
+    renderer: _sfc_main$e
   },
   {
     tester: rankWith(10, isAutoCompleteControl),
-    renderer: _sfc_main$6
+    renderer: _sfc_main$a
   },
   {
     tester: rankWith(10, isTextAreaControl),
-    renderer: _sfc_main$7
+    renderer: _sfc_main$b
   },
   // Renderers based on type if no format is provided
-  { tester: rankWith(10, isStringFormat), renderer: _sfc_main$8 },
-  { tester: rankWith(10, isNumberControl), renderer: _sfc_main$9 },
+  { tester: rankWith(10, isStringFormat), renderer: _sfc_main$c },
+  { tester: rankWith(10, isNumberControl), renderer: _sfc_main$d },
   {
     tester: rankWith(10, isIntegerControl),
-    renderer: _sfc_main$b
+    renderer: _sfc_main$f
   },
-  { tester: rankWith(10, isBooleanControl), renderer: _sfc_main$c }
+  { tester: rankWith(10, isBooleanControl), renderer: _sfc_main$g }
 ];
 const actionMap = {
   edit: (router, action) => ({
@@ -301,262 +324,233 @@ class FormState {
 const useFormState = (form) => {
   return FormState.getInstance();
 };
-const controlRenderer$1 = defineComponent({
-  name: "ArrayListRenderer",
-  components: {
-    DispatchRenderer,
-    Btn
-  },
-  props: {
-    ...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__ */ defineComponent({
+  __name: "ArrayRenderer",
+  props: { ...rendererProps() },
+  setup(__props) {
+    const props = __props;
     const vanillaArrayControl = useVanillaArrayControl(
       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,
-        createDefaultValue(control.schema, control.rootSchema)
+        control.value.path,
+        createDefaultValue(control.value.schema, control.value.rootSchema)
       )();
     }
-    return vanillaArrayControl;
-  },
-  computed: {
-    IconEnum() {
-      return IconEnum;
-    },
-    noData() {
-      return !this.control.data || this.control.data.length === 0;
-    },
-    actions() {
-      const actions = this.uischema.options?.actions ?? [];
-      return mapArrayActions(useRouter(), actions);
-    },
-    showDelete() {
-      return this.control.data?.length > 1;
-    },
-    translations() {
-      const jsonforms = inject("jsonforms");
-      return getArrayTranslations(
-        jsonforms?.i18n?.translate ?? defaultJsonFormsI18nState.translate,
-        arrayDefaultTranslations,
-        this.control.i18nKeyPrefix,
-        this.control.label
-      );
-    },
-    labelKey() {
-      const key = this.uischema?.options?.labelKey;
+    const noData = computed(
+      () => !control.value.data || control.value.data.length === 0
+    );
+    const actions = computed(() => {
+      const actions2 = props.uischema.options?.actions ?? [];
+      return mapArrayActions(useRouter(), actions2);
+    });
+    const showDelete = computed(() => control.value.data?.length > 1);
+    computed(() => {
+      const key = control.value.uischema?.options?.labelKey;
       if (!key) return null;
       return key;
-    }
-  },
-  methods: {
-    composePaths,
-    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,
-        createDefaultValue(this.control.schema, this.control.rootSchema)
+    };
+    const addButtonClick = () => {
+      vanillaArrayControl.addItem(
+        control.value.path,
+        createDefaultValue(control.value.schema, control.value.rootSchema)
       )();
-    }
+    };
+    const showActions = computed(() => {
+      return !appliedOptions.value.hideActions;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        title: unref(control).label
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            "flex gap-2",
+            unref(appliedOptions)?.layout === "row" ? "flex-row items-center" : "flex-col"
+          ])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(control).data, (element, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: `${unref(control).path}-${index}`,
+              class: "flex-1"
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass([
+                  "flex gap-2",
+                  unref(appliedOptions)?.layout === "row" ? "flex-col" : "flex-row items-center"
+                ])
+              }, [
+                createElementVNode("div", null, [
+                  createVNode(unref(DispatchRenderer), {
+                    schema: unref(control).schema,
+                    uischema: unref(childUiSchema),
+                    path: unref(composePaths)(unref(control).path, `${index}`),
+                    enabled: unref(control).enabled,
+                    renderers: unref(control).renderers,
+                    cells: unref(control).cells
+                  }, null, 8, ["schema", "uischema", "path", "enabled", "renderers", "cells"])
+                ]),
+                showActions.value ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(actions.value, (action) => {
+                    return openBlock(), createElementBlock(Fragment, null, [
+                      action.show(element) ? (openBlock(), createBlock(unref(Btn), {
+                        key: action.label,
+                        icon: action.icon,
+                        outline: true,
+                        onClick: ($event) => dispatchEvent(action.label, element)
+                      }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+                    ], 64);
+                  }), 256)),
+                  showDelete.value ? (openBlock(), createBlock(unref(Btn), {
+                    key: 0,
+                    icon: unref(IconEnum).Delete,
+                    outline: true,
+                    onClick: ($event) => deleteButtonClick(index)
+                  }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ], 2)
+            ]);
+          }), 128)),
+          noData.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["list-row", unref(styles).arrayList.noData])
+          }, " No data ", 2)) : createCommentVNode("", true),
+          showActions.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            createVNode(unref(Btn), {
+              icon: unref(IconEnum).Plus,
+              outline: true,
+              onClick: addButtonClick
+            }, {
+              default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                createTextVNode(" Add ", -1)
+              ])]),
+              _: 1
+            }, 8, ["icon"])
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ], 8, _hoisted_1$8);
+    };
   }
 });
-const entry$1 = {
-  renderer: controlRenderer$1,
-  tester: rankWith(2, isArrayRenderer)
-};
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
+const arrayRenderers = [
+  {
+    tester: rankWith(12, isArrayRenderer),
+    renderer: _sfc_main$9
   }
-  return target;
-};
-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 = resolveComponent("dispatch-renderer");
-  const _component_Btn = resolveComponent("Btn");
-  return _ctx.control.visible ? (openBlock(), createElementBlock("fieldset", {
-    key: 0,
-    class: normalizeClass(_ctx.styles.arrayList.root)
-  }, [
-    !_ctx.labelKey ? (openBlock(), createElementBlock("legend", {
-      key: 0,
-      class: normalizeClass(_ctx.styles.arrayList.legend)
-    }, [
-      createElementVNode("label", {
-        class: normalizeClass(_ctx.styles.arrayList.label)
-      }, toDisplayString(_ctx.control.label), 3)
-    ], 2)) : createCommentVNode("", true),
-    createElementVNode("div", null, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.control.data, (element, index) => {
-        return openBlock(), createElementBlock("div", {
-          key: `${_ctx.control.path}-${index}`
-        }, [
-          createElementVNode("fieldset", _hoisted_1$6, [
-            _ctx.labelKey ? (openBlock(), createElementBlock("legend", {
-              key: 0,
-              class: normalizeClass(_ctx.styles.arrayList.legend)
-            }, toDisplayString(element[_ctx.labelKey]?.toLowerCase()), 3)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2$2, [
-              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"]),
-              createElementVNode("div", _hoisted_3$2, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (action) => {
-                  return openBlock(), createElementBlock(Fragment, null, [
-                    action.show(element) ? (openBlock(), createBlock(_component_Btn, {
-                      key: action.label,
-                      icon: action.icon,
-                      outline: true,
-                      onClick: ($event) => _ctx.dispatchEvent(action.label, element)
-                    }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
-                  ], 64);
-                }), 256)),
-                _ctx.showDelete ? (openBlock(), createBlock(_component_Btn, {
-                  key: 0,
-                  icon: _ctx.IconEnum.Delete,
-                  outline: true,
-                  onClick: ($event) => _ctx.deleteButtonClick(index)
-                }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
-              ])
-            ])
+];
+const _hoisted_1$7 = { class: "flex flex-col gap-4" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "CollapseLayout",
+  props: { ...rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const jsonLayout = useJsonFormsLayout(props);
+    const { layout, renderers, cells } = jsonLayout;
+    const title = 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 openBlock(), createBlock(unref(Collapse), { title: title.value }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$7, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layout).uischema.elements, (element, index) => {
+              return openBlock(), createBlock(unref(DispatchRenderer), {
+                key: index,
+                schema: unref(layout).schema,
+                uischema: element,
+                path: unref(layout).path,
+                renderers: unref(renderers),
+                cells: unref(cells)
+              }, null, 8, ["schema", "uischema", "path", "renderers", "cells"]);
+            }), 128))
           ])
-        ]);
-      }), 128))
-    ]),
-    createElementVNode("div", _hoisted_4$1, [
-      createVNode(_component_Btn, {
-        icon: _ctx.IconEnum.Plus,
-        outline: true,
-        onClick: _ctx.addButtonClick
-      }, {
-        default: withCtx(() => [..._cache[0] || (_cache[0] = [
-          createTextVNode(" Add ", -1)
-        ])]),
+        ]),
         _: 1
-      }, 8, ["icon", "onClick"])
-    ]),
-    _ctx.noData ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: normalizeClass(_ctx.styles.arrayList.noData)
-    }, toDisplayString(_ctx.translations.noDataMessage), 3)) : createCommentVNode("", true)
-  ], 2)) : createCommentVNode("", true);
-}
-const ArrayRenderer = /* @__PURE__ */ _export_sfc(controlRenderer$1, [["render", _sfc_render$1]]);
-const controlRenderer = defineComponent({
-  name: "FixedArrayListRenderer",
-  components: {
-    DispatchRenderer
-  },
-  props: {
-    ...rendererProps()
-  },
-  setup(props) {
-    return useVanillaArrayControl(useJsonFormsArrayControl(props));
-  },
-  computed: {
-    noData() {
-      return !this.control.data || this.control.data.length === 0;
-    },
-    translations() {
-      const jsonforms = inject("jsonforms");
-      return getArrayTranslations(
-        jsonforms?.i18n?.translate ?? defaultJsonFormsI18nState.translate,
-        arrayDefaultTranslations,
-        this.control.i18nKeyPrefix,
-        this.control.label
-      );
-    },
-    labelKey() {
-      const key = this.uischema?.options?.labelKey;
-      if (!key) return null;
-      return key;
-    }
-  },
-  methods: {
-    composePaths,
-    createDefaultValue
+      }, 8, ["title"]);
+    };
+  }
+});
+const _hoisted_1$6 = { class: "flex flex-row gap-4 items-center" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "HorizontalLayout",
+  props: { ...rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { layout, renderers, cells } = useJsonFormsLayout(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layout).uischema.elements, (element, index) => {
+          return openBlock(), createBlock(unref(DispatchRenderer), {
+            key: index,
+            schema: unref(layout).schema,
+            uischema: element,
+            path: unref(layout).path,
+            renderers: unref(renderers),
+            cells: 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__ */ defineComponent({
+  __name: "VerticalLayout",
+  props: { ...rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const { layout, renderers, cells } = useJsonFormsLayout(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layout).uischema.elements, (element, index) => {
+          return openBlock(), createBlock(unref(DispatchRenderer), {
+            key: index,
+            schema: unref(layout).schema,
+            uischema: element,
+            path: unref(layout).path,
+            renderers: unref(renderers),
+            cells: unref(cells)
+          }, null, 8, ["schema", "uischema", "path", "renderers", "cells"]);
+        }), 128))
+      ]);
+    };
   }
 });
-const entry = {
-  renderer: controlRenderer,
-  tester: rankWith(2, isFixedArray)
-};
-const _hoisted_1$5 = { class: "fieldset" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dispatch_renderer = resolveComponent("dispatch-renderer");
-  return _ctx.control.visible ? (openBlock(), createElementBlock("fieldset", {
-    key: 0,
-    class: normalizeClass(_ctx.styles.arrayList.root)
-  }, [
-    !_ctx.labelKey ? (openBlock(), createElementBlock("legend", {
-      key: 0,
-      class: normalizeClass(_ctx.styles.arrayList.legend)
-    }, [
-      createElementVNode("label", {
-        class: normalizeClass(_ctx.styles.arrayList.label)
-      }, toDisplayString(_ctx.control.label), 3)
-    ], 2)) : createCommentVNode("", true),
-    createElementVNode("div", {
-      class: normalizeClass(_ctx.styles.fixedArrayList.root)
-    }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.control.data, (element, index) => {
-        return openBlock(), createElementBlock("div", {
-          key: `${_ctx.control.path}-${index}`,
-          class: normalizeClass(_ctx.styles.fixedArrayList.item)
-        }, [
-          createElementVNode("fieldset", _hoisted_1$5, [
-            _ctx.labelKey ? (openBlock(), createElementBlock("legend", {
-              key: 0,
-              class: normalizeClass(_ctx.styles.arrayList.legend)
-            }, toDisplayString(element[_ctx.labelKey]?.toLowerCase()), 3)) : createCommentVNode("", true),
-            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 ? (openBlock(), createElementBlock("div", {
-      key: 1,
-      class: normalizeClass(_ctx.styles.arrayList.noData)
-    }, toDisplayString(_ctx.translations.noDataMessage), 3)) : createCommentVNode("", true)
-  ], 2)) : createCommentVNode("", true);
-}
-const FixedArrayRenderer = /* @__PURE__ */ _export_sfc(controlRenderer, [["render", _sfc_render]]);
-const arrayRenderers = [
-  entry,
-  entry$1
-];
 const layoutRenderers = [
-  //  LayoutRenderer
+  {
+    tester: rankWith(10, uiTypeIs(LayoutTypes.VerticalLayout)),
+    renderer: _sfc_main$6
+  },
+  {
+    tester: rankWith(10, uiTypeIs(LayoutTypes.HorizontalLayout)),
+    renderer: _sfc_main$7
+  },
+  {
+    tester: rankWith(10, uiTypeIs(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__ */ defineComponent({
   __name: "table-filter",
   props: {
@@ -600,7 +594,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             _: 1
           })) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_3$1, [
+        createElementVNode("div", _hoisted_3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter) => {
             return openBlock(), createBlock(unref(BtnBadge), {
               key: filter.key,
@@ -930,12 +924,12 @@ const customRenderers = [
 const customRenderesName = customRenderers.map((c) => {
   return c.renderer.name;
 });
-const useVanillaRenderers = vanillaRenderers.filter(
+vanillaRenderers.filter(
   (v) => !customRenderesName.includes(v.renderer.name)
 );
 const tailwindRenderers = [
-  ...customRenderers,
-  ...useVanillaRenderers
+  ...vanillaRenderers,
+  ...customRenderers
 ];
 const _hoisted_1$1 = ["id"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
@@ -951,7 +945,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     "modelValue": {},
     "modelModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["valid", "change", "submit"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ mergeModels(["valid", "change", "submit", "errors"], ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const properties = __props;
     const _JSON_FORM_ID = `json-form-${Date.now()}`;
@@ -964,6 +958,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       valid.value = event.errors.length === 0;
       emits("valid", valid.value);
       emits("change", event.data);
+      emits("errors", event.errors);
+      Debugger.debug(event.errors);
     };
     const onSubmit = (event) => {
       event.preventDefault();
@@ -1004,10 +1000,8 @@ const _sfc_main$2 = /* @__PURE__ */ 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__ */ defineComponent({
   __name: "form-with-actions.component",
   props: /* @__PURE__ */ mergeModels({
@@ -1024,23 +1018,33 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const properties = __props;
     const valid = ref(false);
     const formData = useModel(__props, "modelValue");
+    const submitted = 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 = computed(() => {
+      if (!properties.updateTitle) return properties.createTitle;
+      return formData.value?.id ? properties.updateTitle : properties.createTitle;
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("h1", _hoisted_3, toDisplayString(formData.value?.id ? __props.updateTitle : __props.createTitle), 1),
+      return openBlock(), createBlock(unref(Collapse), { title: title.value }, {
+        default: withCtx(() => [
           createVNode(_sfc_main$2, {
             id: `form_${properties.id}`,
             modelValue: formData.value,
@@ -1050,29 +1054,41 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onValid: _cache[1] || (_cache[1] = ($event) => onValid($event)),
             onSubmit: save
           }, null, 8, ["id", "modelValue", "schema", "uischema"]),
-          createElementVNode("div", _hoisted_4, [
-            createVNode(unref(Btn), {
-              outline: true,
-              onClick: clear
-            }, {
-              default: withCtx(() => [..._cache[2] || (_cache[2] = [
-                createTextVNode(" Clear ", -1)
-              ])]),
-              _: 1
-            }),
-            createVNode(unref(Btn), {
-              color: unref(Color).primary,
-              disabled: !valid.value,
-              onClick: save
-            }, {
-              default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                createTextVNode(" Save ", -1)
-              ])]),
-              _: 1
-            }, 8, ["color", "disabled"])
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", null, [
+              !valid.value && submitted.value ? (openBlock(), createBlock(unref(Alert), {
+                key: 0,
+                message: "The form is not valid",
+                type: "error"
+              })) : createCommentVNode("", true)
+            ]),
+            createElementVNode("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "actions"),
+              !formData.value.id ? (openBlock(), createBlock(unref(Btn), {
+                key: 0,
+                outline: true,
+                onClick: clear
+              }, {
+                default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                  createTextVNode(" Clear ", -1)
+                ])]),
+                _: 1
+              })) : createCommentVNode("", true),
+              createVNode(unref(Btn), {
+                color: unref(Color).primary,
+                disabled: submitted.value,
+                onClick: save
+              }, {
+                default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                  createTextVNode(" Save ", -1)
+                ])]),
+                _: 1
+              }, 8, ["color", "disabled"])
+            ])
           ])
-        ])
-      ]);
+        ]),
+        _: 3
+      }, 8, ["title"]);
     };
   }
 });
@@ -1197,7 +1213,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}`);
     });
@@ -1205,13 +1221,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) => {
@@ -1226,7 +1246,7 @@ 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}`);
     });
@@ -1234,19 +1254,18 @@ const createRepository = (formSchemaModel, httpRequest, options = {}) => {
   return { create, patch, createMulti, delete: _delete, get };
 };
 export {
-  ArrayRenderer,
-  _sfc_main$6 as AutocompleteControlRenderer,
-  _sfc_main$c as BooleanControlRenderer,
-  FixedArrayRenderer,
+  _sfc_main$9 as ArrayRenderer,
+  _sfc_main$a as AutocompleteControlRenderer,
+  _sfc_main$g as BooleanControlRenderer,
   _sfc_main$2 as FormComponent,
   _sfc_main as FormModal,
   FormModalService,
   FormStore,
   _sfc_main$1 as FormWithActions,
   _sfc_main$3 as FormWithTableComponent,
-  _sfc_main$b as IntegerControlRenderer,
-  _sfc_main$9 as NumberControlRenderer,
-  _sfc_main$8 as StringControlRenderer,
+  _sfc_main$f as IntegerControlRenderer,
+  _sfc_main$d as NumberControlRenderer,
+  _sfc_main$c as StringControlRenderer,
   _sfc_main$4 as TableComponent,
   arrayRenderers,
   controlRenderers,
@@ -1254,11 +1273,10 @@ export {
   isArrayRenderer,
   isAutoCompleteControl,
   isCustomControl,
-  isFixedArray,
   isMarkdownControl,
   isStringFormat,
   isTextAreaControl,
   layoutRenderers,
-  _sfc_main$a as markdownControlRenderer,
+  _sfc_main$e as markdownControlRenderer,
   useFormState
 };