wz-h5-design 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/index.js +23 -7
- package/dist/Button/index.umd.cjs +1 -1
- package/dist/Button/style/index.css +1 -1
- package/dist/Button/style.css +1 -1
- package/dist/ButtonGroup/index.js +34 -0
- package/dist/ButtonGroup/index.umd.cjs +1 -0
- package/dist/ButtonGroup/style/index.css +1 -0
- package/dist/ButtonGroup/style/index.js +1 -0
- package/dist/ButtonGroup/style.css +1 -0
- package/dist/Cell/index.js +29 -2
- package/dist/Cell/index.umd.cjs +2 -2
- package/dist/Cell/style/index.css +1 -1
- package/dist/Cell/style.css +1 -1
- package/dist/CheckList/index.js +28 -1
- package/dist/CheckList/index.umd.cjs +1 -1
- package/dist/CheckList/style.css +1 -1
- package/dist/Checkbox/index.js +34 -2
- package/dist/Checkbox/index.umd.cjs +1 -1
- package/dist/Checkbox/style/index.css +1 -1
- package/dist/Checkbox/style.css +1 -1
- package/dist/DatePicker/style/index.css +1 -1
- package/dist/DatePicker/style.css +1 -1
- package/dist/DateRangePicker/index.js +65 -9
- package/dist/DateRangePicker/index.umd.cjs +1 -1
- package/dist/DateRangePicker/style/index.css +1 -1
- package/dist/DateRangePicker/style.css +1 -1
- package/dist/Dialog/index.js +23 -7
- package/dist/Dialog/index.umd.cjs +1 -1
- package/dist/Dialog/style.css +1 -1
- package/dist/Divider/index.js +13 -4
- package/dist/Divider/index.umd.cjs +1 -1
- package/dist/Divider/style/index.css +1 -1
- package/dist/Divider/style.css +1 -1
- package/dist/GridView/index.js +26 -2
- package/dist/GridView/index.umd.cjs +1 -1
- package/dist/GridView/style/index.css +1 -1
- package/dist/GridView/style.css +1 -1
- package/dist/Input/index.js +47 -5
- package/dist/Input/index.umd.cjs +1 -1
- package/dist/Input/style/index.css +1 -1
- package/dist/Input/style.css +1 -1
- package/dist/Popup/style/index.css +1 -1
- package/dist/Popup/style.css +1 -1
- package/dist/Radio/index.js +34 -2
- package/dist/Radio/index.umd.cjs +1 -1
- package/dist/Radio/style/index.css +1 -1
- package/dist/Radio/style.css +1 -1
- package/dist/Search/index.js +10 -2
- package/dist/Search/index.umd.cjs +1 -1
- package/dist/Search/style/index.css +1 -1
- package/dist/Search/style.css +1 -1
- package/dist/Switch/index.js +10 -3
- package/dist/Switch/index.umd.cjs +1 -1
- package/dist/Switch/style/index.css +1 -1
- package/dist/Switch/style.css +1 -1
- package/dist/Tabbar/index.js +6 -3
- package/dist/Tabbar/index.umd.cjs +1 -1
- package/dist/Tabbar/style/index.css +1 -1
- package/dist/Tabbar/style.css +1 -1
- package/dist/Tabs/index.js +57 -17
- package/dist/Tabs/index.umd.cjs +1 -1
- package/dist/Tabs/style/index.css +1 -1
- package/dist/Tabs/style.css +1 -1
- package/dist/TimePicker/style/index.css +1 -1
- package/dist/TimePicker/style.css +1 -1
- package/dist/Tip/index.js +28 -5
- package/dist/Tip/index.umd.cjs +2 -2
- package/dist/Tip/style/index.css +1 -1
- package/dist/Tip/style.css +1 -1
- package/dist/Tooltip/index.js +59 -14
- package/dist/Tooltip/index.umd.cjs +2 -2
- package/dist/Tooltip/style/index.css +1 -1
- package/dist/Tooltip/style.css +1 -1
- package/dist/style.css +1 -1
- package/dist/types/components/Button/Button.d.ts +3 -0
- package/dist/types/components/ButtonGroup/ButtonGroup.d.ts +20 -0
- package/dist/types/components/ButtonGroup/index.d.ts +5 -0
- package/dist/types/components/DateRangePicker/DateRangePicker.d.ts +6 -0
- package/dist/types/components/Divider/Divider.d.ts +2 -0
- package/dist/types/components/GridView/GridView.d.ts +8 -0
- package/dist/types/components/Input/Input.d.ts +11 -1
- package/dist/types/components/Search/Search.d.ts +1 -0
- package/dist/types/components/Tabbar/Tabbar.d.ts +2 -0
- package/dist/types/components/Tabs/Tabs.d.ts +4 -1
- package/dist/types/components/Tip/Tip.d.ts +21 -2
- package/dist/types/components/Tooltip/Tooltip.d.ts +6 -2
- package/dist/types/components/index.d.ts +2 -1
- package/dist/wz-h5-design.es.js +357 -99
- package/dist/wz-h5-design.umd.js +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-date-range-picker-row{justify-content:center;align-items:
|
|
1
|
+
.wz-date-range-picker{--active-color:var(--wz-primary-color,#0599f7);--active-bg:#0599f71a;--active-border:var(--wz-primary-color,#0599f7);--label-color:var(--wz-text-color-primary,#333);--value-color:var(--wz-text-color-placeholder,#bbb);--value-bg:var(--wz-bg-color-white,#fff);--sep-color:var(--wz-text-color-primary,#333)}.wz-date-range-picker-row{justify-content:center;align-items:flex-start;gap:16px;display:flex}.wz-date-range-picker-col{flex-direction:column;flex:1;align-items:stretch;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:var(--label-color);flex:1;font-size:15px}.wz-date-range-picker-value{color:var(--value-color);background:var(--value-bg);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;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:var(--active-color);background:var(--active-bg);border-color:var(--active-border);font-weight:700}.wz-date-range-picker-sep{color:var(--sep-color);flex-shrink:0;align-items:center;height:44px;margin:0 8px;font-size:14px;display:flex}.wz-date-range-picker-picker{margin-top:8px}.wz-date-range-picker-long-term{cursor:pointer;-webkit-tap-highlight-color:transparent;justify-content:flex-start;align-items:center;gap:6px;margin-top:12px;display:flex}.wz-date-range-picker-long-term-text{color:var(--label-color);font-size:14px}.wz-date-range-picker-value.disabled{opacity:.6;cursor:not-allowed}.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:0;right:0;transform:translateY(-50%)}.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}
|
package/dist/Dialog/index.js
CHANGED
|
@@ -60,6 +60,9 @@ const Button = forwardRef(({
|
|
|
60
60
|
color = "",
|
|
61
61
|
textColor = "",
|
|
62
62
|
borderColor = "",
|
|
63
|
+
width,
|
|
64
|
+
height,
|
|
65
|
+
fontSize,
|
|
63
66
|
className = "",
|
|
64
67
|
style = {},
|
|
65
68
|
children,
|
|
@@ -69,12 +72,22 @@ const Button = forwardRef(({
|
|
|
69
72
|
}, ref) => {
|
|
70
73
|
const [isActive, setIsActive] = useState(false);
|
|
71
74
|
const timerRef = useRef(null);
|
|
75
|
+
const formatSize = (value) => {
|
|
76
|
+
if (value === void 0) return void 0;
|
|
77
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
78
|
+
};
|
|
72
79
|
const buttonStyle = useMemo(() => {
|
|
80
|
+
const customStyle = {
|
|
81
|
+
width: formatSize(width),
|
|
82
|
+
height: formatSize(height),
|
|
83
|
+
fontSize: formatSize(fontSize)
|
|
84
|
+
};
|
|
73
85
|
if (type === "cancel") {
|
|
74
86
|
return {
|
|
75
87
|
background: "#D6D6D6",
|
|
76
88
|
color: textColor || "#fff",
|
|
77
|
-
...style
|
|
89
|
+
...style,
|
|
90
|
+
...customStyle
|
|
78
91
|
};
|
|
79
92
|
}
|
|
80
93
|
if (type === "outline") {
|
|
@@ -82,7 +95,8 @@ const Button = forwardRef(({
|
|
|
82
95
|
color: textColor || "var(--wz-primary-color)",
|
|
83
96
|
borderColor: borderColor || "var(--wz-primary-color)",
|
|
84
97
|
background: "transparent",
|
|
85
|
-
...style
|
|
98
|
+
...style,
|
|
99
|
+
...customStyle
|
|
86
100
|
};
|
|
87
101
|
}
|
|
88
102
|
if (type === "text") {
|
|
@@ -91,7 +105,8 @@ const Button = forwardRef(({
|
|
|
91
105
|
background: "transparent",
|
|
92
106
|
border: "none",
|
|
93
107
|
boxShadow: "none",
|
|
94
|
-
...style
|
|
108
|
+
...style,
|
|
109
|
+
...customStyle
|
|
95
110
|
};
|
|
96
111
|
}
|
|
97
112
|
if (type === "plain") {
|
|
@@ -99,7 +114,8 @@ const Button = forwardRef(({
|
|
|
99
114
|
color: textColor || "#666666",
|
|
100
115
|
borderColor: borderColor || "#666666",
|
|
101
116
|
background: "transparent",
|
|
102
|
-
...style
|
|
117
|
+
...style,
|
|
118
|
+
...customStyle
|
|
103
119
|
};
|
|
104
120
|
}
|
|
105
121
|
if (type === "primary") {
|
|
@@ -108,10 +124,10 @@ const Button = forwardRef(({
|
|
|
108
124
|
s.background = color || "var(--wz-primary-gradient, var(--wz-primary-color))";
|
|
109
125
|
}
|
|
110
126
|
s.color = textColor || "#fff";
|
|
111
|
-
return s;
|
|
127
|
+
return { ...s, ...customStyle };
|
|
112
128
|
}
|
|
113
|
-
return style;
|
|
114
|
-
}, [type, color, textColor, borderColor, style]);
|
|
129
|
+
return { ...style, ...customStyle };
|
|
130
|
+
}, [type, color, textColor, borderColor, width, height, fontSize, style]);
|
|
115
131
|
const handleClick = (e) => {
|
|
116
132
|
if (disabled) return;
|
|
117
133
|
setIsActive(true);
|
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/i=a,function(){var e={}.hasOwnProperty;function o(){for(var t=[],n=0;n<arguments.length;n++){var r=arguments[n];if(r){var i=typeof r;if("string"===i||"number"===i)t.push(r);else if(Array.isArray(r)){if(r.length){var a=o.apply(null,r);a&&t.push(a)}}else if("object"===i){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){t.push(r.toString());continue}for(var l in r)e.call(r,l)&&r[l]&&t.push(l)}}}return t.join(" ")}i.exports?(o.default=o,i.exports=o):window.classNames=o}();const l=r(a.exports),s=t.forwardRef((({type:e="primary",size:n="medium",block:r=!1,disabled:i=!1,color:a="",textColor:l="",borderColor:s="",className:
|
|
6
|
+
*/i=a,function(){var e={}.hasOwnProperty;function o(){for(var t=[],n=0;n<arguments.length;n++){var r=arguments[n];if(r){var i=typeof r;if("string"===i||"number"===i)t.push(r);else if(Array.isArray(r)){if(r.length){var a=o.apply(null,r);a&&t.push(a)}}else if("object"===i){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){t.push(r.toString());continue}for(var l in r)e.call(r,l)&&r[l]&&t.push(l)}}}return t.join(" ")}i.exports?(o.default=o,i.exports=o):window.classNames=o}();const l=r(a.exports),s=t.forwardRef((({type:e="primary",size:n="medium",block:r=!1,disabled:i=!1,color:a="",textColor:l="",borderColor:s="",width:c,height:u,fontSize:d,className:m="",style:f={},children:p,icon:b,iconPosition:w="left",onClick:y},x)=>{const[g,h]=t.useState(!1),v=t.useRef(null),k=e=>{if(void 0!==e)return"number"==typeof e?`${e}px`:e},z=t.useMemo((()=>{const o={width:k(c),height:k(u),fontSize:k(d)};if("cancel"===e)return{background:"#D6D6D6",color:l||"#fff",...f,...o};if("outline"===e)return{color:l||"var(--wz-primary-color)",borderColor:s||"var(--wz-primary-color)",background:"transparent",...f,...o};if("text"===e)return{color:l||f.color||"var(--wz-primary-color, #22C94D)",background:"transparent",border:"none",boxShadow:"none",...f,...o};if("plain"===e)return{color:l||"#666666",borderColor:s||"#666666",background:"transparent",...f,...o};if("primary"===e){let e={...f};return i||(e.background=a||"var(--wz-primary-gradient, var(--wz-primary-color))"),e.color=l||"#fff",{...e,...o}}return{...f,...o}}),[e,a,l,s,c,u,d,f]),j=["wz-button",`wz-button--${e}`,`wz-button--${n}`,r?"wz-button--block":"",i?"wz-button--disabled":"",g&&!i?"wz-button--active":"",m].filter(Boolean).join(" ");return o.jsxs("button",{ref:x,type:"button",className:j,style:z,disabled:i,onClick:e=>{i||(h(!0),v.current&&window.clearTimeout(v.current),v.current=window.setTimeout((()=>h(!1)),100),null==y||y(e))},children:["left"===w&&b,p,"right"===w&&b,"primary"===e&&g&&o.jsx("span",{className:"wz-button__mask"}),"outline"===e&&g&&o.jsx("span",{className:"wz-button__mask"}),"outline"===e&&i&&o.jsx("span",{className:"wz-button__mask--disabled"}),"cancel"===e&&g&&o.jsx("span",{className:"wz-button__mask--cancel"}),"plain"===e&&g&&o.jsx("span",{className:"wz-button__mask"})]})}));s.displayName="Button";const c=({visible:e,title:t,content:n,onClose:r,actions:i,closeOnAction:a,closeOnMaskClick:c})=>o.jsxs("div",{className:l("wz-dialog-root",{visible:e}),children:[o.jsx("div",{className:"wz-dialog-mask",onClick:()=>{c&&(null==r||r())}}),o.jsxs("div",{className:"wz-dialog-wrap",children:[t&&o.jsx("div",{className:"wz-dialog-header",children:o.jsx("div",{className:"wz-dialog-title",children:t})}),o.jsx("div",{className:"wz-dialog-content",children:n}),o.jsx("div",{className:"wz-dialog-footer",children:null==i?void 0:i.map((e=>o.jsx(s,{className:"wz-dialog-button",onClick:()=>{return null==(o=e.onClick)||o(),void(a&&(null==r||r()));var o},children:e.text},e.key)))})]})]}),u=e=>{const t=document.createElement("div");document.body.appendChild(t);const r=n.createRoot(t);r.render(o.jsx(c,{...e,visible:!0,onClose:()=>{r.unmount(),document.body.removeChild(t)}}))},d=e=>{u({...e,closeOnAction:!0,actions:[{key:"confirm",text:"确定",onClick:e.onConfirm}]})},m=e=>{u({...e,closeOnAction:!0,actions:[{key:"cancel",text:"取消",onClick:e.onCancel},{key:"confirm",text:"确定",onClick:e.onConfirm}]})},f=Object.assign(c,{alert:d,confirm:m});e.Dialog=f,e.alert=d,e.confirm=m,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/Dialog/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-dialog-root{z-index:1000;visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:flex;position:fixed;top:0;left:0}.wz-dialog-root.visible{visibility:visible;opacity:1}.wz-dialog-mask{background-color:#0006;width:100%;height:100%;position:absolute;top:0;left:0}.wz-dialog-wrap{background-color:var(--wz-bg-color-white,#fff);border-radius:8px;width:85%;max-width:300px;padding-top:24px;position:relative;overflow:hidden}.wz-dialog-header{text-align:center;padding:0 24px 8px}.wz-dialog-title{font-size:18px;font-weight:500}.wz-dialog-content{text-align:center;color:var(--wz-text-color-regular,#666);padding:8px 24px 24px;font-size:14px}.wz-dialog-footer{padding:0 24px 24px;display:flex}.wz-dialog-footer .wz-dialog-button{background-color:var(--wz-primary-color,#00b578);color:var(--wz-text-color-white,#fff);border-radius:100px;flex:1}.wz-dialog-footer .wz-dialog-button:not(:last-child){margin-right:12px}.wz-button{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;gap:5px;font-family:"Alibaba PuHuiTi 2.0"
|
|
1
|
+
.wz-dialog-root{z-index:1000;visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;transition:all .3s;display:flex;position:fixed;top:0;left:0}.wz-dialog-root.visible{visibility:visible;opacity:1}.wz-dialog-mask{background-color:#0006;width:100%;height:100%;position:absolute;top:0;left:0}.wz-dialog-wrap{background-color:var(--wz-bg-color-white,#fff);border-radius:8px;width:85%;max-width:300px;padding-top:24px;position:relative;overflow:hidden}.wz-dialog-header{text-align:center;padding:0 24px 8px}.wz-dialog-title{font-size:18px;font-weight:500}.wz-dialog-content{text-align:center;color:var(--wz-text-color-regular,#666);padding:8px 24px 24px;font-size:14px}.wz-dialog-footer{padding:0 24px 24px;display:flex}.wz-dialog-footer .wz-dialog-button{background-color:var(--wz-primary-color,#00b578);color:var(--wz-text-color-white,#fff);border-radius:100px;flex:1}.wz-dialog-footer .wz-dialog-button:not(:last-child){margin-right:12px}.wz-button{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;gap:5px;font-family:"Alibaba PuHuiTi 2.0";font-weight:600;transition:all .2s;display:inline-flex;position:relative;overflow:hidden}.wz-button--primary{color:var(--wz-text-color-white,#fff);background:var(--wz-primary-gradient);border:none}.wz-button--primary.wz-button--disabled{color:#fff;background-color:#d6d6d6}.wz-button--outline{color:var(--wz-primary-color,#22c94d);border:1px solid var(--wz-primary-color,#22c94d);background:0 0}.wz-button--plain{color:#666;background:0 0;border:1px solid #666}.wz-button--plain.wz-button--disabled{opacity:.5;background:#fff!important;border:1px solid #ccc!important}.wz-button--cancel{color:#fff;background:#c0c4cc;border:none}.wz-button--block{width:100%;display:flex}.wz-button--large{border-radius:23px;height:46px;padding:10px 20px;font-size:18px;line-height:26px}.wz-button--medium{border-radius:23px;height:30px;padding:4px 16px;font-size:14px;line-height:22px}.wz-button--small{border-radius:13px;height:26px;padding:3px 10px;font-size:13px;line-height:20px}.wz-button--disabled{cursor:not-allowed;opacity:.8}.wz-button--active{opacity:.6}.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}.wz-button--text{color:var(--wz-primary-color,#22c94d);box-shadow:none;background:0 0;border:none;height:auto;padding:0 8px;transition:color .2s}.wz-button--text:active{color:var(--wz-primary-color-dark,#179a38);background:var(--wz-bg-color-base,#f5f7f9)}.wz-button--disabled.wz-button--text{color:var(--wz-disabled-color,#c0c4cc);background:0 0}
|
package/dist/Divider/index.js
CHANGED
|
@@ -1,21 +1,30 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
const COLOR_MAP = {
|
|
3
|
+
horizontal: {
|
|
4
|
+
default: "#f7f7f7",
|
|
5
|
+
emphasis: "#eeeeee"
|
|
6
|
+
},
|
|
7
|
+
vertical: "rgba(0, 0, 0, 0.1)"
|
|
8
|
+
};
|
|
2
9
|
const Divider = ({
|
|
3
10
|
direction = "horizontal",
|
|
4
|
-
|
|
11
|
+
type = "default",
|
|
12
|
+
color,
|
|
5
13
|
length,
|
|
6
14
|
margin,
|
|
7
15
|
style,
|
|
8
16
|
className = ""
|
|
9
17
|
}) => {
|
|
10
18
|
const isVertical = direction === "vertical";
|
|
19
|
+
const defaultColor = isVertical ? COLOR_MAP.vertical : COLOR_MAP.horizontal[type];
|
|
11
20
|
return /* @__PURE__ */ jsx(
|
|
12
21
|
"div",
|
|
13
22
|
{
|
|
14
23
|
className: `wz-divider wz-divider--${direction} ${className}`,
|
|
15
24
|
style: {
|
|
16
|
-
background: color,
|
|
17
|
-
width: isVertical ?
|
|
18
|
-
height: isVertical ? length || 24 :
|
|
25
|
+
background: color || defaultColor,
|
|
26
|
+
width: isVertical ? 2 : length || "100%",
|
|
27
|
+
height: isVertical ? length || 24 : 2,
|
|
19
28
|
margin,
|
|
20
29
|
...style
|
|
21
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react/jsx-runtime"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Divider=t(e.jsxRuntime)}(this,(function(e){"use strict";const t={horizontal:{default:"#f7f7f7",emphasis:"#eeeeee"},vertical:"rgba(0, 0, 0, 0.1)"};return({direction:i="horizontal",type:n="default",color:r,length:o,margin:a,style:s,className:d=""})=>{const l="vertical"===i,f=l?t.vertical:t.horizontal[n];return e.jsx("div",{className:`wz-divider wz-divider--${i} ${d}`,style:{background:r||f,width:l?2:o||"100%",height:l?o||24:2,margin:a,...s}})}}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-divider{background:var(--wz-border-color-lighter,#eee);border:none;display:block}.wz-divider--vertical{width:1px;min-height:16px}.wz-divider--horizontal{width:100%;height:1px}
|
|
1
|
+
.wz-divider{background:var(--wz-border-color-lighter,#eee);border:none;display:block}.wz-divider--vertical{width:1px;min-height:16px;margin:0 12px}.wz-divider--horizontal{width:100%;height:1px}
|
package/dist/Divider/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-divider{background:var(--wz-border-color-lighter,#eee);border:none;display:block}.wz-divider--vertical{width:1px;min-height:16px}.wz-divider--horizontal{width:100%;height:1px}
|
|
1
|
+
.wz-divider{background:var(--wz-border-color-lighter,#eee);border:none;display:block}.wz-divider--vertical{width:1px;min-height:16px;margin:0 12px}.wz-divider--horizontal{width:100%;height:1px}
|
package/dist/GridView/index.js
CHANGED
|
@@ -2,7 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
const GridViewItem = ({
|
|
3
3
|
icon,
|
|
4
4
|
text,
|
|
5
|
+
textColor,
|
|
6
|
+
textSize,
|
|
5
7
|
description,
|
|
8
|
+
descriptionColor,
|
|
9
|
+
descriptionSize,
|
|
6
10
|
badge,
|
|
7
11
|
corner,
|
|
8
12
|
onClick,
|
|
@@ -49,8 +53,28 @@ const GridViewItem = ({
|
|
|
49
53
|
/* @__PURE__ */ jsxs("div", { className: "wz-grid-view-item__content", children: [
|
|
50
54
|
icon && /* @__PURE__ */ jsx("div", { className: "wz-grid-view-item__icon", children: icon }),
|
|
51
55
|
/* @__PURE__ */ jsxs("div", { className: "wz-grid-view-item__text", children: [
|
|
52
|
-
text && /* @__PURE__ */ jsx(
|
|
53
|
-
|
|
56
|
+
text && /* @__PURE__ */ jsx(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
className: "wz-grid-view-item__title",
|
|
60
|
+
style: {
|
|
61
|
+
...textColor ? { color: textColor } : {},
|
|
62
|
+
...textSize ? { fontSize: typeof textSize === "number" ? `${textSize}px` : textSize } : {}
|
|
63
|
+
},
|
|
64
|
+
children: text
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
description && /* @__PURE__ */ jsx(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
className: "wz-grid-view-item__desc",
|
|
71
|
+
style: {
|
|
72
|
+
...descriptionColor ? { color: descriptionColor } : {},
|
|
73
|
+
...descriptionSize ? { fontSize: typeof descriptionSize === "number" ? `${descriptionSize}px` : descriptionSize } : {}
|
|
74
|
+
},
|
|
75
|
+
children: description
|
|
76
|
+
}
|
|
77
|
+
)
|
|
54
78
|
] })
|
|
55
79
|
] }),
|
|
56
80
|
badge && /* @__PURE__ */ jsx("div", { className: "wz-grid-view-item__badge", children: badge })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).GridView={},e.jsxRuntime)}(this,(function(e,i){"use strict";const r=({columns:e=4,gap:r=0,square:
|
|
1
|
+
!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],i):i((e="undefined"!=typeof globalThis?globalThis:e||self).GridView={},e.jsxRuntime)}(this,(function(e,i){"use strict";const r=({columns:e=4,gap:r=0,square:t=!0,className:d="",style:o={},children:s,noBg:n=!1,rounded:c=!1,shadow:l=!1,horizontal:a=!1})=>{const w={gridTemplateColumns:`repeat(${e}, 1fr)`,gap:"number"==typeof r?`${r}px`:r,...o},m=["wz-grid-view",t?"wz-grid-view--square":"",n?"wz-grid-view--no-bg":"",c?"wz-grid-view--rounded":"",l?"wz-grid-view--shadow":"",a?"wz-grid-view--horizontal":"",d].filter(Boolean).join(" ");return i.jsx("div",{className:m,style:w,children:s})};r.Item=({icon:e,text:r,textColor:t,textSize:d,description:o,descriptionColor:s,descriptionSize:n,badge:c,corner:l,onClick:a,className:w="",style:m={},disabled:g=!1,children:v,horizontal:u=!1,compact:z=!1,backgroundImage:p,backgroundStyle:x={}})=>{const h=()=>{!g&&a&&a()},b=["wz-grid-view-item",g?"wz-grid-view-item--disabled":"",a?"wz-grid-view-item--clickable":"",u?"wz-grid-view-item--horizontal":"",z?"wz-grid-view-item--compact":"",p?"wz-grid-view-item--with-bg":"",w].filter(Boolean).join(" "),f=p?{backgroundImage:`url(${p})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",...x,...m}:m;return v?i.jsxs("div",{className:b,style:f,onClick:h,children:[l&&i.jsx("div",{className:"wz-grid-view-item__corner",children:l}),v,c&&i.jsx("div",{className:"wz-grid-view-item__badge",children:c})]}):i.jsxs("div",{className:b,style:f,onClick:h,children:[l&&i.jsx("div",{className:"wz-grid-view-item__corner",children:l}),i.jsxs("div",{className:"wz-grid-view-item__content",children:[e&&i.jsx("div",{className:"wz-grid-view-item__icon",children:e}),i.jsxs("div",{className:"wz-grid-view-item__text",children:[r&&i.jsx("div",{className:"wz-grid-view-item__title",style:{...t?{color:t}:{},...d?{fontSize:"number"==typeof d?`${d}px`:d}:{}},children:r}),o&&i.jsx("div",{className:"wz-grid-view-item__desc",style:{...s?{color:s}:{},...n?{fontSize:"number"==typeof n?`${n}px`:n}:{}},children:o})]})]}),c&&i.jsx("div",{className:"wz-grid-view-item__badge",children:c})]})},e.GridView=r,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-grid-view{box-sizing:border-box;width:100%;display:grid}.wz-grid-view--square .wz-grid-view-item{aspect-ratio:1}.wz-grid-view.wz-grid-view--horizontal{flex-wrap:wrap;justify-content:space-between;display:flex}.wz-grid-view-item{padding:var(--wz-grid-view-item-padding,16px 8px);box-sizing:border-box;background-color:var(--wz-grid-view-item-bg,#fff);border-radius:var(--wz-grid-view-item-border-radius,8px);flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.wz-grid-view-item--clickable{cursor:pointer}.wz-grid-view-item--clickable:hover{background-color:var(--wz-grid-view-item-hover-bg,#f7f8fa);transform:scale(.98)}.wz-grid-view-item--clickable:active{background-color:var(--wz-grid-view-item-active-bg,#ebedf0);transform:scale(.95)}.wz-grid-view-item--disabled{opacity:.5;cursor:not-allowed}.wz-grid-view-item--disabled:hover{background-color:var(--wz-grid-view-item-bg,#fff);transform:none}.wz-grid-view-item__content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.wz-grid-view-item__icon{margin-bottom:var(--wz-grid-view-icon-margin,8px);font-size:var(--wz-grid-view-icon-size,24px);color:var(--wz-grid-view-text-color,#323233);justify-content:center;align-items:center;display:flex}.wz-grid-view-item__icon img{object-fit:contain;width:32px;height:32px}.wz-grid-view-item__icon svg{width:var(--wz-grid-view-icon-size,24px);height:var(--wz-grid-view-icon-size,24px);fill:currentColor}.wz-grid-view-item__text{text-align:center;width:100%}.wz-grid-view-item__title{font-size:var(--wz-grid-view-text-size,12px);color:var(--wz-grid-view-text-color,#323233);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__desc{font-size:var(--wz-grid-view-desc-size,10px);color:var(--wz-grid-view-desc-color,#969799);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:6px;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__badge{z-index:1;background-color:var(--wz-danger-color,#
|
|
1
|
+
.wz-grid-view{box-sizing:border-box;width:100%;display:grid}.wz-grid-view--square .wz-grid-view-item{aspect-ratio:1}.wz-grid-view.wz-grid-view--horizontal{flex-wrap:wrap;justify-content:space-between;display:flex}.wz-grid-view-item{padding:var(--wz-grid-view-item-padding,16px 8px);box-sizing:border-box;background-color:var(--wz-grid-view-item-bg,#fff);border-radius:var(--wz-grid-view-item-border-radius,8px);flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.wz-grid-view-item--clickable{cursor:pointer}.wz-grid-view-item--clickable:hover{background-color:var(--wz-grid-view-item-hover-bg,#f7f8fa);transform:scale(.98)}.wz-grid-view-item--clickable:active{background-color:var(--wz-grid-view-item-active-bg,#ebedf0);transform:scale(.95)}.wz-grid-view-item--disabled{opacity:.5;cursor:not-allowed}.wz-grid-view-item--disabled:hover{background-color:var(--wz-grid-view-item-bg,#fff);transform:none}.wz-grid-view-item__content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.wz-grid-view-item__icon{margin-bottom:var(--wz-grid-view-icon-margin,8px);font-size:var(--wz-grid-view-icon-size,24px);color:var(--wz-grid-view-text-color,#323233);justify-content:center;align-items:center;display:flex}.wz-grid-view-item__icon img{object-fit:contain;width:32px;height:32px}.wz-grid-view-item__icon svg{width:var(--wz-grid-view-icon-size,24px);height:var(--wz-grid-view-icon-size,24px);fill:currentColor}.wz-grid-view-item__text{text-align:center;width:100%}.wz-grid-view-item__title{font-size:var(--wz-grid-view-text-size,12px);color:var(--wz-grid-view-text-color,#323233);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__desc{font-size:var(--wz-grid-view-desc-size,10px);color:var(--wz-grid-view-desc-color,#969799);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:6px;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__badge{z-index:1;background-color:var(--wz-danger-color,#ff4d4f);color:var(--wz-text-color-white,#fff);text-align:center;box-sizing:border-box;border:1px solid #fff;border-radius:10px;padding:2px 4px;font-size:10px;line-height:1;position:absolute;top:4px;right:15px}.wz-grid-view-item__badge:empty{border-radius:50%;width:8px;height:8px;padding:0}.wz-grid-view-item__corner{z-index:1;background-color:var(--wz-warning-color,linear-gradient(110deg,#fba956 0%,#fe8a11 100%));color:var(--wz-text-color-white,#fff);transform-origin:0 0;border-radius:10px 10px 10px 0;padding:2px 6px;font-size:10px;line-height:1;position:absolute;top:4px;left:35px}.wz-grid-view-item--horizontal{border-radius:10px;width:167px;height:62px;padding:12px 16px}.wz-grid-view-item--horizontal .wz-grid-view-item__content{text-align:left;flex-direction:row;justify-content:flex-start;align-items:center}.wz-grid-view-item--horizontal .wz-grid-view-item__icon{flex-shrink:0;margin-bottom:0;margin-right:12px}.wz-grid-view-item--horizontal .wz-grid-view-item__text{text-align:left;flex:1;align-items:flex-start}.wz-grid-view-item--horizontal .wz-grid-view-item__title{text-align:left;font-size:14px;font-weight:600}.wz-grid-view-item--horizontal .wz-grid-view-item__desc{text-align:left;margin-top:8px;font-size:12px}.wz-grid-view-item--compact{padding:var(--wz-grid-view-item-padding,8px 4px)}.wz-grid-view-item--compact .wz-grid-view-item__icon{margin-bottom:4px;font-size:20px}.wz-grid-view-item--compact .wz-grid-view-item__icon img{width:24px;height:24px}.wz-grid-view-item--compact .wz-grid-view-item__icon svg{width:20px;height:20px}.wz-grid-view-item--compact .wz-grid-view-item__title{font-size:11px}.wz-grid-view--no-bg .wz-grid-view-item{background-color:#0000}.wz-grid-view--no-bg .wz-grid-view-item--clickable:hover{background-color:#0000000d}.wz-grid-view--no-bg .wz-grid-view-item--clickable:active{background-color:#0000001a}.wz-grid-view--rounded .wz-grid-view-item{border-radius:12px}.wz-grid-view--shadow .wz-grid-view-item{box-shadow:0 2px 8px #0000001a}.wz-grid-view--shadow .wz-grid-view-item--clickable:hover{box-shadow:0 4px 12px #00000026}.wz-grid-view-item--with-bg{color:var(--wz-text-color-white,#fff);position:relative}.wz-grid-view-item--with-bg:before{content:"";border-radius:inherit;z-index:0;background:linear-gradient(135deg,#0000004d 0%,#0000001a 50%,#0000004d 100%);position:absolute;top:0;bottom:0;left:0;right:0}.wz-grid-view-item--with-bg .wz-grid-view-item__content{z-index:1;position:relative}.wz-grid-view-item--with-bg .wz-grid-view-item__title{color:var(--wz-text-color-white,#fff);text-shadow:1px 1px 2px #00000080;font-weight:600}.wz-grid-view-item--with-bg .wz-grid-view-item__desc{color:#ffffffe6;text-shadow:1px 1px 2px #00000080}.wz-grid-view-item--with-bg .wz-grid-view-item__icon{color:var(--wz-text-color-white,#fff);filter:drop-shadow(1px 1px 2px #00000080)}.wz-grid-view-item--with-bg.wz-grid-view-item--horizontal{border-radius:10px;width:167px;height:62px}.wz-grid-view-item--with-bg.wz-grid-view-item--horizontal:before{background:linear-gradient(90deg,#0006 0%,#0000001a 70%,#0003 100%);border-radius:10px}.wz-grid-view-item--with-bg.wz-grid-view-item--horizontal .wz-grid-view-item__content{justify-content:flex-start;align-items:center}
|
package/dist/GridView/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-grid-view{box-sizing:border-box;width:100%;display:grid}.wz-grid-view--square .wz-grid-view-item{aspect-ratio:1}.wz-grid-view.wz-grid-view--horizontal{flex-wrap:wrap;justify-content:space-between;display:flex}.wz-grid-view-item{padding:var(--wz-grid-view-item-padding,16px 8px);box-sizing:border-box;background-color:var(--wz-grid-view-item-bg,#fff);border-radius:var(--wz-grid-view-item-border-radius,8px);flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.wz-grid-view-item--clickable{cursor:pointer}.wz-grid-view-item--clickable:hover{background-color:var(--wz-grid-view-item-hover-bg,#f7f8fa);transform:scale(.98)}.wz-grid-view-item--clickable:active{background-color:var(--wz-grid-view-item-active-bg,#ebedf0);transform:scale(.95)}.wz-grid-view-item--disabled{opacity:.5;cursor:not-allowed}.wz-grid-view-item--disabled:hover{background-color:var(--wz-grid-view-item-bg,#fff);transform:none}.wz-grid-view-item__content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.wz-grid-view-item__icon{margin-bottom:var(--wz-grid-view-icon-margin,8px);font-size:var(--wz-grid-view-icon-size,24px);color:var(--wz-grid-view-text-color,#323233);justify-content:center;align-items:center;display:flex}.wz-grid-view-item__icon img{object-fit:contain;width:32px;height:32px}.wz-grid-view-item__icon svg{width:var(--wz-grid-view-icon-size,24px);height:var(--wz-grid-view-icon-size,24px);fill:currentColor}.wz-grid-view-item__text{text-align:center;width:100%}.wz-grid-view-item__title{font-size:var(--wz-grid-view-text-size,12px);color:var(--wz-grid-view-text-color,#323233);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__desc{font-size:var(--wz-grid-view-desc-size,10px);color:var(--wz-grid-view-desc-color,#969799);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:6px;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__badge{z-index:1;background-color:var(--wz-danger-color,#
|
|
1
|
+
.wz-grid-view{box-sizing:border-box;width:100%;display:grid}.wz-grid-view--square .wz-grid-view-item{aspect-ratio:1}.wz-grid-view.wz-grid-view--horizontal{flex-wrap:wrap;justify-content:space-between;display:flex}.wz-grid-view-item{padding:var(--wz-grid-view-item-padding,16px 8px);box-sizing:border-box;background-color:var(--wz-grid-view-item-bg,#fff);border-radius:var(--wz-grid-view-item-border-radius,8px);flex-direction:column;justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative;overflow:hidden}.wz-grid-view-item--clickable{cursor:pointer}.wz-grid-view-item--clickable:hover{background-color:var(--wz-grid-view-item-hover-bg,#f7f8fa);transform:scale(.98)}.wz-grid-view-item--clickable:active{background-color:var(--wz-grid-view-item-active-bg,#ebedf0);transform:scale(.95)}.wz-grid-view-item--disabled{opacity:.5;cursor:not-allowed}.wz-grid-view-item--disabled:hover{background-color:var(--wz-grid-view-item-bg,#fff);transform:none}.wz-grid-view-item__content{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.wz-grid-view-item__icon{margin-bottom:var(--wz-grid-view-icon-margin,8px);font-size:var(--wz-grid-view-icon-size,24px);color:var(--wz-grid-view-text-color,#323233);justify-content:center;align-items:center;display:flex}.wz-grid-view-item__icon img{object-fit:contain;width:32px;height:32px}.wz-grid-view-item__icon svg{width:var(--wz-grid-view-icon-size,24px);height:var(--wz-grid-view-icon-size,24px);fill:currentColor}.wz-grid-view-item__text{text-align:center;width:100%}.wz-grid-view-item__title{font-size:var(--wz-grid-view-text-size,12px);color:var(--wz-grid-view-text-color,#323233);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__desc{font-size:var(--wz-grid-view-desc-size,10px);color:var(--wz-grid-view-desc-color,#969799);word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin-top:6px;line-height:1.2;display:-webkit-box;overflow:hidden}.wz-grid-view-item__badge{z-index:1;background-color:var(--wz-danger-color,#ff4d4f);color:var(--wz-text-color-white,#fff);text-align:center;box-sizing:border-box;border:1px solid #fff;border-radius:10px;padding:2px 4px;font-size:10px;line-height:1;position:absolute;top:4px;right:15px}.wz-grid-view-item__badge:empty{border-radius:50%;width:8px;height:8px;padding:0}.wz-grid-view-item__corner{z-index:1;background-color:var(--wz-warning-color,linear-gradient(110deg,#fba956 0%,#fe8a11 100%));color:var(--wz-text-color-white,#fff);transform-origin:0 0;border-radius:10px 10px 10px 0;padding:2px 6px;font-size:10px;line-height:1;position:absolute;top:4px;left:35px}.wz-grid-view-item--horizontal{border-radius:10px;width:167px;height:62px;padding:12px 16px}.wz-grid-view-item--horizontal .wz-grid-view-item__content{text-align:left;flex-direction:row;justify-content:flex-start;align-items:center}.wz-grid-view-item--horizontal .wz-grid-view-item__icon{flex-shrink:0;margin-bottom:0;margin-right:12px}.wz-grid-view-item--horizontal .wz-grid-view-item__text{text-align:left;flex:1;align-items:flex-start}.wz-grid-view-item--horizontal .wz-grid-view-item__title{text-align:left;font-size:14px;font-weight:600}.wz-grid-view-item--horizontal .wz-grid-view-item__desc{text-align:left;margin-top:8px;font-size:12px}.wz-grid-view-item--compact{padding:var(--wz-grid-view-item-padding,8px 4px)}.wz-grid-view-item--compact .wz-grid-view-item__icon{margin-bottom:4px;font-size:20px}.wz-grid-view-item--compact .wz-grid-view-item__icon img{width:24px;height:24px}.wz-grid-view-item--compact .wz-grid-view-item__icon svg{width:20px;height:20px}.wz-grid-view-item--compact .wz-grid-view-item__title{font-size:11px}.wz-grid-view--no-bg .wz-grid-view-item{background-color:#0000}.wz-grid-view--no-bg .wz-grid-view-item--clickable:hover{background-color:#0000000d}.wz-grid-view--no-bg .wz-grid-view-item--clickable:active{background-color:#0000001a}.wz-grid-view--rounded .wz-grid-view-item{border-radius:12px}.wz-grid-view--shadow .wz-grid-view-item{box-shadow:0 2px 8px #0000001a}.wz-grid-view--shadow .wz-grid-view-item--clickable:hover{box-shadow:0 4px 12px #00000026}.wz-grid-view-item--with-bg{color:var(--wz-text-color-white,#fff);position:relative}.wz-grid-view-item--with-bg:before{content:"";border-radius:inherit;z-index:0;background:linear-gradient(135deg,#0000004d 0%,#0000001a 50%,#0000004d 100%);position:absolute;top:0;bottom:0;left:0;right:0}.wz-grid-view-item--with-bg .wz-grid-view-item__content{z-index:1;position:relative}.wz-grid-view-item--with-bg .wz-grid-view-item__title{color:var(--wz-text-color-white,#fff);text-shadow:1px 1px 2px #00000080;font-weight:600}.wz-grid-view-item--with-bg .wz-grid-view-item__desc{color:#ffffffe6;text-shadow:1px 1px 2px #00000080}.wz-grid-view-item--with-bg .wz-grid-view-item__icon{color:var(--wz-text-color-white,#fff);filter:drop-shadow(1px 1px 2px #00000080)}.wz-grid-view-item--with-bg.wz-grid-view-item--horizontal{border-radius:10px;width:167px;height:62px}.wz-grid-view-item--with-bg.wz-grid-view-item--horizontal:before{background:linear-gradient(90deg,#0006 0%,#0000001a 70%,#0003 100%);border-radius:10px}.wz-grid-view-item--with-bg.wz-grid-view-item--horizontal .wz-grid-view-item__content{justify-content:flex-start;align-items:center}
|
package/dist/Input/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useState } from "react";
|
|
2
|
+
import { forwardRef, useState, useRef, useEffect, useCallback } from "react";
|
|
3
3
|
const Icon = ({
|
|
4
4
|
name,
|
|
5
5
|
size = 24,
|
|
@@ -30,7 +30,7 @@ const Icon = ({
|
|
|
30
30
|
const Input = forwardRef(
|
|
31
31
|
({
|
|
32
32
|
clearable = false,
|
|
33
|
-
align = "
|
|
33
|
+
align = "left",
|
|
34
34
|
value,
|
|
35
35
|
defaultValue,
|
|
36
36
|
onChange,
|
|
@@ -45,12 +45,49 @@ const Input = forwardRef(
|
|
|
45
45
|
borderRadius,
|
|
46
46
|
backgroundColor,
|
|
47
47
|
bordered,
|
|
48
|
+
codeCountdown = 60,
|
|
49
|
+
onGetCode,
|
|
50
|
+
codeText = "获取验证码",
|
|
51
|
+
codeCountingText = "{s}s后重新获取",
|
|
52
|
+
codeResendText = "重新获取验证码",
|
|
48
53
|
...props
|
|
49
54
|
}, ref) => {
|
|
50
55
|
const isControlled = value !== void 0;
|
|
51
56
|
const [innerValue, setInnerValue] = useState(defaultValue || "");
|
|
52
57
|
const showClear = clearable && !!(isControlled ? value : innerValue);
|
|
53
58
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
|
59
|
+
const [counting, setCounting] = useState(false);
|
|
60
|
+
const [countdown, setCountdown] = useState(codeCountdown);
|
|
61
|
+
const [hasSent, setHasSent] = useState(false);
|
|
62
|
+
const [suffixWidth, setSuffixWidth] = useState(0);
|
|
63
|
+
const suffixRef = useRef(null);
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
if (suffixRef.current) {
|
|
66
|
+
const width = suffixRef.current.offsetWidth;
|
|
67
|
+
setSuffixWidth(width);
|
|
68
|
+
}
|
|
69
|
+
}, [counting, countdown, hasSent, suffix, codeText, codeCountingText, codeResendText]);
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
let timer;
|
|
72
|
+
if (counting && countdown > 0) {
|
|
73
|
+
timer = setInterval(() => {
|
|
74
|
+
setCountdown((prev) => prev - 1);
|
|
75
|
+
}, 1e3);
|
|
76
|
+
} else if (countdown === 0) {
|
|
77
|
+
setCounting(false);
|
|
78
|
+
setCountdown(codeCountdown);
|
|
79
|
+
}
|
|
80
|
+
return () => clearInterval(timer);
|
|
81
|
+
}, [counting, countdown, codeCountdown]);
|
|
82
|
+
const handleGetCode = useCallback(async () => {
|
|
83
|
+
if (counting) return;
|
|
84
|
+
try {
|
|
85
|
+
await (onGetCode == null ? void 0 : onGetCode());
|
|
86
|
+
setCounting(true);
|
|
87
|
+
setHasSent(true);
|
|
88
|
+
} catch {
|
|
89
|
+
}
|
|
90
|
+
}, [counting, onGetCode]);
|
|
54
91
|
const handleChange = (e) => {
|
|
55
92
|
if (!isControlled) setInnerValue(e.target.value);
|
|
56
93
|
onChange == null ? void 0 : onChange(e);
|
|
@@ -75,7 +112,8 @@ const Input = forwardRef(
|
|
|
75
112
|
textAlign: align,
|
|
76
113
|
borderRadius,
|
|
77
114
|
backgroundColor,
|
|
78
|
-
border: bordered !== void 0 ? void 0 : "none"
|
|
115
|
+
border: bordered !== void 0 ? void 0 : "none",
|
|
116
|
+
...suffixWidth > 0 && (suffix || type === "code") ? { paddingRight: suffixWidth + 22 + 12 } : {}
|
|
79
117
|
};
|
|
80
118
|
const currentValue = isControlled ? value : innerValue;
|
|
81
119
|
const count = (currentValue == null ? void 0 : currentValue.toString().length) || 0;
|
|
@@ -127,15 +165,19 @@ const Input = forwardRef(
|
|
|
127
165
|
return /* @__PURE__ */ jsxs(
|
|
128
166
|
"div",
|
|
129
167
|
{
|
|
130
|
-
className: `wz-input-affix-wrapper ${type === "textarea" ? "wz-input-affix-wrapper-textarea" : ""} ${suffix ? "wz-input-has-suffix" : ""} ${bordered === void 0 ? "wz-input-no-border" : ""}`,
|
|
168
|
+
className: `wz-input-affix-wrapper ${type === "textarea" ? "wz-input-affix-wrapper-textarea" : ""} ${suffix || type === "code" ? "wz-input-has-suffix" : ""} ${bordered === void 0 ? "wz-input-no-border" : ""} ${clearable ? "wz-input-has-clear" : ""} ${type === "password" ? "wz-input-has-password" : ""}`,
|
|
131
169
|
style: wrapperStyle,
|
|
132
170
|
children: [
|
|
133
171
|
renderInput(),
|
|
134
172
|
showClear && !props.disabled && type !== "textarea" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-clear", onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 22 }) }),
|
|
135
173
|
type === "password" && !suffix && /* @__PURE__ */ jsx("span", { className: "wz-input-password", onClick: handlePasswordVisible, children: /* @__PURE__ */ jsx(Icon, { name: passwordVisible ? "eyes-close" : "eyes-open", size: 22 }) }),
|
|
136
|
-
suffix && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", children: [
|
|
174
|
+
suffix && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", ref: suffixRef, children: [
|
|
137
175
|
/* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
|
|
138
176
|
suffix
|
|
177
|
+
] }),
|
|
178
|
+
type === "code" && /* @__PURE__ */ jsxs("div", { className: "wz-input-suffix", ref: !suffix ? suffixRef : void 0, children: [
|
|
179
|
+
/* @__PURE__ */ jsx("span", { className: "wz-input-suffix-divider" }),
|
|
180
|
+
counting ? /* @__PURE__ */ jsx("span", { className: "wz-input-code-btn wz-input-code-btn--disabled", children: codeCountingText.replace("{s}", String(countdown)) }) : /* @__PURE__ */ jsx("span", { className: "wz-input-code-btn", onClick: handleGetCode, children: hasSent ? codeResendText : codeText })
|
|
139
181
|
] })
|
|
140
182
|
]
|
|
141
183
|
}
|
package/dist/Input/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
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).Input=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";const
|
|
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).Input=t(e.jsxRuntime,e.React)}(this,(function(e,t){"use strict";const s=({name:t,size:s=24,color:n="currentColor",className:a="",style:i,onClick:o,type:r="yunying"})=>{const l={fontSize:"number"==typeof s?`${s}px`:s,color:n,...i},u=`iconfont-${r}`,c=`icon-${t}`;return e.jsx("i",{className:`wz-icon ${u} ${c} ${a}`,style:l,onClick:o})},n=t.forwardRef((({clearable:n=!1,align:a="left",value:i,defaultValue:o,onChange:r,style:l,className:u="",type:c="text",showCount:d=!1,rows:p=3,maxLength:f,countStyle:x,suffix:w,borderRadius:m,backgroundColor:h,bordered:z,codeCountdown:y=60,onGetCode:g,codeText:v="获取验证码",codeCountingText:j="{s}s后重新获取",codeResendText:b="重新获取验证码",...C},N)=>{const $=void 0!==i,[S,k]=t.useState(o||""),R=n&&!!($?i:S),[T,I]=t.useState(!1),[L,q]=t.useState(!1),[E,A]=t.useState(y),[F,G]=t.useState(!1),[V,W]=t.useState(0),B=t.useRef(null);t.useEffect((()=>{if(B.current){const e=B.current.offsetWidth;W(e)}}),[L,E,F,w,v,j,b]),t.useEffect((()=>{let e;return L&&E>0?e=setInterval((()=>{A((e=>e-1))}),1e3):0===E&&(q(!1),A(y)),()=>clearInterval(e)}),[L,E,y]);const D=t.useCallback((async()=>{if(!L)try{await(null==g?void 0:g()),q(!0),G(!0)}catch{}}),[L,g]),H=e=>{$||k(e.target.value),null==r||r(e)},J={position:"relative",width:null==l?void 0:l.width,...l},K={textAlign:a,borderRadius:m,backgroundColor:h,border:void 0!==z?void 0:"none",...V>0&&(w||"code"===c)?{paddingRight:V+22+12}:{}},M=$?i:S,O=(null==M?void 0:M.toString().length)||0,P=f&&O>f;return e.jsxs("div",{className:`wz-input-affix-wrapper ${"textarea"===c?"wz-input-affix-wrapper-textarea":""} ${w||"code"===c?"wz-input-has-suffix":""} ${void 0===z?"wz-input-no-border":""} ${n?"wz-input-has-clear":""} ${"password"===c?"wz-input-has-password":""}`,style:J,children:["textarea"===c?e.jsxs(e.Fragment,{children:[e.jsx("textarea",{ref:N,className:`wz-input ${u}`,value:M,onChange:H,style:{...K,resize:"none"},rows:p,maxLength:f,...C}),d&&f&&e.jsxs("div",{className:"wz-input-count "+(P?"wz-input-count-exceeded":""),style:x,children:[O,"/",f]})]}):e.jsx("input",{ref:N,className:`wz-input ${u}`,value:M,onChange:H,style:K,type:"password"===c&&T?"text":c,maxLength:f,...C}),R&&!C.disabled&&"textarea"!==c&&!w&&e.jsx("span",{className:"wz-input-clear",onClick:()=>{$||k("");const e={...C,target:{value:""}};null==r||r(e)},children:e.jsx(s,{name:"close",size:22})}),"password"===c&&!w&&e.jsx("span",{className:"wz-input-password",onClick:()=>{I(!T)},children:e.jsx(s,{name:T?"eyes-close":"eyes-open",size:22})}),w&&e.jsxs("div",{className:"wz-input-suffix",ref:B,children:[e.jsx("span",{className:"wz-input-suffix-divider"}),w]}),"code"===c&&e.jsxs("div",{className:"wz-input-suffix",ref:w?void 0:B,children:[e.jsx("span",{className:"wz-input-suffix-divider"}),L?e.jsx("span",{className:"wz-input-code-btn wz-input-code-btn--disabled",children:j.replace("{s}",String(E))}):e.jsx("span",{className:"wz-input-code-btn",onClick:D,children:F?b:v})]})]})}));return n.displayName="Input",n}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-input-affix-wrapper{width:100%;display:block;position:relative}.wz-input{background:var(--wz-bg-color-white,#fff);color:var(--wz-text-color-primary,#222);text-align:
|
|
1
|
+
.wz-input-affix-wrapper{width:100%;display:block;position:relative}.wz-input{background:var(--wz-bg-color-white,#fff);color:var(--wz-text-color-primary,#222);text-align:left;box-sizing:border-box;box-shadow:none;border:none;border-radius:6px;outline:none;width:100%;height:40px;padding:0 14px;font-size:15px;font-weight:500;transition:border .2s,box-shadow .2s,background .2s,color .2s;display:block}.wz-input::placeholder{color:var(--wz-text-color-placeholder,#ccc)}.wz-input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.wz-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.wz-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.wz-input:focus{border:1px solid var(--wz-primary-color,#22c94d);caret-color:var(--wz-primary-color,#22c94d);box-shadow:none!important;outline:none!important}.wz-input-no-border .wz-input,.wz-input-no-border .wz-input:focus{border:none!important}.wz-input:disabled{background:var(--wz-bg-color-white,#fff);color:var(--wz-disabled-color,#ccc);cursor:not-allowed;border:none}.wz-input:disabled::placeholder{color:var(--wz-disabled-color,#ccc)}.wz-input-clear{cursor:pointer;z-index:2;color:var(--wz-text-color-secondary,#999);background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:background .2s;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.wz-input-clear:active{background:var(--wz-bg-color-light,#f5f5f5)}.wz-input-password{cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;color:var(--wz-text-color-secondary,#999);background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.wz-input-affix-wrapper-textarea{width:100%;display:inline-block;position:relative}.wz-input-affix-wrapper-textarea .wz-input{text-align:left;height:auto;padding:12px 12px 30px}.wz-input-affix-wrapper-textarea .wz-input-count{color:var(--wz-text-color-secondary,#999);font-size:14px;position:absolute;bottom:8px;right:12px}.wz-input-affix-wrapper-textarea .wz-input-count-exceeded{color:var(--wz-danger-color,#ff4c4f)}.wz-input-has-suffix .wz-input{padding-left:22px}.wz-input-has-clear .wz-input,.wz-input-has-password .wz-input{padding-right:40px}.wz-input-suffix{color:var(--wz-primary-color,#22c94d);align-items:center;font-size:14px;display:flex;position:absolute;top:50%;right:22px;transform:translateY(-50%)}.wz-input-suffix-divider{background-color:var(--wz-border-color-light,#eee);width:1px;height:16px;margin-left:12px;margin-right:12px}.wz-input-code-btn{color:var(--wz-input-code-btn-color,var(--wz-primary-color,#22c94d));cursor:pointer;white-space:nowrap;font-size:14px;font-weight:500}.wz-input-code-btn:active{opacity:.7}.wz-input-code-btn--disabled{color:var(--wz-input-code-btn-disabled-color,var(--wz-text-color-secondary,#999));cursor:not-allowed}.wz-input-code-btn--disabled:active{opacity:1}
|
package/dist/Input/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-input-affix-wrapper{width:100%;display:block;position:relative}.wz-input{background:var(--wz-bg-color-white,#fff);color:var(--wz-text-color-primary,#222);text-align:
|
|
1
|
+
.wz-input-affix-wrapper{width:100%;display:block;position:relative}.wz-input{background:var(--wz-bg-color-white,#fff);color:var(--wz-text-color-primary,#222);text-align:left;box-sizing:border-box;box-shadow:none;border:none;border-radius:6px;outline:none;width:100%;height:40px;padding:0 14px;font-size:15px;font-weight:500;transition:border .2s,box-shadow .2s,background .2s,color .2s;display:block}.wz-input::placeholder{color:var(--wz-text-color-placeholder,#ccc)}.wz-input[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.wz-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.wz-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.wz-input:focus{border:1px solid var(--wz-primary-color,#22c94d);caret-color:var(--wz-primary-color,#22c94d);box-shadow:none!important;outline:none!important}.wz-input-no-border .wz-input,.wz-input-no-border .wz-input:focus{border:none!important}.wz-input:disabled{background:var(--wz-bg-color-white,#fff);color:var(--wz-disabled-color,#ccc);cursor:not-allowed;border:none}.wz-input:disabled::placeholder{color:var(--wz-disabled-color,#ccc)}.wz-input-clear{cursor:pointer;z-index:2;color:var(--wz-text-color-secondary,#999);background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:background .2s;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.wz-input-clear:active{background:var(--wz-bg-color-light,#f5f5f5)}.wz-input-password{cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;color:var(--wz-text-color-secondary,#999);background:0 0;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.wz-input-affix-wrapper-textarea{width:100%;display:inline-block;position:relative}.wz-input-affix-wrapper-textarea .wz-input{text-align:left;height:auto;padding:12px 12px 30px}.wz-input-affix-wrapper-textarea .wz-input-count{color:var(--wz-text-color-secondary,#999);font-size:14px;position:absolute;bottom:8px;right:12px}.wz-input-affix-wrapper-textarea .wz-input-count-exceeded{color:var(--wz-danger-color,#ff4c4f)}.wz-input-has-suffix .wz-input{padding-left:22px}.wz-input-has-clear .wz-input,.wz-input-has-password .wz-input{padding-right:40px}.wz-input-suffix{color:var(--wz-primary-color,#22c94d);align-items:center;font-size:14px;display:flex;position:absolute;top:50%;right:22px;transform:translateY(-50%)}.wz-input-suffix-divider{background-color:var(--wz-border-color-light,#eee);width:1px;height:16px;margin-left:12px;margin-right:12px}.wz-input-code-btn{color:var(--wz-input-code-btn-color,var(--wz-primary-color,#22c94d));cursor:pointer;white-space:nowrap;font-size:14px;font-weight:500}.wz-input-code-btn:active{opacity:.7}.wz-input-code-btn--disabled{color:var(--wz-input-code-btn-disabled-color,var(--wz-text-color-secondary,#999));cursor:not-allowed}.wz-input-code-btn--disabled:active{opacity:1}.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-popup-container{pointer-events:none;z-index:var(--wz-popup-z-index,1000);width:100%;height:100%;display:none;position:fixed;top:0;left:0}.wz-popup--display{display:block}.wz-popup-mask{background-color:var(--wz-popup-mask-color,#0009);opacity:0;transition:opacity var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;width:100%;height:100%;position:absolute;top:0;left:0}.wz-popup-mask--active{opacity:1}.wz-popup{background-color:var(--wz-popup-background,#fff);transition:all var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;-webkit-overflow-scrolling:touch;max-height:100%;padding:10px;position:absolute;overflow:auto}.wz-popup-title{text-align:center;color:var(--wz-popup-title-color,#323233);padding:5px;font-size:16px;font-weight:600;line-height:24px;position:relative}.wz-popup-close{z-index:1;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:absolute;top:10px;right:16px}.wz-popup-close-icon{text-align:center;color:var(--wz-popup-close-icon-color,#969799);width:24px;height:24px;font-size:24px;font-weight:300;line-height:24px;display:block}.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)}.wz-popup--top{width:100%;top:0;left:0;transform:translateY(-100%)}.wz-popup--top.wz-popup--active{transform:translateY(0)}.wz-popup--right{height:100%;top:0;right:0;transform:translate(100%)}.wz-popup--right.wz-popup--active{transform:translate(0)}.wz-popup--bottom{width:100%;bottom:0;left:0;transform:translateY(100%)}.wz-popup--bottom.wz-popup--active{transform:translateY(0)}.wz-popup--left{height:100%;top:0;left:0;transform:translate(-100%)}.wz-popup--left.wz-popup--active{transform:translate(0)}.wz-popup--bottom.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0 0}.wz-popup--top.wz-popup--round{border-radius:0 0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)}.wz-popup--right.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)0 0 var(--wz-popup-round-radius,16px)}.wz-popup--left.wz-popup--round{border-radius:0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0}
|
|
1
|
+
.wz-popup-container{pointer-events:none;z-index:var(--wz-popup-z-index,1000);width:100%;height:100%;display:none;position:fixed;top:0;left:0}.wz-popup--display{display:block}.wz-popup-mask{background-color:var(--wz-popup-mask-color,#0009);opacity:0;transition:opacity var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;width:100%;height:100%;position:absolute;top:0;left:0}.wz-popup-mask--active{opacity:1}.wz-popup{background-color:var(--wz-popup-background,#fff);transition:all var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;-webkit-overflow-scrolling:touch;max-height:100%;padding:10px;position:absolute;overflow:auto}.wz-popup-title{text-align:center;color:var(--wz-popup-title-color,#323233);padding:5px;font-size:16px;font-weight:600;line-height:24px;position:relative}.wz-popup-close{z-index:1;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:absolute;top:10px;right:16px}.wz-popup-close-icon{text-align:center;color:var(--wz-popup-close-icon-color,#969799);width:24px;height:24px;font-size:24px;font-weight:300;line-height:24px;display:block}.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)}.wz-popup--top{width:100%;top:0;left:0;transform:translateY(-100%)}.wz-popup--top.wz-popup--active{transform:translateY(0)}.wz-popup--right{height:100%;top:0;right:0;transform:translate(100%)}.wz-popup--right.wz-popup--active{transform:translate(0)}.wz-popup--bottom{width:100%;bottom:0;left:0;transform:translateY(100%)}.wz-popup--bottom.wz-popup--active{transform:translateY(0)}.wz-popup--left{height:100%;top:0;left:0;transform:translate(-100%)}.wz-popup--left.wz-popup--active{transform:translate(0)}.wz-popup--bottom.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0 0}.wz-popup--top.wz-popup--round{border-radius:0 0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)}.wz-popup--right.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)0 0 var(--wz-popup-round-radius,16px)}.wz-popup--left.wz-popup--round{border-radius:0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0}
|
package/dist/Popup/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-popup-container{pointer-events:none;z-index:var(--wz-popup-z-index,1000);width:100%;height:100%;display:none;position:fixed;top:0;left:0}.wz-popup--display{display:block}.wz-popup-mask{background-color:var(--wz-popup-mask-color,#0009);opacity:0;transition:opacity var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;width:100%;height:100%;position:absolute;top:0;left:0}.wz-popup-mask--active{opacity:1}.wz-popup{background-color:var(--wz-popup-background,#fff);transition:all var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;-webkit-overflow-scrolling:touch;max-height:100%;padding:10px;position:absolute;overflow:auto}.wz-popup-title{text-align:center;color:var(--wz-popup-title-color,#323233);padding:5px;font-size:16px;font-weight:600;line-height:24px;position:relative}.wz-popup-close{z-index:1;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:absolute;top:10px;right:16px}.wz-popup-close-icon{text-align:center;color:var(--wz-popup-close-icon-color,#969799);width:24px;height:24px;font-size:24px;font-weight:300;line-height:24px;display:block}.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)}.wz-popup--top{width:100%;top:0;left:0;transform:translateY(-100%)}.wz-popup--top.wz-popup--active{transform:translateY(0)}.wz-popup--right{height:100%;top:0;right:0;transform:translate(100%)}.wz-popup--right.wz-popup--active{transform:translate(0)}.wz-popup--bottom{width:100%;bottom:0;left:0;transform:translateY(100%)}.wz-popup--bottom.wz-popup--active{transform:translateY(0)}.wz-popup--left{height:100%;top:0;left:0;transform:translate(-100%)}.wz-popup--left.wz-popup--active{transform:translate(0)}.wz-popup--bottom.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0 0}.wz-popup--top.wz-popup--round{border-radius:0 0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)}.wz-popup--right.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)0 0 var(--wz-popup-round-radius,16px)}.wz-popup--left.wz-popup--round{border-radius:0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0}
|
|
1
|
+
.wz-popup-container{pointer-events:none;z-index:var(--wz-popup-z-index,1000);width:100%;height:100%;display:none;position:fixed;top:0;left:0}.wz-popup--display{display:block}.wz-popup-mask{background-color:var(--wz-popup-mask-color,#0009);opacity:0;transition:opacity var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;width:100%;height:100%;position:absolute;top:0;left:0}.wz-popup-mask--active{opacity:1}.wz-popup{background-color:var(--wz-popup-background,#fff);transition:all var(--wz-popup-transition-duration,.3s)ease;pointer-events:auto;-webkit-overflow-scrolling:touch;max-height:100%;padding:10px;position:absolute;overflow:auto}.wz-popup-title{text-align:center;color:var(--wz-popup-title-color,#323233);padding:5px;font-size:16px;font-weight:600;line-height:24px;position:relative}.wz-popup-close{z-index:1;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:absolute;top:10px;right:16px}.wz-popup-close-icon{text-align:center;color:var(--wz-popup-close-icon-color,#969799);width:24px;height:24px;font-size:24px;font-weight:300;line-height:24px;display:block}.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)}.wz-popup--top{width:100%;top:0;left:0;transform:translateY(-100%)}.wz-popup--top.wz-popup--active{transform:translateY(0)}.wz-popup--right{height:100%;top:0;right:0;transform:translate(100%)}.wz-popup--right.wz-popup--active{transform:translate(0)}.wz-popup--bottom{width:100%;bottom:0;left:0;transform:translateY(100%)}.wz-popup--bottom.wz-popup--active{transform:translateY(0)}.wz-popup--left{height:100%;top:0;left:0;transform:translate(-100%)}.wz-popup--left.wz-popup--active{transform:translate(0)}.wz-popup--bottom.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0 0}.wz-popup--top.wz-popup--round{border-radius:0 0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)}.wz-popup--right.wz-popup--round{border-radius:var(--wz-popup-round-radius,16px)0 0 var(--wz-popup-round-radius,16px)}.wz-popup--left.wz-popup--round{border-radius:0 var(--wz-popup-round-radius,16px)var(--wz-popup-round-radius,16px)0}
|
package/dist/Radio/index.js
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useContext, createContext } from "react";
|
|
3
|
+
const Icon = ({
|
|
4
|
+
name,
|
|
5
|
+
size = 24,
|
|
6
|
+
color = "currentColor",
|
|
7
|
+
className = "",
|
|
8
|
+
style,
|
|
9
|
+
onClick,
|
|
10
|
+
type = "yunying"
|
|
11
|
+
// 默认使用yunying图标库
|
|
12
|
+
}) => {
|
|
13
|
+
const iconStyle = {
|
|
14
|
+
fontSize: typeof size === "number" ? `${size}px` : size,
|
|
15
|
+
color,
|
|
16
|
+
...style
|
|
17
|
+
};
|
|
18
|
+
const iconFontClass = `iconfont-${type}`;
|
|
19
|
+
const iconPrefix = "icon-";
|
|
20
|
+
const iconClass = `${iconPrefix}${name}`;
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
"i",
|
|
23
|
+
{
|
|
24
|
+
className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
|
|
25
|
+
style: iconStyle,
|
|
26
|
+
onClick
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
};
|
|
3
30
|
const RadioGroupContext = createContext({});
|
|
4
31
|
const Radio = ({
|
|
5
32
|
size,
|
|
@@ -27,6 +54,11 @@ const Radio = ({
|
|
|
27
54
|
const isChecked = isInGroup ? groupContext.value === value : checked;
|
|
28
55
|
const isDisabled = disabled || groupContext.disabled;
|
|
29
56
|
const radioSize = size || groupContext.size || "medium";
|
|
57
|
+
const iconSizeMap = {
|
|
58
|
+
small: 16,
|
|
59
|
+
medium: 18,
|
|
60
|
+
large: 20
|
|
61
|
+
};
|
|
30
62
|
return /* @__PURE__ */ jsxs(
|
|
31
63
|
"label",
|
|
32
64
|
{
|
|
@@ -45,7 +77,7 @@ const Radio = ({
|
|
|
45
77
|
...rest
|
|
46
78
|
}
|
|
47
79
|
),
|
|
48
|
-
/* @__PURE__ */ jsx("span", { className: "wz-radio-inner" }),
|
|
80
|
+
/* @__PURE__ */ jsx("span", { className: "wz-radio-inner", children: /* @__PURE__ */ jsx(Icon, { name: isChecked ? "radio-sel" : "radio-nor", type: "yunying", size: iconSizeMap[radioSize] }) }),
|
|
49
81
|
children && /* @__PURE__ */ jsx("span", { className: "wz-radio-label", children })
|
|
50
82
|
]
|
|
51
83
|
}
|
package/dist/Radio/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
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).Radio=a(e.jsxRuntime,e.React)}(this,(function(e,a){"use strict";const s=a.createContext({}),
|
|
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).Radio=a(e.jsxRuntime,e.React)}(this,(function(e,a){"use strict";const i=({name:a,size:i=24,color:s="currentColor",className:l="",style:n,onClick:o,type:r="yunying"})=>{const d={fontSize:"number"==typeof i?`${i}px`:i,color:s,...n},t=`iconfont-${r}`,c=`icon-${a}`;return e.jsx("i",{className:`wz-icon ${t} ${c} ${l}`,style:d,onClick:o})},s=a.createContext({}),l=({size:l,checked:n,disabled:o,onChange:r,children:d,value:t,className:c="",style:u,...m})=>{const p=a.useContext(s),y=!!p.value,h=y?p.value===t:n,f=o||p.disabled,x=l||p.size||"medium";return e.jsxs("label",{className:`wz-radio-wrapper ${f?"wz-radio--disabled":""} wz-radio--${x} ${c}`,style:u,children:[e.jsx("input",{type:"radio",className:"wz-radio-input",checked:h,disabled:f,onChange:e=>{var a;o||p.disabled||(y?null==(a=p.onChange)||a.call(p,t):null==r||r(e.target.checked))},value:t,...m}),e.jsx("span",{className:"wz-radio-inner",children:e.jsx(i,{name:h?"radio-sel":"radio-nor",type:"yunying",size:{small:16,medium:18,large:20}[x]})}),d&&e.jsx("span",{className:"wz-radio-label",children:d})]})},n=({value:i,defaultValue:l,onChange:n,disabled:o,size:r,children:d,className:t="",style:c})=>{const[u,m]=a.useState(l),p={value:void 0!==i?i:u,onChange:e=>{m(e),null==n||n(e)},disabled:o,size:r};return e.jsx(s.Provider,{value:p,children:e.jsx("div",{className:`wz-radio-group ${t}`,style:c,children:d})})};return l.Group=n,l.displayName="Radio",n.displayName="Radio.Group",l}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-radio-group{flex-direction:column;gap:12px;display:inline-flex}.wz-radio-group.wz-radio-group--horizontal{flex-direction:row;align-items:center}.wz-radio-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-radio-wrapper.wz-radio--small .wz-radio-
|
|
1
|
+
.wz-radio-group{flex-direction:column;gap:12px;display:inline-flex}.wz-radio-group.wz-radio-group--horizontal{flex-direction:row;align-items:center}.wz-radio-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-radio-wrapper.wz-radio--small .wz-radio-label{margin-left:8px;font-size:13px}.wz-radio-wrapper.wz-radio--medium .wz-radio-label{margin-left:12px;font-size:14px}.wz-radio-wrapper.wz-radio--large .wz-radio-label{margin-left:16px;font-size:16px}.wz-radio-wrapper.wz-radio--disabled{cursor:not-allowed;opacity:.6}.wz-radio-wrapper.wz-radio--disabled .wz-radio-label{color:var(--wz-disabled-color,#c0c4cc)}.wz-radio-input{opacity:0;z-index:-1;width:0;height:0;margin:0;padding:0;position:absolute}.wz-radio-inner{color:var(--wz-border-color-base,#dcdfe6);justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.wz-radio-input:checked+.wz-radio-inner,.wz-radio-input:focus+.wz-radio-inner{color:var(--wz-primary-color,#22c94d)}.wz-radio-wrapper:hover .wz-radio-inner{color:var(--wz-primary-color,#22c94d);opacity:.8}.wz-radio-label{color:var(--wz-text-color-primary,#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-radio-wrapper:hover .wz-radio-label{color:var(--wz-primary-color,#22c94d)}
|
package/dist/Radio/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.wz-radio-group{flex-direction:column;gap:12px;display:inline-flex}.wz-radio-group.wz-radio-group--horizontal{flex-direction:row;align-items:center}.wz-radio-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-radio-wrapper.wz-radio--small .wz-radio-
|
|
1
|
+
.wz-icon{justify-content:center;align-items:center;transition:color .2s ease-in-out;display:inline-flex}.wz-icon-home:before{content:""}.wz-icon-search:before{content:""}.wz-icon-person:before{content:""}.wz-icon-settings:before{content:""}.wz-icon-notifications:before{content:""}.wz-icon-message:before{content:""}.wz-icon-favorite:before{content:""}.wz-icon-star:before{content:""}.wz-icon-close:before{content:""}.wz-icon-check:before{content:""}.wz-icon-arrow-back:before{content:""}.wz-icon-arrow-forward:before{content:""}.wz-icon-menu:before{content:""}.wz-icon-more:before{content:""}.wz-icon-add:before{content:""}.wz-icon-edit:before{content:""}.wz-icon-delete:before{content:""}.wz-icon-share:before{content:""}.wz-icon-download:before{content:""}.wz-icon-upload:before{content:""}.wz-icon-refresh:before{content:""}.wz-icon-help:before{content:""}.wz-icon-info:before{content:""}.wz-icon-warning:before{content:""}.wz-icon-error:before{content:""}.wz-icon-success:before{content:""}.wz-radio-group{flex-direction:column;gap:12px;display:inline-flex}.wz-radio-group.wz-radio-group--horizontal{flex-direction:row;align-items:center}.wz-radio-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-radio-wrapper.wz-radio--small .wz-radio-label{margin-left:8px;font-size:13px}.wz-radio-wrapper.wz-radio--medium .wz-radio-label{margin-left:12px;font-size:14px}.wz-radio-wrapper.wz-radio--large .wz-radio-label{margin-left:16px;font-size:16px}.wz-radio-wrapper.wz-radio--disabled{cursor:not-allowed;opacity:.6}.wz-radio-wrapper.wz-radio--disabled .wz-radio-label{color:var(--wz-disabled-color,#c0c4cc)}.wz-radio-input{opacity:0;z-index:-1;width:0;height:0;margin:0;padding:0;position:absolute}.wz-radio-inner{color:var(--wz-border-color-base,#dcdfe6);justify-content:center;align-items:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative}.wz-radio-input:checked+.wz-radio-inner,.wz-radio-input:focus+.wz-radio-inner{color:var(--wz-primary-color,#22c94d)}.wz-radio-wrapper:hover .wz-radio-inner{color:var(--wz-primary-color,#22c94d);opacity:.8}.wz-radio-label{color:var(--wz-text-color-primary,#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-radio-wrapper:hover .wz-radio-label{color:var(--wz-primary-color,#22c94d)}
|