@ghentcdh/json-forms-vue 0.8.6 → 1.0.1

package/index.mjs

@@ -1,1128 +1,396 @@
-import { useApi, Debugger } from "@ghentcdh/tools-vue";
-import { NotificationService, Autocomplete, Checkbox, InputNumber, Markdown, MultiSelect, SelectComponent, Input, Textarea, Btn, IconEnum, Collapse, BtnBadge, TextCell, Table, hasCustomEventListener, Card, ModalService, myStyles, Alert, Color, Modal } from "@ghentcdh/ui";
-import { uiTypeIs, rankWith, isNumberControl, isIntegerControl, createDefaultValue, composePaths } from "@jsonforms/core";
-import { inject, provide, ref, computed, defineComponent, openBlock, createBlock, unref, mergeProps, createElementBlock, createElementVNode, normalizeClass, Fragment, renderList, createVNode, createCommentVNode, withCtx, createTextVNode, normalizeStyle, watch, toDisplayString, withModifiers, toRaw, renderSlot, useModel, mergeModels } from "vue";
-import { useJsonFormsControl, rendererProps, useJsonFormsArrayControl, DispatchRenderer, useJsonFormsLayout, JsonForms } from "@jsonforms/vue";
-import axios from "axios";
-import { useVanillaControl, useVanillaArrayControl, vanillaRenderers } from "@jsonforms/vue-vanilla";
-import { pick as pick$1, omit as omit$1, isArray } from "lodash-es";
-import { and, optionIs, or, schemaTypeIs, isBooleanControl as isBooleanControl$1 } from "@jsonforms/core/src/testers/testers";
-import { ControlType, LayoutTypes, RequestSchema, extractFilters, findColumnDef } from "@ghentcdh/json-forms-core";
+import { defineComponent, ref, watch, openBlock, createElementBlock, createElementVNode, createBlock, unref, withCtx, createTextVNode, createCommentVNode, Fragment, renderList, toDisplayString, computed, createVNode, inject, provide, resolveDynamicComponent, normalizeClass, useModel, mergeProps, renderSlot, mergeModels, isRef, toRef, onMounted, toRaw, nextTick, withModifiers } from "vue";
+import { isArray, isUndefined, pick as pick$1, isEmpty } from "lodash-es";
+import { RequestSchema, extractFilters, findColumnDef, ControlType, uiFromJsonSchema, enforceRequiredStringMinLength } from "@ghentcdh/json-forms-core";
+import { Btn, BtnBadge, IconEnum, BooleanCell, TextCell, Table, mergeStyles, Modal, Color, ModalService, Autocomplete, Checkbox, Markdown, MultiSelect, InputNumber, SelectComponent, Input, Textarea, Collapse, myStyles, NotificationService, hasCustomEventListener, Card } from "@ghentcdh/ui";
 import { computedAsync } from "@vueuse/core";
 import { useRoute, useRouter } from "vue-router";
-class FormStore {
-  constructor(uri) {
-    this.uri = uri;
-  }
-  async delete(data) {
-    return useApi().delete(`${this.uri}/${data.id}`).then(() => {
-      NotificationService.success("Data deleted");
-    }).catch((error2) => {
-      console.error(error2);
-      NotificationService.error("Error deleting data");
-    });
-  }
-  async save(id, data) {
-    if (!this.uri) return;
-    const promise2 = id ? useApi().patch(`${this.uri}/${id}`, data) : useApi().post(this.uri, data);
-    return promise2.then(() => {
-      NotificationService.success("Data saved");
-    }).catch((error2) => {
-      console.error(error2);
-      NotificationService.error("Error saving data");
-    });
-  }
-}
-const FormComponentProperties = {
-  /** Unique id applied to the `<form>` element and used as `<json-forms>` key. */
-  id: { type: String, required: true },
-  name: { type: String, default: "form" },
+import { useApi } from "@ghentcdh/tools-vue";
+import { useFieldArray, useField, useFieldValue, useForm } from "vee-validate";
+import { uiTypeIs, rankWith, or as or$1 } from "@jsonforms/core";
+import { and, optionIs, or, schemaTypeIs, isBooleanControl as isBooleanControl$1 } from "@jsonforms/core/src/testers/testers";
+import axios from "axios";
+const FormModalProperties = {
+  /** Title displayed in the modal header. */
+  modalTitle: { type: String, required: true },
+  /** Label for the save button. */
+  saveLabel: { type: String, default: "save" },
+  /** Label for the cancel button. */
+  cancelLabel: { type: String, default: "cancel" },
   /** JSON schema describing the shape of the form data. */
   schema: { type: Object, required: true },
   /** UI schema describing the layout and controls. */
   uiSchema: { type: Object, required: true },
-  /** Extra renderer entries merged in front of the built-in tailwind renderers. */
-  renderers: {
-    type: Array,
-    default: void 0
+  /** Modal width (`'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'`). */
+  modalSize: { type: String, default: "md" },
+  /** Callback invoked when the modal closes (with result or `null` on cancel). */
+  onClose: {
+    type: Function,
+    required: true
   },
-  /** Disables all controls inside the form. */
-  disabled: { type: Boolean, default: false },
-  formData: { type: Object, default: () => ({}) }
-};
-const FormComponentEmits = [
-  /** Emitted whenever validity changes (`true` = no errors). */
-  "valid",
-  /** Emitted on every change with the latest form data. */
-  "change",
-  /** Emitted when the native form submit fires. Payload: `SubmitFormEvent`. */
-  "submit",
-  /** Emitted with the raw Ajv validation errors array. */
-  "errors",
-  /** Generic event channel for custom renderer dispatches (`FormEventPayload`). */
-  "events"
-];
-const FormWithActionsProperties = {
-  /** Unique identifier; the inner form receives `form_${id}` as its id. */
-  id: { type: String, required: true },
-  /** Title shown when creating a new record (`formData.id` is falsy). */
-  createTitle: { type: String, required: true },
-  /** Title shown when editing an existing record. Falls back to `createTitle`. */
-  updateTitle: { type: String },
-  /** JSON schema describing the shape of the form data. */
-  schema: { type: Object },
-  /** UI schema describing the layout and controls. */
-  uiSchema: { type: Object },
-  /** When provided, the component submits the form to this URI via `FormStore`. */
-  uri: { type: String },
-  /** When true, the form content scrolls and the action bar stays pinned. */
-  scrollable: { type: Boolean, default: false },
-  /** When true, the component takes the full height of its parent. */
-  fullHeight: { type: Boolean, default: false }
+  /** Callback for form events dispatched by custom renderers. */
+  onEvents: {
+    type: Function
+  },
+  /** Initial form data to populate the form with. */
+  data: { type: Object, required: true },
+  /** When validation errors are shown. */
+  errorMode: {
+    type: String,
+    default: "onBlur"
+  }
 };
-const FormWithActionsEmits = [
-  /** v-model binding. */
-  "update:modelValue",
-  /** Emitted after a successful backend save (only when `uri` is defined). */
-  "success",
-  /** Emitted with form data when saving without a `uri`. */
-  "submit",
-  /** Emitted whenever the form validity changes. */
-  "valid",
-  /** Forwards custom renderer events (`FormEventPayload`). */
+const FormModalEmits = [
+  /** Emitted when the modal is closed (submit or cancel). */
+  "closeModal",
+  /** Emitted when a custom renderer dispatches a form event. */
   "events",
+  /** Emitted when validation errors change. */
   "errors",
-  /** Emitted when the cancel button is clicked (only visible when editing). */
-  "cancel"
-];
-const FormWithTableProperties = {
-  /** Unique identifier used to generate the table form id (`form_table_${id}`). */
-  id: { type: String, required: true },
-  /** Heading displayed above the table. */
-  tableTitle: { type: String, required: true },
-  /** Title shown in the create modal. */
-  createTitle: { type: String, required: true },
-  /** Title shown in the edit modal. Falls back to `createTitle`. */
-  updateTitle: { type: String },
-  /** Overrides `uri` as the data source for the table. */
-  dataUri: { type: String },
-  /** Custom action buttons rendered in each table row. */
-  tableActions: { type: Array },
-  /** Layout for the create/edit modal form. */
-  form: { type: Object },
-  /** Layout for the table columns. */
-  table: { type: Object },
-  /** Layout for the table filter controls. */
-  filter: { type: Object },
-  /** Base URI used by `FormStore` for CRUD operations and as the default table data source. */
-  uri: { type: String },
-  /** Default data used when opening the create modal. */
-  initialData: { type: Object, default: () => ({}) }
-};
-const FormWithTableEmits = [
-  /** Emitted when a table row is edited and a custom listener is bound. */
-  "editData",
-  /** Emitted after a record is successfully saved (created or updated). Payload: `{ id?: string, data: Data }`. */
-  "save",
-  /** Emitted after a record is successfully deleted. Payload: the deleted record. */
-  "delete",
-  /** Forwarded form events dispatched by custom renderers inside the modal (e.g. "create"). Payload: `FormEventPayload`. */
-  "events",
-  "custom:edit",
-  "custom:create"
+  /** Emitted when form validity changes. */
+  "valid"
 ];
-const createFormEvents = (dispatch) => ({
-  dispatch
-});
-const FORM_EVENTS_KEY = /* @__PURE__ */ Symbol("json-forms:events");
-const provideFormEvents = (dispatch) => {
-  const events = createFormEvents(dispatch);
-  provide(FORM_EVENTS_KEY, events);
-  return events;
-};
-const useFormEvents = () => {
-  return inject(
-    FORM_EVENTS_KEY,
-    createFormEvents(() => {
-    })
-  );
-};
-const useVanillaControlCustom = (input, adaptTarget = (v) => v.value) => {
-  const vanillaControl = useVanillaControl(input, adaptTarget);
-  const isTouched = ref(false);
-  const isFocused = ref(false);
-  const onFocus = () => {
-    isFocused.value = true;
-  };
-  const onBlur = () => {
-    isTouched.value = true;
-    isFocused.value = false;
-  };
-  const controlWrapper = computed(() => {
-    return {
-      ...vanillaControl.controlWrapper.value,
-      ...omit$1(vanillaControl.appliedOptions.value, "styles"),
-      ...pick$1(vanillaControl.appliedOptions.value.styles, ["width"]),
-      isFocused: isFocused.value,
-      isTouched: isTouched.value
-    };
-  });
-  return {
-    ...vanillaControl,
-    appliedOptions: vanillaControl.appliedOptions,
-    controlWrapper,
-    isFocused,
-    isTouched,
-    onFocus,
-    onBlur
-    // handleChange,
-  };
-};
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "AutocompleteControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const {
-      control,
-      handleChange: _handleChange,
-      appliedOptions,
-      onFocus,
-      onBlur,
-      controlWrapper
-    } = useVanillaControlCustom(useJsonFormsControl(props));
-    const bindProperties = computed(() => ({
-      ...controlWrapper.value,
-      ...appliedOptions.value,
-      enableCreate: !!appliedOptions.value.enableCreate
-    }));
-    const fetchOptions = computed(() => {
-      const options = appliedOptions.value;
-      if (!options.uri) return null;
-      return (searchTerm, signal) => {
-        const fetch = options.skipAuth ? axios : useApi();
-        return fetch.get(`${options.uri}${searchTerm}`, { signal }).then((data) => data.data[options.dataField ?? "data"]);
-      };
-    });
-    const handleChange = (result) => {
-      const { path } = control.value;
-      _handleChange(path, result);
+const _hoisted_1$8 = { class: "" };
+const _hoisted_2$2 = { class: "flex gap-2 items-center mb-2" };
+const _hoisted_3$1 = { class: "flex gap-2" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "table-filter",
+  props: {
+    layout: {},
+    filters: {}
+  },
+  emits: ["changeFilters", "removeFilter"],
+  setup(__props, { emit: __emit }) {
+    const formData = ref();
+    const properties = __props;
+    const emits = __emit;
+    watch(
+      () => properties.filters,
+      () => {
+        formData.value = {};
+        properties.filters.forEach((filter) => {
+          formData.value[filter.key] = filter.value;
+        });
+      },
+      { immediate: true }
+    );
+    const onResetFilters = () => {
+      emits("changeFilters", {});
     };
-    const formEvents = useFormEvents();
-    const create = () => {
-      formEvents.dispatch({
-        event: "create",
-        type: control.value.path,
-        data: control.value.data,
-        onSuccess: (result) => {
-          handleChange(result);
-        }
-      });
+    const removeFilter = (filter) => {
+      formData.value[filter.key] = void 0;
+      emits("changeFilters", formData.value);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Autocomplete), mergeProps(bindProperties.value, {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        "fetch-options": fetchOptions.value,
-        onChange: handleChange,
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur),
-        onCreate: _cache[0] || (_cache[0] = ($event) => create())
-      }), null, 16, ["model-value", "enabled", "fetch-options", "onFocus", "onBlur"]);
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$2, [
+          __props.filters.length ? (openBlock(), createBlock(unref(Btn), {
+            key: 0,
+            size: "xs",
+            outline: true,
+            onClick: onResetFilters
+          }, {
+            default: withCtx(() => [..._cache[0] || (_cache[0] = [
+              createTextVNode(" Reset all filters ", -1)
+            ])]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_3$1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter) => {
+            return openBlock(), createBlock(unref(BtnBadge), {
+              key: filter.key,
+              icon: unref(IconEnum).Close,
+              onClick: ($event) => removeFilter(filter)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(filter.label) + ": " + toDisplayString(filter.value), 1)
+              ]),
+              _: 2
+            }, 1032, ["icon", "onClick"]);
+          }), 128))
+        ])
+      ]);
     };
   }
 });
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "BooleanControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const {
-      control,
-      handleChange: _handleChange,
-      appliedOptions,
-      onFocus,
-      onBlur,
-      controlWrapper
-    } = useVanillaControlCustom(useJsonFormsControl(props), (target) => {
-      if (!target.value) {
-        handleChange(false);
+const TableComponentProperties = {
+  id: { type: String, required: true },
+  uiSchema: { type: Object, required: true },
+  schema: { type: Object, required: true },
+  filterUiSchema: { type: Object },
+  filterSchema: { type: Object },
+  uri: { type: String, required: true },
+  reload: { type: Number },
+  actions: { type: Array }
+};
+const TableComponentEmits = ["delete", "edit"];
+class TableStore {
+  constructor() {
+    this.route = useRoute();
+    this.router = useRouter();
+    this.requestData = ref(RequestSchema.parse(this.route.query));
+    this._reload = ref(Date.now());
+    this.loading = ref(true);
+    this.uri = ref("");
+    this.data = computedAsync(async () => {
+      this._reload.value;
+      if (!this.uri.value) return null;
+      this.loading.value = true;
+      if (this.requestData.value.page < 1) {
+        this.requestData.value.page = 1;
+      }
+      const response = await useApi().get(this.uri.value, {
+        params: this.requestData.value
+      }).catch((error2) => {
+        console.error(error2);
+        return { data: [], request: { totalPages: 1, page: 1 } };
+      }).finally(() => this.loading.value = false);
+      const data = response.data;
+      if (data.request.totalPages < data.request.page) {
+        this.updateRequest({ page: data.request.totalPages });
       }
-      return Boolean(target.value) ?? false;
+      return data;
+    });
+    this.pageData = computed(() => {
+      const request = this.data.value?.request ?? {
+        count: 0,
+        pageSize: 1,
+        page: 1
+      };
+      return {
+        count: request.count,
+        pageSize: request.pageSize,
+        page: request.page
+      };
+    });
+    this.tableData = computed(() => {
+      const d = this.data.value;
+      if (!d) return [];
+      if (this.loading.value) return [];
+      return d.data ?? [];
     });
-    const handleChange = (result) => {
-      const { path } = control.value;
-      _handleChange(path, result);
+    this.init = (url2) => {
+      this.uri.value = url2;
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Checkbox), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        config: unref(appliedOptions),
-        onChange: handleChange,
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "config", "onFocus", "onBlur"]);
+    this.updateRequest = (data) => {
+      this.requestData.value = { ...this.requestData.value, ...data };
+      this.router.replace({
+        query: {
+          ...this.route.query,
+          ...this.requestData.value
+        }
+      });
     };
-  }
-});
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "IntegerControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(
-      useJsonFormsControl(props),
-      (target) => target.value === "" ? void 0 : Number(target.value)
-    );
-    const steps = computed(() => appliedOptions.value.steps ?? 1);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(InputNumber), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        config: unref(appliedOptions),
-        steps: steps.value,
-        onChange: unref(onChange),
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "config", "steps", "onChange", "onFocus", "onBlur"]);
+    this.sort = (id) => {
+      const sortDir = this.requestData.value.sort === id && this.requestData.value.sortDir === "asc" ? "desc" : "asc";
+      this.updateRequest({ sort: id, sortDir });
     };
-  }
-});
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  __name: "MarkdownControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    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), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        config: unref(appliedOptions),
-        onChange: changeValue,
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "config", "onFocus", "onBlur"]);
-    };
-  }
-});
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "MultiSelectControlRender",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const {
-      control,
-      handleChange: _handleChange,
-      onFocus,
-      onBlur,
-      controlWrapper
-    } = useVanillaControlCustom(useJsonFormsControl(props));
-    const handleChange = (result) => {
-      const { path } = control.value;
-      _handleChange(path, result);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(MultiSelect), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        onChange: handleChange,
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "onFocus", "onBlur"]);
+    this.updateFilters = (filters) => {
+      const filter = [];
+      Object.entries(filters).forEach(([key, value]) => {
+        if (!value) return;
+        const operator = value?.operator || "contains";
+        filter.push(`${key}:${value}:${operator}`);
+      });
+      this.updateRequest({ filter });
     };
-  }
-});
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "NumberControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(
-      useJsonFormsControl(props),
-      (target) => target.value === "" ? void 0 : Number(target.value)
+    this.sorting = computed(() => {
+      const requestData = this.requestData.value;
+      return {
+        sortColumn: requestData.sort,
+        sortDirection: requestData.sortDir ?? "asc"
+      };
+    });
+    this.filters = computed(
+      () => extractFilters(this.requestData.value.filter)
     );
-    const steps = computed(() => appliedOptions.value.steps ?? 0.01);
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(InputNumber), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        config: unref(appliedOptions),
-        steps: steps.value,
-        onChange: unref(onChange),
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "config", "steps", "onChange", "onFocus", "onBlur"]);
-    };
   }
-});
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "SelectControlRender",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const {
-      control,
-      handleChange: _handleChange,
-      appliedOptions,
-      onFocus,
-      onBlur,
-      controlWrapper
-    } = useVanillaControlCustom(useJsonFormsControl(props));
-    const handleChange = (result) => {
-      const { path } = control.value;
-      _handleChange(path, result);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(SelectComponent), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        options: unref(appliedOptions)?.options,
-        onChange: handleChange,
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "options", "onFocus", "onBlur"]);
-    };
+  get httpRequest() {
+    return useApi();
   }
-});
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "StringControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const {
-      control,
-      onChange,
-      appliedOptions,
-      onFocus,
-      onBlur,
-      controlWrapper,
-      styles
-    } = useVanillaControlCustom(useJsonFormsControl(props));
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Input), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        config: unref(appliedOptions),
-        styles: unref(styles),
-        onChange: unref(onChange),
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "config", "styles", "onChange", "onFocus", "onBlur"]);
-    };
+  reload() {
+    this._reload.value = Date.now();
   }
-});
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  __name: "TextAreaControlRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const { control, onChange, appliedOptions, onFocus, onBlur, controlWrapper } = useVanillaControlCustom(useJsonFormsControl(props));
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Textarea), mergeProps(unref(controlWrapper), {
-        "model-value": unref(control).data,
-        enabled: unref(control).enabled,
-        config: unref(appliedOptions),
-        onChange: unref(onChange),
-        onFocus: unref(onFocus),
-        onBlur: unref(onBlur)
-      }), null, 16, ["model-value", "enabled", "config", "onChange", "onFocus", "onBlur"]);
-    };
+  updatePage(page) {
+    this.updateRequest({ page });
   }
-});
-const isAutoCompleteControl = and(
-  // uiTypeIs('Control'),
-  optionIs("format", ControlType.autocomplete)
-);
-const isTextAreaControl = and(
-  uiTypeIs("Control"),
-  optionIs("format", ControlType.textArea)
-);
-const isStringFormat = and(
-  uiTypeIs("Control"),
-  or(optionIs("format", ControlType.string), schemaTypeIs("string"))
-);
-const isMarkdownControl = and(
-  uiTypeIs("Control"),
-  optionIs("format", ControlType.markdown)
-);
-const isArrayRenderer = and(
-  schemaTypeIs("array")
-  // optionIs('format', ControlType.array),
-);
-const isCustomControl = (customType) => {
-  return and(
-    optionIs("format", ControlType.custom),
-    optionIs("type", customType)
-  );
+}
+const tableCache = /* @__PURE__ */ new Map();
+const useTableStore = (name) => {
+  const tableStore = tableCache.get(name);
+  if (tableStore) {
+    return tableStore;
+  }
+  const newTableStore = new TableStore();
+  tableCache.set(name, newTableStore);
+  return newTableStore;
 };
-const isMultiselectControl = and(
-  uiTypeIs("Control"),
-  optionIs("format", ControlType.mutliSelect)
-);
-const isSelectControl = and(
-  uiTypeIs("Control"),
-  optionIs("format", ControlType.select)
-);
-const isBooleanControl = or(
-  isBooleanControl$1,
-  and(uiTypeIs("Control"), optionIs("format", ControlType.boolean))
-);
-const controlRenderers = [
-  // First custom renderers on format
-  {
-    tester: rankWith(10, isMarkdownControl),
-    renderer: _sfc_main$g
-  },
-  {
-    tester: rankWith(10, isAutoCompleteControl),
-    renderer: _sfc_main$j
-  },
-  {
-    tester: rankWith(10, isTextAreaControl),
-    renderer: _sfc_main$b
-  },
-  // Renderers based on type if no format is provided
-  { tester: rankWith(10, isStringFormat), renderer: _sfc_main$c },
-  { tester: rankWith(10, isSelectControl), renderer: _sfc_main$d },
-  {
-    tester: rankWith(10, isMultiselectControl),
-    renderer: _sfc_main$f
-  },
-  { tester: rankWith(10, isNumberControl), renderer: _sfc_main$e },
-  {
-    tester: rankWith(10, isIntegerControl),
-    renderer: _sfc_main$h
-  },
-  { tester: rankWith(10, isBooleanControl), renderer: _sfc_main$i }
-];
-const _hoisted_1$9 = ["title"];
-const _hoisted_2$2 = { key: 0 };
-const _hoisted_3$1 = {
-  key: 1,
-  class: "list-row"
+const _hoisted_1$7 = {
+  key: 0,
+  class: "mb-2"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  __name: "ArrayRenderer",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const vanillaArrayControl = useVanillaArrayControl(
-      useJsonFormsArrayControl(props)
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "table.component",
+  props: TableComponentProperties,
+  emits: TableComponentEmits,
+  setup(__props, { emit: __emit }) {
+    const properties = __props;
+    const emit = __emit;
+    watch(
+      () => properties.reload,
+      () => {
+        store.reload();
+      }
     );
-    const { styles, childUiSchema, control, appliedOptions } = vanillaArrayControl;
-    if (!control.value.data || control.value.data.length < 1) {
-      vanillaArrayControl.addItem(
-        control.value.path,
-        createDefaultValue(control.value.schema, control.value.rootSchema)
-      )();
-    }
-    const noData = computed(
-      () => !control.value.data || control.value.data.length === 0
+    let store = useTableStore(properties.id);
+    watch(
+      () => properties.uri,
+      () => {
+        store.init(properties.uri);
+      },
+      { immediate: true }
     );
-    const showDelete = computed(() => control.value.data?.length > 1);
-    const deleteButtonClick = (index) => {
-      vanillaArrayControl.removeItems(control.value.path, [index])();
+    const edit = (data) => {
+      emit("edit", data);
+    };
+    const deleteFn = (data) => {
+      emit("delete", data);
+    };
+    const components = {
+      TextCell,
+      BooleanCell
+    };
+    const displayColumns = computed(() => {
+      return properties.uiSchema.elements.map((e) => {
+        const element = e;
+        const def = findColumnDef(element, properties.schema);
+        const type = isArray(def.type) ? def.type[0] : def.type;
+        let component;
+        if (element.options?.format && element.options.format in components) {
+          component = components[element.options.format];
+        } else {
+          component = components[element.type];
+        }
+        if (!component) console.warn("No component found for type", element.type);
+        return {
+          ...def,
+          type,
+          component
+        };
+      });
+    });
+    const onChangeFilters = (filters) => {
+      store.updateFilters(filters);
+    };
+    const onUpdatePage = (page) => {
+      store.updatePage(page);
     };
-    const addButtonClick = () => {
-      vanillaArrayControl.addItem(
-        control.value.path,
-        createDefaultValue(control.value.schema, control.value.rootSchema)
-      )();
+    const onSort = (id) => {
+      store.sort(id);
     };
-    const showActions = computed(() => {
-      return !appliedOptions.value.hideActions;
+    const sort = computed(() => {
+      return store.sorting.value ?? { orderBy: "", ascending: 1 };
     });
     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, [
-                  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$9);
+      return openBlock(), createElementBlock("div", null, [
+        _ctx.filterUiSchema && _ctx.filterSchema ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+          createVNode(_sfc_main$h, {
+            layout: { uiSchema: _ctx.filterUiSchema, schema: _ctx.filterSchema },
+            filters: unref(store).filters.value,
+            onChangeFilters
+          }, null, 8, ["layout", "filters"])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", null, [
+          createVNode(unref(Table), {
+            "display-columns": displayColumns.value,
+            sort: sort.value,
+            page: unref(store).pageData.value,
+            loading: unref(store).loading.value,
+            data: unref(store).tableData.value,
+            actions: _ctx.actions,
+            onUpdatePage,
+            onDelete: deleteFn,
+            onEdit: edit,
+            onSort
+          }, null, 8, ["display-columns", "sort", "page", "loading", "data", "actions"])
+        ])
+      ]);
     };
   }
 });
-const arrayRenderers = [
-  {
-    tester: rankWith(12, isArrayRenderer),
-    renderer: _sfc_main$a
-  }
-];
-const _hoisted_1$8 = { class: "flex flex-col gap-4" };
-const _sfc_main$9 = /* @__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$8, [
-            (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))
-          ])
-        ]),
-        _: 1
-      }, 8, ["title"]);
-    };
-  }
-});
-const _hoisted_1$7 = {
-  class: "grid gap-4 items-center",
-  style: { "grid-template-columns": "repeat(12, 1fr)" }
-};
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "GridLayout",
-  props: { ...rendererProps() },
-  setup(__props) {
-    const props = __props;
-    const { layout, renderers, cells } = useJsonFormsLayout(props);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layout).uischema.elements, (element, index) => {
-          return openBlock(), createElementBlock("div", {
-            key: index,
-            style: normalizeStyle({
-              "grid-column": `span ${element.options?.colspan ?? 12}`
-            })
-          }, [
-            createVNode(unref(DispatchRenderer), {
-              schema: unref(layout).schema,
-              uischema: element,
-              path: unref(layout).path,
-              renderers: unref(renderers),
-              cells: unref(cells)
-            }, null, 8, ["schema", "uischema", "path", "renderers", "cells"])
-          ], 4);
-        }), 128))
-      ]);
-    };
-  }
-});
-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 layoutRenderers = [
-  {
-    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$9
-  },
-  {
-    tester: rankWith(10, uiTypeIs(LayoutTypes.GridLayout)),
-    renderer: _sfc_main$8
-  }
-];
-const _hoisted_1$4 = { class: "" };
-const _hoisted_2$1 = { class: "flex gap-2 items-center mb-2" };
-const _hoisted_3 = { class: "flex gap-2" };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "table-filter",
-  props: {
-    layout: {},
-    filters: {}
-  },
-  emits: ["changeFilters", "removeFilter"],
-  setup(__props, { emit: __emit }) {
-    const formData = ref();
-    const properties = __props;
-    const emits = __emit;
-    watch(
-      () => properties.filters,
-      () => {
-        formData.value = {};
-        properties.filters.forEach((filter) => {
-          formData.value[filter.key] = filter.value;
-        });
-      },
-      { immediate: true }
-    );
-    const onResetFilters = () => {
-      emits("changeFilters", {});
-    };
-    const removeFilter = (filter) => {
-      formData.value[filter.key] = void 0;
-      emits("changeFilters", formData.value);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createElementVNode("div", _hoisted_2$1, [
-          __props.filters.length ? (openBlock(), createBlock(unref(Btn), {
-            key: 0,
-            size: "xs",
-            outline: true,
-            onClick: onResetFilters
-          }, {
-            default: withCtx(() => [..._cache[0] || (_cache[0] = [
-              createTextVNode(" Reset all filters ", -1)
-            ])]),
-            _: 1
-          })) : createCommentVNode("", true)
-        ]),
-        createElementVNode("div", _hoisted_3, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.filters, (filter) => {
-            return openBlock(), createBlock(unref(BtnBadge), {
-              key: filter.key,
-              icon: unref(IconEnum).Close,
-              onClick: ($event) => removeFilter(filter)
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(filter.label) + ": " + toDisplayString(filter.value), 1)
-              ]),
-              _: 2
-            }, 1032, ["icon", "onClick"]);
-          }), 128))
-        ])
-      ]);
-    };
-  }
-});
-const TableComponentProperties = {
-  id: { type: String, required: true },
-  uiSchema: { type: Object, required: true },
-  schema: { type: Object, required: true },
-  filterUiSchema: { type: Object },
-  filterSchema: { type: Object },
-  uri: { type: String, required: true },
-  reload: { type: Number },
-  actions: { type: Array }
-};
-const TableComponentEmits = ["delete", "edit"];
-class TableStore {
-  constructor() {
-    this.route = useRoute();
-    this.router = useRouter();
-    this.requestData = ref(RequestSchema.parse(this.route.query));
-    this._reload = ref(Date.now());
-    this.loading = ref(true);
-    this.uri = ref("");
-    this.data = computedAsync(async () => {
-      this._reload.value;
-      if (!this.uri.value) return null;
-      this.loading.value = true;
-      if (this.requestData.value.page < 1) {
-        this.requestData.value.page = 1;
-      }
-      const response = await useApi().get(this.uri.value, {
-        params: this.requestData.value
-      }).catch((error2) => {
-        console.error(error2);
-        return { data: [], request: { totalPages: 1, page: 1 } };
-      }).finally(() => this.loading.value = false);
-      const data = response.data;
-      if (data.request.totalPages < data.request.page) {
-        this.updateRequest({ page: data.request.totalPages });
-      }
-      return data;
-    });
-    this.pageData = computed(() => {
-      const request = this.data.value?.request ?? {
-        count: 0,
-        pageSize: 1,
-        page: 1
-      };
-      return {
-        count: request.count,
-        pageSize: request.pageSize,
-        page: request.page
-      };
-    });
-    this.tableData = computed(() => {
-      const d = this.data.value;
-      if (!d) return [];
-      if (this.loading.value) return [];
-      return d.data ?? [];
+const createRepository = (formSchemaModel, httpRequest, options = {}) => {
+  const notificationEntity = options.notification?.entityType || "entity";
+  const notificationStore = options.notification?.notification ?? null;
+  const getDataUri = (...suffix) => {
+    return [formSchemaModel.uri, ...suffix].join("/");
+  };
+  const handleSuccess = (message) => {
+    notificationStore?.success(message);
+  };
+  const handleError = (error2, message) => {
+    console.error(error2);
+    notificationStore?.error(message);
+    throw new Error(error2);
+  };
+  const create = (object2, options2) => {
+    return httpRequest.post(getDataUri(), object2, options2).then((response) => {
+      handleSuccess(`Created ${notificationEntity}`);
+      return response.data;
+    }).catch((response) => {
+      handleError(response, `Failed to create ${notificationEntity}`);
     });
-    this.init = (url2) => {
-      this.uri.value = url2;
-    };
-    this.updateRequest = (data) => {
-      this.requestData.value = { ...this.requestData.value, ...data };
-      this.router.replace({
-        query: {
-          ...this.route.query,
-          ...this.requestData.value
-        }
-      });
-    };
-    this.sort = (id) => {
-      const sortDir = this.requestData.value.sort === id && this.requestData.value.sortDir === "asc" ? "desc" : "asc";
-      this.updateRequest({ sort: id, sortDir });
-    };
-    this.updateFilters = (filters) => {
-      const filter = [];
-      Object.entries(filters).forEach(([key, value]) => {
-        if (!value) return;
-        const operator = value?.operator || "contains";
-        filter.push(`${key}:${value}:${operator}`);
-      });
-      this.updateRequest({ filter });
-    };
-    this.sorting = computed(() => {
-      const requestData = this.requestData.value;
-      return {
-        sortColumn: requestData.sort,
-        sortDirection: requestData.sortDir ?? "asc"
-      };
+  };
+  const patch = (id, object2, options2) => {
+    return httpRequest.patch(getDataUri(id), object2, options2).then((response) => {
+      handleSuccess(`Saved ${notificationEntity}`);
+      return response.data;
+    }).catch((response) => {
+      handleError(response, `Failed to save ${notificationEntity}`);
     });
-    this.filters = computed(
-      () => extractFilters(this.requestData.value.filter)
-    );
-  }
-  get httpRequest() {
-    return useApi();
-  }
-  reload() {
-    this._reload.value = Date.now();
-  }
-  updatePage(page) {
-    this.updateRequest({ page });
-  }
-}
-const tableCache = /* @__PURE__ */ new Map();
-const useTableStore = (name) => {
-  const tableStore = tableCache.get(name);
-  if (tableStore) {
-    return tableStore;
-  }
-  const newTableStore = new TableStore();
-  tableCache.set(name, newTableStore);
-  return newTableStore;
-};
-const _hoisted_1$3 = {
-  key: 0,
-  class: "mb-2"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "table.component",
-  props: TableComponentProperties,
-  emits: TableComponentEmits,
-  setup(__props, { emit: __emit }) {
-    const properties = __props;
-    const emit = __emit;
-    watch(
-      () => properties.reload,
-      () => {
-        store.reload();
-      }
-    );
-    let store = useTableStore(properties.id);
-    watch(
-      () => properties.uri,
-      () => {
-        store.init(properties.uri);
-      },
-      { immediate: true }
-    );
-    const edit = (data) => {
-      emit("edit", data);
-    };
-    const deleteFn = (data) => {
-      emit("delete", data);
-    };
-    const components = {
-      TextCell
-    };
-    const displayColumns = computed(() => {
-      return properties.uiSchema.elements.map((e) => {
-        const element = e;
-        const def = findColumnDef(element, properties.schema);
-        const type = isArray(def.type) ? def.type[0] : def.type;
-        let component;
-        if (element.options?.format && element.options.format in components) {
-          component = components[element.options.format];
-        } else {
-          component = components[element.type];
-        }
-        if (!component) console.warn("No component found for type", element.type);
-        return {
-          ...def,
-          type,
-          component
-        };
-      });
+  };
+  const get = (id, options2) => {
+    return httpRequest.get(getDataUri(id), options2).then((response) => {
+      return response.data;
+    }).catch((response) => {
+      handleError(response, `Failed to load data`);
     });
-    const onChangeFilters = (filters) => {
-      store.updateFilters(filters);
-    };
-    const onUpdatePage = (page) => {
-      store.updatePage(page);
-    };
-    const onSort = (id) => {
-      store.sort(id);
-    };
-    const sort = computed(() => {
-      return store.sorting.value ?? { orderBy: "", ascending: 1 };
+  };
+  const _delete = (id, options2) => {
+    return httpRequest.delete(getDataUri(id), options2).then((response) => {
+      handleSuccess(`${notificationEntity} deleted`);
+      return response;
+    }).catch((response) => {
+      handleError(response, `Failed to delete ${notificationEntity}`);
     });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        _ctx.filterUiSchema && _ctx.filterSchema ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-          createVNode(_sfc_main$5, {
-            layout: { uiSchema: _ctx.filterUiSchema, schema: _ctx.filterSchema },
-            filters: unref(store).filters.value,
-            onChangeFilters
-          }, null, 8, ["layout", "filters"])
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", null, [
-          createVNode(unref(Table), {
-            "display-columns": displayColumns.value,
-            sort: sort.value,
-            page: unref(store).pageData.value,
-            loading: unref(store).loading.value,
-            data: unref(store).tableData.value,
-            actions: _ctx.actions,
-            onUpdatePage,
-            onDelete: deleteFn,
-            onEdit: edit,
-            onSort
-          }, null, 8, ["display-columns", "sort", "page", "loading", "data", "actions"])
-        ])
-      ]);
-    };
-  }
-});
-const _hoisted_1$2 = { class: "flex justify-between items-center mb-2" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "form-with-table.component",
-  props: FormWithTableProperties,
-  emits: FormWithTableEmits,
-  setup(__props, { emit: __emit }) {
-    const properties = __props;
-    const emit = __emit;
-    const reload = ref(0);
-    const resolvedForm = computed(() => properties.form);
-    const resolvedTable = computed(() => properties.table);
-    const resolvedFilter = computed(() => properties.filter);
-    const resolvedUri = computed(() => properties.uri);
-    let store = new FormStore(resolvedUri.value ?? "");
-    watch(resolvedUri, (uri) => {
-      store = new FormStore(uri ?? "");
+  };
+  const createMulti = (objects, options2) => {
+    return Promise.all(
+      objects.map((object2) => httpRequest.post(getDataUri(), object2, options2))
+    ).then((response) => {
+      handleSuccess(`Created ${notificationEntity}`);
+      return response.data;
+    }).catch((response) => {
+      handleError(response, `Failed to save ${notificationEntity}`);
     });
-    const hasEdit = hasCustomEventListener("editData");
-    const customEdit = hasCustomEventListener("custom:edit");
-    const customCreate = hasCustomEventListener("custom:create");
-    const edit = (data) => {
-      if (customEdit) {
-        emit("custom:edit", data);
-        return;
-      }
-      if (hasEdit) {
-        emit("editData", data);
-        return;
-      }
-      openModal(data);
-    };
-    const create = () => {
-      if (customCreate) {
-        emit("custom:create");
-        return;
-      }
-      openModal();
-    };
-    const deleteFn = (data) => {
-      ModalService.showConfirm({
-        title: "Delete record",
-        message: "Are you sure to delete, the data will be lost?",
-        onClose: (result) => {
-          if (result.confirmed) {
-            store.delete(data).then(() => {
-              reload.value = Date.now();
-              emit("delete", data);
-            });
-          }
-        }
-      });
-    };
-    const openModal = (formData) => {
-      if (!resolvedForm.value) return;
-      const isUpdate = !!formData?.id;
-      FormModalService.openModal({
-        schema: resolvedForm.value.schema,
-        uiSchema: resolvedForm.value.uiSchema,
-        modalSize: resolvedForm.value.modalSize,
-        initialData: formData ?? properties.initialData,
-        modalTitle: (isUpdate ? properties.updateTitle ?? properties.createTitle : properties.createTitle) ?? "",
-        onClose: (result) => {
-          if (result && result.valid) {
-            store.save(formData?.id, result.data).then(() => {
-              reload.value = Date.now();
-              emit("save", { id: formData?.id, data: result.data });
-            });
-          }
-        },
-        onEvents: (payload) => emit("events", payload)
-      });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$2, [
-          createElementVNode("h1", null, toDisplayString(_ctx.tableTitle), 1),
-          createElementVNode("div", null, [
-            createVNode(unref(Btn), {
-              icon: unref(IconEnum).Plus,
-              outline: true,
-              onClick: create
-            }, {
-              default: withCtx(() => [..._cache[0] || (_cache[0] = [
-                createTextVNode(" Add new record ", -1)
-              ])]),
-              _: 1
-            }, 8, ["icon"])
-          ])
-        ]),
-        resolvedTable.value ? (openBlock(), createBlock(unref(Card), { key: 0 }, {
-          default: withCtx(() => [
-            resolvedUri.value ? (openBlock(), createBlock(unref(_sfc_main$4), {
-              key: 0,
-              id: `form_table_${_ctx.id}`,
-              "ui-schema": resolvedTable.value.uiSchema,
-              schema: resolvedTable.value.schema,
-              "filter-ui-schema": resolvedFilter.value?.uiSchema,
-              "filter-schema": resolvedFilter.value?.schema,
-              uri: _ctx.dataUri ?? resolvedUri.value,
-              reload: reload.value,
-              actions: _ctx.tableActions,
-              onEdit: edit,
-              onDelete: deleteFn
-            }, null, 8, ["id", "ui-schema", "schema", "filter-ui-schema", "filter-schema", "uri", "reload", "actions"])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 64);
-    };
-  }
+  };
+  return { create, patch, createMulti, delete: _delete, get };
+};
+const createFormEvents = (dispatch) => ({
+  dispatch
 });
+const FORM_EVENTS_KEY = /* @__PURE__ */ Symbol("json-forms:events");
+const provideFormEvents = (dispatch) => {
+  const events = createFormEvents(dispatch);
+  provide(FORM_EVENTS_KEY, events);
+  return events;
+};
+const useFormEvents = () => {
+  return inject(
+    FORM_EVENTS_KEY,
+    createFormEvents(() => {
+    })
+  );
+};
 function $constructor(name, initializer2, params) {
   function init(inst, def) {
     if (!inst._zod) {
@@ -1657,7 +925,7 @@ function flattenError(error2, mapper = (issue2) => issue2.message) {
   }
   return { formErrors, fieldErrors };
 }
-function formatError(error2, mapper = (issue2) => issue2.message) {
+function formatError$1(error2, mapper = (issue2) => issue2.message) {
   const fieldErrors = { _errors: [] };
   const processError = (error3) => {
     for (const issue2 of error3.issues) {
@@ -3110,11 +2378,11 @@ const $ZodDate = /* @__PURE__ */ $constructor("$ZodDate", (inst, def) => {
     return payload;
   };
 });
-function handleArrayResult(result, final, index) {
+function handleArrayResult(result, final, index2) {
   if (result.issues.length) {
-    final.issues.push(...prefixIssues(index, result.issues));
+    final.issues.push(...prefixIssues(index2, result.issues));
   }
-  final.value[index] = result.value;
+  final.value[index2] = result.value;
 }
 const $ZodArray = /* @__PURE__ */ $constructor("$ZodArray", (inst, def) => {
   $ZodType.init(inst, def);
@@ -3605,14 +2873,14 @@ function mergeValues(a, b) {
       return { valid: false, mergeErrorPath: [] };
     }
     const newArray = [];
-    for (let index = 0; index < a.length; index++) {
-      const itemA = a[index];
-      const itemB = b[index];
+    for (let index2 = 0; index2 < a.length; index2++) {
+      const itemA = a[index2];
+      const itemB = b[index2];
       const sharedValue = mergeValues(itemA, itemB);
       if (!sharedValue.valid) {
         return {
           valid: false,
-          mergeErrorPath: [index, ...sharedValue.mergeErrorPath]
+          mergeErrorPath: [index2, ...sharedValue.mergeErrorPath]
         };
       }
       newArray.push(sharedValue.data);
@@ -3728,11 +2996,11 @@ const $ZodTuple = /* @__PURE__ */ $constructor("$ZodTuple", (inst, def) => {
     return payload;
   };
 });
-function handleTupleResult(result, final, index) {
+function handleTupleResult(result, final, index2) {
   if (result.issues.length) {
-    final.issues.push(...prefixIssues(index, result.issues));
+    final.issues.push(...prefixIssues(index2, result.issues));
   }
-  final.value[index] = result.value;
+  final.value[index2] = result.value;
 }
 const $ZodRecord = /* @__PURE__ */ $constructor("$ZodRecord", (inst, def) => {
   $ZodType.init(inst, def);
@@ -6330,7 +5598,7 @@ const initializer = (inst, issues) => {
   inst.name = "ZodError";
   Object.defineProperties(inst, {
     format: {
-      value: (mapper) => formatError(inst, mapper)
+      value: (mapper) => formatError$1(inst, mapper)
       // enumerable: false,
     },
     flatten: {
@@ -7892,302 +7160,1402 @@ function convertBaseSchema(schema, ctx) {
       if (typeof schema.multipleOf === "number") {
         numberSchema = numberSchema.multipleOf(schema.multipleOf);
       }
-      zodSchema = numberSchema;
+      zodSchema = numberSchema;
+      break;
+    }
+    case "boolean": {
+      zodSchema = z.boolean();
+      break;
+    }
+    case "null": {
+      zodSchema = z.null();
+      break;
+    }
+    case "object": {
+      const shape = {};
+      const properties = schema.properties || {};
+      const requiredSet = new Set(schema.required || []);
+      for (const [key, propSchema] of Object.entries(properties)) {
+        const propZodSchema = convertSchema(propSchema, ctx);
+        shape[key] = requiredSet.has(key) ? propZodSchema : propZodSchema.optional();
+      }
+      if (schema.propertyNames) {
+        const keySchema = convertSchema(schema.propertyNames, ctx);
+        const valueSchema = schema.additionalProperties && typeof schema.additionalProperties === "object" ? convertSchema(schema.additionalProperties, ctx) : z.any();
+        if (Object.keys(shape).length === 0) {
+          zodSchema = z.record(keySchema, valueSchema);
+          break;
+        }
+        const objectSchema2 = z.object(shape).passthrough();
+        const recordSchema = z.looseRecord(keySchema, valueSchema);
+        zodSchema = z.intersection(objectSchema2, recordSchema);
+        break;
+      }
+      if (schema.patternProperties) {
+        const patternProps = schema.patternProperties;
+        const patternKeys = Object.keys(patternProps);
+        const looseRecords = [];
+        for (const pattern of patternKeys) {
+          const patternValue = convertSchema(patternProps[pattern], ctx);
+          const keySchema = z.string().regex(new RegExp(pattern));
+          looseRecords.push(z.looseRecord(keySchema, patternValue));
+        }
+        const schemasToIntersect = [];
+        if (Object.keys(shape).length > 0) {
+          schemasToIntersect.push(z.object(shape).passthrough());
+        }
+        schemasToIntersect.push(...looseRecords);
+        if (schemasToIntersect.length === 0) {
+          zodSchema = z.object({}).passthrough();
+        } else if (schemasToIntersect.length === 1) {
+          zodSchema = schemasToIntersect[0];
+        } else {
+          let result = z.intersection(schemasToIntersect[0], schemasToIntersect[1]);
+          for (let i = 2; i < schemasToIntersect.length; i++) {
+            result = z.intersection(result, schemasToIntersect[i]);
+          }
+          zodSchema = result;
+        }
+        break;
+      }
+      const objectSchema = z.object(shape);
+      if (schema.additionalProperties === false) {
+        zodSchema = objectSchema.strict();
+      } else if (typeof schema.additionalProperties === "object") {
+        zodSchema = objectSchema.catchall(convertSchema(schema.additionalProperties, ctx));
+      } else {
+        zodSchema = objectSchema.passthrough();
+      }
+      break;
+    }
+    case "array": {
+      const prefixItems = schema.prefixItems;
+      const items = schema.items;
+      if (prefixItems && Array.isArray(prefixItems)) {
+        const tupleItems = prefixItems.map((item) => convertSchema(item, ctx));
+        const rest = items && typeof items === "object" && !Array.isArray(items) ? convertSchema(items, ctx) : void 0;
+        if (rest) {
+          zodSchema = z.tuple(tupleItems).rest(rest);
+        } else {
+          zodSchema = z.tuple(tupleItems);
+        }
+        if (typeof schema.minItems === "number") {
+          zodSchema = zodSchema.check(z.minLength(schema.minItems));
+        }
+        if (typeof schema.maxItems === "number") {
+          zodSchema = zodSchema.check(z.maxLength(schema.maxItems));
+        }
+      } else if (Array.isArray(items)) {
+        const tupleItems = items.map((item) => convertSchema(item, ctx));
+        const rest = schema.additionalItems && typeof schema.additionalItems === "object" ? convertSchema(schema.additionalItems, ctx) : void 0;
+        if (rest) {
+          zodSchema = z.tuple(tupleItems).rest(rest);
+        } else {
+          zodSchema = z.tuple(tupleItems);
+        }
+        if (typeof schema.minItems === "number") {
+          zodSchema = zodSchema.check(z.minLength(schema.minItems));
+        }
+        if (typeof schema.maxItems === "number") {
+          zodSchema = zodSchema.check(z.maxLength(schema.maxItems));
+        }
+      } else if (items !== void 0) {
+        const element = convertSchema(items, ctx);
+        let arraySchema = z.array(element);
+        if (typeof schema.minItems === "number") {
+          arraySchema = arraySchema.min(schema.minItems);
+        }
+        if (typeof schema.maxItems === "number") {
+          arraySchema = arraySchema.max(schema.maxItems);
+        }
+        zodSchema = arraySchema;
+      } else {
+        zodSchema = z.array(z.any());
+      }
       break;
     }
-    case "boolean": {
-      zodSchema = z.boolean();
-      break;
+    default:
+      throw new Error(`Unsupported type: ${type}`);
+  }
+  if (schema.description) {
+    zodSchema = zodSchema.describe(schema.description);
+  }
+  if (schema.default !== void 0) {
+    zodSchema = zodSchema.default(schema.default);
+  }
+  return zodSchema;
+}
+function convertSchema(schema, ctx) {
+  if (typeof schema === "boolean") {
+    return schema ? z.any() : z.never();
+  }
+  let baseSchema = convertBaseSchema(schema, ctx);
+  const hasExplicitType = schema.type || schema.enum !== void 0 || schema.const !== void 0;
+  if (schema.anyOf && Array.isArray(schema.anyOf)) {
+    const options = schema.anyOf.map((s) => convertSchema(s, ctx));
+    const anyOfUnion = z.union(options);
+    baseSchema = hasExplicitType ? z.intersection(baseSchema, anyOfUnion) : anyOfUnion;
+  }
+  if (schema.oneOf && Array.isArray(schema.oneOf)) {
+    const options = schema.oneOf.map((s) => convertSchema(s, ctx));
+    const oneOfUnion = z.xor(options);
+    baseSchema = hasExplicitType ? z.intersection(baseSchema, oneOfUnion) : oneOfUnion;
+  }
+  if (schema.allOf && Array.isArray(schema.allOf)) {
+    if (schema.allOf.length === 0) {
+      baseSchema = hasExplicitType ? baseSchema : z.any();
+    } else {
+      let result = hasExplicitType ? baseSchema : convertSchema(schema.allOf[0], ctx);
+      const startIdx = hasExplicitType ? 0 : 1;
+      for (let i = startIdx; i < schema.allOf.length; i++) {
+        result = z.intersection(result, convertSchema(schema.allOf[i], ctx));
+      }
+      baseSchema = result;
     }
-    case "null": {
-      zodSchema = z.null();
-      break;
+  }
+  if (schema.nullable === true && ctx.version === "openapi-3.0") {
+    baseSchema = z.nullable(baseSchema);
+  }
+  if (schema.readOnly === true) {
+    baseSchema = z.readonly(baseSchema);
+  }
+  const extraMeta = {};
+  const coreMetadataKeys = ["$id", "id", "$comment", "$anchor", "$vocabulary", "$dynamicRef", "$dynamicAnchor"];
+  for (const key of coreMetadataKeys) {
+    if (key in schema) {
+      extraMeta[key] = schema[key];
     }
-    case "object": {
-      const shape = {};
-      const properties = schema.properties || {};
-      const requiredSet = new Set(schema.required || []);
-      for (const [key, propSchema] of Object.entries(properties)) {
-        const propZodSchema = convertSchema(propSchema, ctx);
-        shape[key] = requiredSet.has(key) ? propZodSchema : propZodSchema.optional();
+  }
+  const contentMetadataKeys = ["contentEncoding", "contentMediaType", "contentSchema"];
+  for (const key of contentMetadataKeys) {
+    if (key in schema) {
+      extraMeta[key] = schema[key];
+    }
+  }
+  for (const key of Object.keys(schema)) {
+    if (!RECOGNIZED_KEYS.has(key)) {
+      extraMeta[key] = schema[key];
+    }
+  }
+  if (Object.keys(extraMeta).length > 0) {
+    ctx.registry.add(baseSchema, extraMeta);
+  }
+  return baseSchema;
+}
+function fromJSONSchema(schema, params) {
+  if (typeof schema === "boolean") {
+    return schema ? z.any() : z.never();
+  }
+  const version2 = detectVersion(schema);
+  const defs = schema.$defs || schema.definitions || {};
+  const ctx = {
+    version: version2,
+    defs,
+    refs: /* @__PURE__ */ new Map(),
+    processing: /* @__PURE__ */ new Set(),
+    rootSchema: schema,
+    registry: globalRegistry
+  };
+  return convertSchema(schema, ctx);
+}
+config(en());
+const errorPatterns = [
+  [/^Invalid input: expected \w+, received undefined$/, "This field is required"],
+  [/^Invalid input: expected \w+, received null$/, "This field is required"],
+  [/^Expected string, received/, "Invalid value"],
+  [/^String must contain at least (\d+)/, "Must be at least $1 characters"],
+  [/^Number must be greater than or equal to (\d+)/, "Minimum value is $1"],
+  [/^Number must be less than or equal to (\d+)/, "Maximum value is $1"]
+];
+const formatError = (message) => {
+  if (!message) return void 0;
+  for (const [pattern, replacement] of errorPatterns) {
+    if (pattern.test(message)) {
+      return message.replace(pattern, replacement);
+    }
+  }
+  return message;
+};
+const registerZodErrorMap = () => {
+  config({
+    customError: (issue2) => {
+      if (issue2.code === "invalid_type" && issue2.received === "undefined") {
+        return { message: "This field is required" };
       }
-      if (schema.propertyNames) {
-        const keySchema = convertSchema(schema.propertyNames, ctx);
-        const valueSchema = schema.additionalProperties && typeof schema.additionalProperties === "object" ? convertSchema(schema.additionalProperties, ctx) : z.any();
-        if (Object.keys(shape).length === 0) {
-          zodSchema = z.record(keySchema, valueSchema);
-          break;
-        }
-        const objectSchema2 = z.object(shape).passthrough();
-        const recordSchema = z.looseRecord(keySchema, valueSchema);
-        zodSchema = z.intersection(objectSchema2, recordSchema);
-        break;
+      if (issue2.code === "invalid_type" && issue2.received === "null") {
+        return { message: "This field is required" };
       }
-      if (schema.patternProperties) {
-        const patternProps = schema.patternProperties;
-        const patternKeys = Object.keys(patternProps);
-        const looseRecords = [];
-        for (const pattern of patternKeys) {
-          const patternValue = convertSchema(patternProps[pattern], ctx);
-          const keySchema = z.string().regex(new RegExp(pattern));
-          looseRecords.push(z.looseRecord(keySchema, patternValue));
+      if (issue2.code === "too_small") {
+        const i = issue2;
+        if (i.type === "string" && i.minimum === 1) {
+          return { message: "This field is required" };
         }
-        const schemasToIntersect = [];
-        if (Object.keys(shape).length > 0) {
-          schemasToIntersect.push(z.object(shape).passthrough());
+        if (i.type === "string") {
+          return { message: `Must be at least ${i.minimum} characters` };
         }
-        schemasToIntersect.push(...looseRecords);
-        if (schemasToIntersect.length === 0) {
-          zodSchema = z.object({}).passthrough();
-        } else if (schemasToIntersect.length === 1) {
-          zodSchema = schemasToIntersect[0];
-        } else {
-          let result = z.intersection(schemasToIntersect[0], schemasToIntersect[1]);
-          for (let i = 2; i < schemasToIntersect.length; i++) {
-            result = z.intersection(result, schemasToIntersect[i]);
-          }
-          zodSchema = result;
+      }
+      if (issue2.code === "too_big") {
+        const i = issue2;
+        if (i.type === "string") {
+          return { message: `Must be at most ${i.maximum} characters` };
         }
-        break;
       }
-      const objectSchema = z.object(shape);
-      if (schema.additionalProperties === false) {
-        zodSchema = objectSchema.strict();
-      } else if (typeof schema.additionalProperties === "object") {
-        zodSchema = objectSchema.catchall(convertSchema(schema.additionalProperties, ctx));
-      } else {
-        zodSchema = objectSchema.passthrough();
+      return { message: issue2.message };
+    }
+  });
+};
+function findRenderer(registry2, uischema, schema) {
+  let best = null;
+  for (const entry of registry2) {
+    const rank = entry.tester(uischema, schema);
+    if (rank > -1 && (!best || rank > best.rank)) {
+      best = { rank, renderer: entry.renderer };
+    }
+  }
+  return best?.renderer ?? null;
+}
+const scopeToPath = (scope) => {
+  if (!scope) return "";
+  return scope.replace(/^#\//, "").split("/").filter((s) => s !== "properties").join(".");
+};
+const resolveSchema = (root, scope) => {
+  const segments = scope.replace(/^#\//, "").split("/").filter(Boolean);
+  return segments.reduce((acc, key) => acc?.[key], root);
+};
+const _hoisted_1$6 = {
+  key: 1,
+  class: "text-error text-xs"
+};
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "Dispatch",
+  props: {
+    uischema: {},
+    schema: {},
+    pathPrefix: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const registry2 = inject("renderers");
+    const rootSchema = inject("rootSchema");
+    const parentPrefix = inject("pathPrefix", "");
+    const effectivePrefix = props.pathPrefix ?? parentPrefix;
+    if (props.pathPrefix !== void 0) {
+      provide("pathPrefix", effectivePrefix);
+    }
+    const resolved = computed(() => {
+      const u = props.uischema;
+      if (!u.scope) return props.schema;
+      const fromRoot = resolveSchema(rootSchema, u.scope);
+      if (fromRoot) return fromRoot;
+      return resolveSchema(props.schema, u.scope) ?? props.schema;
+    });
+    const renderer = computed(
+      () => findRenderer(registry2, props.uischema, resolved.value)
+    );
+    return (_ctx, _cache) => {
+      return renderer.value ? (openBlock(), createBlock(resolveDynamicComponent(renderer.value), {
+        key: 0,
+        uischema: __props.uischema,
+        schema: resolved.value
+      }, null, 8, ["uischema", "schema"])) : (openBlock(), createElementBlock("div", _hoisted_1$6, " No renderer for " + toDisplayString(__props.uischema.scope ?? __props.uischema.type), 1));
+    };
+  }
+});
+const JsonFormComponentProperties = {
+  /** Unique identifier used to namespace the form element. */
+  id: { type: String, required: true },
+  /** HTML name attribute for the form. */
+  name: { type: String, default: "form" },
+  /** JSON schema describing the shape of the form data. */
+  schema: { type: Object, required: true },
+  /** UI schema describing the layout and controls. */
+  uiSchema: { type: Object, required: true },
+  /** Disable all form controls. */
+  disabled: { type: Boolean, default: false },
+  /** Current form data object. */
+  formData: { type: Object, default: () => ({}) },
+  /** When validation errors are shown (`'onBlur'`, `'onChange'`, `'onSubmit'`, `'always'`). */
+  errorMode: {
+    type: String,
+    default: "onChanges"
+  }
+};
+const JsonFormComponentEmits = [
+  /** Emitted when form data changes. */
+  "change",
+  /** Emitted on form submission. */
+  "submit",
+  /** Emitted when validation errors change. */
+  "errors",
+  /** Emitted when form validity changes. */
+  "valid",
+  /** Emitted when a custom renderer dispatches a form event. */
+  "events"
+];
+const ERROR_MODE_KEY = /* @__PURE__ */ Symbol("errorMode");
+const FORM_SUBMITTED_KEY = /* @__PURE__ */ Symbol("formSubmitted");
+const _hoisted_1$5 = { class: "flex-1" };
+const _hoisted_2$1 = { key: 0 };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm text-base-content/50"
+};
+const _hoisted_4 = { key: 1 };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "ArrayRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const parentPrefix = inject("pathPrefix", "");
+    const scope = props.uischema.scope;
+    const scopePath = scopeToPath(scope);
+    const path = parentPrefix ? `${parentPrefix}.${scopePath}` : scopePath;
+    const rootSchema = inject("rootSchema");
+    const arraySchema = resolveSchema(rootSchema, scope);
+    const itemSchema = arraySchema?.items ?? {};
+    const { fields, push, remove } = useFieldArray(path);
+    if (fields.value.length === 0) {
+      push({});
+    }
+    const opts = props.uischema.options ?? {};
+    const layout = opts.layout ?? "column";
+    const showActions = computed(() => !opts.hideActions);
+    const detail = computed(
+      () => props.uischema._detail ?? opts.detail
+    );
+    const childElements = computed(() => {
+      if (!detail.value) {
+        return props.uischema.elements ?? [];
+      }
+      const type = detail.value.type;
+      if (type && type !== "Control") {
+        return [detail.value];
+      }
+      return detail.value.elements ?? [detail.value];
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", {
+          class: normalizeClass([
+            "flex gap-2",
+            unref(layout) === "row" ? "flex-row items-center" : "flex-col"
+          ])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(fields), (entry, index2) => {
+            return openBlock(), createElementBlock("div", {
+              key: entry.key,
+              class: "flex-1"
+            }, [
+              createElementVNode("div", {
+                class: normalizeClass([
+                  "flex gap-2",
+                  unref(layout) === "row" ? "flex-col" : "flex-row items-center"
+                ])
+              }, [
+                createElementVNode("div", _hoisted_1$5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(childElements.value, (child, ci) => {
+                    return openBlock(), createBlock(_sfc_main$f, {
+                      key: ci,
+                      uischema: child,
+                      schema: unref(itemSchema),
+                      "path-prefix": `${unref(path)}[${index2}]`
+                    }, null, 8, ["uischema", "schema", "path-prefix"]);
+                  }), 128))
+                ]),
+                showActions.value ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+                  unref(fields).length > 1 ? (openBlock(), createBlock(unref(Btn), {
+                    key: 0,
+                    icon: unref(IconEnum).Delete,
+                    outline: true,
+                    onClick: ($event) => unref(remove)(index2)
+                  }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true)
+              ], 2)
+            ]);
+          }), 128)),
+          unref(fields).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_3, " No data ")) : createCommentVNode("", true),
+          showActions.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            createVNode(unref(Btn), {
+              icon: unref(IconEnum).Plus,
+              outline: true,
+              onClick: _cache[0] || (_cache[0] = ($event) => unref(push)({}))
+            }, {
+              default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                createTextVNode(" Add ", -1)
+              ])]),
+              _: 1
+            }, 8, ["icon"])
+          ])) : createCommentVNode("", true)
+        ], 2)
+      ]);
+    };
+  }
+});
+const isAutoCompleteControl = and(
+  // uiTypeIs('Control'),
+  optionIs("format", ControlType.autocomplete)
+);
+const isTextAreaControl = and(
+  uiTypeIs("Control"),
+  optionIs("format", ControlType.textArea)
+);
+const isStringFormat = and(
+  uiTypeIs("Control"),
+  or(optionIs("format", ControlType.string), schemaTypeIs("string"))
+);
+const isMarkdownControl = and(
+  uiTypeIs("Control"),
+  optionIs("format", ControlType.markdown)
+);
+const isArrayRenderer = and(
+  schemaTypeIs("array")
+  // optionIs('format', ControlType.array),
+);
+const isMultiselectControl = and(
+  uiTypeIs("Control"),
+  optionIs("format", ControlType.mutliSelect)
+);
+const isSelectControl = and(
+  uiTypeIs("Control"),
+  optionIs("format", ControlType.select)
+);
+const isBooleanControl = or(
+  isBooleanControl$1,
+  and(uiTypeIs("Control"), optionIs("format", ControlType.boolean))
+);
+const isNumberFormat = and(
+  uiTypeIs("Control"),
+  or(optionIs("format", ControlType.number), schemaTypeIs("number"))
+);
+const isIntegerFormat = and(
+  uiTypeIs("Control"),
+  or(optionIs("format", ControlType.integer), schemaTypeIs("integer"))
+);
+const arrayRenderers = [
+  { tester: rankWith(12, isArrayRenderer), renderer: _sfc_main$e }
+];
+const MethodSchema = _enum(["get", "post", "delete", "put", "patch"]);
+const OperationSchema = object({
+  uri: string(),
+  method: MethodSchema
+});
+const OperationsSchema = string().or(OperationSchema);
+const BooleanOperationSchema = boolean().or(OperationSchema).optional().default(false);
+const Operations = object({
+  findAll: BooleanOperationSchema,
+  findOne: BooleanOperationSchema,
+  create: BooleanOperationSchema,
+  update: BooleanOperationSchema,
+  delete: BooleanOperationSchema,
+  lookup: OperationsSchema.optional()
+});
+const OperationMap = {
+  create: "post",
+  delete: "delete",
+  findAll: "get",
+  findOne: "get",
+  lookup: "get",
+  update: "get"
+};
+const ResourceSchema = object({
+  id: string(),
+  uri: string(),
+  operations: Operations,
+  schema: object({
+    ui: any().optional(),
+    data: any()
+  }).optional()
+}).transform((data) => {
+  const schema = data.schema;
+  if (schema) {
+    if (!schema.ui) {
+      schema.ui = uiFromJsonSchema(schema.data);
+    }
+  }
+  const operations = {};
+  for (const k in OperationMap) {
+    const key = k;
+    const defaultOperation = OperationMap[key];
+    const operation = data.operations[key];
+    const mapResourceSchema = () => {
+      if (isUndefined(operation) || operation === false) return null;
+      if (operation === true)
+        return { uri: data.uri, method: defaultOperation };
+      if (typeof operation === "string")
+        return { uri: operation, method: "get" };
+      return {
+        uri: operation.uri,
+        method: operation.method ?? defaultOperation
+      };
+    };
+    operations[key] = mapResourceSchema();
+  }
+  return {
+    ...data,
+    schema,
+    operations
+  };
+});
+const getResourceSchema = async (resourceUri, skipAuth) => {
+  const fetch = skipAuth ? axios : useApi();
+  return fetch.get(resourceUri).then((response) => {
+    const resource = ResourceSchema.safeParse(response.data);
+    if (!resource.success)
+      throw new Error(`Invalid resource schema: ${resource.error}`);
+    return resource.data;
+  });
+};
+const useRemoteOption = (options) => {
+  return {
+    fetchOptions: (searchTerm, signal) => {
+      const fetch = options.skipAuth ? axios : useApi();
+      return fetch.get(`${options.uri}${searchTerm}`, { signal }).then((data) => data.data[options.dataField ?? "data"]);
+    }
+  };
+};
+const useResourceOptions = async (options) => {
+  const resource = await getResourceSchema(
+    options.resource,
+    options.skipAuth ?? false
+  );
+  const fetch = options.skipAuth ? axios : useApi();
+  const lookup = resource.operations.lookup;
+  return {
+    fetchOptions: (searchTerm, signal) => {
+      const uri = lookup.uri.replace("{text}", searchTerm);
+      const method = lookup.method;
+      return fetch[method](uri, { signal }).then(
+        (data) => data.data[options.dataField ?? "data"]
+      );
+    },
+    enableCreate: !!resource.operations.create,
+    form: resource.operations.create ? {
+      ui_schema: resource.schema.ui,
+      json_schema: resource.schema.data,
+      title: `Create new ${resource.id}`,
+      create: async (data) => {
+        const create = resource.operations.create;
+        return fetch[create.method](create.uri, data).then(
+          (result) => result.data
+        );
+      }
+    } : null
+  };
+};
+const useFetchOptions = async (options) => {
+  let config2 = {};
+  if (options.uri)
+    config2 = useRemoteOption(options);
+  if (options.resource)
+    config2 = await useResourceOptions(options);
+  return {
+    fetchOptions: null,
+    labelKey: options.labelKey,
+    valueKey: options.valueKey,
+    enableCreate: options.enableCreate ?? false,
+    form: null,
+    ...config2
+  };
+};
+const checkRequired = (rootSchema, scope, fieldName) => {
+  const segments = scope.replace(/^#\//, "").split("/");
+  const parentSegments = segments.slice(0, -2);
+  if (parentSegments.length === 0) {
+    const req2 = rootSchema?.required;
+    return Array.isArray(req2) && req2.includes(fieldName);
+  }
+  const parentScope = `#/${parentSegments.join("/")}`;
+  const parentSchema = resolveSchema(rootSchema, parentScope);
+  const req = parentSchema?.required;
+  return Array.isArray(req) && req.includes(fieldName);
+};
+const useInputProps = (uischema, schema, field, options = {}) => {
+  const rootSchema = inject("rootSchema");
+  const path = scopeToPath(uischema.scope);
+  const { errorMessage, meta: meta2 } = field;
+  const opts = uischema.options ?? {};
+  const labelFromScope = path.split(".").pop() ?? "";
+  const isRequired = rootSchema ? checkRequired(rootSchema, uischema.scope, labelFromScope) : false;
+  const s = schema ?? {};
+  const inferredType = (() => {
+    if (opts.format === "text") return "text";
+    if (s.format === "email") return "email";
+    if (s.format === "uri") return "url";
+    if (s.type === "number" || s.type === "integer") return "number";
+    return options.defaultType ?? "text";
+  })();
+  const styles = mergeStyles(opts.styles);
+  const errorMode = inject(ERROR_MODE_KEY, ref("onBlur"));
+  const submitted = inject(FORM_SUBMITTED_KEY, ref(false));
+  const shouldShowError = computed(() => {
+    if (!errorMessage.value) return false;
+    switch (errorMode.value) {
+      case "always":
+        return true;
+      case "onChange":
+        return meta2.dirty;
+      case "onSubmit":
+        return submitted.value;
+      case "onBlur":
+      default:
+        return meta2.touched;
+    }
+  });
+  const width = opts.colspan || styles?.width === "full" ? "w-full" : opts.width ?? "min-w-input";
+  return computed(() => ({
+    id: path,
+    placeholder: opts.placeholder,
+    description: s.description,
+    errors: shouldShowError.value ? opts.errorMessage ?? formatError(errorMessage.value) : void 0,
+    label: opts.label ?? labelFromScope.charAt(0).toUpperCase() + labelFromScope.slice(1),
+    visible: opts.visible ?? true,
+    required: isRequired,
+    enabled: opts.readonly !== true,
+    isFocused: false,
+    isTouched: shouldShowError.value,
+    hideLabel: opts.hideLabel ?? false,
+    styles,
+    width,
+    type: inferredType,
+    ...options.overrides
+  }));
+};
+const useCustomControlBinding = ({
+  useProps,
+  setDefaultValue
+} = {}) => {
+  return (uischema, schema, options = {}) => {
+    const pathPrefix = inject("pathPrefix", "");
+    const scopePath = scopeToPath(uischema.scope);
+    const path = pathPrefix ? `${pathPrefix}.${scopePath}` : scopePath;
+    const field = useField(() => path);
+    setDefaultValue?.(field);
+    const wrapper = useInputProps(uischema, schema, field, options);
+    const customWrapper = useProps?.(uischema, schema, field, options) ?? {
+      value: {}
+    };
+    const onBlur = () => field.handleBlur(new Event("blur"));
+    const onChange = () => field.handleChange(field.value.value);
+    let initialized = false;
+    watch(field.value, (val) => {
+      if (!initialized) {
+        initialized = true;
+        return;
       }
-      break;
+      field.handleChange(val);
+    });
+    return {
+      wrapper: computed(() => ({ ...wrapper.value, ...customWrapper.value })),
+      value: field.value,
+      field,
+      onBlur,
+      onChange,
+      appliedOptions: computed(
+        () => uischema.options ?? {}
+      )
+    };
+  };
+};
+const useControlBinding = (uischema, schema, options = {}) => {
+  return useCustomControlBinding()(uischema, schema, options);
+};
+const useSelectInput = (...fields) => (uischema, schema, field) => {
+  const opts = uischema.options ?? {};
+  return computed(() => {
+    return pick$1(opts, fields);
+  });
+};
+const useSelectBinding = useCustomControlBinding({
+  useProps: useSelectInput("options", "labelKey", "valueKey")
+});
+const useAutocompleteBinding = useCustomControlBinding({
+  useProps: useSelectInput(
+    "options",
+    "labelKey",
+    "valueKey",
+    "uri",
+    "freeText",
+    "enableCreate",
+    "dataField",
+    "skipAuth"
+  )
+});
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "FormModal",
+  props: /* @__PURE__ */ mergeModels(FormModalProperties, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(FormModalEmits, ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const properties = __props;
+    const id = `modal_${Math.floor(Math.random() * 1e3)}`;
+    const formRef = ref();
+    const valid = ref(false);
+    const formData = useModel(__props, "modelValue");
+    const emits = __emit;
+    if (properties.data) {
+      formData.value = properties.data;
     }
-    case "array": {
-      const prefixItems = schema.prefixItems;
-      const items = schema.items;
-      if (prefixItems && Array.isArray(prefixItems)) {
-        const tupleItems = prefixItems.map((item) => convertSchema(item, ctx));
-        const rest = items && typeof items === "object" && !Array.isArray(items) ? convertSchema(items, ctx) : void 0;
-        if (rest) {
-          zodSchema = z.tuple(tupleItems).rest(rest);
-        } else {
-          zodSchema = z.tuple(tupleItems);
-        }
-        if (typeof schema.minItems === "number") {
-          zodSchema = zodSchema.check(z.minLength(schema.minItems));
-        }
-        if (typeof schema.maxItems === "number") {
-          zodSchema = zodSchema.check(z.maxLength(schema.maxItems));
-        }
-      } else if (Array.isArray(items)) {
-        const tupleItems = items.map((item) => convertSchema(item, ctx));
-        const rest = schema.additionalItems && typeof schema.additionalItems === "object" ? convertSchema(schema.additionalItems, ctx) : void 0;
-        if (rest) {
-          zodSchema = z.tuple(tupleItems).rest(rest);
-        } else {
-          zodSchema = z.tuple(tupleItems);
-        }
-        if (typeof schema.minItems === "number") {
-          zodSchema = zodSchema.check(z.minLength(schema.minItems));
-        }
-        if (typeof schema.maxItems === "number") {
-          zodSchema = zodSchema.check(z.maxLength(schema.maxItems));
-        }
-      } else if (items !== void 0) {
-        const element = convertSchema(items, ctx);
-        let arraySchema = z.array(element);
-        if (typeof schema.minItems === "number") {
-          arraySchema = arraySchema.min(schema.minItems);
-        }
-        if (typeof schema.maxItems === "number") {
-          arraySchema = arraySchema.max(schema.maxItems);
-        }
-        zodSchema = arraySchema;
-      } else {
-        zodSchema = z.array(z.any());
+    const onCancel = () => {
+      formData.value = {};
+      emits("closeModal", null);
+    };
+    const onChange = (data) => {
+      formData.value = data;
+    };
+    const onSubmit = () => {
+      formRef.value?.markSubmitted();
+      if (!valid.value) return;
+      emits("closeModal", { data: formData.value, valid: valid.value });
+    };
+    const onErrors = (errors) => {
+      emits("errors", errors);
+      valid.value = isEmpty(errors);
+    };
+    watch(valid, (newValid, oldValid) => {
+      if (newValid !== oldValid) {
+        emits("valid", newValid);
       }
-      break;
-    }
-    default:
-      throw new Error(`Unsupported type: ${type}`);
-  }
-  if (schema.description) {
-    zodSchema = zodSchema.describe(schema.description);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Modal), mergeProps(properties, {
+        open: true,
+        "disable-close": false,
+        width: _ctx.modalSize,
+        onCloseModal: onCancel
+      }), {
+        content: withCtx(() => [
+          renderSlot(_ctx.$slots, "content-before"),
+          createVNode(_sfc_main$2, {
+            id: `modal-${id}`,
+            ref_key: "formRef",
+            ref: formRef,
+            "form-data": formData.value,
+            schema: _ctx.schema,
+            "ui-schema": _ctx.uiSchema,
+            "error-mode": _ctx.errorMode,
+            onErrors,
+            onChange,
+            onEvents: _cache[0] || (_cache[0] = ($event) => emits("events", $event))
+          }, null, 8, ["id", "form-data", "schema", "ui-schema", "error-mode"]),
+          renderSlot(_ctx.$slots, "content-after")
+        ]),
+        actions: withCtx(() => [
+          createVNode(unref(Btn), {
+            color: unref(Color).secondary,
+            outline: true,
+            "aria-label": "Cancel",
+            onClick: onCancel
+          }, {
+            default: withCtx(() => [..._cache[1] || (_cache[1] = [
+              createTextVNode(" Cancel ", -1)
+            ])]),
+            _: 1
+          }, 8, ["color"]),
+          createVNode(unref(Btn), {
+            disabled: !valid.value,
+            "aria-label": "Save",
+            onClick: onSubmit
+          }, {
+            default: withCtx(() => [..._cache[2] || (_cache[2] = [
+              createTextVNode(" Save ", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        _: 3
+      }, 16, ["width"]);
+    };
   }
-  if (schema.default !== void 0) {
-    zodSchema = zodSchema.default(schema.default);
+});
+class JsonFormModalService {
+  static openModal({
+    initialData,
+    modalTitle,
+    schema,
+    uiSchema,
+    modalSize,
+    onClose,
+    onEvents
+  }) {
+    ModalService.openModal({
+      component: _sfc_main$d,
+      props: {
+        schema,
+        uiSchema,
+        modalSize,
+        data: initialData ?? {},
+        modalTitle,
+        onClose,
+        onEvents
+      }
+    });
   }
-  return zodSchema;
 }
-function convertSchema(schema, ctx) {
-  if (typeof schema === "boolean") {
-    return schema ? z.any() : z.never();
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "AutocompleteControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      wrapper,
+      value,
+      field,
+      onBlur,
+      onChange: onFieldChange,
+      appliedOptions
+    } = useAutocompleteBinding(props.uischema, props.schema);
+    const fetchOptions = computedAsync(async () => {
+      const config2 = await useFetchOptions(
+        appliedOptions.value
+      );
+      return config2;
+    });
+    const onChange = (val) => {
+      field.setValue(val);
+      onFieldChange();
+    };
+    const formEvents = useFormEvents();
+    const path = scopeToPath(props.uischema.scope);
+    const onCreate = () => {
+      if (fetchOptions.value?.enableCreate === false) return;
+      const form = fetchOptions.value.form;
+      if (form) {
+        JsonFormModalService.openModal({
+          schema: form.json_schema,
+          uiSchema: form.ui_schema,
+          modalTitle: `Create new ${wrapper.value.label}`,
+          onClose: (result) => {
+            if (!result || !result.valid) return;
+            form.create(result.data).then((res) => {
+              field.setValue(res);
+            });
+          }
+        });
+        return;
+      }
+      formEvents.dispatch({
+        event: "create",
+        type: path,
+        data: value.value,
+        onSuccess: (result) => {
+          field.setValue(result);
+        }
+      });
+    };
+    return (_ctx, _cache) => {
+      return unref(fetchOptions) ? (openBlock(), createBlock(unref(Autocomplete), mergeProps({ key: 0 }, unref(wrapper), {
+        "model-value": unref(value),
+        "fetch-options": unref(fetchOptions).fetchOptions,
+        "label-key": unref(fetchOptions).labelKey,
+        "value-key": unref(fetchOptions).valueKey,
+        "enable-create": unref(fetchOptions).enableCreate,
+        onChange,
+        onBlur: unref(onBlur),
+        onCreate
+      }), null, 16, ["model-value", "fetch-options", "label-key", "value-key", "enable-create", "onBlur"])) : createCommentVNode("", true);
+    };
   }
-  let baseSchema = convertBaseSchema(schema, ctx);
-  const hasExplicitType = schema.type || schema.enum !== void 0 || schema.const !== void 0;
-  if (schema.anyOf && Array.isArray(schema.anyOf)) {
-    const options = schema.anyOf.map((s) => convertSchema(s, ctx));
-    const anyOfUnion = z.union(options);
-    baseSchema = hasExplicitType ? z.intersection(baseSchema, anyOfUnion) : anyOfUnion;
+});
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "BooleanControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const useBooleanBinding = useCustomControlBinding({
+      setDefaultValue: (field2) => {
+        if (field2.value.value === void 0) field2.setValue(false);
+      }
+    });
+    const { wrapper, value, field, onBlur, onChange: onFieldChange } = useBooleanBinding(props.uischema, props.schema);
+    const onChange = (val) => {
+      field.setValue(Boolean(val) ?? false);
+      onFieldChange();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Checkbox), mergeProps(unref(wrapper), {
+        "model-value": unref(value),
+        onChange,
+        onBlur: unref(onBlur)
+      }), null, 16, ["model-value", "onBlur"]);
+    };
+  }
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "MarkdownControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      wrapper,
+      value,
+      field,
+      onBlur,
+      onChange: onFieldChange
+    } = useControlBinding(props.uischema, props.schema);
+    const onChange = (val) => {
+      field.setValue(val);
+      onFieldChange();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Markdown), mergeProps(unref(wrapper), {
+        "model-value": unref(value),
+        onChange,
+        onBlur: unref(onBlur)
+      }), null, 16, ["model-value", "onBlur"]);
+    };
   }
-  if (schema.oneOf && Array.isArray(schema.oneOf)) {
-    const options = schema.oneOf.map((s) => convertSchema(s, ctx));
-    const oneOfUnion = z.xor(options);
-    baseSchema = hasExplicitType ? z.intersection(baseSchema, oneOfUnion) : oneOfUnion;
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "MultiSelectControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      wrapper,
+      value,
+      field,
+      onBlur,
+      onChange: onFieldChange
+    } = useSelectBinding(props.uischema, props.schema);
+    const onChange = (val) => {
+      field.setValue(val);
+      onFieldChange();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MultiSelect), mergeProps(unref(wrapper), {
+        "model-value": unref(value),
+        onChange,
+        onBlur: unref(onBlur)
+      }), null, 16, ["model-value", "onBlur"]);
+    };
   }
-  if (schema.allOf && Array.isArray(schema.allOf)) {
-    if (schema.allOf.length === 0) {
-      baseSchema = hasExplicitType ? baseSchema : z.any();
-    } else {
-      let result = hasExplicitType ? baseSchema : convertSchema(schema.allOf[0], ctx);
-      const startIdx = hasExplicitType ? 0 : 1;
-      for (let i = startIdx; i < schema.allOf.length; i++) {
-        result = z.intersection(result, convertSchema(schema.allOf[i], ctx));
-      }
-      baseSchema = result;
-    }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "NumberControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { wrapper, value, onBlur, onChange } = useControlBinding(
+      props.uischema,
+      props.schema,
+      { defaultType: "number" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(InputNumber), mergeProps(unref(wrapper), {
+        modelValue: unref(value),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
+        steps: 0.01,
+        onBlur: unref(onBlur),
+        onChange: unref(onChange)
+      }), null, 16, ["modelValue", "onBlur", "onChange"]);
+    };
   }
-  if (schema.nullable === true && ctx.version === "openapi-3.0") {
-    baseSchema = z.nullable(baseSchema);
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "SelectControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const {
+      wrapper,
+      value,
+      field,
+      onBlur,
+      onChange: onFieldChange,
+      appliedOptions
+    } = useSelectBinding(props.uischema, props.schema);
+    const selectOptions = computed(() => {
+      return appliedOptions.options ?? [];
+    });
+    const onChange = (val) => {
+      field.setValue(val);
+      onFieldChange();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SelectComponent), mergeProps(unref(wrapper), {
+        "model-value": unref(value),
+        options: selectOptions.value,
+        onChange,
+        onBlur: unref(onBlur)
+      }), null, 16, ["model-value", "options", "onBlur"]);
+    };
   }
-  if (schema.readOnly === true) {
-    baseSchema = z.readonly(baseSchema);
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "StringControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { wrapper, value, onBlur, onChange } = useControlBinding(
+      props.uischema,
+      props.schema
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Input), mergeProps(unref(wrapper), {
+        modelValue: unref(value),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
+        onBlur: unref(onBlur),
+        onChange: unref(onChange)
+      }), null, 16, ["modelValue", "onBlur", "onChange"]);
+    };
   }
-  const extraMeta = {};
-  const coreMetadataKeys = ["$id", "id", "$comment", "$anchor", "$vocabulary", "$dynamicRef", "$dynamicAnchor"];
-  for (const key of coreMetadataKeys) {
-    if (key in schema) {
-      extraMeta[key] = schema[key];
-    }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "TextAreaControlRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { wrapper, value, onBlur, onChange } = useControlBinding(
+      props.uischema,
+      props.schema
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Textarea), mergeProps(unref(wrapper), {
+        modelValue: unref(value),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(value) ? value.value = $event : null),
+        onBlur: unref(onBlur),
+        onChange: unref(onChange)
+      }), null, 16, ["modelValue", "onBlur", "onChange"]);
+    };
   }
-  const contentMetadataKeys = ["contentEncoding", "contentMediaType", "contentSchema"];
-  for (const key of contentMetadataKeys) {
-    if (key in schema) {
-      extraMeta[key] = schema[key];
-    }
+});
+const index = [
+  { tester: rankWith(10, isStringFormat), renderer: _sfc_main$6 },
+  {
+    tester: rankWith(11, isTextAreaControl),
+    renderer: _sfc_main$5
+  },
+  {
+    tester: rankWith(11, isMarkdownControl),
+    renderer: _sfc_main$a
+  },
+  { tester: rankWith(11, isBooleanControl), renderer: _sfc_main$b },
+  { tester: rankWith(11, isSelectControl), renderer: _sfc_main$7 },
+  {
+    tester: rankWith(11, isMultiselectControl),
+    renderer: _sfc_main$9
+  },
+  {
+    tester: rankWith(12, isAutoCompleteControl),
+    renderer: _sfc_main$c
+  },
+  {
+    tester: rankWith(12, isNumberFormat),
+    renderer: _sfc_main$8
+  },
+  {
+    tester: rankWith(12, isIntegerFormat),
+    renderer: _sfc_main$8
   }
-  for (const key of Object.keys(schema)) {
-    if (!RECOGNIZED_KEYS.has(key)) {
-      extraMeta[key] = schema[key];
-    }
+];
+const COLSPAN = {
+  1: "col-span-1",
+  2: "col-span-2",
+  3: "col-span-3",
+  4: "col-span-4",
+  5: "col-span-5",
+  6: "col-span-6",
+  7: "col-span-7",
+  8: "col-span-8",
+  9: "col-span-9",
+  10: "col-span-10",
+  11: "col-span-11",
+  12: "col-span-12"
+};
+const _hoisted_1$4 = { class: "flex flex-col gap-4" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "CollapseLayoutRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const pathPrefix = inject("pathPrefix", "");
+    const opts = props.uischema.options ?? {};
+    const titleKeyField = opts.titleKey ? useFieldValue(
+      () => pathPrefix ? `${pathPrefix}.${opts.titleKey}` : opts.titleKey
+    ) : void 0;
+    const title = computed(() => {
+      if (titleKeyField?.value) return titleKeyField.value;
+      return props.uischema.label ?? opts.title ?? "Details";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Collapse), { title: title.value }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$4, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.uischema.elements, (child, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i,
+                class: normalizeClass(unref(COLSPAN)[child.options?.colspan ?? 12])
+              }, [
+                createVNode(_sfc_main$f, {
+                  uischema: child,
+                  schema: __props.schema
+                }, null, 8, ["uischema", "schema"])
+              ], 2);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["title"]);
+    };
   }
-  if (Object.keys(extraMeta).length > 0) {
-    ctx.registry.add(baseSchema, extraMeta);
+});
+const _hoisted_1$3 = {
+  key: 1,
+  class: "flex flex-col gap-3"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "LayoutRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const LAYOUT = {
+      GridLayout: "grid grid-cols-12 gap-3",
+      HorizontalLayout: "flex flex-row gap-3",
+      VerticalLayout: "flex flex-col gap-3"
+    };
+    const getLayout = computed(() => LAYOUT[props.uischema.type]);
+    const isLayout = computed(() => props.uischema.type in LAYOUT);
+    return (_ctx, _cache) => {
+      return isLayout.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(getLayout.value)
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.uischema.elements, (child, i) => {
+          return openBlock(), createElementBlock("div", {
+            key: i,
+            class: normalizeClass(unref(COLSPAN)[child.options?.colspan ?? 12])
+          }, [
+            createVNode(_sfc_main$f, {
+              uischema: child,
+              schema: __props.schema
+            }, null, 8, ["uischema", "schema"])
+          ], 2);
+        }), 128))
+      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_1$3, " No Applicable Layout found "));
+    };
   }
-  return baseSchema;
-}
-function fromJSONSchema(schema, params) {
-  if (typeof schema === "boolean") {
-    return schema ? z.any() : z.never();
+});
+const isLayoutType = or$1(
+  uiTypeIs("GridLayout"),
+  uiTypeIs("HorizontalLayout"),
+  uiTypeIs("VerticalLayout")
+);
+const layoutRenderes = [
+  { tester: rankWith(10, isLayoutType), renderer: _sfc_main$3 },
+  {
+    tester: rankWith(10, uiTypeIs("CollapseLayout")),
+    renderer: _sfc_main$4
   }
-  const version2 = detectVersion(schema);
-  const defs = schema.$defs || schema.definitions || {};
-  const ctx = {
-    version: version2,
-    defs,
-    refs: /* @__PURE__ */ new Map(),
-    processing: /* @__PURE__ */ new Set(),
-    rootSchema: schema,
-    registry: globalRegistry
-  };
-  return convertSchema(schema, ctx);
-}
-config(en());
-const customRenderers = [
-  controlRenderers,
-  layoutRenderers,
-  // ...complexRenderers,
-  arrayRenderers
-  // ...labelRenderers,
-].flat();
-const tailwindRenderers = [
-  ...vanillaRenderers,
-  ...customRenderers
 ];
-const _hoisted_1$1 = ["id"];
+const customRenderes = [layoutRenderes, index, arrayRenderers].flat();
+const _hoisted_1$2 = ["id"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "form.component",
-  props: FormComponentProperties,
-  emits: FormComponentEmits,
-  setup(__props, { emit: __emit }) {
+  __name: "FormComponent",
+  props: JsonFormComponentProperties,
+  emits: JsonFormComponentEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    registerZodErrorMap();
     const properties = __props;
     const emits = __emit;
-    const valid = ref(false);
-    const zodSchema = computed(() => fromJSONSchema(properties.schema));
-    const stripFormData = (data) => {
-      const safeParse2 = zodSchema.value?.strip().safeParse(data);
-      return safeParse2?.success ? safeParse2.data : data ?? {};
-    };
-    const internalFormData = ref(properties.formData ?? {});
+    const zodSchema = computed(() => {
+      if (!properties.schema) return void 0;
+      try {
+        const patched = enforceRequiredStringMinLength(properties.schema);
+        return fromJSONSchema(patched);
+      } catch {
+        return void 0;
+      }
+    });
+    const { values, errors, meta: meta2, setValues, validate } = useForm({
+      validationSchema: zodSchema,
+      initialValues: properties.formData
+    });
+    provide("renderers", customRenderes);
+    provide("rootSchema", properties.schema);
+    provide("styles", myStyles);
+    const submitted = ref(false);
+    provide(ERROR_MODE_KEY, toRef(properties, "errorMode"));
+    provide(FORM_SUBMITTED_KEY, submitted);
+    onMounted(async () => {
+      const result = await validate();
+      emits("valid", result.valid);
+    });
+    provideFormEvents((payload) => {
+      emits("events", payload);
+    });
+    let syncing = false;
     watch(
       () => properties.formData,
-      (data, oldData) => {
-        if (JSON.stringify(data) === JSON.stringify(internalFormData.value)) return;
-        internalFormData.value = stripFormData(data);
-        emits("change", internalFormData.value);
+      (newData) => {
+        if (!newData) return;
+        if (JSON.stringify(newData) === JSON.stringify(toRaw(values))) return;
+        syncing = true;
+        setValues(newData);
+        nextTick(() => {
+          syncing = false;
+        });
       },
-      { deep: true, immediate: true }
+      { deep: true }
     );
-    provideFormEvents((payload) => {
-      emits("events", payload);
-    });
-    const onChange = (event) => {
-      internalFormData.value = event.data;
-      valid.value = event.errors.length === 0;
-      emits("valid", valid.value);
-      emits("change", internalFormData.value);
-      emits("errors", event.errors);
-      Debugger.debug(event.errors);
-    };
-    const onSubmit = (event) => {
-      event.preventDefault();
+    watch(
+      values,
+      (newValues) => {
+        if (syncing) return;
+        const isValid = meta2.value.valid;
+        emits("valid", isValid);
+        emits("change", toRaw(newValues));
+      },
+      { deep: true }
+    );
+    watch(
+      errors,
+      (newErrors) => {
+        const errorList = Object.entries(newErrors).filter(([, msg]) => !!msg).map(([path, message]) => ({ path, message }));
+        emits("errors", errorList);
+      },
+      { deep: true }
+    );
+    const onSubmit = () => {
+      submitted.value = true;
       emits("submit", {
-        data: internalFormData.value,
-        valid: valid.value
+        data: toRaw(values),
+        valid: meta2.value.valid
       });
     };
-    provide("styles", myStyles);
-    const renderers = Object.freeze([
-      ...properties.renderers ?? [],
-      ...tailwindRenderers
-    ]);
+    const markSubmitted = () => {
+      submitted.value = true;
+    };
+    __expose({ markSubmitted });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("form", {
         id: _ctx.id,
         onSubmit: withModifiers(onSubmit, ["prevent"])
       }, [
-        (openBlock(), createBlock(unref(JsonForms), {
-          key: _ctx.id,
-          data: internalFormData.value,
-          schema: _ctx.schema,
+        createVNode(_sfc_main$f, {
           uischema: _ctx.uiSchema,
-          renderers: unref(renderers),
-          enabled: !_ctx.disabled,
-          onChange,
-          onSubmit
-        }, null, 8, ["data", "schema", "uischema", "renderers", "enabled"]))
-      ], 40, _hoisted_1$1);
+          schema: _ctx.schema
+        }, null, 8, ["uischema", "schema"])
+      ], 40, _hoisted_1$2);
     };
   }
 });
-const _hoisted_1 = { class: "flex justify-end gap-2 p-2 mt-2 border-t border-gray-300 z-[30] shrink-0" };
+const FormWithActionsProperties = {
+  /** Unique identifier used to namespace the inner form element. */
+  id: { type: String, required: true },
+  /** Title shown when creating a new record. */
+  createTitle: { type: String, required: true },
+  /** Title shown when editing an existing record. Falls back to `createTitle` when omitted. */
+  updateTitle: { type: String },
+  /** JSON schema describing the shape of the form data. */
+  schema: { type: Object },
+  /** UI schema describing the layout and controls. */
+  uiSchema: { type: Object },
+  /** REST endpoint used by `FormStore` to persist data. When omitted the form emits `submit` instead. */
+  uri: { type: String },
+  /** Enable vertical scrolling inside the form area. */
+  scrollable: { type: Boolean, default: false },
+  /** Stretch the collapse wrapper to full height. */
+  fullHeight: { type: Boolean, default: false },
+  /** Two-way bound form data object. */
+  modelValue: { type: Object, default: () => ({}) },
+  /** When validation errors are shown (`'onBlur'`, `'onChange'`, `'onSubmit'`, `'always'`). */
+  errorMode: {
+    type: String,
+    default: "onBlur"
+  }
+};
+const FormWithActionsEmits = [
+  /** Emitted when `modelValue` changes. */
+  "update:modelValue",
+  /** Emitted after a successful `FormStore.save()`. */
+  "success",
+  /** Emitted on submit when no `uri` is provided. */
+  "submit",
+  /** Emitted whenever form validity changes. */
+  "valid",
+  /** Emitted when a custom renderer dispatches a form event. */
+  "events",
+  /** Emitted when validation errors change. */
+  "errors",
+  /** Emitted when the user cancels editing an existing record. */
+  "cancel"
+];
+class FormStore {
+  constructor(uri) {
+    this.uri = uri;
+  }
+  async delete(data) {
+    return useApi().delete(`${this.uri}/${data.id}`).then(() => {
+      NotificationService.success("Data deleted");
+    }).catch((error2) => {
+      console.error(error2);
+      NotificationService.error("Error deleting data");
+    });
+  }
+  async save(id, data) {
+    if (!this.uri) return;
+    const promise2 = id ? useApi().patch(`${this.uri}/${id}`, data) : useApi().post(this.uri, data);
+    return promise2.then((response) => {
+      NotificationService.success("Data saved");
+      return response.data;
+    }).catch((error2) => {
+      console.error(error2);
+      NotificationService.error("Error saving data");
+    });
+  }
+}
+const _hoisted_1$1 = { class: "flex justify-end gap-2 p-2 mt-2 border-t border-gray-300 z-[30] shrink-0" };
 const _hoisted_2 = { class: "flex justify-end gap-2" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "form-with-actions.component",
-  props: {
-    ...FormWithActionsProperties,
-    modelValue: { type: Object, default: () => ({}) }
-  },
+  __name: "FormWithActions",
+  props: FormWithActionsProperties,
   emits: FormWithActionsEmits,
   setup(__props, { emit: __emit }) {
     const properties = __props;
     const emits = __emit;
+    const formRef = ref();
     const formData = ref(properties.modelValue);
     const initialFormData = ref(structuredClone(toRaw(properties.modelValue)));
     const recordId = ref(properties.modelValue?.id ?? null);
     const valid = ref(false);
-    const submitted = ref(false);
     watch(
       () => properties.modelValue,
-      (newValue, oldValue) => {
+      (newValue) => {
         if (newValue === formData.value) return;
         recordId.value = newValue?.id ?? null;
         initialFormData.value = structuredClone(toRaw(newValue));
@@ -8202,13 +8570,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emits("update:modelValue", data);
     };
     const save = () => {
-      submitted.value = true;
-      if (!valid.value) {
-        return;
-      }
+      formRef.value?.markSubmitted();
+      if (!valid.value) return;
       if (store.value) {
-        store.value.save(recordId.value, formData.value).then(() => {
-          emits("success");
+        store.value.save(recordId.value, formData.value).then((response) => {
+          emits("success", response);
         });
       } else {
         emits("submit", formData.value);
@@ -8216,28 +8582,31 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const clear = () => {
       formData.value = { id: null };
-      submitted.value = false;
       emits("update:modelValue", formData.value);
     };
     const cancel = () => {
       formData.value = structuredClone(toRaw(initialFormData.value));
-      submitted.value = false;
       emits("update:modelValue", formData.value);
       emits("cancel");
     };
-    const onValid = (v) => {
-      submitted.value = false;
-      valid.value = v;
-      emits("valid", v);
-    };
     const title = computed(() => {
       if (!properties.updateTitle) return properties.createTitle;
       return recordId.value ? properties.updateTitle : properties.createTitle;
     });
+    const onErrors = (errors) => {
+      emits("errors", errors);
+      valid.value = isEmpty(errors);
+    };
+    watch(valid, (newValid, oldValid) => {
+      if (newValid !== oldValid) {
+        emits("valid", newValid);
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Collapse), {
         title: title.value,
-        "height-full": _ctx.fullHeight
+        "height-full": _ctx.fullHeight,
+        scrollable: true
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
@@ -8248,24 +8617,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             }, [
               createVNode(_sfc_main$2, {
                 id: `form_${_ctx.id}`,
+                ref_key: "formRef",
+                ref: formRef,
                 "form-data": formData.value,
                 schema: _ctx.schema,
                 "ui-schema": _ctx.uiSchema,
+                "error-mode": _ctx.errorMode,
                 onChange: updateValue,
-                onValid: _cache[0] || (_cache[0] = ($event) => onValid($event)),
                 onSubmit: save,
-                onErrors: _cache[1] || (_cache[1] = ($event) => emits("errors", $event)),
-                onEvents: _cache[2] || (_cache[2] = ($event) => emits("events", $event))
-              }, null, 8, ["id", "form-data", "schema", "ui-schema"])
+                onErrors,
+                onEvents: _cache[0] || (_cache[0] = ($event) => emits("events", $event))
+              }, null, 8, ["id", "form-data", "schema", "ui-schema", "error-mode"])
             ], 2),
-            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_1$1, [
               createElementVNode("div", _hoisted_2, [
                 renderSlot(_ctx.$slots, "actions"),
                 recordId.value ? (openBlock(), createBlock(unref(Btn), {
@@ -8274,7 +8638,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   outline: true,
                   onClick: cancel
                 }, {
-                  default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                  default: withCtx(() => [..._cache[1] || (_cache[1] = [
                     createTextVNode(" Cancel ", -1)
                   ])]),
                   _: 1
@@ -8284,7 +8648,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   outline: true,
                   onClick: clear
                 }, {
-                  default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                  default: withCtx(() => [..._cache[2] || (_cache[2] = [
                     createTextVNode(" Clear ", -1)
                   ])]),
                   _: 1
@@ -8292,10 +8656,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 createVNode(unref(Btn), {
                   "aria-label": "Save",
                   color: unref(Color).primary,
-                  disabled: submitted.value,
+                  disabled: !valid.value,
                   onClick: save
                 }, {
-                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
+                  default: withCtx(() => [..._cache[3] || (_cache[3] = [
                     createTextVNode(" Save ", -1)
                   ])]),
                   _: 1
@@ -8309,216 +8673,175 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const FormWithTableProperties = {
+  /** Unique identifier used to namespace the inner table element. */
+  id: { type: String, required: true },
+  /** Heading displayed above the table. */
+  tableTitle: { type: String, required: true },
+  /** Title shown in the modal when creating a new record. */
+  createTitle: { type: String, required: true },
+  /** Title shown in the modal when editing a record. Falls back to `createTitle` when omitted. */
+  updateTitle: { type: String },
+  /** Override URI used to fetch table data. Defaults to `uri` when omitted. */
+  dataUri: { type: String },
+  /** Custom row actions rendered in the table. */
+  tableActions: { type: Array },
+  /** JSON Forms layout for the create/edit modal form. */
+  form: { type: Object },
+  /** JSON Forms layout for the table. */
+  table: { type: Object },
+  /** JSON Forms layout for the table filter. */
+  filter: { type: Object },
+  /** REST endpoint used by `FormStore` for CRUD operations. */
+  uri: { type: String },
+  /** Default data pre-filled when creating a new record. */
+  initialData: { type: Object, default: () => ({}) },
+  /** When validation errors are shown in the modal form. */
+  errorMode: {
+    type: String,
+    default: "onBlur"
+  }
+};
+const FormWithTableEmits = [
+  /** Emitted when a row is selected for editing (listener-based routing). */
+  "editData",
+  /** Emitted after a record is saved through the modal. */
+  "save",
+  /** Emitted after a record is deleted. */
+  "delete",
+  /** Emitted when a custom renderer dispatches a form event. */
+  "events",
+  /** Emitted when a custom edit handler is registered. */
+  "custom:edit",
+  /** Emitted when a custom create handler is registered. */
+  "custom:create"
+];
+const _hoisted_1 = { class: "flex justify-between items-center mb-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "form-modal",
-  props: /* @__PURE__ */ mergeModels({
-    modalTitle: {},
-    saveLabel: { default: "save" },
-    cancelLabel: { default: "cancel" },
-    schema: {},
-    uiSchema: {},
-    modalSize: { default: "md" },
-    onClose: {},
-    onEvents: {},
-    data: {}
-  }, {
-    "modelValue": {},
-    "modelModifiers": {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["closeModal", "events"], ["update:modelValue"]),
+  __name: "FormWithTable",
+  props: FormWithTableProperties,
+  emits: FormWithTableEmits,
   setup(__props, { emit: __emit }) {
     const properties = __props;
-    const id = `modal_${Math.floor(Math.random() * 1e3)}`;
-    const valid = ref(false);
-    const hasBeenValid = ref(false);
-    const formData = useModel(__props, "modelValue");
-    const emits = __emit;
-    if (properties.data) {
-      formData.value = properties.data;
-    }
-    const onValid = (v) => {
-      valid.value = v;
-      if (v) hasBeenValid.value = true;
+    const emit = __emit;
+    const reload = ref(0);
+    const resolvedForm = computed(() => properties.form);
+    const resolvedTable = computed(() => properties.table);
+    const resolvedFilter = computed(() => properties.filter);
+    const resolvedUri = computed(() => properties.uri);
+    let store = new FormStore(resolvedUri.value ?? "");
+    watch(resolvedUri, (uri) => {
+      store = new FormStore(uri ?? "");
+    });
+    const hasEdit = hasCustomEventListener("editData");
+    const customEdit = hasCustomEventListener("custom:edit");
+    const customCreate = hasCustomEventListener("custom:create");
+    const edit = (data) => {
+      if (customEdit) {
+        emit("custom:edit", data);
+        return;
+      }
+      if (hasEdit) {
+        emit("editData", data);
+        return;
+      }
+      openModal(data);
     };
-    const onCancel = () => {
-      formData.value = {};
-      emits("closeModal", null);
+    const create = () => {
+      if (customCreate) {
+        emit("custom:create");
+        return;
+      }
+      openModal();
     };
-    const onChange = (data) => {
-      formData.value = data;
+    const deleteFn = (data) => {
+      ModalService.showConfirm({
+        title: "Delete record",
+        message: "Are you sure to delete, the data will be lost?",
+        onClose: (result) => {
+          if (result.confirmed) {
+            store.delete(data).then(() => {
+              reload.value = Date.now();
+              emit("delete", data);
+            });
+          }
+        }
+      });
     };
-    const onSubmit = () => {
-      if (!valid.value) return;
-      emits("closeModal", { data: formData.value, valid: valid.value });
+    const openModal = (formData) => {
+      if (!resolvedForm.value) return;
+      const isUpdate = !!formData?.id;
+      JsonFormModalService.openModal({
+        schema: resolvedForm.value.schema,
+        uiSchema: resolvedForm.value.uiSchema,
+        modalSize: resolvedForm.value.modalSize,
+        initialData: formData ?? properties.initialData,
+        modalTitle: (isUpdate ? properties.updateTitle ?? properties.createTitle : properties.createTitle) ?? "",
+        onClose: (result) => {
+          if (result && result.valid) {
+            store.save(formData?.id, result.data).then(() => {
+              reload.value = Date.now();
+              emit("save", { id: formData?.id, data: result.data });
+            });
+          }
+        },
+        onEvents: (payload) => emit("events", payload)
+      });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Modal), mergeProps(properties, {
-        open: true,
-        "disable-close": false,
-        width: __props.modalSize,
-        onCloseModal: onCancel
-      }), {
-        content: withCtx(() => [
-          renderSlot(_ctx.$slots, "content-before"),
-          createVNode(_sfc_main$2, {
-            id: `modal-${id}`,
-            modelValue: formData.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.value = $event),
-            schema: __props.schema,
-            "ui-schema": __props.uiSchema,
-            onValid: _cache[1] || (_cache[1] = ($event) => onValid($event)),
-            onChange,
-            onEvents: _cache[2] || (_cache[2] = ($event) => emits("events", $event))
-          }, null, 8, ["id", "modelValue", "schema", "ui-schema"]),
-          renderSlot(_ctx.$slots, "content-after")
-        ]),
-        actions: withCtx(() => [
-          createVNode(unref(Btn), {
-            color: unref(Color).secondary,
-            outline: true,
-            "aria-label": "Cancel",
-            onClick: onCancel
-          }, {
-            default: withCtx(() => [..._cache[3] || (_cache[3] = [
-              createTextVNode(" Cancel ", -1)
-            ])]),
-            _: 1
-          }, 8, ["color"]),
-          createVNode(unref(Btn), {
-            disabled: !hasBeenValid.value,
-            "aria-label": "Save",
-            onClick: onSubmit
-          }, {
-            default: withCtx(() => [..._cache[4] || (_cache[4] = [
-              createTextVNode(" Save ", -1)
-            ])]),
-            _: 1
-          }, 8, ["disabled"])
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("h1", null, toDisplayString(_ctx.tableTitle), 1),
+          createElementVNode("div", null, [
+            createVNode(unref(Btn), {
+              icon: unref(IconEnum).Plus,
+              outline: true,
+              onClick: create
+            }, {
+              default: withCtx(() => [..._cache[0] || (_cache[0] = [
+                createTextVNode(" Add new record ", -1)
+              ])]),
+              _: 1
+            }, 8, ["icon"])
+          ])
         ]),
-        _: 3
-      }, 16, ["width"]);
+        resolvedTable.value ? (openBlock(), createBlock(unref(Card), { key: 0 }, {
+          default: withCtx(() => [
+            resolvedUri.value ? (openBlock(), createBlock(unref(_sfc_main$g), {
+              key: 0,
+              id: `form_table_${_ctx.id}`,
+              "ui-schema": resolvedTable.value.uiSchema,
+              schema: resolvedTable.value.schema,
+              "filter-ui-schema": resolvedFilter.value?.uiSchema,
+              "filter-schema": resolvedFilter.value?.schema,
+              uri: _ctx.dataUri ?? resolvedUri.value,
+              reload: reload.value,
+              actions: _ctx.tableActions,
+              onEdit: edit,
+              onDelete: deleteFn
+            }, null, 8, ["id", "ui-schema", "schema", "filter-ui-schema", "filter-schema", "uri", "reload", "actions"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });
-class FormModalService {
-  static openModal({
-    initialData,
-    modalTitle,
-    schema,
-    uiSchema,
-    modalSize,
-    onClose,
-    onEvents
-  }) {
-    ModalService.openModal({
-      component: _sfc_main,
-      props: {
-        schema,
-        uiSchema,
-        modalSize,
-        data: initialData ?? {},
-        modalTitle,
-        onClose,
-        onEvents
-      }
-    });
-  }
-}
-const createRepository = (formSchemaModel, httpRequest, options = {}) => {
-  const notificationEntity = options.notification?.entityType || "entity";
-  const notificationStore = options.notification?.notification ?? null;
-  const getDataUri = (...suffix) => {
-    return [formSchemaModel.uri, ...suffix].join("/");
-  };
-  const handleSuccess = (message) => {
-    notificationStore?.success(message);
-  };
-  const handleError = (error2, message) => {
-    console.error(error2);
-    notificationStore?.error(message);
-    throw new Error(error2);
-  };
-  const create = (object2, options2) => {
-    return httpRequest.post(getDataUri(), object2, options2).then((response) => {
-      handleSuccess(`Created ${notificationEntity}`);
-      return response.data;
-    }).catch((response) => {
-      handleError(response, `Failed to create ${notificationEntity}`);
-    });
-  };
-  const patch = (id, object2, options2) => {
-    return httpRequest.patch(getDataUri(id), object2, options2).then((response) => {
-      handleSuccess(`Saved ${notificationEntity}`);
-      return response.data;
-    }).catch((response) => {
-      handleError(response, `Failed to save ${notificationEntity}`);
-    });
-  };
-  const get = (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) => {
-      handleSuccess(`${notificationEntity} deleted`);
-      return response;
-    }).catch((response) => {
-      handleError(response, `Failed to delete ${notificationEntity}`);
-    });
-  };
-  const createMulti = (objects, options2) => {
-    return Promise.all(
-      objects.map((object2) => httpRequest.post(getDataUri(), object2, options2))
-    ).then((response) => {
-      handleSuccess(`Created ${notificationEntity}`);
-      return response.data;
-    }).catch((response) => {
-      handleError(response, `Failed to save ${notificationEntity}`);
-    });
-  };
-  return { create, patch, createMulti, delete: _delete, get };
-};
 export {
-  _sfc_main$a as ArrayRenderer,
-  _sfc_main$j as AutocompleteControlRenderer,
-  _sfc_main$i as BooleanControlRenderer,
-  _sfc_main$2 as FormComponent,
-  FormComponentEmits,
-  FormComponentProperties,
-  _sfc_main as FormModal,
-  FormModalService,
-  FormStore,
-  _sfc_main$1 as FormWithActions,
-  FormWithActionsEmits,
-  FormWithActionsProperties,
-  _sfc_main$3 as FormWithTableComponent,
-  FormWithTableEmits,
-  FormWithTableProperties,
-  _sfc_main$h as IntegerControlRenderer,
-  _sfc_main$f as MultiSelectControlRender,
-  _sfc_main$e as NumberControlRenderer,
-  _sfc_main$d as SelectControlRender,
-  _sfc_main$c as StringControlRenderer,
-  _sfc_main$4 as TableComponent,
+  FormModalEmits,
+  FormModalProperties,
+  _sfc_main$2 as JsonForm,
+  _sfc_main$d as JsonFormModal,
+  JsonFormModalService,
+  _sfc_main$1 as JsonFormWithActions,
+  _sfc_main as JsonFormWithTable,
+  _sfc_main$g as TableComponent,
   TableComponentEmits,
   TableComponentProperties,
-  arrayRenderers,
-  controlRenderers,
   createRepository,
-  isArrayRenderer,
-  isAutoCompleteControl,
-  isBooleanControl,
-  isCustomControl,
-  isMarkdownControl,
-  isMultiselectControl,
-  isSelectControl,
-  isStringFormat,
-  isTextAreaControl,
-  layoutRenderers,
-  _sfc_main$g as markdownControlRenderer,
+  formatError,
   provideFormEvents,
-  useFormEvents
+  registerZodErrorMap,
+  useFormEvents,
+  customRenderes as veeRenderers
 };