From abb0ced6cbbb48353281f119dbb8214824de1ee9 Mon Sep 17 00:00:00 2001 From: robuddybot <65057909+robuddybot@users.noreply.github.com> Date: Fri, 6 Sep 2024 22:37:44 +0000 Subject: [PATCH] Build & Release v1.1.24 --- dist/Section.module-CLVHJ4yA.js | 15 -- dist/Section.module-qhQWhlUX.js | 18 ++ dist/assets/Section.css | 2 +- dist/components/Button.d.ts | 2 + dist/components/Button.js | 353 ++++++++++++++-------------- dist/components/Collapsible.d.ts | 2 + dist/components/Collapsible.js | 40 ++-- dist/components/Input.js | 88 +++---- dist/components/NoticeBox.d.ts | 5 +- dist/components/NoticeBox.js | 61 ++--- dist/components/NumberInput.js | 98 ++++---- dist/components/Section.d.ts | 61 +++-- dist/components/Section.js | 127 +++++----- dist/components/StyleableSection.js | 2 +- dist/components/Tabs.d.ts | 1 + dist/components/Tabs.js | 133 ++++++----- dist/components/TextArea.js | 72 +++--- dist/components/TimeDisplay.js | 16 +- package.json | 2 +- 19 files changed, 566 insertions(+), 532 deletions(-) delete mode 100644 dist/Section.module-CLVHJ4yA.js create mode 100644 dist/Section.module-qhQWhlUX.js diff --git a/dist/Section.module-CLVHJ4yA.js b/dist/Section.module-CLVHJ4yA.js deleted file mode 100644 index 7118359..0000000 --- a/dist/Section.module-CLVHJ4yA.js +++ /dev/null @@ -1,15 +0,0 @@ -import './assets/Section.css';const t = "_section_1awt0_17", l = "_title_1awt0_28", o = "_titleText_1awt0_34", s = "_buttons_1awt0_40", _ = "_rest_1awt0_47", e = "_content_1awt0_51", n = "_fitted_1awt0_55", c = "_fill_1awt0_59", a = "_scrollable_1awt0_73", i = "_scrollableHorizontal_1awt0_90", r = { - section: t, - title: l, - titleText: o, - buttons: s, - rest: _, - content: e, - fitted: n, - fill: c, - scrollable: a, - scrollableHorizontal: i -}; -export { - r as s -}; diff --git a/dist/Section.module-qhQWhlUX.js b/dist/Section.module-qhQWhlUX.js new file mode 100644 index 0000000..56b1409 --- /dev/null +++ b/dist/Section.module-qhQWhlUX.js @@ -0,0 +1,18 @@ +import './assets/Section.css';const t = "_section_10c68_17", _ = "_title_10c68_28", n = "_titleText_10c68_34", o = "_buttons_10c68_40", c = "_rest_10c68_47", e = "_content_10c68_51", s = "_fitted_10c68_55", l = "_fill_10c68_59", i = "_scrollable_10c68_73", r = "_scrollableHorizontal_10c68_90", a = "_section__flex_10c68_125", b = "_content__noTopPadding_10c68_135", d = "_content__stretchContents_10c68_139", f = { + section: t, + title: _, + titleText: n, + buttons: o, + rest: c, + content: e, + fitted: s, + fill: l, + scrollable: i, + scrollableHorizontal: r, + section__flex: a, + content__noTopPadding: b, + content__stretchContents: d +}; +export { + f as s +}; diff --git a/dist/assets/Section.css b/dist/assets/Section.css index a904c6f..5cdd3be 100644 --- a/dist/assets/Section.css +++ b/dist/assets/Section.css @@ -1 +1 @@ -._section_1awt0_17{position:relative;margin-bottom:.5em;background-color:#191919;background-color:#00000054;box-sizing:border-box}._section_1awt0_17:last-child{margin-bottom:0}._title_1awt0_28{position:relative;padding:.5em;border-bottom:.1666666667em solid #4972a1}._titleText_1awt0_34{font-size:1.1666666667em;font-weight:700;color:#fff}._buttons_1awt0_40{position:absolute;display:inline-block;right:.5em;margin-top:-.0833333333em}._rest_1awt0_47{position:relative}._content_1awt0_51{padding:.66em .5em}._fitted_1awt0_55>._rest_1awt0_47>._content_1awt0_51{padding:0}._fill_1awt0_59{display:flex;flex-direction:column;height:100%}._fill_1awt0_59>._rest_1awt0_47{flex-grow:1}._fill_1awt0_59>._rest_1awt0_47>._content_1awt0_51{height:100%}._fill_1awt0_59._scrollable_1awt0_73>._rest_1awt0_47>._content_1awt0_51{position:absolute;top:0;left:0;right:0;bottom:0}._scrollable_1awt0_73{overflow-x:hidden;overflow-y:hidden}._scrollable_1awt0_73>._rest_1awt0_47>._content_1awt0_51{overflow-y:scroll;overflow-x:hidden}._scrollableHorizontal_1awt0_90{overflow-x:hidden;overflow-y:hidden}._scrollableHorizontal_1awt0_90>._rest_1awt0_47>._content_1awt0_51{overflow-y:hidden;overflow-x:scroll}._scrollable_1awt0_73._scrollableHorizontal_1awt0_90{overflow-x:hidden;overflow-y:hidden}._scrollable_1awt0_73._scrollableHorizontal_1awt0_90>._rest_1awt0_47>._content_1awt0_51{overflow-y:scroll;overflow-x:scroll}._section_1awt0_17 ._section_1awt0_17{background-color:transparent;margin-left:-.5em;margin-right:-.5em}._section_1awt0_17 ._section_1awt0_17:first-child{margin-top:-.5em}._section_1awt0_17 ._section_1awt0_17 ._titleText_1awt0_34{font-size:1.0833333333em}._section_1awt0_17 ._section_1awt0_17 ._section_1awt0_17 ._titleText_1awt0_34{font-size:1em} +._section_10c68_17{position:relative;margin-bottom:.5em;background-color:#191919;background-color:#00000054;box-sizing:border-box}._section_10c68_17:last-child{margin-bottom:0}._title_10c68_28{position:relative;padding:.5em;border-bottom:.1666666667em solid #4972a1}._titleText_10c68_34{font-size:1.1666666667em;font-weight:700;color:#fff}._buttons_10c68_40{position:absolute;display:inline-block;right:.5em;margin-top:-.0833333333em}._rest_10c68_47{position:relative}._content_10c68_51{padding:.66em .5em}._fitted_10c68_55>._rest_10c68_47>._content_10c68_51{padding:0}._fill_10c68_59{display:flex;flex-direction:column;height:100%}._fill_10c68_59>._rest_10c68_47{flex-grow:1}._fill_10c68_59>._rest_10c68_47>._content_10c68_51{height:100%}._fill_10c68_59._scrollable_10c68_73>._rest_10c68_47>._content_10c68_51{position:absolute;top:0;left:0;right:0;bottom:0}._scrollable_10c68_73{overflow-x:hidden;overflow-y:hidden}._scrollable_10c68_73>._rest_10c68_47>._content_10c68_51{overflow-y:scroll;overflow-x:hidden}._scrollableHorizontal_10c68_90{overflow-x:hidden;overflow-y:hidden}._scrollableHorizontal_10c68_90>._rest_10c68_47>._content_10c68_51{overflow-y:hidden;overflow-x:scroll}._scrollable_10c68_73._scrollableHorizontal_10c68_90{overflow-x:hidden;overflow-y:hidden}._scrollable_10c68_73._scrollableHorizontal_10c68_90>._rest_10c68_47>._content_10c68_51{overflow-y:scroll;overflow-x:scroll}._section_10c68_17 ._section_10c68_17{background-color:transparent;margin-left:-.5em;margin-right:-.5em}._section_10c68_17 ._section_10c68_17:first-child{margin-top:-.5em}._section_10c68_17 ._section_10c68_17 ._titleText_10c68_34{font-size:1.0833333333em}._section_10c68_17 ._section_10c68_17 ._section_10c68_17 ._titleText_10c68_34{font-size:1em}._section__flex_10c68_125{display:flex;flex-flow:column}._section__flex_10c68_125 ._content_10c68_51{overflow:auto;flex-grow:1}._content__noTopPadding_10c68_135{padding-top:0}._content__stretchContents_10c68_139{height:calc(100% - 3rem)} diff --git a/dist/components/Button.d.ts b/dist/components/Button.d.ts index dce2b52..29540e3 100644 --- a/dist/components/Button.d.ts +++ b/dist/components/Button.d.ts @@ -40,6 +40,8 @@ type Props = Partial<{ iconPosition: string; /** Icon rotation */ iconRotation: number; + /** Icon size */ + iconSize: number; /** Makes the icon spin */ iconSpin: BooleanLike; /** Called when element is clicked */ diff --git a/dist/components/Button.js b/dist/components/Button.js index 30aef24..862e5da 100644 --- a/dist/components/Button.js +++ b/dist/components/Button.js @@ -1,267 +1,270 @@ -import { jsx as l, jsxs as E, Fragment as S } from "react/jsx-runtime"; -import { useState as F, createRef as K, useEffect as M, useRef as V } from "react"; -import { KEY as I } from "../common/keys.js"; -import { classes as R } from "../common/react.js"; -import { computeBoxClassName as j, computeBoxProps as q, Box as O } from "./Box.js"; -import { Icon as D } from "./Icon.js"; -import { Tooltip as P } from "./Tooltip.js"; -import '../assets/Button.css';const T = "_button_433yx_17", L = "_fa_433yx_34", Y = "_fas_433yx_35", z = "_far_433yx_36", G = "_dropdown_433yx_43", H = "_ellipsis_433yx_49", J = "_fluid_433yx_54", Q = "_circular_433yx_60", U = "_compact_433yx_64", W = "_color__black_433yx_69", X = "_color__white_433yx_82", Z = "_color__red_433yx_95", $ = "_color__orange_433yx_108", oo = "_color__yellow_433yx_121", to = "_color__olive_433yx_134", _o = "_color__green_433yx_147", no = "_color__teal_433yx_160", eo = "_color__blue_433yx_173", lo = "_color__violet_433yx_186", co = "_color__purple_433yx_199", ro = "_color__pink_433yx_212", io = "_color__brown_433yx_225", so = "_color__grey_433yx_238", ao = "_color__good_433yx_264", uo = "_color__average_433yx_277", fo = "_color__bad_433yx_290", po = "_color__label_433yx_303", yo = "_color__default_433yx_316", xo = "_color__caution_433yx_329", mo = "_color__danger_433yx_342", go = "_color__transparent_433yx_355", bo = "_disabled_433yx_370", ho = "_selected_433yx_374", Co = "_flex_433yx_387", ko = "_flex__fluid_433yx_392", vo = "_verticalAlignContent__top_433yx_396", wo = "_verticalAlignContent__middle_433yx_400", Ao = "_verticalAlignContent__bottom_433yx_404", Bo = "_content_433yx_408", Io = "_textMargin_433yx_413", _ = { - button: T, - fa: L, - fas: Y, - far: z, - dropdown: G, - ellipsis: H, - fluid: J, - circular: Q, - compact: U, - color__black: W, - color__white: X, - color__red: Z, - color__orange: $, - color__yellow: oo, - color__olive: to, - color__green: _o, - color__teal: no, - color__blue: eo, - color__violet: lo, - color__purple: co, - color__pink: ro, - color__brown: io, - color__grey: so, +import { jsx as l, jsxs as P, Fragment as M } from "react/jsx-runtime"; +import { useState as S, createRef as V, useEffect as z, useRef as j } from "react"; +import { KEY as R, isEscape as E } from "../common/keys.js"; +import { classes as D } from "../common/react.js"; +import { computeBoxClassName as q, computeBoxProps as O, Box as T } from "./Box.js"; +import { Icon as F } from "./Icon.js"; +import { Tooltip as K } from "./Tooltip.js"; +import '../assets/Button.css';const L = "_button_433yx_17", Y = "_fa_433yx_34", G = "_fas_433yx_35", H = "_far_433yx_36", J = "_dropdown_433yx_43", Q = "_ellipsis_433yx_49", U = "_fluid_433yx_54", W = "_circular_433yx_60", X = "_compact_433yx_64", Z = "_color__black_433yx_69", $ = "_color__white_433yx_82", oo = "_color__red_433yx_95", to = "_color__orange_433yx_108", _o = "_color__yellow_433yx_121", no = "_color__olive_433yx_134", eo = "_color__green_433yx_147", lo = "_color__teal_433yx_160", co = "_color__blue_433yx_173", ro = "_color__violet_433yx_186", io = "_color__purple_433yx_199", so = "_color__pink_433yx_212", ao = "_color__brown_433yx_225", uo = "_color__grey_433yx_238", fo = "_color__good_433yx_264", po = "_color__average_433yx_277", yo = "_color__bad_433yx_290", xo = "_color__label_433yx_303", mo = "_color__default_433yx_316", go = "_color__caution_433yx_329", bo = "_color__danger_433yx_342", ho = "_color__transparent_433yx_355", Co = "_disabled_433yx_370", ko = "_selected_433yx_374", vo = "_flex_433yx_387", wo = "_flex__fluid_433yx_392", Ao = "_verticalAlignContent__top_433yx_396", Bo = "_verticalAlignContent__middle_433yx_400", Io = "_verticalAlignContent__bottom_433yx_404", No = "_content_433yx_408", Ro = "_textMargin_433yx_413", _ = { + button: L, + fa: Y, + fas: G, + far: H, + dropdown: J, + ellipsis: Q, + fluid: U, + circular: W, + compact: X, + color__black: Z, + color__white: $, + color__red: oo, + color__orange: to, + color__yellow: _o, + color__olive: no, + color__green: eo, + color__teal: lo, + color__blue: co, + color__violet: ro, + color__purple: io, + color__pink: so, + color__brown: ao, + color__grey: uo, "color__light-grey": "_color__light-grey_433yx_251", - color__good: ao, - color__average: uo, - color__bad: fo, - color__label: po, - color__default: yo, - color__caution: xo, - color__danger: mo, - color__transparent: go, - disabled: bo, - selected: ho, - flex: Co, - flex__fluid: ko, - verticalAlignContent__top: vo, - verticalAlignContent__middle: wo, - verticalAlignContent__bottom: Ao, - content: Bo, - textMargin: Io + color__good: fo, + color__average: po, + color__bad: yo, + color__label: xo, + color__default: mo, + color__caution: go, + color__danger: bo, + color__transparent: ho, + disabled: Co, + selected: ko, + flex: vo, + flex__fluid: wo, + verticalAlignContent__top: Ao, + verticalAlignContent__middle: Bo, + verticalAlignContent__bottom: Io, + content: No, + textMargin: Ro }; -function g(u) { +function b(a) { const { - captureKeys: s = !0, - children: a, + captureKeys: i = !0, + children: s, circular: y, - className: f, - color: i, - compact: b, + className: p, + color: r, + compact: h, content: x, disabled: o, ellipsis: c, fluid: n, icon: e, - iconColor: d, - iconPosition: v, - iconRotation: w, - iconSpin: N, - onClick: h, + iconColor: u, + iconPosition: w, + iconRotation: A, + iconSize: B, + iconSpin: I, + onClick: d, selected: C, - tooltip: m, - tooltipPosition: A, - verticalAlignContent: k, - ...B - } = u, p = x || a; - let t = /* @__PURE__ */ l( + tooltip: k, + tooltipPosition: N, + verticalAlignContent: m, + ...v + } = a, t = x || s; + let g = /* @__PURE__ */ l( "div", { - className: R([ + className: D([ _.button, n && _.fluid, o && _.disabled, C && _.selected, y && _.circular, - b && _.compact, - k && _.flex, - k && n && _.flex__fluid, - k && _["verticalAlignContent__" + k], - i && typeof i == "string" ? _["color__" + i] : _.color__default, - f, - j(B) + h && _.compact, + m && _.flex, + m && n && _.flex__fluid, + m && _["verticalAlignContent__" + m], + r && typeof r == "string" ? _["color__" + r] : _.color__default, + p, + q(v) ]), tabIndex: o ? void 0 : 0, - onClick: (r) => { - !o && h && h(r); + onClick: (f) => { + !o && d && d(f); }, - onKeyDown: (r) => { - if (s) { - if (r.key === I.Space || r.key === I.Enter) { - r.preventDefault(), !o && h && h(r); + onKeyDown: (f) => { + if (i) { + if (f.key === R.Space || f.key === R.Enter) { + f.preventDefault(), !o && d && d(f); return; } - r.key === I.Escape && r.preventDefault(); + E(f.key) && f.preventDefault(); } }, - ...q(B), - children: /* @__PURE__ */ E("div", { className: _.content, children: [ - e && v !== "right" && /* @__PURE__ */ l( - D, + ...O(v), + children: /* @__PURE__ */ P("div", { className: _.content, children: [ + e && w !== "right" && /* @__PURE__ */ l( + F, { - mr: p ? 1 : 0, + mr: t ? 1 : 0, name: e, - color: d, - rotation: w, - spin: N + color: u, + rotation: A, + size: B, + spin: I } ), c ? /* @__PURE__ */ l( "span", { - className: R([_.ellipsis, e && _.textMargin]), - children: p + className: D([_.ellipsis, e && _.textMargin]), + children: t } - ) : p, - e && v === "right" && /* @__PURE__ */ l( - D, + ) : t, + e && w === "right" && /* @__PURE__ */ l( + F, { - ml: p ? 1 : 0, + ml: t ? 1 : 0, name: e, - color: d, - rotation: w, - spin: N + color: u, + rotation: A, + size: B, + spin: I } ) ] }) } ); - return m && (t = /* @__PURE__ */ l(P, { content: m, position: A, children: t })), t; + return k && (g = /* @__PURE__ */ l(K, { content: k, position: N, children: g })), g; } -function No(u) { - const { checked: s, ...a } = u; +function Do(a) { + const { checked: i, ...s } = a; return /* @__PURE__ */ l( - g, + b, { color: "transparent", - icon: s ? "check-square-o" : "square-o", - selected: s, - ...a + icon: i ? "check-square-o" : "square-o", + selected: i, + ...s } ); } -g.Checkbox = No; -function Ro(u) { +b.Checkbox = Do; +function Fo(a) { const { - children: s, - color: a, + children: i, + color: s, confirmColor: y = "bad", - confirmContent: f = "Confirm?", - confirmIcon: i, - ellipsis: b = !0, + confirmContent: p = "Confirm?", + confirmIcon: r, + ellipsis: h = !0, icon: x, onClick: o, ...c - } = u, [n, e] = F(!1); - function d(v) { + } = a, [n, e] = S(!1); + function u(w) { if (!n) { e(!0); return; } - o == null || o(v), e(!1); + o == null || o(w), e(!1); } return /* @__PURE__ */ l( - g, + b, { - icon: n ? i : x, - color: n ? y : a, - onClick: d, + icon: n ? r : x, + color: n ? y : s, + onClick: u, ...c, - children: n ? f : s + children: n ? p : i } ); } -g.Confirm = Ro; -function Do(u) { +b.Confirm = Fo; +function Po(a) { const { - children: s, - color: a = "default", + children: i, + color: s = "default", content: y, - currentValue: f, - defaultValue: i, - disabled: b, + currentValue: p, + defaultValue: r, + disabled: h, fluid: x, icon: o, iconRotation: c, iconSpin: n, maxLength: e, - onCommit: d = () => null, - placeholder: v, - tooltip: w, - tooltipPosition: N, - ...h - } = u, [C, m] = F(!1), A = K(), k = y || s; - function B(t) { - const r = A.current; - if (!r) return; - r.value !== "" ? d(t, r.value) : i && d(t, i); + onCommit: u = () => null, + placeholder: w, + tooltip: A, + tooltipPosition: B, + ...I + } = a, [d, C] = S(!1), k = V(), N = y || i; + function m(t) { + const g = k.current; + if (!g) return; + g.value !== "" ? u(t, g.value) : r && u(t, r); } - M(() => { - const t = A.current; - if (t && C) { - t.value = f || ""; + z(() => { + const t = k.current; + if (t && d) { + t.value = p || ""; try { t.focus(), t.select(); } catch { } } - }, [C, f]); - let p = /* @__PURE__ */ E( - O, + }, [d, p]); + let v = /* @__PURE__ */ P( + T, { - className: R([ + className: D([ _.button, x && _.fluid, - _["color__" + a] + _["color__" + s] ]), - ...h, - onClick: () => m(!0), + ...I, + onClick: () => C(!0), children: [ - o && /* @__PURE__ */ l(D, { name: o, rotation: c, spin: n }), - /* @__PURE__ */ l("div", { children: k }), + o && /* @__PURE__ */ l(F, { name: o, rotation: c, spin: n }), + /* @__PURE__ */ l("div", { children: N }), /* @__PURE__ */ l( "input", { - disabled: !!b, - ref: A, + disabled: !!h, + ref: k, className: "NumberInput__input", style: { - display: C ? "" : "none", + display: d ? "" : "none", textAlign: "left" }, onBlur: (t) => { - C && (m(!1), B(t)); + d && (C(!1), m(t)); }, onKeyDown: (t) => { - if (t.key === I.Enter) { - m(!1), B(t); + if (t.key === R.Enter) { + C(!1), m(t); return; } - t.key === I.Escape && m(!1); + E(t.key) && C(!1); } } ) ] } ); - return w && (p = /* @__PURE__ */ l(P, { content: w, position: N, children: p })), p; + return A && (v = /* @__PURE__ */ l(K, { content: A, position: B, children: v })), v; } -g.Input = Do; -function Eo(u) { - const { accept: s, multiple: a, onSelectFiles: y, ...f } = u, i = V(null); - async function b(o) { +b.Input = Po; +function So(a) { + const { accept: i, multiple: s, onSelectFiles: y, ...p } = a, r = j(null); + async function h(o) { const c = Array.from(o).map((n) => { const e = new FileReader(); - return new Promise((d) => { - e.onload = () => d(e.result), e.readAsText(n); + return new Promise((u) => { + e.onload = () => u(e.result), e.readAsText(n); }); }); return await Promise.all(c); @@ -269,30 +272,30 @@ function Eo(u) { async function x(o) { const c = o.target.files; if (c != null && c.length) { - const n = await b(c); - y(a ? n : n[0]); + const n = await h(c); + y(s ? n : n[0]); } } - return /* @__PURE__ */ E(S, { children: [ - /* @__PURE__ */ l(g, { onClick: () => { + return /* @__PURE__ */ P(M, { children: [ + /* @__PURE__ */ l(b, { onClick: () => { var o; - return (o = i.current) == null ? void 0 : o.click(); - }, ...f }), + return (o = r.current) == null ? void 0 : o.click(); + }, ...p }), /* @__PURE__ */ l( "input", { hidden: !0, type: "file", - ref: i, - accept: s, - multiple: a, + ref: r, + accept: i, + multiple: s, onChange: x } ) ] }); } -g.File = Eo; +b.File = So; export { - g as Button, - No as ButtonCheckbox + b as Button, + Do as ButtonCheckbox }; diff --git a/dist/components/Collapsible.d.ts b/dist/components/Collapsible.d.ts index 26fa9be..bbb1b50 100644 --- a/dist/components/Collapsible.d.ts +++ b/dist/components/Collapsible.d.ts @@ -4,6 +4,8 @@ import { BoxProps } from './Box'; type Props = Partial<{ /** Buttons or other content to render inline with the button */ buttons: ReactNode; + /** Top margin of the child nodes, defaulted to 1 */ + child_mt: number; /** Icon to display with the collapsible */ icon: string; /** Whether the collapsible is open */ diff --git a/dist/components/Collapsible.js b/dist/components/Collapsible.js index 131395d..e06ad25 100644 --- a/dist/components/Collapsible.js +++ b/dist/components/Collapsible.js @@ -1,27 +1,35 @@ -import { jsxs as i, jsx as e } from "react/jsx-runtime"; -import { useState as h } from "react"; -import { Box as r } from "./Box.js"; -import { Button as p } from "./Button.js"; -function v(o) { - const { children: t, color: s, title: a, buttons: n, icon: c, ...m } = o, [l, d] = h(o.open); - return /* @__PURE__ */ i(r, { mb: 1, children: [ - /* @__PURE__ */ i("div", { className: "Table", children: [ +import { jsxs as n, jsx as e } from "react/jsx-runtime"; +import { useState as p } from "react"; +import { Box as t } from "./Box.js"; +import { Button as b } from "./Button.js"; +function x(o) { + const { + children: r, + child_mt: s = 1, + color: m, + title: a, + buttons: c, + icon: i, + ...d + } = o, [l, h] = p(o.open); + return /* @__PURE__ */ n(t, { mb: 1, children: [ + /* @__PURE__ */ n("div", { className: "Table", children: [ /* @__PURE__ */ e("div", { className: "Table__cell", children: /* @__PURE__ */ e( - p, + b, { fluid: !0, - color: s, - icon: c || (l ? "chevron-down" : "chevron-right"), - onClick: () => d(!l), - ...m, + color: m, + icon: i || (l ? "chevron-down" : "chevron-right"), + onClick: () => h(!l), + ...d, children: a } ) }), - n && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: n }) + c && /* @__PURE__ */ e("div", { className: "Table__cell Table__cell--collapsing", children: c }) ] }), - l && /* @__PURE__ */ e(r, { mt: 1, children: t }) + l && /* @__PURE__ */ e(t, { mt: s, children: r }) ] }); } export { - v as Collapsible + x as Collapsible }; diff --git a/dist/components/Input.js b/dist/components/Input.js index d786826..7540758 100644 --- a/dist/components/Input.js +++ b/dist/components/Input.js @@ -1,82 +1,88 @@ -import { jsxs as j, jsx as p } from "react/jsx-runtime"; -import { useRef as k, useEffect as B } from "react"; -import { KEY as m } from "../common/keys.js"; -import { classes as E } from "../common/react.js"; +import { jsxs as K, jsx as m } from "react/jsx-runtime"; +import { useRef as V, useEffect as d } from "react"; +import { KEY as j, isEscape as k } from "../common/keys.js"; +import { classes as B } from "../common/react.js"; import { debounce as R } from "../common/timer.js"; import { Box as S } from "./Box.js"; -import '../assets/Input.css';const V = "_input_17i79_20", F = "_fluid_17i79_35", L = "_baseline_17i79_40", Y = "_inner_17i79_45", q = "_monospace_17i79_71", u = { - input: V, - fluid: F, - baseline: L, - inner: Y, - monospace: q +import '../assets/Input.css';const F = "_input_17i79_20", L = "_fluid_17i79_35", Y = "_baseline_17i79_40", q = "_inner_17i79_45", v = "_monospace_17i79_71", u = { + input: F, + fluid: L, + baseline: Y, + inner: q, + monospace: v }; -function _(r) { +function a(r) { return typeof r != "number" && typeof r != "string" ? "" : String(r); } const z = R((r) => r(), 250); function P(r) { const { - autoFocus: d, - autoSelect: c, + autoFocus: _, + autoSelect: f, className: b, disabled: g, expensive: T, fluid: y, maxLength: x, monospace: h, - onChange: n, + onChange: t, onEnter: i, onEscape: o, onInput: s, - placeholder: I, - selfClear: N, - value: l, - ...w - } = r, a = k(null); + placeholder: w, + selfClear: I, + value: c, + ...N + } = r, l = V(null); function D(e) { - var f; + var p; if (!s) return; - const t = (f = e.currentTarget) == null ? void 0 : f.value; - T ? z(() => s(e, t)) : s(e, t); + const n = (p = e.currentTarget) == null ? void 0 : p.value; + T ? z(() => s(e, n)) : s(e, n); } - function K(e) { - if (e.key === m.Enter) { - i == null || i(e, e.currentTarget.value), N ? e.currentTarget.value = "" : (e.currentTarget.blur(), n == null || n(e, e.currentTarget.value)); + function E(e) { + if (e.key === j.Enter) { + i == null || i(e, e.currentTarget.value), I ? e.currentTarget.value = "" : (e.currentTarget.blur(), t == null || t(e, e.currentTarget.value)); return; } - e.key === m.Escape && (o == null || o(e), e.currentTarget.value = _(l), e.currentTarget.blur()); + k(e.key) && (o == null || o(e), e.currentTarget.value = a(c), e.currentTarget.blur()); } - return B(() => { - const e = a.current; + return d(() => { + const e = l.current; if (!e) return; - const t = _(l); - e.value !== t && (e.value = t), !(!d && !c) && setTimeout(() => { - e.focus(), c && e.select(); + const n = a(c); + e.value !== n && (e.value = n), !(!_ && !f) && setTimeout(() => { + e.focus(), f && e.select(); }, 1); - }, []), /* @__PURE__ */ j( + }, []), d(() => { + const e = l.current; + if (!e || document.activeElement === e) + return; + const n = a(c); + e.value !== n && (e.value = n); + }), /* @__PURE__ */ K( S, { - className: E([ + className: B([ u.input, y && u.fluid, h && u.monospace, b ]), - ...w, + ...N, children: [ - /* @__PURE__ */ p("div", { className: u.baseline, children: "." }), - /* @__PURE__ */ p( + /* @__PURE__ */ m("div", { className: u.baseline, children: "." }), + /* @__PURE__ */ m( "input", { className: u.inner, disabled: g, maxLength: x, - onBlur: (e) => n == null ? void 0 : n(e, e.target.value), + onBlur: (e) => t == null ? void 0 : t(e, e.target.value), onChange: D, - onKeyDown: K, - placeholder: I, - ref: a + onKeyDown: E, + placeholder: w, + ref: l } ) ] @@ -85,5 +91,5 @@ function P(r) { } export { P as Input, - _ as toInputValue + a as toInputValue }; diff --git a/dist/components/NoticeBox.d.ts b/dist/components/NoticeBox.d.ts index 45d8c93..bd43cc9 100644 --- a/dist/components/NoticeBox.d.ts +++ b/dist/components/NoticeBox.d.ts @@ -2,7 +2,7 @@ import { BoxProps } from './Box'; type Props = ExclusiveProps & BoxProps; /** You MUST use only one or none */ -type NoticeType = 'info' | 'success' | 'danger'; +type NoticeType = 'info' | 'success' | 'warning' | 'danger'; type None = { [K in NoticeType]?: undefined; }; @@ -12,6 +12,9 @@ type ExclusiveProps = None | (Omit & { }) | (Omit & { /** Green notice */ success: boolean; +}) | (Omit & { + /** Orange notice */ + warning: boolean; }) | (Omit & { /** Red notice */ danger: boolean; diff --git a/dist/components/NoticeBox.js b/dist/components/NoticeBox.js index 7a2abbf..dd50961 100644 --- a/dist/components/NoticeBox.js +++ b/dist/components/NoticeBox.js @@ -1,49 +1,50 @@ -import { jsx as t } from "react/jsx-runtime"; -import { classes as a } from "../common/react.js"; +import { jsx as a } from "react/jsx-runtime"; +import { classes as i } from "../common/react.js"; import { Box as y } from "./Box.js"; -import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", i = "_color__black_56yom_28", g = "_color__white_56yom_33", b = "_color__red_56yom_38", d = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", w = "_color__green_56yom_58", f = "_color__teal_56yom_63", v = "_color__blue_56yom_68", x = "_color__violet_56yom_73", k = "_color__purple_56yom_78", B = "_color__pink_56yom_83", h = "_color__brown_56yom_88", N = "_color__grey_56yom_93", j = "_color__good_56yom_103", q = "_color__average_56yom_108", z = "_color__bad_56yom_113", A = "_color__label_56yom_118", C = "_info_56yom_123", D = "_success_56yom_128", E = "_warning_56yom_133", F = "_danger_56yom_138", o = { +import '../assets/NoticeBox.css';const m = "_noticeBox_56yom_17", g = "_color__black_56yom_28", b = "_color__white_56yom_33", d = "_color__red_56yom_38", w = "_color__orange_56yom_43", p = "_color__yellow_56yom_48", u = "_color__olive_56yom_53", f = "_color__green_56yom_58", v = "_color__teal_56yom_63", x = "_color__blue_56yom_68", k = "_color__violet_56yom_73", B = "_color__purple_56yom_78", h = "_color__pink_56yom_83", N = "_color__brown_56yom_88", j = "_color__grey_56yom_93", q = "_color__good_56yom_103", z = "_color__average_56yom_108", A = "_color__bad_56yom_113", C = "_color__label_56yom_118", D = "_info_56yom_123", E = "_success_56yom_128", F = "_warning_56yom_133", G = "_danger_56yom_138", o = { noticeBox: m, - color__black: i, - color__white: g, - color__red: b, - color__orange: d, + color__black: g, + color__white: b, + color__red: d, + color__orange: w, color__yellow: p, color__olive: u, - color__green: w, - color__teal: f, - color__blue: v, - color__violet: x, - color__purple: k, - color__pink: B, - color__brown: h, - color__grey: N, + color__green: f, + color__teal: v, + color__blue: x, + color__violet: k, + color__purple: B, + color__pink: h, + color__brown: N, + color__grey: j, "color__light-grey": "_color__light-grey_56yom_98", - color__good: j, - color__average: q, - color__bad: z, - color__label: A, - info: C, - success: D, - warning: E, - danger: F + color__good: q, + color__average: z, + color__bad: A, + color__label: C, + info: D, + success: E, + warning: F, + danger: G }; -function J(c) { - const { className: r, color: _, info: l, success: e, danger: n, ...s } = c; - return /* @__PURE__ */ t( +function K(c) { + const { className: r, color: _, info: l, success: e, warning: n, danger: s, ...t } = c; + return /* @__PURE__ */ a( y, { - className: a([ + className: i([ o.noticeBox, _ && o["color__" + _], l && o.info, e && o.success, - n && o.danger, + n && o.warning, + s && o.danger, r ]), - ...s + ...t } ); } export { - J as NoticeBox + K as NoticeBox }; diff --git a/dist/components/NumberInput.js b/dist/components/NumberInput.js index f7b56fd..b9ed97e 100644 --- a/dist/components/NumberInput.js +++ b/dist/components/NumberInput.js @@ -1,26 +1,26 @@ -import '../assets/NumberInput.css';var w = Object.defineProperty; -var E = (c, d, e) => d in c ? w(c, d, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[d] = e; -var l = (c, d, e) => E(c, typeof d != "symbol" ? d + "" : d, e); +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 { Component as I, createRef as D } from "react"; -import { KEY as S } from "../common/keys.js"; +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 { classes as T } from "../common/react.js"; -import { AnimatedNumber as F } from "./AnimatedNumber.js"; -import { Box as M } from "./Box.js"; -const R = "_numberInput_4xyrw_20", B = "_fluid_4xyrw_36", K = "_content_4xyrw_40", L = "_barContainer_4xyrw_44", Y = "_bar_4xyrw_44", j = "_inner_4xyrw_61", p = { - numberInput: R, - fluid: B, - content: K, - barContainer: L, - bar: Y, - inner: j +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 = { + numberInput: B, + fluid: K, + content: L, + barContainer: Y, + bar: j, + inner: k }; -class $ extends I { +class q extends E { constructor(e) { super(e); // Ref to the input field to set focus & highlight - l(this, "inputRef", D()); + l(this, "inputRef", I()); // After this time has elapsed we are in drag mode so no editing when dragging ends l(this, "dragTimeout"); // Call onDrag at this interval @@ -34,16 +34,16 @@ class $ extends I { origin: 0 }); l(this, "handleDragStart", (e) => { - const { value: a, disabled: u } = this.props, { editing: n } = this.state; - if (u || n) + const { value: a, disabled: u } = this.props, { editing: i } = this.state; + if (u || i) return; document.body.style["pointer-events"] = "none"; - const i = parseFloat(a.toString()); + const n = parseFloat(a.toString()); this.setState({ dragging: !1, origin: e.screenY, - currentValue: i, - previousValue: i + currentValue: n, + previousValue: n }), this.dragTimeout = setTimeout(() => { this.setState({ dragging: !0 @@ -56,17 +56,17 @@ class $ extends I { }, 400), document.addEventListener("mousemove", this.handleDragMove), document.addEventListener("mouseup", this.handleDragEnd); }); l(this, "handleDragMove", (e) => { - const { minValue: a, maxValue: u, step: n, stepPixelSize: i, disabled: o } = this.props; + 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 % n : 0; + const f = isFinite(a) ? a % i : 0; t.currentValue = h( - t.currentValue + r * n / (i || 1), - a - n, - u + n + t.currentValue + r * i / (n || 1), + a - i, + u + i ), t.currentValue = h( - t.currentValue - t.currentValue % n + f, + t.currentValue - t.currentValue % i + f, a, u ), t.origin = e.screenY; @@ -75,14 +75,14 @@ class $ extends I { }); }); l(this, "handleDragEnd", (e) => { - const { dragging: a, currentValue: u } = this.state, { onDrag: n, onChange: i, disabled: o } = this.props; + const { dragging: a, currentValue: u } = this.state, { onDrag: i, onChange: n, disabled: o } = this.props; if (!o) { if (document.body.style["pointer-events"] = "auto", clearInterval(this.dragInterval), clearTimeout(this.dragTimeout), this.setState({ dragging: !1, editing: !a, previousValue: u }), a) - i == null || i(u), n == null || n(u); + n == null || n(u), i == null || i(u); else if (this.inputRef) { const s = this.inputRef.current; s && (s.value = `${u}`, setTimeout(() => { @@ -93,13 +93,13 @@ class $ extends I { } }); l(this, "handleBlur", (e) => { - const { editing: a, previousValue: u } = this.state, { minValue: n, maxValue: i, onChange: o, onDrag: s, disabled: t } = this.props; + const { editing: a, previousValue: u } = this.state, { minValue: i, maxValue: n, onChange: o, onDrag: s, disabled: t } = this.props; if (t || !a) return; const r = h( parseFloat(e.target.value), - n, - i + i, + n ); if (isNaN(r)) { this.setState({ @@ -114,11 +114,11 @@ class $ extends I { }), u !== r && (o == null || o(r), s == null || s(r)); }); l(this, "handleKeyDown", (e) => { - const { minValue: a, maxValue: u, onChange: n, onDrag: i, disabled: o } = this.props; + const { minValue: a, maxValue: u, onChange: i, onDrag: n, disabled: o } = this.props; if (o) return; const { previousValue: s } = this.state; - if (e.key === S.Enter) { + if (e.key === D.Enter) { const t = h( parseFloat(e.currentTarget.value), a, @@ -134,8 +134,8 @@ class $ extends I { editing: !1, currentValue: t, previousValue: t - }), s !== t && (n == null || n(t), i == null || i(t)); - } else e.key === S.Escape && this.setState({ + }), s !== t && (i == null || i(t), n == null || n(t)); + } else T(e.key) && this.setState({ editing: !1 }); }); @@ -149,34 +149,34 @@ class $ extends I { } render() { const { dragging: e, editing: a, currentValue: u } = this.state, { - className: n, - fluid: i, + className: i, + fluid: n, animated: o, unit: s, value: t, minValue: r, maxValue: f, height: v, - width: x, + width: S, lineHeight: b, fontSize: y, format: V } = this.props; let m = parseFloat(t.toString()); e && (m = u); - const N = /* @__PURE__ */ _("div", { className: p.content, children: [ - o && !e ? /* @__PURE__ */ g(F, { value: m, format: V }) : V ? V(m) : m, + const x = /* @__PURE__ */ _("div", { className: p.content, children: [ + o && !e ? /* @__PURE__ */ g(M, { value: m, format: V }) : V ? V(m) : m, s ? " " + s : "" ] }); return /* @__PURE__ */ _( - M, + R, { - className: T([ + className: F([ p.numberInput, - i && p.fluid, - n + n && p.fluid, + i ]), - minWidth: x, + minWidth: S, minHeight: v, lineHeight: b, fontSize: y, @@ -195,7 +195,7 @@ class $ extends I { } } ) }), - N, + x, /* @__PURE__ */ g( "input", { @@ -217,5 +217,5 @@ class $ extends I { } } export { - $ as NumberInput + q as NumberInput }; diff --git a/dist/components/Section.d.ts b/dist/components/Section.d.ts index cffb87c..43d49e8 100644 --- a/dist/components/Section.d.ts +++ b/dist/components/Section.d.ts @@ -1,5 +1,30 @@ import { ReactNode } from 'react'; +import { BoxProps } from './Box'; +type Props = Partial<{ + /** Buttons to render aside the section title. */ + buttons: ReactNode; + /** id to assosiate with the parent div element used by this section, for uses with procs like getElementByID */ + container_id: string; + /** If true, fills all available vertical space. */ + fill: boolean; + /** If true, removes all section padding. */ + fitted: boolean; + /** If true, fills the area without forcing height to 100% */ + flexGrow: boolean; + /** If true, removes the section top padding */ + noTopPadding: boolean; + /** @member Callback function for the `scroll` event */ + onScroll: ((this: GlobalEventHandlers, ev: Event) => any) | null; + /** Shows or hides the scrollbar. */ + scrollable: boolean; + /** Shows or hides the horizontal scrollbar. */ + scrollableHorizontal: boolean; + /** If true, filly the area except for -3rem */ + stretchContents: boolean; + /** Title of the section. */ + title: ReactNode; +}> & BoxProps; /** * ## Section * Section is a surface that displays content and actions on a single topic. @@ -27,37 +52,5 @@ import { ReactNode } from 'react'; * * ``` */ -export declare const Section: import('react').ForwardRefExoticComponent any) | null; - /** Shows or hides the scrollbar. */ - scrollable: boolean; - /** Shows or hides the horizontal scrollbar. */ - scrollableHorizontal: boolean; - /** Title of the section. */ - title: ReactNode; -}> & Partial<{ - as: string; - children: ReactNode; - className: string | import('../common/react').BooleanLike; - style: import('react').CSSProperties; -}> & Partial> & Partial> & Partial<{ - onClick: import('react').MouseEventHandler; - onContextMenu: import('react').MouseEventHandler; - onDoubleClick: import('react').MouseEventHandler; - onKeyDown: import('react').KeyboardEventHandler; - onKeyUp: import('react').KeyboardEventHandler; - onMouseDown: import('react').MouseEventHandler; - onMouseMove: import('react').MouseEventHandler; - onMouseOver: import('react').MouseEventHandler; - onMouseUp: import('react').MouseEventHandler; - onScroll: import('react').UIEventHandler; -}> & import('react').RefAttributes>; +export declare const Section: (props: Props) => import("react/jsx-runtime").JSX.Element; +export {}; diff --git a/dist/components/Section.js b/dist/components/Section.js index bb70734..5dc959d 100644 --- a/dist/components/Section.js +++ b/dist/components/Section.js @@ -1,62 +1,69 @@ -import { jsxs as r, jsx as s } from "react/jsx-runtime"; -import { forwardRef as S, useEffect as j } from "react"; -import { addScrollableNode as z, removeScrollableNode as B } from "../common/events.js"; -import { classes as H, canRender as m } from "../common/react.js"; -import { s as t } from "../Section.module-CLVHJ4yA.js"; -import { computeBoxClassName as T, computeBoxProps as y } from "./Box.js"; -const q = S( - (a, l) => { - const { - buttons: c, - children: u, - className: p, - fill: N, - fitted: b, - onScroll: h, - scrollable: i, - scrollableHorizontal: e, - title: n, - container_id: v, - ...o - } = a, x = m(n) || m(c); - return j(() => { - if (l != null && l.current && !(!i && !e)) - return z(l.current), () => { - l != null && l.current && B(l.current); - }; - }, []), /* @__PURE__ */ r( - "div", - { - id: v || "", - className: H([ - t.section, - N && t.fill, - b && t.fitted, - i && t.scrollable, - e && t.scrollableHorizontal, - p, - T(o) - ]), - ...y(o), - children: [ - x && /* @__PURE__ */ r("div", { className: t.title, children: [ - /* @__PURE__ */ s("span", { className: t.titleText, children: n }), - /* @__PURE__ */ s("div", { className: t.buttons, children: c }) - ] }), - /* @__PURE__ */ s("div", { className: t.rest, children: /* @__PURE__ */ s( - "div", - { - className: t.content, - onScroll: h, - ref: l, - children: u - } - ) }) - ] - } - ); - } -); +import { jsxs as a, jsx as r } from "react/jsx-runtime"; +import { useRef as P, useEffect as g } from "react"; +import { addScrollableNode as j, removeScrollableNode as z } from "../common/events.js"; +import { classes as d, canRender as m } from "../common/react.js"; +import { s as e } from "../Section.module-qhQWhlUX.js"; +import { computeBoxClassName as B, computeBoxProps as H } from "./Box.js"; +const _ = (f) => { + const { + buttons: o, + children: u, + className: p, + fill: N, + fitted: h, + flexGrow: b, + noTopPadding: x, + onScroll: v, + scrollable: s, + scrollableHorizontal: n, + stretchContents: S, + title: c, + container_id: T, + ...i + } = f, t = P(null), C = m(c) || m(o); + return g(() => { + if (!(t != null && t.current) || !s && !n) return; + const l = t.current; + return j(l), () => { + l && z(l); + }; + }, []), /* @__PURE__ */ a( + "div", + { + id: T || "", + className: d([ + e.section, + N && e.fill, + h && e.fitted, + s && e.scrollable, + n && e.scrollableHorizontal, + b && e.sectionFlex, + p, + B(i) + ]), + ...H(i), + children: [ + C && /* @__PURE__ */ a("div", { className: e.title, children: [ + /* @__PURE__ */ r("span", { className: e.titleText, children: c }), + /* @__PURE__ */ r("div", { className: e.buttons, children: o }) + ] }), + /* @__PURE__ */ r("div", { className: e.rest, children: /* @__PURE__ */ r( + "div", + { + className: d([ + e.content, + !!S && e.stretchContents, + !!x && e.noTopPadding + ]), + onScroll: v, + ref: t, + children: u + } + ) }) + ] + } + ); +}; export { - q as Section + _ as Section }; diff --git a/dist/components/StyleableSection.js b/dist/components/StyleableSection.js index 41b2f22..9dbf782 100644 --- a/dist/components/StyleableSection.js +++ b/dist/components/StyleableSection.js @@ -1,5 +1,5 @@ import { jsxs as s, jsx as l } from "react/jsx-runtime"; -import { s as t } from "../Section.module-CLVHJ4yA.js"; +import { s as t } from "../Section.module-qhQWhlUX.js"; import { Box as e } from "./Box.js"; function h(i) { const { children: r, titleStyle: c, titleSubtext: n, title: o, textStyle: a, style: m } = i; diff --git a/dist/components/Tabs.d.ts b/dist/components/Tabs.d.ts index c0cad26..47a1bb8 100644 --- a/dist/components/Tabs.d.ts +++ b/dist/components/Tabs.d.ts @@ -11,6 +11,7 @@ type TabProps = Partial<{ className: string; color: string; icon: string; + iconSpin: boolean; leftSlot: ReactNode; onClick: (e?: any) => void; rightSlot: ReactNode; diff --git a/dist/components/Tabs.js b/dist/components/Tabs.js index ea2c5a4..6991246 100644 --- a/dist/components/Tabs.js +++ b/dist/components/Tabs.js @@ -1,89 +1,94 @@ -import { jsx as o, jsxs as f } from "react/jsx-runtime"; -import { classes as h, canRender as i } from "../common/react.js"; -import { computeBoxClassName as b, computeBoxProps as d } from "./Box.js"; -import { Icon as m } from "./Icon.js"; -import '../assets/Tabs.css';const v = "_tabs_9h380_13", p = "_fill_9h380_20", u = "_vertical_9h380_35", w = "_horizontal_9h380_40", x = "_tabs__tab_9h380_48", y = "_fluid_9h380_52", N = "_tab_9h380_13", k = "_selected_9h380_66", z = "_tab__text_9h380_75", T = "_tab__left_9h380_80", j = "_tab__right_9h380_86", B = "_color__black_9h380_113", S = "_color__white_9h380_125", C = "_color__red_9h380_137", I = "_color__orange_9h380_149", P = "_color__yellow_9h380_161", R = "_color__olive_9h380_173", q = "_color__green_9h380_185", A = "_color__teal_9h380_197", D = "_color__blue_9h380_209", E = "_color__violet_9h380_221", F = "_color__purple_9h380_233", G = "_color__pink_9h380_245", H = "_color__brown_9h380_257", J = "_color__grey_9h380_269", K = "_color__good_9h380_293", L = "_color__average_9h380_305", M = "_color__bad_9h380_317", O = "_color__label_9h380_329", _ = { - tabs: v, - fill: p, - vertical: u, - horizontal: w, - tabs__tab: x, - fluid: y, - tab: N, - selected: k, - tab__text: z, - tab__left: T, - tab__right: j, - color__black: B, - color__white: S, - color__red: C, - color__orange: I, - color__yellow: P, - color__olive: R, - color__green: q, - color__teal: A, - color__blue: D, - color__violet: E, - color__purple: F, - color__pink: G, - color__brown: H, - color__grey: J, +import { jsx as o, jsxs as u } from "react/jsx-runtime"; +import { classes as g, canRender as d } from "../common/react.js"; +import { computeBoxClassName as f, computeBoxProps as m } from "./Box.js"; +import { Icon as k } from "./Icon.js"; +import '../assets/Tabs.css';const w = "_tabs_9h380_13", x = "_fill_9h380_20", y = "_vertical_9h380_35", N = "_horizontal_9h380_40", z = "_tabs__tab_9h380_48", C = "_fluid_9h380_52", S = "_tab_9h380_13", T = "_selected_9h380_66", j = "_tab__text_9h380_75", B = "_tab__left_9h380_80", I = "_tab__right_9h380_86", P = "_color__black_9h380_113", R = "_color__white_9h380_125", q = "_color__red_9h380_137", A = "_color__orange_9h380_149", D = "_color__yellow_9h380_161", E = "_color__olive_9h380_173", F = "_color__green_9h380_185", G = "_color__teal_9h380_197", H = "_color__blue_9h380_209", J = "_color__violet_9h380_221", K = "_color__purple_9h380_233", L = "_color__pink_9h380_245", M = "_color__brown_9h380_257", O = "_color__grey_9h380_269", Q = "_color__good_9h380_293", U = "_color__average_9h380_305", V = "_color__bad_9h380_317", W = "_color__label_9h380_329", _ = { + tabs: w, + fill: x, + vertical: y, + horizontal: N, + tabs__tab: z, + fluid: C, + tab: S, + selected: T, + tab__text: j, + tab__left: B, + tab__right: I, + color__black: P, + color__white: R, + color__red: q, + color__orange: A, + color__yellow: D, + color__olive: E, + color__green: F, + color__teal: G, + color__blue: H, + color__violet: J, + color__purple: K, + color__pink: L, + color__brown: M, + color__grey: O, "color__light-grey": "_color__light-grey_9h380_281", - color__good: K, - color__average: L, - color__bad: M, - color__label: O + color__good: Q, + color__average: U, + color__bad: V, + color__label: W }; -function Q(r) { - const { className: e, vertical: a, fill: s, fluid: c, children: t, ...l } = r; +function X(t) { + const { className: r, vertical: e, fill: a, fluid: c, children: s, ...l } = t; return /* @__PURE__ */ o( "div", { - className: h([ + className: g([ _.tabs, - a ? _.vertical : _.horizontal, - s && _.fill, + e ? _.vertical : _.horizontal, + a && _.fill, c && _.fluid, - e, - b(l) + r, + f(l) ]), - ...d(l), - children: t + ...m(l), + children: s } ); } -function U(r) { +function Y(t) { const { - className: e, - selected: a, - color: s, + className: r, + selected: e, + color: a, icon: c, - leftSlot: t, - rightSlot: l, - children: g, - ...n - } = r; - return /* @__PURE__ */ f( + iconSpin: s, + leftSlot: l, + rightSlot: n, + children: v, + onClick: i, + ...h + } = t, p = (b) => { + i && (i(b), b.target.blur()); + }; + return /* @__PURE__ */ u( "div", { - className: h([ + className: g([ _.tab, _.tabs__tab, - _["color__" + s], - a && _.selected, - e, - b(n) + _["color__" + a], + e && _.selected, + r, + f(h) ]), - ...d(n), + onClick: p, + ...m(h), children: [ - i(t) && /* @__PURE__ */ o("div", { className: _.tab__left, children: t }) || !!c && /* @__PURE__ */ o("div", { className: _.tab__left, children: /* @__PURE__ */ o(m, { name: c }) }), - /* @__PURE__ */ o("div", { className: _.tab__text, children: g }), - i(l) && /* @__PURE__ */ o("div", { className: _.tab__right, children: l }) + d(l) && /* @__PURE__ */ o("div", { className: _.tab__left, children: l }) || !!c && /* @__PURE__ */ o("div", { className: _.tab__left, children: /* @__PURE__ */ o(k, { name: c, spin: s }) }), + /* @__PURE__ */ o("div", { className: _.tab__text, children: v }), + d(n) && /* @__PURE__ */ o("div", { className: _.tab__right, children: n }) ] } ); } -Q.Tab = U; +X.Tab = Y; export { - Q as Tabs + X as Tabs }; diff --git a/dist/components/TextArea.js b/dist/components/TextArea.js index 473ec87..1338bdb 100644 --- a/dist/components/TextArea.js +++ b/dist/components/TextArea.js @@ -1,74 +1,74 @@ import { jsxs as I, jsx as f } from "react/jsx-runtime"; -import { forwardRef as Y, useRef as C, useState as H, useImperativeHandle as L, useEffect as g } from "react"; -import { KEY as p } from "../common/keys.js"; -import { classes as d } from "../common/react.js"; -import { Box as P } from "./Box.js"; +import { forwardRef as Y, useRef as C, useState as H, useImperativeHandle as L, useEffect as _ } from "react"; +import { KEY as g, isEscape as P } from "../common/keys.js"; +import { classes as p } from "../common/react.js"; +import { Box as U } from "./Box.js"; import { toInputValue as T } from "./Input.js"; -import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1bert_33", q = "_noborder_1bert_39", z = "_inner_1bert_43", G = "_scrollable_1bert_43", J = "_custom_1bert_78", M = "_nowrap_1bert_83", O = "_wrapper_1bert_89", e = { - textArea: U, - fluid: $, - noborder: q, - inner: z, - scrollable: G, - custom: J, - nowrap: M, - wrapper: O -}, er = Y( +import '../assets/TextArea.css';const $ = "_textArea_1bert_20", q = "_fluid_1bert_33", z = "_noborder_1bert_39", G = "_inner_1bert_43", J = "_scrollable_1bert_43", M = "_custom_1bert_78", O = "_nowrap_1bert_83", Q = "_wrapper_1bert_89", e = { + textArea: $, + fluid: q, + noborder: z, + inner: G, + scrollable: J, + custom: M, + nowrap: O, + wrapper: Q +}, tr = Y( (x, w) => { const { - autoFocus: m, - autoSelect: l, + autoFocus: d, + autoSelect: s, displayedValue: a, dontUseTabForIndent: y, maxLength: h, noborder: A, - onChange: s, + onChange: l, onEnter: n, onEscape: u, onInput: c, placeholder: N, scrollbar: S, - selfClear: b, + selfClear: m, value: i, ...E } = x, { className: K, fluid: k, nowrap: D, ...R } = E, t = C(null), [V, j] = H(0); function B(r) { - if (r.key === p.Enter) { + if (r.key === g.Enter) { if (r.shiftKey) { r.currentTarget.focus(); return; } - n == null || n(r, r.currentTarget.value), b && (r.currentTarget.value = ""), r.currentTarget.blur(); + n == null || n(r, r.currentTarget.value), m && (r.currentTarget.value = ""), r.currentTarget.blur(); return; } - if (r.key === p.Escape) { - u == null || u(r), b ? r.currentTarget.value = "" : (r.currentTarget.value = T(i), r.currentTarget.blur()); + if (P(r.key)) { + u == null || u(r), m ? r.currentTarget.value = "" : (r.currentTarget.value = T(i), r.currentTarget.blur()); return; } - if (!y && r.key === p.Tab) { + if (!y && r.key === g.Tab) { r.preventDefault(); - const { value: o, selectionStart: _, selectionEnd: F } = r.currentTarget; - r.currentTarget.value = o.substring(0, _) + " " + o.substring(F), r.currentTarget.selectionEnd = _ + 1; + const { value: o, selectionStart: b, selectionEnd: F } = r.currentTarget; + r.currentTarget.value = o.substring(0, b) + " " + o.substring(F), r.currentTarget.selectionEnd = b + 1; } } return L( w, () => t.current - ), g(() => { - if (!m && !l) return; + ), _(() => { + if (!d && !s) return; const r = t.current; - r && (m || l) && setTimeout(() => { - r.focus(), l && r.select(); + r && (d || s) && setTimeout(() => { + r.focus(), s && r.select(); }, 1); - }, []), g(() => { + }, []), _(() => { const r = t.current; if (!r) return; const o = T(i); r.value !== o && (r.value = o); }, [i]), /* @__PURE__ */ I( - P, + U, { - className: d([ + className: p([ e.textArea, k && e.fluid, A && e.noborder, @@ -79,7 +79,7 @@ import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1ber !!a && /* @__PURE__ */ f("div", { className: e.wrapper, children: /* @__PURE__ */ f( "div", { - className: d([e.inner, e.custom]), + className: p([e.inner, e.custom]), style: { transform: `translateY(-${V}px)` }, @@ -89,13 +89,13 @@ import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1ber /* @__PURE__ */ f( "textarea", { - className: d([ + className: p([ e.inner, S && e.scrollable, D && e.nowrap ]), maxLength: h, - onBlur: (r) => s == null ? void 0 : s(r, r.target.value), + onBlur: (r) => l == null ? void 0 : l(r, r.target.value), onChange: (r) => c == null ? void 0 : c(r, r.target.value), onKeyDown: B, onScroll: () => { @@ -114,5 +114,5 @@ import '../assets/TextArea.css';const U = "_textArea_1bert_20", $ = "_fluid_1ber } ); export { - er as TextArea + tr as TextArea }; diff --git a/dist/components/TimeDisplay.js b/dist/components/TimeDisplay.js index 96f7316..60c1a01 100644 --- a/dist/components/TimeDisplay.js +++ b/dist/components/TimeDisplay.js @@ -1,24 +1,24 @@ -import { useState as l, useRef as d, useEffect as f } from "react"; +import { useState as f, useRef as d, useEffect as m } from "react"; import { formatTime as v } from "../common/format.js"; const u = (t) => typeof t == "number" && Number.isFinite(t) && !Number.isNaN(t); function b(t) { const { value: e = 0, auto: r = void 0, - format: o = void 0 - } = t, [i, a] = l( + format: i = void 0 + } = t, [o, a] = f( () => u(e) ? e : 0 - ), [s, m] = l( + ), [s, l] = f( u(e) ? e : void 0 ), n = d(null); - return f(() => (console.log("auto", r), r !== void 0 && (n.current = setInterval(() => { + return m(() => (r !== void 0 && (n.current = setInterval(() => { const c = r === "up" ? 10 : -10; a((p) => Math.max(0, p + c)); }, 1e3)), () => { n.current && clearInterval(n.current); - }), [r]), f(() => { - e !== s && (m(e), a(e)); - }, [e, s]), u(e) ? o ? o(i) : v(i) : e || null; + }), [r]), m(() => { + e !== s && (l(e), a(e)); + }, [e, s]), u(e) ? i ? i(o) : v(o) : e || null; } export { b as TimeDisplay diff --git a/package.json b/package.json index b55ec18..7f113f0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tgui-core", - "version": "1.1.23", + "version": "1.1.24", "description": "TGUI core component library", "keywords": [ "TGUI",