@para-ui/core 3.0.1 → 3.0.3

package/Timeline/index.js

@@ -3,6 +3,7 @@ import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import clsx from 'clsx';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
 var TimelineItem = function TimelineItem(props) {
@@ -18,7 +19,7 @@ var TimelineItem = function TimelineItem(props) {
       children = props.children,
       restProps = __rest(props, ["className", "color", "dot", "pending", "position", "label", "children"]);
 
-  var prefixCls = 'paraui-timeline'; //item cls
+  var prefixCls = "".concat($rcPrefixCls, "-timeline"); //item cls
 
   var itemClassName = clsx((_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-item"), true), _defineProperty(_clsx, "".concat(prefixCls, "-item-pending"), pending), _clsx), className); //dot cls
 
@@ -48,7 +49,7 @@ var TimelineItem = function TimelineItem(props) {
   }));
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/9 下午8:00\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-timeline {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n}\n\n.paraui-timeline-item {\n  position: relative;\n  margin: 0;\n  min-height: 70px;\n  padding-bottom: 20px;\n  font-size: 14px;\n  list-style: none;\n}\n.paraui-timeline-item-disabled .paraui-timeline-item-head:not(.paraui-timeline-item-head-custom) {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-timeline-item-disabled .paraui-timeline-item-head .paraui-icon {\n  color: rgba(171, 176, 185, 0.4);\n}\n.paraui-timeline-item-disabled .paraui-timeline-item-content {\n  color: rgba(46, 55, 67, 0.4);\n}\n\n.paraui-timeline-item-tail {\n  position: absolute;\n  top: 16px;\n  bottom: 8px;\n  left: 3.5px;\n  border-left: 1px solid rgba(171, 176, 185, 0.2);\n}\n\n.paraui-timeline-item-pending .paraui-timeline-item-head {\n  font-size: 12px;\n  background-color: transparent;\n}\n\n.paraui-timeline-item-pending .paraui-timeline-item-tail {\n  display: none;\n}\n\n.paraui-timeline-item-head {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: rgb(54, 102, 214);\n  border-radius: 100px;\n}\n\n.paraui-timeline-item-head-custom {\n  position: absolute;\n  top: 5.5px;\n  left: 5px;\n  width: auto;\n  height: auto;\n  margin-top: 0;\n  padding: 3px 1px;\n  line-height: 1;\n  text-align: center;\n  border: 0;\n  border-radius: 0;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n\n.paraui-timeline-item-content {\n  position: relative;\n  top: -7px;\n  margin: 0 0 0 22px;\n  word-break: break-word;\n}\n\n.paraui-timeline-item-last > .paraui-timeline-item-tail {\n  display: none;\n}\n\n.paraui-timeline-item-last > .paraui-timeline-item-content {\n  min-height: 48px;\n}\n\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-tail,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-tail,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-tail,\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-head,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-head,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-head,\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-head-custom,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-head-custom,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-head-custom {\n  left: 50%;\n}\n\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-head,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-head,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-head {\n  margin-left: -4px;\n}\n\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-head-custom,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-head-custom,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-head-custom {\n  margin-left: 1px;\n}\n\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-left .paraui-timeline-item-content,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-left .paraui-timeline-item-content,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-left .paraui-timeline-item-content {\n  left: calc(50% - 4px);\n  width: calc(50% - 14px);\n  text-align: left;\n}\n\n.paraui-timeline.paraui-timeline-alternate .paraui-timeline-item-right .paraui-timeline-item-content,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-right .paraui-timeline-item-content,\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-right .paraui-timeline-item-content {\n  width: calc(50% - 12px);\n  margin: 0;\n  text-align: right;\n}\n\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-right .paraui-timeline-item-tail,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-right .paraui-timeline-item-head,\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-right .paraui-timeline-item-head-custom {\n  left: calc(100% - 4px - 2px);\n}\n\n.paraui-timeline.paraui-timeline-right .paraui-timeline-item-right .paraui-timeline-item-content {\n  width: calc(100% - 18px);\n}\n\n.paraui-timeline.paraui-timeline-pending .paraui-timeline-item-last .paraui-timeline-item-tail {\n  display: block;\n  height: calc(100% - 14px);\n  border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-timeline.paraui-timeline-reverse .paraui-timeline-item-last .paraui-timeline-item-tail {\n  display: none;\n}\n\n.paraui-timeline.paraui-timeline-reverse .paraui-timeline-item-pending .paraui-timeline-item-tail {\n  top: 15px;\n  display: block;\n  height: calc(100% - 15px);\n  border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-timeline.paraui-timeline-reverse .paraui-timeline-item-pending .paraui-timeline-item-content {\n  min-height: 48px;\n}\n\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-label {\n  position: absolute;\n  top: -7.001px;\n  width: calc(50% - 12px);\n  text-align: right;\n}\n\n.paraui-timeline.paraui-timeline-label .paraui-timeline-item-right .paraui-timeline-item-label {\n  left: calc(50% + 14px);\n  width: calc(50% - 14px);\n  text-align: left;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/6/9 下午8:00\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-timeline {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item {\n  position: relative;\n  margin: 0;\n  min-height: 70px;\n  padding-bottom: 20px;\n  font-size: 14px;\n  list-style: none;\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head:not(.component-timeline-item-head-custom) {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-head svg {\n  color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-disabled .component-timeline-item-content {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-timeline .component-timeline-item-tail {\n  position: absolute;\n  top: 16px;\n  bottom: 8px;\n  left: 3.5px;\n  border-left: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-head {\n  font-size: 12px;\n  background-color: transparent;\n}\n.paraui-v3-timeline .component-timeline-item-pending .component-timeline-item-tail {\n  display: none;\n}\n.paraui-v3-timeline .component-timeline-item-head {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: rgb(54, 102, 214);\n  border-radius: 100px;\n}\n.paraui-v3-timeline .component-timeline-item-head-custom {\n  position: absolute;\n  top: 5.5px;\n  left: 5px;\n  width: auto;\n  height: auto;\n  margin-top: 0;\n  padding: 3px 1px;\n  line-height: 1;\n  text-align: center;\n  border: 0;\n  border-radius: 0;\n  background-color: transparent;\n  transform: translate(-50%, -50%);\n}\n.paraui-v3-timeline .component-timeline-item-content {\n  position: relative;\n  top: -7px;\n  margin: 0 0 0 22px;\n  word-break: break-word;\n}\n.paraui-v3-timeline .component-timeline-item-last > .component-timeline-item-tail {\n  display: none;\n}\n.paraui-v3-timeline .component-timeline-item-last > .component-timeline-item-content {\n  min-height: 48px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head-custom {\n  left: 50%;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head {\n  margin-left: -4px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-head-custom,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-head-custom {\n  margin-left: 1px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-left .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-left .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-left .component-timeline-item-content {\n  left: calc(50% - 4px);\n  width: calc(50% - 14px);\n  text-align: left;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-alternate .component-timeline-item-right .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-content,\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-right .component-timeline-item-content {\n  width: calc(50% - 12px);\n  margin: 0;\n  text-align: right;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-tail,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-head,\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-head-custom {\n  left: calc(100% - 4px - 2px);\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-right .component-timeline-item-right .component-timeline-item-content {\n  width: calc(100% - 18px);\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-pending .component-timeline-item-last .component-timeline-item-tail {\n  display: block;\n  height: calc(100% - 14px);\n  border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-last .component-timeline-item-tail {\n  display: none;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-pending .component-timeline-item-tail {\n  top: 15px;\n  display: block;\n  height: calc(100% - 15px);\n  border-left: 2px dotted #f0f0f0;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-reverse .component-timeline-item-pending .component-timeline-item-content {\n  min-height: 48px;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-label {\n  position: absolute;\n  top: -7.001px;\n  width: calc(50% - 12px);\n  text-align: right;\n}\n\n.paraui-v3-timeline.paraui-v3-timeline-label .component-timeline-item-right .component-timeline-item-label {\n  left: calc(50% + 14px);\n  width: calc(50% - 14px);\n  text-align: left;\n}";
 styleInject(css_248z);
 
 var Timeline = function Timeline(props) {
@@ -67,7 +68,7 @@ var Timeline = function Timeline(props) {
       data = props.data,
       restProps = __rest(props, ["pending", "pendingDot", "children", "className", "reverse", "mode", "align", "data"]);
 
-  var prefixCls = 'paraui-timeline';
+  var prefixCls = "".concat($prefixCls, "-timeline");
   var innerMode = align !== null && align !== void 0 ? align : mode; //时间轴和内容相对位置
 
   var pendingNode = typeof pending === 'boolean' ? null : pending; //是否有幽灵节点
@@ -92,14 +93,14 @@ var Timeline = function Timeline(props) {
     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(prefixCls, "-item-right");
-      if (((_b = ele === null || ele === void 0 ? void 0 : ele.props) === null || _b === void 0 ? void 0 : _b.position) === 'left') return "".concat(prefixCls, "-item-left");
-      return idx % 2 === 0 ? "".concat(prefixCls, "-item-left") : "".concat(prefixCls, "-item-right");
+      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(prefixCls, "-item-left");
-    if (innerMode === 'right') return "".concat(prefixCls, "-item-right");
-    if (((_c = ele === null || ele === void 0 ? void 0 : ele.props) === null || _c === void 0 ? void 0 : _c.position) === 'right') return "".concat(prefixCls, "-item-right");
+    if (innerMode === 'left') return "".concat($rcPrefixCls, "-timeline-item-left");
+    if (innerMode === 'right') return "".concat($rcPrefixCls, "-timeline-item-right");
+    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 '';
   }; //实际渲染项
 
@@ -108,7 +109,7 @@ var Timeline = function Timeline(props) {
     return !!item;
   });
   var itemsCount = React__default.Children.count(truthyItems);
-  var lastCls = "".concat(prefixCls, "-item-last");
+  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 : '';
@@ -128,7 +129,7 @@ var Timeline = function Timeline(props) {
   var renderItems = function renderItems() {
     if (!(data === null || data === void 0 ? void 0 : data.length)) return items;
     var itemsCount = data.length;
-    var lastCls = "".concat(prefixCls, "-item-last");
+    var lastCls = "".concat($rcPrefixCls, "-timeline-item-last");
     return data.map(function (item, idx) {
       var dotIcon = item.dotIcon,
           content = item.content,
@@ -139,7 +140,7 @@ var Timeline = function Timeline(props) {
       var readyClass = idx === itemsCount - 1 ? lastCls : '';
       return jsx(TimelineItem, Object.assign({
         dot: dotIcon,
-        className: clsx([className, _defineProperty({}, "".concat(prefixCls, "-item-disabled"), disabled), !reverse && !!pending ? pendingClass : readyClass, getPositionCls(null, idx)])
+        className: clsx([className, _defineProperty({}, "".concat($rcPrefixCls, "-timeline-item-disabled"), disabled), !reverse && !!pending ? pendingClass : readyClass, getPositionCls(null, idx)])
       }, {
         children: content
       }));

package/Title/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @author Hanz
+ * @date 2022/8/11 2:54 PM
+ * @description 标题
+ */
+import React, { FC, ReactNode } from 'react';
+import './index.scss';
+interface TitleProps {
+    /** 标题 **/
+    title: ReactNode;
+    /** 副标题 **/
+    subTitle?: ReactNode;
+    /** 图标 **/
+    icon?: ReactNode;
+    /** 链接 **/
+    link?: {
+        href: string;
+        text: ReactNode;
+        target?: string;
+        onClick?: React.MouseEventHandler<HTMLElement>;
+    };
+    /** 尺寸，仅在 icon 存在时有效 **/
+    size?: 'small' | 'medium' | 'large';
+    /** cls */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+}
+export declare const Title: FC<TitleProps>;
+export default Title;

package/Title/index.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/11 2:55 PM\n* @description 标题\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-title {\n  display: flex;\n  align-items: center;\n  line-height: 20px;\n}\n.paraui-v3-title .paraui-v3-title-ink {\n  width: 4px;\n  height: 14px;\n  background-color: rgb(54, 102, 214);\n  border-radius: 2px;\n}\n.paraui-v3-title .paraui-v3-title-icon {\n  display: inline-flex;\n}\n.paraui-v3-title .paraui-v3-title-text {\n  margin-left: 8px;\n  font-size: 14px;\n  font-weight: 700;\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-title .paraui-v3-title-subtext {\n  margin-left: 12px;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-title .paraui-v3-title-link {\n  margin-left: 12px;\n  text-decoration: none;\n  outline: none;\n  font-size: 14px;\n  font-weight: 400;\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-title.paraui-v3-title-large .paraui-v3-title-icon svg {\n  font-size: 30px;\n}\n.paraui-v3-title.paraui-v3-title-large .paraui-v3-title-text {\n  font-size: 18px;\n}\n.paraui-v3-title.paraui-v3-title-medium .paraui-v3-title-icon svg {\n  font-size: 24px;\n}\n.paraui-v3-title.paraui-v3-title-medium .paraui-v3-title-text {\n  font-size: 16px;\n}\n.paraui-v3-title.paraui-v3-title-small .paraui-v3-title-icon svg {\n  font-size: 20px;\n}\n.paraui-v3-title.paraui-v3-title-small .paraui-v3-title-text {\n  margin-left: 4px;\n}";
+styleInject(css_248z);
+
+var Title = function Title(props) {
+  var title = props.title,
+      subTitle = props.subTitle,
+      icon = props.icon,
+      link = props.link,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'medium' : _props$size,
+      className = props.className,
+      style = props.style; //cls
+
+  var makeCls = clsx("".concat($prefixCls, "-title"), className, icon && "".concat($prefixCls, "-title-").concat(size));
+  return jsxs("div", Object.assign({
+    className: makeCls,
+    style: style
+  }, {
+    children: [icon ? jsx("span", Object.assign({
+      className: "".concat($prefixCls, "-title-icon")
+    }, {
+      children: icon
+    })) : jsx("span", {
+      className: "".concat($prefixCls, "-title-ink")
+    }), jsx("span", Object.assign({
+      className: "".concat($prefixCls, "-title-text")
+    }, {
+      children: title
+    })), subTitle && jsx("span", Object.assign({
+      className: "".concat($prefixCls, "-title-subtext")
+    }, {
+      children: subTitle
+    })), link && jsx("a", Object.assign({
+      className: "".concat($prefixCls, "-title-link"),
+      target: link.target || '_blank',
+      href: link.href,
+      onClick: link.onClick
+    }, {
+      children: link.text
+    }))]
+  }));
+};
+
+export { Title, Title as default };

package/ToggleButton/index.js

@@ -1,3 +1,4 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
 import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
 import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
@@ -6,6 +7,7 @@ import { Button } from '../Button/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { UUID } from '@paraview/lib';
 import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/typeof-498dd2b1.js';
 import '@para-ui/icons/LoadingF';
@@ -18,7 +20,7 @@ import '@para-ui/core/GlobalContext';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/23 上午9:50\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-toggle-button {\n  color: rgb(46, 55, 67);\n}\n.paraui-toggle-button.paraui-button {\n  height: 30px;\n  padding: 0 20px;\n  line-height: 30px;\n}\n.paraui-toggle-button-wrap {\n  display: inline-block;\n}\n.paraui-toggle-button-text {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-toggle-button-selected {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-toggle-button-selected:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-toggle-button-selected[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-toggle-button-selected[disabled]::before {\n  border-color: rgba(46, 55, 67, 0.4);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-toggle-button-selected::before {\n  content: \" \";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border: 10px solid rgb(54, 102, 214);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-toggle-button-selected::after {\n  content: \" \";\n  position: absolute;\n  bottom: 2px;\n  right: 3px;\n  width: 4px;\n  height: 8px;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  border-radius: 2px;\n  transform: rotate(45deg);\n}\n.paraui-toggle-button-disabled.paraui-toggle-button {\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n\n.paraui-togglebutton-group {\n  display: flex;\n  flex-flow: row wrap;\n}\n.paraui-togglebutton-group .paraui-toggle-button {\n  margin: 0 10px;\n  line-height: 30px;\n}\n.paraui-togglebutton-group--text .paraui-toggle-button {\n  margin: 0;\n  padding: 0 16px;\n  line-height: 30px;\n}\n.paraui-togglebutton-group--text .paraui-toggle-button:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-togglebutton-group--text .paraui-toggle-button[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-togglebutton-group--text .paraui-toggle-button ~ .paraui-toggle-button:before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-togglebutton-group--text .paraui-toggle-button-selected {\n  color: rgb(54, 102, 214);\n  font-weight: 700;\n}\n.paraui-togglebutton-group--text .paraui-toggle-button-selected:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-togglebutton-group--text .paraui-toggle-button-selected:first-child:before {\n  display: none;\n}\n.paraui-togglebutton-group--text .paraui-toggle-button-selected:not(:first-child)::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n  border: 0;\n}\n.paraui-togglebutton-group--text .paraui-toggle-button-selected::after {\n  display: none;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/23 上午9:50\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-toggle-button.paraui-v3-button {\n  height: 30px;\n  padding: 0 20px;\n  color: rgb(46, 55, 67);\n  line-height: 30px;\n}\n.paraui-v3-toggle-button.paraui-v3-button:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button-wrap {\n  display: inline-block;\n}\n.paraui-v3-toggle-button .toggle-button-text {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected[disabled]::before {\n  border-color: rgba(46, 55, 67, 0.4);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected::before {\n  content: \" \";\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  border: 10px solid rgb(54, 102, 214);\n  border-top-color: transparent;\n  border-left-color: transparent;\n}\n.paraui-v3-toggle-button.paraui-v3-toggle-button-selected::after {\n  content: \" \";\n  position: absolute;\n  bottom: 2px;\n  right: 3px;\n  width: 4px;\n  height: 8px;\n  border: 2px solid rgb(255, 255, 255);\n  border-top: 0;\n  border-left: 0;\n  border-radius: 2px;\n  transform: rotate(45deg);\n}\n.paraui-v3-toggle-button-disabled.paraui-v3-toggle-button {\n  color: rgba(46, 55, 67, 0.4);\n  pointer-events: auto;\n  cursor: not-allowed;\n}\n.paraui-v3-toggle-button-disabled.paraui-v3-toggle-button:hover {\n  color: rgba(46, 55, 67, 0.4);\n}\n\n.paraui-v3-togglebutton-group {\n  display: flex;\n  flex-flow: row wrap;\n}\n.paraui-v3-togglebutton-group .paraui-v3-toggle-button {\n  margin: 0 10px;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button {\n  margin: 0;\n  padding: 0 16px;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button:hover {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button ~ .paraui-v3-toggle-button::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected {\n  color: rgb(54, 102, 214);\n  border: 0;\n  font-weight: 700;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:first-child:before {\n  display: none;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected:not(:first-child)::before {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  content: \"\";\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.4);\n  border: 0;\n}\n.paraui-v3-togglebutton-group-text .paraui-v3-toggle-button-selected::after {\n  display: none;\n}";
 styleInject(css_248z);
 
 var ToggleButtonGroup = function ToggleButtonGroup(props) {
@@ -38,9 +40,7 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
     exclusive = true;
   }
 
-  var cls = clsx('paraui-togglebutton-group', className, {
-    'paraui-togglebutton-group--text': type === 'text'
-  }); //多选
+  var makeCls = clsx("".concat($prefixCls, "-togglebutton-group"), className, _defineProperty({}, "".concat($prefixCls, "-togglebutton-group-text"), type === 'text')); //多选
 
   var handleChange = function handleChange(evt, buttonValue) {
     if (!onChange) return;
@@ -103,13 +103,15 @@ var ToggleButtonGroup = function ToggleButtonGroup(props) {
   };
 
   return jsx("div", Object.assign({
-    className: cls
+    className: makeCls
   }, {
     children: renderGroup()
   }));
 };
 
 var ToggleButton = function ToggleButton(props) {
+  var _clsx;
+
   var className = props.className,
       style = props.style,
       children = props.children,
@@ -130,12 +132,10 @@ var ToggleButton = function ToggleButton(props) {
       hasTip = _useState2[0],
       setHasTip = _useState2[1];
 
-  var id = useRef(UUID()).current; //className
+  var id = useRef(UUID()).current;
+  var prefixCls = "".concat($prefixCls, "-toggle-button"); //className
 
-  var cls = clsx('paraui-toggle-button', className, {
-    'paraui-toggle-button-selected': selected,
-    'paraui-toggle-button-disabled': disabled
-  }); //点击事件
+  var makeCls = clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-selected"), selected), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _clsx)); //点击事件
 
   var handleClick = function handleClick(evt) {
     if (onClick) onClick(evt, value);
@@ -165,13 +165,13 @@ var ToggleButton = function ToggleButton(props) {
       style: Object.assign({
         width: width
       }, style),
-      className: cls,
+      className: makeCls,
       disabled: disabled,
       value: value,
       onClick: handleClick
     }, {
       children: jsx("span", Object.assign({
-        className: 'paraui-toggle-button-text'
+        className: 'toggle-button-text'
       }, {
         children: children
       }))
@@ -182,7 +182,7 @@ var ToggleButton = function ToggleButton(props) {
         title: children
       }, {
         children: jsx("span", Object.assign({
-          className: 'paraui-toggle-button-wrap'
+          className: "".concat(prefixCls, "-wrap")
         }, {
           children: btn
         }))

package/Tooltip/index.js

@@ -5,6 +5,7 @@ import React__default from 'react';
 import RcTooltip from 'rc-tooltip';
 import { placements } from 'rc-tooltip/lib/placements';
 import clsx from 'clsx';
+import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
 var autoAdjustOverflowEnabled = {
@@ -142,7 +143,7 @@ function getDisabledCompatibleChildren(child) {
 
     return jsx("span", Object.assign({
       style: spanStyle,
-      className: clsx(element.props.className, "paraui-tooltip-disabled-compatible-wrapper")
+      className: clsx(element.props.className, "".concat($rcPrefixCls, "-tooltip-disabled-compatible-wrapper"))
     }, {
       children: _child
     }));
@@ -208,7 +209,7 @@ function getAlignOffset(place) {
   return offsetMap[mPlace];
 }
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/25 下午7:17\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-tooltip {\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  line-height: 1.5715;\n  position: absolute;\n  z-index: 1500;\n  display: block;\n  width: max-content;\n  max-width: 250px;\n  visibility: visible;\n}\n.paraui-tooltip-content {\n  position: relative;\n}\n.paraui-tooltip-hidden {\n  display: none;\n}\n.paraui-tooltip-hide-arrow .paraui-tooltip-arrow {\n  display: none;\n}\n.paraui-tooltip-inner {\n  min-width: 30px;\n  min-height: 32px;\n  padding: 5px 12px;\n  color: rgb(255, 255, 255);\n  text-align: left;\n  text-decoration: none;\n  word-wrap: break-word;\n  background-color: rgba(46, 55, 67, 0.7);\n  border-radius: 4px;\n  line-height: 22px;\n}\n.paraui-tooltip-arrow {\n  position: absolute;\n  z-index: 2;\n  display: block;\n  width: 22px;\n  height: 22px;\n  overflow: hidden;\n  background: transparent;\n  pointer-events: none;\n}\n.paraui-tooltip-arrow-content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 11.3137085px;\n  height: 11.3137085px;\n  margin: auto;\n  background-color: transparent;\n  content: \"\";\n  border-radius: 0 0 4px;\n  pointer-events: none;\n}\n.paraui-tooltip-arrow-content::before {\n  position: absolute;\n  top: -11.3137085px;\n  left: -11.3137085px;\n  width: 33.9411255px;\n  height: 33.9411255px;\n  background: rgba(46, 55, 67, 0.7) -10px -10px no-repeat;\n  content: \"\";\n  -webkit-clip-path: path(\"M 9.849242404917499 24.091883092036785 A 5 5 0 0 1 13.384776310850237 22.627416997969522 L 20.627416997969522 22.627416997969522 A 2 2 0 0 0 22.627416997969522 20.627416997969522 L 22.627416997969522 13.384776310850237 A 5 5 0 0 1 24.091883092036785 9.849242404917499 L 23.091883092036785 9.849242404917499 L 9.849242404917499 23.091883092036785 Z\");\n}\n.paraui-tooltip-placement-top .paraui-tooltip-arrow, .paraui-tooltip-placement-topLeft .paraui-tooltip-arrow, .paraui-tooltip-placement-topRight .paraui-tooltip-arrow {\n  bottom: 0;\n  transform: translateY(100%);\n}\n.paraui-tooltip-placement-top .paraui-tooltip-arrow-content, .paraui-tooltip-placement-topLeft .paraui-tooltip-arrow-content, .paraui-tooltip-placement-topRight .paraui-tooltip-arrow-content {\n  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateY(-11px) rotate(45deg);\n}\n.paraui-tooltip-placement-top .paraui-tooltip-arrow {\n  left: 50%;\n  transform: translateY(100%) translateX(-50%);\n}\n.paraui-tooltip-placement-topLeft .paraui-tooltip-arrow {\n  left: 13px;\n}\n.paraui-tooltip-placement-topRight .paraui-tooltip-arrow {\n  right: 13px;\n}\n.paraui-tooltip-placement-right .paraui-tooltip-arrow, .paraui-tooltip-placement-rightTop .paraui-tooltip-arrow, .paraui-tooltip-placement-rightBottom .paraui-tooltip-arrow {\n  left: 0;\n  transform: translateX(-100%);\n}\n.paraui-tooltip-placement-right .paraui-tooltip-arrow-content, .paraui-tooltip-placement-rightTop .paraui-tooltip-arrow-content, .paraui-tooltip-placement-rightBottom .paraui-tooltip-arrow-content {\n  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateX(11px) rotate(135deg);\n}\n.paraui-tooltip-placement-right .paraui-tooltip-arrow {\n  top: 50%;\n  transform: translateX(-100%) translateY(-50%);\n}\n.paraui-tooltip-placement-rightTop .paraui-tooltip-arrow {\n  top: 5px;\n}\n.paraui-tooltip-placement-rightBottom .paraui-tooltip-arrow {\n  bottom: 5px;\n}\n.paraui-tooltip-placement-left .paraui-tooltip-arrow, .paraui-tooltip-placement-leftTop .paraui-tooltip-arrow, .paraui-tooltip-placement-leftBottom .paraui-tooltip-arrow {\n  right: 0;\n  transform: translateX(100%);\n}\n.paraui-tooltip-placement-left .paraui-tooltip-arrow-content, .paraui-tooltip-placement-leftTop .paraui-tooltip-arrow-content, .paraui-tooltip-placement-leftBottom .paraui-tooltip-arrow-content {\n  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateX(-11px) rotate(315deg);\n}\n.paraui-tooltip-placement-left .paraui-tooltip-arrow {\n  top: 50%;\n  transform: translateX(100%) translateY(-50%);\n}\n.paraui-tooltip-placement-leftTop .paraui-tooltip-arrow {\n  top: 5px;\n}\n.paraui-tooltip-placement-leftBottom .paraui-tooltip-arrow {\n  bottom: 5px;\n}\n.paraui-tooltip-placement-bottom .paraui-tooltip-arrow, .paraui-tooltip-placement-bottomLeft .paraui-tooltip-arrow, .paraui-tooltip-placement-bottomRight .paraui-tooltip-arrow {\n  top: 0;\n  transform: translateY(-100%);\n}\n.paraui-tooltip-placement-bottom .paraui-tooltip-arrow-content, .paraui-tooltip-placement-bottomLeft .paraui-tooltip-arrow-content, .paraui-tooltip-placement-bottomRight .paraui-tooltip-arrow-content {\n  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateY(11px) rotate(225deg);\n}\n.paraui-tooltip-placement-bottom .paraui-tooltip-arrow {\n  left: 50%;\n  transform: translateY(-100%) translateX(-50%);\n}\n.paraui-tooltip-placement-bottomLeft .paraui-tooltip-arrow {\n  left: 13px;\n}\n.paraui-tooltip-placement-bottomRight .paraui-tooltip-arrow {\n  right: 13px;\n}\n\n.paraui-tooltip-zoom-big-fast-enter,\n.paraui-tooltip-zoom-big-fast-appear {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-tooltip-zoom-big-fast-leave {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.paraui-tooltip-zoom-big-fast-enter.paraui-tooltip-zoom-big-fast-enter-active,\n.paraui-tooltip-zoom-big-fast-appear.paraui-tooltip-zoom-big-fast-appear-active {\n  animation-name: parauiTooltipZoomBigIn;\n  animation-play-state: running;\n}\n\n.paraui-tooltip-zoom-big-fast-leave.paraui-tooltip-zoom-big-fast-leave-active {\n  animation-name: parauiTooltipZoomBigOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.paraui-tooltip-zoom-big-fast-enter,\n.paraui-tooltip-zoom-big-fast-appear {\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.paraui-tooltip-zoom-big-fast-enter-prepare,\n.paraui-tooltip-zoom-big-fast-appear-prepare {\n  transform: none;\n}\n\n.paraui-tooltip-zoom-big-fast-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n@keyframes parauiTooltipZoomBigIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes parauiTooltipZoomBigOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/5/25 下午7:17\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-tooltip {\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  line-height: 1.5715;\n  position: absolute;\n  z-index: 1500;\n  display: block;\n  width: max-content;\n  max-width: 250px;\n  visibility: visible;\n}\n.paraui-v3-tooltip .component-tooltip-content {\n  position: relative;\n}\n.paraui-v3-tooltip.component-tooltip-hidden {\n  display: none;\n}\n.paraui-v3-tooltip.paraui-v3-tooltip-hide-arrow .component-tooltip-arrow {\n  display: none;\n}\n.paraui-v3-tooltip .component-tooltip-inner {\n  min-width: 30px;\n  min-height: 32px;\n  padding: 5px 12px;\n  color: rgb(255, 255, 255);\n  text-align: left;\n  text-decoration: none;\n  word-wrap: break-word;\n  background-color: rgba(46, 55, 67, 0.7);\n  border-radius: 4px;\n  line-height: 22px;\n}\n.paraui-v3-tooltip .component-tooltip-arrow {\n  position: absolute;\n  z-index: 2;\n  display: block;\n  width: 22px;\n  height: 22px;\n  overflow: hidden;\n  background: transparent;\n  pointer-events: none;\n}\n.paraui-v3-tooltip .component-tooltip-arrow-content {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  width: 11.3137085px;\n  height: 11.3137085px;\n  margin: auto;\n  background-color: transparent;\n  content: \"\";\n  border-radius: 0 0 4px;\n  pointer-events: none;\n}\n.paraui-v3-tooltip .component-tooltip-arrow-content::before {\n  position: absolute;\n  top: -11.3137085px;\n  left: -11.3137085px;\n  width: 33.9411255px;\n  height: 33.9411255px;\n  background: rgba(46, 55, 67, 0.7) -10px -10px no-repeat;\n  content: \"\";\n  -webkit-clip-path: path(\"M 9.849242404917499 24.091883092036785 A 5 5 0 0 1 13.384776310850237 22.627416997969522 L 20.627416997969522 22.627416997969522 A 2 2 0 0 0 22.627416997969522 20.627416997969522 L 22.627416997969522 13.384776310850237 A 5 5 0 0 1 24.091883092036785 9.849242404917499 L 23.091883092036785 9.849242404917499 L 9.849242404917499 23.091883092036785 Z\");\n}\n.paraui-v3-tooltip.component-tooltip-placement-top .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-topLeft .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-topRight .component-tooltip-arrow {\n  bottom: 0;\n  transform: translateY(100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-top .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-topLeft .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-topRight .component-tooltip-arrow-content {\n  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateY(-11px) rotate(45deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-top .component-tooltip-arrow {\n  left: 50%;\n  transform: translateY(100%) translateX(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-topLeft .component-tooltip-arrow {\n  left: 13px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-topRight .component-tooltip-arrow {\n  right: 13px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-right .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-rightTop .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-rightBottom .component-tooltip-arrow {\n  left: 0;\n  transform: translateX(-100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-right .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-rightTop .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-rightBottom .component-tooltip-arrow-content {\n  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateX(11px) rotate(135deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-right .component-tooltip-arrow {\n  top: 50%;\n  transform: translateX(-100%) translateY(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-rightTop .component-tooltip-arrow {\n  top: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-rightBottom .component-tooltip-arrow {\n  bottom: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-left .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-leftTop .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-leftBottom .component-tooltip-arrow {\n  right: 0;\n  transform: translateX(100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-left .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-leftTop .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-leftBottom .component-tooltip-arrow-content {\n  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateX(-11px) rotate(315deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-left .component-tooltip-arrow {\n  top: 50%;\n  transform: translateX(100%) translateY(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-leftTop .component-tooltip-arrow {\n  top: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-leftBottom .component-tooltip-arrow {\n  bottom: 5px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottom .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-bottomLeft .component-tooltip-arrow, .paraui-v3-tooltip.component-tooltip-placement-bottomRight .component-tooltip-arrow {\n  top: 0;\n  transform: translateY(-100%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottom .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-bottomLeft .component-tooltip-arrow-content, .paraui-v3-tooltip.component-tooltip-placement-bottomRight .component-tooltip-arrow-content {\n  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);\n  transform: translateY(11px) rotate(225deg);\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottom .component-tooltip-arrow {\n  left: 50%;\n  transform: translateY(-100%) translateX(-50%);\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottomLeft .component-tooltip-arrow {\n  left: 13px;\n}\n.paraui-v3-tooltip.component-tooltip-placement-bottomRight .component-tooltip-arrow {\n  right: 13px;\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-duration: 0.1s;\n  animation-fill-mode: both;\n  animation-play-state: paused;\n}\n\n.component-tooltip-zoom-big-fast-enter.component-tooltip-zoom-big-fast-enter-active,\n.component-tooltip-zoom-big-fast-appear.component-tooltip-zoom-big-fast-appear-active {\n  animation-name: componentTooltipZoomBigIn;\n  animation-play-state: running;\n}\n\n.component-tooltip-zoom-big-fast-leave.component-tooltip-zoom-big-fast-leave-active {\n  animation-name: componentTooltipZoomBigOut;\n  animation-play-state: running;\n  pointer-events: none;\n}\n\n.component-tooltip-zoom-big-fast-enter,\n.component-tooltip-zoom-big-fast-appear {\n  transform: scale(0);\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n}\n\n.component-tooltip-zoom-big-fast-enter-prepare,\n.component-tooltip-zoom-big-fast-appear-prepare {\n  transform: none;\n}\n\n.component-tooltip-zoom-big-fast-leave {\n  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);\n}\n\n@keyframes componentTooltipZoomBigIn {\n  0% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes componentTooltipZoomBigOut {\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}";
 styleInject(css_248z);
 
 var Tooltip = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -220,6 +221,15 @@ var Tooltip = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       setVisible = _React$useState2[1]; //是否显示
 
 
+  var wrapRef = React__default.useRef(); //锚点
+
+  var tRef = React__default.useRef(); //实例
+
+  var _React$useState3 = React__default.useState([0, 0]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      targetOffset = _React$useState4[0],
+      setTargetOffset = _React$useState4[1];
+
   React__default.useEffect(function () {
     var _a;
 
@@ -289,10 +299,31 @@ var Tooltip = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     }
 
     domNode.style.transformOrigin = "".concat(transformOrigin.left, " ").concat(transformOrigin.top);
+  }; //跟随光标
+
+
+  var handleMouseMove = function handleMouseMove(e) {
+    var _a, _b, _c, _d;
+
+    if (wrapRef.current) {
+      var popupHeight = ((_d = (_c = (_b = (_a = tRef.current) === null || _a === void 0 ? void 0 : _a.popupRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getElement()) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
+      var cursorSpace = popupHeight === 0 ? 60 : 30;
+
+      var _wrapRef$current$getB = wrapRef.current.getBoundingClientRect(),
+          x = _wrapRef$current$getB.x,
+          y = _wrapRef$current$getB.y,
+          width = _wrapRef$current$getB.width;
+
+      var newX = e.clientX - (x + width / 2);
+      var newY = e.clientY - y + popupHeight + cursorSpace;
+      setTimeout(function () {
+        setTargetOffset([-newX, -newY]);
+      });
+    }
   };
 
   var _props$prefixCls = props.prefixCls,
-      prefixCls = _props$prefixCls === void 0 ? 'paraui-tooltip' : _props$prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? "".concat($rcPrefixCls, "-tooltip") : _props$prefixCls,
       getTooltipContainer = props.getTooltipContainer,
       getPopupContainer = props.getPopupContainer,
       overlayClassName = props.overlayClassName,
@@ -300,36 +331,51 @@ var Tooltip = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       children = props.children,
       title = props.title,
       placement = props.placement,
-      restProps = __rest(props, ["prefixCls", "getTooltipContainer", "getPopupContainer", "overlayClassName", "overlayInnerStyle", "children", "title", "placement"]);
+      isPopover = props.isPopover,
+      followCursor = props.followCursor,
+      restProps = __rest(props, ["prefixCls", "getTooltipContainer", "getPopupContainer", "overlayClassName", "overlayInnerStyle", "children", "title", "placement", "isPopover", "followCursor"]);
 
   var tempVisible = visible;
 
   if (!('visible' in props || 'open' in props) && isUntitled()) {
     //没有title必然不可见
     tempVisible = false;
-  }
+  } //overlayCls
+
 
+  var overlayCls = clsx(!isPopover && "".concat($prefixCls, "-tooltip"), overlayClassName, !props.arrow && "".concat($prefixCls, "-tooltip-hide-arrow"));
   return jsx(RcTooltip, Object.assign({}, restProps, {
-    placement: mapLegacyPlacement(placement),
     prefixCls: prefixCls,
-    overlayClassName: clsx(overlayClassName, !props.arrow && 'paraui-tooltip-hide-arrow'),
+    placement: followCursor ? 'top' : mapLegacyPlacement(placement),
+    overlayClassName: overlayCls,
     getTooltipContainer: getPopupContainer || getTooltipContainer,
-    ref: ref,
+    ref: tRef,
     builtinPlacements: getTooltipPlacements(),
     overlay: title,
     visible: tempVisible,
+    align: {
+      targetOffset: targetOffset
+    },
     onVisibleChange: onVisibleChange,
     onPopupAlign: onPopupAlign,
     overlayInnerStyle: overlayInnerStyle,
     arrowContent: props.arrow ? jsx("span", {
-      className: "".concat(prefixCls, "-arrow-content")
+      className: "".concat($rcPrefixCls, "-tooltip-arrow-content")
     }) : null,
     motion: {
-      motionName: 'paraui-tooltip-zoom-big-fast',
+      motionName: "".concat($rcPrefixCls, "-tooltip-zoom-big-fast"),
       motionDeadline: 1000
     }
   }, {
-    children: getDisabledCompatibleChildren(children)
+    children: followCursor ? jsx("div", Object.assign({
+      style: {
+        display: 'inline-block'
+      },
+      ref: wrapRef,
+      onMouseMove: handleMouseMove
+    }, {
+      children: getDisabledCompatibleChildren(children)
+    })) : getDisabledCompatibleChildren(children)
   }));
 });
 Tooltip.displayName = 'Tooltip';
@@ -340,7 +386,8 @@ Tooltip.defaultProps = {
   arrowPointAtCenter: false,
   autoAdjustOverflow: true,
   arrow: true,
-  defaultVisible: false
+  defaultVisible: false,
+  followCursor: false
 };
 
 export { Tooltip, Tooltip as default };

package/Tooltip/interface.d.ts

@@ -27,5 +27,7 @@ export interface TooltipProps extends Partial<Omit<RcTooltipProps, 'children'>>
     arrow?: boolean;
     /** 控制浮层是否显示 */
     open?: boolean;
+    /** 跟随光标移动 */
+    followCursor?: boolean;
     [name: string]: any;
 }

package/Transfer/index.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import './style/index.scss';
 /**
  * @description: 穿梭框
+ * @param className{string} 类名
+ * @param style{string} 样式
  * @param data{Array} 数据源
  * @param value{Array} 当前选中的值
  * @param onChange{Function} 值改变时的回调
@@ -9,10 +11,12 @@ import './style/index.scss';
  *
  */
 interface TransferProps {
+    className?: string;
+    style?: React.CSSProperties;
     data?: Array<any>;
     value?: Array<any>;
     onChange?: (data: Array<any>) => void;
     titles?: Array<string>;
 }
-export declare const Transfer: ({ data, value, onChange, titles, }: TransferProps) => JSX.Element;
+export declare const Transfer: ({ data, value, onChange, titles, className, style }: TransferProps) => JSX.Element;
 export default Transfer;