@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/esm/CountDown.js

@@ -1,221 +1,247 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["showPlainText", "showDays", "paused", "startTime", "endTime", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "children"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useRef, useEffect } from 'react';
-import { c as cn } from './bem-893ad28d.js';
-import { useConfig } from './ConfigProvider.js';
-import '@bem-react/classname';
-var defaultProps = {
-  showPlainText: false,
-  showDays: false,
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["paused", "startTime", "endTime", "remainingTime", "millisecond", "format", "autoStart", "time", "destroy", "className", "style", "onEnd", "onPaused", "onRestart", "onUpdate", "children"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useState, useRef, useImperativeHandle, useEffect } from "react";
+import { useConfig } from "./ConfigProvider.js";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   paused: false,
   startTime: Date.now(),
-  endTime: Date.now()
-};
-
-var CountDown = function CountDown(props) {
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      showPlainText = _defaultProps$props.showPlainText,
-      showDays = _defaultProps$props.showDays,
-      paused = _defaultProps$props.paused,
-      startTime = _defaultProps$props.startTime,
-      endTime = _defaultProps$props.endTime,
-      className = _defaultProps$props.className,
-      style = _defaultProps$props.style,
-      onEnd = _defaultProps$props.onEnd,
-      onPaused = _defaultProps$props.onPaused,
-      onRestart = _defaultProps$props.onRestart,
-      onUpdate = _defaultProps$props.onUpdate,
-      children = _defaultProps$props.children,
-      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-
-  var b = cn('countdown');
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      restTimeStamp = _useState2[0],
-      setRestTime = _useState2[1];
-
+  endTime: Date.now(),
+  remainingTime: 0,
+  millisecond: false,
+  format: "HH:mm:ss",
+  autoStart: true,
+  time: 0,
+  destroy: false
+});
+var InternalCountDown = function InternalCountDown2(props, ref) {
+  useConfig();
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), paused = _defaultProps$props.paused, startTime = _defaultProps$props.startTime, endTime = _defaultProps$props.endTime, remainingTime = _defaultProps$props.remainingTime, millisecond = _defaultProps$props.millisecond, format = _defaultProps$props.format, autoStart = _defaultProps$props.autoStart, time = _defaultProps$props.time, destroy = _defaultProps$props.destroy, className = _defaultProps$props.className, style = _defaultProps$props.style, onEnd = _defaultProps$props.onEnd, onPaused = _defaultProps$props.onPaused, onRestart = _defaultProps$props.onRestart, onUpdate = _defaultProps$props.onUpdate, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var classPrefix = "nut-countdown";
+  var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), restTimeStamp = _useState2[0], setRestTime = _useState2[1];
   var stateRef = useRef({
     pauseTime: 0,
     curr: 0,
-    timer: 0,
     isPaused: paused,
-    isIninted: false
-  }); // 补0操作
-
-  var fill2 = function fill2(v) {
-    v += '';
-
-    while (v.length < 2) {
-      v = "0".concat(v);
+    isIninted: false,
+    timer: 0,
+    restTime: 0,
+    counting: !paused && autoStart,
+    handleEndTime: Date.now(),
+    diffTime: 0
+    // 设置了 startTime 时，与 date.now() 的差异
+  });
+  var getTimeStamp = function getTimeStamp2(timeStr) {
+    if (!timeStr)
+      return Date.now();
+    var t = timeStr;
+    t = t > 0 ? +t : t.toString().replace(/-/g, "/");
+    return new Date(t).getTime();
+  };
+  var initTime = function initTime2() {
+    if (remainingTime) {
+      stateRef.current.handleEndTime = Date.now() + Number(remainingTime);
+    } else {
+      stateRef.current.handleEndTime = endTime;
+      stateRef.current.diffTime = Date.now() - getTimeStamp(startTime);
     }
-
-    return v;
-  }; // 倒计时数据
-
-
-  var restTime = function restTime(t) {
+    if (!stateRef.current.counting)
+      stateRef.current.counting = true;
+    tick();
+  };
+  var tick = function tick2() {
+    stateRef.current.timer = requestAnimationFrame(function() {
+      if (stateRef.current.counting) {
+        var currentTime = Date.now() - stateRef.current.diffTime;
+        var remainTime = Math.max(stateRef.current.handleEndTime - currentTime, 0);
+        stateRef.current.restTime = remainTime;
+        setRestTime(remainTime);
+        if (!remainTime) {
+          stateRef.current.counting = false;
+          pause();
+          onEnd && onEnd();
+        }
+        if (remainTime > 0) {
+          tick2();
+        }
+      }
+    });
+  };
+  var formatRemainTime = function formatRemainTime2(t, type) {
     var ts = t;
-    var rest = {
-      d: '-',
-      h: '--',
-      m: '--',
-      s: '--'
+    var rest2 = {
+      d: 0,
+      h: 0,
+      m: 0,
+      s: 0,
+      ms: 0
     };
-
-    if (ts === 0) {
-      rest = {
-        d: '0',
-        h: '00',
-        m: '00',
-        s: '00'
-      };
+    var SECOND = 1e3;
+    var MINUTE = 60 * SECOND;
+    var HOUR = 60 * MINUTE;
+    var DAY = 24 * HOUR;
+    if (ts > 0) {
+      rest2.d = ts >= SECOND ? Math.floor(ts / DAY) : 0;
+      rest2.h = Math.floor(ts % DAY / HOUR);
+      rest2.m = Math.floor(ts % HOUR / MINUTE);
+      rest2.s = Math.floor(ts % MINUTE / SECOND);
+      rest2.ms = Math.floor(ts % SECOND);
     }
-
-    if (ts) {
-      var ds = 24 * 60 * 60 * 1000;
-      var hs = 60 * 60 * 1000;
-      var ms = 60 * 1000;
-      var d = ts >= ds ? parseInt(String(ts / ds)) : 0;
-      var h = ts - d * ds >= hs ? parseInt(String((ts - d * ds) / hs)) : 0;
-      var m = ts - d * ds - h * hs >= ms ? parseInt(String((ts - d * ds - h * hs) / ms)) : 0;
-      var s = Math.round((ts - d * ds - h * hs - m * ms) / 1000);
-      if (d >= 0) rest.d = "".concat(d);
-      if (h >= 0) rest.h = fill2(h);
-      if (m >= 0) rest.m = fill2(m);
-      if (s >= 0) rest.s = fill2(s);
+    return type === "custom" ? rest2 : parseFormat(_objectSpread({}, rest2));
+  };
+  var parseFormat = function parseFormat2(time2) {
+    var d = time2.d;
+    var h = time2.h, m = time2.m, s = time2.s, ms = time2.ms;
+    var formatCache = format;
+    if (formatCache.includes("DD")) {
+      formatCache = formatCache.replace("DD", padZero(d));
+    } else {
+      h += Number(d) * 24;
     }
-
-    return rest;
-  }; // 倒计最终时格式数据
-
-
-  var resttime = function () {
-    var rest = restTime(restTimeStamp);
-    var d = rest.d;
-
-    if (!showDays && Number(d) > 0) {
-      rest.h = fill2(Number(rest.h) + Number(d) * 24);
-      rest.d = '0';
+    if (formatCache.includes("HH")) {
+      formatCache = formatCache.replace("HH", padZero(h));
+    } else {
+      m += Number(h) * 60;
     }
-
-    return rest;
-  }(); // 获取时间戳
-
-
-  var getTimeStamp = function getTimeStamp(timeStr) {
-    if (!timeStr) return Date.now();
-    var t = timeStr;
-    t = t > 0 ? +t : t.toString().replace(/\-/g, '/');
-    return new Date(t).getTime();
-  }; // 展示文案，English todo @hanyuxinting
-
-
-  var plainText = function () {
-    var d = resttime.d,
-        h = resttime.h,
-        m = resttime.m,
-        s = resttime.s;
-    var showDayshours = Number(d) > 0 && showDays ? "".concat(d).concat(locale.countdown.day).concat(h) : h;
-    return "".concat(showDayshours).concat(locale.countdown.hour).concat(m).concat(locale.countdown.minute).concat(s).concat(locale.countdown.second);
-  }(); // 初始化
-
-
-  var initTimer = function initTimer() {
-    if (!stateRef.current.isIninted) {
-      stateRef.current.isIninted = true;
+    if (formatCache.includes("mm")) {
+      formatCache = formatCache.replace("mm", padZero(m));
+    } else {
+      s += Number(m) * 60;
     }
-
-    var delay = 1000;
-    var curr = Date.now();
-    var start = getTimeStamp(startTime || curr);
-    var end = getTimeStamp(endTime || curr);
-    var diffTime = curr - start;
-    setRestTime(end - (start + diffTime));
-    stateRef.current.timer = setInterval(function () {
-      if (!stateRef.current.isPaused) {
-        var _restTime = end - (Date.now() - stateRef.current.pauseTime + diffTime);
-
-        setRestTime(_restTime);
-
-        if (_restTime < 0) {
-          setRestTime(0);
-          onEnd && onEnd();
-          clearInterval(stateRef.current.timer);
-        }
+    if (formatCache.includes("ss")) {
+      formatCache = formatCache.replace("ss", padZero(s));
+    } else {
+      ms += Number(s) * 1e3;
+    }
+    if (formatCache.includes("S")) {
+      var msC = padZero(ms, 3).toString();
+      if (formatCache.includes("SSS")) {
+        formatCache = formatCache.replace("SSS", msC);
+      } else if (formatCache.includes("SS")) {
+        formatCache = formatCache.replace("SS", msC.slice(0, 2));
+      } else if (formatCache.includes("S")) {
+        formatCache = formatCache.replace("SS", msC.slice(0, 1));
       }
-    }, delay);
-  }; // 监听值变更
-
-
-  useEffect(function () {
-    if (onUpdate) {
-      var tranTime = restTime(restTimeStamp);
-      onUpdate(tranTime);
     }
-  }, [restTimeStamp]); // 监听暂停
-
-  useEffect(function () {
+    return formatCache;
+  };
+  var padZero = function padZero2(num) {
+    var length = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
+    num += "";
+    while (num.length < length) {
+      num = "0".concat(num);
+    }
+    return num.toString();
+  };
+  var pause = function pause2() {
+    cancelAnimationFrame(stateRef.current.timer);
+    stateRef.current.counting = false;
+    onPaused && onPaused(stateRef.current.restTime);
+  };
+  useImperativeHandle(ref, function() {
+    return {
+      start: function start() {
+        if (!stateRef.current.counting && !autoStart) {
+          stateRef.current.counting = true;
+          stateRef.current.handleEndTime = Date.now() + Number(stateRef.current.restTime);
+          tick();
+          onRestart && onRestart(stateRef.current.restTime);
+        }
+      },
+      pause: function pause2() {
+        cancelAnimationFrame(stateRef.current.timer);
+        stateRef.current.counting = false;
+        onPaused && onPaused(stateRef.current.restTime);
+      },
+      reset: function reset() {
+        if (!autoStart) {
+          pause();
+          stateRef.current.restTime = time;
+          setRestTime(time);
+        }
+      }
+    };
+  });
+  useEffect(function() {
+    var tranTime = formatRemainTime(stateRef.current.restTime, "custom");
+    onUpdate && onUpdate(tranTime);
+  }, [restTimeStamp]);
+  useEffect(function() {
     if (stateRef.current.isIninted) {
-      stateRef.current.isPaused = paused;
-
       if (paused) {
-        stateRef.current.curr = getTimeStamp();
-        onPaused && onPaused(restTimeStamp);
+        if (stateRef.current.counting) {
+          pause();
+        }
       } else {
-        stateRef.current.pauseTime += getTimeStamp() - stateRef.current.curr;
-        onRestart && onRestart(restTimeStamp);
+        if (!stateRef.current.counting) {
+          stateRef.current.counting = true;
+          stateRef.current.handleEndTime = Date.now() + Number(stateRef.current.restTime);
+          tick();
+        }
+        onRestart && onRestart(stateRef.current.restTime);
       }
     }
-  }, [paused]); // 监听开始结束时间变更
-
-  useEffect(function () {
+  }, [paused]);
+  useEffect(function() {
     if (stateRef.current.isIninted) {
-      initTimer();
+      initTime();
+    }
+  }, [endTime, startTime, remainingTime]);
+  useEffect(function() {
+    if (autoStart) {
+      initTime();
+    } else {
+      stateRef.current.restTime = time;
+      setRestTime(time);
+    }
+    if (!stateRef.current.isIninted) {
+      stateRef.current.isIninted = true;
     }
-  }, [endTime, startTime]); // 初始化
-
-  useEffect(function () {
-    initTimer();
     return componentWillUnmount;
   }, []);
-
-  var componentWillUnmount = function componentWillUnmount() {
-    clearInterval(stateRef.current.timer);
+  var componentWillUnmount = function componentWillUnmount2() {
+    destroy && cancelAnimationFrame(stateRef.current.timer);
   };
-
+  var renderTime = function() {
+    return formatRemainTime(stateRef.current.restTime);
+  }();
   return React__default.createElement("div", _objectSpread({
-    className: "".concat(b(), " ").concat(className || ''),
+    className: "".concat(classPrefix, " ").concat(className),
     style: _objectSpread({}, style)
-  }, rest), children || React__default.createElement(React__default.Fragment, null, showPlainText ? React__default.createElement("div", {
-    className: b('block')
-  }, " ", plainText, " ") : React__default.createElement(React__default.Fragment, null, Number(resttime.d) >= 0 && showDays ? React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: b('block')
-  }, resttime.d), React__default.createElement("div", {
-    className: b('dot')
-  }, locale.countdown.day || ':')) : null, React__default.createElement("div", {
-    className: b('block')
-  }, resttime.h), React__default.createElement("div", {
-    className: b('dot')
-  }, ":"), React__default.createElement("div", {
-    className: b('block')
-  }, resttime.m), React__default.createElement("div", {
-    className: b('dot')
-  }, ":"), React__default.createElement("div", {
-    className: b('block')
-  }, resttime.s))));
+  }, rest), children || React__default.createElement("div", {
+    className: "".concat(classPrefix, "__block"),
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML: {
+      __html: "".concat(renderTime)
+    }
+  }));
 };
-
+var CountDown = React__default.forwardRef(InternalCountDown);
 CountDown.defaultProps = defaultProps;
-CountDown.displayName = 'NutCountDown';
-export { CountDown as default };
+CountDown.displayName = "NutCountDown";
+export {
+  CountDown as default
+};

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

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

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

@@ -1,2 +1,2 @@
-require('../../Picker/style')
-require('../../../packages/datepicker/datepicker.scss')
+import '../../Picker/style'
+import '../../../packages/datepicker/datepicker.scss'

package/dist/esm/DatePicker/style/style.css

@@ -0,0 +1 @@
+.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .7)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #1a1a1a))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:var(--nutui-popup-title-padding, 15px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute!important;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden!important}.nut-picker{background-color:var(--nutui-gray-6, #ffffff);width:100%}.nut-picker__control{display:flex;height:56px;font-size:16px;align-items:center;justify-content:space-between;padding:var(--nutui-picker-bar-button-padding, 0 15px)}.nut-picker__cancel-btn{color:var(--nutui-picker-cancel-color, #808080);font-size:var(--nutui-picker-bar-cancel-font-size, 14px)}.nut-picker__confirm-btn{color:var(--nutui-picker-ok-color, var(--nutui-brand-color, #fa2c19));font-size:var(--nutui-picker-bar-ok-font-size, 14px)}.nut-picker__title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--nutui-picker-bar-title-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-bar-title-font-size, 16px);font-weight:var(--nutui-picker-bar-title-font-weight, normal)}.nut-picker__panel{display:flex;position:relative}.nut-picker-indicator{position:absolute;top:108px;height:var(--nutui-picker-item-height, 36px);width:100%;border:var(--nutui-picker-item-active-line-border, 1px solid #d8d8d8);border-left:0;border-right:0;color:var(--nutui-picker-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-item-text-font-size, 14px);z-index:3}.nut-picker-list{flex:1;position:relative;height:var(--nutui-picker-list-height, 252px);overflow:hidden;text-align:center}.nut-picker-list-panel{transform-style:preserve-3d}.nut-picker-mask{position:absolute;top:0;left:0;right:0;bottom:0;background-image:var(--picker-mask-bg-img, linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)));background-position:top,bottom;background-size:100% 108px;background-repeat:no-repeat;z-index:3}.nut-picker-view-panel{height:var(--nutui-picker-list-height, 252px);flex-grow:1}.nut-picker-content,.nut-picker-roller{position:absolute;top:108px;width:100%;height:var(--nutui-picker-item-height, 36px)}.nut-picker-content{background:#fff;z-index:2;overflow:hidden}.nut-picker-item,.nut-picker-roller-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:var(--nutui-picker-item-height, 36px);line-height:var(--nutui-picker-item-height, 36px);color:var(--nutui-picker-item-text-color, var(--nutui-gray-1, #1a1a1a));font-size:var(--nutui-picker-item-text-font-size, 14px);text-align:center}.nut-picker-item{font-size:16px;background:#fff}.nut-picker-roller{z-index:1;transform-style:preserve-3d}.nut-picker-roller-item{backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute;top:0;width:100%;color:var(--nutui-gray-1, #1a1a1a)}.nut-picker-roller-item-title{display:block;width:100%;height:36px;line-height:36px;text-align:center;color:var(--nutui-gray-1, #1a1a1a);font-size:var(--nutui-picker-bar-title-font-size, 16px)}.nut-picker-roller-item-hidden{visibility:hidden;opacity:0}.nut-picker-placeholder{height:1px}