@nutui/nutui-react 3.0.0-beta.3 → 3.0.0-beta.5

package/dist/es/packages/ellipsis/ellipsis.d.ts

@@ -38,7 +38,7 @@ export interface EllipsisProps extends BasicComponent {
     */
     lineHeight: number | string
     /**
-    * 文本点击是触发
+    * 文本点击时触发
     * @default -
     */
     onClick: () => void

package/dist/es/packages/grid/grid.js

@@ -5,12 +5,11 @@ import React from "react";
 import classNames from "classnames";
 import { GridItem } from "../griditem/griditem";
 import GridContext from "./context";
-import { pxCheck } from "../../utils/px-check";
 var defaultProps = {
     columns: 4,
-    gap: 0,
+    gap: 9,
     center: true,
-    square: false,
+    square: true,
     reverse: false,
     direction: 'vertical'
 };
@@ -37,9 +36,6 @@ export var Grid = function(props) {
         if (style) {
             styleSelf = style;
         }
-        if (gap) {
-            styleSelf.paddingLeft = pxCheck(gap);
-        }
         return styleSelf;
     };
     return /*#__PURE__*/ React.createElement("div", _object_spread({

package/dist/es/packages/grid/style/grid.scss

@@ -6,8 +6,8 @@
   border: 0 solid $grid-border-color;
 
   &-border {
-    border-top-width: 1px;
-    border-left-width: 1px;
+    border-top-width: $grid-border-width;
+    border-left-width: $grid-border-width;
   }
 }
 

package/dist/es/packages/grid/style/style.css

@@ -4,6 +4,7 @@
   position: relative;
   box-sizing: border-box;
   color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
+  overflow: hidden;
 }
 .nut-grid-item-text {
   color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
@@ -31,12 +32,13 @@
   border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-item-content-border {
-  border-right-width: 1px;
-  border-bottom-width: 1px;
+  border-right-width: var(--nutui-grid-border-width, 0px);
+  border-bottom-width: var(--nutui-grid-border-width, 0px);
 }
 .nut-grid-item-content-surround {
-  border-top-width: 1px;
-  border-left-width: 1px;
+  border-top-width: var(--nutui-grid-border-width, 0px);
+  border-left-width: var(--nutui-grid-border-width, 0px);
+  border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8px));
 }
 .nut-grid-item-content-center {
   align-items: center;
@@ -108,8 +110,8 @@
   border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-border {
-  border-top-width: 1px;
-  border-left-width: 1px;
+  border-top-width: var(--nutui-grid-border-width, 0px);
+  border-left-width: var(--nutui-grid-border-width, 0px);
 }
 
 [dir=rtl] .nut-grid-border,

package/dist/es/packages/griditem/griditem.js

@@ -9,9 +9,9 @@ import { pxCheck } from "../../utils/px-check";
 var defaultProps = {
     text: '',
     columns: 4,
-    gap: 0,
+    gap: 9,
     center: true,
-    square: false,
+    square: true,
     reverse: false,
     direction: 'vertical'
 };
@@ -34,16 +34,22 @@ export var GridItem = function(props) {
     var classes = classNames(classPrefix, className);
     var context = useContext(GridContext);
     var rootStyle = function() {
+        var width = "calc((100% - ".concat(Number(gap) * (Number(columns) - 1), "px) / ").concat(Number(columns), ")");
         var styles = _object_spread({
-            flexBasis: "".concat(100 / +columns, "%")
+            flexBasis: width
         }, style);
         if (square) {
-            styles.paddingTop = "".concat(100 / +columns, "%");
-        } else if (gap) {
-            styles.paddingRight = pxCheck(gap);
+            styles.paddingTop = width;
+        }
+        if (gap) {
+            if ((index + 1) % Number(columns)) {
+                styles.marginRight = pxCheck(gap);
+            }
             if (index >= Number(columns)) {
                 styles.marginTop = pxCheck(gap);
             }
+        } else {
+            styles.borderRadius = 0;
         }
         return styles;
     };

package/dist/es/packages/griditem/style/griditem.scss

@@ -4,6 +4,7 @@
   position: relative;
   box-sizing: border-box;
   color: $grid-item-text-color;
+  overflow: hidden;
 
   &-text {
     color: $grid-item-text-color;
@@ -35,13 +36,14 @@
     border: 0 solid $grid-border-color;
 
     &-border {
-      border-right-width: 1px;
-      border-bottom-width: 1px;
+      border-right-width: $grid-border-width;
+      border-bottom-width: $grid-border-width;
     }
 
     &-surround {
-      border-top-width: 1px;
-      border-left-width: 1px;
+      border-top-width: $grid-border-width;
+      border-left-width: $grid-border-width;
+      border-radius: $grid-item-border-radius;
     }
 
     &-center {

package/dist/es/packages/griditem/style/style.css

@@ -4,6 +4,7 @@
   position: relative;
   box-sizing: border-box;
   color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
+  overflow: hidden;
 }
 .nut-grid-item-text {
   color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a));
@@ -31,12 +32,13 @@
   border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-item-content-border {
-  border-right-width: 1px;
-  border-bottom-width: 1px;
+  border-right-width: var(--nutui-grid-border-width, 0px);
+  border-bottom-width: var(--nutui-grid-border-width, 0px);
 }
 .nut-grid-item-content-surround {
-  border-top-width: 1px;
-  border-left-width: 1px;
+  border-top-width: var(--nutui-grid-border-width, 0px);
+  border-left-width: var(--nutui-grid-border-width, 0px);
+  border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8px));
 }
 .nut-grid-item-content-center {
   align-items: center;

package/dist/es/packages/imagepreview/imagepreview.d.ts

@@ -17,17 +17,9 @@ export interface VideoOption {
     index?: number;
 }
 export interface ImagePreviewProps extends BasicComponent {
-    /**
-    * 预览图片数组
-    * @default []
-    */
     images: Array<{
         src: string;
-    }>
-    /**
-    * 预览的视频数组（视频自动放到图片之前）
-    * @default []
-    */
+    }>;
     videos: Array<{
         source: {
             src: string;
@@ -37,66 +29,18 @@ export interface ImagePreviewProps extends BasicComponent {
             muted: boolean;
             controls: boolean;
         };
-    }>
-    /**
-    * 是否展示预览图片
-    * @default false
-    */
-    visible: boolean
-    /**
-    * 自动轮播时长，0表示不会自动轮播
-    * @default 3000
-    */
-    autoPlay: number | string
-    /**
-    * 页码，受控
-    * @default 1
-    */
-    value?: number
-    /**
-    * 初始页码
-    * @default 1
-    */
-    defaultValue: number
-    /**
-    * 点击图片可以退出预览
-    * @default false
-    */
-    closeOnContentClick: boolean
-    /**
-    * 分页是否展示
-    * @default true
-    */
-    pagination: boolean
-    /**
-    * 分页指示器是否展示
-    * @default false
-    */
-    indicator: boolean
-    /**
-    * 分页指示器选中的颜色
-    * @default #fff
-    */
-    indicatorColor: string
-    /**
-    * 关闭按钮
-    * @default false
-    */
-    closeIcon: boolean | ReactNode
-    /**
-    * 关闭按钮位置
-    * @default top-right
-    */
-    closeIconPosition: ImagePreviewCloseIconPosition
-    /**
-    * 切换时触发
-    * @default -
-    */
-    onChange: (value: number) => void
-    /**
-    * 点击遮罩关闭图片预览时触发
-    * @default -
-    */
-    onClose: () => void
+    }>;
+    visible: boolean;
+    autoPlay: number | string;
+    value?: number;
+    defaultValue: number;
+    closeOnContentClick: boolean;
+    pagination: boolean;
+    indicator: boolean;
+    indicatorColor: string;
+    closeIcon: boolean | ReactNode;
+    closeIconPosition: ImagePreviewCloseIconPosition;
+    onChange: (value: number) => void;
+    onClose: () => void;
 }
 export declare const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>>;

package/dist/es/packages/imagepreview/style/imagepreview.scss

@@ -34,6 +34,10 @@
     background: transparent;
     color: $white;
 
+    .nut-icon {
+      color: $white;
+    }
+
     &.top-right {
       top: 50px;
       right: 20px;

package/dist/es/packages/imagepreview/style/style.css

@@ -642,6 +642,9 @@
   background: transparent;
   color: #ffffff;
 }
+.nut-imagepreview-close .nut-icon {
+  color: #ffffff;
+}
 .nut-imagepreview-close.top-right {
   top: 50px;
   right: 20px;

package/dist/es/packages/progress/progress.js

@@ -39,7 +39,7 @@ export var Progress = function(props) {
     var _useState = _sliced_to_array(useState(0), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        backgroundColor: color || '#FF0F23'
+        background: color || '#FF0F23'
     };
     useEffect(function() {
         setDispalyPercent(percent);

package/dist/es/packages/progress/style/progress.scss

@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

package/dist/es/packages/progress/style/style.css

@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +36,7 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -49,7 +50,7 @@
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, #ff0f23);
+  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @keyframes progressActive {
   0% {

package/dist/es/packages/rate/rate.d.ts

@@ -1,65 +1,17 @@
 import React, { FunctionComponent } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface RateProps extends BasicComponent {
-    /**
-    * star 总数
-    * @default 5
-    */
-    count: number
-    /**
-    * 受控的 star 数值
-    * @default 0
-    */
-    value: number
-    /**
-    * 非受控的 star 默认值
-    * @default 0
-    */
-    defaultValue: number
-    /**
-    * 最少选中star数量
-    * @default 0
-    */
-    min: number
-    /**
-    * 使用图标(选中)
-    * @default star-n
-    */
-    checkedIcon: React.ReactNode
-    /**
-    * 使用图标(未选中)
-    * @default star-n
-    */
-    uncheckedIcon: React.ReactNode
-    /**
-    * 是否禁用
-    * @default false
-    */
-    disabled: boolean
-    /**
-    * 是否只读
-    * @default false
-    */
-    readOnly: boolean
-    /**
-    * 是否半星
-    * @default false
-    */
-    allowHalf: boolean
-    /**
-    * 是否允许滑动选择
-    * @default false
-    */
-    touchable: boolean
-    /**
-    * 当前 star 数修改时触发
-    * @default -
-    */
-    onChange: (value: number) => void
-    /**
-    * touch 滑动结束时触发
-    * @default -
-    */
-    onTouchEnd: (e: TouchEvent, value: number) => void
+    count: number;
+    value: number;
+    defaultValue: number;
+    min: number;
+    checkedIcon: React.ReactNode;
+    uncheckedIcon: React.ReactNode;
+    disabled: boolean;
+    readOnly: boolean;
+    allowHalf: boolean;
+    touchable: boolean;
+    onChange: (value: number) => void;
+    onTouchEnd: (e: TouchEvent, value: number) => void;
 }
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/es/packages/rate/style/rate.scss

@@ -18,10 +18,10 @@
     display: flex;
     flex-shrink: 0;
     position: relative;
-    margin-right: $rate-item-margin;
+    margin-left: $rate-item-margin;
 
-    &:last-child {
-      margin-right: 0;
+    &:first-child {
+      margin-left: 0;
     }
 
     &-half {
@@ -39,11 +39,16 @@
 
     &-icon {
       display: flex;
-      color: $rate-icon-color;
       cursor: pointer;
 
+      .nut-icon {
+        color: $rate-icon-color;
+      }
+
       &-disabled {
-        color: $rate-icon-inactive-color;
+        .nut-icon {
+          color: $rate-icon-inactive-color;
+        }
       }
 
       &.nut-rate-item-icon.nut-rate-item-icon-half {

package/dist/es/packages/rate/style/style.css

@@ -12,10 +12,10 @@
   display: flex;
   flex-shrink: 0;
   position: relative;
-  margin-right: var(--nutui-rate-item-margin, 14px);
+  margin-left: var(--nutui-rate-item-margin, 14px);
 }
-.nut-rate-item:last-child {
-  margin-right: 0;
+.nut-rate-item:first-child {
+  margin-left: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -30,10 +30,12 @@
 }
 .nut-rate-item-icon {
   display: flex;
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
   cursor: pointer;
 }
-.nut-rate-item-icon-disabled {
+.nut-rate-item-icon .nut-icon {
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-rate-item-icon-disabled .nut-icon {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {

package/dist/es/packages/resultpage/resultpage.js

@@ -1,9 +1,9 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useState } from "react";
+import React from "react";
 import classNames from "classnames";
+import { Tips, Warning, Failure, Ask, Success } from "@nutui/icons-react";
 import { ComponentDefaults } from "../../utils/typings";
 import { Button } from "../button/button";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -18,23 +18,28 @@ export var ResultPage = function(props) {
     var classPrefix = "nut-resultpage";
     var cls = classNames(classPrefix, className);
     var defaultStatus = {
-        success: 'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png',
-        error: 'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png',
-        warning: 'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png',
-        info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png',
-        waiting: 'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png'
+        success: /*#__PURE__*/ React.createElement(Success, {
+            color: "#00D900"
+        }),
+        error: /*#__PURE__*/ React.createElement(Failure, {
+            color: "#FF0F23"
+        }),
+        warning: /*#__PURE__*/ React.createElement(Warning, {
+            color: "#FFBF00"
+        }),
+        info: /*#__PURE__*/ React.createElement(Tips, {
+            color: "#0073FF"
+        }),
+        waiting: /*#__PURE__*/ React.createElement(Ask, {
+            color: "#0073FF"
+        })
     };
-    var _useState = _sliced_to_array(useState({
-        backgroundImage: "url(".concat(typeof icon === 'string' && icon ? icon : defaultStatus[status], ")"),
-        backgroundSize: '100% 100%'
-    }), 1), imgStyle = _useState[0];
     return /*#__PURE__*/ React.createElement("div", {
         className: cls,
         style: style
-    }, typeof icon === 'string' ? /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(classPrefix, "-icon"),
-        style: imgStyle
-    }) : icon, typeof title === 'string' && title ? /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-icon")
+    }, icon || defaultStatus[status]), typeof title === 'string' && title ? /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-title")
     }, title) : title, typeof description === 'string' && description ? /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-description")
@@ -47,7 +52,9 @@ export var ResultPage = function(props) {
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-action"),
             key: index
-        }, /*#__PURE__*/ React.createElement(Button, rest, action === null || action === void 0 ? void 0 : action.text));
+        }, /*#__PURE__*/ React.createElement(Button, _object_spread_props(_object_spread({}, rest), {
+            size: "large"
+        }), action === null || action === void 0 ? void 0 : action.text));
     })) : null, children);
 };
 ResultPage.displayName = 'NutResultPage';

package/dist/es/packages/resultpage/style/resultpage.scss

@@ -5,10 +5,12 @@
   align-items: center;
   margin: 0 auto;
   &-icon {
-    height: $resultpage-icon-size;
-    width: $resultpage-icon-size;
+    display: inline-flex;
     margin-bottom: $resultpage-icon-margin-bottom;
-    background-size: 100%;
+    .nut-icon {
+      height: $resultpage-icon-size;
+      width: $resultpage-icon-size;
+    }
   }
   &-title {
     width: $resultpage-width;

package/dist/es/packages/resultpage/style/style.css

@@ -6,21 +6,23 @@
   margin: 0 auto;
 }
 .nut-resultpage-icon {
-  height: var(--nutui-resultpage-icon-size, 48px);
-  width: var(--nutui-resultpage-icon-size, 48px);
-  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 16px);
-  background-size: 100%;
+  display: inline-flex;
+  margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12px);
+}
+.nut-resultpage-icon .nut-icon {
+  height: var(--nutui-resultpage-icon-size, 36px);
+  width: var(--nutui-resultpage-icon-size, 36px);
 }
 .nut-resultpage-title {
-  width: var(--nutui-resultpage-width, 247px);
-  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 9px);
+  width: var(--nutui-resultpage-width, 240px);
+  margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
   font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
   color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
 .nut-resultpage-description {
-  width: var(--nutui-resultpage-width, 247px);
+  width: var(--nutui-resultpage-width, 240px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
   font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
   color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
@@ -33,7 +35,7 @@
 .nut-resultpage-actions {
   display: flex;
   flex-direction: row;
-  margin-top: var(--nutui-resultpage-actions-margin-top, 21px);
+  margin-top: var(--nutui-resultpage-actions-margin-top, 16px);
 }
 .nut-resultpage-action {
   margin-left: 6px;

package/dist/es/packages/resultpage/types.d.ts

@@ -1,4 +1,4 @@
 export type ResultPageStatusOptions = {
-    [key: string]: string;
+    [key: string]: React.ReactNode;
 };
 export type ResultPageStatus = 'success' | 'error' | 'warning' | 'info' | 'waiting';

package/dist/es/packages/tabbar/style/style.css

@@ -110,10 +110,20 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 
 .nut-tabbar {