@iobroker/gui-components 10.0.5 → 10.0.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 +9 -1
- package/build/Components/ToggleThemeMenu.js +5 -2
- package/build/Components/ToggleThemeMenu.js.map +1 -1
- package/build/Components/Utils.js +13 -11
- package/build/Components/Utils.js.map +1 -1
- package/build/Theme.d.ts +35 -1
- package/build/Theme.js +12 -3
- package/build/Theme.js.map +1 -1
- package/build/ThemeModern.d.ts +53 -0
- package/build/ThemeModern.js +586 -0
- package/build/ThemeModern.js.map +1 -0
- package/build/index.d.ts +1 -0
- package/build/index.js +1 -0
- package/build/index.js.map +1 -1
- package/build/types.d.ts +13 -1
- package/package.json +7 -7
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.0.
|
|
39
|
+
"@iobroker/gui-components": "^10.0.7",
|
|
40
40
|
"@mui/icons-material": "^9.0.1",
|
|
41
41
|
"@mui/material": "^9.0.1",
|
|
42
42
|
"react": "^19.2.5",
|
|
@@ -856,6 +856,14 @@ You can find the migration instructions:
|
|
|
856
856
|
-->
|
|
857
857
|
|
|
858
858
|
## Changelog
|
|
859
|
+
### 10.0.7 (2026-07-31)
|
|
860
|
+
|
|
861
|
+
- (@GermanBluefox) Updated packages
|
|
862
|
+
|
|
863
|
+
### 10.0.6 (2026-07-30)
|
|
864
|
+
|
|
865
|
+
- (@GermanBluefox) Added modern themes
|
|
866
|
+
|
|
859
867
|
### 10.0.5 (2026-07-27)
|
|
860
868
|
|
|
861
869
|
- (@GermanBluefox) I18n was improved
|
|
@@ -5,9 +5,12 @@ export function ToggleThemeMenu({ themeName, toggleTheme, t, className, style, s
|
|
|
5
5
|
return (React.createElement("div", { className: className || undefined, style: style || undefined },
|
|
6
6
|
React.createElement(Tooltip, { title: t('ra_Change color theme'), slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
|
|
7
7
|
React.createElement(IconButton, { onClick: () => toggleTheme(), size: size || 'medium' },
|
|
8
|
-
themeName === 'dark' && React.createElement(Brightness4Icon, { className: className }),
|
|
8
|
+
(themeName === 'dark' || themeName === 'modernDark') && React.createElement(Brightness4Icon, { className: className }),
|
|
9
9
|
themeName === 'blue' && React.createElement(Brightness5Icon, { className: className }),
|
|
10
10
|
themeName === 'colored' && React.createElement(Brightness6Icon, { className: className }),
|
|
11
|
-
themeName !== 'dark' &&
|
|
11
|
+
themeName !== 'dark' &&
|
|
12
|
+
themeName !== 'modernDark' &&
|
|
13
|
+
themeName !== 'blue' &&
|
|
14
|
+
themeName !== 'colored' && React.createElement(Brightness7Icon, { className: className })))));
|
|
12
15
|
}
|
|
13
16
|
//# sourceMappingURL=ToggleThemeMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleThemeMenu.js","sourceRoot":"./src/","sources":["Components/ToggleThemeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EACH,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,GACjC,MAAM,qBAAqB,CAAC;AAY7B,MAAM,UAAU,eAAe,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,CAAC,EACD,SAAS,EACT,KAAK,EACL,IAAI,GACe;IACnB,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,KAAK,EAAE,KAAK,IAAI,SAAS;QAEzB,oBAAC,OAAO,IACJ,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EACjC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;YAExD,oBAAC,UAAU,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,IAAI,EAAE,IAAI,IAAI,QAAQ;gBAErB,SAAS,KAAK,MAAM,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;
|
|
1
|
+
{"version":3,"file":"ToggleThemeMenu.js","sourceRoot":"./src/","sources":["Components/ToggleThemeMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EACH,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,EAC9B,WAAW,IAAI,eAAe,GACjC,MAAM,qBAAqB,CAAC;AAY7B,MAAM,UAAU,eAAe,CAAC,EAC5B,SAAS,EACT,WAAW,EACX,CAAC,EACD,SAAS,EACT,KAAK,EACL,IAAI,GACe;IACnB,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,KAAK,EAAE,KAAK,IAAI,SAAS;QAEzB,oBAAC,OAAO,IACJ,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EACjC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;YAExD,oBAAC,UAAU,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAC5B,IAAI,EAAE,IAAI,IAAI,QAAQ;gBAErB,CAAC,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,CAAC,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;gBACjG,SAAS,KAAK,MAAM,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;gBACjE,SAAS,KAAK,SAAS,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;gBACpE,SAAS,KAAK,MAAM;oBACjB,SAAS,KAAK,YAAY;oBAC1B,SAAS,KAAK,MAAM;oBACpB,SAAS,KAAK,SAAS,IAAI,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI,CAC/D,CACP,CACR,CACT,CAAC;AACN,CAAC","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { IconButton, Tooltip } from '@mui/material';\n\nimport {\n Brightness4 as Brightness4Icon,\n Brightness5 as Brightness5Icon,\n Brightness6 as Brightness6Icon,\n Brightness7 as Brightness7Icon,\n} from '@mui/icons-material';\nimport type { ThemeName } from '../types';\n\ninterface ToggleThemeMenuProps {\n themeName: ThemeName;\n toggleTheme: () => void;\n t: (key: string) => string;\n className?: string;\n style?: React.CSSProperties;\n size?: 'small' | 'medium' | 'large';\n}\n\nexport function ToggleThemeMenu({\n themeName,\n toggleTheme,\n t,\n className,\n style,\n size,\n}: ToggleThemeMenuProps): JSX.Element {\n return (\n <div\n className={className || undefined}\n style={style || undefined}\n >\n <Tooltip\n title={t('ra_Change color theme')}\n slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n >\n <IconButton\n onClick={() => toggleTheme()}\n size={size || 'medium'}\n >\n {(themeName === 'dark' || themeName === 'modernDark') && <Brightness4Icon className={className} />}\n {themeName === 'blue' && <Brightness5Icon className={className} />}\n {themeName === 'colored' && <Brightness6Icon className={className} />}\n {themeName !== 'dark' &&\n themeName !== 'modernDark' &&\n themeName !== 'blue' &&\n themeName !== 'colored' && <Brightness7Icon className={className} />}\n </IconButton>\n </Tooltip>\n </div>\n );\n}\n"]}
|
|
@@ -8,6 +8,8 @@ import React from 'react';
|
|
|
8
8
|
import { copy } from './CopyToClipboard';
|
|
9
9
|
import { I18n } from '../i18n';
|
|
10
10
|
const NAMESPACE = 'material';
|
|
11
|
+
/** All themes that are rendered with a dark background */
|
|
12
|
+
const DARK_THEMES = ['dark', 'blue', 'modernDark'];
|
|
11
13
|
const days = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
12
14
|
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
13
15
|
const QUALITY_BITS = {
|
|
@@ -83,7 +85,7 @@ export class Utils {
|
|
|
83
85
|
options = { language: settings };
|
|
84
86
|
settings = null;
|
|
85
87
|
}
|
|
86
|
-
options
|
|
88
|
+
options ||= {};
|
|
87
89
|
if (!options.language) {
|
|
88
90
|
options.language =
|
|
89
91
|
(objects['system.config'] &&
|
|
@@ -150,7 +152,7 @@ export class Utils {
|
|
|
150
152
|
options = { language: settings };
|
|
151
153
|
settings = null;
|
|
152
154
|
}
|
|
153
|
-
options
|
|
155
|
+
options ||= {};
|
|
154
156
|
if (settings?.name) {
|
|
155
157
|
const name = settings.name;
|
|
156
158
|
if (typeof name === 'object') {
|
|
@@ -324,9 +326,9 @@ export class Utils {
|
|
|
324
326
|
*/
|
|
325
327
|
static setSettings(obj, settings, options) {
|
|
326
328
|
if (obj) {
|
|
327
|
-
obj.common
|
|
328
|
-
obj.common.custom
|
|
329
|
-
obj.common.custom[NAMESPACE]
|
|
329
|
+
obj.common ||= {};
|
|
330
|
+
obj.common.custom ||= {};
|
|
331
|
+
obj.common.custom[NAMESPACE] ||= {};
|
|
330
332
|
obj.common.custom[NAMESPACE][options.user || 'admin'] = settings;
|
|
331
333
|
const s = obj.common.custom[NAMESPACE][options.user || 'admin'];
|
|
332
334
|
if (s.useCommon) {
|
|
@@ -1358,8 +1360,8 @@ export class Utils {
|
|
|
1358
1360
|
if (window.vendorPrefix && window.vendorPrefix !== '@@vendorPrefix@@') {
|
|
1359
1361
|
return 'light';
|
|
1360
1362
|
}
|
|
1361
|
-
themeName
|
|
1362
|
-
return themeName
|
|
1363
|
+
themeName ||= Utils.getThemeName();
|
|
1364
|
+
return DARK_THEMES.includes(themeName) ? 'dark' : 'light';
|
|
1363
1365
|
}
|
|
1364
1366
|
/**
|
|
1365
1367
|
* Set the theme name and theme type.
|
|
@@ -1370,7 +1372,7 @@ export class Utils {
|
|
|
1370
1372
|
return; // ignore
|
|
1371
1373
|
}
|
|
1372
1374
|
(window._localStorage || window.localStorage).setItem('App.themeName', themeName);
|
|
1373
|
-
(window._localStorage || window.localStorage).setItem('App.theme', themeName
|
|
1375
|
+
(window._localStorage || window.localStorage).setItem('App.theme', DARK_THEMES.includes(themeName) ? 'dark' : 'light');
|
|
1374
1376
|
}
|
|
1375
1377
|
/**
|
|
1376
1378
|
* Toggle the theme name between 'dark' and 'colored'.
|
|
@@ -1383,8 +1385,7 @@ export class Utils {
|
|
|
1383
1385
|
window.vendorPrefix !== 'MV') {
|
|
1384
1386
|
return window.vendorPrefix;
|
|
1385
1387
|
}
|
|
1386
|
-
themeName
|
|
1387
|
-
themeName || (window._localStorage || window.localStorage).getItem('App.themeName') || 'light';
|
|
1388
|
+
themeName ||= (window._localStorage || window.localStorage).getItem('App.themeName') || 'light';
|
|
1388
1389
|
// dark => blue => colored => light => dark
|
|
1389
1390
|
const themes = Utils.getThemeNames();
|
|
1390
1391
|
const pos = themeName ? themes.indexOf(themeName) : -1;
|
|
@@ -1409,7 +1410,8 @@ export class Utils {
|
|
|
1409
1410
|
window.vendorPrefix !== 'MV') {
|
|
1410
1411
|
return [window.vendorPrefix];
|
|
1411
1412
|
}
|
|
1412
|
-
|
|
1413
|
+
// this is also the order in which `toggleTheme` cycles through them
|
|
1414
|
+
return ['light', 'dark', 'modernLight', 'modernDark'];
|
|
1413
1415
|
}
|
|
1414
1416
|
/**
|
|
1415
1417
|
* Parse a query string into its parts.
|