@para-ui/core 3.0.0 → 3.0.2

package/Button/index.js

@@ -8,6 +8,7 @@ import LoadingOutlined from '@para-ui/icons/LoadingF';
 import Forbid from '@para-ui/icons/Forbid';
 import { Tooltip } from '../Tooltip/index.js';
 import Down from '@para-ui/icons/Down';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import { Dropdown } from '../Dropdown/index.js';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-ac9d6acf.js';
@@ -29,7 +30,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/21 下午5:16\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n@keyframes loadingSpin {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-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 16px;\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-button-label {\n  width: 100%;\n  display: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n}\n.paraui-button-icon {\n  display: inherit;\n  margin-right: 4px;\n}\n.paraui-button-icon svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-button-icon-end {\n  margin-right: 0;\n  margin-left: 4px;\n}\n.paraui-button-icon-loading {\n  animation: loadingSpin 1s infinite linear;\n}\n.paraui-button-loading {\n  pointer-events: none;\n}\n.paraui-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n  box-shadow: none;\n}\n.paraui-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n  box-shadow: none;\n}\n.paraui-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-contained.paraui-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-button-contained.paraui-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n}\n.paraui-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  background-color: rgb(255, 255, 255);\n  box-shadow: none;\n}\n.paraui-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-outlined.paraui-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-button-outlined.paraui-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-button-text {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  color: rgb(54, 102, 214);\n  background-color: transparent;\n  border: none;\n}\n.paraui-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n  box-shadow: none;\n}\n.paraui-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: none;\n}\n.paraui-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-button-text.paraui-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-button-text.paraui-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-button-large {\n  height: 36px;\n}\n.paraui-button-medium {\n  height: 32px;\n}\n.paraui-button-small {\n  height: 28px;\n}\n.paraui-button--disabled {\n  display: inline-block;\n}\n\n.paraui-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-icon-button-loading {\n  pointer-events: none;\n}\n.paraui-icon-button-loading .loading-icon {\n  display: inline-flex;\n  animation: loadingSpin 1s infinite linear;\n}\n.paraui-icon-button .paraui-icon {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-icon-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n  box-shadow: none;\n}\n.paraui-icon-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n  box-shadow: none;\n}\n.paraui-icon-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-icon-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-icon-button-contained.paraui-icon-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-icon-button-contained.paraui-icon-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-icon-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n}\n.paraui-icon-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-icon-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-icon-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-icon-button-outlined.paraui-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-icon-button-outlined.paraui-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-icon-button-text {\n  color: rgb(54, 102, 214);\n}\n.paraui-icon-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n}\n.paraui-icon-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-icon-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-icon-button-text.paraui-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-icon-button-text.paraui-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-icon-button-text.paraui-icon-button-large {\n  width: auto;\n  height: auto;\n}\n.paraui-icon-button-text.paraui-icon-button-large svg {\n  font-size: 28px;\n}\n.paraui-icon-button-text.paraui-icon-button-medium {\n  width: auto;\n  height: auto;\n}\n.paraui-icon-button-text.paraui-icon-button-medium svg {\n  font-size: 24px;\n}\n.paraui-icon-button-text.paraui-icon-button-small {\n  width: auto;\n  height: auto;\n}\n.paraui-icon-button-text.paraui-icon-button-small svg {\n  font-size: 20px;\n}\n.paraui-icon-button-large {\n  width: 36px;\n  height: 36px;\n}\n.paraui-icon-button-medium {\n  width: 32px;\n  height: 32px;\n}\n.paraui-icon-button-small {\n  width: 28px;\n  height: 28px;\n}\n\n.paraui-button-split {\n  display: inline-block;\n}\n.paraui-button-split .paraui-button-split--active {\n  color: rgb(54, 102, 214);\n  box-shadow: none;\n}\n.paraui-button-split-list {\n  padding: 8px 0;\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-button-split-list ul .split-li {\n  min-width: 140px;\n  padding: 11px 12px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n}\n.paraui-button-split-list ul .split-li:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-split-list ul .split-li.split-li--active {\n  color: rgb(54, 102, 214);\n}\n.paraui-button-split-list ul .split-li.split-li--active:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-button-split-list ul .split-li.split-li--disabled {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-button-split-list ul .split-li.split-li--disabled:hover {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-button-split-list ul .split-li-group:not(:first-child) {\n  position: relative;\n  margin-top: 16px;\n}\n.paraui-button-split-list ul .split-li-group:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -8px;\n  left: 8px;\n  right: 8px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/21 下午5:16\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n@keyframes buttonLoadingSpin {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.paraui-v3-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 16px;\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-v3-button .button-label {\n  width: 100%;\n  display: inherit;\n  align-items: inherit;\n  justify-content: inherit;\n}\n.paraui-v3-button .button-icon {\n  display: inherit;\n  margin-right: 4px;\n}\n.paraui-v3-button .button-icon svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-button .button-icon-end {\n  margin-right: 0;\n  margin-left: 4px;\n}\n.paraui-v3-button .button-icon-loading {\n  animation: buttonLoadingSpin 1s infinite linear;\n}\n.paraui-v3-button-loading {\n  pointer-events: none;\n}\n.paraui-v3-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-button-contained.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-contained.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-contained.paraui-v3-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-v3-button-contained.paraui-v3-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-button-outlined.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-outlined.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-outlined.paraui-v3-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-button-outlined.paraui-v3-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-button-text {\n  color: rgb(54, 102, 214);\n  background-color: transparent;\n  border: none;\n}\n.paraui-v3-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n}\n.paraui-v3-button-text.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-button-text.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: transparent;\n  border: none;\n}\n.paraui-v3-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-button-text.paraui-v3-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-button-text.paraui-v3-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-button-large {\n  height: 36px;\n}\n.paraui-v3-button-medium {\n  height: 32px;\n}\n.paraui-v3-button-small {\n  height: 28px;\n}\n.paraui-v3-button--disabled {\n  display: inline-block;\n}\n\n.paraui-v3-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-v3-icon-button-loading {\n  pointer-events: none;\n}\n.paraui-v3-icon-button-loading .button-loading-icon {\n  display: inline-flex;\n  animation: buttonLoadingSpin 1s infinite linear;\n}\n.paraui-v3-icon-button svg {\n  color: inherit;\n  font-size: 16px;\n}\n.paraui-v3-icon-button-contained {\n  color: rgb(255, 255, 255);\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-icon-button-contained:hover {\n  background-color: rgba(54, 102, 214, 0.8);\n  box-shadow: none;\n}\n.paraui-v3-icon-button-contained.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-contained.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-contained[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-contained[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-contained.paraui-v3-icon-button-dangerous {\n  background-color: rgb(235, 96, 84);\n}\n.paraui-v3-icon-button-contained.paraui-v3-icon-button-dangerous:hover {\n  background-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-icon-button-outlined {\n  color: rgba(46, 55, 67, 0.7);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-icon-button-outlined:hover {\n  color: rgb(54, 102, 214);\n  border-color: rgba(54, 102, 214, 0.2);\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-icon-button-outlined.paraui-v3-button-link-disabled {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-outlined.paraui-v3-button-link-disabled:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-outlined[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n  background-color: rgba(171, 176, 185, 0.12);\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  cursor: default;\n  pointer-events: none;\n}\n.paraui-v3-icon-button-outlined[disabled]:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-icon-button-outlined.paraui-v3-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-icon-button-outlined.paraui-v3-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n  border-color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-icon-button-text {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-icon-button-text:hover {\n  color: rgba(54, 102, 214, 0.8);\n  background-color: transparent;\n}\n.paraui-v3-icon-button-text.paraui-v3-button-link-disabled {\n  pointer-events: none;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-icon-button-text.paraui-v3-button-link-disabled:hover {\n  background-color: transparent;\n}\n.paraui-v3-icon-button-text[disabled] {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-icon-button-text[disabled]:hover {\n  background-color: transparent;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-dangerous {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-dangerous:hover {\n  color: rgba(235, 96, 84, 0.8);\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-large {\n  width: auto;\n  height: auto;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-large svg {\n  font-size: 28px;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-medium {\n  width: auto;\n  height: auto;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-medium svg {\n  font-size: 24px;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-small {\n  width: auto;\n  height: auto;\n}\n.paraui-v3-icon-button-text.paraui-v3-icon-button-small svg {\n  font-size: 20px;\n}\n.paraui-v3-icon-button-large {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-icon-button-medium {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-icon-button-small {\n  width: 28px;\n  height: 28px;\n}\n\n.paraui-v3-button-split {\n  display: inline-block;\n}\n.paraui-v3-button-split .paraui-v3-button-split--active {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-button-split-list {\n  padding: 8px 0;\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-button-split-list ul .split-li {\n  min-width: 140px;\n  padding: 11px 12px;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n}\n.paraui-v3-button-split-list ul .split-li:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-split-list ul .split-li.split-li--active {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-button-split-list ul .split-li.split-li--active:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-button-split-list ul .split-li.split-li--disabled {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-button-split-list ul .split-li.split-li--disabled:hover {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-button-split-list ul .split-li-group:not(:first-child) {\n  position: relative;\n  margin-top: 16px;\n}\n.paraui-v3-button-split-list ul .split-li-group:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -8px;\n  left: 8px;\n  right: 8px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n}";
 styleInject(css_248z);
 
 function SplitButton(props) {
@@ -65,7 +66,7 @@ function SplitButton(props) {
     }
 
     setSelectedIndex(index);
-    (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('paraui-button-split--active');
+    (_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);
   }; //渲染按钮列表
 
@@ -91,7 +92,7 @@ function SplitButton(props) {
     };
 
     return jsx("div", Object.assign({
-      className: 'paraui-button-split-list'
+      className: "".concat($prefixCls, "-button-split-list")
     }, {
       children: jsx("ul", {
         children: options.map(function (opt, index) {
@@ -140,7 +141,7 @@ function SplitButton(props) {
   };
 
   return jsx("div", Object.assign({
-    className: clsx('paraui-button-split', className),
+    className: clsx("".concat($prefixCls, "-button-split"), className),
     style: style
   }, {
     children: jsx(Dropdown, Object.assign({
@@ -170,28 +171,31 @@ var InternalButton = function InternalButton(props) {
       TooltipProps = props.TooltipProps,
       _props$danger = props.danger,
       danger = _props$danger === void 0 ? false : _props$danger,
-      restProps = __rest(props, ["variant", "size", "className", "disabled", "children", "startIcon", "endIcon", "loading", "toolTipTitle", "TooltipProps", "danger"]);
+      href = props.href,
+      target = props.target,
+      restProps = __rest(props, ["variant", "size", "className", "disabled", "children", "startIcon", "endIcon", "loading", "toolTipTitle", "TooltipProps", "danger", "href", "target"]);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       hasLoading = _useState2[0],
-      setHasLoading = _useState2[1]; //cls
+      setHasLoading = _useState2[1];
 
+  var isLinkBtn = ('href' in props); //cls
 
   var makeCls = function makeCls() {
-    return clsx('paraui-button', className, "paraui-button-".concat(variant), "paraui-button-".concat(size), hasLoading && 'paraui-button-loading', danger && !disabled && 'paraui-button-dangerous');
+    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"));
   }; //渲染按钮图标
 
 
   var renderBtnIcon = function renderBtnIcon(pos) {
     if (!hasLoading) {
       if (pos === 'start' && startIcon) return jsx("span", Object.assign({
-        className: 'paraui-button-icon'
+        className: 'button-icon'
       }, {
         children: startIcon
       }));
       if (pos === 'end' && endIcon) return jsx("span", Object.assign({
-        className: 'paraui-button-icon paraui-button-icon-end'
+        className: 'button-icon button-icon-end'
       }, {
         children: endIcon
       }));
@@ -206,7 +210,7 @@ var InternalButton = function InternalButton(props) {
     }
 
     if (pos === 'start') return jsx("span", Object.assign({
-      className: 'paraui-button-icon paraui-button-icon-loading'
+      className: 'button-icon button-icon-loading'
     }, {
       children: jsx(LoadingOutlined, {})
     }));
@@ -232,17 +236,33 @@ var InternalButton = function InternalButton(props) {
   }; //按钮
 
 
-  var renderButton = jsxs("button", Object.assign({}, restProps, {
-    disabled: disabled,
-    type: "button",
-    className: makeCls()
-  }, {
-    children: [renderBtnIcon('start'), children && jsx("span", Object.assign({
-      className: 'paraui-button-label'
+  var renderButton = function 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({}, restProps, {
+      disabled: disabled,
+      type: "button",
+      className: makeCls()
     }, {
-      children: children
-    })), renderBtnIcon('end')]
-  }));
+      children: [renderBtnIcon('start'), children && jsx("span", Object.assign({
+        className: 'button-label'
+      }, {
+        children: children
+      })), renderBtnIcon('end')]
+    }));
+  };
 
   useEffect(function () {
     setHasLoading(!!loading);
@@ -251,11 +271,11 @@ var InternalButton = function InternalButton(props) {
     title: generateTooltipTitle()
   }, {
     children: jsx("span", Object.assign({
-      className: 'paraui-button--disabled'
+      className: "".concat($prefixCls, "-button--disabled")
     }, {
-      children: renderButton
+      children: renderButton()
     }))
-  })) : renderButton;
+  })) : renderButton();
 }; //icon button
 
 
@@ -275,12 +295,20 @@ var IconButton = function IconButton(props) {
       TooltipProps = props.TooltipProps,
       _props$danger2 = props.danger,
       danger = _props$danger2 === void 0 ? false : _props$danger2,
-      restProps = __rest(props, ["variant", "size", "toolTipTitle", "children", "className", "disabled", "loading", "TooltipProps", "danger"]);
+      href = props.href,
+      target = props.target,
+      restProps = __rest(props, ["variant", "size", "toolTipTitle", "children", "className", "disabled", "loading", "TooltipProps", "danger", "href", "target"]);
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
       hasLoading = _useState4[0],
-      setHasLoading = _useState4[1]; //tooltip title
+      setHasLoading = _useState4[1];
+
+  var isLinkBtn = ('href' in props); //cls
+
+  var makeCls = function 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"));
+  }; //tooltip title
 
 
   var generateTooltipTitle = function generateTooltipTitle() {
@@ -312,20 +340,32 @@ var IconButton = function IconButton(props) {
     }
 
     return jsx("span", Object.assign({
-      className: 'loading-icon'
+      className: 'button-loading-icon'
     }, {
       children: jsx(LoadingOutlined, {})
     }));
   }; //icon button
 
 
-  var renderIconButton = jsx("button", Object.assign({}, restProps, {
-    disabled: disabled,
-    type: "button",
-    className: clsx('paraui-button paraui-icon-button', className, "paraui-icon-button-".concat(variant), "paraui-icon-button-".concat(size), hasLoading && 'paraui-icon-button-loading', danger && !disabled && 'paraui-icon-button-dangerous')
-  }, {
-    children: renderIcon()
-  }));
+  var renderIconButton = function 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(function () {
     setHasLoading(!!loading);
@@ -334,11 +374,11 @@ var IconButton = function IconButton(props) {
     title: generateTooltipTitle()
   }, {
     children: disabled ? jsx("span", Object.assign({
-      className: 'paraui-button--disabled'
+      className: "".concat($prefixCls, "-button--disabled")
     }, {
-      children: renderIconButton
-    })) : renderIconButton
-  }), +hasLoading) : renderIconButton;
+      children: renderIconButton()
+    })) : renderIconButton()
+  }), +hasLoading) : renderIconButton();
 };
 
 var Button = InternalButton;

package/ButtonGroup/index.js

@@ -5,6 +5,7 @@ import { Button } from '../Button/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import clsx from 'clsx';
 import Forbid from '@para-ui/icons/Forbid';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/typeof-498dd2b1.js';
 import '../_verture/slicedToArray-d7722f4b.js';
@@ -17,7 +18,7 @@ import '@para-ui/core/GlobalContext';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:39\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-button-group {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-button-group-iconSplit .paraui-icon-button:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-button-group-iconSplit.paraui-button-group-tooltip > span:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-button-group-icon {\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-button-group-icon .paraui-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-button-group-icon .paraui-icon-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-button-group-icon .paraui-icon-button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-button-group-icon .paraui-icon-button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span .paraui-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span:not(:last-child) .paraui-icon-button {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span:first-child .paraui-icon-button {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-button-group-icon.paraui-button-group-tooltip > span:last-child .paraui-icon-button {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-button-group-text .paraui-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-button-group-text .paraui-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:39\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-button-group {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-button-group-iconSplit .paraui-v3-icon-button:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-v3-button-group-iconSplit.paraui-v3-button-group-tooltip > span:not(:last-child) {\n  margin-right: 8px;\n}\n.paraui-v3-button-group-icon {\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v3-button-group-icon .paraui-v3-icon-button:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span .paraui-v3-icon-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span:not(:last-child) .paraui-v3-icon-button {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span:first-child .paraui-v3-icon-button {\n  border-radius: 4px 0 0 4px;\n}\n.paraui-v3-button-group-icon.paraui-v3-button-group-tooltip > span:last-child .paraui-v3-icon-button {\n  border-radius: 0 4px 4px 0;\n}\n.paraui-v3-button-group-text .paraui-v3-button {\n  border: none;\n  border-radius: 0;\n}\n.paraui-v3-button-group-text .paraui-v3-button:not(:last-child) {\n  border-right: 1px solid rgba(171, 176, 185, 0.4);\n}";
 styleInject(css_248z);
 
 var ButtonGroup = function ButtonGroup(props) {
@@ -118,7 +119,7 @@ var ButtonGroup = function ButtonGroup(props) {
   };
 
   return jsx("div", Object.assign({
-    className: clsx('paraui-button-group', "paraui-button-group-".concat(mode), className, showToolTip && 'paraui-button-group-tooltip'),
+    className: clsx("".concat($prefixCls, "-button-group"), "".concat($prefixCls, "-button-group-").concat(mode), className, showToolTip && "".concat($prefixCls, "-button-group-tooltip")),
     style: style
   }, {
     children: renderButtonGroup()

package/Carousel/index.js

@@ -4,9 +4,10 @@ import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import SlickCarousel from 'react-slick';
 import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/2/28 上午11:01\n* @description Carousel\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-carousel {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n}\n.paraui-carousel .slick-slider {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  touch-action: pan-y;\n  -webkit-touch-callout: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.paraui-carousel .slick-list {\n  position: relative;\n  display: block;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n.paraui-carousel .slick-list:focus {\n  outline: none;\n}\n.paraui-carousel .slick-list.dragging {\n  cursor: pointer;\n}\n.paraui-carousel .slick-list .slick-slide {\n  pointer-events: none;\n}\n.paraui-carousel .slick-list .slick-slide input.ant-radio-input,\n.paraui-carousel .slick-list .slick-slide input.ant-checkbox-input {\n  visibility: hidden;\n}\n.paraui-carousel .slick-list .slick-slide.slick-active {\n  pointer-events: auto;\n}\n.paraui-carousel .slick-list .slick-slide.slick-active input.ant-radio-input,\n.paraui-carousel .slick-list .slick-slide.slick-active input.ant-checkbox-input {\n  visibility: visible;\n}\n.paraui-carousel .slick-list .slick-slide > div > div {\n  vertical-align: bottom;\n}\n.paraui-carousel .slick-slider .slick-track,\n.paraui-carousel .slick-slider .slick-list {\n  transform: translate3d(0, 0, 0);\n  touch-action: pan-y;\n}\n.paraui-carousel .slick-track {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n}\n.paraui-carousel .slick-track::before,\n.paraui-carousel .slick-track::after {\n  display: table;\n  content: \"\";\n}\n.paraui-carousel .slick-track::after {\n  clear: both;\n}\n.paraui-carousel .slick-slide {\n  display: none;\n  float: left;\n  height: 100%;\n  min-height: 1px;\n}\n.paraui-carousel .slick-slide img {\n  display: block;\n}\n.paraui-carousel .slick-slide.slick-loading img {\n  display: none;\n}\n.paraui-carousel .slick-slide.dragging img {\n  pointer-events: none;\n}\n.paraui-carousel .slick-initialized .slick-slide {\n  display: block;\n}\n.paraui-carousel .slick-loading .slick-slide {\n  visibility: hidden;\n}\n.paraui-carousel .slick-vertical .slick-slide {\n  display: block;\n  height: auto;\n}\n.paraui-carousel .slick-arrow.slick-hidden {\n  display: none;\n}\n.paraui-carousel .slick-prev,\n.paraui-carousel .slick-next {\n  position: absolute;\n  top: 50%;\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-top: -10px;\n  padding: 0;\n  color: transparent;\n  font-size: 0;\n  line-height: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-carousel .slick-prev:hover,\n.paraui-carousel .slick-next:hover,\n.paraui-carousel .slick-prev:focus,\n.paraui-carousel .slick-next:focus {\n  color: transparent;\n  background: transparent;\n  outline: none;\n}\n.paraui-carousel .slick-prev:hover::before,\n.paraui-carousel .slick-next:hover::before,\n.paraui-carousel .slick-prev:focus::before,\n.paraui-carousel .slick-next:focus::before {\n  opacity: 1;\n}\n.paraui-carousel .slick-prev.slick-disabled::before,\n.paraui-carousel .slick-next.slick-disabled::before {\n  opacity: 0.25;\n}\n.paraui-carousel .slick-prev {\n  left: -25px;\n}\n.paraui-carousel .slick-prev::before {\n  content: \"←\";\n}\n.paraui-carousel .slick-next {\n  right: -25px;\n}\n.paraui-carousel .slick-next::before {\n  content: \"→\";\n}\n.paraui-carousel .slick-dots {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 15;\n  display: flex !important;\n  justify-content: center;\n  margin-right: 15%;\n  margin-left: 15%;\n  padding-left: 0;\n  list-style: none;\n}\n.paraui-carousel .slick-dots-bottom {\n  bottom: 12px;\n}\n.paraui-carousel .slick-dots-top {\n  top: 12px;\n  bottom: auto;\n}\n.paraui-carousel .slick-dots li {\n  position: relative;\n  display: inline-block;\n  flex: 0 1 auto;\n  box-sizing: content-box;\n  width: 16px;\n  height: 3px;\n  margin: 0 2px;\n  margin-right: 3px;\n  margin-left: 3px;\n  padding: 0;\n  text-align: center;\n  text-indent: -999px;\n  vertical-align: top;\n  transition: all 0.5s;\n}\n.paraui-carousel .slick-dots li button {\n  display: block;\n  width: 100%;\n  height: 3px;\n  padding: 0;\n  color: transparent;\n  font-size: 0;\n  background: rgb(255, 255, 255);\n  border: 0;\n  border-radius: 1px;\n  outline: none;\n  cursor: pointer;\n  opacity: 0.3;\n  transition: all 0.5s;\n}\n.paraui-carousel .slick-dots li button:hover,\n.paraui-carousel .slick-dots li button:focus {\n  opacity: 0.75;\n}\n.paraui-carousel .slick-dots li.slick-active {\n  width: 24px;\n}\n.paraui-carousel .slick-dots li.slick-active button {\n  background: rgb(255, 255, 255);\n  opacity: 1;\n}\n.paraui-carousel .slick-dots li.slick-active:hover,\n.paraui-carousel .slick-dots li.slick-active:focus {\n  opacity: 1;\n}\n.paraui-carousel .slick-loading .paraui-carousel .slick-track {\n  visibility: hidden;\n}\n.paraui-carousel-vertical .slick-dots {\n  top: 50%;\n  bottom: auto;\n  flex-direction: column;\n  width: 3px;\n  height: auto;\n  margin: 0;\n  transform: translateY(-50%);\n}\n.paraui-carousel-vertical .slick-dots-left {\n  right: auto;\n  left: 12px;\n}\n.paraui-carousel-vertical .slick-dots-right {\n  right: 12px;\n  left: auto;\n}\n.paraui-carousel-vertical .slick-dots li {\n  width: 3px;\n  height: 16px;\n  margin: 4px 2px;\n  vertical-align: baseline;\n}\n.paraui-carousel-vertical .slick-dots li button {\n  width: 3px;\n  height: 16px;\n}\n.paraui-carousel-vertical .slick-dots li.slick-active {\n  width: 3px;\n  height: 24px;\n}\n.paraui-carousel-vertical .slick-dots li.slick-active button {\n  width: 3px;\n  height: 24px;\n}\n.paraui-carousel-rtl {\n  direction: rtl;\n}\n.paraui-carousel-rtl .paraui-carousel .slick-track {\n  right: 0;\n  left: auto;\n}\n.paraui-carousel-rtl .paraui-carousel .slick-prev {\n  right: -25px;\n  left: auto;\n}\n.paraui-carousel-rtl .paraui-carousel .slick-prev::before {\n  content: \"→\";\n}\n.paraui-carousel-rtl .paraui-carousel .slick-next {\n  right: auto;\n  left: -25px;\n}\n.paraui-carousel-rtl .paraui-carousel .slick-next::before {\n  content: \"←\";\n}\n.paraui-carousel-rtl.paraui-carousel .slick-dots {\n  flex-direction: row-reverse;\n}\n.paraui-carousel-rtl.paraui-carousel-vertical .slick-dots {\n  flex-direction: column;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/2/28 上午11:01\n* @description Carousel\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-carousel {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  line-height: 1.5715;\n  list-style: none;\n}\n.paraui-v3-carousel .slick-slider {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  touch-action: pan-y;\n  -webkit-touch-callout: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.paraui-v3-carousel .slick-list {\n  position: relative;\n  display: block;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n.paraui-v3-carousel .slick-list:focus {\n  outline: none;\n}\n.paraui-v3-carousel .slick-list.dragging {\n  cursor: pointer;\n}\n.paraui-v3-carousel .slick-list .slick-slide {\n  pointer-events: none;\n}\n.paraui-v3-carousel .slick-list .slick-slide input.ant-radio-input,\n.paraui-v3-carousel .slick-list .slick-slide input.ant-checkbox-input {\n  visibility: hidden;\n}\n.paraui-v3-carousel .slick-list .slick-slide.slick-active {\n  pointer-events: auto;\n}\n.paraui-v3-carousel .slick-list .slick-slide.slick-active input.ant-radio-input,\n.paraui-v3-carousel .slick-list .slick-slide.slick-active input.ant-checkbox-input {\n  visibility: visible;\n}\n.paraui-v3-carousel .slick-list .slick-slide > div > div {\n  vertical-align: bottom;\n}\n.paraui-v3-carousel .slick-slider .slick-track,\n.paraui-v3-carousel .slick-slider .slick-list {\n  transform: translate3d(0, 0, 0);\n  touch-action: pan-y;\n}\n.paraui-v3-carousel .slick-track {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n}\n.paraui-v3-carousel .slick-track::before,\n.paraui-v3-carousel .slick-track::after {\n  display: table;\n  content: \"\";\n}\n.paraui-v3-carousel .slick-track::after {\n  clear: both;\n}\n.paraui-v3-carousel .slick-slide {\n  display: none;\n  float: left;\n  height: 100%;\n  min-height: 1px;\n}\n.paraui-v3-carousel .slick-slide img {\n  display: block;\n}\n.paraui-v3-carousel .slick-slide.slick-loading img {\n  display: none;\n}\n.paraui-v3-carousel .slick-slide.dragging img {\n  pointer-events: none;\n}\n.paraui-v3-carousel .slick-initialized .slick-slide {\n  display: block;\n}\n.paraui-v3-carousel .slick-loading .slick-slide {\n  visibility: hidden;\n}\n.paraui-v3-carousel .slick-vertical .slick-slide {\n  display: block;\n  height: auto;\n}\n.paraui-v3-carousel .slick-arrow.slick-hidden {\n  display: none;\n}\n.paraui-v3-carousel .slick-prev,\n.paraui-v3-carousel .slick-next {\n  position: absolute;\n  top: 50%;\n  display: block;\n  width: 20px;\n  height: 20px;\n  margin-top: -10px;\n  padding: 0;\n  color: transparent;\n  font-size: 0;\n  line-height: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\n.paraui-v3-carousel .slick-prev:hover,\n.paraui-v3-carousel .slick-next:hover,\n.paraui-v3-carousel .slick-prev:focus,\n.paraui-v3-carousel .slick-next:focus {\n  color: transparent;\n  background: transparent;\n  outline: none;\n}\n.paraui-v3-carousel .slick-prev:hover::before,\n.paraui-v3-carousel .slick-next:hover::before,\n.paraui-v3-carousel .slick-prev:focus::before,\n.paraui-v3-carousel .slick-next:focus::before {\n  opacity: 1;\n}\n.paraui-v3-carousel .slick-prev.slick-disabled::before,\n.paraui-v3-carousel .slick-next.slick-disabled::before {\n  opacity: 0.25;\n}\n.paraui-v3-carousel .slick-prev {\n  left: -25px;\n}\n.paraui-v3-carousel .slick-prev::before {\n  content: \"←\";\n}\n.paraui-v3-carousel .slick-next {\n  right: -25px;\n}\n.paraui-v3-carousel .slick-next::before {\n  content: \"→\";\n}\n.paraui-v3-carousel .slick-dots {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 15;\n  display: flex !important;\n  justify-content: center;\n  margin-right: 15%;\n  margin-left: 15%;\n  padding-left: 0;\n  list-style: none;\n}\n.paraui-v3-carousel .slick-dots-bottom {\n  bottom: 12px;\n}\n.paraui-v3-carousel .slick-dots-top {\n  top: 12px;\n  bottom: auto;\n}\n.paraui-v3-carousel .slick-dots li {\n  position: relative;\n  display: inline-block;\n  flex: 0 1 auto;\n  box-sizing: content-box;\n  width: 16px;\n  height: 3px;\n  margin: 0 2px;\n  margin-right: 3px;\n  margin-left: 3px;\n  padding: 0;\n  text-align: center;\n  text-indent: -999px;\n  vertical-align: top;\n  transition: all 0.5s;\n}\n.paraui-v3-carousel .slick-dots li button {\n  display: block;\n  width: 100%;\n  height: 3px;\n  padding: 0;\n  color: transparent;\n  font-size: 0;\n  background: rgb(255, 255, 255);\n  border: 0;\n  border-radius: 1px;\n  outline: none;\n  cursor: pointer;\n  opacity: 0.3;\n  transition: all 0.5s;\n}\n.paraui-v3-carousel .slick-dots li button:hover,\n.paraui-v3-carousel .slick-dots li button:focus {\n  opacity: 0.75;\n}\n.paraui-v3-carousel .slick-dots li.slick-active {\n  width: 24px;\n}\n.paraui-v3-carousel .slick-dots li.slick-active button {\n  background: rgb(255, 255, 255);\n  opacity: 1;\n}\n.paraui-v3-carousel .slick-dots li.slick-active:hover,\n.paraui-v3-carousel .slick-dots li.slick-active:focus {\n  opacity: 1;\n}\n.paraui-v3-carousel .slick-loading .paraui-v3-carousel .slick-track {\n  visibility: hidden;\n}\n.paraui-v3-carousel-vertical .slick-dots {\n  top: 50%;\n  bottom: auto;\n  flex-direction: column;\n  width: 3px;\n  height: auto;\n  margin: 0;\n  transform: translateY(-50%);\n}\n.paraui-v3-carousel-vertical .slick-dots-left {\n  right: auto;\n  left: 12px;\n}\n.paraui-v3-carousel-vertical .slick-dots-right {\n  right: 12px;\n  left: auto;\n}\n.paraui-v3-carousel-vertical .slick-dots li {\n  width: 3px;\n  height: 16px;\n  margin: 4px 2px;\n  vertical-align: baseline;\n}\n.paraui-v3-carousel-vertical .slick-dots li button {\n  width: 3px;\n  height: 16px;\n}\n.paraui-v3-carousel-vertical .slick-dots li.slick-active {\n  width: 3px;\n  height: 24px;\n}\n.paraui-v3-carousel-vertical .slick-dots li.slick-active button {\n  width: 3px;\n  height: 24px;\n}\n.paraui-v3-carousel-rtl {\n  direction: rtl;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-track {\n  right: 0;\n  left: auto;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-prev {\n  right: -25px;\n  left: auto;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-prev::before {\n  content: \"→\";\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-next {\n  right: auto;\n  left: -25px;\n}\n.paraui-v3-carousel-rtl .paraui-v3-carousel .slick-next::before {\n  content: \"←\";\n}\n.paraui-v3-carousel-rtl.paraui-v3-carousel .slick-dots {\n  flex-direction: row-reverse;\n}\n.paraui-v3-carousel-rtl.paraui-v3-carousel-vertical .slick-dots {\n  flex-direction: column;\n}";
 styleInject(css_248z);
 
 var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -18,7 +19,8 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       draggable = _props$draggable === void 0 ? false : _props$draggable,
       _props$dotPosition = props.dotPosition,
       dotPosition = _props$dotPosition === void 0 ? 'bottom' : _props$dotPosition,
-      restProps = __rest(props, ["dots", "arrows", "draggable", "dotPosition"]);
+      className = props.className,
+      restProps = __rest(props, ["dots", "arrows", "draggable", "dotPosition", "className"]);
 
   var slickRef = React__default.useRef(); //切换到指定面板
 
@@ -51,7 +53,7 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     newProps.fade = true;
   }
 
-  var prefixCls = 'paraui-carousel';
+  var prefixCls = "".concat($prefixCls, "-carousel");
   var dotsClass = 'slick-dots';
   newProps.vertical = dotPosition === 'left' || dotPosition === 'right'; //启用dots
 
@@ -59,9 +61,9 @@ var Carousel = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
 
   var dsClass = clsx(dotsClass, "".concat(dotsClass, "-").concat(dotPosition), typeof dots === 'boolean' ? false : dots === null || dots === void 0 ? void 0 : dots.className); //组件cls
 
-  var className = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-vertical"), newProps.vertical));
+  var cls = clsx(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-vertical"), newProps.vertical));
   return jsx("div", Object.assign({
-    className: className
+    className: cls
   }, {
     children: jsx(SlickCarousel, Object.assign({
       ref: slickRef

package/Cascader/index.d.ts

@@ -31,6 +31,7 @@ interface Option {
  * @param disabled{ Boolean }: 是否禁用
  * @param placeholder{ String }: 占位符
  * @param loadData{ Function }: 加载数据的方法
+ * @param children{ React.ReactNode }: 子节点
  */
 interface Props {
     data: Option[];
@@ -47,6 +48,7 @@ interface Props {
     size?: 'small' | 'medium' | 'large';
     loadData?: (selectedOptions: Option[], setState?: React.Dispatch<React.SetStateAction<Option[]>>) => void;
     loadingIcon?: React.ReactNode;
+    children?: React.ReactNode;
 }
-export declare const Cascader: ({ data, expandTrigger, value, onChange, onDropdownVisibleChange, changeOnSelect, expandIcon, expandJoin, fieldNames, disabled, placeholder, loadData, loadingIcon, }: Props) => JSX.Element;
+export declare const Cascader: ({ data, expandTrigger, value, onChange, onDropdownVisibleChange, changeOnSelect, expandIcon, expandJoin, fieldNames, disabled, placeholder, loadData, loadingIcon, children, }: Props) => JSX.Element;
 export default Cascader;

package/Cascader/index.js

@@ -8,6 +8,7 @@ import RcCascader from 'rc-cascader';
 import Right from '@para-ui/icons/Right';
 import LoadingIcon from '@para-ui/icons/Loading';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-ac9d6acf.js';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '@para-ui/core/GlobalContext';
 
@@ -24,7 +25,7 @@ var localeJson = {
   en: en
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.cascader input {\n  color: #333;\n  width: 560px;\n  padding: 6px 12px;\n  overflow: hidden;\n  box-sizing: border-box;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  border-radius: 4px;\n  border: 1px solid #d9d9d9;\n}\n\n.rc-cascader {\n  font-size: 12px;\n}\n.rc-cascader-dropdown-hidden {\n  display: none;\n}\n.rc-cascader-menus {\n  font-size: 12px;\n  overflow: hidden;\n  background: #fff;\n  position: absolute;\n  border: 1px solid #d9d9d9;\n  border-radius: 4px;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);\n  white-space: nowrap;\n}\n.rc-cascader-menus.slide-up-enter, .rc-cascader-menus.slide-up-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n  animation-play-state: paused;\n}\n.rc-cascader-menus.slide-up-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  opacity: 1;\n  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n  animation-play-state: paused;\n}\n.rc-cascader-menus.slide-up-enter.slide-up-enter-active, .rc-cascader-menus-placement-bottomLeft, .rc-cascader-menus.slide-up-appear.slide-up-appear-active, .rc-cascader-menus-placement-bottomLeft {\n  animation-name: SlideUpIn;\n  animation-play-state: running;\n}\n.rc-cascader-menus.slide-up-enter.slide-up-enter-active, .rc-cascader-menus-placement-topLeft, .rc-cascader-menus.slide-up-appear.slide-up-appear-active, .rc-cascader-menus-placement-topLeft {\n  animation-name: SlideDownIn;\n  animation-play-state: running;\n}\n.rc-cascader-menus.slide-up-leave.slide-up-leave-active, .rc-cascader-menus-placement-bottomLeft {\n  animation-name: SlideUpOut;\n  animation-play-state: running;\n}\n.rc-cascader-menus.slide-up-leave.slide-up-leave-active, .rc-cascader-menus-placement-topLeft {\n  animation-name: SlideDownOut;\n  animation-play-state: running;\n}\n.rc-cascader-menu {\n  display: inline-block;\n  min-width: 100px;\n  height: 192px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border-right: 1px solid #e9e9e9;\n  overflow: auto;\n}\n.rc-cascader-menu:last-child {\n  border-right: 0;\n}\n.rc-cascader-menu-item {\n  height: 32px;\n  line-height: 32px;\n  padding: 0 16px;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s ease;\n  position: relative;\n}\n.rc-cascader-menu-item:hover {\n  background: rgba(171, 176, 185, 0.231372549);\n}\n.rc-cascader-menu-item-disabled {\n  cursor: not-allowed;\n  color: #ccc;\n}\n.rc-cascader-menu-item-disabled:hover {\n  background: transparent;\n}\n.rc-cascader-menu-item-active {\n  color: #3666d6;\n}\n.rc-cascader-menu-item-loading-icon {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.rc-cascader-menu-item-expand {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.rc-cascader-menu-item-expand-icon {\n  font-size: 12px;\n  margin-left: 10px;\n}\n.rc-cascader-menu-item-expand-icon SVG {\n  display: flex;\n  align-items: center;\n}\n.rc-cascader-menu-item-expand-icon SVG path {\n  fill: #999;\n}\n\n@keyframes SlideUpIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n}\n@keyframes SlideUpOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0.8);\n  }\n}\n@keyframes SlideDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n}\n@keyframes SlideDownOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0.8);\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-cascader input {\n  color: #333;\n  width: 560px;\n  padding: 6px 12px;\n  overflow: hidden;\n  box-sizing: border-box;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  border-radius: 4px;\n  border: 1px solid #d9d9d9;\n}\n.paraui-v3-cascader button {\n  background: transparent;\n  border: none;\n}\n\n.paraui-v3-cascader.component-cascader-dropdown-hidden {\n  display: none;\n}\n.paraui-v3-cascader .component-cascader-menus {\n  font-size: 12px;\n  overflow: hidden;\n  background: #fff;\n  position: absolute;\n  border: 1px solid #d9d9d9;\n  border-radius: 4px;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);\n  white-space: nowrap;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-enter, .paraui-v3-cascader .component-cascader-menus.slide-up-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  opacity: 0;\n  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n  animation-play-state: paused;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  transform-origin: 0 0;\n  opacity: 1;\n  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n  animation-play-state: paused;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-enter.slide-up-enter-active, .paraui-v3-cascader .component-cascader-menus-placement-bottomLeft, .paraui-v3-cascader .component-cascader-menus.slide-up-appear.slide-up-appear-active, .paraui-v3-cascader .component-cascader-menus-placement-bottomLeft {\n  animation-name: SlideUpIn;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-enter.slide-up-enter-active, .paraui-v3-cascader .component-cascader-menus-placement-topLeft, .paraui-v3-cascader .component-cascader-menus.slide-up-appear.slide-up-appear-active, .paraui-v3-cascader .component-cascader-menus-placement-topLeft {\n  animation-name: SlideDownIn;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-leave.slide-up-leave-active, .paraui-v3-cascader .component-cascader-menus-placement-bottomLeft {\n  animation-name: SlideUpOut;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menus.slide-up-leave.slide-up-leave-active, .paraui-v3-cascader .component-cascader-menus-placement-topLeft {\n  animation-name: SlideDownOut;\n  animation-play-state: running;\n}\n.paraui-v3-cascader .component-cascader-menu {\n  display: inline-block;\n  min-width: 100px;\n  height: 192px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  border-right: 1px solid #e9e9e9;\n  overflow: auto;\n}\n.paraui-v3-cascader .component-cascader-menu:last-child {\n  border-right: 0;\n}\n.paraui-v3-cascader .component-cascader-menu-item {\n  height: 32px;\n  line-height: 32px;\n  padding: 0 16px;\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s ease;\n  position: relative;\n}\n.paraui-v3-cascader .component-cascader-menu-item:hover {\n  background: rgba(171, 176, 185, 0.231372549);\n}\n.paraui-v3-cascader .component-cascader-menu-item-disabled {\n  cursor: not-allowed;\n  color: #ccc;\n}\n.paraui-v3-cascader .component-cascader-menu-item-disabled:hover {\n  background: transparent;\n}\n.paraui-v3-cascader .component-cascader-menu-item-active {\n  color: #3666d6;\n}\n.paraui-v3-cascader .component-cascader-menu-item-loading-icon {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand-icon {\n  font-size: 12px;\n  margin-left: 10px;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand-icon SVG {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-cascader .component-cascader-menu-item-expand-icon SVG path {\n  fill: #999;\n}\n\n@keyframes SlideUpIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n}\n@keyframes SlideUpOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 0%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 0%;\n    transform: scaleY(0.8);\n  }\n}\n@keyframes SlideDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n}\n@keyframes SlideDownOut {\n  0% {\n    opacity: 1;\n    transform-origin: 0% 100%;\n    transform: scaleY(1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 0% 100%;\n    transform: scaleY(0.8);\n  }\n}";
 styleInject(css_248z);
 
 var Cascader = function Cascader(_ref) {
@@ -65,7 +66,8 @@ var Cascader = function Cascader(_ref) {
     }));
   } : _ref$loadData,
       _ref$loadingIcon = _ref.loadingIcon,
-      loadingIcon = _ref$loadingIcon === void 0 ? jsx(LoadingIcon, {}) : _ref$loadingIcon;
+      loadingIcon = _ref$loadingIcon === void 0 ? jsx(LoadingIcon, {}) : _ref$loadingIcon,
+      children = _ref.children;
   var intl = useFormatMessage('Cascader', localeJson);
 
   var _useState = useState(data),
@@ -113,7 +115,7 @@ var Cascader = function Cascader(_ref) {
   };
 
   return jsx("div", Object.assign({
-    className: "cascader"
+    className: $prefixCls + '-cascader'
   }, {
     children: jsx(RcCascader, Object.assign({
       options: option,
@@ -125,9 +127,15 @@ var Cascader = function Cascader(_ref) {
       loadData: loadingData,
       loadingIcon: loadingIcon,
       onDropdownVisibleChange: onDropdownVisibleChange,
-      value: inputValue
+      value: inputValue,
+      prefixCls: $rcPrefixCls + '-cascader',
+      dropdownClassName: $prefixCls + '-cascader'
     }, {
-      children: jsx("input", {
+      children: children ? jsx("button", Object.assign({
+        disabled: disabled
+      }, {
+        children: children
+      })) : jsx("input", {
         value: inputLabel,
         readOnly: true,
         disabled: disabled,

package/Checkbox/index.js

@@ -2,6 +2,7 @@ import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import Label from '../Label/index.js';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../Help/index.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
@@ -11,7 +12,7 @@ import 'rc-tooltip/lib/placements';
 import 'clsx';
 import '@para-ui/icons/Help';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-check-box {\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  cursor: pointer;\n  display: inline-flex;\n  align-items: flex-start;\n  line-height: 16px;\n}\n.paraui-check-box:hover > .paraui-check-box-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-check-box:hover > .paraui-check-box-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-check-box:hover > .paraui-help {\n  padding: 0 8px;\n}\n.paraui-check-box:hover > .paraui-help > .paraui-check-box-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-check-box:hover > .paraui-help > .paraui-check-box-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-check-box:hover > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-check-box > .paraui-checkbox-box {\n  position: relative;\n}\n.paraui-check-box > .paraui-checkbox-box > input {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.paraui-check-box > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n  border-radius: 2px;\n  background-color: white;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-check-box > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  position: absolute;\n  display: table;\n  content: \" \";\n}\n.paraui-check-box > .paraui-check-box-label {\n  color: rgb(46, 55, 67);\n  padding: 0 8px;\n  margin: 0;\n  display: inline-flex;\n  align-items: flex-start;\n}\n.paraui-check-box > .paraui-check-box-label > .paraui-help > svg {\n  top: 0;\n}\n.paraui-check-box .paraui-label {\n  line-height: 16px;\n}\n.paraui-check-box > .paraui-help {\n  padding: 0 8px;\n}\n.paraui-check-box > .paraui-help > .paraui-check-box-label {\n  color: rgb(46, 55, 67);\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-check-box.check-box-checked:hover > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-check-box.check-box-checked > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-check-box.check-box-checked > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  border: 1px solid white;\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(1) translate(-50%, -50%);\n}\n.paraui-check-box.check-box-indeterminate:hover > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-check-box.check-box-indeterminate > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-check-box.check-box-indeterminate > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  background-color: white;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n}\n.paraui-check-box.check-box-disabled {\n  cursor: not-allowed;\n}\n.paraui-check-box.check-box-disabled > .paraui-check-box-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-check-box.check-box-disabled > .paraui-check-box-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-check-box.check-box-disabled > .paraui-help > .paraui-check-box-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-check-box.check-box-disabled > .paraui-help > .paraui-check-box-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-check-box.check-box-disabled > .paraui-checkbox-box > input {\n  cursor: not-allowed;\n}\n.paraui-check-box.check-box-disabled > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-check-box.check-box-disabled.check-box-checked:hover > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-check-box.check-box-disabled.check-box-checked > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  border-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-check-box.check-box-disabled.check-box-indeterminate:hover > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-check-box.check-box-disabled.check-box-indeterminate > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  background-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-check-box.check-box-small > .paraui-checkbox-box {\n  top: 1px;\n}\n.paraui-check-box.check-box-small > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  width: 14px;\n  height: 14px;\n}\n.paraui-check-box.check-box-small.check-box-checked > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 4px;\n  height: 7px;\n}\n.paraui-check-box.check-box-small.check-box-indeterminate > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-check-box.check-box-medium > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-check-box.check-box-medium.check-box-checked > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-check-box.check-box-medium.check-box-indeterminate > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-check-box.check-box-large > .paraui-checkbox-box > .paraui-checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-check-box.check-box-large.check-box-checked > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-check-box.check-box-large.check-box-indeterminate > .paraui-checkbox-box > .paraui-checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-checkbox {\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  cursor: pointer;\n  display: inline-flex;\n  align-items: flex-start;\n  line-height: 16px;\n}\n.paraui-v3-checkbox:hover > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-help {\n  padding: 0 8px;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-box > .checkbox-box-inner {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox > .checkbox-box {\n  position: relative;\n}\n.paraui-v3-checkbox > .checkbox-box > input {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n  border-radius: 2px;\n  background-color: white;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner:after {\n  position: absolute;\n  display: table;\n  content: \" \";\n}\n.paraui-v3-checkbox > .checkbox-label {\n  color: rgb(46, 55, 67);\n  padding: 0 8px;\n  margin: 0;\n  display: inline-flex;\n  align-items: flex-start;\n}\n.paraui-v3-checkbox > .checkbox-label > .checkbox-help > svg {\n  top: 0;\n}\n.paraui-v3-checkbox .checkbox-label {\n  line-height: 16px;\n}\n.paraui-v3-checkbox > .checkbox-help {\n  padding: 0 8px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-checkbox > .checkbox-help > .checkbox-label {\n  color: rgb(46, 55, 67);\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  border: 1px solid white;\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(1) translate(-50%, -50%);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: white;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > input {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-checked > .checkbox-box > .checkbox-box-inner:after {\n  border-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-check-box-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box {\n  top: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box > .checkbox-box-inner {\n  width: 14px;\n  height: 14px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 4px;\n  height: 7px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}";
 styleInject(css_248z);
 
 var Checkbox = function Checkbox(props) {
@@ -62,16 +63,21 @@ var Checkbox = function Checkbox(props) {
 
 
   var handClass = function handClass() {
-    var str = 'paraui-check-box';
+    var str = $prefixCls + '-checkbox';
     if (className) str += ' ' + className;
-    if (size) str += ' check-box-' + size;
-    if (disabled) str += ' check-box-disabled';
-    if (indeterminate) str += ' check-box-indeterminate';else if (checkedCom) str += ' check-box-checked';
+    if (size) str += " ".concat($prefixCls, "-checkbox-").concat(size);
+    if (disabled) str += " ".concat($prefixCls, "-checkbox-disabled");
+    if (indeterminate) str += " ".concat($prefixCls, "-checkbox-indeterminate");else if (checkedCom) str += " ".concat($prefixCls, "-checkbox-checked");
+
+    if (labelTooltip && labelTooltip.tooltipType) {
+      str += " ".concat($prefixCls, "-checkbox-").concat(labelTooltip.tooltipType);
+    }
+
     return str;
   };
 
   var handLabelClass = function handLabelClass() {
-    var str = 'paraui-check-box-label';
+    var str = 'checkbox-label';
 
     if (labelTooltip && labelTooltip.className) {
       str += ' ' + labelTooltip.className;
@@ -79,6 +85,18 @@ var Checkbox = function Checkbox(props) {
 
     return str;
   };
+  /** 处理帮组classNaem */
+
+
+  var handHelpClassName = function handHelpClassName() {
+    var str = ' checkbox-help';
+
+    if (labelTooltip && labelTooltip.helpClassName) {
+      str += ' ' + labelTooltip.helpClassName;
+    }
+
+    return str;
+  };
 
   return jsxs("label", Object.assign({
     className: handClass(),
@@ -86,17 +104,18 @@ var Checkbox = function Checkbox(props) {
     style: style
   }, {
     children: [jsxs("span", Object.assign({
-      className: "paraui-checkbox-box"
+      className: "checkbox-box"
     }, {
       children: [jsx("input", Object.assign({
         type: "checkbox",
         value: checkedCom
       }, props.inputProps)), jsx("span", {
-        className: "paraui-checkbox-box-inner"
+        className: "checkbox-box-inner"
       })]
     })), label !== undefined && label !== '' && label !== null ? jsx(Label, Object.assign({
       label: label
     }, labelTooltip, {
+      helpClassName: handHelpClassName(),
       className: handLabelClass()
     })) : null]
   }));

package/CheckboxGroup/index.d.ts

@@ -6,11 +6,12 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { CheckboxProps } from '../Checkbox';
 import { LabelTooltipProps } from "../Label";
+import { HelperTextDetailProps } from "../HelperText";
 import './index.scss';
 export interface CheckboxListProps extends CheckboxProps {
     [name: string]: any;
 }
-export interface CheckboxGroupProps {
+export interface CheckboxGroupProps extends HelperTextDetailProps {
     /** 样式class */
     className?: string;
     /** style */
@@ -27,10 +28,6 @@ export interface CheckboxGroupProps {
     row?: boolean;
     /** 是否禁用 */
     disabled?: boolean;
-    /** 是否显示错误 */
-    error?: boolean;
-    /** 错误提示 */
-    helperText?: ReactNode;
     /** 默认值 不受控 */
     defaultValue?: any;
     /** 值 */