@nutui/nutui-react 2.0.0-alpha.13 → 2.0.0-alpha.15

package/dist/styles/variables.scss

@@ -461,13 +461,12 @@ $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 // textarea（✅）
 
 $textarea-font: var(--nutui-textarea-font, $font-size-2) !default;
-$textarea-height: var(--nutui-textarea-height, 100px) !default;
 $textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
 $textarea-limit-color: var(--nutui-textarea-limit-color, $text-color) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $title-color) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  '$title-color'
+  $title-color
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
@@ -1250,124 +1249,87 @@ $noticebar-righticon-margin: var(
 ) !default;
 
 // TimeSelect（✅）
-$timeselect-title-font-size: var(
-  --nutui-timeselect-title-font-size,
-  $font-size-2
-) !default;
-$timeselect-title-color: var(
-  --nutui-timeselect-title-color,
-  $title-color
-) !default;
-$timeselect-title-width: var(--nutui-timeselect-title-width, 100%) !default;
 $timeselect-title-height: var(--nutui-timeselect-title-height, 50px) !default;
 $timeselect-title-line-height: var(
   --nutui-timeselect-title-line-height,
   50px
 ) !default;
-$timeselect-pannel-bg-color: var(
-  --nutui-timeselect-pannel-bg-color,
-  #f6f7f9
-) !default;
-
-// TimePannel（✅）
-$timeselect-timepannel-text-color: var(
-  --nutui-timeselect-timepannel-text-color,
-  $title-color2
+$timeselect-title-color: var(
+  --nutui-timeselect-title-color,
+  $title-color
 ) !default;
-$timeselect-timepannel-font-size: var(
-  --nutui-timeselect-timepannel-font-size,
+$timeselect-title-font-size: var(
+  --nutui-timeselect-title-font-size,
   $font-size-2
 ) !default;
-$timeselect-timepannel-cur-bg-color: var(
-  --nutui-timeselect-timepannel-cur-bg-color,
-  $white
-) !default;
-$timeselect-timepannel-cur-text-color: var(
-  --nutui-timeselect-timepannel-cur-text-color,
-  #333333
-) !default;
-$timeselect-timepannel-width: var(
-  --nutui-timeselect-timepannel-width,
-  140px
+$timeselect-title-background: var(
+  --nutui-timeselect-title-background,
+  $background-color3
 ) !default;
-$timeselect-timepannel-height: var(
-  --nutui-timeselect-timepannel-height,
+
+$timeselect-date-width: var(--nutui-timeselect-date-width, 140px) !default;
+$timeselect-date-height: var(--nutui-timeselect-date-height, 40px) !default;
+$timeselect-date-line-height: var(
+  --nutui-timeselect-date-line-height,
   40px
 ) !default;
-$timeselect-timepannel-padding: var(
-  --nutui-timeselect-timepannel-padding,
-  15px
-) !default;
-
-// TimeDetail（✅）
-$timeselect-timedetail-padding: var(
-  --nutui-timeselect-timedetail-padding,
-  0 5px 50px 13px
+$timeselect-date-color: var(
+  --nutui-timeselect-date-color,
+  $title-color2
 ) !default;
-$timeselect-timedetail-item-width: var(
-  --nutui-timeselect-timedetail-item-width,
-  100px
+$timeselect-date-active-color: var(
+  --nutui-timeselect-date-active-color,
+  $title-color
 ) !default;
-$timeselect-timedetail-item-height: var(
-  --nutui-timeselect-timedetail-item-height,
-  50px
+$timeselect-date-font-size: var(
+  --nutui-timeselect-date-font-size,
+  $font-size-2
 ) !default;
-$timeselect-timedetail-item-line-height: var(
-  --nutui-timeselect-timedetail-item-line-height,
+
+$timeselect-time-width: var(--nutui-timeselect-time-width, 100px) !default;
+$timeselect-time-height: var(--nutui-timeselect-time-height, 50px) !default;
+$timeselect-time-line-height: var(
+  --nutui-timeselect-time-line-height,
   50px
 ) !default;
-$timeselect-timedetail-item-bg-color: var(
-  --nutui-timeselect-timedetail-item-bg-color,
-  #f6f7f9
-) !default;
-$timeselect-timedetail-item-border-radius: var(
-  --nutui-timeselect-timedetail-item-border-radius,
-  5px
-) !default;
-$timeselect-timedetail-item-text-color: var(
-  --nutui-timeselect-timedetail-item-text-color,
-  #333333
-) !default;
-$timeselect-timedetail-item-text-font-size: var(
-  --nutui-timeselect-timedetail-item-text-font-size,
-  $font-size-2
-) !default;
-$timeselect-timedetail-item-cur-bg-color: var(
-  --nutui-timeselect-timedetail-item-cur-bg-color,
-  rgba($primary-color, 0.15)
+$timeselect-time-font-size: var(--nutui-timeselect-font-size, 14px) !default;
+$timeselect-time-margin: var(
+  --nutui-timeselect-time-margin,
+  0 10px 10px 0
 ) !default;
-$timeselect-timedetail-item-cur-border: var(
-  --nutui-timeselect-timedetail-item-cur-border,
-  $primary-color
+$timeselect-time-color: var(
+  --nutui-timeselect-time-color,
+  $title-color
 ) !default;
-$timeselect-timedetail-item-cur-text-color: var(
-  --nutui-timeselect-timedetail-item-cur-text-color,
+$timeselect-time-active-color: var(
+  --nutui-timeselect-time-active-color,
   $primary-color
 ) !default;
-$timeselect-timedetail-time-text-color: var(
-  --nutui-timeselect-timedetail-time-text-color,
-  #999
+$timeselect-time-background: var(
+  --nutui-timeselect-time-background,
+  $background-color
 ) !default;
-$timeselect-timedetail-time-font-size: var(
-  --nutui-timeselect-timedetail-time-font-size,
-  $font-size-1
+$timeselect-time-active-background: var(
+  --nutui-timeselect-time-active-background,
+  $background-color2
 ) !default;
 
 //tag（✅）
 $tag-padding: var(--nutui-tag-padding, 0 4px) !default;
 $tag-font-size: var(--nutui-tag-font-size, 12px) !default;
-$tag-default-border-radius: var(
-  --nutui-tag-default-border-radius,
-  4px
-) !default;
+$tag-border-radius: var(--nutui-tag-border-radius, 4px) !default;
+$tag-height: var(--nutui-tag-height, auto) !default;
+$tag-color: var(--nutui-tag-color, #ffffff) !default;
+$tag-border-width: var(--nutui-tag-border-width, 1px) !default;
 $tag-round-border-radius: var(--nutui-tag-round-border-radius, 8px) !default;
-$tag-default-background-color: var(
-  --nutui-tag-default-background-color,
-  #000000
+$tag-mark-border-radius: var(
+  --nutui-tag-mark-border-radius,
+  0 12px 12px 0
 ) !default;
+$tag-background-color: var(--nutui-tag-background-color, #000000) !default;
 $tag-primary-background-color: var(
   --nutui-tag-primary-background-color,
-  #3460fa
+  $primary-color
 ) !default;
 $tag-success-background-color: var(
   --nutui-tag-success-background-color,
@@ -1379,17 +1341,10 @@ $tag-danger-background-color: linear-gradient(
   rgba(232, 34, 14, 1) 69.83950099728881%,
   rgba(242, 77, 12, 1) 100%
 ) !default;
-$tag-danger-background-color-plain: var(
-  --nutui-tag-danger-background-color-plain,
-  #df3526
-) !default;
 $tag-warning-background-color: var(
   --nutui-tag-warning-background-color,
   #f3812e
 ) !default;
-$tag-default-color: var(--nutui-tag-default-color, #ffffff) !default;
-$tag-border-width: var(--nutui-tag-border-width, 1px) !default;
-$tag-height: var(--nutui-tag-height, auto) !default;
 
 //badge（✅）
 $badge-background-color: var(
@@ -1414,19 +1369,15 @@ $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-1) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-2) !default;
 $popover-menu-item-height: var(--nutui-popover-menu-item-height, 30px) !default;
-$popover-menu-item-name-margin: var(
-  --nutui-popover-menu-item-name-margin,
-  0px 10px
-) !default;
 $popover-menu-item-hover-background-color: var(
   --nutui-popover-menu-item-hover-background-color,
-  $primary-color
+  #fff
 ) !default;
 $popover-menu-item-hover-text-color: var(
   --nutui-popover-menu-item-hover-text-color,
-  $primary-text-color
+  #1a1a1a
 ) !default;
 $popover-menu-item-border-width: var(
   --nutui-popover-menu-item-border-width,
@@ -1446,19 +1397,23 @@ $popover-menu-item-border-bottom: var(
 ) !default;
 $popover-white-background-color: var(
   --nutui-popover-white-background-color,
-  rgba(255, 255, 255, 1)
+  $gray6
 ) !default;
 $popover-dark-background-color: var(
   --nutui-popover-dark-background-color,
   rgba(75, 76, 77, 1)
 ) !default;
+$popover-content-background-color: var(
+  --nutui-popover-content-background-color,
+  $gray6
+) !default;
 $popover-border-bottom-color: var(
   --nutui-popover-border-bottom-color,
   rgba(229, 229, 229, 1)
 ) !default;
 $popover-primary-text-color: var(
   --nutui-popover-primary-text-color,
-  rgba(51, 51, 51, 1)
+  $gray1
 ) !default;
 $popover-disable-color: var(
   --nutui-popover-disable-color,
@@ -1466,7 +1421,7 @@ $popover-disable-color: var(
 ) !default;
 $popover-menu-item-padding: var(
   --nutui-popover-menu-item-padding,
-  8px 0
+  8px
 ) !default;
 $popover-menu-item-margin: var(
   --nutui-popover-menu-item-margin,
@@ -2004,9 +1959,6 @@ $sku-product-img-border-radius: var(
 
 // card（✅）
 $card-font-size-0: var(--nutui-card-font-size-0, $font-size-0) !default;
-$card-font-size-1: var(--nutui-card-font-size-1, $font-size-1) !default;
-$card-font-size-2: var(--nutui-card-font-size-2, $font-size-2) !default;
-$card-font-size-3: var(--nutui-card-font-size-3, $font-size-3) !default;
 $card-left-border-radius: var(--nutui-card-left-border-radius, 0) !default;
 $card-left-background-color: var(
   --nutui-card-left-background-color,
@@ -2060,62 +2012,51 @@ $sidenavbar-content-bg-color: var(
   --nutui-sidenavbar-content-bg-color,
   $white
 ) !default;
-
-// subsidenavbar（✅）
-$sidenavbar-sub-title-border-color: var(
-  --nutui-sidenavbar-sub-title-border-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-bg-color: var(
-  --nutui-sidenavbar-sub-title-bg-color,
-  #f6f6f6
-) !default;
-$sidenavbar-sub-title-font-size: var(
-  --nutui-sidenavbar-sub-title-font-size,
-  $font-size-large
-) !default;
-$sidenavbar-sub-title-radius: var(
-  --nutui-sidenavbar-sub-title-radius,
-  0
+$sidenav-bar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
+$sidenavbar-head-bg-color: var(
+  --nutui-sidenavbar-head-bg-color,
+  #eeeff2
 ) !default;
-$sidenavbar-sub-title-border: var(
-  --nutui-sidenavbar-sub-title-border,
-  0
+$sidenavbar-head-padding: var(--nutui-sidenavbar-head-padding, 10px) !default;
+$sidenavbar-title-padding: var(
+  --nutui-sidenavbar-title-padding,
+  10px 8px 10px 20px
 ) !default;
-$sidenavbar-sub-title-width: var(
-  --nutui-sidenavbar-sub-title-width,
-  100%
+$sidenavbar-title-background: var(
+  --nutui-sidenavbar-title-background,
+  $gray4
 ) !default;
-$sidenavbar-sub-title-height: var(
-  --nutui-sidenavbar-sub-title-height,
-  40px
+$sidenavbar-title-color: var(--nutui-sidenavbar-title-color, $gray1) !default;
+// subsidenavbar（✅）
+$sidenavbar-sub-title-padding: var(
+  --nutui-sidenavbar-sub-title-padding,
+  10px 8px 10px 35px
 ) !default;
-$sidenavbar-sub-title-text-line-height: var(
-  --nutui-sidenavbar-sub-title-text-line-height,
-  40px
+$sidenavbar-sub-title-background: var(
+  --nutui-sidenavbar-sub-title-background,
+  $gray5
 ) !default;
-$sidenavbar-sub-title-text-color: var(
-  --nutui-sidenavbar-sub-title-text-color,
-  $title-color
+$sidenavbar-sub-title-color: var(
+  --nutui-sidenavbar-sub-title-color,
+  $gray1
 ) !default;
 
 // sidenavbaritem（✅）
-$sidenavbar-item-title-color: var(
-  --nutui-sidenavbar-item-title-color,
-  #333
+$sidenavbar-sub-item-color: var(
+  --nutui-sidenavbar-sub-item-color,
+  $gray2
 ) !default;
-$sidenavbar-item-title-bg-color: var(
-  --nutui-sidenavbar-item-title-bg-color,
-  $white
+$sidenavbar-sub-item-padding: var(
+  --nutui-sidenavbar-sub-item-padding,
+  10px 8px 10px 55px
 ) !default;
-$sidenavbar-item-height: var(--nutui-sidenavbar-item-height, 40px) !default;
-$sidenavbar-item-line-height: var(
-  --nutui-sidenavbar-item-line-height,
-  40px
+$sidenavbar-sub-list-background: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray6
 ) !default;
-$sidenavbar-item-font-size: var(
-  --nutui-sidenavbar-item-font-size,
-  16px
+$sidenavbar-sub-list-color: var(
+  --nutui-sidenavbar-sub-list-background,
+  $gray2
 ) !default;
 
 // elevator（✅）

package/dist/types/index.d.ts

@@ -52,7 +52,7 @@ import Badge from './packages/badge';
 import Dialog from './packages/dialog';
 import Drag from './packages/drag';
 import Empty from './packages/empty';
-import Infiniteloading from './packages/infiniteloading';
+import InfiniteLoading from './packages/infiniteloading';
 import NoticeBar from './packages/noticebar';
 import Notify from './packages/notify';
 import Popover from './packages/popover';
@@ -87,8 +87,7 @@ import Video from './packages/video';
 import Barrage from './packages/barrage';
 import Card from './packages/card';
 import TimeDetail from './packages/timedetail';
-import TimePannel from './packages/timepannel';
 import TimeSelect from './packages/timeselect';
 import TrendArrow from './packages/trendarrow';
 import WaterMark from './packages/watermark';
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Sticky, BackTop, Elevator, FixedNav, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, 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, Infiniteloading, NoticeBar, Notify, Popover, PullToRefresh, Skeleton, Swipe, Popup, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, VirtualList, Pagination, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Video, Barrage, Card, TimeDetail, TimePannel, TimeSelect, TrendArrow, WaterMark };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Sticky, BackTop, Elevator, FixedNav, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, 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, InfiniteLoading, NoticeBar, Notify, Popover, PullToRefresh, Skeleton, Swipe, Popup, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, VirtualList, Pagination, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Video, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark };

package/dist/types/locales/base.d.ts

@@ -64,7 +64,7 @@ export interface BaseLang {
     };
     signature: {
         reSign: string;
-        unSupportTpl: string;
+        unsupported: string;
     };
     ecard: {
         chooseText: string;

package/dist/types/packages/barrage/barrage.d.ts

@@ -1,12 +1,35 @@
 import React from 'react';
-export interface BarrageProps {
-    className: string;
-    style: React.CSSProperties;
-    barrageList: Array<string>;
-    frequency: number;
-    loop: boolean;
-    speeds: number;
-    rows: number;
-    top: number;
+import { BasicComponent } from '../../utils/typings';
+export interface BarrageProps extends BasicComponent {
+    /**
+    * 弹幕列表数据
+    * @default []
+    */
+    list: Array<string>
+    /**
+    * 可视区域内每个弹幕出现的时间间隔
+    * @default 500
+    */
+    interval: number
+    /**
+    * 是否循环播放
+    * @default true
+    */
+    loop: boolean
+    /**
+    * 每个弹幕的滚动时间
+    * @default 3000
+    */
+    duration: number
+    /**
+    * 弹幕行数，分几行展示
+    * @default 1
+    */
+    rows: number
+    /**
+    * 弹幕垂直距离
+    * @default 10
+    */
+    gapY: number
 }
 export declare const Barrage: React.ForwardRefExoticComponent<Partial<BarrageProps> & React.RefAttributes<unknown>>;

package/dist/types/packages/barrage/index.d.ts

@@ -1,2 +1,3 @@
 import { Barrage } from './barrage';
+export type { BarrageProps } from './barrage';
 export default Barrage;

package/dist/types/packages/button/button.d.ts

@@ -50,6 +50,7 @@ export interface ButtonProps extends BasicComponent {
     * @default -
     */
     icon: React.ReactNode
+    id: string;
     /**
     * 点击按钮时触发
     * @default false

package/dist/types/packages/card/card.d.ts

@@ -1,17 +1,60 @@
 import React, { FunctionComponent } from 'react';
-export interface CardProps {
-    imgUrl: string;
-    title: string;
-    price: string;
-    vipPrice: string;
-    shopDesc: string;
-    delivery: string;
-    shopName: string;
-    className: string;
-    style: React.CSSProperties;
-    prolistTpl: React.ReactNode;
-    shopTagTpl: React.ReactNode;
-    originTpl: React.ReactNode;
-    footerTpl: React.ReactNode;
+import { BasicComponent } from '../../utils/typings';
+export interface CardProps extends BasicComponent {
+    /**
+    * 左侧图片 Url
+    * @default -
+    */
+    src: string
+    /**
+    * 标题
+    * @default -
+    */
+    title: string
+    /**
+    * 商品价格
+    * @default -
+    */
+    price: string
+    /**
+    * 会员价格
+    * @default -
+    */
+    vipPrice: string
+    /**
+    * 店铺介绍
+    * @default -
+    */
+    shopDescription: string
+    /**
+    * 配送方式
+    * @default -
+    */
+    delivery: string
+    /**
+    * 店铺名称
+    * @default -
+    */
+    shopName: string
+    /**
+    * 自定义商品介绍
+    * @default -
+    */
+    description: React.ReactNode
+    /**
+    * 店铺介绍自定义
+    * @default -
+    */
+    tag: React.ReactNode
+    /**
+    * 价格后方自定义内容
+    * @default -
+    */
+    priceTag: React.ReactNode
+    /**
+    * 右下角内容自定义
+    * @default -
+    */
+    extra: React.ReactNode
 }
 export declare const Card: FunctionComponent<Partial<CardProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/packages/card/index.d.ts

@@ -1,2 +1,3 @@
 import { Card } from './card';
+export type { CardProps } from './card';
 export default Card;