@para-ui/core 3.0.20 → 3.0.22

package/Selector/index.js

@@ -18,6 +18,7 @@ import Empty from '../Empty/index.js';
 import SearchIcon from '@para-ui/icons/Search';
 import Refresh from '@para-ui/icons/Refresh';
 import { ArrayToObject, Get, Post, Cancel } from '@paraview/lib';
+import AutoTips from '../AutoTips/index.js';
 import { u as useGlobalProps } from '../_verture/useGlobalProps-af9a2af6.js';
 import '../Label/index.js';
 import '../Help/index.js';
@@ -34,7 +35,6 @@ import '../_verture/typeof-498dd2b1.js';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
 import '@para-ui/icons/CloseCircle';
-import '../AutoTips/index.js';
 import '../HelperText/index.js';
 import '../Dropdown/index.js';
 import 'rc-dropdown';
@@ -88,6 +88,7 @@ var SelectorNode = function SelectorNode(props) {
       tag = props.tag,
       detail = props.detail,
       detailRender = props.detailRender,
+      leftRender = props.leftRender,
       child = props.child,
       close = props.close,
       checked = props.checked,
@@ -299,6 +300,15 @@ var SelectorNode = function SelectorNode(props) {
       }));
     }
   };
+  /** 处理左侧内容 */
+
+
+  var handLeftContent = function handLeftContent() {
+    if (leftRender) return leftRender();
+    return jsxs(Fragment, {
+      children: [handSelectDom(), handImg(), handNodeLeft()]
+    });
+  };
   /** 处理className */
 
 
@@ -317,10 +327,10 @@ var SelectorNode = function SelectorNode(props) {
     style: style,
     onClick: onClickNode
   }, {
-    children: [jsxs("div", Object.assign({
+    children: [jsx("div", Object.assign({
       className: "selector-node-left"
     }, {
-      children: [handSelectDom(), handImg(), handNodeLeft()]
+      children: handLeftContent()
     })), jsxs("div", Object.assign({
       className: "selector-node-right"
     }, {
@@ -1013,7 +1023,7 @@ var SelectorMain = function SelectorMain(props) {
   }));
 };
 
-var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box {\n  padding: 24px 0 16px 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .title {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  padding: 0 16px;\n  margin-bottom: 16px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .title > .title-content {\n  margin-left: 8px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .content {\n  overflow-y: auto;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box {\n  padding-top: 12px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .title {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  padding: 0 16px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content {\n  padding: 0 16px 12px 16px;\n  overflow: auto;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag {\n  display: inline-flex;\n  height: 24px;\n  align-items: center;\n  padding: 0 8px;\n  border-radius: 2px;\n  background-color: rgba(171, 176, 185, 0.2);\n  margin-right: 8px;\n  margin-top: 6px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag > span {\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag > svg {\n  font-size: 16px;\n  margin-left: 4px;\n  color: rgba(46, 55, 67, 0.7);\n  cursor: pointer;\n}";
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box {\n  padding: 24px 0 16px 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .title {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  padding: 0 16px;\n  margin-bottom: 16px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .title > .title-content {\n  margin-left: 8px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-node > .selector-data-node-box > .content {\n  overflow-y: auto;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box {\n  padding-top: 12px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .title {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n  padding: 0 16px;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content {\n  padding: 0 16px 12px 16px;\n  overflow: auto;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag {\n  display: inline-flex;\n  height: 24px;\n  align-items: center;\n  padding: 0 8px;\n  border-radius: 2px;\n  background-color: rgba(171, 176, 185, 0.2);\n  margin-right: 8px;\n  margin-top: 6px;\n  max-width: calc(100% - 8px);\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag > span {\n  font-size: 12px;\n  color: rgb(46, 55, 67);\n  overflow: hidden;\n}\n.paraui-v3-selector-data.paraui-v3-selector-data-tag > .selector-data-tag-box > .content > .content-tag > svg {\n  font-size: 16px;\n  margin-left: 4px;\n  color: rgba(46, 55, 67, 0.7);\n  cursor: pointer;\n}";
 styleInject(css_248z$1);
 
 var SelectorData = function SelectorData(props) {
@@ -1030,6 +1040,8 @@ var SelectorData = function SelectorData(props) {
       disabled = props.disabled,
       handSelectorNodeInfo = props.handSelectorNodeInfo,
       selectDataTitleRender = props.selectDataTitleRender,
+      selectRenderItem = props.selectRenderItem,
+      selectRender = props.selectRender,
       _onClose = props.onClose;
   var intl = useFormatMessage('Selector', localeJson);
 
@@ -1094,8 +1106,15 @@ var SelectorData = function SelectorData(props) {
       },
       disabled: handDisabled(itemConfig)
     };
+
+    if (selectRenderItem) {
+      json.leftRender = function () {
+        return selectRenderItem(itemConfig);
+      };
+    }
     /** 节点类型 */
 
+
     if (item.leaf !== undefined) json.nodeMode = item.leaf ? 'leaf' : 'branch';
     /** 渲染字段 */
 
@@ -1143,6 +1162,10 @@ var SelectorData = function SelectorData(props) {
 
 
   var handNode = function handNode() {
+    if (selectRender) {
+      return selectRender(list || []);
+    }
+
     return list === null || list === void 0 ? void 0 : list.map(function (item, index) {
       return jsx(SelectorNode, Object.assign({}, handNodeConfig(item, index)), index);
     });
@@ -1195,6 +1218,32 @@ var SelectorData = function SelectorData(props) {
         children: handNode()
       }))]
     }));
+  }; // 处理内容
+
+
+  var handDetailTagContent = function handDetailTagContent() {
+    if (selectRender) {
+      return selectRender(list || []);
+    }
+
+    return jsx(Fragment, {
+      children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
+        var disabledItem = handDisabled(item);
+        return jsxs("span", Object.assign({
+          className: "content-tag"
+        }, {
+          children: [jsx("span", {
+            children: selectRenderItem ? selectRenderItem(item) : jsx(AutoTips, {
+              children: item[(backDataFieldConfig === null || backDataFieldConfig === void 0 ? void 0 : backDataFieldConfig.mainTitle) || ''] || item[(backDataFieldConfig === null || backDataFieldConfig === void 0 ? void 0 : backDataFieldConfig.key) || '']
+            })
+          }), !disabledItem && jsx(CloseIcon, {
+            onClick: function onClick() {
+              return _onClose && _onClose(item, index);
+            }
+          })]
+        }), index);
+      })
+    });
   }; // 处理tag内容
 
 
@@ -1205,20 +1254,7 @@ var SelectorData = function SelectorData(props) {
       children: [handTitle(), jsx("div", Object.assign({
         className: "content"
       }, {
-        children: list === null || list === void 0 ? void 0 : list.map(function (item, index) {
-          var disabledItem = handDisabled(item);
-          return jsxs("span", Object.assign({
-            className: "content-tag"
-          }, {
-            children: [jsx("span", {
-              children: item[(backDataFieldConfig === null || backDataFieldConfig === void 0 ? void 0 : backDataFieldConfig.mainTitle) || ''] || item[(backDataFieldConfig === null || backDataFieldConfig === void 0 ? void 0 : backDataFieldConfig.key) || '']
-            }), !disabledItem && jsx(CloseIcon, {
-              onClick: function onClick() {
-                return _onClose && _onClose(item, index);
-              }
-            })]
-          }), index);
-        })
+        children: handDetailTagContent()
       }))]
     }));
   };
@@ -1322,6 +1358,8 @@ var Selector = function Selector(props) {
       _useGlobalProps$group = _useGlobalProps.groupRange,
       groupRange = _useGlobalProps$group === void 0 ? 'search' : _useGlobalProps$group,
       emptyProps = _useGlobalProps.emptyProps,
+      selectRenderItem = _useGlobalProps.selectRenderItem,
+      selectRender = _useGlobalProps.selectRender,
       onChange = _useGlobalProps.onChange,
       onSelect = _useGlobalProps.onSelect,
       onSearch = _useGlobalProps.onSearch,
@@ -2453,6 +2491,8 @@ var Selector = function Selector(props) {
       emptyProps: emptyProps,
       onClose: onCloseCom,
       selectDataTitleRender: props.selectDataTitleRender,
+      selectRenderItem: selectRenderItem,
+      selectRender: selectRender,
       disabled: disabled
     });
   }; // 处理className

package/Selector/interface.d.ts

@@ -172,6 +172,8 @@ export interface SelectorNodeProps {
     detail?: boolean;
     /** 详情渲染 */
     detailRender?: () => ReactNode;
+    /** 选中每一项自定义 */
+    leftRender?: () => ReactNode;
     /** 是否存在下级 */
     child?: boolean;
     /** 是否关闭 */
@@ -306,6 +308,10 @@ export interface SelectorDataProps {
     handSelectorNodeInfo?: (item: SelectorAnyJson) => SelectorAnyJson;
     /** 选中数据标题render */
     selectDataTitleRender?: (list?: SelectorAnyJson[]) => ReactNode;
+    /** 选中每一项自定义 */
+    selectRenderItem?: (item: SelectorAnyJson) => ReactNode;
+    /** 选中项整体自定义渲染 */
+    selectRender?: (list: SelectorAnyJson[]) => ReactNode;
     /** 点击× */
     onClose?: (item: SelectorAnyJson, index: number) => void;
     [name: string]: any;
@@ -392,6 +398,10 @@ export interface SelectorProps {
     requestCallback?: (data: any, cb: (data: any) => void, isSearch?: boolean) => void;
     /** 选中数据标题render */
     selectDataTitleRender?: (list?: SelectorAnyJson[]) => ReactNode;
+    /** 选中每一项自定义 */
+    selectRenderItem?: (item: SelectorAnyJson) => ReactNode;
+    /** 选中项整体自定义渲染 */
+    selectRender?: (list: SelectorAnyJson[]) => ReactNode;
     /** 空状态属性 */
     emptyProps?: EmptyProps;
     /**

package/SingleBox/index.d.ts

@@ -30,10 +30,15 @@ export interface SingleBoxProps extends HelperTextDetailProps {
     defaultValue?: string[];
     /** 默认值 多选时为数组 单选单值 受控 */
     value?: string[];
+    /** 没有错误的时候,不渲染 */
+    hideErrorDom?: boolean;
+    /** 错误提示 */
+    helperText?: ReactNode | ReactNode[];
     /** 改变值 */
     onChange?: (val: string[]) => void;
     /** 匹配 */
     fetchSuggestions?: (val: string, cb: (data: any[]) => void) => void;
+    [name: string]: any;
 }
 export declare const SingleBox: FunctionComponent<SingleBoxProps>;
 export default SingleBox;

package/SingleBox/index.js

@@ -6,9 +6,10 @@ import { useState, useEffect } from 'react';
 import { TextField } from '../TextField/index.js';
 import Label from '../Label/index.js';
 import HelperText from '../HelperText/index.js';
-import Plus from '@para-ui/icons/Plus';
+import PlusCircleF from '@para-ui/icons/PlusCircleF';
 import Delete from '@para-ui/icons/Delete';
 import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
@@ -30,7 +31,20 @@ import '../_verture/usePopupContainer-874d101b.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-single-box {\n  display: inline-block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item {\n  padding-bottom: 15px;\n  display: flex;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .single-box-text-field {\n  width: calc(100% - 30px);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  cursor: pointer;\n}\n.paraui-v3-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-single-box > .single-box-add > svg {\n  font-size: 24px;\n}\n.paraui-v3-single-box > .single-box-add:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-add {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  cursor: not-allowed;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.7);\n}";
+var en = {
+  add: 'Newly Added'
+};
+
+var zh = {
+  add: '新增'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-single-box {\n  display: inline-block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item {\n  display: flex;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item .content-box {\n  flex: 1;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 12px;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-single-box > .single-box-add > svg {\n  font-size: 16px;\n  color: rgb(54, 102, 214);\n  margin-right: 8px;\n}\n.paraui-v3-single-box > .single-box-add:hover {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-add {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.4);\n}";
 styleInject(css_248z);
 
 var SingleBox = function SingleBox(props) {
@@ -48,14 +62,15 @@ var SingleBox = function SingleBox(props) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$required = props.required,
       required = _props$required === void 0 ? false : _props$required,
-      _props$error = props.error,
-      error = _props$error === void 0 ? false : _props$error,
       hideErrorDom = props.hideErrorDom,
       _props$helperText = props.helperText,
       helperText = _props$helperText === void 0 ? '' : _props$helperText,
       value = props.value,
       onChange = props.onChange,
       fetchSuggestions = props.fetchSuggestions;
+  var isError = helperText && typeof helperText === 'string' ? true : false;
+  var isErrorArr = helperText instanceof Array;
+  var intl = useFormatMessage('SingleBox', localeJson);
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,8 +83,30 @@ var SingleBox = function SingleBox(props) {
   useEffect(function () {
     if (value !== undefined) setValueCom(_toConsumableArray(value));
   }, [value]);
+  /** 处理错误 */
+
+  var handError = function handError(index) {
+    var obj = {
+      error: false,
+      helperText: ''
+    };
+
+    if (isErrorArr) {
+      var errorItem = helperText[index];
+
+      if (errorItem) {
+        obj = {
+          error: true,
+          helperText: errorItem
+        };
+      }
+    }
+
+    return obj;
+  };
   /** 增加 */
 
+
   var add = function add() {
     if (disabled) return;
     valueCom.push('');
@@ -148,7 +185,6 @@ var SingleBox = function SingleBox(props) {
     var str = $prefixCls + '-single-box';
     if (className) str += ' ' + className;
     if (size) str += " ".concat($prefixCls, "-single-box-").concat(size);
-    if (error) str += " ".concat($prefixCls, "-single-box-error");
     if (disabled) str += " ".concat($prefixCls, "-single-box-disabled");
     return str;
   };
@@ -164,34 +200,45 @@ var SingleBox = function SingleBox(props) {
         return jsxs("div", Object.assign({
           className: "single-box-content-item"
         }, {
-          children: [jsx(TextField, {
-            className: 'single-box-text-field',
-            disabled: disabled,
-            value: item,
-            placeholder: placeholder,
-            size: size,
-            hideErrorDom: true,
-            onChange: changeInput(index),
-            fetchSuggestions: fetchSuggestions,
-            onSelect: selectValue(index)
-          }), jsx("span", Object.assign({
-            className: "single-box-content-item-svg"
+          children: [jsx("div", Object.assign({
+            className: "content-box"
+          }, {
+            children: jsx(TextField, Object.assign({
+              className: 'single-box-text-field',
+              disabled: disabled,
+              value: item,
+              placeholder: placeholder,
+              size: size
+            }, handError(index), {
+              onChange: changeInput(index),
+              fetchSuggestions: fetchSuggestions,
+              onSelect: selectValue(index)
+            }))
+          })), jsx("div", Object.assign({
+            className: "opera-box"
           }, {
-            children: jsx(Delete, {
+            children: jsx("span", Object.assign({
+              className: "del-box",
               onClick: del(index)
-            })
+            }, {
+              children: jsx(Delete, {})
+            }))
           }))]
         }), index);
       })
-    })), jsx("div", Object.assign({
+    })), jsxs("div", Object.assign({
       className: "single-box-add",
       onClick: add
     }, {
-      children: jsx(Plus, {})
+      children: [jsx(PlusCircleF, {}), jsx("span", {
+        children: intl({
+          id: 'add'
+        })
+      })]
     })), jsx(HelperText, {
       className: "single-box-error",
-      error: error,
-      helperText: helperText,
+      error: isError,
+      helperText: isError ? helperText : undefined,
       hideErrorDom: hideErrorDom
     })]
   }));

package/SingleBox/lang/en_US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    add: string;
+};
+export default _default;

package/SingleBox/lang/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    zh: {
+        add: string;
+    };
+    en: {
+        add: string;
+    };
+};
+export default _default;

package/SingleBox/lang/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    add: string;
+};
+export default _default;

package/Slider/index.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/4 下午2:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-slider {\n  position: relative;\n  height: 8px;\n  padding: 0;\n  width: 100%;\n  border-radius: 4px;\n  touch-action: none;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-v3-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgba(171, 176, 185, 0.2);\n  height: 8px;\n  border-radius: 4px;\n}\n.paraui-v3-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 8px;\n  border-radius: 4px;\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  margin-top: -4px;\n  border-radius: 50%;\n  border: solid 2px rgb(54, 102, 214);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v3-slider .component-slider-handle-dragging {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v3-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(54, 102, 214);\n  box-shadow: unset;\n}\n.paraui-v3-slider .component-slider-handle:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle:active {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n  cursor: grabbing;\n}\n.paraui-v3-slider .component-slider-mark {\n  position: absolute;\n  top: 18px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v3-slider .component-slider-mark-text {\n  position: absolute;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  cursor: pointer;\n  color: #999;\n}\n.paraui-v3-slider .component-slider-mark-text-active {\n  color: #666;\n}\n.paraui-v3-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 8px;\n  background: transparent;\n}\n.paraui-v3-slider .component-slider-dot {\n  position: absolute;\n  bottom: -2px;\n  margin-left: -4px;\n  width: 12px;\n  height: 12px;\n  border: solid 2px rgba(171, 176, 185, 0.4);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v3-slider .component-slider-dot-active {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v3-slider.component-slider-disabled {\n  background-color: #e9e9e9;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-track {\n  background-color: #ccc;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-handle, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  border-color: #ccc;\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-mark-text, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v3-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -6px;\n  touch-action: pan-y;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n}\n\n.component-slider-tooltip {\n  position: absolute;\n  display: block;\n  left: -9999px;\n  top: -9999px;\n  max-width: 250px;\n  z-index: 1500;\n  visibility: visible;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.component-slider-tooltip-hidden {\n  display: none;\n}\n.component-slider-tooltip-inner {\n  min-width: 24px;\n  padding-bottom: 3px;\n  font-size: 14px;\n  line-height: 1;\n  color: rgba(46, 55, 67, 0.7);\n  text-align: center;\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: none;\n}\n.component-slider-tooltip-arrow {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-color: transparent;\n  border-style: solid;\n}\n.component-slider-tooltip-placement-top .component-slider-tooltip-arrow {\n  bottom: 4px;\n  left: 50%;\n  margin-left: -4px;\n  border-width: 4px 4px 0;\n  border-top-color: #6c6c6c;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-enter.component-slider-tooltip-zoom-down-enter-active, .component-slider-tooltip-zoom-down-appear.component-slider-tooltip-zoom-down-appear-active {\n  animation-name: sliderTooltipZoomDownIn;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-leave.component-slider-tooltip-zoom-down-leave-active {\n  animation-name: sliderTooltipZoomDownOut;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  transform: scale(0, 0);\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n@keyframes sliderTooltipZoomDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n  100% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n}\n@keyframes sliderTooltipZoomDownOut {\n  0% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/4 下午2:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-slider {\n  position: relative;\n  height: 8px;\n  padding: 0;\n  width: 100%;\n  border-radius: 4px;\n  touch-action: none;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-v3-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgba(171, 176, 185, 0.2);\n  height: 8px;\n  border-radius: 4px;\n}\n.paraui-v3-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 8px;\n  border-radius: 4px;\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  margin-top: -4px;\n  border-radius: 50%;\n  border: solid 2px rgb(54, 102, 214);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v3-slider .component-slider-handle-dragging {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v3-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(54, 102, 214);\n  box-shadow: unset;\n}\n.paraui-v3-slider .component-slider-handle:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle:active {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n  cursor: grabbing;\n}\n.paraui-v3-slider .component-slider-mark {\n  position: absolute;\n  top: 18px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v3-slider .component-slider-mark-text {\n  position: absolute;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  cursor: pointer;\n  color: #999;\n}\n.paraui-v3-slider .component-slider-mark-text-active {\n  color: #666;\n}\n.paraui-v3-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 8px;\n  background: transparent;\n}\n.paraui-v3-slider .component-slider-dot {\n  position: absolute;\n  bottom: -2px;\n  margin-left: -4px;\n  width: 12px;\n  height: 12px;\n  border: solid 2px rgba(171, 176, 185, 0.4);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v3-slider .component-slider-dot-active {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v3-slider.component-slider-disabled {\n  background-color: rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-track {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-handle, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  border-color: #ccc;\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-mark-text, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v3-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -6px;\n  touch-action: pan-y;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n}\n\n.component-slider-tooltip {\n  position: absolute;\n  display: block;\n  left: -9999px;\n  top: -9999px;\n  max-width: 250px;\n  z-index: 1500;\n  visibility: visible;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.component-slider-tooltip-hidden {\n  display: none;\n}\n.component-slider-tooltip-inner {\n  min-width: 24px;\n  font-size: 14px;\n  line-height: 1;\n  color: rgba(46, 55, 67, 0.7);\n  text-align: center;\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: none;\n}\n.component-slider-tooltip-arrow {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-color: transparent;\n  border-style: solid;\n}\n.component-slider-tooltip-placement-top .component-slider-tooltip-arrow {\n  bottom: 4px;\n  left: 50%;\n  margin-left: -4px;\n  border-width: 4px 4px 0;\n  border-top-color: #6c6c6c;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-enter.component-slider-tooltip-zoom-down-enter-active, .component-slider-tooltip-zoom-down-appear.component-slider-tooltip-zoom-down-appear-active {\n  animation-name: sliderTooltipZoomDownIn;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-leave.component-slider-tooltip-zoom-down-leave-active {\n  animation-name: sliderTooltipZoomDownOut;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  transform: scale(0, 0);\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n@keyframes sliderTooltipZoomDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n  100% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n}\n@keyframes sliderTooltipZoomDownOut {\n  0% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n}";
 styleInject(css_248z);
 
 var Slider = function Slider(props) {

package/Status/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @author Hanz
+ * @date 2022/11/8 5:53 PM
+ * @description 状态组件
+ */
+import React, { FC, ReactNode } from 'react';
+import './index.scss';
+export interface StatusProps {
+    /** 文本 **/
+    text: ReactNode;
+    /** 状态 */
+    status?: 'info' | 'success' | 'warning' | 'error' | 'completed';
+    /** 自定义状态图标 **/
+    icon?: ReactNode;
+    /** cls */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+}
+export declare const Status: FC<StatusProps>;
+export default Status;

package/Status/index.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-status {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-status .status-ink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n}\n.paraui-v3-status .status-ink:before {\n  content: \" \";\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n}\n.paraui-v3-status .status-icon {\n  display: inline-flex;\n  font-size: 16px;\n}\n.paraui-v3-status .status-icon svg {\n  font-size: 16px;\n}\n.paraui-v3-status .status-text {\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-status-info .status-ink {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-status-info .status-ink:before {\n  background-color: #3666d6;\n}\n.paraui-v3-status-success .status-ink {\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-status-success .status-ink:before {\n  background-color: #53c31b;\n}\n.paraui-v3-status-warning .status-ink {\n  background-color: rgba(255, 161, 80, 0.05);\n}\n.paraui-v3-status-warning .status-ink:before {\n  background-color: #ffa150;\n}\n.paraui-v3-status-error .status-ink {\n  background-color: rgba(235, 96, 84, 0.05);\n}\n.paraui-v3-status-error .status-ink:before {\n  background-color: #eb6054;\n}\n.paraui-v3-status-completed .status-ink {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-status-completed .status-ink:before {\n  background-color: rgba(46, 55, 67, 0.4);\n}";
+styleInject(css_248z);
+
+var Status = function Status(props) {
+  var text = props.text,
+      _props$status = props.status,
+      status = _props$status === void 0 ? 'info' : _props$status,
+      icon = props.icon,
+      className = props.className,
+      style = props.style; //cls
+
+  var makeCls = clsx("".concat($prefixCls, "-status"), className, status && !icon && "".concat($prefixCls, "-status-").concat(status));
+  return jsxs("span", Object.assign({
+    className: makeCls,
+    style: style
+  }, {
+    children: [icon ? jsx("span", Object.assign({
+      className: "status-icon"
+    }, {
+      children: icon
+    })) : jsx("span", {
+      className: "status-ink"
+    }), jsx("span", Object.assign({
+      className: "status-text"
+    }, {
+      children: text
+    }))]
+  }));
+};
+
+export { Status, Status as default };