wz-h5-design 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+## 安装
+
+```bash
+npm install wz-h5-design
+```
+
+## 开发
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动文档服务器
+
+```bash
+npm run docs:dev
+```
+
+### 产出组件库
+
+```bash
+npm run build:lib
+```
+
+### 构建文档
+
+```bash
+npm run docs:build
+```
+
+## 文档结构
+
+```
+├── docs                   # 文档目录
+│   ├── guide              # 指南文档
+│   └── components         # 组件文档
+├── src                    # 源码目录
+│   └── components         # 组件目录
+│       ├── Button         # 按钮组件
+│       │   ├── demos      # 示例代码
+│       │   ├── Button.tsx # 组件实现
+│       │   ├── Button.scss # 组件样式
+│       │   └── index.md   # 组件文档
+│       └── ...            # 其他组件
+├── .dumirc.ts             # Dumi 配置
+└── package.json           # 项目配置
+```
+
+test

package/dist/Button/index.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo } from "react";
+const Button = forwardRef(({
+  type = "primary",
+  size = "medium",
+  block = false,
+  disabled = false,
+  color = "",
+  textColor = "",
+  borderColor = "",
+  className = "",
+  style = {},
+  children,
+  onClick
+}, ref) => {
+  const [isActive, setIsActive] = useState(false);
+  const timerRef = useRef(null);
+  const buttonStyle = useMemo(() => {
+    if (type === "cancel") return style;
+    if (type === "outline") {
+      return {
+        color: textColor || "var(--wz-primary-color)",
+        borderColor: borderColor || "var(--wz-primary-color)",
+        background: "transparent",
+        ...style
+      };
+    }
+    if (type === "text") {
+      return {
+        color: textColor || style.color || "var(--wz-primary-color, #22C94D)",
+        background: "transparent",
+        border: "none",
+        boxShadow: "none",
+        ...style
+      };
+    }
+    if (type === "primary") {
+      let s = { ...style };
+      s.background = color || "var(--wz-primary-gradient, var(--wz-primary-color))";
+      s.color = textColor || "#fff";
+      return s;
+    }
+    return style;
+  }, [type, color, textColor, borderColor, style]);
+  const handleClick = (e) => {
+    if (disabled) return;
+    setIsActive(true);
+    if (timerRef.current) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setIsActive(false), 100);
+    onClick == null ? void 0 : onClick(e);
+  };
+  const btnClass = [
+    "wz-button",
+    `wz-button--${type}`,
+    `wz-button--${size}`,
+    block ? "wz-button--block" : "",
+    disabled ? "wz-button--disabled" : "",
+    isActive && !disabled ? "wz-button--active" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: btnClass,
+      style: buttonStyle,
+      disabled,
+      onClick: handleClick,
+      children: [
+        children,
+        type === "primary" && isActive && /* @__PURE__ */ jsx("span", { className: "wz-button__mask" }),
+        type === "outline" && isActive && /* @__PURE__ */ jsx("span", { className: "wz-button__mask" }),
+        type === "outline" && disabled && /* @__PURE__ */ jsx("span", { className: "wz-button__mask--disabled" }),
+        type === "cancel" && isActive && /* @__PURE__ */ jsx("span", { className: "wz-button__mask--cancel" })
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+export {
+  Button,
+  Button as default
+};

package/dist/Button/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Button={},e.jsxRuntime,e.React)}(this,(function(e,t,r){"use strict";const o=r.forwardRef((({type:e="primary",size:o="medium",block:n=!1,disabled:a=!1,color:l="",textColor:s="",borderColor:u="",className:i="",style:c={},children:d,onClick:b},m)=>{const[f,p]=r.useState(!1),w=r.useRef(null),y=r.useMemo((()=>{if("cancel"===e)return c;if("outline"===e)return{color:s||"var(--wz-primary-color)",borderColor:u||"var(--wz-primary-color)",background:"transparent",...c};if("text"===e)return{color:s||c.color||"var(--wz-primary-color, #22C94D)",background:"transparent",border:"none",boxShadow:"none",...c};if("primary"===e){let e={...c};return e.background=l||"var(--wz-primary-gradient, var(--wz-primary-color))",e.color=s||"#fff",e}return c}),[e,l,s,u,c]),z=["wz-button",`wz-button--${e}`,`wz-button--${o}`,n?"wz-button--block":"",a?"wz-button--disabled":"",f&&!a?"wz-button--active":"",i].filter(Boolean).join(" ");return t.jsxs("button",{ref:m,type:"button",className:z,style:y,disabled:a,onClick:e=>{a||(p(!0),w.current&&window.clearTimeout(w.current),w.current=window.setTimeout((()=>p(!1)),100),null==b||b(e))},children:[d,"primary"===e&&f&&t.jsx("span",{className:"wz-button__mask"}),"outline"===e&&f&&t.jsx("span",{className:"wz-button__mask"}),"outline"===e&&a&&t.jsx("span",{className:"wz-button__mask--disabled"}),"cancel"===e&&f&&t.jsx("span",{className:"wz-button__mask--cancel"})]})}));o.displayName="Button",e.Button=o,e.default=o,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/Button/style/index.css

@@ -0,0 +1 @@
+.wz-button{box-sizing:border-box;text-align:center;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;border-radius:23px;outline:none;justify-content:center;align-items:center;height:40px;padding:0 15px;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:18px;font-weight:600;line-height:23px;transition:all .2s;display:inline-flex;position:relative;overflow:hidden}.wz-button--primary{color:#fff;background:var(--wz-primary-gradient,linear-gradient(90deg,#0ac0f7 0%,#0596f7 100%));border:none;border-radius:23px}.wz-button--primary.wz-button--disabled{background:#c0c4cc}.wz-button--outline{color:var(--wz-primary-color,#22c94d);border:1px solid var(--wz-primary-color,#22c94d);background:0 0;border-radius:26px}.wz-button--cancel{color:#fff;background:#c0c4cc;border:none;border-radius:26px}.wz-button--block{width:100%;display:flex}.wz-button--large{height:45px;padding:0 20px;font-size:18px}.wz-button--medium{height:30px;padding:0 16px;font-size:14px}.wz-button--small{height:25px;padding:0 12px;font-size:13px}.wz-button--disabled{cursor:not-allowed;opacity:.6}.wz-button--active{opacity:.9}.wz-button__mask{pointer-events:none;border-radius:inherit;z-index:1;background:#00000014;width:100%;height:100%;position:absolute;top:0;left:0}.wz-button__mask--disabled{pointer-events:none;border-radius:inherit;z-index:10;background:#ffffff80;width:100%;height:100%;position:absolute;top:0;left:0}.wz-button__mask--cancel{pointer-events:none;border-radius:inherit;z-index:10;background:#0000000f;width:100%;height:100%;position:absolute;top:0;left:0}@media screen and (max-width:767px){.wz-button--small{height:30px;font-size:14px}.wz-button--medium{height:40px;font-size:15px}.wz-button--large{height:50px;font-size:16px}}.wz-button--text{color:var(--wz-primary-color,#22c94d);box-shadow:none;background:0 0;border:none;min-width:0;height:auto;padding:0 8px;font-size:16px;font-weight:600;transition:color .2s}.wz-button--text:active{color:#179a38;background:#f5f7f9}.wz-button--disabled.wz-button--text{color:#c0c4cc;background:0 0}

package/dist/Button/style/index.js

@@ -0,0 +1 @@
+import './index.css';

package/dist/Button/style.css

@@ -0,0 +1 @@
+.wz-button{box-sizing:border-box;text-align:center;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;border-radius:23px;outline:none;justify-content:center;align-items:center;height:40px;padding:0 15px;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:18px;font-weight:600;line-height:23px;transition:all .2s;display:inline-flex;position:relative;overflow:hidden}.wz-button--primary{color:#fff;background:var(--wz-primary-gradient,linear-gradient(90deg,#0ac0f7 0%,#0596f7 100%));border:none;border-radius:23px}.wz-button--primary.wz-button--disabled{background:#c0c4cc}.wz-button--outline{color:var(--wz-primary-color,#22c94d);border:1px solid var(--wz-primary-color,#22c94d);background:0 0;border-radius:26px}.wz-button--cancel{color:#fff;background:#c0c4cc;border:none;border-radius:26px}.wz-button--block{width:100%;display:flex}.wz-button--large{height:45px;padding:0 20px;font-size:18px}.wz-button--medium{height:30px;padding:0 16px;font-size:14px}.wz-button--small{height:25px;padding:0 12px;font-size:13px}.wz-button--disabled{cursor:not-allowed;opacity:.6}.wz-button--active{opacity:.9}.wz-button__mask{pointer-events:none;border-radius:inherit;z-index:1;background:#00000014;width:100%;height:100%;position:absolute;top:0;left:0}.wz-button__mask--disabled{pointer-events:none;border-radius:inherit;z-index:10;background:#ffffff80;width:100%;height:100%;position:absolute;top:0;left:0}.wz-button__mask--cancel{pointer-events:none;border-radius:inherit;z-index:10;background:#0000000f;width:100%;height:100%;position:absolute;top:0;left:0}@media screen and (max-width:767px){.wz-button--small{height:30px;font-size:14px}.wz-button--medium{height:40px;font-size:15px}.wz-button--large{height:50px;font-size:16px}}.wz-button--text{color:var(--wz-primary-color,#22c94d);box-shadow:none;background:0 0;border:none;min-width:0;height:auto;padding:0 8px;font-size:16px;font-weight:600;transition:color .2s}.wz-button--text:active{color:#179a38;background:#f5f7f9}.wz-button--disabled.wz-button--text{color:#c0c4cc;background:0 0}

package/dist/Card/index.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const Card = ({
+  title,
+  extra,
+  cover,
+  actions,
+  bordered,
+  noDivider = false,
+  className = "",
+  style,
+  children,
+  onClick
+}) => {
+  const cardClassName = [
+    "wz-card",
+    bordered !== void 0 ? "wz-card-bordered" : "",
+    noDivider ? "wz-card-no-divider" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cardClassName, style, onClick, children: [
+    cover && /* @__PURE__ */ jsx("div", { className: "wz-card-cover", children: cover }),
+    (title || extra) && /* @__PURE__ */ jsxs("div", { className: "wz-card-header", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "wz-card-title", children: title }),
+      extra && /* @__PURE__ */ jsx("div", { className: "wz-card-extra", children: extra })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "wz-card-body", children }),
+    actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "wz-card-actions", children: actions.map((action, index) => /* @__PURE__ */ jsx("div", { className: "wz-card-action", children: action }, index)) })
+  ] });
+};
+export {
+  Card as default
+};

package/dist/Card/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,d){"object"==typeof exports&&"undefined"!=typeof module?module.exports=d(require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react/jsx-runtime"],d):(e="undefined"!=typeof globalThis?globalThis:e||self).Card=d(e.jsxRuntime)}(this,(function(e){"use strict";return({title:d,extra:i,cover:r,actions:s,bordered:c,noDivider:a=!1,className:n="",style:l,children:t,onClick:o})=>{const m=["wz-card",void 0!==c?"wz-card-bordered":"",a?"wz-card-no-divider":"",n].filter(Boolean).join(" ");return e.jsxs("div",{className:m,style:l,onClick:o,children:[r&&e.jsx("div",{className:"wz-card-cover",children:r}),(d||i)&&e.jsxs("div",{className:"wz-card-header",children:[d&&e.jsx("div",{className:"wz-card-title",children:d}),i&&e.jsx("div",{className:"wz-card-extra",children:i})]}),e.jsx("div",{className:"wz-card-body",children:t}),s&&s.length>0&&e.jsx("div",{className:"wz-card-actions",children:s.map(((d,i)=>e.jsx("div",{className:"wz-card-action",children:d},i)))})]})}}));

package/dist/Card/style/index.css

@@ -0,0 +1 @@
+.wz-card{box-sizing:border-box;background-color:#fff;border-radius:10px;width:100%;transition:all .2s ease-in-out}.wz-card-bordered{border:1px solid #dcdfe6}.wz-card-no-divider .wz-card-header{border-bottom:none}.wz-card-no-divider .wz-card-actions{border-top:none}.wz-card-cover img{border-radius:4px 4px 0 0;width:100%;height:auto;display:block}.wz-card-header{border-bottom:1px solid #dcdfe6;justify-content:space-between;align-items:center;padding:12px;display:flex}.wz-card-title{color:#333;font-size:14px;font-weight:600}.wz-card-extra{color:#999;font-size:13px}.wz-card-body{color:#666;padding:12px;font-size:14px;line-height:1.5}.wz-card-actions{border-top:1px solid #dcdfe6;display:flex}.wz-card-action{text-align:center;color:#999;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;flex:1;padding:12px;font-size:13px;transition:color .2s ease-in-out}.wz-card-action:not(:last-child){border-right:1px solid #dcdfe6}.wz-card-action:active{color:var(--wz-primary-color,#22c94d);background-color:#0000000d}

package/dist/Card/style/index.js

@@ -0,0 +1 @@
+import './index.css';

package/dist/Card/style.css

@@ -0,0 +1 @@
+.wz-card{box-sizing:border-box;background-color:#fff;border-radius:10px;width:100%;transition:all .2s ease-in-out}.wz-card-bordered{border:1px solid #dcdfe6}.wz-card-no-divider .wz-card-header{border-bottom:none}.wz-card-no-divider .wz-card-actions{border-top:none}.wz-card-cover img{border-radius:4px 4px 0 0;width:100%;height:auto;display:block}.wz-card-header{border-bottom:1px solid #dcdfe6;justify-content:space-between;align-items:center;padding:12px;display:flex}.wz-card-title{color:#333;font-size:14px;font-weight:600}.wz-card-extra{color:#999;font-size:13px}.wz-card-body{color:#666;padding:12px;font-size:14px;line-height:1.5}.wz-card-actions{border-top:1px solid #dcdfe6;display:flex}.wz-card-action{text-align:center;color:#999;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;flex:1;padding:12px;font-size:13px;transition:color .2s ease-in-out}.wz-card-action:not(:last-child){border-right:1px solid #dcdfe6}.wz-card-action:active{color:var(--wz-primary-color,#22c94d);background-color:#0000000d}

package/dist/Cascader/index.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+const Cascader = ({
+  value,
+  onChange,
+  data
+}) => {
+  const [selectedValues, setSelectedValues] = useState(value || []);
+  const [activeLevel, setActiveLevel] = useState(Math.min((value || []).length, 2));
+  useEffect(() => {
+    if (value !== void 0) {
+      setSelectedValues(value);
+      setActiveLevel(Math.min(value.length, 2));
+    }
+  }, [value]);
+  const currentLevelData = useMemo(() => {
+    if (activeLevel === 0) {
+      return data;
+    }
+    let currentData = data;
+    for (let i = 0; i < activeLevel; i++) {
+      const selectedItem = currentData.find((item) => item.value === selectedValues[i]);
+      currentData = (selectedItem == null ? void 0 : selectedItem.children) || [];
+    }
+    return currentData;
+  }, [data, activeLevel, selectedValues]);
+  const selectedLabels = useMemo(() => {
+    let currentData = data;
+    const defaultLabels = ["请选择", "请选择", "请选择"];
+    return selectedValues.map((value2, index) => {
+      const selectedItem = currentData.find((item) => item.value === value2);
+      currentData = (selectedItem == null ? void 0 : selectedItem.children) || [];
+      return (selectedItem == null ? void 0 : selectedItem.label) || defaultLabels[index];
+    });
+  }, [data, selectedValues]);
+  const handleSelect = (item) => {
+    if (item.disabled) return;
+    const newSelectedValues = [...selectedValues];
+    newSelectedValues[activeLevel] = item.value;
+    newSelectedValues.length = activeLevel + 1;
+    setSelectedValues(newSelectedValues);
+    if (activeLevel === 0 && item.children) {
+      setActiveLevel(1);
+    } else if (activeLevel === 1 && item.children) {
+      setActiveLevel(2);
+    } else if (activeLevel === 2) {
+      onChange == null ? void 0 : onChange(newSelectedValues);
+    }
+  };
+  const handleLevelChange = (level) => {
+    if (level <= selectedValues.length) {
+      setActiveLevel(level);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "wz-cascader", children: [
+    /* @__PURE__ */ jsx("div", { className: "wz-cascader-levels", children: ["省", "市", "区"].map((label, index) => {
+      if (index > 0 && selectedValues.length < index) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `
+                wz-cascader-level 
+                ${activeLevel === index ? "active" : ""}
+                ${selectedValues[index] ? "selected" : ""}
+              `,
+          onClick: () => handleLevelChange(index),
+          children: selectedValues[index] ? selectedLabels[index] : "请选择"
+        },
+        label
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "wz-cascader-content", children: /* @__PURE__ */ jsx("div", { className: "wz-cascader-options", children: currentLevelData.map((item) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `
+                wz-cascader-option 
+                ${selectedValues.includes(item.value) ? "selected" : ""}
+                ${item.disabled ? "disabled" : ""}
+              `,
+        onClick: () => handleSelect(item),
+        children: [
+          item.label,
+          item.disabled && /* @__PURE__ */ jsx("span", { className: "wz-cascader-option-tip", children: "不可选" })
+        ]
+      },
+      item.value
+    )) }) })
+  ] });
+};
+export {
+  Cascader as default
+};

package/dist/Cascader/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).Cascader=n(e.jsxRuntime,e.React)}(this,(function(e,n){"use strict";return({value:l,onChange:a,data:s})=>{const[t,c]=n.useState(l||[]),[i,d]=n.useState(Math.min((l||[]).length,2));n.useEffect((()=>{void 0!==l&&(c(l),d(Math.min(l.length,2)))}),[l]);const r=n.useMemo((()=>{if(0===i)return s;let e=s;for(let n=0;n<i;n++){const l=e.find((e=>e.value===t[n]));e=(null==l?void 0:l.children)||[]}return e}),[s,i,t]),o=n.useMemo((()=>{let e=s;const n=["请选择","请选择","请选择"];return t.map(((l,a)=>{const s=e.find((e=>e.value===l));return e=(null==s?void 0:s.children)||[],(null==s?void 0:s.label)||n[a]}))}),[s,t]);return e.jsxs("div",{className:"wz-cascader",children:[e.jsx("div",{className:"wz-cascader-levels",children:["省","市","区"].map(((n,l)=>l>0&&t.length<l?null:e.jsx("div",{className:`\n                wz-cascader-level \n                ${i===l?"active":""}\n                ${t[l]?"selected":""}\n              `,onClick:()=>{var e;(e=l)<=t.length&&d(e)},children:t[l]?o[l]:"请选择"},n)))}),e.jsx("div",{className:"wz-cascader-content",children:e.jsx("div",{className:"wz-cascader-options",children:r.map((n=>e.jsxs("div",{className:`\n                wz-cascader-option \n                ${t.includes(n.value)?"selected":""}\n                ${n.disabled?"disabled":""}\n              `,onClick:()=>(e=>{if(e.disabled)return;const n=[...t];n[i]=e.value,n.length=i+1,c(n),0===i&&e.children?d(1):1===i&&e.children?d(2):2===i&&(null==a||a(n))})(n),children:[n.label,n.disabled&&e.jsx("span",{className:"wz-cascader-option-tip",children:"不可选"})]},n.value)))})})]})}}));

package/dist/Cascader/style/index.css

@@ -0,0 +1 @@
+.wz-cascader{background-color:#fff;border-radius:8px;width:100%;position:relative}.wz-cascader-header{border-bottom:1px solid #f0f0f0;justify-content:flex-end;align-items:center;height:44px;padding-right:16px;display:flex;position:relative}.wz-cascader-close{cursor:pointer;color:#969799;justify-content:center;align-items:center;width:24px;height:24px;font-size:20px;display:flex}.wz-cascader-levels{border-bottom:1px solid #f0f0f0;gap:24px;padding:12px 16px;display:flex}.wz-cascader-level{text-align:left;color:#969799;cursor:pointer;flex:none;min-width:60px;transition:color .3s;position:relative}.wz-cascader-level.active{color:var(--wz-primary-color,#22c94d);font-weight:600}.wz-cascader-level.active:after{content:"";background-color:var(--wz-primary-color,#22c94d);transform-origin:50%;width:70px;height:2px;position:absolute;bottom:-10px;left:35%;transform:translate(-50%)scaleX(.6)}.wz-cascader-level.selected{color:var(--wz-primary-color,#22c94d)}.wz-cascader-content{display:flex}.wz-cascader-options{width:100%;max-height:240px;overflow-y:auto}.wz-cascader-option{text-align:left;cursor:pointer;padding:12px 16px;transition:background-color .3s;position:relative}.wz-cascader-option:hover{background-color:#f5f5f5}.wz-cascader-option.selected{color:var(--wz-primary-color,#22c94d)}.wz-cascader-option.disabled{color:#c8c9cc;cursor:not-allowed;background-color:#f2f3f5}.wz-cascader-option-tip{color:#969799;font-size:12px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}

package/dist/Cascader/style/index.js

@@ -0,0 +1 @@
+import './index.css';

package/dist/Cascader/style.css

@@ -0,0 +1 @@
+.wz-cascader{background-color:#fff;border-radius:8px;width:100%;position:relative}.wz-cascader-header{border-bottom:1px solid #f0f0f0;justify-content:flex-end;align-items:center;height:44px;padding-right:16px;display:flex;position:relative}.wz-cascader-close{cursor:pointer;color:#969799;justify-content:center;align-items:center;width:24px;height:24px;font-size:20px;display:flex}.wz-cascader-levels{border-bottom:1px solid #f0f0f0;gap:24px;padding:12px 16px;display:flex}.wz-cascader-level{text-align:left;color:#969799;cursor:pointer;flex:none;min-width:60px;transition:color .3s;position:relative}.wz-cascader-level.active{color:var(--wz-primary-color,#22c94d);font-weight:600}.wz-cascader-level.active:after{content:"";background-color:var(--wz-primary-color,#22c94d);transform-origin:50%;width:70px;height:2px;position:absolute;bottom:-10px;left:35%;transform:translate(-50%)scaleX(.6)}.wz-cascader-level.selected{color:var(--wz-primary-color,#22c94d)}.wz-cascader-content{display:flex}.wz-cascader-options{width:100%;max-height:240px;overflow-y:auto}.wz-cascader-option{text-align:left;cursor:pointer;padding:12px 16px;transition:background-color .3s;position:relative}.wz-cascader-option:hover{background-color:#f5f5f5}.wz-cascader-option.selected{color:var(--wz-primary-color,#22c94d)}.wz-cascader-option.disabled{color:#c8c9cc;cursor:not-allowed;background-color:#f2f3f5}.wz-cascader-option-tip{color:#969799;font-size:12px;position:absolute;top:50%;right:16px;transform:translateY(-50%)}

package/dist/Cell/index.js

@@ -0,0 +1,135 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var classnames = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(module) {
+  (function() {
+    var hasOwn = {}.hasOwnProperty;
+    function classNames2() {
+      var classes = [];
+      for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (!arg) continue;
+        var argType = typeof arg;
+        if (argType === "string" || argType === "number") {
+          classes.push(arg);
+        } else if (Array.isArray(arg)) {
+          if (arg.length) {
+            var inner = classNames2.apply(null, arg);
+            if (inner) {
+              classes.push(inner);
+            }
+          }
+        } else if (argType === "object") {
+          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+            classes.push(arg.toString());
+            continue;
+          }
+          for (var key in arg) {
+            if (hasOwn.call(arg, key) && arg[key]) {
+              classes.push(key);
+            }
+          }
+        }
+      }
+      return classes.join(" ");
+    }
+    if (module.exports) {
+      classNames2.default = classNames2;
+      module.exports = classNames2;
+    } else {
+      window.classNames = classNames2;
+    }
+  })();
+})(classnames);
+var classnamesExports = classnames.exports;
+const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+const Cell$1 = (props) => {
+  const {
+    title,
+    label,
+    value,
+    icon,
+    arrow = false,
+    border = true,
+    center = false,
+    disabled = false,
+    required = false,
+    className,
+    style,
+    titleStyle,
+    titleClassName,
+    labelStyle,
+    labelClassName,
+    valueStyle,
+    valueClassName,
+    onClick,
+    children
+  } = props;
+  const cellClassName = classNames(
+    "wz-cell",
+    {
+      "wz-cell-border": border,
+      "wz-cell-center": center,
+      "wz-cell-disabled": disabled
+    },
+    className
+  );
+  const renderTitle = () => {
+    if (title) {
+      return /* @__PURE__ */ jsxs("div", { className: classNames("wz-cell-title", titleClassName), style: titleStyle, children: [
+        required && /* @__PURE__ */ jsx("span", { className: "wz-cell-required", children: "*" }),
+        title,
+        value && /* @__PURE__ */ jsx("span", { className: classNames("wz-cell-value", valueClassName), style: valueStyle, children: value })
+      ] });
+    }
+    return null;
+  };
+  const renderValue = () => {
+    return null;
+  };
+  const renderLabel = () => {
+    if (label) {
+      return /* @__PURE__ */ jsx("div", { className: classNames("wz-cell-label", labelClassName), style: labelStyle, children: label });
+    }
+    return null;
+  };
+  const renderLeftIcon = () => {
+    if (icon) {
+      return /* @__PURE__ */ jsx("div", { className: "wz-cell-icon", children: icon });
+    }
+    return null;
+  };
+  const renderRightIcon = () => {
+    if (arrow) {
+      return /* @__PURE__ */ jsx("div", { className: "wz-cell-arrow" });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cellClassName, style, onClick: disabled ? void 0 : onClick, children: [
+    renderLeftIcon(),
+    /* @__PURE__ */ jsxs("div", { className: "wz-cell-content", children: [
+      renderTitle(),
+      renderLabel()
+    ] }),
+    renderValue(),
+    children && /* @__PURE__ */ jsx("div", { className: "wz-cell-extra", children }),
+    renderRightIcon()
+  ] });
+};
+const CellGroup = (props) => {
+  const { className, style, children } = props;
+  return /* @__PURE__ */ jsx("div", { className: classNames("wz-cell-group", className), style, children });
+};
+const Cell = Cell$1;
+Cell.Group = CellGroup;
+export {
+  Cell,
+  CellGroup
+};

package/dist/Cell/index.umd.cjs

@@ -0,0 +1,6 @@
+!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).Cell={},e.jsxRuntime)}(this,(function(e,l){"use strict";function s(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t,r={exports:{}};
+/*!
+  	Copyright (c) 2018 Jed Watson.
+  	Licensed under the MIT License (MIT), see
+  	http://jedwatson.github.io/classnames
+  */t=r,function(){var e={}.hasOwnProperty;function l(){for(var s=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var n=typeof r;if("string"===n||"number"===n)s.push(r);else if(Array.isArray(r)){if(r.length){var a=l.apply(null,r);a&&s.push(a)}}else if("object"===n){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){s.push(r.toString());continue}for(var i in r)e.call(r,i)&&r[i]&&s.push(i)}}}return s.join(" ")}t.exports?(l.default=l,t.exports=l):window.classNames=l}();const n=s(r.exports),a=e=>{const{className:s,style:t,children:r}=e;return l.jsx("div",{className:n("wz-cell-group",s),style:t,children:r})},i=e=>{const{title:s,label:t,value:r,icon:a,arrow:i=!1,border:c=!0,center:o=!1,disabled:d=!1,required:u=!1,className:p,style:f,titleStyle:y,titleClassName:m,labelStyle:h,labelClassName:v,valueStyle:x,valueClassName:j,onClick:w,children:b}=e,N=n("wz-cell",{"wz-cell-border":c,"wz-cell-center":o,"wz-cell-disabled":d},p);return l.jsxs("div",{className:N,style:f,onClick:d?void 0:w,children:[a?l.jsx("div",{className:"wz-cell-icon",children:a}):null,l.jsxs("div",{className:"wz-cell-content",children:[s?l.jsxs("div",{className:n("wz-cell-title",m),style:y,children:[u&&l.jsx("span",{className:"wz-cell-required",children:"*"}),s,r&&l.jsx("span",{className:n("wz-cell-value",j),style:x,children:r})]}):null,t?l.jsx("div",{className:n("wz-cell-label",v),style:h,children:t}):null]}),null,b&&l.jsx("div",{className:"wz-cell-extra",children:b}),i?l.jsx("div",{className:"wz-cell-arrow"}):null]})};i.Group=a,e.Cell=i,e.CellGroup=a,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/dist/Cell/style/index.css

@@ -0,0 +1 @@
+.wz-cell-group{background-color:#fff;border-radius:8px;overflow:hidden}.wz-cell-group .wz-cell{background-color:#0000;border-radius:0}.wz-cell{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background-color:#fff;border-radius:8px;outline:none;align-items:center;padding:12px;line-height:1.5;display:flex;position:relative}.wz-cell-border:after{content:"";background-color:#dcdfe6;height:1px;position:absolute;bottom:0;left:12px;right:12px;transform:scaleY(.5)}.wz-cell-center{align-items:center}.wz-cell-disabled{opacity:.5;cursor:not-allowed}.wz-cell-icon{color:#666;align-items:center;margin-right:12px;font-size:16px;display:flex}.wz-cell-content{flex:1;min-width:0}.wz-cell-title{color:#333;align-items:center;font-size:14px;display:flex}.wz-cell-title .wz-cell-value{color:#666;white-space:nowrap;margin-left:8px;font-size:14px}.wz-cell-label{color:#999;margin-top:4px;font-size:13px}.wz-cell-value{color:#666;white-space:nowrap;text-overflow:ellipsis;margin-left:8px;font-size:15px;overflow:hidden}.wz-cell-required{color:#ff4d4f;margin-right:4px;font-size:15px;font-weight:600}.wz-cell-arrow{border:1px solid #dcdfe6;border-width:1px 1px 0 0;width:12px;height:12px;margin-left:12px;transform:rotate(45deg)}.wz-cell-extra{color:#666;align-items:center;min-width:0;margin-left:8px;font-size:15px;display:flex}.wz-cell:has(.wz-cell-arrow):active{background-color:#f8f8f8}

package/dist/Cell/style/index.js

@@ -0,0 +1 @@
+import './index.css';

package/dist/Cell/style.css

@@ -0,0 +1 @@
+.wz-cell-group .wz-cell{background-color:#0000;border-radius:0}.wz-cell{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background-color:#fff;border-radius:8px;outline:none;align-items:center;padding:12px;line-height:1.5;display:flex;position:relative}.wz-cell-border:after{content:"";background-color:#dcdfe6;height:1px;position:absolute;bottom:0;left:12px;right:12px;transform:scaleY(.5)}.wz-cell-center{align-items:center}.wz-cell-disabled{opacity:.5;cursor:not-allowed}.wz-cell-icon{color:#666;align-items:center;margin-right:12px;font-size:16px;display:flex}.wz-cell-content{flex:1;min-width:0}.wz-cell-title{color:#333;align-items:center;font-size:14px;display:flex}.wz-cell-title .wz-cell-value{color:#666;white-space:nowrap;margin-left:8px;font-size:14px}.wz-cell-label{color:#999;margin-top:4px;font-size:13px}.wz-cell-value{color:#666;white-space:nowrap;text-overflow:ellipsis;margin-left:8px;font-size:15px;overflow:hidden}.wz-cell-required{color:#ff4d4f;margin-right:4px;font-size:15px;font-weight:600}.wz-cell-arrow{border:1px solid #dcdfe6;border-width:1px 1px 0 0;width:12px;height:12px;margin-left:12px;transform:rotate(45deg)}.wz-cell-extra{color:#666;align-items:center;min-width:0;margin-left:8px;font-size:15px;display:flex}.wz-cell:has(.wz-cell-arrow):active{background-color:#f8f8f8}.wz-cell-group{background-color:#fff;border-radius:8px;overflow:hidden}

package/dist/CheckList/index.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const CheckList = ({ options, value, onChange, multiple = false, style, className = "" }) => {
+  const isChecked = (item) => {
+    if (multiple && Array.isArray(value)) return value.includes(item);
+    return value === item;
+  };
+  const handleClick = (item) => {
+    if (multiple) {
+      if (!Array.isArray(value)) return;
+      if (value.includes(item)) {
+        onChange(value.filter((v) => v !== item));
+      } else {
+        onChange([...value, item]);
+      }
+    } else {
+      onChange(item);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: `wz-check-list ${className}`, style, children: options.map((item) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "wz-check-list__item" + (isChecked(item) ? " wz-check-list__item--active" : ""),
+      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: "✔" })
+      ]
+    },
+    item
+  )) });
+};
+export {
+  CheckList as default
+};

package/dist/CheckList/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s(require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react/jsx-runtime"],s):(e="undefined"!=typeof globalThis?globalThis:e||self).CheckList=s(e.jsxRuntime)}(this,(function(e){"use strict";return({options:s,value:i,onChange:t,multiple:c=!1,style:l,className:n=""})=>{const r=e=>c&&Array.isArray(i)?i.includes(e):i===e;return e.jsx("div",{className:`wz-check-list ${n}`,style:l,children:s.map((s=>e.jsxs("div",{className:"wz-check-list__item"+(r(s)?" wz-check-list__item--active":""),onClick:()=>(e=>{if(c){if(!Array.isArray(i))return;i.includes(e)?t(i.filter((s=>s!==e))):t([...i,e])}else t(e)})(s),children:[e.jsx("span",{className:"wz-check-list__label",children:s}),r(s)&&e.jsx("span",{className:"wz-check-list__icon",children:"✔"})]},s)))})}}));

package/dist/CheckList/style/index.css

@@ -0,0 +1 @@
+.wz-check-list{margin:0;padding:0}.wz-check-list__item{font-size:var(--wz-check-list-font-size,15px);color:#111;cursor:pointer;border-radius:var(--wz-check-list-radius,8px);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#fff;outline:none;justify-content:space-between;align-items:center;margin-bottom:2px;padding:15px 20px;transition:background .2s;display:flex}.wz-check-list__item--active{color:var(--wz-check-list-active-color,#1677ff);background:#fff;font-weight:700}.wz-check-list__label{flex:1}.wz-check-list__icon{color:var(--wz-check-list-active-color,#1677ff);margin-left:8px;font-size:16px}

package/dist/CheckList/style/index.js

@@ -0,0 +1 @@
+import './index.css';

package/dist/CheckList/style.css

@@ -0,0 +1 @@
+.wz-check-list{margin:0;padding:0}.wz-check-list__item{font-size:var(--wz-check-list-font-size,15px);color:#111;cursor:pointer;border-radius:var(--wz-check-list-radius,8px);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#fff;outline:none;justify-content:space-between;align-items:center;margin-bottom:2px;padding:15px 20px;transition:background .2s;display:flex}.wz-check-list__item--active{color:var(--wz-check-list-active-color,#1677ff);background:#fff;font-weight:700}.wz-check-list__label{flex:1}.wz-check-list__icon{color:var(--wz-check-list-active-color,#1677ff);margin-left:8px;font-size:16px}

package/dist/Checkbox/index.js

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useContext, createContext } from "react";
+const CheckboxContext = createContext({});
+const Checkbox = ({
+  size,
+  checked,
+  disabled,
+  onChange,
+  children,
+  value,
+  className = "",
+  style,
+  ...rest
+}) => {
+  var _a;
+  const groupContext = useContext(CheckboxContext);
+  const isInGroup = !!groupContext.value;
+  const handleChange = (e) => {
+    var _a2;
+    if (!disabled && !groupContext.disabled) {
+      if (isInGroup) {
+        const newValue = e.target.checked ? [...groupContext.value || [], value] : (groupContext.value || []).filter((v) => v !== value);
+        (_a2 = groupContext.onChange) == null ? void 0 : _a2.call(groupContext, newValue);
+      } else {
+        onChange == null ? void 0 : onChange(e.target.checked);
+      }
+    }
+  };
+  const isChecked = isInGroup ? (_a = groupContext.value) == null ? void 0 : _a.includes(value) : checked;
+  const isDisabled = disabled || groupContext.disabled;
+  const checkboxSize = size || groupContext.size || "medium";
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: `wz-checkbox-wrapper ${isDisabled ? "wz-checkbox--disabled" : ""} wz-checkbox--${checkboxSize} ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "wz-checkbox-input",
+            checked: isChecked,
+            disabled: isDisabled,
+            onChange: handleChange,
+            value,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "wz-checkbox-inner" }),
+        children && /* @__PURE__ */ jsx("span", { className: "wz-checkbox-label", children })
+      ]
+    }
+  );
+};
+const CheckboxGroup = ({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  size,
+  children,
+  className = "",
+  style
+}) => {
+  const [innerValue, setInnerValue] = React.useState(defaultValue || []);
+  const handleChange = (newValue) => {
+    setInnerValue(newValue);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  const contextValue = {
+    value: value !== void 0 ? value : innerValue,
+    onChange: handleChange,
+    disabled,
+    size
+  };
+  return /* @__PURE__ */ jsx(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: `wz-checkbox-group ${className}`, style, children }) });
+};
+Checkbox.Group = CheckboxGroup;
+Checkbox.displayName = "Checkbox";
+CheckboxGroup.displayName = "Checkbox.Group";
+export {
+  Checkbox as default
+};

package/dist/Checkbox/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],a):(e="undefined"!=typeof globalThis?globalThis:e||self).Checkbox=a(e.jsxRuntime,e.React)}(this,(function(e,a){"use strict";const l=a.createContext({}),s=({size:s,checked:c,disabled:n,onChange:i,children:t,value:d,className:o="",style:u,...r})=>{var h;const x=a.useContext(l),b=!!x.value,p=b?null==(h=x.value)?void 0:h.includes(d):c,f=n||x.disabled,m=s||x.size||"medium";return e.jsxs("label",{className:`wz-checkbox-wrapper ${f?"wz-checkbox--disabled":""} wz-checkbox--${m} ${o}`,style:u,children:[e.jsx("input",{type:"checkbox",className:"wz-checkbox-input",checked:p,disabled:f,onChange:e=>{var a;if(!n&&!x.disabled)if(b){const l=e.target.checked?[...x.value||[],d]:(x.value||[]).filter((e=>e!==d));null==(a=x.onChange)||a.call(x,l)}else null==i||i(e.target.checked)},value:d,...r}),e.jsx("span",{className:"wz-checkbox-inner"}),t&&e.jsx("span",{className:"wz-checkbox-label",children:t})]})},c=({value:s,defaultValue:c,onChange:n,disabled:i,size:t,children:d,className:o="",style:u})=>{const[r,h]=a.useState(c||[]),x={value:void 0!==s?s:r,onChange:e=>{h(e),null==n||n(e)},disabled:i,size:t};return e.jsx(l.Provider,{value:x,children:e.jsx("div",{className:`wz-checkbox-group ${o}`,style:u,children:d})})};return s.Group=c,s.displayName="Checkbox",c.displayName="Checkbox.Group",s}));

package/dist/Checkbox/style/index.css

@@ -0,0 +1 @@
+.wz-checkbox-group{flex-direction:column;gap:12px;display:inline-flex}.wz-checkbox-group.wz-checkbox-group--horizontal{flex-direction:row;align-items:center}.wz-checkbox-wrapper{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;outline:none;align-items:center;padding:8px 0;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;transition:all .2s ease-in-out;display:inline-flex;position:relative}.wz-checkbox-wrapper.wz-checkbox--small .wz-checkbox-inner{width:16px;height:16px}.wz-checkbox-wrapper.wz-checkbox--small .wz-checkbox-label{margin-left:8px;font-size:13px}.wz-checkbox-wrapper.wz-checkbox--medium .wz-checkbox-inner{width:18px;height:18px}.wz-checkbox-wrapper.wz-checkbox--medium .wz-checkbox-label{margin-left:12px;font-size:14px}.wz-checkbox-wrapper.wz-checkbox--large .wz-checkbox-inner{width:20px;height:20px}.wz-checkbox-wrapper.wz-checkbox--large .wz-checkbox-label{margin-left:16px;font-size:16px}.wz-checkbox-wrapper.wz-checkbox--disabled{cursor:not-allowed;opacity:.6}.wz-checkbox-wrapper.wz-checkbox--disabled .wz-checkbox-inner{background-color:#f5f7fa;border-color:#e4e7ed}.wz-checkbox-wrapper.wz-checkbox--disabled .wz-checkbox-label{color:#c0c4cc}.wz-checkbox-input{opacity:0;z-index:-1;width:0;height:0;margin:0;padding:0;position:absolute}.wz-checkbox-inner{background-color:#fff;border:1.5px solid #dcdfe6;border-radius:2px;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-block;position:relative;box-shadow:0 1px 2px #0000000d}.wz-checkbox-inner:after{content:"";opacity:0;pointer-events:none;border:2px solid #fff;border-width:0 2px 2px 0;width:6px;height:12px;transition:all .2s cubic-bezier(.4,0,.2,1);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-60%)scale(.7)rotate(45deg)}.wz-checkbox-input:checked+.wz-checkbox-inner{border-color:var(--wz-primary-color,#22c94d);background-color:var(--wz-primary-color,#22c94d);box-shadow:0 2px 4px #22c94d33}.wz-checkbox-input:checked+.wz-checkbox-inner:after{opacity:1;transform:translate(-50%,-60%)scale(1)rotate(45deg)}.wz-checkbox-input:focus+.wz-checkbox-inner{border-color:var(--wz-primary-color,#22c94d);box-shadow:0 0 0 3px #22c94d26}.wz-checkbox-wrapper:hover .wz-checkbox-inner{border-color:var(--wz-primary-color,#22c94d);box-shadow:0 2px 4px #22c94d1a}.wz-checkbox-label{color:#333;font-family:"Alibaba PuHuiTi 2.0",Alibaba-PuHuiTi-Regular,PingFang SC,Microsoft YaHei,Arial,sans-serif;line-height:1.5;transition:color .2s}.wz-checkbox-wrapper:hover .wz-checkbox-label{color:var(--wz-primary-color,#22c94d)}@media screen and (max-width:767px){.wz-checkbox-group{gap:8px}.wz-checkbox-wrapper.wz-checkbox--small .wz-checkbox-label{font-size:14px}.wz-checkbox-wrapper.wz-checkbox--medium .wz-checkbox-label{font-size:15px}.wz-checkbox-wrapper.wz-checkbox--large .wz-checkbox-label{font-size:16px}}

package/dist/Checkbox/style/index.js

@@ -0,0 +1 @@
+import './index.css';