@para-ui/core 4.0.45 → 4.0.47

package/README.md

@@ -1,11 +1,25 @@
-## 🎉 para-ui/core@4.0.43 发布
+## 🎉 para-ui/core@4.0.47 发布
+
+🔧【Bugfix】
+- 【表格-Table】表格新增虚拟滚动
+
+## 🎉 para-ui/core@4.0.46 发布
+
+🎁【Feature】
+- 【对齐容器-Align】新增组件-对齐容器
+
+🔧【Bugfix】
+- 【标签-Tag】新增marginBottom,marginRight参数，tag默认没有，tagGroup默认8px
+- 【帮助-Help】帮助组件设置line-height为0，让容器与图标一样高度
+
+## 🎉 para-ui/core@4.0.45 发布
 
 🔧【Bugfix】
 - 【分页-Pagination】重构复杂模式下，超出换行显示内容，逐个减少
 - 【表格-Table】增加resizePaginationLine参数，重新计算分页换行不换行
 - 【分栏收缩容器-CollapseLayout】onClickBtn增加duration动画时间参数，新增onDragEnd拖拽结束事件
 
-## 🎉 para-ui/core@4.0.45 发布
+## 🎉 para-ui/core@4.0.44 发布
 
 🎁【Feature】
 - 【代码编辑器-CodeEditor】新增组件-代码编辑器

package/Radio/index.js

@@ -4,7 +4,7 @@ import Label from '../Label/index.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 import 'clsx';

package/RadioGroup/index.js

@@ -6,7 +6,7 @@ import HelperText from '../HelperText/index.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../Tooltip/index.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';

package/RangeInput/index.js

@@ -8,7 +8,7 @@ import clsx from 'clsx';
 import { Tooltip } from '../Tooltip/index.js';
 import { DeepClone } from '@paraview/lib';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 import 'rc-tooltip';

package/Result/index.js

@@ -8,7 +8,7 @@ import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import 'react';
 import '../Tooltip/index.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Forbid';

package/ScrollBar/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @author linhd
+ * @date 2024/12/13 11:15
+ * @description 自定义滚动条
+ */
+import React, { FunctionComponent } from 'react';
+import './index.scss';
+interface Props {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 模式 横 竖 */
+    type?: 'horizontal' | 'vertical';
+    /** 滚动总长 */
+    scrollTotalLength?: number;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 颜色 */
+    color?: 'deep' | 'light';
+    /** 外部滚动距离 */
+    scrollLength?: number;
+    /** 滚动事件 */
+    onScroll?: (val: number) => void;
+}
+declare const ScrollBar: FunctionComponent<Props>;
+export default ScrollBar;

package/ScrollBar/index.js

@@ -0,0 +1,153 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-scroll-bar {\n  overflow: hidden;\n  position: relative;\n}\n.paraui-v4-scroll-bar > .slider {\n  position: relative;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-horizontal {\n  width: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-horizontal > .slider {\n  height: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-vertical {\n  height: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-vertical > .slider {\n  width: 100%;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small > .slider, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium > .slider {\n  border-radius: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small.paraui-v4-scroll-bar-horizontal, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium.paraui-v4-scroll-bar-horizontal {\n  height: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-small.paraui-v4-scroll-bar-vertical, .paraui-v4-scroll-bar.paraui-v4-scroll-bar-medium.paraui-v4-scroll-bar-vertical {\n  width: 4px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large > .slider {\n  border-radius: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large.paraui-v4-scroll-bar-horizontal {\n  height: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-large.paraui-v4-scroll-bar-vertical {\n  width: 8px;\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light {\n  background-color: rgb(234, 236, 241);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light > .slider {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light > .slider:hover {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-light.paraui-v4-scroll-bar-move > .slider {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep {\n  background-color: rgb(92, 101, 115);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep > .slider {\n  background-color: rgb(212, 218, 227);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep > .slider:hover {\n  background-color: rgb(161, 168, 179);\n}\n.paraui-v4-scroll-bar.paraui-v4-scroll-bar-deep.paraui-v4-scroll-bar-move > .slider {\n  background-color: rgb(161, 168, 179);\n}";
+styleInject(css_248z);
+
+const ScrollBar = props => {
+  const {
+    className,
+    style,
+    type = 'vertical',
+    size = 'large',
+    color = 'light',
+    scrollTotalLength,
+    scrollLength,
+    onScroll
+  } = props;
+  const boxRef = useRef(null);
+  const sliderRef = useRef(null);
+  const constData = useRef({
+    typeMap: {
+      vertical: {
+        length: 'height',
+        movePage: 'pageY',
+        pos: 'top',
+        startPos: 'offsetTop'
+      },
+      horizontal: {
+        length: 'width',
+        movePage: 'pageX',
+        pos: 'left',
+        startPos: 'offsetLeft'
+      }
+    },
+    moveMaxLength: 0,
+    startLength: 0,
+    visualWindowLength: 0,
+    scrollTotalLength: 0,
+    sliderLength: 0,
+    scrollLength: 0
+  });
+  constData.current.scrollTotalLength = scrollTotalLength;
+  constData.current.scrollLength = scrollLength;
+  useEffect(() => {
+    intl();
+    window.addEventListener('resize', resize);
+    return () => {
+      window.removeEventListener("resize", resize);
+    };
+  }, []);
+  useEffect(() => {
+    handleSliderLength();
+    handleTop();
+  }, [scrollLength, scrollTotalLength]);
+  const resize = () => {
+    handleSliderLength();
+    handleTop();
+  };
+  // 计算滑块的 宽 高
+  const handleSliderLength = () => {
+    const boxRefEle = boxRef.current;
+    const sliderRefEle = sliderRef.current;
+    if (!scrollTotalLength || !boxRefEle || !sliderRefEle) return;
+    const boxRefEleRect = boxRefEle.getBoundingClientRect();
+    const lengthName = constData.current.typeMap[type].length;
+    const visualWindowLengthCom = boxRefEleRect[lengthName];
+    // 可视窗口长度 / 总长 * 可视窗口长度
+    let sliderLength = visualWindowLengthCom / scrollTotalLength * visualWindowLengthCom;
+    if (sliderLength < 16) sliderLength = 16;
+    sliderRefEle.style[lengthName] = sliderLength / visualWindowLengthCom * 100 + '%';
+    constData.current.moveMaxLength = visualWindowLengthCom - sliderLength;
+    constData.current.visualWindowLength = visualWindowLengthCom;
+    constData.current.sliderLength = sliderLength;
+  };
+  // 初始化
+  const intl = () => {
+    const boxRefEle = boxRef.current;
+    const sliderRefEle = sliderRef.current;
+    if (!boxRefEle || !sliderRefEle) return;
+    const pos = constData.current.typeMap[type].pos;
+    const startPos = constData.current.typeMap[type].startPos;
+    const movePage = constData.current.typeMap[type].movePage;
+    // 移动
+    const moveFunc = (event, e) => {
+      let moveLength = event[movePage] - e[movePage]; // 鼠标移动的距离
+      moveLength = constData.current.startLength + moveLength;
+      if (moveLength < 0) moveLength = 0;
+      if (moveLength > constData.current.moveMaxLength) moveLength = constData.current.moveMaxLength;
+      sliderRefEle.style[pos] = moveLength / constData.current.visualWindowLength * 100 + '%';
+      onScroll && onScroll(moveLength / constData.current.moveMaxLength * constData.current.scrollTotalLength);
+    };
+    // 抬起
+    const endFunc = () => {
+      boxRefEle.classList.remove("".concat($prefixCls, "-scroll-bar-move"));
+    };
+    boxRefEle.onmousedown = e => {
+      boxRefEle.classList.add("".concat($prefixCls, "-scroll-bar-move"));
+      constData.current.startLength = sliderRefEle[startPos];
+      document.onmousemove = event => {
+        moveFunc(event, e);
+      };
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        endFunc();
+      };
+    };
+    boxRefEle.ontouchstart = touchE => {
+      touchE.preventDefault();
+      const e = touchE.touches[0];
+      constData.current.startLength = sliderRefEle[startPos];
+      document.ontouchmove = touchEvent => {
+        touchEvent.preventDefault();
+        const event = touchEvent.touches[0];
+        moveFunc(event, e);
+        return false;
+      };
+      // 鼠标抬起
+      document.ontouchend = () => {
+        document.ontouchmove = null;
+        document.ontouchend = null;
+        endFunc();
+      };
+      return false;
+    };
+  };
+  // 处理鼠标滚轮滚动top定位
+  const handleTop = () => {
+    const sliderRefEle = sliderRef.current;
+    if (!sliderRefEle) return;
+    const pos = constData.current.typeMap[type].pos;
+    // 当前组件滚动总长与总长比
+    const a = constData.current.moveMaxLength / constData.current.visualWindowLength;
+    // 真实滚动总长与总长比
+    let b = Number(constData.current.scrollLength) / constData.current.scrollTotalLength;
+    sliderRefEle.style[pos] = a * b * 100 + '%';
+  };
+  return jsx("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-scroll-bar ").concat($prefixCls, "-scroll-bar-").concat(type, " ").concat($prefixCls, "-scroll-bar-").concat(size, " ").concat($prefixCls, "-scroll-bar-").concat(color), className),
+    style: style,
+    ref: boxRef
+  }, {
+    children: jsx("div", {
+      ref: sliderRef,
+      className: 'slider'
+    })
+  }));
+};
+
+export { ScrollBar as default };

package/Search/index.js

@@ -4,7 +4,7 @@ import { TextField } from '../TextField/index.js';
 import SearchIcon from '@para-ui/icons/Search';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Label/index.js';
 import '../Help/index.js';
 import '../Tooltip/index.js';

package/Select/index.js

@@ -20,7 +20,7 @@ import { u as useGlobalProps } from '../_verture/useGlobalProps-4ae1a007.js';
 import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import 'clsx';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 import 'rc-tooltip';

package/SelectInput/index.js

@@ -10,7 +10,7 @@ import '@paraview/lib';
 import '../_verture/useGlobalProps-4ae1a007.js';
 import '../_verture/style-inject.es-300983ab.js';
 import '../Label/index.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Help/index.js';
 import '../Tooltip/index.js';
 import 'rc-tooltip';

package/Selector/index.js

@@ -1,4 +1,4 @@
-import { _ as __awaiter, a as __rest } from '../_verture/tslib.es6-f43aa41d.js';
+import { a as __awaiter, _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
 import { _ as _slicedToArray } from '../_verture/slicedToArray-75fa4188.js';

package/SelectorPicker/index.js

@@ -14,7 +14,7 @@ import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 import 'rc-tooltip';

package/SingleBox/index.js

@@ -9,7 +9,7 @@ import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/tslib.es6-f43aa41d.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';

package/Slider/index.js

@@ -1,4 +1,4 @@
-import { a as __rest } from '../_verture/tslib.es6-f43aa41d.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import RcSlider, { Range, SliderTooltip, Handle } from 'rc-slider';

package/Stepper/index.js

@@ -1,4 +1,4 @@
-import { a as __rest } from '../_verture/tslib.es6-f43aa41d.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import RcSteps from 'rc-steps';

package/Switch/index.js

@@ -1,4 +1,4 @@
-import { a as __rest } from '../_verture/tslib.es6-f43aa41d.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import LoadingOutlined from '@para-ui/icons/LoadingF';
 import RcSwitch from 'rc-switch';