@unicom-cloud/ui 0.8.155 → 0.8.157

package/steps/Steps.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-03 16:46:01 星期五 */
+/* 潘启宝 2026-04-23 09:23:31 星期四 */
 import { isFunction as e } from "../utils/is.js";
 import t from "../utils/className.js";
 import { pickDataAttributes as n } from "../utils/pick.js";
@@ -34,7 +34,7 @@ function f(o, f) {
 		style: v,
 		className: M,
 		...n(g),
-		children: a.Children.toArray(y).filter((e) => e && e.type && e.type.displayName === "Step").map((e, t) => {
+		children: a.Children.toArray(y).filter((e) => e?.type?.displayName === "Step").map((e, t) => {
 			if (t += 1, e) {
 				let n = {
 					prefixCls: k,

package/steps/index.js

@@ -1,4 +1,4 @@
-/* 潘启宝 2026-04-03 16:46:01 星期五 */
+/* 潘启宝 2026-04-23 09:23:31 星期四 */
 import e from "./Step.js";
 import t from "./Steps.js";
 //#region components/pc/steps/index.tsx

package/steps/interface.d.ts

@@ -4,7 +4,7 @@ import { CSSProperties, ReactNode } from 'react';
  */
 export interface StepsProps {
     style?: CSSProperties;
-    className?: string | string[];
+    className?: string;
     /**
      * @zh 节点样式类型
      * @en Type of step
@@ -76,7 +76,7 @@ export interface StepProps {
      * @zh 节点类名
      * @en The additional css className
      */
-    className?: string | string[];
+    className?: string;
     prefixCls?: string;
     index?: number;
     current?: number;

package/style/animation/fade.less

@@ -1,46 +1,61 @@
 @import '../variables.less';
 
-// used by drawer mask
+.@{prefix}-fade-in-standard-appear,
+.@{prefix}-fade-in-standard-appear-active,
+.@{prefix}-fade-in-standard-appear-done,
 .@{prefix}-fade-in-standard-enter,
-.@{prefix}-fade-in-standard-appear {
+.@{prefix}-fade-in-standard-enter-active,
+.@{prefix}-fade-in-standard-enter-done,
+.@{prefix}-fade-in-standard-exit,
+.@{prefix}-fade-in-standard-exit-active,
+.@{prefix}-fade-in-standard-exit-done {
+  transition: opacity var(--pqb-transition-duration-3)
+    var(--pqb-transition-timing-function-standard);
+}
+.@{prefix}-fade-in-standard-appear,
+.@{prefix}-fade-in-standard-enter {
   opacity: 0;
 }
-
 .@{prefix}-fade-in-standard-appear-active,
-.@{prefix}-fade-in-standard-enter-active {
+.@{prefix}-fade-in-standard-appear-done,
+.@{prefix}-fade-in-standard-enter-active,
+.@{prefix}-fade-in-standard-enter-done {
   opacity: 1;
-  transition: opacity var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
-
 .@{prefix}-fade-in-standard-exit {
   opacity: 1;
 }
-
-.@{prefix}-fade-in-standard-exit-active {
+.@{prefix}-fade-in-standard-exit-active,
+.@{prefix}-fade-in-standard-exit-done {
   opacity: 0;
-  transition: opacity var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
 
+.@{prefix}-fade-in-appear,
+.@{prefix}-fade-in-appear-active,
+.@{prefix}-fade-in-appear-done,
+.@{prefix}-fade-in-enter,
+.@{prefix}-fade-in-enter-active,
+.@{prefix}-fade-in-enter-done,
+.@{prefix}-fade-in-exit,
+.@{prefix}-fade-in-exit-active,
+.@{prefix}-fade-in-exit-done {
+  transition: opacity var(--pqb-transition-duration-1)
+    var(--pqb-transition-timing-function-linear);
+}
 .@{prefix}-fade-in-enter,
 .@{prefix}-fade-in-appear {
   opacity: 0;
 }
-
 .@{prefix}-fade-in-appear-active,
-.@{prefix}-fade-in-enter-active {
+.@{prefix}-fade-in-appear-done,
+.@{prefix}-fade-in-enter-active,
+.@{prefix}-fade-in-enter-done {
   opacity: 1;
-  transition: opacity var(--pqb-transition-duration-1)
-    var(--pqb-transition-timing-function-linear);
 }
-
 .@{prefix}-fade-in-exit {
   opacity: 1;
 }
-
-.@{prefix}-fade-in-exit-active {
+.@{prefix}-fade-in-exit-active,
+.@{prefix}-fade-in-exit-done {
   opacity: 0;
-  transition: opacity var(--pqb-transition-duration-1)
-    var(--pqb-transition-timing-function-linear);
 }

package/style/animation/slide.less

@@ -1,132 +1,151 @@
 @import '../variables.less';
 
-// used by cascader select treeselect ... like picker
+.@{prefix}-slide-dynamic-origin-appear,
+.@{prefix}-slide-dynamic-origin-appear-active,
+.@{prefix}-slide-dynamic-origin-appear-done,
+.@{prefix}-slide-dynamic-origin-enter,
+.@{prefix}-slide-dynamic-origin-enter-active,
+.@{prefix}-slide-dynamic-origin-enter-done,
+.@{prefix}-slide-dynamic-origin-exit,
+.@{prefix}-slide-dynamic-origin-exit-active,
+.@{prefix}-slide-dynamic-origin-exit-done {
+  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-origin: 0 0;
+}
 .@{prefix}-slide-dynamic-origin-appear,
 .@{prefix}-slide-dynamic-origin-enter {
   opacity: 0;
-  transform-origin: 0 0;
   transform: scaleY(0.9) translateZ(0);
 }
-
 .@{prefix}-slide-dynamic-origin-appear-active,
-.@{prefix}-slide-dynamic-origin-enter-active {
+.@{prefix}-slide-dynamic-origin-appear-done,
+.@{prefix}-slide-dynamic-origin-enter-active,
+.@{prefix}-slide-dynamic-origin-enter-done {
   opacity: 1;
-  transform-origin: 0 0;
   transform: scaleY(1) translateZ(0);
-  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);
 }
-
 .@{prefix}-slide-dynamic-origin-exit {
   opacity: 1;
-  transform-origin: 0 0;
   transform: scaleY(1) translateZ(0);
-  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);
 }
-
-.@{prefix}-slide-dynamic-origin-exit-active {
+.@{prefix}-slide-dynamic-origin-exit-active,
+.@{prefix}-slide-dynamic-origin-exit-done {
   opacity: 0;
-  transform-origin: 0 0;
   transform: scaleY(0.9) translateZ(0);
-  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);
 }
 
-// used by drawer
+.@{prefix}-slide-left-appear,
+.@{prefix}-slide-left-appear-active,
+.@{prefix}-slide-left-appear-done,
+.@{prefix}-slide-left-enter,
+.@{prefix}-slide-left-enter-active,
+.@{prefix}-slide-left-enter-done,
+.@{prefix}-slide-left-exit,
+.@{prefix}-slide-left-exit-active,
+.@{prefix}-slide-left-exit-done,
+.@{prefix}-slide-right-appear,
+.@{prefix}-slide-right-appear-active,
+.@{prefix}-slide-right-appear-done,
+.@{prefix}-slide-right-enter,
+.@{prefix}-slide-right-enter-active,
+.@{prefix}-slide-right-enter-done,
+.@{prefix}-slide-right-exit,
+.@{prefix}-slide-right-exit-active,
+.@{prefix}-slide-right-exit-done,
+.@{prefix}-slide-top-appear,
+.@{prefix}-slide-top-appear-active,
+.@{prefix}-slide-top-appear-done,
+.@{prefix}-slide-top-enter,
+.@{prefix}-slide-top-enter-active,
+.@{prefix}-slide-top-enter-done,
+.@{prefix}-slide-top-exit,
+.@{prefix}-slide-top-exit-active,
+.@{prefix}-slide-top-exit-done,
+.@{prefix}-slide-bottom-appear,
+.@{prefix}-slide-bottom-appear-active,
+.@{prefix}-slide-bottom-appear-done,
+.@{prefix}-slide-bottom-enter,
+.@{prefix}-slide-bottom-enter-active,
+.@{prefix}-slide-bottom-enter-done,
+.@{prefix}-slide-bottom-exit,
+.@{prefix}-slide-bottom-exit-active,
+.@{prefix}-slide-bottom-exit-done {
+  transition: transform var(--pqb-transition-duration-3)
+    var(--pqb-transition-timing-function-standard);
+}
+
 .@{prefix}-slide-left-appear,
 .@{prefix}-slide-left-enter {
   transform: translateX(-100%);
 }
-
 .@{prefix}-slide-left-appear-active,
-.@{prefix}-slide-left-enter-active {
+.@{prefix}-slide-left-appear-done,
+.@{prefix}-slide-left-enter-active,
+.@{prefix}-slide-left-enter-done {
   transform: translateX(0);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
-
 .@{prefix}-slide-left-exit {
   transform: translateX(0);
 }
-
-.@{prefix}-slide-left-exit-active {
+.@{prefix}-slide-left-exit-active,
+.@{prefix}-slide-left-exit-done {
   transform: translateX(-100%);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
 
 .@{prefix}-slide-right-appear,
 .@{prefix}-slide-right-enter {
   transform: translateX(100%);
 }
-
 .@{prefix}-slide-right-appear-active,
-.@{prefix}-slide-right-enter-active {
+.@{prefix}-slide-right-appear-done,
+.@{prefix}-slide-right-enter-active,
+.@{prefix}-slide-right-enter-done {
   transform: translateX(0);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
-
 .@{prefix}-slide-right-exit {
   transform: translateX(0);
 }
-
-.@{prefix}-slide-right-exit-active {
+.@{prefix}-slide-right-exit-active,
+.@{prefix}-slide-right-exit-done {
   transform: translateX(100%);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
 
 .@{prefix}-slide-top-appear,
 .@{prefix}-slide-top-enter {
   transform: translateY(-100%);
 }
-
 .@{prefix}-slide-top-appear-active,
-.@{prefix}-slide-top-enter-active {
+.@{prefix}-slide-top-appear-done,
+.@{prefix}-slide-top-enter-active,
+.@{prefix}-slide-top-enter-done {
   transform: translateY(0);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
-
 .@{prefix}-slide-top-exit {
   transform: translateY(0);
 }
-
-.@{prefix}-slide-top-exit-active {
+.@{prefix}-slide-top-exit-active,
+.@{prefix}-slide-top-exit-done {
   transform: translateY(-100%);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
 
 .@{prefix}-slide-bottom-appear,
 .@{prefix}-slide-bottom-enter {
   transform: translateY(100%);
 }
-
 .@{prefix}-slide-bottom-appear-active,
-.@{prefix}-slide-bottom-enter-active {
+.@{prefix}-slide-bottom-appear-done,
+.@{prefix}-slide-bottom-enter-active,
+.@{prefix}-slide-bottom-enter-done {
   transform: translateY(0);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }
-
 .@{prefix}-slide-bottom-exit {
   transform: translateY(0);
 }
-
-.@{prefix}-slide-bottom-exit-active {
+.@{prefix}-slide-bottom-exit-active,
+.@{prefix}-slide-bottom-exit-done {
   transform: translateY(100%);
-  transition: transform var(--pqb-transition-duration-3)
-    var(--pqb-transition-timing-function-standard);
 }

package/style/animation/zoom.less

@@ -1,6 +1,5 @@
 @import '../variables.less';
 
-// modal use
 .@{prefix}-zoom-in-enter,
 .@{prefix}-zoom-in-appear {
   opacity: 0;
@@ -77,11 +76,6 @@
 .@{prefix}-zoom-in-big-enter-active {
   opacity: 1;
   transform: scale(1, 1);
-  transition:
-    opacity var(--pqb-transition-duration-2)
-      var(--pqb-transition-timing-function-linear),
-    transform var(--pqb-transition-duration-2)
-      var(--pqb-transition-timing-function-linear);
 }
 
 .@{prefix}-zoom-in-big-exit {
@@ -92,6 +86,11 @@
 .@{prefix}-zoom-in-big-exit-active {
   opacity: 0;
   transform: scale(0.2, 0.2);
+}
+
+.@{prefix}-zoom-in-big-appear-active,
+.@{prefix}-zoom-in-big-enter-active,
+.@{prefix}-zoom-in-big-exit-active {
   transition:
     opacity var(--pqb-transition-duration-2)
       var(--pqb-transition-timing-function-linear),
@@ -110,11 +109,6 @@
 .@{prefix}-zoom-in-left-enter-active {
   opacity: 1;
   transform: scale(1, 1);
-  transition:
-    opacity var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-linear),
-    transform var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot);
 }
 
 .@{prefix}-zoom-in-left-exit {
@@ -126,6 +120,11 @@
 .@{prefix}-zoom-in-left-exit-active {
   opacity: 0.1;
   transform: scale(0.1, 0.1);
+}
+
+.@{prefix}-zoom-in-left-appear-active,
+.@{prefix}-zoom-in-left-enter-active,
+.@{prefix}-zoom-in-left-exit-active {
   transition:
     opacity var(--pqb-transition-duration-3)
       var(--pqb-transition-timing-function-linear),
@@ -146,11 +145,6 @@
   opacity: 1;
   transform-origin: 0% 0%;
   transform: scaleY(1) translateZ(0);
-  transition:
-    transform var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot),
-    opacity var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot);
 }
 
 .@{prefix}-zoom-in-top-exit {
@@ -163,11 +157,6 @@
   opacity: 0;
   transform-origin: 0% 0%;
   transform: scaleY(0.8) translateZ(0);
-  transition:
-    transform var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot),
-    opacity var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot);
 }
 
 .@{prefix}-zoom-in-bottom-enter,
@@ -182,11 +171,6 @@
   opacity: 1;
   transform-origin: 100% 100%;
   transform: scaleY(1) translateZ(0);
-  transition:
-    transform var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot),
-    opacity var(--pqb-transition-duration-3)
-      var(--pqb-transition-timing-function-overshoot);
 }
 
 .@{prefix}-zoom-in-bottom-exit {
@@ -199,6 +183,14 @@
   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(--pqb-transition-duration-3)
       var(--pqb-transition-timing-function-overshoot),

package/style/index.less

@@ -11,9 +11,17 @@ body {
   font-size: var(--pqb-font-size-body);
 }
 
+:root {
+  color-scheme: auto;
+}
+
 .@{pqb-dark-mode-selector} {
   color-scheme: dark;
   * {
     color-scheme: dark;
   }
 }
+
+[class*=~'@{prefix}-'] {
+  scrollbar-width: thin;
+}

package/style/override.less

@@ -2,3 +2,18 @@
   outline: none;
   overscroll-behavior: auto;
 }
+
+input:-internal-autofill-selected {
+  // 不起作用
+  // appearance: menulist-button;
+  // background-image: initial !important;
+  // background-color: light-dark(#0d59dc, #e30e4a66) !important;
+  // color: fieldtext !important;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  // -webkit-text-fill-color: #f00 !important;
+  // box-shadow: 0 0 0 1000px #f00 inset !important;
+}