@nutui/nutui-react-taro 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/style.mjs

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.3 Fri Apr 28 2023 15:56:31 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.5 Wed May 10 2023 15:25:36 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/themes/default.scss

@@ -4,7 +4,6 @@
 @import '../../packages/cell/cell.scss';
 @import '../../packages/cellgroup/cellgroup.scss';
 @import '../../packages/configprovider/configprovider.scss';
-@import '../../packages/icon/icon.scss';
 @import '../../packages/image/image.scss';
 @import '../../packages/overlay/overlay.scss';
 @import '../../packages/col/col.scss';

package/dist/styles/variables-jmapp.scss

@@ -470,11 +470,11 @@ $picker-mask-bg-img: var(
 ) !default;
 //input（✅）
 $input-border-bottom: var(--nutui-input-border-bottom, #eaf0fb) !default;
-$input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
-$input-required-color: var(
-  --nutui-input-required-color,
-  $required-color
+$input-border-bottom-width: var(
+  --nutui-input-border-bottom-width,
+  0px
 ) !default;
+$input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-2) !default;
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
@@ -871,28 +871,24 @@ $rate-icon-void-color: var(
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
 $tabbar-active-color: var(--nutui-tabbar-active-color, $primary-color) !default;
-$tabbar-unactive-color: var(
-  --nutui-tabbar-unactive-color,
-  $primary-color
-) !default;
+$tabbar-inactive-color: var(--nutui-tabbar-inactive-color, $gray1) !default;
 $tabbar-border-top: var(--nutui-tabbar-border-top, 1px solid #eee) !default;
 $tabbar-border-bottom: var(
   --nutui-tabbar-border-bottom,
   1px solid #eee
 ) !default;
 $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default;
-$tabbar-item-text-font-size: var(
-  --nutui-tabbar-item-text-font-size,
+$tabbar-text-font-size: var(
+  --nutui-tabbar-text-font-size,
   $font-size-0
 ) !default;
-$tabbar-item-text-line-height: var(
-  --nutui-tabbar-item-text-line-height,
-  20px
+$tabbar-text-large-font-size: var(
+  --nutui-tabbar-text-large-font-size,
+  $font-size-large
 ) !default;
+$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default;
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
-$tabbar-word-margin-top: var(--nutui-tabbar-word-margin-top, 3px) !default;
-$tabbar-dot-right: var(--nutui-tabbar-dot-right, 12px) !default;
-$tabbar-dot-top: var(--nutui-tabbar-dot-top, 0) !default;
+$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 3px) !default;
 
 //infiniteloading（✅）
 $infiniteloading-bottom-color: var(

package/dist/styles/variables.scss

@@ -454,11 +454,11 @@ $picker-mask-bg-img: var(
 
 //input（✅）
 $input-border-bottom: var(--nutui-input-border-bottom, #eaf0fb) !default;
-$input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
-$input-required-color: var(
-  --nutui-input-required-color,
-  $required-color
+$input-border-bottom-width: var(
+  --nutui-input-border-bottom-width,
+  0px
 ) !default;
+$input-disabled-color: var(--nutui-input-disabled-color, #c8c9cc) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-2) !default;
 $input-padding: var(--nutui-input-padding, 10px 25px) !default;
 
@@ -858,28 +858,24 @@ $rate-icon-void-color: var(
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
 $tabbar-active-color: var(--nutui-tabbar-active-color, $primary-color) !default;
-$tabbar-unactive-color: var(
-  --nutui-tabbar-unactive-color,
-  $primary-color
-) !default;
+$tabbar-inactive-color: var(--nutui-tabbar-inactive-color, $gray1) !default;
 $tabbar-border-top: var(--nutui-tabbar-border-top, 1px solid #eee) !default;
 $tabbar-border-bottom: var(
   --nutui-tabbar-border-bottom,
   1px solid #eee
 ) !default;
 $tabbar-box-shadow: var(--nutui-tabbar-box-shadow, none) !default;
-$tabbar-item-text-font-size: var(
-  --nutui-tabbar-item-text-font-size,
+$tabbar-text-font-size: var(
+  --nutui-tabbar-text-font-size,
   $font-size-0
 ) !default;
-$tabbar-item-text-line-height: var(
-  --nutui-tabbar-item-text-line-height,
-  20px
+$tabbar-text-large-font-size: var(
+  --nutui-tabbar-text-large-font-size,
+  $font-size-large
 ) !default;
+$tabbar-text-line-height: var(--nutui-tabbar-text-line-height, 20px) !default;
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
-$tabbar-word-margin-top: var(--nutui-tabbar-word-margin-top, 3px) !default;
-$tabbar-dot-right: var(--nutui-tabbar-dot-right, 12px) !default;
-$tabbar-dot-top: var(--nutui-tabbar-dot-top, 0) !default;
+$tabbar-text-margin-top: var(--nutui-tabbar-text-margin-top, 3px) !default;
 
 //infiniteloading（✅）
 $infiniteloading-bottom-color: var(

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, FunctionComponent, MouseEvent as MouseEvent$1, MouseEventHandler, HTMLInputTypeAttribute, ChangeEvent, FocusEvent, RefObject, Component } from 'react';
-import { ButtonProps as ButtonProps$1, ITouchEvent } from '@tarojs/components';
+import { ButtonProps as ButtonProps$1, ITouchEvent, InputProps as InputProps$1 } from '@tarojs/components';
 import Taro, { InnerAudioContext } from '@tarojs/taro';
 
 interface BasicComponent {
@@ -42,6 +42,7 @@ interface CellGroupProps extends BasicComponent {
     title: ReactNode;
     description: ReactNode;
     children?: ReactNode;
+    divider: boolean;
 }
 declare const CellGroup: FunctionComponent<Partial<CellGroupProps>>;
 
@@ -317,7 +318,7 @@ declare const Elevator: FunctionComponent<Partial<ElevatorProps> & React__defaul
     Context: typeof elevatorContext;
 };
 
-type Direction$1 = 'right' | 'left';
+type Direction$2 = 'right' | 'left';
 type Position$2 = {
     top?: string;
     bottom?: string;
@@ -329,7 +330,7 @@ interface FixedNavProps extends BasicComponent {
     activeText: string;
     inactiveText: string;
     position: Position$2;
-    type: Direction$1;
+    type: Direction$2;
     onChange: (item: any) => void;
     onSelect: (item: any, event: MouseEvent$1) => void;
     content: React__default.ReactNode;
@@ -387,37 +388,40 @@ type SubSideNavBarProps = {
 };
 declare const SubSideNavBar: FunctionComponent<SubSideNavBarProps>;
 
-interface TabbarProps {
-    visible: number | string;
-    activeVisible?: number | string;
-    bottom: boolean;
-    size: string | number;
-    unactiveColor: string;
-    activeColor: string;
-    safeAreaInsetBottom: boolean;
-    className: string;
-    style: React__default.CSSProperties;
-    onSwitch: (child: React__default.ReactElement<any>, active: number) => void;
-    children?: React__default.ReactNode;
+interface BadgeProps extends BasicComponent {
+    value: ReactNode;
+    dot: boolean;
+    max: number;
+    top: string;
+    right: string;
+    color: string;
 }
-declare const Tabbar: FunctionComponent<Partial<TabbarProps>>;
+declare const Badge: FunctionComponent<Partial<BadgeProps>>;
 
-interface TabbarItemProps extends BasicComponent {
-    dot: boolean;
-    className: string;
-    tabTitle: string;
-    icon: React__default.ReactNode;
-    href: string;
-    to: any;
-    num: string | number;
+interface TabbarItemProps extends BadgeProps {
+    title: ReactNode;
+    icon: ReactNode;
     active: boolean;
     activeColor: string;
-    unactiveColor: string;
+    inactiveColor: string;
     index: number;
     handleClick: (idx: number) => void;
 }
 declare const TabbarItem: FunctionComponent<Partial<TabbarItemProps>>;
 
+interface TabbarProps extends BasicComponent {
+    defaultValue: number;
+    value?: number;
+    fixed: boolean;
+    inactiveColor: string;
+    activeColor: string;
+    safeArea: boolean;
+    onSwitch: (value: number) => void;
+}
+declare const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
+    Item: typeof TabbarItem;
+};
+
 interface TabPanelInnerProps {
     autoHeightClassName: string;
 }
@@ -633,32 +637,32 @@ interface RadioGroupOptionType {
     onChange?: MouseEventHandler<HTMLDivElement>;
 }
 
-type CheckboxTextPosition = 'left' | 'right';
+type CheckboxLabelPosition = 'left' | 'right';
 type CheckboxDirection = 'horizontal' | 'vertical';
 interface CheckboxGroupProps {
-    disabled: boolean;
-    checkedValue: string[];
+    disabled?: boolean;
+    value?: string[];
+    defaultValue?: string[];
     max: number | undefined;
-    textPosition: CheckboxTextPosition;
+    labelPosition: CheckboxLabelPosition;
     direction: CheckboxDirection;
-    onChange: (value: string[]) => void;
     options: RadioGroupOptionType[];
+    onChange: (value: string[]) => void;
 }
 declare const CheckboxGroup: React__default.ForwardRefExoticComponent<Partial<CheckboxGroupProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, "onChange"> & React__default.RefAttributes<unknown>>;
 
 interface CheckboxProps extends BasicComponent {
     checked: boolean;
     disabled: boolean;
-    textPosition: 'left' | 'right';
-    iconSize: string | number;
+    defaultChecked: boolean;
+    labelPosition: 'left' | 'right';
     icon: React__default.ReactNode;
-    checkedIcon: React__default.ReactNode;
+    activeIcon: React__default.ReactNode;
     indeterminateIcon: React__default.ReactNode;
-    iconClassPrefix: string;
-    iconFontClassName: string;
+    value: string | number;
     indeterminate: boolean;
     label: string | number;
-    onChange: (state: boolean, label: string) => void;
+    onChange: (value: boolean) => void;
 }
 declare const Checkbox: FunctionComponent<Partial<CheckboxProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'>> & {
     Group: typeof CheckboxGroup;
@@ -783,58 +787,30 @@ declare const Form: FunctionComponent<Partial<FormProps> & React__default.HTMLAt
 
 type InputAlignType = 'left' | 'center' | 'right';
 type InputFormatTrigger = 'onChange' | 'onBlur';
-type InputType = HTMLInputTypeAttribute;
-type InputRule = {
-    pattern?: RegExp;
-    message?: string;
-    required?: boolean;
-};
+type ConfirmTextType = 'send' | 'search' | 'next' | 'go' | 'done';
 interface InputProps extends BasicComponent {
-    type: InputType;
+    type: keyof InputProps$1.Type | HTMLInputTypeAttribute;
     name: string;
-    defaultValue: any;
+    defaultValue?: string;
+    value?: string;
     placeholder: string;
-    label: string;
-    labelClass: string;
-    labelWidth: string | number;
-    labelAlign: InputAlignType;
-    colon: boolean;
-    inputAlign: InputAlignType;
-    center: boolean;
-    required: boolean;
+    align: InputAlignType;
     disabled: boolean;
-    readonly: boolean;
-    error: boolean;
-    maxlength: any;
-    leftIcon: React__default.ReactNode;
-    rightIcon: React__default.ReactNode;
+    readOnly: boolean;
+    maxLength: number;
     clearable: boolean;
     clearIcon: React__default.ReactNode;
-    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?: React__default.ReactNode;
-    slotInput?: React__default.ReactNode;
-    formatter: (value: string) => void;
-    onChange?: (value: any, event: Event) => void;
-    onBlur?: (value: any, event: Event) => void;
-    onFocus?: (value: any, event: Event) => void;
-    onClear?: (value: any, event: Event) => void;
-    keypress?: (value: any, event: Event) => void;
-    onClickInput?: (value: any) => void;
-    onClickLeftIcon?: (value: any) => void;
-    onClickRightIcon?: (value: any) => void;
-    onClick?: (value: any) => void;
+    autoFocus: boolean;
+    confirmType: ConfirmTextType;
+    formatter?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onBlur?: (value: string) => void;
+    onFocus?: (value: string) => void;
+    onClear?: (value: string) => void;
+    onClick?: (e: ITouchEvent) => void;
 }
-declare const Input: FunctionComponent<Partial<InputProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'onClick'>>;
+declare const Input: React__default.ForwardRefExoticComponent<Partial<InputProps> & Partial<Omit<InputProps$1, "type" | "ref" | "onFocus" | "onBlur">> & React__default.RefAttributes<unknown>>;
 
 interface InputNumberProps extends BasicComponent {
     disabled: boolean;
@@ -930,11 +906,11 @@ interface PickerProps {
 declare const Picker: React__default.ForwardRefExoticComponent<Partial<PickerProps> & React__default.RefAttributes<unknown>>;
 
 type Position$1 = 'left' | 'right';
-type Direction = 'horizontal' | 'vertical';
+type Direction$1 = 'horizontal' | 'vertical';
 interface RadioGroupProps {
     value: string | number | boolean | null;
     textPosition: Position$1;
-    direction: Direction;
+    direction: Direction$1;
     onChange: (value: string | number | boolean) => void;
     options: RadioGroupOptionType[];
 }
@@ -1272,16 +1248,6 @@ interface ActionSheetProps {
 }
 declare const ActionSheet: FunctionComponent<Partial<ActionSheetProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
-interface BadgeProps extends BasicComponent {
-    value: ReactNode;
-    dot: boolean;
-    max: number;
-    top: string;
-    right: string;
-    color: string;
-}
-declare const Badge: FunctionComponent<Partial<BadgeProps>>;
-
 interface BasicDialogProps {
     visible?: boolean;
     title?: ReactNode;
@@ -1319,11 +1285,11 @@ interface DragProps extends BasicComponent {
 }
 declare const Drag: FunctionComponent<Partial<DragProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
-interface EmptyProps {
-    image: ReactNode;
+interface EmptyProps extends BasicComponent {
+    image?: ReactNode;
     imageSize: number | string;
     description: ReactNode;
-    className: string;
+    status: 'empty' | 'error' | 'network';
 }
 declare const Empty: FunctionComponent<Partial<EmptyProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
@@ -1446,7 +1412,6 @@ interface SkeletonProps {
 declare const Skeleton: FunctionComponent<Partial<SkeletonProps>>;
 
 type SwipeSide = 'left' | 'right';
-type SwipePosition = SwipeSide | 'cell' | 'outside';
 interface SwipeInstance {
     open: (side: SwipeSide) => void;
     close: () => void;
@@ -1458,10 +1423,6 @@ interface SwipeProps {
     style: React__default.CSSProperties;
     /** 标识符，可以在事件参数中获取到 */
     name?: string | number;
-    /** 指定左侧滑动区域宽度，单位为px */
-    leftWidth?: string | number;
-    /** 指定右侧滑动区域宽度，单位为 px */
-    rightWidth?: string | number;
     /** 左侧滑动区域的内容 */
     leftAction?: React__default.ReactNode;
     /** 右侧滑动区域的内容 */
@@ -1478,10 +1439,10 @@ interface SwipeProps {
     /** 关闭时触发 */
     onClose?: ({ name, position, }: {
         name: string | number;
-        position: SwipePosition;
+        position: SwipeSide;
     }) => void;
     /** 点击时触发 */
-    onActionClick?: (event: Event, position: SwipePosition) => void;
+    onActionClick?: (event: Event, position: SwipeSide) => void;
     onTouchStart?: (event: Event) => void;
     onTouchEnd?: (event: Event) => void;
     onTouchMove?: (event: Event) => void;
@@ -1584,44 +1545,39 @@ interface AvatarProps extends BasicComponent {
     size: string;
     icon: React__default.ReactNode;
     shape: AvatarShape;
-    bgColor: string;
+    background: string;
     color: string;
-    prefixCls: string;
-    url: string;
-    className: string;
-    style: React__default.CSSProperties;
-    activeAvatar: (e: MouseEvent) => void;
-    onActiveAvatar: (e: MouseEvent) => void;
-    onError: (e: any) => void;
+    fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    src: string;
+    alt: string;
+    onClick: (e: MouseEvent) => void;
+    onError: () => void;
 }
 type AvatarShape = 'round' | 'square';
-declare const Avatar: FunctionComponent<Partial<AvatarProps> & React__default.HTMLAttributes<HTMLDivElement>>;
+declare const Avatar: FunctionComponent<Partial<AvatarProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onClick'>>;
 
-interface AvatarGroupProps {
+interface AvatarGroupProps extends BasicComponent {
     maxContent: string;
-    maxCount: string | number;
-    maxBgColor: string;
+    max: string | number;
+    maxBackground: string;
     maxColor: string;
-    size: string;
-    shape: string;
-    span: string;
-    zIndex: string;
-    className: string;
-    style: React__default.CSSProperties;
+    size: 'large' | 'normal' | 'small';
+    shape: 'round' | 'square';
+    gap: string;
+    level: 'left' | 'right';
 }
 declare const AvatarGroup: FunctionComponent<Partial<AvatarGroupProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
-interface CircleProgressProps {
-    progress: string | number;
+interface CircleProgressProps extends BasicComponent {
+    percent: string | number;
     strokeWidth?: string | number;
     radius?: number | string;
-    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit' | undefined;
-    circleColor?: object | string;
-    pathColor?: string;
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    color?: object | string;
+    background?: string;
     clockwise?: boolean;
-    className?: string;
 }
-declare const CircleProgress: FunctionComponent<CircleProgressProps & React__default.HTMLAttributes<HTMLDivElement>>;
+declare const CircleProgress: FunctionComponent<CircleProgressProps & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'color'>>;
 
 interface CollapseProps {
     className: string;
@@ -1666,9 +1622,10 @@ interface CountDownProps {
 }
 declare const CountDown: React__default.ForwardRefExoticComponent<Partial<CountDownProps> & React__default.RefAttributes<unknown>>;
 
-interface EllipsisProps {
+type Direction = 'start' | 'end' | 'middle';
+interface EllipsisProps extends BasicComponent {
     content: string;
-    direction: string;
+    direction: Direction;
     rows: number | string;
     expandText: string;
     collapseText: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.5",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",

package/dist/esm/Icon.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { c as cn } from './bem-350c1702.js';
-import '@bem-react/classname';
-
-const defaultProps = {
-    name: '',
-    size: '',
-    classPrefix: 'nut-icon',
-    fontClassName: 'nutui-iconfont',
-    color: '',
-    tag: 'i',
-    onClick: (e) => { },
-    className: '',
-};
-function pxCheck(value) {
-    if (value === '') {
-        return value;
-    }
-    if (Number.isNaN(Number(value))) {
-        return String(value);
-    }
-    return `${value}px`;
-}
-function Icon(props) {
-    const { name, size, classPrefix, color, tag, children, className, fontClassName, style, onClick, ...rest } = {
-        ...defaultProps,
-        ...props,
-    };
-    const isImage = name ? name.indexOf('/') !== -1 : false;
-    const type = isImage ? 'img' : tag;
-    const b = cn('icon');
-    const handleClick = (e) => {
-        if (onClick) {
-            onClick(e);
-        }
-    };
-    const hasSrc = () => {
-        if (isImage)
-            return { src: name };
-        return {};
-    };
-    const styles = {};
-    const checkedSize = pxCheck(size);
-    if (checkedSize) {
-        styles.width = styles.height = styles.fontSize = checkedSize;
-    }
-    return React.createElement(type, {
-        className: isImage
-            ? `${b('img')} ${className || ''} `
-            : `${fontClassName} ${b(null)} ${classPrefix}-${name} ${className || ''}`,
-        style: {
-            color,
-            ...styles,
-            ...style,
-        },
-        ...rest,
-        onClick: handleClick,
-        ...hasSrc(),
-    }, children);
-}
-Icon.defaultProps = defaultProps;
-Icon.displayName = 'NutIcon';
-
-export { Icon as default };