@unicom-cloud/ui 0.8.161 → 0.8.163

package/steps/Step.js

@@ -1,63 +1,64 @@
-/* 潘启宝 2026-05-21 17:02:47 星期四 山东省济南市 */
+/* 潘启宝 2026-06-02 15:43:25 星期二 山东省济南市 */
 import e from "../utils/className.js";
 import { STEPS_STEP_COMPONENT_INFO as t } from "../utils/names.js";
 import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import a from "@unicom-cloud/icons/IconUiClose";
-import o from "@unicom-cloud/icons/IconUiCheck";
+import { UI_COMMON_PREFIX as r } from "@unicom-cloud/utils/constant/ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@unicom-cloud/icons/IconUiClose";
+import s from "@unicom-cloud/icons/IconUiCheck";
 //#region components/pc/steps/Step.tsx
-function s(t, n) {
-	let { style: s, className: c, prefixCls: l, index: u = 1, current: d = 1, status: f, title: p, description: m, icon: h, nextStepError: g, type: _, customDot: v, labelPlacement: y, disabled: b, onClick: x, onChange: S, direction: C, id: w, lineless: T } = t;
-	function E(e) {
-		if (_ === "dot") return null;
-		let t = u;
-		return h ? t = h : e === "finish" ? t = /* @__PURE__ */ r(o, {}) : e === "error" && (t = /* @__PURE__ */ r(a, {})), /* @__PURE__ */ r("div", {
-			className: `${l}-icon`,
+function c(t, n) {
+	let { style: c, className: l, prefixCls: u, index: d = 1, current: f = 1, status: p, title: m, description: h, icon: g, nextStepError: _, type: v, customDot: y, labelPlacement: b, disabled: x, onClick: S, onChange: C, direction: w, id: T, lineless: E } = t;
+	function D(e) {
+		if (v === "dot") return null;
+		let t = d;
+		return g ? t = g : e === "finish" ? t = /* @__PURE__ */ i(s, {}) : e === "error" && (t = /* @__PURE__ */ i(o, {})), /* @__PURE__ */ i("div", {
+			className: `${u}-icon ${r}-inline-flex-center`,
 			children: t
 		});
 	}
-	function D(e) {
-		b || (d !== u && S?.(u, w), x?.(u, w, e));
+	function O(e) {
+		x || (f !== d && C?.(d, T), S?.(d, T, e));
 	}
-	let O;
-	f ? O = f : (d < u && (O = "wait"), d === u && (O = "process"), d > u && (O = "finish"));
-	let k = e(`${l}-item`, `${l}-item-${O}`, {
-		[`${l}-item-custom`]: !!h,
-		[`${l}-item-next-error`]: g,
-		[`${l}-item-disabled`]: b,
-		[`${l}-item-active`]: u === d
-	}, c), A = E(O), j = /* @__PURE__ */ r("div", {
-		className: `${l}-item-icon`,
-		children: A
-	}), M = v ? v(j, {
-		index: u,
-		status: O,
-		title: p,
-		description: m
-	}) : j;
-	return /* @__PURE__ */ i("div", {
+	let k;
+	p ? k = p : (f < d && (k = "wait"), f === d && (k = "process"), f > d && (k = "finish"));
+	let A = e(`${u}-item`, `${u}-item-${k}`, {
+		[`${u}-item-custom`]: !!g,
+		[`${u}-item-next-error`]: _,
+		[`${u}-item-disabled`]: x,
+		[`${u}-item-active`]: d === f
+	}, l), j = D(k), M = /* @__PURE__ */ i("div", {
+		className: `${u}-item-icon`,
+		children: j
+	}), N = y ? y(M, {
+		index: d,
+		status: k,
+		title: m,
+		description: h
+	}) : M;
+	return /* @__PURE__ */ a("div", {
 		ref: n,
-		className: k,
-		style: s,
-		onClick: D,
+		className: A,
+		style: c,
+		onClick: O,
 		children: [
-			!T && (y === "vertical" || C === "vertical") && /* @__PURE__ */ r("div", { className: `${l}-item-tail` }),
-			_ !== "arrow" && M,
-			/* @__PURE__ */ i("div", {
-				className: `${l}-item-content`,
-				children: [/* @__PURE__ */ r("div", {
-					className: `${l}-item-title`,
-					children: p
-				}), m && /* @__PURE__ */ r("div", {
-					className: `${l}-item-description`,
+			!E && (b === "vertical" || w === "vertical") && /* @__PURE__ */ i("div", { className: `${u}-item-tail` }),
+			v !== "arrow" && N,
+			/* @__PURE__ */ a("div", {
+				className: `${u}-item-content`,
+				children: [/* @__PURE__ */ i("div", {
+					className: `${u}-item-title`,
 					children: m
+				}), h && /* @__PURE__ */ i("div", {
+					className: `${u}-item-description`,
+					children: h
 				})]
 			})
 		]
 	});
 }
-var c = n(s);
-c.displayName = t.displayName;
+var l = n(c);
+l.displayName = t.displayName;
 //#endregion
-export { c as default };
+export { l as default };
 /* 独立思考，明辨是非 */

package/steps/Steps.js

@@ -1,11 +1,10 @@
-/* 潘启宝 2026-05-21 17:02:47 星期四 山东省济南市 */
+/* 潘启宝 2026-06-02 15:43:25 星期二 山东省济南市 */
 import { isFunction as e } from "../utils/is.js";
 import t from "../utils/className.js";
 import { pickDataAttributes as n } from "../utils/pick.js";
 import { STEPS_COMPONENT_INFO as r, STEPS_STEP_COMPONENT_INFO as i } from "../utils/names.js";
 import a from "../hooks/use-merge-props/index.js";
-import o from "../config-provider/context.js";
-import "../config-provider/index.js";
+import { ConfigContext as o } from "../config-provider/context.js";
 import s, { forwardRef as c, useContext as l, useImperativeHandle as u, useRef as d } from "react";
 import { jsx as f } from "react/jsx-runtime";
 //#region components/pc/steps/Steps.tsx

package/steps/index.d.ts

@@ -1,9 +1,12 @@
 import type { StepsProps } from './interface';
 import Step from './Step';
 declare const Steps: import("react").ForwardRefExoticComponent<StepsProps & import("react").RefAttributes<unknown>> & {
-    id: string;
     Step: import("react").ForwardRefExoticComponent<import("./interface").StepProps & import("react").RefAttributes<unknown>>;
     Item: import("react").ForwardRefExoticComponent<import("./interface").StepProps & import("react").RefAttributes<unknown>>;
+    zh: string;
+    en: string;
+    displayName: string;
+    id: string;
 };
 export { Step as StepsItem, Step as StepsStep };
 export default Steps;

package/steps/index.js

@@ -1,10 +1,10 @@
-/* 潘启宝 2026-05-21 17:02:47 星期四 山东省济南市 */
+/* 潘启宝 2026-06-02 15:43:25 星期二 山东省济南市 */
 import { STEPS_COMPONENT_INFO as e } from "../utils/names.js";
 import t from "./Step.js";
 import n from "./Steps.js";
 //#region components/pc/steps/index.ts
 var r = Object.assign(n, {
-	id: e.id,
+	...e,
 	Step: t,
 	Item: t
 });

package/steps/interface.d.ts

@@ -41,7 +41,7 @@ export interface StepsProps {
      */
     status?: 'wait' | 'process' | 'finish' | 'error';
     /**
-     * @zh 自定义步骤条节点 ，不支持箭头模式
+     * @zh 自定义步骤条节点，不支持箭头模式
      * @en Customize the step,arrow type is not supported
      */
     customDot?: (IconDot: ReactNode, stepConfig: CustomDotRecord) => ReactNode;

package/style/global.less

@@ -66,8 +66,8 @@
   }
 
   &-border {
-    border: var(--pqb-border-1) var(--pqb-border-solid)
-      var(--pqb-color-border-2);
-    border-radius: var(--pqb-border-radius-medium);
+    border: var(~'--@{prefix}-border-1') var(~'--@{prefix}-border-solid')
+      var(~'--@{prefix}-color-border-2');
+    border-radius: var(~'--@{prefix}-border-radius-medium');
   }
 }

package/style/index.less

@@ -4,15 +4,15 @@
 @import './variables.less';
 @import './normalize.less';
 @import './global.less';
-@import './animation/index.less';
+@import './animation.less';
+@import './transition/index.less';
 @import './override.less';
 
-body {
-  font-size: var(--pqb-font-size-body);
+:root {
 }
 
-:root {
-  color-scheme: auto;
+body {
+  font-size: var(~'--@{prefix}-font-size-body');
 }
 
 .@{pqb-dark-mode-selector} {

package/style/normalize.less

@@ -15,7 +15,7 @@ body {
   -webkit-text-size-adjust: 100%; /* 2 */
   -webkit-font-smoothing: antialiased; /* chrome、safari */
   -moz-osx-font-smoothing: grayscale; /* firefox */
-  font-family: var(--pqb-font-family);
+  font-family: var(~'--@{prefix}-font-family');
 }
 
 /* Sections
@@ -354,7 +354,7 @@ template {
 
 * {
   outline: none;
-  overscroll-behavior: none;
+  // overscroll-behavior: none; // 打开会导致部分元素上面鼠标滚动页面实效
 }
 
 /**

package/style/override.less

@@ -1,6 +1,5 @@
 * {
   outline: none;
-  overscroll-behavior: auto;
 }
 
 input:-internal-autofill-selected {

package/style/token.less

@@ -0,0 +1 @@
+@import './variables.less';

package/style/transition/fade.less

@@ -0,0 +1,42 @@
+@import '../variables.less';
+
+.@{prefix}-fade-appear,
+.@{prefix}-fade-appear-active,
+.@{prefix}-fade-enter,
+.@{prefix}-fade-enter-active,
+.@{prefix}-fade-exit,
+.@{prefix}-fade-exit-active {
+  transition: opacity var(~'--@{prefix}-transition-duration-4')
+    var(~'--@{prefix}-transition-timing-function-standard');
+}
+.@{prefix}-fade-appear,
+.@{prefix}-fade-enter,
+.@{prefix}-fade-exit-active,
+.@{prefix}-fade-exit-done,
+.@{prefix}-fade-in-enter,
+.@{prefix}-fade-in-appear,
+.@{prefix}-fade-in-exit-active,
+.@{prefix}-fade-in-exit-done {
+  opacity: 0;
+}
+.@{prefix}-fade-appear-active,
+.@{prefix}-fade-enter-active,
+.@{prefix}-fade-enter-done,
+.@{prefix}-fade-exit,
+.@{prefix}-fade-in-appear-active,
+.@{prefix}-fade-in-appear-done,
+.@{prefix}-fade-in-enter-active,
+.@{prefix}-fade-in-enter-done,
+.@{prefix}-fade-in-exit {
+  opacity: 1;
+}
+
+.@{prefix}-fade-in-appear,
+.@{prefix}-fade-in-appear-active,
+.@{prefix}-fade-in-enter,
+.@{prefix}-fade-in-enter-active,
+.@{prefix}-fade-in-exit,
+.@{prefix}-fade-in-exit-active {
+  transition: opacity var(~'--@{prefix}-transition-duration-1')
+    var(~'--@{prefix}-transition-timing-function-linear');
+}

package/style/transition/height.less

@@ -0,0 +1,22 @@
+.@{prefix}-height-appear,
+.@{prefix}-height-appear-active,
+.@{prefix}-height-enter,
+.@{prefix}-height-enter-active {
+  transition: height var(~'--@{prefix}-transition-duration-2')
+    var(~'--@{prefix}-transition-timing-function-standard');
+  transition-duration: 227ms; // 不能变
+}
+.@{prefix}-height-appear,
+.@{prefix}-height-enter,
+.@{prefix}-height-exit-active,
+.@{prefix}-height-exit-done {
+  height: 0;
+}
+.@{prefix}-height-appear-active,
+.@{prefix}-height-appear-done,
+.@{prefix}-height-enter-active,
+.@{prefix}-height-enter-done,
+.@{prefix}-height-exit {
+  height: auto;
+  height: calc-size(auto, size);
+}

package/style/{animation → transition}/index.less

@@ -2,3 +2,4 @@
 @import './fade.less';
 @import './slide.less';
 @import './zoom.less';
+@import './height.less';

package/style/{animation → transition}/slide.less

@@ -7,10 +7,10 @@
 .@{prefix}-slide-dynamic-origin-exit,
 .@{prefix}-slide-dynamic-origin-exit-active {
   transition:
-    transform var(--pqb-transition-duration-2)
-      var(--pqb-transition-timing-function-standard),
-    opacity var(--pqb-transition-duration-2)
-      var(--pqb-transition-timing-function-standard);
+    transform var(~'--@{prefix}-transition-duration-2')
+      var(~'--@{prefix}-transition-timing-function-standard'),
+    opacity var(~'--@{prefix}-transition-duration-2')
+      var(~'--@{prefix}-transition-timing-function-standard');
   transform-origin: 0 0;
 }
 .@{prefix}-slide-dynamic-origin-appear,
@@ -29,34 +29,26 @@
   transform: scaleY(1) translateZ(0);
 }
 
-.@{prefix}-slide-left-appear,
 .@{prefix}-slide-left-appear-active,
-.@{prefix}-slide-left-enter,
 .@{prefix}-slide-left-enter-active,
-.@{prefix}-slide-right-appear,
 .@{prefix}-slide-right-appear-active,
-.@{prefix}-slide-right-enter,
 .@{prefix}-slide-right-enter-active,
-.@{prefix}-slide-top-appear,
 .@{prefix}-slide-top-appear-active,
-.@{prefix}-slide-top-enter,
 .@{prefix}-slide-top-enter-active,
-.@{prefix}-slide-bottom-appear,
 .@{prefix}-slide-bottom-appear-active,
-.@{prefix}-slide-bottom-enter,
-.@{prefix}-slide-bottom-enter-active {
-  transition: transform var(--pqb-transition-duration-4)
-    var(--pqb-transition-timing-function-standard);
+.@{prefix}-slide-bottom-enter-active,
+.@{prefix}-slide-left-exit-active,
+.@{prefix}-slide-right-exit-active,
+.@{prefix}-slide-top-exit-active,
+.@{prefix}-slide-bottom-exit-active {
+  transition: transform var(~'--@{prefix}-transition-duration-4')
+    var(~'--@{prefix}-transition-timing-function-standard');
 }
-.@{prefix}-slide-left-exit,
 .@{prefix}-slide-left-exit-active,
-.@{prefix}-slide-right-exit,
 .@{prefix}-slide-right-exit-active,
-.@{prefix}-slide-top-exit,
 .@{prefix}-slide-top-exit-active,
-.@{prefix}-slide-bottom-exit,
 .@{prefix}-slide-bottom-exit-active {
-  transition-duration: var(--pqb-transition-duration-3);
+  transition-duration: var(~'--@{prefix}-transition-duration-3');
 }
 
 .@{prefix}-slide-left-appear,

package/style/transition/zoom.less

@@ -0,0 +1,151 @@
+@import '../variables.less';
+
+.@{prefix}-zoom-appear,
+.@{prefix}-zoom-appear-active,
+.@{prefix}-zoom-enter,
+.@{prefix}-zoom-enter-active,
+.@{prefix}-zoom-exit,
+.@{prefix}-zoom-exit-active {
+  transform-origin: center;
+  transition: opacity var(~'--@{prefix}-transition-duration-3')
+    var(~'--@{prefix}-transition-timing-function-overshoot');
+}
+.@{prefix}-zoom-enter,
+.@{prefix}-zoom-appear,
+.@{prefix}-zoom-exit-active {
+  opacity: 0;
+  transform: scale(0);
+}
+.@{prefix}-zoom-appear-active,
+.@{prefix}-zoom-enter-active,
+.@{prefix}-zoom-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.@{prefix}-zoom-in-enter,
+.@{prefix}-zoom-in-appear {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+.@{prefix}-zoom-in-appear-active,
+.@{prefix}-zoom-in-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity var(~'--@{prefix}-transition-duration-3')
+      var(~'--@{prefix}-transition-timing-function-standard'),
+    transform var(~'--@{prefix}-transition-duration-3')
+      var(~'--@{prefix}-transition-timing-function-standard');
+}
+
+.@{prefix}-zoom-in-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.@{prefix}-zoom-in-exit-active {
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity var(~'--@{prefix}-transition-duration-3')
+      var(~'--@{prefix}-transition-timing-function-overshoot'),
+    transform var(~'--@{prefix}-transition-duration-3')
+      var(~'--@{prefix}-transition-timing-function-overshoot');
+}
+
+// used by tooltip。缩放出现，渐隐退出
+.@{prefix}-zoom-in-fade-out-enter,
+.@{prefix}-zoom-in-fade-out-appear,
+.@{prefix}-zoom-in-fade-out-exit-active {
+  opacity: 0;
+  transform: scale(0.5);
+}
+.@{prefix}-zoom-in-fade-out-appear-active,
+.@{prefix}-zoom-in-fade-out-enter-active {
+  transition:
+    opacity var(~'--@{prefix}-transition-duration-2')
+      var(~'--@{prefix}-transition-timing-function-standard'),
+    transform var(~'--@{prefix}-transition-duration-2')
+      var(~'--@{prefix}-transition-timing-function-standard');
+}
+.@{prefix}-zoom-in-fade-out-appear-active,
+.@{prefix}-zoom-in-fade-out-enter-active,
+.@{prefix}-zoom-in-fade-out-exit {
+  opacity: 1;
+  transform: scale(1);
+}
+.@{prefix}-zoom-in-fade-out-exit-active {
+  transition:
+    opacity var(~'--@{prefix}-transition-duration-2')
+      var(~'--@{prefix}-transition-timing-function-overshoot'),
+    transform var(~'--@{prefix}-transition-duration-2')
+      var(~'--@{prefix}-transition-timing-function-overshoot');
+}
+
+// used by alert form
+.@{prefix}-zoom-in-top-enter,
+.@{prefix}-zoom-in-top-appear {
+  opacity: 0;
+  transform-origin: 0% 0%;
+  transform: scaleY(0.8) translateZ(0);
+}
+
+.@{prefix}-zoom-in-top-appear-active,
+.@{prefix}-zoom-in-top-enter-active {
+  opacity: 1;
+  transform-origin: 0% 0%;
+  transform: scaleY(1) translateZ(0);
+}
+
+.@{prefix}-zoom-in-top-exit {
+  opacity: 1;
+  transform-origin: 0% 0%;
+  transform: scaleY(1) translateZ(0);
+}
+
+.@{prefix}-zoom-in-top-exit-active {
+  opacity: 0;
+  transform-origin: 0% 0%;
+  transform: scaleY(0.8) translateZ(0);
+}
+
+.@{prefix}-zoom-in-bottom-enter,
+.@{prefix}-zoom-in-bottom-appear {
+  opacity: 0;
+  transform-origin: 100% 100%;
+  transform: scaleY(0.8) translateZ(0);
+}
+
+.@{prefix}-zoom-in-bottom-appear-active,
+.@{prefix}-zoom-in-bottom-enter-active {
+  opacity: 1;
+  transform-origin: 100% 100%;
+  transform: scaleY(1) translateZ(0);
+}
+
+.@{prefix}-zoom-in-bottom-exit {
+  opacity: 1;
+  transform-origin: 100% 100%;
+  transform: scaleY(1) translateZ(0);
+}
+
+.@{prefix}-zoom-in-bottom-exit-active {
+  opacity: 0;
+  transform-origin: 100% 100%;
+  transform: scaleY(0.8) translateZ(0);
+}
+
+.@{prefix}-zoom-in-top-appear-active,
+.@{prefix}-zoom-in-top-enter-active,
+.@{prefix}-zoom-in-top-exit-active,
+.@{prefix}-zoom-in-bottom-appear-active,
+.@{prefix}-zoom-in-bottom-enter-active,
+.@{prefix}-zoom-in-bottom-exit-active {
+  transition:
+    transform var(~'--@{prefix}-transition-duration-3')
+      var(~'--@{prefix}-transition-timing-function-overshoot'),
+    opacity var(~'--@{prefix}-transition-duration-3')
+      var(~'--@{prefix}-transition-timing-function-overshoot');
+}