@ghentcdh/json-forms-vue 1.1.0 → 2.0.0

package/index.js

@@ -1,399 +1,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const lodashEs = require("lodash-es");
-const jsonFormsCore = require("@ghentcdh/json-forms-core");
 const ui = require("@ghentcdh/ui");
-const core = require("@vueuse/core");
-const vueRouter = require("vue-router");
-const toolsVue = require("@ghentcdh/tools-vue");
-const zod = require("zod");
 const veeValidate = require("vee-validate");
-const core$1 = require("@jsonforms/core");
-const testers = require("@jsonforms/core/src/testers/testers");
-const axios = require("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 },
-  /** 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
-  },
-  /** 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 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 form validity changes. */
-  "valid"
-];
-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__ */ vue.defineComponent({
-  __name: "table-filter",
-  props: {
-    layout: {},
-    filters: {}
-  },
-  emits: ["changeFilters", "removeFilter"],
-  setup(__props, { emit: __emit }) {
-    const formData = vue.ref();
-    const properties = __props;
-    const emits = __emit;
-    vue.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);
-    };
+const zod = require("zod");
+const jsonFormsCore = require("@ghentcdh/json-forms-core");
+const _hoisted_1$k = { class: "text-xs bg-base-200 p-2 h-full border-b border-gray-200 max-w-96 last-of-type:border-b-0 text-left font-semibold text-text-accent flex items-center" };
+const _hoisted_2$8 = { class: "h-full p-2 whitespace-pre-wrap break-words overflow-hidden min-w-0 text-sm" };
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  __name: "ReadonlyLabel",
+  props: ui.ControlWrapperProperties,
+  setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-        vue.createElementVNode("div", _hoisted_2$2, [
-          __props.filters.length ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
-            key: 0,
-            size: "xs",
-            outline: true,
-            onClick: onResetFilters
-          }, {
-            default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
-              vue.createTextVNode(" Reset all filters ", -1)
-            ])]),
-            _: 1
-          })) : vue.createCommentVNode("", true)
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", _hoisted_1$k, [
+          vue.createElementVNode("span", null, vue.toDisplayString(_ctx.label), 1)
         ]),
-        vue.createElementVNode("div", _hoisted_3$1, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.filters, (filter) => {
-            return vue.openBlock(), vue.createBlock(vue.unref(ui.BtnBadge), {
-              key: filter.key,
-              icon: vue.unref(ui.IconEnum).Close,
-              onClick: ($event) => removeFilter(filter)
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(filter.label) + ": " + vue.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 = vueRouter.useRoute();
-    this.router = vueRouter.useRouter();
-    this.requestData = vue.ref(jsonFormsCore.RequestSchema.parse(this.route.query));
-    this._reload = vue.ref(Date.now());
-    this.loading = vue.ref(true);
-    this.uri = vue.ref("");
-    this.data = core.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 toolsVue.useApi().get(this.uri.value, {
-        params: this.requestData.value
-      }).catch((error) => {
-        console.error(error);
-        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 = vue.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 = vue.computed(() => {
-      const d = this.data.value;
-      if (!d) return [];
-      if (this.loading.value) return [];
-      return d.data ?? [];
-    });
-    this.init = (url) => {
-      this.uri.value = url;
-    };
-    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 = vue.computed(() => {
-      const requestData = this.requestData.value;
-      return {
-        sortColumn: requestData.sort,
-        sortDirection: requestData.sortDir ?? "asc"
-      };
-    });
-    this.filters = vue.computed(
-      () => jsonFormsCore.extractFilters(this.requestData.value.filter)
-    );
-  }
-  get httpRequest() {
-    return toolsVue.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$7 = {
-  key: 0,
-  class: "mb-2"
-};
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-  __name: "table.component",
-  props: TableComponentProperties,
-  emits: TableComponentEmits,
-  setup(__props, { emit: __emit }) {
-    const properties = __props;
-    const emit = __emit;
-    vue.watch(
-      () => properties.reload,
-      () => {
-        store.reload();
-      }
-    );
-    let store = useTableStore(properties.id);
-    vue.watch(
-      () => properties.uri,
-      () => {
-        store.init(properties.uri);
-      },
-      { immediate: true }
-    );
-    const edit = (data) => {
-      emit("edit", data);
-    };
-    const deleteFn = (data) => {
-      emit("delete", data);
-    };
-    const components = {
-      TextCell: ui.TextCell,
-      BooleanCell: ui.BooleanCell
-    };
-    const displayColumns = vue.computed(() => {
-      return properties.uiSchema.elements.map((e) => {
-        const element = e;
-        const def = jsonFormsCore.findColumnDef(element, properties.schema);
-        const type = lodashEs.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 onSort = (id) => {
-      store.sort(id);
-    };
-    const sort = vue.computed(() => {
-      return store.sorting.value ?? { orderBy: "", ascending: 1 };
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", null, [
-        _ctx.filterUiSchema && _ctx.filterSchema ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
-          vue.createVNode(_sfc_main$h, {
-            layout: { uiSchema: _ctx.filterUiSchema, schema: _ctx.filterSchema },
-            filters: vue.unref(store).filters.value,
-            onChangeFilters
-          }, null, 8, ["layout", "filters"])
-        ])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", null, [
-          vue.createVNode(vue.unref(ui.Table), {
-            "display-columns": displayColumns.value,
-            sort: sort.value,
-            page: vue.unref(store).pageData.value,
-            loading: vue.unref(store).loading.value,
-            data: vue.unref(store).tableData.value,
-            actions: _ctx.actions,
-            onUpdatePage,
-            onDelete: deleteFn,
-            onEdit: edit,
-            onSort
-          }, null, 8, ["display-columns", "sort", "page", "loading", "data", "actions"])
+        vue.createElementVNode("div", _hoisted_2$8, [
+          vue.renderSlot(_ctx.$slots, "default")
         ])
-      ]);
+      ], 64);
     };
   }
 });
-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 = (error, message) => {
-    console.error(error);
-    notificationStore?.error(message);
-    throw new Error(error);
-  };
-  const create = (object, options2) => {
-    return httpRequest.post(getDataUri(), object, options2).then((response) => {
-      handleSuccess(`Created ${notificationEntity}`);
-      return response.data;
-    }).catch((response) => {
-      handleError(response, `Failed to create ${notificationEntity}`);
-    });
-  };
-  const patch = (id, object, options2) => {
-    return httpRequest.patch(getDataUri(id), object, 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((object) => httpRequest.post(getDataUri(), object, options2))
-    ).then((response) => {
-      handleSuccess(`Created ${notificationEntity}`);
-      return response.data;
-    }).catch((response) => {
-      handleError(response, `Failed to save ${notificationEntity}`);
-    });
-  };
-  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);
-  vue.provide(FORM_EVENTS_KEY, events);
-  return events;
-};
-const useFormEvents = () => {
-  return vue.inject(
-    FORM_EVENTS_KEY,
-    createFormEvents(() => {
-    })
-  );
-};
 const errorPatterns = [
   [/^Invalid input: expected \w+, received undefined$/, "This field is required"],
   [/^Invalid input: expected \w+, received null$/, "This field is required"],
@@ -435,20 +64,13 @@ const registerZodErrorMap = () => {
           return { message: `Must be at most ${i.maximum} characters` };
         }
       }
-      return { message: issue.message };
+      return { message: issue.message ?? "" };
     }
   });
 };
-function findRenderer(registry, uischema, schema) {
-  let best = null;
-  for (const entry of registry) {
-    const rank = entry.tester(uischema, schema);
-    if (rank > -1 && (!best || rank > best.rank)) {
-      best = { rank, renderer: entry.renderer };
-    }
-  }
-  return best?.renderer ?? null;
-}
+const ERROR_MODE_KEY = /* @__PURE__ */ Symbol("errorMode");
+const FORM_SUBMITTED_KEY = /* @__PURE__ */ Symbol("formSubmitted");
+const FORM_READONLY_KEY = /* @__PURE__ */ Symbol("formReadonly");
 const scopeToPath = (scope) => {
   if (!scope) return "";
   return scope.replace(/^#\//, "").split("/").filter((s) => s !== "properties").join(".");
@@ -457,86 +79,574 @@ const resolveSchema = (root, scope) => {
   const segments = scope.replace(/^#\//, "").split("/").filter(Boolean);
   return segments.reduce((acc, key) => acc?.[key], root);
 };
-const _hoisted_1$6 = {
+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 = vue.inject("rootSchema");
+  const path = scopeToPath(uischema.scope);
+  const { errorMessage, meta } = 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 = ui.mergeStyles(opts.styles);
+  const errorMode = vue.inject(ERROR_MODE_KEY, vue.ref("onBlur"));
+  const submitted = vue.inject(FORM_SUBMITTED_KEY, vue.ref(false));
+  const formReadonly = vue.inject(FORM_READONLY_KEY, vue.ref(false));
+  const shouldShowError = vue.computed(() => {
+    if (!errorMessage.value) return false;
+    switch (errorMode.value) {
+      case "always":
+        return true;
+      case "onChange":
+        return meta.dirty;
+      case "onSubmit":
+        return submitted.value;
+      case "onBlur":
+      default:
+        return meta.touched;
+    }
+  });
+  const width = opts.colspan || styles?.width === "full" ? "w-full" : opts.width ?? "min-w-input";
+  return vue.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 && !formReadonly.value,
+    isFocused: false,
+    isTouched: shouldShowError.value,
+    hideLabel: opts.hideLabel ?? false,
+    styles,
+    width,
+    type: inferredType,
+    ...options.overrides
+  }));
+};
+const useCustomControlBinding = ({
+  useProps,
+  setDefaultValue
+} = {}) => {
+  return (uischema, schema, options = {}) => {
+    const { values: formValues } = veeValidate.useFormContext();
+    const pathPrefix = vue.inject("pathPrefix", "");
+    const scopePath = scopeToPath(uischema.scope);
+    const path = pathPrefix ? `${pathPrefix}.${scopePath}` : scopePath;
+    const field = veeValidate.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;
+    vue.watch(field.value, (val) => {
+      if (!initialized) {
+        initialized = true;
+        return;
+      }
+      field.handleChange(val);
+    });
+    return {
+      formValues,
+      uischema,
+      schema,
+      wrapper: vue.computed(() => ({ ...wrapper.value, ...customWrapper.value })),
+      value: field.value,
+      field,
+      onBlur,
+      onChange,
+      appliedOptions: vue.computed(
+        () => uischema.options ?? {}
+      )
+    };
+  };
+};
+const useControlBinding = (uischema, schema, options = {}) => {
+  return useCustomControlBinding()(uischema, schema, options);
+};
+const NOT_APPLICABLE = -1;
+const rankWith = (rank, tester) => (uischema, schema, context) => tester(uischema, schema, context) ? rank : NOT_APPLICABLE;
+const and = (...testers) => (uischema, schema, context) => testers.every((tester) => tester(uischema, schema, context));
+const or = (...testers) => (uischema, schema, context) => testers.some((tester) => tester(uischema, schema, context));
+const uiTypeIs = (expected) => (uischema) => !!uischema && uischema.type === expected;
+const isControl = (uischema) => !!uischema && uischema.type === "Control";
+const schemaTypeIs = (expected) => (uischema, schema) => isControl(uischema) && !!schema && schema.type === expected;
+const optionIsIgnoreCase = (optionName, optionValue) => (uischema) => {
+  const options = uischema.options;
+  if (!options) return false;
+  const val = options[optionName];
+  return val?.toLowerCase() === optionValue?.toLowerCase();
+};
+const schemaFormatIsOneOf = (...formats) => (_uischema, schema) => {
+  const fmt = schema?.format;
+  return typeof fmt === "string" && formats.includes(fmt);
+};
+const anyOfTypeIs = (type) => (_uischema, schema) => {
+  const s = schema;
+  if (!Array.isArray(s?.anyOf)) return false;
+  return s.anyOf.some((sub) => sub?.type === type);
+};
+const isAutoCompleteControl = and(
+  // uiTypeIs('Control'),
+  optionIsIgnoreCase("format", jsonFormsCore.ControlType.autocomplete)
+);
+const isTextAreaControl = and(
+  uiTypeIs("Control"),
+  optionIsIgnoreCase("format", jsonFormsCore.ControlType.textArea)
+);
+const isStringFormat = and(
+  uiTypeIs("Control"),
+  or(
+    optionIsIgnoreCase("format", jsonFormsCore.ControlType.string),
+    schemaTypeIs("string"),
+    anyOfTypeIs("string")
+  )
+);
+const isMarkdownControl = and(
+  uiTypeIs("Control"),
+  optionIsIgnoreCase("format", jsonFormsCore.ControlType.markdown)
+);
+and(
+  uiTypeIs("Control"),
+  // schemaTypeIs('object'),
+  (uischema) => !uischema.options?.format
+);
+const isArrayRenderer = and(
+  schemaTypeIs("array")
+  // optionIsIgnoreCase('format', ControlType.array),
+);
+const isMultiselectControl = and(
+  uiTypeIs("Control"),
+  optionIsIgnoreCase("format", jsonFormsCore.ControlType.mutliSelect)
+);
+const isSelectControl = and(
+  uiTypeIs("Control"),
+  optionIsIgnoreCase("format", jsonFormsCore.ControlType.select)
+);
+const isBooleanControl = or(
+  and(uiTypeIs("Control"), schemaTypeIs("boolean")),
+  and(uiTypeIs("Control"), optionIsIgnoreCase("format", jsonFormsCore.ControlType.boolean))
+);
+const isNumberFormat = and(
+  uiTypeIs("Control"),
+  or(optionIsIgnoreCase("format", jsonFormsCore.ControlType.number), schemaTypeIs("number"))
+);
+const isIntegerFormat = and(
+  uiTypeIs("Control"),
+  or(
+    optionIsIgnoreCase("format", jsonFormsCore.ControlType.integer),
+    schemaTypeIs("integer")
+  )
+);
+and(
+  uiTypeIs("Control"),
+  or(
+    optionIsIgnoreCase("format", jsonFormsCore.ControlType.date),
+    optionIsIgnoreCase("format", jsonFormsCore.ControlType.dateTime),
+    schemaFormatIsOneOf("date", "date-time")
+  )
+);
+and(
+  uiTypeIs("Control"),
+  optionIsIgnoreCase("format", jsonFormsCore.ControlType.relation)
+);
+const EMPTY_VALUE = "—";
+const DisplayValueProperties = {
+  direction: { type: String, default: "ltr" },
+  path: { type: String, required: true },
+  displayValue: { type: Object, required: true },
+  options: { type: Object, required: true },
+  value: { type: Object, required: true }
+};
+const _hoisted_1$j = { class: "text-gray-500 text-sm" };
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  __name: "NotSetValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("p", _hoisted_1$j, [
+        vue.createTextVNode(vue.toDisplayString(vue.unref(EMPTY_VALUE)) + " · ", 1),
+        _cache[0] || (_cache[0] = vue.createElementVNode("small", null, "Not set", -1))
+      ]);
+    };
+  }
+});
+const _hoisted_1$i = {
+  key: 0,
+  class: "inline-flex items-center gap-1 text-success"
+};
+const _hoisted_2$7 = {
   key: 1,
-  class: "text-error text-xs"
+  class: "inline-flex items-center gap-1 text-base-content/50"
 };
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
-  __name: "Dispatch",
-  props: {
-    uischema: {},
-    schema: {},
-    pathPrefix: { default: void 0 }
-  },
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  __name: "BooleanValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return _ctx.displayValue === true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$i, [
+        vue.createVNode(vue.unref(ui.Icon), {
+          icon: vue.unref(ui.IconEnum).Check,
+          size: "sm"
+        }, null, 8, ["icon"]),
+        _cache[0] || (_cache[0] = vue.createElementVNode("span", null, "Yes", -1))
+      ])) : _ctx.displayValue === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$7, [
+        vue.createVNode(vue.unref(ui.Icon), {
+          icon: vue.unref(ui.IconEnum).Close,
+          size: "sm"
+        }, null, 8, ["icon"]),
+        _cache[1] || (_cache[1] = vue.createElementVNode("span", null, "No", -1))
+      ])) : (vue.openBlock(), vue.createBlock(_sfc_main$t, { key: 2 }));
+    };
+  }
+});
+const UNITS = [
+  ["year", 60 * 60 * 24 * 365],
+  ["month", 60 * 60 * 24 * 30],
+  ["day", 60 * 60 * 24],
+  ["hour", 60 * 60],
+  ["minute", 60],
+  ["second", 1]
+];
+const relativeFromNow = (date, now, locale) => {
+  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  const diffSeconds = Math.round((date.getTime() - now.getTime()) / 1e3);
+  const abs = Math.abs(diffSeconds);
+  for (const [unit, secondsInUnit] of UNITS) {
+    if (abs >= secondsInUnit || unit === "second") {
+      return rtf.format(Math.round(diffSeconds / secondsInUnit), unit);
+    }
+  }
+  return rtf.format(0, "second");
+};
+const formatDate = (value, {
+  withTime = true,
+  locale = "en-GB",
+  timeZone = "UTC"
+} = {}) => {
+  const date = parseDate(value);
+  if (!date) return null;
+  const datePart = new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    timeZone
+  }).format(date);
+  let out = datePart;
+  if (withTime) {
+    const timePart = new Intl.DateTimeFormat(locale, {
+      hour: "2-digit",
+      minute: "2-digit",
+      timeZone
+    }).format(date);
+    out = `${datePart}, ${timePart}`;
+  }
+  return out;
+};
+const relativeDate = (value, { locale = "en-GB", now } = {}) => {
+  const date = parseDate(value);
+  if (!date) return;
+  return relativeFromNow(date, now ?? /* @__PURE__ */ new Date(), locale);
+};
+const parseDate = (value) => {
+  if (value == null || value === "") return null;
+  const date = value instanceof Date ? value : new Date(String(value));
+  if (Number.isNaN(date.getTime())) return null;
+  return date;
+};
+const isDate = (value) => {
+  return !!parseDate(value);
+};
+const _hoisted_1$h = ["dir"];
+const _hoisted_2$6 = { class: "text-gray-500" };
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  __name: "DateValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("p", { dir: _ctx.direction }, [
+        vue.createTextVNode(vue.toDisplayString(vue.unref(formatDate)(_ctx.displayValue)) + " · ", 1),
+        vue.createElementVNode("small", _hoisted_2$6, vue.toDisplayString(vue.unref(relativeDate)(_ctx.displayValue)), 1)
+      ], 8, _hoisted_1$h);
+    };
+  }
+});
+const _hoisted_1$g = ["href"];
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  __name: "LinkValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("a", {
+        href: _ctx.displayValue,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, vue.toDisplayString(_ctx.displayValue), 9, _hoisted_1$g);
+    };
+  }
+});
+const _hoisted_1$f = ["innerHTML"];
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  __name: "MarkdownValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    const props = __props;
+    const renderedHtml = vue.computed(() => {
+      const raw = props.value;
+      if (!raw) return "";
+      return raw.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "prose prose-sm max-w-none",
+        innerHTML: renderedHtml.value
+      }, null, 8, _hoisted_1$f);
+    };
+  }
+});
+const _hoisted_1$e = { key: 0 };
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  __name: "NumberValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return _ctx.displayValue ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1$e, vue.toDisplayString(_ctx.displayValue), 1)) : (vue.openBlock(), vue.createBlock(_sfc_main$t, { key: 1 }));
+    };
+  }
+});
+const _hoisted_1$d = {
+  class: "block overflow-auto text-sm",
+  style: { "max-height": "200px" }
+};
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  __name: "ObjectValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("pre", _hoisted_1$d, "        " + vue.toDisplayString(_ctx.displayValue) + "\n\n\n      ", 1);
+    };
+  }
+});
+const _hoisted_1$c = ["dir"];
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  __name: "StringValue",
+  props: DisplayValueProperties,
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return _ctx.displayValue ? (vue.openBlock(), vue.createElementBlock("p", {
+        key: 0,
+        dir: _ctx.direction
+      }, vue.toDisplayString(_ctx.displayValue), 9, _hoisted_1$c)) : (vue.openBlock(), vue.createBlock(_sfc_main$t, { key: 1 }));
+    };
+  }
+});
+const createFormEvents = (dispatch) => ({
+  dispatch
+});
+const FORM_EVENTS_KEY = /* @__PURE__ */ Symbol("json-forms:events");
+const provideFormEvents = (dispatch) => {
+  const events = createFormEvents(dispatch);
+  vue.provide(FORM_EVENTS_KEY, events);
+  return events;
+};
+const useFormEvents = () => {
+  return vue.inject(
+    FORM_EVENTS_KEY,
+    createFormEvents(() => {
+    })
+  );
+};
+const _hoisted_1$b = { class: "px-2 flex gap-2 items-center" };
+const _hoisted_2$5 = { class: "truncate" };
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  __name: "ViewDetailValue",
+  props: DisplayValueProperties,
   setup(__props) {
     const props = __props;
-    const registry = vue.inject("renderers");
-    const rootSchema = vue.inject("rootSchema");
-    const parentPrefix = vue.inject("pathPrefix", "");
-    const effectivePrefix = props.pathPrefix ?? parentPrefix;
-    if (props.pathPrefix !== void 0) {
-      vue.provide("pathPrefix", effectivePrefix);
-    }
-    const resolved = vue.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 = vue.computed(
-      () => findRenderer(registry, props.uischema, resolved.value)
-    );
+    const formEvents = useFormEvents();
+    const view = () => {
+      formEvents.dispatch({
+        event: "view",
+        type: props.path,
+        data: props.value,
+        options: props.options
+      });
+    };
     return (_ctx, _cache) => {
-      return renderer.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderer.value), {
-        key: 0,
-        uischema: __props.uischema,
-        schema: resolved.value
-      }, null, 8, ["uischema", "schema"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, " No renderer for " + vue.toDisplayString(__props.uischema.scope ?? __props.uischema.type), 1));
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+        color: "ghost",
+        class: "border-gray-300 text-primary h-8",
+        tooltip: "View",
+        onClick: view
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("span", _hoisted_1$b, [
+            vue.createElementVNode("span", _hoisted_2$5, vue.toDisplayString(_ctx.displayValue), 1),
+            vue.createVNode(vue.unref(ui.Icon), {
+              icon: vue.unref(ui.IconEnum).View,
+              size: "sm"
+            }, null, 8, ["icon"])
+          ])
+        ]),
+        _: 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 isLink = (value) => value?.startsWith?.("http");
+const getDirection = (options, formValues) => {
+  const pathPrefix = vue.inject("pathPrefix", "");
+  const opts = options ?? {};
+  if (!opts.directionField) return opts.direction ?? "ltr";
+  const key = pathPrefix ? `${pathPrefix}.${opts.directionField}` : opts.directionField;
+  const val = key.split(".").reduce((o, k) => o?.[k], formValues);
+  return val ?? "ltr";
+};
+const getSelectValue = (value, opts) => {
+  const labelKey = opts.labelKey ?? "label";
+  const valueKey = opts.valueKey ?? "value";
+  const resolvedKey = value?.[valueKey] ?? value;
+  if (typeof resolvedKey === "string" && opts.values)
+    return opts.values?.find((o) => o[valueKey] === resolvedKey)?.[labelKey] ?? resolvedKey;
+  const resolved = value && typeof value === "object" ? value?.[labelKey] ?? value[valueKey] : value;
+  if (!resolved) return null;
+  return resolved;
+};
+const getNestedValue = (value, opts, formValues) => {
+  if (opts.dataPath) {
+    const nested = opts.dataPath.split(".").reduce((o, k) => o?.[k], formValues);
+    if (opts.key && nested && typeof nested === "object")
+      return nested[opts.key] ?? null;
+    return nested ?? null;
   }
+  if (value !== null && typeof value === "object" && opts.key) {
+    return value[opts.key] ?? null;
+  }
+  return value ?? null;
 };
-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 = {
+const getDisplayValue = (value, formValues, opts) => {
+  const format = opts.format ?? "date";
+  if (format === "select") return getSelectValue(value, opts);
+  if (format === "autocomplete") return getSelectValue(value, opts);
+  if (typeof value !== "object") {
+    return value ?? null;
+  }
+  return getNestedValue(value, opts, formValues);
+};
+const _getComponent = (value, options, schema, uiSchema) => {
+  if (isNumberFormat(uiSchema, schema)) return _sfc_main$o;
+  if (isIntegerFormat(uiSchema, schema)) return _sfc_main$o;
+  if (isMarkdownControl(uiSchema, schema)) return _sfc_main$p;
+  if (value === null || value === void 0) return _sfc_main$t;
+  if (options.resource) return _sfc_main$l;
+  if (isDate(value)) return _sfc_main$r;
+  if (isLink(value)) return _sfc_main$q;
+  if (typeof value === "boolean") return _sfc_main$s;
+  if (typeof value === "object") return _sfc_main$n;
+  return _sfc_main$m;
+};
+const getComponent = (path, uischema, schema, field, formValues) => {
+  return vue.computed(() => {
+    const value = field.value?.value;
+    const options = uischema.options ?? {};
+    const displayValue = getDisplayValue(value, formValues, options);
+    return {
+      component: _getComponent(value, options, schema, uischema),
+      value: {
+        value,
+        path,
+        displayValue,
+        options,
+        direction: getDirection(options, formValues)
+      }
+    };
+  });
+};
+const useCustomReadonlyControlBinding = ({
+  useProps,
+  setDefaultValue
+} = {}) => {
+  return (uischema, schema, options = {}) => {
+    const { values: formValues } = veeValidate.useFormContext();
+    const pathPrefix = vue.inject("pathPrefix", "");
+    const scopePath = scopeToPath(uischema.scope);
+    const path = pathPrefix ? `${pathPrefix}.${scopePath}` : scopePath;
+    const field = veeValidate.useField(() => path);
+    const wrapper = useInputProps(uischema, schema, field, options);
+    const customWrapper = useProps?.(uischema, schema, field, options) ?? {
+      value: {}
+    };
+    return {
+      wrapper: vue.computed(() => ({ ...wrapper.value, ...customWrapper.value })),
+      appliedOptions: vue.computed(
+        () => uischema.options ?? {}
+      ),
+      displayWrapper: getComponent(path, uischema, schema, field, formValues)
+    };
+  };
+};
+const useReadonlyControlBinding = (uischema, schema, options = {}) => {
+  return useCustomReadonlyControlBinding()(uischema, schema, options);
+};
+const useDisplayValue = (value, formValues, opts) => {
+  const raw = value;
+  if (typeof raw !== "object") {
+    return raw ?? null;
+  }
+  if (opts.dataPath) {
+    const nested = opts.dataPath.split(".").reduce((o, k) => o?.[k], formValues);
+    if (opts.key && nested && typeof nested === "object")
+      return nested[opts.key] ?? null;
+    return nested ?? null;
+  }
+  if (raw !== null && typeof raw === "object" && opts.key) {
+    return raw[opts.key] ?? null;
+  }
+  return raw ?? null;
+};
+const HTTP_CLIENT_KEY = /* @__PURE__ */ Symbol("json-forms:http-client");
+const provideHttpClient = (http) => {
+  vue.provide(HTTP_CLIENT_KEY, http);
+};
+const useHttpClient = () => {
+  const http = vue.inject(HTTP_CLIENT_KEY);
+  if (!http) {
+    throw new Error(
+      "[json-forms] No HttpClient provided. Pass an `http` prop to <JsonForm> or call provideHttpClient() in a parent component."
+    );
+  }
+  return http;
+};
+const _hoisted_1$a = { class: "flex-1" };
+const _hoisted_2$4 = { key: 0 };
+const _hoisted_3$2 = {
   key: 0,
   class: "text-sm text-base-content/50"
 };
-const _hoisted_4 = { key: 1 };
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$2 = { key: 1 };
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "ArrayRenderer",
   props: {
     uischema: {},
@@ -579,7 +689,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
             vue.unref(layout) === "row" ? "flex-row items-center" : "flex-col"
           ])
         }, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(fields), (entry, index2) => {
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(fields), (entry, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: entry.key,
               class: "flex-1"
@@ -590,29 +700,29 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
                   vue.unref(layout) === "row" ? "flex-col" : "flex-row items-center"
                 ])
               }, [
-                vue.createElementVNode("div", _hoisted_1$5, [
+                vue.createElementVNode("div", _hoisted_1$a, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childElements.value, (child, ci) => {
-                    return vue.openBlock(), vue.createBlock(_sfc_main$f, {
+                    return vue.openBlock(), vue.createBlock(_sfc_main$5, {
                       key: ci,
                       uischema: child,
                       schema: vue.unref(itemSchema),
-                      "path-prefix": `${vue.unref(path)}[${index2}]`
+                      "path-prefix": `${vue.unref(path)}[${index}]`
                     }, null, 8, ["uischema", "schema", "path-prefix"]);
                   }), 128))
                 ]),
-                showActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
+                showActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$4, [
                   vue.unref(fields).length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
                     key: 0,
                     icon: vue.unref(ui.IconEnum).Delete,
                     outline: true,
-                    onClick: ($event) => vue.unref(remove)(index2)
+                    onClick: ($event) => vue.unref(remove)(index)
                   }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
                 ])) : vue.createCommentVNode("", true)
               ], 2)
             ]);
           }), 128)),
-          vue.unref(fields).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, " No data ")) : vue.createCommentVNode("", true),
-          showActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.unref(fields).length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, " No data ")) : vue.createCommentVNode("", true),
+          showActions.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
             vue.createVNode(vue.unref(ui.Btn), {
               icon: vue.unref(ui.IconEnum).Plus,
               outline: true,
@@ -629,50 +739,21 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const isAutoCompleteControl = testers.and(
-  // uiTypeIs('Control'),
-  testers.optionIs("format", jsonFormsCore.ControlType.autocomplete)
-);
-const isTextAreaControl = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.optionIs("format", jsonFormsCore.ControlType.textArea)
-);
-const isStringFormat = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.or(testers.optionIs("format", jsonFormsCore.ControlType.string), testers.schemaTypeIs("string"))
-);
-const isMarkdownControl = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.optionIs("format", jsonFormsCore.ControlType.markdown)
-);
-const isArrayRenderer = testers.and(
-  testers.schemaTypeIs("array")
-  // optionIs('format', ControlType.array),
-);
-const isMultiselectControl = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.optionIs("format", jsonFormsCore.ControlType.mutliSelect)
-);
-const isSelectControl = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.optionIs("format", jsonFormsCore.ControlType.select)
-);
-const isBooleanControl = testers.or(
-  testers.isBooleanControl,
-  testers.and(core$1.uiTypeIs("Control"), testers.optionIs("format", jsonFormsCore.ControlType.boolean))
-);
-const isNumberFormat = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.or(testers.optionIs("format", jsonFormsCore.ControlType.number), testers.schemaTypeIs("number"))
-);
-const isIntegerFormat = testers.and(
-  core$1.uiTypeIs("Control"),
-  testers.or(testers.optionIs("format", jsonFormsCore.ControlType.integer), testers.schemaTypeIs("integer"))
-);
 const arrayRenderers = [
-  { tester: core$1.rankWith(12, isArrayRenderer), renderer: _sfc_main$e }
+  { tester: rankWith(12, isArrayRenderer), renderer: _sfc_main$k }
 ];
-const MethodSchema = zod.z.enum(["get", "post", "delete", "put", "patch"]);
+const MethodSchema = zod.z.enum([
+  "get",
+  "post",
+  "delete",
+  "put",
+  "patch",
+  "GET",
+  "POST",
+  "DELETE",
+  "PUT",
+  "PATCH"
+]);
 const OperationSchema = zod.z.object({
   uri: zod.z.string(),
   method: MethodSchema
@@ -693,22 +774,24 @@ const OperationMap = {
   findAll: "get",
   findOne: "get",
   lookup: "get",
-  update: "get"
+  update: "patch"
 };
+const schemaDef = zod.z.object({
+  ui: zod.z.any().optional(),
+  data: zod.z.any()
+});
 const ResourceSchema = zod.z.object({
   id: zod.z.string(),
   uri: zod.z.string(),
   operations: Operations,
-  schema: zod.z.object({
-    ui: zod.z.any().optional(),
-    data: zod.z.any()
+  schema: schemaDef.optional(),
+  schemas: zod.z.object({
+    form: schemaDef.optional()
   }).optional()
 }).transform((data) => {
-  const schema = data.schema;
-  if (schema) {
-    if (!schema.ui) {
-      schema.ui = jsonFormsCore.uiFromJsonSchema(schema.data);
-    }
+  const schema = data.schema ?? data.schemas?.form ?? { ui: void 0, data: void 0 };
+  if (!schema.ui && schema.data) {
+    schema.ui = jsonFormsCore.uiFromJsonSchema(schema.data);
   }
   const operations = {};
   for (const k in OperationMap) {
@@ -716,14 +799,14 @@ const ResourceSchema = zod.z.object({
     const defaultOperation = OperationMap[key];
     const operation = data.operations[key];
     const mapResourceSchema = () => {
-      if (lodashEs.isUndefined(operation) || operation === false) return null;
+      if (operation === void 0 || 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
+        method: operation.method?.toLowerCase() ?? defaultOperation
       };
     };
     operations[key] = mapResourceSchema();
@@ -734,58 +817,72 @@ const ResourceSchema = zod.z.object({
     operations
   };
 });
-const getResourceSchema = async (resourceUri, skipAuth) => {
-  const fetch = skipAuth ? axios : toolsVue.useApi();
-  return fetch.get(resourceUri).then((response) => {
+const getResourceSchema = async (resourceUri, http) => {
+  return http.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) => {
+const resolvePlaceholders = (uri, formValues, searchTerm) => {
+  const resolved = uri.replace(/\{form\.([^}]+)\}/g, (_, key) => {
+    const value = key.split(".").reduce((o, k) => o?.[k], formValues);
+    return encodeURIComponent(value ?? "");
+  });
+  if (resolved.includes("{q}"))
+    return resolved.replace("{q}", encodeURIComponent(searchTerm));
+  if (resolved.includes("{text}"))
+    return resolved.replace("{text}", searchTerm);
+  return `${resolved}${encodeURIComponent(searchTerm)}`;
+};
+const useRemoteOption = (options, http, formValues) => {
   return {
     fetchOptions: (searchTerm, signal) => {
-      const fetch = options.skipAuth ? axios : toolsVue.useApi();
-      return fetch.get(`${options.uri}${searchTerm}`, { signal }).then((data) => data.data[options.dataField ?? "data"]);
+      const uri = resolvePlaceholders(options.uri, formValues, searchTerm);
+      return http.get(uri, { signal }).then((data) => {
+        const body = data.data;
+        if (Array.isArray(body)) return body;
+        return body[options.dataField ?? "data"];
+      });
     }
   };
 };
-const useResourceOptions = async (options) => {
-  const resource = await getResourceSchema(
-    options.resource,
-    options.skipAuth ?? false
-  );
-  const fetch = options.skipAuth ? axios : toolsVue.useApi();
+const useResourceOptions = async (options, http, formValues) => {
+  const resource = await getResourceSchema(options.resource, http);
   const lookup = resource.operations.lookup;
   return {
     fetchOptions: (searchTerm, signal) => {
-      const uri = lookup.uri.replace("{text}", searchTerm);
+      const uri = resolvePlaceholders(lookup.uri, formValues, searchTerm);
       const method = lookup.method;
-      return fetch[method](uri, { signal }).then(
-        (data) => data.data[options.dataField ?? "data"]
-      );
+      return http[method](uri, { signal }).then((data) => data.data[options.dataField ?? "data"]);
     },
-    enableCreate: !!resource.operations.create,
+    enableCreate: !!resource.operations.create && resource.schema.ui,
     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
-        );
+        return http[create.method](create.uri, data).then((result) => result.data);
       }
     } : null
   };
 };
-const useFetchOptions = async (options) => {
+const useFetchOptions = async (options, http, formValues = {}) => {
   let config = {};
-  if (options.uri)
-    config = useRemoteOption(options);
-  if (options.resource)
-    config = await useResourceOptions(options);
+  if ("uri" in options && options.uri)
+    config = useRemoteOption(
+      options,
+      http,
+      formValues
+    );
+  if ("resource" in options && options.resource)
+    config = await useResourceOptions(
+      options,
+      http,
+      formValues
+    );
   return {
     fetchOptions: null,
     labelKey: options.labelKey,
@@ -795,116 +892,41 @@ const useFetchOptions = async (options) => {
     ...config
   };
 };
-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 = vue.inject("rootSchema");
-  const path = scopeToPath(uischema.scope);
-  const { errorMessage, meta } = 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 = ui.mergeStyles(opts.styles);
-  const errorMode = vue.inject(ERROR_MODE_KEY, vue.ref("onBlur"));
-  const submitted = vue.inject(FORM_SUBMITTED_KEY, vue.ref(false));
-  const shouldShowError = vue.computed(() => {
-    if (!errorMessage.value) return false;
-    switch (errorMode.value) {
-      case "always":
-        return true;
-      case "onChange":
-        return meta.dirty;
-      case "onSubmit":
-        return submitted.value;
-      case "onBlur":
-      default:
-        return meta.touched;
-    }
-  });
-  const width = opts.colspan || styles?.width === "full" ? "w-full" : opts.width ?? "min-w-input";
-  return vue.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 = vue.inject("pathPrefix", "");
-    const scopePath = scopeToPath(uischema.scope);
-    const path = pathPrefix ? `${pathPrefix}.${scopePath}` : scopePath;
-    const field = veeValidate.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;
-    vue.watch(field.value, (val) => {
-      if (!initialized) {
-        initialized = true;
-        return;
-      }
-      field.handleChange(val);
-    });
-    return {
-      wrapper: vue.computed(() => ({ ...wrapper.value, ...customWrapper.value })),
-      value: field.value,
-      field,
-      onBlur,
-      onChange,
-      appliedOptions: vue.computed(
-        () => uischema.options ?? {}
-      )
-    };
-  };
-};
-const useControlBinding = (uischema, schema, options = {}) => {
-  return useCustomControlBinding()(uischema, schema, options);
+const loadDisplayValue = (options, value) => {
+  const values = options.values;
+  if (!values) return value;
+  const valueKey = options.valueKey;
+  const id = value?.[valueKey] ?? value;
+  const findValue = values.find((o) => o[valueKey] === id);
+  return findValue;
 };
 const useSelectInput = (...fields) => (uischema, schema, field) => {
   const opts = uischema.options ?? {};
   return vue.computed(() => {
-    return lodashEs.pick(opts, fields);
+    const options = Object.fromEntries(
+      fields.filter((f) => f in opts).map((f) => [f, opts[f]])
+    );
+    if (!options.labelKey) options.labelKey = "label";
+    if (!options.valueKey) options.valueKey = "value";
+    options.displayValue = loadDisplayValue(
+      options,
+      field.value.value
+    );
+    return options;
   });
 };
 const useSelectBinding = useCustomControlBinding({
-  useProps: useSelectInput("options", "labelKey", "valueKey")
+  useProps: useSelectInput(
+    "options",
+    "values",
+    "uri",
+    "resource",
+    "dataField",
+    "labelKey",
+    "valueKey",
+    "clearable",
+    "storeValue"
+  )
 });
 const useAutocompleteBinding = useCustomControlBinding({
   useProps: useSelectInput(
@@ -918,7 +940,58 @@ const useAutocompleteBinding = useCustomControlBinding({
     "skipAuth"
   )
 });
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+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 },
+  /** 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
+  },
+  /** 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"
+  },
+  /** HTTP client passed through to the inner JsonForm for remote renderers (e.g. autocomplete). */
+  http: {
+    type: Object,
+    default: null
+  },
+  /** Custom renderer registry passed to the inner JsonForm. */
+  renderers: {
+    type: Array,
+    default: null
+  }
+};
+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 form validity changes. */
+  "valid"
+];
+const _hoisted_1$9 = { class: "overflow-auto" };
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "FormModal",
   props: /* @__PURE__ */ vue.mergeModels(FormModalProperties, {
     "modelValue": {},
@@ -927,7 +1000,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   emits: /* @__PURE__ */ vue.mergeModels(FormModalEmits, ["update:modelValue"]),
   setup(__props, { emit: __emit }) {
     const properties = __props;
-    const id = `modal_${Math.floor(Math.random() * 1e3)}`;
+    const id = `edit_${Math.floor(Math.random() * 1e3)}`;
     const formRef = vue.ref();
     const valid = vue.ref(false);
     const formData = vue.useModel(__props, "modelValue");
@@ -949,7 +1022,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     };
     const onErrors = (errors) => {
       emits("errors", errors);
-      valid.value = lodashEs.isEmpty(errors);
+      valid.value = !errors || (Array.isArray(errors) ? errors.length === 0 : Object.keys(errors).length === 0);
     };
     vue.watch(valid, (newValid, oldValid) => {
       if (newValid !== oldValid) {
@@ -964,43 +1037,215 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
         onCloseModal: onCancel
       }), {
         content: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "content-before"),
-          vue.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"]),
-          vue.renderSlot(_ctx.$slots, "content-after")
+          vue.createElementVNode("div", _hoisted_1$9, [
+            vue.renderSlot(_ctx.$slots, "content-before"),
+            vue.createVNode(_sfc_main$4, {
+              id: `modal-${id}`,
+              ref_key: "formRef",
+              ref: formRef,
+              "form-data": formData.value,
+              schema: _ctx.schema,
+              "ui-schema": _ctx.uiSchema,
+              "error-mode": _ctx.errorMode,
+              http: properties.http,
+              renderers: properties.renderers,
+              onErrors,
+              onChange,
+              onEvents: _cache[0] || (_cache[0] = ($event) => emits("events", $event))
+            }, null, 8, ["id", "form-data", "schema", "ui-schema", "error-mode", "http", "renderers"]),
+            vue.renderSlot(_ctx.$slots, "content-after")
+          ])
         ]),
         actions: vue.withCtx(() => [
           vue.createVNode(vue.unref(ui.Btn), {
             color: vue.unref(ui.Color).secondary,
             outline: true,
-            "aria-label": "Cancel",
+            "aria-label": _ctx.cancelLabel,
             onClick: onCancel
           }, {
-            default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
-              vue.createTextVNode(" Cancel ", -1)
-            ])]),
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.cancelLabel), 1)
+            ]),
             _: 1
-          }, 8, ["color"]),
+          }, 8, ["color", "aria-label"]),
           vue.createVNode(vue.unref(ui.Btn), {
             disabled: !valid.value,
-            "aria-label": "Save",
+            "aria-label": _ctx.saveLabel,
             onClick: onSubmit
           }, {
-            default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
-              vue.createTextVNode(" Save ", -1)
-            ])]),
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.saveLabel), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "aria-label"])
+        ]),
+        _: 3
+      }, 16, ["width"]);
+    };
+  }
+});
+const ViewModalProperties = {
+  /** Title displayed in the modal header. */
+  modalTitle: { type: String, required: true },
+  /** Label for the close button. */
+  closeLabel: { type: String, default: "Close" },
+  /** Label for the edit button. Only rendered when `canEdit` is true. */
+  editLabel: { type: String, default: "Edit" },
+  /** Label for the delete button. Only rendered when `canDelete` is true. */
+  deleteLabel: { type: String, default: "Delete" },
+  /** 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 },
+  /** 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,
+    default: () => {
+    }
+  },
+  /**
+   * Show the Edit button.
+   * The caller wires the action by listening to the `edit` event via `onEdit`
+   * in the props object — Vue's v-bind spread in modalWrapper converts onXxx
+   * keys into event handlers automatically.
+   */
+  canEdit: { type: Boolean, default: false },
+  /**
+   * Show the Delete button.
+   * The caller wires the action by listening to the `delete` event via `onDelete`
+   * in the props object.
+   */
+  canDelete: { type: Boolean, default: false },
+  /** Initial form data to populate the form with. */
+  data: { type: Object, required: true },
+  /** Custom renderer registry passed to the inner JsonForm. */
+  renderers: {
+    type: Array,
+    default: null
+  }
+};
+const ViewModalEmits = [
+  /** Emitted when the modal is closed. */
+  "closeModal",
+  /** Emitted when the Edit button is clicked. Payload: current form data. */
+  "edit",
+  /** Emitted when the Delete button is clicked. Payload: current form data. */
+  "delete",
+  /** Emitted when the view event is fired from the form. Payload: payload of the form event */
+  "view"
+];
+const _hoisted_1$8 = { class: "text-gray-500 text-xs mb-2" };
+const _hoisted_2$3 = { class: "overflow-y-auto" };
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  __name: "ViewModal",
+  props: /* @__PURE__ */ vue.mergeModels(ViewModalProperties, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(ViewModalEmits, ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const properties = __props;
+    const id = `view_${Math.floor(Math.random() * 1e3)}`;
+    const valid = vue.ref(false);
+    const formData = vue.useModel(__props, "modelValue");
+    const emits = __emit;
+    if (properties.data) {
+      formData.value = properties.data;
+    }
+    vue.provide(
+      "renderers",
+      properties.renderers?.length ? [...customRenderers, ...properties.renderers] : customRenderers
+    );
+    vue.provide("readonlyRenderers", properties.renderers ?? []);
+    vue.provide("rootSchema", properties.schema);
+    vue.provide("styles", ui.myStyles);
+    const onCancel = () => {
+      formData.value = {};
+      emits("closeModal", null);
+    };
+    const onEditClick = () => {
+      const data = formData.value;
+      emits("edit", data);
+      emits("closeModal", null);
+    };
+    const onDeleteClick = () => {
+      const data = formData.value;
+      emits("delete", data);
+      emits("closeModal", null);
+    };
+    vue.watch(valid, (newValid, oldValid) => {
+      if (newValid !== oldValid) {
+        emits("valid", newValid);
+      }
+    });
+    const handleEvent = (event) => {
+      if (event.event !== "view") return;
+      emits("view", event);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Modal), vue.mergeProps(properties, {
+        open: true,
+        "disable-close": false,
+        width: _ctx.modalSize,
+        onCloseModal: onCancel
+      }), {
+        title: vue.withCtx(() => [
+          vue.createElementVNode("h3", null, vue.toDisplayString(_ctx.modalTitle), 1),
+          vue.createElementVNode("div", _hoisted_1$8, vue.toDisplayString(formData.value.id), 1)
+        ]),
+        content: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "content-before"),
+          vue.createElementVNode("div", _hoisted_2$3, [
+            vue.createVNode(_sfc_main$4, {
+              id: `modal-${id}`,
+              ref: "formRef",
+              "form-data": formData.value,
+              schema: _ctx.schema,
+              readonly: true,
+              "ui-schema": _ctx.uiSchema,
+              renderers: properties.renderers,
+              onEvents: handleEvent
+            }, null, 8, ["id", "form-data", "schema", "ui-schema", "renderers"])
+          ]),
+          vue.renderSlot(_ctx.$slots, "content-after")
+        ]),
+        actions: vue.withCtx(() => [
+          _ctx.canEdit ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+            key: 0,
+            "aria-label": _ctx.editLabel,
+            onClick: onEditClick
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.editLabel), 1)
+            ]),
+            _: 1
+          }, 8, ["aria-label"])) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(ui.Btn), {
+            color: vue.unref(ui.Color).secondary,
+            outline: true,
+            "aria-label": _ctx.closeLabel,
+            onClick: onCancel
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.closeLabel), 1)
+            ]),
             _: 1
-          }, 8, ["disabled"])
+          }, 8, ["color", "aria-label"]),
+          _ctx.canDelete ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+            key: 1,
+            color: vue.unref(ui.Color).error,
+            outline: true,
+            "aria-label": _ctx.deleteLabel,
+            icon: vue.unref(ui.IconEnum).Delete,
+            onClick: onDeleteClick
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.deleteLabel), 1)
+            ]),
+            _: 1
+          }, 8, ["color", "aria-label", "icon"])) : vue.createCommentVNode("", true)
         ]),
         _: 3
       }, 16, ["width"]);
@@ -1015,10 +1260,12 @@ class JsonFormModalService {
     uiSchema,
     modalSize,
     onClose,
-    onEvents
+    onEvents,
+    http,
+    renderers
   }) {
     ui.ModalService.openModal({
-      component: _sfc_main$d,
+      component: _sfc_main$j,
       props: {
         schema,
         uiSchema,
@@ -1026,12 +1273,49 @@ class JsonFormModalService {
         data: initialData ?? {},
         modalTitle,
         onClose,
-        onEvents
+        onEvents,
+        http,
+        renderers
+      }
+    });
+  }
+  static openViewModal({
+    data,
+    modalTitle,
+    schema,
+    uiSchema,
+    modalSize,
+    onClose,
+    onEdit,
+    onDelete,
+    renderers,
+    onView
+  }) {
+    ui.ModalService.openModal({
+      component: _sfc_main$i,
+      props: {
+        schema,
+        uiSchema,
+        modalSize,
+        data,
+        modalTitle,
+        onClose: onClose ?? (() => {
+        }),
+        // Boolean props drive button visibility — no `on` prefix so Vue passes
+        // them as regular props, not event listeners.
+        canEdit: !!onEdit,
+        canDelete: !!onDelete,
+        // `onEdit`/`onDelete` are intercepted by Vue's v-bind spread as event
+        // handlers for ViewModal's declared 'edit'/'delete' emits.
+        onEdit,
+        onDelete,
+        renderers,
+        onView
       }
     });
   }
 }
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "AutocompleteControlRenderer",
   props: {
     uischema: {},
@@ -1047,12 +1331,16 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       onChange: onFieldChange,
       appliedOptions
     } = useAutocompleteBinding(props.uischema, props.schema);
-    const fetchOptions = core.computedAsync(async () => {
-      const config = await useFetchOptions(
-        appliedOptions.value
-      );
-      return config;
-    });
+    const http = useHttpClient();
+    const { values: formValues } = veeValidate.useFormContext();
+    const fetchOptions = vue.ref(null);
+    vue.watch(
+      [appliedOptions, formValues],
+      async ([opts]) => {
+        fetchOptions.value = await useFetchOptions(opts, http, formValues);
+      },
+      { immediate: true, deep: true }
+    );
     const onChange = (val) => {
       setValue(val);
       onFieldChange();
@@ -1065,12 +1353,17 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       const { valueKey, labelKey } = fetchOptions.value;
+      const opts = appliedOptions.value;
+      if (opts.storeValue && valueKey && valueKey in result) {
+        field.setValue(result[valueKey]);
+        return;
+      }
       const keys = [valueKey, labelKey].filter(Boolean);
       if (keys.length === 0) {
         field.setValue(result);
         return;
       }
-      const stripped = lodashEs.pick(result, keys);
+      const stripped = Object.fromEntries(keys.filter((k) => k in result).map((k) => [k, result[k]]));
       field.setValue(stripped);
     };
     const onCreate = () => {
@@ -1081,6 +1374,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
           schema: form.json_schema,
           uiSchema: form.ui_schema,
           modalTitle: `Create new ${wrapper.value.label}`,
+          http,
           onClose: (result) => {
             if (!result || !result.valid) return;
             form.create(result.data).then((res) => {
@@ -1098,12 +1392,12 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return vue.unref(fetchOptions) ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Autocomplete), vue.mergeProps({ key: 0 }, vue.unref(wrapper), {
+      return fetchOptions.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Autocomplete), vue.mergeProps({ key: 0 }, vue.unref(wrapper), {
         "model-value": vue.unref(value),
-        "fetch-options": vue.unref(fetchOptions).fetchOptions,
-        "label-key": vue.unref(fetchOptions).labelKey,
-        "value-key": vue.unref(fetchOptions).valueKey,
-        "enable-create": vue.unref(fetchOptions).enableCreate,
+        "fetch-options": fetchOptions.value.fetchOptions,
+        "label-key": fetchOptions.value.labelKey,
+        "value-key": fetchOptions.value.valueKey,
+        "enable-create": fetchOptions.value.enableCreate,
         onChange,
         onBlur: vue.unref(onBlur),
         onCreate
@@ -1111,7 +1405,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "BooleanControlRenderer",
   props: {
     uischema: {},
@@ -1138,7 +1432,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "MarkdownControlRenderer",
   props: {
     uischema: {},
@@ -1166,7 +1460,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "MultiSelectControlRenderer",
   props: {
     uischema: {},
@@ -1179,10 +1473,14 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
       value,
       field,
       onBlur,
-      onChange: onFieldChange
+      onChange: onFieldChange,
+      appliedOptions
     } = useSelectBinding(props.uischema, props.schema);
     const onChange = (val) => {
-      field.setValue(val);
+      const opts = appliedOptions.value;
+      const valueKey = opts.valueKey ?? "value";
+      const stored = opts.storeValue && Array.isArray(val) ? val.map((item) => item && typeof item === "object" ? item[valueKey] : item) : val;
+      field.setValue(stored);
       onFieldChange();
     };
     return (_ctx, _cache) => {
@@ -1194,7 +1492,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "NumberControlRenderer",
   props: {
     uischema: {},
@@ -1218,7 +1516,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectControlRenderer",
   props: {
     uischema: {},
@@ -1234,24 +1532,60 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       onChange: onFieldChange,
       appliedOptions
     } = useSelectBinding(props.uischema, props.schema);
+    const http = useHttpClient();
+    const { values: formValues } = veeValidate.useFormContext();
+    const valueKey = vue.computed(
+      () => appliedOptions.value.valueKey ?? "value"
+    );
+    const isRemote = vue.computed(
+      () => !!appliedOptions.value.uri || !!appliedOptions.value.resource
+    );
+    const remoteOptions = vue.ref([]);
+    vue.watch(
+      [appliedOptions, formValues],
+      async ([opts]) => {
+        if (!isRemote.value) return;
+        const fetcher = await useFetchOptions(
+          opts,
+          http,
+          formValues
+        );
+        if (!fetcher.fetchOptions) return;
+        try {
+          const results = await fetcher.fetchOptions(
+            "",
+            new AbortController().signal
+          );
+          remoteOptions.value = Array.isArray(results) ? results : [];
+        } catch {
+          remoteOptions.value = [];
+        }
+      },
+      { immediate: true, deep: true }
+    );
     const selectOptions = vue.computed(() => {
-      return appliedOptions.options ?? [];
+      if (isRemote.value) return remoteOptions.value;
+      const opts = appliedOptions.value;
+      return opts.options ?? opts.values ?? [];
     });
     const onChange = (val) => {
-      field.setValue(val);
+      const opts = appliedOptions.value;
+      const stored = opts.storeValue && val && typeof val === "object" ? val[valueKey.value] : val;
+      field.setValue(stored);
       onFieldChange();
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(ui.SelectComponent), vue.mergeProps(vue.unref(wrapper), {
         "model-value": vue.unref(value),
         options: selectOptions.value,
+        clearable: vue.unref(appliedOptions).clearable ?? true,
         onChange,
         onBlur: vue.unref(onBlur)
-      }), null, 16, ["model-value", "options", "onBlur"]);
+      }), null, 16, ["model-value", "options", "clearable", "onBlur"]);
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "StringControlRenderer",
   props: {
     uischema: {},
@@ -1273,7 +1607,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "TextAreaControlRenderer",
   props: {
     uischema: {},
@@ -1281,47 +1615,87 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { wrapper, value, onBlur, onChange } = useControlBinding(
+    const { wrapper, value, onBlur, onChange, appliedOptions } = useControlBinding(
       props.uischema,
       props.schema
     );
+    const pathPrefix = vue.inject("pathPrefix", "");
+    const opts = props.uischema.options ?? {};
+    const { values: formValues } = veeValidate.useFormContext();
+    const dir = vue.computed(() => {
+      if (!opts.directionField) return opts.direction ?? "ltr";
+      const key = pathPrefix ? `${pathPrefix}.${opts.directionField}` : opts.directionField;
+      const val = key.split(".").reduce((o, k) => o?.[k], formValues);
+      return val ?? "ltr";
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(ui.Textarea), vue.mergeProps(vue.unref(wrapper), {
         modelValue: vue.unref(value),
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(value) ? value.value = $event : null),
+        dir: dir.value,
+        height: vue.unref(appliedOptions).height,
+        "min-height": vue.unref(appliedOptions).minHeight,
         onBlur: vue.unref(onBlur),
         onChange: vue.unref(onChange)
-      }), null, 16, ["modelValue", "onBlur", "onChange"]);
+      }), null, 16, ["modelValue", "dir", "height", "min-height", "onBlur", "onChange"]);
     };
   }
 });
-const index = [
-  { tester: core$1.rankWith(10, isStringFormat), renderer: _sfc_main$6 },
+const controlRenderers = [
+  { tester: rankWith(10, isStringFormat), renderer: _sfc_main$b },
   {
-    tester: core$1.rankWith(11, isTextAreaControl),
-    renderer: _sfc_main$5
+    tester: rankWith(11, isTextAreaControl),
+    renderer: _sfc_main$a
   },
   {
-    tester: core$1.rankWith(11, isMarkdownControl),
-    renderer: _sfc_main$a
+    tester: rankWith(11, isMarkdownControl),
+    renderer: _sfc_main$f
   },
-  { tester: core$1.rankWith(11, isBooleanControl), renderer: _sfc_main$b },
-  { tester: core$1.rankWith(11, isSelectControl), renderer: _sfc_main$7 },
+  { tester: rankWith(11, isBooleanControl), renderer: _sfc_main$g },
+  { tester: rankWith(11, isSelectControl), renderer: _sfc_main$c },
   {
-    tester: core$1.rankWith(11, isMultiselectControl),
-    renderer: _sfc_main$9
+    tester: rankWith(11, isMultiselectControl),
+    renderer: _sfc_main$e
   },
   {
-    tester: core$1.rankWith(12, isAutoCompleteControl),
-    renderer: _sfc_main$c
+    tester: rankWith(12, isAutoCompleteControl),
+    renderer: _sfc_main$h
   },
   {
-    tester: core$1.rankWith(12, isNumberFormat),
-    renderer: _sfc_main$8
+    tester: rankWith(12, isNumberFormat),
+    renderer: _sfc_main$d
   },
   {
-    tester: core$1.rankWith(12, isIntegerFormat),
-    renderer: _sfc_main$8
+    tester: rankWith(12, isIntegerFormat),
+    renderer: _sfc_main$d
+  }
+];
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ControlReadonlyRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { wrapper, displayWrapper } = useReadonlyControlBinding(
+      props.uischema,
+      props.schema
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$u, vue.normalizeProps(vue.guardReactiveProps(vue.unref(wrapper))), {
+        default: vue.withCtx(() => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(displayWrapper).component), vue.normalizeProps(vue.guardReactiveProps(vue.unref(displayWrapper).value)), null, 16))
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+const readonlyControlRenderers = [
+  {
+    tester: rankWith(10, uiTypeIs("Control")),
+    renderer: _sfc_main$9
   }
 ];
 const COLSPAN = {
@@ -1338,8 +1712,8 @@ const COLSPAN = {
   11: "col-span-11",
   12: "col-span-12"
 };
-const _hoisted_1$4 = { class: "flex flex-col gap-4" };
-const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$7 = { class: "flex flex-col gap-4" };
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "CollapseLayoutRenderer",
   props: {
     uischema: {},
@@ -1359,13 +1733,13 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(ui.Collapse), { title: title.value }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_1$4, [
+          vue.createElementVNode("div", _hoisted_1$7, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.uischema.elements, (child, i) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: i,
                 class: vue.normalizeClass(vue.unref(COLSPAN)[child.options?.colspan ?? 12])
               }, [
-                vue.createVNode(_sfc_main$f, {
+                vue.createVNode(_sfc_main$5, {
                   uischema: child,
                   schema: __props.schema
                 }, null, 8, ["uischema", "schema"])
@@ -1378,11 +1752,11 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$3 = {
+const _hoisted_1$6 = {
   key: 1,
   class: "flex flex-col gap-3"
 };
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutRenderer",
   props: {
     uischema: {},
@@ -1391,8 +1765,11 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const LAYOUT = {
-      GridLayout: "grid grid-cols-12 gap-3",
-      HorizontalLayout: "flex flex-row gap-3",
+      // Stack on narrow viewports (e.g. small modals), switch to the 12-column
+      // grid at md+. Children keep their `col-span-*`; with a single column the
+      // span clamps to full width, so fields stack cleanly.
+      GridLayout: "grid grid-cols-1 gap-x-3 md:grid-cols-12",
+      HorizontalLayout: "flex flex-col gap-y-3 md:flex-row",
       VerticalLayout: "flex flex-col gap-3"
     };
     const getLayout = vue.computed(() => LAYOUT[props.uischema.type]);
@@ -1407,31 +1784,175 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             key: i,
             class: vue.normalizeClass(vue.unref(COLSPAN)[child.options?.colspan ?? 12])
           }, [
-            vue.createVNode(_sfc_main$f, {
+            vue.createVNode(_sfc_main$5, {
               uischema: child,
               schema: __props.schema
             }, null, 8, ["uischema", "schema"])
           ], 2);
         }), 128))
-      ], 2)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, " No Applicable Layout found "));
+      ], 2)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, " No Applicable Layout found "));
+    };
+  }
+});
+const _hoisted_1$5 = {
+  class: "grid items-center overflow-hidden",
+  style: { "grid-template-columns": "minmax(150px, auto) minmax(0, 1fr)" }
+};
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ReadOnlyLayoutRenderer",
+  props: {
+    uischema: {},
+    schema: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.uischema.elements, (child, i) => {
+          return vue.openBlock(), vue.createBlock(_sfc_main$5, {
+            key: i,
+            uischema: child,
+            schema: __props.schema
+          }, null, 8, ["uischema", "schema"]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const isLayoutType = or(
+  uiTypeIs("GridLayout"),
+  uiTypeIs("HorizontalLayout"),
+  uiTypeIs("VerticalLayout")
+);
+const layoutRenderers = [
+  { tester: rankWith(10, isLayoutType), renderer: _sfc_main$7 },
+  {
+    tester: rankWith(10, uiTypeIs("CollapseLayout")),
+    renderer: _sfc_main$8
+  }
+];
+const readonlyLayoutRenderers = [
+  { tester: rankWith(10, isLayoutType), renderer: _sfc_main$6 },
+  {
+    tester: rankWith(10, uiTypeIs("CollapseLayout")),
+    renderer: _sfc_main$8
+  }
+];
+const customRenderers = [
+  layoutRenderers,
+  controlRenderers,
+  arrayRenderers
+].flat();
+const readonlyRenderers = [
+  readonlyLayoutRenderers,
+  readonlyControlRenderers,
+  arrayRenderers
+].flat();
+function findRenderer(registry, uischema, schema) {
+  let best = null;
+  for (const entry of registry) {
+    const rank = entry.tester(uischema, schema);
+    if (rank > -1 && (!best || rank > best.rank)) {
+      best = { rank, renderer: entry.renderer };
+    }
+  }
+  return best?.renderer ?? null;
+}
+const _hoisted_1$4 = {
+  key: 1,
+  class: "text-error text-xs"
+};
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Dispatch",
+  props: {
+    uischema: {},
+    schema: {},
+    pathPrefix: { default: void 0 }
+  },
+  setup(__props) {
+    const props = __props;
+    const editableRegistry = vue.inject("renderers");
+    const extraReadonlyRenderers = vue.inject("readonlyRenderers", []);
+    const formReadonly = vue.inject(FORM_READONLY_KEY, vue.ref(false));
+    const effectiveReadonlyRenderers = vue.computed(
+      () => extraReadonlyRenderers.length ? [...readonlyRenderers, ...extraReadonlyRenderers] : readonlyRenderers
+    );
+    const registry = vue.computed(
+      () => formReadonly.value ? effectiveReadonlyRenderers.value : editableRegistry
+    );
+    const rootSchema = vue.inject("rootSchema");
+    const parentPrefix = vue.inject("pathPrefix", "");
+    const effectivePrefix = props.pathPrefix ?? parentPrefix;
+    if (props.pathPrefix !== void 0) {
+      vue.provide("pathPrefix", effectivePrefix);
+    }
+    const resolved = vue.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 = vue.computed(
+      () => findRenderer(
+        registry.value,
+        props.uischema,
+        resolved.value
+      )
+    );
+    return (_ctx, _cache) => {
+      return renderer.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderer.value), {
+        key: 0,
+        uischema: __props.uischema,
+        schema: resolved.value
+      }, null, 8, ["uischema", "schema"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, " No renderer for " + vue.toDisplayString(__props.uischema.scope) + " type: " + vue.toDisplayString(__props.uischema.type), 1));
     };
   }
 });
-const isLayoutType = core$1.or(
-  core$1.uiTypeIs("GridLayout"),
-  core$1.uiTypeIs("HorizontalLayout"),
-  core$1.uiTypeIs("VerticalLayout")
-);
-const layoutRenderes = [
-  { tester: core$1.rankWith(10, isLayoutType), renderer: _sfc_main$3 },
-  {
-    tester: core$1.rankWith(10, core$1.uiTypeIs("CollapseLayout")),
-    renderer: _sfc_main$4
+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 },
+  /** Make all form controls readonly. */
+  readonly: { 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"
+  },
+  /** HTTP client used by renderers that fetch remote data (e.g. autocomplete). */
+  http: {
+    type: Object,
+    default: null
+  },
+  /** Custom renderer registry. Overrides the default `customRenderers` when provided. */
+  renderers: {
+    type: Array,
+    default: null
   }
+};
+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 customRenderes = [layoutRenderes, index, arrayRenderers].flat();
-const _hoisted_1$2 = ["id"];
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$3 = ["id"];
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "FormComponent",
   props: JsonFormComponentProperties,
   emits: JsonFormComponentEmits,
@@ -1452,12 +1973,17 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       validationSchema: zodSchema,
       initialValues: properties.formData
     });
-    vue.provide("renderers", customRenderes);
+    vue.provide(
+      "renderers",
+      properties.renderers?.length ? [...customRenderers, ...properties.renderers] : customRenderers
+    );
+    vue.provide("readonlyRenderers", properties.renderers ?? []);
     vue.provide("rootSchema", properties.schema);
     vue.provide("styles", ui.myStyles);
     const submitted = vue.ref(false);
     vue.provide(ERROR_MODE_KEY, vue.toRef(properties, "errorMode"));
     vue.provide(FORM_SUBMITTED_KEY, submitted);
+    vue.provide(FORM_READONLY_KEY, vue.toRef(properties, "readonly"));
     vue.onMounted(async () => {
       const result = await validate();
       emits("valid", result.valid);
@@ -1465,6 +1991,9 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     provideFormEvents((payload) => {
       emits("events", payload);
     });
+    if (properties.http) {
+      provideHttpClient(properties.http);
+    }
     let syncing = false;
     vue.watch(
       () => properties.formData,
@@ -1513,380 +2042,476 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         id: _ctx.id,
         onSubmit: vue.withModifiers(onSubmit, ["prevent"])
       }, [
-        vue.createVNode(_sfc_main$f, {
+        vue.createVNode(_sfc_main$5, {
           uischema: _ctx.uiSchema,
           schema: _ctx.schema
         }, null, 8, ["uischema", "schema"])
-      ], 40, _hoisted_1$2);
+      ], 40, _hoisted_1$3);
     };
   }
 });
-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 toolsVue.useApi().delete(`${this.uri}/${data.id}`).then(() => {
-      ui.NotificationService.success("Data deleted");
-    }).catch((error) => {
-      console.error(error);
-      ui.NotificationService.error("Error deleting 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 = (error, message) => {
+    console.error(error);
+    notificationStore?.error(message);
+    throw new Error(error);
+  };
+  const create = (object, options2) => {
+    return httpRequest.post(getDataUri(), object, options2).then((response) => {
+      handleSuccess(`Created ${notificationEntity}`);
+      return response.data;
+    }).catch((response) => {
+      handleError(response, `Failed to create ${notificationEntity}`);
     });
-  }
-  async save(id, data) {
-    if (!this.uri) return;
-    const promise = id ? toolsVue.useApi().patch(`${this.uri}/${id}`, data) : toolsVue.useApi().post(this.uri, data);
-    return promise.then((response) => {
-      ui.NotificationService.success("Data saved");
+  };
+  const patch = (id, object, options2) => {
+    return httpRequest.patch(getDataUri(id), object, 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((error) => {
-      console.error(error);
-      ui.NotificationService.error("Error saving 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((object) => httpRequest.post(getDataUri(), object, options2))
+    ).then((responses) => {
+      handleSuccess(`Created ${notificationEntity}`);
+      return responses.map((r) => r.data);
+    }).catch((response) => {
+      handleError(response, `Failed to save ${notificationEntity}`);
     });
+  };
+  return { create, patch, createMulti, delete: _delete, get };
+};
+const TableComponentProperties = {
+  id: { type: String, required: true },
+  uiSchema: { type: Object, required: true },
+  schema: { type: Object, required: true },
+  reload: { type: Number },
+  loading: { type: Boolean, default: false },
+  multiselect: { type: Boolean, default: false },
+  actions: { type: Array },
+  data: { type: Array },
+  page: { type: Object },
+  sort: { type: Object },
+  cellRenderers: { type: Array },
+  hidePagination: { type: Boolean, default: false }
+};
+const TableComponentEmits = [
+  "updatePage",
+  "updatePageSize",
+  "sort",
+  "selectionChange"
+];
+const cellTypeIs = (type, rank) => (element) => element.type === type ? rank : -1;
+const cellFormatIs = (format, rank) => (element) => element.options?.format === format ? rank : -1;
+const findCellRenderer = (registry, element) => {
+  let best;
+  for (const entry of registry) {
+    const rank = entry.tester(element);
+    if (rank > -1 && (!best || rank > best.rank)) {
+      best = { rank, renderer: entry.renderer };
+    }
   }
-}
-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__ */ vue.defineComponent({
-  __name: "FormWithActions",
-  props: FormWithActionsProperties,
-  emits: FormWithActionsEmits,
+  return best?.renderer;
+};
+const defaultCellRenderers = [
+  { tester: cellTypeIs("TextCell", 10), renderer: ui.TextCell },
+  { tester: cellTypeIs("BooleanCell", 10), renderer: ui.BooleanCell }
+];
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableComponent",
+  props: TableComponentProperties,
+  emits: TableComponentEmits,
   setup(__props, { emit: __emit }) {
     const properties = __props;
     const emits = __emit;
-    const formRef = vue.ref();
-    const formData = vue.ref(properties.modelValue);
-    const initialFormData = vue.ref(structuredClone(vue.toRaw(properties.modelValue)));
-    const recordId = vue.ref(properties.modelValue?.id ?? null);
-    const valid = vue.ref(false);
-    vue.watch(
-      () => properties.modelValue,
-      (newValue) => {
-        if (JSON.stringify(vue.toRaw(newValue)) === JSON.stringify(vue.toRaw(formData.value))) return;
-        recordId.value = newValue?.id ?? null;
-        initialFormData.value = structuredClone(vue.toRaw(newValue));
-        formData.value = newValue;
-      }
-    );
-    const store = vue.computed(
-      () => properties.uri ? new FormStore(properties.uri) : null
+    const allRenderers = vue.computed(() => [
+      ...properties.cellRenderers ?? [],
+      ...defaultCellRenderers
+    ]);
+    const displayColumns = vue.computed(
+      () => properties.uiSchema.elements.map((e) => {
+        const element = e;
+        const def = jsonFormsCore.findColumnDef(element, properties.schema);
+        const type = Array.isArray(def.type) ? def.type[0] : def.type;
+        const component = findCellRenderer(allRenderers.value, element);
+        if (!component)
+          console.warn("No cell renderer found for", element.type, element.options?.format);
+        return {
+          ...def,
+          label: e.options?.label ?? def.id,
+          type,
+          component
+        };
+      })
     );
-    const updateValue = (data) => {
-      formData.value = data;
-      emits("update:modelValue", data);
-    };
-    const save = () => {
-      formRef.value?.markSubmitted();
-      if (!valid.value) return;
-      if (store.value) {
-        store.value.save(recordId.value, formData.value).then((response) => {
-          emits("success", response);
-        });
-      } else {
-        emits("submit", formData.value);
-      }
-    };
-    const clear = () => {
-      formData.value = { id: null };
-      emits("update:modelValue", formData.value);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ui.Table), vue.mergeProps(properties, {
+        "display-columns": displayColumns.value,
+        page: _ctx.hidePagination ? void 0 : _ctx.page,
+        onSort: _cache[0] || (_cache[0] = (id) => emits("sort", id)),
+        onUpdatePage: _cache[1] || (_cache[1] = (page) => emits("updatePage", page)),
+        onUpdatePageSize: _cache[2] || (_cache[2] = (size) => emits("updatePageSize", size)),
+        onSelectionChange: _cache[3] || (_cache[3] = (e) => emits("selectionChange", e))
+      }), null, 16, ["display-columns", "page"]);
     };
-    const cancel = () => {
-      formData.value = structuredClone(vue.toRaw(initialFormData.value));
-      emits("update:modelValue", formData.value);
-      emits("cancel");
+  }
+});
+const _hoisted_1$2 = { class: "flex gap-2 items-center" };
+const _hoisted_2$2 = {
+  key: 1,
+  class: "flex-1 min-w-0"
+};
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FilterRowInput",
+  props: {
+    modelValue: {},
+    fields: {}
+  },
+  emits: ["update:modelValue", "remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const noValue = vue.computed(() => jsonFormsCore.OperatorNoValue.has(props.modelValue.operator));
+    const update = (key, value) => {
+      emit("update:modelValue", { ...props.modelValue, [key]: value });
     };
-    const title = vue.computed(() => {
-      if (!properties.updateTitle) return properties.createTitle;
-      return recordId.value ? properties.updateTitle : properties.createTitle;
-    });
-    const onErrors = (errors) => {
-      emits("errors", errors);
-      valid.value = lodashEs.isEmpty(errors);
+    const onOperatorChange = (op) => {
+      emit("update:modelValue", {
+        ...props.modelValue,
+        operator: op,
+        value: jsonFormsCore.OperatorNoValue.has(op) ? "" : props.modelValue.value
+      });
     };
-    vue.watch(valid, (newValid, oldValid) => {
-      if (newValid !== oldValid) {
-        emits("valid", newValid);
-      }
-    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(ui.Collapse), {
-        title: title.value,
-        "height-full": _ctx.fullHeight,
-        scrollable: true
-      }, {
-        default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            class: vue.normalizeClass(["flex flex-col", { "overflow-hidden h-full": _ctx.scrollable }])
-          }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(["flex-1", { "overflow-y-auto overflow-x-hidden": _ctx.scrollable }])
-            }, [
-              vue.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,
-                onSubmit: save,
-                onErrors,
-                onEvents: _cache[0] || (_cache[0] = ($event) => emits("events", $event))
-              }, null, 8, ["id", "form-data", "schema", "ui-schema", "error-mode"])
-            ], 2),
-            vue.createElementVNode("div", _hoisted_1$1, [
-              vue.createElementVNode("div", _hoisted_2, [
-                vue.renderSlot(_ctx.$slots, "actions"),
-                recordId.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
-                  key: 0,
-                  "aria-label": "Cancel",
-                  outline: true,
-                  onClick: cancel
-                }, {
-                  default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
-                    vue.createTextVNode(" Cancel ", -1)
-                  ])]),
-                  _: 1
-                })) : (vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
-                  key: 1,
-                  "aria-label": "Clear",
-                  outline: true,
-                  onClick: clear
-                }, {
-                  default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
-                    vue.createTextVNode(" Clear ", -1)
-                  ])]),
-                  _: 1
-                })),
-                vue.createVNode(vue.unref(ui.Btn), {
-                  "aria-label": "Save",
-                  color: vue.unref(ui.Color).primary,
-                  disabled: !valid.value,
-                  onClick: save
-                }, {
-                  default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
-                    vue.createTextVNode(" Save ", -1)
-                  ])]),
-                  _: 1
-                }, 8, ["color", "disabled"])
-              ])
-            ])
-          ], 2)
-        ]),
-        _: 3
-      }, 8, ["title", "height-full"]);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        vue.createVNode(vue.unref(ui.SelectComponent), {
+          size: "sm",
+          value: __props.modelValue.key,
+          options: __props.fields,
+          clearable: false,
+          onChange: _cache[0] || (_cache[0] = ($event) => update("key", $event.value))
+        }, null, 8, ["value", "options"]),
+        vue.createVNode(vue.unref(ui.SelectComponent), {
+          size: "sm",
+          value: __props.modelValue.operator,
+          options: vue.unref(jsonFormsCore.OperatorOptions),
+          clearable: false,
+          onChange: _cache[1] || (_cache[1] = ($event) => onOperatorChange($event.value))
+        }, null, 8, ["value", "options"]),
+        !noValue.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Input), {
+          key: 0,
+          size: "sm",
+          placeholder: "Enter a value",
+          value: __props.modelValue.value,
+          clearable: true,
+          onInput: _cache[2] || (_cache[2] = ($event) => update("value", $event.target.value))
+        }, null, 8, ["value"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2)),
+        vue.createVNode(vue.unref(ui.Btn), {
+          icon: vue.unref(ui.IconEnum).Delete,
+          size: "xs",
+          outline: true,
+          color: "error",
+          "no-border": true,
+          tooltip: "Remove filter",
+          onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("remove"))
+        }, null, 8, ["icon"])
+      ]);
     };
   }
 });
-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 _hoisted_1$1 = { class: "px-2 flex gap-2 items-center" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "badge badge-sm bg-base-300 text-base-700"
 };
-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__ */ vue.defineComponent({
-  __name: "FormWithTable",
-  props: FormWithTableProperties,
-  emits: FormWithTableEmits,
+const _hoisted_3$1 = {
+  key: 0,
+  class: "absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 min-w-[560px] border border-base-200 rounded-xl bg-base-100 shadow-lg p-4"
+};
+const _hoisted_4$1 = { class: "flex flex-col gap-2" };
+const _hoisted_5$1 = { class: "flex items-center justify-between" };
+const _hoisted_6$1 = { class: "flex gap-2" };
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableFilter",
+  props: {
+    filters: {},
+    filterSchema: {}
+  },
+  emits: ["changeFilters", "close"],
   setup(__props, { emit: __emit }) {
-    const properties = __props;
+    const showFilters = vue.ref(false);
+    const appliedCount = vue.ref(0);
+    const containerRef = vue.ref(null);
+    const onClickOutside = (event) => {
+      const target = event.target;
+      if (containerRef.value?.contains(target)) return;
+      if (target.closest?.("[data-select-listbox]")) return;
+      showFilters.value = false;
+    };
+    vue.onMounted(() => document.addEventListener("mousedown", onClickOutside));
+    vue.onBeforeUnmount(
+      () => document.removeEventListener("mousedown", onClickOutside)
+    );
+    const props = __props;
     const emit = __emit;
-    const reload = vue.ref(0);
-    const resolvedForm = vue.computed(() => properties.form);
-    const resolvedTable = vue.computed(() => properties.table);
-    const resolvedFilter = vue.computed(() => properties.filter);
-    const resolvedUri = vue.computed(() => properties.uri);
-    let store = new FormStore(resolvedUri.value ?? "");
-    vue.watch(resolvedUri, (uri) => {
-      store = new FormStore(uri ?? "");
+    const fields = vue.computed(() => {
+      const properties = props.filterSchema?.properties;
+      if (!properties) return [];
+      return Object.entries(properties).map(([key, schema]) => ({
+        value: key,
+        label: schema.title ?? key
+      }));
     });
-    const hasEdit = ui.hasCustomEventListener("editData");
-    const customEdit = ui.hasCustomEventListener("custom:edit");
-    const customCreate = ui.hasCustomEventListener("custom:create");
-    const edit = (data) => {
-      if (customEdit) {
-        emit("custom:edit", data);
-        return;
-      }
-      if (hasEdit) {
-        emit("editData", data);
-        return;
-      }
-      openModal(data);
+    const defaultField = vue.computed(() => fields.value[0]?.value ?? "");
+    const rows = vue.ref([]);
+    const emptyRow = () => ({
+      key: defaultField.value,
+      value: "",
+      operator: "contains"
+    });
+    vue.watch(
+      () => props.filters,
+      (newFilters) => {
+        const parsed = jsonFormsCore.extractFilters(newFilters ?? []);
+        rows.value = parsed.length > 0 ? parsed : [emptyRow()];
+        appliedCount.value = parsed.length;
+      },
+      { immediate: true }
+    );
+    const addRow = () => {
+      rows.value = [
+        ...rows.value,
+        { key: defaultField.value, value: "", operator: "contains" }
+      ];
     };
-    const create = () => {
-      if (customCreate) {
-        emit("custom:create");
-        return;
-      }
-      openModal();
-    };
-    const deleteFn = (data) => {
-      ui.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 removeRow = (index) => {
+      const updated = rows.value.filter((_, i) => i !== index);
+      rows.value = updated.length > 0 ? updated : [emptyRow()];
     };
-    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)
-      });
+    const onApply = () => {
+      const serialized = rows.value.filter((r) => r.key && r.value).map(jsonFormsCore.filterToString);
+      appliedCount.value = serialized.length;
+      emit("changeFilters", serialized);
+      showFilters.value = false;
+    };
+    const onReset = () => {
+      rows.value = [emptyRow()];
+      appliedCount.value = 0;
+      emit("changeFilters", []);
+      showFilters.value = false;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("div", _hoisted_1, [
-          vue.createElementVNode("h1", null, vue.toDisplayString(_ctx.tableTitle), 1),
-          vue.createElementVNode("div", null, [
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "relative inline-flex"
+      }, [
+        vue.createVNode(vue.unref(ui.Btn), {
+          size: "xs",
+          color: "ghost",
+          class: "border-gray-300 text-base-content/50 h-8",
+          onClick: _cache[0] || (_cache[0] = ($event) => showFilters.value = !showFilters.value)
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("span", _hoisted_1$1, [
+              vue.createVNode(vue.unref(ui.Icon), {
+                icon: vue.unref(ui.IconEnum).Filter,
+                size: "sm",
+                class: "text-base-500"
+              }, null, 8, ["icon"]),
+              _cache[1] || (_cache[1] = vue.createTextVNode(" Filters ", -1)),
+              appliedCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(appliedCount.value), 1)) : vue.createCommentVNode("", true)
+            ])
+          ]),
+          _: 1
+        }),
+        showFilters.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+          vue.createElementVNode("div", _hoisted_4$1, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(rows.value, (row, index) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$2, {
+                key: index,
+                modelValue: rows.value[index],
+                "onUpdate:modelValue": ($event) => rows.value[index] = $event,
+                fields: fields.value,
+                onRemove: ($event) => removeRow(index)
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "fields", "onRemove"]);
+            }), 128))
+          ]),
+          _cache[5] || (_cache[5] = vue.createElementVNode("div", { class: "divider my-3" }, null, -1)),
+          vue.createElementVNode("div", _hoisted_5$1, [
             vue.createVNode(vue.unref(ui.Btn), {
               icon: vue.unref(ui.IconEnum).Plus,
-              outline: true,
-              onClick: create
+              color: "ghost",
+              onClick: addRow
             }, {
-              default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
-                vue.createTextVNode(" Add new record ", -1)
+              default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                vue.createTextVNode(" Add filter ", -1)
               ])]),
               _: 1
-            }, 8, ["icon"])
+            }, 8, ["icon"]),
+            vue.createElementVNode("div", _hoisted_6$1, [
+              vue.createVNode(vue.unref(ui.Btn), {
+                color: "ghost",
+                onClick: onReset
+              }, {
+                default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                  vue.createTextVNode(" Reset ", -1)
+                ])]),
+                _: 1
+              }),
+              vue.createVNode(vue.unref(ui.Btn), { onClick: onApply }, {
+                default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                  vue.createTextVNode(" Apply ", -1)
+                ])]),
+                _: 1
+              })
+            ])
           ])
+        ])) : vue.createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+const _hoisted_1 = { class: "navbar bg-base-100" };
+const _hoisted_2 = { class: "navbar-start" };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { class: "navbar-center flex gap-2 items-center" };
+const _hoisted_5 = {
+  key: 1,
+  class: "flex gap-2"
+};
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = { class: "navbar-end" };
+const _hoisted_8 = { key: 0 };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableToolbar",
+  props: {
+    filterSchema: {},
+    filters: {},
+    search: {},
+    actions: {}
+  },
+  emits: ["updateSearch", "updateFilters", "action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const searchQuery = vue.ref(props.search ?? "");
+    let searchTimeout = null;
+    const onSearchInput = (value) => {
+      searchQuery.value = value;
+      if (searchTimeout) clearTimeout(searchTimeout);
+      searchTimeout = setTimeout(() => emit("updateSearch", value), 300);
+    };
+    const onChangeFilters = (filters) => {
+      emit("updateFilters", filters);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+            vue.renderSlot(_ctx.$slots, "left")
+          ])) : vue.createCommentVNode("", true)
         ]),
-        resolvedTable.value ? (vue.openBlock(), vue.createBlock(vue.unref(ui.Card), { key: 0 }, {
-          default: vue.withCtx(() => [
-            resolvedUri.value ? (vue.openBlock(), vue.createBlock(vue.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"])) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        })) : vue.createCommentVNode("", true)
-      ], 64);
+        vue.createElementVNode("div", _hoisted_4, [
+          vue.createVNode(vue.unref(ui.Input), {
+            placeholder: "Search...",
+            value: searchQuery.value,
+            size: "sm",
+            width: "w-48",
+            clearable: true,
+            onInput: _cache[0] || (_cache[0] = ($event) => onSearchInput($event.target.value))
+          }, null, 8, ["value"]),
+          __props.filterSchema ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+            key: 0,
+            filters: __props.filters ?? [],
+            "filter-schema": __props.filterSchema,
+            onChangeFilters
+          }, null, 8, ["filters", "filter-schema"])) : vue.createCommentVNode("", true),
+          __props.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.actions, (action) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(ui.Btn), {
+                key: action.label ?? action.tooltip,
+                size: "xs",
+                color: "ghost",
+                class: "border-gray-300 text-base-content/50 h-8",
+                icon: action.icon,
+                tooltip: action.tooltip,
+                onClick: action.action
+              }, {
+                default: vue.withCtx(() => [
+                  action.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, vue.toDisplayString(action.label), 1)) : vue.createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["icon", "tooltip", "onClick"]);
+            }), 128))
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        vue.createElementVNode("div", _hoisted_7, [
+          _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+            vue.renderSlot(_ctx.$slots, "right")
+          ])) : vue.createCommentVNode("", true)
+        ])
+      ]);
     };
   }
 });
+exports.FilterRowInput = _sfc_main$2;
 exports.FormModalEmits = FormModalEmits;
 exports.FormModalProperties = FormModalProperties;
-exports.JsonForm = _sfc_main$2;
-exports.JsonFormModal = _sfc_main$d;
+exports.JsonForm = _sfc_main$4;
+exports.JsonFormModal = _sfc_main$j;
 exports.JsonFormModalService = JsonFormModalService;
-exports.JsonFormWithActions = _sfc_main$1;
-exports.JsonFormWithTable = _sfc_main;
-exports.TableComponent = _sfc_main$g;
+exports.ReadonlyLabel = _sfc_main$u;
+exports.TableComponent = _sfc_main$3;
 exports.TableComponentEmits = TableComponentEmits;
 exports.TableComponentProperties = TableComponentProperties;
+exports.TableFilter = _sfc_main$1;
+exports.TableToolbar = _sfc_main;
+exports.ViewDetailValue = _sfc_main$l;
+exports.cellFormatIs = cellFormatIs;
+exports.cellTypeIs = cellTypeIs;
 exports.createRepository = createRepository;
+exports.customRenderers = customRenderers;
+exports.defaultCellRenderers = defaultCellRenderers;
+exports.findCellRenderer = findCellRenderer;
 exports.formatError = formatError;
+exports.getNestedValue = getNestedValue;
+exports.isLink = isLink;
+exports.optionIsIgnoreCase = optionIsIgnoreCase;
 exports.provideFormEvents = provideFormEvents;
+exports.provideHttpClient = provideHttpClient;
+exports.readonlyRenderers = readonlyRenderers;
 exports.registerZodErrorMap = registerZodErrorMap;
+exports.useControlBinding = useControlBinding;
+exports.useCustomControlBinding = useCustomControlBinding;
+exports.useCustomReadonlyControlBinding = useCustomReadonlyControlBinding;
+exports.useDisplayValue = useDisplayValue;
 exports.useFormEvents = useFormEvents;
-exports.veeRenderers = customRenderes;
+exports.useHttpClient = useHttpClient;
+exports.useReadonlyControlBinding = useReadonlyControlBinding;