@para-ui/core 5.0.1 → 5.0.3-beta.8

package/es/FieldForm/FieldFormItem/ItemHolder.js

@@ -1,95 +1,105 @@
 import { j as t } from "../../_virtual/jsx-runtime.js";
-import { useContext as M, useMemo as N, useRef as R, useState as V } from "react";
-import W from "../../_virtual/index.js";
-import _ from "rc-util/lib/Dom/isVisible";
-import q from "rc-util/lib/hooks/useLayoutEffect";
-import { FormContext as A, NoStyleItemContext as O } from "../context.js";
-import T from "../FormItemLabel.js";
-import k from "../FormItemInput.js";
-import z from "./StatusProvider.js";
-function te(a) {
+import { useContext as q, useMemo as I, useRef as A, useState as D } from "react";
+import O from "../../_virtual/index.js";
+import T from "rc-util/lib/Dom/isVisible";
+import k from "rc-util/lib/hooks/useLayoutEffect";
+import { FormContext as z, NoStyleItemContext as G } from "../context.js";
+import J from "../FormItemLabel.js";
+import K from "../FormItemInput.js";
+import Q from "./StatusProvider.js";
+function ne(l) {
   const {
-    className: h,
-    style: g,
-    helperText: s,
+    className: S,
+    style: C,
+    helperText: i,
     errors: m,
-    warnings: u,
+    warnings: c,
     status: e,
-    hidden: x,
-    children: b,
+    hidden: j,
+    children: v,
     fieldId: r,
-    required: y,
-    onSubItemMetaChange: I,
-    layout: c,
-    hideLabel: S,
-    hideError: j,
-    noSpacing: v,
-    label: C,
-    labelProps: E,
-    labelAlign: L,
-    colon: P,
-    labelWidth: $,
-    labelWrap: w
-  } = a, { prefixCls: i, layout: d } = M(A), n = N(() => c ?? d, [c, d]), o = R(null), f = !!(s != null || m.length || u.length), B = !!o.current && _(o.current), [F, p] = V(null);
-  q(() => {
-    if (f && o.current) {
-      const l = getComputedStyle(o.current);
-      p(parseInt(l.marginBottom, 10));
+    required: E,
+    identityMeta: u,
+    onSubItemMetaChange: L,
+    layout: d,
+    hideLabel: $,
+    hideError: M,
+    noSpacing: N,
+    spacing: p,
+    label: P,
+    labelProps: w,
+    labelAlign: B,
+    colon: F,
+    labelWidth: H,
+    labelWrap: R
+  } = l, { prefixCls: s, layout: f, spacing: g, itemDecorator: h } = q(z), n = I(() => d ?? f, [d, f]), x = I(() => p ?? g, [p, g]), o = A(null), b = !!(i != null || m.length || c.length), V = !!o.current && T(o.current), [W, y] = D(null);
+  k(() => {
+    if (b && o.current) {
+      const a = getComputedStyle(o.current);
+      y(parseInt(a.marginBottom, 10));
     }
-  }, [f, B]);
-  const H = (l) => {
-    l || p(null);
+  }, [b, V]);
+  const _ = (a) => {
+    a || y(null);
   };
   return /* @__PURE__ */ t.jsx(
-    z,
+    Q,
     {
-      ...a,
-      prefixCls: i,
+      ...l,
+      prefixCls: s,
       children: /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: W(h, `${i}-item`, {
-            [`${i}-item__${r}`]: r,
-            // 状态
-            "is-success": e === "success",
-            "is-warning": e === "warning",
-            "is-error": e === "error",
-            "is-validating": e === "validating",
-            "is-hidden": x,
-            // 布局
-            [`is-${n}`]: n
-          }),
-          style: g,
+          className: O(
+            S,
+            `${s}-item`,
+            {
+              [`${s}-item__${r}`]: r,
+              // 状态
+              "is-success": e === "success",
+              "is-warning": e === "warning",
+              "is-error": e === "error",
+              "is-validating": e === "validating",
+              "is-hidden": j,
+              // 布局
+              [`is-${n}`]: n,
+              // 间距密度
+              [`is-spacing-${x}`]: x
+            },
+            h?.getItemClassName?.(u)
+          ),
+          style: C,
           children: [
             /* @__PURE__ */ t.jsx(
-              T,
+              J,
               {
                 fieldId: r,
-                label: C,
-                labelWidth: $,
-                labelWrap: w,
-                labelAlign: L,
-                colon: P,
-                labelProps: { required: y, ...E },
-                hideLabel: S,
+                label: P,
+                labelWidth: H,
+                labelWrap: R,
+                labelAlign: B,
+                colon: F,
+                labelProps: { required: E, ...w },
+                hideLabel: $,
                 layout: n
               }
             ),
             /* @__PURE__ */ t.jsx(
-              k,
+              K,
               {
                 fieldId: r,
                 errors: m,
-                warnings: u,
+                warnings: c,
                 status: e,
-                helperText: s,
-                marginBottom: F,
-                onErrorVisibleChanged: H,
-                hideError: j,
-                noSpacing: v,
-                children: /* @__PURE__ */ t.jsx(O.Provider, { value: I, children: b })
+                helperText: i,
+                marginBottom: W,
+                onErrorVisibleChanged: _,
+                hideError: M,
+                noSpacing: N,
+                children: /* @__PURE__ */ t.jsx(G.Provider, { value: L, children: v })
               }
-            )
+            ),
+            h?.renderItemExtra?.(u)
           ]
         }
       )
@@ -97,6 +107,6 @@ function te(a) {
   );
 }
 export {
-  te as default
+  ne as default
 };
 //# sourceMappingURL=ItemHolder.js.map

package/es/FieldForm/FieldFormItem/index.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ReactElement, CSSProperties } from 'react';
 import { FieldProps } from 'rc-field-form/lib/Field';
 import { Meta } from 'rc-field-form/lib/interface';
+import { ItemDecoratorMeta } from '../interface';
 import { FormInstance, FormItemLayout } from '../Form';
 import { FormItemInputProps } from '../FormItemInput';
 import { FormItemLabelProps } from '../FormItemLabel';
@@ -35,6 +36,7 @@ export interface FormItemProps<Values = unknown> extends FormItemLabelProps, For
     disabled?: boolean;
     size?: 'small' | 'medium' | 'large';
     noSpacing?: boolean;
+    spacing?: 'normal' | 'compact';
 }
 export interface ItemHolderProps extends FormItemProps {
     errors: ReactNode[];
@@ -44,6 +46,7 @@ export interface ItemHolderProps extends FormItemProps {
     fieldId?: string;
     isRequired?: boolean;
     onSubItemMetaChange: ReportMetaChange;
+    identityMeta: ItemDecoratorMeta;
 }
 declare function InternalFormItem<Values = unknown>(props: FormItemProps<Values>): ReactElement;
 type InternalFormItemType = typeof InternalFormItem;

package/es/FieldForm/FieldFormItem/index.js

@@ -1,16 +1,16 @@
-import { j as g } from "../../_virtual/jsx-runtime.js";
-import { useContext as h, useRef as ae, useMemo as U, isValidElement as W, Children as $, cloneElement as P } from "react";
-import { FieldContext as de, ListContext as le, Field as me } from "rc-field-form";
-import fe from "rc-util/lib/hooks/useState";
-import { supportRef as ue } from "rc-util/lib/ref";
-import ge from "./MemoInput.js";
-import { FormContext as ce, NoStyleItemContext as pe } from "../context.js";
-import he from "../hooks/useChildren.js";
-import ye from "../hooks/useFormItemStatus.js";
-import be from "../hooks/useFrameState.js";
-import Ce from "../hooks/useItemRef.js";
-import { getStatus as Se, toArray as j, getFieldId as Ie, isReactComponent as B } from "../util.js";
-import we from "./ItemHolder.js";
+import { j as u } from "../../_virtual/jsx-runtime.js";
+import { useContext as y, useMemo as T, useRef as le, isValidElement as W, Children as $, cloneElement as j } from "react";
+import { FieldContext as ce, ListContext as fe, Field as ge } from "rc-field-form";
+import ue from "rc-util/lib/hooks/useState";
+import { supportRef as pe } from "rc-util/lib/ref";
+import he from "./MemoInput.js";
+import { FormContext as ye, NoStyleItemContext as be } from "../context.js";
+import Ce from "../hooks/useChildren.js";
+import Ie from "../hooks/useFormItemStatus.js";
+import Se from "../hooks/useFrameState.js";
+import Pe from "../hooks/useItemRef.js";
+import { isCompactControlChild as ve, getStatus as we, toArray as N, joinNamePath as Ee, getFieldId as Fe, isReactComponent as B } from "../util.js";
+import Te from "./ItemHolder.js";
 function G() {
   return {
     errors: [],
@@ -21,147 +21,158 @@ function G() {
     validated: !1
   };
 }
-const ve = "__SPLIT__";
-function Fe(y) {
+const je = "__SPLIT__", Ne = { namePath: [], path: "" };
+function xe(b) {
   const {
-    noStyle: E,
+    noStyle: x,
     shouldUpdate: J,
-    dependencies: x,
-    messageVariables: R,
-    trigger: N = "onChange",
-    validateTrigger: T,
-    children: M,
-    required: b,
-    hidden: Q,
-    rules: X,
+    dependencies: R,
+    messageVariables: _,
+    trigger: q = "onChange",
+    validateTrigger: z,
+    children: Q,
+    required: C,
+    hidden: X,
+    rules: Z,
     name: l,
-    label: q,
-    disabled: C,
+    label: A,
+    disabled: I,
     helperText: S,
-    hasFeedback: z,
-    validateStatus: L,
-    size: I
-  } = y, { name: Y, disabled: w, size: v } = h(ce), n = he(M), V = typeof n == "function", _ = h(pe), { validateTrigger: Z } = h(de), A = T !== void 0 ? T : Z, F = l != null, ee = h(le), K = ae(), [O, re] = be({}), [a, te] = fe(() => G()), ne = (r) => {
-    const i = ee?.getKey(r.name);
-    if (te(r.destroy ? G() : r, !0), E && S !== !1 && _) {
-      let t = r.name;
-      if (r.destroy)
-        t = K.current || t;
-      else if (i !== void 0) {
-        const [s, e] = i;
-        t = [s, ...e], K.current = t;
+    hasFeedback: L,
+    validateStatus: V,
+    size: P,
+    spacing: v
+  } = b, { name: ee, disabled: w, size: E } = y(ye), t = Ce(Q), re = T(
+    () => v === void 0 && ve(t) ? "compact" : void 0,
+    [v, t]
+  ), K = typeof t == "function", M = y(be), { validateTrigger: te } = y(ce), O = z !== void 0 ? z : te, F = l != null, ne = y(fe), k = le(), [D, ie] = Se({}), [a, oe] = ue(() => G()), se = (e) => {
+    const o = ne?.getKey(e.name);
+    if (oe(e.destroy ? G() : e, !0), x && S !== !1 && M) {
+      let n = e.name;
+      if (e.destroy)
+        n = k.current || n;
+      else if (o !== void 0) {
+        const [s, r] = o;
+        n = [s, ...r], k.current = n;
       }
-      _(r, t);
+      M(e, n);
     }
-  }, ie = (r, i) => {
-    re((t) => {
+  }, ae = (e, o) => {
+    ie((n) => {
       const s = {
-        ...t
-      }, f = [...r.name.slice(0, -1), ...i].join(ve);
-      return r.destroy ? delete s[f] : s[f] = r, s;
+        ...n
+      }, i = [...e.name.slice(0, -1), ...o].join(je);
+      return e.destroy ? delete s[i] : s[i] = e, s;
     });
-  }, [c, k] = U(() => {
-    const r = [...a.errors], i = [...a.warnings];
-    return Object.values(O).forEach((t) => {
-      r.push(...t.errors || []), i.push(...t.warnings || []);
-    }), [r, i];
-  }, [O, a.errors, a.warnings]), m = U(
-    () => Se(a.errors, a.warnings, a, "", !!z, L),
-    [a, z, L]
-  ), D = (r, i, t, s) => E && !Q ? /* @__PURE__ */ g.jsx(g.Fragment, { children: $.map(r, (e) => B(e) ? P(e, {
+  }, [p, Y] = T(() => {
+    const e = [...a.errors], o = [...a.warnings];
+    return Object.values(D).forEach((n) => {
+      e.push(...n.errors || []), o.push(...n.warnings || []);
+    }), [e, o];
+  }, [D, a.errors, a.warnings]), c = T(
+    () => we(a.errors, a.warnings, a, "", !!L, V),
+    [a, L, V]
+  ), H = (e, o, n, s, r = Ne) => x && !X ? /* @__PURE__ */ u.jsx(u.Fragment, { children: $.map(e, (i) => B(i) ? j(i, {
     ...s,
     name: l,
-    disabled: C ?? w,
-    error: m === "error" || m === "warning",
-    size: I ?? v,
-    ...e.props
-  }) : e) }) : /* @__PURE__ */ g.jsx(
-    we,
+    disabled: I ?? w,
+    error: c === "error" || c === "warning",
+    size: P ?? E,
+    ...i.props
+  }) : i) }) : /* @__PURE__ */ u.jsx(
+    Te,
     {
-      ...y,
-      fieldId: i,
-      required: b ?? t,
-      errors: c,
-      warnings: k,
-      status: m,
+      ...b,
+      fieldId: o,
+      required: C ?? n,
+      errors: p,
+      warnings: Y,
+      status: c,
       meta: a,
-      onSubItemMetaChange: ie,
-      children: $.map(r, (e) => B(e) ? P(e, {
+      identityMeta: r,
+      onSubItemMetaChange: ae,
+      spacing: v ?? re,
+      children: $.map(e, (i) => B(i) ? j(i, {
         ...s,
         name: l,
-        disabled: C ?? w,
-        error: m === "error" || m === "warning",
-        size: I ?? v,
-        ...e.props
-      }) : e)
+        disabled: I ?? w,
+        error: c === "error" || c === "warning",
+        size: P ?? E,
+        ...i.props
+      }) : i)
     }
   );
-  if (!F && !V && !x)
-    return D(n);
-  let u = {};
-  typeof q == "string" ? u.label = q : l && (u.label = String(l)), R && (u = { ...u, ...R });
-  const se = Ce(), oe = ({ control: r, fieldId: i, isRequired: t, mergedName: s }) => {
-    if (!W(n)) return null;
-    const e = {
-      ...n.props,
-      ...r,
-      disabled: C ?? w,
-      error: m === "error" || m === "warning",
-      size: n.props?.size ?? I ?? v
+  if (!F && !K && !R)
+    return H(t);
+  let g = {};
+  typeof A == "string" ? g.label = A : l && (g.label = String(l)), _ && (g = { ...g, ..._ });
+  const de = Pe(), me = ({
+    control: e,
+    fieldId: o,
+    isRequired: n,
+    mergedName: s
+  }) => {
+    if (!W(t)) return null;
+    const r = {
+      ...t.props,
+      ...e,
+      disabled: I ?? w,
+      error: c === "error" || c === "warning",
+      size: t.props?.size ?? P ?? E
     };
-    if (e.fieldId || (e["data-field-id"] = i), S || c.length > 0 || k.length > 0) {
-      const o = [];
-      (S || c.length > 0) && o.push(`${i}_help`), e["aria-describedby"] = o.join(" ");
+    if (r.fieldId || (r["data-field-id"] = o), S || p.length > 0 || Y.length > 0) {
+      const d = [];
+      (S || p.length > 0) && d.push(`${o}_help`), r["aria-describedby"] = d.join(" ");
     }
-    c.length > 0 && (e["aria-invalid"] = "true"), t && (e["aria-required"] = "true"), ue(n) && (e.ref = se(s, n)), (/* @__PURE__ */ new Set([...j(N), ...j(A)])).forEach((o) => {
-      e[o] = (...d) => {
-        r[o]?.(...d), n.props[o]?.(...d);
+    p.length > 0 && (r["aria-invalid"] = "true"), n && (r["aria-required"] = "true"), pe(t) && (r.ref = de(s, t)), (/* @__PURE__ */ new Set([...N(q), ...N(O)])).forEach((d) => {
+      r[d] = (...m) => {
+        e[d]?.(...m), t.props[d]?.(...m);
       };
     });
-    const p = [
-      e["aria-required"],
-      e["aria-invalid"],
-      e["aria-describedby"]
+    const h = [
+      r["aria-required"],
+      r["aria-invalid"],
+      r["aria-describedby"]
     ];
-    return /* @__PURE__ */ g.jsx(
-      ge,
+    return /* @__PURE__ */ u.jsx(
+      he,
       {
-        control: r,
-        update: n,
-        childProps: p,
-        children: P(n, e)
+        control: e,
+        update: t,
+        childProps: h,
+        children: j(t, r)
       }
     );
   };
-  return /* @__PURE__ */ g.jsx(
-    me,
+  return /* @__PURE__ */ u.jsx(
+    ge,
     {
-      ...y,
-      messageVariables: u,
-      trigger: N,
-      validateTrigger: A,
-      onMetaChange: ne,
-      children: (r, i, t) => {
-        const s = j(l).length && i ? i.name : [], e = Ie(s, Y), f = b !== void 0 ? b : !!X?.some((d) => {
-          if (d && typeof d == "object" && d.required && !d.warningOnly)
+      ...b,
+      messageVariables: g,
+      trigger: q,
+      validateTrigger: O,
+      onMetaChange: se,
+      children: (e, o, n) => {
+        const s = N(l).length && o ? o.name : [], r = { namePath: s, path: Ee(s) }, i = Fe(s, ee), h = C !== void 0 ? C : !!Z?.some((f) => {
+          if (f && typeof f == "object" && f.required && !f.warningOnly)
             return !0;
-          if (typeof d == "function") {
-            const H = d(t);
-            return H?.required && !H?.warningOnly;
+          if (typeof f == "function") {
+            const U = f(n);
+            return U?.required && !U?.warningOnly;
           }
           return !1;
-        }), p = {
-          ...r
+        }), d = {
+          ...e
         };
-        let o = null;
-        return Array.isArray(n) && F ? o = n : W(n) ? o = oe({ control: p, fieldId: e, isRequired: f, mergedName: s }) : V && (J || x) && !F ? o = n(t) : o = n, D(o, e, f, p);
+        let m = null;
+        return Array.isArray(t) && F ? m = t : W(t) ? m = me({ control: d, fieldId: i, isRequired: h, mergedName: s }) : K && (J || R) && !F ? m = t(n) : m = t, H(m, i, h, d, r);
       }
     }
   );
 }
-const Pe = Fe;
-Pe.useStatus = ye;
+const Re = xe;
+Re.useStatus = Ie;
 export {
-  Pe as default
+  Re as default
 };
 //# sourceMappingURL=index.js.map

package/es/FieldForm/Form.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren, RefAttributes, ReactElement, FC, ReactNode } from 'r
 import { useWatch } from 'rc-field-form';
 import { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
 import { FormRef } from 'rc-field-form/lib/interface';
-import { FormLabelAlign } from './interface';
+import { FormLabelAlign, ItemDecorator } from './interface';
 import { FormInstance, default as useForm } from './hooks/useForm';
 import { FeedbackIcons } from './FieldFormItem';
 export type RequiredMark = boolean | 'optional' | ((labelNode: ReactNode, info: {
@@ -22,6 +22,8 @@ export interface FormProps<Values = unknown> extends Omit<RcFormProps<Values>, '
     disabled?: boolean;
     requiredMark?: RequiredMark;
     size?: 'small' | 'medium' | 'large';
+    spacing?: 'normal' | 'compact';
+    itemDecorator?: ItemDecorator;
 }
 declare const FieldForm: (<Values = unknown>(props: PropsWithChildren<FormProps<Values>> & RefAttributes<FormRef<Values>>) => ReactElement) & Pick<FC, "displayName">;
 export { useForm, useWatch, type FormInstance };