@nutui/nutui-react 2.0.7 → 2.0.9

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.7 Wed Jul 26 2023 13:54:35 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.9 Wed Aug 02 2023 15:36:23 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2408,8 +2408,8 @@ Check the top-level render call using <` + t + ">.");
     className: "",
     style: {}
   };
-  const prefixCls = "nut-button";
-  const defaultProps$1p = {
+  const prefixCls$1 = "nut-button";
+  const defaultProps$1q = {
     ...ComponentDefaults,
     color: "",
     type: "default",
@@ -2443,7 +2443,7 @@ Check the top-level render call using <` + t + ">.");
         nativeType,
         ...rest
       } = {
-        ...defaultProps$1p,
+        ...defaultProps$1q,
         ...props
       };
       const getStyle = React.useCallback(() => {
@@ -2474,16 +2474,16 @@ Check the top-level render call using <` + t + ">.");
           ref,
           type: nativeType,
           className: classNames(
-            prefixCls,
+            prefixCls$1,
             className,
-            props.type ? `${prefixCls}--${type2}` : null,
-            props.fill ? `${prefixCls}--${fill}` : null,
+            props.type ? `${prefixCls$1}--${type2}` : null,
+            props.fill ? `${prefixCls$1}--${fill}` : null,
             {
-              [`${prefixCls}--${size}`]: size,
-              [`${prefixCls}--${shape}`]: shape,
-              [`${prefixCls}--block`]: block,
-              [`${prefixCls}--disabled`]: disabled,
-              [`${prefixCls}--loading`]: loading
+              [`${prefixCls$1}--${size}`]: size,
+              [`${prefixCls$1}--${shape}`]: shape,
+              [`${prefixCls$1}--block`]: block,
+              [`${prefixCls$1}--disabled`]: disabled,
+              [`${prefixCls$1}--loading`]: loading
             }
           ),
           style: { ...getStyle(), ...style },
@@ -2494,7 +2494,7 @@ Check the top-level render call using <` + t + ">.");
     }
   );
   Button.displayName = "NutButton";
-  const defaultProps$1o = {
+  const defaultProps$1p = {
     ...ComponentDefaults,
     title: "",
     description: "",
@@ -2503,7 +2503,7 @@ Check the top-level render call using <` + t + ">.");
   const classPrefix$o = "nut-cell-group";
   const CellGroup = (props) => {
     const { children, className, style, title, description, divider, ...rest } = {
-      ...defaultProps$1o,
+      ...defaultProps$1p,
       ...props
     };
     return /* @__PURE__ */ React.createElement("div", { className: classNames(classPrefix$o, className), ...rest }, title ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$o}__title` }, title) : null, description ? /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$o}__description` }, description) : null, /* @__PURE__ */ React.createElement(
@@ -2514,9 +2514,9 @@ Check the top-level render call using <` + t + ">.");
       children
     ));
   };
-  CellGroup.defaultProps = defaultProps$1o;
+  CellGroup.defaultProps = defaultProps$1p;
   CellGroup.displayName = "NutCellGroup";
-  const defaultProps$1n = {
+  const defaultProps$1o = {
     ...ComponentDefaults,
     title: null,
     description: null,
@@ -2540,7 +2540,7 @@ Check the top-level render call using <` + t + ">.");
       style,
       ...rest
     } = {
-      ...defaultProps$1n,
+      ...defaultProps$1o,
       ...props
     };
     const handleClick2 = (event) => {
@@ -2572,7 +2572,7 @@ Check the top-level render call using <` + t + ">.");
       ) : null, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix$n}__divider` }))
     );
   };
-  Cell.defaultProps = defaultProps$1n;
+  Cell.defaultProps = defaultProps$1o;
   Cell.displayName = "NutCell";
   Cell.Group = CellGroup;
   var INFINITY = 1 / 0;
@@ -3708,7 +3708,7 @@ Check the top-level render call using <` + t + ">.");
   const pxCheck = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
   };
-  const defaultProps$1m = {
+  const defaultProps$1n = {
     ...ComponentDefaults,
     fit: "fill",
     position: "center",
@@ -3737,7 +3737,7 @@ Check the top-level render call using <` + t + ">.");
       onClick,
       onLoad,
       onError
-    } = { ...defaultProps$1m, ...props };
+    } = { ...defaultProps$1n, ...props };
     const [innerLoading, setInnerLoading] = React.useState(true);
     const [isError, setIsError] = React.useState(false);
     const imgRef = React.useRef(null);
@@ -3864,7 +3864,7 @@ Check the top-level render call using <` + t + ">.");
       renderErrorImg()
     );
   };
-  Image$1.defaultProps = defaultProps$1m;
+  Image$1.defaultProps = defaultProps$1n;
   Image$1.displayName = "NutImage";
   function _extends$4() {
     _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
@@ -5689,7 +5689,7 @@ Check the top-level render call using <` + t + ">.");
   Overlay.defaultProps = defaultOverlayProps;
   Overlay.displayName = "NutOverlay";
   const DataContext$2 = React.createContext({});
-  const defaultProps$1l = {
+  const defaultProps$1m = {
     ...ComponentDefaults,
     span: "24",
     offset: "0",
@@ -5697,7 +5697,7 @@ Check the top-level render call using <` + t + ">.");
   };
   const Col = (props) => {
     const { className, style, span, offset, children, onClick } = {
-      ...defaultProps$1l,
+      ...defaultProps$1m,
       ...props
     };
     const [colName, setColName] = React.useState("");
@@ -5729,9 +5729,9 @@ Check the top-level render call using <` + t + ">.");
       children
     );
   };
-  Col.defaultProps = defaultProps$1l;
+  Col.defaultProps = defaultProps$1m;
   Col.displayName = "NutCol";
-  const defaultProps$1k = {
+  const defaultProps$1l = {
     ...ComponentDefaults,
     contentPosition: "center",
     direction: "horizontal"
@@ -5739,7 +5739,7 @@ Check the top-level render call using <` + t + ">.");
   const classPrefix$k = `nut-divider`;
   const Divider = (props) => {
     const { children, contentPosition, style, className, direction, ...rest } = {
-      ...defaultProps$1k,
+      ...defaultProps$1l,
       ...props
     };
     const classes = direction === "horizontal" ? classNames({
@@ -5754,14 +5754,14 @@ Check the top-level render call using <` + t + ">.");
     });
     return /* @__PURE__ */ React.createElement("div", { className: `${classes} ${className || ""}`, style, ...rest }, children);
   };
-  Divider.defaultProps = defaultProps$1k;
+  Divider.defaultProps = defaultProps$1l;
   Divider.displayName = "NutDivider";
   const gridContext = {
     onClick: (item, index) => {
     }
   };
   const GridContext = React.createContext(gridContext);
-  const defaultProps$1j = {
+  const defaultProps$1k = {
     text: "",
     columns: 4,
     gap: 0,
@@ -5787,7 +5787,7 @@ Check the top-level render call using <` + t + ">.");
       onClick,
       ...rest
     } = {
-      ...defaultProps$1j,
+      ...defaultProps$1k,
       ...props
     };
     const classPrefix2 = "nut-grid-item";
@@ -5845,9 +5845,9 @@ Check the top-level render call using <` + t + ">.");
       /* @__PURE__ */ React.createElement("div", { className: contentClass() }, children && /* @__PURE__ */ React.createElement(React.Fragment, null, children), text && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__text` }, text))
     );
   };
-  GridItem.defaultProps = defaultProps$1j;
+  GridItem.defaultProps = defaultProps$1k;
   GridItem.displayName = "NutGridItem";
-  const defaultProps$1i = {
+  const defaultProps$1j = {
     columns: 4,
     gap: 0,
     center: true,
@@ -5868,7 +5868,7 @@ Check the top-level render call using <` + t + ">.");
       className,
       onClick,
       ...rest
-    } = { ...defaultProps$1i, ...props };
+    } = { ...defaultProps$1j, ...props };
     const childrenDom = React.Children.toArray(children);
     const classPrefix2 = "nut-grid";
     const rootClass = () => {
@@ -5898,18 +5898,18 @@ Check the top-level render call using <` + t + ">.");
       });
     })));
   };
-  Grid.defaultProps = defaultProps$1i;
+  Grid.defaultProps = defaultProps$1j;
   Grid.displayName = "NutGrid";
   Grid.Item = GridItem;
-  const defaultProps$1h = {};
+  const defaultProps$1i = {};
   const Layout = (props) => {
-    ({ ...defaultProps$1h, ...props });
+    ({ ...defaultProps$1i, ...props });
     return /* @__PURE__ */ React.createElement("div", { className: "nut-layout" }, "Layout");
   };
-  Layout.defaultProps = defaultProps$1h;
+  Layout.defaultProps = defaultProps$1i;
   Layout.displayName = "NutLayout";
   const classPrefix$j = "nut-row";
-  const defaultProps$1g = {
+  const defaultProps$1h = {
     ...ComponentDefaults,
     type: "",
     justify: "start",
@@ -5929,7 +5929,7 @@ Check the top-level render call using <` + t + ">.");
       gutter,
       onClick
     } = {
-      ...defaultProps$1g,
+      ...defaultProps$1h,
       ...props
     };
     const getClass = (prefix2, type22) => {
@@ -5961,8 +5961,31 @@ Check the top-level render call using <` + t + ">.");
       children
     ));
   };
-  Row.defaultProps = defaultProps$1g;
+  Row.defaultProps = defaultProps$1h;
   Row.displayName = "NutRow";
+  const prefixCls = "nut-space";
+  const defaultProps$1g = {
+    direction: "horizontal"
+  };
+  const Space = (props) => {
+    const { className, style, children, wrap, align, direction, justify } = {
+      ...defaultProps$1g,
+      ...props
+    };
+    const cls = classNames(
+      className,
+      prefixCls,
+      wrap && `${prefixCls}-wrap`,
+      direction && `${prefixCls}-${direction}`,
+      align && `${prefixCls}-align-${align}`,
+      justify && `${prefixCls}-justify-${justify}`
+    );
+    return /* @__PURE__ */ React.createElement("div", { className: cls, style }, React.Children.map(children, (child) => {
+      return child !== null && child !== void 0 && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-item` }, child);
+    }));
+  };
+  Space.defaultProps = defaultProps$1g;
+  Space.displayName = "NutSpace";
   const canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
   const defaultRoot = canUseDom ? window : void 0;
   const overflowStylePatterns = ["scroll", "auto", "overlay"];
@@ -24941,6 +24964,7 @@ Please add \`${key}Action\` when creating your handler.`);
   exports2.SideNavBarItem = SideNavBarItem;
   exports2.Signature = Signature;
   exports2.Skeleton = Skeleton;
+  exports2.Space = Space;
   exports2.Step = Step;
   exports2.Steps = Steps;
   exports2.Sticky = Sticky;

package/dist/packages/space/space.scss

@@ -0,0 +1,73 @@
+.nut-space {
+  display: flex;
+
+  &-item {
+    flex: none;
+  }
+
+  &-vertical {
+    flex-direction: column;
+    > .nut-space-item {
+      margin-bottom: $space-gap;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &-horizontal {
+    flex-direction: row;
+    > .nut-space-item {
+      margin-right: $space-gap;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    &.nut-space-wrap {
+      flex-wrap: wrap;
+      margin-bottom: calc(#{$space-gap} * -1);
+      > .nut-space-item {
+        padding-bottom: $space-gap;
+      }
+    }
+  }
+
+  &-align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+
+  &-justify {
+    &-center {
+      justify-content: center;
+    }
+    &-start {
+      justify-content: flex-start;
+    }
+    &-end {
+      justify-content: flex-end;
+    }
+    &-between {
+      justify-content: space-between;
+    }
+    &-around {
+      justify-content: space-around;
+    }
+    &-evenly {
+      justify-content: space-evenly;
+    }
+    &-stretch {
+      justify-content: stretch;
+    }
+  }
+}