@nutui/nutui-react-taro 1.5.1 → 2.0.0-alpha.1

package/dist/esm/{dialog.taro-a3267d29.js → dialog.taro-00ac41fd.js}

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { B as Button } from './button.taro-9244d065.js';
+import { B as Button } from './button.taro-a1c9512f.js';
 import { View } from '@tarojs/components';
 import { CSSTransition } from 'react-transition-group';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
 
 const Content = (props) => {
     const { visible, title, footer, textAlign, footerDirection, onClickSelf, children, } = props;
@@ -66,7 +66,7 @@ const DialogWrapper = (props) => {
 DialogWrapper.displayName = 'NutDialogWrapper';
 
 const defaultProps = {
-    okText: '',
+    confirmText: '',
     cancelText: '',
     mask: true,
     closeOnClickOverlay: true,
@@ -81,7 +81,7 @@ const defaultProps = {
 };
 const BaseDialog = forwardRef((props, ref) => {
     const { locale } = useConfig();
-    const { visible, footer, noOkBtn, noCancelBtn, lockScroll, okBtnDisabled, cancelAutoClose, okText, cancelText, onClosed, onCancel, onOk, ...restProps } = props;
+    const { visible, footer, noOkBtn, noCancelBtn, lockScroll, okBtnDisabled, cancelAutoClose, confirmText, cancelText, onClosed, onCancel, onOk, ...restProps } = props;
     const renderFooter = function () {
         if (footer === null)
             return '';
@@ -107,7 +107,7 @@ const BaseDialog = forwardRef((props, ref) => {
             !noCancelBtn && (React__default.createElement(Button, { size: "small", plain: true, type: "primary", className: "nut-dialog__footer-cancel", onClick: (e) => handleCancel(e) }, cancelText || locale.cancel)),
             !noOkBtn && (React__default.createElement(Button, { size: "small", type: "primary", className: classNames('nut-dialog__footer-ok', {
                     disabled: okBtnDisabled,
-                }), disabled: okBtnDisabled, onClick: (e) => handleOk(e) }, okText || locale.confirm))));
+                }), disabled: okBtnDisabled, onClick: (e) => handleOk(e) }, confirmText || locale.confirm))));
         return footerContent;
     };
     return (React__default.createElement(DialogWrapper, { ...restProps, visible: visible, lockScroll: lockScroll, footer: renderFooter(), onClosed: onClosed, onCancel: onCancel }));

package/dist/esm/divider.taro-6c1657ce.js

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import classNames from 'classnames';
+
+const defaultProps = {
+    contentPosition: 'center',
+    direction: 'horizontal',
+};
+const classPrefix = `nut-divider`;
+const Divider = (props) => {
+    const { children, contentPosition, style, className, direction, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classes = direction === 'horizontal'
+        ? classNames({
+            [`${classPrefix}`]: true,
+            [`${classPrefix}__center`]: children,
+            [`${classPrefix}__left`]: contentPosition === 'left',
+            [`${classPrefix}__right`]: contentPosition === 'right',
+            [`${classPrefix}__hairline`]: true,
+        })
+        : classNames({
+            [`${classPrefix}`]: true,
+            [`${classPrefix}__vertical`]: direction === 'vertical',
+        });
+    return (React__default.createElement("div", { className: `${classes} ${className || ''}`, style: style, ...rest }, children));
+};
+Divider.defaultProps = defaultProps;
+Divider.displayName = 'NutDivider';
+
+export { Divider as D };

package/dist/esm/{elevator.taro-6019669e.js → elevator.taro-81a11ecc.js}

@@ -152,7 +152,7 @@ const Elevator = (props) => {
         isSticky && scrollTop > 0 ? (React__default.createElement("div", { className: b('list__fixed') },
             React__default.createElement("span", { className: "fixed-title" }, indexList[currentIndex][acceptKey]))) : null,
         React__default.createElement("div", { className: b('list'), style: { height: Number.isNaN(+height) ? height : `${height}px` } },
-            React__default.createElement(ScrollView, { scrollTop: scrollTop, scrollY: true, className: b('list__inner'), ref: listview, onScroll: listViewScroll }, indexList.map((item, idx) => {
+            React__default.createElement(ScrollView, { scrollTop: scrollTop, scrollY: true, type: "list", className: b('list__inner'), ref: listview, onScroll: listViewScroll }, indexList.map((item, idx) => {
                 return (React__default.createElement("div", { className: `${b('list__item')} elevator__item__${idx}`, key: idx },
                     React__default.createElement("div", { className: b('list__item__code') }, item[acceptKey]),
                     React__default.createElement(React__default.Fragment, null, item.list.map((subitem) => {

package/dist/esm/{ellipsis.taro-f15f26da.js → ellipsis.taro-b6cda065.js}

@@ -1,7 +1,7 @@
 import React__default, { useState, useRef, useEffect } from 'react';
 import { useReady, nextTick, createSelectorQuery } from '@tarojs/taro';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
-import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
 
 const defaultProps = {
     content: '',

package/dist/esm/{empty.taro-04ae4389.js → empty.taro-fde835ca.js}

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect } from 'react';
 import { c as cn } from './bem-350c1702.js';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
 
 /**
  * 内置图片地址

package/dist/esm/fixednav.taro-39fbd47a.js

@@ -0,0 +1,54 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { Left } from '@nutui/icons-react-taro';
+import { O as Overlay } from './overlay.taro-ad0d4775.js';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    activeText: '',
+    inactiveText: '',
+    type: 'right',
+    position: {
+        top: 'auto',
+        bottom: 'auto',
+    },
+};
+const FixedNav = (props) => {
+    const { locale } = useConfig();
+    const { className, overlay, visible, list, activeText, inactiveText, position, onChange, onSelect, type, children, style, content, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classPrefix = 'nut-fixednav';
+    const classes = classNames({
+        active: visible,
+    }, type, className, classPrefix);
+    const handleClick = (item, event) => {
+        onSelect(event, item);
+    };
+    const onUpdateValue = (value = !visible) => {
+        onChange(value);
+    };
+    return (React__default.createElement("div", { className: classes, style: {
+            ...position,
+            ...style,
+        }, ...rest },
+        overlay && (React__default.createElement(Overlay, { visible: visible, zIndex: 200, onClick: () => onUpdateValue(false) })),
+        React__default.createElement("div", { className: "list" }, children || (React__default.createElement("div", { className: `${classPrefix}__list` }, list.map((item, index) => {
+            return (React__default.createElement("div", { className: `${classPrefix}__list-item`, onClick: (event) => handleClick(item, event), key: item.id || index },
+                React__default.createElement("img", { src: item.icon, alt: "" }),
+                React__default.createElement("div", { className: `${classPrefix}__list-text` }, item.text),
+                item.num && React__default.createElement("div", { className: "b" }, item.num)));
+        })))),
+        React__default.createElement("div", { className: `${classPrefix}__btn`, onClick: () => onUpdateValue() }, content || (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Left, { color: "#fff" }),
+            React__default.createElement("div", { className: "text" }, visible
+                ? activeText || locale.fixednav.activeText
+                : inactiveText || locale.fixednav.inactiveText))))));
+};
+FixedNav.defaultProps = defaultProps;
+FixedNav.displayName = 'NutFixedNav';
+
+export { FixedNav as F };

package/dist/esm/{form.taro-0c8e7a39.js → form.taro-0d83f1e8.js}

@@ -1,7 +1,7 @@
 import React__default, { useRef } from 'react';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
-import { C as CellGroup } from './cellgroup.taro-abe501bc.js';
-import { a as FormItemContext, F as FormItem } from './formitem.taro-190a3326.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
+import { C as CellGroup } from './cellgroup.taro-6e901b54.js';
+import { a as FormItemContext, F as FormItem } from './formitem.taro-0de07d1e.js';
 
 /**
  * 用于存储表单的数据

package/dist/esm/{formitem.taro-190a3326.js → formitem.taro-0de07d1e.js}

@@ -1,6 +1,6 @@
 import React__default, { createContext } from 'react';
-import { C as Cell } from './cell.taro-a10a74d3.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { C as Cell } from './cell.taro-26870740.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const FormItemContext = createContext({});
 

package/dist/esm/{grid.taro-3503b82c.js → grid.taro-3797169c.js}

@@ -1,32 +1,22 @@
 import React__default from 'react';
 import classNames from 'classnames';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
-import { c as cn } from './bem-350c1702.js';
-import { G as GridContext } from './grid.taro.context-c2bbfb4f.js';
+import { a as GridContext, G as GridItem, p as pxCheck } from './griditem.taro-04f59ae1.js';
 
 const defaultProps = {
-    columnNum: 4,
-    border: true,
-    gutter: 0,
+    columns: 4,
+    gap: 0,
     center: true,
     square: false,
     reverse: false,
     direction: 'vertical',
-    iconSize: 28,
-    iconColor: '',
 };
 const Grid = (props) => {
-    useConfig();
-    const { children, columnNum, border, gutter, center, square, reverse, direction, style, iconSize, iconColor, className, onClick, ...rest } = { ...defaultProps, ...props };
+    const { children, columns, gap, center, square, reverse, direction, style, className, onClick, ...rest } = { ...defaultProps, ...props };
     const childrenDom = React__default.Children.toArray(children);
-    const pxCheck = (value) => {
-        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
-    };
-    const b = cn('grid');
+    const classPrefix = 'nut-grid';
     const rootClass = () => {
-        const prefixCls = b();
-        return classNames(className, prefixCls, {
-            [b('border')]: border && !gutter,
+        return classNames(className, classPrefix, {
+            [`${classPrefix}__border`]: !gap,
         });
     };
     const rootStyle = () => {
@@ -34,8 +24,8 @@ const Grid = (props) => {
         if (style) {
             styleSelf = style;
         }
-        if (gutter) {
-            styleSelf.paddingLeft = pxCheck(gutter);
+        if (gap) {
+            styleSelf.paddingLeft = pxCheck(gap);
         }
         return styleSelf;
     };
@@ -43,19 +33,17 @@ const Grid = (props) => {
         React__default.createElement(GridContext.Provider, { value: { onClick } }, childrenDom.map((item, idex) => {
             return React__default.cloneElement(item, {
                 index: idex,
-                columnNum,
+                columns,
                 center,
-                border,
-                gutter,
+                gap,
                 square,
                 reverse,
                 direction,
-                parentIconSize: iconSize,
-                parentIconColor: iconColor,
             });
         }))));
 };
 Grid.defaultProps = defaultProps;
 Grid.displayName = 'NutGrid';
+Grid.Item = GridItem;
 
 export { Grid as G };

package/dist/esm/griditem.taro-04f59ae1.js

@@ -0,0 +1,80 @@
+import React__default, { useContext } from 'react';
+import classNames from 'classnames';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
+
+const gridContext = {
+    onClick: (item, index) => { },
+};
+var GridContext = React__default.createContext(gridContext);
+
+const pxCheck = (value) => {
+    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+};
+
+const defaultProps = {
+    text: '',
+    columns: 4,
+    gap: 0,
+    center: true,
+    square: false,
+    reverse: false,
+    direction: 'vertical',
+};
+const GridItem = (props) => {
+    useConfig();
+    const { children, style, columns, index, gap, square, text, center, reverse, direction, className, onClick, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classPrefix = 'nut-grid-item';
+    const classes = classNames(classPrefix, className);
+    const context = useContext(GridContext);
+    const rootStyle = () => {
+        const styles = {
+            flexBasis: `${100 / +columns}%`,
+            ...style,
+        };
+        if (square) {
+            styles.paddingTop = `${100 / +columns}%`;
+        }
+        else if (gap) {
+            styles.paddingRight = pxCheck(gap);
+            if (index >= Number(columns)) {
+                styles.marginTop = pxCheck(gap);
+            }
+        }
+        return styles;
+    };
+    const contentClass = () => {
+        return classNames(`${classPrefix}__content`, {
+            [`${classPrefix}__content--border`]: true,
+            [`${classPrefix}__content--surround`]: gap,
+            [`${classPrefix}__content--center`]: center,
+            [`${classPrefix}__content--square`]: square,
+            [`${classPrefix}__content--reverse`]: reverse,
+            [`${classPrefix}__content--${direction}`]: !!direction,
+        });
+    };
+    const handleClick = (e) => {
+        onClick && onClick(e);
+        context.onClick &&
+            context.onClick({
+                text,
+                index,
+                columns,
+                gap,
+                center,
+                square,
+                reverse,
+                direction,
+            }, index);
+    };
+    return (React__default.createElement("div", { className: classes, style: rootStyle(), ...rest, onClick: handleClick },
+        React__default.createElement("div", { className: contentClass() },
+            children && React__default.createElement(React__default.Fragment, null, children),
+            text && React__default.createElement("div", { className: `${classPrefix}__text` }, text))));
+};
+GridItem.defaultProps = defaultProps;
+GridItem.displayName = 'NutGridItem';
+
+export { GridItem as G, GridContext as a, pxCheck as p };

package/dist/esm/{image.taro-142cf512.js → image.taro-edb572bb.js}

@@ -1,6 +1,6 @@
 import React__default, { useState, useEffect } from 'react';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
-import { I as Icon } from './icon.taro-296a1bec.js';
+import { Image as Image$1, ImageError } from '@nutui/icons-react-taro';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
 
 const defaultProps = {
     fit: 'fill',
@@ -55,8 +55,8 @@ const Image = (props) => {
             imageClick(e);
         } },
         React__default.createElement("img", { className: "nut-img", style: styles, src: src, alt: alt, onLoad: load, onError: error }),
-        showLoading && loading ? (React__default.createElement("div", { className: "nut-img-loading" }, slotLoding || children || React__default.createElement(Icon, { name: "image" }))) : null,
-        showError && isError && !loading ? (React__default.createElement("div", { className: "nut-img-error" }, slotError || children || React__default.createElement(Icon, { name: "image-error" }))) : null));
+        showLoading && loading ? (React__default.createElement("div", { className: "nut-img-loading" }, slotLoding || children || React__default.createElement(Image$1, null))) : null,
+        showError && isError && !loading ? (React__default.createElement("div", { className: "nut-img-error" }, slotError || children || React__default.createElement(ImageError, null))) : null));
 };
 Image.defaultProps = defaultProps;
 Image.displayName = 'NutImage';

package/dist/esm/{imagepreview.taro-c50bb0a3.js → imagepreview.taro-b88fcf41.js}

@@ -1,5 +1,5 @@
 import React__default, { useRef, useState, useEffect } from 'react';
-import { P as Popup } from './popup.taro-01676bff.js';
+import { P as Popup } from './popup.taro-020bf791.js';
 import { S as Swiper } from './swiper.taro-7a94e211.js';
 import { S as SwiperItem } from './swiperitem-c9e3d0d5.js';
 
@@ -148,7 +148,7 @@ const ImagePreview = (props) => {
             onCloseInner();
         }
     };
-    return (React__default.createElement(Popup, { visible: showPop, popClass: "custom-pop", style: { width: '100%' }, onClick: onCloseInner },
+    return (React__default.createElement(Popup, { visible: showPop, className: "custom-pop", style: { width: '100%' }, onClick: onCloseInner },
         React__default.createElement("div", { className: "nut-imagepreview", ref: nutImagePreview, onClick: closeOnImg, onTouchStart: onTouchStart },
             React__default.createElement(Swiper, { autoPlay: autoplay, className: "nut-imagepreview-swiper", loop: true, isPreventDefault: false, style: { display: showPop ? 'block' : 'none' }, direction: "horizontal", onChange: slideChangeEnd, initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1), paginationColor: paginationColor, paginationVisible: paginationVisible }, images && images.length > 0
                 ? images.map((item, index) => {

package/dist/esm/indicator.taro-c10334e8.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import classNames from 'classnames';
+
+const defaultProps = {
+    total: 3,
+    current: 1,
+    direction: 'horizontal',
+};
+const classPrefix = `nut-indicator`;
+const Indicator = (props) => {
+    const { total, current, children, className, direction, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const classes = classNames({
+        [`${classPrefix}__vertical`]: direction === 'vertical',
+    });
+    const renderElement = () => {
+        const childs = [];
+        for (let item = 1; item <= total; item++) {
+            childs.push(item === current ? (React__default.createElement(React__default.Fragment, null, children || (React__default.createElement("div", { key: item, className: `${classPrefix}__dot ${classPrefix}__active` })))) : (React__default.createElement("div", { key: item, className: `${classPrefix}__dot` })));
+        }
+        return childs;
+    };
+    return (React__default.createElement("div", { className: classNames(classes, className), ...rest }, renderElement()));
+};
+Indicator.defaultProps = defaultProps;
+Indicator.displayName = 'NutIndicator';
+
+export { Indicator as I };

package/dist/esm/{infiniteloading.taro-183bccbf.js → infiniteloading.taro-73c9b8ca.js}

@@ -3,9 +3,8 @@ import classNames from 'classnames';
 import { ScrollView } from '@tarojs/components';
 import { createSelectorQuery } from '@tarojs/taro';
 import { c as cn } from './bem-350c1702.js';
-import { I as Icon } from './icon.taro-296a1bec.js';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 const defaultProps = {
     ...ComponentDefaults,
@@ -14,14 +13,14 @@ const defaultProps = {
     containerId: '',
     isOpenRefresh: false,
     pullIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
-    pullTxt: '松开刷新',
+    pullText: '松开刷新',
     loadIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
-    loadTxt: '加载中···',
-    loadMoreTxt: '哎呀，这里是底部了啦',
+    loadingText: '加载中···',
+    loadMoreText: '哎呀，这里是底部了啦',
 };
 const Infiniteloading = (props) => {
     const { locale } = useConfig();
-    const { children, hasMore, upperThreshold, containerId, isOpenRefresh, pullIcon, pullTxt, loadIcon, loadTxt, loadMoreTxt, className, onRefresh, onLoadMore, onScrollChange, iconClassPrefix, iconFontClassName, } = {
+    const { children, hasMore, upperThreshold, containerId, isOpenRefresh, pullIcon, pullText, loadIcon, loadingText, loadMoreText, className, onRefresh, onLoadMore, onScrollChange, } = {
         ...defaultProps,
         ...props,
     };
@@ -48,9 +47,7 @@ const Infiniteloading = (props) => {
         const parentElement = getParentElement('scroller');
         parentElement
             .boundingClientRect((rect) => {
-            scrollHeight.current = Array.isArray(rect)
-                ? rect[0].height
-                : rect.height;
+            scrollHeight.current = rect.height;
         })
             .exec();
     };
@@ -128,15 +125,15 @@ const Infiniteloading = (props) => {
             onRefresh && onRefresh(refreshDone);
         }
     };
-    return (React__default.createElement(ScrollView, { className: classes, scrollY: true, id: "scroller", style: { height: '100%' }, onScroll: scrollAction, onScrollToLower: lower, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
+    return (React__default.createElement(ScrollView, { className: classes, scrollY: true, id: "scroller", type: "list", style: { height: '100%' }, onScroll: scrollAction, onScrollToLower: lower, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
         React__default.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() },
             React__default.createElement("div", { className: "top-box" },
-                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "top-img", name: pullIcon }),
-                React__default.createElement("span", { className: "top-text" }, pullTxt || locale.infiniteloading.pullRefreshText))),
+                pullIcon && React__default.createElement(React__default.Fragment, null, pullIcon),
+                React__default.createElement("span", { className: "top-text" }, pullText || locale.infiniteloading.pullRefreshText))),
         React__default.createElement("div", { className: "nut-infinite-container" }, children),
         React__default.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? (React__default.createElement("div", { className: "bottom-box" },
-            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "bottom-img", name: loadIcon }),
-            React__default.createElement("div", { className: "bottom-text" }, loadTxt || locale.infiniteloading.loadText))) : (!hasMore && (React__default.createElement("div", { className: "tips" }, loadMoreTxt || locale.infiniteloading.loadMoreText))))));
+            loadIcon && React__default.createElement(React__default.Fragment, null, loadIcon),
+            React__default.createElement("div", { className: "bottom-text" }, loadingText || locale.infiniteloading.loadText))) : (!hasMore && (React__default.createElement("div", { className: "tips" }, loadMoreText || locale.infiniteloading.loadMoreText))))));
 };
 Infiniteloading.defaultProps = defaultProps;
 Infiniteloading.displayName = 'NutInfiniteloading';

package/dist/esm/{input.taro-97af6c96.js → input.taro-10ed5500.js}

@@ -1,7 +1,7 @@
 import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
-import { I as Icon } from './icon.taro-296a1bec.js';
-import { u as useConfig } from './configprovider.taro-8d71eb49.js';
-import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { MaskClose } from '@nutui/icons-react-taro';
+import { u as useConfig } from './configprovider.taro-c8c54556.js';
+import { C as ComponentDefaults } from './typings-d8491423.js';
 
 function trimExtraChar(value, char, regExp) {
     const index = value.indexOf(char);
@@ -48,12 +48,10 @@ const defaultProps = {
     readonly: false,
     error: false,
     maxlength: '9999',
-    leftIcon: '',
-    leftIconSize: '',
-    rightIcon: '',
-    rightIconSize: '',
+    leftIcon: null,
+    rightIcon: null,
     clearable: false,
-    clearIcon: 'mask-close',
+    clearIcon: null,
     clearSize: '14',
     border: true,
     formatTrigger: 'onChange',
@@ -68,7 +66,7 @@ const defaultProps = {
 };
 const Input = forwardRef((props, ref) => {
     const { locale } = useConfig();
-    const { children, type, name, defaultValue, placeholder, label, labelClass, labelWidth, labelAlign, colon, inputAlign, center, required, disabled, readonly, error, maxlength, leftIcon, leftIconSize, rightIcon, rightIconSize, clearable, clearIcon, clearSize, border, formatTrigger, rules, errorMessage, errorMessageAlign, showWordLimit, autofocus, style, className, rows, slotButton, slotInput, onChange, onBlur, onFocus, onClear, formatter, keypress, onClickInput, onClickLeftIcon, onClickRightIcon, onClick, iconClassPrefix, iconFontClassName, ...rest } = {
+    const { children, type, name, defaultValue, placeholder, label, labelClass, labelWidth, labelAlign, colon, inputAlign, center, required, disabled, readonly, error, maxlength, leftIcon, rightIcon, clearable, clearIcon, clearSize, border, formatTrigger, rules, errorMessage, errorMessageAlign, showWordLimit, autofocus, style, className, rows, slotButton, slotInput, onChange, onBlur, onFocus, onClear, formatter, keypress, onClickInput, onClickLeftIcon, onClickRightIcon, onClick, ...rest } = {
         ...defaultProps,
         ...props,
     };
@@ -111,10 +109,10 @@ const Input = forwardRef((props, ref) => {
     }, [disabled, required, error, border, slotButton, rightIcon, center]);
     const updateValue = (value, trigger = 'onChange') => {
         let val = value;
-        if (type === 'tel') {
+        if (type === 'digit' || type === 'tel') {
             val = formatNumber(val, false, false);
         }
-        if (['number', 'digit'].includes(type)) {
+        if (type === 'number') {
             val = formatNumber(val, true, true);
         }
         if (type === 'tel' && !formatter) {
@@ -169,9 +167,12 @@ const Input = forwardRef((props, ref) => {
     const resetValidation = () => {
     };
     const inputType = (type) => {
-        if (type === 'tel') {
+        if (type === 'number') {
             return 'text';
         }
+        if (type === 'digit') {
+            return 'tel';
+        }
         return type;
     };
     const handleClear = (event) => {
@@ -189,10 +190,9 @@ const Input = forwardRef((props, ref) => {
             React__default.createElement("div", { className: "nut-input-inner", onClick: (e) => {
                     handleClickInput(e);
                 } }, slotInput)))) : (React__default.createElement(React__default.Fragment, null,
-        leftIcon && leftIcon.length > 0 ? (React__default.createElement("div", { className: "nut-input-left-icon", onClick: (e) => {
+        React__default.isValidElement(leftIcon) ? (React__default.createElement("div", { className: "nut-input-left-icon", onClick: (e) => {
                 handleClickLeftIcon(e);
-            } },
-            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: leftIcon, size: leftIconSize }))) : null,
+            } }, leftIcon)) : null,
         label ? (React__default.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
             React__default.createElement("div", { className: "label-string" },
                 label,
@@ -218,13 +218,10 @@ const Input = forwardRef((props, ref) => {
                         }, onInput: (e) => {
                             handleInput(e);
                         } })),
-                    clearable && !readonly && active && inputValue.length > 0 ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "nut-input-clear", name: clearIcon, size: clearSize, onClick: (e) => {
-                            handleClear(e);
-                        } })) : null),
-                rightIcon && rightIcon.length > 0 ? (React__default.createElement("div", { className: "nut-input-right-icon", onClick: (e) => {
+                    clearable && !readonly && active && inputValue.length > 0 ? (React__default.createElement("span", { className: "nut-input-clear-wrap", onClick: (e) => handleClear(e) }, clearIcon || React__default.createElement(MaskClose, { className: "nut-input-clear" }))) : null),
+                React__default.isValidElement(rightIcon) ? (React__default.createElement("div", { className: "nut-input-right-icon", onClick: (e) => {
                         handleClickRightIcon(e);
-                    } },
-                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon, size: rightIconSize }))) : null,
+                    } }, rightIcon)) : null,
                 slotButton ? (React__default.createElement("div", { className: "nut-input-button" }, slotButton)) : null,
                 showWordLimit && maxlength ? (React__default.createElement("div", { className: "nut-input-word-limit" },
                     React__default.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0),