wz-h5-design 1.0.3 → 1.0.4

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

@@ -8,6 +8,9 @@ export interface ButtonProps {
     color?: string;
     textColor?: string;
     borderColor?: string;
+    width?: string | number;
+    height?: string | number;
+    fontSize?: string | number;
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import './ButtonGroup.scss';
+export interface ButtonGroupProps {
+    /** 背景色，支持白色、灰色等 */
+    bgColor?: string;
+    /** 容器高度 */
+    height?: string | number;
+    /** 内边距 */
+    padding?: string | number;
+    /** 是否固定在底部 */
+    fixed?: boolean;
+    /** 按钮之间的间距 */
+    gap?: string | number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/types/components/ButtonGroup/index.d.ts

@@ -0,0 +1,5 @@
+import './ButtonGroup.scss';
+import { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';
+export default ButtonGroup;
+export { ButtonGroup };

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

@@ -9,5 +9,11 @@ export interface DateRangePickerProps {
     endLabel?: string;
     className?: string;
     style?: React.CSSProperties;
+    /** 是否显示长期有效选项 */
+    showLongTerm?: boolean;
+    /** 长期有效文案 */
+    longTermLabel?: string;
+    /** 长期有效时结束日期的值，默认 '9999-12-31' */
+    longTermValue?: string;
 }
 export declare const DateRangePicker: React.FC<DateRangePickerProps>;

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

@@ -2,6 +2,8 @@ import React from 'react';
 import './Divider.scss';
 export interface DividerProps {
     direction?: 'horizontal' | 'vertical';
+    /** 分割线类型：default 常规 | emphasis 强调 */
+    type?: 'default' | 'emphasis';
     color?: string;
     length?: number | string;
     margin?: string;

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

@@ -24,9 +24,28 @@ export interface TipProps {
      */
     onClose?: () => void;
     /**
-     * @description 操作按钮
+     * @description 是否加粗文字
+     * @default false
+     */
+    bold?: boolean;
+    /**
+     * @description 左侧图标名称
+     */
+    icon?: string;
+    /**
+     * @description 是否显示操作按钮
+     * @default false
+     */
+    showAction?: boolean;
+    /**
+     * @description 操作按钮文字
+     * @default '查看'
+     */
+    actionText?: string;
+    /**
+     * @description 操作按钮点击事件
      */
-    action?: ReactNode;
+    onAction?: () => void;
 }
 export declare const Tip: FC<TipProps>;
 export default Tip;

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

@@ -1,4 +1,5 @@
 import { Button } from "./Button/Button";
+import { ButtonGroup } from "./ButtonGroup/ButtonGroup";
 import { Radio } from "./Radio/Radio";
 import { Checkbox } from "./Checkbox/Checkbox";
 import { Switch } from "./Switch/Switch";
@@ -30,5 +31,5 @@ import { Tooltip } from "./Tooltip/Tooltip";
 import { Dialog } from "./Dialog";
 import { ConfigProvider, useConfig } from "./ConfigProvider";
 import type { ConfigProviderProps, ThemeType, ThemeVars } from "./ConfigProvider";
-export { Button, Radio, Checkbox, Switch, Tabbar, Icon, Card, Cell, Tabs, Collapse, Stepper, Popup, Cascader, Input, Divider, CheckList, Search, TimePicker, DatePicker, DateRangePicker, Flex, Grid, GridView, Tag, Tip, NavBar, DropdownMenu, Toast, Tooltip, Dialog, ConfigProvider, useConfig, };
+export { Button, ButtonGroup, Radio, Checkbox, Switch, Tabbar, Icon, Card, Cell, Tabs, Collapse, Stepper, Popup, Cascader, Input, Divider, CheckList, Search, TimePicker, DatePicker, DateRangePicker, Flex, Grid, GridView, Tag, Tip, NavBar, DropdownMenu, Toast, Tooltip, Dialog, ConfigProvider, useConfig, };
 export type { ConfigProviderProps, ThemeType, ThemeVars };

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

@@ -9,6 +9,9 @@ const Button = forwardRef(({
   color = "",
   textColor = "",
   borderColor = "",
+  width,
+  height,
+  fontSize,
   className = "",
   style = {},
   children,
@@ -18,12 +21,22 @@ const Button = forwardRef(({
 }, ref) => {
   const [isActive, setIsActive] = useState(false);
   const timerRef = useRef(null);
+  const formatSize = (value) => {
+    if (value === void 0) return void 0;
+    return typeof value === "number" ? `${value}px` : value;
+  };
   const buttonStyle = useMemo(() => {
+    const customStyle = {
+      width: formatSize(width),
+      height: formatSize(height),
+      fontSize: formatSize(fontSize)
+    };
     if (type === "cancel") {
       return {
         background: "#D6D6D6",
         color: textColor || "#fff",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "outline") {
@@ -31,7 +44,8 @@ const Button = forwardRef(({
         color: textColor || "var(--wz-primary-color)",
         borderColor: borderColor || "var(--wz-primary-color)",
         background: "transparent",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "text") {
@@ -40,7 +54,8 @@ const Button = forwardRef(({
         background: "transparent",
         border: "none",
         boxShadow: "none",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "plain") {
@@ -48,7 +63,8 @@ const Button = forwardRef(({
         color: textColor || "#666666",
         borderColor: borderColor || "#666666",
         background: "transparent",
-        ...style
+        ...style,
+        ...customStyle
       };
     }
     if (type === "primary") {
@@ -57,10 +73,10 @@ const Button = forwardRef(({
         s.background = color || "var(--wz-primary-gradient, var(--wz-primary-color))";
       }
       s.color = textColor || "#fff";
-      return s;
+      return { ...s, ...customStyle };
     }
-    return style;
-  }, [type, color, textColor, borderColor, style]);
+    return { ...style, ...customStyle };
+  }, [type, color, textColor, borderColor, width, height, fontSize, style]);
   const handleClick = (e) => {
     if (disabled) return;
     setIsActive(true);
@@ -100,6 +116,62 @@ const Button = forwardRef(({
   );
 });
 Button.displayName = "Button";
+const ButtonGroup = ({
+  bgColor = "#fff",
+  height,
+  padding = "2px 10px",
+  fixed = false,
+  gap = 12,
+  className = "",
+  style = {},
+  children
+}) => {
+  const formatSize = (value) => {
+    if (value === void 0) return void 0;
+    return typeof value === "number" ? `${value}px` : value;
+  };
+  const containerStyle = {
+    backgroundColor: bgColor,
+    height: formatSize(height),
+    padding: formatSize(padding),
+    gap: formatSize(gap),
+    ...style
+  };
+  const classNames2 = [
+    "wz-button-group",
+    fixed ? "wz-button-group--fixed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classNames2, style: containerStyle, children });
+};
+ButtonGroup.displayName = "ButtonGroup";
+const Icon = ({
+  name,
+  size = 24,
+  color = "currentColor",
+  className = "",
+  style,
+  onClick,
+  type = "yunying"
+  // 默认使用yunying图标库
+}) => {
+  const iconStyle = {
+    fontSize: typeof size === "number" ? `${size}px` : size,
+    color,
+    ...style
+  };
+  const iconFontClass = `iconfont-${type}`;
+  const iconPrefix = "icon-";
+  const iconClass = `${iconPrefix}${name}`;
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
+      style: iconStyle,
+      onClick
+    }
+  );
+};
 const RadioGroupContext = createContext({});
 const Radio = ({
   size,
@@ -127,6 +199,11 @@ const Radio = ({
   const isChecked = isInGroup ? groupContext.value === value : checked;
   const isDisabled = disabled || groupContext.disabled;
   const radioSize = size || groupContext.size || "medium";
+  const iconSizeMap = {
+    small: 16,
+    medium: 18,
+    large: 20
+  };
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -145,7 +222,7 @@ const Radio = ({
             ...rest
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "wz-radio-inner" }),
+        /* @__PURE__ */ jsx("span", { className: "wz-radio-inner", children: /* @__PURE__ */ jsx(Icon, { name: isChecked ? "radio-sel" : "radio-nor", type: "yunying", size: iconSizeMap[radioSize] }) }),
         children && /* @__PURE__ */ jsx("span", { className: "wz-radio-label", children })
       ]
     }
@@ -206,6 +283,11 @@ const Checkbox = ({
   const isChecked = isInGroup ? (_a = groupContext.value) == null ? void 0 : _a.includes(value) : checked;
   const isDisabled = disabled || groupContext.disabled;
   const checkboxSize = size || groupContext.size || "medium";
+  const iconSizeMap = {
+    small: 16,
+    medium: 18,
+    large: 20
+  };
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -224,7 +306,7 @@ const Checkbox = ({
             ...rest
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "wz-checkbox-inner" }),
+        /* @__PURE__ */ jsx("span", { className: "wz-checkbox-inner", children: /* @__PURE__ */ jsx(Icon, { name: isChecked ? "checkbox-checked" : "checkbox", type: "yunying", size: iconSizeMap[checkboxSize] }) }),
         children && /* @__PURE__ */ jsx("span", { className: "wz-checkbox-label", children })
       ]
     }
@@ -355,33 +437,6 @@ var classnames = { exports: {} };
 })(classnames);
 var classnamesExports = classnames.exports;
 const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-const Icon = ({
-  name,
-  size = 24,
-  color = "currentColor",
-  className = "",
-  style,
-  onClick,
-  type = "yunying"
-  // 默认使用yunying图标库
-}) => {
-  const iconStyle = {
-    fontSize: typeof size === "number" ? `${size}px` : size,
-    color,
-    ...style
-  };
-  const iconFontClass = `iconfont-${type}`;
-  const iconPrefix = "icon-";
-  const iconClass = `${iconPrefix}${name}`;
-  return /* @__PURE__ */ jsx(
-    "i",
-    {
-      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
-      style: iconStyle,
-      onClick
-    }
-  );
-};
 const TabbarItem = (props) => {
   const { title, icon, activeIcon, badge, badgeAsBubble, hump, active, onItemClick, onClick, activeColor } = props;
   const renderIcon = (iconSource) => {
@@ -544,7 +599,7 @@ const Cell$1 = (props) => {
   };
   const renderRightIcon = () => {
     if (arrow) {
-      return /* @__PURE__ */ jsx("div", { className: "wz-cell-arrow" });
+      return /* @__PURE__ */ jsx("div", { className: "wz-cell-arrow", children: /* @__PURE__ */ jsx(Icon, { name: "right-arrow", size: 16 }) });
     }
     return null;
   };
@@ -1109,23 +1164,32 @@ const Input = forwardRef(
   }
 );
 Input.displayName = "Input";
+const COLOR_MAP = {
+  horizontal: {
+    default: "#f7f7f7",
+    emphasis: "#eeeeee"
+  },
+  vertical: "rgba(0, 0, 0, 0.1)"
+};
 const Divider = ({
   direction = "horizontal",
-  color = "#eee",
+  type = "default",
+  color,
   length,
   margin,
   style,
   className = ""
 }) => {
   const isVertical = direction === "vertical";
+  const defaultColor = isVertical ? COLOR_MAP.vertical : COLOR_MAP.horizontal[type];
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: `wz-divider wz-divider--${direction} ${className}`,
       style: {
-        background: color,
-        width: isVertical ? 1 : length || "100%",
-        height: isVertical ? length || 24 : 1,
+        background: color || defaultColor,
+        width: isVertical ? 2 : length || "100%",
+        height: isVertical ? length || 24 : 2,
         margin,
         ...style
       }
@@ -1156,7 +1220,7 @@ const CheckList = ({ options, value, onChange, multiple = false, style, classNam
       onClick: () => handleClick(item),
       children: [
         /* @__PURE__ */ jsx("span", { className: "wz-check-list__label", children: item }),
-        isChecked(item) && /* @__PURE__ */ jsx("span", { className: "wz-check-list__icon", children: "✔" })
+        isChecked(item) && /* @__PURE__ */ jsx("span", { className: "wz-check-list__icon", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 18, type: "yunying" }) })
       ]
     },
     item
@@ -1641,7 +1705,10 @@ const DateRangePicker = ({
   startLabel = "开始时间",
   endLabel = "结束时间",
   className = "",
-  style
+  style,
+  showLongTerm = false,
+  longTermLabel = "长期有效",
+  longTermValue = "9999-12-31"
 }) => {
   const todayStr = React.useMemo(() => {
     const today = /* @__PURE__ */ new Date();
@@ -1653,6 +1720,7 @@ const DateRangePicker = ({
   const [innerValue, setInnerValue] = useState(value || [todayStr, todayStr]);
   const range = value || innerValue;
   const [active, setActive] = useState("start");
+  const isLongTerm = range[1] === longTermValue;
   const handleSelect = (val) => {
     if (active === "start") {
       const newRange = [val, range[1] && range[1] >= val ? range[1] : val];
@@ -1664,6 +1732,17 @@ const DateRangePicker = ({
       onChange == null ? void 0 : onChange(newRange);
     }
   };
+  const handleLongTermToggle = () => {
+    if (isLongTerm) {
+      const newRange = [range[0], range[0]];
+      setInnerValue(newRange);
+      onChange == null ? void 0 : onChange(newRange);
+    } else {
+      const newRange = [range[0], longTermValue];
+      setInnerValue(newRange);
+      onChange == null ? void 0 : onChange(newRange);
+    }
+  };
   return /* @__PURE__ */ jsxs("div", { className: `wz-date-range-picker ${className}`, style, children: [
     /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-label-row", children: [
       /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-label", children: startLabel }),
@@ -1679,14 +1758,28 @@ const DateRangePicker = ({
         }
       ) }),
       /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-sep", children: "至" }),
-      /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-col", children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `wz-date-range-picker-value${active === "end" ? " active" : ""}`,
-          onClick: () => setActive("end"),
-          children: range[1] || "请选择"
-        }
-      ) })
+      /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-col", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `wz-date-range-picker-value${active === "end" ? " active" : ""}${isLongTerm ? " disabled" : ""}`,
+            onClick: () => !isLongTerm && setActive("end"),
+            children: isLongTerm ? longTermLabel : range[1] || "请选择"
+          }
+        ),
+        showLongTerm && /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-long-term", onClick: handleLongTermToggle, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: isLongTerm ? "radio-sel" : "radio-nor",
+              type: "yunying",
+              size: 20,
+              color: isLongTerm ? "var(--active-color)" : "#ccc"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "wz-date-range-picker-long-term-text", children: longTermLabel })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-picker", children: /* @__PURE__ */ jsx(
       DatePicker,
@@ -1960,20 +2053,42 @@ const Tip = ({
   className,
   visible = true,
   onClose,
-  action,
-  marquee = false
+  marquee = false,
+  bold = false,
+  icon,
+  showAction = false,
+  actionText = "查看",
+  onAction
 }) => {
+  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;
   }
   const baseClass = "wz-tip";
+  const hasRightArea = showAction || onClose;
   const tipClass = classNames(baseClass, className, {
-    [`${baseClass}--marquee`]: marquee
+    [`${baseClass}--marquee`]: marquee,
+    [`${baseClass}--bold`]: bold,
+    [`${baseClass}--center`]: !marquee && !isMultiLine,
+    [`${baseClass}--left`]: !marquee && isMultiLine,
+    [`${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__ */ jsx("div", { className: `${baseClass}-content`, children: contentNode }),
-    action && /* @__PURE__ */ jsx("div", { className: `${baseClass}-action`, children: action }),
+    /* @__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__ */ jsx("span", { className: `${baseClass}-text`, children: contentNode })
+    ] }),
+    showAction && /* @__PURE__ */ jsx("div", { className: `${baseClass}-action`, onClick: onAction, children: actionText }),
     onClose && /* @__PURE__ */ jsx("div", { className: `${baseClass}-close`, onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }) })
   ] });
 };
@@ -2499,6 +2614,7 @@ const ConfigProvider = ({
 };
 export {
   Button,
+  ButtonGroup,
   Card,
   Cascader,
   Cell,