tgui-core 3.0.5 → 3.1.1
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Placement } from '@floating-ui/react';
|
|
2
|
-
import { type ReactNode } from 'react';
|
|
2
|
+
import { type ReactNode, type RefObject } from 'react';
|
|
3
3
|
import { type BooleanLike } from '../common/react';
|
|
4
4
|
import { type BoxProps } from './Box';
|
|
5
5
|
/**
|
|
@@ -68,11 +68,18 @@ type ConfirmProps = Partial<{
|
|
|
68
68
|
}> & Props;
|
|
69
69
|
declare function ButtonConfirm(props: ConfirmProps): import("react/jsx-runtime").JSX.Element;
|
|
70
70
|
type InputProps = Partial<{
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
/** Text to display on the button exclusively. If left blank, displays the value */
|
|
72
|
+
buttonText: string;
|
|
73
|
+
/** Use the value prop. This is done to be uniform with other inputs. */
|
|
74
|
+
children: never;
|
|
75
|
+
/** Max length of the input */
|
|
73
76
|
maxLength: number;
|
|
74
|
-
|
|
75
|
-
|
|
77
|
+
/** Action on enter key press */
|
|
78
|
+
onEnter: (value: string) => void;
|
|
79
|
+
/** Reference to the inner input */
|
|
80
|
+
ref: RefObject<HTMLInputElement | null>;
|
|
81
|
+
/** The value of the input */
|
|
82
|
+
value: string;
|
|
76
83
|
}> & Props;
|
|
77
84
|
declare function ButtonInput(props: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
78
85
|
type FileProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var t;import*as e from"react/jsx-runtime";import*as n from"react";import*as o from"../common/keys.js";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as
|
|
1
|
+
var t;import*as e from"react/jsx-runtime";import*as n from"react";import*as o from"../common/keys.js";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as u from"./Box.js";import*as i from"./Icon.js";import*as l from"./Tooltip.js";function c(t){let{captureKeys:n=!0,children:u,circular:c,className:a,color:f,compact:m,content:p,disabled:d,ellipsis:B,fluid:x,icon:j,iconColor:h,iconPosition:y,iconRotation:g,iconSize:k,iconSpin:v,onClick:C,selected:b,tooltip:E,tooltipPosition:N,verticalAlignContent:T,..._}=t,w=p||u,D=(0,e.jsx)(i.Icon,{className:"Button--icon",name:j||"",color:h,rotation:g,size:k,spin:v}),I=(0,e.jsx)("div",{className:(0,r.classes)(["Button",x&&"Button--fluid",d&&"Button--disabled",b&&"Button--selected",c&&"Button--circular",m&&"Button--compact",!w&&"Button--empty",y&&`Button--icon-${y}`,T&&"Button--flex",T&&x&&"Button--flex--fluid",T&&`Button--verticalAlignContent--${T}`,f&&"string"==typeof f?`Button--color--${f}`:"Button--color--default",a,(0,s.computeBoxClassName)(_)]),tabIndex:d?void 0:0,onClick:t=>{!d&&C&&C(t)},onKeyDown:t=>{if(n){if(t.key===o.KEY.Space||t.key===o.KEY.Enter){t.preventDefault(),!d&&C&&C(t);return}(0,o.isEscape)(t.key)&&t.preventDefault()}},...(0,s.computeBoxProps)(_),children:(0,e.jsxs)("div",{className:(0,r.classes)(["Button__content",B&&"Button__content--ellipsis"]),children:[j&&"right"!==y&&D,B?(0,e.jsx)("span",{className:"Button--ellipsis",children:w}):w,j&&"right"===y&&D]})});return E&&(I=(0,e.jsx)(l.Tooltip,{content:E,position:N,children:I})),I}(t=c||(c={})).Checkbox=function(t){let{checked:n,...o}=t;return(0,e.jsx)(c,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:o,color:r,confirmColor:s="bad",confirmContent:u="Confirm?",confirmIcon:i,ellipsis:l=!0,icon:a,onBlur:f,onClick:m,...p}=t,[d,B]=(0,n.useState)(!1);return(0,e.jsx)(c,{icon:d?i:a,color:d?s:r,onBlur:function(t){B(!1),f?.(t)},onClick:function(t){if(!d)return void B(!0);m?.(t),B(!1)},...p,children:d?u:o})},t.Input=function(t){let{buttonText:s,children:l,color:c="default",disabled:a,fluid:f,icon:m,iconRotation:p,iconSpin:d,maxLength:B,onEnter:x,ref:j,value:h,...y}=t,[g,k]=(0,n.useState)(h),[v,C]=(0,n.useState)(!1),b=(0,n.createRef)(),E=j??b;return(0,n.useEffect)(()=>{v&&(E.current?.focus(),E.current?.select())},[v]),(0,n.useEffect)(()=>{v||h===g||k(h)},[v,h]),(0,e.jsxs)(u.Box,{className:(0,r.classes)(["Button",f&&"Button--fluid",a&&"Button--disabled",`Button--color--${c}`]),onClick:()=>C(!0),...y,children:[m&&(0,e.jsx)(i.Icon,{name:m,rotation:p,spin:d}),s??g,(0,e.jsx)("input",{className:"NumberInput__input",disabled:!!a,maxLength:B,onBlur:function(){C(!1)},onChange:function(t){k(t.currentTarget.value)},onKeyDown:function(t){if(t.key===o.KEY.Enter){t.preventDefault(),x?.(t.currentTarget.value),t.currentTarget.blur();return}if((0,o.isEscape)(t.key)){t.preventDefault(),t.currentTarget.blur();return}},ref:E,spellCheck:"false",style:{display:v?"":"none",textAlign:"left"},type:"text",value:g})]})},t.File=function(t){let{accept:o,multiple:r,onSelectFiles:s,...u}=t,i=(0,n.useRef)(null);async function l(t){let e=Array.from(t).map(t=>{let e=new FileReader;return new Promise(n=>{e.onload=()=>n(e.result),e.readAsText(t)})});return await Promise.all(e)}async function a(t){let e=t.target.files;if(e?.length){let t=await l(e);s(r?t:t[0])}}return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(c,{onClick:()=>i.current?.click(),...u}),(0,e.jsx)("input",{hidden:!0,type:"file",ref:i,accept:o,multiple:r,onChange:a})]})};export{c as Button};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";import*as
|
|
1
|
+
import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";import*as n from"react";import*as a from"../common/react.js";function s(s){let o,{allowedOutsideClasses:i,animationDuration:r,children:l,closeAfterInteract:c,content:m,contentAutoWidth:d,contentClasses:p,contentOffset:f=6,contentStyles:u,disabled:g,hoverDelay:h,hoverOpen:x,onMounted:F,placement:j,stopChildPropagation:C,onOpenChange:v}=s,[w,E]=(0,n.useState)(!1),{refs:S,floatingStyles:b,context:k}=(0,t.useFloating)({open:w,onOpenChange(e){E(e),v?.(e)},whileElementsMounted:(e,n,a)=>(void 0!==F&&F(),(0,t.autoUpdate)(e,n,a,{elementResize:!1,ancestorResize:!1,ancestorScroll:!1})),placement:j||"bottom",transform:!1,middleware:[(0,t.offset)(f),(0,t.flip)({padding:6}),d&&(0,t.size)({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]}),{isMounted:y,status:z}=(0,t.useTransitionStatus)(k,{duration:r||200}),P=(0,t.useDismiss)(k,{ancestorScroll:!0,outsidePress:e=>!i||e.target instanceof Element&&!e.target.closest(i)}),R=(0,t.useClick)(k,{enabled:!g}),M=(0,t.useHover)(k,{enabled:!g,restMs:h||200}),{getReferenceProps:O,getFloatingProps:D}=(0,t.useInteractions)([P,x?M:R]),H=O({ref:S.setReference,...C&&{onClick:e=>e.stopPropagation()}}),I=D({onClick:()=>{c&&k.onOpenChange(!1)}});return o=(0,n.isValidElement)(l)?(0,n.cloneElement)(l,H):(0,e.jsx)("div",{...H,children:l}),(0,e.jsxs)(e.Fragment,{children:[o,y&&!!m&&(0,e.jsx)(t.FloatingPortal,{children:(0,e.jsx)("div",{ref:S.setFloating,className:(0,a.classes)(["Floating",!r&&"Floating--animated",p]),"data-position":k.placement,"data-transition":z,style:{...b,...u},...I,children:m})})]})}export{s as Floating};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/ui.js";import*as n from"./Button.js";import*as i from"./ProgressBar.js";import*as s from"./Stack.js";function r(n){let{backgroundImage:i,children:s,imageWidth:r,initialLeft:u=0,initialTop:c=0,onBackgroundMoved:l,onZoomChange:d,...m}=n,[p,f]=(0,t.useState)(0),[x,h]=(0,t.useState)(0),[j,g]=(0,t.useState)(0),[v
|
|
1
|
+
import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/ui.js";import*as n from"./Button.js";import*as i from"./ProgressBar.js";import*as s from"./Stack.js";function r(n){let{backgroundImage:i,children:s,imageWidth:r,initialLeft:u=0,initialTop:c=0,onBackgroundMoved:l,onZoomChange:d,...m}=n,[p,f]=(0,t.useState)(0),[x,h]=(0,t.useState)(0),[j,g]=(0,t.useState)(0),[k,v]=(0,t.useState)(!1),[S,w]=(0,t.useState)(0),[b,M]=(0,t.useState)(1);function $(e){f(e.clientX-j),h(e.clientY-S),v(!0)}function B(e){if(!k)return;let t=e.clientX-p,o=e.clientY-x;l?.(t+u,o+c),g(t),w(o)}function y(){v(!1)}(0,t.useEffect)(()=>(window.addEventListener("mouseup",y),()=>{window.removeEventListener("mouseup",y)}),[]);let I=u+j,P=c+S;return(0,e.jsxs)("div",{...(0,o.computeBoxProps)({...m,style:{...m.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[(0,e.jsx)("div",{onMouseDown:$,onMouseMove:B,style:{backgroundImage:`url("${i}")`,backgroundPosition:`${I}px ${P}px`,backgroundRepeat:"repeat",backgroundSize:`${b*r}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),(0,e.jsx)("div",{onMouseDown:$,onMouseMove:B,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${I}px, ${P}px) scale(${b})`,transformOrigin:"top left",width:"100%"},children:s}),(0,e.jsx)(a,{zoom:b,onZoomClick:function(e){if("increase"===e&&b>=1.5||"decrease"===e&&b<=.5)return;let t=Math.round((b+("increase"===e?.1:-.1))*10)/10;M(t),d?.(t)}})]})}function a(t){let{zoom:o,onZoomClick:r}=t;return(0,e.jsx)("div",{style:{position:"absolute",top:5,left:5,right:5},children:(0,e.jsxs)(s.Stack,{children:[(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{icon:"minus",disabled:o<=.5,onClick:()=>r("decrease")})}),(0,e.jsx)(s.Stack.Item,{grow:!0,children:(0,e.jsxs)(i.ProgressBar,{minValue:.5,value:o,maxValue:1.5,children:[o,"x"]})}),(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{icon:"plus",disabled:o>=1.5,onClick:()=>r("increase")})})]})})}export{r as InfinitePlane};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as r from"../common/timer.js";import*as u from"../common/ui.js";import*as n from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:m,autoSelect:a,className:i,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onChange:E,onEnter:b,onEscape:I,onValidationChange:j,value:x,...k}=r,C=(0,n.useRef)(null),[D,R]=(0,n.useState)(x??v),[K,N]=(0,n.useState)(!0);(0,n.useEffect)(()=>{let e;return(m||a)&&(e=setTimeout(()=>{C.current?.focus(),a&&C.current?.select()},1)),()=>clearTimeout(e)},[]),(0,n.useEffect)(()=>{if(C.current){let e=C.current.validity.valid;K!==e&&(N(e),j?.(e))}},[D]),(0,n.useEffect)(()=>{C.current&&document.activeElement!==C.current&&x!==D&&R(x??v)},[x]);let
|
|
1
|
+
import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as r from"../common/timer.js";import*as u from"../common/ui.js";import*as n from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:m,autoSelect:a,className:i,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onChange:E,onEnter:b,onEscape:I,onValidationChange:j,value:x,...k}=r,C=(0,n.useRef)(null),[D,R]=(0,n.useState)(x??v),[K,N]=(0,n.useState)(!0);function g(e){E&&(f?s(()=>E(e)):E(e))}(0,n.useEffect)(()=>{let e;return(m||a)&&(e=setTimeout(()=>{C.current?.focus(),a&&C.current?.select()},1)),()=>clearTimeout(e)},[]),(0,n.useEffect)(()=>{if(C.current){let e=C.current.validity.valid;K!==e&&(N(e),j?.(e))}},[D]),(0,n.useEffect)(()=>{C.current&&document.activeElement!==C.current&&x!==D&&R(x??v)},[x]);let h=(0,u.computeBoxProps)(k),B=(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",(0,u.computeBoxClassName)(k),i,!K&&"RestrictedInput--invalid"]);return(0,e.jsx)("input",{...h,autoComplete:"off",className:B,disabled:l,max:d,min:v,onChange:function(e){let t=Number(e.target.value);R(t),g(t)},onKeyDown:function(e){if(e.key===o.KEY.Enter){e.preventDefault(),b?.(D),C.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),I?.(D),C.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault(),R(-1*D),g(D);return}},ref:C,spellCheck:!1,step:c?"any":"1",type:"number",value:D})}export{c as RestrictedInput};
|
package/package.json
CHANGED