From b1474799ec673098ace5353dde5220e4736419e8 Mon Sep 17 00:00:00 2001 From: robuddybot <65057909+robuddybot@users.noreply.github.com> Date: Sat, 14 Sep 2024 01:00:38 +0000 Subject: [PATCH] Build & Release v1.2.0 --- dist/assets/ImageButton.css | 5 + dist/components/Box.d.ts | 2 + dist/components/DraggableControl.js | 10 +- dist/components/ImageButton.d.ts | 61 ++++++++ dist/components/ImageButton.js | 218 ++++++++++++++++++++++++++++ dist/components/NumberInput.js | 164 ++++++++++----------- dist/components/Slider.d.ts | 2 + dist/components/TextArea.d.ts | 2 + dist/components/index.d.ts | 1 + dist/components/index.js | 118 +++++++-------- package.json | 2 +- 11 files changed, 438 insertions(+), 147 deletions(-) create mode 100644 dist/assets/ImageButton.css create mode 100644 dist/components/ImageButton.d.ts create mode 100644 dist/components/ImageButton.js diff --git a/dist/assets/ImageButton.css b/dist/assets/ImageButton.css new file mode 100644 index 0000000..48d814b --- /dev/null +++ b/dist/assets/ImageButton.css @@ -0,0 +1,5 @@ +/** + * @file + * @copyright 2024 Aylong (https://github.com/AyIong) + * @license MIT + */._color__black_7gau9_18{background-color:#0003;color:#fff;border:solid rgba(32,32,32,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__black_7gau9_18:hover{background-color:#20202033}._contentColor__black_7gau9_29{background-color:#000;color:#fff;border:solid #101010;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__black_7gau9_37{background-color:#00000054;color:#fff;border:solid rgba(32,32,32,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__white_7gau9_45{background-color:#d9d9d933;color:#000;border:solid rgba(250,250,250,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__white_7gau9_45:hover{background-color:#fafafa33}._contentColor__white_7gau9_56{background-color:#d9d9d9;color:#000;border:solid #f8f8f8;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__white_7gau9_64{background-color:#d9d9d954;color:#000;border:solid rgba(250,250,250,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__red_7gau9_72{background-color:#bd202033;color:#fff;border:solid rgba(227,112,112,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__red_7gau9_72:hover{background-color:#e3707033}._contentColor__red_7gau9_83{background-color:#bd2020;color:#fff;border:solid #d93f3f;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__red_7gau9_91{background-color:#bd202054;color:#fff;border:solid rgba(227,112,112,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__orange_7gau9_99{background-color:#d95e0c33;color:#fff;border:solid rgba(244,162,107,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__orange_7gau9_99:hover{background-color:#f4a26b33}._contentColor__orange_7gau9_110{background-color:#d95e0c;color:#fff;border:solid #ef7e33;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__orange_7gau9_118{background-color:#d95e0c54;color:#fff;border:solid rgba(244,162,107,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__yellow_7gau9_126{background-color:#d9b80433;color:#000;border:solid rgba(248,225,91,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__yellow_7gau9_126:hover{background-color:#f8e15b33}._contentColor__yellow_7gau9_137{background-color:#d9b804;color:#000;border:solid #f5d523;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__yellow_7gau9_145{background-color:#d9b80454;color:#000;border:solid rgba(248,225,91,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__olive_7gau9_153{background-color:#9aad1433;color:#000;border:solid rgba(209,228,79,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__olive_7gau9_153:hover{background-color:#d1e44f33}._contentColor__olive_7gau9_164{background-color:#9aad14;color:#000;border:solid #bdd327;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__olive_7gau9_172{background-color:#9aad1454;color:#000;border:solid rgba(209,228,79,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__green_7gau9_180{background-color:#1b963833;color:#fff;border:solid rgba(72,214,105,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__green_7gau9_180:hover{background-color:#48d66933}._contentColor__green_7gau9_191{background-color:#1b9638;color:#fff;border:solid #2fb94f;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__green_7gau9_199{background-color:#1b963854;color:#fff;border:solid rgba(72,214,105,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__teal_7gau9_207{background-color:#009a9333;color:#fff;border:solid rgba(32,225,216,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__teal_7gau9_207:hover{background-color:#20e1d833}._contentColor__teal_7gau9_218{background-color:#009a93;color:#fff;border:solid #10bdb6;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__teal_7gau9_226{background-color:#009a9354;color:#fff;border:solid rgba(32,225,216,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__blue_7gau9_234{background-color:#1c71b133;color:#fff;border:solid rgba(96,169,224,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__blue_7gau9_234:hover{background-color:#60a9e033}._contentColor__blue_7gau9_245{background-color:#1c71b1;color:#fff;border:solid #308fd6;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__blue_7gau9_253{background-color:#1c71b154;color:#fff;border:solid rgba(96,169,224,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__violet_7gau9_261{background-color:#552dab33;color:#fff;border:solid rgba(149,119,215,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__violet_7gau9_261:hover{background-color:#9577d733}._contentColor__violet_7gau9_272{background-color:#552dab;color:#fff;border:solid #7249ca;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__violet_7gau9_280{background-color:#552dab54;color:#fff;border:solid rgba(149,119,215,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__purple_7gau9_288{background-color:#8b2baa33;color:#fff;border:solid rgba(190,115,215,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__purple_7gau9_288:hover{background-color:#be73d733}._contentColor__purple_7gau9_299{background-color:#8b2baa;color:#fff;border:solid #aa46ca;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__purple_7gau9_307{background-color:#8b2baa54;color:#fff;border:solid rgba(190,115,215,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__pink_7gau9_315{background-color:#cf208233;color:#fff;border:solid rgba(233,129,188,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__pink_7gau9_315:hover{background-color:#e981bc33}._contentColor__pink_7gau9_326{background-color:#cf2082;color:#fff;border:solid #e04ca0;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__pink_7gau9_334{background-color:#cf208254;color:#fff;border:solid rgba(233,129,188,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__brown_7gau9_342{background-color:#8c583633;color:#fff;border:solid rgba(195,144,111,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__brown_7gau9_342:hover{background-color:#c3906f33}._contentColor__brown_7gau9_353{background-color:#8c5836;color:#fff;border:solid #ae724c;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__brown_7gau9_361{background-color:#8c583654;color:#fff;border:solid rgba(195,144,111,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__grey_7gau9_369{background-color:#64646433;color:#fff;border:solid rgba(157,157,157,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__grey_7gau9_369:hover{background-color:#9d9d9d33}._contentColor__grey_7gau9_380{background-color:#646464;color:#fff;border:solid #818181;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__grey_7gau9_388{background-color:#64646454;color:#fff;border:solid rgba(157,157,157,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__light-grey_7gau9_396{background-color:#91919133;color:#fff;border:solid rgba(213,213,213,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__light-grey_7gau9_396:hover{background-color:#d5d5d533}._contentColor__light-grey_7gau9_407{background-color:#919191;color:#fff;border:solid #b3b3b3;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__light-grey_7gau9_415{background-color:#91919154;color:#fff;border:solid rgba(213,213,213,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__good_7gau9_423{background-color:#4d912133;color:#fff;border:solid rgba(130,208,79,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__good_7gau9_423:hover{background-color:#82d04f33}._contentColor__good_7gau9_434{background-color:#4d9121;color:#fff;border:solid #67b335;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__good_7gau9_442{background-color:#4d912154;color:#fff;border:solid rgba(130,208,79,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__average_7gau9_450{background-color:#cd7a0d33;color:#fff;border:solid rgba(241,178,96,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__average_7gau9_450:hover{background-color:#f1b26033}._contentColor__average_7gau9_461{background-color:#cd7a0d;color:#fff;border:solid #eb972b;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__average_7gau9_469{background-color:#cd7a0d54;color:#fff;border:solid rgba(241,178,96,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__bad_7gau9_477{background-color:#bd202033;color:#fff;border:solid rgba(227,112,112,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__bad_7gau9_477:hover{background-color:#e3707033}._contentColor__bad_7gau9_488{background-color:#bd2020;color:#fff;border:solid #d93f3f;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__bad_7gau9_496{background-color:#bd202054;color:#fff;border:solid rgba(227,112,112,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__label_7gau9_504{background-color:#657a9433;color:#fff;border:solid rgba(175,186,201,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__label_7gau9_504:hover{background-color:#afbac933}._contentColor__label_7gau9_515{background-color:#657a94;color:#fff;border:solid #8a9aae;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__label_7gau9_523{background-color:#657a9454;color:#fff;border:solid rgba(175,186,201,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._color__default_7gau9_531{background-color:#35353533;color:#fff;border:solid rgba(99,99,99,.2);border-width:1px;transition:background-color .2s,border-color .2s}._color__default_7gau9_531:hover{background-color:#63636333}._disabled_7gau9_542{background-color:#631d1d40!important;border-color:#631d1d40!important}._selected_7gau9_547{background-color:#1b963833;color:#fff;border:solid rgba(27,150,56,.25);border-width:1px;transition:background-color .2s,border-color .2s}._selected_7gau9_547:hover{background-color:#48d66933}._contentColor__default_7gau9_558{background-color:#313131;color:#fff;border:solid #404040;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._contentDisabled_7gau9_566{background-color:#631d1d!important;border-top:1px solid #803131!important}._contentSelected_7gau9_571{background-color:#1b9638;color:#fff;border:solid #2fb94f;border-width:1px 0 0 0;transition:background-color .2s,border-color .2s}._buttonsContainerColor__default_7gau9_579{background-color:#35353533;color:#fff;border:solid rgba(99,99,99,.2);border-width:1px 1px 1px 0;transition:background-color 0,border-color 0}._ImageButton_7gau9_587{display:inline-table;position:relative;text-align:center;margin:.25em;-webkit-user-select:none;user-select:none;-ms-user-select:none}._ImageButton_7gau9_587 ._noAction_7gau9_595{pointer-events:none}._ImageButton_7gau9_587 ._container_7gau9_598{display:flex;flex-direction:column;border-radius:.33em}._ImageButton_7gau9_587 ._image_7gau9_603{position:relative;align-self:center;pointer-events:none;overflow:hidden;line-height:0;padding:.25em;border-radius:.33em}._ImageButton_7gau9_587 ._buttonsContainer_7gau9_37{display:flex;position:absolute;overflow:hidden;left:1px;bottom:1.8em;max-width:100%;z-index:1}._ImageButton_7gau9_587 ._buttonsContainer_7gau9_37._buttonsAltContainer_7gau9_621{overflow:visible;flex-direction:column;pointer-events:none;top:1px;bottom:inherit!important}._ImageButton_7gau9_587 ._buttonsContainer_7gau9_37._buttonsEmpty_7gau9_628{bottom:1px}._ImageButton_7gau9_587 ._buttonsContainer_7gau9_37>*{margin:0!important;padding:0 .2em!important;border-radius:0!important}._ImageButton_7gau9_587 ._content_7gau9_29{-ms-user-select:none;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25em .5em;margin:-1px;border-radius:0 0 .33em .33em;z-index:2}._fluid_7gau9_649{display:flex;flex-direction:row;position:relative;text-align:center;margin:0 0 .5em;-webkit-user-select:none;user-select:none;-ms-user-select:none}._fluid_7gau9_649:last-child{margin-bottom:0}._fluid_7gau9_649 ._info_7gau9_661{display:flex;flex-direction:column;justify-content:center;flex:1}._fluid_7gau9_649 ._title_7gau9_667{font-weight:700;padding:.5em}._fluid_7gau9_649 ._title_7gau9_667._divider_7gau9_671{margin:0 .5em;border-bottom:.1666666667em solid rgba(255,255,255,.1)}._fluid_7gau9_649 ._contentFluid_7gau9_675{padding:.5em;color:#fff}._fluid_7gau9_649 ._container_7gau9_598{flex-direction:row;flex:1}._fluid_7gau9_649 ._container_7gau9_598._hasButtons_7gau9_683{border-radius:.33em 0 0 .33em;border-width:1px 0 1px 1px}._fluid_7gau9_649 ._image_7gau9_603{padding:0}._fluid_7gau9_649 ._buttonsContainer_7gau9_37{position:relative;left:inherit;bottom:inherit;border-radius:0 .33em .33em 0}._fluid_7gau9_649 ._buttonsContainer_7gau9_37._buttonsEmpty_7gau9_628{bottom:inherit}._fluid_7gau9_649 ._buttonsContainer_7gau9_37._buttonsAltContainer_7gau9_621{overflow:hidden;pointer-events:auto;top:inherit}._fluid_7gau9_649 ._buttonsContainer_7gau9_37._buttonsAltContainer_7gau9_621>*{border-top:1px solid rgba(255,255,255,.075)}._fluid_7gau9_649 ._buttonsContainer_7gau9_37._buttonsAltContainer_7gau9_621>*:first-child{border-top:0}._fluid_7gau9_649 ._buttonsContainer_7gau9_37>*{display:inline-flex;flex-direction:column;justify-content:center;text-align:center;white-space:pre-wrap;line-height:1.1666666667em;height:100%;border-left:1px solid rgba(255,255,255,.075)} diff --git a/dist/components/Box.d.ts b/dist/components/Box.d.ts index d5665f0..f1e1eca 100644 --- a/dist/components/Box.d.ts +++ b/dist/components/Box.d.ts @@ -10,6 +10,7 @@ export type EventHandlers = Partial<{ onKeyDown: KeyboardEventHandler; onKeyUp: KeyboardEventHandler; onMouseDown: MouseEventHandler; + onMouseLeave: MouseEventHandler; onMouseMove: MouseEventHandler; onMouseOver: MouseEventHandler; onMouseUp: MouseEventHandler; @@ -19,6 +20,7 @@ export type BoxProps = Partial<{ as: string; children: ReactNode; className: string | BooleanLike; + id: string; style: CSSProperties; }> & BooleanProps & StringProps & EventHandlers; type DangerDoNotUse = { diff --git a/dist/components/DraggableControl.js b/dist/components/DraggableControl.js index 5996422..4ea85b5 100644 --- a/dist/components/DraggableControl.js +++ b/dist/components/DraggableControl.js @@ -1,4 +1,4 @@ -import { jsxs as N, Fragment as T, jsx as F } from "react/jsx-runtime"; +import { jsxs as T, Fragment as N, jsx as F } from "react/jsx-runtime"; import { clamp as m } from "../common/math.js"; import { Component as b, createRef as I } from "react"; import { AnimatedNumber as M } from "./AnimatedNumber.js"; @@ -67,11 +67,9 @@ class C extends b { this.suppressFlicker(), i && i(e, o), l && l(e, o); else if (this.inputRef) { const a = this.inputRef.current; - a.value = g; - try { + a.value = g, setTimeout(() => { a.focus(), a.select(); - } catch { - } + }, 10); } }; } @@ -99,7 +97,7 @@ class C extends b { } = this.props; let d = o; (u || l) && (d = i); - const E = /* @__PURE__ */ N(T, { children: [ + const E = /* @__PURE__ */ T(N, { children: [ s && !u && !l ? /* @__PURE__ */ F(M, { value: d, format: h }) : h ? h(d) : d, g ? " " + g : "" ] }), x = /* @__PURE__ */ F( diff --git a/dist/components/ImageButton.d.ts b/dist/components/ImageButton.d.ts new file mode 100644 index 0000000..147fe08 --- /dev/null +++ b/dist/components/ImageButton.d.ts @@ -0,0 +1,61 @@ +import { Placement } from '@popperjs/core'; +import { ReactNode } from 'react'; +import { BooleanLike } from '../common/react'; +import { BoxProps } from './Box'; + +type Props = Partial<{ + /** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */ + asset: string[]; + /** Classic way to put images. Example: `base64={thing.image}` */ + base64: string; + /** + * Special container for buttons. + * You can put any other component here. + * Has some special stylings! + * Example: `buttons={}` + */ + buttons: ReactNode; + /** + * Enables alternate layout for `buttons` container. + * Without fluid, buttons will be on top and with `pointer-events: none`, useful for text info. + * With fluid, buttons will be in "hamburger" style. + */ + buttonsAlt: boolean; + /** Content under image. Or on the right if fluid. */ + children: ReactNode; + /** Applies a CSS class to the element. */ + className: string; + /** Color of the button. See [Button](#button) but without `transparent`. */ + color: string; + /** Makes button disabled and dark red if true. Also disables onClick. */ + disabled: BooleanLike; + /** Optional. Adds a "stub" when loading DmIcon. */ + dmFallback: ReactNode; + /** Parameter `icon` of component `DmIcon`. */ + dmIcon: string | null; + /** Parameter `icon_state` of component `DmIcon`. */ + dmIconState: string | null; + /** + * Changes the layout of the button, making it fill the entire horizontally available space. + * Allows the use of `title` + */ + fluid: boolean; + /** Parameter responsible for the size of the image, component and standard "stubs". */ + imageSize: number; + /** Prop `src` of Image component. Example: `imageSrc={resolveAsset(thing.image}` */ + imageSrc: string; + /** Called when button is clicked with LMB. */ + onClick: (e: any) => void; + /** Called when button is clicked with RMB. */ + onRightClick: (e: any) => void; + /** Makes button selected and green if true. */ + selected: BooleanLike; + /** Requires `fluid` for work. Bold text with divider betwen content. */ + title: string; + /** A fancy, boxy tooltip, which appears when hovering over the button */ + tooltip: ReactNode; + /** Position of the tooltip. See [`Popper`](#Popper) for valid options. */ + tooltipPosition: Placement; +}> & BoxProps; +export declare function ImageButton(props: Props): import("react/jsx-runtime").JSX.Element; +export {}; diff --git a/dist/components/ImageButton.js b/dist/components/ImageButton.js new file mode 100644 index 0000000..dc79f65 --- /dev/null +++ b/dist/components/ImageButton.js @@ -0,0 +1,218 @@ +import { jsxs as d, jsx as t } from "react/jsx-runtime"; +import { classes as e } from "../common/react.js"; +import { computeBoxProps as D } from "./Box.js"; +import { DmIcon as F } from "./DmIcon.js"; +import { Icon as E } from "./Icon.js"; +import { Image as j } from "./Image.js"; +import { Stack as I } from "./Stack.js"; +import { Tooltip as z } from "./Tooltip.js"; +import '../assets/ImageButton.css';const P = "_color__black_7gau9_18", q = "_contentColor__black_7gau9_29", M = "_buttonsContainerColor__black_7gau9_37", R = "_color__white_7gau9_45", T = "_contentColor__white_7gau9_56", G = "_buttonsContainerColor__white_7gau9_64", H = "_color__red_7gau9_72", J = "_contentColor__red_7gau9_83", K = "_buttonsContainerColor__red_7gau9_91", L = "_color__orange_7gau9_99", O = "_contentColor__orange_7gau9_110", Q = "_buttonsContainerColor__orange_7gau9_118", U = "_color__yellow_7gau9_126", V = "_contentColor__yellow_7gau9_137", W = "_buttonsContainerColor__yellow_7gau9_145", X = "_color__olive_7gau9_153", Y = "_contentColor__olive_7gau9_164", Z = "_buttonsContainerColor__olive_7gau9_172", oo = "_color__green_7gau9_180", to = "_contentColor__green_7gau9_191", _o = "_buttonsContainerColor__green_7gau9_199", no = "_color__teal_7gau9_207", eo = "_contentColor__teal_7gau9_218", ro = "_buttonsContainerColor__teal_7gau9_226", lo = "_color__blue_7gau9_234", ao = "_contentColor__blue_7gau9_245", co = "_buttonsContainerColor__blue_7gau9_253", so = "_color__violet_7gau9_261", io = "_contentColor__violet_7gau9_272", uo = "_buttonsContainerColor__violet_7gau9_280", Co = "_color__purple_7gau9_288", go = "_contentColor__purple_7gau9_299", bo = "_buttonsContainerColor__purple_7gau9_307", po = "_color__pink_7gau9_315", mo = "_contentColor__pink_7gau9_326", fo = "_buttonsContainerColor__pink_7gau9_334", ho = "_color__brown_7gau9_342", vo = "_contentColor__brown_7gau9_353", yo = "_buttonsContainerColor__brown_7gau9_361", wo = "_color__grey_7gau9_369", ko = "_contentColor__grey_7gau9_380", xo = "_buttonsContainerColor__grey_7gau9_388", Io = "_color__good_7gau9_423", $o = "_contentColor__good_7gau9_434", Ao = "_buttonsContainerColor__good_7gau9_442", Bo = "_color__average_7gau9_450", No = "_contentColor__average_7gau9_461", So = "_buttonsContainerColor__average_7gau9_469", Do = "_color__bad_7gau9_477", Fo = "_contentColor__bad_7gau9_488", Eo = "_buttonsContainerColor__bad_7gau9_496", jo = "_color__label_7gau9_504", zo = "_contentColor__label_7gau9_515", Po = "_buttonsContainerColor__label_7gau9_523", qo = "_color__default_7gau9_531", Mo = "_disabled_7gau9_542", Ro = "_selected_7gau9_547", To = "_contentColor__default_7gau9_558", Go = "_contentDisabled_7gau9_566", Ho = "_contentSelected_7gau9_571", Jo = "_buttonsContainerColor__default_7gau9_579", Ko = "_ImageButton_7gau9_587", Lo = "_noAction_7gau9_595", Oo = "_container_7gau9_598", Qo = "_image_7gau9_603", Uo = "_buttonsContainer_7gau9_37", Vo = "_buttonsAltContainer_7gau9_621", Wo = "_buttonsEmpty_7gau9_628", Xo = "_content_7gau9_29", Yo = "_fluid_7gau9_649", Zo = "_info_7gau9_661", ot = "_title_7gau9_667", tt = "_divider_7gau9_671", _t = "_contentFluid_7gau9_675", nt = "_hasButtons_7gau9_683", o = { + color__black: P, + contentColor__black: q, + buttonsContainerColor__black: M, + color__white: R, + contentColor__white: T, + buttonsContainerColor__white: G, + color__red: H, + contentColor__red: J, + buttonsContainerColor__red: K, + color__orange: L, + contentColor__orange: O, + buttonsContainerColor__orange: Q, + color__yellow: U, + contentColor__yellow: V, + buttonsContainerColor__yellow: W, + color__olive: X, + contentColor__olive: Y, + buttonsContainerColor__olive: Z, + color__green: oo, + contentColor__green: to, + buttonsContainerColor__green: _o, + color__teal: no, + contentColor__teal: eo, + buttonsContainerColor__teal: ro, + color__blue: lo, + contentColor__blue: ao, + buttonsContainerColor__blue: co, + color__violet: so, + contentColor__violet: io, + buttonsContainerColor__violet: uo, + color__purple: Co, + contentColor__purple: go, + buttonsContainerColor__purple: bo, + color__pink: po, + contentColor__pink: mo, + buttonsContainerColor__pink: fo, + color__brown: ho, + contentColor__brown: vo, + buttonsContainerColor__brown: yo, + color__grey: wo, + contentColor__grey: ko, + buttonsContainerColor__grey: xo, + "color__light-grey": "_color__light-grey_7gau9_396", + "contentColor__light-grey": "_contentColor__light-grey_7gau9_407", + "buttonsContainerColor__light-grey": "_buttonsContainerColor__light-grey_7gau9_415", + color__good: Io, + contentColor__good: $o, + buttonsContainerColor__good: Ao, + color__average: Bo, + contentColor__average: No, + buttonsContainerColor__average: So, + color__bad: Do, + contentColor__bad: Fo, + buttonsContainerColor__bad: Eo, + color__label: jo, + contentColor__label: zo, + buttonsContainerColor__label: Po, + color__default: qo, + disabled: Mo, + selected: Ro, + contentColor__default: To, + contentDisabled: Go, + contentSelected: Ho, + buttonsContainerColor__default: Jo, + ImageButton: Ko, + noAction: Lo, + container: Oo, + image: Qo, + buttonsContainer: Uo, + buttonsAltContainer: Vo, + buttonsEmpty: Wo, + content: Xo, + fluid: Yo, + info: Zo, + title: ot, + divider: tt, + contentFluid: _t, + hasButtons: nt +}; +function Ct($) { + const { + asset: p, + base64: s, + buttons: i, + buttonsAlt: m, + children: r, + className: A, + color: _, + disabled: a, + dmFallback: f, + dmIcon: h, + dmIconState: v, + fluid: c, + imageSize: n = 64, + imageSrc: u, + onClick: C, + onRightClick: g, + selected: y, + title: w, + tooltip: k, + tooltipPosition: B, + ...N + } = $; + function x(l, S) { + return /* @__PURE__ */ t(I, { height: `${n}px`, width: `${n}px`, children: /* @__PURE__ */ t(I.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t( + E, + { + spin: S, + name: l, + color: "gray", + style: { fontSize: `calc(${n}px * 0.75)` } + } + ) }) }); + } + let b = /* @__PURE__ */ d( + "div", + { + className: e([ + o.container, + i && o.hasButtons, + !C && !g && o.noAction, + y && o.selected, + a && o.disabled, + _ && typeof _ == "string" ? o["color__" + _] : o.color__default + ]), + tabIndex: a ? void 0 : 0, + onClick: (l) => { + !a && C && C(l); + }, + onContextMenu: (l) => { + l.preventDefault(), !a && g && g(l); + }, + style: { width: c ? "auto" : `calc(${n}px + 0.5em + 2px)` }, + children: [ + /* @__PURE__ */ t("div", { className: e([o.image]), children: s || p || u ? /* @__PURE__ */ t( + j, + { + className: e(!s && !u && p || []), + src: s ? `data:image/png;base64,${s}` : u, + height: `${n}px`, + width: `${n}px` + } + ) : h && v ? /* @__PURE__ */ t( + F, + { + icon: h, + icon_state: v, + fallback: f || x("spinner", !0), + height: `${n}px`, + width: `${n}px` + } + ) : x("question", !1) }), + c ? /* @__PURE__ */ d("div", { className: e([o.info]), children: [ + w && /* @__PURE__ */ t( + "span", + { + className: e([o.title, r && o.divider]), + children: w + } + ), + r && /* @__PURE__ */ t("span", { className: e([o.contentFluid]), children: r }) + ] }) : r && /* @__PURE__ */ t( + "span", + { + className: e([ + o.content, + y && o.contentSelected, + a && o.contentDisabled, + _ && typeof _ == "string" ? o["contentColor__" + _] : o.contentColor__default + ]), + children: r + } + ) + ] + } + ); + return k && (b = /* @__PURE__ */ t(z, { content: k, position: B, children: b })), /* @__PURE__ */ d( + "div", + { + className: e([ + o.ImageButton, + c && o.fluid, + A + ]), + ...D(N), + children: [ + b, + i && /* @__PURE__ */ t( + "div", + { + className: e([ + o.buttonsContainer, + m && o.buttonsAltContainer, + !r && o.buttonsEmpty, + c && _ && typeof _ == "string" ? o["buttonsContainerColor__" + _] : c && o.buttonsContainerColor__default + ]), + style: { + width: m ? `calc(${n}px + 0.5em)` : "auto" + }, + children: i + } + ) + ] + } + ); +} +export { + Ct as ImageButton +}; diff --git a/dist/components/NumberInput.js b/dist/components/NumberInput.js index b9ed97e..1f5d8fb 100644 --- a/dist/components/NumberInput.js +++ b/dist/components/NumberInput.js @@ -1,22 +1,22 @@ import '../assets/NumberInput.css';var N = Object.defineProperty; var w = (c, d, e) => d in c ? N(c, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[d] = e; var l = (c, d, e) => w(c, typeof d != "symbol" ? d + "" : d, e); -import { jsxs as _, jsx as g } from "react/jsx-runtime"; +import { jsxs as _, jsx as V } from "react/jsx-runtime"; import { Component as E, createRef as I } from "react"; -import { KEY as D, isEscape as T } from "../common/keys.js"; -import { clamp as h } from "../common/math.js"; +import { KEY as D, isEscape as M } from "../common/keys.js"; +import { clamp as g, round as T } from "../common/math.js"; import { classes as F } from "../common/react.js"; -import { AnimatedNumber as M } from "./AnimatedNumber.js"; -import { Box as R } from "./Box.js"; -const B = "_numberInput_4xyrw_20", K = "_fluid_4xyrw_36", L = "_content_4xyrw_40", Y = "_barContainer_4xyrw_44", j = "_bar_4xyrw_44", k = "_inner_4xyrw_61", p = { +import { AnimatedNumber as R } from "./AnimatedNumber.js"; +import { Box as Y } from "./Box.js"; +const B = "_numberInput_4xyrw_20", K = "_fluid_4xyrw_36", L = "_content_4xyrw_40", z = "_barContainer_4xyrw_44", j = "_bar_4xyrw_44", k = "_inner_4xyrw_61", p = { numberInput: B, fluid: K, content: L, - barContainer: Y, + barContainer: z, bar: j, inner: k }; -class q extends E { +class J extends E { constructor(e) { super(e); // Ref to the input field to set focus & highlight @@ -34,74 +34,74 @@ class q extends E { origin: 0 }); l(this, "handleDragStart", (e) => { - const { value: a, disabled: u } = this.props, { editing: i } = this.state; - if (u || i) + const { value: o, disabled: a } = this.props, { editing: s } = this.state; + if (a || s) return; document.body.style["pointer-events"] = "none"; - const n = parseFloat(a.toString()); + const r = parseFloat(o.toString()); this.setState({ dragging: !1, origin: e.screenY, - currentValue: n, - previousValue: n + currentValue: r, + previousValue: r }), this.dragTimeout = setTimeout(() => { this.setState({ dragging: !0 }); }, 250), this.dragInterval = setInterval(() => { - const { dragging: o, currentValue: s, previousValue: t } = this.state, { onDrag: r } = this.props; - o && s !== t && (this.setState({ - previousValue: s - }), r == null || r(s)); + const { dragging: u, currentValue: i, previousValue: t } = this.state, { onDrag: n } = this.props; + u && i !== t && (this.setState({ + previousValue: i + }), n == null || n(i)); }, 400), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd); }); l(this, "handleDragMove", (e) => { - const { minValue: a, maxValue: u, step: i, stepPixelSize: n, disabled: o } = this.props; - o || this.setState((s) => { - const t = { ...s }, r = t.origin - e.screenY; - if (s.dragging) { - const f = isFinite(a) ? a % i : 0; - t.currentValue = h( - t.currentValue + r * i / (n || 1), - a - i, - u + i - ), t.currentValue = h( - t.currentValue - t.currentValue % i + f, - a, - u - ), t.origin = e.screenY; - } else Math.abs(r) > 4 && (t.dragging = !0); + const { minValue: o, maxValue: a, step: s, stepPixelSize: r, disabled: u } = this.props; + u || this.setState((i) => { + const t = { ...i }, n = t.origin - e.screenY; + if (i.dragging) { + const f = r || 1, m = g( + t.currentValue + n * s / f, + o - s, + a + s + ); + Math.abs(m - t.currentValue) >= s ? (t.currentValue = g( + T(m / s, 0) * s, + o, + a + ), t.origin = e.screenY) : Math.abs(n) > f && (t.origin = e.screenY); + } else Math.abs(n) > 4 && (t.dragging = !0); return t; }); }); l(this, "handleDragEnd", (e) => { - const { dragging: a, currentValue: u } = this.state, { onDrag: i, onChange: n, disabled: o } = this.props; - if (!o) { + const { dragging: o, currentValue: a } = this.state, { onDrag: s, onChange: r, disabled: u } = this.props; + if (!u) { if (document.body.style["pointer-events"] = "auto", clearInterval(this.dragInterval), clearTimeout(this.dragTimeout), this.setState({ dragging: !1, - editing: !a, - previousValue: u - }), a) - n == null || n(u), i == null || i(u); + editing: !o, + previousValue: a + }), o) + r == null || r(a), s == null || s(a); else if (this.inputRef) { - const s = this.inputRef.current; - s && (s.value = `${u}`, setTimeout(() => { - s.focus(), s.select(); - }, 1)); + const i = this.inputRef.current; + i && (i.value = `${a}`, setTimeout(() => { + i.focus(), i.select(); + }, 10)); } document.removeEventListener("mousemove", this.handleDragMove), document.removeEventListener("mouseup", this.handleDragEnd); } }); l(this, "handleBlur", (e) => { - const { editing: a, previousValue: u } = this.state, { minValue: i, maxValue: n, onChange: o, onDrag: s, disabled: t } = this.props; - if (t || !a) + const { editing: o, previousValue: a } = this.state, { minValue: s, maxValue: r, onChange: u, onDrag: i, disabled: t } = this.props; + if (t || !o) return; - const r = h( + const n = g( parseFloat(e.target.value), - i, - n + s, + r ); - if (isNaN(r)) { + if (isNaN(n)) { this.setState({ editing: !1 }); @@ -109,20 +109,20 @@ class q extends E { } this.setState({ editing: !1, - currentValue: r, - previousValue: r - }), u !== r && (o == null || o(r), s == null || s(r)); + currentValue: n, + previousValue: n + }), a !== n && (u == null || u(n), i == null || i(n)); }); l(this, "handleKeyDown", (e) => { - const { minValue: a, maxValue: u, onChange: i, onDrag: n, disabled: o } = this.props; - if (o) + const { minValue: o, maxValue: a, onChange: s, onDrag: r, disabled: u } = this.props; + if (u) return; - const { previousValue: s } = this.state; + const { previousValue: i } = this.state; if (e.key === D.Enter) { - const t = h( + const t = g( parseFloat(e.currentTarget.value), - a, - u + o, + a ); if (isNaN(t)) { this.setState({ @@ -134,8 +134,8 @@ class q extends E { editing: !1, currentValue: t, previousValue: t - }), s !== t && (i == null || i(t), n == null || n(t)); - } else T(e.key) && this.setState({ + }), i !== t && (s == null || s(t), r == null || r(t)); + } else M(e.key) && this.setState({ editing: !1 }); }); @@ -148,47 +148,47 @@ class q extends E { }); } render() { - const { dragging: e, editing: a, currentValue: u } = this.state, { - className: i, - fluid: n, - animated: o, - unit: s, + const { dragging: e, editing: o, currentValue: a } = this.state, { + className: s, + fluid: r, + animated: u, + unit: i, value: t, - minValue: r, + minValue: n, maxValue: f, - height: v, + height: m, width: S, lineHeight: b, fontSize: y, - format: V + format: v } = this.props; - let m = parseFloat(t.toString()); - e && (m = u); + let h = parseFloat(t.toString()); + e && (h = a); const x = /* @__PURE__ */ _("div", { className: p.content, children: [ - o && !e ? /* @__PURE__ */ g(M, { value: m, format: V }) : V ? V(m) : m, - s ? " " + s : "" + u && !e ? /* @__PURE__ */ V(R, { value: h, format: v }) : v ? v(h) : h, + i ? " " + i : "" ] }); return /* @__PURE__ */ _( - R, + Y, { className: F([ p.numberInput, - n && p.fluid, - i + r && p.fluid, + s ]), minWidth: S, - minHeight: v, + minHeight: m, lineHeight: b, fontSize: y, onMouseDown: this.handleDragStart, children: [ - /* @__PURE__ */ g("div", { className: p.barContainer, children: /* @__PURE__ */ g( + /* @__PURE__ */ V("div", { className: p.barContainer, children: /* @__PURE__ */ V( "div", { className: p.bar, style: { - height: h( - (m - r) / (f - r) * 100, + height: g( + (h - n) / (f - n) * 100, 0, 100 ) + "%" @@ -196,14 +196,14 @@ class q extends E { } ) }), x, - /* @__PURE__ */ g( + /* @__PURE__ */ V( "input", { ref: this.inputRef, className: p.inner, style: { - display: a ? "inline" : "none", - height: v, + display: o ? "inline" : "none", + height: m, lineHeight: b, fontSize: y }, @@ -217,5 +217,5 @@ class q extends E { } } export { - q as NumberInput + J as NumberInput }; diff --git a/dist/components/Slider.d.ts b/dist/components/Slider.d.ts index 98ac961..53c1aca 100644 --- a/dist/components/Slider.d.ts +++ b/dist/components/Slider.d.ts @@ -15,6 +15,8 @@ type Props = { className: string; /** Color of the slider. */ color: string; + /** Disables the slider. */ + disabled: boolean; /** If set, this value will be used to set the fill percentage of the progress bar filler independently of the main value. */ fillValue: number; /** Format value using this function before displaying it. */ diff --git a/dist/components/TextArea.d.ts b/dist/components/TextArea.d.ts index d4fdd8c..a976786 100644 --- a/dist/components/TextArea.d.ts +++ b/dist/components/TextArea.d.ts @@ -24,6 +24,7 @@ export declare const TextArea: import('react').ForwardRefExoticComponent & Partial> & Partial> & Partial<{ onClick: import('react').MouseEventHandler; @@ -32,6 +33,7 @@ export declare const TextArea: import('react').ForwardRefExoticComponent; onKeyUp: import('react').KeyboardEventHandler; onMouseDown: import('react').MouseEventHandler; + onMouseLeave: import('react').MouseEventHandler; onMouseMove: import('react').MouseEventHandler; onMouseOver: import('react').MouseEventHandler; onMouseUp: import('react').MouseEventHandler; diff --git a/dist/components/index.d.ts b/dist/components/index.d.ts index 0bdfaa9..a06d765 100644 --- a/dist/components/index.d.ts +++ b/dist/components/index.d.ts @@ -18,6 +18,7 @@ export { FitText } from './FitText'; export { Flex } from './Flex'; export { Icon } from './Icon'; export { Image } from './Image'; +export { ImageButton } from './ImageButton'; export { InfinitePlane } from './InfinitePlane'; export { Input } from './Input'; export { KeyListener } from './KeyListener'; diff --git a/dist/components/index.js b/dist/components/index.js index 9155325..0f6109b 100644 --- a/dist/components/index.js +++ b/dist/components/index.js @@ -1,13 +1,13 @@ import { AnimatedNumber as e } from "./AnimatedNumber.js"; -import { Autofocus as p } from "./Autofocus.js"; +import { Autofocus as m } from "./Autofocus.js"; import { Blink as x } from "./Blink.js"; import { BlockQuote as i } from "./BlockQuote.js"; -import { Box as a } from "./Box.js"; +import { Box as l } from "./Box.js"; import { Button as u } from "./Button.js"; import { ByondUi as c } from "./ByondUi.js"; import { Chart as b } from "./Chart.js"; -import { Collapsible as D } from "./Collapsible.js"; -import { ColorBox as T } from "./ColorBox.js"; +import { Collapsible as I } from "./Collapsible.js"; +import { ColorBox as D } from "./ColorBox.js"; import { Dialog as C } from "./Dialog.js"; import { Dimmer as L } from "./Dimmer.js"; import { Divider as y } from "./Divider.js"; @@ -18,42 +18,43 @@ import { FitText as h } from "./FitText.js"; import { Flex as w } from "./Flex.js"; import { Icon as O } from "./Icon.js"; import { Image as U } from "./Image.js"; -import { InfinitePlane as j } from "./InfinitePlane.js"; -import { Input as z } from "./Input.js"; -import { KeyListener as H } from "./KeyListener.js"; -import { Knob as W } from "./Knob.js"; -import { LabeledControls as Y } from "./LabeledControls.js"; -import { LabeledList as _ } from "./LabeledList.js"; -import { MenuBar as oo } from "./MenuBar.js"; -import { Modal as eo } from "./Modal.js"; -import { NoticeBox as po } from "./NoticeBox.js"; -import { NumberInput as xo } from "./NumberInput.js"; -import { Popper as io } from "./Popper.js"; -import { ProgressBar as ao } from "./ProgressBar.js"; -import { RestrictedInput as uo } from "./RestrictedInput.js"; -import { RoundGauge as co } from "./RoundGauge.js"; -import { Section as Bo } from "./Section.js"; -import { Slider as Io } from "./Slider.js"; -import { Stack as go } from "./Stack.js"; -import { StyleableSection as ko } from "./StyleableSection.js"; -import { Table as So } from "./Table.js"; -import { Tabs as Ao } from "./Tabs.js"; -import { TextArea as Po } from "./TextArea.js"; -import { TimeDisplay as Ko } from "./TimeDisplay.js"; -import { Tooltip as Ro } from "./Tooltip.js"; -import { TrackOutsideClicks as vo } from "./TrackOutsideClicks.js"; -import { VirtualList as Go } from "./VirtualList.js"; +import { ImageButton as j } from "./ImageButton.js"; +import { InfinitePlane as z } from "./InfinitePlane.js"; +import { Input as H } from "./Input.js"; +import { KeyListener as W } from "./KeyListener.js"; +import { Knob as Y } from "./Knob.js"; +import { LabeledControls as _ } from "./LabeledControls.js"; +import { LabeledList as oo } from "./LabeledList.js"; +import { MenuBar as eo } from "./MenuBar.js"; +import { Modal as mo } from "./Modal.js"; +import { NoticeBox as xo } from "./NoticeBox.js"; +import { NumberInput as io } from "./NumberInput.js"; +import { Popper as lo } from "./Popper.js"; +import { ProgressBar as uo } from "./ProgressBar.js"; +import { RestrictedInput as co } from "./RestrictedInput.js"; +import { RoundGauge as Bo } from "./RoundGauge.js"; +import { Section as go } from "./Section.js"; +import { Slider as To } from "./Slider.js"; +import { Stack as ko } from "./Stack.js"; +import { StyleableSection as So } from "./StyleableSection.js"; +import { Table as Ao } from "./Table.js"; +import { Tabs as Po } from "./Tabs.js"; +import { TextArea as Ko } from "./TextArea.js"; +import { TimeDisplay as Ro } from "./TimeDisplay.js"; +import { Tooltip as vo } from "./Tooltip.js"; +import { TrackOutsideClicks as Go } from "./TrackOutsideClicks.js"; +import { VirtualList as Qo } from "./VirtualList.js"; export { e as AnimatedNumber, - p as Autofocus, + m as Autofocus, x as Blink, i as BlockQuote, - a as Box, + l as Box, u as Button, c as ByondUi, b as Chart, - D as Collapsible, - T as ColorBox, + I as Collapsible, + D as ColorBox, C as Dialog, L as Dimmer, y as Divider, @@ -64,29 +65,30 @@ export { w as Flex, O as Icon, U as Image, - j as InfinitePlane, - z as Input, - H as KeyListener, - W as Knob, - Y as LabeledControls, - _ as LabeledList, - oo as MenuBar, - eo as Modal, - po as NoticeBox, - xo as NumberInput, - io as Popper, - ao as ProgressBar, - uo as RestrictedInput, - co as RoundGauge, - Bo as Section, - Io as Slider, - go as Stack, - ko as StyleableSection, - So as Table, - Ao as Tabs, - Po as TextArea, - Ko as TimeDisplay, - Ro as Tooltip, - vo as TrackOutsideClicks, - Go as VirtualList + j as ImageButton, + z as InfinitePlane, + H as Input, + W as KeyListener, + Y as Knob, + _ as LabeledControls, + oo as LabeledList, + eo as MenuBar, + mo as Modal, + xo as NoticeBox, + io as NumberInput, + lo as Popper, + uo as ProgressBar, + co as RestrictedInput, + Bo as RoundGauge, + go as Section, + To as Slider, + ko as Stack, + So as StyleableSection, + Ao as Table, + Po as Tabs, + Ko as TextArea, + Ro as TimeDisplay, + vo as Tooltip, + Go as TrackOutsideClicks, + Qo as VirtualList }; diff --git a/package.json b/package.json index 7f113f0..c56c722 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tgui-core", - "version": "1.1.24", + "version": "1.2.0", "description": "TGUI core component library", "keywords": [ "TGUI",