tgui-core 4.0.3 → 4.1.0
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.
- package/README.md +7 -0
- package/dist/common/constants.d.ts +1 -1
- package/dist/common/constants.js +1 -1
- package/dist/common/events.js +1 -1
- package/dist/common/fuzzysearch.js +1 -1
- package/dist/common/hotkeys.js +1 -1
- package/dist/common/random.js +1 -1
- package/dist/common/ui.js +1 -1
- package/dist/common/uuid.js +1 -1
- package/dist/common/vector.js +1 -1
- package/dist/components/AnimatedNumber.d.ts +2 -42
- package/dist/components/AnimatedNumber.js +1 -1
- package/dist/components/Autofocus.js +1 -1
- package/dist/components/Blink.js +1 -1
- package/dist/components/BlockQuote.js +1 -1
- package/dist/components/Box.d.ts +2 -2
- package/dist/components/Box.js +1 -1
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/ByondUi.js +1 -1
- package/dist/components/Chart.js +1 -1
- package/dist/components/Collapsible.js +1 -1
- package/dist/components/ColorBox.js +1 -1
- package/dist/components/Dialog.js +1 -1
- package/dist/components/Dimmer.js +1 -1
- package/dist/components/Divider.js +1 -1
- package/dist/components/DmIcon.js +1 -1
- package/dist/components/DraggableControl.d.ts +4 -1
- package/dist/components/DraggableControl.js +1 -1
- package/dist/components/Dropdown.d.ts +2 -0
- package/dist/components/Dropdown.js +1 -1
- package/dist/components/FitText.js +1 -1
- package/dist/components/Flex.d.ts +1 -1
- package/dist/components/Flex.js +1 -1
- package/dist/components/Floating.d.ts +2 -1
- package/dist/components/Floating.js +1 -1
- package/dist/components/Icon.d.ts +1 -1
- package/dist/components/Icon.js +1 -1
- package/dist/components/Image.d.ts +7 -1
- package/dist/components/Image.js +1 -1
- package/dist/components/ImageButton.d.ts +1 -1
- package/dist/components/ImageButton.js +1 -1
- package/dist/components/InfinitePlane.js +1 -1
- package/dist/components/Input.js +1 -1
- package/dist/components/KeyListener.d.ts +1 -1
- package/dist/components/KeyListener.js +1 -1
- package/dist/components/Knob.d.ts +5 -5
- package/dist/components/Knob.js +1 -1
- package/dist/components/LabeledControls.js +1 -1
- package/dist/components/LabeledList.d.ts +1 -1
- package/dist/components/LabeledList.js +1 -1
- package/dist/components/MenuBar.js +1 -1
- package/dist/components/Modal.d.ts +2 -3
- package/dist/components/Modal.js +1 -1
- package/dist/components/NoticeBox.js +1 -1
- package/dist/components/NumberInput.d.ts +3 -3
- package/dist/components/NumberInput.js +1 -1
- package/dist/components/Popper.js +1 -1
- package/dist/components/ProgressBar.js +1 -1
- package/dist/components/RestrictedInput.js +1 -1
- package/dist/components/RoundGauge.js +1 -1
- package/dist/components/Section.js +1 -1
- package/dist/components/Slider.d.ts +4 -4
- package/dist/components/Slider.js +1 -1
- package/dist/components/Stack.js +1 -1
- package/dist/components/StyleableSection.js +1 -1
- package/dist/components/Table.js +1 -1
- package/dist/components/Tabs.js +1 -1
- package/dist/components/TextArea.js +1 -1
- package/dist/components/TimeDisplay.js +1 -1
- package/dist/components/Tooltip.js +1 -1
- package/dist/components/TrackOutsideClicks.js +1 -1
- package/dist/components/VirtualList.js +1 -1
- package/dist/components/index.js +1 -1
- package/package.json +15 -20
- package/styles/atomic/candystripe.scss +8 -0
- package/styles/atomic/centered-image.scss +7 -0
- package/styles/atomic/color.scss +17 -0
- package/styles/atomic/debug-layout.scss +12 -0
- package/styles/atomic/fit-text.scss +15 -0
- package/styles/atomic/links.scss +21 -0
- package/styles/atomic/outline.scss +43 -0
- package/styles/atomic/text.scss +39 -0
- package/styles/atomic.scss +11 -0
- package/styles/components/BlockQuote.scss +0 -2
- package/styles/components/Button.scss +83 -84
- package/styles/components/Dimmer.scss +0 -2
- package/styles/components/Divider.scss +0 -5
- package/styles/components/Dropdown.scss +8 -0
- package/styles/components/ImageButton.scss +104 -102
- package/styles/components/Input.scss +4 -1
- package/styles/components/Knob.scss +5 -21
- package/styles/components/LabeledList.scss +0 -2
- package/styles/components/NoticeBox.scss +15 -21
- package/styles/components/NumberInput.scss +1 -9
- package/styles/components/ProgressBar.scss +27 -48
- package/styles/components/RestrictedInput.scss +3 -0
- package/styles/components/RoundGauge.scss +8 -13
- package/styles/components/Section.scss +0 -7
- package/styles/components/Slider.scss +49 -42
- package/styles/components/Tabs.scss +1 -12
- package/styles/components/TextArea.scss +3 -0
- package/styles/components/Tooltip.scss +0 -4
- package/styles/functions.scss +10 -0
- package/styles/main.scss +0 -1
- package/styles/reset.scss +1 -0
- package/styles/vars-components.scss +5 -2
package/README.md
CHANGED
|
@@ -4,7 +4,14 @@ A collection of utilities and components for the [tgui](https://github.com/tgsta
|
|
|
4
4
|
|
|
5
5
|
This package was built to help the various downstream SS13 servers stay up to date with TGUI without having to keep a local version of each file.
|
|
6
6
|
|
|
7
|
+
## Testing / Demos
|
|
8
|
+
|
|
9
|
+
This project uses Storybook both for testing locally (via `bun storybook`) and our live demo site (https://tgstation.github.io/tgui-core/).
|
|
10
|
+
|
|
11
|
+
Storybook is a sandbox environment for UI components so you can test them in isolation without needing to boot the game.
|
|
12
|
+
|
|
7
13
|
## Links
|
|
14
|
+
|
|
8
15
|
- [GitHub](https://github.com/tgstation/tgui-core)
|
|
9
16
|
- [npm](https://www.npmjs.com/package/tgui-core)
|
|
10
17
|
- [Storybook](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
|
|
@@ -101,6 +101,6 @@ export declare function getGasFromId(gasId: string): Gas | undefined;
|
|
|
101
101
|
export declare function getGasFromPath(gasPath: string): Gas | undefined;
|
|
102
102
|
export declare const COMPONENT_COLORS: {
|
|
103
103
|
readonly spectrum: readonly ["red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "gold"];
|
|
104
|
-
readonly states: readonly ["", "good", "average", "bad", "black", "white"];
|
|
104
|
+
readonly states: readonly ["default", "good", "average", "bad", "black", "white", "transparent"];
|
|
105
105
|
};
|
|
106
106
|
export {};
|
package/dist/common/constants.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
let e=2,a=1,o=0,r=-1,l={damageType:{brute:"#e74c3c",burn:"#e67e22",oxy:"#3498db",toxin:"#2ecc71"},department:{captain:"#c06616",cargo:"#f39c12",centcom:"#00c100",engineering:"#f1c40f",medbay:"#3498db",other:"#c38312",science:"#9b59b6",security:"#e74c3c",service:"#7cc46a"},reagent:{acidicbuffer:"#fbc314",basicbuffer:"#3853a4"}},t=["average","bad","black","blue","brown","good","green","grey","label","olive","orange","pink","purple","red","teal","transparent","violet","white","yellow"],
|
|
1
|
+
let e=2,a=1,o=0,r=-1,l={damageType:{brute:"#e74c3c",burn:"#e67e22",oxy:"#3498db",toxin:"#2ecc71"},department:{captain:"#c06616",cargo:"#f39c12",centcom:"#00c100",engineering:"#f1c40f",medbay:"#3498db",other:"#c38312",science:"#9b59b6",security:"#e74c3c",service:"#7cc46a"},reagent:{acidicbuffer:"#fbc314",basicbuffer:"#3853a4"}},t=["average","bad","black","blue","brown","good","green","grey","label","olive","orange","pink","purple","red","teal","transparent","violet","white","yellow"],n=[{color:"#8f4a4b",freq:1213,name:"Syndicate"},{color:"#ff4444",freq:1215,name:"Red Team"},{color:"#3434fd",freq:1217,name:"Blue Team"},{color:"#34fd34",freq:1219,name:"Green Team"},{color:"#fdfd34",freq:1221,name:"Yellow Team"},{color:"#2681a5",freq:1337,name:"CentCom"},{color:"#b88646",freq:1347,name:"Supply"},{color:"#6ca729",freq:1349,name:"Service"},{color:"#c68cfa",freq:1351,name:"Science"},{color:"#fcdf03",freq:1353,name:"Command"},{color:"#57b8f0",freq:1355,name:"Medical"},{color:"#f37746",freq:1357,name:"Engineering"},{color:"#dd3535",freq:1359,name:"Security"},{color:"#d65d95",freq:1447,name:"AI Private"},{color:"#1ecc43",freq:1459,name:"Common"}],i=[{color:"blue",id:"o2",label:"O₂",name:"Oxygen",path:"/datum/gas/oxygen"},{color:"yellow",id:"n2",label:"N₂",name:"Nitrogen",path:"/datum/gas/nitrogen"},{color:"grey",id:"co2",label:"CO₂",name:"Carbon Dioxide",path:"/datum/gas/carbon_dioxide"},{color:"pink",id:"plasma",label:"Plasma",name:"Plasma",path:"/datum/gas/plasma"},{color:"lightsteelblue",id:"water_vapor",label:"H₂O",name:"Water Vapor",path:"/datum/gas/water_vapor"},{color:"teal",id:"hypernoblium",label:"Hyper-nob",name:"Hyper-noblium",path:"/datum/gas/hypernoblium"},{color:"bisque",id:"n2o",label:"N₂O",name:"Nitrous Oxide",path:"/datum/gas/nitrous_oxide"},{color:"brown",id:"no2",label:"Nitrium",name:"Nitrium",path:"/datum/gas/nitrium"},{color:"limegreen",id:"tritium",label:"Tritium",name:"Tritium",path:"/datum/gas/tritium"},{color:"mediumpurple",id:"bz",label:"BZ",name:"BZ",path:"/datum/gas/bz"},{color:"mediumslateblue",id:"pluoxium",label:"Pluoxium",name:"Pluoxium",path:"/datum/gas/pluoxium"},{color:"olive",id:"miasma",label:"Miasma",name:"Miasma",path:"/datum/gas/miasma"},{color:"paleturquoise",id:"freon",label:"Freon",name:"Freon",path:"/datum/gas/freon"},{color:"white",id:"hydrogen",label:"H₂",name:"Hydrogen",path:"/datum/gas/hydrogen"},{color:"salmon",id:"healium",label:"Healium",name:"Healium",path:"/datum/gas/healium"},{color:"greenyellow",id:"proto_nitrate",label:"Proto-Nitrate",name:"Proto Nitrate",path:"/datum/gas/proto_nitrate"},{color:"darkgreen",id:"zauker",label:"Zauker",name:"Zauker",path:"/datum/gas/zauker"},{color:"purple",id:"halon",label:"Halon",name:"Halon",path:"/datum/gas/halon"},{color:"aliceblue",id:"helium",label:"He",name:"Helium",path:"/datum/gas/helium"},{color:"maroon",id:"antinoblium",label:"Anti-Noblium",name:"Antinoblium",path:"/datum/gas/antinoblium"},{color:"brown",id:"nitrium",label:"Nitrium",name:"Nitrium",path:"/datum/gas/nitrium"}];function m(e,a){if(!e)return a||"None";let o=e.toLowerCase();for(let e=0;e<i.length;e++)if(i[e].id===o)return i[e].label;return a||"None"}function u(e){if(!e)return"black";let a=e.toLowerCase();for(let e=0;e<i.length;e++)if(i[e].id===a)return i[e].color;return"black"}function c(e){if(!e)return;let a=e.toLowerCase();for(let e=0;e<i.length;e++)if(i[e].id===a)return i[e]}function d(e){if(e){for(let a=0;a<i.length;a++)if(i[a].path===e)return i[a]}}let b={spectrum:["red","orange","yellow","olive","green","teal","blue","violet","purple","pink","brown","grey","gold"],states:["default","good","average","bad","black","white","transparent"]};export{l as COLORS,b as COMPONENT_COLORS,t as CSS_COLORS,n as RADIO_CHANNELS,r as UI_CLOSE,o as UI_DISABLED,e as UI_INTERACTIVE,a as UI_UPDATE,u as getGasColor,c as getGasFromId,d as getGasFromPath,m as getGasLabel};
|
package/dist/common/events.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
let t;import
|
|
1
|
+
let t;import{KEY_ALT as e,KEY_CTRL as i,KEY_F1 as s,KEY_F12 as n,KEY_SHIFT as r}from"./keycodes.js";class o{listeners;constructor(){this.listeners={}}on(t,e){this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e)}off(t,e){let i=this.listeners[t];if(!i)throw Error(`There is no listeners for "${t}"`);this.listeners[t]=i.filter(t=>t!==e)}emit(t,...e){let i=this.listeners[t];if(i)for(let t=0,s=i.length;t<s;t+=1)(0,i[t])(...e)}clear(){this.listeners={}}}let l=new o,u=!1,d=(t={})=>{u=!!t.ignoreWindowFocus},h=!0;function c(e,i){if(u){h=!0;return}if(t&&(clearTimeout(t),t=null),i){t=setTimeout(()=>c(e));return}h!==e&&(h=e,l.emit(e?"window-focus":"window-blur"),l.emit("window-focus-change",e))}let a=null;function f(t){let e=String(t.tagName).toLowerCase();return"input"===e||"textarea"===e}function m(){a&&(a.removeEventListener("blur",m),a=null,l.emit("input-blur"))}let w=null,y=null,p=[];function v(t){p.push(t)}function E(t){let e=p.indexOf(t);e>=0&&p.splice(e,1)}window.addEventListener("mousemove",t=>{let e=t.target;e!==y&&(y=e,function(t){if(a||!h)return;let e=document.body;for(;t&&t!==e;){if(p.includes(t)){if(t.contains(w))return;w=t,t.focus();return}t=t.parentElement}}(e))}),document.addEventListener("focus",t=>{var e;if(!(t.target instanceof Element)){y=null,w=null;return}y=null,w=t.target,f(t.target)&&(e=t.target,m(),(a=e).addEventListener("blur",m),l.emit("input-focus"))},!0),document.addEventListener("blur",()=>{y=null},!0),window.addEventListener("focus",()=>{c(!0)}),window.addEventListener("blur",()=>{y=null,c(!1,!0)}),window.addEventListener("close",()=>{c(!1)});let g={};class k{event;type;code;ctrl;shift;alt;repeat;_str;constructor(t,e,i){this.event=t,this.type=e,this.code=t.keyCode,this.ctrl=t.ctrlKey,this.shift=t.shiftKey,this.alt=t.altKey,this.repeat=!!i}hasModifierKeys(){return this.ctrl||this.alt||this.shift}isModifierKey(){return this.code===i||this.code===r||this.code===e}isDown(){return"keydown"===this.type}isUp(){return"keyup"===this.type}toString(){return this._str||(this._str="",this.ctrl&&(this._str+="Ctrl+"),this.alt&&(this._str+="Alt+"),this.shift&&(this._str+="Shift+"),this.code>=48&&this.code<=90?this._str+=String.fromCharCode(this.code):this.code>=s&&this.code<=n?this._str+=`F${this.code-111}`:this._str+=`[${this.code}]`),this._str}}document.addEventListener("keydown",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keydown",g[e]);l.emit("keydown",i),l.emit("key",i),g[e]=!0}),document.addEventListener("keyup",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keyup");l.emit("keyup",i),l.emit("key",i),g[e]=!1});export{o as EventEmitter,k as KeyEvent,v as addScrollableNode,f as canStealFocus,l as globalEvents,E as removeScrollableNode,d as setupGlobalEvents};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from"@nozbe/microfuzz";import{useCallback as r,useState as e}from"react";function o(o){let{getSearchString:i,matchStrategy:m="smart",searchArray:u}=o,[n,f]=e(""),[a,c]=e([]),z=r(t(u,{getText:t=>[i(t)],strategy:m}),[u,i]);return{query:n,setQuery:function(t){if(f(t),""===t.trim())return void c([]);c(z(t).map(t=>t.item))},results:a}}export{o as useFuzzySearch};
|
package/dist/common/hotkeys.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{globalEvents as e}from"./events.js";import{KEY_CTRL as t,KEY_DOWN as n,KEY_ENTER as o,KEY_ESCAPE as r,KEY_F5 as i,KEY_LEFT as s,KEY_RIGHT as l,KEY_SHIFT as u,KEY_SPACE as f,KEY_TAB as a,KEY_UP as d}from"./keycodes.js";let c={},y=[r,o,f,a,t,u,d,n,s,l,i],m={},p=[];function h(e){y.push(e)}function b(e){let t=y.indexOf(e);t>=0&&y.splice(t,1)}function v(){for(let e in m)m[e]&&(m[e]=!1,Byond.command(K.verbParamsFn(K.keyUpVerb,e)))}let K={keyDownVerb:"KeyDown",keyUpVerb:"KeyUp",verbParamsFn:(e,t)=>`${e} "${t}"`};function w(t){t&&(K=t),Byond.winget("default.*").then(e=>{let t={};for(let n in e){let o=n.split("."),r=o[1],i=o[2];r&&i&&(t[r]||(t[r]={}),t[r][i]=e[n])}let n=/\\"/g;function o(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];c[o(n.name)]=o(n.command)}}),e.on("window-blur",()=>{v()}),e.on("input-focus",()=>{v()}),g()}function g(){e.on("key",F)}function k(){e.off("key",F)}function F(e){for(let t of p)t(e);!function(e){var t;let n=String(e);if("Ctrl+F5"===n||"Ctrl+R"===n)return location.reload();if("Ctrl+F"===n||e.event.defaultPrevented||e.isModifierKey()||y.includes(e.code))return;let o=16===(t=e.code)?"Shift":17===t?"Ctrl":18===t?"Alt":33===t?"Northeast":34===t?"Southeast":35===t?"Southwest":36===t?"Northwest":37===t?"West":38===t?"North":39===t?"East":40===t?"South":45===t?"Insert":46===t?"Delete":t>=48&&t<=57||t>=65&&t<=90?String.fromCharCode(t):t>=96&&t<=105?`Numpad${t-96}`:t>=112&&t<=123?`F${t-111}`:188===t?",":189===t?"-":190===t?".":void 0;if(!o)return;let r=c[o];if(r)return Byond.command(r);if(e.isDown()&&!m[o]){m[o]=!0;let e=K.verbParamsFn(K.keyDownVerb,o);return Byond.command(e)}if(e.isUp()&&m[o]){m[o]=!1;let e=K.verbParamsFn(K.keyUpVerb,o);Byond.command(e)}}(e)}function P(e){p.push(e);let t=!1;return()=>{t||(t=!0,p.splice(p.indexOf(e),1))}}export{h as acquireHotKey,P as listenForKeyEvents,v as releaseHeldKeys,b as releaseHotKey,w as setupHotKeys,g as startKeyPassthrough,k as stopKeyPassthrough};
|
package/dist/common/random.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{clamp as r}from"./math.js";function n(r,n){return Math.random()*(n-r)+r}function o(r,n){let o=Math.ceil(r);return Math.floor(Math.random()*(Math.floor(n)-o)+o)}function t(r){return r[Math.floor(Math.random()*r.length)]}function a(n){return Math.random()<=r(n,0,100)/100}export{o as randomInteger,n as randomNumber,t as randomPick,a as randomProb};
|
package/dist/common/ui.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{CSS_COLORS as t}from"./constants.js";import{classes as o}from"./react.js";let i=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,e=t=>"string"==typeof t?i(t):"number"==typeof t?i(.5*t):void 0;function n(o){return"string"==typeof o&&t.includes(o)}let r=t=>(o,i)=>{("number"==typeof i||"string"==typeof i)&&(o[t]=i)},l=(t,o)=>(i,e)=>{("number"==typeof e||"string"==typeof e)&&(i[t]=o(e))},p=(t,o)=>(i,e)=>{e&&(i[t]=o)},g=(t,o,i)=>(e,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<i.length;r++)e[t+i[r]]=o(n)},a=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),backgroundColor:a("backgroundColor"),bottom:l("bottom",i),color:a("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",i),fontWeight:r("fontWeight"),g:l("gap",e),gc:l("columnGap",e),gr:l("rowGap",e),height:l("height",i),left:l("left",i),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=i(o))},m:g("margin",e,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",i),maxWidth:l("maxWidth",i),mb:l("marginBottom",e),minHeight:l("minHeight",i),minWidth:l("minWidth",i),ml:l("marginLeft",e),mr:l("marginRight",e),mt:l("marginTop",e),mx:g("margin",e,["Left","Right"]),my:g("margin",e,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:g("padding",e,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",e),pl:l("paddingLeft",e),position:r("position"),pr:l("paddingRight",e),pt:l("paddingTop",e),px:g("padding",e,["Left","Right"]),py:g("padding",e,["Top","Bottom"]),right:l("right",i),textAlign:r("textAlign"),textColor:a("color"),top:l("top",i),verticalAlign:r("verticalAlign"),width:l("width",i)},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},i={};for(let e in t){if("style"===e)continue;let n=t[e],r=f[e]||m[e];r?r(i,n):o[e]=n}return o.style={...i,...t.style},o}function h(t){let i=t.textColor||t.color,{backgroundColor:e}=t;return o([n(i)&&`color-${i}`,n(e)&&`color-bg-${e}`])}function c(t){let o={};if(!t)return o;for(let i of t.split(" ")){let[t,e]=i.split("-");if(t)if(t in f){if(""===e)continue;let i=Number(e);!Number.isNaN(i)&&Number.isFinite(i)?o[t]=i:o[t]=e}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}export{m as booleanStyleMap,h as computeBoxClassName,s as computeBoxProps,c as computeTwClass,e as halfUnit,f as stringStyleMap,i as unit};
|
package/dist/common/uuid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function x(){let x=
|
|
1
|
+
function x(){let x=Date.now();return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{let e=(x+16*Math.random())%16|0;return x=Math.floor(x/16),("x"===t?e:3&e|8).toString(16)})}export{x as createUuid};
|
package/dist/common/vector.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{zip as e}from"./collections.js";function n(e,n){return e+n}function r(e,n){return e-n}function t(e,n){return e*n}function u(e,n){return e/n}function c(...r){return e(...r).map(e=>e.reduce(n))}function i(...n){return e(...n).map(e=>e.reduce(r))}function o(...n){return e(...n).map(e=>e.reduce(t))}function f(...n){return e(...n).map(e=>e.reduce(u))}function a(e,n){return e.map(e=>e*n)}function m(e){return e.map(e=>-e)}function p(e){return Math.sqrt(o(e,e).reduce(n))}function v(e){let n=p(e);return e.map(e=>e/n)}export{c as vecAdd,f as vecDivide,m as vecInverse,p as vecLength,o as vecMultiply,v as vecNormalize,a as vecScale,i as vecSubtract};
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import { Component } from 'react';
|
|
2
1
|
type Props = {
|
|
3
|
-
/**
|
|
4
|
-
* The target value to approach.
|
|
5
|
-
*/
|
|
2
|
+
/** The target value to approach. */
|
|
6
3
|
value: number;
|
|
7
4
|
} & Partial<{
|
|
8
5
|
/**
|
|
@@ -22,43 +19,6 @@ type Props = {
|
|
|
22
19
|
*
|
|
23
20
|
* An animated number label. Shows a number, formatted with an optionally
|
|
24
21
|
* provided function, and animates it towards its target value.
|
|
25
|
-
*
|
|
26
|
-
* - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
|
|
27
22
|
*/
|
|
28
|
-
export declare
|
|
29
|
-
/**
|
|
30
|
-
* The inner `<span/>` being updated sixty times per second.
|
|
31
|
-
*/
|
|
32
|
-
ref: import("react").RefObject<HTMLSpanElement | null>;
|
|
33
|
-
/**
|
|
34
|
-
* The interval being used to update the inner span.
|
|
35
|
-
*/
|
|
36
|
-
interval?: NodeJS.Timeout;
|
|
37
|
-
/**
|
|
38
|
-
* The current value. This values approaches the target value.
|
|
39
|
-
*/
|
|
40
|
-
currentValue: number;
|
|
41
|
-
constructor(props: Props);
|
|
42
|
-
componentDidMount(): void;
|
|
43
|
-
componentWillUnmount(): void;
|
|
44
|
-
shouldComponentUpdate(newProps: Props): boolean;
|
|
45
|
-
/**
|
|
46
|
-
* Starts animating the inner span. If the inner span is already animating,
|
|
47
|
-
* this is a no-op.
|
|
48
|
-
*/
|
|
49
|
-
startTicking(): void;
|
|
50
|
-
/**
|
|
51
|
-
* Stops animating the inner span.
|
|
52
|
-
*/
|
|
53
|
-
stopTicking(): void;
|
|
54
|
-
/**
|
|
55
|
-
* Steps forward one frame.
|
|
56
|
-
*/
|
|
57
|
-
tick(): void;
|
|
58
|
-
/**
|
|
59
|
-
* Gets the inner text of the span.
|
|
60
|
-
*/
|
|
61
|
-
getText(): string;
|
|
62
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
63
|
-
}
|
|
23
|
+
export declare function AnimatedNumber(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
64
24
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{clamp as t,isSafeNumber as n,toFixed as e}from"../common/math.js";import{useEffect as u,useRef as l,useState as i}from"react";let o=1e3/60;function c(c){let{format:m,initial:a,value:f}=c,p=l(null),[s,h]=i(void 0!==a&&n(a)?a:n(f)?f:0);function d(){null!==p.current&&(clearInterval(p.current),p.current=null)}function v(){if(!n(f))return void d();h(r=>{let t=.8333*r+.16669999999999996*f;return Math.abs(f-t)<Math.max(.001,.001*f)?(d(),f):t})}return u(()=>{s!==f&&null===p.current&&(p.current=setInterval(v,o))},[f]),u(()=>()=>d(),[]),r("span",{children:n(f)?m?m(s):function(){let r=String(f).split(".")[1];return e(s,t(r?r.length:0,0,8))}():String(f)})}export{c as AnimatedNumber};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{useEffect as t,useRef as e}from"react";function o(o){let{children:u}=o,n=e(null);return t(()=>{let r=setTimeout(()=>{n.current?.focus()},1);return()=>{clearTimeout(r)}},[]),r("div",{ref:n,tabIndex:-1,children:u})}export{o as Autofocus};
|
package/dist/components/Blink.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useEffect as t,useState as r}from"react";function i(i){let{children:n,interval:l=1e3,time:o=1e3}=i,[s,a]=r(!1);return t(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},o)},l+o);return()=>{clearInterval(e)}},[l,o]),e("span",{style:{visibility:s?"hidden":"visible"},children:n})}export{i as Blink};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{Box as t}from"./Box.js";function m(m){let{className:e,...c}=m;return o(t,{className:r(["BlockQuote",e]),...c})}export{m as BlockQuote};
|
package/dist/components/Box.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import type { BooleanLike } from '../common/react.ts';
|
|
2
|
+
import { type BooleanStyleMap, type StringStyleMap } from '../common/ui.ts';
|
|
1
3
|
import { type CSSProperties, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type UIEventHandler } from 'react';
|
|
2
|
-
import type { BooleanLike } from '../common/react';
|
|
3
|
-
import { type BooleanStyleMap, type StringStyleMap } from '../common/ui';
|
|
4
4
|
type EventHandlers<TElement = HTMLDivElement> = Partial<{
|
|
5
5
|
onClick: MouseEventHandler<TElement>;
|
|
6
6
|
onContextMenu: MouseEventHandler<TElement>;
|
package/dist/components/Box.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{computeBoxClassName as o,computeBoxProps as r,computeTwClass as m}from"../common/ui.js";import{createElement as t}from"react";function e(e){let{as:i="div",className:c,children:n,tw:a,...f}=e,p=c?`${c} ${o(f)}`:o(f);return t(i,{...r({...f,...m(a)}),className:p},n)}export{e as Box};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import type { Placement } from '@floating-ui/react';
|
|
2
3
|
import { type ReactNode, type RefObject } from 'react';
|
|
3
|
-
import { type BooleanLike } from '../common/react';
|
|
4
4
|
import { type BoxProps } from './Box';
|
|
5
5
|
/**
|
|
6
6
|
* Getting ellipses to work requires that you use:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var t;import
|
|
1
|
+
var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m="default",compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:I,verticalAlignContent:T,...A}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",v&&"Button--hasIcon",C&&`Button--icon-${C}`,T&&"Button--flex",T&&g&&"Button--flex--fluid",T&&`Button--verticalAlignContent--${T}`,m&&"string"==typeof m&&`Button--color--${m}`,f,l(A)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(A),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:I,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){if(!p)return void d(!0);s?.(t),d(!1)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),I=f(!1),T=a(),A=C??T;return s(()=>{w&&(A.current?.focus(),A.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>D(!0),...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){I.current||b===N||(x?.(N),I.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),I.current=!0,t.currentTarget.blur();return}},ref:A,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e=m.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);p.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let c=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",c),f(),()=>{window.removeEventListener("resize",c),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};
|
package/dist/components/Chart.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{zip as n}from"../common/collections.js";import{useEffect as r,useRef as i,useState as o}from"react";import{Box as l}from"./Box.js";let s={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function f(f){let{data:h=[],rangeX:m,rangeY:p,fillColor:a="none",strokeColor:c="#ffffff",strokeWidth:u=2,...d}=f,v=i(null),[g,w]=o([600,200]),x=function(e,t,r,i){if(0===e.length)return[];let o=n(...e),l=o.map(e=>Math.min(...e)),s=o.map(e=>Math.max(...e));return void 0!==r&&(l[0]=r[0],s[0]=r[1]),void 0!==i&&(l[1]=i[0],s[1]=i[1]),e.map(e=>n(e,l,s,t).map(([e,t,n,r])=>(e-t)/(n-t)*r))}(h,g,m,p);if(x.length>0){let e=x[0],t=x[x.length-1];x.push([g[0]+u,t[1]]),x.push([g[0]+u,-u]),x.push([-u,-u]),x.push([-u,e[1]])}let $=function(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];t+=`${r[0]},${r[1]} `}return t}(x);function j(){let e=v.current;if(!e)return;let t=e.getBoundingClientRect();w([t.width,t.height])}return r(()=>(window.addEventListener("resize",j),j(),()=>{window.removeEventListener("resize",j)}),[]),e(l,{position:"relative",...d,children:e("div",{ref:v,style:s,children:t("svg",{preserveAspectRatio:"none",style:s,viewBox:`0 0 ${g[0]} ${g[1]}`,children:[e("title",{children:"chart"}),e("polyline",{fill:a,points:$,stroke:c,strokeWidth:u,transform:`scale(1, -1) translate(0, -${g[1]})`})]})})})}f.Line=f;export{f as Chart};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as l,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{Box as o}from"./Box.js";import{Button as c}from"./Button.js";function i(i){let{children:n,child_mt:t=1,childStyles:a,color:m,title:s,buttons:d,icon:h,...p}=i,[b,f]=r(i.open);return e(o,{mb:1,children:[e("div",{className:"Table",children:[l("div",{className:"Table__cell",children:l(c,{color:m,fluid:!0,icon:h||(b?"chevron-down":"chevron-right"),onClick:()=>f(!b),...p,children:s})}),d&&l("div",{className:"Table__cell Table__cell--collapsing",children:d})]}),b&&l(o,{mt:t,style:a,children:n})]})}export{i as Collapsible};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as m}from"../common/ui.js";function t(t){let{content:c,children:e,className:n,...i}=t;return i.color=c?null:"default",i.backgroundColor=t.color||"default",o("div",{className:r(["ColorBox",n,l(i)]),...m(i),children:c||""})}export{t as ColorBox};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Box as o}from"./Box.js";import{Button as e}from"./Button.js";function l(l){let{title:n,onClose:r,children:a,width:c,height:s}=l;return t("div",{className:"Dialog",children:i(o,{className:"Dialog__content",height:s,width:c||"370px",children:[i("div",{className:"Dialog__header",children:[t("div",{className:"Dialog__title",children:n}),t(o,{mr:2,children:t(e,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:r,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),a]})})}l.Button=function(i){let{onClick:o,children:l}=i;return t(e,{className:"Dialog__button",onClick:o,verticalAlignContent:"middle",children:l})};export{l as Dialog};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{classes as m}from"../common/react.js";import{Box as e}from"./Box.js";function i(i){let{className:o,children:t,...n}=i;return r(e,{className:m(["Dimmer",o]),...n,children:r("div",{className:"Dimmer__inner",children:t})})}export{i as Dimmer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{classes as r}from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return i("div",{className:r(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as T}from"react/jsx-runtime";import{Image as r}from"./Image.js";var S,o=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function e(S){let{direction:o=2,fallback:e,frame:t=1,icon_state:E,icon:H,movement:O=!1,...i}=S,m=Byond.iconRefMap?.[H];return m?T(r,{fixErrors:!0,src:`${m}?state=${E}&dir=${o}&movement=${!!O}&frame=${t}`,...i}):e}export{o as Direction,e as DmIcon};
|
|
@@ -29,7 +29,10 @@ type Props = {
|
|
|
29
29
|
maxValue: number;
|
|
30
30
|
/** The minimum value. */
|
|
31
31
|
minValue: number;
|
|
32
|
-
/**
|
|
32
|
+
/**
|
|
33
|
+
* An event which fires when you release the input or successfully enter a
|
|
34
|
+
* number. This is the default value event for controls.
|
|
35
|
+
*/
|
|
33
36
|
onChange: (event: Event, value: number) => void;
|
|
34
37
|
/** An event which fires when you drag the input. */
|
|
35
38
|
onDrag: (event: MouseEvent, value: number) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as c}from"../common/math.js";import{useEffect as o,useRef as i,useState as l}from"react";import{AnimatedNumber as m}from"./AnimatedNumber.js";function a(e,r){return e.screenX*r[0]+e.screenY*r[1]}function v(v){let{animated:s,children:d,dragMatrix:f=[1,0],format:p,maxValue:N=Number.POSITIVE_INFINITY,minValue:I=Number.NEGATIVE_INFINITY,onChange:E,onDrag:b,step:g=1,stepPixelSize:y=1,unclamped:T,unit:h,updateRate:j=400,fontSize:F,height:L,lineHeight:S}=v,[_,k]=l(v.value),[D,Y]=l(!1),x=i(!1),A=i(v.value),V=i(0),w=i(-1),z=i(null),B=i(null),C=i(null);function G(e){let r=a(e,f),t=r-w.current,n=Number.isFinite(I)?I%g:0;V.current=c(V.current+t*g/y,I-g,N+g);let u=c(V.current-V.current%g+n,I,N);A.current=u,k(u),w.current=r}function H(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),w.current=-1,document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",H),x.current&&(E?.(e,A.current),b?.(e,A.current),x.current=!1)}o(()=>{v.value!==A.current&&(A.current=v.value,k(v.value))},[v.value]);let K=v.value;x.current&&(K=A.current);let O=t(e,{children:[s&&!x.current?r(m,{format:p,value:K}):p?p(K):K,h?` ${h}`:""]}),P=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(T||(r=c(r,I,N)),Number.isNaN(r))return void Y(!1);V.current=r,A.current=r,k(r),E?.(e.nativeEvent,r),D&&Y(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&Y(!1)},ref:z,style:{display:D?void 0:"none",fontSize:F,height:L,lineHeight:S}});return d({displayElement:O,displayValue:K,dragging:x.current,editing:D,handleDragStart:function(e){D||(document.body.style["pointer-events"]="none",w.current=a(e.nativeEvent,f),V.current=v.value,x.current=!0,document.addEventListener("mouseup",H),C.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",G),B.current=setInterval(()=>{x.current&&b?.(r,v.value)},j);else if(Y(!0),z.current){let e=z.current;e.value=V.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100))},inputElement:P})}export{v as DraggableControl};
|
|
@@ -38,6 +38,8 @@ type Props = {
|
|
|
38
38
|
noChevron: boolean;
|
|
39
39
|
/** Dropdown renders over instead of below */
|
|
40
40
|
over: boolean;
|
|
41
|
+
/** Fill all available horizontal space */
|
|
42
|
+
fluid: boolean;
|
|
41
43
|
/** Text to show when nothing has been selected. */
|
|
42
44
|
placeholder: string;
|
|
43
45
|
/** @deprecated If you want to allow dropdown breaks layout, set width 100% */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as c}from"react";import{Button as d}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";function m(o){return"string"==typeof o?o:o.value}function p(p){let{autoScroll:u=!0,buttons:_,className:w,color:f="default",disabled:h,displayText:D,icon:y,iconRotation:v,iconSpin:N,iconOnly:g,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:C=[],over:B,placeholder:I="Select...",selected:T,fluid:A,width:E=15}=p,[K,O]=c(!1),S=i(null),$=C.findIndex(o=>m(o)===T)||0;function F(o){let n=o;n=o<$?o<2?0:o-2:o>C.length-3?C.length-1:o-2;let e=S.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function M(o){let n;if(C.length<1||h)return;let e=C.length-1;n=$<0?"next"===o?e:0:"next"===o?$===e?0:$+1:0===$?e:$-1,K&&u&&F(n),k?.(m(C[n]))}let W=B?"top":"bottom";return g&&(W=`${W}-start`),e("div",{className:r(["Dropdown",A&&"Dropdown--fluid"]),children:[n(s,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:S,children:0===C.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):C.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",T===e&&"selected"]),onClick:()=>{k?.(e)},onKeyDown:o=>{o.key===t.Enter&&k?.(e)},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:h,onMounted:()=>{K&&u&&-1!==$&&F($)},onOpenChange:O,placement:W,children:e("div",{className:r(["Dropdown__control",`Button--color--${f}`,h&&"Button--disabled",g&&"Dropdown__control--icon-only",w]),onClick:o=>{(!h||K)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||h||j?.(o)},style:{width:l(E)},children:[y&&n(a,{className:"Dropdown__icon",name:y,rotation:v,spin:N}),!g&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:D||T&&m(T)||I}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",B&&"over",K&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-left",onClick:()=>{M("previous")}}),n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-right",onClick:()=>{M("next")}})]})]})}export{p as Dropdown};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{Component as t,createRef as i}from"react";class s extends t{ref=i();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return e("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{s as FitText};
|
|
@@ -95,7 +95,7 @@ export declare function Flex(props: any): import("react/jsx-runtime").JSX.Elemen
|
|
|
95
95
|
export declare namespace Flex {
|
|
96
96
|
var Item: typeof FlexItem;
|
|
97
97
|
}
|
|
98
|
-
export declare
|
|
98
|
+
export declare function computeFlexItemClassName(props: FlexItemProps): string;
|
|
99
99
|
export type FlexItemProps = Partial<{
|
|
100
100
|
/** This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. */
|
|
101
101
|
align: string | boolean;
|
package/dist/components/Flex.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as n,unit as o}from"../common/ui.js";function i(e){return t(["Flex",e.inlineFlex&&"Flex--inline",r(e)])}function l(e){let{direction:t,wrap:r,align:o,justify:i,...l}=e;return n({style:{...l.style,alignItems:o,flexDirection:t,flexWrap:!0===r?"wrap":r,justifyContent:i},...l})}function m(r){let{className:n,...o}=r;return e("div",{className:t([n,i(o)]),...l(o)})}function u(e){return t(["Flex__item",r(e)])}function s(e){let{style:t,grow:r,order:i,shrink:l,basis:m,align:u,...s}=e,c=m??e.width??(void 0!==r?0:void 0);return n({style:{...t,alignSelf:u,flexBasis:o(c),flexGrow:void 0!==r&&Number(r),flexShrink:void 0!==l&&Number(l),order:i},...s})}m.Item=function(r){let{className:n,...o}=r;return e("div",{className:t([n,u(r)]),...s(o)})};export{m as Flex,i as computeFlexClassName,u as computeFlexItemClassName,s as computeFlexItemProps,l as computeFlexProps};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
1
2
|
import { type Placement } from '@floating-ui/react';
|
|
2
3
|
import { type CSSProperties, type ReactNode } from 'react';
|
|
3
|
-
import { type BooleanLike } from '../common/react';
|
|
4
4
|
type Props = {
|
|
5
5
|
/** Interacting with this element will open the floating element. */
|
|
6
6
|
children: ReactNode;
|
|
@@ -74,6 +74,7 @@ type Props = {
|
|
|
74
74
|
* ## Floating
|
|
75
75
|
*
|
|
76
76
|
* Floating lets you position elements so that they don't go out of the bounds of the window.
|
|
77
|
+
*
|
|
77
78
|
* - [Documentation](https://floating-ui.com/docs/react) for more information.
|
|
78
79
|
*/
|
|
79
80
|
export declare function Floating(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as i,autoUpdate as r,flip as a,offset as l,shift as s,size as c,useClick as d,useDismiss as m,useFloating as p,useHover as f,useInteractions as g,useTransitionStatus as h}from"@floating-ui/react";import{cloneElement as u,isValidElement as C,useEffect as v,useId as w,useState as F}from"react";function b(b){let x,{allowedOutsideClasses:y,animationDuration:O,children:R,closeAfterInteract:j,content:k,contentAutoWidth:z,contentClasses:E,contentOffset:M=6,contentStyles:P,disabled:S,hoverDelay:N,hoverOpen:$,handleOpen:q,onMounted:A,placement:B,preventPortal:D,stopChildPropagation:G,onOpenChange:H}=b,I=w(),[J,K]=F(!1),{refs:L,floatingStyles:Q,context:T}=p({middleware:[l(M),a({padding:6}),s(),z&&c({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){K(e),H?.(e)},open:J,placement:B||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==A&&A(),r(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!z}))}),{isMounted:U,status:V}=h(T,{duration:O||200}),W=m(T,{ancestorScroll:!0,outsidePress:e=>!y||e.target instanceof Element&&!e.target.closest(y)}),X=d(T,{enabled:!S}),Y=f(T,{enabled:!S,restMs:N||200}),Z=void 0!==q,{getReferenceProps:_,getFloatingProps:ee}=g(Z?[]:[W,$?Y:X]),et=_({ref:L.setReference,...G&&{onClick:e=>e.stopPropagation()}}),en=ee({onClick:()=>{j&&T.onOpenChange(!1)},ref:L.setFloating});v(()=>{Z&&T.onOpenChange(q)},[q]),x=C(R)?u(R,et):t("div",{...et,children:R});let eo=t("div",{className:o(["Floating",!O&&"Floating--animated",E]),"data-position":T.placement,"data-transition":V,style:{...Q,...P},...en,children:k});return n(e,{children:[x,U&&!!k&&(D?eo:t(i,{id:I,children:eo}))]})}export{b as Floating};
|
package/dist/components/Icon.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{classes as e}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as r}from"../common/ui.js";let a=/-o$/;function s(s){let{name:n="",size:c,spin:i,className:m,rotation:f,...l}=s,p=l.style||{};c&&(p.fontSize=`${100*c}%`),f&&(p.transform=`rotate(${f}deg)`),l.style=p;let u=r(l),I="";if(n.startsWith("tg-"))I=n;else{let t=a.test(n),e=n.replace(a,""),o=!e.startsWith("fa-");I=t?"far ":"fas ",o&&(I+="fa-"),I+=e,i&&(I+=" fa-spin")}return t("i",{className:e(["Icon",I,m,o(l)]),...u})}(s||(s={})).Stack=function(a){let{className:s,children:n,...c}=a;return t("span",{className:e(["IconStack",s,o(c)]),...r(c),children:n})};export{s as Icon};
|
|
@@ -9,6 +9,12 @@ type Props = Partial<{
|
|
|
9
9
|
fixErrors: boolean;
|
|
10
10
|
/** Fill is default. */
|
|
11
11
|
objectFit: 'contain' | 'cover';
|
|
12
|
+
/**
|
|
13
|
+
* The image source.
|
|
14
|
+
*
|
|
15
|
+
* Use transparent base64 pixel if there is no src so we don't get a broken
|
|
16
|
+
* image icon when using assets.
|
|
17
|
+
*/
|
|
12
18
|
src: string;
|
|
13
19
|
}> & BoxProps;
|
|
14
20
|
/**
|
|
@@ -16,7 +22,7 @@ type Props = Partial<{
|
|
|
16
22
|
*
|
|
17
23
|
* A wrapper for the `<img>` element.
|
|
18
24
|
*
|
|
19
|
-
*
|
|
25
|
+
* It can attempt to fix broken images by fetching them again with `fixErrors`.
|
|
20
26
|
*
|
|
21
27
|
* It will also try to fix blurry images by rendering them pixelated.
|
|
22
28
|
*/
|
package/dist/components/Image.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{computeBoxProps as e}from"../common/ui.js";import{useEffect as t,useRef as A}from"react";function n(n){let{fixBlur:u=!0,fixErrors:c,objectFit:i="fill",src:m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...o}=n,a=A(0),l=A(null),g=e(o);return g.style={...g.style,imageRendering:u?"pixelated":"auto",objectFit:i},t(()=>()=>{l.current&&clearTimeout(l.current)},[]),r("img",{alt:"dm icon",onError:function(r){if(!c||a.current>=5){l.current&&clearTimeout(l.current);return}let e=r.currentTarget;l.current=setTimeout(()=>{e.src=`${m}?attempt=${a.current}`,a.current++},1e3)},src:m,...g})}export{n as Image};
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
* @copyright 2024 Aylong (https://github.com/AyIong)
|
|
4
4
|
* @license MIT
|
|
5
5
|
*/
|
|
6
|
+
import { type BooleanLike } from '../common/react.ts';
|
|
6
7
|
import type { Placement } from '@floating-ui/react';
|
|
7
8
|
import type { ReactNode } from 'react';
|
|
8
|
-
import { type BooleanLike } from '../common/react';
|
|
9
9
|
import type { BoxProps } from './Box';
|
|
10
10
|
import { type Direction } from './DmIcon';
|
|
11
11
|
type Props = Partial<{
|