@nutui/nutui-react 1.3.12 → 1.3.13-beta.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v1.3.13
+`2022-11-30`
+* :sparkles: feat: 新增image组件，适配多语言，增加单元测试 (#498) @vickyYe
+* :sparkles: feat: trendarrow趋势箭头组件开发完成 (#491)  @irisSong
+* :bug: fix: 提交skeleton骨架屏白底修改 @junjun666
+* 📖 docs: pagination demo 增加白色底 (#496) @oasis-cloud
+* 📖 docs: popover demo 增加白色底 (#497) @oasis-cloud
+* :bug: fix: cell 空链接不需跳转 (#495) @oasis-cloud
+* :sparkles: feat: 新增cascader的tabs底部选中颜色 (#493) @simpleStyle
+* :bug: fix: taro demo 启动报 declare 错误 (#490) @oasis-cloud
+* :sparkles: feat: 增加 triangle 图标 (#489) @oasis-cloud
+* :sparkles: chore: interface 统一 @oasis-cloud
+* :sparkles: feat: cascader组件支持activeColor选中态属性 (#487) @simpleStyle
+
 # v1.3.12
 `2022-11-23`
 

package/dist/esm/Cascader.js

@@ -29,6 +29,7 @@ var defaultProps$1 = {
     loading: false,
     children: []
   },
+  activeColor: '#fa2c19',
   checked: false,
   chooseItem: function chooseItem() {}
 };
@@ -36,7 +37,8 @@ var InternalCascaderItem = function InternalCascaderItem(props) {
   var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
     data = _defaultProps$1$props.data,
     checked = _defaultProps$1$props.checked,
-    chooseItem = _defaultProps$1$props.chooseItem;
+    chooseItem = _defaultProps$1$props.chooseItem,
+    activeColor = _defaultProps$1$props.activeColor;
   var b = cn('cascader-item');
   var classes = classNames({
     active: checked,
@@ -50,6 +52,9 @@ var InternalCascaderItem = function InternalCascaderItem(props) {
     // console.log('------data', data)
   };
   return React__default.createElement("div", {
+    style: {
+      color: checked ? activeColor : ''
+    },
     className: classes,
     onClick: function onClick() {
       chooseItem(data);
@@ -222,6 +227,8 @@ var Tree = /*#__PURE__*/function () {
 var defaultProps = _objectSpread({
   className: '',
   style: {},
+  activeColor: '#fa2c19',
+  tabsColor: '',
   poppable: true,
   visible: false,
   options: [],
@@ -244,6 +251,7 @@ var InternalCascader = function InternalCascader(props) {
   var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
     className = _defaultProps$props.className,
     style = _defaultProps$props.style,
+    tabsColor = _defaultProps$props.tabsColor,
     poppable = _defaultProps$props.poppable,
     visible = _defaultProps$props.visible,
     options = _defaultProps$props.options,
@@ -631,7 +639,10 @@ var InternalCascader = function InternalCascader(props) {
           }, React__default.createElement("span", {
             className: "nut-tabs__titles-item__text"
           }, !state.initLoading && state.panes.length && (pane === null || pane === void 0 ? void 0 : (_pane$selectedNode = pane.selectedNode) === null || _pane$selectedNode === void 0 ? void 0 : _pane$selectedNode.text), !state.initLoading && state.panes.length && !(pane !== null && pane !== void 0 && (_pane$selectedNode2 = pane.selectedNode) !== null && _pane$selectedNode2 !== void 0 && _pane$selectedNode2.text) && '请选择', !(!state.initLoading && state.panes.length) && 'Loading...'), React__default.createElement("span", {
-            className: "nut-tabs__titles-item__line"
+            className: "nut-tabs__titles-item__line",
+            style: {
+              background: tabsColor
+            }
           }));
         });
       }

package/dist/esm/Cell.js

@@ -1,8 +1,109 @@
-import { C as Cell } from './cell-c8781626.js';
-export { C as default } from './cell-c8781626.js';
-import 'react';
-import 'react-router-dom';
-import './bem-893ad28d.js';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "click", "onClick", "title", "subTitle", "desc", "descTextAlign", "isLink", "icon", "roundRadius", "url", "to", "replace", "center", "size", "className", "iconSlot", "linkSlot", "iconClassPrefix", "iconFontClassName"];
+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 from 'react';
+import { useHistory } from 'react-router-dom';
+import { c as cn } from './bem-893ad28d.js';
+import Icon from './Icon.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.js';
 import '@bem-react/classname';
-import './Icon.js';
-import './typings-1c5f2628.js';
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  title: null,
+  subTitle: null,
+  desc: '',
+  descTextAlign: 'right',
+  isLink: false,
+  icon: '',
+  roundRadius: '6px',
+  url: '',
+  to: '',
+  replace: false,
+  center: false,
+  size: '',
+  className: '',
+  iconSlot: null,
+  linkSlot: null,
+  click: function click(event) {},
+  onClick: function onClick(event) {}
+});
+var Cell = function Cell(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    children = _defaultProps$props.children,
+    click = _defaultProps$props.click,
+    onClick = _defaultProps$props.onClick,
+    title = _defaultProps$props.title,
+    subTitle = _defaultProps$props.subTitle,
+    desc = _defaultProps$props.desc,
+    descTextAlign = _defaultProps$props.descTextAlign,
+    isLink = _defaultProps$props.isLink,
+    icon = _defaultProps$props.icon,
+    roundRadius = _defaultProps$props.roundRadius,
+    url = _defaultProps$props.url,
+    to = _defaultProps$props.to,
+    replace = _defaultProps$props.replace,
+    center = _defaultProps$props.center,
+    size = _defaultProps$props.size,
+    className = _defaultProps$props.className,
+    iconSlot = _defaultProps$props.iconSlot,
+    linkSlot = _defaultProps$props.linkSlot,
+    iconClassPrefix = _defaultProps$props.iconClassPrefix,
+    iconFontClassName = _defaultProps$props.iconFontClassName,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var b = cn('cell');
+  var history = useHistory();
+  var handleClick = function handleClick(event) {
+    click(event);
+    onClick(event);
+    if (to && history) {
+      history[replace ? 'replace' : 'push'](to);
+    } else if (url) {
+      replace ? window.location.replace(url) : window.location.href = url;
+    }
+  };
+  var baseStyle = {
+    borderRadius: Number.isNaN(Number(roundRadius)) ? String(roundRadius) : "".concat(roundRadius, "px")
+  };
+  var styles = title || subTitle || icon ? {} : {
+    textAlign: descTextAlign,
+    flex: 1
+  };
+  return React__default.createElement("div", _objectSpread({
+    className: "".concat(b({
+      clickable: !!(isLink || to),
+      center: center,
+      large: size === 'large'
+    }, [className]), " "),
+    onClick: function onClick(event) {
+      return handleClick(event);
+    },
+    style: baseStyle
+  }, rest), children || React__default.createElement(React__default.Fragment, null, icon || iconSlot ? React__default.createElement("div", {
+    className: b('icon')
+  }, iconSlot || (icon ? React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: icon,
+    className: "icon"
+  }) : null)) : null, title || subTitle ? React__default.createElement("div", {
+    className: "".concat(b('title'))
+  }, title ? React__default.createElement("div", {
+    className: b('maintitle')
+  }, title) : null, subTitle ? React__default.createElement("div", {
+    className: b('subtitle')
+  }, subTitle) : null) : null, desc ? React__default.createElement("div", {
+    className: b('value', {
+      alone: !title && !subTitle
+    }),
+    style: styles
+  }, desc) : null, !linkSlot && (isLink || to) ? React__default.createElement(Icon, {
+    classPrefix: iconClassPrefix,
+    fontClassName: iconFontClassName,
+    name: "right",
+    className: b('link')
+  }) : linkSlot));
+};
+Cell.defaultProps = defaultProps;
+Cell.displayName = 'NutCell';
+export { Cell as default };

package/dist/esm/ConfigProvider.js

@@ -133,6 +133,9 @@ var zhCN = {
     canReleaseText: '松开刷新',
     refreshingText: '加载中...',
     completeText: '刷新成功'
+  },
+  watermark: {
+    errorCanvasTips: '当前环境不支持Canvas'
   }
 };
 var defaultProps = {

package/dist/esm/Form.js

@@ -9,14 +9,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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, { useRef } from 'react';
 import { C as CellGroup } from './cellgroup-3402f96c.js';
-import { F as FormItemContext, a as FormItem } from './formitem-46d4aca3.js';
+import { F as FormItemContext, a as FormItem } from './formitem-5a7034ff.js';
 import Schema from 'async-validator';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
 import './bem-893ad28d.js';
 import '@bem-react/classname';
-import './cell-c8781626.js';
-import 'react-router-dom';
-import './Icon.js';
+import './Cell.js';
 
 /**
  * 用于存储表单的数据

package/dist/esm/FormItem.js

@@ -1,9 +1,5 @@
-import { a as FormItem } from './formitem-46d4aca3.js';
-export { a as default } from './formitem-46d4aca3.js';
+import { a as FormItem } from './formitem-5a7034ff.js';
+export { a as default } from './formitem-5a7034ff.js';
 import 'react';
-import './cell-c8781626.js';
-import 'react-router-dom';
-import './bem-893ad28d.js';
-import '@bem-react/classname';
-import './Icon.js';
+import './Cell.js';
 import './typings-1c5f2628.js';

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

@@ -0,0 +1,2 @@
+
+import '../../../packages/image/image.scss'

package/dist/esm/Image.js

@@ -0,0 +1,105 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, useEffect } from 'react';
+import { useConfig } from './ConfigProvider.js';
+import Icon from './Icon.js';
+var defaultProps = {
+  fit: 'fill',
+  position: 'center',
+  alt: '',
+  width: 'center',
+  height: '',
+  round: false,
+  showError: true,
+  showLoading: true
+};
+var Image = function Image(props) {
+  useConfig();
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    children = _defaultProps$props.children,
+    className = _defaultProps$props.className,
+    style = _defaultProps$props.style,
+    src = _defaultProps$props.src,
+    fit = _defaultProps$props.fit,
+    position = _defaultProps$props.position,
+    alt = _defaultProps$props.alt,
+    width = _defaultProps$props.width,
+    height = _defaultProps$props.height,
+    round = _defaultProps$props.round,
+    radius = _defaultProps$props.radius,
+    showError = _defaultProps$props.showError,
+    showLoading = _defaultProps$props.showLoading,
+    slotError = _defaultProps$props.slotError,
+    slotLoding = _defaultProps$props.slotLoding,
+    onClick = _defaultProps$props.onClick,
+    onLoad = _defaultProps$props.onLoad,
+    onError = _defaultProps$props.onError;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isError = _useState4[0],
+    setIsError = _useState4[1];
+  useEffect(function () {
+    if (src) {
+      setIsError(false);
+      setLoading(true);
+    }
+  }, [src]);
+  // 图片加载
+  var load = function load() {
+    setLoading(false);
+    onLoad && onLoad();
+  };
+  // 图片加载失败
+  var error = function error() {
+    setIsError(true);
+    setLoading(false);
+    onError && onError();
+  };
+  var pxCheck = function pxCheck(value) {
+    return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+  };
+  var stylebox = {
+    height: height ? pxCheck(height) : '',
+    width: width ? pxCheck(width) : '',
+    overflow: radius !== undefined && radius !== null ? 'hidden' : '',
+    borderRadius: radius !== undefined && radius !== null ? pxCheck(radius) : ''
+  };
+  var styles = _objectSpread({
+    objectFit: fit,
+    objectPosition: position
+  }, style);
+  var imageClick = function imageClick(event) {
+    onClick && onClick(event);
+  };
+  return React__default.createElement("div", {
+    className: "nut-image ".concat(round ? 'nut-image-round' : '', " ").concat(className || ''),
+    style: stylebox,
+    onClick: function onClick(e) {
+      imageClick(e);
+    }
+  }, React__default.createElement("img", {
+    className: "nut-img",
+    style: styles,
+    src: src,
+    alt: alt,
+    onLoad: load,
+    onError: error
+  }), showLoading && loading ? React__default.createElement("div", {
+    className: "nut-img-loading"
+  }, slotLoding || children || React__default.createElement(Icon, {
+    name: "image"
+  })) : null, showError && isError && !loading ? React__default.createElement("div", {
+    className: "nut-img-error"
+  }, slotError || children || React__default.createElement(Icon, {
+    name: "image-error"
+  })) : null);
+};
+Image.defaultProps = defaultProps;
+Image.displayName = 'NutImage';
+export { Image as default };

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

@@ -0,0 +1,2 @@
+
+import '../../../packages/trendarrow/trendarrow.scss'

package/dist/esm/TrendArrow.js

@@ -0,0 +1,101 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["rate", "digits", "showSign", "showZero", "arrowLeft", "syncTextColor", "textColor", "riseColor", "dropColor", "iconSize", "upIconName", "downIconName", "className", "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, { useRef } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-8dc4de10.js';
+import '@bem-react/classname';
+var defaultProps = {
+  rate: 0,
+  digits: 2,
+  showSign: false,
+  showZero: false,
+  arrowLeft: false,
+  syncTextColor: true,
+  textColor: '#333',
+  riseColor: '#fa2c19',
+  dropColor: '#64b578',
+  iconSize: '12px',
+  upIconName: 'triangle-up',
+  downIconName: 'triangle-down',
+  className: ''
+};
+var TrendArrow = function TrendArrow(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    rate = _defaultProps$props.rate,
+    digits = _defaultProps$props.digits,
+    showSign = _defaultProps$props.showSign,
+    showZero = _defaultProps$props.showZero,
+    arrowLeft = _defaultProps$props.arrowLeft,
+    syncTextColor = _defaultProps$props.syncTextColor,
+    textColor = _defaultProps$props.textColor,
+    riseColor = _defaultProps$props.riseColor,
+    dropColor = _defaultProps$props.dropColor,
+    iconSize = _defaultProps$props.iconSize,
+    upIconName = _defaultProps$props.upIconName,
+    downIconName = _defaultProps$props.downIconName,
+    className = _defaultProps$props.className,
+    children = _defaultProps$props.children,
+    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var b = cn('trendarrow');
+  var handleClick = function handleClick() {};
+  var rateTrend = useRef(rate > 0);
+  var myFixed = function myFixed(num) {
+    var digit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+    if (Object.is(parseFloat(num), NaN)) {
+      return console.log("\u4F20\u5165\u7684\u503C\uFF1A".concat(num, "\u4E0D\u662F\u4E00\u4E2A\u6570\u5B57"));
+    }
+    num = parseFloat(num);
+    // eslint-disable-next-line no-restricted-properties
+    var numPow = Math.pow(10, digit);
+    return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
+  };
+  var calcStyle = function () {
+    var arrowColor = rateTrend.current ? riseColor : dropColor;
+    var textEquArrowColor = syncTextColor ? arrowColor : textColor;
+    var style = {
+      color: rate === 0 ? textColor : textEquArrowColor
+    };
+    return style;
+  }();
+  var calcRate = function () {
+    rateTrend.current = rate > 0;
+    var absRate = Math.abs(rate);
+    if (!showZero && rate === 0) {
+      return '--';
+    }
+    var resultRate = "".concat(
+    // eslint-disable-next-line no-nested-ternary
+    showSign && rate !== 0 ? rateTrend.current ? '+' : '-' : '').concat(myFixed(Number(absRate), digits), "%");
+    return resultRate;
+  }();
+  var calcIconProps = function () {
+    var iconProps = {
+      name: rateTrend.current ? upIconName : downIconName,
+      color: rateTrend.current ? riseColor : dropColor,
+      size: iconSize
+    };
+    return iconProps;
+  }();
+  var renderContent = function renderContent(arrowLeft) {
+    var classNameSuffix = !arrowLeft ? 'icon-after' : 'icon-before';
+    return React__default.createElement("span", {
+      className: "".concat(b(classNameSuffix), " ").concat(b('rate')),
+      style: calcStyle
+    }, calcRate);
+  };
+  return React__default.createElement("div", _objectSpread(_objectSpread({
+    className: "".concat(b(), " ").concat(className)
+  }, rest), {}, {
+    onClick: handleClick
+  }), !arrowLeft && renderContent(!arrowLeft), children || React__default.createElement(React__default.Fragment, null, Number(rate) !== 0 && React__default.createElement(Icon, {
+    size: calcIconProps.size,
+    name: calcIconProps.name,
+    color: calcIconProps.color
+  })), arrowLeft && renderContent(!arrowLeft));
+};
+TrendArrow.defaultProps = defaultProps;
+TrendArrow.displayName = 'NutTrendArrow';
+export { TrendArrow as default };

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

@@ -0,0 +1,2 @@
+
+import '../../../packages/watermark/watermark.scss'

package/dist/esm/WaterMark.js

@@ -0,0 +1,113 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, useEffect } from 'react';
+import { useConfig } from './ConfigProvider.js';
+import classNames from 'classnames';
+import { c as cn } from './bem-893ad28d.js';
+import '@bem-react/classname';
+var defaultProps = {
+  content: '',
+  fullPage: true,
+  zIndex: 2000,
+  gapX: 24,
+  gapY: 48,
+  width: 120,
+  height: 64,
+  image: '',
+  imageWidth: 120,
+  imageHeight: 64,
+  rotate: -22,
+  fontColor: 'rgba(0,0,0,.15)',
+  fontStyle: 'normal',
+  fontFamily: 'PingFang SC',
+  fontWeight: 'normal',
+  fontSize: 14
+};
+var WaterMark = function WaterMark(props) {
+  var _classNames;
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+    content = _defaultProps$props.content,
+    fullPage = _defaultProps$props.fullPage,
+    zIndex = _defaultProps$props.zIndex,
+    className = _defaultProps$props.className,
+    gapX = _defaultProps$props.gapX,
+    gapY = _defaultProps$props.gapY,
+    width = _defaultProps$props.width,
+    height = _defaultProps$props.height,
+    image = _defaultProps$props.image,
+    imageWidth = _defaultProps$props.imageWidth,
+    imageHeight = _defaultProps$props.imageHeight,
+    rotate = _defaultProps$props.rotate,
+    fontColor = _defaultProps$props.fontColor,
+    fontStyle = _defaultProps$props.fontStyle,
+    fontFamily = _defaultProps$props.fontFamily,
+    fontWeight = _defaultProps$props.fontWeight,
+    fontSize = _defaultProps$props.fontSize,
+    style = _defaultProps$props.style,
+    children = _defaultProps$props.children;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    base64Url = _useState2[0],
+    setBase64Url = _useState2[1];
+  var b = cn('watermark');
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b('')), true), _defineProperty(_classNames, "".concat(b(''), "-full-page"), fullPage), _classNames));
+  var cls = classNames(classes, className);
+  useEffect(function () {
+    init();
+  }, []);
+  var init = function init() {
+    var canvas = document.createElement('canvas');
+    var ratio = window.devicePixelRatio;
+    var ctx = canvas.getContext('2d');
+    var canvasWidth = "".concat((gapX + width) * ratio, "px");
+    var canvasHeight = "".concat((gapY + height) * ratio, "px");
+    var markWidth = width * ratio;
+    var markHeight = height * ratio;
+    canvas.setAttribute('width', canvasWidth);
+    canvas.setAttribute('height', canvasHeight);
+    if (ctx) {
+      if (image) {
+        ctx.translate(markWidth / 2, markHeight / 2);
+        ctx.rotate(Math.PI / 180 * Number(rotate));
+        var img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.referrerPolicy = 'no-referrer';
+        img.src = image;
+        img.onload = function () {
+          ctx.drawImage(img, -imageWidth * ratio / 2, -imageHeight * ratio / 2, imageWidth * ratio, imageHeight * ratio);
+          ctx.restore();
+          setBase64Url(canvas.toDataURL());
+        };
+      } else if (content) {
+        ctx.textBaseline = 'middle'; // 设置或返回在绘制文本时使用的当前文本基线。(正中)
+        ctx.textAlign = 'center'; // 设置或返回文本内容的当前对齐方式。
+        // 文字绕中间旋转
+        ctx.translate(markWidth / 2, markHeight / 2);
+        ctx.rotate(Math.PI / 180 * Number(rotate));
+        var markSize = Number(fontSize) * ratio;
+        ctx.font = "".concat(fontStyle, " normal ").concat(fontWeight, " ").concat(markSize, "px/").concat(markHeight, "px ").concat(fontFamily);
+        ctx.fillStyle = fontColor;
+        ctx.fillText(content, 0, 0); // 在画布上绘制"被填充的"文本。
+        ctx.restore(); // 返回之前保存过的路径状态和属性。
+        setBase64Url(canvas.toDataURL());
+      }
+    } else {
+      throw new Error(locale.watermark.errorCanvasTips);
+    }
+  };
+  return React__default.createElement("div", {
+    className: cls,
+    style: _objectSpread({
+      zIndex: zIndex,
+      backgroundSize: "".concat(gapX + width, "px"),
+      backgroundImage: "url('".concat(base64Url, "')")
+    }, style)
+  });
+};
+WaterMark.defaultProps = defaultProps;
+WaterMark.displayName = 'NutWaterMark';
+export { WaterMark as default };

package/dist/esm/{formitem-46d4aca3.js → formitem-5a7034ff.js}

@@ -10,7 +10,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 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, { createContext } from 'react';
-import { C as Cell } from './cell-c8781626.js';
+import Cell from './Cell.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
 var FormItemContext = createContext({});
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {

package/dist/esm/nutui-react.es.js

@@ -5,6 +5,7 @@ export { default as Icon } from './Icon.js';
 export { default as Overlay } from './Overlay.js';
 export { default as Popup } from './Popup.js';
 export { default as ConfigProvider } from './ConfigProvider.js';
+export { default as Image } from './Image.js';
 export { default as Layout } from './Layout.js';
 export { default as Col } from './Col.js';
 export { default as Row } from './Row.js';
@@ -80,6 +81,8 @@ export { default as Video } from './Video.js';
 export { default as Progress } from './Progress.js';
 export { default as Audio } from './Audio.js';
 export { default as ImagePreview } from './ImagePreview.js';
+export { default as TrendArrow } from './TrendArrow.js';
+export { default as WaterMark } from './WaterMark.js';
 export { default as Address } from './Address.js';
 export { default as Barrage } from './Barrage.js';
 export { default as Signature } from './Signature.js';

package/dist/esm/types/src/locales/base.d.ts

@@ -122,4 +122,7 @@ export interface BaseLang {
         refreshingText: string;
         completeText: string;
     };
+    watermark: {
+        errorCanvasTips: string;
+    };
 }

package/dist/esm/types/src/packages/address/address.d.ts

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, CSSProperties } from 'react';
 import { RegionData, ChangeCallBack, CloseCallBack, AddressList } from './type';
-import { IComponent } from '@/utils/typings';
-export interface AddressProps extends IComponent {
+import { BasicComponent } from '@/utils/typings';
+export interface AddressProps extends BasicComponent {
     className?: string;
     style?: CSSProperties;
     modelValue: boolean;

package/dist/esm/types/src/packages/audio/audio.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties, FunctionComponent, ReactEventHandler } from 'react';
-import { IComponent } from '@/utils/typings';
-export interface AudioProps extends IComponent {
+import { BasicComponent } from '@/utils/typings';
+export interface AudioProps extends BasicComponent {
     className: string;
     style: CSSProperties;
     url: string;

package/dist/esm/types/src/packages/avatar/avatar.d.ts

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import { IComponent } from '@/utils/typings';
-export interface AvatarProps extends IComponent {
+import { BasicComponent } from '@/utils/typings';
+export interface AvatarProps extends BasicComponent {
     size: string;
     icon: string;
     iconSize?: string | number;

package/dist/esm/types/src/packages/backtop/backtop.d.ts

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import { IComponent } from '@/utils/typings';
-export interface BackTopProps extends IComponent {
+import { BasicComponent } from '@/utils/typings';
+export interface BackTopProps extends BasicComponent {
     className?: string;
     bottom: number;
     right: number;

package/dist/esm/types/src/packages/badge/badge.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { IComponent } from '@/utils/typings';
-export interface BadgeProps extends IComponent {
+import { BasicComponent } from '@/utils/typings';
+export interface BadgeProps extends BasicComponent {
     value: any;
     dot: boolean;
     max: number;