pocko-ui 1.0.29 → 1.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Tooltips/index.css +44 -29
  2. package/Tooltips/index.d.ts +2 -2
  3. package/Tooltips/index.js +2 -2
  4. package/package.json +1 -1
package/Tooltips/index.css CHANGED
@@ -1,47 +1,62 @@
1
- @charset "UTF-8";
2
- .tooltip-container {
1
+ .tooltip-wrapper {
2
+ display: inline-block;
3
+ position: relative;
3
4
  cursor: pointer;
4
5
  }
5
-
6
- .tooltip-container-content {
7
- white-space: nowrap;
8
- text-overflow: ellipsis;
6
+ .tooltip-wrapper .tooltip-content {
9
7
  overflow: hidden;
8
+ text-overflow: ellipsis;
9
+ white-space: nowrap;
10
10
  }
11
11
 
12
- .my-tooltip {
12
+ .tooltip-bubble {
13
13
  position: absolute;
14
14
  z-index: 9999;
15
15
  max-width: 220px;
16
- padding: 8px;
17
- border-radius: 4px;
16
+ padding: 5px;
17
+ border-radius: 5px;
18
+ background: var(--tooltip-color);
18
19
  color: #fff;
19
- display: flex;
20
- flex-direction: column;
21
- /* 动态颜色 */
22
- background-color: var(--tooltip-color, #000);
20
+ pointer-events: none;
21
+ animation: fadeIn 0.2s ease-out;
23
22
  }
24
-
25
- /* 箭头上方 */
26
- .my-tooltip.bottom::before {
23
+ .tooltip-bubble::before {
27
24
  content: "";
28
25
  position: absolute;
29
- bottom: 100%; /* 箭头位于 tooltip 上方 */
26
+ border: 6px solid transparent;
27
+ }
28
+ .tooltip-bubble.top::before {
29
+ top: 100%;
30
30
  left: 50%;
31
31
  transform: translateX(-50%);
32
- border-width: 5px;
33
- border-style: solid;
34
- border-color: transparent transparent var(--tooltip-color, #000) transparent;
32
+ border-top-color: var(--tooltip-color);
35
33
  }
36
-
37
- /* 箭头下方 */
38
- .my-tooltip.top::before {
39
- content: "";
40
- position: absolute;
41
- top: 100%; /* 箭头位于 tooltip 下方 */
34
+ .tooltip-bubble.bottom::before {
35
+ bottom: 100%;
42
36
  left: 50%;
43
37
  transform: translateX(-50%);
44
- border-width: 5px;
45
- border-style: solid;
46
- border-color: var(--tooltip-color, #000) transparent transparent transparent;
38
+ border-bottom-color: var(--tooltip-color);
39
+ }
40
+ .tooltip-bubble.left::before {
41
+ left: 100%;
42
+ top: 50%;
43
+ transform: translateY(-50%);
44
+ border-left-color: var(--tooltip-color);
45
+ }
46
+ .tooltip-bubble.right::before {
47
+ right: 100%;
48
+ top: 50%;
49
+ transform: translateY(-50%);
50
+ border-right-color: var(--tooltip-color);
51
+ }
52
+
53
+ @keyframes fadeIn {
54
+ from {
55
+ opacity: 0;
56
+ transform: translateY(2px);
57
+ }
58
+ to {
59
+ opacity: 1;
60
+ transform: translateY(0);
61
+ }
47
62
  }
package/Tooltips/index.d.ts CHANGED
@@ -5,8 +5,8 @@ interface Props {
5
5
  delay?: number;
6
6
  color?: string;
7
7
  children: React.ReactNode;
8
- content: string;
9
- position?: "top" | "bottom";
8
+ content: string | React.ReactNode;
9
+ position?: "top" | "bottom" | "right" | "left";
10
10
  }
11
11
  export default function ToolTips({ wrapperClassName, delay, color, children, content, position, }: Props): JSX.Element;
12
12
  export {};
package/Tooltips/index.js CHANGED
@@ -46,7 +46,7 @@ eval("\n\nmodule.exports = function (item) {\n var content = item[1];\n var cs
46
46
  \***********************/
47
47
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
48
48
 
49
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ToolTips)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n\nfunction ToolTips(_ref) {\n var wrapperClassName = _ref.wrapperClassName,\n _ref$delay = _ref.delay,\n delay = _ref$delay === void 0 ? 300 : _ref$delay,\n _ref$color = _ref.color,\n color = _ref$color === void 0 ? \"#000\" : _ref$color,\n children = _ref.children,\n content = _ref.content,\n _ref$position = _ref.position,\n position = _ref$position === void 0 ? \"bottom\" : _ref$position;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isVisible = _useState2[0],\n setIsVisible = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n top: 0,\n left: 0\n }),\n _useState4 = _slicedToArray(_useState3, 2),\n pos = _useState4[0],\n setPos = _useState4[1];\n var timeoutHoverIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var tooltipRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var contentRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var handleMouseEnter = function handleMouseEnter(event) {\n var _contentRef$current;\n var _event$currentTarget$ = event.currentTarget.getBoundingClientRect(),\n top = _event$currentTarget$.top,\n left = _event$currentTarget$.left,\n height = _event$currentTarget$.height,\n width = _event$currentTarget$.width;\n var scrollX = window.pageXOffset || document.documentElement.scrollLeft;\n var scrollY = window.pageYOffset || document.documentElement.scrollTop;\n\n // 获取 `tooltip-container-content` 的高度\n var contentHeight = ((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetHeight) || 0;\n var tooltipTop = position === \"top\" ? top + scrollY - contentHeight // 在上方显示\n : top + height + scrollY + 10; // 在下方显示\n\n setPos({\n top: tooltipTop,\n left: left + width / 2 + scrollX\n });\n timeoutHoverIdRef.current = setTimeout(function () {\n setIsVisible(true);\n }, delay);\n };\n var handleMouseLeave = function handleMouseLeave() {\n if (timeoutHoverIdRef.current) {\n clearTimeout(timeoutHoverIdRef.current);\n }\n setIsVisible(false);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n ref: tooltipRef,\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_3__.clsCombine)(wrapperClassName, \"tooltip-container\")\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"tooltip-container-content\",\n ref: contentRef\n }, children), isVisible && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"my-tooltip badge pos-absolute p-1 rounded text-white text-wrap \".concat(position),\n style: _defineProperty({\n top: pos.top,\n left: pos.left,\n backgroundColor: color,\n transform: \"translateX(-50%)\"\n }, \"--tooltip-color\", color)\n }, content), document.body));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
49
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ ToolTips)\n/* harmony export */ });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ \"react-dom\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _Index_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Index.scss */ \"./src/Index.scss\");\n/* harmony import */ var _utils_cls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/cls */ \"../../utils/cls.ts\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\n\n\n\n\nfunction ToolTips(_ref) {\n var wrapperClassName = _ref.wrapperClassName,\n _ref$delay = _ref.delay,\n delay = _ref$delay === void 0 ? 300 : _ref$delay,\n _ref$color = _ref.color,\n color = _ref$color === void 0 ? \"#000\" : _ref$color,\n children = _ref.children,\n content = _ref.content,\n _ref$position = _ref.position,\n position = _ref$position === void 0 ? \"bottom\" : _ref$position;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),\n _useState2 = _slicedToArray(_useState, 2),\n isVisible = _useState2[0],\n setIsVisible = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({\n top: 0,\n left: 0\n }),\n _useState4 = _slicedToArray(_useState3, 2),\n pos = _useState4[0],\n setPos = _useState4[1];\n var timeoutRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var tooltipRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var targetDataRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n var calculatePosition = function calculatePosition(rect, scrollX, scrollY, tooltipWidth, tooltipHeight) {\n var spacing = 10; // 与目标元素的间距\n var top = 0;\n var left = 0;\n switch (position) {\n case \"top\":\n top = rect.top + scrollY - tooltipHeight - spacing;\n left = rect.left + scrollX + rect.width / 2 - tooltipWidth / 2;\n break;\n case \"bottom\":\n top = rect.top + scrollY + rect.height + spacing;\n left = rect.left + scrollX + rect.width / 2 - tooltipWidth / 2;\n break;\n case \"left\":\n top = rect.top + scrollY + rect.height / 2 - tooltipHeight / 2;\n left = rect.left + scrollX - tooltipWidth - spacing;\n break;\n case \"right\":\n top = rect.top + scrollY + rect.height / 2 - tooltipHeight / 2;\n left = rect.left + scrollX + rect.width + spacing;\n break;\n }\n return {\n top: top,\n left: left\n };\n };\n var handleMouseEnter = function handleMouseEnter(e) {\n var rect = e.currentTarget.getBoundingClientRect();\n targetDataRef.current = {\n rect: rect,\n scrollX: window.pageXOffset,\n scrollY: window.pageYOffset\n };\n\n // 首次预估定位\n var estimatedSize = position === \"left\" || position === \"right\" ? {\n width: 200,\n height: 40\n } : {\n width: 150,\n height: 60\n };\n setPos(calculatePosition(rect, targetDataRef.current.scrollX, targetDataRef.current.scrollY, estimatedSize.width, estimatedSize.height));\n timeoutRef.current = setTimeout(function () {\n setIsVisible(true);\n }, delay);\n };\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {\n if (isVisible && tooltipRef.current && targetDataRef.current) {\n // 根据实际尺寸重新计算\n var _targetDataRef$curren = targetDataRef.current,\n rect = _targetDataRef$curren.rect,\n scrollX = _targetDataRef$curren.scrollX,\n scrollY = _targetDataRef$curren.scrollY;\n var tooltipWidth = tooltipRef.current.offsetWidth;\n var tooltipHeight = tooltipRef.current.offsetHeight;\n setPos(calculatePosition(rect, scrollX, scrollY, tooltipWidth, tooltipHeight));\n }\n }, [isVisible]);\n var handleMouseLeave = function handleMouseLeave() {\n timeoutRef.current && clearTimeout(timeoutRef.current);\n setIsVisible(false);\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n ref: containerRef,\n className: (0,_utils_cls__WEBPACK_IMPORTED_MODULE_3__.clsCombine)(wrapperClassName, \"tooltip-container\"),\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n className: \"tooltip-content\"\n }, children), isVisible && /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(/*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(\"div\", {\n ref: tooltipRef,\n className: \"tooltip-bubble \".concat(position),\n style: _defineProperty({\n top: pos.top,\n left: pos.left\n }, \"--tooltip-color\", color)\n }, content), document.body));\n}\n\n//# sourceURL=webpack://RPB/./src/Index.tsx?");
50
50
 
51
51
  /***/ }),
52
52
 
@@ -66,7 +66,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
66
66
  \*********************************************************************************************************************************************************************/
67
67
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
68
68
 
69
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `@charset \"UTF-8\";\n.tooltip-container {\n cursor: pointer;\n}\n\n.tooltip-container-content {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.my-tooltip {\n position: absolute;\n z-index: 9999;\n max-width: 220px;\n padding: 8px;\n border-radius: 4px;\n color: #fff;\n display: flex;\n flex-direction: column;\n /* 动态颜色 */\n background-color: var(--tooltip-color, #000);\n}\n\n/* 箭头上方 */\n.my-tooltip.bottom::before {\n content: \"\";\n position: absolute;\n bottom: 100%; /* 箭头位于 tooltip 上方 */\n left: 50%;\n transform: translateX(-50%);\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent var(--tooltip-color, #000) transparent;\n}\n\n/* 箭头下方 */\n.my-tooltip.top::before {\n content: \"\";\n position: absolute;\n top: 100%; /* 箭头位于 tooltip 下方 */\n left: 50%;\n transform: translateX(-50%);\n border-width: 5px;\n border-style: solid;\n border-color: var(--tooltip-color, #000) transparent transparent transparent;\n}`, \"\",{\"version\":3,\"sources\":[\"webpack://./src/Index.scss\"],\"names\":[],\"mappings\":\"AAAA,gBAAgB;AAAhB;EACE,eAAA;AAEF;;AACA;EACE,mBAAA;EACA,uBAAA;EACA,gBAAA;AAEF;;AACA;EACE,kBAAA;EACA,aAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,4CAAA;AAEF;;AACA,SAAA;AACA;EACE,WAAA;EACA,kBAAA;EACA,YAAA,EAAA,oBAAA;EACA,SAAA;EACA,2BAAA;EACA,iBAAA;EACA,mBAAA;EACA,4EAAA;AAEF;;AACA,SAAA;AACA;EACE,WAAA;EACA,kBAAA;EACA,SAAA,EAAA,oBAAA;EACA,SAAA;EACA,2BAAA;EACA,iBAAA;EACA,mBAAA;EACA,4EAAA;AAEF\",\"sourcesContent\":[\".tooltip-container {\\r\\n cursor: pointer;\\r\\n}\\r\\n\\r\\n.tooltip-container-content {\\r\\n white-space: nowrap;\\r\\n text-overflow: ellipsis;\\r\\n overflow: hidden;\\r\\n}\\r\\n\\r\\n.my-tooltip {\\r\\n position: absolute;\\r\\n z-index: 9999;\\r\\n max-width: 220px;\\r\\n padding: 8px;\\r\\n border-radius: 4px;\\r\\n color: #fff;\\r\\n display: flex;\\r\\n flex-direction: column;\\r\\n /* 动态颜色 */\\r\\n background-color: var(--tooltip-color, #000);\\r\\n}\\r\\n\\r\\n/* 箭头上方 */\\r\\n.my-tooltip.bottom::before {\\r\\n content: \\\"\\\";\\r\\n position: absolute;\\r\\n bottom: 100%; /* 箭头位于 tooltip 上方 */\\r\\n left: 50%;\\r\\n transform: translateX(-50%);\\r\\n border-width: 5px;\\r\\n border-style: solid;\\r\\n border-color: transparent transparent var(--tooltip-color, #000) transparent;\\r\\n}\\r\\n\\r\\n/* 箭头下方 */\\r\\n.my-tooltip.top::before {\\r\\n content: \\\"\\\";\\r\\n position: absolute;\\r\\n top: 100%; /* 箭头位于 tooltip 下方 */\\r\\n left: 50%;\\r\\n transform: translateX(-50%);\\r\\n border-width: 5px;\\r\\n border-style: solid;\\r\\n border-color: var(--tooltip-color, #000) transparent transparent transparent;\\r\\n}\\r\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://RPB/./src/Index.scss?../../node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D!../../node_modules/sass-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B2%5D");
69
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ \"../../node_modules/css-loader/dist/runtime/sourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip-wrapper {\n display: inline-block;\n position: relative;\n cursor: pointer;\n}\n.tooltip-wrapper .tooltip-content {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.tooltip-bubble {\n position: absolute;\n z-index: 9999;\n max-width: 220px;\n padding: 5px;\n border-radius: 5px;\n background: var(--tooltip-color);\n color: #fff;\n pointer-events: none;\n animation: fadeIn 0.2s ease-out;\n}\n.tooltip-bubble::before {\n content: \"\";\n position: absolute;\n border: 6px solid transparent;\n}\n.tooltip-bubble.top::before {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--tooltip-color);\n}\n.tooltip-bubble.bottom::before {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--tooltip-color);\n}\n.tooltip-bubble.left::before {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--tooltip-color);\n}\n.tooltip-bubble.right::before {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--tooltip-color);\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}`, \"\",{\"version\":3,\"sources\":[\"webpack://./src/Index.scss\"],\"names\":[],\"mappings\":\"AACA;EACE,qBAAA;EACA,kBAAA;EACA,eAAA;AAAF;AAEE;EACE,gBAAA;EACA,uBAAA;EACA,mBAAA;AAAJ;;AAIA;EACE,kBAAA;EACA,aAAA;EACA,gBAAA;EACA,YAAA;EACA,kBAAA;EACA,gCAAA;EACA,WAAA;EACA,oBAAA;EACA,+BAAA;AADF;AAGE;EACE,WAAA;EACA,kBAAA;EACA,6BAAA;AADJ;AAMI;EACE,SAAA;EACA,SAAA;EACA,2BAAA;EACA,sCAAA;AAJN;AASI;EACE,YAAA;EACA,SAAA;EACA,2BAAA;EACA,yCAAA;AAPN;AAYI;EACE,UAAA;EACA,QAAA;EACA,2BAAA;EACA,uCAAA;AAVN;AAeI;EACE,WAAA;EACA,QAAA;EACA,2BAAA;EACA,wCAAA;AAbN;;AAkBA;EACE;IACE,UAAA;IACA,0BAAA;EAfF;EAiBA;IACE,UAAA;IACA,wBAAA;EAfF;AACF\",\"sourcesContent\":[\"// Index.scss\\r\\n.tooltip-wrapper {\\r\\n display: inline-block;\\r\\n position: relative;\\r\\n cursor: pointer;\\r\\n\\r\\n .tooltip-content {\\r\\n overflow: hidden;\\r\\n text-overflow: ellipsis;\\r\\n white-space: nowrap;\\r\\n }\\r\\n}\\r\\n\\r\\n.tooltip-bubble {\\r\\n position: absolute;\\r\\n z-index: 9999;\\r\\n max-width: 220px;\\r\\n padding: 5px;\\r\\n border-radius: 5px;\\r\\n background: var(--tooltip-color);\\r\\n color: #fff;\\r\\n pointer-events: none;\\r\\n animation: fadeIn 0.2s ease-out;\\r\\n\\r\\n &::before {\\r\\n content: \\\"\\\";\\r\\n position: absolute;\\r\\n border: 6px solid transparent;\\r\\n }\\r\\n\\r\\n // 位置样式\\r\\n &.top {\\r\\n &::before {\\r\\n top: 100%;\\r\\n left: 50%;\\r\\n transform: translateX(-50%);\\r\\n border-top-color: var(--tooltip-color);\\r\\n }\\r\\n }\\r\\n\\r\\n &.bottom {\\r\\n &::before {\\r\\n bottom: 100%;\\r\\n left: 50%;\\r\\n transform: translateX(-50%);\\r\\n border-bottom-color: var(--tooltip-color);\\r\\n }\\r\\n }\\r\\n\\r\\n &.left {\\r\\n &::before {\\r\\n left: 100%;\\r\\n top: 50%;\\r\\n transform: translateY(-50%);\\r\\n border-left-color: var(--tooltip-color);\\r\\n }\\r\\n }\\r\\n\\r\\n &.right {\\r\\n &::before {\\r\\n right: 100%;\\r\\n top: 50%;\\r\\n transform: translateY(-50%);\\r\\n border-right-color: var(--tooltip-color);\\r\\n }\\r\\n }\\r\\n}\\r\\n\\r\\n@keyframes fadeIn {\\r\\n from {\\r\\n opacity: 0;\\r\\n transform: translateY(2px);\\r\\n }\\r\\n to {\\r\\n opacity: 1;\\r\\n transform: translateY(0);\\r\\n }\\r\\n}\\r\\n\"],\"sourceRoot\":\"\"}]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://RPB/./src/Index.scss?../../node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B1%5D!../../node_modules/sass-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B1%5D.use%5B2%5D");
70
70
 
71
71
  /***/ }),
72
72
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pocko-ui",
3
- "version": "1.0.29",
3
+ "version": "1.0.30",
4
4
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
5
5
  "main": "index.js",
6
6
  "scripts": {