wz-h5-design 1.0.0

package/dist/Checkbox/style.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/Collapse/index.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const Collapse = ({
+  title,
+  extra,
+  children,
+  defaultExpanded = false,
+  expanded,
+  onChange,
+  style,
+  className = "",
+  headerStyle,
+  headerClassName = "",
+  contentStyle,
+  contentClassName = ""
+}) => {
+  const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
+  const isControlled = expanded !== void 0;
+  const isExpanded = isControlled ? expanded : innerExpanded;
+  const handleToggle = () => {
+    if (!isControlled) {
+      setInnerExpanded(!isExpanded);
+    }
+    onChange == null ? void 0 : onChange(!isExpanded);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `wz-collapse${className ? " " + className : ""}`, style, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `wz-collapse-header ${headerClassName}`,
+        onClick: handleToggle,
+        style: headerStyle,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "wz-collapse-title", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "wz-collapse-extra", onClick: (e) => e.stopPropagation(), children: extra }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `wz-collapse-arrow${isExpanded ? " expanded" : ""}`,
+              width: "20",
+              height: "20",
+              viewBox: "0 0 20 20",
+              style: { transition: "transform 0.2s", transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" },
+              children: /* @__PURE__ */ jsx(
+                "polyline",
+                {
+                  points: "7,5 13,10 7,15",
+                  fill: "none",
+                  stroke: "#888",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `wz-collapse-content${isExpanded ? " expanded" : ""} ${contentClassName}`,
+        style: contentStyle,
+        children
+      }
+    )
+  ] });
+};
+export {
+  Collapse as default
+};

package/dist/Collapse/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Collapse=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";return({title:s,extra:l,children:n,defaultExpanded:a=!1,expanded:o,onChange:i,style:r,className:d="",headerStyle:c,headerClassName:p="",contentStyle:u,contentClassName:x=""})=>{const[h,f]=t.useState(a),m=void 0!==o,j=m?o:h;return e.jsxs("div",{className:"wz-collapse"+(d?" "+d:""),style:r,children:[e.jsxs("div",{className:`wz-collapse-header ${p}`,onClick:()=>{m||f(!j),null==i||i(!j)},style:c,children:[e.jsx("div",{className:"wz-collapse-title",children:s}),e.jsx("div",{className:"wz-collapse-extra",onClick:e=>e.stopPropagation(),children:l}),e.jsx("svg",{className:"wz-collapse-arrow"+(j?" expanded":""),width:"20",height:"20",viewBox:"0 0 20 20",style:{transition:"transform 0.2s",transform:j?"rotate(90deg)":"rotate(0deg)"},children:e.jsx("polyline",{points:"7,5 13,10 7,15",fill:"none",stroke:"#888",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),e.jsx("div",{className:`wz-collapse-content${j?" expanded":""} ${x}`,style:u,children:n})]})}}));

package/dist/Collapse/style/index.css

@@ -0,0 +1 @@
+.wz-collapse{background:#fff;border-radius:8px;overflow:hidden}.wz-collapse-header{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding:12px 16px;display:flex;position:relative}.wz-collapse-title{color:#333;flex:1;font-size:15px;font-weight:500}.wz-collapse-extra{color:#999;margin-right:12px;font-size:13px}.wz-collapse-arrow{color:#999;transition:transform .2s}.wz-collapse-arrow.expanded{transform:rotate(90deg)}.wz-collapse-content{max-height:0;transition:max-height .2s;overflow:hidden}.wz-collapse-content.expanded{max-height:1000px}

package/dist/Collapse/style/index.js

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

package/dist/Collapse/style.css

@@ -0,0 +1 @@
+.wz-collapse{background:#fff;border-radius:8px;overflow:hidden}.wz-collapse-header{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding:12px 16px;display:flex;position:relative}.wz-collapse-title{color:#333;flex:1;font-size:15px;font-weight:500}.wz-collapse-extra{color:#999;margin-right:12px;font-size:13px}.wz-collapse-arrow{color:#999;transition:transform .2s}.wz-collapse-arrow.expanded{transform:rotate(90deg)}.wz-collapse-content{max-height:0;transition:max-height .2s;overflow:hidden}.wz-collapse-content.expanded{max-height:1000px}

package/dist/DatePicker/index.js

@@ -0,0 +1,154 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useMemo, useState, useRef, useLayoutEffect } from "react";
+const getYearList = (min, max) => {
+  const arr = [];
+  for (let i = min; i <= max; i++) arr.push(i.toString());
+  return arr;
+};
+const getMonthList = () => Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, "0"));
+const getDayList = (year, month) => {
+  const days = new Date(year, month, 0).getDate();
+  return Array.from({ length: days }, (_, i) => (i + 1).toString().padStart(2, "0"));
+};
+const DatePicker = ({
+  value,
+  onChange,
+  min = "1970-01-01",
+  max = "2100-12-31",
+  columns = ["year", "month", "day"],
+  itemHeight = 48,
+  className = "",
+  style
+}) => {
+  const today = /* @__PURE__ */ new Date();
+  const [initYear, initMonth, initDay] = value ? value.split("-").map(Number) : [today.getFullYear(), today.getMonth() + 1, today.getDate()];
+  const minYear = Number(min.split("-")[0]);
+  const maxYear = Number(max.split("-")[0]);
+  const yearList = useMemo(() => getYearList(minYear, maxYear), [minYear, maxYear]);
+  const [year, setYear] = useState(initYear);
+  const [month, setMonth] = useState(initMonth);
+  const [day, setDay] = useState(initDay);
+  const monthList = getMonthList();
+  const dayList = getDayList(year, month);
+  const yearRef = useRef(null);
+  const monthRef = useRef(null);
+  const dayRef = useRef(null);
+  const startY = useRef(0);
+  const startScroll = useRef(0);
+  const isDragging = useRef(false);
+  const dragType = useRef(null);
+  useLayoutEffect(() => {
+    if (yearRef.current) yearRef.current.scrollTo({ top: (year - minYear) * itemHeight, behavior: "auto" });
+  }, [year, itemHeight, minYear]);
+  useLayoutEffect(() => {
+    if (monthRef.current) monthRef.current.scrollTo({ top: (month - 1) * itemHeight, behavior: "auto" });
+  }, [month, itemHeight]);
+  useLayoutEffect(() => {
+    if (dayRef.current) dayRef.current.scrollTo({ top: (day - 1) * itemHeight, behavior: "auto" });
+  }, [day, itemHeight]);
+  const handleTouchStart = (type) => (e) => {
+    var _a, _b, _c;
+    isDragging.current = true;
+    dragType.current = type;
+    startY.current = e.touches[0].clientY;
+    let scrollTop = 0;
+    if (type === "year") scrollTop = ((_a = yearRef.current) == null ? void 0 : _a.scrollTop) || 0;
+    if (type === "month") scrollTop = ((_b = monthRef.current) == null ? void 0 : _b.scrollTop) || 0;
+    if (type === "day") scrollTop = ((_c = dayRef.current) == null ? void 0 : _c.scrollTop) || 0;
+    startScroll.current = scrollTop;
+  };
+  const handleTouchMove = (e) => {
+    if (!isDragging.current || !dragType.current) return;
+    const deltaY = e.touches[0].clientY - startY.current;
+    if (dragType.current === "year" && yearRef.current) yearRef.current.scrollTop = startScroll.current - deltaY;
+    if (dragType.current === "month" && monthRef.current) monthRef.current.scrollTop = startScroll.current - deltaY;
+    if (dragType.current === "day" && dayRef.current) dayRef.current.scrollTop = startScroll.current - deltaY;
+  };
+  const handleTouchEnd = () => {
+    if (!isDragging.current || !dragType.current) return;
+    if (dragType.current === "year" && yearRef.current) {
+      const idx = Math.round(yearRef.current.scrollTop / itemHeight);
+      setYear(Number(yearList[idx]));
+      onChange == null ? void 0 : onChange(`${yearList[idx]}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`);
+    }
+    if (dragType.current === "month" && monthRef.current) {
+      const idx = Math.round(monthRef.current.scrollTop / itemHeight);
+      setMonth(Number(monthList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${monthList[idx]}-${day.toString().padStart(2, "0")}`);
+    }
+    if (dragType.current === "day" && dayRef.current) {
+      const idx = Math.round(dayRef.current.scrollTop / itemHeight);
+      setDay(Number(dayList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${month.toString().padStart(2, "0")}-${dayList[idx]}`);
+    }
+    isDragging.current = false;
+    dragType.current = null;
+  };
+  const handleScroll = (type) => () => {
+    if (isDragging.current) return;
+    if (type === "year" && yearRef.current) {
+      const idx = Math.round(yearRef.current.scrollTop / itemHeight);
+      setYear(Number(yearList[idx]));
+      onChange == null ? void 0 : onChange(`${yearList[idx]}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`);
+    }
+    if (type === "month" && monthRef.current) {
+      const idx = Math.round(monthRef.current.scrollTop / itemHeight);
+      setMonth(Number(monthList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${monthList[idx]}-${day.toString().padStart(2, "0")}`);
+    }
+    if (type === "day" && dayRef.current) {
+      const idx = Math.round(dayRef.current.scrollTop / itemHeight);
+      setDay(Number(dayList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${month.toString().padStart(2, "0")}-${dayList[idx]}`);
+    }
+  };
+  React.useEffect(() => {
+    if (value) {
+      const [y, m, d] = value.split("-").map(Number);
+      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" });
+    }
+  }, [value]);
+  const renderColumn = (options, current, ref, type) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "wz-date-picker-list",
+      ref,
+      style: { height: itemHeight * 3 },
+      onTouchStart: handleTouchStart(type),
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onScroll: handleScroll(type),
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { height: itemHeight } }),
+        options.map((opt, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `wz-date-picker-item${idx === current ? " active" : ""}`,
+            style: { height: itemHeight },
+            children: type === "year" ? `${opt}年` : type === "month" ? `${opt}月` : `${opt}日`
+          },
+          opt
+        )),
+        /* @__PURE__ */ jsx("div", { style: { height: itemHeight } })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `wz-date-picker ${className}`, style, children: [
+    /* @__PURE__ */ jsx("div", { className: "wz-date-picker-mask wz-date-picker-mask-top", style: { height: itemHeight } }),
+    /* @__PURE__ */ jsx("div", { className: "wz-date-picker-indicator", style: { height: itemHeight } }),
+    /* @__PURE__ */ jsxs("div", { className: "wz-date-picker-columns", children: [
+      columns.includes("year") && renderColumn(yearList, year - minYear, yearRef, "year"),
+      columns.includes("month") && renderColumn(monthList, month - 1, monthRef, "month"),
+      columns.includes("day") && renderColumn(dayList, day - 1, dayRef, "day")
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "wz-date-picker-mask wz-date-picker-mask-bottom", style: { height: itemHeight } })
+  ] });
+};
+export {
+  DatePicker as default
+};

package/dist/DatePicker/index.umd.cjs

@@ -0,0 +1 @@
+!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],r):(t="undefined"!=typeof globalThis?globalThis:t||self).DatePicker=r(t.jsxRuntime,t.React)}(this,(function(t,r){"use strict";return({value:e,onChange:n,min:u="1970-01-01",max:c="2100-12-31",columns:o=["year","month","day"],itemHeight:a=48,className:l="",style:s})=>{const i=new Date,[d,h,p]=e?e.split("-").map(Number):[i.getFullYear(),i.getMonth()+1,i.getDate()],m=Number(u.split("-")[0]),f=Number(c.split("-")[0]),y=r.useMemo((()=>((t,r)=>{const e=[];for(let n=t;n<=r;n++)e.push(n.toString());return e})(m,f)),[m,f]),[g,S]=r.useState(d),[T,v]=r.useState(h),[$,b]=r.useState(p),N=Array.from({length:12},((t,r)=>(r+1).toString().padStart(2,"0"))),x=((t,r)=>{const e=new Date(t,r,0).getDate();return Array.from({length:e},((t,r)=>(r+1).toString().padStart(2,"0")))})(g,T),k=r.useRef(null),j=r.useRef(null),w=r.useRef(null),z=r.useRef(0),M=r.useRef(0),R=r.useRef(!1),D=r.useRef(null);r.useLayoutEffect((()=>{k.current&&k.current.scrollTo({top:(g-m)*a,behavior:"auto"})}),[g,a,m]),r.useLayoutEffect((()=>{j.current&&j.current.scrollTo({top:(T-1)*a,behavior:"auto"})}),[T,a]),r.useLayoutEffect((()=>{w.current&&w.current.scrollTo({top:($-1)*a,behavior:"auto"})}),[$,a]);const E=t=>r=>{var e,n,u;R.current=!0,D.current=t,z.current=r.touches[0].clientY;let c=0;"year"===t&&(c=(null==(e=k.current)?void 0:e.scrollTop)||0),"month"===t&&(c=(null==(n=j.current)?void 0:n.scrollTop)||0),"day"===t&&(c=(null==(u=w.current)?void 0:u.scrollTop)||0),M.current=c},L=t=>{if(!R.current||!D.current)return;const r=t.touches[0].clientY-z.current;"year"===D.current&&k.current&&(k.current.scrollTop=M.current-r),"month"===D.current&&j.current&&(j.current.scrollTop=M.current-r),"day"===D.current&&w.current&&(w.current.scrollTop=M.current-r)},Y=()=>{if(R.current&&D.current){if("year"===D.current&&k.current){const t=Math.round(k.current.scrollTop/a);S(Number(y[t])),null==n||n(`${y[t]}-${T.toString().padStart(2,"0")}-${$.toString().padStart(2,"0")}`)}if("month"===D.current&&j.current){const t=Math.round(j.current.scrollTop/a);v(Number(N[t])),null==n||n(`${g}-${N[t]}-${$.toString().padStart(2,"0")}`)}if("day"===D.current&&w.current){const t=Math.round(w.current.scrollTop/a);b(Number(x[t])),null==n||n(`${g}-${T.toString().padStart(2,"0")}-${x[t]}`)}R.current=!1,D.current=null}},q=t=>()=>{if(!R.current){if("year"===t&&k.current){const t=Math.round(k.current.scrollTop/a);S(Number(y[t])),null==n||n(`${y[t]}-${T.toString().padStart(2,"0")}-${$.toString().padStart(2,"0")}`)}if("month"===t&&j.current){const t=Math.round(j.current.scrollTop/a);v(Number(N[t])),null==n||n(`${g}-${N[t]}-${$.toString().padStart(2,"0")}`)}if("day"===t&&w.current){const t=Math.round(w.current.scrollTop/a);b(Number(x[t])),null==n||n(`${g}-${T.toString().padStart(2,"0")}-${x[t]}`)}}};r.useEffect((()=>{if(e){const[t,r,n]=e.split("-").map(Number);S(t),v(r),b(n),k.current&&k.current.scrollTo({top:(t-m)*a,behavior:"auto"}),j.current&&j.current.scrollTo({top:(r-1)*a,behavior:"auto"}),w.current&&w.current.scrollTo({top:(n-1)*a,behavior:"auto"})}}),[e]);const A=(r,e,n,u)=>t.jsxs("div",{className:"wz-date-picker-list",ref:n,style:{height:3*a},onTouchStart:E(u),onTouchMove:L,onTouchEnd:Y,onScroll:q(u),children:[t.jsx("div",{style:{height:a}}),r.map(((r,n)=>t.jsx("div",{className:"wz-date-picker-item"+(n===e?" active":""),style:{height:a},children:"year"===u?`${r}年`:"month"===u?`${r}月`:`${r}日`},r))),t.jsx("div",{style:{height:a}})]});return t.jsxs("div",{className:`wz-date-picker ${l}`,style:s,children:[t.jsx("div",{className:"wz-date-picker-mask wz-date-picker-mask-top",style:{height:a}}),t.jsx("div",{className:"wz-date-picker-indicator",style:{height:a}}),t.jsxs("div",{className:"wz-date-picker-columns",children:[o.includes("year")&&A(y,g-m,k,"year"),o.includes("month")&&A(N,T-1,j,"month"),o.includes("day")&&A(x,$-1,w,"day")]}),t.jsx("div",{className:"wz-date-picker-mask wz-date-picker-mask-bottom",style:{height:a}})]})}}));

package/dist/DatePicker/style/index.css

@@ -0,0 +1 @@
+.wz-date-picker{background:var(--wz-date-picker-bg,#f5f5f5);-webkit-user-select:none;user-select:none;touch-action:pan-y;width:100%;position:relative;overflow:hidden}.wz-date-picker-columns{flex-direction:row;width:100%;height:100%;display:flex}.wz-date-picker-list{-webkit-overflow-scrolling:touch;scrollbar-width:none;z-index:2;flex:1 1 0;min-width:0;position:relative;overflow-y:scroll}.wz-date-picker-list::-webkit-scrollbar{display:none}.wz-date-picker-item{color:var(--wz-date-picker-item-color,#bbb);background:0 0;justify-content:center;align-items:center;font-family:"阿里巴巴普惠体 2.0";font-size:20px;font-weight:600;transition:color .2s;display:flex}.wz-date-picker-item.active{color:var(--wz-date-picker-active-color,#000)}.wz-date-picker-mask{z-index:3;pointer-events:none;position:absolute;left:0;right:0}.wz-date-picker-mask-top{background:linear-gradient(to bottom,var(--wz-date-picker-bg,#f5f5f5)20%,#f5f5f500);top:0}.wz-date-picker-mask-bottom{background:linear-gradient(to top,var(--wz-date-picker-bg,#f5f5f5)20%,#f5f5f500);bottom:0}.wz-date-picker-indicator{z-index:1;pointer-events:none;border-radius:var(--wz-date-picker-radius,10px);background:var(--wz-date-picker-active-bg,#fff);position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%)}

package/dist/DatePicker/style/index.js

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

package/dist/DatePicker/style.css

@@ -0,0 +1 @@
+.wz-date-picker{background:var(--wz-date-picker-bg,#f5f5f5);-webkit-user-select:none;user-select:none;touch-action:pan-y;width:100%;position:relative;overflow:hidden}.wz-date-picker-columns{flex-direction:row;width:100%;height:100%;display:flex}.wz-date-picker-list{-webkit-overflow-scrolling:touch;scrollbar-width:none;z-index:2;flex:1 1 0;min-width:0;position:relative;overflow-y:scroll}.wz-date-picker-list::-webkit-scrollbar{display:none}.wz-date-picker-item{color:var(--wz-date-picker-item-color,#bbb);background:0 0;justify-content:center;align-items:center;font-family:"阿里巴巴普惠体 2.0";font-size:20px;font-weight:600;transition:color .2s;display:flex}.wz-date-picker-item.active{color:var(--wz-date-picker-active-color,#000)}.wz-date-picker-mask{z-index:3;pointer-events:none;position:absolute;left:0;right:0}.wz-date-picker-mask-top{background:linear-gradient(to bottom,var(--wz-date-picker-bg,#f5f5f5)20%,#f5f5f500);top:0}.wz-date-picker-mask-bottom{background:linear-gradient(to top,var(--wz-date-picker-bg,#f5f5f5)20%,#f5f5f500);bottom:0}.wz-date-picker-indicator{z-index:1;pointer-events:none;border-radius:var(--wz-date-picker-radius,10px);background:var(--wz-date-picker-active-bg,#fff);position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%)}

package/dist/DateRangePicker/index.js

@@ -0,0 +1,220 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useMemo, useState, useRef, useLayoutEffect } from "react";
+const getYearList = (min, max) => {
+  const arr = [];
+  for (let i = min; i <= max; i++) arr.push(i.toString());
+  return arr;
+};
+const getMonthList = () => Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, "0"));
+const getDayList = (year, month) => {
+  const days = new Date(year, month, 0).getDate();
+  return Array.from({ length: days }, (_, i) => (i + 1).toString().padStart(2, "0"));
+};
+const DatePicker = ({
+  value,
+  onChange,
+  min = "1970-01-01",
+  max = "2100-12-31",
+  columns = ["year", "month", "day"],
+  itemHeight = 48,
+  className = "",
+  style
+}) => {
+  const today = /* @__PURE__ */ new Date();
+  const [initYear, initMonth, initDay] = value ? value.split("-").map(Number) : [today.getFullYear(), today.getMonth() + 1, today.getDate()];
+  const minYear = Number(min.split("-")[0]);
+  const maxYear = Number(max.split("-")[0]);
+  const yearList = useMemo(() => getYearList(minYear, maxYear), [minYear, maxYear]);
+  const [year, setYear] = useState(initYear);
+  const [month, setMonth] = useState(initMonth);
+  const [day, setDay] = useState(initDay);
+  const monthList = getMonthList();
+  const dayList = getDayList(year, month);
+  const yearRef = useRef(null);
+  const monthRef = useRef(null);
+  const dayRef = useRef(null);
+  const startY = useRef(0);
+  const startScroll = useRef(0);
+  const isDragging = useRef(false);
+  const dragType = useRef(null);
+  useLayoutEffect(() => {
+    if (yearRef.current) yearRef.current.scrollTo({ top: (year - minYear) * itemHeight, behavior: "auto" });
+  }, [year, itemHeight, minYear]);
+  useLayoutEffect(() => {
+    if (monthRef.current) monthRef.current.scrollTo({ top: (month - 1) * itemHeight, behavior: "auto" });
+  }, [month, itemHeight]);
+  useLayoutEffect(() => {
+    if (dayRef.current) dayRef.current.scrollTo({ top: (day - 1) * itemHeight, behavior: "auto" });
+  }, [day, itemHeight]);
+  const handleTouchStart = (type) => (e) => {
+    var _a, _b, _c;
+    isDragging.current = true;
+    dragType.current = type;
+    startY.current = e.touches[0].clientY;
+    let scrollTop = 0;
+    if (type === "year") scrollTop = ((_a = yearRef.current) == null ? void 0 : _a.scrollTop) || 0;
+    if (type === "month") scrollTop = ((_b = monthRef.current) == null ? void 0 : _b.scrollTop) || 0;
+    if (type === "day") scrollTop = ((_c = dayRef.current) == null ? void 0 : _c.scrollTop) || 0;
+    startScroll.current = scrollTop;
+  };
+  const handleTouchMove = (e) => {
+    if (!isDragging.current || !dragType.current) return;
+    const deltaY = e.touches[0].clientY - startY.current;
+    if (dragType.current === "year" && yearRef.current) yearRef.current.scrollTop = startScroll.current - deltaY;
+    if (dragType.current === "month" && monthRef.current) monthRef.current.scrollTop = startScroll.current - deltaY;
+    if (dragType.current === "day" && dayRef.current) dayRef.current.scrollTop = startScroll.current - deltaY;
+  };
+  const handleTouchEnd = () => {
+    if (!isDragging.current || !dragType.current) return;
+    if (dragType.current === "year" && yearRef.current) {
+      const idx = Math.round(yearRef.current.scrollTop / itemHeight);
+      setYear(Number(yearList[idx]));
+      onChange == null ? void 0 : onChange(`${yearList[idx]}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`);
+    }
+    if (dragType.current === "month" && monthRef.current) {
+      const idx = Math.round(monthRef.current.scrollTop / itemHeight);
+      setMonth(Number(monthList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${monthList[idx]}-${day.toString().padStart(2, "0")}`);
+    }
+    if (dragType.current === "day" && dayRef.current) {
+      const idx = Math.round(dayRef.current.scrollTop / itemHeight);
+      setDay(Number(dayList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${month.toString().padStart(2, "0")}-${dayList[idx]}`);
+    }
+    isDragging.current = false;
+    dragType.current = null;
+  };
+  const handleScroll = (type) => () => {
+    if (isDragging.current) return;
+    if (type === "year" && yearRef.current) {
+      const idx = Math.round(yearRef.current.scrollTop / itemHeight);
+      setYear(Number(yearList[idx]));
+      onChange == null ? void 0 : onChange(`${yearList[idx]}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`);
+    }
+    if (type === "month" && monthRef.current) {
+      const idx = Math.round(monthRef.current.scrollTop / itemHeight);
+      setMonth(Number(monthList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${monthList[idx]}-${day.toString().padStart(2, "0")}`);
+    }
+    if (type === "day" && dayRef.current) {
+      const idx = Math.round(dayRef.current.scrollTop / itemHeight);
+      setDay(Number(dayList[idx]));
+      onChange == null ? void 0 : onChange(`${year}-${month.toString().padStart(2, "0")}-${dayList[idx]}`);
+    }
+  };
+  React.useEffect(() => {
+    if (value) {
+      const [y, m, d] = value.split("-").map(Number);
+      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" });
+    }
+  }, [value]);
+  const renderColumn = (options, current, ref, type) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "wz-date-picker-list",
+      ref,
+      style: { height: itemHeight * 3 },
+      onTouchStart: handleTouchStart(type),
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onScroll: handleScroll(type),
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { height: itemHeight } }),
+        options.map((opt, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `wz-date-picker-item${idx === current ? " active" : ""}`,
+            style: { height: itemHeight },
+            children: type === "year" ? `${opt}年` : type === "month" ? `${opt}月` : `${opt}日`
+          },
+          opt
+        )),
+        /* @__PURE__ */ jsx("div", { style: { height: itemHeight } })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `wz-date-picker ${className}`, style, children: [
+    /* @__PURE__ */ jsx("div", { className: "wz-date-picker-mask wz-date-picker-mask-top", style: { height: itemHeight } }),
+    /* @__PURE__ */ jsx("div", { className: "wz-date-picker-indicator", style: { height: itemHeight } }),
+    /* @__PURE__ */ jsxs("div", { className: "wz-date-picker-columns", children: [
+      columns.includes("year") && renderColumn(yearList, year - minYear, yearRef, "year"),
+      columns.includes("month") && renderColumn(monthList, month - 1, monthRef, "month"),
+      columns.includes("day") && renderColumn(dayList, day - 1, dayRef, "day")
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "wz-date-picker-mask wz-date-picker-mask-bottom", style: { height: itemHeight } })
+  ] });
+};
+const DateRangePicker = ({
+  value,
+  onChange,
+  min = "1970-01-01",
+  max = "2100-12-31",
+  startLabel = "开始时间",
+  endLabel = "结束时间",
+  className = "",
+  style
+}) => {
+  const todayStr = React.useMemo(() => {
+    const today = /* @__PURE__ */ new Date();
+    const y = today.getFullYear();
+    const m = (today.getMonth() + 1).toString().padStart(2, "0");
+    const d = today.getDate().toString().padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }, []);
+  const [innerValue, setInnerValue] = useState(value || [todayStr, todayStr]);
+  const range = value || innerValue;
+  const [active, setActive] = useState("start");
+  const handleSelect = (val) => {
+    if (active === "start") {
+      const newRange = [val, range[1] && range[1] >= val ? range[1] : val];
+      setInnerValue(newRange);
+      onChange == null ? void 0 : onChange(newRange);
+    } else {
+      const newRange = [range[0], val && val >= range[0] ? val : range[0]];
+      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 }),
+      /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-label", children: endLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "wz-date-range-picker-row", children: [
+      /* @__PURE__ */ jsx("div", { className: "wz-date-range-picker-col", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `wz-date-range-picker-value${active === "start" ? " active" : ""}`,
+          onClick: () => setActive("start"),
+          children: range[0] || "请选择"
+        }
+      ) }),
+      /* @__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__ */ jsx("div", { className: "wz-date-range-picker-picker", children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        value: active === "start" ? range[0] : range[1],
+        onChange: handleSelect,
+        min,
+        max
+      }
+    ) })
+  ] });
+};
+export {
+  DateRangePicker as default
+};

package/dist/DateRangePicker/index.umd.cjs

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["react/jsx-runtime","react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).DateRangePicker=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";const r=({value:r,onChange:n,min:a="1970-01-01",max:c="2100-12-31",columns:s=["year","month","day"],itemHeight:l=48,className:o="",style:u})=>{const i=new Date,[d,p,h]=r?r.split("-").map(Number):[i.getFullYear(),i.getMonth()+1,i.getDate()],m=Number(a.split("-")[0]),g=Number(c.split("-")[0]),f=t.useMemo((()=>((e,t)=>{const r=[];for(let n=e;n<=t;n++)r.push(n.toString());return r})(m,g)),[m,g]),[v,y]=t.useState(d),[S,N]=t.useState(p),[x,k]=t.useState(h),$=Array.from({length:12},((e,t)=>(t+1).toString().padStart(2,"0"))),b=((e,t)=>{const r=new Date(e,t,0).getDate();return Array.from({length:r},((e,t)=>(t+1).toString().padStart(2,"0")))})(v,S),j=t.useRef(null),w=t.useRef(null),T=t.useRef(null),z=t.useRef(0),M=t.useRef(0),R=t.useRef(!1),D=t.useRef(null);t.useLayoutEffect((()=>{j.current&&j.current.scrollTo({top:(v-m)*l,behavior:"auto"})}),[v,l,m]),t.useLayoutEffect((()=>{w.current&&w.current.scrollTo({top:(S-1)*l,behavior:"auto"})}),[S,l]),t.useLayoutEffect((()=>{T.current&&T.current.scrollTo({top:(x-1)*l,behavior:"auto"})}),[x,l]);const C=e=>t=>{var r,n,a;R.current=!0,D.current=e,z.current=t.touches[0].clientY;let c=0;"year"===e&&(c=(null==(r=j.current)?void 0:r.scrollTop)||0),"month"===e&&(c=(null==(n=w.current)?void 0:n.scrollTop)||0),"day"===e&&(c=(null==(a=T.current)?void 0:a.scrollTop)||0),M.current=c},E=e=>{if(!R.current||!D.current)return;const t=e.touches[0].clientY-z.current;"year"===D.current&&j.current&&(j.current.scrollTop=M.current-t),"month"===D.current&&w.current&&(w.current.scrollTop=M.current-t),"day"===D.current&&T.current&&(T.current.scrollTop=M.current-t)},L=()=>{if(R.current&&D.current){if("year"===D.current&&j.current){const e=Math.round(j.current.scrollTop/l);y(Number(f[e])),null==n||n(`${f[e]}-${S.toString().padStart(2,"0")}-${x.toString().padStart(2,"0")}`)}if("month"===D.current&&w.current){const e=Math.round(w.current.scrollTop/l);N(Number($[e])),null==n||n(`${v}-${$[e]}-${x.toString().padStart(2,"0")}`)}if("day"===D.current&&T.current){const e=Math.round(T.current.scrollTop/l);k(Number(b[e])),null==n||n(`${v}-${S.toString().padStart(2,"0")}-${b[e]}`)}R.current=!1,D.current=null}},Y=e=>()=>{if(!R.current){if("year"===e&&j.current){const e=Math.round(j.current.scrollTop/l);y(Number(f[e])),null==n||n(`${f[e]}-${S.toString().padStart(2,"0")}-${x.toString().padStart(2,"0")}`)}if("month"===e&&w.current){const e=Math.round(w.current.scrollTop/l);N(Number($[e])),null==n||n(`${v}-${$[e]}-${x.toString().padStart(2,"0")}`)}if("day"===e&&T.current){const e=Math.round(T.current.scrollTop/l);k(Number(b[e])),null==n||n(`${v}-${S.toString().padStart(2,"0")}-${b[e]}`)}}};t.useEffect((()=>{if(r){const[e,t,n]=r.split("-").map(Number);y(e),N(t),k(n),j.current&&j.current.scrollTo({top:(e-m)*l,behavior:"auto"}),w.current&&w.current.scrollTo({top:(t-1)*l,behavior:"auto"}),T.current&&T.current.scrollTo({top:(n-1)*l,behavior:"auto"})}}),[r]);const q=(t,r,n,a)=>e.jsxs("div",{className:"wz-date-picker-list",ref:n,style:{height:3*l},onTouchStart:C(a),onTouchMove:E,onTouchEnd:L,onScroll:Y(a),children:[e.jsx("div",{style:{height:l}}),t.map(((t,n)=>e.jsx("div",{className:"wz-date-picker-item"+(n===r?" active":""),style:{height:l},children:"year"===a?`${t}年`:"month"===a?`${t}月`:`${t}日`},t))),e.jsx("div",{style:{height:l}})]});return e.jsxs("div",{className:`wz-date-picker ${o}`,style:u,children:[e.jsx("div",{className:"wz-date-picker-mask wz-date-picker-mask-top",style:{height:l}}),e.jsx("div",{className:"wz-date-picker-indicator",style:{height:l}}),e.jsxs("div",{className:"wz-date-picker-columns",children:[s.includes("year")&&q(f,v-m,j,"year"),s.includes("month")&&q($,S-1,w,"month"),s.includes("day")&&q(b,x-1,T,"day")]}),e.jsx("div",{className:"wz-date-picker-mask wz-date-picker-mask-bottom",style:{height:l}})]})};return({value:n,onChange:a,min:c="1970-01-01",max:s="2100-12-31",startLabel:l="开始时间",endLabel:o="结束时间",className:u="",style:i})=>{const d=t.useMemo((()=>{const e=new Date;return`${e.getFullYear()}-${(e.getMonth()+1).toString().padStart(2,"0")}-${e.getDate().toString().padStart(2,"0")}`}),[]),[p,h]=t.useState(n||[d,d]),m=n||p,[g,f]=t.useState("start");return e.jsxs("div",{className:`wz-date-range-picker ${u}`,style:i,children:[e.jsxs("div",{className:"wz-date-range-picker-label-row",children:[e.jsx("div",{className:"wz-date-range-picker-label",children:l}),e.jsx("div",{className:"wz-date-range-picker-label",children:o})]}),e.jsxs("div",{className:"wz-date-range-picker-row",children:[e.jsx("div",{className:"wz-date-range-picker-col",children:e.jsx("div",{className:"wz-date-range-picker-value"+("start"===g?" active":""),onClick:()=>f("start"),children:m[0]||"请选择"})}),e.jsx("div",{className:"wz-date-range-picker-sep",children:"至"}),e.jsx("div",{className:"wz-date-range-picker-col",children:e.jsx("div",{className:"wz-date-range-picker-value"+("end"===g?" active":""),onClick:()=>f("end"),children:m[1]||"请选择"})})]}),e.jsx("div",{className:"wz-date-range-picker-picker",children:e.jsx(r,{value:"start"===g?m[0]:m[1],onChange:e=>{if("start"===g){const t=[e,m[1]&&m[1]>=e?m[1]:e];h(t),null==a||a(t)}else{const t=[m[0],e&&e>=m[0]?e:m[0]];h(t),null==a||a(t)}},min:c,max:s})})]})}}));

package/dist/DateRangePicker/style/index.css

@@ -0,0 +1 @@
+.wz-date-range-picker-row{justify-content:center;align-items:center;gap:16px;display:flex}.wz-date-range-picker-col{flex-direction:column;flex:1;align-items:center;display:flex}.wz-date-range-picker-label-row{justify-content:space-between;column-gap:65px;margin-bottom:8px;display:flex}.wz-date-range-picker-label{text-align:center;color:#333;flex:1;font-size:15px}.wz-date-range-picker-value{color:#bbb;text-align:center;cursor:pointer;background:#fff;border:1.5px solid #0000;border-radius:8px;min-width:100%;height:44px;font-size:16px;line-height:44px;transition:all .2s}.wz-date-range-picker-value.active{color:#0599f7;background:#eaf6ff;border-color:#0599f7;font-weight:700}.wz-date-range-picker-sep{color:#333;align-items:center;height:44px;margin:0 8px;font-size:14px;display:flex}.wz-date-range-picker-picker{margin-top:8px}

package/dist/DateRangePicker/style/index.js

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

package/dist/DateRangePicker/style.css

@@ -0,0 +1 @@
+.wz-date-range-picker-row{justify-content:center;align-items:center;gap:16px;display:flex}.wz-date-range-picker-col{flex-direction:column;flex:1;align-items:center;display:flex}.wz-date-range-picker-label-row{justify-content:space-between;column-gap:65px;margin-bottom:8px;display:flex}.wz-date-range-picker-label{text-align:center;color:#333;flex:1;font-size:15px}.wz-date-range-picker-value{color:#bbb;text-align:center;cursor:pointer;background:#fff;border:1.5px solid #0000;border-radius:8px;min-width:100%;height:44px;font-size:16px;line-height:44px;transition:all .2s}.wz-date-range-picker-value.active{color:#0599f7;background:#eaf6ff;border-color:#0599f7;font-weight:700}.wz-date-range-picker-sep{color:#333;align-items:center;height:44px;margin:0 8px;font-size:14px;display:flex}.wz-date-range-picker-picker{margin-top:8px}.wz-date-picker{background:var(--wz-date-picker-bg,#f5f5f5);-webkit-user-select:none;user-select:none;touch-action:pan-y;width:100%;position:relative;overflow:hidden}.wz-date-picker-columns{flex-direction:row;width:100%;height:100%;display:flex}.wz-date-picker-list{-webkit-overflow-scrolling:touch;scrollbar-width:none;z-index:2;flex:1 1 0;min-width:0;position:relative;overflow-y:scroll}.wz-date-picker-list::-webkit-scrollbar{display:none}.wz-date-picker-item{color:var(--wz-date-picker-item-color,#bbb);background:0 0;justify-content:center;align-items:center;font-family:"阿里巴巴普惠体 2.0";font-size:20px;font-weight:600;transition:color .2s;display:flex}.wz-date-picker-item.active{color:var(--wz-date-picker-active-color,#000)}.wz-date-picker-mask{z-index:3;pointer-events:none;position:absolute;left:0;right:0}.wz-date-picker-mask-top{background:linear-gradient(to bottom,var(--wz-date-picker-bg,#f5f5f5)20%,#f5f5f500);top:0}.wz-date-picker-mask-bottom{background:linear-gradient(to top,var(--wz-date-picker-bg,#f5f5f5)20%,#f5f5f500);bottom:0}.wz-date-picker-indicator{z-index:1;pointer-events:none;border-radius:var(--wz-date-picker-radius,10px);background:var(--wz-date-picker-active-bg,#fff);position:absolute;top:50%;left:10px;right:10px;transform:translateY(-50%)}