wz-h5-design 1.0.8 → 1.0.9

package/dist/types/components/Input/Input.d.ts

@@ -12,6 +12,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     borderRadius?: string;
     backgroundColor?: string;
     bordered?: true;
+    /** 变体：plain 用于 Cell 内，underline 底部边框样式，filled 灰色填充背景，filled-rounded 圆角填充背景 */
+    variant?: "default" | "plain" | "underline" | "filled" | "filled-rounded";
+    /** 错误状态 */
+    error?: boolean;
+    /** 错误提示信息 */
+    errorMessage?: string;
     /** 验证码倒计时秒数，默认60秒 */
     codeCountdown?: number;
     /** 点击获取验证码回调 */

package/dist/types/components/Tip/Tip.d.ts

@@ -29,9 +29,9 @@ export interface TipProps {
      */
     bold?: boolean;
     /**
-     * @description 左侧图标名称
+     * @description 自定义左侧图标
      */
-    icon?: string;
+    icon?: ReactNode;
     /**
      * @description 是否显示操作按钮
      * @default false
@@ -46,6 +46,11 @@ export interface TipProps {
      * @description 操作按钮点击事件
      */
     onAction?: () => void;
+    /**
+     * @description 文字对齐方式
+     * @default 'center'
+     */
+    align?: 'left' | 'center';
 }
 export declare const Tip: FC<TipProps>;
 export default Tip;

package/dist/wz-h5-design.es.js

@@ -168,7 +168,7 @@ const loadIconSymbol = (type) => {
   try {
     switch (type) {
       case "yunying":
-        import("./iconfont-B9h4iRmM.js");
+        import("./iconfont-qKgLSSmj.js");
         break;
       case "qitu":
         import("./iconfont-CXxMq4G2.js");
@@ -1163,6 +1163,9 @@ const Input = forwardRef(
     borderRadius,
     backgroundColor,
     bordered,
+    variant = "default",
+    error = false,
+    errorMessage,
     codeCountdown = 60,
     onGetCode,
     codeText = "获取验证码",
@@ -1231,7 +1234,8 @@ const Input = forwardRef(
       borderRadius,
       backgroundColor,
       border: bordered !== void 0 ? void 0 : "none",
-      ...suffixWidth > 0 && (suffix || type === "code") ? { paddingRight: suffixWidth + 22 + 12 } : {}
+      // plain 和 filled 变体不使用动态 paddingRight
+      ...suffixWidth > 0 && (suffix || type === "code") && variant === "default" ? { paddingRight: suffixWidth + 14 } : {}
     };
     const currentValue = isControlled ? value : innerValue;
     const count = (currentValue == null ? void 0 : currentValue.toString().length) || 0;
@@ -1283,20 +1287,25 @@ const Input = forwardRef(
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: `wz-input-affix-wrapper ${type === "textarea" ? "wz-input-affix-wrapper-textarea" : ""} ${suffix || type === "code" ? "wz-input-has-suffix" : ""} ${bordered === void 0 ? "wz-input-no-border" : ""} ${clearable ? "wz-input-has-clear" : ""} ${type === "password" ? "wz-input-has-password" : ""}`,
+        className: `wz-input-affix-wrapper ${type === "textarea" ? "wz-input-affix-wrapper-textarea" : ""} ${suffix || type === "code" ? "wz-input-has-suffix" : ""} ${bordered === void 0 ? "wz-input-no-border" : ""} ${clearable ? "wz-input-has-clear" : ""} ${type === "password" ? "wz-input-has-password" : ""} ${variant === "plain" ? "wz-input-plain" : ""} ${variant === "underline" ? "wz-input-underline" : ""} ${variant === "filled" || variant === "filled-rounded" ? "wz-input-filled" : ""} ${variant === "filled-rounded" ? "wz-input-filled-rounded" : ""} ${error ? "wz-input-error" : ""}`,
         style: wrapperStyle,
         children: [
           renderInput(),
-          showClear && !props.disabled && type !== "textarea" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-clear", onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 22 }) }),
-          type === "password" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-password", onClick: handlePasswordVisible, children: /* @__PURE__ */ jsx(Icon, { name: passwordVisible ? "eyes-close" : "eyes-open", size: 22 }) }),
+          showClear && !props.disabled && type !== "textarea" && !suffix && type !== "code" && /* @__PURE__ */ jsx("span", { className: "wz-input-clear", onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 22 }) }),
+          type === "password" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-password", onClick: handlePasswordVisible, children: /* @__PURE__ */ jsx(Icon, { type: "wzdaili", name: passwordVisible ? "kekan" : "bukekan", size: 22 }) }),
           suffix && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", ref: suffixRef, children: [
             /* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
             suffix
           ] }),
-          type === "code" && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", ref: !suffix ? suffixRef : void 0, children: [
-            /* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
+          type === "code" && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix wz-input-code-suffix", ref: !suffix ? suffixRef : void 0, children: [
+            showClear && !props.disabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "wz-input-clear", onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 22 }) }),
+              /* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" })
+            ] }),
+            !showClear && /* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
             counting ? /* @__PURE__ */ jsx("span", { className: "wz-input-code-btn wz-input-code-btn--disabled", children: codeCountingText.replace("{s}", String(countdown)) }) : /* @__PURE__ */ jsx("span", { className: "wz-input-code-btn", onClick: handleGetCode, children: hasSent ? codeResendText : codeText })
-          ] })
+          ] }),
+          errorMessage && error && /* @__PURE__ */ jsx("div", { className: "wz-input-error-message", children: errorMessage })
         ]
       }
     );
@@ -1327,8 +1336,8 @@ const Divider = ({
       className: `wz-divider wz-divider--${direction} ${className}`,
       style: {
         background: color || defaultColor,
-        width: isVertical ? 1 : length || "100%",
-        height: isVertical ? length || 16 : 2,
+        width: isVertical ? 2 : length || "100%",
+        height: isVertical ? length || 24 : 2,
         margin,
         ...style
       }
@@ -1531,10 +1540,14 @@ const TimePicker = ({
     }, [value, pickerOptions]);
     useEffect(() => {
       if (wrapperRef.current) {
-        wrapperRef.current.scrollTo({
-          top: current * itemHeight,
-          behavior: "smooth"
-        });
+        if (wrapperRef.current.scrollTo) {
+          wrapperRef.current.scrollTo({
+            top: current * itemHeight,
+            behavior: "smooth"
+          });
+        } else {
+          wrapperRef.current.scrollTop = current * itemHeight;
+        }
       }
     }, [current, itemHeight]);
     const handleTouchStart2 = (e) => {
@@ -1607,18 +1620,26 @@ const TimePicker = ({
   const dragType = useRef(null);
   useEffect(() => {
     if (hourRef.current) {
-      hourRef.current.scrollTo({
-        top: currentHour * itemHeight,
-        behavior: "smooth"
-      });
+      if (hourRef.current.scrollTo) {
+        hourRef.current.scrollTo({
+          top: currentHour * itemHeight,
+          behavior: "smooth"
+        });
+      } else {
+        hourRef.current.scrollTop = currentHour * itemHeight;
+      }
     }
   }, [currentHour, itemHeight]);
   useEffect(() => {
     if (minuteRef.current) {
-      minuteRef.current.scrollTo({
-        top: currentMinute * itemHeight,
-        behavior: "smooth"
-      });
+      if (minuteRef.current.scrollTo) {
+        minuteRef.current.scrollTo({
+          top: currentMinute * itemHeight,
+          behavior: "smooth"
+        });
+      } else {
+        minuteRef.current.scrollTop = currentMinute * itemHeight;
+      }
     }
   }, [currentMinute, itemHeight]);
   const handleTouchStart = (type2) => (e) => {
@@ -1736,13 +1757,31 @@ const DatePicker = ({
   const isDragging = useRef(false);
   const dragType = useRef(null);
   useLayoutEffect(() => {
-    if (yearRef.current) yearRef.current.scrollTo({ top: (year - minYear) * itemHeight, behavior: "auto" });
+    if (yearRef.current) {
+      if (yearRef.current.scrollTo) {
+        yearRef.current.scrollTo({ top: (year - minYear) * itemHeight, behavior: "auto" });
+      } else {
+        yearRef.current.scrollTop = (year - minYear) * itemHeight;
+      }
+    }
   }, [year, itemHeight, minYear]);
   useLayoutEffect(() => {
-    if (monthRef.current) monthRef.current.scrollTo({ top: (month - 1) * itemHeight, behavior: "auto" });
+    if (monthRef.current) {
+      if (monthRef.current.scrollTo) {
+        monthRef.current.scrollTo({ top: (month - 1) * itemHeight, behavior: "auto" });
+      } else {
+        monthRef.current.scrollTop = (month - 1) * itemHeight;
+      }
+    }
   }, [month, itemHeight]);
   useLayoutEffect(() => {
-    if (dayRef.current) dayRef.current.scrollTo({ top: (day - 1) * itemHeight, behavior: "auto" });
+    if (dayRef.current) {
+      if (dayRef.current.scrollTo) {
+        dayRef.current.scrollTo({ top: (day - 1) * itemHeight, behavior: "auto" });
+      } else {
+        dayRef.current.scrollTop = (day - 1) * itemHeight;
+      }
+    }
   }, [day, itemHeight]);
   const handleTouchStart = (type) => (e) => {
     var _a, _b, _c;
@@ -1806,9 +1845,27 @@ const DatePicker = ({
       setYear(y);
       setMonth(m);
       setDay(d);
-      if (yearRef.current) yearRef.current.scrollTo({ top: (y - minYear) * itemHeight, behavior: "auto" });
-      if (monthRef.current) monthRef.current.scrollTo({ top: (m - 1) * itemHeight, behavior: "auto" });
-      if (dayRef.current) dayRef.current.scrollTo({ top: (d - 1) * itemHeight, behavior: "auto" });
+      if (yearRef.current) {
+        if (yearRef.current.scrollTo) {
+          yearRef.current.scrollTo({ top: (y - minYear) * itemHeight, behavior: "auto" });
+        } else {
+          yearRef.current.scrollTop = (y - minYear) * itemHeight;
+        }
+      }
+      if (monthRef.current) {
+        if (monthRef.current.scrollTo) {
+          monthRef.current.scrollTo({ top: (m - 1) * itemHeight, behavior: "auto" });
+        } else {
+          monthRef.current.scrollTop = (m - 1) * itemHeight;
+        }
+      }
+      if (dayRef.current) {
+        if (dayRef.current.scrollTo) {
+          dayRef.current.scrollTo({ top: (d - 1) * itemHeight, behavior: "auto" });
+        } else {
+          dayRef.current.scrollTop = (d - 1) * itemHeight;
+        }
+      }
     }
   }, [value]);
   const renderColumn = (options, current, ref, type) => /* @__PURE__ */ jsxs(
@@ -2222,7 +2279,7 @@ const Tag = (props) => {
     if (borderColor && type === "line") {
       newStyle.borderColor = borderColor;
     }
-    if (bgColor) {
+    if (bgColor && type === "solid") {
       newStyle.backgroundColor = bgColor;
     }
     if (borderRadius !== void 0) {
@@ -2245,17 +2302,9 @@ const Tip = ({
   icon,
   showAction = false,
   actionText = "查看",
-  onAction
+  onAction,
+  align = "center"
 }) => {
-  const contentRef = useRef(null);
-  const [isMultiLine, setIsMultiLine] = useState(false);
-  useEffect(() => {
-    if (contentRef.current && !marquee) {
-      const el = contentRef.current;
-      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
-      setIsMultiLine(el.scrollHeight > lineHeight * 1.5);
-    }
-  }, [content, marquee]);
   if (!visible) {
     return null;
   }
@@ -2264,15 +2313,15 @@ const Tip = ({
   const tipClass = classNames(baseClass, className, {
     [`${baseClass}--marquee`]: marquee,
     [`${baseClass}--bold`]: bold,
-    [`${baseClass}--center`]: !marquee && !isMultiLine,
-    [`${baseClass}--left`]: !marquee && isMultiLine,
+    [`${baseClass}--left`]: align === "left",
+    [`${baseClass}--center`]: align === "center",
     [`${baseClass}--has-icon`]: !!icon,
     [`${baseClass}--has-right`]: hasRightArea
   });
   const contentNode = marquee ? /* @__PURE__ */ jsx("div", { className: `${baseClass}-marquee-box`, children: /* @__PURE__ */ jsx("span", { children: content }) }) : content;
   return /* @__PURE__ */ jsxs("div", { className: tipClass, children: [
-    /* @__PURE__ */ jsxs("div", { className: `${baseClass}-content`, ref: contentRef, children: [
-      icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}-icon`, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${baseClass}-content`, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: `${baseClass}-icon`, children: icon }),
       /* @__PURE__ */ jsx("span", { className: `${baseClass}-text`, children: contentNode })
     ] }),
     showAction && /* @__PURE__ */ jsx("div", { className: `${baseClass}-action`, onClick: onAction, children: actionText }),
@@ -2457,13 +2506,10 @@ const Toast$1 = ({
   visible = false,
   onClose
 }) => {
-  const [show2, setShow] = useState(visible);
   useEffect(() => {
-    setShow(visible);
     let timer;
     if (visible && duration > 0) {
       timer = setTimeout(() => {
-        setShow(false);
         onClose == null ? void 0 : onClose();
       }, duration);
     }
@@ -2471,7 +2517,7 @@ const Toast$1 = ({
       clearTimeout(timer);
     };
   }, [visible, duration, onClose]);
-  const toastClass = classNames("wz-toast", { "wz-toast-visible": show2 });
+  const toastClass = classNames("wz-toast", { "wz-toast-visible": visible });
   const iconClass = classNames("wz-toast-icon");
   return /* @__PURE__ */ jsx("div", { className: toastClass, children: /* @__PURE__ */ jsxs("div", { className: "wz-toast-content", children: [
     icon && /* @__PURE__ */ jsx("div", { className: iconClass, children: icon }),