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

package/dist/esm/Elevator.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["height", "acceptKey", "indexList", "isSticky", "spaceHeight", "titleHeight", "className", "onClickItem", "onClickIndex", "children"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["height", "floorKey", "list", "sticky", "spaceHeight", "titleHeight", "showKeys", "className", "style", "onClickItem", "onClickIndex", "children"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -26,21 +26,22 @@ function _objectSpread(target) {
 import React__default, { createContext, useRef, useState, useEffect } from "react";
 import { useGesture } from "@use-gesture/react";
 import { animated } from "@react-spring/web";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
 var elevatorContext = createContext({});
-var defaultProps = {
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   height: "200px",
-  acceptKey: "title",
-  indexList: [],
-  isSticky: false,
+  floorKey: "title",
+  list: [],
+  sticky: false,
   spaceHeight: 23,
   titleHeight: 35,
-  className: ""
-};
+  showKeys: true
+});
 var Elevator = function Elevator2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), height = _defaultProps$props.height, acceptKey = _defaultProps$props.acceptKey, indexList = _defaultProps$props.indexList, isSticky = _defaultProps$props.isSticky, spaceHeight = _defaultProps$props.spaceHeight, titleHeight = _defaultProps$props.titleHeight, className = _defaultProps$props.className, onClickItem = _defaultProps$props.onClickItem, onClickIndex = _defaultProps$props.onClickIndex, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn("elevator");
+  var _classNames2;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), height = _defaultProps$props.height, floorKey = _defaultProps$props.floorKey, list = _defaultProps$props.list, sticky = _defaultProps$props.sticky, spaceHeight = _defaultProps$props.spaceHeight, titleHeight = _defaultProps$props.titleHeight, showKeys = _defaultProps$props.showKeys, className = _defaultProps$props.className, style = _defaultProps$props.style, onClickItem = _defaultProps$props.onClickItem, onClickIndex = _defaultProps$props.onClickIndex, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-elevator";
   var listview = useRef(null);
   var initData = {
     anchorIndex: 0,
@@ -160,62 +161,59 @@ var Elevator = function Elevator2(props) {
     }
   }, [listview]);
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className)
-  }, rest), isSticky && scrollY > 0 ? React__default.createElement("div", {
-    className: b("list__fixed")
+    className: "".concat(classPrefix, " ").concat(className),
+    style
+  }, rest), sticky && scrollY > 0 ? React__default.createElement("div", {
+    className: "".concat(classPrefix, "__list__fixed")
   }, React__default.createElement("span", {
-    className: "fixed-title"
-  }, indexList[currentIndex][acceptKey])) : null, React__default.createElement("div", {
-    className: b("list"),
+    className: "".concat(classPrefix, "__list__fixed__title")
+  }, list[currentIndex][floorKey])) : null, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__list"),
     style: {
       height: Number.isNaN(+height) ? height : "".concat(height, "px")
     }
   }, React__default.createElement("div", {
-    className: b("list__inner"),
+    className: "".concat(classPrefix, "__list__inner"),
     ref: listview
-  }, indexList.map(function(item, idx) {
+  }, list.map(function(item, idx) {
     return React__default.createElement("div", {
-      className: b("list__item"),
+      className: "".concat(classPrefix, "__list__item"),
       key: idx
     }, React__default.createElement("div", {
-      className: b("list__item__code")
-    }, item[acceptKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function(subitem) {
+      className: "".concat(classPrefix, "__list__item__code")
+    }, item[floorKey]), React__default.createElement(React__default.Fragment, null, item.list.map(function(subitem) {
+      var _classNames;
       return React__default.createElement("div", {
-        className: b("list__item__name", {
-          highcolor: currentData.id === subitem.id && currentKey === item[acceptKey]
-        }),
+        className: classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "__list__item__name"), true), _defineProperty(_classNames, "".concat(classPrefix, "__list__item__name--highcolor"), currentData.id === subitem.id && currentKey === item[floorKey]), _classNames)),
         key: subitem.id,
         onClick: function onClick() {
-          return handleClickItem(item[acceptKey], subitem);
+          return handleClickItem(item[floorKey], subitem);
         }
       }, children ? React__default.createElement(React__default.Fragment, null, React__default.createElement(elevatorContext.Provider, {
         value: subitem
       }, children)) : subitem.name);
     })));
-  }))), indexList.length && scrollStart ? React__default.createElement("div", {
-    className: b("code--current", {
-      current: true
-    })
-  }, indexList[codeIndex][acceptKey]) : null, React__default.createElement("div", {
-    className: b("bars")
+  }))), showKeys ? React__default.createElement(React__default.Fragment, null, list.length && scrollStart ? React__default.createElement("div", {
+    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(classPrefix, "__code--current"), true), _defineProperty(_classNames2, "".concat(classPrefix, "__code--current--current"), true), _classNames2))
+  }, list[codeIndex][floorKey]) : null, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__bars")
   }, React__default.createElement(animated.div, _objectSpread(_objectSpread({
-    className: b("bars__inner")
+    className: "".concat(classPrefix, "__bars__inner")
   }, bind()), {}, {
     style: {
       touchAction: "pan-y"
     }
-  }), indexList.map(function(item, index) {
+  }), list.map(function(item, index) {
+    var _classNames3;
     return React__default.createElement("div", {
-      className: b("bars__inner__item", {
-        active: item[acceptKey] === indexList[currentIndex][acceptKey]
-      }),
+      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(classPrefix, "__bars__inner__item"), true), _defineProperty(_classNames3, "".concat(classPrefix, "__bars__inner__item--active"), item[floorKey] === list[currentIndex][floorKey]), _classNames3)),
       "data-index": index,
       key: index,
       onClick: function onClick() {
-        return handleClickIndex(item[acceptKey]);
+        return handleClickIndex(item[floorKey]);
       }
-    }, item[acceptKey]);
-  }))));
+    }, item[floorKey]);
+  })))) : null);
 };
 Elevator.defaultProps = defaultProps;
 Elevator.displayName = "NutElevator";

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

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

package/dist/esm/Ellipsis/style/style.css

@@ -0,0 +1 @@
+.nut-ellipsis{display:flex}.nut-ellipsis .nut-ellipsis-text{cursor:pointer;color:var(--nutui-ellipsis-expand-collapse-color, #3460fa);display:inline}.nut-ellipsis .nut-ellipsis-wordbreak{word-break:break-all}.nut-ellipsis-copy{position:absolute;top:-999999px}

package/dist/esm/Ellipsis.js

@@ -1,5 +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", "content", "className", "direction", "rows", "expandText", "collapseText", "symbol", "lineHeight", "onClick", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -21,9 +23,10 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useRef, useLayoutEffect, useEffect } from "react";
-import { useConfig } from "./ConfigProvider.js";
-var defaultProps = {
+import React__default, { useState, useRef, useLayoutEffect } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   content: "",
   direction: "end",
   rows: 1,
@@ -31,21 +34,19 @@ var defaultProps = {
   collapseText: "",
   symbol: "...",
   lineHeight: "20"
-};
+});
+var classPrefix = "nut-ellipsis";
 var Ellipsis = function Ellipsis2(props) {
   var _ellipsis$current, _ellipsis$current2;
-  useConfig();
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, content = _defaultProps$props.content, direction = _defaultProps$props.direction, rows = _defaultProps$props.rows, expandText = _defaultProps$props.expandText, collapseText = _defaultProps$props.collapseText, symbol = _defaultProps$props.symbol, lineHeight = _defaultProps$props.lineHeight, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, content = _defaultProps$props.content, className = _defaultProps$props.className, direction = _defaultProps$props.direction, rows = _defaultProps$props.rows, expandText = _defaultProps$props.expandText, collapseText = _defaultProps$props.collapseText, symbol = _defaultProps$props.symbol, lineHeight = _defaultProps$props.lineHeight, onClick = _defaultProps$props.onClick, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var container = null;
   var maxHeight = 0;
   var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), exceeded = _useState2[0], setExceeded = _useState2[1];
   var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), expanded = _useState4[0], setExpanded = _useState4[1];
   var ellipsis = useRef();
   var root = useRef(null);
+  var classes = classNames(classPrefix, className);
   useLayoutEffect(function() {
-    createContainer();
-  }, []);
-  useEffect(function() {
     if (content) {
       createContainer();
     }
@@ -153,11 +154,11 @@ var Ellipsis = function Ellipsis2(props) {
   var handleClick = function handleClick2() {
     onClick && onClick();
   };
-  return React__default.createElement("div", {
-    className: "nut-ellipsis",
+  return React__default.createElement("div", _objectSpread({
+    className: classes,
     onClick: handleClick,
     ref: root
-  }, React__default.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? React__default.createElement(React__default.Fragment, null, (_ellipsis$current = ellipsis.current) === null || _ellipsis$current === void 0 ? void 0 : _ellipsis$current.leading, expandText ? React__default.createElement("span", {
+  }, rest), React__default.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? React__default.createElement(React__default.Fragment, null, (_ellipsis$current = ellipsis.current) === null || _ellipsis$current === void 0 ? void 0 : _ellipsis$current.leading, expandText ? React__default.createElement("span", {
     className: "nut-ellipsis-text",
     onClick: function onClick2(e) {
       e.stopPropagation();

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

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

package/dist/esm/Empty/style/style.css

@@ -0,0 +1 @@
+.nut-empty{box-sizing:border-box;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:var(--nutui-empty-padding, 32px 0);background-color:var(--nutui-gray-6, #ffffff)}.nut-empty__image{width:var(--nutui-empty-image-size, 170px);height:var(--nutui-empty-image-size, 170px)}.nut-empty__image .img{width:100%;height:100%}.nut-empty__image img,.nut-empty__image image{width:100%;height:100%}.nut-empty__description{margin-top:var(--nutui-empty-description-margin-top, 4px);padding:var(--nutui-empty-description-padding, 0 40px);color:var(--nutui-empty-description-color, #666666);font-size:var(--nutui-empty-description-font-size, 14px);line-height:var(--nutui-empty-description-line-height, 20px)}

package/dist/esm/Empty.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["image", "imageSize", "description", "children", "className"];
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["image", "imageSize", "description", "children", "className", "status"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -24,35 +24,29 @@ function _objectSpread(target) {
   return target;
 }
 import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
 import { useConfig } from "./ConfigProvider.js";
-import "@bem-react/classname";
+import { C as ComponentDefaults } from "./typings.js";
 var defaultStatus = {
   empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
   error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
   network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
 };
-var defaultProps = {
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   description: "",
-  image: "empty",
   imageSize: "",
-  className: ""
-};
+  status: "empty"
+});
+var classPrefix = "nut-empty";
 var Empty = function Empty2(props) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), image = _defaultProps$props.image, imageSize = _defaultProps$props.imageSize, description = _defaultProps$props.description, children = _defaultProps$props.children, className = _defaultProps$props.className, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), image = _defaultProps$props.image, imageSize = _defaultProps$props.imageSize, description = _defaultProps$props.description, children = _defaultProps$props.children, className = _defaultProps$props.className, status = _defaultProps$props.status, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var _useState = useState({}), _useState2 = _slicedToArray(_useState, 2), imgStyle = _useState2[0], setImgStyle = _useState2[1];
-  var b = cn("empty");
-  var imageNode = image;
-  if (typeof image === "string") {
-    var isHttpUrl = image.startsWith("https://") || image.startsWith("http://") || image.startsWith("//");
-    var imageUrl = isHttpUrl ? image : defaultStatus[image];
-    imageNode = React__default.createElement("img", {
-      className: "img",
-      src: imageUrl,
-      alt: "empty"
-    });
-  }
+  var imageUrl = image || defaultStatus[status];
+  var imageNode = typeof imageUrl === "string" ? React__default.createElement("img", {
+    className: "img",
+    src: imageUrl,
+    alt: "empty"
+  }) : imageUrl;
   useEffect(function() {
     setImgStyle(function() {
       if (!imageSize) {
@@ -71,15 +65,13 @@ var Empty = function Empty2(props) {
     });
   }, [imageSize]);
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className)
+    className: "".concat(classPrefix, " ").concat(className)
   }, rest), React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: b("image"),
+    className: "".concat(classPrefix, "__image"),
     style: imgStyle
   }, imageNode), typeof description === "string" ? React__default.createElement("div", {
-    className: b("description")
-  }, description || locale.noData) : {
-    description
-  }, children));
+    className: "".concat(classPrefix, "__description")
+  }, description || locale.noData) : description, children));
 };
 Empty.defaultProps = defaultProps;
 Empty.displayName = "NutEmpty";

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

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

package/dist/esm/FixedNav/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-fixednav{position:fixed;z-index:var(--nutui-fixednav-index, 201);display:inline-block;height:50px;right:0}.nut-fixednav.active .nut-icon{transform:rotate(180deg)}.nut-fixednav.active .nut-fixednav__list{transform:translate(0)!important}.nut-fixednav.active.left .nut-icon{transform:rotate(0)!important}.nut-fixednav__btn{box-sizing:border-box;position:absolute;right:0;z-index:var(--nutui-fixednav-index, 201);width:80px;padding-left:12px;height:100%;background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border-radius:45px 0 0 45px;box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center}.nut-fixednav__btn .text{width:24px;line-height:13px;font-size:10px;color:var(--nutui-fixednav-bg-color, #fff);flex-shrink:0}.nut-fixednav__btn .nut-icon{margin-right:5px;transform:rotate(0);transition:all .3s}.nut-fixednav__list{position:absolute;right:0;transform:translate(100%);transition:all .5s;z-index:var(--nutui-fixednav-index, 201);flex-shrink:0;height:100%;background:var(--nutui-fixednav-bg-color, #fff);display:flex;justify-content:space-between;border-radius:25px 0 0 25px;box-shadow:2px 2px 8px #0003;padding-left:20px;padding-right:80px}.nut-fixednav__list-item{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:50px;flex-shrink:0}.nut-fixednav__list-item img{width:20px;height:20px;margin-bottom:2px}.nut-fixednav__list-item .nut-fixednav__list-text{font-size:10px;color:var(--nutui-fixednav-font-color, #000)}.nut-fixednav__list-item .b{position:absolute;right:0;top:1px;height:14px;line-height:14px;font-size:10px;padding:0 3px;color:#fff;background:var(--nutui-brand-color, #fa2c19);border-radius:7px;text-align:center;min-width:12px}.nut-fixednav.left{right:auto;left:0}.nut-fixednav.left .nut-fixednav__btn{flex-direction:row-reverse;right:auto;left:0;border-radius:0 45px 45px 0}.nut-fixednav.left .nut-fixednav__btn .nut-icon{transform:rotate(180deg)}.nut-fixednav.left .nut-fixednav__list{transform:translate(-100%);right:auto;border-radius:0 25px 25px 0;padding-left:80px;padding-right:20px;margin:0}.nut-drag .nut-fixednav{position:inherit}

package/dist/esm/FixedNav.js

@@ -45,7 +45,7 @@ var FixedNav = function FixedNav2(props) {
     active: visible
   }, type, className, classPrefix);
   var handleClick = function handleClick2(item, event) {
-    onSelect(event, item);
+    onSelect(item, event);
   };
   var onUpdateValue = function onUpdateValue2() {
     var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !visible;

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

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

package/dist/esm/Form/style/style.css

@@ -0,0 +1 @@
+.nut-cell-group{display:block}.nut-cell-group__title{display:inherit;padding:var(--nutui-cell-group-title-padding, 0 10px);color:var(--nutui-cell-group-title-color, #909ca4);font-size:var(--nutui-cell-group-title-font-size, var(--nutui-font-size-2, 14px));line-height:var(--nutui-cell-group-title-line-height, 20px);margin-top:30px;margin-bottom:10px}.nut-cell-group__description{display:inherit;padding:var(--nutui-cell-group-description-padding, 0 10px);color:var(--nutui-cell-group-description-color, #909ca4);font-size:var(--nutui-cell-group-description-font-size, var(--nutui-font-size-1, 12px));line-height:var(--nutui-cell-group-description-line-height, 16px);margin-top:10px;margin-bottom:10px}.nut-cell-group__wrap{display:inherit;border-radius:var(--nutui-cell-border-radius, 6px);overflow:hidden;background-color:var(--nutui-cell-group-background-color, var(--nutui-gray-6, #ffffff));margin:10px 0}.nut-cell-group__wrap .nut-cell{margin:0;box-shadow:none;border-radius:0}.nut-cell-group__wrap--divider .nut-cell__divider{position:absolute;box-sizing:border-box;pointer-events:none;right:var(--nutui-cell-divider-right, 16px);bottom:0;left:var(--nutui-cell-divider-left, 16px);transform:scaleY(.5);border-top:var(--nutui-cell-divider-border-bottom, 2px solid #f5f6f7)}.nut-cell-group__wrap--divider .nut-cell:last-child .nut-cell__divider{border-top:0!important}.form-layout-right .nut-form-item__label{text-align:right;font-size:14px;padding-right:24px;white-space:nowrap}.form-layout-left .nut-form-item__label{text-align:left;font-size:14px;padding-right:24px;white-space:nowrap}.form-layout-top .nut-form-item{flex-direction:column;align-items:flex-start;white-space:nowrap}.form-layout-top .nut-form-item__label{padding-bottom:4px;display:block;font-size:14px;padding-right:24px}.form-layout-top .nut-form-item__body{margin-left:0}

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

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

package/dist/esm/FormItem/style/style.css

@@ -0,0 +1 @@
+.nut-cell{position:relative;display:flex;width:100%;line-height:var(--nutui-cell-line-height, 20px);padding:var(--nutui-cell-padding, 13px 16px);background-color:var(--nutui-cell-background-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-cell-border-radius, 6px);box-shadow:var(--nutui-cell-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));font-size:var(--nutui-cell-title-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-cell-title-color, var(--nutui-gray-1, #1a1a1a));margin:10px 0;box-sizing:border-box}.nut-cell__left{display:flex;flex-direction:column;flex:1}.nut-cell__description{font-size:var(--nutui-cell-description-font-size, var(--nutui-font-size-1, 12px));color:var(--nutui-cell-description-color, var(--nutui-gray-2, #757575))}.nut-cell__extra{display:inline-flex;justify-content:flex-end;align-items:center;flex:1;min-width:0;word-break:break-all;font-size:var(--nutui-cell-extra-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-cell-extra-color, var(--nutui-gray-2, #757575))}.nut-theme-dark .nut-form-item__body__slots .nut-input-text{color:#e6e6e6}.nut-form-item{display:flex}.nut-form-item:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;transform:scaleX(0)}.nut-form-item.error.line:before{border-bottom:1px solid var(--nutui-form-item-error-line-color, var(--nutui-brand-color, #fa2c19));transform:scaleX(1);transition:transform .2s cubic-bezier(0,0,.2,1) 0ms}.nut-form-item__label{font-size:var(--nutui-form-item-label-font-size, 14px);font-weight:400;width:var(--nutui-form-item-label-width, 90px);margin-right:var(--nutui-form-item-label-margin-right, 10px);flex:none!important;display:inline-block!important;word-wrap:break-word;text-align:var(--nutui-form-item-label-text-align, left)}.nut-form-item__label .required:before{content:"*";color:var(--nutui-form-item-required-color, var(--nutui-brand-color, #fa2c19));margin-right:var(--nutui-form-item-required-margin-right, 4px)}.nut-form-item__body{flex:1;display:flex!important;flex-direction:column}.nut-form-item__body__slots{text-align:var(--nutui-form-item-body-slots-text-align, left)}.nut-form-item__body__slots .nut-input{padding:0;border:0}.nut-form-item__body__slots .nut-input-text{font-size:var(--nutui-form-item-body-font-size, 14px);text-align:var(--nutui-form-item-body-input-text-align, left);color:var(--nutui-gray-0, #000000);width:100%;outline:0 none;border:0;text-decoration:none;background:transparent}.nut-form-item__body__slots .nut-range-container{min-height:24px}.nut-form-item__body__slots .nut-textarea{padding:0!important}.nut-form-item__body__slots .nut-textarea .nut-textarea__textarea{text-align:var(--nutui-form-item-body-input-text-align, left)}.nut-form-item__body__tips{text-align:var(--nutui-form-item-tip-text-align, left);font-size:var(--nutui-form-item-tip-font-size, 10px);color:var(--nutui-form-item-error-message-color, var(--nutui-brand-color, #fa2c19))}

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

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

package/dist/esm/Grid/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}.nut-grid{display:flex;flex-wrap:wrap;border:0 solid var(--nutui-grid-border-color, #f5f6f7)}.nut-grid__border{border-top-width:1px;border-left-width:1px}

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

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

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/Image.js

@@ -41,18 +41,16 @@ var Image = function Image2(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, src = _defaultProps$props.src, fit = _defaultProps$props.fit, position = _defaultProps$props.position, alt = _defaultProps$props.alt, width = _defaultProps$props.width, height = _defaultProps$props.height, radius = _defaultProps$props.radius, error = _defaultProps$props.error, loading = _defaultProps$props.loading, lazy = _defaultProps$props.lazy, onClick = _defaultProps$props.onClick, onLoad = _defaultProps$props.onLoad, onError = _defaultProps$props.onError;
   var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), innerLoading = _useState2[0], setInnerLoading = _useState2[1];
   var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), isError = _useState4[0], setIsError = _useState4[1];
-  var _useState5 = useState(""), _useState6 = _slicedToArray(_useState5, 2), _src = _useState6[0], setSrc = _useState6[1];
   var imgRef = useRef(null);
   useEffect(function() {
     if (imgRef.current && imgRef.current.complete && imgRef.current.naturalHeight !== 0) {
       setInnerLoading(false);
     } else if (src) {
-      setSrc(src);
-      setIsError(false);
       setInnerLoading(true);
     }
   }, [src]);
   var handleLoad = function handleLoad2() {
+    setIsError(false);
     setInnerLoading(false);
     onLoad && onLoad();
   };
@@ -73,7 +71,6 @@ var Image = function Image2(props) {
   }, style);
   var observer = useRef(null);
   var initObserver = function initObserver2() {
-    var images = document.querySelectorAll(".nut-img.lazyload");
     var options = {
       threshold: [0],
       rootMargin: "0px"
@@ -88,14 +85,12 @@ var Image = function Image2(props) {
               img.src = img.dataset.src;
               img.removeAttribute("data-src");
             }
-            observer.current.unobserve(item.target);
+            resetObserver();
           }, 300);
         }
       });
     }, options);
-    images.forEach(function(item) {
-      observer.current.observe(item);
-    });
+    observer.current.observe(imgRef.current);
   };
   var resetObserver = function resetObserver2() {
     observer.current.disconnect && observer.current.disconnect();
@@ -149,7 +144,7 @@ var Image = function Image2(props) {
     ref: imgRef,
     className: "nut-img lazyload",
     style: imgStyle,
-    "data-src": _src,
+    "data-src": src,
     alt,
     loading: "lazy",
     onLoad: handleLoad,
@@ -158,7 +153,7 @@ var Image = function Image2(props) {
     ref: imgRef,
     className: "nut-img",
     style: imgStyle,
-    src: _src,
+    src,
     alt,
     onLoad: handleLoad,
     onError: handleError

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__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, 20px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 20px) 0 0 var(--nutui-popup-border-radius, 20px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 20px) var(--nutui-popup-border-radius, 20px)}.nut-popup-slide-center-enter,.nut-popup-slide-center-exit{opacity:0}.nut-popup-slide-center-enter-active{opacity:1;transition:opacity .5s ease}.nut-popup-slide-top-enter{transform:translateY(-100%)}.nut-popup-slide-top-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-top-exit{transform:translate(0)}.nut-popup-slide-top-exit-active,.nut-popup-slide-top-exit-done{transform:translateY(-100%);transition:transform .5s}.nut-popup-slide-right-enter{transform:translate(100%)}.nut-popup-slide-right-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-right-exit{transform:translate(0)}.nut-popup-slide-right-exit-active,.nut-popup-slide-right-exit-done{transform:translate(100%);transition:transform .5s}.nut-popup-slide-bottom-enter{transform:translateY(100%)}.nut-popup-slide-bottom-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-bottom-exit{transform:translate(0)}.nut-popup-slide-bottom-exit-active,.nut-popup-slide-bottom-exit-done{transform:translateY(100%);transition:transform .5s}.nut-popup-slide-left-enter{transform:translate(-100%)}.nut-popup-slide-left-enter-active{transform:translate(0);transition:transform .5s}.nut-popup-slide-left-exit{transform:translate(0)}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{transform:translate(-100%);transition:transform .5s}.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}