@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/Switch.js

@@ -1,67 +1,34 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["checked", "defaultChecked", "disabled", "activeText", "inactiveText", "className", "style", "onChange"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default from "react";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  disabled: false,
-  activeText: "",
-  inactiveText: ""
-});
-var Switch = function Switch2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), checked = _defaultProps$props.checked, defaultChecked = _defaultProps$props.defaultChecked, disabled = _defaultProps$props.disabled, activeText = _defaultProps$props.activeText, inactiveText = _defaultProps$props.inactiveText, className = _defaultProps$props.className, style = _defaultProps$props.style, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var classPrefix = "nut-switch";
-  var _usePropsValue = usePropsValue({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { disabled: false, activeText: "", inactiveText: "" });
+const Switch = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { checked, defaultChecked, disabled, activeText, inactiveText, className, style, onChange } = _a, rest = __rest(_a, ["checked", "defaultChecked", "disabled", "activeText", "inactiveText", "className", "style", "onChange"]);
+  const classPrefix = "nut-switch";
+  const [value, setValue] = usePropsValue({
     value: checked,
     defaultValue: defaultChecked
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
-  var classes = function classes2() {
-    return "".concat(classPrefix, " ").concat(value ? "nut-switch-open" : "nut-switch-close", " ").concat(disabled ? "".concat(classPrefix, "-disabled") : "", " ", "".concat(classPrefix, "-base"), " ").concat(className);
+  });
+  const classes = () => {
+    return `${classPrefix} ${value ? "nut-switch-open" : "nut-switch-close"} ${disabled ? `${classPrefix}-disabled` : ""} ${`${classPrefix}-base`} ${className}`;
   };
-  var _onClick = function onClick(event) {
+  const onClick = (event) => {
     if (disabled)
       return;
     onChange && onChange(!value, event);
     setValue(!value);
   };
-  return React__default.createElement("div", _objectSpread({
-    className: classes(),
-    onClick: function onClick(e) {
-      return _onClick(e);
-    },
-    style
-  }, rest), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-button")
-  }, !value && React__default.createElement("div", {
-    className: "".concat(classPrefix, "-close-line")
-  }), activeText && React__default.createElement(React__default.Fragment, null, value ? React__default.createElement("div", {
-    className: "".concat(classPrefix, "-label open")
-  }, activeText) : React__default.createElement("div", {
-    className: "".concat(classPrefix, "-label close")
-  }, inactiveText))));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: classes(), onClick: (e) => onClick(e), style }, rest),
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-button` },
+      !value && React__default.createElement("div", { className: `${classPrefix}-close-line` }),
+      activeText && React__default.createElement(React__default.Fragment, null, value ? React__default.createElement("div", { className: `${classPrefix}-label open` }, activeText) : React__default.createElement("div", { className: `${classPrefix}-label close` }, inactiveText))
+    )
+  );
 };
 Switch.defaultProps = defaultProps;
 Switch.displayName = "NutSwitch";

package/dist/esm/TabPane.js

@@ -1,41 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default from "react";
 import classNames from "classnames";
-var defaultProps = {
+const defaultProps = {
   title: "",
   value: "",
   disabled: false
 };
-var TabPane = function TabPane2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, autoHeightClassName = _defaultProps$props.autoHeightClassName, className = _defaultProps$props.className, disabled = _defaultProps$props.disabled;
-  var classPrefix = "nut-tabpane";
-  var classes = classNames(classPrefix, {
+const TabPane = (props) => {
+  const { children, autoHeightClassName, className, disabled } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-tabpane";
+  const classes = classNames(classPrefix, {
     active: !disabled && props.active
   }, autoHeightClassName, className);
-  return children ? React__default.createElement("div", {
-    className: classes
-  }, !disabled && children) : null;
+  return children ? React__default.createElement("div", { className: classes }, !disabled && children) : null;
 };
 export {
   TabPane as default

package/dist/esm/Tabbar/style/style.css

@@ -1 +1 @@
-.nut-badge{position:relative;display:inline-block}.nut-badge-icon{position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));top:-10%;right:-15%;padding:var(--nutui-badge-icon-padding, 3px);text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));z-index:var(--nutui-badge-z-index, 1)}.nut-badge-icon .nut-icon{width:var(--nutui-badge-icon-size, 12px);height:var(--nutui-badge-icon-size, 12px);font-size:var(--nutui-badge-icon-size, 12px)}.nut-badge-sup{height:var(--nutui-badge-height, 14px);position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));color:var(--nutui-badge-color, #fff);padding:var(--nutui-badge-padding, 0 4px);font-size:var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));font-weight:400;text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));min-width:var(--nutui-badge-min-width, 5px)}.nut-badge-one{height:var(--nutui-badge-height, 14px);width:var(--nutui-badge-height, 14px);padding:0}.nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(100%))}.nut-badge-dot{width:var(--nutui-badge-dot-width, 7px);height:var(--nutui-badge-dot-width, 7px);border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-dot-width, 7px);padding:0}[dir=rtl] .nut-badge-icon,.nut-rtl .nut-badge-icon{right:auto;left:-15%}[dir=rtl] .nut-badge-content,.nut-rtl .nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%))}.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));height:100%}.nut-tabbar-item-icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item-icon-box .nut-icon{width:24px;height:24px;font-size:24px}.nut-tabbar-item-icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 3px)}.nut-tabbar-item-icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px);font-weight:var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400))}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-color-primary, #fa2c19))}.nut-tabbar-item-active .nut-tabbar-item-icon-box,.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon{color:inherit}.nut-tabbar{border:0px;box-shadow:var(--nutui-tabbar-box-shadow, none);border-bottom:var(--nutui-tabbar-border-bottom, 1px solid #eee);border-top:var(--nutui-tabbar-border-top, 1px solid #eee);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;background:var(--nutui-gray-1, #ffffff)}.nut-tabbar-wrap{width:100%;height:var(--nutui-tabbar-height, 50px);display:flex;flex-direction:row;justify-content:center;align-items:center}.nut-tabbar:last-child{border-right:0}.nut-tabbar-fixed{position:fixed;bottom:0;left:0}.nut-tabbar-safe-area{display:block;width:100%;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}[dir=rtl] .nut-tabbar:last-child,.nut-rtl .nut-tabbar:last-child{border-right:none;border-left:0}[dir=rtl] .nut-tabbar-fixed,.nut-rtl .nut-tabbar-fixed{left:auto;right:0}
+.nut-badge{position:relative;display:inline-block}.nut-badge-icon{position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));top:-10%;right:-15%;padding:var(--nutui-badge-icon-padding, 3px);text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));z-index:var(--nutui-badge-z-index, 1)}.nut-badge-icon .nut-icon{width:var(--nutui-badge-icon-size, 12px);height:var(--nutui-badge-icon-size, 12px);font-size:var(--nutui-badge-icon-size, 12px)}.nut-badge-sup{height:var(--nutui-badge-height, 14px);position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));color:var(--nutui-badge-color, #fff);padding:var(--nutui-badge-padding, 0 4px);font-size:var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));font-weight:400;text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));min-width:var(--nutui-badge-min-width, 5px);white-space:nowrap;z-index:1}.nut-badge-one{height:var(--nutui-badge-height, 14px);width:var(--nutui-badge-height, 14px);padding:0}.nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(100%))}.nut-badge-dot{width:var(--nutui-badge-dot-width, 7px);height:var(--nutui-badge-dot-width, 7px);border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-dot-width, 7px);padding:0}[dir=rtl] .nut-badge-icon,.nut-rtl .nut-badge-icon{right:auto;left:-15%}[dir=rtl] .nut-badge-content,.nut-rtl .nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%))}.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));height:100%}.nut-tabbar-item-icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item-icon-box .nut-icon{width:24px;height:24px;font-size:24px}.nut-tabbar-item-icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 3px)}.nut-tabbar-item-icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px);font-weight:var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400))}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-color-primary, #fa2c19))}.nut-tabbar-item-active .nut-tabbar-item-icon-box,.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon{color:inherit}.nut-tabbar{border:0px;box-shadow:var(--nutui-tabbar-box-shadow, none);border-bottom:var(--nutui-tabbar-border-bottom, 1px solid #eee);border-top:var(--nutui-tabbar-border-top, 1px solid #eee);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;background:var(--nutui-gray-1, #ffffff)}.nut-tabbar-wrap{width:100%;height:var(--nutui-tabbar-height, 50px);display:flex;flex-direction:row;justify-content:center;align-items:center}.nut-tabbar:last-child{border-right:0}.nut-tabbar-fixed{position:fixed;bottom:0;left:0}.nut-tabbar-safe-area{display:block;width:100%;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}[dir=rtl] .nut-tabbar:last-child,.nut-rtl .nut-tabbar:last-child{border-right:none;border-left:0}[dir=rtl] .nut-tabbar-fixed,.nut-rtl .nut-tabbar-fixed{left:auto;right:0}

package/dist/esm/Tabbar.js

@@ -1,70 +1,40 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
 import React__default from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
 import { a as TabbarContext, T as TabbarItem } from "./tabbaritem2.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  defaultValue: 0,
-  fixed: false,
-  inactiveColor: "",
-  activeColor: "",
-  safeArea: false,
-  onSwitch: function onSwitch(value) {
-  }
-});
-var Tabbar = function Tabbar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, fixed = _defaultProps$props.fixed, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, safeArea = _defaultProps$props.safeArea, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
-  var classPrefix = "nut-tabbar";
-  var _usePropsValue = usePropsValue({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { defaultValue: 0, fixed: false, inactiveColor: "", activeColor: "", safeArea: false, onSwitch: (value) => {
+} });
+const Tabbar = (props) => {
+  const { children, defaultValue, value, fixed, activeColor, inactiveColor, safeArea, className, style, onSwitch } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-tabbar";
+  const [selectIndex, setSelectIndex] = usePropsValue({
     value,
     defaultValue,
     finalValue: 0,
-    onChange: onSwitch2
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectIndex = _usePropsValue2[0], setSelectIndex = _usePropsValue2[1];
-  return React__default.createElement("div", {
-    className: classNames(classPrefix, _defineProperty({}, "".concat(classPrefix, "-fixed"), fixed), className),
-    style
-  }, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-wrap")
-  }, React__default.createElement(TabbarContext.Provider, {
-    value: {
-      selectIndex,
-      activeColor,
-      inactiveColor,
-      handleClick: setSelectIndex
-    }
-  }, React__default.Children.map(children, function(child, index) {
-    if (!React__default.isValidElement(child))
-      return null;
-    return React__default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-      index
-    }));
-  }))), (fixed || safeArea) && React__default.createElement("div", {
-    className: "".concat(classPrefix, "-safe-area")
-  }));
+    onChange: onSwitch
+  });
+  return React__default.createElement(
+    "div",
+    { className: classNames(classPrefix, {
+      [`${classPrefix}-fixed`]: fixed
+    }, className), style },
+    React__default.createElement(
+      "div",
+      { className: `${classPrefix}-wrap` },
+      React__default.createElement(TabbarContext.Provider, { value: {
+        selectIndex,
+        activeColor,
+        inactiveColor,
+        handleClick: setSelectIndex
+      } }, React__default.Children.map(children, (child, index) => {
+        if (!React__default.isValidElement(child))
+          return null;
+        return React__default.cloneElement(child, Object.assign(Object.assign({}, child.props), { index }));
+      }))
+    ),
+    (fixed || safeArea) && React__default.createElement("div", { className: `${classPrefix}-safe-area` })
+  );
 };
 Tabbar.defaultProps = defaultProps;
 Tabbar.displayName = "NutTabbar";

package/dist/esm/TabbarItem/style/style.css

@@ -1 +1 @@
-.nut-badge{position:relative;display:inline-block}.nut-badge-icon{position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));top:-10%;right:-15%;padding:var(--nutui-badge-icon-padding, 3px);text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));z-index:var(--nutui-badge-z-index, 1)}.nut-badge-icon .nut-icon{width:var(--nutui-badge-icon-size, 12px);height:var(--nutui-badge-icon-size, 12px);font-size:var(--nutui-badge-icon-size, 12px)}.nut-badge-sup{height:var(--nutui-badge-height, 14px);position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));color:var(--nutui-badge-color, #fff);padding:var(--nutui-badge-padding, 0 4px);font-size:var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));font-weight:400;text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));min-width:var(--nutui-badge-min-width, 5px)}.nut-badge-one{height:var(--nutui-badge-height, 14px);width:var(--nutui-badge-height, 14px);padding:0}.nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(100%))}.nut-badge-dot{width:var(--nutui-badge-dot-width, 7px);height:var(--nutui-badge-dot-width, 7px);border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-dot-width, 7px);padding:0}[dir=rtl] .nut-badge-icon,.nut-rtl .nut-badge-icon{right:auto;left:-15%}[dir=rtl] .nut-badge-content,.nut-rtl .nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%))}.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));height:100%}.nut-tabbar-item-icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item-icon-box .nut-icon{width:24px;height:24px;font-size:24px}.nut-tabbar-item-icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 3px)}.nut-tabbar-item-icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px);font-weight:var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400))}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-color-primary, #fa2c19))}.nut-tabbar-item-active .nut-tabbar-item-icon-box,.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon{color:inherit}
+.nut-badge{position:relative;display:inline-block}.nut-badge-icon{position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));top:-10%;right:-15%;padding:var(--nutui-badge-icon-padding, 3px);text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));z-index:var(--nutui-badge-z-index, 1)}.nut-badge-icon .nut-icon{width:var(--nutui-badge-icon-size, 12px);height:var(--nutui-badge-icon-size, 12px);font-size:var(--nutui-badge-icon-size, 12px)}.nut-badge-sup{height:var(--nutui-badge-height, 14px);position:absolute;display:flex;justify-content:center;align-items:center;background:var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%));color:var(--nutui-badge-color, #fff);padding:var(--nutui-badge-padding, 0 4px);font-size:var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));font-weight:400;text-align:center;border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));min-width:var(--nutui-badge-min-width, 5px);white-space:nowrap;z-index:1}.nut-badge-one{height:var(--nutui-badge-height, 14px);width:var(--nutui-badge-height, 14px);padding:0}.nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(100%))}.nut-badge-dot{width:var(--nutui-badge-dot-width, 7px);height:var(--nutui-badge-dot-width, 7px);border:var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));border-radius:var(--nutui-badge-dot-width, 7px);padding:0}[dir=rtl] .nut-badge-icon,.nut-rtl .nut-badge-icon{right:auto;left:-15%}[dir=rtl] .nut-badge-content,.nut-rtl .nut-badge-content{transform:var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%))}.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));height:100%}.nut-tabbar-item-icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item-icon-box .nut-icon{width:24px;height:24px;font-size:24px}.nut-tabbar-item-icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 3px)}.nut-tabbar-item-icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px);font-weight:var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400))}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-color-primary, #fa2c19))}.nut-tabbar-item-active .nut-tabbar-item-icon-box,.nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon{color:inherit}

package/dist/esm/Table.js

@@ -1,77 +1,46 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "sorterIcon", "showHeader", "onSort"];
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function(r2) {
-      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
-      _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
-      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
-    });
-  }
-  return e;
-}
+import { _ as __rest } from "./tslib.es6.js";
 import React__default, { useState, useEffect, useCallback, useRef } from "react";
 import classNames from "classnames";
 import { ArrowDown } from "@nutui/icons-react";
-import { useConfig } from "./ConfigProvider.js";
+import { useConfig, useRtl } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as usePropsValue } from "./use-props-value.js";
-function useTableSticky(columns) {
-  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isSticky = _useState2[0], setIsSticky = _useState2[1];
-  var _useState3 = useState({}), _useState4 = _slicedToArray(_useState3, 2), stickyColumnStyleMap = _useState4[0], setStickyColumnStyleMap = _useState4[1];
-  var _useState5 = useState({}), _useState6 = _slicedToArray(_useState5, 2), stickyColumnClassMap = _useState6[0], setStickyColumnClassMap = _useState6[1];
-  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), stickyLeftWidth = _useState8[0], setStickyLeftWidth = _useState8[1];
-  var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), stickyRightWidth = _useState10[0], setStickyRightWidth = _useState10[1];
-  useEffect(function() {
-    var leftColumns = columns.filter(function(item) {
-      return item.fixed === "left";
-    }) || [];
-    var rightColumns = columns.filter(function(item) {
-      return item.fixed === "right";
-    }) || [];
-    var middleColumns = columns.filter(function(item) {
-      return !item.fixed;
-    }) || [];
-    var _columnStyleMap = {};
-    var _columnClassMap = {};
-    var _stickyLeftWidth = 0;
-    var _stickyRightWidth = 0;
-    leftColumns.forEach(function(curr2, index) {
-      leftColumns[index - 1] || {};
-      _columnStyleMap[curr2.key] = {
-        left: _stickyLeftWidth || 0,
-        width: curr2.width || "auto"
+function useTableSticky(columns, rtl = false) {
+  const [isSticky, setIsSticky] = useState(false);
+  const [stickyColumnStyleMap, setStickyColumnStyleMap] = useState({});
+  const [stickyColumnClassMap, setStickyColumnClassMap] = useState({});
+  const [stickyLeftWidth, setStickyLeftWidth] = useState(0);
+  const [stickyRightWidth, setStickyRightWidth] = useState(0);
+  useEffect(() => {
+    const leftColumns = columns.filter((item) => item.fixed === "left") || [];
+    const rightColumns = columns.filter((item) => item.fixed === "right") || [];
+    const middleColumns = columns.filter((item) => !item.fixed) || [];
+    const _columnStyleMap = {};
+    const _columnClassMap = {};
+    let _stickyLeftWidth = 0;
+    let _stickyRightWidth = 0;
+    leftColumns.forEach((curr, index) => {
+      const dir = rtl ? "right" : "left";
+      _columnStyleMap[curr.key] = {
+        [dir]: _stickyLeftWidth || 0,
+        width: curr.width || "auto"
       };
-      _columnClassMap[curr2.key] = {
+      _columnClassMap[curr.key] = {
         "nut-table-fixed-left": true,
         "nut-table-fixed-left-last": index === leftColumns.length - 1
       };
-      _stickyLeftWidth += curr2.width || 0;
+      _stickyLeftWidth += curr.width || 0;
     });
-    middleColumns.forEach(function(curr2) {
-      _columnStyleMap[curr2.key] = {
-        width: curr2.width || "auto"
+    middleColumns.forEach((curr) => {
+      _columnStyleMap[curr.key] = {
+        width: curr.width || "auto"
       };
     });
-    for (var i = rightColumns.length - 1; i >= 0; i--) {
-      var curr = rightColumns[i];
-      rightColumns[i + 1] || {};
+    for (let i = rightColumns.length - 1; i >= 0; i--) {
+      const curr = rightColumns[i];
+      const dir = rtl ? "left" : "right";
       _columnStyleMap[curr.key] = {
-        right: _stickyRightWidth || 0,
+        [dir]: _stickyRightWidth || 0,
         width: curr.width || "auto"
       };
       _columnClassMap[curr.key] = {
@@ -86,10 +55,10 @@ function useTableSticky(columns) {
     setStickyLeftWidth(_stickyLeftWidth);
     setStickyRightWidth(_stickyRightWidth);
   }, [columns]);
-  var getStickyStyle = useCallback(function(key) {
+  const getStickyStyle = useCallback((key) => {
     return stickyColumnStyleMap[key];
   }, [stickyColumnStyleMap]);
-  var getStickyClass = useCallback(function(key) {
+  const getStickyClass = useCallback((key) => {
     return stickyColumnClassMap[key];
   }, [stickyColumnClassMap]);
   return {
@@ -100,35 +69,28 @@ function useTableSticky(columns) {
     getStickyStyle
   };
 }
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  columns: [],
-  data: [],
-  bordered: true,
-  striped: false,
-  noData: "",
-  sorterIcon: null,
-  showHeader: true
-});
-var Table = function Table2(props) {
-  var _useConfig = useConfig(), locale = _useConfig.locale;
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { columns: [], data: [], bordered: true, striped: false, noData: "", sorterIcon: null, showHeader: true });
+const Table = (props) => {
+  const { locale } = useConfig();
+  const rtl = useRtl();
   defaultProps.noData = locale.noData;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, columns = _defaultProps$props.columns, data = _defaultProps$props.data, bordered = _defaultProps$props.bordered, summary = _defaultProps$props.summary, striped = _defaultProps$props.striped, noData = _defaultProps$props.noData, sorterIcon = _defaultProps$props.sorterIcon, showHeader = _defaultProps$props.showHeader, onSort = _defaultProps$props.onSort, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var sortedMapping = useRef({});
-  var _usePropsValue = usePropsValue({
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, style, columns, data, bordered, summary, striped, noData, sorterIcon, showHeader, onSort } = _a, rest = __rest(_a, ["children", "className", "style", "columns", "data", "bordered", "summary", "striped", "noData", "sorterIcon", "showHeader", "onSort"]);
+  const sortedMapping = useRef({});
+  const [innerValue, setValue] = usePropsValue({
     defaultValue: data,
     finalValue: []
-  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), innerValue = _usePropsValue2[0], setValue = _usePropsValue2[1];
-  var _useTableSticky = useTableSticky(columns), isSticky = _useTableSticky.isSticky, stickyLeftWidth = _useTableSticky.stickyLeftWidth, stickyRightWidth = _useTableSticky.stickyRightWidth, getStickyClass = _useTableSticky.getStickyClass, getStickyStyle = _useTableSticky.getStickyStyle;
-  useEffect(function() {
+  });
+  const { isSticky, stickyLeftWidth, stickyRightWidth, getStickyClass, getStickyStyle } = useTableSticky(columns, rtl);
+  useEffect(() => {
     setValue(data);
   }, [data]);
-  var classPrefix = "nut-table";
-  var headerClassPrefix = "".concat(classPrefix, "-main-head-tr");
-  var bodyClassPrefix = "".concat(classPrefix, "-main-body-tr");
-  var cls = classNames(classPrefix, className);
-  var handleSorterClick = function handleSorterClick2(item) {
+  const classPrefix = "nut-table";
+  const headerClassPrefix = `${classPrefix}-main-head-tr`;
+  const bodyClassPrefix = `${classPrefix}-main-body-tr`;
+  const cls = classNames(classPrefix, className);
+  const handleSorterClick = (item) => {
     if (item.sorter && !sortedMapping.current[item.key]) {
-      var copied = _toConsumableArray(innerValue);
+      const copied = [...innerValue];
       if (typeof item.sorter === "function") {
         copied.sort(item.sorter);
       } else if (item.sorter === "default") {
@@ -142,78 +104,68 @@ var Table = function Table2(props) {
       setValue(data);
     }
   };
-  var cellClasses = function cellClasses2(item) {
-    return _defineProperty(_defineProperty({}, "".concat(headerClassPrefix, "-border"), props.bordered), "".concat(headerClassPrefix, "-align").concat(item.align ? item.align : ""), true);
+  const cellClasses = (item) => {
+    return {
+      [`${headerClassPrefix}-border`]: props.bordered,
+      [`${headerClassPrefix}-align${item.align ? item.align : ""}`]: true
+    };
   };
-  var getColumnItem = function getColumnItem2(value) {
-    return columns.filter(function(item) {
-      return item.key === value;
-    })[0];
+  const getColumnItem = (value) => {
+    return columns.filter((item) => item.key === value)[0];
   };
-  var renderHeadCells = function renderHeadCells2() {
-    return columns.map(function(item, index) {
-      return React__default.createElement("div", {
-        className: classNames("".concat(headerClassPrefix, "-th"), cellClasses(item), getStickyClass(item.key)),
-        key: item.key,
-        onClick: function onClick() {
-          return handleSorterClick(item);
-        },
-        style: getStickyStyle(item.key)
-      }, item.title, " ", item.sorter && (sorterIcon || React__default.createElement(ArrowDown, {
-        width: "12px",
-        height: "12px"
-      })));
+  const renderHeadCells = () => {
+    return columns.map((item, index) => {
+      return React__default.createElement(
+        "div",
+        { className: classNames(`${headerClassPrefix}-th`, cellClasses(item), getStickyClass(item.key)), key: item.key, onClick: () => handleSorterClick(item), style: getStickyStyle(item.key) },
+        item.title,
+        " ",
+        item.sorter && (sorterIcon || React__default.createElement(ArrowDown, { width: "12px", height: "12px" }))
+      );
     });
   };
-  var sortDataItem = function sortDataItem2() {
-    return columns.map(function(columns2) {
+  const sortDataItem = () => {
+    return columns.map((columns2) => {
       return [columns2.key, columns2.render];
     });
   };
-  var renderBodyTds = function renderBodyTds2(item, rowIndex) {
-    return sortDataItem().map(function(_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2), value = _ref3[0], render = _ref3[1];
-      return React__default.createElement("div", {
-        className: classNames("".concat(bodyClassPrefix, "-td"), cellClasses(getColumnItem(value)), getStickyClass(value)),
-        key: value,
-        style: getStickyStyle(value)
-      }, typeof item[value] === "function" || typeof render === "function" ? React__default.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
+  const renderBodyTds = (item, rowIndex) => {
+    return sortDataItem().map(([value, render]) => {
+      return React__default.createElement("div", { className: classNames(`${bodyClassPrefix}-td`, cellClasses(getColumnItem(value)), getStickyClass(value)), key: value, style: getStickyStyle(value) }, typeof item[value] === "function" || typeof render === "function" ? React__default.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
     });
   };
-  var renderBodyTrs = function renderBodyTrs2() {
-    return innerValue.map(function(item, index) {
-      return React__default.createElement("div", {
-        className: bodyClassPrefix,
-        key: index
-      }, renderBodyTds(item, index));
+  const renderBodyTrs = () => {
+    return innerValue.map((item, index) => {
+      return React__default.createElement("div", { className: bodyClassPrefix, key: index }, renderBodyTds(item, index));
     });
   };
-  return React__default.createElement("div", _objectSpread({
-    className: cls
-  }, rest), React__default.createElement("div", {
-    className: classNames("".concat(classPrefix, "-wrapper ").concat(isSticky ? "".concat(classPrefix, "-wrapper-sticky") : "")),
-    style
-  }, React__default.createElement("div", {
-    className: classNames("".concat(classPrefix, "-main"), _defineProperty({}, "".concat(classPrefix, "-main-striped"), striped))
-  }, showHeader && React__default.createElement("div", {
-    className: "".concat(classPrefix, "-main-head")
-  }, React__default.createElement("div", {
-    className: headerClassPrefix
-  }, renderHeadCells())), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-main-body")
-  }, renderBodyTrs()))), isSticky ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: "".concat(classPrefix, "-sticky-left"),
-    style: {
-      width: stickyLeftWidth
-    }
-  }), React__default.createElement("div", {
-    className: "".concat(classPrefix, "-sticky-right"),
-    style: {
-      width: stickyRightWidth
-    }
-  })) : null, (summary || innerValue.length === 0) && React__default.createElement("div", {
-    className: "".concat(classPrefix, "-summary")
-  }, summary || noData));
+  return React__default.createElement(
+    "div",
+    Object.assign({ className: cls }, rest),
+    React__default.createElement(
+      "div",
+      { className: classNames(`${classPrefix}-wrapper ${isSticky ? `${classPrefix}-wrapper-sticky` : ""}`), style },
+      React__default.createElement(
+        "div",
+        { className: classNames(`${classPrefix}-main`, {
+          [`${classPrefix}-main-striped`]: striped
+        }) },
+        showHeader && React__default.createElement(
+          "div",
+          { className: `${classPrefix}-main-head` },
+          React__default.createElement("div", { className: headerClassPrefix }, renderHeadCells())
+        ),
+        React__default.createElement("div", { className: `${classPrefix}-main-body` }, renderBodyTrs())
+      )
+    ),
+    isSticky ? React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement("div", { className: `${classPrefix}-sticky-left`, style: { width: stickyLeftWidth } }),
+      React__default.createElement("div", { className: `${classPrefix}-sticky-right`, style: { width: stickyRightWidth } })
+    ) : null,
+    (summary || innerValue.length === 0) && React__default.createElement("div", { className: `${classPrefix}-summary` }, summary || noData)
+  );
 };
 Table.defaultProps = defaultProps;
 Table.displayName = "NutTable";