@nutui/nutui-react 1.2.0 → 1.2.1-beta.0

package/dist/style.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.2.0 Wed Jul 27 2022 11:40:34 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.2.1-beta.0 Wed Aug 03 2022 15:54:04 GMT+0800 (China Standard Time)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/themes/default.scss

@@ -61,6 +61,7 @@
 @import '../../packages/animatingnumbers/animatingnumbers.scss';
 @import '../../packages/empty/empty.scss';
 @import '../../packages/virtuallist/virtuallist.scss';
+@import '../../packages/video/video.scss';
 @import '../../packages/address/address.scss';
 @import '../../packages/barrage/barrage.scss';
 @import '../../packages/signature/signature.scss';

package/dist/styles/variables.scss

@@ -15,6 +15,13 @@ $text-color: #808080 !default;
 $disable-color: #cccccc !default;
 $white: #fff;
 $black: #000;
+$required-color: #fa2c19 !default;
+
+$dark-background: #1a1919 !default;
+$dark-background2: #1d1b1c !default;
+$dark-background3: #141414 !default;
+$dark-color: $white !default;
+$dark-color-gray: $text-color !default;
 
 // padding
 $padding-xs: 12px;
@@ -135,8 +142,11 @@ $uploader-picture-height: 100px !default;
 $uploader-background: #f7f8fa !default;
 
 //input
-$input-border-bottom: #eaf0fb;
-$input-disabled-color: #c8c9cc;
+$input-border-bottom: #eaf0fb !default;
+$input-disabled-color: #c8c9cc !default;
+$input-required-color: $required-color !default;
+$input-font-size: $font-size-2 !default;
+$input-padding: 10px 25px !default;
 
 // textarea
 
@@ -305,8 +315,12 @@ $steps-process-icon-text-color: $primary-color !default;
 $dialog-width: 296px;
 
 // checkbox
-$checkbox-label-color: #1d1e1e;
-$checkbox-label-disable-color: #999;
+$checkbox-label-color: #1d1e1e !default;
+$checkbox-label-disable-color: #999 !default;
+$checkbox-icon-disable-color: #d6d6d6 !default;
+$checkbox-label-margin-left: 15px !default;
+$checkbox-label-font-size: 14px !default;
+$checkbox-icon-font-size: 18px !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;
@@ -466,3 +480,79 @@ $divider-vertical-height: 12px !default;
 $divider-vertical-top: 2px !default;
 $divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
 $divider-vertical-margin: 0 8px !default;
+
+// elevator
+$elevator-list-item-highcolor: $primary-color !default;
+$elevator-list-item-font-size: 12px !default;
+$elevator-list-item-font-color: #333333 !default;
+$elevator-list-item-name-padding: 0 20px !default;
+$elevator-list-item-name-height: 30px !default;
+$elevator-list-item-name-line-height: 30px !default;
+$elevator-list-item-code-font-size: 14px !default;
+$elevator-list-item-code-font-color: #1a1a1a !default;
+$elevator-list-item-code-font-weight: 500 !default;
+$elevator-list-item-code-padding: 0 20px !default;
+$elevator-list-item-code-height: 35px !default;
+$elevator-list-item-code-line-height: 35px !default;
+$elevator-list-item-code-after-width: 100% !default;
+$elevator-list-item-code-after-height: 1px !default;
+$elevator-list-item-code-after-bg-color: #f5f5f5 !default;
+$elevator-list-item-code-current-box-shadow: 0 3px 3px 1px
+  rgba(240, 240, 240, 1) !default;
+$elevator-list-item-code-current-bg-color: #fff !default;
+$elevator-list-item-code-current-border-radius: 50% !default;
+$elevator-list-item-code-current-width: 45px !default;
+$elevator-list-item-code-current-height: 45px !default;
+$elevator-list-item-code-current-line-height: 45px !default;
+$elevator-list-item-code-current-position: absolute !default;
+$elevator-list-item-code-current-right: 60px !default;
+$elevator-list-item-code-current-top: 50% !default;
+$elevator-list-item-code-current-transform: translateY(-50%) !default;
+$elevator-list-item-code-current-text-align: center !default;
+$elevator-list-item-bars-position: absolute !default;
+$elevator-list-item-bars-right: 8px !default;
+$elevator-list-item-bars-top: 50% !default;
+$elevator-list-item-bars-transform: translateY(-50%) !default;
+$elevator-list-item-bars-padding: 15px 0 !default;
+$elevator-list-item-bars-background-color: #eeeff2 !default;
+$elevator-list-item-bars-border-radius: 6px !default;
+$elevator-list-item-bars-text-align: center !default;
+$elevator-list-item-bars-z-index: 1 !default;
+$elevator-list-item-bars-inner-item-padding: 3px !default;
+$elevator-list-item-bars-inner-item-font-size: 10px !default;
+$elevator-list-fixed-color: $primary-color !default;
+$elevator-list-fixed-bg-color: $white !default;
+$elevator-list-fixed-box-shadow: 0 0 10px #eee !default;
+$elevator-list-item-bars-inner-item-active-color: $primary-color !default;
+
+//navbar
+$navbar-height: 44px !default;
+$navbar-margin-bottom: 20px !default;
+$navbar-padding: 13px 16px !default;
+$navbar-background: $white !default;
+$navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
+$navbar-color: $title-color2 !default;
+$navbar-title-base-font: $font-size-2 !default;
+$navbar-title-font: $font-size-2 !default;
+$navbar-title-font-weight: 0 !default;
+$navbar-title-font-color: $navbar-color !default;
+$navbar-title-width: 100px !default;
+$navbar-title-icon-margin: 0 0 0 13px !default;
+
+// layout
+$row-content-color: #fff !default;
+$row-content-background-color: #ff8881 !default;
+$row-content-light-background-color: #ffc7c4 !default;
+$row-content-border-radius: 6px !default;
+$row-content-height: 50px !default;
+$row-content-line-height: 40px !default;
+$col-default-margin-bottom: 15px !default;
+
+// animatingnumbers
+$countup-height: 32px !default;
+$countup-base-size: 18px !default;
+$countup-border-raduis: 4px !default;
+$countup-lr-margin: 1px !default;
+$countup-bgcolor: #031f63 !default;
+$countup-color: #ffffff !default;
+$countup-width: 24px !default;

package/dist/types/animatingnumbers/__tests__/animatingnumbers.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/backtop/backtop.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, CSSProperties } from 'react';
+import React, { FunctionComponent } from 'react';
 export interface BackTopProps {
     className?: string;
     bottom: number;
@@ -9,7 +9,7 @@ export interface BackTopProps {
     isAnimation: boolean;
     duration: number;
     children?: HTMLElement | any;
-    style?: CSSProperties;
-    backTopClick: (event: MouseEvent) => void;
+    style?: React.CSSProperties;
+    onClick?: (event: MouseEvent) => void;
 }
-export declare const BackTop: FunctionComponent<Partial<BackTopProps>>;
+export declare const BackTop: FunctionComponent<Partial<BackTopProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/types/checkbox/checkbox.d.ts

@@ -7,6 +7,10 @@ export interface CheckBoxProps {
     iconSize: string | number;
     iconName: string;
     iconActiveName: string;
+    iconIndeterminateName: string;
+    iconClassPrefix: string;
+    iconFontClassName: string;
+    indeterminate: boolean;
     label: string;
     onChange: (state: boolean, label: string) => void;
 }

package/dist/types/checkbox/demo.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+import './demo.scss';
 declare const CheckboxDemo: () => JSX.Element;
 export default CheckboxDemo;

package/dist/types/checkboxgroup/checkboxgroup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface CheckBoxGroupProps {
     disabled: boolean;
     checkedValue: string[];
+    max: number | undefined;
     onChange: (value: string[]) => void;
 }
 export declare const CheckboxGroup: React.ForwardRefExoticComponent<Partial<CheckBoxGroupProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<unknown>>;

package/dist/types/elevator/__tests__/elevator.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/elevator/elevator.d.ts

@@ -1,10 +1,15 @@
 import React, { FunctionComponent } from 'react';
+export declare const elevatorContext: React.Context<ElevatorData>;
 export interface ElevatorProps {
     height: number | string;
     acceptKey: string;
-    indexList: any;
+    indexList: any[];
+    isSticky: boolean;
+    spaceHeight: number;
+    titleHeight: number;
     className: string;
     style: React.CSSProperties;
+    children: React.ReactNode;
     clickItem: (key: string, item: ElevatorData) => void;
     clickIndex: (key: string) => void;
 }

package/dist/types/icon/icon.d.ts

@@ -6,6 +6,7 @@ interface IconProps {
     color: string;
     tag: keyof ReactHTML;
     click: (e: MouseEvent) => void;
+    fontClassName: string;
     className: string;
 }
 export declare const Icon: FunctionComponent<Partial<IconProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/input/input.d.ts

@@ -1,20 +1,57 @@
-import React, { CSSProperties, FunctionComponent } from 'react';
+import React, { CSSProperties, FunctionComponent, HTMLProps, HTMLInputTypeAttribute } from 'react';
+export declare type InputAlignType = 'left' | 'center' | 'right';
+export declare type InputFormatTrigger = 'onChange' | 'onBlur';
+export declare type InputType = HTMLInputTypeAttribute;
+export declare type InputRule = {
+    pattern?: RegExp;
+    message?: string;
+    required?: boolean;
+};
+export declare type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
 export interface InputProps {
-    type: string;
+    type: InputType;
     defaultValue: any;
     placeholder: string;
     label: string;
-    requireShow: boolean;
+    labelClass: string;
+    labelWidth: string | number;
+    labelAlign: InputAlignType;
+    colon: boolean;
+    inputAlign: InputAlignType;
+    center: boolean;
+    required: boolean;
     disabled: boolean;
     readonly: boolean;
-    textAlign: any;
-    maxLength: any;
+    error: boolean;
+    maxlength: any;
+    leftIcon: string;
+    leftIconSize: string | number;
+    rightIcon: string;
+    rightIconSize: string | number;
     clearable: boolean;
+    clearIcon: string;
+    clearSize: string | number;
+    border: boolean;
+    formatTrigger: InputFormatTrigger;
+    rules: Array<InputRule>;
+    errorMessage: string;
+    errorMessageAlign: InputAlignType;
+    rows: string | number;
+    showWordLimit: boolean;
+    autofocus: boolean;
     style?: CSSProperties;
     className?: string;
+    slotButton?: HTMLProps<HTMLElement>;
+    slotInput?: HTMLProps<HTMLElement>;
+    formatter: (value: string) => void;
     change?: (value: any, event: Event) => void;
     blur?: (value: any, event: Event) => void;
     focus?: (value: any, event: Event) => void;
     clear?: (value: any, event: Event) => void;
+    keypress?: (value: any, event: Event) => void;
+    clickInput?: (value: any) => void;
+    clickLeftIcon?: (value: any) => void;
+    clickRightIcon?: (value: any) => void;
+    click?: (value: any) => void;
 }
 export declare const Input: FunctionComponent<Partial<InputProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/navbar/navbar.d.ts

@@ -1,15 +1,20 @@
 import React, { FunctionComponent } from 'react';
 export interface NavBarProps {
-    title: string;
-    desc: string;
     leftShow: boolean;
-    icon: string;
+    title: string;
     titIcon: string;
+    leftText: string;
+    desc: string;
     className: string;
+    fixed: boolean;
+    safeAreaInsetTop: boolean;
+    border: boolean;
+    placeholder: boolean;
+    zIndex: number | string;
     style: React.CSSProperties;
     onClickTitle: (e: React.MouseEvent<HTMLDivElement>) => void;
     onClickIcon: (e: React.MouseEvent<HTMLDivElement>) => void;
     onClickBack: (e: React.MouseEvent<HTMLElement>) => void;
-    onClickClear: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClickRight: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 export declare const NavBar: FunctionComponent<Partial<NavBarProps>>;

package/dist/types/nutui.react.d.ts

@@ -60,6 +60,7 @@ import CollapseItem from './collapseitem';
 import AnimatingNumbers from './animatingnumbers';
 import Empty from './empty';
 import VirtualList from './virtuallist';
+import Video from './video';
 import Address from './address';
 import Barrage from './barrage';
 import Signature from './signature';
@@ -67,4 +68,4 @@ import Card from './card';
 import TimePannel from './timepannel';
 import TimeDetail from './timedetail';
 import TimeSelect from './timeselect';
-export { Button, Cell, CellGroup, Icon, Overlay, Popup, ConfigProvider, Layout, Col, Row, Divider, NavBar, FixedNav, Tabbar, TabbarItem, Elevator, Pagination, Tabs, TabPane, Indicator, Range, Calendar, Checkbox, CheckboxGroup, DatePicker, InputNumber, Input, Radio, RadioGroup, Rate, CalendarItem, Picker, ShortPassword, TextArea, Uploader, ActionSheet, BackTop, Drag, Dialog, Infiniteloading, Notify, Switch, Toast, CircleProgress, NoticeBar, Steps, Step, Swiper, SwiperItem, Avatar, AvatarGroup, Price, Badge, Tag, Popover, Skeleton, CountDown, Collapse, CollapseItem, AnimatingNumbers, Empty, VirtualList, Address, Barrage, Signature, Card, TimePannel, TimeDetail, TimeSelect };
+export { Button, Cell, CellGroup, Icon, Overlay, Popup, ConfigProvider, Layout, Col, Row, Divider, NavBar, FixedNav, Tabbar, TabbarItem, Elevator, Pagination, Tabs, TabPane, Indicator, Range, Calendar, Checkbox, CheckboxGroup, DatePicker, InputNumber, Input, Radio, RadioGroup, Rate, CalendarItem, Picker, ShortPassword, TextArea, Uploader, ActionSheet, BackTop, Drag, Dialog, Infiniteloading, Notify, Switch, Toast, CircleProgress, NoticeBar, Steps, Step, Swiper, SwiperItem, Avatar, AvatarGroup, Price, Badge, Tag, Popover, Skeleton, CountDown, Collapse, CollapseItem, AnimatingNumbers, Empty, VirtualList, Video, Address, Barrage, Signature, Card, TimePannel, TimeDetail, TimeSelect };

package/dist/types/tabpane/tabpane.d.ts

@@ -4,5 +4,6 @@ export interface TabPaneProps {
     paneKey: string | number;
     activeKey: string | number;
     disabled: boolean;
+    autoHeightClassName: string;
 }
 export declare const TabPane: FunctionComponent<Partial<TabPaneProps>>;

package/dist/types/tabs/__test__/tabs.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tabs/tabs.d.ts

@@ -23,6 +23,7 @@ export interface TabsProps {
     titleNode: () => JSX.Element[];
     onChange: (t: Title) => void;
     onClick: (t: Title) => void;
+    autoHeight: boolean;
 }
 export declare const Tabs: FunctionComponent<Partial<TabsProps>>;
 export {};

package/dist/types/video/__tests__/video.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/video/demo.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import './demo.scss';
+declare const VideoDemo: () => JSX.Element;
+export default VideoDemo;

package/dist/types/video/index.d.ts

@@ -0,0 +1,2 @@
+import { Video } from './video';
+export default Video;

package/dist/types/video/video.d.ts

@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from 'react';
+export interface VideoProps {
+    source: {
+        type: string;
+        src: string;
+    };
+    options: {
+        controls?: boolean;
+        muted?: boolean;
+        autoplay?: boolean;
+        poster?: string;
+        playsinline?: boolean;
+        loop?: boolean;
+    };
+    className: string;
+    style: React.CSSProperties;
+    play: (e: HTMLVideoElement) => void;
+    pause: (e: HTMLVideoElement) => void;
+    playend: (e: HTMLVideoElement) => void;
+}
+export declare const Video: FunctionComponent<Partial<VideoProps> & React.HTMLAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react",
-  "version": "1.2.0",
+  "version": "1.2.1-beta.0",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",
@@ -56,7 +56,7 @@
     "lint:fix": "eslint --fix .",
     "publish:beta": "npm publish --tag beta",
     "prepare": "husky install",
-    "test": "jest"
+    "test": "jest --updateSnapshot"
   },
   "engines": {
     "node": "^14.18.0 || >=15.0.0"
@@ -124,7 +124,7 @@
     "inquirer": "^8.0.0",
     "jest": "^27.5.1",
     "lint-staged": "^11.0.0",
-    "lzutf8": "^0.6.0",
+    "lzutf8": "0.6.0",
     "map-stream": "0.0.7",
     "marked": "^2.0.3",
     "postcss-import": "^14.0.2",