@nutui/nutui-react 1.3.11 → 1.3.12-beta.0

package/dist/style.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.11 Wed Nov 16 2022 13:46:43 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.12-beta.0 Wed Nov 23 2022 14:51:20 GMT+0800 (China Standard Time)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/themes/default.scss

@@ -45,6 +45,8 @@
 @import '../../packages/cascader/cascader.scss';
 @import '../../packages/searchbar/searchbar.scss';
 @import '../../packages/numberkeyboard/numberkeyboard.scss';
+@import '../../packages/form/form.scss';
+@import '../../packages/formitem/formitem.scss';
 @import '../../packages/actionsheet/actionsheet.scss';
 @import '../../packages/backtop/backtop.scss';
 @import '../../packages/drag/drag.scss';

package/dist/styles/variables.scss

@@ -1,34 +1,85 @@
+// 品牌色
+// 纯色
+$brand-color: #fa2c19 !default;
+// 渐变色
+$brand-color-start: #ff404f !default;
+$brand-color-end: #fa2c19 !default;
+
+$gray0: #000000 !default;
+// 灰阶
+// 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
+$gray1: #1a1a1a !default;
+
+// 次要文字色，用于次级标题、属性标示、非主要信息引导等。
+$gray2: #757575 !default;
+
+// 不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
+$gray3: #bfbfbf !default;
+
+// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
+$gray4: #f4f4f4 !default;
+
+// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
+$gray5: #f8f8f8 !default;
+
+// 卡片背景色
+$gray6: #ffffff !default;
+
+// 页面全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+$gray7: rgba(0, 0, 0, 0.7) !default;
+
+// 局部蒙层，用于非整页遮罩
+$gray8: rgba(0, 0, 0, 0.4) !default;
+
+// 间隔线/容错线，用于结构或信息分割
+$gray9: rgba(0, 0, 0, 0.08) !default;
+
+// 图片容错蒙层
+$gray10: rgba(0, 0, 0, 0.02) !default;
+
+// 暗黑映射
+$dark1: #e6e6e6 !default;
+$dark2: #828282 !default;
+$dark3: #404040 !default;
+$dark4: #0a0a0a !default;
+$dark5: #141414 !default;
+$dark6: #1f1f1f !default;
+$dark7: rgba(0, 0, 0, 0.7) !default;
+$dark8: rgba(0, 0, 0, 0.4) !default;
+$dark9: rgba(0, 0, 0, 0.08) !default;
+$dark10: rgba(0, 0, 0, 0.02) !default;
+
 // color
 
 // 主色调
-$primary-color: #fa2c19 !default;
-$primary-color-end: #fa6419 !default;
+$primary-color: $brand-color !default;
+$primary-color-end: $brand-color-end !default;
 // 辅助色
-$help-color: #f5f5f5 !default;
+$help-color: $gray5 !default;
 // 标题常规文字
-$title-color: #1a1a1a !default;
+$title-color: $gray1 !default;
 // 副标题
-$title-color2: #666666 !default;
+$title-color2: $gray2 !default;
 // 次内容
-$text-color: #808080 !default;
+$text-color: $gray2 !default;
 // 特殊禁用色
-$disable-color: #cccccc !default;
-$white: #fff !default;
-$black: #000 !default;
+$disable-color: $gray3 !default;
+$white: $gray6 !default;
+$black: $gray0 !default;
 $required-color: #fa2c19 !default;
 
-$dark-background: #131313 !default;
-$dark-background2: #1b1b1b !default;
-$dark-background3: #141414 !default;
-$dark-background4: #323233 !default;
-$dark-background5: #646566 !default;
-$dark-background6: #380e08 !default;
-$dark-background7: #707070 !default;
-$dark-color: $white !default;
-$dark-color2: #f2270c !default;
-$dark-color3: rgba(232, 230, 227, 0.8) !default;
-$dark-color-gray: $text-color !default;
-$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;
+$dark-background: $dark1 !default;
+$dark-background2: $dark2 !default;
+$dark-background3: $dark3 !default;
+$dark-background4: $dark4 !default;
+$dark-background5: $dark5 !default;
+$dark-background6: $dark6 !default;
+$dark-background7: $dark7 !default;
+$dark-color: $dark1 !default;
+$dark-color2: $dark2 !default;
+$dark-color3: $dark3 !default;
+$dark-color-gray: $dark2 !default;
+$dark-calendar-choose-color: $dark1 !default;
 
 // padding
 $padding-xs: 12px;
@@ -311,9 +362,9 @@ $toast-title-font-size: 16px !default;
 $toast-text-font-size: 14px !default;
 $toast-font-color: $white !default;
 $toast-inner-padding: 24px 30px !default;
-$toast-inner-bg-color: rgba(0, 0, 0, 0.8) !default;
+$toast-inner-bg-color: $gray7 !default;
 $toast-inner-border-radius: 12px !default;
-$toast-cover-bg-color: rgba(0, 0, 0, 0) !default;
+$toast-cover-bg-color: $gray7 !default;
 
 //backtop（✅）
 $backtop-border-color: #e0e0e0 !default;
@@ -497,10 +548,10 @@ $checkbox-icon-font-size: 18px !default;
 $checkbox-icon-disable-color2: $help-color !default;
 
 //radio（✅）
-$radio-label-font-color: #1d1e1e !default;
+$radio-label-font-color: $gray1 !default;
 $radio-label-font-active-color: $primary-color !default;
-$radio-label-disable-color: #999 !default;
-$radio-icon-disable-color: #d6d6d6 !default;
+$radio-label-disable-color: $gray3 !default;
+$radio-icon-disable-color: $gray3 !default;
 $radio-label-button-border-color: $primary-color !default;
 $radio-label-button-background: rgba($primary-color, 0.05) !default;
 $radio-label-margin-left: 15px !default;

package/dist/types/index.d.ts

@@ -578,6 +578,9 @@ interface RangeProps {
     hiddenTag: boolean;
     min: number | string;
     max: number | string;
+    minDesc: number | string;
+    maxDesc: number | string;
+    curValueDesc: number | string;
     step: number | string;
     modelValue: SliderValue;
     button: React__default.ReactNode;
@@ -1132,6 +1135,96 @@ interface NumberKeyboardProps {
 }
 declare const NumberKeyboard: FunctionComponent<Partial<NumberKeyboardProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'>>;
 
+interface FormItemRuleWithoutValidator {
+    [key: string]: any;
+    regex?: RegExp;
+    required?: boolean;
+    message?: string;
+}
+interface FormItemRule extends FormItemRuleWithoutValidator {
+    validator?: (value: any, ruleCfg: FormItemRuleWithoutValidator) => boolean | string | Promise<boolean | string>;
+}
+interface BaseFormField {
+    /**
+     * 字段名
+     */
+    name: string;
+    /**
+     * label 标签的文本
+     */
+    label: string;
+    /**
+     * 校验规则，设置字段的校验逻辑
+     */
+    rules: FormItemRule[];
+    /**
+     * 是否禁用表单项
+     */
+    disabled: boolean;
+}
+
+interface ConfigConsumerProps {
+    [propName: string]: any;
+}
+declare const FormItemContext: React$1.Context<ConfigConsumerProps>;
+
+declare type TextAlign = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';
+interface FormItemProps extends IComponent, BaseFormField {
+    labelWidth: string | number;
+    errorMessageAlign: TextAlign;
+    showErrorLine: boolean;
+    showErrorMessage: boolean;
+}
+declare const defaultProps: FormItemProps;
+declare type FieldProps = typeof defaultProps & Partial<BaseFormField>;
+declare class FormItem extends React__default.Component<FieldProps> {
+    static defaultProps: FormItemProps;
+    static contextType: any;
+    context: React__default.ContextType<typeof FormItemContext>;
+    private cancelRegister;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getControlled: (children: React__default.ReactElement) => {
+        value: any;
+        onChange: (event: React__default.ChangeEvent<HTMLInputElement> | number | string | string[]) => void;
+    };
+    onStoreChange: () => void;
+    renderLayout: (childNode: React__default.ReactNode) => JSX.Element;
+    pxCheck: (value: string | number) => string;
+    render(): JSX.Element;
+}
+
+interface BaseForm {
+    /**
+     * 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建
+     */
+    form: any;
+    /**
+     * label的位置
+     * 可选值 top/left/right
+     */
+    labelPosition: string | number;
+    /**
+     * 表单分组名称
+     */
+    formGroupTitle: string;
+    starPositon: string;
+    /**
+     * 表单校验成功回调
+     */
+    onFinish: (obj: object) => void;
+    /**
+     * 表单校验失败回调
+     */
+    onFinishFailed: (value: []) => void;
+}
+
+interface FormProps extends IComponent, BaseForm {
+}
+declare const Form: FunctionComponent<Partial<FormProps> & React__default.HTMLAttributes<HTMLFormElement>> & {
+    Item: typeof FormItem;
+};
+
 declare type ItemType<T> = {
     [key: string]: T;
 };
@@ -1956,4 +2049,4 @@ interface TimeSelectProps {
 }
 declare const TimeSelect: FunctionComponent<Partial<TimeSelectProps>>;
 
-export { ActionSheet, ActionSheetProps, Address, AddressProps, AnimatingNumbers, AnimatingNumbersProps, Audio, AudioProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, Barrage, BarrageProps, Button, ButtonProps, Calendar, CalendarItem, CalendarItemProps, CalendarProps, Card, CardProps, Cascader, CascaderProps, Cell, CellGroup, CellGroupProps, CellProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CircleProgress, CircleProgressProps, Col, ColProps, Collapse, CollapseItem, CollapseItemProps, CollapseProps, ConfigProvider, ConfigProviderProps, CountDown, CountDownProps, DatePicker, DatePickerProps, Dialog, DialogProps, Divider, DividerProps, Drag, DragProps, Elevator, ElevatorProps, Empty, EmptyProps, FixedNav, FixedNavProps, Grid, GridItem, GridItemProps, GridProps, Icon, IconProps, ImagePreview, ImagePreviewProps, Indicator, IndicatorProps, Infiniteloading, InfiniteloadingProps, Input, InputNumber, InputNumberProps, InputProps, Layout, LayoutProps, Menu, MenuItem, MenuItemProps, MenuProps, NavBar, NavBarProps$1 as NavBarProps, NoticeBar, NoticeBarProps, _default$1 as Notify, NotifyProps, NumberKeyboard, NumberKeyboardProps, Overlay, OverlayProps, Pagination, PaginationProps, Picker, PickerProps, Popover, PopoverProps, Popup, PopupProps, Price, PriceProps, Progress, ProgressProps, PullToRefresh, PullToRefreshProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Range, RangeProps, Rate, RateProps, Row, RowProps, SearchBar, SearchBarProps, ShortPassword, ShortPasswordProps, SideNavBar, SideNavBarItem, SideNavBarItemProps, SideNavBarProps, Signature, SignatureProps, Skeleton, SkeletonProps, Step, StepProps, Steps, StepsProps, Sticky, StickyProps, SubSideNavBar, SubSideNavBarProps, Swipe, SwipeProps, Swiper, SwiperItem, SwiperItemProps, SwiperProps, Switch, SwitchProps, TabPane, TabPaneProps, Tabbar, TabbarItem, TabbarItemProps, TabbarProps, Table, TableProps, Tabs, TabsProps, Tag, TagProps, TextArea, TextAreaProps, TimeDetail, TimeDetailProps, TimePannel, TimePannelProps, TimeSelect, TimeSelectProps, _default as Toast, ToastProps, Uploader, UploaderProps, Video, VideoProps, VirtualList, VirtualListProps };
+export { ActionSheet, ActionSheetProps, Address, AddressProps, AnimatingNumbers, AnimatingNumbersProps, Audio, AudioProps, Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, Barrage, BarrageProps, Button, ButtonProps, Calendar, CalendarItem, CalendarItemProps, CalendarProps, Card, CardProps, Cascader, CascaderProps, Cell, CellGroup, CellGroupProps, CellProps, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, CircleProgress, CircleProgressProps, Col, ColProps, Collapse, CollapseItem, CollapseItemProps, CollapseProps, ConfigProvider, ConfigProviderProps, CountDown, CountDownProps, DatePicker, DatePickerProps, Dialog, DialogProps, Divider, DividerProps, Drag, DragProps, Elevator, ElevatorProps, Empty, EmptyProps, FixedNav, FixedNavProps, Form, FormItem, FormItemProps, FormProps, Grid, GridItem, GridItemProps, GridProps, Icon, IconProps, ImagePreview, ImagePreviewProps, Indicator, IndicatorProps, Infiniteloading, InfiniteloadingProps, Input, InputNumber, InputNumberProps, InputProps, Layout, LayoutProps, Menu, MenuItem, MenuItemProps, MenuProps, NavBar, NavBarProps$1 as NavBarProps, NoticeBar, NoticeBarProps, _default$1 as Notify, NotifyProps, NumberKeyboard, NumberKeyboardProps, Overlay, OverlayProps, Pagination, PaginationProps, Picker, PickerProps, Popover, PopoverProps, Popup, PopupProps, Price, PriceProps, Progress, ProgressProps, PullToRefresh, PullToRefreshProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Range, RangeProps, Rate, RateProps, Row, RowProps, SearchBar, SearchBarProps, ShortPassword, ShortPasswordProps, SideNavBar, SideNavBarItem, SideNavBarItemProps, SideNavBarProps, Signature, SignatureProps, Skeleton, SkeletonProps, Step, StepProps, Steps, StepsProps, Sticky, StickyProps, SubSideNavBar, SubSideNavBarProps, Swipe, SwipeProps, Swiper, SwiperItem, SwiperItemProps, SwiperProps, Switch, SwitchProps, TabPane, TabPaneProps, Tabbar, TabbarItem, TabbarItemProps, TabbarProps, Table, TableProps, Tabs, TabsProps, Tag, TagProps, TextArea, TextAreaProps, TimeDetail, TimeDetailProps, TimePannel, TimePannelProps, TimeSelect, TimeSelectProps, _default as Toast, ToastProps, Uploader, UploaderProps, Video, VideoProps, VirtualList, VirtualListProps };

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

@@ -44,6 +44,8 @@ import Uploader from '@/packages/uploader';
 import Cascader from '@/packages/cascader';
 import SearchBar from '@/packages/searchbar';
 import NumberKeyboard from '@/packages/numberkeyboard';
+import Form from '@/packages/form';
+import FormItem from '@/packages/formitem';
 import ActionSheet from '@/packages/actionsheet';
 import BackTop from '@/packages/backtop';
 import Drag from '@/packages/drag';
@@ -86,7 +88,7 @@ import TimePannel from '@/packages/timepannel';
 import TimeDetail from '@/packages/timedetail';
 import TimeSelect from '@/packages/timeselect';
 
-export { Button,Cell,CellGroup,Icon,Overlay,Popup,ConfigProvider,Layout,Col,Row,Divider,Grid,GridItem,Sticky,NavBar,FixedNav,Tabbar,TabbarItem,Elevator,Pagination,Tabs,TabPane,Indicator,SideNavBar,SubSideNavBar,SideNavBarItem,Menu,MenuItem,Range,Calendar,Checkbox,CheckboxGroup,DatePicker,InputNumber,Input,Radio,RadioGroup,Rate,CalendarItem,Picker,ShortPassword,TextArea,Uploader,Cascader,SearchBar,NumberKeyboard,ActionSheet,BackTop,Drag,Dialog,Infiniteloading,Notify,Switch,Toast,Swipe,PullToRefresh,CircleProgress,NoticeBar,Steps,Step,Swiper,SwiperItem,Avatar,AvatarGroup,Price,Badge,Tag,Popover,Skeleton,CountDown,Collapse,CollapseItem,AnimatingNumbers,Empty,VirtualList,Table,Video,Progress,Audio,ImagePreview,Address,Barrage,Signature,Card,TimePannel,TimeDetail,TimeSelect };
+export { Button,Cell,CellGroup,Icon,Overlay,Popup,ConfigProvider,Layout,Col,Row,Divider,Grid,GridItem,Sticky,NavBar,FixedNav,Tabbar,TabbarItem,Elevator,Pagination,Tabs,TabPane,Indicator,SideNavBar,SubSideNavBar,SideNavBarItem,Menu,MenuItem,Range,Calendar,Checkbox,CheckboxGroup,DatePicker,InputNumber,Input,Radio,RadioGroup,Rate,CalendarItem,Picker,ShortPassword,TextArea,Uploader,Cascader,SearchBar,NumberKeyboard,Form,FormItem,ActionSheet,BackTop,Drag,Dialog,Infiniteloading,Notify,Switch,Toast,Swipe,PullToRefresh,CircleProgress,NoticeBar,Steps,Step,Swiper,SwiperItem,Avatar,AvatarGroup,Price,Badge,Tag,Popover,Skeleton,CountDown,Collapse,CollapseItem,AnimatingNumbers,Empty,VirtualList,Table,Video,Progress,Audio,ImagePreview,Address,Barrage,Signature,Card,TimePannel,TimeDetail,TimeSelect };
 export type { ButtonProps } from '@/packages/button/button';
 export type { CellProps } from '@/packages/cell/cell';
 export type { CellGroupProps } from '@/packages/cellgroup/cellgroup';
@@ -133,6 +135,8 @@ export type { UploaderProps } from '@/packages/uploader/uploader';
 export type { CascaderProps } from '@/packages/cascader/cascader';
 export type { SearchBarProps } from '@/packages/searchbar/searchbar';
 export type { NumberKeyboardProps } from '@/packages/numberkeyboard/numberkeyboard';
+export type { FormProps } from '@/packages/form/form';
+export type { FormItemProps } from '@/packages/formitem/formitem';
 export type { ActionSheetProps } from '@/packages/actionsheet/actionsheet';
 export type { BackTopProps } from '@/packages/backtop/backtop';
 export type { DragProps } from '@/packages/drag/drag';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react",
-  "version": "1.3.11",
+  "version": "1.3.12-beta.0",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",
@@ -64,6 +64,8 @@
     "lint": "eslint ./src/packages/calendar",
     "lint:fix": "eslint --fix ./src/packages/calendar",
     "publish:beta": "npm publish --tag beta",
+    "prepublishOnly": "node scripts/taro/prepublish.js",
+    "postpublish": "node scripts/taro/postpublish.js",
     "prepare": "husky install",
     "test": "jest",
     "test:demo": "jest  --testNamePattern=^should match snapshot$ --runTestsByPath ./src/packages/collapse/__test__/collapse.spec.tsx",
@@ -92,8 +94,6 @@
     "@react-spring/web": "^9.3.2",
     "@use-gesture/react": "^10.2.9",
     "classnames": "^2.3.1",
-    "mobx-react-lite": "^3.4.0",
-    "react-router-dom": "^5.2.0",
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
@@ -112,8 +112,8 @@
     "@rollup/plugin-node-resolve": "^13.1.1",
     "@rollup/plugin-typescript": "^8.3.0",
     "@tarojs/components": "^3.5.5",
-    "@tarojs/taro": "^3.5.5",
     "@tarojs/plugin-platform-weapp": "^3.5.7",
+    "@tarojs/taro": "^3.5.5",
     "@tarojs/taro-loader": "^3.5.7",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^13.3.0",
@@ -130,6 +130,7 @@
     "@typescript-eslint/parser": "^4.24.0",
     "@vitejs/plugin-react": "^1.1.3",
     "@vitejs/plugin-react-refresh": "^1.3.1",
+    "async-validator": "^4.2.5",
     "autoprefixer": "^10.4.0",
     "axios": "^0.21.1",
     "babel-plugin-react-scoped-css": "^1.1.1",
@@ -154,6 +155,7 @@
     "map-stream": "0.0.7",
     "marked": "^2.0.3",
     "mobx": "^6.6.2",
+    "mobx-react-lite": "^3.4.0",
     "postcss-import": "^14.0.2",
     "postcss-modules": "^4.2.2",
     "prettier": "2.3.0",