@nutui/nutui-react-taro 3.0.0-beta.5 → 3.0.0-beta.7

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;
@@ -428,11 +429,14 @@
 .nut-numberkeyboard-header-title {
   color: var(--nutui-color-title, #1a1a1a);
   display: inline-block;
+  font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-numberkeyboard-header-close {
   position: absolute;
   display: block;
   right: 0;
+  top: 50%;
+  transform: translateY(-50%);
   padding: var(--nutui-numberkeyboard-header-close-padding, 0 16px);
   color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-numberkeyboard-header-close-font-size, 14px);
@@ -452,7 +456,12 @@
 .nut-numberkeyboard-body-wrapper {
   position: relative;
   flex: 1;
+  /* #ifdef harmony */
+  width: 33%;
+  /* #endif */
+  /* #ifndef harmony */
   flex-basis: 33%;
+  /* #endif */
   box-sizing: border-box;
   padding: 0 6px 6px 0;
   background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc));
@@ -477,8 +486,12 @@
 .nut-numberkeyboard-sidebar {
   display: flex;
   flex: 1;
+  flex-basis: 33%;
   flex-direction: column;
 }
+.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper {
+  width: 100%;
+}
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
   position: absolute;
   top: 0;

package/dist/es/packages/nutui.react.build.d.ts

@@ -164,6 +164,8 @@ import Indicator from "./indicator/index";
 export * from "./indicator/index";
 import Pagination from "./pagination/index";
 export * from "./pagination/index";
+import Segmented from "./segmented/index";
+export * from "./segmented/index";
 import Price from "./price/index";
 export * from "./price/index";
 import Progress from "./progress/index";
@@ -200,4 +202,4 @@ import WaterMark from "./watermark/index";
 export * from "./watermark/index";
 import AvatarCropper from "./avatarcropper/index";
 export * from "./avatarcropper/index";
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Pagination, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Pagination, Segmented, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };

package/dist/es/packages/nutui.react.build.js

@@ -164,6 +164,8 @@ import Indicator from "./indicator/index";
 export * from "./indicator/index";
 import Pagination from "./pagination/index";
 export * from "./pagination/index";
+import Segmented from "./segmented/index";
+export * from "./segmented/index";
 import Price from "./price/index";
 export * from "./price/index";
 import Progress from "./progress/index";
@@ -200,4 +202,4 @@ import WaterMark from "./watermark/index";
 export * from "./watermark/index";
 import AvatarCropper from "./avatarcropper/index";
 export * from "./avatarcropper/index";
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Pagination, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Pagination, Segmented, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pagination {
   display: flex;
   flex-direction: row;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -93,18 +93,14 @@
       justify-content: center;
       padding: $popover-menu-item-padding;
       border-bottom: 1px solid $popover-divider-color;
+      max-width: $popover-menu-item-width;
+      word-wrap: break-word;
 
       &:last-child {
         margin-bottom: 0px;
         border-bottom: none;
       }
 
-      // &:hover:not(:only-child) {
-      //   cursor: pointer;
-      //   color: $popover-hover-text-color;
-      //   background-color: $popover-hover-background-color;
-      // }
-
       &:hover:nth-of-type(2) {
         border-radius: 8px 8px 0px 0px;
       }
@@ -128,9 +124,10 @@
       }
 
       &-name {
-        width: 100%;
+        width: calc(100% - 34px);
         word-break: keep-all;
         margin: 0 6px 0 4px;
+        flex: 1;
       }
 
       &-action-icon {
@@ -170,7 +167,6 @@
 
     &-top-start {
       left: 0;
-
       .nut-popover-arrow-top-start {
         left: 16px;
         transform: translateX(0%);
@@ -186,7 +182,6 @@
 
     &-bottom-end {
       right: 0;
-
       .nut-popover-arrow-bottom-end {
         right: 16px;
         transform: translateX(0%);
@@ -195,7 +190,6 @@
 
     &-bottom-start {
       left: 0;
-
       .nut-popover-arrow-bottom-start {
         left: 16px;
         transform: translateX(0%);
@@ -225,7 +219,18 @@
   color: $popover-content-background-color;
 
   .nut-popover-arrow {
-    border-bottom-color: $popover-text-color;
+    &-top {
+      border-top-color: $popover-text-color;
+    }
+    &-bottom {
+      border-bottom-color: $popover-text-color;
+    }
+    &-left {
+      border-left-color: $popover-text-color;
+    }
+    &-right {
+      border-right-color: $popover-text-color;
+    }
   }
 
   .nut-popover-content {

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;
@@ -492,6 +493,8 @@
   justify-content: center;
   padding: var(--nutui-popover-menu-item-padding, 8px);
   border-bottom: 1px solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  max-width: var(--nutui-popover-menu-item-width, 160px);
+  word-wrap: break-word;
 }
 .nut-popover .nut-popover-content .nut-popover-menu-item:last-child {
   margin-bottom: 0px;
@@ -517,9 +520,10 @@
   font-size: 12px;
 }
 .nut-popover .nut-popover-content .nut-popover-menu-item-name {
-  width: 100%;
+  width: calc(100% - 34px);
   word-break: keep-all;
   margin: 0 6px 0 4px;
+  flex: 1;
 }
 .nut-popover .nut-popover-content .nut-popover-menu-item-action-icon {
   display: flex;
@@ -590,9 +594,18 @@
   background: var(--nutui-popover-text-color, #1a1a1a);
   color: var(--nutui-popover-content-background-color, #ffffff);
 }
-.nut-popover-dark .nut-popover-arrow {
+.nut-popover-dark .nut-popover-arrow-top {
+  border-top-color: var(--nutui-popover-text-color, #1a1a1a);
+}
+.nut-popover-dark .nut-popover-arrow-bottom {
   border-bottom-color: var(--nutui-popover-text-color, #1a1a1a);
 }
+.nut-popover-dark .nut-popover-arrow-left {
+  border-left-color: var(--nutui-popover-text-color, #1a1a1a);
+}
+.nut-popover-dark .nut-popover-arrow-right {
+  border-right-color: var(--nutui-popover-text-color, #1a1a1a);
+}
 .nut-popover-dark .nut-popover-content {
   background: var(--nutui-popover-text-color, #1a1a1a) !important;
   color: var(--nutui-popover-content-background-color, #ffffff) !important;

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

@@ -98,9 +98,6 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    /* #ifdef rn */
-    height: 300px;
-    /* #endif */
 
     &.nut-popup-round {
       border-radius: $popup-border-radius $popup-border-radius 0 0;

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

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-overlay {
   /* #ifdef rn */
   position: absolute;
@@ -146,9 +150,6 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  /* #ifdef rn */
-  height: 300px;
-  /* #endif */
 }
 .nut-popup-bottom.nut-popup-round {
   border-radius: var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-price {
   direction: ltr;
   font-size: var(--nutui-font-size-l, 16px);

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-progress {
   display: flex;
   align-items: center;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-pulltorefresh-head {
   overflow: hidden;
   position: relative;

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-radiogroup .nut-radio {
   margin: 0 var(--nutui-radiogroup-radio-margin, 20px) var(--nutui-radiogroup-radio-margin-bottom, 5px) 0;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-range-container {
   display: flex;
   flex-direction: row;

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

@@ -1,3 +1,3 @@
 import { Rate } from "./rate";
-export type { RateProps } from "./rate";
+export type { RateSize, RateProps } from './types';
 export default Rate;

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

@@ -1,17 +1,3 @@
-import React, { FunctionComponent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface RateProps extends BasicComponent {
-    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;
-}
+import { FunctionComponent } from 'react';
+import { RateProps } from './types';
 export declare const Rate: FunctionComponent<Partial<RateProps>>;

package/dist/es/packages/rate/rate.js

@@ -6,12 +6,14 @@ import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { StarFill } from "@nutui/icons-react-taro";
 import { useReady } from "@tarojs/taro";
-import { View } from "@tarojs/components";
+import { View, Text } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
 import useRefs from "../../utils/use-refs";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    size: 'normal',
+    showScore: false,
     count: 5,
     min: 0,
     checkedIcon: null,
@@ -22,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     touchable: false
 });
 export var Rate = function(props) {
-    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, size = _$_object_spread.size, showScore = _$_object_spread.showScore, count = _$_object_spread.count, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, min = _$_object_spread.min, checkedIcon = _$_object_spread.checkedIcon, uncheckedIcon = _$_object_spread.uncheckedIcon, disabled = _$_object_spread.disabled, readOnly = _$_object_spread.readOnly, allowHalf = _$_object_spread.allowHalf, touchable = _$_object_spread.touchable, onChange = _$_object_spread.onChange, onTouchEnd = _$_object_spread.onTouchEnd;
     var classPrefix = 'nut-rate';
     var _useState = _sliced_to_array(useState([
         1,
@@ -146,7 +148,7 @@ export var Rate = function(props) {
         onTouchCancel: handleTouchEnd
     }, countArray.map(function(n, index) {
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-item"),
+            className: "".concat(classPrefix, "-item ").concat(classPrefix, "-item-").concat(size),
             key: n,
             ref: setRefs(index),
             onClick: function(event) {
@@ -160,6 +162,8 @@ export var Rate = function(props) {
                 return onHalfClick(event, n);
             }
         }, renderIcon(n)));
-    }));
+    }), showScore ? /*#__PURE__*/ React.createElement(Text, {
+        className: classNames("".concat(classPrefix, "-score"), "".concat(classPrefix, "-score-").concat(size), _define_property({}, "".concat(classPrefix, "-score-disabled"), disabled))
+    }, score.toFixed(1)) : null);
 };
 Rate.displayName = 'NutRate';

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

@@ -16,13 +16,9 @@
 
   &-item {
     display: flex;
+    align-items: center;
     flex-shrink: 0;
     position: relative;
-    margin-left: $rate-item-margin;
-
-    &:first-child {
-      margin-left: 0;
-    }
 
     &-half {
       position: absolute;
@@ -37,8 +33,41 @@
       }
     }
 
+    &-normal {
+      margin-left: $rate-item-margin;
+      .nut-icon {
+        height: $rate-icon-size;
+        width: $rate-icon-size;
+      }
+    }
+
+    &-large {
+      margin-left: calc($rate-item-margin * 2);
+      .nut-icon {
+        height: calc($rate-icon-size + 8px);
+        width: calc($rate-icon-size + 8px);
+      }
+    }
+
+    &-small {
+      margin-left: calc($rate-item-margin / 2);
+      .nut-icon {
+        height: calc($rate-icon-size - 4px);
+        width: calc($rate-icon-size - 4px);
+      }
+    }
+
+    &-normal,
+    &-large,
+    &-small {
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
     &-icon {
       display: flex;
+      align-items: center;
       cursor: pointer;
 
       .nut-icon {
@@ -66,18 +95,59 @@
       }
     }
   }
+
+  &-score {
+    display: inline-flex;
+    align-items: center;
+    color: $rate-font-color;
+    font-family: 'JD';
+    line-height: 1;
+
+    &-normal {
+      padding-left: $rate-item-margin;
+      font-size: $rate-font-size;
+    }
+
+    &-large {
+      font-size: calc($rate-font-size + 6px);
+      padding-left: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      font-size: calc($rate-font-size - 2px);
+      padding-left: calc($rate-item-margin / 2);
+    }
+
+    &-disabled {
+      color: $rate-icon-inactive-color;
+    }
+  }
 }
 
 [dir='rtl'] .nut-rate,
 .nut-rtl .nut-rate {
   &-item {
-    margin-right: 0;
-    margin-left: $rate-item-margin;
+    margin-left: 0;
+    &:first-child {
+      margin-right: 0;
+    }
+
+    &-normal {
+      margin-right: $rate-item-margin;
+    }
+
+    &-large {
+      margin-right: calc($rate-item-margin * 2);
+    }
+
+    &-small {
+      margin-right: calc($rate-item-margin - 2px);
+    }
 
     &:last-child {
-      margin-right: 0;
       margin-left: 0;
     }
+
     &-half {
       left: auto;
       right: 0;
@@ -95,4 +165,20 @@
       }
     }
   }
+
+  &-score {
+    padding-left: 0;
+
+    &-large {
+      padding-right: calc($rate-item-margin * 2);
+    }
+
+    &-normal {
+      padding-right: $rate-item-margin;
+    }
+
+    &-small {
+      padding-right: calc($rate-item-margin - 2px);
+    }
+  }
 }