tgui-core 3.1.1 → 3.1.3

package/dist/common/eventbus.d.ts

@@ -0,0 +1,49 @@
+/**
+ * ## EventBus
+ *
+ * Handles different event messages from byond and TGUI.
+ *
+ * Don't fret! This is a simple class under the hood. Using some typescript-fu,
+ * it's able to provide type safety for the event types and their payloads.
+ *
+ * The philosophy: This interacts directly with state managers in vanilla JS,
+ * offering a way to handle browser events. UIs then subscribe to these states
+ * and update accordingly.
+ *
+ * @usage
+ * ```ts
+ * const bus = new EventBus(listeners);
+ *
+ * // These are the event types and their corresponding callbacks.
+ * const listeners = {
+ *   'messageTypeA': (message) => { logger.log(message.payload); },
+ * } as const;
+ *
+ * // You can further shorten this by linking a function to the event type:
+ * function messageTypeA(payload: { text: string }) {
+ *  logger.log(payload.text);
+ * }
+ *
+ * const listeners = {
+ *   messageTypeA,
+ * } as const;
+ *
+ *
+ * // Later, dispatch a message:
+ * const message: ByondMessage = {
+ *   type: 'messageTypeA',
+ *   payload: { text: 'Hello, world!' },
+ * };
+ *
+ * bus.dispatch(message);
+ * ```
+ */
+export declare class EventBus<TListeners extends Readonly<Record<string, (payload: unknown) => void>>> {
+    private listeners;
+    constructor(initialListeners: TListeners);
+    /** Dispatch a message to the appropriate listener. */
+    dispatch<TType extends keyof TListeners>(message: {
+        type: TType;
+        payload?: Parameters<TListeners[TType]>[0];
+    }): void;
+}

package/dist/common/eventbus.js

@@ -0,0 +1 @@
+class s{listeners={};constructor(s){this.listeners=s}dispatch(s){this.listeners[s.type]?.(s.payload)}}export{s as EventBus};

package/dist/components/Button.d.ts

@@ -74,8 +74,8 @@ type InputProps = Partial<{
     children: never;
     /** Max length of the input */
     maxLength: number;
-    /** Action on enter key press */
-    onEnter: (value: string) => void;
+    /** Action on outside click or enter key */
+    onCommit: (value: string) => void;
     /** Reference to the inner input */
     ref: RefObject<HTMLInputElement | null>;
     /** The value of the input */

package/dist/components/Button.js

@@ -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 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};
+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 c from"./Tooltip.js";function l(t){let{captureKeys:n=!0,children:u,circular:l,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:_,...w}=t,D=p||u,I=(0,e.jsx)(i.Icon,{className:"Button--icon",name:j||"",color:h,rotation:g,size:k,spin:v}),T=(0,e.jsx)("div",{className:(0,r.classes)(["Button",x&&"Button--fluid",d&&"Button--disabled",b&&"Button--selected",l&&"Button--circular",m&&"Button--compact",!D&&"Button--empty",y&&`Button--icon-${y}`,_&&"Button--flex",_&&x&&"Button--flex--fluid",_&&`Button--verticalAlignContent--${_}`,f&&"string"==typeof f?`Button--color--${f}`:"Button--color--default",a,(0,s.computeBoxClassName)(w)]),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)(w),children:(0,e.jsxs)("div",{className:(0,r.classes)(["Button__content",B&&"Button__content--ellipsis"]),children:[j&&"right"!==y&&I,B?(0,e.jsx)("span",{className:"Button--ellipsis",children:D}):D,j&&"right"===y&&I]})});return E&&(T=(0,e.jsx)(c.Tooltip,{content:E,position:N,children:T})),T}(t=l||(l={})).Checkbox=function(t){let{checked:n,...o}=t;return(0,e.jsx)(l,{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:c=!0,icon:a,onBlur:f,onClick:m,...p}=t,[d,B]=(0,n.useState)(!1);return(0,e.jsx)(l,{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:c,color:l="default",disabled:a,fluid:f,icon:m,iconRotation:p,iconSpin:d,maxLength:B,onCommit:x,ref:j,value:h="",...y}=t,[g,k]=(0,n.useState)(h),[v,C]=(0,n.useState)(!1),b=(0,n.useRef)(!1),E=(0,n.createRef)(),N=j??E;return(0,n.useEffect)(()=>{v&&(N.current?.focus(),N.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--${l}`]),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(){b.current||h===g||(x?.(g),b.current=!1),C(!1)},onChange:function(t){k(t.currentTarget.value)},onKeyDown:function(t){if(t.key===o.KEY.Enter){t.preventDefault(),t.currentTarget.blur();return}if((0,o.isEscape)(t.key)){t.preventDefault(),b.current=!0,t.currentTarget.blur();return}},ref:N,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 c(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 c(e);s(r?t:t[0])}}return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{onClick:()=>i.current?.click(),...u}),(0,e.jsx)("input",{hidden:!0,type:"file",ref:i,accept:o,multiple:r,onChange:a})]})};export{l as Button};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tgui-core",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "TGUI core component library",
   "keywords": ["TGUI", "library", "typescript"],
   "files": ["dist", "styles"],