@unicom-cloud/ui 0.8.101 → 0.8.103

package/form/FormItem.js

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

package/form/context.js

@@ -1,7 +1,6 @@
 import { createContext as t } from "react";
-import "@unicom-cloud/utils/constant/ui";
 import { NOOP as e } from "../components/common/utils/constant.js";
-const i = t({
+const o = t({
   layout: "horizontal",
   labelCol: { span: 5, offset: 0 },
   labelAlign: "right",
@@ -35,10 +34,10 @@ const i = t({
       innerGetStoreStatus: e
     })
   }
-}), s = t({}), a = t({}), n = t({});
+}), i = t({}), s = t({}), a = t({});
 export {
-  i as FormContext,
-  s as FormItemContext,
-  n as FormListContext,
-  a as FormProviderContext
+  o as FormContext,
+  i as FormItemContext,
+  a as FormListContext,
+  s as FormProviderContext
 };

package/grid/Col-.js

@@ -0,0 +1,86 @@
+import { jsx as E } from "react/jsx-runtime";
+import F from "lodash/isNumber";
+import H from "lodash/isPlainObject";
+import { forwardRef as T, useContext as R, useMemo as q } from "react";
+import "../config-provider/ConfigProvider.js";
+import D from "../components/common/hooks/useMergeProps.js";
+import I from "@unicom-cloud/utils/class-name";
+import { RowContext as J } from "./context.js";
+import K from "../config-provider/context.js";
+const Q = {
+  span: 24
+};
+function S(i) {
+  return typeof i == "string" && /\d+[px|%|em|rem|]{1}/.test(i) ? `0 0 ${i}` : i;
+}
+function U(i, v) {
+  const { getPrefixCls: w, componentConfig: A, rtl: G } = R(K), L = D(
+    i,
+    Q,
+    A?.["Grid.Col"]
+  ), { gutter: p, div: l } = R(J), {
+    className: M,
+    style: N,
+    children: O,
+    span: V,
+    offset: d,
+    order: a,
+    pull: u,
+    push: c,
+    xs: m,
+    sm: g,
+    md: x,
+    lg: y,
+    xl: h,
+    xxl: P,
+    xxxl: b,
+    flex: f,
+    ...k
+  } = L;
+  function z(r, o) {
+    const j = { xs: m, sm: g, md: x, lg: y, xl: h, xxl: P, xxxl: b };
+    return Object.keys(j).forEach((s) => {
+      const t = j[s];
+      F(t) ? t >= 0 && (o[`${r}-${s}-${t}`] = !0) : H(t) && (o[`${r}-${s}-${t.span}`] = t.span, o[`${r}-${s}-offset-${t.offset}`] = t.offset, o[`${r}-${s}-order-${t.order}`] = t.order, o[`${r}-${s}-pull-${t.pull}`] = t.pull, o[`${r}-${s}-push-${t.push}`] = t.push);
+    }), o;
+  }
+  const n = w?.("col");
+  let $ = {
+    [`${n}`]: !l,
+    [`${n}-order-${a}`]: a,
+    [`${n}-${V}`]: !l && !m && !g && !x && !y && !h && !P && !b,
+    [`${n}-offset-${d}`]: d,
+    [`${n}-pull-${u}`]: u,
+    [`${n}-push-${c}`]: c,
+    [`${n}-rtl`]: G
+  };
+  $ = z(n, $);
+  const B = I(f ? n : $, M), e = {};
+  if (Array.isArray(p) && !l) {
+    const r = p[0] && p[0] / 2 || 0, o = p[1] && p[1] / 2 || 0;
+    r && (e.paddingLeft = r, e.paddingRight = r), o && (e.paddingTop = o, e.paddingBottom = o);
+  }
+  const C = q(
+    () => S(f) ? { flex: S(f) } : {},
+    [f]
+  );
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ref: v,
+      ...k,
+      style: {
+        ...N,
+        ...e,
+        ...C
+      },
+      className: B,
+      children: O
+    }
+  );
+}
+const W = T(U);
+W.displayName = "Col";
+export {
+  W as default
+};

package/grid/Col.js

@@ -1,86 +1,169 @@
-import { jsx as E } from "react/jsx-runtime";
-import F from "lodash/isNumber";
-import H from "lodash/isPlainObject";
-import { forwardRef as T, useContext as R, useMemo as q } from "react";
+import { jsx as W } from "react/jsx-runtime";
+import X from "lodash/isNil";
+import M from "lodash/isNumber";
+import B from "lodash/isPlainObject";
+import { forwardRef as Y, useContext as F, useState as Z, useMemo as b, useEffect as _ } from "react";
 import "../config-provider/ConfigProvider.js";
-import D from "../components/common/hooks/useMergeProps.js";
-import I from "@unicom-cloud/utils/class-name";
-import { RowContext as J } from "./context.js";
-import K from "../config-provider/context.js";
-const Q = {
+import ee from "../components/common/hooks/useMergeProps.js";
+import te from "@unicom-cloud/utils/class-name";
+import { responsiveArray as y, responsiveObserve as z } from "../utils/responsiveObserve.js";
+import { RowContext as re } from "./context.js";
+import se from "../config-provider/context.js";
+const oe = {
   span: 24
+  // 默认占据24列
 };
-function S(i) {
-  return typeof i == "string" && /\d+[px|%|em|rem|]{1}/.test(i) ? `0 0 ${i}` : i;
+function ne(i) {
+  return typeof i == "string" && /\d+[px|%|em|rem|]{1}/.test(i) ? { flex: `0 0 ${i}` } : { flex: i };
 }
-function U(i, v) {
-  const { getPrefixCls: w, componentConfig: A, rtl: C } = R(K), G = D(
+const ie = (i, E) => {
+  const { getPrefixCls: G, componentConfig: I, rtl: d } = F(se), T = ee(
     i,
-    Q,
-    A?.["Grid.Col"]
-  ), { gutter: p, div: l } = R(J), {
-    className: L,
-    style: M,
-    children: N,
-    span: O,
-    offset: d,
-    order: a,
-    pull: u,
-    push: c,
-    xs: m,
-    sm: g,
-    md: x,
-    lg: y,
-    xl: h,
-    xxl: P,
-    xxxl: b,
-    flex: f,
-    ...V
-  } = G;
-  function k(r, o) {
-    const j = { xs: m, sm: g, md: x, lg: y, xl: h, xxl: P, xxxl: b };
-    return Object.keys(j).forEach((s) => {
-      const t = j[s];
-      F(t) ? t >= 0 && (o[`${r}-${s}-${t}`] = !0) : H(t) && (o[`${r}-${s}-${t.span}`] = t.span, o[`${r}-${s}-offset-${t.offset}`] = t.offset, o[`${r}-${s}-order-${t.order}`] = t.order, o[`${r}-${s}-pull-${t.pull}`] = t.pull, o[`${r}-${s}-push-${t.push}`] = t.push);
-    }), o;
-  }
-  const n = w?.("col");
-  let $ = {
-    [`${n}`]: !l,
-    [`${n}-order-${a}`]: a,
-    [`${n}-${O}`]: !l && !m && !g && !x && !y && !h && !P && !b,
-    [`${n}-offset-${d}`]: d,
-    [`${n}-pull-${u}`]: u,
-    [`${n}-push-${c}`]: c,
-    [`${n}-rtl`]: C
-  };
-  $ = k(n, $);
-  const z = I(f ? n : $, L), e = {};
-  if (Array.isArray(p) && !l) {
-    const r = p[0] && p[0] / 2 || 0, o = p[1] && p[1] / 2 || 0;
-    r && (e.paddingLeft = r, e.paddingRight = r), o && (e.paddingTop = o, e.paddingBottom = o);
-  }
-  const B = q(
-    () => S(f) ? { flex: S(f) } : {},
-    [f]
-  );
-  return /* @__PURE__ */ E(
+    oe,
+    I?.["Grid.Col"]
+  ), { gutter: C, div: o } = F(re), {
+    className: V,
+    style: q,
+    children: D,
+    span: g = 24,
+    offset: c,
+    order: u,
+    pull: m,
+    push: $,
+    xs: v,
+    sm: P,
+    md: k,
+    lg: R,
+    xl: S,
+    xxl: w,
+    xxxl: O,
+    flex: j,
+    ...H
+  } = T, f = !X(j), s = G?.("col"), [A, J] = Z({
+    xs: !1,
+    sm: !1,
+    md: !1,
+    lg: !1,
+    xl: !1,
+    xxl: !1,
+    xxxl: !1
+  }), l = b(() => ({ xs: v, sm: P, md: k, lg: R, xl: S, xxl: w, xxxl: O }), [R, k, P, S, v, w, O]), K = b(() => {
+    if (f)
+      return;
+    const e = {
+      [`${s}`]: !o,
+      [`${s}-order-${u}`]: u,
+      [`${s}-${g}`]: !o && Object.values(l).every((r) => !r),
+      [`${s}-offset-${c}`]: c,
+      [`${s}-pull-${m}`]: m,
+      [`${s}-push-${$}`]: $,
+      [`${s}-rtl`]: d
+    };
+    for (const r in l) {
+      const t = l[r];
+      M(t) ? t >= 0 && (e[`${s}-${r}-${t}`] = !0) : B(t) && (e[`${s}-${r}-${t.span}`] = t.span, e[`${s}-${r}-offset-${t.offset}`] = t.offset, e[`${s}-${r}-order-${t.order}`] = t.order, e[`${s}-${r}-pull-${t.pull}`] = t.pull, e[`${s}-${r}-push-${t.push}`] = t.push);
+    }
+    return e;
+  }, [
+    f,
+    s,
+    o,
+    u,
+    g,
+    l,
+    c,
+    m,
+    $,
+    d
+  ]), x = (e) => `${100 / 24 * e}%`, Q = b(() => {
+    if (o || f)
+      return;
+    const e = {
+      span: g,
+      offset: c,
+      order: u,
+      pull: m,
+      push: $
+    }, r = y.find((a) => A[a]);
+    if (r) {
+      const a = y.indexOf(r);
+      for (let p = a; p < y.length; p++) {
+        const h = y[p], n = l[h];
+        if (n !== void 0) {
+          if (B(n)) {
+            Object.assign(e, n);
+            break;
+          }
+          if (M(n)) {
+            Object.assign(e, { span: n });
+            break;
+          }
+        }
+      }
+    }
+    const t = {}, L = x(e.span);
+    t.width = L, t.flex = `0 0 ${L}`;
+    const N = (a, p, h) => {
+      if (d) {
+        const n = {
+          left: "right",
+          right: "left",
+          marginLeft: "marginRight",
+          marginRight: "marginLeft"
+        };
+        a[n[p]] = h;
+      } else
+        a[p] = h;
+    };
+    return e.offset && N(
+      t,
+      "marginLeft",
+      x(e.offset)
+    ), e.order && (t.order = e.order), e.pull && N(t, "right", x(e.pull)), e.push && N(t, "left", x(e.push)), t;
+  }, [
+    o,
+    f,
+    g,
+    c,
+    u,
+    m,
+    $,
+    A,
+    l,
+    d
+  ]), U = b(() => {
+    if (o)
+      return;
+    const e = {};
+    if (Array.isArray(C)) {
+      const [r, t] = C;
+      r && (e.paddingLeft = r / 2, e.paddingRight = r / 2), t && (e.paddingTop = t / 2, e.paddingBottom = t / 2);
+    }
+    return e;
+  }, [C, o]);
+  return _(() => {
+    const e = z.subscribe((r) => {
+      J(r);
+    });
+    return () => {
+      z.unsubscribe(e);
+    };
+  }, []), /* @__PURE__ */ W(
     "div",
     {
-      ref: v,
-      ...V,
+      ref: E,
+      ...H,
       style: {
-        ...M,
-        ...e,
-        ...B
+        ...f ? ne(j) : Q,
+        ...U,
+        ...q
       },
-      className: z,
-      children: N
+      className: te(f ? s : K, V),
+      children: D
     }
   );
-}
-const W = T(U);
-W.displayName = "Col";
+}, fe = Y(ie);
+fe.displayName = "Col";
 export {
-  W as default
+  fe as default
 };