@unicom-cloud/ui 0.8.106 → 0.8.108

package/form/FormItem.js

@@ -1,43 +1,42 @@
-import { jsx as i, jsxs as E, Fragment as ae } from "react/jsx-runtime";
-import U, { forwardRef as me, useContext as F, useState as W, useRef as de, useEffect as ce, useMemo as _, createElement as z, cloneElement as H } from "react";
-import pe from "lodash/isArray";
-import ue from "lodash/isFunction";
-import h from "lodash/isPlainObject";
+import { jsx as i, jsxs as q, Fragment as ie } from "react/jsx-runtime";
+import W, { forwardRef as ae, useContext as F, useState as _, useRef as me, useEffect as de, useMemo as z, createElement as H, cloneElement as K } from "react";
+import ce from "lodash/isArray";
+import pe from "lodash/isFunction";
+import C from "lodash/isPlainObject";
 import x from "lodash/isUndefined";
 import "../config-provider/ConfigProvider.js";
-import "../grid/index.js";
-import fe from "../components/common/hooks/useMergeProps.js";
+import ue from "../components/common/hooks/useMergeProps.js";
+import fe from "../row-col/index.js";
 import { PqbCSSTransition as be } from "../components/common/utils/PqbCSSTransition.js";
-import C from "@unicom-cloud/utils/class-name";
-import { omit as ge } from "../components/common/utils/omit.js";
-import $ from "./Control.js";
-import he from "./FormLabel.js";
-import { FormItemContext as K, FormListContext as Ce, FormContext as B } from "./context.js";
-import { VALIDATE_STATUS as k } from "./interface.js";
+import S from "@unicom-cloud/utils/class-name";
+import { omit as he } from "../components/common/utils/omit.js";
+import I from "./Control.js";
+import ge from "./FormLabel.js";
+import { FormItemContext as B, FormListContext as Ce, FormContext as G } from "./context.js";
+import { VALIDATE_STATUS as T } from "./interface.js";
 import { formatValidateMsg as xe } from "./util.js";
 import ye from "../config-provider/context.js";
-import ve from "../grid/Row.js";
-import G from "../grid/Col.js";
-const we = ({
-  prefixCls: f,
-  help: b,
+import J from "../row-col/Col.js";
+const ve = ({
+  prefixCls: b,
+  help: h,
   errors: e,
-  warnings: I
+  warnings: N
 }) => {
-  const g = e.map((p, d) => {
-    if (p)
-      return /* @__PURE__ */ i("div", { role: "alert", children: p.message }, d);
-  }), c = [];
-  I.map((p, d) => {
-    c.push(
-      /* @__PURE__ */ i("div", { role: "alert", className: `${f}-message-help-warning`, children: p }, d)
+  const g = e.map((u, d) => {
+    if (u)
+      return /* @__PURE__ */ i("div", { role: "alert", children: u.message }, d);
+  }), p = [];
+  N.map((u, d) => {
+    p.push(
+      /* @__PURE__ */ i("div", { role: "alert", className: `${b}-message-help-warning`, children: u }, d)
     );
   });
-  const y = !x(b) || !!c.length, u = y || !!g.length;
-  return u && /* @__PURE__ */ i(
+  const y = !x(h) || !!p.length, f = y || !!g.length;
+  return f && /* @__PURE__ */ i(
     be,
     {
-      in: u,
+      in: f,
       appear: !0,
       classNames: "formblink",
       timeout: 300,
@@ -45,109 +44,96 @@ const we = ({
       children: /* @__PURE__ */ i(
         "div",
         {
-          className: C(`${f}-message`, {
-            [`${f}-message-help`]: y
+          className: S(`${b}-message`, {
+            [`${b}-message-help`]: y
           }),
-          children: x(b) ? /* @__PURE__ */ E(ae, { children: [
+          children: x(h) ? /* @__PURE__ */ q(ie, { children: [
             g.length > 0 && g,
-            c.length > 0 && c
-          ] }) : b
+            p.length > 0 && p
+          ] }) : h
         }
       )
     }
   );
-}, Fe = {
+}, we = {
   trigger: "onChange",
   triggerPropName: "value"
-}, $e = (f, b) => {
-  const e = fe(f, Fe), { getPrefixCls: I, prefixCls: g } = F(ye), c = F(K), y = F(Ce), [u, p] = W(null), [d, T] = W(null), r = F(B), l = r.prefixCls || I?.("form"), q = e.layout || r.layout, J = e.labelAlign || r.labelAlign, N = de(!1), A = !e.labelCol && !r.labelCol, D = !e.wrapperCol && !r.wrapperCol, Q = (n, t = {}) => {
-    if (N.current)
+}, $e = (b, h) => {
+  const e = ue(b, we), { getPrefixCls: N, prefixCls: g } = F(ye), p = F(B), y = F(Ce), [f, u] = _(null), [d, A] = _(null), r = F(G), c = r.prefixCls || N?.("form"), l = `${c}-item`, D = e.layout || r.layout, Q = e.labelAlign || r.labelAlign, P = me(!1), L = !e.labelCol && !r.labelCol, M = !e.wrapperCol && !r.wrapperCol, X = (n, o = {}) => {
+    if (P.current)
       return;
-    const { errors: m, warnings: s } = t || {};
-    p((o) => {
-      const a = { ...o || {} };
+    const { errors: m, warnings: s } = o || {};
+    u((t) => {
+      const a = { ...t || {} };
       return m ? a[n] = m : delete a[n], a;
-    }), T((o) => {
-      const a = { ...o || {} };
+    }), A((t) => {
+      const a = { ...t || {} };
       return s && s.length ? a[n] = s : delete a[n], a;
     });
-  }, X = h(e.noStyle) && e.noStyle.showErrorTip && c.updateFormItem ? c.updateFormItem : Q;
-  ce(() => (N.current = !1, () => {
-    N.current = !0, p(null), T(null);
+  }, Y = C(e.noStyle) && e.noStyle.showErrorTip && p.updateFormItem ? p.updateFormItem : X;
+  de(() => (P.current = !1, () => {
+    P.current = !0, u(null), A(null);
   }), []);
-  const Y = {
+  const Z = {
     ...r,
     validateMessages: r.validateMessages && xe(r.validateMessages, {
       label: e.label
     }),
-    prefixCls: l,
-    updateFormItem: X,
+    prefixCls: c,
+    updateFormItem: Y,
     disabled: "disabled" in e ? e.disabled : r.disabled
-  }, { label: L, extra: M, className: Z, style: ee, validateStatus: v, hidden: re, ...te } = e, oe = C(`${l}-label-item`, {
-    [`${l}-label-item-left`]: J === "left"
-  }), j = u ? Object.values(u) : [], S = d ? Object.values(d).reduce((n, t) => n.concat(t), []) : [], w = _(() => {
-    if (v)
-      return v;
-    if (j.length)
-      return k.error;
-    if (S.length)
-      return k.warning;
-  }, [u, d, v]), V = _(() => !x(e.help) || S.length > 0, [e.help, d]), le = C(
-    `${l}-item`,
-    {
-      [`${l}-item-error`]: V || !v && w === k.error,
-      [`${l}-item-status-${w}`]: w,
-      [`${l}-item-has-help`]: V,
-      [`${l}-item-hidden`]: re,
-      [`${l}-item-has-feedback`]: w && e.hasFeedback
-    },
-    `${l}-layout-${q}`,
-    Z
-  ), O = () => {
-    const { field: n, children: t } = e, m = "disabled" in e ? e.disabled : r.disabled;
-    if (ue(t)) {
-      const { key: s, ...o } = e ?? {};
-      return /* @__PURE__ */ z(
-        $,
+  }, { label: v, extra: j, className: ee, style: re, validateStatus: w, hidden: oe, ...te } = e, V = f ? Object.values(f) : [], k = d ? Object.values(d).reduce((n, o) => n.concat(o), []) : [], $ = z(() => {
+    if (w)
+      return w;
+    if (V.length)
+      return T.error;
+    if (k.length)
+      return T.warning;
+  }, [f, d, w]), O = z(() => !x(e.help) || k.length > 0, [e.help, d]), R = () => {
+    const { field: n, children: o } = e, m = "disabled" in e ? e.disabled : r.disabled;
+    if (pe(o)) {
+      const { key: s, ...t } = e ?? {};
+      return /* @__PURE__ */ H(
+        I,
         {
           disabled: m,
-          ...o,
+          ...t,
           key: n || s,
           _key: n || s
         },
-        (...a) => t(
+        (...a) => o(
           ...a
         )
       );
     }
-    if (pe(t)) {
-      const s = U.Children.map(t, (o, a) => {
-        const R = h(o) && o.key || a, se = h(o) && "disabled" in o.props, ie = !x(m) && !se ? { key: R, disabled: m } : { key: R };
-        return h(o) ? H(o, ie) : o;
+    if (ce(o)) {
+      const s = W.Children.map(o, (t, a) => {
+        const U = C(t) && t.key || a, ne = C(t) && "disabled" in t.props, se = !x(m) && !ne ? { key: U, disabled: m } : { key: U };
+        return C(t) ? K(t, se) : t;
       });
-      return /* @__PURE__ */ i($, { ...e, field: void 0, children: s });
+      return /* @__PURE__ */ i(I, { ...e, field: void 0, children: s });
     }
-    if (U.Children.count(t) == 1) {
+    if (W.Children.count(o) == 1) {
       if (n) {
         const s = y?.getItemKey?.(n) || n;
-        return /* @__PURE__ */ z($, { disabled: m, ...e, key: s, _key: s }, t);
+        return /* @__PURE__ */ H(I, { disabled: m, ...e, key: s, _key: s }, o);
       }
-      if (h(t)) {
-        if (t.type?.isFormControl)
-          return t;
-        const o = !("disabled" in t.props) && !x(m) ? { disabled: m } : null;
-        return /* @__PURE__ */ i($, { ...e, field: void 0, children: o ? H(t, o) : t });
+      if (C(o)) {
+        if (o.type?.isFormControl)
+          return o;
+        const t = !("disabled" in o.props) && !x(m) ? { disabled: m } : null;
+        return /* @__PURE__ */ i(I, { ...e, field: void 0, children: t ? K(o, t) : o });
       }
     }
-    return t;
-  }, ne = K, P = {
+    return o;
+  }, le = B, E = {
     ...r
   };
-  return e.noStyle || (P.wrapperCol = void 0, P.labelCol = void 0), /* @__PURE__ */ i(B.Provider, { value: P, children: /* @__PURE__ */ i(ne.Provider, { value: Y, children: e.noStyle ? O() : /* @__PURE__ */ E(
-    ve,
+  return e.noStyle || (E.wrapperCol = void 0, E.labelCol = void 0), /* @__PURE__ */ i(G.Provider, { value: E, children: /* @__PURE__ */ i(le.Provider, { value: Z, children: e.noStyle ? R() : /* @__PURE__ */ q(
+    fe,
     {
-      ref: b,
-      ...ge(te, [
+      ref: h,
+      ...he(te, [
         "tooltip",
         "children",
         "prefixCls",
@@ -177,29 +163,43 @@ const we = ({
         "requiredSymbol",
         "isFormList"
       ]),
-      className: le,
-      div: q !== "horizontal",
-      style: ee,
+      className: S(
+        l,
+        {
+          [`${l}-error`]: O || !w && $ === T.error,
+          [`${l}-status-${$}`]: $,
+          [`${l}-has-help`]: O,
+          [`${l}-hidden`]: oe,
+          [`${l}-has-feedback`]: $ && e.hasFeedback
+        },
+        `${c}-layout-${D}`,
+        v ? `${l}-has-label` : `${l}-no-label`,
+        ee
+      ),
+      div: D !== "horizontal",
+      style: re,
       children: [
-        L ? /* @__PURE__ */ i(
-          G,
+        !!v && /* @__PURE__ */ i(
+          J,
           {
-            className: C(
-              oe,
+            className: S(
+              `${l}-label`,
+              `${c}-label-item`,
               e.labelCol?.className,
               r.labelCol?.className,
               {
-                [`${l}-label-item-flex`]: A
+                [`${c}-label-item-left`]: Q === "left",
+                [`${c}-label-item-flex`]: L
               }
             ),
-            flex: A ? 0 : void 0,
+            flex: L ? 0 : void 0,
             ...e.labelCol || r.labelCol,
             children: /* @__PURE__ */ i(
-              he,
+              ge,
               {
                 tooltip: e.tooltip,
                 htmlFor: e.field && r?.getFormElementId?.(e.field),
-                label: L,
+                label: v,
                 prefix: g,
                 requiredSymbol: "requiredSymbol" in e ? e.requiredSymbol : r.requiredSymbol,
                 required: e.required,
@@ -208,35 +208,39 @@ const we = ({
               }
             )
           }
-        ) : null,
-        /* @__PURE__ */ E(
-          G,
+        ),
+        /* @__PURE__ */ q(
+          J,
           {
-            className: C(`${l}-item-wrapper`, {
-              [`${l}-item-wrapper-flex`]: D
-            }),
-            flex: D ? 1 : void 0,
+            className: S(
+              `${l}-wrapper`,
+              {
+                [`${l}-wrapper-flex`]: M
+              },
+              v ? `${l}-wrapper-has-label` : `${l}-wrapper-no-label`
+            ),
+            flex: M ? 1 : void 0,
             ...e.wrapperCol || r.wrapperCol,
             children: [
-              O(),
+              R(),
               /* @__PURE__ */ i(
-                we,
+                ve,
                 {
-                  prefixCls: l,
+                  prefixCls: c,
                   help: e.help,
-                  errors: j,
-                  warnings: S
+                  errors: V,
+                  warnings: k
                 }
               ),
-              M && /* @__PURE__ */ i("div", { className: `${l}-extra`, children: M })
+              j && /* @__PURE__ */ i("div", { className: `${c}-extra`, children: j })
             ]
           }
         )
       ]
     }
   ) }) });
-}, Ie = me($e);
-Ie.displayName = "FormItem";
+}, Fe = ae($e);
+Fe.displayName = "FormItem";
 export {
-  Ie as default
+  Fe as default
 };

package/grid/Grid.js

@@ -1,108 +1,74 @@
-import { jsx as i } from "react/jsx-runtime";
-import A from "lodash/get";
-import B from "lodash/isArray";
-import n from "lodash/isNil";
-import g, { forwardRef as Q, useState as V, useContext as k } from "react";
+import { jsx as x } from "react/jsx-runtime";
+import O from "lodash/isArray";
+import f from "lodash/isNil";
+import { forwardRef as _, useContext as A } from "react";
 import "../config-provider/ConfigProvider.js";
-import q from "../components/common/hooks/useMergeProps.js";
-import z from "@unicom-cloud/utils/class-name";
-import { GridDataCollectorContext as F, GridContext as H } from "./context.js";
-import { useResponsiveState as m } from "./hook/useResponsiveState.js";
-import { setItemVisible as J } from "./util.js";
-import K from "../config-provider/context.js";
-const O = {
-  collapsed: !1,
-  collapsedRows: 1,
-  cols: 24,
+import { COLS as g } from "../constant/index.js";
+import L from "../components/common/hooks/useMergeProps.js";
+import { useResponsiveState as c } from "../hooks/useResponsiveState.js";
+import M from "@unicom-cloud/utils/class-name";
+import "../components/common/utils/is.js";
+import { GridContext as k } from "./context.js";
+import q from "../config-provider/context.js";
+import { isString as z, isNumber as d, isPlainObject as B } from "@unicom-cloud/utils/is";
+const D = {
+  cols: g,
   gap: 0
 };
-function U(w, _) {
-  const [o, c] = V(
-    /* @__PURE__ */ new Map()
-  ), { getPrefixCls: I, componentConfig: N, rtl: D } = k(K), v = q(
-    w,
-    O,
-    N?.Grid
+function E(u, C) {
+  const { getPrefixCls: N, componentConfig: P, rtl: y } = A(q), G = N?.("grid"), $ = L(
+    u,
+    D,
+    P?.Grid
   ), {
-    children: y,
-    className: R,
-    style: M,
-    cols: P,
-    gap: t,
-    colGap: f,
-    rowGap: d,
-    collapsed: G,
-    collapsedRows: $
-  } = v;
-  let r, a;
-  const L = n(t), h = n(d), S = n(f);
-  L || (B(t) ? (r = t[0], a = t[1] ?? t[0]) : r = a = t), h || (r = d), S || (a = f);
-  const l = m(P, 24), u = m(a, 0), E = {
-    gap: `${m(r, 0)}px ${u}px`,
-    gridTemplateColumns: `repeat(${l}, minmax(0px, 1fr))`
-  }, x = I?.("grid"), T = {
-    [`${x}`]: !0,
-    [`${x}-rtl`]: D
-  }, b = z(T, R), j = (() => {
-    const e = [];
-    for (const [s, p] of o.entries())
-      e[s] = p;
-    return e;
-  })(), C = J({
-    cols: l,
-    collapsed: G,
-    collapsedRows: $,
-    itemDataList: j
-  });
-  return /* @__PURE__ */ i(
+    style: w,
+    className: v,
+    children: S,
+    cols: R,
+    gap: r,
+    colGap: l,
+    rowGap: m
+  } = $;
+  let i = m, t = l;
+  const T = f(r), b = f(m), h = f(l);
+  T || (O(r) ? (i = r[0], t = r[1] ?? r[0]) : i = t = r), b || (i = m), h || (t = l);
+  const o = c(R, g), a = c(i, 0), n = c(t, 0), e = {};
+  if (a && (e.rowGap = a), n && (e.columnGap = n), z(o))
+    e.gridTemplateColumns = o;
+  else if (d(o))
+    e.gridTemplateColumns = `repeat(${o}, minmax(0px, 1fr))`;
+  else if (B(o) && "type" in o) {
+    const j = o.type;
+    let s = o.max ?? "1fr";
+    d(s) && (s = `${s}px`);
+    let p = o.min ?? "0px";
+    d(p) && (p = `${p}px`), e.gridTemplateColumns = `repeat(${j}, minmax(${p}, ${s}))`;
+  }
+  return /* @__PURE__ */ x(
     "div",
     {
-      ref: _,
-      className: b,
+      ref: C,
+      className: M(G, y && `${G}-rtl`, v),
       style: {
-        ...E,
-        ...M
+        ...e,
+        ...w
       },
-      children: /* @__PURE__ */ i(
-        F.Provider,
+      children: /* @__PURE__ */ x(
+        k.Provider,
         {
           value: {
-            collectItemData(e, s) {
-              o.set(e, s), c(new Map([...o]));
-            },
-            removeItemData(e) {
-              o.delete(e), c(new Map([...o]));
-            }
+            cols: o,
+            rowGap: a,
+            colGap: n
           },
-          children: /* @__PURE__ */ i(
-            H.Provider,
-            {
-              value: {
-                cols: l,
-                colGap: u,
-                collapsed: G,
-                overflow: C.overflow,
-                displayIndexList: C.displayIndexList
-              },
-              children: g.Children.map(y, (e, s) => {
-                if (e) {
-                  const p = {
-                    __index__: s,
-                    ...e.props
-                  };
-                  return g.cloneElement(e, p);
-                }
-                return null;
-              }).filter((e) => A(e, "type.__PQB_GRID_ITEM__"))
-            }
-          )
+          children: S
         }
       )
     }
   );
 }
-const W = Q(U);
-W.displayName = "Grid";
+const F = _(E);
+F.displayName = "Grid";
 export {
-  W as default
+  F as default
 };

package/grid/Item.js

@@ -1,76 +1,55 @@
-import { jsx as O } from "react/jsx-runtime";
-import Q from "lodash/isFunction";
-import T from "lodash/isString";
-import m, { forwardRef as V, useContext as p, useMemo as c, useEffect as k } from "react";
+import { jsx as S } from "react/jsx-runtime";
+import { forwardRef as v, useContext as i } from "react";
 import "../config-provider/ConfigProvider.js";
-import q from "../components/common/hooks/useMergeProps.js";
-import z from "@unicom-cloud/utils/class-name";
-import { GridContext as A, GridDataCollectorContext as H } from "./context.js";
-import { useResponsiveState as C } from "./hook/useResponsiveState.js";
-import { resolveItemData as J } from "./util.js";
-import K from "../config-provider/context.js";
-const U = {
-  suffix: !1,
-  offset: 0,
-  span: 1
-};
-function W($, g) {
-  const { getPrefixCls: _, componentConfig: y, rtl: S } = p(K), a = q(
-    $,
-    U,
-    y?.["Grid.Item"]
+import R from "../components/common/hooks/useMergeProps.js";
+import { useResponsiveState as a } from "../hooks/useResponsiveState.js";
+import b from "@unicom-cloud/utils/class-name";
+import "../components/common/utils/is.js";
+import { GridContext as h } from "./context.js";
+import { resolveItemData as j } from "./util.js";
+import w from "../config-provider/context.js";
+import { isNumber as t } from "@unicom-cloud/utils/is";
+function D(c, l) {
+  const { getPrefixCls: d, componentConfig: u, rtl: C } = i(w), n = d?.("grid-item"), x = R(
+    c,
+    {
+      offset: 0,
+      span: 1
+    },
+    u?.GridItem
   ), {
-    children: i,
-    className: G,
-    style: v,
-    offset: N,
-    span: D,
-    __index__: s
-  } = a, n = p(A), { collectItemData: R, removeItemData: E } = p(
-    H
-  ), { colGap: f, cols: l, displayIndexList: P, overflow: u } = n, d = C(N, 0), r = C(D, 1), x = _?.("grid-item"), w = P?.includes(s), M = {
-    [`${x}`]: !0,
-    [`${x}-rtl`]: S
-  }, b = z(M, G), e = c(() => J(n.cols, {
-    suffix: !!a.suffix,
-    span: r,
-    offset: d
-  }), [n.cols, a.suffix, r, d]);
-  k(() => (R(s, e), () => {
-    E(s);
-  }), [s, e]);
-  const F = c(() => {
-    const { offset: t, span: o } = e;
-    return t > 0 ? {
-      marginLeft: `calc((${`(100% - ${f * (o - 1)}px) / ${o}`} * ${t}) + ${f * t}px)`
-    } : {};
-  }, [e, f]), L = c(() => {
-    const { suffix: t, span: o } = e;
-    return t ? `${l - o + 1}` : `span ${o}`;
-  }, [e, l]), j = !w || r === 0 ? { display: "none" } : {}, B = {
-    gridColumn: `${L} / span ${r}`,
-    ...F,
-    ...j
-  };
-  return /* @__PURE__ */ O(
+    style: $,
+    className: g,
+    children: N,
+    offset: P,
+    span: m,
+    order: p
+  } = x, { colGap: e, cols: f } = i(h), G = a(P, 0), y = a(m, 1), { span: s, offset: r } = t(f) ? j(f, {
+    span: y,
+    offset: G
+  }) : {}, o = {};
+  if (t(p) && (o.order = p), t(s)) {
+    if (o.gridColumnStart = `span ${s}`, t(e) && t(r) && r > 0) {
+      const I = `(100% - ${e * (s - 1)}px) / ${s}`;
+      o.marginLeft = `calc(${I} * ${r} + ${e * r}px)`;
+    }
+    o.gridColumnEnd = `span ${m}`;
+  }
+  return /* @__PURE__ */ S(
     "div",
     {
-      ref: g,
-      className: b,
+      ref: l,
       style: {
-        ...B,
-        ...v
+        ...o,
+        ...$
       },
-      children: Q(i) ? i({ overflow: u }) : m.Children.map(i, (t) => t && n.collapsed && m.isValidElement(t) && !T(t.type) ? m.cloneElement(t, {
-        overflow: u,
-        ...t.props
-      }) : t)
+      className: b(n, C && `${n}-rtl`, g),
+      children: N
     }
   );
 }
-const X = V(W), I = X;
-I.displayName = "Grid.Item";
-I.__PQB_GRID_ITEM__ = !0;
+const E = v(D);
+E.displayName = "Grid.Item";
 export {
-  I as default
+  E as default
 };

package/grid/context.js

@@ -1,9 +1,5 @@
 import { createContext as t } from "react";
-const e = t({}), n = t({}), r = t(
-  {}
-);
+const e = t({});
 export {
-  n as GridContext,
-  r as GridDataCollectorContext,
-  e as RowContext
+  e as GridContext
 };