@para-ui/core 4.0.0-rc → 4.0.0-rc.2

package/Selector/interface.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode } from "react";
-import { EmptyProps } from "../Empty";
-import { ReqFuncProps } from "./util";
+import React, { ReactNode } from 'react';
+import { EmptyProps } from '../Empty';
+import { ReqFuncProps } from './util';
 /** 搜索方法 */
 export interface SearchFuncProps {
     page?: number;
@@ -385,7 +385,7 @@ export interface SelectorProps {
      * @param item 当前节点数据
      * @param bol true列表数据, false展示数据
      * */
-    detailRender?: (item: SelectorAnyJson, bol: boolean) => (Promise<ReactNode> | ReactNode);
+    detailRender?: (item: SelectorAnyJson, bol: boolean) => Promise<ReactNode> | ReactNode;
     /** 是否全选, 只存在复选框的时候 */
     isAllCheck?: boolean;
     /** 禁用 */
@@ -417,7 +417,7 @@ export interface SelectorProps {
      * @param val 搜索框的值
      * @return [] 返回平铺数组
      * */
-    onSearch?: (val: string, reqParams: SearchFuncProps) => (Promise<SearchReqDataProps> | SearchReqDataProps);
+    onSearch?: (val: string, reqParams: SearchFuncProps) => Promise<SearchReqDataProps> | SearchReqDataProps;
     /** 刷新事件 */
     onRefresh?: () => void;
     /** 选择事件 返回true不触发onChange事件
@@ -425,7 +425,7 @@ export interface SelectorProps {
      *  bol 选中/不选中
      *  isAllCheck 全选
      * */
-    onSelect?: (item: SelectorAnyJson | SelectorAnyJson[], bol: boolean, isAllCheck: boolean) => (Promise<boolean | void> | (boolean | void));
+    onSelect?: (item: SelectorAnyJson | SelectorAnyJson[], bol: boolean, isAllCheck: boolean) => Promise<boolean | void> | (boolean | void);
     /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
     onChange?: (val: Record<string, any>[] | Record<string, any> | null, node: Record<string, any>, rowData: Record<string, any>) => void;
     [name: string]: any;

package/SelectorPicker/index.d.ts

@@ -4,10 +4,10 @@
  * @description 选择器选择
  */
 import React, { ReactNode } from 'react';
-import { HelperTextDetailProps } from "../HelperText";
-import { LabelTooltipProps } from "../Label";
-import { SelectorProps } from "../Selector/interface";
-import { TooltipProps } from "../Tooltip";
+import { HelperTextDetailProps } from '../HelperText';
+import { LabelTooltipProps } from '../Label';
+import { SelectorProps } from '../Selector/interface';
+import { TooltipProps } from '../Tooltip';
 import './index.scss';
 export interface SelectorPickerProps extends HelperTextDetailProps {
     /** className */

package/SelectorPicker/index.js

@@ -65,7 +65,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-selector-picker {\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  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 38px 0 10px;\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n  padding-right: 40px;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  overflow: hidden;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  display: inline-block;\n  background-color: rgb(234, 236, 241);\n  border-radius: 4px;\n  padding: 0 10px;\n  color: rgb(29, 33, 38);\n  margin-right: 4px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(29, 33, 38);\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: calc(100% - 20px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  cursor: pointer;\n  margin-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  font-size: 14px;\n  line-height: 1.429;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgb(161, 168, 179);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  transition: all 0.3s;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgb(247, 248, 250);\n  cursor: not-allowed;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v4-selector-picker-dropdown .paraui-v4-selector {\n  border: 0;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n\n.paraui-v4-selector-more-popover {\n  /*// 小\n  &.paraui-v4-selector-more-popover-small {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 28px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 28px;\n        }\n      }\n    }\n  }\n\n  // 中\n  &.paraui-v4-selector-more-popover-medium {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 32px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 32px;\n        }\n      }\n    }\n  }\n\n  // 大\n  &.paraui-v4-selector-more-popover-large {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 36px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 36px;\n        }\n      }\n    }\n  }*/\n}\n.paraui-v4-selector-more-popover .select-more {\n  width: 290px;\n  padding: 4px 0;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content {\n  max-height: 320px;\n  overflow: auto;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 10px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  width: calc(100% - 25px);\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 18px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n  border-radius: 2px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-selector-picker {\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  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 38px 0 10px;\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n  padding-right: 40px;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  overflow: hidden;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  display: inline-block;\n  background-color: rgb(234, 236, 241);\n  border-radius: 4px;\n  padding: 0 10px;\n  color: rgb(29, 33, 38);\n  margin-right: 4px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(29, 33, 38);\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: calc(100% - 20px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  cursor: pointer;\n  margin-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  font-size: 14px;\n  line-height: 1.429;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgb(161, 168, 179);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  transition: all 0.3s;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgb(247, 248, 250);\n  cursor: not-allowed;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v4-selector-picker-dropdown .paraui-v4-selector {\n  border: 0;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n\n.paraui-v4-selector-more-popover {\n  /*// 小\n  &.paraui-v4-selector-more-popover-small {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 28px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 28px;\n        }\n      }\n    }\n  }\n\n  // 中\n  &.paraui-v4-selector-more-popover-medium {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 32px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 32px;\n        }\n      }\n    }\n  }\n\n  // 大\n  &.paraui-v4-selector-more-popover-large {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 36px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 36px;\n        }\n      }\n    }\n  }*/\n}\n.paraui-v4-selector-more-popover .select-more {\n  width: 290px;\n  padding: 4px 0;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content {\n  max-height: 320px;\n  overflow: auto;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 10px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  width: calc(100% - 25px);\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 18px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n  border-radius: 2px;\n}";
 styleInject(css_248z);
 
 //下拉选择器
@@ -125,7 +125,7 @@ var SelectorPicker = function SelectorPicker(props) {
   var constData = useRef({
     list: []
   });
-  var prefixCls = $prefixCls + '-selector-picker';
+  var prefixCls = "".concat($prefixCls, "-selector-picker");
   constData.current.value = value;
   constData.current.valueCom = valueCom;
   constData.current.openMore = openMore;
@@ -148,10 +148,10 @@ var SelectorPicker = function SelectorPicker(props) {
     if (!overLine && multiple) {
       window.addEventListener('resize', changeSize);
     } else {
-      window.removeEventListener("resize", changeSize);
+      window.removeEventListener('resize', changeSize);
     }
     return function () {
-      window.removeEventListener("resize", changeSize);
+      window.removeEventListener('resize', changeSize);
     };
   }, [overLine, multiple]);
   useEffect(function () {
@@ -229,7 +229,7 @@ var SelectorPicker = function SelectorPicker(props) {
     return jsx("div", Object.assign({
       className: 'selector-picker-dropdown-content',
       style: {
-        width: (refDom && refDom.current ? refDom.current.offsetWidth : 0) + 'px'
+        width: "".concat(refDom && refDom.current ? refDom.current.offsetWidth : 0, "px")
       }
     }, {
       children: jsx(Selector, Object.assign({}, handSelectorProps()))
@@ -284,7 +284,7 @@ var SelectorPicker = function SelectorPicker(props) {
           }, {
             children: [jsx("span", {
               children: jsx(AutoTips, Object.assign({
-                placement: "top-start"
+                placement: 'top-start'
               }, {
                 children: renderVal || val
               }))
@@ -318,7 +318,7 @@ var SelectorPicker = function SelectorPicker(props) {
       className: 'selector-picker-wrapper-content-radio'
     }, {
       children: overLine ? resultVal : jsx(AutoTips, Object.assign({
-        placement: "top-start"
+        placement: 'top-start'
       }, {
         children: resultVal
       }))
@@ -386,7 +386,7 @@ var SelectorPicker = function SelectorPicker(props) {
           }, {
             children: [jsx("span", {
               children: jsx(AutoTips, Object.assign({
-                placement: "top-start"
+                placement: 'top-start'
               }, {
                 children: renderVal || val
               }))
@@ -404,7 +404,7 @@ var SelectorPicker = function SelectorPicker(props) {
   var handleClassMorePopover = function handleClassMorePopover() {
     var str = "".concat($prefixCls, "-selector-more-popover ").concat($prefixCls, "-scrollbar-small");
     if (size) str += " ".concat($prefixCls, "-selector-more-popover-").concat(size);
-    if (morePopoverClassName) str += ' ' + morePopoverClassName;
+    if (morePopoverClassName) str += " ".concat(morePopoverClassName);
     return str;
   };
   /** 多选超出popover */
@@ -428,7 +428,7 @@ var SelectorPicker = function SelectorPicker(props) {
       placement: 'bottomLeft',
       trigger: ['click'],
       onVisibleChange: onVisibleChange,
-      overlayClassName: $prefixCls + '-selector-picker-dropdown',
+      overlayClassName: "".concat($prefixCls, "-selector-picker-dropdown"),
       getPopupContainer: getPopupContainer
     }, {
       children: disabledTooltip ? jsx(Tooltip, Object.assign({

package/SingleBox/index.d.ts

@@ -5,8 +5,8 @@
  */
 import React, { FunctionComponent, ReactNode } from 'react';
 import { TextFieldProps } from '../TextField';
-import { LabelTooltipProps } from "../Label";
-import { HelperTextDetailProps } from "../HelperText";
+import { LabelTooltipProps } from '../Label';
+import { HelperTextDetailProps } from '../HelperText';
 import './index.scss';
 export interface SingleBoxProps extends HelperTextDetailProps {
     /** 样式class */

package/SingleBox/index.js

@@ -47,7 +47,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-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-v4-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item {\n  display: flex;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box {\n  flex: 1;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box .single-box-text-field .paraui-v4-helper-text {\n  min-height: 10px;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v4-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-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(247, 248, 250);\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-single-box > .single-box-add > svg {\n  font-size: 16px;\n  color: rgb(46, 101, 230);\n  margin-right: 10px;\n}\n.paraui-v4-single-box > .single-box-add:hover {\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add {\n  border-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add > svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add:hover {\n  border-color: rgb(212, 218, 227);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-add {\n  height: 32px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-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-v4-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item {\n  display: flex;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box {\n  flex: 1;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item .content-box .single-box-text-field .paraui-v4-helper-text {\n  min-height: 10px;\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v4-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-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(247, 248, 250);\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-single-box > .single-box-add > svg {\n  font-size: 16px;\n  color: rgb(46, 101, 230);\n  margin-right: 4px;\n}\n.paraui-v4-single-box > .single-box-add:hover {\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add {\n  border-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add > svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-disabled > .single-box-add:hover {\n  border-color: rgb(212, 218, 227);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-single-box.paraui-v4-single-box-large > .single-box-add {\n  height: 32px;\n}";
 styleInject(css_248z);
 
 var SingleBox = function SingleBox(props) {
@@ -148,7 +148,7 @@ var SingleBox = function SingleBox(props) {
     var handLabelClass = function handLabelClass() {
       var str = 'single-box-label';
       if (labelTooltip && labelTooltip.className) {
-        str += ' ' + labelTooltip.className;
+        str += " ".concat(labelTooltip.className);
       }
       return str;
     };
@@ -162,8 +162,8 @@ var SingleBox = function SingleBox(props) {
   };
   /** 处理class */
   var handClass = function handClass() {
-    var str = $prefixCls + '-single-box';
-    if (className) str += ' ' + className;
+    var str = "".concat($prefixCls, "-single-box");
+    if (className) str += " ".concat(className);
     if (size) str += " ".concat($prefixCls, "-single-box-").concat(size);
     if (disabled) str += " ".concat($prefixCls, "-single-box-disabled");
     return str;

package/Slider/index.js

@@ -10,7 +10,7 @@ import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-0d9802f
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/4 下午2:58\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-slider {\n  position: relative;\n  height: 2px;\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-v4-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgb(234, 236, 241);\n  height: 2px;\n  border-radius: 4px;\n}\n.paraui-v4-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 2px;\n  border-radius: 4px;\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-slider .component-slider-handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  cursor: pointer;\n  margin-top: -5px;\n  border-radius: 50%;\n  border: solid 2px rgb(46, 101, 230);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v4-slider .component-slider-handle-dragging {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v4-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(46, 101, 230);\n  box-shadow: unset;\n}\n.paraui-v4-slider .component-slider-handle:hover {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-handle:active {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n  cursor: grabbing;\n}\n.paraui-v4-slider .component-slider-mark {\n  position: absolute;\n  top: 8px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v4-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: rgb(92, 101, 115);\n}\n.paraui-v4-slider .component-slider-mark-text-active {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 2px;\n  background: transparent;\n}\n.paraui-v4-slider .component-slider-dot {\n  position: absolute;\n  bottom: -3px;\n  margin-left: -4px;\n  width: 8px;\n  height: 8px;\n  border: solid 2px rgb(234, 236, 241);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v4-slider .component-slider-dot-active {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v4-slider.component-slider-disabled {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-handle {\n  box-shadow: none !important;\n  outline: none !important;\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-track {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-handle, .paraui-v4-slider.component-slider-disabled .component-slider-dot {\n  border-color: rgb(161, 168, 179);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-mark-text, .paraui-v4-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v4-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -4px;\n  touch-action: pan-y;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n  margin-left: -2px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n  margin-left: -2px;\n}\n\n.component-slider {\n  /*&-tooltip-arrow {\n    display: none;\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &-tooltip-placement-top &-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}\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: rgb(92, 101, 115);\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-placement-top {\n  top: -18px !important;\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 linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-slider {\n  position: relative;\n  height: 2px;\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-v4-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgb(234, 236, 241);\n  height: 2px;\n  border-radius: 4px;\n}\n.paraui-v4-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 2px;\n  border-radius: 4px;\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-slider .component-slider-handle {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  cursor: pointer;\n  margin-top: -5px;\n  border-radius: 50%;\n  border: solid 2px rgb(46, 101, 230);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v4-slider .component-slider-handle-dragging {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v4-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(46, 101, 230);\n  box-shadow: unset;\n}\n.paraui-v4-slider .component-slider-handle:hover {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-handle:active {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 5px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n  cursor: grabbing;\n}\n.paraui-v4-slider .component-slider-mark {\n  position: absolute;\n  top: 8px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v4-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: rgb(29, 33, 38);\n}\n.paraui-v4-slider .component-slider-mark-text-active {\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 2px;\n  background: transparent;\n}\n.paraui-v4-slider .component-slider-dot {\n  position: absolute;\n  bottom: -3px;\n  margin-left: -4px;\n  width: 8px;\n  height: 8px;\n  border: solid 2px rgb(234, 236, 241);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v4-slider .component-slider-dot:hover {\n  border-color: rgb(46, 101, 230);\n  box-shadow: 0 0 4px rgb(213, 224, 250);\n  outline: 2px solid rgb(213, 224, 250);\n}\n.paraui-v4-slider .component-slider-dot-active {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v4-slider.component-slider-disabled {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-handle {\n  box-shadow: none !important;\n  outline: none !important;\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-track {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-handle, .paraui-v4-slider.component-slider-disabled .component-slider-dot {\n  border-color: rgb(161, 168, 179);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v4-slider.component-slider-disabled .component-slider-mark-text, .paraui-v4-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v4-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -4px;\n  touch-action: pan-y;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n  margin-left: -2px;\n}\n.paraui-v4-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n  margin-left: -2px;\n}\n\n.component-slider {\n  /*&-tooltip-arrow {\n    display: none;\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &-tooltip-placement-top &-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}\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: rgb(92, 101, 115);\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-placement-top {\n  top: -18px !important;\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);
 
 //slider 滑块

package/Slider/interface.d.ts

@@ -3,7 +3,7 @@
  * @date 2021/11/5 下午4:05
  * @description
  */
-import React from "react";
+import React from 'react';
 export type TooltipPlacement = 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 interface SliderRange {
     draggableTrack?: boolean;

package/Status/index.d.ts

@@ -3,14 +3,14 @@
  * @date 2022/11/8 5:53 PM
  * @description 状态组件
  */
-import React, { FC, ReactNode } from "react";
-import "./index.scss";
-type iconType = "success" | "error";
+import React, { FC, ReactNode } from 'react';
+import './index.scss';
+type iconType = 'success' | 'error';
 export interface StatusProps {
     /** 文本 **/
     text?: ReactNode;
     /** 状态 */
-    status?: "info" | "success" | "warning" | "error" | "completed";
+    status?: 'info' | 'success' | 'warning' | 'error' | 'completed';
     /** 自定义状态图标 **/
     icon?: ReactNode | iconType;
     /** cls */

package/Status/index.js

@@ -6,14 +6,14 @@ import CompleteIcon from '@para-ui/icons/CheckCircleF';
 import { t as tinycolor } from '../_verture/tinycolor-ece3542d.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 linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-status {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v4-status .status-ink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  width: 10px;\n  height: 10px;\n}\n.paraui-v4-status .status-ink .status-radius {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n}\n.paraui-v4-status .status-icon {\n  display: inline-flex;\n  font-size: 16px;\n}\n.paraui-v4-status .status-icon svg {\n  font-size: 16px;\n}\n.paraui-v4-status .status-icon .status-icon-success {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-status .status-icon .status-icon-error {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-status .status-text {\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgba(29, 33, 38, 0.9);\n}\n.paraui-v4-status-info .status-ink {\n  background: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-status-info .status-ink .status-radius {\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-status-success .status-ink {\n  background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-status-success .status-ink .status-radius {\n  background-color: rgb(19, 191, 76);\n}\n.paraui-v4-status-warning .status-ink {\n  background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-status-warning .status-ink .status-radius {\n  background-color: rgb(255, 147, 38);\n}\n.paraui-v4-status-error .status-ink {\n  background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-status-error .status-ink .status-radius {\n  background-color: rgb(244, 66, 66);\n}\n.paraui-v4-status-completed .status-ink {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-status-completed .status-ink .status-radius {\n  background-color: rgb(161, 168, 179);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-status {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v4-status .status-ink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  width: 10px;\n  height: 10px;\n}\n.paraui-v4-status .status-ink .status-radius {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n}\n.paraui-v4-status .status-icon {\n  display: inline-flex;\n  font-size: 16px;\n}\n.paraui-v4-status .status-icon svg {\n  font-size: 16px;\n}\n.paraui-v4-status .status-icon .status-icon-success {\n  color: rgb(19, 191, 76);\n}\n.paraui-v4-status .status-icon .status-icon-error {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-status .status-text {\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-status-info .status-ink {\n  background: rgba(46, 101, 230, 0.1);\n}\n.paraui-v4-status-info .status-ink .status-radius {\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-status-success .status-ink {\n  background-color: rgba(19, 191, 76, 0.1);\n}\n.paraui-v4-status-success .status-ink .status-radius {\n  background-color: rgb(19, 191, 76);\n}\n.paraui-v4-status-warning .status-ink {\n  background-color: rgba(255, 147, 38, 0.1);\n}\n.paraui-v4-status-warning .status-ink .status-radius {\n  background-color: rgb(255, 147, 38);\n}\n.paraui-v4-status-error .status-ink {\n  background-color: rgba(244, 66, 66, 0.1);\n}\n.paraui-v4-status-error .status-ink .status-radius {\n  background-color: rgb(244, 66, 66);\n}\n.paraui-v4-status-completed .status-ink {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-status-completed .status-ink .status-radius {\n  background-color: rgb(161, 168, 179);\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,
+    status = _props$status === void 0 ? 'info' : _props$status,
     icon = props.icon,
     className = props.className,
     style = props.style,
@@ -23,21 +23,20 @@ var Status = function Status(props) {
   // render Icon
   var renderIcon = function renderIcon() {
     if (icon) {
-      if (typeof icon === "string") {
+      if (typeof icon !== "string") return icon;
+      if (typeof icon === 'string') {
         switch (icon) {
-          case "success":
+          case 'success':
             return jsx(CompleteIcon, {
               className: "status-icon-".concat(icon)
             });
-          case "error":
+          case 'error':
             return jsx(CloseCircleF, {
               className: "status-icon-".concat(icon)
             });
           default:
             return null;
         }
-      } else {
-        return icon;
       }
     }
   };

package/Stepper/index.d.ts

@@ -3,9 +3,9 @@
  * @date 2022/6/7 下午4:02
  * @description stepper
  */
-import React from "react";
-import RcSteps from "rc-steps";
-import "./index.scss";
+import React from 'react';
+import RcSteps from 'rc-steps';
+import './index.scss';
 type StepItem = string | {
     label?: React.ReactNode;
     icon?: React.ReactNode;
@@ -20,7 +20,7 @@ export interface StepperProps {
     /** 发生err的步骤 */
     errorStep?: number;
     /** 指定步骤条方向 */
-    direction?: "horizontal" | "vertical";
+    direction?: 'horizontal' | 'vertical';
     style?: React.CSSProperties;
     /**
      * 步骤条数据
@@ -40,7 +40,7 @@ export interface StepProps {
     /** 点击步骤时触发 */
     onClick?: React.MouseEventHandler<HTMLElement>;
     /** 步骤状态 */
-    status?: "wait" | "process" | "finish" | "error";
+    status?: 'wait' | 'process' | 'finish' | 'error';
     /** 禁用点击 */
     disabled?: boolean;
     /** 标题 */

package/Stepper/index.js

@@ -29,34 +29,34 @@ import '@paraview/lib';
 //默认图标
 var Icons = {
   1: jsx(One, {
-    size: 'medium'
+    size: "medium"
   }),
   2: jsx(Two, {
-    size: 'medium'
+    size: "medium"
   }),
   3: jsx(Three, {
-    size: 'medium'
+    size: "medium"
   }),
   4: jsx(Four, {
-    size: 'medium'
+    size: "medium"
   }),
   5: jsx(Five, {
-    size: 'medium'
+    size: "medium"
   }),
   6: jsx(Six, {
-    size: 'medium'
+    size: "medium"
   }),
   7: jsx(Seven, {
-    size: 'medium'
+    size: "medium"
   }),
   8: jsx(Eight, {
-    size: 'medium'
+    size: "medium"
   }),
   9: jsx(Nine, {
-    size: 'medium'
+    size: "medium"
   }),
-  'done': jsx(Check, {
-    size: 'medium'
+  done: jsx(Check, {
+    size: "medium"
   })
 };
 
@@ -70,22 +70,22 @@ var Stepper = function Stepper(props) {
     errorStep = props.errorStep,
     steps = props.steps,
     _props$direction = props.direction,
-    direction = _props$direction === void 0 ? "horizontal" : _props$direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
     children = props.children,
     className = props.className,
     restProps = __rest(props, ["current", "errorStep", "steps", "direction", "children", "className"]);
   var prefixCls = "".concat($rcPrefixCls, "-stepper");
   //内置finish、error 图标
   var icons = {
-    finish: Icons["done"],
-    error: Icons["done"]
+    finish: Icons['done'],
+    error: Icons['done']
   };
   //步骤图标渲染
   var stepIconRender = function stepIconRender(_ref) {
     var node = _ref.node,
       status = _ref.status;
-    if (status === "finish") {
-      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons["done"]);
+    if (status === 'finish') {
+      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons['done']);
     }
     return node;
   };
@@ -93,20 +93,20 @@ var Stepper = function Stepper(props) {
   var renderStep = function renderStep() {
     if (!(steps === null || steps === void 0 ? void 0 : steps.length)) return children;
     return steps.map(function (item, index) {
-      var label = "";
-      var description = "";
+      var label = '';
+      var description = '';
       var icon = null;
       var isErr = index === errorStep;
-      if (typeof item === "string") {
+      if (typeof item === 'string') {
         label = item;
         icon = isErr ? jsx(CloseIcon, {
-          size: 'medium'
+          size: "medium"
         }) : Icons[index + 1];
-      } else if (_typeof(item) === "object") {
+      } else if (_typeof(item) === 'object') {
         label = item.label;
         description = item.description;
         icon = isErr ? jsx(CloseIcon, {
-          size: 'medium'
+          size: "medium"
         }) : item.icon || Icons[index + 1];
       }
       return jsx(Stepper.Step, {
@@ -116,7 +116,7 @@ var Stepper = function Stepper(props) {
         title: jsx(AutoTips, {
           children: label
         }),
-        status: index === errorStep ? "error" : undefined,
+        status: index === errorStep ? 'error' : undefined,
         icon: icon
       }, index);
     });

package/Styles/theme.scss

@@ -24,6 +24,7 @@ $bold: 700;
 $boxShadow: 0px 2px 8px 0px rgba(234, 236, 241, 1);
 $boxShadowLeft: inset -10px 0 10px -8px rgba(234, 236, 241, 1); // 表格固定列
 $boxShadowRight: inset 10px 0 10px -8px rgba(234, 236, 241, 1); // 表格固定列
+$boxShadowD3: 0px 2px 8px 0px rgba(212, 218, 227, 0.4); // 表格固定列
 $radius-sm: 2px;
 $radius: 4px;
 $radius-lg: 8px;

package/Switch/index.d.ts

@@ -1,14 +1,14 @@
-import React, { FunctionComponent, ReactNode } from "react";
-import { LabelTooltipProps } from "../Label";
-import { TooltipProps } from "../Tooltip";
-import "./index.scss";
+import React, { FunctionComponent, ReactNode } from 'react';
+import { LabelTooltipProps } from '../Label';
+import { TooltipProps } from '../Tooltip';
+import './index.scss';
 type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void;
 type SwitchClickEventHandler = SwitchChangeEventHandler;
 export interface SwitchProps {
     /**
      * 开关大小
      */
-    size?: "small" | "default";
+    size?: 'small' | 'default';
     /**
      * 类名
      */
@@ -84,11 +84,11 @@ export interface SwitchProps {
     /**
      * 标题位置
      */
-    labelPlacement?: "top" | "bottom" | "start" | "end";
+    labelPlacement?: 'top' | 'bottom' | 'start' | 'end';
     /**
      * 描述位置
      */
-    descPlacement?: "start" | "end";
+    descPlacement?: 'start' | 'end';
     /**
      * 辅助文本
      */