@zjpcy/simple-design 1.8.2 → 1.8.4

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 s=i(n),u=function(i){var u=i.layout,o=void 0===u?"horizontal":u,a=i.splitterSize,l=i.lineColor,c=i.lineHoverColor,d=i.disabled,f=void 0!==d&&d,v=i.onResize,p=i.onResizeEnd,m=i.className,h=void 0===m?"":m,g=i.style,y=i.children,z=n.useRef(null),x=n.useState([]),j=x[0],S=x[1],b=n.useState(!1),_=b[0],E=b[1],C=n.useState(-1),L=C[0],k=C[1],w=n.useRef({isDragging:!1,startPosition:0,startSizes:[],containerSize:0,splitterIndex:-1}),D=n.useMemo(function(){return y?s.default.Children.toArray(y):[]},[y]),M=D.length,N=n.useCallback(function(){if(!z.current)return 0;var e=z.current.getBoundingClientRect();return"horizontal"===o?e.width:e.height},[o]),P=n.useCallback(function(){if(void 0!==a)return a;var e=getComputedStyle(document.documentElement).getPropertyValue("--zjpcy-splitter-bar-size").trim();return parseInt(e,10)||10},[a]),R=n.useCallback(function(){return D.map(function(e){return r.parseWidthFromChild(e,o)})},[D,o]),q=n.useCallback(function(e){var t=P()*(M-1),n=Math.max(0,e-t),r=R(),i=new Array(M).fill(0),s=[],u=0;if(r.forEach(function(e,t){if(null!==e){var r=function(e,t){if("number"==typeof e)return e;if("string"==typeof e&&e.endsWith("%")){return t*(parseFloat(e)/100)}var n=parseFloat(e);if(!isNaN(n))return e.includes("px")?n:e.includes("rem")||e.includes("em")?16*n:n;return t/2}(e,n);i[t]=r,u+=r}else s.push(t)}),s.length>0){var o=Math.max(0,n-u)/s.length;s.forEach(function(e){i[e]=o})}return i},[M,P,R]);n.useEffect(function(){var e=N();if(e>0&&M>=2){var t=q(e);S(t)}},[M]),n.useEffect(function(){var e=function(){var e=N();if(e>0&&j.length>0){var t=P()*(M-1),n=Math.max(0,e-t),r=j.reduce(function(e,t){return e+t},0);if(r>0){var i=n/r;S(function(e){return e.map(function(e){return e*i})})}}};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}},[j,M,N,P]);var I=n.useCallback(function(t){return function(n){if(!f){n.preventDefault();var r="touches"in n?n.touches[0].clientX:n.clientX,i="touches"in n?n.touches[0].clientY:n.clientY,s="horizontal"===o?r:i,u=N();w.current={isDragging:!0,startPosition:s,startSizes:e.__spreadArray([],j,!0),containerSize:u,splitterIndex:t},E(!0),k(t)}}},[f,o,j,N]),A=n.useCallback(function(t){if(w.current.isDragging&&!f){var n="touches"in t?t.touches[0].clientX:t.clientX,r="touches"in t?t.touches[0].clientY:t.clientY,i=("horizontal"===o?n:r)-w.current.startPosition,s=w.current.splitterIndex,u=w.current.startSizes,a=u[s],l=u[s+1],c=a+i,d=l-i,p=10;c<p&&(c=p,d=a+l-p),d<p&&(d=p,c=a+l-p);var m=e.__spreadArray([],j,!0);m[s]=c,m[s+1]=d,S(m),null==v||v(m,s)}},[f,o,j,v]),B=n.useCallback(function(){w.current.isDragging&&(w.current.isDragging=!1,E(!1),k(-1),null==p||p(j))},[j,p]);if(n.useEffect(function(){if(_)return document.addEventListener("mousemove",A),document.addEventListener("mouseup",B),document.addEventListener("touchmove",A,{passive:!1}),document.addEventListener("touchend",B),function(){document.removeEventListener("mousemove",A),document.removeEventListener("mouseup",B),document.removeEventListener("touchmove",A),document.removeEventListener("touchend",B)}},[_,A,B]),M<2)return console.warn("Splitter requires at least 2 panels"),null;var F=["zjpcy-splitter","zjpcy-splitter-".concat(o),_?"zjpcy-splitter-dragging":"",h].filter(Boolean).join(" ");return t.jsx("div",{ref:z,className:F,style:r.getContainerStyle(o,g),children:D.map(function(e,n){var i=j[n]||0,u=n===M-1;return t.jsxs(s.default.Fragment,{children:[t.jsx("div",{className:"zjpcy-splitter__panel",style:r.getPanelStyle(i,o,n,M),children:e}),!u&&t.jsx("div",{className:["zjpcy-splitter__bar",L===n?"zjpcy-splitter__bar-dragging":"",f?"zjpcy-splitter__bar-disabled":""].filter(Boolean).join(" "),style:r.getSplitterBarStyle(o,a,f,n),onMouseDown:I(n),onTouchStart:I(n),children:t.jsx("div",{className:"zjpcy-splitter__line",style:r.getSplitterLineStyle(o,l,c,_,L===n)})})]},n)})})};u.PanelContent=function(e){var n=e.title,r=e.color,i=e.children;return t.jsxs("div",{style:{height:"100%",padding:16,background:r||"#f0f2f5",borderRadius:4,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",boxSizing:"border-box"},children:[t.jsx("h4",{style:{margin:"0 0 8px 0",fontSize:14},children:n}),i&&t.jsx("div",{style:{fontSize:12,opacity:.8},children:i})]})};var o=u;exports.Splitter=u,exports.default=o;

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");function i(t){return t&&t.__esModule?t:{default:t}}var r=i(require("react"));exports.getContainerStyle=function(i,r){return t.__assign({display:"flex",flexDirection:"horizontal"===i?"row":"column",alignItems:"stretch",width:"100%",height:"100%",overflow:"hidden",background:"var(--zjpcy-splitter-panel-bg)",borderRadius:"var(--zjpcy-splitter-panel-radius)"},r)},exports.getPanelStyle=function(t,i,r,e){void 0===r&&(r=0),void 0===e&&(e=2);var n={position:"relative",overflow:"auto",flexShrink:0,alignSelf:"stretch",background:"var(--zjpcy-splitter-panel-bg)"};return"horizontal"===i?(n.width="".concat(t,"px"),n.height="auto",n.minHeight="100%"):(n.width="auto",n.minWidth="100%",n.height="".concat(t,"px")),r<e-1&&(n.boxShadow="horizontal"===i?"var(--zjpcy-splitter-panel-shadow)":"var(--zjpcy-splitter-panel-shadow-vertical)",n.zIndex=e-r),n},exports.getSplitterBarStyle=function(t,i,r,e){void 0===e&&(e=0);var n={position:"relative",flexShrink:0,background:r?"var(--zjpcy-bg-color-light)":"var(--zjpcy-splitter-bar-bg)",cursor:r?"not-allowed":"horizontal"===t?"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!==i&&("horizontal"===t?(n.width="".concat(i,"px"),n.height="100%"):(n.width="100%",n.height="".concat(i,"px"))),r&&(n.opacity="var(--zjpcy-opacity-disabled)"),n},exports.getSplitterLineStyle=function(t,i,r,e,n){void 0===n&&(n=!1);var o={borderRadius:"var(--zjpcy-border-radius-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return"horizontal"===t?(o.width=i?"2px":"var(--zjpcy-splitter-line-width)",o.height=i?"32px":"var(--zjpcy-splitter-line-length)",o.minHeight="var(--zjpcy-splitter-line-min-length)"):(o.width=i?"32px":"var(--zjpcy-splitter-line-length)",o.minWidth="var(--zjpcy-splitter-line-min-length)",o.height=i?"2px":"var(--zjpcy-splitter-line-width)"),n&&e&&r?(o.backgroundColor=r,o.boxShadow="var(--zjpcy-splitter-shadow-active)"):e&&r?(o.backgroundColor=r,o.boxShadow="var(--zjpcy-splitter-shadow-md)"):i?o.backgroundColor=i:o.background="var(--zjpcy-splitter-line-bg)",o},exports.parseWidthFromChild=function(t,i){if(!r.default.isValidElement(t))return null;var e=t.props,n=null==e?void 0:e.style;if(!n)return null;var o=n["horizontal"===i?"width":"height"];return null==o||"auto"===o?null:o};

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 c,useEffect as a}from"react";import{parseWidthFromChild as s,getContainerStyle as l,getPanelStyle as d,getSplitterBarStyle as f,getSplitterLineStyle as v}from"./styles.js";var m=function(m){var p=m.layout,h=void 0===p?"horizontal":p,g=m.splitterSize,y=m.lineColor,z=m.lineHoverColor,j=m.disabled,x=void 0!==j&&j,E=m.onResize,b=m.onResizeEnd,S=m.className,L=void 0===S?"":S,_=m.style,w=m.children,D=i(null),C=o([]),N=C[0],I=C[1],P=o(!1),M=P[0],R=P[1],X=o(-1),Y=X[0],B=X[1],F=i({isDragging:!1,startPosition:0,startSizes:[],containerSize:0,splitterIndex:-1}),A=u(function(){return w?r.Children.toArray(w):[]},[w]),k=A.length,q=c(function(){if(!D.current)return 0;var e=D.current.getBoundingClientRect();return"horizontal"===h?e.width:e.height},[h]),H=c(function(){if(void 0!==g)return g;var e=getComputedStyle(document.documentElement).getPropertyValue("--zjpcy-splitter-bar-size").trim();return parseInt(e,10)||10},[g]),T=c(function(){return A.map(function(e){return s(e,h)})},[A,h]),V=c(function(e){var t=H()*(k-1),n=Math.max(0,e-t),r=T(),i=new Array(k).fill(0),o=[],u=0;if(r.forEach(function(e,t){if(null!==e){var r=function(e,t){if("number"==typeof e)return e;if("string"==typeof e&&e.endsWith("%")){return t*(parseFloat(e)/100)}var n=parseFloat(e);if(!isNaN(n))return e.includes("px")?n:e.includes("rem")||e.includes("em")?16*n:n;return t/2}(e,n);i[t]=r,u+=r}else o.push(t)}),o.length>0){var c=Math.max(0,n-u)/o.length;o.forEach(function(e){i[e]=c})}return i},[k,H,T]);a(function(){var e=q();if(e>0&&k>=2){var t=V(e);I(t)}},[k]),a(function(){var e=function(){var e=q();if(e>0&&N.length>0){var t=H()*(k-1),n=Math.max(0,e-t),r=N.reduce(function(e,t){return e+t},0);if(r>0){var i=n/r;I(function(e){return e.map(function(e){return e*i})})}}};return window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}},[N,k,q,H]);var W=c(function(t){return function(n){if(!x){n.preventDefault();var r="touches"in n?n.touches[0].clientX:n.clientX,i="touches"in n?n.touches[0].clientY:n.clientY,o="horizontal"===h?r:i,u=q();F.current={isDragging:!0,startPosition:o,startSizes:e([],N,!0),containerSize:u,splitterIndex:t},R(!0),B(t)}}},[x,h,N,q]),G=c(function(t){if(F.current.isDragging&&!x){var n="touches"in t?t.touches[0].clientX:t.clientX,r="touches"in t?t.touches[0].clientY:t.clientY,i=("horizontal"===h?n:r)-F.current.startPosition,o=F.current.splitterIndex,u=F.current.startSizes,c=u[o],a=u[o+1],s=c+i,l=a-i,d=10;s<d&&(s=d,l=c+a-d),l<d&&(l=d,s=c+a-d);var f=e([],N,!0);f[o]=s,f[o+1]=l,I(f),null==E||E(f,o)}},[x,h,N,E]),J=c(function(){F.current.isDragging&&(F.current.isDragging=!1,R(!1),B(-1),null==b||b(N))},[N,b]);if(a(function(){if(M)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)}},[M,G,J]),k<2)return console.warn("Splitter requires at least 2 panels"),null;var K=["zjpcy-splitter","zjpcy-splitter-".concat(h),M?"zjpcy-splitter-dragging":"",L].filter(Boolean).join(" ");return t("div",{ref:D,className:K,style:l(h,_),children:A.map(function(e,i){var o=N[i]||0,u=i===k-1;return n(r.Fragment,{children:[t("div",{className:"zjpcy-splitter__panel",style:d(o,h,i,k),children:e}),!u&&t("div",{className:["zjpcy-splitter__bar",Y===i?"zjpcy-splitter__bar-dragging":"",x?"zjpcy-splitter__bar-disabled":""].filter(Boolean).join(" "),style:f(h,g,x,i),onMouseDown:W(i),onTouchStart:W(i),children:t("div",{className:"zjpcy-splitter__line",style:v(h,y,z,M,Y===i)})})]},i)})})};m.PanelContent=function(e){var r=e.title,i=e.color,o=e.children;return n("div",{style:{height:"100%",padding:16,background:i||"#f0f2f5",borderRadius:4,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",boxSizing:"border-box"},children:[t("h4",{style:{margin:"0 0 8px 0",fontSize:14},children:r}),o&&t("div",{style:{fontSize:12,opacity:.8},children:o})]})};var p=m;export{m as Splitter,p 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 t}from"tslib";import i from"react";var r=function(i,r){return t({display:"flex",flexDirection:"horizontal"===i?"row":"column",alignItems:"stretch",width:"100%",height:"100%",overflow:"hidden",background:"var(--zjpcy-splitter-panel-bg)",borderRadius:"var(--zjpcy-splitter-panel-radius)"},r)},n=function(t,i,r,n){void 0===r&&(r=0),void 0===n&&(n=2);var o={position:"relative",overflow:"auto",flexShrink:0,alignSelf:"stretch",background:"var(--zjpcy-splitter-panel-bg)"};return"horizontal"===i?(o.width="".concat(t,"px"),o.height="auto",o.minHeight="100%"):(o.width="auto",o.minWidth="100%",o.height="".concat(t,"px")),r<n-1&&(o.boxShadow="horizontal"===i?"var(--zjpcy-splitter-panel-shadow)":"var(--zjpcy-splitter-panel-shadow-vertical)",o.zIndex=n-r),o},o=function(t,i,r,n){void 0===n&&(n=0);var o={position:"relative",flexShrink:0,background:r?"var(--zjpcy-bg-color-light)":"var(--zjpcy-splitter-bar-bg)",cursor:r?"not-allowed":"horizontal"===t?"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!==i&&("horizontal"===t?(o.width="".concat(i,"px"),o.height="100%"):(o.width="100%",o.height="".concat(i,"px"))),r&&(o.opacity="var(--zjpcy-opacity-disabled)"),o},a=function(t,i,r,n,o){void 0===o&&(o=!1);var a={borderRadius:"var(--zjpcy-border-radius-sm)",transition:"all var(--zjpcy-transition-duration) var(--zjpcy-transition-timing-function)"};return"horizontal"===t?(a.width=i?"2px":"var(--zjpcy-splitter-line-width)",a.height=i?"32px":"var(--zjpcy-splitter-line-length)",a.minHeight="var(--zjpcy-splitter-line-min-length)"):(a.width=i?"32px":"var(--zjpcy-splitter-line-length)",a.minWidth="var(--zjpcy-splitter-line-min-length)",a.height=i?"2px":"var(--zjpcy-splitter-line-width)"),o&&n&&r?(a.backgroundColor=r,a.boxShadow="var(--zjpcy-splitter-shadow-active)"):n&&r?(a.backgroundColor=r,a.boxShadow="var(--zjpcy-splitter-shadow-md)"):i?a.backgroundColor=i:a.background="var(--zjpcy-splitter-line-bg)",a},e=function(t,r){if(!i.isValidElement(t))return null;var n=t.props,o=null==n?void 0:n.style;if(!o)return null;var a=o["horizontal"===r?"width":"height"];return null==a||"auto"===a?null:a};export{r as getContainerStyle,n as getPanelStyle,o as getSplitterBarStyle,a as getSplitterLineStyle,e as parseWidthFromChild};

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

@@ -1,9 +1,12 @@
 import React from 'react';
 import './Splitter.css';
-import { SplitterProps } from './types';
+import { SplitterProps, PanelContentProps } from './types';
 /**
- * Splitter 主组件 - 自由切分指定区域为多部分
- * 支持水平和垂直分隔，可拖拽调整各区域大小，支持多面板
+ * Splitter 主组件 - 简洁版
+ * 仅通过 children 内联样式控制面板宽度
+ * 未设置宽度的面板自动均分剩余空间
  */
-export declare const Splitter: React.FC<SplitterProps>;
+export declare const Splitter: React.FC<SplitterProps> & {
+    PanelContent: React.FC<PanelContentProps>;
+};
 export default Splitter;

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

@@ -1,6 +1,5 @@
 /**
- * Splitter 组件样式工具函数
- * 使用 CSS 变量与现代化设计系统保持一致
+ * Splitter 组件样式工具函数 - 简洁版
  */
 import { CSSProperties } from 'react';
 /**
@@ -17,45 +16,17 @@ export declare const getContainerStyle: (layout: "horizontal" | "vertical", cust
 export declare const getPanelStyle: (size: number, layout: "horizontal" | "vertical", index?: number, totalPanels?: number) => CSSProperties;
 /**
  * 获取分割条样式
- * 使用 CSS 变量实现现代化渐变和阴影效果
- * @param layout - 布局方向
- * @param splitterSize - 分割条大小
- * @param disabled - 是否禁用
- * @param index - 分割条索引
  */
 export declare const getSplitterBarStyle: (layout: "horizontal" | "vertical", splitterSize: number | undefined, disabled: boolean, index?: number) => CSSProperties;
 /**
  * 获取分割线样式
- * 支持自定义颜色和拖拽状态
- * @param layout - 布局方向
- * @param lineColor - 线条颜色
- * @param lineHoverColor - 悬停颜色
- * @param isDragging - 是否正在拖拽
- * @param isActive - 是否激活状态（当前拖拽的分割条）
  */
 export declare const getSplitterLineStyle: (layout: "horizontal" | "vertical", lineColor: string | undefined, lineHoverColor: string | undefined, isDragging: boolean, isActive?: boolean) => CSSProperties;
+import React from 'react';
 /**
- * 获取拖拽遮罩层样式
- * 用于拖拽时覆盖整个页面防止事件穿透
- */
-export declare const getDragOverlayStyle: () => CSSProperties;
-/**
- * 解析尺寸配置为数组
- * @param size - 尺寸配置（单值或数组）
- * @param count - 面板数量
- * @param defaultValue - 默认值
- */
-export declare const parseSizeConfig: (size: number | string | (number | string)[] | undefined, count: number, defaultValue?: number | string) => (number | string)[];
-/**
- * 解析数字配置为数组
- * @param value - 数值配置（单值或数组）
- * @param count - 面板数量
- * @param defaultValue - 默认值
- */
-export declare const parseNumberConfig: (value: number | number[] | undefined, count: number, defaultValue: number) => number[];
-/**
- * 将尺寸值转换为像素
- * @param size - 尺寸值（数字或百分比字符串）
- * @param availableSpace - 可用空间
+ * 从子元素解析宽度/高度配置
+ * @param child - React 子元素
+ * @param layout - 布局方向
+ * @returns 宽度值（数字/百分比字符串）或 null（未设置）
  */
-export declare const parseSizeToPixels: (size: number | string, availableSpace: number) => number;
+export declare const parseWidthFromChild: (child: React.ReactNode, layout: "horizontal" | "vertical") => number | string | null;

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

@@ -1,57 +1,21 @@
 /**
  * Splitter 组件类型定义
- * 用于自由切分指定区域，支持水平和垂直分隔，支持多面板
+ * 简洁版 - 仅通过 children 内联样式控制面板宽度
  */
 import React from 'react';
-/**
- * 单个面板配置
- */
-export interface SplitterPanel {
-    /** 面板内容 */
-    content: React.ReactNode;
-    /** 面板默认大小（像素或百分比） */
-    defaultSize?: number | string;
-    /** 面板最小尺寸 */
-    minSize?: number;
-    /** 面板最大尺寸 */
-    maxSize?: number;
-    /** 是否禁用该面板相邻的分割条拖拽 */
-    disabled?: boolean;
-}
 /**
  * Splitter 组件 Props
  */
 export interface SplitterProps {
     /** 布局方向 */
     layout?: 'horizontal' | 'vertical';
-    /**
-     * 面板数组，支持多面板配置
-     * 当提供 panels 时，优先使用 panels，忽略 left/right/top/bottom/children
-     */
-    panels?: SplitterPanel[];
-    /**
-     * 默认大小配置（像素或百分比）
-     * 可以是单个值（用于2面板模式）或数组（用于多面板模式）
-     * 默认为 '50%' 或 ['33%', '33%', '33%']
-     */
-    defaultSize?: number | string | (number | string)[];
-    /**
-     * 最小尺寸配置
-     * 可以是单个值或数组
-     */
-    minSize?: number | number[];
-    /**
-     * 最大尺寸配置
-     * 可以是单个值或数组
-     */
-    maxSize?: number | number[];
     /** 分割条大小（像素），默认为 10 */
     splitterSize?: number;
     /** 拖拽线颜色 */
     lineColor?: string;
     /** 拖拽线悬停/拖拽时的颜色 */
     lineHoverColor?: string;
-    /** 是否禁用所有拖拽 */
+    /** 是否禁用拖拽 */
     disabled?: boolean;
     /**
      * 拖拽时的回调
@@ -68,18 +32,10 @@ export interface SplitterProps {
     className?: string;
     /** 自定义样式 */
     style?: React.CSSProperties;
-    /** @deprecated 请使用 panels 或 children */
-    left?: React.ReactNode;
-    /** @deprecated 请使用 panels 或 children */
-    right?: React.ReactNode;
-    /** @deprecated 请使用 panels 或 children */
-    top?: React.ReactNode;
-    /** @deprecated 请使用 panels 或 children */
-    bottom?: React.ReactNode;
     /**
      * 子元素数组
-     * 用于2面板模式时传入 [面板1, 面板2]
-     * 用于多面板模式时传入任意数量的面板
+     * 通过内联样式 width/height 设置面板初始大小
+     * 未设置宽度的面板将自动均分剩余空间
      */
     children?: React.ReactNode[];
 }
@@ -98,6 +54,17 @@ export interface DragState {
     /** 正在拖拽的分割条索引 */
     splitterIndex: number;
 }
+/**
+ * PanelContent 面板内容组件 Props
+ */
+export interface PanelContentProps {
+    /** 面板标题 */
+    title: string;
+    /** 背景颜色 */
+    color?: string;
+    /** 子内容 */
+    children?: React.ReactNode;
+}
 /**
  * 面板尺寸信息
  */
@@ -106,10 +73,6 @@ export interface PanelSizeInfo {
     index: number;
     /** 面板当前尺寸 */
     size: number;
-    /** 面板最小尺寸 */
-    minSize: number;
-    /** 面板最大尺寸 */
-    maxSize: number;
     /** 默认尺寸 */
     defaultSize: number | string;
 }

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

@@ -100,6 +100,6 @@ export { default as Upload } from './Upload';
 export { useChunkUpload } from './Upload/useChunkUpload';
 export type { UploadProps, UploadFile, UploadRequestOptions, ShowUploadListType, UploadListProps, UploadDragProps, ChunkOptions, ChunkFieldNames, MergeFieldNames, ChunkInfo, ChunkUploadState, ChunkUploadRequestOptions, MergeChunksRequestOptions, UseChunkUploadReturn } from './Upload/types';
 export { default as Splitter } from './Splitter';
-export type { SplitterProps, SplitterPanel, DragState, PanelSizeInfo } from './Splitter/types';
+export type { SplitterProps, DragState, PanelSizeInfo, PanelContentProps } from './Splitter/types';
 export { default as Calendar } from './Calendar';
 export type { CalendarProps, CalendarHeaderProps, CalendarDateCellProps, CalendarMonthCellProps, CalendarBodyProps, CalendarYearPanelProps, DateInfoData, DateInfoItem, DatePanelFormConfig, DatePanelField } from './Calendar/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "zjpcy Studio Design System - React Component Library",
   "main": "dist/cjs/components/index.js",
   "module": "dist/es/components/index.js",
@@ -53,6 +53,8 @@
   },
   "devDependencies": {
     "@ant-design/icons-svg": "^4.4.2",
+    "@babel/standalone": "^7.29.2",
+    "@monaco-editor/react": "^4.7.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -94,19 +96,19 @@
     "webpack-dev-server": "^4.13.0"
   },
   "dependencies": {
-    "dnd-kit": "^0.0.2",
-    "i18next": "^25.7.4",
-    "react-i18next": "^16.5.3",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.3.0",
+    "dnd-kit": "^0.0.2",
+    "i18next": "^25.7.4",
     "lunar-typescript": "^1.8.6",
     "prismjs": "^1.30.0",
+    "react-i18next": "^16.5.3",
     "react-syntax-highlighter": "^16.1.0"
   },
   "repository": {
     "type": "git",
     "url": "git@github.com:chongyin10/simple-design.git"
   }
-}
+}