@ghentcdh/json-forms-vue 0.6.7 → 0.6.9

package/index.js

@@ -5,11 +5,12 @@ const ui = require("@ghentcdh/ui");
 const core = require("@jsonforms/core");
 const vue = require("vue");
 const vue$1 = require("@jsonforms/vue");
+const axios = require("axios");
 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) {
@@ -51,12 +52,15 @@ const useVanillaControlCustom = (input, adaptTarget = (v) => v.value) => {
   const controlWrapper = vue.computed(() => {
     return {
       ...vanillaControl.controlWrapper.value,
+      ...lodashEs.omit(vanillaControl.appliedOptions.value, "styles"),
+      ...lodashEs.pick(vanillaControl.appliedOptions.value.styles, ["width"]),
       isFocused: isFocused.value,
       isTouched: isTouched.value
     };
   });
   return {
     ...vanillaControl,
+    appliedOptions: vanillaControl.appliedOptions,
     controlWrapper,
     isFocused,
     isTouched,
@@ -65,7 +69,49 @@ const useVanillaControlCustom = (input, adaptTarget = (v) => v.value) => {
     // handleChange,
   };
 };
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$i = /* @__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 bindProperties = vue.computed(() => ({
+      ...controlWrapper.value,
+      ...appliedOptions.value
+    }));
+    const fetchOptions = vue.computed(() => {
+      const options = appliedOptions.value;
+      if (!options.uri) return null;
+      return () => {
+        const fetch = options.skipAuth ? axios : toolsVue.useApi();
+        return fetch.get(options.uri).then((data) => data.data[options.dataField ?? "data"]);
+      };
+    });
+    const handleChange = (result) => {
+      const { path } = control.value;
+      _handleChange(path, result);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Autocomplete), vue.mergeProps(bindProperties.value, {
+        modelValue: vue.unref(control).data,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.unref(control).data = $event),
+        enabled: vue.unref(control).enabled,
+        "fetch-options": fetchOptions.value,
+        onChange: handleChange,
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "fetch-options", "onFocus", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "BooleanControlRenderer",
   props: { ...vue$1.rendererProps() },
   setup(__props) {
@@ -86,7 +132,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "IntegerControlRenderer",
   props: { ...vue$1.rendererProps() },
   setup(__props) {
@@ -110,28 +156,64 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "MarkdownControlRenderer",
   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;
-    });
+    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: vue.unref(onChange),
+        onChange: changeValue,
         onFocus: vue.unref(onFocus),
         onBlur: vue.unref(onBlur)
-      }), null, 16, ["modelValue", "enabled", "config", "onChange", "onFocus", "onBlur"]);
+      }), null, 16, ["modelValue", "enabled", "config", "onFocus", "onBlur"]);
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  __name: "MultiSelectControlRender",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const {
+      control,
+      handleChange: _handleChange,
+      onFocus,
+      onBlur,
+      controlWrapper
+    } = useVanillaControlCustom(vue$1.useJsonFormsControl(props));
+    const handleChange = (result) => {
+      const { path } = control.value;
+      _handleChange(path, result);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.MultiSelect), 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,
+        onChange: handleChange,
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "onFocus", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "NumberControlRenderer",
   props: { ...vue$1.rendererProps() },
   setup(__props) {
@@ -155,26 +237,65 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  __name: "SelectControlRender",
+  props: { ...vue$1.rendererProps() },
+  setup(__props) {
+    const props = __props;
+    const {
+      control,
+      handleChange: _handleChange,
+      appliedOptions,
+      onFocus,
+      onBlur,
+      controlWrapper
+    } = useVanillaControlCustom(vue$1.useJsonFormsControl(props));
+    const handleChange = (result) => {
+      const { path } = control.value;
+      _handleChange(path, result);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.SelectComponent), 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,
+        options: vue.unref(appliedOptions)?.options,
+        onChange: handleChange,
+        onFocus: vue.unref(onFocus),
+        onBlur: vue.unref(onBlur)
+      }), null, 16, ["modelValue", "enabled", "options", "onFocus", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "StringControlRenderer",
   props: { ...vue$1.rendererProps() },
   setup(__props) {
     const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(vue$1.useJsonFormsControl(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", "onChange", "onFocus", "onBlur"]);
+      }), null, 16, ["modelValue", "enabled", "config", "styles", "onChange", "onFocus", "onBlur"]);
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "TextAreaControlRenderer",
   props: { ...vue$1.rendererProps() },
   setup(__props) {
@@ -209,10 +330,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),
@@ -223,52 +340,41 @@ const isCustomControl = (customType) => {
     testers.optionIs("type", customType)
   );
 };
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-  __name: "AutocompleteControlRenderer",
-  props: { ...vue$1.rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(vue$1.useJsonFormsControl(props), (target) => {
-      return target?.value ?? void 0;
-    });
-    const field = vue.computed(() => appliedOptions.value.field);
-    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: vue.unref(onChange),
-        onFocus: vue.unref(onFocus),
-        onBlur: vue.unref(onBlur)
-      }), null, 16, ["modelValue", "enabled", "config", "label-key", "value-key", "onChange", "onFocus", "onBlur"]);
-    };
-  }
-});
+const isMultiselectControl = testers.and(
+  core.uiTypeIs("Control"),
+  testers.optionIs("format", jsonFormsCore.ControlType.mutliSelect)
+);
+const isSelectControl = testers.and(
+  core.uiTypeIs("Control"),
+  testers.optionIs("format", jsonFormsCore.ControlType.select)
+);
 const controlRenderers = [
   // First custom renderers on format
   {
     tester: core.rankWith(10, isMarkdownControl),
-    renderer: _sfc_main$a
+    renderer: _sfc_main$f
   },
   {
     tester: core.rankWith(10, isAutoCompleteControl),
-    renderer: _sfc_main$6
+    renderer: _sfc_main$i
   },
   {
     tester: core.rankWith(10, isTextAreaControl),
-    renderer: _sfc_main$7
+    renderer: _sfc_main$a
   },
   // Renderers based on type if no format is provided
-  { tester: core.rankWith(10, isStringFormat), renderer: _sfc_main$8 },
-  { tester: core.rankWith(10, core.isNumberControl), renderer: _sfc_main$9 },
+  { tester: core.rankWith(10, isStringFormat), renderer: _sfc_main$b },
+  { tester: core.rankWith(10, isSelectControl), renderer: _sfc_main$c },
+  {
+    tester: core.rankWith(10, isMultiselectControl),
+    renderer: _sfc_main$e
+  },
+  { tester: core.rankWith(10, core.isNumberControl), renderer: _sfc_main$d },
   {
     tester: core.rankWith(10, core.isIntegerControl),
-    renderer: _sfc_main$b
+    renderer: _sfc_main$g
   },
-  { tester: core.rankWith(10, core.isBooleanControl), renderer: _sfc_main$c }
+  { tester: core.rankWith(10, core.isBooleanControl), renderer: _sfc_main$h }
 ];
 const actionMap = {
   edit: (router, action) => ({
@@ -303,262 +409,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 _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
+const arrayRenderers = [
+  {
+    tester: core.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 = 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 _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: {
@@ -602,7 +679,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,
@@ -932,12 +1009,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({
@@ -953,7 +1030,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()}`;
@@ -966,6 +1043,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();
@@ -1006,10 +1085,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({
@@ -1026,25 +1103,35 @@ 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}`,
+            id: `form_${__props.id}`,
             modelValue: formData.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.value = $event),
             schema: __props.formSchema.form.schema,
@@ -1052,29 +1139,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"]);
     };
   }
 });
@@ -1199,7 +1298,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}`);
     });
@@ -1207,13 +1306,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) => {
@@ -1228,26 +1331,27 @@ 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 = _sfc_main$6;
-exports.BooleanControlRenderer = _sfc_main$c;
-exports.FixedArrayRenderer = FixedArrayRenderer;
+exports.ArrayRenderer = _sfc_main$9;
+exports.AutocompleteControlRenderer = _sfc_main$i;
+exports.BooleanControlRenderer = _sfc_main$h;
 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 = _sfc_main$b;
-exports.NumberControlRenderer = _sfc_main$9;
-exports.StringControlRenderer = _sfc_main$8;
+exports.IntegerControlRenderer = _sfc_main$g;
+exports.MultiSelectControlRender = _sfc_main$e;
+exports.NumberControlRenderer = _sfc_main$d;
+exports.SelectControlRender = _sfc_main$c;
+exports.StringControlRenderer = _sfc_main$b;
 exports.TableComponent = _sfc_main$4;
 exports.arrayRenderers = arrayRenderers;
 exports.controlRenderers = controlRenderers;
@@ -1255,10 +1359,11 @@ exports.createRepository = createRepository;
 exports.isArrayRenderer = isArrayRenderer;
 exports.isAutoCompleteControl = isAutoCompleteControl;
 exports.isCustomControl = isCustomControl;
-exports.isFixedArray = isFixedArray;
 exports.isMarkdownControl = isMarkdownControl;
+exports.isMultiselectControl = isMultiselectControl;
+exports.isSelectControl = isSelectControl;
 exports.isStringFormat = isStringFormat;
 exports.isTextAreaControl = isTextAreaControl;
 exports.layoutRenderers = layoutRenderers;
-exports.markdownControlRenderer = _sfc_main$a;
+exports.markdownControlRenderer = _sfc_main$f;
 exports.useFormState = useFormState;