@nutui/nutui-react 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/esm/Picker.js

@@ -2,7 +2,7 @@ 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 = ["visible", "title", "options", "defaultValue", "className", "style", "threeDimensional", "duration", "onConfirm", "onClose", "afterClose", "onChange"];
+var _excluded = ["children", "visible", "title", "options", "defaultValue", "className", "style", "threeDimensional", "duration", "onConfirm", "onClose", "afterClose", "onChange"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -251,7 +251,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
 });
 var InternalPicker = function InternalPicker2(props, ref) {
   var _useConfig = useConfig(), locale = _useConfig.locale;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), visible = _defaultProps$props.visible, title = _defaultProps$props.title, _defaultProps$props$o = _defaultProps$props.options, options = _defaultProps$props$o === void 0 ? [] : _defaultProps$props$o, _defaultProps$props$d = _defaultProps$props.defaultValue, defaultValue = _defaultProps$props$d === void 0 ? [] : _defaultProps$props$d, className = _defaultProps$props.className, style = _defaultProps$props.style, threeDimensional = _defaultProps$props.threeDimensional, duration = _defaultProps$props.duration, onConfirm = _defaultProps$props.onConfirm, onClose = _defaultProps$props.onClose, afterClose = _defaultProps$props.afterClose, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, visible = _defaultProps$props.visible, title = _defaultProps$props.title, _defaultProps$props$o = _defaultProps$props.options, options = _defaultProps$props$o === void 0 ? [] : _defaultProps$props$o, _defaultProps$props$d = _defaultProps$props.defaultValue, defaultValue = _defaultProps$props$d === void 0 ? [] : _defaultProps$props$d, className = _defaultProps$props.className, style = _defaultProps$props.style, threeDimensional = _defaultProps$props.threeDimensional, duration = _defaultProps$props.duration, onConfirm = _defaultProps$props.onConfirm, onClose = _defaultProps$props.onClose, afterClose = _defaultProps$props.afterClose, onChange = _defaultProps$props.onChange, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var classPrefix = "nut-picker";
   var classes = classNames(classPrefix, className);
   var _usePropsValue = usePropsValue({
@@ -263,10 +263,11 @@ var InternalPicker = function InternalPicker2(props, ref) {
       (_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 ? void 0 : _props$onConfirm.call(props, setSelectedOptions(), val);
     }
   }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectedValue = _usePropsValue2[0], setSelectedValue = _usePropsValue2[1];
-  var _useState13 = useState(0), _useState14 = _slicedToArray(_useState13, 2), columnIndex = _useState14[0], setColumnIndex = _useState14[1];
+  var _useState13 = useState(selectedValue), _useState14 = _slicedToArray(_useState13, 2), innerValue = _useState14[0], setInnerValue = _useState14[1];
+  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), columnIndex = _useState16[0], setColumnIndex = _useState16[1];
   var pickerRef = useRef(null);
   var _useRefs = useRefs(), _useRefs2 = _slicedToArray(_useRefs, 2), refs = _useRefs2[0], setRefs = _useRefs2[1];
-  var _useState15 = useState([]), _useState16 = _slicedToArray(_useState15, 2), columnsList = _useState16[0], setColumnsList = _useState16[1];
+  var _useState17 = useState([]), _useState18 = _slicedToArray(_useState17, 2), columnsList = _useState18[0], setColumnsList = _useState18[1];
   var isConfirmEvent = useRef(false);
   var formatCascade = function formatCascade2(columns, values) {
     var formatted = [];
@@ -305,41 +306,46 @@ var InternalPicker = function InternalPicker2(props, ref) {
     }
     return "single";
   };
-  var normalListData = function normalListData2() {
+  var normalListData = function normalListData2(innerValue2) {
     var type = columnsType();
     switch (type) {
       case "multiple":
         return options;
       case "cascade":
-        return formatCascade(options, selectedValue);
+        return formatCascade(options, innerValue2);
       default:
         return [options];
     }
   };
   var init = function init2() {
-    var normalData = normalListData();
+    var normalData = normalListData(innerValue);
     setColumnsList(normalData);
     var data = [];
     normalData.length > 0 && normalData.map(function(item) {
       item[0] && data.push(item[0].value);
       return item;
     });
-    if (!defaultValue.length && selectedValue.length === 0) {
-      setSelectedValue([].concat(data));
+    if (!innerValue.length && innerValue.length === 0) {
+      setInnerValue([].concat(data));
     }
   };
   useEffect(function() {
-    if (!visible) {
-      return;
+    setInnerValue(innerValue !== selectedValue ? selectedValue : innerValue);
+  }, [visible]);
+  useEffect(function() {
+    if (visible) {
+      init();
     }
-    init();
   }, [options, visible]);
+  useEffect(function() {
+    onChange && onChange(setSelectedOptions(), innerValue, columnIndex);
+  }, [innerValue, columnsList]);
   var setSelectedOptions = function setSelectedOptions2() {
     var options2 = [];
     var currOptions = [];
     columnsList.forEach(function(columnOptions, index) {
       currOptions = columnOptions.filter(function(item) {
-        return item.value === selectedValue[index];
+        return item.value === innerValue[index];
       });
       if (currOptions[0]) {
         options2.push(currOptions[0]);
@@ -349,37 +355,28 @@ var InternalPicker = function InternalPicker2(props, ref) {
     });
     return options2;
   };
-  useEffect(function() {
-    if (!visible) {
-      return;
-    }
-    onChange && onChange(setSelectedOptions(), selectedValue, columnIndex);
-    if (isConfirmEvent.current) {
-      isConfirmEvent.current = false;
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
-    }
-  }, [selectedValue, columnsList, visible]);
   var _chooseItem = function chooseItem(columnOptions, columnIndex2) {
+    var values = [];
+    var start = columnIndex2;
     if (columnOptions && Object.keys(columnOptions).length) {
-      if (selectedValue[columnIndex2] !== columnOptions.value) {
+      if (values[columnIndex2] !== columnOptions.value) {
         if (columnsType() === "cascade") {
           var _columnOptions2, _columnOptions2$child;
-          selectedValue[columnIndex2] = columnOptions.value || "";
-          setSelectedValue(_toConsumableArray(selectedValue));
+          values[columnIndex2] = columnOptions.value || "";
           while ((_columnOptions = columnOptions) !== null && _columnOptions !== void 0 && (_columnOptions$childr = _columnOptions.children) !== null && _columnOptions$childr !== void 0 && _columnOptions$childr[0]) {
             var _columnOptions, _columnOptions$childr;
-            selectedValue[columnIndex2 + 1] = columnOptions.children[0].value;
-            setSelectedValue(_toConsumableArray(selectedValue));
+            values[columnIndex2 + 1] = columnOptions.children[0].value;
             columnIndex2++;
             columnOptions = columnOptions.children[0];
           }
           if ((_columnOptions2 = columnOptions) !== null && _columnOptions2 !== void 0 && (_columnOptions2$child = _columnOptions2.children) !== null && _columnOptions2$child !== void 0 && _columnOptions2$child.length) {
-            selectedValue[columnIndex2 + 1] = "";
-            setSelectedValue(_toConsumableArray(selectedValue));
+            values[columnIndex2 + 1] = "";
           }
-          setColumnsList(normalListData());
+          var combineResult = [].concat(_toConsumableArray(innerValue.slice(0, start)), _toConsumableArray(values.splice(start)));
+          setInnerValue(combineResult);
+          setColumnsList(normalListData(combineResult));
         } else {
-          setSelectedValue(function(data) {
+          setInnerValue(function(data) {
             var cdata = _toConsumableArray(data);
             cdata[columnIndex2] = Object.prototype.hasOwnProperty.call(columnOptions, "value") ? columnOptions.value : "";
             return cdata;
@@ -390,16 +387,16 @@ var InternalPicker = function InternalPicker2(props, ref) {
     }
   };
   var confirm = function confirm2() {
-    var movings = false;
+    var moving = false;
     refs.forEach(function(ref2) {
       if (ref2.moving)
-        movings = true;
+        moving = true;
       ref2.stopMomentum();
     });
-    if (movings) {
+    if (moving) {
       isConfirmEvent.current = true;
     } else {
-      onConfirm && onConfirm(setSelectedOptions(), selectedValue);
+      setSelectedValue(innerValue);
       closePicker();
     }
     setTimeout(function() {
@@ -407,8 +404,8 @@ var InternalPicker = function InternalPicker2(props, ref) {
     }, 0);
   };
   var closePicker = function closePicker2() {
-    onClose && onClose(setSelectedOptions(), selectedValue);
-    afterClose && afterClose(setSelectedOptions(), selectedValue, pickerRef);
+    onClose && onClose(setSelectedOptions(), innerValue);
+    afterClose && afterClose(setSelectedOptions(), innerValue, pickerRef);
   };
   var renderTitleBar = function renderTitleBar2() {
     return React__default.createElement("div", {
@@ -434,13 +431,13 @@ var InternalPicker = function InternalPicker2(props, ref) {
   }, React__default.createElement("div", _objectSpread({
     className: classes,
     style
-  }, rest), renderTitleBar(), React__default.createElement("div", {
+  }, rest), renderTitleBar(), children, React__default.createElement("div", {
     className: "".concat(classPrefix, "__panel"),
     ref: pickerRef
   }, columnsList === null || columnsList === void 0 ? void 0 : columnsList.map(function(item, index) {
     return React__default.createElement(PickerPanel$1, {
       ref: setRefs(index),
-      defaultValue: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[index],
+      defaultValue: innerValue === null || innerValue === void 0 ? void 0 : innerValue[index],
       options: item,
       threeDimensional,
       chooseItem: function chooseItem(value, index2) {

package/dist/esm/Popover/style/index.js

@@ -1,2 +1,2 @@
-import '../../Overlay/style'
+import '../../Popup/style'
 import '../../../packages/popover/popover.scss'

package/dist/esm/Popover/style/style.css

@@ -1 +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-popover{display:inline-block}.nut-popover>div{position:relative}.nut-popover .more-background{background:var(--nutui-popover-white-background-color, rgb(255, 255, 255));opacity:0;position:fixed;width:100%;height:1000px;z-index:10;left:0}.nut-popover .popover-arrow{position:absolute;z-index:-1;width:0;height:0;border:8px solid transparent}.nut-popover .popover-content{z-index:12;background:var(--nutui-popover-white-background-color, rgb(255, 255, 255));border-radius:var(--nutui-popover-border-radius, 8px);opacity:1;font-size:var(--nutui-popover-font-size, var(--nutui-font-size-1, 12px));font-weight:400;color:var(--nutui-popover-primary-text-color, rgb(51, 51, 51));position:absolute;box-shadow:0 2px 12px #3232331f;opacity:0;transition:opacity .1s}.nut-popover .popover-content.popover-content-show{opacity:1}.nut-popover .popover-content .popover-menu-item{position:relative;padding:0 8px;display:flex;align-items:center;height:var(--nutui-popover-menu-item-height, 30px)}.nut-popover .popover-content .popover-menu-item .popover-menu-item-name{margin:var(--nutui-popover-menu-item-name-margin, 0px 10px);width:100%}.nut-popover .popover-content .popover-menu-item:first-child{border-radius:var(--nutui-popover-border-radius, 8px) var(--nutui-popover-border-radius, 8px) 0 0}.nut-popover .popover-content .popover-menu-item:last-child{border-bottom:none;border-radius:0 0 var(--nutui-popover-border-radius, 8px) var(--nutui-popover-border-radius, 8px)}.nut-popover .popover-content .popover-menu-item:last-child:after{height:0}.nut-popover .popover-content .popover-menu-item:hover{cursor:pointer;color:var(--nutui-popover-menu-item-hover-text-color, var(--nutui-brand-text-color, #ffffff));background-color:var(--nutui-popover-menu-item-hover-background-color, var(--nutui-brand-color, #fa2c19))}.nut-popover .popover-content .popover-menu-item:after{position:absolute;left:var(--nutui-popover-menu-item-border-left, 10%);bottom:var(--nutui-popover-menu-item-border-bottom, 2%);content:" ";display:inline-block;width:var(--nutui-popover-menu-item-border-width, 80%);height:var(--nutui-popover-menu-item-border-height, 1px);background-color:var(--nutui-popover-border-bottom-color, rgb(229, 229, 229))}.nut-popover .popover-arrow-top{bottom:0;border-top-color:var(--nutui-popover-white-background-color, rgb(255, 255, 255));border-bottom-width:0;margin-bottom:-7px}.nut-popover .popover-content--top,.nut-popover .popover-content--top .popover-arrow--top{left:50%;transform:translate(-50%)}.nut-popover .popover-content--top-end{right:0}.nut-popover .popover-content--top-end .popover-arrow--top-end{right:16px;transform:translate(0)}.nut-popover .popover-content--top-start{left:0}.nut-popover .popover-content--top-start .popover-arrow--top-start{left:16px;transform:translate(0)}.nut-popover .popover-content--bottom{left:50%;transform:translate(-50%)}.nut-popover .popover-content--bottom-end{right:0}.nut-popover .popover-content--bottom-start{left:0}.nut-popover .popover-content--left{top:50%;transform:translateY(-50%)}.nut-popover .popover-content--left-end{bottom:0}.nut-popover .popover-content--left-start{top:0}.nut-popover .popover-content--right{top:50%;transform:translateY(-50%)}.nut-popover .popover-content--right-end{bottom:0}.nut-popover .popover-content--right-start{top:0}.nut-popover .popover-arrow-bottom{top:0px;border-bottom-color:var(--nutui-popover-white-background-color, rgb(255, 255, 255));border-top-width:0;margin-top:-7px}.nut-popover .popover-arrow--bottom{left:50%;transform:translate(-50%)}.nut-popover .popover-arrow--bottom-start{left:16px;transform:translate(0)}.nut-popover .popover-arrow--bottom-end{right:16px;transform:translate(0)}.nut-popover .popover-arrow-left{right:0px;border-left-color:var(--nutui-popover-white-background-color, rgb(255, 255, 255));border-right-width:0;margin-right:-8px}.nut-popover .popover-arrow--left{top:50%;transform:translateY(-50%)}.nut-popover .popover-arrow--left-start{top:16px;transform:translateY(0)}.nut-popover .popover-arrow--left-end{bottom:16px;transform:translateY(0)}.nut-popover .popover-arrow-right{left:0px;border-right-color:var(--nutui-popover-white-background-color, rgb(255, 255, 255));border-left-width:0;margin-left:-8px}.nut-popover .popover-arrow--right{top:50%;transform:translateY(-50%)}.nut-popover .popover-arrow--right-start{top:16px;transform:translateY(0)}.nut-popover .popover-arrow--right-end{bottom:16px;transform:translateY(0)}.nut-popover .popover-menu-item.disabled{color:var(--nutui-popover-disable-color, rgb(154, 155, 157));cursor:not-allowed}.nut-popover .popover-menu-item.disabled:hover{cursor:not-allowed;color:var(--nutui-popover-disable-color, rgb(154, 155, 157));background-color:var(--nutui-popover-white-background-color, rgb(255, 255, 255))}.nut-popover--dark{background:var(--nutui-popover-dark-background-color, rgb(75, 76, 77));color:var(--nutui-popover-white-background-color, rgb(255, 255, 255))}.nut-popover--dark .popover-content{background:var(--nutui-popover-dark-background-color, rgb(75, 76, 77))!important;color:var(--nutui-popover-white-background-color, rgb(255, 255, 255))!important}.nut-popover--dark .popover-content--bottom .popover-arrow,.nut-popover--dark .popover-content--bottom-start .popover-arrow,.nut-popover--dark .popover-content--bottom-end .popover-arrow{border-bottom-color:var(--nutui-popover-dark-background-color, rgb(75, 76, 77))}.nut-popover--dark .popover-content--top .popover-arrow,.nut-popover--dark .popover-content--top-start .popover-arrow,.nut-popover--dark .popover-content--top-end .popover-arrow{border-top-color:var(--nutui-popover-dark-background-color, rgb(75, 76, 77))}.nut-popover--dark .popover-content--left .popover-arrow,.nut-popover--dark .popover-content--left-start .popover-arrow,.nut-popover--dark .popover-content--left-end .popover-arrow{border-left-color:var(--nutui-popover-dark-background-color, rgb(75, 76, 77))}.nut-popover--dark .popover-content--right .popover-arrow,.nut-popover--dark .popover-content--right-start .popover-arrow,.nut-popover--dark .popover-content--right-end .popover-arrow{border-right-color:var(--nutui-popover-dark-background-color, rgb(75, 76, 77))}
+.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)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-popover{position:absolute;display:inline-block;word-break:normal}.nut-popover-arrow{position:absolute;width:0;height:0;border:8px solid transparent}.nut-popover-arrow-top{bottom:0;border-top-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-bottom-width:0;margin-bottom:-8px}.nut-popover-arrow-bottom{top:0px;border-bottom-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-top-width:0;margin-top:-8px}.nut-popover-arrow-bottom.nut-popover-arrow--bottom{left:50%;transform:translate(-50%)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-start{left:16px;transform:translate(0)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-end{right:16px;transform:translate(0)}.nut-popover-arrow-left{right:0px;border-left-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-right-width:0;margin-right:-8px}.nut-popover-arrow-left.nut-popover-arrow--left{top:50%;transform:translateY(-50%)}.nut-popover-arrow-left.nut-popover-arrow--left-start{top:16px;transform:translateY(0)}.nut-popover-arrow-left.nut-popover-arrow--left-end{bottom:16px;transform:translateY(0)}.nut-popover-arrow-right{left:0px;border-right-color:var(--nutui-popover-white-background-color, var(--nutui-gray-6, #ffffff));border-left-width:0;margin-left:-8px}.nut-popover-arrow-right.nut-popover-arrow--right{top:50%;transform:translateY(-50%)}.nut-popover-arrow-right.nut-popover-arrow--right-start{top:16px;transform:translateY(0)}.nut-popover-arrow-right.nut-popover-arrow--right-end{bottom:16px;transform:translateY(0)}.nut-popover .nut-popover-content{position:absolute;background-color:var(--nutui-popover-content-background-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-popover-border-radius, 8px);font-size:var(--nutui-popover-font-size, var(--nutui-font-size-2, 14px));font-family:PingFangSC;font-weight:400;color:var(--nutui-popover-primary-text-color, var(--nutui-gray-1, #1a1a1a));box-shadow:0 2px 12px #3232331f;max-height:initial;overflow-y:initial}.nut-popover .nut-popover-content-group{display:block;height:100%;width:100%}.nut-popover .nut-popover-content .nut-popover-menu-item{display:flex;align-items:center;padding:var(--nutui-popover-menu-item-padding, 8px);border-bottom:1px solid var(--nutui-popover-border-bottom-color, rgb(229, 229, 229))}.nut-popover .nut-popover-content .nut-popover-menu-item:last-child{margin-bottom:2px;border-bottom:none}.nut-popover .nut-popover-content .nut-popover-menu-item:hover{cursor:pointer;color:var(--nutui-popover-menu-item-hover-text-color, #1a1a1a);background-color:var(--nutui-popover-menu-item-hover-background-color, #fff)}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name{width:100%;word-break:keep-all}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled{color:var(--nutui-popover-disable-color, rgb(154, 155, 157));cursor:not-allowed}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem{display:flex}.nut-popover .nut-popover-content--top .nut-popover-arrow--top{left:50%;transform:translate(-50%)}.nut-popover .nut-popover-content--top-end{right:0}.nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end{right:16px;transform:translate(0)}.nut-popover .nut-popover-content--top-start{left:0}.nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start{left:16px;transform:translate(0)}.nut-popover .nut-popover-content--bottom-end{right:0}.nut-popover .nut-popover-content--left-end{bottom:0}.nut-popover .nut-popover-content--left-start{top:0}.nut-popover .nut-popover-content--right-end{bottom:0}.nut-popover .nut-popover-content--right-start{top:0}.nut-popover-enter-from,.nut-popover-leave-active{transform:scale(.8);opacity:0}.nut-popover-enter-active{transition-timing-function:ease-out}.nut-popover-leave-active{transition-timing-function:ease-in}.nut-popover-content-bg{position:fixed;height:100%;width:100%;top:0;left:0;background:transparent;z-index:1999}.nut-popover-wrapper{display:inline-block}.nut-popover-content-copy{position:absolute;top:-99999px}