@iobroker/gui-components 10.3.6 → 10.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@emotion/react": "^11.14.0",
|
|
38
38
|
"@emotion/styled": "^11.14.1",
|
|
39
|
-
"@iobroker/gui-components": "^10.3.
|
|
39
|
+
"@iobroker/gui-components": "^10.3.7",
|
|
40
40
|
"@mui/icons-material": "^9.0.1",
|
|
41
41
|
"@mui/material": "^9.0.1",
|
|
42
42
|
"react": "^19.2.5",
|
|
@@ -877,6 +877,9 @@ You can find the migration instructions:
|
|
|
877
877
|
-->
|
|
878
878
|
|
|
879
879
|
## Changelog
|
|
880
|
+
### 10.3.7 (2026-09-29)
|
|
881
|
+
- (@GermanBluefox) Improved Statistics card
|
|
882
|
+
|
|
880
883
|
### 10.3.6 (2026-09-26)
|
|
881
884
|
|
|
882
885
|
- (@GermanBluefox) Fixed: `Router.doNavigate` wrote the ID into the URL hash as it was, while `Router.getLocation` reads the hash by splitting it at "/" and decoding every part. An ID that contains a "/" - e.g. `ocpp.0./TACW1142021G1543.1.meterValues.Power_Active_Import` - was therefore cut off at its first slash on the way back, and its remainder landed in `arg`. The ID segment is URL-encoded now, so it survives the round trip, including the one a dialog makes when it only changes its tab (ioBroker.admin#3634). **Callers must pass the raw ID**: one that is already encoded is now encoded twice
|
|
@@ -34,9 +34,14 @@ interface CardTitleProps {
|
|
|
34
34
|
text: string;
|
|
35
35
|
onClick: () => void;
|
|
36
36
|
};
|
|
37
|
+
/**
|
|
38
|
+
* Anything else that belongs on the right, e.g. an icon button that collapses the card. Shown
|
|
39
|
+
* behind `action` when both are given.
|
|
40
|
+
*/
|
|
41
|
+
actions?: ReactNode;
|
|
37
42
|
}
|
|
38
43
|
/** Heading of a content card, with an optional action on the right */
|
|
39
|
-
export declare function CardTitle({ title, action }: CardTitleProps): JSX.Element;
|
|
44
|
+
export declare function CardTitle({ title, action, actions }: CardTitleProps): JSX.Element;
|
|
40
45
|
interface InfoRowProps {
|
|
41
46
|
name: string;
|
|
42
47
|
/** A node, not only a string, so that a value can carry a chip or an icon */
|
|
@@ -32,10 +32,12 @@ export function StatCard(props) {
|
|
|
32
32
|
props.hint ? (React.createElement(Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mt: 1.5 } }, props.hint)) : null));
|
|
33
33
|
}
|
|
34
34
|
/** Heading of a content card, with an optional action on the right */
|
|
35
|
-
export function CardTitle({ title, action }) {
|
|
36
|
-
return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 } },
|
|
35
|
+
export function CardTitle({ title, action, actions }) {
|
|
36
|
+
return (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 2 } },
|
|
37
37
|
React.createElement(Typography, { sx: { fontSize: '1rem', fontWeight: 600 } }, title),
|
|
38
|
-
action ? (React.createElement(
|
|
38
|
+
action || actions ? (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 } },
|
|
39
|
+
action ? (React.createElement(Link, { component: "button", underline: "none", sx: { fontSize: '0.8125rem' }, onClick: action.onClick }, action.text)) : null,
|
|
40
|
+
actions)) : null));
|
|
39
41
|
}
|
|
40
42
|
/** One line "name .......... value" inside a card */
|
|
41
43
|
export function InfoRow({ name, value }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatCard.js","sourceRoot":"./src/","sources":["Components/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBzE;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IACzC,OAAO,CACH,oBAAC,IAAI,IACD,EAAE,EAAE;YACA,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,WAAW;YAC/B,CAAC,EAAE,GAAG;YACN,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SAChD,EACD,OAAO,EAAE,KAAK,CAAC,OAAO;QAEtB,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE;YAC1D,oBAAC,GAAG,IACA,EAAE,EAAE;oBACA,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,CAAC;oBACf,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC;oBACzC,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,UAAU,EAAE,CAAC;iBAChB,IAEA,KAAK,CAAC,IAAI,CACT;YACN,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;gBACpB,oBAAC,UAAU,IACP,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,gBAAgB,IAErB,KAAK,CAAC,KAAK,CACH;gBACb,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;oBACtD,oBAAC,UAAU,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,IACtF,KAAK,CAAC,KAAK,CACH;oBACZ,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,IAAI,IACD,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EACvB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,GACzB,CACL,CAAC,CAAC,CAAC,IAAI,CACN,CACJ,CACJ;QACL,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,UAAU,IACP,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,gBAAgB,EACtB,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,IAEhC,KAAK,CAAC,IAAI,CACF,CAChB,CAAC,CAAC,CAAC,IAAI,CACL,CACV,CAAC;AACN,CAAC;
|
|
1
|
+
{"version":3,"file":"StatCard.js","sourceRoot":"./src/","sources":["Components/StatCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX, type ReactNode } from 'react';\n\nimport { alpha, Box, Card, Chip, Link, Typography } from '@mui/material';\n\ninterface StatCardProps {\n /** Small line above the value, e.g. \"Adapters\" */\n title: string;\n /** The value itself - a string so that \"--\" can be shown while it is still unknown */\n value: string;\n /** Quiet line below, e.g. \"6 active / 102 inactive\" */\n hint?: string;\n /** Accent color: tints the icon square and can color the value */\n color: string;\n /** Color of the value, defaults to the normal text color */\n valueColor?: string;\n icon: JSX.Element;\n /** Marker next to the value, e.g. the number of available updates */\n chip?: { label: string; color: 'warning' | 'primary' | 'success' | 'error' };\n onClick?: () => void;\n /** Overrides the flex basis - by default the card grows from 220px */\n flex?: string;\n}\n\n/**\n * A number with a title, an accented icon and a hint - the tile that a dashboard is built from.\n *\n * Kept here rather than in one GUI so that the admin, devices, javascript and the rest can show the\n * same tile instead of each rebuilding its own.\n */\nexport function StatCard(props: StatCardProps): JSX.Element {\n return (\n <Card\n sx={{\n flex: props.flex || '1 1 220px',\n p: 2.5,\n cursor: props.onClick ? 'pointer' : undefined,\n }}\n onClick={props.onClick}\n >\n <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>\n <Box\n sx={{\n width: 40,\n height: 40,\n borderRadius: 2,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: alpha(props.color, 0.16),\n color: props.color,\n flexShrink: 0,\n }}\n >\n {props.icon}\n </Box>\n <Box sx={{ minWidth: 0 }}>\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n >\n {props.title}\n </Typography>\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Typography sx={{ fontSize: 30, fontWeight: 700, color: props.valueColor, lineHeight: 1.2 }}>\n {props.value}\n </Typography>\n {props.chip ? (\n <Chip\n size=\"small\"\n color={props.chip.color}\n label={props.chip.label}\n />\n ) : null}\n </Box>\n </Box>\n </Box>\n {props.hint ? (\n <Typography\n variant=\"caption\"\n color=\"text.secondary\"\n sx={{ display: 'block', mt: 1.5 }}\n >\n {props.hint}\n </Typography>\n ) : null}\n </Card>\n );\n}\n\ninterface CardTitleProps {\n title: string;\n /** Optional link on the right, e.g. \"Show all\" */\n action?: { text: string; onClick: () => void };\n /**\n * Anything else that belongs on the right, e.g. an icon button that collapses the card. Shown\n * behind `action` when both are given.\n */\n actions?: ReactNode;\n}\n\n/** Heading of a content card, with an optional action on the right */\nexport function CardTitle({ title, action, actions }: CardTitleProps): JSX.Element {\n return (\n <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1, mb: 2 }}>\n <Typography sx={{ fontSize: '1rem', fontWeight: 600 }}>{title}</Typography>\n {action || actions ? (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }}>\n {action ? (\n <Link\n component=\"button\"\n underline=\"none\"\n sx={{ fontSize: '0.8125rem' }}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : null}\n {actions}\n </Box>\n ) : null}\n </Box>\n );\n}\n\ninterface InfoRowProps {\n name: string;\n /** A node, not only a string, so that a value can carry a chip or an icon */\n value: ReactNode;\n}\n\n/** One line \"name .......... value\" inside a card */\nexport function InfoRow({ name, value }: InfoRowProps): JSX.Element {\n return (\n <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2, py: 1 }}>\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n >\n {name}\n </Typography>\n <Typography\n variant=\"body2\"\n sx={{ fontWeight: 500, textAlign: 'right' }}\n >\n {value}\n </Typography>\n </Box>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iobroker/gui-components",
|
|
3
|
-
"version": "10.3.
|
|
3
|
+
"version": "10.3.7",
|
|
4
4
|
"description": "Shared React components (React 19 / MUI 9) to develop ioBroker interfaces. Successor of @iobroker/adapter-react-v5.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "bluefox",
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@iobroker/js-controller-common": "^7.2.3",
|
|
59
59
|
"@iobroker/js-controller-common-db": "^7.2.3",
|
|
60
|
-
"@iobroker/socket-client": "^5.
|
|
60
|
+
"@iobroker/socket-client": "^5.4.0",
|
|
61
61
|
"@iobroker/type-detector": "^6.0.1",
|
|
62
62
|
"@iobroker/types": "^7.2.3",
|
|
63
|
-
"@sentry/browser": "^11.
|
|
63
|
+
"@sentry/browser": "^11.1.0",
|
|
64
64
|
"cronstrue": "^3.27.0",
|
|
65
65
|
"file-selector": "^5.0.1",
|
|
66
66
|
"react-colorful": "^5.8.1",
|