@zjpcy/simple-design 1.8.2 → 1.8.3

package/dist/cjs/components/Splitter/index.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),r=require("./styles.js");function i(e){return e&&e.__esModule?e:{default:e}}var u=i(n),a=function(i){var a=i.layout,o=void 0===a?"horizontal":a,s=i.panels,l=i.defaultSize,c=void 0===l?"50%":l,d=i.minSize,f=void 0===d?50:d,v=i.maxSize,m=void 0===v?1/0:v,p=i.splitterSize,g=i.lineColor,z=i.lineHoverColor,h=i.disabled,S=void 0!==h&&h,y=i.onResize,b=i.onResizeEnd,x=i.className,j=void 0===x?"":x,_=i.style,C=i.left,E=i.right,L=i.top,N=i.bottom,M=i.children,w=n.useRef(null),D=n.useState([]),P=D[0],k=D[1],q=n.useState(!1),R=q[0],A=q[1],B=n.useState(-1),I=B[0],O=B[1],X=n.useRef({isDragging:!1,startPosition:0,startSizes:[],containerSize:0,splitterIndex:-1}),Y=n.useMemo(function(){if(s&&s.length>0)return s.map(function(e){return e.content});if("vertical"===o){if(L&&N)return[L,N]}else if(C&&E)return[C,E];return M&&Array.isArray(M)?M:[]},[s,o,C,E,L,N,M]),T=Y.length,F=n.useCallback(function(e){return s&&s[e]?s[e]:{}},[s]),H=n.useCallback(function(){if(!w.current)return 0;var e=w.current.getBoundingClientRect();return"horizontal"===o?e.width:e.height},[o]),V=n.useCallback(function(){if(void 0!==p)return p;var e=getComputedStyle(document.documentElement).getPropertyValue("--zjpcy-splitter-bar-size").trim();return parseInt(e,10)||10},[p]);n.useEffect(function(){var e=H();if(e>0&&T>0){var t=V()*(T-1),n=Math.max(0,e-t),i=r.parseSizeConfig(c,T,"".concat(100/T,"%")),u=r.parseNumberConfig(f,T,50),a=r.parseNumberConfig(m,T,1/0),o=s?s.map(function(e){var t;return null!==(t=e.defaultSize)&&void 0!==t?t:i[s.indexOf(e)]}):i,l=s?s.map(function(e){var t;return null!==(t=e.minSize)&&void 0!==t?t:u[s.indexOf(e)]}):u,d=s?s.map(function(e){var t;return null!==(t=e.maxSize)&&void 0!==t?t:a[s.indexOf(e)]}):a,v=o.map(function(e){return r.parseSizeToPixels(e,n)}),p=v.reduce(function(e,t){return e+t},0);if(p!==n&&n>0){var g=n/p;v=v.map(function(e){return e*g})}v=v.map(function(e,t){return Math.max(l[t],Math.min(d[t],e))}),k(v)}},[T]),n.useEffect(function(){var e=function(){var e=H();if(e>0&&P.length>0){var t=V()*(T-1),n=Math.max(0,e-t),r=P.reduce(function(e,t){return e+t},0);if(r>0){var i=n/r;k(function(e){return e.map(function(e){return e*i})})}}};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}},[P,T,H,V]);var G=n.useCallback(function(t){return function(n){if(!S){var r=F(t),i=F(t+1);if(!r.disabled&&!i.disabled){n.preventDefault();var u="touches"in n?n.touches[0].clientX:n.clientX,a="touches"in n?n.touches[0].clientY:n.clientY,s="horizontal"===o?u:a,l=H();X.current={isDragging:!0,startPosition:s,startSizes:e.__spreadArray([],P,!0),containerSize:l,splitterIndex:t},A(!0),O(t)}}}},[S,o,P,H,F]),J=n.useCallback(function(t){if(X.current.isDragging&&!S){var n="touches"in t?t.touches[0].clientX:t.clientX,i="touches"in t?t.touches[0].clientY:t.clientY,u=("horizontal"===o?n:i)-X.current.startPosition,a=X.current.splitterIndex,l=X.current.startSizes,c=r.parseNumberConfig(f,T,50),d=r.parseNumberConfig(m,T,1/0),v=s?s.map(function(e,t){var n;return null!==(n=e.minSize)&&void 0!==n?n:c[t]}):c,p=s?s.map(function(e,t){var n;return null!==(n=e.maxSize)&&void 0!==n?n:d[t]}):d,g=v[a],z=p[a],h=v[a+1],b=p[a+1],x=l[a],j=l[a+1],_=x+u,C=j-u;_<g?(_=g,C=x+j-g):_>z&&(_=z,C=x+j-z),C<h?(C=h,_=x+j-h):C>b&&(C=b,_=x+j-b);var E=e.__spreadArray([],P,!0);E[a]=_,E[a+1]=C,k(E),null==y||y(E,a)}},[S,o,P,T,f,m,s,y]),K=n.useCallback(function(){X.current.isDragging&&(X.current.isDragging=!1,A(!1),O(-1),null==b||b(P))},[P,b]);if(n.useEffect(function(){if(R)return document.addEventListener("mousemove",J),document.addEventListener("mouseup",K),document.addEventListener("touchmove",J,{passive:!1}),document.addEventListener("touchend",K),function(){document.removeEventListener("mousemove",J),document.removeEventListener("mouseup",K),document.removeEventListener("touchmove",J),document.removeEventListener("touchend",K)}},[R,J,K]),T<2)return console.warn("Splitter requires at least 2 panels"),null;var Q=["zjpcy-splitter","zjpcy-splitter-".concat(o),R?"zjpcy-splitter-dragging":"",j].filter(Boolean).join(" ");return t.jsx("div",{ref:w,className:Q,style:r.getContainerStyle(o,_),children:Y.map(function(e,n){var i=P[n]||0,a=n===T-1;return t.jsxs(u.default.Fragment,{children:[t.jsx("div",{className:"zjpcy-splitter__panel",style:r.getPanelStyle(i,o,n,T),children:e}),!a&&t.jsx("div",{className:["zjpcy-splitter__bar",I===n?"zjpcy-splitter__bar-dragging":"",S||F(n).disabled||F(n+1).disabled?"zjpcy-splitter__bar-disabled":""].filter(Boolean).join(" "),style:r.getSplitterBarStyle(o,p,S,n),onMouseDown:G(n),onTouchStart:G(n),children:t.jsx("div",{className:"zjpcy-splitter__line",style:r.getSplitterLineStyle(o,g,z,R,I===n)})})]},n)})})},o=a;exports.Splitter=a,exports.default=o;
+"use client";"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),r=require("./styles.js");function i(e){return e&&e.__esModule?e:{default:e}}var a=i(n),u=function(i){var u=i.layout,s=void 0===u?"horizontal":u,l=i.panels,o=i.defaultSize,c=void 0===o?"50%":o,d=i.minSize,f=void 0===d?50:d,v=i.maxSize,m=void 0===v?1/0:v,p=i.splitterSize,g=i.lineColor,h=i.lineHoverColor,z=i.disabled,x=void 0!==z&&z,S=i.onResize,y=i.onResizeEnd,b=i.className,j=void 0===b?"":b,_=i.style,P=i.left,C=i.right,E=i.top,M=i.bottom,L=i.children,w=n.useRef(null),D=n.useState([]),k=D[0],A=D[1],q=n.useState(!1),N=q[0],R=q[1],B=n.useState(-1),I=B[0],O=B[1],W=n.useRef({isDragging:!1,startPosition:0,startSizes:[],containerSize:0,splitterIndex:-1}),X=n.useMemo(function(){if(l&&l.length>0)return l.map(function(e){return e.content});if("vertical"===s){if(E&&M)return[E,M]}else if(P&&C)return[P,C];return L&&Array.isArray(L)?L:[]},[l,s,P,C,E,M,L]),Y=X.length,T=n.useCallback(function(e){return l&&l[e]?l[e]:{}},[l]),F=n.useCallback(function(){if(!w.current)return 0;var e=w.current.getBoundingClientRect();return"horizontal"===s?e.width:e.height},[s]),H=n.useCallback(function(){if(void 0!==p)return p;var e=getComputedStyle(document.documentElement).getPropertyValue("--zjpcy-splitter-bar-size").trim();return parseInt(e,10)||10},[p]);n.useEffect(function(){var e=F();if(e>0&&Y>0){var t=H()*(Y-1),n=Math.max(0,e-t),i=r.parseSizeConfig(c,Y,"".concat(100/Y,"%")),a=r.parseSizeConfigWithPercentage(f,Y,50),u=r.parseSizeConfigWithPercentage(m,Y,1/0),s=l?l.map(function(e){var t;return null!==(t=e.defaultSize)&&void 0!==t?t:i[l.indexOf(e)]}):i,o=l?l.map(function(e){var t;return null!==(t=e.minSize)&&void 0!==t?t:a[l.indexOf(e)]}):a,d=l?l.map(function(e){var t;return null!==(t=e.maxSize)&&void 0!==t?t:u[l.indexOf(e)]}):u,v=r.calculateAllMinMaxPixels(o,d,n),p=v.minPixels,g=v.maxPixels,h=s.map(function(e){return r.parseSizeToPixels(e,n)}),z=h.reduce(function(e,t){return e+t},0);if(z!==n&&n>0){var x=n/z;h=h.map(function(e){return e*x})}h=h.map(function(e,t){return Math.max(p[t],Math.min(g[t],e))}),A(h)}},[Y]),n.useEffect(function(){var e=function(){var e=F();if(e>0&&k.length>0){var t=H()*(Y-1),n=Math.max(0,e-t),r=k.reduce(function(e,t){return e+t},0);if(r>0){var i=n/r;A(function(e){return e.map(function(e){return e*i})})}}};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}},[k,Y,F,H]);var V=n.useCallback(function(t){return function(n){if(!x){var r=T(t),i=T(t+1);if(!r.disabled&&!i.disabled){n.preventDefault();var a="touches"in n?n.touches[0].clientX:n.clientX,u="touches"in n?n.touches[0].clientY:n.clientY,l="horizontal"===s?a:u,o=F();W.current={isDragging:!0,startPosition:l,startSizes:e.__spreadArray([],k,!0),containerSize:o,splitterIndex:t},R(!0),O(t)}}}},[x,s,k,F,T]),G=n.useCallback(function(t){if(W.current.isDragging&&!x){var n="touches"in t?t.touches[0].clientX:t.clientX,i="touches"in t?t.touches[0].clientY:t.clientY,a=("horizontal"===s?n:i)-W.current.startPosition,u=W.current.splitterIndex,o=W.current.startSizes,c=F(),d=H()*(Y-1),v=Math.max(0,c-d),p=r.parseSizeConfigWithPercentage(f,Y,50),g=r.parseSizeConfigWithPercentage(m,Y,1/0),h=l?l.map(function(e,t){var n;return null!==(n=e.minSize)&&void 0!==n?n:p[t]}):p,z=l?l.map(function(e,t){var n;return null!==(n=e.maxSize)&&void 0!==n?n:g[t]}):g,y=r.calculateAllMinMaxPixels(h.slice(u,u+2),z.slice(u,u+2),v),b=y.minPixels,j=y.maxPixels,_=b[0],P=j[0],C=b[1],E=j[1],M=o[u],L=o[u+1],w=M+a,D=L-a;w<_?(w=_,D=M+L-_):w>P&&(w=P,D=M+L-P),D<C?(D=C,w=M+L-C):D>E&&(D=E,w=M+L-E);var q=e.__spreadArray([],k,!0);q[u]=w,q[u+1]=D,A(q),null==S||S(q,u)}},[x,s,k,Y,f,m,l,S,F,H]),J=n.useCallback(function(){W.current.isDragging&&(W.current.isDragging=!1,R(!1),O(-1),null==y||y(k))},[k,y]);if(n.useEffect(function(){if(N)return document.addEventListener("mousemove",G),document.addEventListener("mouseup",J),document.addEventListener("touchmove",G,{passive:!1}),document.addEventListener("touchend",J),function(){document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",J),document.removeEventListener("touchmove",G),document.removeEventListener("touchend",J)}},[N,G,J]),Y<2)return console.warn("Splitter requires at least 2 panels"),null;var K=["zjpcy-splitter","zjpcy-splitter-".concat(s),N?"zjpcy-splitter-dragging":"",j].filter(Boolean).join(" ");return t.jsx("div",{ref:w,className:K,style:r.getContainerStyle(s,_),children:X.map(function(e,n){var i=k[n]||0,u=n===Y-1;return t.jsxs(a.default.Fragment,{children:[t.jsx("div",{className:"zjpcy-splitter__panel",style:r.getPanelStyle(i,s,n,Y),children:e}),!u&&t.jsx("div",{className:["zjpcy-splitter__bar",I===n?"zjpcy-splitter__bar-dragging":"",x||T(n).disabled||T(n+1).disabled?"zjpcy-splitter__bar-disabled":""].filter(Boolean).join(" "),style:r.getSplitterBarStyle(s,p,x,n),onMouseDown:V(n),onTouchStart:V(n),children:t.jsx("div",{className:"zjpcy-splitter__line",style:r.getSplitterLineStyle(s,g,h,N,I===n)})})]},n)})})},s=u;exports.Splitter=u,exports.default=s;

package/dist/cjs/components/Splitter/styles.js

@@ -1 +1 @@
-"use strict";var r=require("tslib");exports.getContainerStyle=function(t,i){return r.__assign({display:"flex",flexDirection:"horizontal"===t?"row":"column",alignItems:"stretch",width:"100%",height:"100%",overflow:"hidden",background:"var(--zjpcy-splitter-panel-bg)",borderRadius:"var(--zjpcy-splitter-panel-radius)"},i)},exports.getPanelStyle=function(r,t,i,e){void 0===i&&(i=0),void 0===e&&(e=2);var n={position:"relative",overflow:"auto",flexShrink:0,alignSelf:"stretch",background:"var(--zjpcy-splitter-panel-bg)"};return"horizontal"===t?(n.width="".concat(r,"px"),n.height="auto",n.minHeight="100%"):(n.width="auto",n.minWidth="100%",n.height="".concat(r,"px")),i<e-1&&(n.boxShadow="horizontal"===t?"var(--zjpcy-splitter-panel-shadow)":"var(--zjpcy-splitter-panel-shadow-vertical)",n.zIndex=e-i),n},exports.getSplitterBarStyle=function(r,t,i,e){void 0===e&&(e=0);var n={position:"relative",flexShrink:0,background:i?"var(--zjpcy-bg-color-light)":"var(--zjpcy-splitter-bar-bg)",cursor:i?"not-allowed":"horizontal"===r?"col-resize":"row-resize",userSelect:"none",touchAction:"none",zIndex:10+5*e,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"var(--zjpcy-splitter-shadow-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return void 0!==t&&("horizontal"===r?(n.width="".concat(t,"px"),n.height="100%"):(n.width="100%",n.height="".concat(t,"px"))),i&&(n.opacity="var(--zjpcy-opacity-disabled)"),n},exports.getSplitterLineStyle=function(r,t,i,e,n){void 0===n&&(n=!1);var a={borderRadius:"var(--zjpcy-border-radius-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return"horizontal"===r?(a.width=t?"2px":"var(--zjpcy-splitter-line-width)",a.height=t?"32px":"var(--zjpcy-splitter-line-length)",a.minHeight="var(--zjpcy-splitter-line-min-length)"):(a.width=t?"32px":"var(--zjpcy-splitter-line-length)",a.minWidth="var(--zjpcy-splitter-line-min-length)",a.height=t?"2px":"var(--zjpcy-splitter-line-width)"),n&&e&&i?(a.backgroundColor=i,a.boxShadow="var(--zjpcy-splitter-shadow-active)"):e&&i?(a.backgroundColor=i,a.boxShadow="var(--zjpcy-splitter-shadow-md)"):t?a.backgroundColor=t:a.background="var(--zjpcy-splitter-line-bg)",a},exports.parseNumberConfig=function(t,i,e){var n;if(void 0===t)return new Array(i).fill(e);if(Array.isArray(t)){for(var a=r.__spreadArray([],t,!0);a.length<i;)a.push(null!==(n=a[a.length-1])&&void 0!==n?n:e);return a.slice(0,i)}return new Array(i).fill(t)},exports.parseSizeConfig=function(t,i,e){var n;if(void 0===e&&(e="50%"),void 0===t){var a="".concat(100/i,"%");return new Array(i).fill(a)}if(Array.isArray(t)){for(var o=r.__spreadArray([],t,!0);o.length<i;)o.push(null!==(n=o[o.length-1])&&void 0!==n?n:e);return o.slice(0,i)}return new Array(i).fill(t)},exports.parseSizeToPixels=function(r,t){return"number"==typeof r?r:"string"==typeof r&&r.endsWith("%")?t*(parseFloat(r)/100):parseFloat(r)||t/2};
+"use strict";var t=require("tslib"),r=function(t,r,e){var i,a,n="string"==typeof t&&t.endsWith("%"),o="string"==typeof r&&r.endsWith("%");if(n&&o)i=e*(parseFloat(t)/100),a=e*(parseFloat(r)/100);else if(o&&!n){a=e*(parseFloat(r)/100);var l="number"==typeof t?t:parseFloat(t);i=Math.min(l,e-a)}else if(n&&!o){i=e*(parseFloat(t)/100);var s="number"==typeof r?r:parseFloat(r);a=Math.min(s,e-i)}else i="number"==typeof t?t:parseFloat(t),a="number"==typeof r?r:parseFloat(r);return i=Math.max(0,i),a=Math.max(i,a),{minPixels:i,maxPixels:a=Math.min(a,e)}};exports.calculateAllMinMaxPixels=function(t,e,i){for(var a=t.length,n=[],o=[],l=0;l<a;l++){var s=r(t[l],e[l],i),p=s.minPixels,c=s.maxPixels;n.push(p),o.push(c)}return{minPixels:n,maxPixels:o}},exports.calculateMinMaxPixels=r,exports.getContainerStyle=function(r,e){return t.__assign({display:"flex",flexDirection:"horizontal"===r?"row":"column",alignItems:"stretch",width:"100%",height:"100%",overflow:"hidden",background:"var(--zjpcy-splitter-panel-bg)",borderRadius:"var(--zjpcy-splitter-panel-radius)"},e)},exports.getPanelStyle=function(t,r,e,i){void 0===e&&(e=0),void 0===i&&(i=2);var a={position:"relative",overflow:"auto",flexShrink:0,alignSelf:"stretch",background:"var(--zjpcy-splitter-panel-bg)"};return"horizontal"===r?(a.width="".concat(t,"px"),a.height="auto",a.minHeight="100%"):(a.width="auto",a.minWidth="100%",a.height="".concat(t,"px")),e<i-1&&(a.boxShadow="horizontal"===r?"var(--zjpcy-splitter-panel-shadow)":"var(--zjpcy-splitter-panel-shadow-vertical)",a.zIndex=i-e),a},exports.getSplitterBarStyle=function(t,r,e,i){void 0===i&&(i=0);var a={position:"relative",flexShrink:0,background:e?"var(--zjpcy-bg-color-light)":"var(--zjpcy-splitter-bar-bg)",cursor:e?"not-allowed":"horizontal"===t?"col-resize":"row-resize",userSelect:"none",touchAction:"none",zIndex:10+5*i,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"var(--zjpcy-splitter-shadow-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return void 0!==r&&("horizontal"===t?(a.width="".concat(r,"px"),a.height="100%"):(a.width="100%",a.height="".concat(r,"px"))),e&&(a.opacity="var(--zjpcy-opacity-disabled)"),a},exports.getSplitterLineStyle=function(t,r,e,i,a){void 0===a&&(a=!1);var n={borderRadius:"var(--zjpcy-border-radius-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return"horizontal"===t?(n.width=r?"2px":"var(--zjpcy-splitter-line-width)",n.height=r?"32px":"var(--zjpcy-splitter-line-length)",n.minHeight="var(--zjpcy-splitter-line-min-length)"):(n.width=r?"32px":"var(--zjpcy-splitter-line-length)",n.minWidth="var(--zjpcy-splitter-line-min-length)",n.height=r?"2px":"var(--zjpcy-splitter-line-width)"),a&&i&&e?(n.backgroundColor=e,n.boxShadow="var(--zjpcy-splitter-shadow-active)"):i&&e?(n.backgroundColor=e,n.boxShadow="var(--zjpcy-splitter-shadow-md)"):r?n.backgroundColor=r:n.background="var(--zjpcy-splitter-line-bg)",n},exports.parseSizeConfig=function(r,e,i){var a;if(void 0===i&&(i="50%"),void 0===r){var n="".concat(100/e,"%");return new Array(e).fill(n)}if(Array.isArray(r)){for(var o=t.__spreadArray([],r,!0);o.length<e;)o.push(null!==(a=o[o.length-1])&&void 0!==a?a:i);return o.slice(0,e)}return new Array(e).fill(r)},exports.parseSizeConfigWithPercentage=function(r,e,i){var a;if(void 0===i&&(i=50),void 0===r)return new Array(e).fill(i);if(Array.isArray(r)){for(var n=t.__spreadArray([],r,!0);n.length<e;)n.push(null!==(a=n[n.length-1])&&void 0!==a?a:i);return n.slice(0,e)}return new Array(e).fill(r)},exports.parseSizeToPixels=function(t,r){return"number"==typeof t?t:"string"==typeof t&&t.endsWith("%")?r*(parseFloat(t)/100):parseFloat(t)||r/2};

package/dist/es/components/Splitter/index.js

@@ -1 +1 @@
-"use client";import{__spreadArray as e}from"tslib";import{jsx as t,jsxs as n}from"react/jsx-runtime";import r,{useRef as i,useState as o,useMemo as u,useCallback as a,useEffect as c}from"react";import{parseSizeConfig as l,parseNumberConfig as s,parseSizeToPixels as d,getContainerStyle as m,getPanelStyle as v,getSplitterBarStyle as f,getSplitterLineStyle as p}from"./styles.js";var h=function(h){var z=h.layout,g=void 0===z?"horizontal":z,y=h.panels,S=h.defaultSize,x=void 0===S?"50%":S,j=h.minSize,b=void 0===j?50:j,E=h.maxSize,L=void 0===E?1/0:E,_=h.splitterSize,w=h.lineColor,D=h.lineHoverColor,M=h.disabled,N=void 0!==M&&M,C=h.onResize,I=h.onResizeEnd,P=h.className,X=void 0===P?"":P,Y=h.style,B=h.left,O=h.right,R=h.top,A=h.bottom,q=h.children,F=i(null),H=o([]),T=H[0],V=H[1],k=o(!1),G=k[0],J=k[1],K=o(-1),Q=K[0],U=K[1],W=i({isDragging:!1,startPosition:0,startSizes:[],containerSize:0,splitterIndex:-1}),Z=u(function(){if(y&&y.length>0)return y.map(function(e){return e.content});if("vertical"===g){if(R&&A)return[R,A]}else if(B&&O)return[B,O];return q&&Array.isArray(q)?q:[]},[y,g,B,O,R,A,q]),$=Z.length,ee=a(function(e){return y&&y[e]?y[e]:{}},[y]),te=a(function(){if(!F.current)return 0;var e=F.current.getBoundingClientRect();return"horizontal"===g?e.width:e.height},[g]),ne=a(function(){if(void 0!==_)return _;var e=getComputedStyle(document.documentElement).getPropertyValue("--zjpcy-splitter-bar-size").trim();return parseInt(e,10)||10},[_]);c(function(){var e=te();if(e>0&&$>0){var t=ne()*($-1),n=Math.max(0,e-t),r=l(x,$,"".concat(100/$,"%")),i=s(b,$,50),o=s(L,$,1/0),u=y?y.map(function(e){var t;return null!==(t=e.defaultSize)&&void 0!==t?t:r[y.indexOf(e)]}):r,a=y?y.map(function(e){var t;return null!==(t=e.minSize)&&void 0!==t?t:i[y.indexOf(e)]}):i,c=y?y.map(function(e){var t;return null!==(t=e.maxSize)&&void 0!==t?t:o[y.indexOf(e)]}):o,m=u.map(function(e){return d(e,n)}),v=m.reduce(function(e,t){return e+t},0);if(v!==n&&n>0){var f=n/v;m=m.map(function(e){return e*f})}m=m.map(function(e,t){return Math.max(a[t],Math.min(c[t],e))}),V(m)}},[$]),c(function(){var e=function(){var e=te();if(e>0&&T.length>0){var t=ne()*($-1),n=Math.max(0,e-t),r=T.reduce(function(e,t){return e+t},0);if(r>0){var i=n/r;V(function(e){return e.map(function(e){return e*i})})}}};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}},[T,$,te,ne]);var re=a(function(t){return function(n){if(!N){var r=ee(t),i=ee(t+1);if(!r.disabled&&!i.disabled){n.preventDefault();var o="touches"in n?n.touches[0].clientX:n.clientX,u="touches"in n?n.touches[0].clientY:n.clientY,a="horizontal"===g?o:u,c=te();W.current={isDragging:!0,startPosition:a,startSizes:e([],T,!0),containerSize:c,splitterIndex:t},J(!0),U(t)}}}},[N,g,T,te,ee]),ie=a(function(t){if(W.current.isDragging&&!N){var n="touches"in t?t.touches[0].clientX:t.clientX,r="touches"in t?t.touches[0].clientY:t.clientY,i=("horizontal"===g?n:r)-W.current.startPosition,o=W.current.splitterIndex,u=W.current.startSizes,a=s(b,$,50),c=s(L,$,1/0),l=y?y.map(function(e,t){var n;return null!==(n=e.minSize)&&void 0!==n?n:a[t]}):a,d=y?y.map(function(e,t){var n;return null!==(n=e.maxSize)&&void 0!==n?n:c[t]}):c,m=l[o],v=d[o],f=l[o+1],p=d[o+1],h=u[o],z=u[o+1],S=h+i,x=z-i;S<m?(S=m,x=h+z-m):S>v&&(S=v,x=h+z-v),x<f?(x=f,S=h+z-f):x>p&&(x=p,S=h+z-p);var j=e([],T,!0);j[o]=S,j[o+1]=x,V(j),null==C||C(j,o)}},[N,g,T,$,b,L,y,C]),oe=a(function(){W.current.isDragging&&(W.current.isDragging=!1,J(!1),U(-1),null==I||I(T))},[T,I]);if(c(function(){if(G)return document.addEventListener("mousemove",ie),document.addEventListener("mouseup",oe),document.addEventListener("touchmove",ie,{passive:!1}),document.addEventListener("touchend",oe),function(){document.removeEventListener("mousemove",ie),document.removeEventListener("mouseup",oe),document.removeEventListener("touchmove",ie),document.removeEventListener("touchend",oe)}},[G,ie,oe]),$<2)return console.warn("Splitter requires at least 2 panels"),null;var ue=["zjpcy-splitter","zjpcy-splitter-".concat(g),G?"zjpcy-splitter-dragging":"",X].filter(Boolean).join(" ");return t("div",{ref:F,className:ue,style:m(g,Y),children:Z.map(function(e,i){var o=T[i]||0,u=i===$-1;return n(r.Fragment,{children:[t("div",{className:"zjpcy-splitter__panel",style:v(o,g,i,$),children:e}),!u&&t("div",{className:["zjpcy-splitter__bar",Q===i?"zjpcy-splitter__bar-dragging":"",N||ee(i).disabled||ee(i+1).disabled?"zjpcy-splitter__bar-disabled":""].filter(Boolean).join(" "),style:f(g,_,N,i),onMouseDown:re(i),onTouchStart:re(i),children:t("div",{className:"zjpcy-splitter__line",style:p(g,w,D,G,Q===i)})})]},i)})})},z=h;export{h as Splitter,z as default};
+"use client";import{__spreadArray as e}from"tslib";import{jsx as t,jsxs as n}from"react/jsx-runtime";import r,{useRef as i,useState as o,useMemo as u,useCallback as a,useEffect as c}from"react";import{parseSizeConfig as l,parseSizeConfigWithPercentage as s,calculateAllMinMaxPixels as d,parseSizeToPixels as m,getContainerStyle as v,getPanelStyle as f,getSplitterBarStyle as p,getSplitterLineStyle as h}from"./styles.js";var z=function(z){var g=z.layout,x=void 0===g?"horizontal":g,y=z.panels,S=z.defaultSize,j=void 0===S?"50%":S,b=z.minSize,E=void 0===b?50:b,L=z.maxSize,_=void 0===L?1/0:L,P=z.splitterSize,w=z.lineColor,D=z.lineHoverColor,M=z.disabled,N=void 0!==M&&M,C=z.onResize,I=z.onResizeEnd,X=z.className,Y=void 0===X?"":X,B=z.style,O=z.left,R=z.right,A=z.top,q=z.bottom,F=z.children,H=i(null),T=o([]),V=T[0],k=T[1],G=o(!1),J=G[0],K=G[1],Q=o(-1),U=Q[0],W=Q[1],Z=i({isDragging:!1,startPosition:0,startSizes:[],containerSize:0,splitterIndex:-1}),$=u(function(){if(y&&y.length>0)return y.map(function(e){return e.content});if("vertical"===x){if(A&&q)return[A,q]}else if(O&&R)return[O,R];return F&&Array.isArray(F)?F:[]},[y,x,O,R,A,q,F]),ee=$.length,te=a(function(e){return y&&y[e]?y[e]:{}},[y]),ne=a(function(){if(!H.current)return 0;var e=H.current.getBoundingClientRect();return"horizontal"===x?e.width:e.height},[x]),re=a(function(){if(void 0!==P)return P;var e=getComputedStyle(document.documentElement).getPropertyValue("--zjpcy-splitter-bar-size").trim();return parseInt(e,10)||10},[P]);c(function(){var e=ne();if(e>0&&ee>0){var t=re()*(ee-1),n=Math.max(0,e-t),r=l(j,ee,"".concat(100/ee,"%")),i=s(E,ee,50),o=s(_,ee,1/0),u=y?y.map(function(e){var t;return null!==(t=e.defaultSize)&&void 0!==t?t:r[y.indexOf(e)]}):r,a=y?y.map(function(e){var t;return null!==(t=e.minSize)&&void 0!==t?t:i[y.indexOf(e)]}):i,c=y?y.map(function(e){var t;return null!==(t=e.maxSize)&&void 0!==t?t:o[y.indexOf(e)]}):o,v=d(a,c,n),f=v.minPixels,p=v.maxPixels,h=u.map(function(e){return m(e,n)}),z=h.reduce(function(e,t){return e+t},0);if(z!==n&&n>0){var g=n/z;h=h.map(function(e){return e*g})}h=h.map(function(e,t){return Math.max(f[t],Math.min(p[t],e))}),k(h)}},[ee]),c(function(){var e=function(){var e=ne();if(e>0&&V.length>0){var t=re()*(ee-1),n=Math.max(0,e-t),r=V.reduce(function(e,t){return e+t},0);if(r>0){var i=n/r;k(function(e){return e.map(function(e){return e*i})})}}};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}},[V,ee,ne,re]);var ie=a(function(t){return function(n){if(!N){var r=te(t),i=te(t+1);if(!r.disabled&&!i.disabled){n.preventDefault();var o="touches"in n?n.touches[0].clientX:n.clientX,u="touches"in n?n.touches[0].clientY:n.clientY,a="horizontal"===x?o:u,c=ne();Z.current={isDragging:!0,startPosition:a,startSizes:e([],V,!0),containerSize:c,splitterIndex:t},K(!0),W(t)}}}},[N,x,V,ne,te]),oe=a(function(t){if(Z.current.isDragging&&!N){var n="touches"in t?t.touches[0].clientX:t.clientX,r="touches"in t?t.touches[0].clientY:t.clientY,i=("horizontal"===x?n:r)-Z.current.startPosition,o=Z.current.splitterIndex,u=Z.current.startSizes,a=ne(),c=re()*(ee-1),l=Math.max(0,a-c),m=s(E,ee,50),v=s(_,ee,1/0),f=y?y.map(function(e,t){var n;return null!==(n=e.minSize)&&void 0!==n?n:m[t]}):m,p=y?y.map(function(e,t){var n;return null!==(n=e.maxSize)&&void 0!==n?n:v[t]}):v,h=d(f.slice(o,o+2),p.slice(o,o+2),l),z=h.minPixels,g=h.maxPixels,S=z[0],j=g[0],b=z[1],L=g[1],P=u[o],w=u[o+1],D=P+i,M=w-i;D<S?(D=S,M=P+w-S):D>j&&(D=j,M=P+w-j),M<b?(M=b,D=P+w-b):M>L&&(M=L,D=P+w-L);var I=e([],V,!0);I[o]=D,I[o+1]=M,k(I),null==C||C(I,o)}},[N,x,V,ee,E,_,y,C,ne,re]),ue=a(function(){Z.current.isDragging&&(Z.current.isDragging=!1,K(!1),W(-1),null==I||I(V))},[V,I]);if(c(function(){if(J)return document.addEventListener("mousemove",oe),document.addEventListener("mouseup",ue),document.addEventListener("touchmove",oe,{passive:!1}),document.addEventListener("touchend",ue),function(){document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",ue),document.removeEventListener("touchmove",oe),document.removeEventListener("touchend",ue)}},[J,oe,ue]),ee<2)return console.warn("Splitter requires at least 2 panels"),null;var ae=["zjpcy-splitter","zjpcy-splitter-".concat(x),J?"zjpcy-splitter-dragging":"",Y].filter(Boolean).join(" ");return t("div",{ref:H,className:ae,style:v(x,B),children:$.map(function(e,i){var o=V[i]||0,u=i===ee-1;return n(r.Fragment,{children:[t("div",{className:"zjpcy-splitter__panel",style:f(o,x,i,ee),children:e}),!u&&t("div",{className:["zjpcy-splitter__bar",U===i?"zjpcy-splitter__bar-dragging":"",N||te(i).disabled||te(i+1).disabled?"zjpcy-splitter__bar-disabled":""].filter(Boolean).join(" "),style:p(x,P,N,i),onMouseDown:ie(i),onTouchStart:ie(i),children:t("div",{className:"zjpcy-splitter__line",style:h(x,w,D,J,U===i)})})]},i)})})},g=z;export{z as Splitter,g as default};

package/dist/es/components/Splitter/styles.js

@@ -1 +1 @@
-import{__assign as r,__spreadArray as t}from"tslib";var i=function(t,i){return r({display:"flex",flexDirection:"horizontal"===t?"row":"column",alignItems:"stretch",width:"100%",height:"100%",overflow:"hidden",background:"var(--zjpcy-splitter-panel-bg)",borderRadius:"var(--zjpcy-splitter-panel-radius)"},i)},n=function(r,t,i,n){void 0===i&&(i=0),void 0===n&&(n=2);var e={position:"relative",overflow:"auto",flexShrink:0,alignSelf:"stretch",background:"var(--zjpcy-splitter-panel-bg)"};return"horizontal"===t?(e.width="".concat(r,"px"),e.height="auto",e.minHeight="100%"):(e.width="auto",e.minWidth="100%",e.height="".concat(r,"px")),i<n-1&&(e.boxShadow="horizontal"===t?"var(--zjpcy-splitter-panel-shadow)":"var(--zjpcy-splitter-panel-shadow-vertical)",e.zIndex=n-i),e},e=function(r,t,i,n){void 0===n&&(n=0);var e={position:"relative",flexShrink:0,background:i?"var(--zjpcy-bg-color-light)":"var(--zjpcy-splitter-bar-bg)",cursor:i?"not-allowed":"horizontal"===r?"col-resize":"row-resize",userSelect:"none",touchAction:"none",zIndex:10+5*n,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"var(--zjpcy-splitter-shadow-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return void 0!==t&&("horizontal"===r?(e.width="".concat(t,"px"),e.height="100%"):(e.width="100%",e.height="".concat(t,"px"))),i&&(e.opacity="var(--zjpcy-opacity-disabled)"),e},o=function(r,t,i,n,e){void 0===e&&(e=!1);var o={borderRadius:"var(--zjpcy-border-radius-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return"horizontal"===r?(o.width=t?"2px":"var(--zjpcy-splitter-line-width)",o.height=t?"32px":"var(--zjpcy-splitter-line-length)",o.minHeight="var(--zjpcy-splitter-line-min-length)"):(o.width=t?"32px":"var(--zjpcy-splitter-line-length)",o.minWidth="var(--zjpcy-splitter-line-min-length)",o.height=t?"2px":"var(--zjpcy-splitter-line-width)"),e&&n&&i?(o.backgroundColor=i,o.boxShadow="var(--zjpcy-splitter-shadow-active)"):n&&i?(o.backgroundColor=i,o.boxShadow="var(--zjpcy-splitter-shadow-md)"):t?o.backgroundColor=t:o.background="var(--zjpcy-splitter-line-bg)",o},a=function(r,i,n){var e;if(void 0===n&&(n="50%"),void 0===r){var o="".concat(100/i,"%");return new Array(i).fill(o)}if(Array.isArray(r)){for(var a=t([],r,!0);a.length<i;)a.push(null!==(e=a[a.length-1])&&void 0!==e?e:n);return a.slice(0,i)}return new Array(i).fill(r)},l=function(r,i,n){var e;if(void 0===r)return new Array(i).fill(n);if(Array.isArray(r)){for(var o=t([],r,!0);o.length<i;)o.push(null!==(e=o[o.length-1])&&void 0!==e?e:n);return o.slice(0,i)}return new Array(i).fill(r)},c=function(r,t){return"number"==typeof r?r:"string"==typeof r&&r.endsWith("%")?t*(parseFloat(r)/100):parseFloat(r)||t/2};export{i as getContainerStyle,n as getPanelStyle,e as getSplitterBarStyle,o as getSplitterLineStyle,l as parseNumberConfig,a as parseSizeConfig,c as parseSizeToPixels};
+import{__assign as r,__spreadArray as t}from"tslib";var i=function(t,i){return r({display:"flex",flexDirection:"horizontal"===t?"row":"column",alignItems:"stretch",width:"100%",height:"100%",overflow:"hidden",background:"var(--zjpcy-splitter-panel-bg)",borderRadius:"var(--zjpcy-splitter-panel-radius)"},i)},e=function(r,t,i,e){void 0===i&&(i=0),void 0===e&&(e=2);var n={position:"relative",overflow:"auto",flexShrink:0,alignSelf:"stretch",background:"var(--zjpcy-splitter-panel-bg)"};return"horizontal"===t?(n.width="".concat(r,"px"),n.height="auto",n.minHeight="100%"):(n.width="auto",n.minWidth="100%",n.height="".concat(r,"px")),i<e-1&&(n.boxShadow="horizontal"===t?"var(--zjpcy-splitter-panel-shadow)":"var(--zjpcy-splitter-panel-shadow-vertical)",n.zIndex=e-i),n},n=function(r,t,i,e){void 0===e&&(e=0);var n={position:"relative",flexShrink:0,background:i?"var(--zjpcy-bg-color-light)":"var(--zjpcy-splitter-bar-bg)",cursor:i?"not-allowed":"horizontal"===r?"col-resize":"row-resize",userSelect:"none",touchAction:"none",zIndex:10+5*e,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"var(--zjpcy-splitter-shadow-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return void 0!==t&&("horizontal"===r?(n.width="".concat(t,"px"),n.height="100%"):(n.width="100%",n.height="".concat(t,"px"))),i&&(n.opacity="var(--zjpcy-opacity-disabled)"),n},a=function(r,t,i,e,n){void 0===n&&(n=!1);var a={borderRadius:"var(--zjpcy-border-radius-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return"horizontal"===r?(a.width=t?"2px":"var(--zjpcy-splitter-line-width)",a.height=t?"32px":"var(--zjpcy-splitter-line-length)",a.minHeight="var(--zjpcy-splitter-line-min-length)"):(a.width=t?"32px":"var(--zjpcy-splitter-line-length)",a.minWidth="var(--zjpcy-splitter-line-min-length)",a.height=t?"2px":"var(--zjpcy-splitter-line-width)"),n&&e&&i?(a.backgroundColor=i,a.boxShadow="var(--zjpcy-splitter-shadow-active)"):e&&i?(a.backgroundColor=i,a.boxShadow="var(--zjpcy-splitter-shadow-md)"):t?a.backgroundColor=t:a.background="var(--zjpcy-splitter-line-bg)",a},o=function(r,i,e){var n;if(void 0===e&&(e="50%"),void 0===r){var a="".concat(100/i,"%");return new Array(i).fill(a)}if(Array.isArray(r)){for(var o=t([],r,!0);o.length<i;)o.push(null!==(n=o[o.length-1])&&void 0!==n?n:e);return o.slice(0,i)}return new Array(i).fill(r)},l=function(r,i,e){var n;if(void 0===e&&(e=50),void 0===r)return new Array(i).fill(e);if(Array.isArray(r)){for(var a=t([],r,!0);a.length<i;)a.push(null!==(n=a[a.length-1])&&void 0!==n?n:e);return a.slice(0,i)}return new Array(i).fill(r)},p=function(r,t){return"number"==typeof r?r:"string"==typeof r&&r.endsWith("%")?t*(parseFloat(r)/100):parseFloat(r)||t/2},s=function(r,t,i){var e,n,a="string"==typeof r&&r.endsWith("%"),o="string"==typeof t&&t.endsWith("%");if(a&&o)e=i*(parseFloat(r)/100),n=i*(parseFloat(t)/100);else if(o&&!a){n=i*(parseFloat(t)/100);var l="number"==typeof r?r:parseFloat(r);e=Math.min(l,i-n)}else if(a&&!o){e=i*(parseFloat(r)/100);var p="number"==typeof t?t:parseFloat(t);n=Math.min(p,i-e)}else e="number"==typeof r?r:parseFloat(r),n="number"==typeof t?t:parseFloat(t);return e=Math.max(0,e),n=Math.max(e,n),{minPixels:e,maxPixels:n=Math.min(n,i)}},h=function(r,t,i){for(var e=r.length,n=[],a=[],o=0;o<e;o++){var l=s(r[o],t[o],i),p=l.minPixels,h=l.maxPixels;n.push(p),a.push(h)}return{minPixels:n,maxPixels:a}};export{h as calculateAllMinMaxPixels,s as calculateMinMaxPixels,i as getContainerStyle,e as getPanelStyle,n as getSplitterBarStyle,a as getSplitterLineStyle,o as parseSizeConfig,l as parseSizeConfigWithPercentage,p as parseSizeToPixels};

package/dist/types/components/Splitter/styles.d.ts

@@ -54,8 +54,45 @@ export declare const parseSizeConfig: (size: number | string | (number | string)
  */
 export declare const parseNumberConfig: (value: number | number[] | undefined, count: number, defaultValue: number) => number[];
 /**
- * 将尺寸值转换为像素
- * @param size - 尺寸值（数字或百分比字符串）
+ * 解析尺寸配置（支持数字或百分比字符串）
+ * @param value - 尺寸配置（单值或数组，支持 '30%' 或 100）
+ * @param count - 面板数量
+ * @param defaultValue - 默认值
+ */
+export declare const parseSizeConfigWithPercentage: (value: number | string | (number | string)[] | undefined, count: number, defaultValue?: number | string) => (number | string)[];
+/**
+ * 将尺寸值（数字或百分比）转换为像素
+ * @param size - 尺寸值（数字或百分比字符串如 '30%'）
  * @param availableSpace - 可用空间
+ * @returns 像素值
  */
 export declare const parseSizeToPixels: (size: number | string, availableSpace: number) => number;
+/**
+ * 计算面板的最小/最大尺寸像素值，处理百分比自动计算逻辑
+ *
+ * 规则：
+ * 1. 如果同时设置了 minSize 和 maxSize，且都是百分比，则按百分比计算
+ * 2. 如果 maxSize 是百分比，minSize 是数字，minSize 保持数字，maxSize 转为像素
+ * 3. 如果 minSize 是百分比，maxSize 是数字或 Infinity，minSize 转为像素
+ * 4. 如果只有一方设置，另一方自动计算剩余空间
+ *
+ * @param minSize - 最小尺寸配置（数字或百分比）
+ * @param maxSize - 最大尺寸配置（数字或百分比）
+ * @param availableSpace - 可用空间
+ * @returns { minPixels: number, maxPixels: number }
+ */
+export declare const calculateMinMaxPixels: (minSize: number | string, maxSize: number | string, availableSpace: number) => {
+    minPixels: number;
+    maxPixels: number;
+};
+/**
+ * 批量计算所有面板的最小/最大尺寸像素值
+ * @param minSizes - 最小尺寸配置数组
+ * @param maxSizes - 最大尺寸配置数组
+ * @param availableSpace - 可用空间
+ * @returns 像素值数组 { minPixels: number[], maxPixels: number[] }
+ */
+export declare const calculateAllMinMaxPixels: (minSizes: (number | string)[], maxSizes: (number | string)[], availableSpace: number) => {
+    minPixels: number[];
+    maxPixels: number[];
+};

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

@@ -11,10 +11,10 @@ export interface SplitterPanel {
     content: React.ReactNode;
     /** 面板默认大小（像素或百分比） */
     defaultSize?: number | string;
-    /** 面板最小尺寸 */
-    minSize?: number;
-    /** 面板最大尺寸 */
-    maxSize?: number;
+    /** 面板最小尺寸（像素或百分比，如 '20%'） */
+    minSize?: number | string;
+    /** 面板最大尺寸（像素或百分比，如 '80%'） */
+    maxSize?: number | string;
     /** 是否禁用该面板相邻的分割条拖拽 */
     disabled?: boolean;
 }
@@ -36,15 +36,15 @@ export interface SplitterProps {
      */
     defaultSize?: number | string | (number | string)[];
     /**
-     * 最小尺寸配置
+     * 最小尺寸配置（像素或百分比，如 '20%'）
      * 可以是单个值或数组
      */
-    minSize?: number | number[];
+    minSize?: number | string | (number | string)[];
     /**
-     * 最大尺寸配置
+     * 最大尺寸配置（像素或百分比，如 '80%'）
      * 可以是单个值或数组
      */
-    maxSize?: number | number[];
+    maxSize?: number | string | (number | string)[];
     /** 分割条大小（像素），默认为 10 */
     splitterSize?: number;
     /** 拖拽线颜色 */
@@ -106,10 +106,10 @@ export interface PanelSizeInfo {
     index: number;
     /** 面板当前尺寸 */
     size: number;
-    /** 面板最小尺寸 */
-    minSize: number;
-    /** 面板最大尺寸 */
-    maxSize: number;
+    /** 面板最小尺寸（像素或百分比） */
+    minSize: number | string;
+    /** 面板最大尺寸（像素或百分比） */
+    maxSize: number | string;
     /** 默认尺寸 */
     defaultSize: number | string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "zjpcy Studio Design System - React Component Library",
   "main": "dist/cjs/components/index.js",
   "module": "dist/es/components/index.js",