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

package/dist/esm/Menu.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "titleIcon", "scrollFixed", "lockScroll", "closeOnClickOverlay", "children", "activeColor"];
+var _excluded = ["className", "icon", "scrollFixed", "lockScroll", "closeOnOverlayClick", "children", "activeColor"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -29,17 +29,15 @@ import classNames from "classnames";
 import { ArrowUp2, ArrowDown2 } from "@nutui/icons-react";
 import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: {},
   activeColor: "",
-  closeOnClickOverlay: true,
+  closeOnOverlayClick: true,
   scrollFixed: false,
   lockScroll: true,
-  titleIcon: null
+  icon: null
 });
 var Menu = function Menu2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, titleIcon = _defaultProps$props.titleIcon, scrollFixed = _defaultProps$props.scrollFixed, lockScroll = _defaultProps$props.lockScroll, closeOnClickOverlay = _defaultProps$props.closeOnClickOverlay, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var parentRef = useRef(null);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, icon = _defaultProps$props.icon, scrollFixed = _defaultProps$props.scrollFixed, lockScroll = _defaultProps$props.lockScroll, closeOnOverlayClick = _defaultProps$props.closeOnOverlayClick, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var menuRef = useRef(null);
   var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isScrollFixed = _useState2[0], setIsScrollFixed = _useState2[1];
   var getScrollTop = function getScrollTop2(el) {
     return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
@@ -58,92 +56,96 @@ var Menu = function Menu2(props) {
       return window.removeEventListener("scroll", onScroll);
     };
   }, []);
-  var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), itemShow = _useState4[0], setItemShow = _useState4[1];
-  var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), itemTitle = _useState6[0], setItemTitle = _useState6[1];
-  var toggleItemShow = function toggleItemShow2(index) {
-    itemShow[index] = !itemShow[index];
-    var temp = itemShow.map(function(i, idx) {
+  var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), showMenuItem = _useState4[0], setShowMenuItem = _useState4[1];
+  var _useState5 = useState([]), _useState6 = _slicedToArray(_useState5, 2), menuItemTitle = _useState6[0], setMenuItemTitle = _useState6[1];
+  var toggleMenuItem = function toggleMenuItem2(index) {
+    showMenuItem[index] = !showMenuItem[index];
+    var temp = showMenuItem.map(function(i, idx) {
       return idx === index ? i : false;
     });
-    setItemShow(_toConsumableArray(temp));
+    setShowMenuItem(_toConsumableArray(temp));
   };
-  var hideItemShow = function hideItemShow2(index) {
-    itemShow[index] = false;
-    setItemShow(_toConsumableArray(itemShow));
+  var hideMenuItem = function hideMenuItem2(index) {
+    showMenuItem[index] = false;
+    setShowMenuItem(_toConsumableArray(showMenuItem));
   };
   var updateTitle = function updateTitle2(text, index) {
-    itemTitle[index] = text;
-    setItemTitle(_toConsumableArray(itemTitle));
-  };
-  var parent = function parent2() {
-    return parentRef;
+    menuItemTitle[index] = text;
+    setMenuItemTitle(_toConsumableArray(menuItemTitle));
   };
   var cloneChildren = function cloneChildren2() {
     return React__default.Children.map(children, function(child, index) {
       return React__default.cloneElement(child, {
-        showPopup: itemShow[index],
-        orderKey: index,
+        show: showMenuItem[index],
+        index,
         activeColor,
         parent: {
-          closeOnClickOverlay,
+          closeOnOverlayClick,
           lockScroll,
-          toggleItemShow,
+          toggleMenuItem,
           updateTitle,
-          hideItemShow,
-          parent
+          hideMenuItem,
+          menuRef
         }
       });
     });
   };
-  return React__default.createElement("div", _objectSpread(_objectSpread({
-    className: "nut-menu ".concat(className, " ").concat(isScrollFixed ? "scroll-fixed" : "")
-  }, rest), {}, {
-    ref: parentRef
+  var menuTitle = function menuTitle2() {
+    return React__default.Children.map(children, function(child, index) {
+      if (React__default.isValidElement(child)) {
+        var _child$props = child.props, title = _child$props.title, options = _child$props.options, value = _child$props.value, disabled = _child$props.disabled, direction = _child$props.direction;
+        var selected = options === null || options === void 0 ? void 0 : options.filter(function(option) {
+          return option.value === value;
+        });
+        var finallyTitle = function finallyTitle2() {
+          if (title)
+            return title;
+          if (menuItemTitle && menuItemTitle[index])
+            return menuItemTitle[index];
+          if (selected && selected.length && selected[0].text)
+            return selected[0].text;
+          return "";
+        };
+        return React__default.createElement("div", {
+          className: classNames("nut-menu__item ", className, {
+            active: showMenuItem[index],
+            disabled
+          }),
+          style: {
+            color: showMenuItem[index] ? activeColor : ""
+          },
+          key: index,
+          onClick: function onClick() {
+            !disabled && toggleMenuItem(index);
+          }
+        }, React__default.createElement("div", {
+          className: classNames("nut-menu__title ", {
+            active: showMenuItem[index],
+            disabled
+          })
+        }, React__default.createElement("div", {
+          className: "nut-menu__title-text"
+        }, finallyTitle()), icon || (direction === "up" ? React__default.createElement(ArrowUp2, {
+          className: "nut-menu__title-icon"
+        }) : React__default.createElement(ArrowDown2, {
+          className: "nut-menu__title-icon"
+        }))));
+      }
+      return null;
+    });
+  };
+  return React__default.createElement("div", _objectSpread(_objectSpread({}, rest), {}, {
+    className: classNames("nut-menu", className, {
+      "scroll-fixed": isScrollFixed
+    }),
+    ref: menuRef
   }), React__default.createElement("div", {
     className: "nut-menu-relative"
   }, React__default.createElement("div", {
-    className: "nut-menu__bar ".concat(itemShow.includes(true) ? "opened" : "", " ").concat(className)
-  }, React__default.Children.toArray(children).map(function(child, index) {
-    if (!child)
-      return null;
-    var _child$props = child.props, disabled = _child$props.disabled, title = _child$props.title, value = _child$props.value, direction = _child$props.direction, options = _child$props.options, className2 = _child$props.className;
-    var currentTitle = options === null || options === void 0 ? void 0 : options.filter(function(option) {
-      return option.value === value;
-    });
-    function finallyTitle() {
-      if (title)
-        return title;
-      if (itemTitle && itemTitle[index])
-        return itemTitle[index];
-      if (currentTitle && currentTitle[0] && currentTitle[0].text)
-        return currentTitle[0].text;
-      return "";
-    }
-    return React__default.createElement("div", {
-      className: "nut-menu__item ".concat(classNames({
-        active: itemShow[index],
-        disabled
-      }), " ").concat(className2),
-      style: {
-        color: itemShow[index] ? activeColor : ""
-      },
-      key: index,
-      onClick: function onClick() {
-        !disabled && toggleItemShow(index);
-      }
-    }, React__default.createElement("div", {
-      className: "nut-menu__title ".concat(classNames({
-        active: itemShow[index],
-        disabled
-      }))
-    }, React__default.createElement("div", {
-      className: "nut-menu__title-text"
-    }, finallyTitle()), titleIcon || React__default.createElement(React__default.Fragment, null, direction === "up" ? React__default.createElement(ArrowUp2, {
-      className: "nut-menu__title-icon"
-    }) : React__default.createElement(ArrowDown2, {
-      className: "nut-menu__title-icon"
-    }))));
-  })), cloneChildren()));
+    className: classNames("nut-menu__bar", {
+      opened: showMenuItem.includes(true)
+    })
+  }, menuTitle()), cloneChildren()));
 };
 Menu.defaultProps = defaultProps;
 Menu.displayName = "NutMenu";

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: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}

package/dist/esm/MenuItem.js

@@ -28,11 +28,10 @@ import { Check } from "@nutui/icons-react";
 import { O as Overlay } from "./overlay2.js";
 import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: {},
   columns: 1,
   direction: "down",
-  optionsIcon: null,
+  icon: null,
+  closeOnClickAway: false,
   activeTitleClass: "",
   inactiveTitleClass: "",
   onChange: function onChange(value) {
@@ -40,20 +39,18 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   }
 });
 var MenuItem = forwardRef(function(props, ref) {
-  var mergedProps = _objectSpread(_objectSpread({}, defaultProps), props);
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, columns = _defaultProps$props.columns, title = _defaultProps$props.title, optionsIcon = _defaultProps$props.optionsIcon, direction = _defaultProps$props.direction, onChange2 = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, children = _defaultProps$props.children;
-  var activeColor = mergedProps.activeColor, showPopup = mergedProps.showPopup, parent = mergedProps.parent, orderKey = mergedProps.orderKey;
-  var _useState = useState(showPopup), _useState2 = _slicedToArray(_useState, 2), _showPopup = _useState2[0], setShowPopup = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, columns = _defaultProps$props.columns, title = _defaultProps$props.title, icon = _defaultProps$props.icon, direction = _defaultProps$props.direction, onChange2 = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, closeOnClickAway = _defaultProps$props.closeOnClickAway, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, show = _defaultProps$props.show, parent = _defaultProps$props.parent, index = _defaultProps$props.index;
+  var _useState = useState(show), _useState2 = _slicedToArray(_useState, 2), _showPopup = _useState2[0], setShowPopup = _useState2[1];
   var _useState3 = useState(value), _useState4 = _slicedToArray(_useState3, 2), _value = _useState4[0], setValue = _useState4[1];
   useEffect(function() {
-    setShowPopup(showPopup);
-  }, [showPopup]);
+    setShowPopup(show);
+  }, [show]);
   useEffect(function() {
     getParentOffset();
   }, [_showPopup]);
   useImperativeHandle(ref, function() {
     return {
-      toggle: parent.toggleItemShow
+      toggle: parent.toggleMenuItem
     };
   });
   var getIconCName = function getIconCName2(optionVal, value2) {
@@ -62,11 +59,11 @@ var MenuItem = forwardRef(function(props, ref) {
   };
   var setTitle = function setTitle2(text) {
     if (!title) {
-      parent.updateTitle(text, orderKey);
+      parent.updateTitle(text, index);
     }
   };
   var handleClick = function handleClick2(item) {
-    parent.toggleItemShow(orderKey);
+    parent.toggleMenuItem(index);
     setTitle(item.text);
     setValue(item.value);
     onChange2 && onChange2(item);
@@ -77,7 +74,7 @@ var MenuItem = forwardRef(function(props, ref) {
   }), _useState6 = _slicedToArray(_useState5, 2), position = _useState6[0], setPosition = _useState6[1];
   var getParentOffset = function getParentOffset2() {
     setTimeout(function() {
-      var p = parent.parent().current;
+      var p = parent.menuRef.current;
       var rect = p.getBoundingClientRect();
       setPosition({
         height: rect.height,
@@ -102,42 +99,47 @@ var MenuItem = forwardRef(function(props, ref) {
   };
   var placeholderStyle = function placeholderStyle2() {
     if (direction === "down") {
-      return _objectSpread(_objectSpread({
-        height: "".concat(position.top + position.height, "px")
-      }, isShow()), style);
+      return _objectSpread({
+        height: "".concat(position.top + position.height, "px"),
+        top: 0
+      }, isShow());
     }
-    return _objectSpread(_objectSpread({
+    return _objectSpread({
       height: "".concat(window.innerHeight - position.top, "px"),
+      bottom: "0px",
       top: "auto"
-    }, isShow()), style);
+    }, isShow());
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  return React__default.createElement(React__default.Fragment, null, closeOnClickAway ? React__default.createElement("div", {
     className: "placeholder-element ".concat(classNames({
       up: direction === "up"
     })),
     style: placeholderStyle(),
     onClick: function onClick() {
-      return parent.toggleItemShow(orderKey);
+      return parent.toggleMenuItem(index);
     }
-  }), React__default.createElement(Overlay, {
+  }) : null, React__default.createElement(Overlay, {
     className: "nut-menu__overlay",
     style: getPosition(),
     lockScroll: parent.lockScroll,
     visible: _showPopup,
-    closeOnOverlayClick: parent.closeOnClickOverlay,
+    closeOnOverlayClick: parent.closeOnOverlayClick,
     onClick: function onClick() {
-      parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+      parent.closeOnOverlayClick && parent.toggleMenuItem(index);
     }
   }), React__default.createElement("div", {
-    className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-    style: _objectSpread({}, isShow())
+    className: classNames(className, {
+      "nut-menu-item__wrap": direction === "down",
+      "nut-menu-item__wrap-up": direction !== "down"
+    }),
+    style: _objectSpread(_objectSpread({}, style), isShow())
   }, React__default.createElement(CSSTransition, {
     "in": _showPopup,
     timeout: 100,
     classNames: direction === "down" ? "menu-item" : "menu-item-up"
   }, React__default.createElement("div", {
     className: "nut-menu-item__content"
-  }, options === null || options === void 0 ? void 0 : options.map(function(item, index) {
+  }, options === null || options === void 0 ? void 0 : options.map(function(item, index2) {
     return React__default.createElement("div", {
       className: "nut-menu-item__option ".concat(classNames({
         active: item.value === _value
@@ -149,7 +151,7 @@ var MenuItem = forwardRef(function(props, ref) {
       onClick: function onClick() {
         handleClick(item);
       }
-    }, item.value === _value ? React__default.createElement("i", null, optionsIcon || React__default.createElement(Check, {
+    }, item.value === _value ? React__default.createElement("i", null, icon || React__default.createElement(Check, {
       color: activeColor,
       className: getIconCName(item.value, value)
     })) : null, React__default.createElement("div", {

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

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

package/dist/esm/NavBar/style/style.css

@@ -0,0 +1 @@
+.nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;padding:var(--nutui-navbar-padding, 13px 16px);background:var(--nutui-navbar-background, var(--nutui-gray-6, #ffffff));box-shadow:var(--nutui-navbar-box-shadow, 0px 1px 7px 0px rgb(237, 238, 241));font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-2, #757575));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar--fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar--placeholder{display:inline-block;width:100%}.nut-navbar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.nut-navbar__title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-2, 14px));font-weight:var(--nutui-navbar-title-font-weight, 0);color:var(--nutui-navbar-title-font-color, var(--nutui-gray-1, #1a1a1a))}.nut-navbar__title .nut-tabs__titles{background:var(--nutui-gray-6, #ffffff)}.nut-navbar__title .nut-tabs__titles-item__text{color:var(--nutui-gray-1, #1a1a1a)}.nut-navbar__title .nut-tabpane{display:none}.nut-navbar__title ::-webkit-scrollbar{display:none}.nut-navbar__left,.nut-navbar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 16px}.nut-navbar__left{left:0}.nut-navbar__left__back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar__right{right:0}

package/dist/esm/NavBar.js

@@ -22,35 +22,21 @@ function _objectSpread(target) {
 }
 import React__default from "react";
 import classNames from "classnames";
-import { Left } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: "",
-  description: "",
-  leftShow: true,
-  className: "",
-  leftText: "",
+  left: "",
+  right: "",
+  back: "",
   fixed: false,
   safeAreaInsetTop: false,
-  border: false,
   placeholder: false,
-  zIndex: 10,
-  style: {}
+  zIndex: 10
 });
 var NavBar = function NavBar2(props) {
   var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), description = _defaultProps$props.description, title = _defaultProps$props.title, leftShow = _defaultProps$props.leftShow, className = _defaultProps$props.className, style = _defaultProps$props.style, leftText = _defaultProps$props.leftText, fixed = _defaultProps$props.fixed, safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop, border = _defaultProps$props.border, placeholder = _defaultProps$props.placeholder, zIndex = _defaultProps$props.zIndex, onClickTitle = _defaultProps$props.onClickTitle, onClickIcon = _defaultProps$props.onClickIcon, onClickBack = _defaultProps$props.onClickBack, onClickRight = _defaultProps$props.onClickRight;
-  var b = cn("navbar");
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), right = _defaultProps$props.right, left = _defaultProps$props.left, className = _defaultProps$props.className, style = _defaultProps$props.style, back = _defaultProps$props.back, fixed = _defaultProps$props.fixed, safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop, placeholder = _defaultProps$props.placeholder, zIndex = _defaultProps$props.zIndex, onClickBack = _defaultProps$props.onClickBack;
+  var classPrefix = "nut-navbar";
   var children = Array.isArray(props.children) ? props.children : [props.children];
-  var slot = children.reduce(function(slot2, item) {
-    var data = slot2;
-    if (item && item.props) {
-      data[item.props.slot] = item.props.children;
-    }
-    return data;
-  }, {});
   var styles = function styles2() {
     return _objectSpread(_objectSpread({}, style), {}, {
       zIndex
@@ -58,40 +44,23 @@ var NavBar = function NavBar2(props) {
   };
   var renderLeft = function renderLeft2() {
     return React__default.createElement("div", {
-      className: "".concat(b("left")),
+      className: "".concat(classPrefix, "__left")
+    }, back && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__left__back"),
       onClick: function onClick(e) {
         return onClickBack(e);
       }
-    }, leftShow && React__default.createElement(Left, {
-      name: "left",
-      color: "#979797"
-    }), leftText && React__default.createElement("div", {
-      className: "".concat(b("text"))
-    }, leftText), slot.left);
+    }, back), left);
   };
   var renderContent = function renderContent2() {
     return React__default.createElement("div", {
-      className: "".concat(b("title"))
-    }, title && React__default.createElement("div", {
-      className: "title",
-      onClick: function onClick(e) {
-        return onClickTitle(e);
-      }
-    }, title), slot.titleIcon && React__default.createElement("div", {
-      onClick: function onClick(e) {
-        return onClickIcon(e);
-      }
-    }, slot.titleIcon), slot.content);
+      className: "".concat(classPrefix, "__title")
+    }, children);
   };
   var renderRight = function renderRight2() {
     return React__default.createElement("div", {
-      className: "".concat(b("right")),
-      onClick: function onClick(e) {
-        return onClickRight(e);
-      }
-    }, description && React__default.createElement("div", {
-      className: "".concat(b("text"))
-    }, description), slot.right);
+      className: "".concat(classPrefix, "__right")
+    }, right);
   };
   var renderWrapper = function renderWrapper2() {
     return React__default.createElement("div", {
@@ -99,10 +68,10 @@ var NavBar = function NavBar2(props) {
       style: styles()
     }, renderLeft(), renderContent(), renderRight());
   };
-  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-navbar--border", border), _defineProperty(_classNames, "nut-navbar--fixed", fixed), _defineProperty(_classNames, "nut-navbar--safe-area-inset-top", safeAreaInsetTop), _classNames));
-  var cls = classNames(b(""), classes, className);
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_classNames, "".concat(classPrefix, "--safe-area-inset-top"), safeAreaInsetTop), _classNames));
+  var cls = classNames(classPrefix, classes, className);
   return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", {
-    className: "".concat(b(""), "--placeholder")
+    className: "".concat(classPrefix, "--placeholder")
   }, renderWrapper()) : renderWrapper());
 };
 NavBar.defaultProps = defaultProps;

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

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

package/dist/esm/NoticeBar/style/style.css

@@ -0,0 +1 @@
+.nut-noticebar{width:100%}.nut-noticebar .nut-noticebar-page{display:flex;padding:var(--nutui-noticebar-box-padding, 0 16px);height:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, 14px);position:relative;align-items:center;background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-page.wrapable{height:auto;padding:var(--nutui-noticebar-wrapable-padding, 16px)}.nut-noticebar .nut-noticebar-page.wrapable .wrap{height:auto}.nut-noticebar .nut-noticebar-page.wrapable .wrap .content{position:relative;white-space:normal;word-wrap:break-word}.nut-noticebar .nut-noticebar-page .withicon{position:relative;padding-right:40px}.nut-noticebar .nut-noticebar-page .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 10px);background-size:100% 100%}.nut-noticebar .nut-noticebar-page .right-icon{display:flex;align-items:center;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 10px)}.nut-noticebar .nut-noticebar-page .wrap{display:flex;flex:1;height:var(--nutui-noticebar-line-height, 24px);line-height:var(--nutui-noticebar-line-height, 24px);overflow:hidden;position:relative}.nut-noticebar .nut-noticebar-page .content{position:absolute;white-space:nowrap}.nut-noticebar .nut-noticebar-page .content.nut-ellipsis{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-noticebar .nut-noticebar-page .play{animation:nut-notice-bar-play linear both running}.nut-noticebar .nut-noticebar-page .play-infinite{animation:nut-notice-bar-play-infinite linear infinite both running}.nut-noticebar .nut-noticebar-page .play-vertical{animation:nut-notice-bar-play-vertical linear infinite both running}@keyframes nut-notice-bar-play{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-infinite{to{transform:translate3d(-100%,0,0)}}@keyframes nut-notice-bar-play-vertical{to{transform:translateY(var(--nutui-noticebar-height, 40px))}}.nut-noticebar .nut-noticebar-vertical{position:relative;display:flex;justify-content:space-between;height:var(--nutui-noticebar-height, 40px);font-size:var(--nutui-noticebar-font-size, 14px);overflow:hidden;padding:var(--nutui-noticebar-box-padding, 0 16px);background:var(--nutui-noticebar-background, rgb(251, 248, 220));color:var(--nutui-noticebar-color, #d9500b)}.nut-noticebar .nut-noticebar-vertical .left-icon{height:var(--nutui-noticebar-left-icon-width, 16px);min-width:var(--nutui-noticebar-left-icon-width, 16px);margin:var(--nutui-noticebar-lefticon-margin, 0px 10px);background-size:100% 100%;display:flex;align-self:center}.nut-noticebar .nut-noticebar-vertical .horseLamp_list{margin:0;padding:0;display:block;flex:1}.nut-noticebar .nut-noticebar-vertical .horseLamp_list .horseLamp_list_item{display:flex;align-items:center;height:var(--nutui-noticebar-height, 40px);width:100%}.nut-noticebar .nut-noticebar-vertical .nut-noticebar__inner{display:flex;height:100%;width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.nut-noticebar .nut-noticebar-vertical .go{align-self:center;display:flex;justify-content:center;width:var(--nutui-noticebar-right-icon-width, 16px);margin:var(--nutui-noticebar-righticon-margin, 0px 10px)}