@para-ui/core 3.0.55 → 3.0.56

package/Status/index.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.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/11/8 6:32 PM\n* @description 状态\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-status {\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-status .status-ink {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n}\n.paraui-v3-status .status-ink:before {\n  content: \" \";\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n}\n.paraui-v3-status .status-icon {\n  display: inline-flex;\n  font-size: 16px;\n}\n.paraui-v3-status .status-icon svg {\n  font-size: 16px;\n}\n.paraui-v3-status .status-text {\n  margin-left: 4px;\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-status-info .status-ink {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-status-info .status-ink:before {\n  background-color: #3666d6;\n}\n.paraui-v3-status-success .status-ink {\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-status-success .status-ink:before {\n  background-color: #53c31b;\n}\n.paraui-v3-status-warning .status-ink {\n  background-color: rgba(255, 161, 80, 0.05);\n}\n.paraui-v3-status-warning .status-ink:before {\n  background-color: #ffa150;\n}\n.paraui-v3-status-error .status-ink {\n  background-color: rgba(235, 96, 84, 0.05);\n}\n.paraui-v3-status-error .status-ink:before {\n  background-color: #eb6054;\n}\n.paraui-v3-status-completed .status-ink {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-status-completed .status-ink:before {\n  background-color: rgba(46, 55, 67, 0.4);\n}";
+styleInject(css_248z);
+
+//状态
+var Status = function Status(props) {
+  var text = props.text,
+    _props$status = props.status,
+    status = _props$status === void 0 ? 'info' : _props$status,
+    icon = props.icon,
+    className = props.className,
+    style = props.style;
+  //cls
+  var makeCls = clsx("".concat($prefixCls, "-status"), className, status && !icon && "".concat($prefixCls, "-status-").concat(status));
+  return jsxs("span", Object.assign({
+    className: makeCls,
+    style: style
+  }, {
+    children: [icon ? jsx("span", Object.assign({
+      className: "status-icon"
+    }, {
+      children: icon
+    })) : jsx("span", {
+      className: "status-ink"
+    }), jsx("span", Object.assign({
+      className: "status-text"
+    }, {
+      children: text
+    }))]
+  }));
+};
+
+export { Status, Status as default };

package/Stepper/icons.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const Icons: {
+    [index: string]: React.ReactElement;
+};
+export default Icons;

package/Stepper/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @author Hanz
+ * @date 2022/6/7 下午4:02
+ * @description stepper
+ */
+import React from 'react';
+import RcSteps from 'rc-steps';
+import './index.scss';
+type StepItem = string | {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    [name: string]: any;
+};
+export interface StepperProps {
+    /** cls */
+    className?: string;
+    /** 当前步骤 */
+    current?: number;
+    /** 指定步骤条方向 */
+    direction?: 'horizontal' | 'vertical';
+    style?: React.CSSProperties;
+    /** 数字或图标 */
+    mode?: 'number' | 'icon';
+    /** 当前步骤 */
+    activeStep?: number;
+    /**
+     * 步骤条数据
+     * number : Array<string>
+     * icon : Array<{ label: string, icon: ReactNode }>
+     */
+    steps?: StepItem[];
+    [name: string]: any;
+}
+export interface StepProps {
+    /** 步骤cls */
+    className?: string;
+    /** 步骤描述 */
+    description?: React.ReactNode;
+    /** 步骤图标 */
+    icon?: React.ReactNode;
+    /** 点击步骤时触发 */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** 步骤状态 */
+    status?: 'wait' | 'process' | 'finish' | 'error';
+    /** 禁用点击 */
+    disabled?: boolean;
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 子标题 */
+    subTitle?: React.ReactNode;
+    /** 步骤样式 */
+    style?: React.CSSProperties;
+}
+interface StepsType extends React.FC<StepperProps> {
+    /** 步骤组件 */
+    Step: typeof RcSteps.Step;
+}
+export declare const Stepper: StepsType;
+export default Stepper;

package/Stepper/index.js

@@ -0,0 +1,97 @@
+import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import RcSteps from 'rc-steps';
+import One from '@para-ui/icons/One';
+import Two from '@para-ui/icons/Two';
+import Three from '@para-ui/icons/Three';
+import Four from '@para-ui/icons/Four';
+import Five from '@para-ui/icons/Five';
+import Six from '@para-ui/icons/Six';
+import Seven from '@para-ui/icons/Seven';
+import Eight from '@para-ui/icons/Eight';
+import Nine from '@para-ui/icons/Nine';
+import Check from '@para-ui/icons/Check';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
+import clsx from 'clsx';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+
+//默认图标
+var Icons = {
+  1: jsx(One, {}),
+  2: jsx(Two, {}),
+  3: jsx(Three, {}),
+  4: jsx(Four, {}),
+  5: jsx(Five, {}),
+  6: jsx(Six, {}),
+  7: jsx(Seven, {}),
+  8: jsx(Eight, {}),
+  9: jsx(Nine, {}),
+  'done': jsx(Check, {})
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/26 下午2:57\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-stepper {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  font-variant: tabular-nums;\n  line-height: 1.5715;\n  list-style: none;\n  font-feature-settings: \"tnum\";\n  display: flex;\n  width: 100%;\n  text-align: initial;\n}\n.paraui-v3-stepper .component-stepper-item {\n  position: relative;\n  display: inline-block;\n  flex: 1;\n  vertical-align: top;\n}\n.paraui-v3-stepper .component-stepper-item-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  outline: none;\n}\n.paraui-v3-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-tail,\n.paraui-v3-stepper .component-stepper-item:last-child > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper .component-stepper-item-icon,\n.paraui-v3-stepper .component-stepper-item-content {\n  display: block;\n  vertical-align: top;\n}\n.paraui-v3-stepper .component-stepper-item-icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  width: 30px;\n  height: 30px;\n  font-size: 16px;\n  line-height: 30px;\n  text-align: center;\n  border-radius: 50%;\n  background-color: rgba(171, 176, 185, 0.12);\n  transition: background-color 0.3s, border-color 0.3s;\n}\n.paraui-v3-stepper .component-stepper-item-icon .component-stepper-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(46, 55, 67, 0.7);\n  vertical-align: middle;\n}\n.paraui-v3-stepper .component-stepper-item-icon .component-stepper-icon svg {\n  color: inherit;\n}\n.paraui-v3-stepper .component-stepper-item-tail {\n  position: absolute;\n  top: 12px;\n  left: 0;\n  width: 100%;\n  padding: 0 10px;\n}\n.paraui-v3-stepper .component-stepper-item-tail::after {\n  display: inline-block;\n  width: 100%;\n  height: 1px;\n  border-radius: 1px;\n  transition: background 0.3s;\n  content: \"\";\n}\n.paraui-v3-stepper .component-stepper-item-title {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 30px;\n}\n.paraui-v3-stepper .component-stepper-item-title::after {\n  position: absolute;\n  display: block;\n  height: 1px;\n  content: \"\";\n  top: 15px;\n  left: calc(50% + 30px);\n  right: calc(-50% + 30px);\n}\n.paraui-v3-stepper .component-stepper-item-subtitle {\n  display: inline;\n  margin-left: 8px;\n  color: rgb(46, 55, 67);\n  font-weight: normal;\n  font-size: 14px;\n}\n.paraui-v3-stepper .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-stepper .component-stepper-item-wait .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  border-top: 1px dashed rgba(171, 176, 185, 0.4);\n  height: 0;\n  background: transparent;\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-wait > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px dashed rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background: linear-gradient(90deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background: linear-gradient(180deg, rgb(61, 102, 248), rgb(119, 147, 249) 74%, rgb(216, 223, 250));\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-process > .component-stepper-item-container > .component-stepper-item-title {\n  font-weight: 400;\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon {\n  background-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-stepper .component-stepper-item-finish .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-stepper .component-stepper-item-finish > .component-stepper-item-container > .component-stepper-item-tail::after {\n  border-left: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon {\n  background-color: rgb(255, 255, 255);\n  border-color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error .component-stepper-item-icon > .component-stepper-icon .component-stepper-icon-dot {\n  background: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-description {\n  color: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-error > .component-stepper-item-container > .component-stepper-item-tail::after {\n  background-color: rgba(248, 249, 251, 0.8);\n}\n.paraui-v3-stepper .component-stepper-item.component-stepper-next-error .component-stepper-item-title::after {\n  background: rgb(235, 96, 84);\n}\n.paraui-v3-stepper .component-stepper-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] {\n  cursor: pointer;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-title,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-subtitle,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-description,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button] .component-stepper-item-icon .component-stepper-icon {\n  transition: color 0.3s;\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-title,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-subtitle,\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active) > .component-stepper-item-container[role=button]:hover .component-stepper-item-description {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper .component-stepper-item:not(.component-stepper-item-active):not(.component-stepper-item-process) > .component-stepper-item-container[role=button]:hover .component-stepper-item-icon .component-stepper-icon {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon {\n  height: auto;\n  border: 0;\n}\n.paraui-v3-stepper .component-stepper-item-custom > .component-stepper-item-container > .component-stepper-item-icon > .component-stepper-icon {\n  top: 0;\n  left: 0;\n  width: 30px;\n  height: 30px;\n  background-color: rgba(171, 176, 185, 0.12);\n  border-radius: 50%;\n}\n.paraui-v3-stepper .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon > .component-stepper-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  white-space: nowrap;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:last-child .component-stepper-item-title {\n  padding-right: 0;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-tail {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item-description {\n  max-width: 140px;\n  white-space: normal;\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom .component-stepper-item-icon {\n  width: auto;\n  background: none;\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-process .component-stepper-item-icon {\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-stepper.component-stepper:not(.component-stepper-vertical) .component-stepper-item-custom.component-stepper-item-finish .component-stepper-item-icon {\n  background: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item {\n  padding-left: 12px;\n}\n.paraui-v3-stepper.component-stepper-small.component-stepper-horizontal:not(.component-stepper-label-vertical) .component-stepper-item:first-child {\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-icon {\n  width: 24px;\n  height: 24px;\n  margin: 0 8px 0 0;\n  font-size: 12px;\n  line-height: 24px;\n  text-align: center;\n  border-radius: 24px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-title {\n  padding-right: 12px;\n  font-size: 14px;\n  line-height: 24px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-title::after {\n  top: 12px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-description {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-tail {\n  top: 8px;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon {\n  width: inherit;\n  height: inherit;\n  line-height: inherit;\n  background: none;\n  border: 0;\n  border-radius: 0;\n}\n.paraui-v3-stepper.component-stepper-small .component-stepper-item-custom .component-stepper-item-icon > .component-stepper-icon {\n  font-size: 24px;\n  line-height: 24px;\n  transform: none;\n}\n.paraui-v3-stepper.component-stepper-vertical {\n  display: flex;\n  flex-direction: column;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item {\n  display: block;\n  flex: 1 0 auto;\n  padding-left: 0;\n  overflow: visible;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-icon {\n  float: left;\n  margin-right: 16px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-content {\n  display: block;\n  min-height: 68px;\n  overflow: hidden;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-title {\n  line-height: 32px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item .component-stepper-item-description {\n  padding-bottom: 12px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 15px;\n  width: 1px;\n  height: 100%;\n  padding: 36px 0 6px;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-tail::after {\n  width: 1px;\n  height: 100%;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item:not(:last-child) > .component-stepper-item-container > .component-stepper-item-tail {\n  display: block;\n}\n.paraui-v3-stepper.component-stepper-vertical > .component-stepper-item > .component-stepper-item-container > .component-stepper-item-content > .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-tail {\n  position: absolute;\n  top: 0;\n  left: 12px;\n  padding: 30px 0 6px;\n}\n.paraui-v3-stepper.component-stepper-vertical.component-stepper-small .component-stepper-item-container .component-stepper-item-title {\n  line-height: 24px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item {\n  overflow: visible;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-tail {\n  margin-left: 58px;\n  padding: 3.5px 24px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-content {\n  display: block;\n  width: 116px;\n  margin-top: 8px;\n  text-align: center;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-icon {\n  display: inline-block;\n  margin-left: 42px;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-title {\n  padding-right: 0;\n  padding-left: 0;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-title::after {\n  display: none;\n}\n.paraui-v3-stepper.component-stepper-label-vertical .component-stepper-item-subtitle {\n  display: block;\n  margin-bottom: 4px;\n  margin-left: 0;\n  line-height: 1.5715;\n}\n.paraui-v3-stepper.component-stepper-label-vertical.component-stepper-small:not(.component-stepper-dot) .component-stepper-item-icon {\n  margin-left: 46px;\n}";
+styleInject(css_248z);
+
+//steps
+var Stepper = function Stepper(props) {
+  var _props$current = props.current,
+    current = _props$current === void 0 ? 0 : _props$current,
+    activeStep = props.activeStep,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'number' : _props$mode,
+    steps = props.steps,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    children = props.children,
+    className = props.className,
+    restProps = __rest(props, ["current", "activeStep", "mode", "steps", "direction", "children", "className"]);
+  var prefixCls = "".concat($rcPrefixCls, "-stepper");
+  //内置finish、error 图标
+  var icons = {
+    finish: Icons['done'],
+    error: Icons['done']
+  };
+  //步骤图标渲染
+  var stepIconRender = function stepIconRender(_ref) {
+    var node = _ref.node,
+      status = _ref.status;
+    if (status === 'finish') {
+      return /*#__PURE__*/React__default.cloneElement(node, {}, Icons['done']);
+    }
+    return node;
+  };
+  //渲染Step
+  var renderStep = function renderStep() {
+    if (!(steps === null || steps === void 0 ? void 0 : steps.length)) return children;
+    return steps.map(function (item, index) {
+      var label = '';
+      var icon = null;
+      if (mode === 'number') {
+        label = item;
+        icon = Icons[index + 1];
+      } else if (_typeof(item) === 'object') {
+        label = item.label;
+        icon = item.icon;
+      }
+      return jsx(Stepper.Step, {
+        title: label,
+        icon: icon
+      }, index);
+    });
+  };
+  return jsx(RcSteps, Object.assign({}, restProps, {
+    className: clsx("".concat($prefixCls, "-stepper"), className),
+    current: activeStep !== null && activeStep !== void 0 ? activeStep : current,
+    icons: icons,
+    direction: direction,
+    stepIcon: stepIconRender,
+    prefixCls: prefixCls
+  }, {
+    children: renderStep()
+  }));
+};
+Stepper.Step = RcSteps.Step;
+
+export { Stepper, Stepper as default };

package/Switch/index.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @author Hanz
+ * @date 2021/8/5
+ * @description switch 开关
+ */
+import React, { FunctionComponent, ReactNode } from 'react';
+import { LabelTooltipProps } from '../Label';
+import "./index.scss";
+type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent | React.KeyboardEvent) => void;
+type SwitchClickEventHandler = SwitchChangeEventHandler;
+export interface SwitchProps {
+    /**
+     * 开关大小
+     */
+    size?: 'small' | 'default';
+    /**
+     * 类名
+     */
+    className?: string;
+    /**
+     * style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 是否选中
+     */
+    checked?: boolean;
+    /**
+     * 默认是否选中
+     */
+    defaultChecked?: boolean;
+    /**
+     * 变化时回调函数
+     */
+    onChange?: SwitchChangeEventHandler;
+    /**
+     * 点击时回调函数
+     */
+    onClick?: SwitchClickEventHandler;
+    /**
+     * 选中的是内容
+     */
+    checkedChildren?: React.ReactNode;
+    /**
+     * 非选中时内容
+     */
+    unCheckedChildren?: React.ReactNode;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否显示loading
+     */
+    loading?: boolean;
+    /**
+     * 自动获得焦点
+     */
+    autoFocus?: boolean;
+    /**
+     * 紧凑型开关
+     */
+    compact?: boolean;
+    /**
+     * 标题
+     */
+    label?: ReactNode;
+    /**
+     * 帮助提示
+     */
+    labelTooltip?: LabelTooltipProps;
+    /**
+     * 标题位置
+     */
+    labelPlacement?: 'top' | 'bottom' | 'start' | 'end';
+}
+export declare const Switch: FunctionComponent<SwitchProps>;
+export default Switch;

package/Switch/index.js

@@ -0,0 +1,71 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import RcSwitch from 'rc-switch';
+import clsx from 'clsx';
+import LoadingOutlined from '@para-ui/icons/LoadingF';
+import Label from '../Label/index.js';
+import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../Help/index.js';
+import '../Tooltip/index.js';
+import '../_verture/slicedToArray-76060636.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import 'react';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Help';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/3 下午5:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-switch {\n  position: relative;\n  display: inline-block;\n  min-width: 32px;\n  height: 18px;\n  vertical-align: middle;\n  background-color: transparent;\n  border: 0;\n  border-radius: 100px;\n  cursor: pointer;\n  transition: all 0.2s;\n  user-select: none;\n}\n.paraui-v3-switch:before {\n  position: absolute;\n  top: 2px;\n  left: 0;\n  width: 100%;\n  height: 14px;\n  border-radius: 100px;\n  background-color: rgba(171, 176, 185, 0.4);\n  content: \"\";\n  transition: all 0.2s;\n}\n.paraui-v3-switch:focus {\n  outline: 0;\n  box-shadow: none;\n}\n.paraui-v3-switch.component-switch-checked:focus {\n  box-shadow: none;\n}\n.paraui-v3-switch:focus:hover {\n  box-shadow: none;\n}\n.paraui-v3-switch.component-switch-checked:before {\n  background-color: rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-switch-loading, .paraui-v3-switch.component-switch-disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.paraui-v3-switch-loading *, .paraui-v3-switch.component-switch-disabled * {\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.paraui-v3-switch .component-switch-inner {\n  display: block;\n  margin: 0 7px 0 25px;\n  color: rgb(255, 255, 255);\n  font-size: 14px;\n  transition: margin 0.2s;\n}\n.paraui-v3-switch.component-switch-checked .component-switch-inner {\n  margin: 0 25px 0 7px;\n}\n.paraui-v3-switch .component-switch-handle {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.2s ease-in-out;\n}\n.paraui-v3-switch .component-switch-handle::before {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: #8996AA;\n  border-radius: 9px;\n  box-shadow: none;\n  transition: all 0.2s ease-in-out;\n  content: \"\";\n}\n.paraui-v3-switch.component-switch-checked .component-switch-handle {\n  left: calc(100% - 18px);\n}\n.paraui-v3-switch.component-switch-checked .component-switch-handle::before {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-switch:not(.paraui-v3-switch-disabled):active .component-switch-handle::before {\n  right: -30%;\n  left: 0;\n}\n.paraui-v3-switch:not(.paraui-v3-switch-disabled):active.component-switch-checked .component-switch-handle::before {\n  right: 0;\n  left: -30%;\n}\n.paraui-v3-switch .component-switch-loading-icon {\n  position: relative;\n  top: 1px;\n  color: rgb(54, 102, 214);\n  vertical-align: top;\n  animation: switchLoadingCircle 1s infinite linear;\n}\n.paraui-v3-switch.component-switch-checked .component-switch-loading-icon {\n  color: rgb(255, 255, 255);\n}\n.paraui-v3-switch-small {\n  min-width: 28px;\n  height: 14px;\n  line-height: 14px;\n}\n.paraui-v3-switch-small .component-switch-inner {\n  margin: 0 5px 0 18px;\n  font-size: 14px;\n}\n.paraui-v3-switch-small .component-switch-handle {\n  width: 12px;\n  height: 12px;\n  top: 3px;\n  left: 2px;\n}\n.paraui-v3-switch-small .component-switch-loading-icon {\n  top: 1.5px;\n  font-size: 9px;\n}\n.paraui-v3-switch-small.component-switch-checked .component-switch-inner {\n  margin: 0 18px 0 5px;\n}\n.paraui-v3-switch-small.component-switch-checked .component-switch-handle {\n  left: calc(100% - 12px - 2px);\n}\n@keyframes switchLoadingCircle {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.paraui-v3-switch-label {\n  display: inline-flex;\n}\n.paraui-v3-switch-label .component-switch-text {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-switch-label-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n.paraui-v3-switch-label-top .component-switch-text {\n  margin-bottom: 8px;\n}\n.paraui-v3-switch-label-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.paraui-v3-switch-label-bottom .component-switch-text {\n  margin-top: 8px;\n  margin-bottom: 0;\n}\n.paraui-v3-switch-label-start {\n  flex-direction: row-reverse;\n  align-items: center;\n}\n.paraui-v3-switch-label-start .component-switch-text {\n  margin-right: 8px;\n  margin-bottom: 0;\n}\n.paraui-v3-switch-label-end {\n  flex-direction: row;\n  align-items: center;\n}\n.paraui-v3-switch-label-end .component-switch-text {\n  margin-left: 8px;\n  margin-bottom: 0;\n}";
+styleInject(css_248z);
+
+//Switch 开关
+var Switch = function Switch(props) {
+  props.compact;
+    props.size;
+    var loading = props.loading,
+    disabled = props.disabled,
+    className = props.className,
+    label = props.label,
+    labelTooltip = props.labelTooltip,
+    _props$labelPlacement = props.labelPlacement,
+    labelPlacement = _props$labelPlacement === void 0 ? 'top' : _props$labelPlacement,
+    restProps = __rest(props, ["compact", "size", "loading", "disabled", "className", "label", "labelTooltip", "labelPlacement"]);
+  //cls
+  var classes = clsx("".concat($prefixCls, "-switch"), _defineProperty({}, "".concat($prefixCls, "-switch-loading"), loading), className);
+  //label cls
+  var labelClasses = clsx("".concat($prefixCls, "-switch-label"), "".concat($prefixCls, "-switch-label-").concat(labelPlacement));
+  //loading circle
+  var loadingIcon = jsx("div", Object.assign({
+    className: "".concat($rcPrefixCls, "-switch-handle")
+  }, {
+    children: loading && jsx(LoadingOutlined, {
+      className: "".concat($rcPrefixCls, "-switch-loading-icon")
+    })
+  }));
+  if (label) {
+    return jsxs("span", Object.assign({
+      className: labelClasses
+    }, {
+      children: [jsx(RcSwitch, Object.assign({}, restProps, {
+        prefixCls: "".concat($rcPrefixCls, "-switch"),
+        className: classes,
+        disabled: disabled || loading,
+        loadingIcon: loadingIcon
+      })), jsx(Label, Object.assign({
+        label: label
+      }, labelTooltip, {
+        className: "".concat($rcPrefixCls, "-switch-text")
+      }))]
+    }));
+  }
+  return jsx(RcSwitch, Object.assign({}, restProps, {
+    prefixCls: "".concat($rcPrefixCls, "-switch"),
+    className: classes,
+    disabled: disabled || loading,
+    loadingIcon: loadingIcon
+  }));
+};
+
+export { Switch, Switch as default };

package/Table/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author linhd
+ * @date 2022/5/5 3:13 PM
+ * @description 表格
+ */
+import { FunctionComponent } from 'react';
+import { TableProps } from './interface';
+import './index.scss';
+declare const Table: FunctionComponent<TableProps>;
+export default Table;