@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/esm/ImagePreview.js

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,33 +23,47 @@ function _objectSpread(target) {
 }
 import React__default, { useRef, useState, useEffect } from "react";
 import Popup from "./Popup.js";
+import Image from "./Image.js";
 import Video from "./Video.js";
 import Swiper from "./Swiper.js";
 import SwiperItem from "./SwiperItem.js";
-var defaultProps = {
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   images: [],
   videos: [],
-  show: false,
-  autoplay: 3e3,
-  initNo: 1,
-  contentClose: false,
-  paginationVisible: false,
-  paginationColor: "#fff",
+  visible: false,
+  autoPlay: 3e3,
+  defaultValue: 0,
+  closeOnContentClick: false,
+  indicator: false,
+  indicatorColor: "#fff",
+  onChange: function onChange(value) {
+  },
   onClose: function onClose() {
   }
-};
+});
 var ImagePreview = function ImagePreview2(props) {
-  var images = props.images, videos = props.videos, show = props.show, initNo = props.initNo, paginationColor = props.paginationColor, paginationVisible = props.paginationVisible, autoplay = props.autoplay, contentClose = props.contentClose, onClose2 = props.onClose;
-  var nutImagePreview = useRef(null);
-  var _useState = useState(initNo), _useState2 = _slicedToArray(_useState, 2), innerNo = _useState2[0], setInnerNo = _useState2[1];
-  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), showPop = _useState4[0], setShowPop = _useState4[1];
-  var _useState5 = useState(1), _useState6 = _slicedToArray(_useState5, 2), active = _useState6[0], setActive = _useState6[1];
-  var _useState7 = useState(1), _useState8 = _slicedToArray(_useState7, 2), maxNo = _useState8[0], setMaxNo = _useState8[1];
-  var _useState9 = useState({
+  var images = props.images, videos = props.videos, visible = props.visible, defaultValue = props.defaultValue, indicatorColor = props.indicatorColor, indicator = props.indicator, autoPlay = props.autoPlay, closeOnContentClick = props.closeOnContentClick, onClose2 = props.onClose;
+  var classPrefix = "nut-imagepreview";
+  var ref = useRef(null);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue,
+    finalValue: defaultValue,
+    onChange: function onChange2(val) {
+      var _props$onChange;
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, val);
+    }
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerNo = _usePropsValue2[0], setInnerNo = _usePropsValue2[1];
+  var _useState = useState(visible), _useState2 = _slicedToArray(_useState, 2), showPop = _useState2[0], setShowPop = _useState2[1];
+  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), active = _useState4[0], setActive = _useState4[1];
+  var _useState5 = useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), _useState6 = _slicedToArray(_useState5, 1), maxNo = _useState6[0];
+  var _useState7 = useState({
     scale: 1,
     moveable: false
-  }), _useState10 = _slicedToArray(_useState9, 2), store = _useState10[0], setStore = _useState10[1];
-  var _useState11 = useState(0), _useState12 = _slicedToArray(_useState11, 2), lastTouchEndTime = _useState12[0], setLastTouchEndTime = _useState12[1];
+  }), _useState8 = _slicedToArray(_useState7, 2), store = _useState8[0], setStore = _useState8[1];
+  var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), lastTouchEndTime = _useState10[0], setLastTouchEndTime = _useState10[1];
   var onTouchStart = function onTouchStart2(event) {
     var touches = event.touches;
     var events = touches[0];
@@ -110,33 +124,34 @@ var ImagePreview = function ImagePreview2(props) {
       scaleNow();
     }
   };
+  useEffect(function() {
+    init();
+  }, []);
   var init = function init2() {
     document.addEventListener("touchmove", onTouchMove);
     document.addEventListener("touchend", onTouchEnd);
     document.addEventListener("touchcancel", onTouchEnd);
   };
   useEffect(function() {
-    setShowPop(show);
-    setInnerNo(initNo);
-    setActive(initNo);
-    init();
-  }, [show, initNo]);
+    setShowPop(visible);
+  }, [visible]);
   useEffect(function() {
-    if (innerNo !== void 0) {
-      setActive(innerNo);
-    }
-    if (show !== void 0) {
-      setShowPop(show);
-    }
-    if (images && videos) {
-      setMaxNo(images.length + videos.length);
-    }
-  }, []);
+    setInnerNo(defaultValue || 1);
+  }, [defaultValue]);
+  useEffect(function() {
+    setActive(innerNo);
+  }, [innerNo]);
   var scaleNow = function scaleNow2() {
-    if (nutImagePreview.current) {
-      nutImagePreview.current.style.transform = "scale(".concat(store.scale, ")");
+    if (ref.current) {
+      ref.current.style.transform = "scale(".concat(store.scale, ")");
     }
   };
+  var getDistance = function getDistance2(first, second) {
+    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+  };
+  var slideChangeEnd = function slideChangeEnd2(page) {
+    setActive(page + 1);
+  };
   var onCloseInner = function onCloseInner2() {
     setShowPop(false);
     setActive(1);
@@ -146,42 +161,38 @@ var ImagePreview = function ImagePreview2(props) {
       scale: 1
     }));
   };
-  var getDistance = function getDistance2(first, second) {
-    return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
-  };
-  var slideChangeEnd = function slideChangeEnd2(page) {
-    setActive(page + 1);
-  };
   var closeOnImg = function closeOnImg2() {
-    if (contentClose) {
+    if (closeOnContentClick) {
       onCloseInner();
     }
   };
   return React__default.createElement(Popup, {
     visible: showPop,
-    className: "custom-pop",
+    className: "".concat(classPrefix, "-pop"),
     style: {
       width: "100%"
     },
     onClick: onCloseInner
   }, React__default.createElement("div", {
-    className: "nut-imagepreview",
-    ref: nutImagePreview,
+    className: classPrefix,
+    ref,
     onClick: closeOnImg,
     onTouchStart
   }, React__default.createElement(Swiper, {
-    autoPlay: autoplay,
-    className: "nut-imagepreview-swiper",
+    autoPlay,
+    className: "".concat(classPrefix, "-swiper"),
     loop: true,
-    isPreventDefault: false,
+    preventDefault: false,
     style: {
-      display: showPop ? "block" : "none"
+      display: showPop ? "block" : "none",
+      "--nutui-indicator-color": indicatorColor
     },
     direction: "horizontal",
-    onChange: slideChangeEnd,
-    initPage: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
-    paginationColor,
-    paginationVisible
+    onChange: function onChange2(page) {
+      return slideChangeEnd(page);
+    },
+    defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+    indicator
   }, (videos && videos.length > 0 ? videos.map(function(item, index) {
     return React__default.createElement(SwiperItem, {
       key: index
@@ -192,13 +203,11 @@ var ImagePreview = function ImagePreview2(props) {
   }) : []).concat(images && images.length > 0 ? images.map(function(item, index) {
     return React__default.createElement(SwiperItem, {
       key: index
-    }, React__default.createElement("img", {
-      src: item.src,
-      alt: "",
-      className: "nut-imagepreview-img"
+    }, React__default.createElement(Image, {
+      src: item.src
     }));
   }) : []))), React__default.createElement("div", {
-    className: "nut-imagepreview-index"
+    className: "".concat(classPrefix, "-index")
   }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)));
 };
 ImagePreview.defaultProps = defaultProps;

package/dist/esm/Indicator/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Indicator/style/style.css

@@ -0,0 +1 @@
+.nut-indicator__dot{margin:0 var(--nutui-indicator-dot-margin, 4px)}.nut-indicator__dot:first-child{margin-left:0}.nut-indicator__dot:last-child{margin-right:0}.nut-indicator__dot{display:inline-block;vertical-align:middle;width:var(--nutui-indicator-dot-size, 5px);height:var(--nutui-indicator-dot-size, 5px);border-radius:50%;background-color:var(--nutui-indicator-dot-color, var(--nutui-gray-3, #bfbfbf))}.nut-indicator__active{width:var(--nutui-indicator-dot-active-size, 15px);border-radius:var(--nutui-indicator-border-size, 3px);background-color:var(--nutui-indicator-color, var(--nutui-brand-color, #fa2c19))}.nut-indicator__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}.nut-indicator__vertical .nut-indicator__dot{margin:var(--nutui-indicator-dot-vertical-margin, 4px) 0}.nut-indicator__vertical .nut-indicator__dot:first-child{margin-top:0}.nut-indicator__vertical .nut-indicator__dot:last-child{margin-bottom:0}.nut-indicator__vertical .nut-indicator__active{width:var(--nutui-indicator-dot-size, 5px);height:var(--nutui-indicator-dot-active-size, 15px)}

package/dist/esm/Indicator.js

@@ -26,7 +26,7 @@ import React__default from "react";
 import classNames from "classnames";
 var defaultProps = {
   total: 3,
-  current: 1,
+  current: 0,
   direction: "horizontal"
 };
 var classPrefix = "nut-indicator";
@@ -35,11 +35,11 @@ var Indicator = function Indicator2(props) {
   var classes = classNames(_defineProperty({}, "".concat(classPrefix, "__vertical"), direction === "vertical"));
   var renderElement = function renderElement2() {
     var childs = [];
-    for (var item = 1; item <= total; item++) {
-      childs.push(item === current ? React__default.createElement(React__default.Fragment, null, children || React__default.createElement("div", {
+    for (var item = 0; item < total; item++) {
+      childs.push(item === current ? children || React__default.createElement("div", {
         key: item,
         className: "".concat(classPrefix, "__dot ").concat(classPrefix, "__active")
-      })) : React__default.createElement("div", {
+      }) : React__default.createElement("div", {
         key: item,
         className: "".concat(classPrefix, "__dot")
       }));

package/dist/esm/Infiniteloading/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Infiniteloading/style/style.css

@@ -0,0 +1 @@
+.nut-theme-dark .nut-infiniteloading .nut-infinite-container .infiniteLi{color:#e6e6e6}.nut-theme-dark .nut-infiniteloading .nut-infinite-bottom .bottom-box .bottom-text{color:#828282}.nut-infiniteloading{display:block;width:100%}.nut-infiniteloading .nut-infinite-top{display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}.nut-infiniteloading .nut-infinite-top .top-box{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.nut-infiniteloading .nut-infinite-top .top-box .top-text{font-size:10px;color:var(--nutui-gray-2, #757575)}.nut-infiniteloading .nut-infinite-container .infiniteLi{color:var(--nutui-gray-1, #1a1a1a)}.nut-infiniteloading .nut-infinite-bottom{display:flex;align-items:center;justify-content:center;width:100%;padding-top:6px;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-infiniteloading-bottom-color, #c8c8c8);text-align:center}.nut-infiniteloading .nut-infinite-bottom .bottom-box .bottom-text{font-size:10px;color:var(--nutui-gray-2, #757575)}

package/dist/esm/Input/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Input/style/style.css

@@ -0,0 +1 @@
+.nut-input{position:relative;display:flex;align-items:center;flex:1;width:100%;padding:var(--nutui-input-padding, 10px 25px);line-height:24px;background:var(--nutui-gray-6, #ffffff);font-size:var(--nutui-input-font-size, var(--nutui-font-size-2, 14px));box-sizing:border-box;border-bottom:var(--nutui-input-border-bottom-width, 0px) solid var(--nutui-input-border-bottom, #eaf0fb)}.nut-input .nut-icon{color:#c8c9cc}.nut-input .nut-input-native{width:100%;color:var(--nutui-gray-1, #1a1a1a);flex:1;padding:0;border:0;outline:0 none;font:inherit;text-decoration:none}.nut-input-disabled{color:var(--nutui-input-disabled-color, #c8c9cc)!important}.nut-input-disabled input:disabled{background:none;color:var(--nutui-input-disabled-color, #c8c9cc);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--nutui-input-disabled-color, #c8c9cc)}

package/dist/esm/Input.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["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"];
+var _excluded = ["type", "name", "placeholder", "align", "disabled", "readOnly", "maxLength", "clearable", "clearIcon", "formatTrigger", "autoFocus", "style", "className", "onChange", "onFocus", "onClear", "formatter", "onClick", "confirmType", "defaultValue", "value"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -23,10 +23,11 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from "react";
+import React__default, { forwardRef, useRef, useState, useImperativeHandle, useCallback } from "react";
 import { MaskClose } from "@nutui/icons-react";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
 function trimExtraChar(value, _char, regExp) {
   var index = value.indexOf(_char);
   if (index === -1) {
@@ -56,253 +57,146 @@ function formatNumber(value) {
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   type: "text",
   name: "",
-  defaultValue: "",
   placeholder: "",
-  label: "",
-  labelClass: "",
-  labelWidth: "80",
-  labelAlign: "left",
-  colon: false,
-  inputAlign: "left",
-  center: false,
+  confirmType: "done",
+  align: "left",
   required: false,
   disabled: false,
-  readonly: false,
-  error: false,
-  maxlength: "9999",
-  leftIcon: null,
-  rightIcon: null,
+  readOnly: false,
+  maxLength: 9999,
   clearable: false,
   clearIcon: null,
-  clearSize: "14",
-  border: true,
   formatTrigger: "onChange",
-  rules: [],
-  rows: null,
-  errorMessage: "",
-  errorMessageAlign: "",
-  showWordLimit: false,
-  autofocus: false,
-  slotButton: null,
-  slotInput: null
+  autoFocus: false
 });
 var Input = forwardRef(function(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, type = _defaultProps$props.type, name = _defaultProps$props.name, defaultValue = _defaultProps$props.defaultValue, placeholder = _defaultProps$props.placeholder, label = _defaultProps$props.label, labelClass = _defaultProps$props.labelClass, labelWidth = _defaultProps$props.labelWidth, labelAlign = _defaultProps$props.labelAlign, colon = _defaultProps$props.colon, inputAlign = _defaultProps$props.inputAlign, center = _defaultProps$props.center, required = _defaultProps$props.required, disabled = _defaultProps$props.disabled, readonly = _defaultProps$props.readonly, error = _defaultProps$props.error, maxlength = _defaultProps$props.maxlength, leftIcon = _defaultProps$props.leftIcon, rightIcon = _defaultProps$props.rightIcon, clearable = _defaultProps$props.clearable, clearIcon = _defaultProps$props.clearIcon, clearSize = _defaultProps$props.clearSize, border = _defaultProps$props.border, formatTrigger = _defaultProps$props.formatTrigger, rules = _defaultProps$props.rules, errorMessage = _defaultProps$props.errorMessage, errorMessageAlign = _defaultProps$props.errorMessageAlign, showWordLimit = _defaultProps$props.showWordLimit, autofocus = _defaultProps$props.autofocus, style = _defaultProps$props.style, className = _defaultProps$props.className, rows = _defaultProps$props.rows, slotButton = _defaultProps$props.slotButton, slotInput = _defaultProps$props.slotInput, onChange = _defaultProps$props.onChange, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, onClear = _defaultProps$props.onClear, formatter = _defaultProps$props.formatter, keypress = _defaultProps$props.keypress, onClickInput = _defaultProps$props.onClickInput, onClickLeftIcon = _defaultProps$props.onClickLeftIcon, onClickRightIcon = _defaultProps$props.onClickRightIcon, _onClick = _defaultProps$props.onClick, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var inputPlaceholder = placeholder || locale.placeholder;
-  var _useState = useState(""), _useState2 = _slicedToArray(_useState, 2), inputValue = _useState2[0], SetInputValue = _useState2[1];
-  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), active = _useState4[0], SetActive = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), classes = _useState6[0], setClasses = _useState6[1];
-  var getModelValue = function getModelValue2() {
-    return String(inputValue !== null && inputValue !== void 0 ? inputValue : "");
-  };
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), type = _defaultProps$props.type, name = _defaultProps$props.name, placeholder = _defaultProps$props.placeholder, align = _defaultProps$props.align, disabled = _defaultProps$props.disabled, readOnly = _defaultProps$props.readOnly, maxLength = _defaultProps$props.maxLength, clearable = _defaultProps$props.clearable, clearIcon = _defaultProps$props.clearIcon, formatTrigger = _defaultProps$props.formatTrigger, autoFocus = _defaultProps$props.autoFocus, style = _defaultProps$props.style, className = _defaultProps$props.className, onChange = _defaultProps$props.onChange, onFocus = _defaultProps$props.onFocus, onClear = _defaultProps$props.onClear, formatter = _defaultProps$props.formatter, _onClick = _defaultProps$props.onClick, confirmType = _defaultProps$props.confirmType, defaultValue = _defaultProps$props.defaultValue, _value = _defaultProps$props.value, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    finalValue: "",
+    onChange
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
   var inputRef = useRef(null);
-  useEffect(function() {
-    setClasses(inputClass);
-    SetInputValue(defaultValue);
-  }, [defaultValue]);
-  useEffect(function() {
-    if (inputValue) {
-      updateValue(getModelValue());
-      resetValidation();
-    }
-  }, [inputValue]);
+  var composingRef = useRef(false);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), active = _useState2[0], setActive = _useState2[1];
   useImperativeHandle(ref, function() {
-    return inputRef.current;
+    return {
+      clear: function clear() {
+        setValue("");
+      },
+      focus: function focus() {
+        var _inputRef$current;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      },
+      get nativeElement() {
+        return inputRef.current;
+      }
+    };
   });
   var inputClass = useCallback(function() {
-    var prefixCls = "nut-input";
-    return [prefixCls, "".concat(center ? "center" : ""), "".concat(disabled ? "".concat(prefixCls, "-disabled") : ""), "".concat(required ? "".concat(prefixCls, "-required") : ""), "".concat(error ? "".concat(prefixCls, "-error") : ""), "".concat(border ? "".concat(prefixCls, "-border") : ""), "".concat(slotButton || rightIcon ? "".concat(prefixCls, "-right-mark") : "")].filter(Boolean).join(" ");
-  }, [disabled, required, error, border, slotButton, rightIcon, center]);
-  useEffect(function() {
-    setClasses(inputClass);
-  }, [disabled, required, error, border, slotButton, rightIcon, center]);
-  var updateValue = function updateValue2(value) {
-    var _inputRef$current;
+    var classPrefix = "nut-input";
+    return [classPrefix, "".concat(disabled ? "".concat(classPrefix, "-disabled") : "")].filter(Boolean).join(" ");
+  }, [disabled]);
+  var updateValue = function updateValue2(value2) {
     var trigger = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "onChange";
-    var event = arguments.length > 2 ? arguments[2] : void 0;
-    var val = value;
-    if (type === "digit" || type === "tel") {
-      val = formatNumber(val, false, false);
-    }
+    var val = value2;
     if (type === "number") {
-      val = formatNumber(val, true, true);
+      val = formatNumber(val, false, true);
     }
-    if (type === "tel" && !formatter) {
-      var regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
-      var regNumber = /[^-0-9]/g;
-      val = !regTel.test(val) && val.length > 11 ? val.substring(0, 11) : val.replace(regNumber, "");
+    if (type === "digit") {
+      val = formatNumber(val, true, true);
     }
     if (formatter && trigger === formatTrigger) {
       val = formatter(val);
     }
-    if ((inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== val) {
-      inputRef.current.value = val;
+    setValue(val);
+    var eventHandler = props[trigger];
+    if (eventHandler && typeof eventHandler === "function") {
+      eventHandler(val);
     }
-    SetInputValue(val);
   };
   var handleFocus = function handleFocus2(event) {
     var val = event.target.value;
-    SetActive(true);
-    onFocus && onFocus(val, event);
+    onFocus && onFocus(val);
+    setActive(true);
   };
-  var handleInput = function handleInput2(event) {
-    var val = event.target.value;
-    if (maxlength && val.length > Number(maxlength)) {
-      val = val.slice(0, Number(maxlength));
-    }
-    updateValue(val, "onChange");
-    onChange && onChange(val, event);
+  var handleInput = function handleInput2(value2) {
+    updateValue(value2, "onChange");
   };
   var handleBlur = function handleBlur2(event) {
-    setTimeout(function() {
-      SetActive(false);
-    }, 200);
     var val = event.target.value;
-    if (maxlength && val.length > Number(maxlength)) {
-      val = val.slice(0, Number(maxlength));
-    }
     updateValue(val, "onBlur");
-    onBlur && onBlur(val, event);
-  };
-  var handleClickInput = function handleClickInput2(event) {
-    onClickInput && onClickInput(event);
-  };
-  var handleClickLeftIcon = function handleClickLeftIcon2(event) {
-    onClickLeftIcon && onClickLeftIcon(event);
-  };
-  var handleClickRightIcon = function handleClickRightIcon2(event) {
-    onClickRightIcon && onClickRightIcon(event);
-  };
-  var resetValidation = function resetValidation2() {
+    setActive(false);
   };
   var inputType = function inputType2(type2) {
-    if (type2 === "number") {
+    if (type2 === "digit") {
       return "text";
     }
-    if (type2 === "digit") {
+    if (type2 === "number") {
       return "tel";
     }
     return type2;
   };
-  var handleClear = function handleClear2(event) {
-    updateValue("");
-    onClear && onClear("", event);
-  };
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "".concat(classes, "  ").concat(className || ""),
-    style
-  }, rest), {}, {
+  return React__default.createElement("div", {
+    className: "".concat(inputClass(), "  ").concat(className || ""),
+    style,
     onClick: function onClick(e) {
       _onClick && _onClick(e);
     }
-  }), slotInput ? React__default.createElement(React__default.Fragment, null, label ? React__default.createElement("div", {
-    className: "nut-input-label ".concat(labelClass),
-    style: {
-      width: "".concat(labelWidth, "px"),
-      textAlign: labelAlign
-    }
-  }, React__default.createElement("div", {
-    className: "label-string"
-  }, label, colon ? ":" : "")) : null, React__default.createElement("div", {
-    className: "nut-input-value"
-  }, React__default.createElement("div", {
-    className: "nut-input-inner",
-    onClick: function onClick(e) {
-      handleClickInput(e);
-    }
-  }, slotInput))) : React__default.createElement(React__default.Fragment, null, React__default.isValidElement(leftIcon) ? React__default.createElement("div", {
-    className: "nut-input-left-icon",
-    onClick: function onClick(e) {
-      handleClickLeftIcon(e);
-    }
-  }, leftIcon) : null, label ? React__default.createElement("div", {
-    className: "nut-input-label ".concat(labelClass),
-    style: {
-      width: "".concat(labelWidth, "px"),
-      textAlign: labelAlign
-    }
-  }, React__default.createElement("div", {
-    className: "label-string"
-  }, label, colon ? ":" : "")) : null, React__default.createElement("div", {
-    className: "nut-input-value"
-  }, React__default.createElement("div", {
-    className: "nut-input-main-con"
-  }, React__default.createElement("div", {
-    className: "nut-input-inner",
-    onClick: function onClick(e) {
-      handleClickInput(e);
-    }
-  }, type === "textarea" ? React__default.createElement("textarea", {
+  }, React__default.createElement("input", _objectSpread(_objectSpread({}, rest), {}, {
     name,
-    className: "input-text",
+    className: "nut-input-native",
     ref: inputRef,
     style: {
-      textAlign: inputAlign,
-      height: "".concat(Number(rows) * 24, "px")
+      textAlign: align
     },
-    maxLength: maxlength,
-    placeholder: inputPlaceholder,
+    type: inputType(type),
+    maxLength,
+    placeholder: placeholder || locale.placeholder,
     disabled,
-    readOnly: readonly,
-    value: inputValue,
-    autoFocus: autofocus,
-    onBlur: function onBlur2(e) {
+    readOnly,
+    value,
+    autoFocus,
+    enterKeyHint: confirmType,
+    onBlur: function onBlur(e) {
       handleBlur(e);
     },
     onFocus: function onFocus2(e) {
       handleFocus(e);
     },
-    onInput: function onInput(e) {
-      handleInput(e);
-    }
-  }) : React__default.createElement("input", {
-    name,
-    className: "input-text",
-    ref: inputRef,
-    style: {
-      textAlign: inputAlign
-    },
-    type: inputType(type),
-    maxLength: maxlength,
-    placeholder: inputPlaceholder,
-    disabled,
-    readOnly: readonly,
-    value: inputValue,
-    autoFocus: autofocus,
-    onBlur: function onBlur2(e) {
-      handleBlur(e);
+    onChange: function onChange2(e) {
+      handleInput(e.currentTarget.value);
     },
-    onFocus: function onFocus2(e) {
-      handleFocus(e);
+    onCompositionStart: function onCompositionStart(e) {
+      var _props$onCompositionS;
+      composingRef.current = true;
+      (_props$onCompositionS = props.onCompositionStart) === null || _props$onCompositionS === void 0 ? void 0 : _props$onCompositionS.call(props, e);
     },
-    onInput: function onInput(e) {
-      handleInput(e);
+    onCompositionEnd: function onCompositionEnd(e) {
+      var _props$onCompositionE;
+      composingRef.current = false;
+      (_props$onCompositionE = props.onCompositionEnd) === null || _props$onCompositionE === void 0 ? void 0 : _props$onCompositionE.call(props, e);
     }
-  }), clearable && !readonly && active && inputValue.length > 0 ? React__default.createElement("span", {
-    className: "nut-input-clear-wrap",
-    onClick: function onClick(e) {
-      return handleClear(e);
+  })), clearable && !readOnly && active && value.length > 0 ? React__default.createElement("span", {
+    style: {
+      display: "flex",
+      alignItems: "center"
+    },
+    onClick: function onClick() {
+      if (!disabled) {
+        setValue("");
+        onClear && onClear("");
+      }
     }
   }, clearIcon || React__default.createElement(MaskClose, {
     className: "nut-input-clear"
-  })) : null), React__default.isValidElement(rightIcon) ? React__default.createElement("div", {
-    className: "nut-input-right-icon",
-    onClick: function onClick(e) {
-      handleClickRightIcon(e);
-    }
-  }, 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), "/", maxlength) : null), errorMessage ? React__default.createElement("div", {
-    className: "nut-input-error-message",
-    style: {
-      textAlign: errorMessageAlign
-    }
-  }, errorMessage) : React__default.createElement("div", null))));
+  })) : null);
 });
 Input.defaultProps = defaultProps;
 Input.displayName = "NutInput";

package/dist/esm/InputNumber/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/InputNumber/style/style.css

@@ -0,0 +1 @@
+.nut-inputnumber{display:var(--nutui-inputnumber-display, flex);align-items:center}.nut-inputnumber .nut-input-minus,.nut-inputnumber .nut-input-add{display:flex;justify-content:center;align-items:center;width:var(--nutui-inputnumber-button-width, 20px);height:var(--nutui-inputnumber-button-height, 20px);background-color:var(--nutui-inputnumber-button-background-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-inputnumber-button-border-radius, 30px)}.nut-inputnumber--disabled input{color:var(--nutui-inputnumber-icon-void-color, var(--nutui-gray-3, #bfbfbf))!important}.nut-inputnumber__icon{color:var(--nutui-inputnumber-icon-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-inputnumber-icon-size, 20px);cursor:pointer}.nut-inputnumber__icon--disabled{color:var(--nutui-inputnumber-icon-disabled-color, #cccccc);cursor:not-allowed}.nut-inputnumber input,.nut-inputnumber .nut-number-input,.nut-inputnumber__text--readonly{width:var(--nutui-inputnumber-input-width, 40px);height:var(--nutui-inputnumber-input-height, 24px);text-align:center;outline:none;border:var(--nutui-inputnumber-input-border, 0);margin:var(--nutui-inputnumber-input-margin, 0 6px);color:var(--nutui-inputnumber-input-font-color, var(--nutui-gray-1, #1a1a1a));background-color:var(--nutui-inputnumber-input-background-color, var(--nutui-gray-4, #f4f4f4));border-radius:var(--nutui-inputnumber-input-border-radius, 4px)}.nut-inputnumber input::-webkit-outer-spin-button,.nut-inputnumber input::-webkit-inner-spin-button,.nut-inputnumber .nut-number-input::-webkit-outer-spin-button,.nut-inputnumber .nut-number-input::-webkit-inner-spin-button{appearance:none}.icon-minus,.icon-plus{--nut-icon-width: 20px;--nut-icon-height: 20px}

package/dist/esm/Layout/style/css.js

@@ -0,0 +1 @@
+

package/dist/esm/Menu/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Menu/style/style.css

@@ -0,0 +1 @@
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overflow-hidden{overflow:hidden!important}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-menu-item__content{padding:var(--nutui-menu-item-content-padding, 12px 24px);max-height:var(--nutui-menu-item-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-menu-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-item__option{color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-font-size-2, 14px);padding-top:var(--nutui-menu-item-option-padding-top, 12px);padding-bottom:var(--nutui-menu-item-option-padding-bottom, 12px);display:flex;align-items:center}.nut-menu-item__option.active{font-weight:500;color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu-item__option i{margin-right:var(--nutui-menu-item-option-i-margin-right, 6px);display:inline-flex;align-items:center}.nut-menu-item__wrap,.nut-menu-item__wrap-up{position:absolute;width:100%;z-index:2052;overflow:hidden}.nut-menu-item__wrap-up{bottom:var(--nutui-menu-bar-line-height, 48px)}.overlay-fade-enter-active.nut-menu__overlay{top:auto;z-index:2052}.nut-menu__pop.nut-popup{transition:all 0s ease 0s;transform:none}.placeholder-element{position:fixed;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 2001);background-color:transparent}.placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.menu-item-enter{opacity:0;transform:translateY(-30px)}.menu-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-exit{opacity:1;transition:all .1s}.menu-item-exit-done{opacity:0;transition:all .1s}.menu-item-up-enter{opacity:0;transform:translateY(30px)}.menu-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-up-exit{opacity:1;transition:all .1s}.menu-item-up-exit-done{opacity:0;transition:all .1s}.nut-menu.scroll-fixed{position:fixed;top:var(--nutui-menu-scroll-fixed-top, 0);z-index:var(--nutui-menu-scroll-fixed-z-index, 1000);width:100%}.nut-menu-relative{position:relative}.nut-menu__bar{position:relative;display:flex;line-height:var(--nutui-menu-bar-line-height, 48px);background-color:var(--nutui-gray-6, #ffffff);box-shadow:var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, .12))}.nut-menu__bar.opened{z-index:var(--nutui-menu-bar-opened-z-index, 2001)}.nut-menu__item{flex:1;text-align:center;font-size:var(--nutui-menu-item-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-menu-item-text-color, var(--nutui-gray-1, #1a1a1a));min-width:0}.nut-menu__item.active{color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #fa2c19))}.nut-menu__item.disabled{color:var(--nutui-menu-item-disabled-color, #969799)}.nut-menu__title-icon{transition:all .2s linear}.nut-menu__title{display:flex;align-items:center;justify-content:center;max-width:100%}.nut-menu__title.active .nut-menu__title-icon{transform:rotate(180deg)}.nut-menu__title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding-left:var(--nutui-menu-title-text-padding-left, 8px);padding-right:var(--nutui-menu-title-text-padding-right, 8px)}