@para-ui/core 4.0.54 → 4.0.55

package/_verture/index-7e60b72c.js

@@ -0,0 +1,593 @@
+import { _ as __rest } from './tslib.es6-55ed4bd2.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import clsx from 'clsx';
+import LoadingOutlined from '@para-ui/icons/LoadingF';
+import { Tooltip } from '../Tooltip/index.js';
+import Down from '@para-ui/icons/Down';
+import { $ as $prefixCls } from './constant-5317fc89.js';
+import { s as styleInject } from './style-inject.es-300983ab.js';
+import { D as Dropdown } from './index-bde7aabe.js';
+import { u as useFormatMessage } from './useFormatMessage-1fc7c957.js';
+import AutoTips from '../AutoTips/index.js';
+import CheckCircleF from '@para-ui/icons/CheckCircleF';
+import InfoOutlined from '@para-ui/icons/WarningCircle';
+import CloseCircleF from '@para-ui/icons/CloseCircleF';
+import WarningCircleF from '@para-ui/icons/WarningCircleF';
+import { u as usePopupContainer } from './usePopupContainer-635f66f4.js';
+
+var en$1 = {
+  moreActions: 'More actions'
+};
+
+var zh$1 = {
+  moreActions: '更多操作'
+};
+
+var localeJson$1 = {
+  zh: zh$1,
+  en: en$1
+};
+
+var en = {
+  cancel: 'Cancel',
+  ok: 'Ok'
+};
+
+var zh = {
+  cancel: '取 消',
+  ok: '确 认'
+};
+
+var localeJson = {
+  zh,
+  en
+};
+
+var css_248z$1 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/2 下午1:44\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-popconfirm.paraui-v4-tooltip {\n  position: absolute;\n  width: 440px;\n  padding: 0;\n  font-size: 14px;\n  color: initial;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 1px 1px 10px 2px rgba(212, 218, 227, 0.4);\n  border-radius: 8px;\n  border: 1px solid rgba(212, 218, 227, 0.4);\n}\n.paraui-v4-popconfirm.component-tooltip-hidden.paraui-v4-tooltip {\n  border: none;\n}\n.paraui-v4-popconfirm.paraui-v4-tooltip .component-tooltip-inner {\n  padding: 0;\n  color: initial;\n  background-color: transparent;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper {\n  padding: 16px;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message {\n  position: relative;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-icon {\n  position: absolute;\n  top: 1px;\n  color: rgb(255, 147, 38);\n  line-height: 0;\n  font-size: 18px;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-icon svg {\n  color: inherit;\n  font-size: inherit;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-body {\n  padding-left: 24px;\n  line-height: 20px;\n  font-size: 14px;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-title {\n  font-weight: 600;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-content {\n  font-weight: 400;\n  margin-top: 8px;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-content.without-title {\n  margin-top: 0;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-description {\n  margin-top: 4px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-message-description.without-title-or-content {\n  margin-top: 0;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-btns {\n  margin-top: 12px;\n  text-align: right;\n}\n.paraui-v4-popconfirm .popconfirm-wrapper .popconfirm-btns > button + button {\n  margin-left: 12px;\n}\n.paraui-v4-popconfirm .paraui-v4-popconfirm-btn {\n  min-width: 54px;\n}";
+styleInject(css_248z$1);
+
+//图标
+const iconMapping = {
+  success: jsx(CheckCircleF, {}),
+  warning: jsx(WarningCircleF, {}),
+  error: jsx(CloseCircleF, {}),
+  info: jsx(InfoOutlined, {})
+};
+//popConfirm
+const PopConfirm = props => {
+  const {
+      trigger = 'click',
+      type = 'warning',
+      title,
+      content,
+      description,
+      icon,
+      okText,
+      cancelText,
+      onOk,
+      onCancel,
+      okButtonProps,
+      cancelButtonProps,
+      placement = 'top-start',
+      className,
+      overlayClassName,
+      style,
+      children,
+      open = false,
+      controllable = false,
+      showCancel = true,
+      bubble = true,
+      okButtonDanger,
+      countdown,
+      countdownTime = 5,
+      actions,
+      onClose,
+      onCountdownFinish,
+      getPopupContainer: customizeContainer
+    } = props,
+    restProps = __rest(props, ["trigger", "type", "title", "content", "description", "icon", "okText", "cancelText", "onOk", "onCancel", "okButtonProps", "cancelButtonProps", "placement", "className", "overlayClassName", "style", "children", "open", "controllable", "showCancel", "bubble", "okButtonDanger", "countdown", "countdownTime", "actions", "onClose", "onCountdownFinish", "getPopupContainer"]);
+  const intl = useFormatMessage('PopConfirm', localeJson);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const wrapRef = useRef();
+  const getPopupContainer = usePopupContainer(wrapRef, customizeContainer);
+  //打开
+  const [inOpen, setInOpen] = useState(false);
+  const countdownTimer = useRef();
+  const [inCountdownTime, setInCountdownTime] = useState(countdownTime);
+  const isCountting = useMemo(() => countdown && inCountdownTime >= 1, [countdown, inCountdownTime]);
+  useEffect(() => {
+    if (countdown) {
+      if (inOpen) {
+        setInCountdownTime(countdownTime);
+        countdownTimer.current = setInterval(() => {
+          setInCountdownTime(pre => {
+            if (pre <= 1) {
+              onCountdownFinish === null || onCountdownFinish === void 0 ? void 0 : onCountdownFinish();
+              clearInterval(countdownTimer.current);
+              return 0;
+            }
+            return pre - 1;
+          });
+        }, 1000);
+      } else {
+        clearInterval(countdownTimer.current);
+      }
+    }
+    return () => {
+      clearInterval(countdownTimer.current);
+    };
+  }, [inOpen, countdown]);
+  //取消
+  const handleCancel = () => {
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    handleClose();
+  };
+  //确认
+  const handleOk = () => {
+    onOk === null || onOk === void 0 ? void 0 : onOk();
+    handleClose();
+  };
+  //关闭
+  const handleClose = () => {
+    if (!controllable) {
+      setInOpen(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  };
+  //tooltip vis
+  const onVisibleChange = vis => {
+    if (!controllable) {
+      setInOpen(vis);
+      if (!vis) onClose === null || onClose === void 0 ? void 0 : onClose();
+    } else {
+      if (open) onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+  };
+  useEffect(() => {
+    controllable && setInOpen(open);
+  }, [open]);
+  //渲染内容
+  const renderOverlay = () => {
+    const btns = jsxs(Fragment, {
+      children: [showCancel && jsx(Button, Object.assign({
+        className: "".concat($prefixCls, "-popconfirm-btn"),
+        onClick: handleCancel,
+        variant: 'outlined',
+        size: 'small'
+      }, cancelButtonProps, {
+        children: cancelText !== null && cancelText !== void 0 ? cancelText : intl({
+          id: 'cancel'
+        })
+      })), jsx(Button, Object.assign({
+        className: "".concat($prefixCls, "-popconfirm-btn"),
+        onClick: handleOk,
+        variant: 'contained',
+        size: 'small'
+      }, okButtonProps, {
+        danger: okButtonDanger !== null && okButtonDanger !== void 0 ? okButtonDanger : okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.danger,
+        disabled: isCountting ? true : okButtonProps === null || okButtonProps === void 0 ? void 0 : okButtonProps.disabled
+      }, {
+        children: isCountting ? "".concat(inCountdownTime, "s") : okText !== null && okText !== void 0 ? okText : intl({
+          id: 'ok'
+        })
+      }))]
+    });
+    return jsxs("div", Object.assign({
+      className: clsx('popconfirm-wrapper'),
+      style: style,
+      onClick: evt => {
+        if (!bubble) evt.stopPropagation();
+      }
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: 'popconfirm-message'
+      }, {
+        children: [jsx("span", Object.assign({
+          className: 'popconfirm-message-icon'
+        }, {
+          children: icon || iconMapping[type]
+        })), jsxs("div", Object.assign({
+          className: 'popconfirm-message-body'
+        }, {
+          children: [title && jsx("div", Object.assign({
+            className: "popconfirm-message-title"
+          }, {
+            children: title
+          })), content && jsx("div", Object.assign({
+            className: clsx('popconfirm-message-content', title ? '' : 'without-title')
+          }, {
+            children: content
+          })), description && jsx("div", Object.assign({
+            className: clsx('popconfirm-message-description', title || content ? '' : 'without-title-or-content')
+          }, {
+            children: description
+          }))]
+        }))]
+      })), jsx("div", Object.assign({
+        className: 'popconfirm-btns'
+      }, {
+        children: actions !== null && actions !== void 0 ? actions : btns
+      }))]
+    }));
+  };
+  return jsx(Tooltip, Object.assign({}, restProps, {
+    ref: wrapRef,
+    trigger: trigger,
+    open: inOpen,
+    arrow: false,
+    placement: placement,
+    title: renderOverlay(),
+    onVisibleChange: onVisibleChange,
+    overlayClassName: clsx("".concat($prefixCls, "-popconfirm"), overlayClassName, className),
+    getPopupContainer: getPopupContainer
+  }, {
+    children: children
+  }));
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/21 下午5:16\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n@keyframes buttonLoadingSpin {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-v4-button {\n  border: 0;\n  cursor: pointer;\n  display: inline-flex;\n  outline: 0;\n  position: relative;\n  align-items: center;\n  user-select: none;\n  vertical-align: middle;\n  justify-content: center;\n  text-decoration: none;\n  background-color: transparent;\n  appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  padding: 0 10px;\n  line-height: 1.5715;\n  border-radius: 4px;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  white-space: nowrap;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n  letter-spacing: 0.02857em;\n  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.paraui-v4-button .button-label {\n  width: 100%;\n  display: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n}\n.paraui-v4-button .button-icon {\n  display: inherit;\n  margin-right: 4px;\n}\n.paraui-v4-button .button-icon svg {\n  color: inherit;\n  font-weight: 500;\n}\n.paraui-v4-button .button-icon-end {\n  margin-right: 0;\n  margin-left: 4px;\n}\n.paraui-v4-button .button-icon-loading {\n  animation: buttonLoadingSpin 1s infinite linear;\n}\n.paraui-v4-button-loading {\n  pointer-events: none;\n}\n.paraui-v4-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(46, 101, 230);\n  border: 1px solid rgb(46, 101, 230);\n}\n.paraui-v4-button-contained:hover {\n  background-color: rgb(87, 131, 235);\n  border: 1px solid rgba(255, 255, 255, 0);\n}\n.paraui-v4-button-contained.paraui-v4-button-link-disabled {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-button-contained.paraui-v4-button-link-disabled:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-contained[disabled] {\n  color: rgb(92, 101, 115);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-button-contained[disabled]:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-contained.paraui-v4-button-dangerous {\n  background-color: rgb(244, 66, 66);\n  border: 1px solid rgb(244, 66, 66);\n}\n.paraui-v4-button-contained.paraui-v4-button-dangerous:hover {\n  background-color: rgb(246, 103, 103);\n  border: 1px solid rgba(255, 255, 255, 0);\n}\n.paraui-v4-button-outlined {\n  color: rgb(29, 33, 38);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-button-outlined:hover {\n  color: rgb(46, 101, 230);\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-button-outlined.paraui-v4-button-link-disabled {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-button-outlined.paraui-v4-button-link-disabled:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-outlined[disabled] {\n  color: rgb(92, 101, 115);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-button-outlined[disabled]:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-outlined.paraui-v4-button-dangerous {\n  color: rgb(244, 66, 66);\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-button-outlined.paraui-v4-button-dangerous:hover {\n  color: rgb(244, 66, 66);\n  border-color: rgb(246, 103, 103);\n}\n.paraui-v4-button-text {\n  color: rgb(46, 101, 230);\n  background-color: transparent;\n  border: none;\n  padding: unset;\n  margin: 0 10px;\n}\n.paraui-v4-button-text:hover {\n  color: rgb(87, 131, 235);\n  background-color: transparent;\n}\n.paraui-v4-button-text.paraui-v4-button-link-disabled {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-button-text.paraui-v4-button-link-disabled:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-text[disabled] {\n  color: rgb(92, 101, 115);\n  background-color: transparent;\n  border: none;\n  cursor: not-allowed;\n}\n.paraui-v4-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v4-button-text.paraui-v4-button-dangerous {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-button-text.paraui-v4-button-dangerous:hover {\n  color: rgb(246, 103, 103);\n}\n.paraui-v4-button-large {\n  height: 32px;\n}\n.paraui-v4-button-medium {\n  height: 28px;\n}\n.paraui-v4-button-small {\n  height: 28px;\n}\n.paraui-v4-button--disabled {\n  display: inline-block;\n  cursor: not-allowed;\n}\n.paraui-v4-button--disabled button {\n  pointer-events: none;\n}\n\n.paraui-v4-icon-button {\n  flex: 0 0 auto;\n  overflow: visible;\n  text-align: center;\n  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  padding: 0;\n  border-radius: 4px;\n}\n.paraui-v4-icon-button-loading {\n  pointer-events: none;\n}\n.paraui-v4-icon-button-loading .button-loading-icon {\n  display: inline-flex;\n  animation: buttonLoadingSpin 1s infinite linear;\n}\n.paraui-v4-icon-button svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v4-icon-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(46, 101, 230);\n}\n.paraui-v4-icon-button-contained:hover {\n  background-color: rgb(87, 131, 235);\n  box-shadow: none;\n}\n.paraui-v4-icon-button-contained.paraui-v4-button-link-disabled {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-icon-button-contained.paraui-v4-button-link-disabled:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-icon-button-contained[disabled] {\n  color: rgb(92, 101, 115);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-icon-button-contained[disabled]:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-icon-button-contained.paraui-v4-icon-button-dangerous {\n  background-color: rgb(244, 66, 66);\n}\n.paraui-v4-icon-button-contained.paraui-v4-icon-button-dangerous:hover {\n  background-color: rgb(246, 103, 103);\n}\n.paraui-v4-icon-button-outlined {\n  color: rgb(29, 33, 38);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n}\n.paraui-v4-icon-button-outlined:hover {\n  color: rgb(46, 101, 230);\n  border-color: rgb(87, 131, 235);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-icon-button-outlined.paraui-v4-button-link-disabled {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-icon-button-outlined.paraui-v4-button-link-disabled:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-icon-button-outlined[disabled] {\n  color: rgb(92, 101, 115);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-icon-button-outlined[disabled]:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-icon-button-outlined.paraui-v4-icon-button-dangerous {\n  color: rgb(244, 66, 66);\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-icon-button-outlined.paraui-v4-icon-button-dangerous:hover {\n  color: rgb(244, 66, 66);\n  border-color: rgb(246, 103, 103);\n}\n.paraui-v4-icon-button-text {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-icon-button-text:hover {\n  color: rgb(87, 131, 235);\n  background-color: transparent;\n}\n.paraui-v4-icon-button-text.paraui-v4-button-link-disabled {\n  pointer-events: none;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-icon-button-text.paraui-v4-button-link-disabled:hover {\n  background-color: transparent;\n}\n.paraui-v4-icon-button-text[disabled] {\n  color: rgb(161, 168, 179);\n  pointer-events: none;\n}\n.paraui-v4-icon-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-dangerous {\n  color: rgb(244, 66, 66);\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-dangerous:hover {\n  color: rgb(246, 103, 103);\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-large {\n  width: auto;\n  height: auto;\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-large svg {\n  font-size: 24px;\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-medium {\n  width: auto;\n  height: auto;\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-medium svg {\n  font-size: 20px;\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-small {\n  width: auto;\n  height: auto;\n}\n.paraui-v4-icon-button-text.paraui-v4-icon-button-small svg {\n  font-size: 20px;\n}\n.paraui-v4-icon-button-activate {\n  color: rgb(29, 33, 38);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgb(212, 218, 227);\n  color: rgb(46, 101, 230);\n  border-color: rgb(46, 101, 230);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-icon-button-activate.paraui-v4-button-link-disabled {\n  color: rgb(29, 33, 38);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-icon-button-activate.paraui-v4-button-link-disabled:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-icon-button-activate[disabled] {\n  color: rgb(92, 101, 115);\n  background-color: rgb(247, 248, 250);\n  border: 1px solid rgb(212, 218, 227);\n  cursor: not-allowed;\n}\n.paraui-v4-icon-button-activate[disabled]:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-icon-button-activate.paraui-v4-icon-button-dangerous {\n  color: rgb(244, 66, 66);\n  border-color: rgb(244, 66, 66);\n}\n.paraui-v4-icon-button-activate.paraui-v4-icon-button-dangerous:hover {\n  color: rgb(244, 66, 66);\n  border-color: rgb(246, 103, 103);\n}\n.paraui-v4-icon-button-large {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-icon-button-medium {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v4-icon-button-small {\n  width: 28px;\n  height: 28px;\n}\n\n.paraui-v4-button-split {\n  display: inline-block;\n}\n.paraui-v4-button-split .paraui-v4-button-split--active {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-button-split-list {\n  padding: 4px 0;\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-button-split-list ul .split-li {\n  padding: 5px 10px;\n  color: rgb(29, 33, 38);\n  font-size: 14px;\n  line-height: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  white-space: nowrap;\n}\n.paraui-v4-button-split-list ul .split-li:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-split-list ul .split-li.split-li--active {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-button-split-list ul .split-li.split-li--active:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-split-list ul .split-li.split-li--hover:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-button-split-list ul .split-li.split-li--disabled {\n  color: rgb(161, 168, 179);\n  cursor: not-allowed;\n}\n.paraui-v4-button-split-list ul .split-li.split-li--disabled:hover {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v4-button-split-list ul .split-li-group:not(:first-child) {\n  position: relative;\n  margin-top: 8px;\n}\n.paraui-v4-button-split-list ul .split-li-group:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -4px;\n  left: 8px;\n  right: 8px;\n  border-top: 1px solid rgb(234, 236, 241);\n}";
+styleInject(css_248z);
+
+//分体式按钮
+function SplitButton(props) {
+  const {
+    buttonText,
+    options = [],
+    className,
+    style,
+    disabled = false,
+    onClick,
+    optionRender,
+    placement = 'bottomLeft',
+    buttonProps,
+    iconButton = false,
+    popperStyle,
+    popperClassName = '',
+    getPopupContainer,
+    variant,
+    hideStartIcon,
+    optionMaxWidth = '500px',
+    optionTipsPlacement = 'top-start'
+  } = props;
+  const intl = useFormatMessage('Button', localeJson$1);
+  const btnRef = useRef();
+  // const [selectedIndex, setSelectedIndex] = useState<number | string>();
+  // button click
+  const handleButtonClick = (opt, index, event) => {
+    var _a;
+    if (opt.disabled) {
+      event.stopPropagation();
+      return;
+    }
+    // setSelectedIndex(index);
+    (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove("".concat($prefixCls, "-button-split--active"));
+    onClick === null || onClick === void 0 ? void 0 : onClick(opt, event);
+  };
+  /** 处理PopConfirm内容 */
+  const handlePopConfirm = (option, children) => {
+    if (option.popConfirmProps && !option.disabled) {
+      return jsx(PopConfirm, Object.assign({}, option.popConfirmProps, {
+        children: children
+      }));
+    }
+    return children;
+  };
+  //渲染按钮列表
+  const renderButtonList = () => {
+    // 渲染item
+    const renderItem = item => {
+      const com = (optionRender === null || optionRender === void 0 ? void 0 : optionRender(item)) || jsx(AutoTips, Object.assign({
+        placement: optionTipsPlacement
+      }, {
+        children: item.label
+      }));
+      const {
+        disabled,
+        disabledTooltip
+      } = item;
+      if (disabled && disabledTooltip) {
+        return jsx(Tooltip, Object.assign({
+          disabled: true
+        }, disabledTooltip, {
+          children: (optionRender === null || optionRender === void 0 ? void 0 : optionRender(item)) || item.label
+        }));
+      }
+      return com;
+    };
+    //分组列表
+    const generateLiGroup = (opt, index) => {
+      return jsx("li", Object.assign({
+        className: 'split-li-group'
+      }, {
+        children: opt.map((gItem, gIndex) => {
+          const idx = "".concat(index, "-").concat(gIndex);
+          return handlePopConfirm(gItem, jsx("div", Object.assign({
+            className: clsx('split-li',
+            //  idx === selectedIndex && 'split-li--active',
+            gItem.disabled ? 'split-li--disabled' : 'split-li--hover'),
+            style: {
+              maxWidth: optionMaxWidth
+            },
+            onClick: evt => handleButtonClick(gItem, idx, evt)
+          }, {
+            children: renderItem(gItem)
+          }), idx));
+        })
+      }), index);
+    };
+    return jsx("div", Object.assign({
+      className: "".concat($prefixCls, "-button-split-list")
+    }, {
+      children: jsx("ul", {
+        children: options.map((opt, index) => {
+          if (Array.isArray(opt)) {
+            //分组
+            return generateLiGroup(opt, index);
+          }
+          return handlePopConfirm(opt, jsx("li", Object.assign({
+            className: clsx('split-li',
+            // index === selectedIndex && 'split-li--active',
+            opt.disabled ? 'split-li--disabled' : 'split-li--hover'),
+            style: {
+              maxWidth: optionMaxWidth
+            },
+            onClick: evt => handleButtonClick(opt, index, evt)
+          }, {
+            children: renderItem(opt)
+          }), index));
+        })
+      })
+    }));
+  };
+  //渲染button
+  const renderButton = () => {
+    if (iconButton) {
+      if (variant) {
+        return jsx(Button.IconButton, Object.assign({
+          variant: variant,
+          size: 'small',
+          disabled: disabled
+        }, buttonProps, {
+          children: buttonText !== null && buttonText !== void 0 ? buttonText : intl({
+            id: 'moreActions'
+          })
+        }));
+      }
+      return jsx(Button.IconButton, Object.assign({
+        variant: 'text',
+        size: 'small',
+        disabled: disabled
+      }, buttonProps, {
+        children: buttonText !== null && buttonText !== void 0 ? buttonText : intl({
+          id: 'moreActions'
+        })
+      }));
+    }
+    return jsx(Button, Object.assign({
+      variant: variant || 'outlined',
+      size: 'large',
+      startIcon: hideStartIcon ? null : jsx(Down, {}),
+      disabled: disabled
+    }, buttonProps, {
+      children: buttonText !== null && buttonText !== void 0 ? buttonText : intl({
+        id: 'moreActions'
+      })
+    }));
+  };
+  return jsx("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-button-split"), className),
+    style: style
+  }, {
+    children: jsx(Dropdown, Object.assign({
+      overlay: renderButtonList(),
+      placement: placement,
+      overlayStyle: popperStyle,
+      overlayClassName: popperClassName,
+      getPopupContainer: getPopupContainer
+    }, {
+      children: renderButton()
+    }))
+  }));
+}
+
+//按钮
+const InternalButton = props => {
+  const {
+      variant = 'contained',
+      size = 'large',
+      className,
+      disabled = false,
+      children,
+      startIcon,
+      endIcon,
+      loading = false,
+      toolTipTitle = '',
+      TooltipProps,
+      danger = false,
+      href,
+      target,
+      disabledTooltip
+    } = props,
+    restProps = __rest(props, ["variant", "size", "className", "disabled", "children", "startIcon", "endIcon", "loading", "toolTipTitle", "TooltipProps", "danger", "href", "target", "disabledTooltip"]);
+  const [hasLoading, setHasLoading] = useState(false);
+  const isLinkBtn = ('href' in props);
+  //cls
+  const makeCls = () => {
+    return clsx("".concat($prefixCls, "-button"), className, "".concat($prefixCls, "-button-").concat(variant), "".concat($prefixCls, "-button-").concat(size), hasLoading && "".concat($prefixCls, "-button-loading"), danger && !disabled && "".concat($prefixCls, "-button-dangerous"), isLinkBtn && "".concat($prefixCls, "-button-link"), isLinkBtn && disabled && "".concat($prefixCls, "-button-link-disabled"));
+  };
+  //渲染按钮图标
+  const renderBtnIcon = pos => {
+    if (!hasLoading) {
+      if (pos === 'start' && startIcon) return jsx("span", Object.assign({
+        className: 'button-icon'
+      }, {
+        children: startIcon
+      }));
+      if (pos === 'end' && endIcon) return jsx("span", Object.assign({
+        className: 'button-icon button-icon-end'
+      }, {
+        children: endIcon
+      }));
+      return null;
+    }
+    if (typeof loading === 'object') {
+      const delay = loading.delay || 0;
+      setTimeout(() => setHasLoading(false), delay);
+    }
+    if (pos === 'start') return jsx("span", Object.assign({
+      className: 'button-icon button-icon-loading'
+    }, {
+      children: jsx(LoadingOutlined, {})
+    }));
+    return null;
+  };
+  //按钮
+  const renderButton = () => {
+    if (isLinkBtn) {
+      return jsxs("a", Object.assign({}, restProps, {
+        href: href,
+        target: target,
+        className: makeCls()
+      }, {
+        children: [renderBtnIcon('start'), children && jsx("span", Object.assign({
+          className: 'button-label'
+        }, {
+          children: children
+        })), renderBtnIcon('end')]
+      }));
+    }
+    return jsxs("button", Object.assign({
+      disabled: disabled,
+      type: "button",
+      className: makeCls()
+    }, restProps, {
+      children: [renderBtnIcon('start'), children && jsx("span", Object.assign({
+        className: 'button-label'
+      }, {
+        children: children
+      })), renderBtnIcon('end')]
+    }));
+  };
+  useEffect(() => {
+    setHasLoading(!!loading);
+  }, [loading]);
+  if (disabled && disabledTooltip) {
+    return jsx(Tooltip, Object.assign({
+      disabled: true
+    }, disabledTooltip, {
+      children: jsx("span", Object.assign({
+        className: "".concat($prefixCls, "-button--disabled")
+      }, {
+        children: renderButton()
+      }))
+    }));
+  }
+  if (!!toolTipTitle) {
+    return jsx(Tooltip, Object.assign({
+      arrow: false,
+      placement: 'bottomLeft'
+    }, TooltipProps, {
+      disabled: disabled,
+      title: toolTipTitle
+    }, {
+      children: disabled ? jsx("span", Object.assign({
+        className: "".concat($prefixCls, "-button--disabled")
+      }, {
+        children: renderButton()
+      })) : renderButton()
+    }));
+  }
+  return renderButton();
+};
+//icon button
+const IconButton = props => {
+  const {
+      variant = 'contained',
+      size = 'large',
+      toolTipTitle = '',
+      children,
+      className,
+      disabled = false,
+      loading = false,
+      TooltipProps,
+      danger = false,
+      href,
+      target,
+      disabledTooltip
+    } = props,
+    restProps = __rest(props, ["variant", "size", "toolTipTitle", "children", "className", "disabled", "loading", "TooltipProps", "danger", "href", "target", "disabledTooltip"]);
+  const [hasLoading, setHasLoading] = useState(false);
+  const isLinkBtn = ('href' in props);
+  //cls
+  const makeCls = () => {
+    return clsx("".concat($prefixCls, "-button ").concat($prefixCls, "-icon-button"), className, "".concat($prefixCls, "-icon-button-").concat(variant), "".concat($prefixCls, "-icon-button-").concat(size), hasLoading && "".concat($prefixCls, "-icon-button-loading"), danger && !disabled && "".concat($prefixCls, "-icon-button-dangerous"), isLinkBtn && "".concat($prefixCls, "-button-link"), isLinkBtn && disabled && "".concat($prefixCls, "-button-link-disabled"));
+  };
+  //渲染图标
+  const renderIcon = () => {
+    if (!hasLoading) return children;
+    if (typeof loading === 'object') {
+      const delay = loading.delay || 0;
+      setTimeout(() => setHasLoading(false), delay);
+    }
+    return jsx("span", Object.assign({
+      className: 'button-loading-icon'
+    }, {
+      children: jsx(LoadingOutlined, {})
+    }));
+  };
+  //icon button
+  const renderIconButton = () => {
+    if (isLinkBtn) {
+      return jsx("a", Object.assign({}, restProps, {
+        href: href,
+        target: target,
+        className: makeCls()
+      }, {
+        children: renderIcon()
+      }));
+    }
+    return jsx("button", Object.assign({}, restProps, {
+      disabled: disabled,
+      type: "button",
+      className: makeCls()
+    }, {
+      children: renderIcon()
+    }));
+  };
+  useEffect(() => {
+    setHasLoading(!!loading);
+  }, [loading]);
+  if (disabled && disabledTooltip) {
+    return jsx(Tooltip, Object.assign({
+      disabled: true
+    }, disabledTooltip, {
+      children: jsx("span", Object.assign({
+        className: "".concat($prefixCls, "-button--disabled")
+      }, {
+        children: renderIconButton()
+      }))
+    }));
+  }
+  if (!!toolTipTitle) {
+    return jsx(Tooltip, Object.assign({
+      arrow: false,
+      placement: 'bottomLeft'
+    }, TooltipProps, {
+      disabled: disabled,
+      title: toolTipTitle
+    }, {
+      children: disabled ? jsx("span", Object.assign({
+        className: "".concat($prefixCls, "-button--disabled")
+      }, {
+        children: renderIconButton()
+      })) : renderIconButton()
+    }), +hasLoading);
+  }
+  return renderIconButton();
+};
+const Button = InternalButton;
+Button.IconButton = IconButton;
+Button.SplitButton = SplitButton;
+
+export { Button as B, PopConfirm as P };

package/index.js

@@ -6,7 +6,7 @@ export { AutoButton } from './AutoButton/index.js';
 export { default as AutoTips, AutoTipsMultiline } from './AutoTips/index.js';
 export { Badge } from './Badge/index.js';
 export { Breadcrumbs } from './Breadcrumbs/index.js';
-export { Button } from './Button/index.js';
+export { B as Button, P as PopConfirm } from './_verture/index-7e60b72c.js';
 export { ButtonGroup } from './ButtonGroup/index.js';
 export { Card } from './Card/index.js';
 export { Carousel } from './Carousel/index.js';
@@ -33,8 +33,8 @@ export { default as DynamicMultiBox } from './DynamicMultiBox/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as FieldForm } from './FieldForm/index.js';
 export { default as Form } from './Form/index.js';
-export { F as FormItem } from './_verture/index-43c653bb.js';
-export { u as FunctionModal, F as FunctionModalProvider, a as useClose } from './_verture/modalContext-6ac2e323.js';
+export { F as FormItem } from './_verture/index-0e866545.js';
+export { u as FunctionModal, F as FunctionModalProvider, a as useClose } from './_verture/modalContext-3ed7e7f6.js';
 export { G as GlobalContext, c as changeConfirmLocale, g as getConfirmLocale } from './_verture/index-ca413216.js';
 export { default as Help } from './Help/index.js';
 export { default as HelperText } from './HelperText/index.js';
@@ -54,7 +54,6 @@ export { PageHeader } from './PageHeader/index.js';
 export { Pagination } from './Pagination/index.js';
 export { ParauiProvider } from './ParauiProvider/index.js';
 export { default as PasswordRules } from './PasswordRules/index.js';
-export { PopConfirm } from './PopConfirm/index.js';
 export { PopMenu } from './PopMenu/index.js';
 export { Popover } from './Popover/index.js';
 export { Progress } from './Progress/index.js';
@@ -112,6 +111,11 @@ import '@para-ui/icons/More';
 import '@para-ui/icons/MoreVert';
 import '@para-ui/icons/Return';
 import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/CheckCircleF';
+import '@para-ui/icons/WarningCircle';
+import '@para-ui/icons/CloseCircleF';
+import '@para-ui/icons/WarningCircleF';
+import './_verture/usePopupContainer-635f66f4.js';
 import 'react-slick';
 import '@para-ui/icons/RightCircleF';
 import '@para-ui/icons/LeftCircleF';
@@ -126,7 +130,6 @@ import './_verture/typeof-6ec38efd.js';
 import 'rc-motion';
 import 'rc-tree/lib/utils/conductUtil';
 import '@para-ui/icons/Right';
-import '@para-ui/icons/CloseCircleF';
 import 'rc-tree/lib/utils/treeUtil';
 import '@para-ui/icons';
 import 'rc-collapse';
@@ -142,7 +145,6 @@ import './_verture/useGlobalProps-4ae1a007.js';
 import '@para-ui/icons/Copy';
 import '@para-ui/icons/CheckS';
 import 'dayjs';
-import '@para-ui/icons/WarningCircleF';
 import 'rc-picker/es/generate/dayjs';
 import 'rc-picker';
 import '@para-ui/icons/Calendar';
@@ -156,14 +158,12 @@ import '@para-ui/icons/Check';
 import '@para-ui/icons/Refresh';
 import 'rc-drawer';
 import 'rc-dropdown';
-import './_verture/usePopupContainer-635f66f4.js';
 import '@para-ui/icons/Panel';
 import '@para-ui/icons/Drag';
 import './_verture/index-0f5ee6f7.js';
 import './_verture/sortable.esm-76fe46a4.js';
 import './_verture/isEqual-30b6f859.js';
 import '@para-ui/icons/Loading';
-import '@para-ui/icons/CheckCircleF';
 import '@para-ui/icons/LinkGroup';
 import '@para-ui/icons/UploadFile';
 import '@para-ui/icons/Help';
@@ -182,7 +182,6 @@ import '@para-ui/icons/IndentLeftFill';
 import 'rc-notification';
 import 'rc-pagination';
 import '@para-ui/icons/DoubleLeft';
-import '@para-ui/icons/WarningCircle';
 import 'rc-progress';
 import '@para-ui/icons/Plus';
 import '@para-ui/icons/EditOutline';