@para-ui/core 4.0.0-beta → 4.0.0-rc.1

package/TextEditor/index.d.ts

@@ -4,9 +4,9 @@
  * @description 基于wangEditor的富文本编辑器
  */
 import React, { ReactNode } from 'react';
-import { LabelTooltipProps } from "../Label";
+import { LabelTooltipProps } from '../Label';
 import { IDomEditor } from '@wangeditor/editor';
-import { HelperTextDetailProps } from "../HelperText";
+import { HelperTextDetailProps } from '../HelperText';
 import './index.scss';
 import '@wangeditor/editor/dist/css/style.css';
 type InsertFnType = (url: string, alt: string, href: string) => void;

package/TextEditor/index.js

@@ -7,6 +7,7 @@ import { i18nChangeLanguage } from '@wangeditor/editor';
 import HelperText from '../HelperText/index.js';
 import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
 import { UUID } from '@paraview/lib';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
@@ -17,38 +18,52 @@ import 'rc-tooltip/lib/placements';
 import 'clsx';
 import '@para-ui/icons/Forbid';
 import '@para-ui/icons/Help';
+import '@para-ui/core/GlobalContext';
 
 /**
  * @author xh
  * @date 2022/09/06 18:00
  * @description  存放富文本编辑器的一些默认配置
  */
-var TOOL_BAR_CONFIG = ["headerSelect", "blockquote", "|", "bold", "underline", "italic", {
-  key: "group-more-style",
-  title: "更多",
+var TOOL_BAR_CONFIG = ['headerSelect', 'blockquote', '|', 'bold', 'underline', 'italic', {
+  key: 'group-more-style',
+  title: '更多',
   iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
-  menuKeys: ["through", "code", "sup", "sub", "clearStyle"]
-}, "color", "bgColor", "|", "fontSize", "fontFamily", "lineHeight", "|", "bulletedList", "numberedList", "todo", {
-  key: "group-justify",
-  title: "对齐",
+  menuKeys: ['through', 'code', 'sup', 'sub', 'clearStyle']
+}, 'color', 'bgColor', '|', 'fontSize', 'fontFamily', 'lineHeight', '|', 'bulletedList', 'numberedList', 'todo', {
+  key: 'group-justify',
+  title: '对齐',
   iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
-  menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"]
+  menuKeys: ['justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify']
 }, {
-  key: "group-indent",
-  title: "缩进",
+  key: 'group-indent',
+  title: '缩进',
   iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
-  menuKeys: ["indent", "delIndent"]
-}, "|", "emotion", "insertLink", {
-  key: "group-image",
-  title: "图片",
+  menuKeys: ['indent', 'delIndent']
+}, '|', 'emotion', 'insertLink', {
+  key: 'group-image',
+  title: '图片',
   iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
-  menuKeys: ["insertImage", "uploadImage"]
+  menuKeys: ['insertImage', 'uploadImage']
 }, {
-  key: "group-video",
-  title: "视频",
+  key: 'group-video',
+  title: '视频',
   iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z"></path></svg>',
-  menuKeys: ["insertVideo", "uploadVideo"]
-}, "insertTable", "codeBlock", "divider", "|", "undo", "redo", "|", "fullScreen"];
+  menuKeys: ['insertVideo', 'uploadVideo']
+}, 'insertTable', 'codeBlock', 'divider', '|', 'undo', 'redo', '|', 'fullScreen'];
+
+var en = {
+  pleaseEnter: 'Please Enter'
+};
+
+var zh = {
+  pleaseEnter: '请输入内容'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
 
 var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-text-editor .w-e-max-length-info {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-text-editor .w-e-bar-item > button:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-text-editor .w-e-bar-item-menus-container .w-e-bar-item {\n  padding-left: 0;\n  padding-right: 0;\n  display: flex;\n}\n.paraui-v4-text-editor .w-e-bar-item-menus-container .w-e-bar-item > button {\n  flex: 1;\n  display: flex;\n  justify-content: flex-start;\n}\n.paraui-v4-text-editor .w-e-bar-item-menus-container .w-e-bar-item > button:hover {\n  background: rgb(247, 248, 250);\n  border-radius: 2px;\n}\n.paraui-v4-text-editor .w-e-full-screen-container {\n  z-index: 1000;\n}\n.paraui-v4-text-editor .text-editor-content {\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  padding: 1px 0;\n  background-color: #fff;\n}\n.paraui-v4-text-editor .text-editor-content > div:nth-child(1) {\n  border-bottom: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-text-editor .text-editor-content div[contenteditable=false] {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-text-editor .text-editor-content div[contenteditable=false]:hover {\n  border-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-text-editor .preview-mode > div:nth-child(1) {\n  border-bottom: none;\n}";
 styleInject(css_248z$1);
@@ -57,6 +72,7 @@ var css_248z = ":root,\n:host {\n  --w-e-textarea-bg-color: #fff;\n  --w-e-texta
 styleInject(css_248z);
 
 var TextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
+  var intl = useFormatMessage('TextEditor', localeJson);
   var style = props.style,
     _props$toolbarStyle = props.toolbarStyle,
     toolbarStyle = _props$toolbarStyle === void 0 ? {} : _props$toolbarStyle,
@@ -75,7 +91,9 @@ var TextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
     label = props.label,
     labelTooltip = props.labelTooltip,
     _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? '请输入内容' : _props$placeholder,
+    placeholder = _props$placeholder === void 0 ? intl({
+      id: 'pleaseEnter'
+    }) : _props$placeholder,
     onChange = props.onChange,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
@@ -230,12 +248,12 @@ var TextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
   /**
-  * 处理class
-  * @return {string}
-  */
+   * 处理class
+   * @return {string}
+   */
   var handClass = function handClass() {
-    var str = $prefixCls + '-text-editor';
-    if (className) str += ' ' + className;
+    var str = "".concat($prefixCls, "-text-editor");
+    if (className) str += " ".concat(className);
     return str;
   };
   /** 标题 */
@@ -243,7 +261,7 @@ var TextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
     var handLabelClass = function handLabelClass() {
       var str = 'text-editor-label';
       if (labelTooltip && labelTooltip.className) {
-        str += ' ' + labelTooltip.className;
+        str += " ".concat(labelTooltip.className);
       }
       return str;
     };
@@ -260,7 +278,7 @@ var TextEditor = /*#__PURE__*/forwardRef(function (props, ref) {
     style: style
   }, {
     children: [labelMemo, jsxs("div", Object.assign({
-      className: "text-editor-content ".concat(isPreview ? "preview-mode" : "")
+      className: "text-editor-content ".concat(isPreview ? 'preview-mode' : '')
     }, {
       children: [jsx(Toolbar, {
         editor: editor,

package/TextEditor/lang/en_US.d.ts

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

package/TextEditor/lang/index.d.ts

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

package/TextEditor/lang/zh_CN.d.ts

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

package/TextField/index.d.ts

@@ -6,7 +6,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { LabelTooltipProps } from '../Label';
 import { TooltipProps } from '../Tooltip';
-import { HelperTextDetailProps } from "../HelperText";
+import { HelperTextDetailProps } from '../HelperText';
 import './index.scss';
 export interface TextFieldProps extends HelperTextDetailProps {
     /** 样式class */

package/TextField/index.js

@@ -98,7 +98,7 @@ var TextField = function TextField(props) {
     onSelect = _a.onSelect,
     onClear = _a.onClear,
     otherProps = __rest(_a, ["className", "style", "size", "labelMode", "placeholder", "label", "labelTooltip", "disabled", "disabledTooltip", "multiline", "required", "labelSign", "rows", "error", "hideErrorDom", "helperText", "addonBefore", "addonAfter", "defaultValue", "value", "type", "onClickIcon", "rightIcon", "showRightIcon", "allowClear", "limitLength", "fetchSuggestions", "selectPopoverClass", "renderSelectItem", "showSelectName", "resize", "searchEmpty", "onBlur", "onFocus", "onChange", "onKeydown", "onKeyUp", "onEnter", "onClickAddonBefore", "onClickAddonAfter", "onSelect", "onClear"]);
-  var _useState = useState('text-field-select-content-' + UUID()),
+  var _useState = useState("text-field-select-content-".concat(UUID())),
     _useState2 = _slicedToArray(_useState, 1),
     classSearchOne = _useState2[0]; // 唯一class
   var _useState3 = useState(true),
@@ -158,12 +158,12 @@ var TextField = function TextField(props) {
   }, [isFocus, fetchSuggestions]);
   useEffect(function () {
     if (open) {
-      window.addEventListener("keydown", keydownCom);
+      window.addEventListener('keydown', keydownCom);
     } else {
-      window.removeEventListener("keydown", keydownCom);
+      window.removeEventListener('keydown', keydownCom);
     }
     return function () {
-      window.removeEventListener("keydown", keydownCom);
+      window.removeEventListener('keydown', keydownCom);
     };
   }, [open]);
   useEffect(function () {
@@ -231,7 +231,7 @@ var TextField = function TextField(props) {
       brotherDom = selectDom.querySelector('.text-field-select-content-item');
     }
     if (brotherDom) {
-      brotherDom.classList.add("text-field-select-content-item-keydown");
+      brotherDom.classList.add('text-field-select-content-item-keydown');
       domClientTop(brotherDom, selectDom);
     }
   };
@@ -255,7 +255,7 @@ var TextField = function TextField(props) {
    * @param e 键盘信息
    */
   var keydownCom = function keydownCom(e) {
-    var selectDom = document.querySelector('.' + classSearchOne);
+    var selectDom = document.querySelector(".".concat(classSearchOne));
     var currentDom = null;
     var keydownDom = selectDom.querySelector('.text-field-select-content-item-keydown');
     // 回车
@@ -269,7 +269,7 @@ var TextField = function TextField(props) {
     }
     if (keydownDom) {
       currentDom = keydownDom;
-      keydownDom.classList.remove("text-field-select-content-item-keydown");
+      keydownDom.classList.remove('text-field-select-content-item-keydown');
     }
     // 下
     if (e.keyCode === 40) {
@@ -373,7 +373,7 @@ var TextField = function TextField(props) {
   var handleClassPopover = function handleClassPopover() {
     var str = "".concat($prefixCls, "-text-field-select ").concat($prefixCls, "-scrollbar-small");
     if (size) str += " ".concat($prefixCls, "-text-field-select-").concat(size);
-    if (selectPopoverClass) str += ' ' + selectPopoverClass;
+    if (selectPopoverClass) str += " ".concat(selectPopoverClass);
     if (selectData.length > 0) str += " ".concat($prefixCls, "-text-field-select-data");
     return str;
   };
@@ -389,7 +389,7 @@ var TextField = function TextField(props) {
       children: IsNaN(limitLength) && jsx("span", Object.assign({
         className: "length-limit"
       }, {
-        children: (valueCom ? valueCom.toString().length : 0) + '/' + limitLength
+        children: "".concat(valueCom ? valueCom.toString().length : 0, "/").concat(limitLength)
       }))
     });
   }, [limitLength, valueCom]);
@@ -498,7 +498,7 @@ var TextField = function TextField(props) {
     var handSelectContentClass = function handSelectContentClass() {
       var str = 'text-field-select-content';
       if (selectLoading) str += ' text-field-select-content-loading';
-      if (classSearchOne) str += ' ' + classSearchOne;
+      if (classSearchOne) str += " ".concat(classSearchOne);
       return str;
     };
     var handText = function handText(item) {
@@ -510,7 +510,7 @@ var TextField = function TextField(props) {
     return jsxs("div", Object.assign({
       className: handSelectContentClass(),
       style: {
-        width: (selectPosDom && selectPosDom.current ? selectPosDom.current.offsetWidth : 0) + 'px'
+        width: "".concat(selectPosDom && selectPosDom.current ? selectPosDom.current.offsetWidth : 0, "px")
       }
     }, {
       children: [selectData && selectData.map(function (item, index) {
@@ -547,7 +547,7 @@ var TextField = function TextField(props) {
       var handLabelClass = function handLabelClass() {
         var str = 'text-field-label';
         if (labelTooltip && labelTooltip.className) {
-          str += ' ' + labelTooltip.className;
+          str += " ".concat(labelTooltip.className);
         }
         return str;
       };
@@ -564,7 +564,7 @@ var TextField = function TextField(props) {
   // 处理class
   var handClass = function handClass() {
     var str = "".concat($prefixCls, "-text-field");
-    if (className) str += ' ' + className;
+    if (className) str += " ".concat(className);
     if (size && !multiline) str += " ".concat($prefixCls, "-text-field-").concat(size);
     if (error) str += " ".concat($prefixCls, "-text-field-error");
     if (isFocus) str += " ".concat($prefixCls, "-text-field-focus");

package/TimePicker/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Dayjs } from 'dayjs';
 import { PickerTimeProps, RangePickerTimeProps } from '../DatePicker/generatePicker';
-import { TooltipProps } from "../Tooltip";
+import { TooltipProps } from '../Tooltip';
 export interface TimePickerLocale {
     placeholder?: string;
     rangePlaceholder?: [string, string];

package/TimePicker/index.js

@@ -29,6 +29,7 @@ import '../_verture/defineProperty-1d116156.js';
 import '@para-ui/icons/Close';
 import '@para-ui/icons/EditOutline';
 import '../_verture/toConsumableArray-8f4c9589.js';
+import '../_verture/tinycolor-ece3542d.js';
 import '@para-ui/icons/Plus';
 import 'rc-picker';
 import '@para-ui/icons/CloseCircleF';
@@ -72,7 +73,7 @@ var TimePicker = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var renderPicker = function renderPicker() {
     var component = jsx(InternalTimePicker, Object.assign({}, restProps, {
       disabled: disabled,
-      picker: 'time',
+      picker: "time",
       dropdownClassName: popupClassName,
       mode: undefined,
       ref: ref,

package/Timeline/TimelineItem.d.ts

@@ -3,7 +3,7 @@
  * @date 2022/6/9 下午7:27
  * @description
  */
-import React, { ReactNode } from "react";
+import React, { ReactNode } from 'react';
 export interface TimelineItemProps {
     /** item cls */
     className?: string;

package/Timeline/index.d.ts

@@ -3,9 +3,9 @@
  * @date 2022/6/9 下午7:21
  * @description Timeline
  */
-import React from "react";
-import { TimelineItemProps } from "./TimelineItem";
-import "./index.scss";
+import React from 'react';
+import { TimelineItemProps } from './TimelineItem';
+import './index.scss';
 export interface TimelineProps {
     /** cls */
     className?: string;
@@ -18,8 +18,8 @@ export interface TimelineProps {
     /** 节点排序 */
     reverse?: boolean;
     /** 改变时间轴和内容的相对位置 */
-    mode?: "left" | "alternate" | "right" | "double";
-    align?: "left" | "alternate" | "right" | "double";
+    mode?: 'left' | 'alternate' | 'right' | 'double';
+    align?: 'left' | 'alternate' | 'right' | 'double';
     /** timeline item */
     data?: TimelineItemProps[];
     [name: string]: any;

package/Timeline/index.js

@@ -63,13 +63,13 @@ var Timeline = function Timeline(props) {
     _props$reverse = props.reverse,
     reverse = _props$reverse === void 0 ? false : _props$reverse,
     _props$mode = props.mode,
-    mode = _props$mode === void 0 ? "left" : _props$mode,
+    mode = _props$mode === void 0 ? 'left' : _props$mode,
     align = props.align,
     data = props.data,
     restProps = __rest(props, ["pending", "pendingDot", "children", "className", "reverse", "mode", "align", "data"]);
   var prefixCls = "".concat($prefixCls, "-timeline");
   var innerMode = align !== null && align !== void 0 ? align : mode; //时间轴和内容相对位置
-  var pendingNode = typeof pending === "boolean" ? null : pending; //是否有幽灵节点
+  var pendingNode = typeof pending === 'boolean' ? null : pending; //是否有幽灵节点
   //pending节点项
   var pendingItem = pending ? jsx(TimelineItem, Object.assign({
     pending: !!pending,
@@ -86,16 +86,16 @@ var Timeline = function Timeline(props) {
   //position cls
   var getPositionCls = function getPositionCls(ele, idx) {
     var _a, _b, _c;
-    if (innerMode === "alternate") {
-      if (((_a = ele === null || ele === void 0 ? void 0 : ele.props) === null || _a === void 0 ? void 0 : _a.position) === "right") return "".concat($rcPrefixCls, "-timeline-item-right");
-      if (((_b = ele === null || ele === void 0 ? void 0 : ele.props) === null || _b === void 0 ? void 0 : _b.position) === "left") return "".concat($rcPrefixCls, "-timeline-item-left");
+    if (innerMode === 'alternate') {
+      if (((_a = ele === null || ele === void 0 ? void 0 : ele.props) === null || _a === void 0 ? void 0 : _a.position) === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+      if (((_b = ele === null || ele === void 0 ? void 0 : ele.props) === null || _b === void 0 ? void 0 : _b.position) === 'left') return "".concat($rcPrefixCls, "-timeline-item-left");
       return idx % 2 === 0 ? "".concat($rcPrefixCls, "-timeline-item-left") : "".concat($rcPrefixCls, "-timeline-item-right");
     }
-    if (innerMode === "left") return "".concat($rcPrefixCls, "-timeline-item-left");
-    if (innerMode === "right") return "".concat($rcPrefixCls, "-timeline-item-right");
-    if (innerMode === "double") return "".concat($rcPrefixCls, "-timeline-item-double");
-    if (((_c = ele === null || ele === void 0 ? void 0 : ele.props) === null || _c === void 0 ? void 0 : _c.position) === "right") return "".concat($rcPrefixCls, "-timeline-item-right");
-    return "";
+    if (innerMode === 'left') return "".concat($rcPrefixCls, "-timeline-item-left");
+    if (innerMode === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+    if (innerMode === 'double') return "".concat($rcPrefixCls, "-timeline-item-double");
+    if (((_c = ele === null || ele === void 0 ? void 0 : ele.props) === null || _c === void 0 ? void 0 : _c.position) === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+    return '';
   };
   //实际渲染项
   var truthyItems = timeLineItems.filter(function (item) {
@@ -104,8 +104,8 @@ var Timeline = function Timeline(props) {
   var itemsCount = React__default.Children.count(truthyItems);
   var lastCls = "".concat($rcPrefixCls, "-timeline-item-last");
   var items = React__default.Children.map(truthyItems, function (ele, idx) {
-    var pendingClass = idx === itemsCount - 2 ? lastCls : "";
-    var readyClass = idx === itemsCount - 1 ? lastCls : "";
+    var pendingClass = idx === itemsCount - 2 ? lastCls : '';
+    var readyClass = idx === itemsCount - 1 ? lastCls : '';
     return /*#__PURE__*/React__default.cloneElement(ele, {
       className: clsx([ele.props.className, !reverse && !!pending ? pendingClass : readyClass, getPositionCls(ele, idx)])
     });
@@ -129,8 +129,8 @@ var Timeline = function Timeline(props) {
         disabled = _item$disabled === void 0 ? false : _item$disabled,
         className = item.className,
         label = item.label;
-      var pendingClass = idx === itemsCount - 2 ? lastCls : "";
-      var readyClass = idx === itemsCount - 1 ? lastCls : "";
+      var pendingClass = idx === itemsCount - 2 ? lastCls : '';
+      var readyClass = idx === itemsCount - 1 ? lastCls : '';
       return jsx(TimelineItem, Object.assign({
         label: innerMode === 'double' && label,
         dot: dotIcon,

package/Title/index.d.ts

@@ -3,8 +3,8 @@
  * @date 2022/8/11 2:54 PM
  * @description 标题
  */
-import React, { FC, ReactNode } from "react";
-import "./index.scss";
+import React, { FC, ReactNode } from 'react';
+import './index.scss';
 export interface TitleProps {
     /** 标题 **/
     title: ReactNode;
@@ -13,13 +13,15 @@ export interface TitleProps {
      */
     titleTooltip?: ReactNode;
     /** 帮组提示方向 */
-    placement?: "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+    placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
     /** 提示箭头 */
     arrow?: boolean;
     /** 提示信息icon */
     titoleTooltipIcon?: ReactNode;
     /** 折叠内容 */
     collapseContent?: ReactNode;
+    /** 折叠容器样式 */
+    collapseClassName?: string;
     /** 副标题 **/
     subTitle?: ReactNode;
     /** 图标 **/
@@ -32,7 +34,7 @@ export interface TitleProps {
         onClick?: React.MouseEventHandler<HTMLElement>;
     };
     /** 尺寸，仅在 icon 存在时有效 **/
-    size?: "small" | "medium" | "large";
+    size?: 'small' | 'medium' | 'large';
     /** cls */
     className?: string;
     /** style */

package/Title/index.js

@@ -18,7 +18,7 @@ import '@para-ui/icons/Help';
 import 'rc-collapse';
 import '@para-ui/icons/Right';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/11 2:55 PM\n* @description 标题\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-title-collapse {\n  border-bottom: none;\n}\n.paraui-v4-title-collapse > .component-collapse-item {\n  border-top: none;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header {\n  flex-direction: row-reverse;\n  justify-content: space-between;\n  padding: 0;\n  padding-right: 16px;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header .paraui-v4-title-content {\n  max-width: calc(100% - 32px);\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header .collapse-svg-box {\n  color: rgb(29, 33, 38);\n  margin-right: 0;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover {\n  position: relative;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover > div {\n  z-index: 1;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover > .collapse-svg-box:hover {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover .title-link:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover::after {\n  position: absolute;\n  background-color: rgb(247, 248, 250);\n  content: \"\";\n  width: 100%;\n  height: calc(100% + 4px);\n  left: -10px;\n  border-radius: 4px;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-content {\n  margin-top: 20px;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-content > .component-collapse-content-box {\n  padding-left: 20px;\n}\n\n.paraui-v4-title .paraui-v4-title-content {\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n}\n.paraui-v4-title .paraui-v4-title-content .title-ink {\n  width: 4px;\n  height: 14px;\n  background-color: rgb(46, 101, 230);\n  border-radius: 2px;\n}\n.paraui-v4-title .paraui-v4-title-content .title-icon {\n  display: inline-flex;\n}\n.paraui-v4-title .paraui-v4-title-content .title-text {\n  margin-left: 8px;\n  font-size: 14px;\n  font-weight: 700;\n  color: rgb(29, 33, 38);\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n}\n.paraui-v4-title .paraui-v4-title-content .title-text .paraui-v4-help {\n  line-height: 11px;\n  font-size: 14px;\n  margin-left: 4px;\n}\n.paraui-v4-title .paraui-v4-title-content .title-subtext {\n  margin-left: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-title .paraui-v4-title-content .title-link {\n  margin-left: 10px;\n  text-decoration: none;\n  outline: none;\n  font-size: 14px;\n  font-weight: 400;\n  white-space: nowrap;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-large .title-icon svg {\n  font-size: 30px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-large .title-text {\n  font-size: 18px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-medium .title-icon svg {\n  font-size: 24px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-medium .title-text {\n  font-size: 500;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-small .title-icon svg {\n  font-size: 20px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-small .title-text {\n  margin-left: 4px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/11 2:55 PM\n* @description 标题\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-title-collapse {\n  border-bottom: none;\n}\n.paraui-v4-title-collapse > .component-collapse-item {\n  border-top: none;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header {\n  flex-direction: row-reverse;\n  justify-content: space-between;\n  padding: 0;\n  padding-right: 16px;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header .paraui-v4-title-content {\n  max-width: calc(100% - 32px);\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header .collapse-svg-box {\n  color: rgb(29, 33, 38);\n  margin-right: 0;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover {\n  position: relative;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover > div {\n  z-index: 1;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover > .collapse-svg-box:hover svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover .title-link:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-header:hover::after {\n  position: absolute;\n  background-color: rgb(247, 248, 250);\n  content: \"\";\n  width: 100%;\n  height: calc(100% + 4px);\n  left: -10px;\n  border-radius: 4px;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-content {\n  margin-top: 20px;\n}\n.paraui-v4-title-collapse > .component-collapse-item > .component-collapse-content > .component-collapse-content-box {\n  padding-left: 0px;\n  padding-right: 0px;\n}\n\n.paraui-v4-title .paraui-v4-title-content {\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n}\n.paraui-v4-title .paraui-v4-title-content .title-ink {\n  width: 4px;\n  height: 14px;\n  background-color: rgb(46, 101, 230);\n  border-radius: 2px;\n}\n.paraui-v4-title .paraui-v4-title-content .title-icon {\n  display: inline-flex;\n}\n.paraui-v4-title .paraui-v4-title-content .title-text {\n  margin-left: 8px;\n  font-size: 14px;\n  font-weight: 700;\n  color: rgb(29, 33, 38);\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n}\n.paraui-v4-title .paraui-v4-title-content .title-text .paraui-v4-help {\n  line-height: 11px;\n  font-size: 14px;\n  margin-left: 4px;\n}\n.paraui-v4-title .paraui-v4-title-content .title-subtext {\n  margin-left: 10px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-title .paraui-v4-title-content .title-link {\n  margin-left: 10px;\n  text-decoration: none;\n  outline: none;\n  font-size: 14px;\n  font-weight: 400;\n  white-space: nowrap;\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-title .paraui-v4-title-content .title-link:hover {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-large .title-icon svg {\n  font-size: 30px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-large .title-text {\n  font-size: 18px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-medium .title-icon svg {\n  font-size: 24px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-medium .title-text {\n  font-size: 16px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-small .title-icon svg {\n  font-size: 20px;\n}\n.paraui-v4-title .paraui-v4-title-content.paraui-v4-title-content-small .title-text {\n  margin-left: 4px;\n}";
 styleInject(css_248z);
 
 var Panel = Collapse.Panel;
@@ -31,8 +31,9 @@ var Title = function Title(props) {
     icon = props.icon,
     link = props.link,
     _props$size = props.size,
-    size = _props$size === void 0 ? "medium" : _props$size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
     className = props.className,
+    collapseClassName = props.collapseClassName,
     titleTooltip = props.titleTooltip,
     titoleTooltipIcon = props.titoleTooltipIcon,
     placement = props.placement,
@@ -40,7 +41,7 @@ var Title = function Title(props) {
     style = props.style;
   var titleTextRef = useRef(null);
   var linkTextRef = useRef(null);
-  var _useState = useState("calc(100% - 20px)"),
+  var _useState = useState('calc(100% - 20px)'),
     _useState2 = _slicedToArray(_useState, 2),
     descWith = _useState2[0],
     setDescWith = _useState2[1];
@@ -56,6 +57,9 @@ var Title = function Title(props) {
     var linkWidth = ((_b = linkTextRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) || 0;
     calcDescWidth(titleWidth, linkWidth);
   }, [title, subTitle, link, collapseContent]);
+  var cloCls = function cloCls() {
+    return clsx("".concat($prefixCls, "-title-collapse"), collapseClassName);
+  };
   var titleContent = function titleContent() {
     return jsxs("div", Object.assign({
       className: makeCls,
@@ -89,7 +93,7 @@ var Title = function Title(props) {
         })
       })), link && jsx("a", Object.assign({
         className: "title-link",
-        target: link.target || "_blank",
+        target: link.target || '_blank',
         href: link.href,
         onClick: link.onClick,
         ref: linkTextRef
@@ -102,7 +106,7 @@ var Title = function Title(props) {
     className: "".concat($prefixCls, "-title")
   }, {
     children: collapseContent ? jsx(Collapse, Object.assign({
-      className: "".concat($prefixCls, "-title-collapse")
+      className: cloCls()
     }, {
       children: jsx(Panel, Object.assign({
         header: titleContent()

package/ToggleButton/ToggleButtonGroup.d.ts

@@ -3,7 +3,7 @@
  * @date 2021/11/23 上午11:17
  * @description toggle button group
  */
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react';
 import './index.scss';
 export type ToggleButtonItemProps = {
     label: string;

package/ToggleButton/index.d.ts

@@ -3,7 +3,7 @@
  * @date 2021/11/23 上午9:44
  * @description toggleButton
  */
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent } from 'react';
 import ToggleButtonGroup, { ToggleButtonGroupProps, ToggleButtonItemProps } from './ToggleButtonGroup';
 import './index.scss';
 export interface ToggleButtonProps {
@@ -31,6 +31,10 @@ export interface ToggleButtonProps {
      * 是否选中
      */
     selected?: boolean;
+    /**
+     * 是否单选
+     */
+    exclusive?: boolean;
     /**
      * value
      */