@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/esm/GridItem/style/style.css

@@ -0,0 +1 @@
+.nut-grid-item{position:relative;box-sizing:border-box;color:var(--nutui-grid-item-text-color, var(--nutui-gray-1, #1a1a1a))}.nut-grid-item__text{color:var(--nutui-grid-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-grid-item-text-font-size, var(--nutui-font-size-1, 12px));line-height:1.5;word-break:break-all;margin:var(--nutui-grid-item-text-margin, 8px) 0 0 0}.nut-grid-item__content{display:flex;flex-direction:column;box-sizing:border-box;height:100%;padding:var(--nutui-grid-item-content-padding, 16px 8px);background:var(--nutui-grid-item-content-bg-color, var(--nutui-gray-6, #ffffff));border:0 solid var(--nutui-grid-border-color, #f5f6f7)}.nut-grid-item__content--border{border-right-width:1px;border-bottom-width:1px}.nut-grid-item__content--surround{border-top-width:1px;border-left-width:1px}.nut-grid-item__content--center{align-items:center;justify-content:center}.nut-grid-item__content--square{position:absolute;top:0;right:0;left:0}.nut-grid-item__content--reverse{flex-direction:column-reverse}.nut-grid-item__content--reverse .nut-grid-item__text{margin:0 0 var(--nutui-grid-item-text-margin, 8px)}.nut-grid-item__content--horizontal{flex-direction:row}.nut-grid-item__content--horizontal .nut-grid-item__text{margin:0 0 0 var(--nutui-grid-item-text-margin, 8px)}.nut-grid-item__content--horizontal.nut-grid-item__content--reverse{flex-direction:row-reverse}.nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text{margin:0 var(--nutui-grid-item-text-margin, 8px) 0 0}.nut-grid-item__content--clickable{cursor:pointer}.nut-grid-item__content--clickable:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-grid-item__content--clickable:active:before{opacity:.1}

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

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

package/dist/esm/Image/style/style.css

@@ -0,0 +1 @@
+.nut-image{display:block;position:relative}.nut-image .nut-img{display:block;width:100%;height:100%}.nut-image.nut-image-round{border-radius:50%;overflow:hidden}.nut-image .nut-img-loading,.nut-image .nut-img-error{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f8fa;background-size:100% 100%}

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

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

package/dist/esm/ImagePreview/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-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-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-swiper-item{height:100%}.nut-swiper{position:relative;z-index:1;display:flex;transition-property:transform;box-sizing:content-box;overflow:hidden}.nut-swiper__inner{display:flex;height:100%}.nut-swiper__vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-swiper__indicator{display:flex;position:absolute;left:50%;bottom:var(--nutui-swiper-indicator-bottom, 12px);transform:translate(-50%)}.nut-swiper__indicator-vertical{top:50%;left:12px;bottom:auto;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;transform:translateY(-50%)}.nut-video{width:100%;height:100%;position:relative;display:flex}.nut-video-player{width:100%;background:#000}.nut-video-player:focus{outline:none}.nut-video video{width:100%;height:100%;object-fit:fill}.nut-imagepreview{width:100%;height:100%}.nut-imagepreview-swiper{height:100%;width:100vw;background-color:transparent}.nut-imagepreview-index{position:fixed;z-index:2002;top:50px;text-align:center;left:0;right:0;background:transparent;color:#fff}.nut-imagepreview-index .arrow{position:absolute;left:15px;transform:rotate(180deg)}.nut-imagepreview .popup-bg{background:rgba(0,0,0,.9)}.nut-imagepreview .popup-box{height:100%;overflow:visible;background-color:transparent}.nut-imagepreview-pop{height:100%;background:transparent!important;display:flex;align-items:center;width:100%}.nut-imagepreview-swiper swiper{width:100%;height:100%}.nut-imagepreview-swiper swiper-item{display:flex;align-items:center;justify-content:center;height:100%}.nut-imagepreview-swiper swiper-item .nut-image-preview-box{width:100%}.nut-imagepreview-swiper swiper-item .nut-video video{object-fit:contain}.nut-imagepreview-swiper .nut-swiper-item{display:flex;align-items:center;justify-content:center;height:100%}.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box{width:100%}.nut-imagepreview-swiper .nut-swiper-item .nut-video video{object-fit:contain}

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,
+  visible: false,
   autoPlay: 3e3,
-  initNo: 1,
-  contentClose: false,
+  defaultValue: 0,
+  closeOnContentClick: false,
   indicator: false,
-  paginationColor: "#fff",
+  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, indicator = props.indicator, 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,40 +161,36 @@ 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,
-    className: "nut-imagepreview-swiper",
+    className: "".concat(classPrefix, "-swiper"),
     loop: true,
     preventDefault: false,
     style: {
       display: showPop ? "block" : "none",
-      "--nutui-indicator-color": paginationColor
+      "--nutui-indicator-color": indicatorColor
     },
     direction: "horizontal",
-    onChange: slideChangeEnd,
+    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) {
@@ -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/InfiniteLoading/style/css.js

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

package/dist/esm/InfiniteLoading/style/style.css

@@ -0,0 +1 @@
+.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;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{color:var(--nutui-gray-2, #757575)}

package/dist/esm/{Infiniteloading.js → InfiniteLoading.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", "hasMore", "threshold", "containerId", "useWindow", "useCapture", "isOpenRefresh", "pullIcon", "pullText", "loadIcon", "loadingText", "loadMoreText", "className", "onRefresh", "onLoadMore", "onScrollChange"];
+var _excluded = ["children", "hasMore", "threshold", "target", "capture", "pullRefresh", "pullingText", "loadingText", "loadMoreText", "className", "onRefresh", "onLoadMore", "onScroll"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -25,26 +25,19 @@ function _objectSpread(target) {
 }
 import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   hasMore: true,
   threshold: 200,
-  containerId: "",
-  useWindow: true,
-  useCapture: false,
-  isOpenRefresh: false,
-  pullIcon: null,
-  pullText: "松开刷新",
-  loadIcon: null,
-  loadingText: "加载中···",
-  loadMoreText: "哎呀，这里是底部了啦"
+  target: "",
+  capture: false,
+  pullRefresh: false
 });
-var Infiniteloading = function Infiniteloading2(props) {
+var classPrefix = "nut-infiniteloading";
+var InfiniteLoading = function InfiniteLoading2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, hasMore = _defaultProps$props.hasMore, threshold = _defaultProps$props.threshold, containerId = _defaultProps$props.containerId, useWindow = _defaultProps$props.useWindow, useCapture = _defaultProps$props.useCapture, isOpenRefresh = _defaultProps$props.isOpenRefresh, pullIcon = _defaultProps$props.pullIcon, pullText = _defaultProps$props.pullText, loadIcon = _defaultProps$props.loadIcon, loadingText = _defaultProps$props.loadingText, loadMoreText = _defaultProps$props.loadMoreText, className = _defaultProps$props.className, onRefresh = _defaultProps$props.onRefresh, onLoadMore = _defaultProps$props.onLoadMore, onScrollChange = _defaultProps$props.onScrollChange, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, hasMore = _defaultProps$props.hasMore, threshold = _defaultProps$props.threshold, target = _defaultProps$props.target, capture = _defaultProps$props.capture, pullRefresh = _defaultProps$props.pullRefresh, pullingText = _defaultProps$props.pullingText, loadingText = _defaultProps$props.loadingText, loadMoreText = _defaultProps$props.loadMoreText, className = _defaultProps$props.className, onRefresh = _defaultProps$props.onRefresh, onLoadMore = _defaultProps$props.onLoadMore, onScroll = _defaultProps$props.onScroll, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
   var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isInfiniting = _useState2[0], setIsInfiniting = _useState2[1];
   var scroller = useRef(null);
   var refreshTop = useRef(null);
@@ -54,14 +47,16 @@ var Infiniteloading = function Infiniteloading2(props) {
   var refreshMaxH = useRef(0);
   var y = useRef(0);
   var distance = useRef(0);
-  var b = cn("infiniteloading");
-  var classes = classNames(className, b());
+  var classes = classNames(className, classPrefix);
   useEffect(function() {
-    var parentElement = getParentElement(scroller.current);
-    scrollEl.current = useWindow ? window : parentElement;
-    scrollEl.current.addEventListener("scroll", handleScroll, useCapture);
+    if (target && document.getElementById(target)) {
+      scrollEl.current = document.getElementById(target);
+    } else {
+      scrollEl.current = window;
+    }
+    scrollEl.current.addEventListener("scroll", handleScroll, capture);
     return function() {
-      scrollEl.current.removeEventListener("scroll", handleScroll, useCapture);
+      scrollEl.current.removeEventListener("scroll", handleScroll, capture);
     };
   }, [hasMore, isInfiniting]);
   useEffect(function() {
@@ -81,9 +76,6 @@ var Infiniteloading = function Infiniteloading2(props) {
       transition: isTouching.current ? "height 0s cubic-bezier(0.25,0.1,0.25,1)" : "height 0.2s cubic-bezier(0.25,0.1,0.25,1)"
     };
   };
-  var getParentElement = function getParentElement2(el) {
-    return containerId ? document.querySelector("#".concat(containerId)) : el && el.parentNode;
-  };
   var handleScroll = function handleScroll2() {
     requestAniFrame()(function() {
       if (!isScrollAtBottom() || !hasMore || isInfiniting) {
@@ -103,7 +95,7 @@ var Infiniteloading = function Infiniteloading2(props) {
     isTouching.current = false;
   };
   var touchStart = function touchStart2(event) {
-    if (beforeScrollTop.current === 0 && !isTouching.current && isOpenRefresh) {
+    if (beforeScrollTop.current === 0 && !isTouching.current && pullRefresh) {
       y.current = event.touches[0].pageY;
       isTouching.current = true;
       var childHeight = refreshTop.current.firstElementChild.offsetHeight;
@@ -135,12 +127,12 @@ var Infiniteloading = function Infiniteloading2(props) {
     }
   };
   var requestAniFrame = function requestAniFrame2() {
-    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function fn(callback) {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function fn(callback) {
       window.setTimeout(callback, 1e3 / 60);
     };
   };
   var getWindowScrollTop = function getWindowScrollTop2() {
-    return window.pageYOffset !== void 0 ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+    return window.scrollY !== void 0 ? window.scrollY : (document.documentElement || document.body.parentNode || document.body).scrollTop;
   };
   var calculateTopPosition = function calculateTopPosition2(el) {
     return !el ? 0 : el.offsetTop + calculateTopPosition2(el.offsetParent);
@@ -150,7 +142,7 @@ var Infiniteloading = function Infiniteloading2(props) {
     var resScrollTop = 0;
     var direction = "down";
     var windowScrollTop = getWindowScrollTop();
-    if (useWindow) {
+    if (!target || !document.getElementById(target)) {
       if (scroller.current) {
         offsetDistance = calculateTopPosition(scroller.current) + scroller.current.offsetHeight - windowScrollTop - window.innerHeight;
       }
@@ -166,7 +158,7 @@ var Infiniteloading = function Infiniteloading2(props) {
       direction = "down";
     }
     beforeScrollTop.current = resScrollTop;
-    onScrollChange && onScrollChange(resScrollTop);
+    onScroll && onScroll(resScrollTop);
     return offsetDistance <= threshold && direction === "down";
   };
   return React__default.createElement("div", _objectSpread({
@@ -180,22 +172,18 @@ var Infiniteloading = function Infiniteloading2(props) {
     style: getStyle()
   }, React__default.createElement("div", {
     className: "top-box"
-  }, pullIcon && React__default.createElement(React__default.Fragment, null, pullIcon), React__default.createElement("span", {
-    className: "top-text"
-  }, pullText || locale.infiniteloading.pullRefreshText))), React__default.createElement("div", {
+  }, pullingText || 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"
-  }, 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", {
+  }, loadingText || locale.infiniteloading.loadText) : !hasMore && React__default.createElement("div", {
     className: "tips"
   }, loadMoreText || locale.infiniteloading.loadMoreText)));
 };
-Infiniteloading.defaultProps = defaultProps;
-Infiniteloading.displayName = "NutInfiniteloading";
+InfiniteLoading.defaultProps = defaultProps;
+InfiniteLoading.displayName = "NutInfiniteLoading";
 export {
-  Infiniteloading as default
+  InfiniteLoading as default
 };

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/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}.nut-icon-Minus,.nut-icon-minus,.nut-icon-Plus,.nut-icon-plus{--nut-icon-width: 20px;--nut-icon-height: 20px}

package/dist/esm/InputNumber.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", "disabled", "min", "max", "readonly", "value", "defaultValue", "allowEmpty", "digits", "step", "async", "className", "style", "formatter", "onPlus", "onMinus", "onOverlimit", "onBlur", "onFocus", "onChange"];
+var _excluded = ["children", "disabled", "min", "max", "readOnly", "value", "defaultValue", "allowEmpty", "digits", "step", "async", "className", "style", "formatter", "onPlus", "onMinus", "onOverlimit", "onBlur", "onFocus", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -32,7 +32,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   disabled: false,
   min: 1,
   max: 9999,
-  readonly: false,
+  readOnly: false,
   allowEmpty: false,
   defaultValue: 0,
   step: 1,
@@ -42,7 +42,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
 var classPrefix = "nut-inputnumber";
 var InputNumber = function InputNumber2(props) {
   var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, disabled = _defaultProps$props.disabled, min = _defaultProps$props.min, max = _defaultProps$props.max, readonly = _defaultProps$props.readonly, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, allowEmpty = _defaultProps$props.allowEmpty, digits = _defaultProps$props.digits, step = _defaultProps$props.step, async = _defaultProps$props.async, className = _defaultProps$props.className, style = _defaultProps$props.style, formatter = _defaultProps$props.formatter, onPlus = _defaultProps$props.onPlus, onMinus = _defaultProps$props.onMinus, onOverlimit = _defaultProps$props.onOverlimit, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, onChange = _defaultProps$props.onChange, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, disabled = _defaultProps$props.disabled, min = _defaultProps$props.min, max = _defaultProps$props.max, readOnly = _defaultProps$props.readOnly, value = _defaultProps$props.value, defaultValue = _defaultProps$props.defaultValue, allowEmpty = _defaultProps$props.allowEmpty, digits = _defaultProps$props.digits, step = _defaultProps$props.step, async = _defaultProps$props.async, className = _defaultProps$props.className, style = _defaultProps$props.style, formatter = _defaultProps$props.formatter, onPlus = _defaultProps$props.onPlus, onMinus = _defaultProps$props.onMinus, onOverlimit = _defaultProps$props.onOverlimit, onBlur = _defaultProps$props.onBlur, onFocus = _defaultProps$props.onFocus, onChange = _defaultProps$props.onChange, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
   var inputRef = useRef("");
   var _usePropsValue = usePropsValue({
     value,
@@ -175,14 +175,14 @@ var InputNumber = function InputNumber2(props) {
   var focusValue = function focusValue2(e) {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     onFocus && onFocus(e);
   };
   var burValue = function burValue2(e) {
     if (disabled)
       return;
-    if (readonly)
+    if (readOnly)
       return;
     var input = e.target;
     var value2 = input.valueAsNumber;
@@ -212,7 +212,7 @@ var InputNumber = function InputNumber2(props) {
     min,
     max,
     disabled,
-    readOnly: readonly,
+    readOnly,
     value: _checked,
     onInput: changeFormatValue,
     onBlur: burFormatValue,
@@ -222,7 +222,7 @@ var InputNumber = function InputNumber2(props) {
     min,
     max,
     disabled,
-    readOnly: readonly,
+    readOnly,
     value: _checked,
     onInput: changeValue,
     onBlur: burValue,

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:absolute;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)}

package/dist/esm/Menu.js

@@ -67,6 +67,7 @@ var Menu = function Menu2(props) {
   };
   var hideMenuItem = function hideMenuItem2(index) {
     showMenuItem[index] = false;
+    console.log(_toConsumableArray(showMenuItem));
     setShowMenuItem(_toConsumableArray(showMenuItem));
   };
   var updateTitle = function updateTitle2(text, index) {
@@ -75,7 +76,7 @@ var Menu = function Menu2(props) {
   };
   var cloneChildren = function cloneChildren2() {
     return React__default.Children.map(children, function(child, index) {
-      return React__default.cloneElement(child, {
+      return React__default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
         show: showMenuItem[index],
         index,
         activeColor,
@@ -87,7 +88,7 @@ var Menu = function Menu2(props) {
           hideMenuItem,
           menuRef
         }
-      });
+      }));
     });
   };
   var menuTitle = function menuTitle2() {
@@ -115,7 +116,8 @@ var Menu = function Menu2(props) {
             color: showMenuItem[index] ? activeColor : ""
           },
           key: index,
-          onClick: function onClick() {
+          onClick: function onClick(e) {
+            e.stopPropagation();
             !disabled && toggleMenuItem(index);
           }
         }, React__default.createElement("div", {

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

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

package/dist/esm/MenuItem/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:absolute;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}