tgui-core 5.3.0 → 5.3.1

package/dist/components/Tabs.js

@@ -1 +1 @@
-import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{canRender as l,classes as n}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as o}from"../common/ui.js";import{useEffect as a,useRef as c,useState as s}from"react";import{Button as d}from"./Button.js";import{Icon as m}from"./Icon.js";function b(l){let{className:d,vertical:m,scrollable:b,fill:u,fluid:h,children:T,...v}=l,_=c(!0),p=c(null),[L,N]=s(!1),[w,E]=s(!1);function j(e){if(!p.current)return;let r=p.current,t=.5*r.clientWidth;r.scrollBy({left:"left"===e?-t:t,behavior:"smooth"})}a(()=>{if(!b||m||!p.current)return;let e=p.current;if(e.scrollWidth<e.clientWidth)return;function r(){N(e.scrollLeft>0),E(e.scrollLeft+e.clientWidth<e.scrollWidth)}function t(r){Math.abs(r.deltaY)>Math.abs(r.deltaX)&&(e.scrollLeft+=r.deltaY)}let l=e.querySelector(".Tab--selected");if(l)return l.scrollIntoView({behavior:_.current?"auto":"smooth",inline:"center"}),_.current=!1,e.addEventListener("wheel",t),e.addEventListener("scroll",r),window.addEventListener("resize",r),r(),()=>{e.removeEventListener("wheel",t),e.removeEventListener("scroll",r),window.removeEventListener("resize",r)}},[b,m,T]);let W=T;return b&&!m&&(W=t(e,{children:[L&&r(f,{direction:"left",makeScroll:j}),r("div",{ref:p,className:n(["Tabs--scrollable-content",L&&"scrollable-left",w&&"scrollable-right"]),children:T}),w&&r(f,{direction:"right",makeScroll:j})]})),r("div",{className:n(["Tabs",m?"Tabs--vertical":"Tabs--horizontal",u&&"Tabs--fill",h&&"Tabs--fluid",!m&&b&&"Tabs--scrollable",d,i(v)]),...o(v),children:W})}function f(e){let{direction:t,makeScroll:l}=e;return r(d,{className:`scroll-${t}`,color:"transparent",icon:`angle-${t}`,onClick:()=>l(t)})}(b||(b={})).Tab=function(e){let{className:a,selected:c,color:s,icon:d,iconSpin:b,leftSlot:f,rightSlot:u,children:h,onClick:T,...v}=e;return t("div",{className:n(["Tab","Tabs__Tab",`Tab--color--${s}`,c&&"Tab--selected",a,i(v)]),onClick:e=>T?.(e),...o(v),children:[l(f)&&r("div",{className:"Tab__left",children:f})||!!d&&r("div",{className:"Tab__left",children:r(m,{name:d,spin:b})}),r("div",{className:"Tab__text",children:h}),l(u)&&r("div",{className:"Tab__right",children:u})]})};export{b as Tabs};
+import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{canRender as l,classes as n}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as c}from"../common/ui.js";import{useEffect as a,useRef as o,useState as s}from"react";import{Button as d}from"./Button.js";import{Icon as m}from"./Icon.js";function b(l){let{className:d,vertical:m,scrollable:b,fill:f,fluid:h,children:T,...v}=l,_=o(!0),p=o(null),L=o(null),[N,w]=s(!1),[E,j]=s(!1);function W(e){if(!p.current)return;let r=p.current,t=.5*r.clientWidth;r.scrollBy({left:"left"===e?-t:t,behavior:"smooth"})}a(()=>{if(!b||m||!p.current)return;let e=p.current;if(e.scrollWidth<e.clientWidth)return;function r(){w(e.scrollLeft>0),j(e.scrollLeft+e.clientWidth<e.scrollWidth)}function t(r){Math.abs(r.deltaY)>Math.abs(r.deltaX)&&(e.scrollLeft+=r.deltaY)}let l=e.querySelector(".Tab--selected");if(l)return L.current!==l&&(L.current=l,l.scrollIntoView({behavior:_.current?"auto":"smooth",inline:"center"})),_.current=!1,e.addEventListener("wheel",t,{passive:!0}),e.addEventListener("scroll",r),window.addEventListener("resize",r),r(),()=>{e.removeEventListener("wheel",t),e.removeEventListener("scroll",r),window.removeEventListener("resize",r)}},[b,m,T]);let g=T;return b&&!m&&(g=t(e,{children:[N&&r(u,{direction:"left",makeScroll:W}),r("div",{ref:p,className:n(["Tabs--scrollable-content",N&&"scrollable-left",E&&"scrollable-right"]),children:T}),E&&r(u,{direction:"right",makeScroll:W})]})),r("div",{className:n(["Tabs",m?"Tabs--vertical":"Tabs--horizontal",f&&"Tabs--fill",h&&"Tabs--fluid",!m&&b&&"Tabs--scrollable",d,i(v)]),...c(v),children:g})}function u(e){let{direction:t,makeScroll:l}=e;return r(d,{className:`scroll-${t}`,color:"transparent",icon:`angle-${t}`,onClick:()=>l(t)})}(b||(b={})).Tab=function(e){let{className:a,selected:o,color:s,icon:d,iconSpin:b,leftSlot:u,rightSlot:f,children:h,onClick:T,...v}=e;return t("div",{className:n(["Tab","Tabs__Tab",`Tab--color--${s}`,o&&"Tab--selected",a,i(v)]),onClick:e=>T?.(e),...c(v),children:[l(u)&&r("div",{className:"Tab__left",children:u})||!!d&&r("div",{className:"Tab__left",children:r(m,{name:d,spin:b})}),r("div",{className:"Tab__text",children:h}),l(f)&&r("div",{className:"Tab__right",children:f})]})};export{b as Tabs};

package/package.json

@@ -69,5 +69,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "5.3.0"
+  "version": "5.3.1"
 }

package/styles/components/Tabs.scss

@@ -136,23 +136,26 @@
 }
 
 .Tabs--scrollable {
-  --mask-width: 3.25rem;
+  --mask-width: 3.25em;
   --mask-left: 0rem;
   --mask-right: 0rem;
 
+  display: grid;
+  padding: 0;
+
   &-content {
     overflow: auto;
     scrollbar-width: none;
     overscroll-behavior: none;
     display: flex;
     flex-wrap: nowrap;
-    width: 100%;
+    padding: var(--space-s) var(--space-s) 0;
     mask-image: linear-gradient(
       90deg,
-      transparent calc(var(--mask-left) * 0.5),
+      transparent calc(var(--mask-left) * 0.66),
       black calc(0% + var(--mask-left)),
       black calc(100% - var(--mask-right)),
-      transparent calc(100% - calc(var(--mask-right) * 0.5))
+      transparent calc(100% - calc(var(--mask-right) * 0.66))
     );
 
     &.scrollable-left.scrollable-right {
@@ -175,8 +178,8 @@
     align-content: center;
     top: 0;
     height: 100%;
-    margin: none;
-    border-radius: unset;
+    margin: 0;
+    border-radius: 0;
     z-index: 1;
   }