@unicom-cloud/ui 0.8.107 → 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,74 +1,73 @@
 import { jsx as x } from "react/jsx-runtime";
-import _ from "lodash/isArray";
-import c from "lodash/isNil";
-import { forwardRef as A, useContext as M } from "react";
+import O from "lodash/isArray";
+import f from "lodash/isNil";
+import { forwardRef as _, useContext as A } from "react";
 import "../config-provider/ConfigProvider.js";
-import O from "../components/common/hooks/useMergeProps.js";
-import k from "@unicom-cloud/utils/class-name";
+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 q } from "./context.js";
-import { useResponsiveState as f } from "./hook/useResponsiveState.js";
-import z from "../config-provider/context.js";
-import { isNumber as G, isPlainObject as B } from "@unicom-cloud/utils/is";
+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: 24,
+  cols: g,
   gap: 0
 };
-function E(C, u) {
-  const { getPrefixCls: g, componentConfig: N, rtl: $ } = M(z), y = O(
-    C,
+function E(u, C) {
+  const { getPrefixCls: N, componentConfig: P, rtl: y } = A(q), G = N?.("grid"), $ = L(
+    u,
     D,
-    N?.Grid
+    P?.Grid
   ), {
-    children: w,
-    className: P,
-    style: v,
+    style: w,
+    className: v,
+    children: S,
     cols: R,
-    gap: e,
+    gap: r,
     colGap: l,
     rowGap: m
-  } = y;
-  let t = m, s = l;
-  const b = c(e), h = c(m), j = c(l);
-  b || (_(e) ? (t = e[0], s = e[1] ?? e[0]) : t = s = e), h || (t = m), j || (s = l);
-  const o = f(R, 24), a = f(t, 0), n = f(s, 0), r = {};
-  if (a && (r.rowGap = a), n && (r.columnGap = n), G(o))
-    r.gridTemplateColumns = `repeat(${o}, minmax(0px, 1fr))`;
-  else if (o && B(o) && "type" in o) {
-    const T = o.type;
-    let i = o.max ?? "1fr";
-    G(i) && (i = `${i}px`);
+  } = $;
+  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";
-    G(p) && (p = `${p}px`), r.gridTemplateColumns = `repeat(${T}, minmax(${p}, ${i}))`;
+    d(p) && (p = `${p}px`), e.gridTemplateColumns = `repeat(${j}, minmax(${p}, ${s}))`;
   }
-  const d = g?.("grid"), S = {
-    [`${d}`]: !0,
-    [`${d}-rtl`]: $
-  };
   return /* @__PURE__ */ x(
     "div",
     {
-      ref: u,
-      className: k(S, P),
+      ref: C,
+      className: M(G, y && `${G}-rtl`, v),
       style: {
-        ...r,
-        ...v
+        ...e,
+        ...w
       },
       children: /* @__PURE__ */ x(
-        q.Provider,
+        k.Provider,
         {
           value: {
             cols: o,
             rowGap: a,
             colGap: n
           },
-          children: w
+          children: S
         }
       )
     }
   );
 }
-const F = A(E);
+const F = _(E);
 F.displayName = "Grid";
 export {
   F as default

package/grid/Item.js

@@ -1,55 +1,55 @@
-import { jsx as R } from "react/jsx-runtime";
-import { forwardRef as w, useContext as p } 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 O from "../components/common/hooks/useMergeProps.js";
+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 { useResponsiveState as a } from "./hook/useResponsiveState.js";
 import { resolveItemData as j } from "./util.js";
-import D from "../config-provider/context.js";
-import { isNumber as e } from "@unicom-cloud/utils/is";
-const E = {
-  offset: 0,
-  span: 1
-};
-function F(f, c) {
-  const { getPrefixCls: l, componentConfig: d, rtl: C } = p(D), g = O(
-    f,
-    E,
-    d?.["Grid.Item"]
+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: u,
-    className: x,
     style: $,
-    offset: N,
-    span: n
-  } = g, G = p(h), { colGap: r, cols: m } = G, I = a(N, 0), S = a(n, 1), { span: t, offset: o } = e(m) ? j(m, {
-    span: S,
-    offset: I
-  }) : {}, i = l?.("grid-item"), y = {
-    [`${i}`]: !0,
-    [`${i}-rtl`]: C
-  }, v = b(y, x), s = {};
-  if (e(t) && (s.gridColumnStart = `span ${t}`, e(r) && e(o) && o > 0)) {
-    const P = `(100% - ${r * (t - 1)}px) / ${t}`;
-    s.marginLeft = `calc(${P} * ${o} + ${r * o}px)`;
+    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 s.gridColumnEnd = `span ${n}`, /* @__PURE__ */ R(
+  return /* @__PURE__ */ S(
     "div",
     {
-      ref: c,
-      className: v,
+      ref: l,
       style: {
-        ...s,
+        ...o,
         ...$
       },
-      children: u
+      className: b(n, C && `${n}-rtl`, g),
+      children: N
     }
   );
 }
-const L = w(F), M = L;
-M.displayName = "Grid.Item";
+const E = v(D);
+E.displayName = "Grid.Item";
 export {
-  M as default
+  E as default
 };

package/grid/context.js

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

package/grid/index.js

@@ -1,16 +1,14 @@
-import r from "./Col.js";
+import r from "../row-col/index.js";
 import m from "./Grid.js";
 import i from "./Item.js";
-import t from "./Row.js";
+import t from "../row-col/Col.js";
 const o = m;
-o.Col = r;
-o.Row = t;
 o.Item = i;
+o.Row = r;
+o.Col = t;
 export {
-  r as Col,
-  r as GridCol,
+  t as GridCol,
   i as GridItem,
-  t as GridRow,
-  t as Row,
+  r as GridRow,
   o as default
 };

package/hooks/useResponsiveState.js

@@ -0,0 +1,54 @@
+import { useRef as p, useState as m, useEffect as b, useMemo as R } from "react";
+import "../components/common/utils/is.js";
+import { responsiveArray as c, responsiveObserve as u } from "../utils/responsiveObserve.js";
+import { isPlainObject as k, isNil as f } from "@unicom-cloud/utils/is";
+function v(r) {
+  return k(r) ? c.some((s, o, t) => {
+    const n = r[s];
+    return !f(n);
+  }) : !1;
+}
+function O(r = !0) {
+  const e = p(), [s, o] = m(() => {
+    let t = {
+      //   xs: true,
+      //   sm: true,
+      //   md: true,
+      //   lg: true,
+      //   xl: true,
+      //   xxl: true,
+      //   xxxl: true,
+    };
+    return r && (t = Object.fromEntries(
+      c.map((n, i, S) => [n, !0])
+    )), t;
+  });
+  return b(() => {
+    if (r)
+      return e.current = u.subscribe((t) => {
+        o(t);
+      }), () => {
+        e.current && u.unsubscribe(e.current);
+      };
+  }, []), s;
+}
+function A(r, e = 0) {
+  const s = v(r), o = O(s);
+  return R(() => {
+    if (f(r))
+      return e;
+    if (!s) return r;
+    let n = e;
+    for (const i of c)
+      if (o[i] && r[i] !== void 0) {
+        n = r[i];
+        break;
+      }
+    return n;
+  }, [e, s, o, r]);
+}
+export {
+  v as isResponsiveValue,
+  O as useResponsive,
+  A as useResponsiveState
+};