@nutui/nutui-react 2.6.21 → 2.6.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +22 -5
  2. package/dist/esm/AnimatingNumbers.js +4 -4
  3. package/dist/esm/Audio/style/style.css +1 -1
  4. package/dist/esm/Avatar.js +23 -26
  5. package/dist/esm/BackTop.js +30 -43
  6. package/dist/esm/Dialog.js +2 -1
  7. package/dist/esm/Menu.js +12 -12
  8. package/dist/esm/NavBar/style/style.css +1 -1
  9. package/dist/esm/NavBar.js +7 -2
  10. package/dist/esm/RadioGroup.js +5 -4
  11. package/dist/esm/Range/style/style.css +1 -1
  12. package/dist/esm/Range.js +49 -44
  13. package/dist/esm/button2.js +2 -2
  14. package/dist/esm/menuitem2.js +15 -15
  15. package/dist/esm/overlay2.js +2 -1
  16. package/dist/esm/popup2.js +2 -1
  17. package/dist/esm/radio2.js +19 -16
  18. package/dist/esm/raf.js +10 -1
  19. package/dist/locales/base.js +1 -1
  20. package/dist/locales/en-US.js +1 -1
  21. package/dist/locales/id-ID.js +1 -1
  22. package/dist/locales/tr-TR.js +1 -1
  23. package/dist/locales/zh-CN.js +1 -1
  24. package/dist/locales/zh-TW.js +1 -1
  25. package/dist/locales/zh-UG.js +1 -1
  26. package/dist/nutui.react.es.js +242 -273
  27. package/dist/nutui.react.umd.js +242 -273
  28. package/dist/packages/navbar/navbar.scss +0 -5
  29. package/dist/packages/range/range.scss +2 -0
  30. package/dist/style.css +1 -1
  31. package/dist/types/packages/avatar/avatar.d.ts +5 -5
  32. package/dist/types/packages/overlay/overlay.d.ts +2 -2
  33. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,11 +1,28 @@
1
- # v2.6.21
2
- `2024-09-27`
1
+ # v2.6.22
2
+ `2024-10-12`
3
+
4
+
5
+ * :sparkles: feat(popup): lockscroll 增加可选值 strict, 用于支持 iOS12 (#2629)
6
+ * :bug: fix(dialog): revert defaultprops
7
+ * :bug: fix(range): usememo (#2638)
8
+ * :bug: fix(backtop & menu): lint, code simplification, deprecated pageYOffset removed (#2633)
9
+ * :bug: fix: taro async warning in taro-h5 env (#2636)
10
+ * :bug: fix(range): refactor & lint fixed (#2637)
11
+ * :bug: fix(radio): lint fixed (#2635)
12
+ * :bug: fix(navbar): safearea displays abnormal when safeAreaInsetTop has been set true (#2632)
13
+ * :bug: fix: usecallback to fix render too many times, button,animatingnumbers,avatar,audio; and fix avatargroup when length > maxsize (#2628)
14
+ * 🏡 chore(demo): display bound dispatchSetState in demo8 of table demos (#2626)
15
+ * 📖 docs: swiper 可通过 css 的 touch-action 设置用户操作行为 (#2630)
16
+ * 📖 docs: 文档构建出现未闭合标签的错误提示
3
17
 
4
18
 
5
- * 🏡 chore: update dependency linguist-languages to be included within package (#2607)
6
- * :sparkles: feat(Uploader): add support for deleteIcon prop customization (#2618)
7
- * :bug: fix: 修改jd小程序高版本弹幕不滚动问题 (#2612)
19
+ # v2.6.21
20
+
21
+ `2024-09-27`
8
22
 
23
+ - 🏡 chore: update dependency linguist-languages to be included within package (#2607)
24
+ - :sparkles: feat(Uploader): add support for deleteIcon prop customization (#2618)
25
+ - :bug: fix: 修改jd小程序高版本弹幕不滚动问题 (#2612)
9
26
 
10
27
  # v2.6.20
11
28
 
package/dist/esm/AnimatingNumbers.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { useRef, useMemo, useEffect, Component } from "react";
1
+ import React__default, { useRef, useMemo, useCallback, useEffect, Component } from "react";
2
2
  import { _ as __rest } from "./tslib.es6.js";
3
3
  import { C as ComponentDefaults } from "./typings.js";
4
4
  import { m as mergeProps } from "./merge-props.js";
@@ -17,7 +17,7 @@ const CountUp = (props) => {
17
17
  return currNumber.split("");
18
18
  };
19
19
  const numerArr = useMemo(getShowNumber, [value, length, thousands]);
20
- const setNumberTransform = () => {
20
+ const setNumberTransform = useCallback(() => {
21
21
  if (countupRef.current) {
22
22
  const numberItems = countupRef.current.querySelectorAll(".nut-countup-number");
23
23
  const numberFilterArr = numerArr.filter((item) => !Number.isNaN(Number(item)));
@@ -31,7 +31,7 @@ const CountUp = (props) => {
31
31
  }
32
32
  });
33
33
  }
34
- };
34
+ }, [numerArr]);
35
35
  const numberEaseStyle = {
36
36
  transition: `transform ${duration}s ease-in-out`
37
37
  };
@@ -42,7 +42,7 @@ const CountUp = (props) => {
42
42
  return () => {
43
43
  window.clearTimeout(timerRef.current);
44
44
  };
45
- }, [numerArr]);
45
+ }, [numerArr, delay, setNumberTransform]);
46
46
  return React__default.createElement(
47
47
  "div",
48
48
  { className: `${classPrefix} ${className}`, ref: countupRef },
package/dist/esm/Audio/style/style.css CHANGED
@@ -1 +1 @@
1
- .nut-button{position:relative;display:flex;display:inline-block;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;margin:0;padding:0;height:var(--nutui-button-default-height, 32px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--nutui-button-default-color, var(--nutui-gray-7, #1a1a1a));background:var(--nutui-button-default-background-color, transparent)}.nut-button-text{margin-left:var(--nutui-button-text-icon-margin, 4px)}.nut-button-text.right{margin-right:var(--nutui-button-text-icon-margin, 4px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border:inherit;border-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button-wrap{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button-wrap .nut-icon{font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));width:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));height:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px))}.nut-button-loading:before,.nut-button-disabled:before{display:none}.nut-button.nut-button-icononly{width:var(--nutui-button-default-height, 32px);padding:0}.nut-button-default{padding:var(--nutui-button-default-padding, 0px 16px);border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, var(--nutui-gray-6, #595959))}.nut-button-default.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));background:transparent}.nut-button-default.nut-button-none{background:transparent}.nut-button-default.nut-button-none.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c))}.nut-button-default.nut-button-outline,.nut-button-default.nut-button-dashed{background:transparent}.nut-button-default.nut-button-outline.nut-button-disabled,.nut-button-default.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button-normal{padding:var(--nutui-button-normal-padding, 0px 16px)}.nut-button-xlarge{height:var(--nutui-button-xlarge-height, 48px);padding:var(--nutui-button-xlarge-padding, 0px 32px);font-size:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500))}.nut-button-xlarge .nut-icon{font-size:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));width:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));height:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px))}.nut-button-large{height:var(--nutui-button-large-height, 40px);padding:var(--nutui-button-large-padding, 0px 20px);font-size:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500))}.nut-button-large .nut-icon{font-size:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));width:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));height:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px))}.nut-button-small{height:var(--nutui-button-small-height, 28px);padding:var(--nutui-button-small-padding, 0px 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px))}.nut-button-small .nut-icon{font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));width:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));height:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px))}.nut-button-mini{height:var(--nutui-button-mini-height, 24px);padding:var(--nutui-button-mini-padding, 0px 8px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px))}.nut-button-mini .nut-icon{font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));width:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));height:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px))}.nut-button-primary{color:var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-primary.nut-button-disabled{background:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-none{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-none.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-outline{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-outline.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-dashed{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19));border:var(--nutui-button-border-width, 1px) dashed var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-success{color:var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-success-background-color, var(--nutui-color-success, #00bc14));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-success.nut-button-disabled{background:var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));border-color:var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae))}.nut-button-success.nut-button-outline,.nut-button-success.nut-button-dashed{color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14));border-color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14));background:transparent}.nut-button-success.nut-button-outline.nut-button-disabled,.nut-button-success.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-success.nut-button-none{color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14))}.nut-button-info{color:var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-info-background-color, var(--nutui-color-info-background, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-info.nut-button-disabled{background:var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));border-color:var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8))}.nut-button-info.nut-button-outline,.nut-button-info.nut-button-dashed{color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));border-color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));background:transparent}.nut-button-info.nut-button-outline.nut-button-disabled,.nut-button-info.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-info.nut-button-none{color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa))}.nut-button-danger{color:var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-danger-background-color, var(--nutui-color-danger, #fa2c19));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-danger.nut-button-disabled{background:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)));border-color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)))}.nut-button-danger.nut-button-outline,.nut-button-danger.nut-button-dashed{color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19));border-color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19));background:transparent}.nut-button-danger.nut-button-outline.nut-button-disabled,.nut-button-danger.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)));border-color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)))}.nut-button-danger.nut-button-none{color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19))}.nut-button-warning{color:var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-warning-background-color, var(--nutui-color-warning, rgb(255, 158, 13)));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-warning.nut-button-disabled{background:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));border-color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9))}.nut-button-warning.nut-button-outline,.nut-button-warning.nut-button-dashed{color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)));border-color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)));background:transparent}.nut-button-warning.nut-button-outline.nut-button-disabled,.nut-button-warning.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));border-color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9))}.nut-button-warning.nut-button-none{color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)))}.nut-button-block{display:block;width:100%}.nut-button-solid{color:var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-solid.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));background:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button.nut-button-outline,.nut-button.nut-button-dashed{background:transparent}.nut-button.nut-button-none{border-color:transparent;background:transparent}.nut-button-disabled{cursor:not-allowed;color:#fff;background:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf));border-color:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button-loading{cursor:default;opacity:.9}.nut-button-round{border-radius:var(--nutui-button-border-radius, 24px)}.nut-button-round.nut-button-xlarge,.nut-button-round.nut-button-large{border-radius:var(--nutui-button-large-border-radius, 24px)}.nut-button-round.nut-button-small{border-radius:var(--nutui-button-small-border-radius, 24px)}.nut-button-round.nut-button-mini{border-radius:var(--nutui-button-mini-border-radius, 24px)}.nut-button-square{border-radius:var(--nutui-button-square-border-radius, 0)}[dir=rtl] .nut-button-text,.nut-rtl .nut-button-text{margin-left:0;margin-right:var(--nutui-button-text-icon-margin, 4px)}[dir=rtl] .nut-button-text.right,.nut-rtl .nut-button-text.right{margin-left:var(--nutui-button-text-icon-margin, 4px)}[dir=rtl] .nut-button:before,.nut-rtl .nut-button:before{left:auto;right:50%;transform:translate(50%,-50%)}.nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));-webkit-user-select:none;user-select:none}.nut-range-container .nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8));border-radius:2px;cursor:pointer}.nut-range-container .nut-range:before{position:absolute;inset-block:-8px;inset-inline:0;content:""}.nut-range-container .nut-range-bar{display:block;position:relative;width:100%;height:100%;background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-container .nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #fa2c19));outline:none}.nut-range-container .nut-range-button-wrapper,.nut-range-container .nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-container .nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-container .nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-container .nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-container .nut-range-disabled .nut-range-button-wrapper,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-left,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-container .nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-container .nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translate(-10px)}.nut-range-container .nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 4px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%,0,0)}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 15px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translateY(-11px)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0;left:30px;width:11px;height:11px;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper,[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-right,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-right{right:50%;left:initial;transform:translate3d(50%,50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-left,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-left{right:50%;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range .number,.nut-rtl .nut-range-container-vertical .nut-range .number{transform:translate3d(-100%,0,0)}[dir=rtl] .nut-range-container-vertical .nut-range-mark,.nut-rtl .nut-range-container-vertical .nut-range-mark{right:auto;left:50%}[dir=rtl] .nut-range-container-vertical .nut-range-tick,.nut-rtl .nut-range-container-vertical .nut-range-tick{left:auto;right:30px;margin-left:0;margin-right:0}[dir=rtl] .nut-range-container-vertical .nut-range-mark-text,.nut-rtl .nut-range-container-vertical .nut-range-mark-text{transform:translateY(-11px)}[dir=rtl] .nut-range-button-wrapper,[dir=rtl] .nut-range-button-wrapper-right,.nut-rtl .nut-range-button-wrapper,.nut-rtl .nut-range-button-wrapper-right{left:0;right:initial;transform:translate3d(-50%,-50%,0)}[dir=rtl] .nut-range-button-wrapper-left,.nut-rtl .nut-range-button-wrapper-left{right:0;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-tick,.nut-rtl .nut-range-tick{right:0;left:initial}[dir=rtl] .nut-range-mark-text,.nut-rtl .nut-range-mark-text{transform:translate(10px)}.nut-audio-icon{position:relative;display:inline-block}.nut-audio-icon-box{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:#fff;border-radius:50%;box-shadow:0 0 8px var(--nutui-color-text-disabled, #bfbfbf)}.nut-audio-icon .nut-audio-icon-stop{position:relative}.nut-audio-icon .nut-audio-icon-stop:after{position:absolute;left:50%;top:50%;transform:translate(-50%);content:"";height:2px;width:30px;background:var(--nutui-color-text-disabled, #bfbfbf);transform:rotate(45deg);transform-origin:8px -18px}.nut-audio-progress{display:flex;align-items:center;width:100%;margin:0 auto;padding:10px 0}.nut-audio-progress-bar-wrapper{flex:1;margin:0 10px}.nut-audio-progress .time{min-width:50px;font-size:12px;text-align:center}.nut-audio-progress .nut-range-button{width:8px;height:8px}.nut-audio .custom-button-group .nut-button-primary{margin:0 5px}.nut-audio .custom-button-group-disable .nut-button-primary{margin:0 5px;pointer-events:none}.nut-audio .disable{color:#00f}.nut-audio .nut-audio-none-container .nut-voice{border:1px solid var(--nutui-gray-7, #1a1a1a);align-items:center}[dir=rtl] .nut-audio-icon .nut-audio-icon-stop:after,.nut-rtl .nut-audio-icon .nut-audio-icon-stop:after{left:auto;right:50%;transform:rotate(-45deg);transform-origin:20px -18px}
1
+ .nut-button{position:relative;display:flex;display:inline-block;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;margin:0;padding:0;height:var(--nutui-button-default-height, 32px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--nutui-button-default-color, var(--nutui-gray-7, #1a1a1a));background:var(--nutui-button-default-background-color, transparent)}.nut-button-text{margin-left:var(--nutui-button-text-icon-margin, 4px)}.nut-button-text.right{margin-right:var(--nutui-button-text-icon-margin, 4px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border:inherit;border-color:var(--nutui-black-10, rgba(0, 0, 0, .7));border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button-wrap{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button-wrap .nut-icon{font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));width:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px));height:var(--nutui-button-default-font-size, var(--nutui-font-size-3, 14px))}.nut-button-loading:before,.nut-button-disabled:before{display:none}.nut-button.nut-button-icononly{width:var(--nutui-button-default-height, 32px);padding:0}.nut-button-default{padding:var(--nutui-button-default-padding, 0px 16px);border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, var(--nutui-gray-6, #595959))}.nut-button-default.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));background:transparent}.nut-button-default.nut-button-none{background:transparent}.nut-button-default.nut-button-none.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c))}.nut-button-default.nut-button-outline,.nut-button-default.nut-button-dashed{background:transparent}.nut-button-default.nut-button-outline.nut-button-disabled,.nut-button-default.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));border-color:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button-normal{padding:var(--nutui-button-normal-padding, 0px 16px)}.nut-button-xlarge{height:var(--nutui-button-xlarge-height, 48px);padding:var(--nutui-button-xlarge-padding, 0px 32px);font-size:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500))}.nut-button-xlarge .nut-icon{font-size:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));width:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px));height:var(--nutui-button-xlarge-font-size, var(--nutui-font-size-5, 18px))}.nut-button-large{height:var(--nutui-button-large-height, 40px);padding:var(--nutui-button-large-padding, 0px 20px);font-size:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));font-weight:var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 500))}.nut-button-large .nut-icon{font-size:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));width:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px));height:var(--nutui-button-large-font-size, var(--nutui-font-size-3, 14px))}.nut-button-small{height:var(--nutui-button-small-height, 28px);padding:var(--nutui-button-small-padding, 0px 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px))}.nut-button-small .nut-icon{font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));width:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px));height:var(--nutui-button-small-font-size, var(--nutui-font-size-2, 12px))}.nut-button-mini{height:var(--nutui-button-mini-height, 24px);padding:var(--nutui-button-mini-padding, 0px 8px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px))}.nut-button-mini .nut-icon{font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));width:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px));height:var(--nutui-button-mini-font-size, var(--nutui-font-size-2, 12px))}.nut-button-primary{color:var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-primary.nut-button-disabled{background:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-none{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-none.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-outline{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-outline.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-primary.nut-button-dashed{background:transparent;color:var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19));border:var(--nutui-button-border-width, 1px) dashed var(--nutui-button-primary-border-color, var(--nutui-color-primary, #fa2c19))}.nut-button-primary.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-success{color:var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-success-background-color, var(--nutui-color-success, #00bc14));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-success.nut-button-disabled{background:var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));border-color:var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae))}.nut-button-success.nut-button-outline,.nut-button-success.nut-button-dashed{color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14));border-color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14));background:transparent}.nut-button-success.nut-button-outline.nut-button-disabled,.nut-button-success.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-success.nut-button-none{color:var(--nutui-button-success-border-color, var(--nutui-color-success, #00bc14))}.nut-button-info{color:var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-info-background-color, var(--nutui-color-info-background, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-info.nut-button-disabled{background:var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));border-color:var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8))}.nut-button-info.nut-button-outline,.nut-button-info.nut-button-dashed{color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));border-color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa));background:transparent}.nut-button-info.nut-button-outline.nut-button-disabled,.nut-button-info.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94));border-color:var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled, #fd9d94))}.nut-button-info.nut-button-none{color:var(--nutui-button-info-border-color, var(--nutui-color-info, #1988fa))}.nut-button-danger{color:var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-danger-background-color, var(--nutui-color-danger, #fa2c19));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-danger.nut-button-disabled{background:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)));border-color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)))}.nut-button-danger.nut-button-outline,.nut-button-danger.nut-button-dashed{color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19));border-color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19));background:transparent}.nut-button-danger.nut-button-outline.nut-button-disabled,.nut-button-danger.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)));border-color:var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled, #fd9d94)))}.nut-button-danger.nut-button-none{color:var(--nutui-button-danger-border-color, var(--nutui-color-danger, #fa2c19))}.nut-button-warning{color:var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));background:var(--nutui-button-warning-background-color, var(--nutui-color-warning, rgb(255, 158, 13)));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-warning.nut-button-disabled{background:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));border-color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9))}.nut-button-warning.nut-button-outline,.nut-button-warning.nut-button-dashed{color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)));border-color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)));background:transparent}.nut-button-warning.nut-button-outline.nut-button-disabled,.nut-button-warning.nut-button-dashed.nut-button-disabled{color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));border-color:var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9))}.nut-button-warning.nut-button-none{color:var(--nutui-button-warning-border-color, var(--nutui-color-warning, rgb(255, 158, 13)))}.nut-button-block{display:block;width:100%}.nut-button-solid{color:var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button-solid.nut-button-disabled{color:var(--nutui-button-default-disabled-color, var(--nutui-gray-5, #8c8c8c));background:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button.nut-button-outline,.nut-button.nut-button-dashed{background:transparent}.nut-button.nut-button-none{border-color:transparent;background:transparent}.nut-button-disabled{cursor:not-allowed;color:#fff;background:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf));border-color:var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #bfbfbf))}.nut-button-loading{cursor:default;opacity:.9}.nut-button-round{border-radius:var(--nutui-button-border-radius, 24px)}.nut-button-round.nut-button-xlarge,.nut-button-round.nut-button-large{border-radius:var(--nutui-button-large-border-radius, 24px)}.nut-button-round.nut-button-small{border-radius:var(--nutui-button-small-border-radius, 24px)}.nut-button-round.nut-button-mini{border-radius:var(--nutui-button-mini-border-radius, 24px)}.nut-button-square{border-radius:var(--nutui-button-square-border-radius, 0)}[dir=rtl] .nut-button-text,.nut-rtl .nut-button-text{margin-left:0;margin-right:var(--nutui-button-text-icon-margin, 4px)}[dir=rtl] .nut-button-text.right,.nut-rtl .nut-button-text.right{margin-left:var(--nutui-button-text-icon-margin, 4px)}[dir=rtl] .nut-button:before,.nut-rtl .nut-button:before{left:auto;right:50%;transform:translate(50%,-50%)}.nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));-webkit-user-select:none;user-select:none}.nut-range-container .nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8));border-radius:2px;cursor:pointer}.nut-range-container .nut-range:before{position:absolute;inset-block:-8px;inset-inline:0;content:""}.nut-range-container .nut-range-bar{display:block;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-container .nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #fa2c19));outline:none}.nut-range-container .nut-range-button-wrapper,.nut-range-container .nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-container .nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-container .nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-container .nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-container .nut-range-disabled .nut-range-button-wrapper,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-left,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-container .nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-container .nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translate(-10px)}.nut-range-container .nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 4px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%,0,0)}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 15px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translateY(-11px)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0;left:30px;width:11px;height:11px;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper,[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-right,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-right{right:50%;left:initial;transform:translate3d(50%,50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-left,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-left{right:50%;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range .number,.nut-rtl .nut-range-container-vertical .nut-range .number{transform:translate3d(-100%,0,0)}[dir=rtl] .nut-range-container-vertical .nut-range-mark,.nut-rtl .nut-range-container-vertical .nut-range-mark{right:auto;left:50%}[dir=rtl] .nut-range-container-vertical .nut-range-tick,.nut-rtl .nut-range-container-vertical .nut-range-tick{left:auto;right:30px;margin-left:0;margin-right:0}[dir=rtl] .nut-range-container-vertical .nut-range-mark-text,.nut-rtl .nut-range-container-vertical .nut-range-mark-text{transform:translateY(-11px)}[dir=rtl] .nut-range-button-wrapper,[dir=rtl] .nut-range-button-wrapper-right,.nut-rtl .nut-range-button-wrapper,.nut-rtl .nut-range-button-wrapper-right{left:0;right:initial;transform:translate3d(-50%,-50%,0)}[dir=rtl] .nut-range-button-wrapper-left,.nut-rtl .nut-range-button-wrapper-left{right:0;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-tick,.nut-rtl .nut-range-tick{right:0;left:initial}[dir=rtl] .nut-range-mark-text,.nut-rtl .nut-range-mark-text{transform:translate(10px)}.nut-audio-icon{position:relative;display:inline-block}.nut-audio-icon-box{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:#fff;border-radius:50%;box-shadow:0 0 8px var(--nutui-color-text-disabled, #bfbfbf)}.nut-audio-icon .nut-audio-icon-stop{position:relative}.nut-audio-icon .nut-audio-icon-stop:after{position:absolute;left:50%;top:50%;transform:translate(-50%);content:"";height:2px;width:30px;background:var(--nutui-color-text-disabled, #bfbfbf);transform:rotate(45deg);transform-origin:8px -18px}.nut-audio-progress{display:flex;align-items:center;width:100%;margin:0 auto;padding:10px 0}.nut-audio-progress-bar-wrapper{flex:1;margin:0 10px}.nut-audio-progress .time{min-width:50px;font-size:12px;text-align:center}.nut-audio-progress .nut-range-button{width:8px;height:8px}.nut-audio .custom-button-group .nut-button-primary{margin:0 5px}.nut-audio .custom-button-group-disable .nut-button-primary{margin:0 5px;pointer-events:none}.nut-audio .disable{color:#00f}.nut-audio .nut-audio-none-container .nut-voice{border:1px solid var(--nutui-gray-7, #1a1a1a);align-items:center}[dir=rtl] .nut-audio-icon .nut-audio-icon-stop:after,.nut-rtl .nut-audio-icon .nut-audio-icon-stop:after{left:auto;right:50%;transform:rotate(-45deg);transform-origin:20px -18px}
package/dist/esm/Avatar.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { _ as __rest } from "./tslib.es6.js";
2
- import React__default, { useState, useRef, useContext, useEffect } from "react";
2
+ import React__default, { useState, useRef, useContext, useCallback, useEffect } from "react";
3
3
  import classNames from "classnames";
4
4
  import { User } from "@nutui/icons-react";
5
5
  import { A as AvatarContext } from "./context2.js";
@@ -9,58 +9,55 @@ import AvatarGroup__default from "./AvatarGroup.js";
9
9
  const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { size: "", shape: "round", icon: "", background: "#eee", color: "#666", fit: "cover", src: "", alt: "" });
10
10
  const classPrefix = `nut-avatar`;
11
11
  const Avatar = (props) => {
12
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
13
- const _q = Object.assign(Object.assign({}, defaultProps), props), { children, size, shape, background, color, src, alt, icon, fit, className, style, onClick, onError } = _q, rest = __rest(_q, ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"]);
12
+ const _a = Object.assign(Object.assign({}, defaultProps), props), { children, size, shape, background, color, src, alt, icon, fit, className, style, onClick, onError } = _a, rest = __rest(_a, ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"]);
14
13
  const [maxSum, setMaxSum] = useState(0);
15
14
  const [showMax, setShowMax] = useState(false);
16
15
  const [avatarIndex, setAvatarIndex] = useState(1);
17
16
  const avatarRef = useRef(null);
18
17
  const parent = useContext(AvatarContext);
19
18
  const sizeValue = ["large", "normal", "small"];
19
+ const { propAvatarGroup, avatarGroupRef } = parent;
20
20
  const classes = classNames({
21
- [`nut-avatar-${((_a = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _a === void 0 ? void 0 : _a.size) || size || "normal"}`]: true,
22
- [`nut-avatar-${((_b = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _b === void 0 ? void 0 : _b.shape) || shape}`]: true
21
+ [`nut-avatar-${(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"}`]: true,
22
+ [`nut-avatar-${(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape}`]: true
23
23
  });
24
24
  const cls = classNames(classPrefix, classes, className);
25
- const styles = Object.assign({ width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, backgroundColor: `${background}`, color, marginLeft: avatarIndex !== 1 && ((_c = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _c === void 0 ? void 0 : _c.gap) ? `${(_d = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _d === void 0 ? void 0 : _d.gap}px` : "", zIndex: ((_e = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _e === void 0 ? void 0 : _e.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "" }, style);
25
+ const styles = Object.assign({ width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, backgroundColor: `${background}`, color, marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap}px` : "", zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "" }, style);
26
26
  const maxStyles = {
27
- backgroundColor: `${(_f = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _f === void 0 ? void 0 : _f.maxBackground}`,
28
- color: `${(_g = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _g === void 0 ? void 0 : _g.maxColor}`
27
+ backgroundColor: `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground}`,
28
+ color: `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor}`
29
29
  };
30
- useEffect(() => {
31
- var _a2;
32
- const avatarChildren = (_a2 = parent === null || parent === void 0 ? void 0 : parent.avatarGroupRef) === null || _a2 === void 0 ? void 0 : _a2.current.children;
33
- if (avatarChildren) {
34
- avatarLength(avatarChildren);
35
- }
36
- }, []);
37
- const avatarLength = (children2) => {
38
- var _a2, _b2, _c2;
30
+ const avatarLength = useCallback((children2) => {
31
+ var _a2, _b;
39
32
  for (let i = 0; i < children2.length; i++) {
40
33
  if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
41
34
  children2[i].setAttribute("data-index", i + 1);
42
35
  }
43
36
  }
44
- const index = Number((_b2 = (_a2 = avatarRef === null || avatarRef === void 0 ? void 0 : avatarRef.current) === null || _a2 === void 0 ? void 0 : _a2.dataset) === null || _b2 === void 0 ? void 0 : _b2.index);
45
- const maxCount = (_c2 = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _c2 === void 0 ? void 0 : _c2.max;
37
+ const index = Number((_b = (_a2 = avatarRef.current) === null || _a2 === void 0 ? void 0 : _a2.dataset) === null || _b === void 0 ? void 0 : _b.index);
38
+ const maxCount = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max;
46
39
  setMaxSum(children2.length);
47
40
  setAvatarIndex(index);
48
41
  if (index === children2.length && index !== maxCount && children2.length > maxCount) {
49
42
  setShowMax(true);
50
43
  }
51
- };
52
- const errorEvent = () => {
53
- if (onError) {
54
- onError();
44
+ }, [propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max]);
45
+ useEffect(() => {
46
+ const avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
47
+ if (avatarChildren) {
48
+ avatarLength(avatarChildren);
55
49
  }
50
+ }, [avatarLength, avatarGroupRef]);
51
+ const errorEvent = () => {
52
+ onError && onError();
56
53
  };
57
54
  const clickAvatar = (e) => {
58
55
  onClick && onClick(e);
59
56
  };
60
- return React__default.createElement(React__default.Fragment, null, (showMax || !((_h = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _h === void 0 ? void 0 : _h.max) || avatarIndex <= ((_j = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _j === void 0 ? void 0 : _j.max)) && React__default.createElement(
57
+ return React__default.createElement(React__default.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && React__default.createElement(
61
58
  "div",
62
59
  Object.assign({ className: cls }, rest, { style: !showMax ? styles : maxStyles, onClick: clickAvatar, ref: avatarRef }),
63
- (!((_k = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _k === void 0 ? void 0 : _k.max) || avatarIndex <= ((_l = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _l === void 0 ? void 0 : _l.max)) && React__default.createElement(
60
+ (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && React__default.createElement(
64
61
  React__default.Fragment,
65
62
  null,
66
63
  src && React__default.createElement(Image__default, { className: "avatar-img", src, alt, style: { objectFit: fit }, onError: errorEvent }),
@@ -68,7 +65,7 @@ const Avatar = (props) => {
68
65
  children && React__default.createElement("span", { className: "text" }, children),
69
66
  !src && !icon && !children && React__default.createElement(User, { className: "icon" })
70
67
  ),
71
- showMax && React__default.createElement("div", { className: "text" }, ((_m = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _m === void 0 ? void 0 : _m.maxContent) ? (_o = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _o === void 0 ? void 0 : _o.maxContent : `+ ${avatarIndex - Number(((_p = parent === null || parent === void 0 ? void 0 : parent.propAvatarGroup) === null || _p === void 0 ? void 0 : _p.max) || 0)}`)
68
+ showMax && React__default.createElement("div", { className: "text" }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : `+ ${avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)}`)
72
69
  ));
73
70
  };
74
71
  Avatar.displayName = "NutAvatar";
package/dist/esm/BackTop.js CHANGED
@@ -1,8 +1,8 @@
1
- import React__default, { useState, useRef, useEffect } from "react";
1
+ import React__default, { useState, useRef, useCallback, useEffect } from "react";
2
2
  import { Top } from "@nutui/icons-react";
3
3
  import classNames from "classnames";
4
4
  import { C as ComponentDefaults } from "./typings.js";
5
- import { r as requestAniFrame } from "./raf.js";
5
+ import { r as requestAniFrame, c as cancelRaf } from "./raf.js";
6
6
  import { useRtl } from "./ConfigProvider.js";
7
7
  const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { target: "", threshold: 200, zIndex: 900, duration: 1e3 });
8
8
  const BackTop = (props) => {
@@ -13,31 +13,36 @@ const BackTop = (props) => {
13
13
  const [scrollTop, SetScrollTop] = useState(0);
14
14
  let startTime = 0;
15
15
  const scrollEl = useRef(null);
16
- useEffect(() => {
17
- init();
18
- return () => removeEventListener();
19
- }, []);
20
- const init = () => {
16
+ const cls = classNames(classPrefix, { show: backTop }, className);
17
+ const scrollListener = useCallback(() => {
18
+ var _a;
19
+ let top = null;
20
+ if (scrollEl.current instanceof Window) {
21
+ top = scrollEl.current.scrollY;
22
+ } else {
23
+ top = (_a = scrollEl.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
24
+ }
25
+ SetScrollTop(top);
26
+ SetBackTop(top >= threshold);
27
+ }, [threshold]);
28
+ const init = useCallback(() => {
29
+ var _a, _b;
21
30
  if (target && document.getElementById(target)) {
22
31
  scrollEl.current = document.getElementById(target);
23
32
  } else {
24
33
  scrollEl.current = window;
25
34
  }
26
- addEventListener();
27
- initCancelAniFrame();
28
- };
29
- const scrollListener = () => {
30
- let top = null;
31
- if (scrollEl.current instanceof Window) {
32
- top = scrollEl.current.pageYOffset;
33
- SetScrollTop(top);
34
- } else {
35
- top = scrollEl.current.scrollTop;
36
- SetScrollTop(top);
37
- }
38
- const showBtn = top >= threshold;
39
- SetBackTop(showBtn);
40
- };
35
+ (_a = scrollEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollListener, false);
36
+ (_b = scrollEl.current) === null || _b === void 0 ? void 0 : _b.addEventListener("resize", scrollListener, false);
37
+ }, [target, scrollListener]);
38
+ useEffect(() => {
39
+ init();
40
+ return () => {
41
+ var _a, _b;
42
+ (_a = scrollEl.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", scrollListener, false);
43
+ (_b = scrollEl.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("resize", scrollListener, false);
44
+ };
45
+ }, [init, scrollListener]);
41
46
  const scroll = (y = 0) => {
42
47
  if (scrollEl.current instanceof Window) {
43
48
  window.scrollTo(0, y);
@@ -53,27 +58,13 @@ const BackTop = (props) => {
53
58
  scroll(y);
54
59
  cid = requestAniFrame(fn);
55
60
  if (t === duration || y === 0) {
56
- window.cancelAnimationFrame(cid);
61
+ cancelRaf(cid);
57
62
  }
58
63
  });
59
64
  };
60
- const initCancelAniFrame = () => {
61
- window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
62
- };
63
- function addEventListener() {
64
- var _a, _b;
65
- (_a = scrollEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", scrollListener, false);
66
- (_b = scrollEl.current) === null || _b === void 0 ? void 0 : _b.addEventListener("resize", scrollListener, false);
67
- }
68
- function removeEventListener() {
69
- var _a, _b;
70
- (_a = scrollEl.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", scrollListener, false);
71
- (_b = scrollEl.current) === null || _b === void 0 ? void 0 : _b.removeEventListener("resize", scrollListener, false);
72
- }
73
65
  const goTop = (e) => {
74
66
  onClick && onClick(e);
75
- const otime = +/* @__PURE__ */ new Date();
76
- startTime = otime;
67
+ startTime = +/* @__PURE__ */ new Date();
77
68
  duration > 0 ? scrollAnimation() : scroll();
78
69
  };
79
70
  const styles = Object.keys(style || {}).length !== 0 ? Object.assign({ zIndex }, style) : {
@@ -81,11 +72,7 @@ const BackTop = (props) => {
81
72
  bottom: "20px",
82
73
  zIndex
83
74
  };
84
- return React__default.createElement("div", { className: classNames(classPrefix, {
85
- show: backTop
86
- }, className), style: styles, onClick: (e) => {
87
- goTop(e);
88
- } }, children || React__default.createElement(Top, { width: 19, height: 19, className: "nut-backtop-main" }));
75
+ return React__default.createElement("div", { className: cls, style: styles, onClick: (e) => goTop(e) }, children || React__default.createElement(Top, { width: 19, height: 19, className: "nut-backtop-main" }));
89
76
  };
90
77
  BackTop.displayName = "NutBackTop";
91
78
  export {
package/dist/esm/Dialog.js CHANGED
@@ -123,7 +123,7 @@ const Content = (props) => {
123
123
  );
124
124
  };
125
125
  Content.displayName = "NutContent";
126
- Object.assign(Object.assign(Object.assign({}, ComponentDefaults), { overlay: true, overlayStyle: {}, overlayClassName: "", onCancel: () => {
126
+ const defaultDialogProps = Object.assign(Object.assign(Object.assign({}, ComponentDefaults), { overlay: true, overlayStyle: {}, overlayClassName: "", onCancel: () => {
127
127
  }, onClose: () => {
128
128
  }, onOverlayClick: (e) => true }), defaultOverlayProps);
129
129
  const DialogWrap = (props) => {
@@ -146,6 +146,7 @@ const DialogWrap = (props) => {
146
146
  )
147
147
  );
148
148
  };
149
+ DialogWrap.defaultProps = defaultDialogProps;
149
150
  DialogWrap.displayName = "NutDialogWrap";
150
151
  const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { confirmText: "", cancelText: "", overlay: true, closeOnOverlayClick: true, hideConfirmButton: false, hideCancelButton: false, disableConfirmButton: false, footerDirection: "horizontal", lockScroll: true, closeIconPosition: "bottom", closeIcon: false, beforeCancel: () => true, beforeClose: () => true });
151
152
  const BaseDialog = (props, ref) => {
package/dist/esm/Menu.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { _ as __rest } from "./tslib.es6.js";
2
- import React__default, { useRef, useState, useEffect } from "react";
2
+ import React__default, { useRef, useState, useCallback, useEffect } from "react";
3
3
  import classNames from "classnames";
4
4
  import { ArrowUp, ArrowDown } from "@nutui/icons-react";
5
5
  import { M as MenuItem } from "./menuitem2.js";
@@ -10,24 +10,26 @@ const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { activ
10
10
  const Menu = (props) => {
11
11
  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, icon, scrollFixed, lockScroll, overlay, closeOnOverlayClick, children, activeColor, onClose, onOpen } = _a, rest = __rest(_a, ["className", "icon", "scrollFixed", "lockScroll", "overlay", "closeOnOverlayClick", "children", "activeColor", "onClose", "onOpen"]);
12
12
  const menuRef = useRef(null);
13
+ const [showMenuItem, setShowMenuItem] = useState([]);
14
+ const [menuItemTitle, setMenuItemTitle] = useState([]);
13
15
  const [isScrollFixed, setIsScrollFixed] = useState(false);
16
+ const cls = classNames(`nut-menu`, className, {
17
+ "scroll-fixed": isScrollFixed
18
+ });
14
19
  const getScrollTop = (el) => {
15
- return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
20
+ return Math.max(0, el === window ? window.scrollY : el.scrollTop);
16
21
  };
17
- const onScroll = () => {
18
- const { scrollFixed: scrollFixed2 } = props;
22
+ const onScroll = useCallback(() => {
19
23
  const scrollTop = getScrollTop(window);
20
- const isFixed = scrollTop > (typeof scrollFixed2 === "boolean" ? 30 : Number(scrollFixed2));
24
+ const isFixed = scrollTop > (typeof scrollFixed === "boolean" ? 30 : Number(scrollFixed));
21
25
  setIsScrollFixed(isFixed);
22
- };
26
+ }, [scrollFixed]);
23
27
  useEffect(() => {
24
28
  if (scrollFixed) {
25
29
  window.addEventListener("scroll", onScroll);
26
30
  }
27
31
  return () => window.removeEventListener("scroll", onScroll);
28
- }, []);
29
- const [showMenuItem, setShowMenuItem] = useState([]);
30
- const [menuItemTitle, setMenuItemTitle] = useState([]);
32
+ }, [scrollFixed, onScroll]);
31
33
  const toggleMenuItem = (index, from = "NORMAL") => {
32
34
  showMenuItem[index] = !showMenuItem[index];
33
35
  if (showMenuItem[index]) {
@@ -106,9 +108,7 @@ const Menu = (props) => {
106
108
  };
107
109
  return React__default.createElement(
108
110
  "div",
109
- Object.assign({}, rest, { className: classNames(`nut-menu`, className, {
110
- "scroll-fixed": isScrollFixed
111
- }), ref: menuRef }),
111
+ Object.assign({}, rest, { className: cls, ref: menuRef }),
112
112
  React__default.createElement("div", { className: classNames("nut-menu-bar", {
113
113
  opened: showMenuItem.includes(true)
114
114
  }) }, menuTitle()),
package/dist/esm/NavBar/style/style.css CHANGED
@@ -1 +1 @@
1
- .nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;background:var(--nutui-navbar-background, var(--nutui-gray-3, #f6f6f6));box-shadow:var(--nutui-navbar-box-shadow, 0px);font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-7, #1a1a1a));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar-fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar-placeholder{display:inline-block;width:100%}.nut-navbar-safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.nut-navbar-title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 500));color:var(--nutui-navbar-title-font-color, var(--nutui-gray-7, #1a1a1a))}.nut-navbar-title .nut-tabs-titles{background:transparent}.nut-navbar-title .nut-tabs-titles-item-text{color:var(--nutui-gray-7, #1a1a1a)}.nut-navbar-title .nut-tabpane{display:none}.nut-navbar-title ::-webkit-scrollbar{display:none}.nut-navbar-left,.nut-navbar-right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 14px}.nut-navbar-left .nut-icon,.nut-navbar-left .nutui-iconfont,.nut-navbar-right .nut-icon,.nut-navbar-right .nutui-iconfont{width:20px;height:20px;font-size:20px}.nut-navbar-left{left:0}.nut-navbar-left-back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar-right{right:0}.nut-navbar-right .nut-icon{margin-left:12px}.nut-navbar-right .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left{padding-left:14px}.nut-navbar-title-align-left .nut-navbar-left{position:static;padding:0}.nut-navbar-title-align-left .nut-navbar-left .nut-icon{margin-left:12px}.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left .nut-navbar-right{position:static;display:inline-flex;white-space:nowrap;padding-left:0}.nut-navbar-title-align-left .nut-navbar-left-back{margin-right:0}.nut-navbar-title-align-left .nut-navbar-title{min-width:0;margin:0;flex:1;justify-content:flex-start;padding:0 8px;text-align:left}[dir=rtl] .nut-navbar-fixed,.nut-rtl .nut-navbar-fixed,[dir=rtl] .nut-navbar-left,.nut-rtl .nut-navbar-left{left:auto;right:0}[dir=rtl] .nut-navbar-left .nut-icon-ArrowLeft,.nut-rtl .nut-navbar-left .nut-icon-ArrowLeft{transform:rotateY(180deg)}[dir=rtl] .nut-navbar-left-back,.nut-rtl .nut-navbar-left-back{margin-right:0;margin-left:10px}[dir=rtl] .nut-navbar-right,.nut-rtl .nut-navbar-right{right:auto;left:0}[dir=rtl] .nut-navbar-right .nut-icon,.nut-rtl .nut-navbar-right .nut-icon{margin-left:0;margin-right:12px}[dir=rtl] .nut-navbar-right .nut-icon:first-child,.nut-rtl .nut-navbar-right .nut-icon:first-child{margin-left:0;margin-right:0}[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft,.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft{margin-left:0;margin-right:12px}[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child,.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child{margin-left:0;margin-right:0}[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left-back,.nut-rtl .nut-navbar-title-align-left .nut-navbar-left-back{margin-right:0;margin-left:0}
1
+ .nut-navbar{width:var(--nutui-navbar-width, 100%);position:relative;display:flex;align-items:center;height:var(--nutui-navbar-height, 44px);box-sizing:border-box;background:var(--nutui-navbar-background, var(--nutui-gray-3, #f6f6f6));box-shadow:var(--nutui-navbar-box-shadow, 0px);font-size:var(--nutui-navbar-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-navbar-color, var(--nutui-gray-7, #1a1a1a));margin-bottom:var(--nutui-navbar-margin-bottom, 20px);overflow:hidden}.nut-navbar-fixed{position:fixed;top:0;left:0;width:100%}.nut-navbar-placeholder{display:inline-block;width:100%}.nut-navbar-title{min-width:53%;margin:0 auto;text-align:center;display:flex;align-items:center;justify-content:center;font-size:var(--nutui-navbar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 500));color:var(--nutui-navbar-title-font-color, var(--nutui-gray-7, #1a1a1a))}.nut-navbar-title .nut-tabs-titles{background:transparent}.nut-navbar-title .nut-tabs-titles-item-text{color:var(--nutui-gray-7, #1a1a1a)}.nut-navbar-title .nut-tabpane{display:none}.nut-navbar-title ::-webkit-scrollbar{display:none}.nut-navbar-left,.nut-navbar-right{position:absolute;top:0;bottom:0;display:flex;align-items:center;cursor:pointer;padding:0 14px}.nut-navbar-left .nut-icon,.nut-navbar-left .nutui-iconfont,.nut-navbar-right .nut-icon,.nut-navbar-right .nutui-iconfont{width:20px;height:20px;font-size:20px}.nut-navbar-left{left:0}.nut-navbar-left-back{display:flex;align-items:center;justify-content:center;margin-right:10px}.nut-navbar-right{right:0}.nut-navbar-right .nut-icon{margin-left:12px}.nut-navbar-right .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left{padding-left:14px}.nut-navbar-title-align-left .nut-navbar-left{position:static;padding:0}.nut-navbar-title-align-left .nut-navbar-left .nut-icon{margin-left:12px}.nut-navbar-title-align-left .nut-navbar-left .nut-icon:first-child{margin-left:0}.nut-navbar-title-align-left .nut-navbar-right{position:static;display:inline-flex;white-space:nowrap;padding-left:0}.nut-navbar-title-align-left .nut-navbar-left-back{margin-right:0}.nut-navbar-title-align-left .nut-navbar-title{min-width:0;margin:0;flex:1;justify-content:flex-start;padding:0 8px;text-align:left}[dir=rtl] .nut-navbar-fixed,.nut-rtl .nut-navbar-fixed,[dir=rtl] .nut-navbar-left,.nut-rtl .nut-navbar-left{left:auto;right:0}[dir=rtl] .nut-navbar-left .nut-icon-ArrowLeft,.nut-rtl .nut-navbar-left .nut-icon-ArrowLeft{transform:rotateY(180deg)}[dir=rtl] .nut-navbar-left-back,.nut-rtl .nut-navbar-left-back{margin-right:0;margin-left:10px}[dir=rtl] .nut-navbar-right,.nut-rtl .nut-navbar-right{right:auto;left:0}[dir=rtl] .nut-navbar-right .nut-icon,.nut-rtl .nut-navbar-right .nut-icon{margin-left:0;margin-right:12px}[dir=rtl] .nut-navbar-right .nut-icon:first-child,.nut-rtl .nut-navbar-right .nut-icon:first-child{margin-left:0;margin-right:0}[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft,.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft{margin-left:0;margin-right:12px}[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child,.nut-rtl .nut-navbar-title-align-left .nut-navbar-left .nut-icon-ArrowLeft:first-child{margin-left:0;margin-right:0}[dir=rtl] .nut-navbar-title-align-left .nut-navbar-left-back,.nut-rtl .nut-navbar-title-align-left .nut-navbar-left-back{margin-right:0;margin-left:0}
package/dist/esm/NavBar.js CHANGED
@@ -2,6 +2,7 @@ import React__default, { useRef, useState, useEffect } from "react";
2
2
  import classNames from "classnames";
3
3
  import { C as ComponentDefaults } from "./typings.js";
4
4
  import { g as getRect } from "./use-client-rect.js";
5
+ import { S as SafeArea } from "./safearea2.js";
5
6
  const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { left: "", right: "", titleAlign: "center", back: "", fixed: false, safeAreaInsetTop: false, placeholder: false, zIndex: 10 });
6
7
  const NavBar = (props) => {
7
8
  const { right, left, titleAlign, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onBackClick } = Object.assign(Object.assign({}, defaultProps), props);
@@ -73,11 +74,15 @@ const NavBar = (props) => {
73
74
  };
74
75
  const classes = classNames({
75
76
  [`${classPrefix}-fixed`]: fixed,
76
- [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop,
77
77
  [`${classPrefix}-title-align-${titleAlign}`]: true
78
78
  });
79
79
  const cls = classNames(classPrefix, classes, className);
80
- return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", { className: `${classPrefix}-placeholder` }, renderWrapper()) : renderWrapper());
80
+ return React__default.createElement(
81
+ React__default.Fragment,
82
+ null,
83
+ safeAreaInsetTop && React__default.createElement(SafeArea, { position: "top" }),
84
+ fixed && placeholder ? React__default.createElement("div", { className: `${classPrefix}-placeholder` }, renderWrapper()) : renderWrapper()
85
+ );
81
86
  };
82
87
  NavBar.displayName = "NutNavBar";
83
88
  export {
package/dist/esm/RadioGroup.js CHANGED
@@ -13,6 +13,9 @@ const defaultProps = {
13
13
  const classPrefix = "nut-radiogroup";
14
14
  const RadioGroup = React__default.forwardRef((props, ref) => {
15
15
  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, value, defaultValue, onChange, shape, labelPosition, direction, options, disabled } = _a, rest = __rest(_a, ["children", "className", "value", "defaultValue", "onChange", "shape", "labelPosition", "direction", "options", "disabled"]);
16
+ const cls = classNames(classPrefix, {
17
+ [`${classPrefix}-${props.direction}`]: props.direction
18
+ }, className);
16
19
  const [val2State, setVal2State] = usePropsValue({
17
20
  defaultValue: props.defaultValue,
18
21
  value: props.value,
@@ -24,7 +27,7 @@ const RadioGroup = React__default.forwardRef((props, ref) => {
24
27
  var { label, value: value2, disabled: disabled2, onChange: onChange2 } = _a2, rest2 = __rest(_a2, ["label", "value", "disabled", "onChange"]);
25
28
  return React__default.createElement(Radio, Object.assign({}, rest2, { key: value2 === null || value2 === void 0 ? void 0 : value2.toString(), children: label, value: value2, disabled: disabled2, onChange: onChange2, labelPosition, checked: value2 === val2State }));
26
29
  });
27
- }, [options]);
30
+ }, [options, labelPosition, val2State]);
28
31
  return React__default.createElement(
29
32
  RadioContext.Provider,
30
33
  { value: {
@@ -39,9 +42,7 @@ const RadioGroup = React__default.forwardRef((props, ref) => {
39
42
  setVal2State("");
40
43
  }
41
44
  } },
42
- React__default.createElement("div", Object.assign({ className: classNames(classPrefix, {
43
- [`${classPrefix}-${props.direction}`]: props.direction
44
- }, className) }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children)
45
+ React__default.createElement("div", Object.assign({ className: cls }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptionsChildren() : children)
45
46
  );
46
47
  });
47
48
  RadioGroup.displayName = "NutRadioGroup";
package/dist/esm/Range/style/style.css CHANGED
@@ -1 +1 @@
1
- .nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));-webkit-user-select:none;user-select:none}.nut-range-container .nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8));border-radius:2px;cursor:pointer}.nut-range-container .nut-range:before{position:absolute;inset-block:-8px;inset-inline:0;content:""}.nut-range-container .nut-range-bar{display:block;position:relative;width:100%;height:100%;background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-container .nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #fa2c19));outline:none}.nut-range-container .nut-range-button-wrapper,.nut-range-container .nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-container .nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-container .nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-container .nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-container .nut-range-disabled .nut-range-button-wrapper,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-left,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-container .nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-container .nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translate(-10px)}.nut-range-container .nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 4px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%,0,0)}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 15px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translateY(-11px)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0;left:30px;width:11px;height:11px;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper,[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-right,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-right{right:50%;left:initial;transform:translate3d(50%,50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-left,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-left{right:50%;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range .number,.nut-rtl .nut-range-container-vertical .nut-range .number{transform:translate3d(-100%,0,0)}[dir=rtl] .nut-range-container-vertical .nut-range-mark,.nut-rtl .nut-range-container-vertical .nut-range-mark{right:auto;left:50%}[dir=rtl] .nut-range-container-vertical .nut-range-tick,.nut-rtl .nut-range-container-vertical .nut-range-tick{left:auto;right:30px;margin-left:0;margin-right:0}[dir=rtl] .nut-range-container-vertical .nut-range-mark-text,.nut-rtl .nut-range-container-vertical .nut-range-mark-text{transform:translateY(-11px)}[dir=rtl] .nut-range-button-wrapper,[dir=rtl] .nut-range-button-wrapper-right,.nut-rtl .nut-range-button-wrapper,.nut-rtl .nut-range-button-wrapper-right{left:0;right:initial;transform:translate3d(-50%,-50%,0)}[dir=rtl] .nut-range-button-wrapper-left,.nut-rtl .nut-range-button-wrapper-left{right:0;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-tick,.nut-rtl .nut-range-tick{right:0;left:initial}[dir=rtl] .nut-range-mark-text,.nut-rtl .nut-range-mark-text{transform:translate(10px)}
1
+ .nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));-webkit-user-select:none;user-select:none}.nut-range-container .nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8));border-radius:2px;cursor:pointer}.nut-range-container .nut-range:before{position:absolute;inset-block:-8px;inset-inline:0;content:""}.nut-range-container .nut-range-bar{display:block;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-container .nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #fa2c19));outline:none}.nut-range-container .nut-range-button-wrapper,.nut-range-container .nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-container .nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-container .nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;font-size:var(--nutui-font-size-2, 12px);color:var(--nutui-range-color, var(--nutui-gray-7, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-container .nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-container .nut-range-disabled .nut-range-button-wrapper,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-left,.nut-range-container .nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-container .nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-container .nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translate(-10px)}.nut-range-container .nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 4px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%,0,0)}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 15px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;-webkit-user-select:none;user-select:none;transform:translateY(-11px)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0;left:30px;width:11px;height:11px;border-radius:50%;background:var(--nutui-range-inactive-color, var(--nutui-color-primary-light, #ffeae8))}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-color-primary, #fa2c19))}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper,[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-right,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-right{right:50%;left:initial;transform:translate3d(50%,50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range-button-wrapper-left,.nut-rtl .nut-range-container-vertical .nut-range-button-wrapper-left{right:50%;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-container-vertical .nut-range .number,.nut-rtl .nut-range-container-vertical .nut-range .number{transform:translate3d(-100%,0,0)}[dir=rtl] .nut-range-container-vertical .nut-range-mark,.nut-rtl .nut-range-container-vertical .nut-range-mark{right:auto;left:50%}[dir=rtl] .nut-range-container-vertical .nut-range-tick,.nut-rtl .nut-range-container-vertical .nut-range-tick{left:auto;right:30px;margin-left:0;margin-right:0}[dir=rtl] .nut-range-container-vertical .nut-range-mark-text,.nut-rtl .nut-range-container-vertical .nut-range-mark-text{transform:translateY(-11px)}[dir=rtl] .nut-range-button-wrapper,[dir=rtl] .nut-range-button-wrapper-right,.nut-rtl .nut-range-button-wrapper,.nut-rtl .nut-range-button-wrapper-right{left:0;right:initial;transform:translate3d(-50%,-50%,0)}[dir=rtl] .nut-range-button-wrapper-left,.nut-rtl .nut-range-button-wrapper-left{right:0;left:initial;transform:translate3d(50%,-50%,0)}[dir=rtl] .nut-range-tick,.nut-rtl .nut-range-tick{right:0;left:initial}[dir=rtl] .nut-range-mark-text,.nut-rtl .nut-range-mark-text{transform:translate(10px)}