@trungkhai/dynamic-form 0.1.0

package/dist/index.es.js

@@ -0,0 +1,1361 @@
+import { jsx as f, jsxs as Te, Fragment as X } from "react/jsx-runtime";
+import { Select as _e, Form as V, Upload as ve, Button as ge, DatePicker as Le, Checkbox as je, Radio as Ve, InputNumber as Oe, Input as pe, Row as qe, Col as Ue, App as Ie, Flex as we, Spin as We } from "antd";
+import { createContext as Ge, useContext as Se, memo as P, useState as k, useMemo as x, useEffect as L, useCallback as E, useRef as I, forwardRef as Be, useImperativeHandle as Ke } from "react";
+import Y from "dayjs";
+import { FileImageOutlined as $e, UploadOutlined as He } from "@ant-design/icons";
+const te = Ge(
+  null
+);
+function q() {
+  const e = Se(te);
+  if (!e)
+    throw new Error(
+      "useDynamicFormContext must be used within DynamicFormProvider"
+    );
+  return e;
+}
+function zt() {
+  return Se(te);
+}
+function ze(e, t = []) {
+  for (const i of t) {
+    if (typeof i == "function")
+      continue;
+    const { match: a, render: r } = i;
+    if (typeof a == "string") {
+      if (a === e.field?.type?.code || a === e.code)
+        return r;
+    } else if (a(e))
+      return r;
+  }
+  const n = e.field?.type?.code;
+  for (const i of t)
+    ;
+}
+function Ne(e, t = [], n = {}) {
+  return ze(e, t) ?? n[e.code] ?? n[e.field?.type?.code ?? ""];
+}
+function Ye(e, t) {
+  const n = t.option_config?.label_attr, i = t.option_config?.value_attr || "value";
+  let a;
+  if (n?.length) {
+    const r = n.join(" - ");
+    e[r] !== void 0 ? a = String(e[r]) : a = n.map((s) => e[s]).filter((s) => s != null && s !== "").join(" - ");
+  } else
+    a = String(e[i] ?? "");
+  return {
+    label: a,
+    value: e[i]
+  };
+}
+function Je(e, t) {
+  return t.option_config && t.is_option_api ? e?.map((n) => Ye(n, t)) : t.metas?.map((n) => ({
+    label: n.label,
+    value: n.value
+  }));
+}
+function ne(e, t) {
+  let n;
+  return (...i) => {
+    n && clearTimeout(n), n = setTimeout(() => e(...i), t);
+  };
+}
+const Qe = ({
+  onSearchKeyword: e,
+  searchDebounceMs: t = 500,
+  ...n
+}) => {
+  const [i, a] = k(""), r = x(
+    () => ne((o) => e?.(o), t),
+    [e, t]
+  );
+  return /* @__PURE__ */ f(
+    _e,
+    {
+      allowClear: !0,
+      showSearch: !0,
+      searchValue: i,
+      onSearch: (o) => {
+        a(o), r(o);
+      },
+      filterOption: !1,
+      ...n
+    }
+  );
+}, Xe = P(Qe), Ze = ({
+  fieldName: e,
+  formInstance: t,
+  ...n
+}) => {
+  const i = V.useWatch(e, t);
+  return L(() => {
+    if (i?.fileList?.length && i.fileList.some(
+      (s) => !s.type?.startsWith("image/")
+    )) {
+      const s = i.fileList.filter(
+        (o) => o.type?.startsWith("image/")
+      );
+      t.setFieldValue(
+        e,
+        s?.length ? {
+          file: s[0]?.originFileObj,
+          fileList: s
+        } : null
+      );
+    }
+  }, [e, t, i]), /* @__PURE__ */ f(ve, { listType: "picture-card", accept: "image/*", ...n, children: /* @__PURE__ */ f(
+    "button",
+    {
+      style: { border: 0, background: "none", cursor: "pointer" },
+      type: "button",
+      children: /* @__PURE__ */ f($e, {})
+    }
+  ) });
+}, et = P(Ze), tt = ({
+  fieldName: e,
+  formInstance: t,
+  ...n
+}) => {
+  const i = V.useWatch(e, t);
+  return /* @__PURE__ */ f(ve, { fileList: i?.fileList, ...n, children: /* @__PURE__ */ f(ge, { icon: /* @__PURE__ */ f(He, {}) }) });
+}, nt = P(tt), it = ({
+  formInstance: e,
+  uploadUrl: t,
+  setFieldState: n
+}) => {
+  const { client: i, upload: a, i18n: r, renderers: s } = q(), { messages: o } = r, d = E(() => {
+    if (a.upload) return a.upload;
+    const l = t ?? a.uploadUrl;
+    if (l)
+      return async ({ file: p, signal: m, onProgress: h, fieldCode: S, fieldGroup: v, metadata: g }) => {
+        const u = a.getPayload ? a.getPayload({
+          file: p,
+          fieldCode: S,
+          fieldGroup: v,
+          uploadUrl: l,
+          signal: m,
+          onProgress: h,
+          metadata: g
+        }) : (() => {
+          const _ = new FormData();
+          return _.append("file", p), g && Object.entries(g).forEach(([F, R]) => {
+            _.append(F, String(R));
+          }), _;
+        })(), w = (await i.request({
+          method: "POST",
+          url: l,
+          data: u,
+          headers: u instanceof FormData ? { "Content-Type": "multipart/form-data" } : void 0,
+          signal: m,
+          onUploadProgress: (_) => {
+            h?.(
+              Math.round(_.loaded * 100 / (_.total || 1))
+            );
+          }
+        })).data;
+        return {
+          uid: p.uid,
+          ...w,
+          path: String(w.path ?? "")
+        };
+      };
+  }, [i, a, t]), c = E(
+    (l, p) => (m) => {
+      const { file: h, onProgress: S, onError: v, onSuccess: g } = m, u = new AbortController(), A = d();
+      return A ? (A({
+        file: h,
+        fieldCode: l,
+        fieldGroup: p,
+        uploadUrl: t ?? a.uploadUrl,
+        signal: u.signal,
+        onProgress: (w) => S?.({ percent: w })
+      }).then(
+        (w) => g?.({
+          ...w,
+          uid: w.uid ?? h.uid,
+          path: w.path,
+          upload_date: Y().format("YYYY-MM-DD HH:mm:ss")
+        })
+      ).catch((w) => v?.(w)), { abort: () => u.abort() }) : (v?.(new Error(o.uploadError ?? "Upload not configured")), { abort() {
+      } });
+    },
+    [o.uploadError, d, a.uploadUrl, t]
+  ), y = E(
+    (l, p) => async (m) => {
+      const h = m.response?.path;
+      return h ? a.remove({ path: h, fieldCode: l, fieldGroup: p }) : !0;
+    },
+    [a]
+  ), b = E(
+    (l, {
+      state: p,
+      options: m,
+      optionsLoading: h,
+      optionsError: S,
+      onSearchKeyword: v,
+      readOnly: g = !1
+    }) => {
+      const { additional_config: u, field: A } = l, w = A?.type?.code, _ = g || l.is_readonly || p?.disabled, F = Ne(
+        l,
+        s.fields
+      );
+      if (F)
+        return F(l, {
+          state: p,
+          options: m,
+          optionsLoading: h,
+          optionsError: S,
+          onSearchKeyword: v,
+          readOnly: g,
+          formInstance: e,
+          disabled: !!_,
+          setFieldState: n
+        });
+      const R = Je(m, l);
+      switch (w) {
+        case "text":
+          return u?.text?.textarea ? /* @__PURE__ */ f(
+            pe.TextArea,
+            {
+              disabled: _,
+              placeholder: o.inputPlaceholder(l.label),
+              rows: u?.text?.rows
+            }
+          ) : /* @__PURE__ */ f(
+            pe,
+            {
+              disabled: _,
+              placeholder: o.inputPlaceholder(l.label)
+            }
+          );
+        case "number":
+          return /* @__PURE__ */ f(
+            Oe,
+            {
+              style: { width: "100%" },
+              disabled: _,
+              placeholder: o.inputPlaceholder(l.label),
+              min: u?.number?.min,
+              max: u?.number?.max
+            }
+          );
+        case "select": {
+          const M = {
+            disabled: _,
+            options: R,
+            placeholder: o.selectPlaceholder(l.label),
+            allowClear: !0,
+            loading: h,
+            mode: u?.select?.multiple ? "multiple" : void 0,
+            notFoundContent: S ? o.optionError : h ? o.optionLoading : void 0
+          };
+          return v ? /* @__PURE__ */ f(
+            Xe,
+            {
+              ...M,
+              onSearchKeyword: v,
+              searchDebounceMs: u?.select?.searchDebounceMs ?? 500
+            }
+          ) : /* @__PURE__ */ f(_e, { ...M, showSearch: !0, optionFilterProp: "label" });
+        }
+        case "radio":
+          return /* @__PURE__ */ f(Ve.Group, { disabled: _, options: R });
+        case "checkbox":
+          return /* @__PURE__ */ f(je.Group, { disabled: _, options: R });
+        case "datetime":
+          return /* @__PURE__ */ f(
+            Le,
+            {
+              style: { width: "100%" },
+              disabled: _,
+              showTime: u?.datetime?.showTime,
+              format: u?.datetime?.format
+            }
+          );
+        case "file":
+          return /* @__PURE__ */ f(
+            nt,
+            {
+              disabled: _,
+              fieldName: l.code,
+              formInstance: e,
+              multiple: u?.file?.multiple || !1,
+              maxCount: u?.file?.max,
+              accept: u?.file?.accept,
+              customRequest: c(l.code, l),
+              onRemove: y(l.code, l)
+            }
+          );
+        case "image":
+          return /* @__PURE__ */ f(
+            et,
+            {
+              disabled: _,
+              fieldName: l.code,
+              formInstance: e,
+              multiple: u?.image?.multiple || !1,
+              maxCount: u?.image?.max,
+              accept: u?.image?.accept ?? "image/*",
+              customRequest: c(l.code, l),
+              onRemove: y(l.code, l)
+            }
+          );
+        default:
+          return null;
+      }
+    },
+    [
+      c,
+      y,
+      e,
+      o,
+      s.fields,
+      n
+    ]
+  );
+  return x(() => ({ getDynamicField: b }), [b]);
+};
+function ie(e) {
+  return JSON.stringify(e);
+}
+function at(e, t) {
+  const n = e.get(t);
+  if (n) {
+    if (Date.now() > n.expiresAt) {
+      e.delete(t);
+      return;
+    }
+    return n.data;
+  }
+}
+function rt(e, t, n, i) {
+  e.set(t, { data: n, expiresAt: Date.now() + i });
+}
+async function Ae(e, t, n, i, a) {
+  const r = e[t];
+  if (e.cache.enabled) {
+    const c = at(r, n);
+    if (c !== void 0) return c;
+  }
+  const s = new AbortController(), o = a ? AbortSignal.any([a, s.signal]) : s.signal, d = await i(o);
+  return e.cache.enabled && rt(r, n, d, e.cache.ttlMs), d;
+}
+function W(e, t) {
+  return t.split(".").reduce((n, i) => {
+    if (n && typeof n == "object")
+      return n[i];
+  }, e);
+}
+function ot(e, t) {
+  if (typeof e != "string") return e;
+  const n = e.match(/^\{\{(.+?)\}\}$/);
+  if (!n) return e;
+  const i = n[1].trim(), a = W(t, i);
+  return a !== void 0 ? a : e;
+}
+function st(e, t) {
+  const n = {};
+  for (const i in e)
+    n[i] = ot(
+      e[i],
+      t
+    );
+  return n;
+}
+function Nt(e, t) {
+  const n = { ...e };
+  return t.forEach((i) => {
+    const a = e[i.code];
+    if (a == null) return;
+    switch (i.field?.type?.code) {
+      case "datetime": {
+        const s = Y(a);
+        s.isValid() && (n[i.code] = s);
+        break;
+      }
+      case "file":
+      case "image": {
+        if (Array.isArray(a) && a.length > 0) {
+          const s = a.map((o, d) => {
+            const c = o;
+            return {
+              uid: String(c.uid ?? c.path ?? d),
+              name: c.name ?? `file-${d}`,
+              status: "done",
+              percent: 100,
+              type: c.type,
+              size: c.size,
+              response: o
+            };
+          });
+          n[i.code] = { fileList: s };
+        }
+        break;
+      }
+    }
+  }), n;
+}
+function lt(e) {
+  const t = e.option_config?.api_options?.params || {}, n = e.option_config?.api_options?.data || {}, i = (a) => Object.values(a).filter(
+    (r) => typeof r == "string" && r.startsWith("{{") && r.endsWith("}}")
+  ).map((r) => r.slice(2, -2).trim());
+  return Array.from(/* @__PURE__ */ new Set([...i(t), ...i(n)]));
+}
+function j(e, t) {
+  const n = {};
+  for (const i in e) {
+    const a = e[i];
+    if (typeof a == "string" && a.startsWith("{{") && a.endsWith("}}")) {
+      const r = a.slice(2, -2).trim();
+      n[i] = t?.[r];
+    } else
+      n[i] = a;
+  }
+  return n;
+}
+function ct(e, t) {
+  return e.replace(/\{\{\s*(\w+)\s*\}\}/g, (n, i) => {
+    const a = t?.[i];
+    return a != null ? String(a) : "";
+  });
+}
+function dt(e, t) {
+  const n = x(
+    () => lt(e),
+    [e]
+  ), i = V.useWatch(
+    n.length > 0 ? n : void 0,
+    t
+  );
+  return x(() => {
+    if (!n.length) return {};
+    const a = {};
+    return n.forEach((r, s) => {
+      Array.isArray(i) ? a[r] = i[s] : a[r] = i;
+    }), a;
+  }, [n, i]);
+}
+function ut({
+  group: e,
+  formInstance: t,
+  searchKeyword: n = "",
+  searchDebounceMs: i = 500
+}) {
+  const a = q(), r = dt(e, t), [s, o] = k(), [d, c] = k(!1), [y, b] = k(), l = I(null), [p, m] = k(n), h = e.additional_config?.select?.search_keyword ?? !1, S = x(
+    () => ne((u) => m(u), i),
+    [i]
+  );
+  L(() => {
+    h ? S(n) : m("");
+  }, [n, h, S]);
+  const v = x(() => {
+    const u = e.option_config?.api_options?.params, A = e.option_config?.api_options?.data;
+    if (!(!u && !A))
+      return {
+        params: u ? j(u, r) : void 0,
+        data: A ? j(A, r) : void 0
+      };
+  }, [r, e]), g = E(async () => {
+    if (!e.option_config || !e.is_option_api || !e.option_config.url)
+      return;
+    l.current?.abort();
+    const u = new AbortController();
+    l.current = u;
+    const A = e.option_config.method?.toUpperCase() === "GET" || !e.option_config.method, w = h ? p : "", _ = ie([
+      e.code,
+      e.option_config.url,
+      e.option_config.method,
+      v,
+      w
+    ]);
+    c(!0), b(void 0);
+    try {
+      const F = await Ae(
+        a,
+        "optionCache",
+        _,
+        async (R) => {
+          const M = await a.client.request({
+            method: e.option_config?.method || "GET",
+            url: e.option_config?.url,
+            params: A && h ? { ...v?.params, keywords: w } : v?.params,
+            data: !A && h ? { ...v?.data, keywords: w } : v?.data,
+            signal: R
+          });
+          return a.parsers.optionResponse(M.data, e);
+        },
+        u.signal
+      );
+      u.signal.aborted || o(F);
+    } catch (F) {
+      u.signal.aborted || b(F);
+    } finally {
+      u.signal.aborted || c(!1);
+    }
+  }, [v, a, p, e, h]);
+  return L(() => (e.option_config && e.is_option_api && g(), () => l.current?.abort()), [g, e]), { options: s, isLoading: d, error: y, refetch: g };
+}
+const ft = ({
+  group: e,
+  formInstance: t,
+  fieldState: n,
+  setFieldState: i,
+  uploadUrl: a,
+  readOnly: r = !1,
+  size: s = "middle",
+  ...o
+}) => {
+  const { getDynamicField: d } = it({
+    formInstance: t,
+    uploadUrl: a,
+    setFieldState: i
+  }), c = V.useWatch(e.code, t), [y, b] = k(""), l = e.additional_config?.select?.search_keyword ?? !1, { options: p, isLoading: m, error: h } = ut({
+    group: e,
+    formInstance: t,
+    searchKeyword: y,
+    searchDebounceMs: e.additional_config?.select?.searchDebounceMs ?? 500
+  }), S = E((g) => {
+    b(g);
+  }, []);
+  L(() => {
+    if (e.additional_config?.on_field_change?.clear?.length) {
+      const g = t.getFieldsValue(
+        e.additional_config.on_field_change.clear
+      ), u = e.additional_config.on_field_change.clear.filter(
+        (A) => g?.[A]
+      );
+      u.length && t.resetFields(u);
+    }
+    e.additional_config?.on_field_empty?.disable?.length && e.additional_config.on_field_empty.disable.forEach((g) => {
+      i(g, { disabled: !c });
+    });
+  }, [c, t, e, i]);
+  const v = s === "small" ? 4 : 12;
+  return /* @__PURE__ */ f(
+    V.Item,
+    {
+      label: e.label,
+      name: e.code,
+      hidden: n?.hidden,
+      rules: [{ required: n?.required || !1 }],
+      style: { marginBottom: v, ...o.style },
+      ...o,
+      children: d(e, {
+        state: n,
+        options: p,
+        optionsLoading: m,
+        optionsError: h,
+        onSearchKeyword: l ? S : void 0,
+        readOnly: r
+      })
+    }
+  );
+};
+function mt(e, t) {
+  return e.group.id === t.group.id && e.readOnly === t.readOnly && e.uploadUrl === t.uploadUrl && e.size === t.size && e.fieldState?.disabled === t.fieldState?.disabled && e.fieldState?.hidden === t.fieldState?.hidden && e.fieldState?.required === t.fieldState?.required;
+}
+const pt = P(ft, mt);
+function ht({
+  fieldGroups: e,
+  fieldStates: t,
+  renderField: n,
+  gutter: i,
+  defaultColSpan: a
+}) {
+  return /* @__PURE__ */ f(qe, { gutter: i, children: e.map((r) => {
+    const s = t[r.code]?.hidden ? 0 : Number(r.additional_config?.field_col_span) || a;
+    return /* @__PURE__ */ f(Ue, { xs: s, children: n(r) }, r.id);
+  }) });
+}
+function yt(e) {
+  return x(() => {
+    const t = e?.form?.field_groups ?? [], n = /* @__PURE__ */ new Map(), i = {};
+    t.forEach((r) => {
+      n.set(r.code, r), r.additional_config?.default !== void 0 && (i[r.code] = r.additional_config.default);
+    });
+    const a = t.filter((r) => !r.is_hidden);
+    return { fieldGroups: t, fieldByCode: n, visibleFieldGroups: a, initialValues: i };
+  }, [e]);
+}
+function he(e) {
+  const t = {};
+  return e.forEach((n) => {
+    t[n.code] = {
+      disabled: n.is_readonly,
+      hidden: n.is_hidden,
+      required: n.is_required
+    };
+  }), t;
+}
+function bt(e) {
+  const [t, n] = k(
+    () => he(e)
+  );
+  L(() => {
+    n(he(e));
+  }, [e]);
+  const i = E((a, r) => {
+    n((s) => ({
+      ...s,
+      [a]: { ...s[a], ...r }
+    }));
+  }, []);
+  return { fieldStates: t, setFieldStates: n, setFieldState: i };
+}
+function _t({
+  formInstance: e,
+  fieldByCode: t,
+  relatedData: n,
+  transformers: i
+}) {
+  return { buildProcessedValues: E(async () => {
+    await e.validateFields();
+    const r = e.getFieldsValue(), s = {};
+    for (const c of Object.keys(r)) {
+      const y = t.get(c);
+      if (!y) continue;
+      let b;
+      switch (y.field?.type?.code) {
+        case "datetime":
+          b = r[c] ? Y(r[c]).format(
+            y.additional_config?.datetime?.format
+          ) : null;
+          break;
+        case "image":
+        case "file":
+          r[c]?.fileList?.length && (b = r[c].fileList.filter((l) => l.percent === 100).map((l) => ({
+            ...l.response,
+            name: l.name,
+            type: l.type,
+            size: l.size
+          })));
+          break;
+        default:
+          b = r[c];
+      }
+      i.transformFieldValue && (b = i.transformFieldValue(c, b, y)), s[c] = b;
+    }
+    let o = s;
+    return i.transformSubmitValues && (o = i.transformSubmitValues(
+      o,
+      Array.from(t.values()),
+      n
+    )), (i.parseRelatedDataTemplates ?? st)(o, n ?? {});
+  }, [t, e, n, i]) };
+}
+const vt = Be(
+  ({
+    formConfig: e,
+    formInstance: t,
+    relatedData: n,
+    uploadUrl: i,
+    uploadResourceUrl: a,
+    submitTrackingUrl: r,
+    onBeforeSubmit: s,
+    onSubmitSuccess: o,
+    onSubmitError: d,
+    isRedirectAfterCreate: c,
+    onRedirect: y,
+    size: b = "middle",
+    manualSubmit: l = !1,
+    onValuesChange: p,
+    readOnly: m = !1,
+    submitDebounceMs: h,
+    gutter: S = [8, 0],
+    defaultColSpan: v = 12,
+    submitButtonLabel: g
+  }, u) => {
+    const { message: A } = Ie.useApp(), w = q(), { i18n: _, client: F, parsers: R, redirectHandler: M, renderers: G, transformers: B } = w, ae = i ?? a, re = h ?? w.submitDebounceMs, oe = g ?? _.messages.submit, { fieldGroups: T, fieldByCode: xe, initialValues: K } = yt(e), { fieldStates: $, setFieldState: se } = bt(T), { buildProcessedValues: H } = _t({
+      formInstance: t,
+      fieldByCode: xe,
+      relatedData: n,
+      transformers: B
+    }), z = I(!1), [le, ce] = k(!1), [de, ue] = k(!1);
+    L(() => {
+      if (Object.keys(K).length > 0) {
+        const D = B.normalizeInitialValues ? B.normalizeInitialValues(K, T) : K;
+        t.setFieldsValue(D);
+      }
+    }, [T, t, K, B]);
+    const N = E(async () => {
+      if (!z.current) {
+        z.current = !0, ce(!0);
+        try {
+          let D = await H();
+          try {
+            r && (ue(!0), await F.request({
+              method: "POST",
+              url: r,
+              data: D
+            }));
+            const C = await s?.(D);
+            if (C === !1) return;
+            C && typeof C == "object" && (D = C);
+          } catch (C) {
+            console.error(C);
+            return;
+          } finally {
+            ue(!1);
+          }
+          const U = await F.request({
+            method: e.method,
+            url: e.action,
+            data: D
+          });
+          t.resetFields(
+            T.filter((C) => !C.is_hidden).map((C) => C.code)
+          );
+          const Q = R.submitResponse(U.data);
+          c && Q.redirectUrl && (y ?? M)(Q.redirectUrl, "_blank"), o?.({
+            values: D,
+            response: U.data,
+            data: Q.data ?? U.data
+          });
+        } catch (D) {
+          const U = D;
+          A.error(
+            U?.response?.data?.message ?? _.messages.submitError
+          ), d?.(D);
+        } finally {
+          z.current = !1, ce(!1);
+        }
+      }
+    }, [
+      H,
+      F,
+      T,
+      e.action,
+      e.method,
+      t,
+      _.messages.submitError,
+      c,
+      A,
+      s,
+      y,
+      d,
+      o,
+      R,
+      M,
+      r
+    ]);
+    Ke(
+      u,
+      () => ({
+        submit: N,
+        getProcessedValues: H,
+        isSubmitting: () => z.current
+      }),
+      [H, N]
+    );
+    const fe = x(
+      () => ne(() => {
+        N();
+      }, re),
+      [N, re]
+    ), me = E(
+      (D) => /* @__PURE__ */ f(
+        pt,
+        {
+          group: D,
+          formInstance: t,
+          fieldState: $[D.code],
+          setFieldState: se,
+          uploadUrl: ae,
+          readOnly: m,
+          size: b
+        },
+        D.id
+      ),
+      [
+        $,
+        t,
+        m,
+        ae,
+        se,
+        b
+      ]
+    ), Pe = G.layout ? G.layout({
+      fieldGroups: T,
+      fieldStates: $,
+      renderField: me,
+      gutter: S,
+      defaultColSpan: v,
+      size: b
+    }) : /* @__PURE__ */ f(
+      ht,
+      {
+        fieldGroups: T,
+        fieldStates: $,
+        renderField: me,
+        gutter: S,
+        defaultColSpan: v,
+        size: b
+      }
+    ), Me = !l && !m && (G.submitActions ? G.submitActions({
+      onSubmit: fe,
+      loading: le || de,
+      label: oe
+    }) : /* @__PURE__ */ f(we, { justify: "flex-end", children: /* @__PURE__ */ f(
+      ge,
+      {
+        type: "primary",
+        onClick: fe,
+        loading: le || de,
+        children: oe
+      }
+    ) }));
+    return /* @__PURE__ */ Te(
+      V,
+      {
+        layout: "vertical",
+        form: t,
+        size: b,
+        onValuesChange: p,
+        children: [
+          Pe,
+          Me
+        ]
+      }
+    );
+  }
+);
+vt.displayName = "DynamicForm";
+function Fe(e) {
+  if (!e) return;
+  const { mode: t } = e;
+  if (t === "api" && e.api?.url)
+    return e.api;
+  if (t === "api_ids" && e.api_ids?.url) {
+    const n = e.api_ids, i = n.method?.toUpperCase() === "POST";
+    return {
+      url: n.url,
+      method: n.method,
+      data_path: n.data_path,
+      mapping_attr: n.mapping_attr,
+      link: n.link,
+      result_type: n.result_type ?? "array",
+      params: n.params ?? (!i && !n.data ? { ids: "{{value}}" } : void 0),
+      data: n.data ?? (i && !n.params ? { ids: "{{value}}" } : void 0)
+    };
+  }
+  if (t === "api_detail" && e.api_detail?.url) {
+    const n = e.api_detail;
+    return {
+      url: n.url,
+      method: n.method,
+      data_path: n.data_path,
+      mapping_attr: n.mapping_attr,
+      link: n.link,
+      result_type: n.result_type ?? "object",
+      url_template: n.url_template ?? !0,
+      params: n.params,
+      data: n.data
+    };
+  }
+}
+function ye(e) {
+  return {
+    value: e,
+    id: e
+  };
+}
+function gt(e, t) {
+  const n = t.method || "GET", i = n.toUpperCase() === "GET";
+  if (t.url_template)
+    return (Array.isArray(e) ? e.filter((d) => d != null && d !== "") : e != null && e !== "" ? [e] : []).map((d) => {
+      const c = ye(d), y = ct(t.url, c), b = t.params ? j(t.params, c) : void 0, l = t.data ? j(t.data, c) : void 0;
+      return {
+        method: n,
+        url: y,
+        params: i ? b : void 0,
+        data: i ? void 0 : l
+      };
+    });
+  const a = ye(e), r = t.params ? j(t.params, a) : void 0, s = t.data ? j(t.data, a) : void 0;
+  return [
+    {
+      method: n,
+      url: t.url,
+      params: i ? r : void 0,
+      data: i ? void 0 : s
+    }
+  ];
+}
+function De(e, t) {
+  const n = t.data_path ? W(e, t.data_path) : e;
+  return (t.result_type ?? (Array.isArray(n) ? "array" : "object")) === "array" ? Array.isArray(n) ? n : n != null ? [n] : [] : Array.isArray(n) ? n.length ? [n[0]] : [] : n && typeof n == "object" ? [n] : [];
+}
+function Re(e, t) {
+  return Ct(e, t.mapping_attr);
+}
+function ke(e, t) {
+  return Et(t.link, e);
+}
+async function wt(e, t, n, i) {
+  const a = gt(e, t);
+  if (!a.length) return [];
+  const r = await Promise.all(
+    a.map((o) => n({ ...o, signal: i }))
+  ), s = [];
+  for (const o of r)
+    s.push(...De(o.data, t));
+  return s;
+}
+function O(e) {
+  return !!(e == null || e === "" || Array.isArray(e) && e.length === 0);
+}
+function St(e, t) {
+  const n = e.option_config?.api_options?.params, i = e.option_config?.api_options?.data;
+  if (!n && !i) return;
+  const a = (r) => {
+    const s = {};
+    for (const o in r)
+      if (typeof r[o] == "string" && r[o].startsWith("{{") && r[o].endsWith("}}")) {
+        const d = r[o].slice(2, -2).trim();
+        s[o] = t?.[d];
+      } else
+        s[o] = r[o];
+    return s;
+  };
+  return {
+    params: n ? a(n) : void 0,
+    data: i ? a(i) : void 0
+  };
+}
+function At(e, t) {
+  const n = t.option_config?.label_attr, i = t.option_config?.value_attr || "";
+  if (n?.length) {
+    const a = n.join(" - ");
+    return e[a] !== void 0 ? String(e[a]) : n.map((r) => e[r]).filter((r) => r != null && r !== "").join(" - ");
+  }
+  return String(e[i] ?? "");
+}
+function Ft(e, t) {
+  if (!t?.length) return null;
+  const i = (Array.isArray(e) ? e : [e]).map((a) => t.find((r) => String(r.value) === String(a))?.label).filter((a) => !!a);
+  return i.length ? i.join(", ") : null;
+}
+function Dt(e, t, n) {
+  if (O(e)) return null;
+  const i = t.option_config?.value_attr || "value", a = Array.isArray(e) ? e : [e];
+  if (t.is_option_api && n?.length) {
+    const s = a.map((o) => {
+      const d = n.find(
+        (c) => String(c[i]) === String(o)
+      );
+      return d ? At(d, t) : String(o);
+    }).filter(Boolean);
+    return s.length ? s.join(", ") : null;
+  }
+  const r = Ft(e, t.metas);
+  return r || a.map(String).join(", ");
+}
+function Rt(e, t) {
+  if (O(e)) return null;
+  const n = t.additional_config?.datetime?.format, i = Y(e);
+  return i.isValid() ? n ? i.format(n) : i.format("YYYY-MM-DD HH:mm:ss") : String(e);
+}
+function kt(e) {
+  if (O(e)) return null;
+  if (Array.isArray(e)) {
+    const t = e.map(
+      (n) => typeof n == "object" && n && "name" in n ? String(n.name) : String(n)
+    ).filter(Boolean);
+    return t.length ? t.join(", ") : null;
+  }
+  return String(e);
+}
+function Ct(e, t) {
+  return t?.length ? t.map((n) => {
+    const i = W(e, n) ?? e[n];
+    return i != null ? String(i) : "";
+  }).filter(Boolean).join(" - ") : JSON.stringify(e);
+}
+function Et(e, t) {
+  return e ? e.replace(/\{\{(.+?)\}\}/g, (n, i) => {
+    const a = i.trim(), r = W(t, a) ?? t[a];
+    return r != null ? String(r) : "";
+  }) : null;
+}
+function be(e, t, n) {
+  if (O(e)) return null;
+  switch (t?.mode ?? "formatted") {
+    case "raw":
+    case "formatted":
+      return Array.isArray(e) ? e.map(String).join(", ") : String(e);
+    case "api":
+    case "api_ids":
+    case "api_detail": {
+      const a = Fe(t);
+      if (!n || !a)
+        return Array.isArray(e) ? e.map(String).join(", ") : String(e);
+      const r = De(n, a);
+      return r.length ? r.map((o) => {
+        const d = Re(o, a), c = ke(o, a);
+        return c ? `${d} (${c})` : d;
+      }).filter(Boolean).join(", ") || null : String(e);
+    }
+    default:
+      return String(e);
+  }
+}
+function xt(e, t, n) {
+  const i = e.additional_config?.view_value;
+  if (i?.mode === "api" || i?.mode === "api_ids" || i?.mode === "api_detail")
+    return be(
+      t,
+      i,
+      n.viewValueFetched
+    );
+  switch (e.field?.type?.code) {
+    case "text":
+    case "number":
+      return O(t) ? null : String(t);
+    case "datetime":
+      return Rt(t, e);
+    case "select":
+    case "radio":
+    case "checkbox":
+      return Dt(t, e, n.optionList);
+    case "image":
+    case "file":
+      return kt(t);
+    default:
+      return i ? be(
+        t,
+        i,
+        n.viewValueFetched
+      ) : O(t) ? null : String(t);
+  }
+}
+function Ce(e, t, n = !0) {
+  const i = q(), [a, r] = k(), [s, o] = k(!1), [d, c] = k(), y = I(null), b = E(async () => {
+    if (!n) return;
+    y.current?.abort();
+    const l = new AbortController();
+    y.current = l;
+    const p = ie(e);
+    o(!0), c(void 0);
+    try {
+      const m = await Ae(
+        i,
+        "viewCache",
+        p,
+        t,
+        l.signal
+      );
+      return l.signal.aborted || r(m), m;
+    } catch (m) {
+      throw l.signal.aborted || c(m), m;
+    } finally {
+      l.signal.aborted || o(!1);
+    }
+  }, [e, i, n, t]);
+  return L(() => (n && b(), () => y.current?.abort()), [n, b]), { data: a, isLoading: s, error: d, refetch: b };
+}
+const Pt = ({
+  value: e,
+  code: t,
+  modeConfig: n,
+  viewConfig: i
+}) => {
+  const { client: a, renderers: r, i18n: s } = q(), o = n ?? (i ? Fe(i) : void 0), { data: d, isLoading: c, error: y } = Ce(
+    ["api_view", t, e, o?.url, o?.method, o?.data_path],
+    async (p) => o ? wt(
+      e,
+      o,
+      (m) => a.request(m),
+      p
+    ) : [],
+    !!(e && o?.url)
+  ), b = (p, m, h) => r.link ? r.link({ url: p, label: m, data: h }) : /* @__PURE__ */ f("a", { href: p, target: "_blank", rel: "noreferrer", children: m }), l = (p, m) => {
+    if (!o) return null;
+    const h = Re(p, o), S = ke(p, o), v = S ? b(S, h, p) : h;
+    return /* @__PURE__ */ f("div", { children: v }, p.id ?? m);
+  };
+  return c ? /* @__PURE__ */ f(X, { children: r.viewLoading?.() ?? /* @__PURE__ */ f(We, { size: "small" }) }) : y ? /* @__PURE__ */ f(X, { children: r.viewError?.(y) ?? s.messages.viewError }) : d?.length ? o?.result_type === "object" && d.length === 1 ? l(d[0], 0) : /* @__PURE__ */ f(we, { vertical: !0, children: d.map(l) }) : /* @__PURE__ */ f(X, { children: r.viewEmpty?.() ?? s.messages.viewEmpty });
+}, J = P(Pt);
+function Mt(e) {
+  return !!(e.option_config && e.is_option_api);
+}
+function Tt(e) {
+  return e === "api" || e === "api_ids" || e === "api_detail";
+}
+function Lt(e, t) {
+  const n = q(), i = ie([
+    "viewModeOptions",
+    e.map((r) => r.code),
+    t
+  ]), { data: a } = Ce(
+    [i],
+    async (r) => {
+      const s = {};
+      return await Promise.all(
+        e.map(async (o) => {
+          if (!o.option_config?.url) return;
+          const d = St(o, t), c = o.option_config.method?.toUpperCase() === "GET" || !o.option_config.method, y = await n.client.request({
+            method: o.option_config.method || "GET",
+            url: o.option_config.url,
+            params: c ? d?.params : void 0,
+            data: c ? void 0 : d?.data,
+            signal: r
+          });
+          s[o.code] = {
+            optionList: n.parsers.optionResponse(y.data, o)
+          };
+        })
+      ), s;
+    },
+    e.length > 0
+  );
+  return a ?? {};
+}
+const Yt = ({
+  formConfig: e,
+  formValues: t
+}) => {
+  const n = e?.form?.field_groups ?? [], i = x(
+    () => n.filter(Mt),
+    [n]
+  ), a = Lt(i, t);
+  return x(() => n.filter((s) => !s.is_hidden).map((s) => {
+    const o = t?.[s.code], d = s.additional_config?.view_value, c = d?.mode;
+    if (Tt(c) && d)
+      return {
+        key: s.code,
+        label: s.label,
+        rawValue: o,
+        viewValue: /* @__PURE__ */ f(
+          J,
+          {
+            code: s.code,
+            value: o,
+            viewConfig: d
+          }
+        ),
+        field_group: s
+      };
+    const y = a[s.code] ?? {};
+    return {
+      key: s.code,
+      label: s.label,
+      rawValue: o,
+      viewValue: xt(s, o, y),
+      field_group: s
+    };
+  }), [a, n, t]);
+}, jt = ({
+  code: e,
+  value: t,
+  fieldGroup: n
+}) => {
+  const i = n?.additional_config?.view_value;
+  switch (i?.mode) {
+    case "raw":
+      return t;
+    case "api":
+    case "api_ids":
+    case "api_detail":
+      return /* @__PURE__ */ f(J, { code: e, value: t, viewConfig: i });
+    default:
+      return t;
+  }
+}, Jt = P(jt), Vt = ({ value: e, code: t, modeConfig: n }) => /* @__PURE__ */ f(
+  J,
+  {
+    code: t,
+    value: e,
+    viewConfig: n ? { mode: "api_ids", api_ids: n } : void 0
+  }
+), Qt = P(Vt), Ot = ({ value: e, code: t, modeConfig: n }) => /* @__PURE__ */ f(
+  J,
+  {
+    code: t,
+    value: e,
+    viewConfig: n ? { mode: "api_detail", api_detail: n } : void 0
+  }
+), Xt = P(Ot), Ee = {
+  submit: "Save",
+  submitError: "Failed to submit form",
+  inputPlaceholder: (e) => `Enter ${e}`,
+  selectPlaceholder: (e) => `Select ${e}`,
+  optionLoading: "Loading...",
+  optionError: "Failed to load options",
+  uploadError: "Upload failed",
+  viewLoading: "Loading...",
+  viewEmpty: "-",
+  viewError: "Failed to load"
+}, Zt = {
+  messages: Ee
+}, qt = (e) => {
+  if (Array.isArray(e)) return e;
+  if (e && typeof e == "object" && "items" in e && Array.isArray(e.items))
+    return e.items;
+  if (e && typeof e == "object" && "data" in e && e.data && typeof e.data == "object" && "items" in (e.data ?? {})) {
+    const t = e.data;
+    return Array.isArray(t.items) ? t.items : [];
+  }
+  return [];
+}, Ut = (e) => ({
+  redirectUrl: e?.redirect_after_create,
+  data: e
+}), It = (e, t) => t?.dataPath ? W(e, t.dataPath) : e, Z = {
+  optionResponse: qt,
+  submitResponse: Ut,
+  viewResponse: It
+}, Wt = (e, t = "_blank") => {
+  window.open(e, t);
+}, ee = {
+  upload: async () => {
+    throw new Error("Upload adapter is not configured");
+  },
+  remove: async () => !1
+};
+function en({
+  children: e,
+  client: t,
+  upload: n,
+  i18n: i,
+  parsers: a,
+  renderers: r = {},
+  transformers: s = {},
+  cache: o,
+  submitDebounceMs: d = 200,
+  redirectHandler: c,
+  // legacy props
+  requestClient: y,
+  uploadAdapter: b,
+  deleteUploadAdapter: l,
+  messages: p,
+  optionResponseParser: m,
+  customFieldRenderers: h
+}) {
+  const S = I(/* @__PURE__ */ new Map()), v = I(/* @__PURE__ */ new Map()), g = x(() => {
+    const u = t ?? {
+      request: y ?? (() => {
+        throw new Error("DynamicFormProvider requires client or requestClient");
+      })
+    }, A = h ? Object.entries(h).map(([F, R]) => ({
+      match: F,
+      render: R
+    })) : [], w = {
+      ...Ee,
+      ...i?.messages,
+      ...p
+    }, _ = {
+      ...ee,
+      ...n,
+      upload: n?.upload ?? b ?? ee.upload,
+      remove: n?.remove ?? (l ? (F) => l(F.path) : ee.remove)
+    };
+    return {
+      client: u,
+      upload: _,
+      i18n: { messages: w },
+      parsers: {
+        optionResponse: a?.optionResponse ?? m ?? Z.optionResponse,
+        submitResponse: a?.submitResponse ?? Z.submitResponse,
+        viewResponse: a?.viewResponse ?? Z.viewResponse
+      },
+      renderers: {
+        ...r,
+        fields: [...r.fields ?? [], ...A]
+      },
+      transformers: s,
+      cache: {
+        enabled: o?.enabled ?? !0,
+        ttlMs: o?.ttlMs ?? 6e4
+      },
+      submitDebounceMs: d,
+      redirectHandler: c ?? Wt,
+      optionCache: S.current,
+      viewCache: v.current
+    };
+  }, [
+    t,
+    y,
+    n,
+    b,
+    l,
+    i?.messages,
+    p,
+    a?.optionResponse,
+    a?.submitResponse,
+    a?.viewResponse,
+    m,
+    r,
+    h,
+    s,
+    o?.enabled,
+    o?.ttlMs,
+    d,
+    c
+  ]);
+  return /* @__PURE__ */ f(te.Provider, { value: g, children: e });
+}
+function tn(e) {
+  return {
+    request: async (t) => ({ data: (await e({
+      method: t.method,
+      url: t.url,
+      params: t.params,
+      data: t.data,
+      signal: t.signal,
+      headers: t.headers,
+      onUploadProgress: t.onUploadProgress
+    })).data })
+  };
+}
+export {
+  Xt as ApiDetailItem,
+  Qt as ApiItem,
+  J as ApiViewItem,
+  ht as DefaultLayout,
+  vt as DynamicForm,
+  en as DynamicFormProvider,
+  pt as FormItem,
+  Jt as MetaItemValue,
+  gt as buildApiViewRequests,
+  ie as buildCacheKey,
+  Ae as cachedRequest,
+  tn as createAxiosDynamicFormClient,
+  ne as debounce,
+  Zt as defaultI18n,
+  Ee as defaultMessages,
+  qt as defaultOptionResponseParser,
+  Z as defaultParsers,
+  Wt as defaultRedirectHandler,
+  Ut as defaultSubmitResponseParser,
+  It as defaultViewResponseParser,
+  lt as extractDependencyFields,
+  De as extractViewData,
+  wt as fetchApiViewItems,
+  ct as fillTemplate,
+  W as getByPath,
+  at as getCached,
+  Re as getMappedLabel,
+  ke as getMappedLink,
+  O as isEmptyValue,
+  Ye as mapOptionToSelectItem,
+  Je as mapOptions,
+  Fe as normalizeApiViewConfig,
+  Nt as normalizeMetaForForm,
+  st as parseFormValues,
+  j as replaceTemplateInObject,
+  St as resolveApiOptionMeta,
+  ze as resolveFieldRenderer,
+  Ne as resolveFieldRendererFromMap,
+  xt as resolveFieldViewValue,
+  be as resolveViewValueConfig,
+  rt as setCache,
+  Ce as useCachedViewRequest,
+  dt as useDependencyValues,
+  it as useDynamicField,
+  q as useDynamicFormContext,
+  zt as useDynamicFormContextOptional,
+  ut as useDynamicOptions,
+  yt as useFieldGroups,
+  bt as useFieldStates,
+  _t as useProcessedValues,
+  Yt as useViewMode
+};