@para-ui/core 4.0.30 → 4.0.31

package/AutoButton/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @author linhd
+ * @date 2024/8/12 17:16
+ * @description 超出自适应按钮
+ */
+import React, { FunctionComponent, ReactNode } from 'react';
+import { ButtonProps, IconButtonProps } from '../Button';
+import { SplitButtonProps } from "../Button/SplitButton";
+import { Placement } from '../Dropdown';
+import './index.scss';
+type TypeAutoButtonItemProps = ButtonProps | IconButtonProps | SplitButtonProps;
+interface AutoButtonItemOtherProps {
+    /** 不传就是正常的按钮 */
+    buttonType?: 'icon' | 'split';
+}
+export type AutoButtonItemProps = TypeAutoButtonItemProps & AutoButtonItemOtherProps;
+export interface AutoButtonProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 数据 */
+    list: AutoButtonItemProps[];
+    /** 右间距 默认16px */
+    marginRight?: string;
+    /** 更多按钮 */
+    moreProps?: {
+        buttonType?: 'icon';
+        icon?: ReactNode;
+        children?: ReactNode;
+    };
+    /** 位置 */
+    morePlacement?: Placement;
+    /** 浮层最大宽 默认500px */
+    moreMaxWidth?: string;
+    /** 触发下拉的行为 */
+    trigger?: ('click' | 'hover' | 'contextMenu')[];
+    [name: string]: any;
+}
+export declare const AutoButton: FunctionComponent<AutoButtonProps>;
+export default AutoButton;

package/AutoButton/index.js

@@ -0,0 +1,213 @@
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment } from 'react';
+import { Button } from '../Button/index.js';
+import AutoTips from '../AutoTips/index.js';
+import MoreVert from '@para-ui/icons/MoreVert';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { D as Dropdown } from '../_verture/index-bde7aabe.js';
+import { Tooltip } from '../Tooltip/index.js';
+import clsx from 'clsx';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Down';
+import '@paraview/lib';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-635f66f4.js';
+import 'dayjs';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Forbid';
+import '../_verture/index-ca413216.js';
+
+var en = {
+  more: 'More'
+};
+
+var zh = {
+  more: '更多'
+};
+
+var localeJson = {
+  zh,
+  en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-auto-button {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.paraui-v4-auto-button-dropdown .auto-button-dropdown-content .item-btn {\n  height: 30px;\n  line-height: 30px;\n  color: rgb(29, 33, 38);\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-auto-button-dropdown .auto-button-dropdown-content .item-btn > .paraui-v4-auto-tips {\n  padding: 0 10px;\n}\n.paraui-v4-auto-button-dropdown .auto-button-dropdown-content .item-btn:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-auto-button-dropdown .auto-button-dropdown-content .item-btn.item-btn-disabled {\n  background-color: rgb(255, 255, 255);\n  color: rgb(161, 168, 179);\n  cursor: not-allowed;\n}";
+styleInject(css_248z);
+
+const AutoButton = props => {
+  const {
+    className,
+    style,
+    list,
+    marginRight = '16px',
+    moreProps,
+    morePlacement = 'bottomLeft',
+    moreMaxWidth = '500px',
+    trigger = ['hover']
+  } = props;
+  const intl = useFormatMessage('AutoButton', localeJson);
+  const [morePos, setMorePos] = useState(null); // 超出在原始位置
+  //const [openMoreCom, setOpenMoreCom] = useState<boolean>(false); // 显示更多
+  const comRef = useRef(null);
+  const constData = useRef({
+    timer: null
+  });
+  useEffect(() => {
+    changeSize();
+    window.addEventListener('resize', changeSize);
+    return () => {
+      window.removeEventListener('resize', changeSize);
+      clearTimeout(constData.current.timer);
+    };
+  }, [list]);
+  const changeSize = () => {
+    clearTimeout(constData.current.timer);
+    //closeMore();
+    constData.current.timer = setTimeout(() => {
+      setMorePos(list.length);
+      if (list.length > 1) handMultiline();
+    }, 100);
+  };
+  const handMultiline = index => {
+    if (index === null || index === 0) return;
+    if (index === undefined) index = list.length;
+    const boxDom = comRef.current;
+    if (!boxDom) return;
+    if (boxDom.scrollWidth > boxDom.clientWidth) {
+      const num = Number(index) - 1;
+      // 超出
+      setMorePos(num);
+      handMultiline(num);
+    }
+  };
+  /** 更多每一项点击事件 */
+  const clickBtn = (item, event, parentItem) => {
+    if (parentItem) {
+      parentItem.onClick && parentItem.onClick(item, event);
+      return;
+    }
+    item.onClick && item.onClick(event);
+  };
+  /** 更多每一项内容 */
+  const renderMoreContentItem = (item, label, parentItem) => {
+    return jsx("div", Object.assign({
+      className: clsx('item-btn', {
+        'item-btn-disabled': item.disabled
+      }),
+      onClick: event => {
+        if (item.disabled) return;
+        clickBtn(item, event, parentItem);
+      }
+    }, {
+      children: jsx(AutoTips, Object.assign({
+        placement: "top-start"
+      }, {
+        children: item[label]
+      }))
+    }));
+  };
+  /** 更多每一项 */
+  const renderMoreItem = (item, label, parentItem) => {
+    if (item.disabled && item.disabledTooltip) {
+      return jsx(Tooltip, Object.assign({
+        disabled: true
+      }, item.disabledTooltip, {
+        children: renderMoreContentItem(item, label, parentItem)
+      }));
+    }
+    return renderMoreContentItem(item, label, parentItem);
+  };
+  /** 更多按钮浮层内容 */
+  const handleMoreOverlay = () => {
+    return jsx("div", Object.assign({
+      className: 'auto-button-dropdown-content',
+      style: {
+        maxWidth: moreMaxWidth
+      }
+    }, {
+      children: list && list.map((item, index) => {
+        var _a;
+        if (morePos !== null && morePos > index) return null;
+        if (item.buttonType !== 'split') {
+          return jsx(Fragment, {
+            children: renderMoreItem(item, 'children')
+          }, index);
+        }
+        return jsx(Fragment, {
+          children: (_a = item.options) === null || _a === void 0 ? void 0 : _a.map((itemChild, inx) => {
+            return jsx(Fragment, {
+              children: renderMoreItem(itemChild, 'label', item)
+            }, index + '-' + inx);
+          })
+        }, index);
+      })
+    }));
+  };
+  /** 更多按钮 */
+  const handleMoreBtn = () => {
+    if (!(morePos !== null && list.length > morePos)) return null;
+    const {
+      buttonType,
+      icon = jsx(MoreVert, {}),
+      children = intl({
+        id: 'more'
+      })
+    } = moreProps || {};
+    let Dom = jsx(Button, Object.assign({
+      variant: "outlined",
+      startIcon: icon,
+      className: "auto-button-more"
+    }, {
+      children: children
+    }));
+    if (buttonType === 'icon') {
+      Dom = jsx(Button, Object.assign({
+        variant: "outlined",
+        className: "auto-button-more"
+      }, {
+        children: icon
+      }));
+    }
+    return jsx(Dropdown, Object.assign({
+      overlayClassName: "".concat($prefixCls, "-auto-button-dropdown"),
+      overlay: handleMoreOverlay(),
+      placement: morePlacement,
+      trigger: trigger
+    }, {
+      children: Dom
+    }));
+  };
+  return jsxs("div", Object.assign({
+    className: clsx(className, "".concat($prefixCls, "-auto-button")),
+    style: style,
+    ref: comRef
+  }, {
+    children: [list.map((item, index) => {
+      if (morePos !== null && morePos <= index) return null;
+      const {
+          buttonType
+        } = item,
+        otherItemProps = __rest(item, ["buttonType"]);
+      let Dom = Button;
+      const styleItem = {
+        marginRight: morePos === index + 1 ? 0 : marginRight
+      };
+      // 存在更多按钮
+      if (morePos !== null && list.length > morePos) styleItem.marginRight = marginRight;
+      if (buttonType === 'icon') {
+        Dom = Button.IconButton;
+      }
+      if (buttonType === 'split') {
+        Dom = Button.SplitButton;
+      }
+      return jsx(Dom, Object.assign({}, otherItemProps, {
+        style: styleItem
+      }), index);
+    }), handleMoreBtn()]
+  }));
+};
+
+export { AutoButton, AutoButton as default };

package/AutoButton/lang/en_US.d.ts

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

package/AutoButton/lang/index.d.ts

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

package/AutoButton/lang/zh_CN.d.ts

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

package/Badge/index.d.ts

@@ -12,12 +12,14 @@ export interface BadgeProps {
     style?: React.CSSProperties;
     /** 内容 */
     children?: ReactNode;
-    /** 标记内容, 不传为圆点类型 */
+    /** 标记内容, 不传为圆点类型, null不显示 */
     sign?: ReactNode;
     /** 背景色 */
     backgroundColor?: string;
     /** 文字色 */
     color?: string;
+    /** 偏移量 */
+    offset?: [number, number];
 }
 export declare const Badge: FunctionComponent<BadgeProps>;
 export default Badge;

package/Badge/index.js

@@ -13,24 +13,34 @@ const Badge = props => {
     children,
     sign,
     backgroundColor,
-    color
+    color,
+    offset
   } = props;
   // 判断数据类型
   const handleType = () => {
     const type = typeof sign;
     if (type === 'undefined') return 'dot';
     if (type === 'number') return 'number';
+    if (sign === null) {
+      return 'null';
+    }
     return 'text';
   };
   const type = handleType();
   // 标记内容
   const handleSign = () => {
+    if (type === null) return null;
+    const styleSign = {
+      backgroundColor,
+      color
+    };
+    if (offset) {
+      styleSign.right = -offset[0] + 'px';
+      styleSign.marginTop = offset[1] + 'px';
+    }
     return jsxs("span", Object.assign({
       className: "pos-box ".concat(type),
-      style: {
-        backgroundColor,
-        color
-      }
+      style: styleSign
     }, {
       children: [type === 'number' && jsx("span", {
         children: handleNumber()

package/Card/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @author linhd
+ * @date 2024/8/6 10:02
+ * @description 卡片
+ */
+import React, { FunctionComponent, ReactNode } from 'react';
+import './index.scss';
+export interface CardItemProps {
+    render?: ReactNode;
+    style?: React.CSSProperties;
+    [name: string]: any;
+}
+export interface CardLineNumProps {
+    /** 容器宽度 */
+    width: number;
+    /** 展示个数 */
+    size: number;
+}
+export interface CardProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 数据源 */
+    list?: CardItemProps[];
+    /** box-shadow, 是否带投影 */
+    boxShadow?: boolean | string;
+    /** border, 是否边框 */
+    border?: boolean | string;
+    /** 背景图片 */
+    backgroundImage?: string;
+    /** 宽度与每行个数互斥 默认300px */
+    width?: string;
+    /** 高度 默认140ox */
+    height?: string;
+    /** 每行个数与宽度互斥 */
+    lineNum?: number | CardLineNumProps[];
+    /** 右间距 默认20px */
+    marginRight?: string;
+    /** 下间距 默认20px */
+    marginBottom?: string;
+    /** 是否显示加载更多 */
+    showMore?: boolean;
+    /** 加载更多内容 */
+    moreRender?: ReactNode;
+    /** loading */
+    loadingMoreRender?: ReactNode;
+    /** 加载更多事件 */
+    onMore?: () => Promise<void> | void;
+    [name: string]: any;
+}
+export declare const Card: FunctionComponent<CardProps>;
+export default Card;

package/Card/index.js

@@ -0,0 +1,218 @@
+import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import clsx from 'clsx';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-1fc7c957.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/index-ca413216.js';
+import '@paraview/lib';
+
+var en = {
+  more: 'Mouse scrolling to load more data',
+  loadingMore: 'Loading...'
+};
+
+var zh = {
+  more: '鼠标滚动，加载更多数据',
+  loadingMore: '数据正在加载中…'
+};
+
+var localeJson = {
+  zh,
+  en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-card {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n}\n.paraui-v4-card > .card-list {\n  display: flex;\n  flex-wrap: wrap;\n}\n.paraui-v4-card > .card-list > .card-item {\n  border-radius: 4px;\n  overflow: auto;\n}\n.paraui-v4-card > .more {\n  text-align: center;\n}\n.paraui-v4-card > .more > .more-content {\n  font-size: 14px;\n  text-align: center;\n  color: rgb(161, 168, 179);\n  display: inline-block;\n}\n.paraui-v4-card.paraui-v4-card-more > .more > .more-content {\n  cursor: pointer;\n}\n.paraui-v4-card.paraui-v4-card-more > .more > .more-content:hover {\n  color: rgb(46, 101, 230);\n}";
+styleInject(css_248z);
+
+const Card = props => {
+  const {
+    className,
+    style,
+    list,
+    boxShadow,
+    border,
+    backgroundImage,
+    width = '300px',
+    height = '140px',
+    lineNum,
+    marginRight = '20px',
+    marginBottom = '20px',
+    showMore = false,
+    moreRender,
+    loadingMoreRender,
+    onMore
+  } = props;
+  const intl = useFormatMessage('Card', localeJson);
+  const [lineNumCom, setLineNumCom] = useState();
+  //const [itemWidth, setItemWidth] = useState<string>('');
+  const [loadingMore, setLoadingMore] = useState(false);
+  const constData = useRef({});
+  const refBox = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    window.removeEventListener('resize', resize);
+    (_a = refBox.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', scroll);
+    window.addEventListener('resize', resize);
+    (_b = refBox.current) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', scroll);
+    return () => {
+      var _a;
+      window.removeEventListener('resize', resize);
+      (_a = refBox.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', scroll);
+    };
+  }, [showMore, onMore]);
+  useEffect(() => {
+    resize();
+  }, [list, lineNum]);
+  const resize = () => {
+    if (!refBox.current) return;
+    const refBoxRect = refBox.current.getBoundingClientRect();
+    const card = refBox.current.querySelector('.card-list');
+    const cardRect = card.getBoundingClientRect();
+    const cardItem = refBox.current.querySelector('.card-list > .card-item');
+    const cardItemRect = cardItem.getBoundingClientRect();
+    const cardItemMarginRight = parseFloat(cardItem.style.marginRight);
+    const scrollWidth = refBoxRect.width - cardRect.width; // 滚动条宽度
+    const boxWidt = scrollWidth !== 0 ? refBoxRect.width - scrollWidth - 4 : refBoxRect.width;
+    let n = Math.floor((boxWidt + cardItemMarginRight) / (cardItemRect.width + cardItemMarginRight));
+    if (props.width === undefined && props.lineNum) {
+      if (typeof lineNum === "number") {
+        n = lineNum;
+      } else {
+        const arr = props.lineNum.sort((a, b) => a.width - b.width);
+        for (let i = 0, l = arr.length; i < l; i++) {
+          const item = arr[i];
+          if (item.width > refBoxRect.width) {
+            n = item.size;
+            break;
+          } else {
+            if (i === arr.length - 1) {
+              n = item.size;
+            }
+          }
+        }
+      }
+      //constData.current.itemWidth = (refBoxRect.width + cardItemMarginRight) / n - cardItemMarginRight;
+      let rightTotal = (n - 1) * cardItemMarginRight;
+      if (scrollWidth) {
+        // 出现滚动条，加4
+        rightTotal = rightTotal + 4;
+      }
+      const right = rightTotal / n + 'px';
+      constData.current.itemWidth = "calc(".concat(1 / n * 100, "% - ").concat(right, ")");
+      //setItemWidth(constData.current.itemWidth);
+      const cardArr = refBox.current.querySelectorAll('.card-list > .card-item');
+      cardArr.forEach(item => {
+        item.style.width = constData.current.itemWidth;
+      });
+    }
+    if (n !== constData.current.lineNumCom) {
+      constData.current.lineNumCom = n;
+      setLineNumCom(n);
+    }
+  };
+  const scroll = () => {
+    var _a, _b, _c;
+    if (!showMore || !refBox.current || !props.onMore || constData.current.loadingMore) return;
+    if (refBox.current.scrollHeight - (refBox.current.clientHeight + refBox.current.scrollTop) < 1) {
+      if (((_a = constData.current.pos) === null || _a === void 0 ? void 0 : _a.clientHeight) === refBox.current.clientHeight && ((_b = constData.current.pos) === null || _b === void 0 ? void 0 : _b.scrollTop) === refBox.current.scrollTop && ((_c = constData.current.pos) === null || _c === void 0 ? void 0 : _c.scrollHeight) === refBox.current.scrollHeight) {
+        constData.current.pos = {};
+        return;
+      }
+      constData.current.pos = {
+        clientHeight: refBox.current.clientHeight,
+        scrollTop: refBox.current.scrollTop,
+        scrollHeight: refBox.current.scrollHeight
+      };
+      // 滚动到底部
+      moreFunc();
+    }
+  };
+  const moreFunc = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (constData.current.loadingMore) return;
+    constData.current.loadingMore = true;
+    setLoadingMore(true);
+    yield props.onMore();
+    setLoadingMore(false);
+    constData.current.loadingMore = false;
+  });
+  const handleStyleItem = (item, index) => {
+    const styleCard = {
+      height,
+      marginBottom,
+      marginRight
+    };
+    if (boxShadow) {
+      if (boxShadow === true) {
+        styleCard.boxShadow = '1px 1px 10px 2px rgba(212,218,227,0.40)';
+      } else {
+        styleCard.boxShadow = boxShadow;
+      }
+    }
+    if (border) {
+      if (border === true) {
+        styleCard.border = '1px solid rgba(212, 218, 227, 0.4)';
+      } else {
+        styleCard.border = border;
+      }
+    }
+    if (backgroundImage) {
+      styleCard.backgroundImage = backgroundImage;
+      styleCard.backgroundSize = '100% 100%';
+      styleCard.backgroundRepeat = 'no-repeat';
+    }
+    // 默认宽度
+    if (lineNum === undefined) {
+      styleCard.width = width;
+    }
+    /*if (props.width === undefined && lineNum) {
+        styleCard.width = constData.current.itemWidth;
+    }*/
+    if (constData.current.lineNumCom && (index + 1) % constData.current.lineNumCom === 0) {
+      styleCard.marginRight = 0;
+    }
+    return Object.assign(Object.assign({}, styleCard), item.style);
+  };
+  const handleMore = () => {
+    if (loadingMore) {
+      return loadingMoreRender ? loadingMoreRender : intl({
+        id: 'loadingMore'
+      });
+    }
+    return moreRender ? moreRender : intl({
+      id: 'more'
+    });
+  };
+  return jsxs("div", Object.assign({
+    className: clsx(className, "".concat($prefixCls, "-card"), {
+      ["".concat($prefixCls, "-card-more")]: showMore && !loadingMore
+    }),
+    style: style,
+    ref: refBox
+  }, {
+    children: [jsx("div", Object.assign({
+      className: 'card-list'
+    }, {
+      children: list === null || list === void 0 ? void 0 : list.map((item, index) => {
+        return jsx("div", Object.assign({
+          className: 'card-item',
+          style: handleStyleItem(item, index)
+        }, {
+          children: item.render
+        }), index);
+      })
+    })), showMore && jsx("div", Object.assign({
+      className: 'more'
+    }, {
+      children: jsx("div", Object.assign({
+        className: 'more-content',
+        onClick: moreFunc
+      }, {
+        children: handleMore()
+      }))
+    }))]
+  }));
+};
+
+export { Card, Card as default };

package/Card/lang/en_US.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    more: string;
+    loadingMore: string;
+};
+export default _default;

package/Card/lang/index.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    zh: {
+        more: string;
+        loadingMore: string;
+    };
+    en: {
+        more: string;
+        loadingMore: string;
+    };
+};
+export default _default;

package/Card/lang/zh_CN.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    more: string;
+    loadingMore: string;
+};
+export default _default;

package/Cascader/index.js

@@ -1,17 +1,17 @@
-import { C as Cascader } from '../_verture/index-8ec857b4.js';
-export { C as default } from '../_verture/index-8ec857b4.js';
+import { C as Cascader } from '../_verture/index-8752ccab.js';
+export { C as default } from '../_verture/index-8752ccab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import 'react/jsx-runtime';
-import '../_verture/Portal-5bf66fed.js';
-import '../_verture/slicedToArray-a8206399.js';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../_verture/Portal-edd94cac.js';
+import '../_verture/slicedToArray-75fa4188.js';
 import 'react';
 import 'react-dom';
-import '../_verture/defineProperty-f0e15205.js';
-import '../_verture/toConsumableArray-8f4c9589.js';
+import '../_verture/typeof-adeedc13.js';
+import '../_verture/toConsumableArray-c7a8028f.js';
+import '../_verture/defineProperty-6f62bb2a.js';
 import 'rc-motion';
 import 'clsx';
-import '../_verture/typeof-6ec38efd.js';
+import '../_verture/typeof-4646b22c.js';
 import 'rc-tree/lib/utils/conductUtil';
 import '@para-ui/icons/Right';
 import '@para-ui/icons/Down';