tgui-core 1.7.2 → 1.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/components/Image.js
CHANGED
|
@@ -1,37 +1,38 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as p } from "react";
|
|
3
|
-
import { computeBoxProps as
|
|
4
|
-
const
|
|
5
|
-
function
|
|
3
|
+
import { computeBoxProps as u } from "../common/ui.js";
|
|
4
|
+
const g = 5;
|
|
5
|
+
function C(o) {
|
|
6
6
|
const {
|
|
7
7
|
fixBlur: r = !0,
|
|
8
|
-
fixErrors:
|
|
8
|
+
fixErrors: m = !1,
|
|
9
9
|
objectFit: s = "fill",
|
|
10
|
-
src:
|
|
11
|
-
...
|
|
12
|
-
} =
|
|
10
|
+
src: A,
|
|
11
|
+
...n
|
|
12
|
+
} = o, t = p(0), e = u(n);
|
|
13
13
|
return e.style = {
|
|
14
14
|
...e.style,
|
|
15
15
|
"-ms-interpolation-mode": r ? "nearest-neighbor" : "auto",
|
|
16
16
|
imageRendering: r ? "pixelated" : "auto",
|
|
17
17
|
objectFit: s
|
|
18
|
-
}, /* @__PURE__ */
|
|
18
|
+
}, /* @__PURE__ */ c(
|
|
19
19
|
"img",
|
|
20
20
|
{
|
|
21
|
-
onError: (
|
|
22
|
-
if (
|
|
23
|
-
const
|
|
21
|
+
onError: (i) => {
|
|
22
|
+
if (m && t.current < g) {
|
|
23
|
+
const a = i.currentTarget;
|
|
24
24
|
setTimeout(() => {
|
|
25
|
-
|
|
25
|
+
a.src = `${A}?attempt=${t.current}`, t.current++;
|
|
26
26
|
}, 1e3);
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
|
-
src:
|
|
29
|
+
src: A || /** Use transparent base64 pixel if there is no src. So we don't get broken image icon when using assets */
|
|
30
|
+
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
|
|
30
31
|
...e,
|
|
31
32
|
alt: "dm icon"
|
|
32
33
|
}
|
|
33
34
|
);
|
|
34
35
|
}
|
|
35
36
|
export {
|
|
36
|
-
|
|
37
|
+
C as Image
|
|
37
38
|
};
|
|
@@ -6,6 +6,12 @@ import { Direction } from './DmIcon';
|
|
|
6
6
|
type Props = Partial<{
|
|
7
7
|
/** Asset cache. Example: `asset={['assetname32x32', thing.key]}` */
|
|
8
8
|
asset: string[];
|
|
9
|
+
/**
|
|
10
|
+
* Asset size. Used for asset scaling. Example: `assetSize={32}`
|
|
11
|
+
* With that, you can use `imageSize` to set asset image size in px.
|
|
12
|
+
* By default, it's 32px. So if you have 32x32 you don't need to touch it.
|
|
13
|
+
*/
|
|
14
|
+
assetSize: number;
|
|
9
15
|
/** Classic way to put images. Example: `base64={thing.image}` */
|
|
10
16
|
base64: string;
|
|
11
17
|
/**
|
|
@@ -1,148 +1,161 @@
|
|
|
1
1
|
import { jsxs as I, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { classes as
|
|
3
|
-
import { computeBoxProps as
|
|
4
|
-
import { DmIcon as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import { Image as
|
|
7
|
-
import { Stack as
|
|
8
|
-
import { Tooltip as
|
|
2
|
+
import { classes as c } from "../common/react.js";
|
|
3
|
+
import { computeBoxProps as A } from "../common/ui.js";
|
|
4
|
+
import { DmIcon as D } from "./DmIcon.js";
|
|
5
|
+
import { Icon as E } from "./Icon.js";
|
|
6
|
+
import { Image as y } from "./Image.js";
|
|
7
|
+
import { Stack as N } from "./Stack.js";
|
|
8
|
+
import { Tooltip as F } from "./Tooltip.js";
|
|
9
9
|
function W(d) {
|
|
10
10
|
const {
|
|
11
|
-
asset:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
11
|
+
asset: m,
|
|
12
|
+
assetSize: u = 32,
|
|
13
|
+
base64: a,
|
|
14
|
+
buttons: p,
|
|
15
|
+
buttonsAlt: g,
|
|
16
|
+
children: s,
|
|
17
|
+
className: k,
|
|
18
|
+
color: e,
|
|
19
|
+
disabled: i,
|
|
20
|
+
dmFallback: v,
|
|
20
21
|
dmIcon: b,
|
|
21
22
|
dmIconState: x,
|
|
22
|
-
fluid:
|
|
23
|
+
fluid: o,
|
|
23
24
|
imageSize: n = 64,
|
|
24
|
-
imageSrc:
|
|
25
|
-
onClick:
|
|
25
|
+
imageSrc: B,
|
|
26
|
+
onClick: r,
|
|
26
27
|
onRightClick: f,
|
|
27
|
-
selected:
|
|
28
|
-
title:
|
|
28
|
+
selected: $,
|
|
29
|
+
title: C,
|
|
29
30
|
tooltip: _,
|
|
30
|
-
tooltipPosition:
|
|
31
|
-
...
|
|
31
|
+
tooltipPosition: S,
|
|
32
|
+
...z
|
|
32
33
|
} = d;
|
|
33
34
|
let h = /* @__PURE__ */ I(
|
|
34
35
|
"div",
|
|
35
36
|
{
|
|
36
|
-
className:
|
|
37
|
+
className: c([
|
|
37
38
|
"container",
|
|
38
|
-
|
|
39
|
-
!
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
o && (!!p || !!g) && "hasButtons",
|
|
40
|
+
!r && !f && "noAction",
|
|
41
|
+
$ && "ImageButton--selected",
|
|
42
|
+
i && "ImageButton--disabled",
|
|
43
|
+
e && typeof e == "string" ? `ImageButton--color__${e}` : "ImageButton--color__default"
|
|
43
44
|
]),
|
|
44
|
-
tabIndex:
|
|
45
|
-
onClick: (
|
|
46
|
-
!
|
|
45
|
+
tabIndex: i ? void 0 : 0,
|
|
46
|
+
onClick: (l) => {
|
|
47
|
+
!i && r && r(l);
|
|
47
48
|
},
|
|
48
|
-
onKeyDown: (
|
|
49
|
-
|
|
49
|
+
onKeyDown: (l) => {
|
|
50
|
+
l.key === "Enter" && !i && r && r(l);
|
|
50
51
|
},
|
|
51
|
-
onContextMenu: (
|
|
52
|
-
|
|
52
|
+
onContextMenu: (l) => {
|
|
53
|
+
l.preventDefault(), !i && f && f(l);
|
|
53
54
|
},
|
|
54
|
-
style: { width:
|
|
55
|
+
style: { width: o ? "auto" : `calc(${n}px + 0.5em + 2px)` },
|
|
55
56
|
children: [
|
|
56
|
-
/* @__PURE__ */ t("div", { className: "image", children:
|
|
57
|
-
|
|
57
|
+
/* @__PURE__ */ t("div", { className: "image", children: a || B ? /* @__PURE__ */ t(
|
|
58
|
+
y,
|
|
58
59
|
{
|
|
59
|
-
|
|
60
|
-
src: c ? `data:image/png;base64,${c}` : g,
|
|
60
|
+
src: a ? `data:image/png;base64,${a}` : B,
|
|
61
61
|
height: `${n}px`,
|
|
62
62
|
width: `${n}px`
|
|
63
63
|
}
|
|
64
64
|
) : b && x ? /* @__PURE__ */ t(
|
|
65
|
-
|
|
65
|
+
D,
|
|
66
66
|
{
|
|
67
67
|
icon: b,
|
|
68
68
|
icon_state: x,
|
|
69
|
-
fallback:
|
|
69
|
+
fallback: v || /* @__PURE__ */ t(w, { icon: "spinner", spin: !0, size: n }),
|
|
70
70
|
height: `${n}px`,
|
|
71
71
|
width: `${n}px`
|
|
72
72
|
}
|
|
73
|
-
) : /* @__PURE__ */ t(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
) : m ? /* @__PURE__ */ t(
|
|
74
|
+
y,
|
|
75
|
+
{
|
|
76
|
+
className: c(m || []),
|
|
77
|
+
height: `${n}px`,
|
|
78
|
+
width: `${n}px`,
|
|
79
|
+
style: {
|
|
80
|
+
transform: `scale(${n / u})`,
|
|
81
|
+
transformOrigin: "top left"
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
) : /* @__PURE__ */ t(w, { icon: "question", size: n }) }),
|
|
85
|
+
o ? /* @__PURE__ */ I("div", { className: "info", children: [
|
|
86
|
+
C && /* @__PURE__ */ t("span", { className: c(["title", s && "divider"]), children: C }),
|
|
87
|
+
s && /* @__PURE__ */ t("span", { className: "contentFluid", children: s })
|
|
88
|
+
] }) : s && /* @__PURE__ */ t(
|
|
78
89
|
"span",
|
|
79
90
|
{
|
|
80
|
-
className:
|
|
91
|
+
className: c([
|
|
81
92
|
"content",
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
93
|
+
$ && "ImageButton--contentSelected",
|
|
94
|
+
i && "ImageButton--contentDisabled",
|
|
95
|
+
e && typeof e == "string" ? `ImageButton--contentColor__${e}` : "ImageButton--contentColor__default"
|
|
85
96
|
]),
|
|
86
|
-
children:
|
|
97
|
+
children: s
|
|
87
98
|
}
|
|
88
99
|
)
|
|
89
100
|
]
|
|
90
101
|
}
|
|
91
102
|
);
|
|
92
|
-
return _ && (h = /* @__PURE__ */ t(
|
|
103
|
+
return _ && (h = /* @__PURE__ */ t(F, { content: _, position: S, children: h })), /* @__PURE__ */ I(
|
|
93
104
|
"div",
|
|
94
105
|
{
|
|
95
|
-
className:
|
|
106
|
+
className: c([
|
|
96
107
|
"ImageButton",
|
|
97
|
-
|
|
98
|
-
|
|
108
|
+
o && "ImageButton--fluid",
|
|
109
|
+
k
|
|
99
110
|
]),
|
|
100
|
-
...
|
|
111
|
+
...A(z),
|
|
101
112
|
children: [
|
|
102
113
|
h,
|
|
103
|
-
|
|
114
|
+
p && /* @__PURE__ */ t(
|
|
104
115
|
"div",
|
|
105
116
|
{
|
|
106
|
-
className:
|
|
117
|
+
className: c([
|
|
107
118
|
"buttonsContainer",
|
|
108
|
-
!
|
|
109
|
-
|
|
119
|
+
!s && "buttonsEmpty",
|
|
120
|
+
o && i && "ImageButton--disabled",
|
|
121
|
+
o && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : o && "ImageButton--buttonsContainerColor__default"
|
|
110
122
|
]),
|
|
111
123
|
style: {
|
|
112
124
|
width: "auto"
|
|
113
125
|
},
|
|
114
|
-
children:
|
|
126
|
+
children: p
|
|
115
127
|
}
|
|
116
128
|
),
|
|
117
|
-
|
|
129
|
+
g && /* @__PURE__ */ t(
|
|
118
130
|
"div",
|
|
119
131
|
{
|
|
120
|
-
className:
|
|
132
|
+
className: c([
|
|
121
133
|
"buttonsContainer",
|
|
122
134
|
"buttonsAltContainer",
|
|
123
|
-
!
|
|
124
|
-
|
|
135
|
+
!s && "buttonsEmpty",
|
|
136
|
+
o && i && "ImageButton--disabled",
|
|
137
|
+
o && e && typeof e == "string" ? `ImageButton--buttonsContainerColor__${e}` : o && "ImageButton--buttonsContainerColor__default"
|
|
125
138
|
]),
|
|
126
139
|
style: {
|
|
127
|
-
width: `calc(${n}px + ${
|
|
128
|
-
maxWidth:
|
|
140
|
+
width: `calc(${n}px + ${o ? 0 : 0.5}em)`,
|
|
141
|
+
maxWidth: o ? "auto" : `calc(${n}px + 0.5em)`
|
|
129
142
|
},
|
|
130
|
-
children:
|
|
143
|
+
children: g
|
|
131
144
|
}
|
|
132
145
|
)
|
|
133
146
|
]
|
|
134
147
|
}
|
|
135
148
|
);
|
|
136
149
|
}
|
|
137
|
-
function
|
|
138
|
-
const { icon:
|
|
139
|
-
return /* @__PURE__ */ t(
|
|
140
|
-
|
|
150
|
+
function w(d) {
|
|
151
|
+
const { icon: m, spin: u = !1, size: a = 64 } = d;
|
|
152
|
+
return /* @__PURE__ */ t(N, { height: `${a}px`, width: `${a}px`, children: /* @__PURE__ */ t(N.Item, { grow: !0, textAlign: "center", align: "center", children: /* @__PURE__ */ t(
|
|
153
|
+
E,
|
|
141
154
|
{
|
|
142
|
-
spin:
|
|
143
|
-
name:
|
|
155
|
+
spin: u,
|
|
156
|
+
name: m,
|
|
144
157
|
color: "gray",
|
|
145
|
-
style: { fontSize: `calc(${
|
|
158
|
+
style: { fontSize: `calc(${a}px * 0.75)` }
|
|
146
159
|
}
|
|
147
160
|
) }) });
|
|
148
161
|
}
|
package/package.json
CHANGED
|
@@ -36,7 +36,7 @@ $bg-map: colors.$bg-map !default;
|
|
|
36
36
|
|
|
37
37
|
@if $hoverable {
|
|
38
38
|
&:hover {
|
|
39
|
-
background-color: rgba(lighten($color,
|
|
39
|
+
background-color: rgba(lighten($color, 66%), $opacity);
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
}
|
|
@@ -159,6 +159,12 @@ $bg-map: colors.$bg-map !default;
|
|
|
159
159
|
pointer-events: none;
|
|
160
160
|
top: 1px;
|
|
161
161
|
bottom: inherit !important;
|
|
162
|
+
/** Text outline. Sort of. */
|
|
163
|
+
text-shadow:
|
|
164
|
+
0px 0px 4px base.$color-bg,
|
|
165
|
+
0px 0px 4px base.$color-bg,
|
|
166
|
+
0px 0px 4px base.$color-bg,
|
|
167
|
+
0px 0px 4px base.$color-bg;
|
|
162
168
|
}
|
|
163
169
|
|
|
164
170
|
&.buttonsEmpty {
|
|
@@ -249,6 +255,7 @@ $bg-map: colors.$bg-map !default;
|
|
|
249
255
|
overflow: hidden;
|
|
250
256
|
pointer-events: auto;
|
|
251
257
|
top: inherit;
|
|
258
|
+
text-shadow: none;
|
|
252
259
|
|
|
253
260
|
& > * {
|
|
254
261
|
border-top: 1px solid rgba(255, 255, 255, 0.075);
|