npm - @iobroker/json-config - Versions diffs - 7.4.13 → 7.4.15 - Mend

@iobroker/json-config 7.4.13 → 7.4.15

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.

Files changed (9) hide show

package/README.md +3 -0
package/build/JsonConfigComponent/ConfigTable.d.ts +23 -1
package/build/JsonConfigComponent/ConfigTable.js +237 -71
package/build/JsonConfigComponent/ConfigTable.js.map +1 -1
package/build/JsonConfigComponent/ConfigTabs.d.ts +7 -0
package/build/JsonConfigComponent/ConfigTabs.js +94 -32
package/build/JsonConfigComponent/ConfigTabs.js.map +1 -1
package/build/types.d.ts +14 -10
package/package.json +3 -3

package/build/JsonConfigComponent/ConfigTabs.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Tabs, Tab } from '@mui/material';
+import { Tabs, Tab, IconButton, Toolbar, Menu, MenuItem, ListItemIcon } from '@mui/material';
+import { Menu as MenuIcon } from '@mui/icons-material';
 import ConfigGeneric from './ConfigGeneric';
 import ConfigPanel from './ConfigPanel';
 const styles = {
@@ -19,6 +20,8 @@ const styles = {
     },
 };
 class ConfigTabs extends ConfigGeneric {
+    resizeTimeout = null;
+    refDiv;
     constructor(props) {
         super(props);
         let tab;
@@ -48,9 +51,14 @@ class ConfigTabs extends ConfigGeneric {
                 tab = Object.keys(this.props.schema.items)[0];
             }
         }
-        Object.assign(this.state, { tab });
+        this.refDiv = React.createRef();
+        Object.assign(this.state, { tab, width: 0, openMenu: null });
     }
     componentWillUnmount() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
         window.removeEventListener('hashchange', this.onHashTabsChanged, false);
         super.componentWillUnmount();
     }
@@ -74,41 +82,95 @@ class ConfigTabs extends ConfigGeneric {
             }
         }
     };
+    getCurrentBreakpoint() {
+        if (!this.state.width) {
+            return 'md';
+        }
+        if (this.state.width < 600) {
+            return 'xs';
+        }
+        if (this.state.width < 900) {
+            return 'sm';
+        }
+        if (this.state.width < 1200) {
+            return 'md';
+        }
+        if (this.state.width < 1536) {
+            return 'lg';
+        }
+        return 'xl';
+    }
+    componentDidUpdate() {
+        if (this.refDiv.current?.clientWidth && this.refDiv.current.clientWidth !== this.state.width) {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = null;
+                this.setState({ width: this.refDiv.current?.clientWidth });
+            }, 50);
+        }
+    }
+    onMenuChange(tab) {
+        (window._localStorage || window.localStorage).setItem(`${this.props.dialogName || 'App'}.${this.props.oContext.adapterName}`, tab);
+        this.setState({ tab }, () => {
+            if (this.props.root) {
+                const hash = (window.location.hash || '').split('/');
+                if (hash.length >= 3 && hash[1] === 'config') {
+                    hash[3] = this.state.tab;
+                    window.location.hash = hash.join('/');
+                }
+            }
+        });
+    }
     render() {
         const items = this.props.schema.items;
         let withIcons = false;
-        return (React.createElement("div", { style: styles.tabs },
-            React.createElement(Tabs, { variant: "scrollable", scrollButtons: "auto", style: this.props.schema.tabsStyle, value: this.state.tab, onChange: (e, tab) => {
-                    (window._localStorage || window.localStorage).setItem(`${this.props.dialogName || 'App'}.${this.props.oContext.adapterName}`, tab);
-                    this.setState({ tab }, () => {
-                        if (this.props.root) {
-                            const hash = (window.location.hash || '').split('/');
-                            if (hash.length >= 3 && hash[1] === 'config') {
-                                hash[3] = this.state.tab;
-                                window.location.hash = hash.join('/');
-                            }
-                        }
-                    });
-                } }, Object.keys(items).map(name => {
-                let disabled;
-                if (this.props.custom) {
-                    const hidden = this.executeCustom(items[name].hidden, this.props.data, this.props.customObj, this.props.oContext.instanceObj, this.props.index, this.props.globalData);
-                    if (hidden) {
-                        return null;
-                    }
-                    disabled = this.executeCustom(items[name].disabled, this.props.data, this.props.customObj, this.props.oContext.instanceObj, this.props.index, this.props.globalData);
+        const elements = [];
+        Object.keys(items).map(name => {
+            let disabled;
+            if (this.props.custom) {
+                const hidden = this.executeCustom(items[name].hidden, this.props.data, this.props.customObj, this.props.oContext.instanceObj, this.props.index, this.props.globalData);
+                if (hidden) {
+                    return;
                 }
-                else {
-                    const hidden = this.execute(items[name].hidden, false, this.props.data, this.props.index, this.props.globalData);
-                    if (hidden) {
-                        return null;
-                    }
-                    disabled = this.execute(items[name].disabled, false, this.props.data, this.props.index, this.props.globalData);
+                disabled = this.executeCustom(items[name].disabled, this.props.data, this.props.customObj, this.props.oContext.instanceObj, this.props.index, this.props.globalData);
+            }
+            else {
+                const hidden = this.execute(items[name].hidden, false, this.props.data, this.props.index, this.props.globalData);
+                if (hidden) {
+                    return;
                 }
-                const icon = this.getIcon(items[name].icon);
-                withIcons = withIcons || !!icon;
-                return (React.createElement(Tab, { id: name, wrapped: true, disabled: disabled, key: name, value: name, iconPosition: this.props.schema.iconPosition || 'start', icon: icon, label: this.getText(items[name].label) }));
-            })),
+                disabled = this.execute(items[name].disabled, false, this.props.data, this.props.index, this.props.globalData);
+            }
+            const icon = this.getIcon(items[name].icon);
+            withIcons = withIcons || !!icon;
+            elements.push({ icon, disabled, label: this.getText(items[name].label), name });
+        });
+        const currentBreakpoint = this.getCurrentBreakpoint();
+        let tabs;
+        if (currentBreakpoint === 'xs' || currentBreakpoint === 'sm') {
+            tabs = (React.createElement(Toolbar, { style: {
+                    width: '100%',
+                    backgroundColor: this.props.oContext.themeType === 'dark' ? '#222' : '#DDD',
+                }, variant: "dense" },
+                React.createElement(IconButton, { onClick: (event) => this.setState({ openMenu: event.currentTarget }) },
+                    React.createElement(MenuIcon, null)),
+                this.state.openMenu ? (React.createElement(Menu, { open: !0, anchorEl: this.state.openMenu, onClose: () => this.setState({ openMenu: null }) }, elements.map(el => {
+                    return (React.createElement(MenuItem, { disabled: el.disabled, key: el.name, onClick: () => {
+                            this.setState({ openMenu: null }, () => this.onMenuChange(el.name));
+                        }, selected: el.name === this.state.tab },
+                        withIcons ? React.createElement(ListItemIcon, null, el.icon) : null,
+                        el.label));
+                }))) : null));
+        }
+        else {
+            tabs = (React.createElement(Tabs, { variant: "scrollable", scrollButtons: "auto", style: this.props.schema.tabsStyle, value: this.state.tab, onChange: (_e, tab) => this.onMenuChange(tab) }, elements.map(el => {
+                return (React.createElement(Tab, { id: el.name, wrapped: true, disabled: el.disabled, key: el.name, value: el.name, iconPosition: this.props.schema.iconPosition || 'start', icon: el.icon, label: el.label }));
+            })));
+        }
+        return (React.createElement("div", { style: styles.tabs, ref: this.refDiv },
+            tabs,
             React.createElement(ConfigPanel, { oContext: this.props.oContext, isParentTab: true, changed: this.props.changed, key: this.state.tab, index: 1001, arrayIndex: this.props.arrayIndex, globalData: this.props.globalData, commandRunning: this.props.commandRunning, style: {
                     ...styles.panel,
                     ...(withIcons ? styles.panelWithIcons : styles.panelWithoutIcons),

package/build/JsonConfigComponent/ConfigTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ConfigTabs.js","sourceRoot":"./src/","sources":["JsonConfigComponent/ConfigTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { Tabs, Tab } from '@mui/material';\n\nimport type { ConfigItemTabs } from '#JC/types';\nimport ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';\nimport ConfigPanel from './ConfigPanel';\n\nconst styles: Record<string, React.CSSProperties> = {\n tabs: {\n height: '100%',\n width: '100%',\n },\n panel: {\n width: '100%',\n display: 'block',\n },\n panelWithIcons: {\n height: 'calc(100% - 72px)',\n },\n panelWithoutIcons: {\n height: 'calc(100% - 48px)',\n },\n};\n\ninterface ConfigTabsProps extends ConfigGenericProps {\n schema: ConfigItemTabs;\n dialogName?: string;\n}\n\ninterface ConfigTabsState extends ConfigGenericState {\n tab?: string;\n}\n\nclass ConfigTabs extends ConfigGeneric<ConfigTabsProps, ConfigTabsState> {\n constructor(props: ConfigTabsProps) {\n super(props);\n let tab: string \| undefined;\n\n if (this.props.root) {\n // read the path from hash\n // #tab-instances/config/system.adapter.ping.0/<TAB-NAME-OR-INDEX>\n const hash = (window.location.hash \|\| '').replace(/^#/, '').split('/');\n if (hash.length >= 3 && hash[1] === 'config') {\n const tabS = hash[3];\n const tabN = parseInt(tabS, 10);\n if (tabS && tabN.toString() === tabS) {\n if (tabN >= 0 && tabN < Object.keys(this.props.schema.items).length) {\n tab = Object.keys(this.props.schema.items)[tabN];\n }\n } else if (tabS && Object.keys(this.props.schema.items).includes(tabS)) {\n tab = tabS;\n }\n\n // install on hash change handler\n window.addEventListener('hashchange', this.onHashTabsChanged, false);\n }\n }\n\n if (tab === undefined) {\n tab =\n (((window as any)._localStorage as Storage) \|\| window.localStorage).getItem(\n `${this.props.dialogName \|\| 'App'}.${this.props.oContext.adapterName}`,\n ) \|\| Object.keys(this.props.schema.items)[0];\n if (!Object.keys(this.props.schema.items).includes(tab)) {\n tab = Object.keys(this.props.schema.items)[0];\n }\n }\n\n Object.assign(this.state, { tab });\n }\n\n componentWillUnmount(): void {\n window.removeEventListener('hashchange', this.onHashTabsChanged, false);\n super.componentWillUnmount();\n }\n\n onHashTabsChanged = (): void => {\n const hash = (window.location.hash \|\| '').replace(/^#/, '').split('/');\n if (hash.length > 3 && hash[1] === 'config') {\n const tabS = hash[3];\n const tabN = parseInt(tabS, 10);\n let tab;\n if (tabN.toString() === tabS) {\n if (tabN >= 0 && tabN < Object.keys(this.props.schema.items).length) {\n tab = Object.keys(this.props.schema.items)[tabN];\n }\n } else if (Object.keys(this.props.schema.items).includes(tabS)) {\n tab = tabS;\n }\n if (tab !== undefined && tab !== this.state.tab) {\n (((window as any)._localStorage as Storage) \|\| window.localStorage).setItem(\n `${this.props.dialogName \|\| 'App'}.${this.props.oContext.adapterName}`,\n tab,\n );\n this.setState({ tab });\n }\n }\n };\n\n render(): JSX.Element {\n const items = this.props.schema.items;\n let withIcons = false;\n\n return (\n <div style={styles.tabs}>\n <Tabs\n variant=\"scrollable\"\n scrollButtons=\"auto\"\n style={this.props.schema.tabsStyle}\n value={this.state.tab}\n onChange={(e, tab) => {\n (((window as any)._localStorage as Storage) \|\| window.localStorage).setItem(\n `${this.props.dialogName \|\| 'App'}.${this.props.oContext.adapterName}`,\n tab,\n );\n this.setState({ tab }, () => {\n if (this.props.root) {\n const hash = (window.location.hash \|\| '').split('/');\n if (hash.length >= 3 && hash[1] === 'config') {\n hash[3] = this.state.tab;\n window.location.hash = hash.join('/');\n }\n }\n });\n }}\n >\n {Object.keys(items).map(name => {\n let disabled: boolean;\n if (this.props.custom) {\n const hidden = this.executeCustom(\n items[name].hidden,\n this.props.data,\n this.props.customObj,\n this.props.oContext.instanceObj,\n this.props.index,\n this.props.globalData,\n );\n if (hidden) {\n return null;\n }\n disabled = this.executeCustom(\n items[name].disabled,\n this.props.data,\n this.props.customObj,\n this.props.oContext.instanceObj,\n this.props.index,\n this.props.globalData,\n ) as boolean;\n } else {\n const hidden: boolean = this.execute(\n items[name].hidden,\n false,\n this.props.data,\n this.props.index,\n this.props.globalData,\n ) as boolean;\n if (hidden) {\n return null;\n }\n disabled = this.execute(\n items[name].disabled,\n false,\n this.props.data,\n this.props.index,\n this.props.globalData,\n ) as boolean;\n }\n const icon = this.getIcon(items[name].icon);\n withIcons = withIcons \|\| !!icon;\n\n return (\n <Tab\n id={name}\n wrapped\n disabled={disabled}\n key={name}\n value={name}\n iconPosition={this.props.schema.iconPosition \|\| 'start'}\n icon={icon}\n label={this.getText(items[name].label)}\n />\n );\n })}\n </Tabs>\n <ConfigPanel\n oContext={this.props.oContext}\n isParentTab\n changed={this.props.changed}\n key={this.state.tab}\n index={1001}\n arrayIndex={this.props.arrayIndex}\n globalData={this.props.globalData}\n commandRunning={this.props.commandRunning}\n style={{\n ...styles.panel,\n ...(withIcons ? styles.panelWithIcons : styles.panelWithoutIcons),\n }}\n common={this.props.common}\n alive={this.props.alive}\n themeName={this.props.themeName}\n data={this.props.data}\n originalData={this.props.originalData}\n onChange={this.props.onChange}\n onError={this.props.onError}\n customObj={this.props.customObj}\n custom={this.props.custom}\n schema={items[this.state.tab]}\n table={this.props.table}\n withIcons={withIcons}\n />\n </div>\n );\n }\n}\n\nexport default ConfigTabs;\n"]}
1	+ {"version":3,"file":"ConfigTabs.js","sourceRoot":"./src/","sources":["JsonConfigComponent/ConfigTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { Tabs, Tab, IconButton, Toolbar, Menu, MenuItem, ListItemIcon } from '@mui/material';\nimport { Menu as MenuIcon } from '@mui/icons-material';\n\nimport type { ConfigItemTabs } from '#JC/types';\nimport ConfigGeneric, { type ConfigGenericProps, type ConfigGenericState } from './ConfigGeneric';\nimport ConfigPanel from './ConfigPanel';\n\nconst styles: Record<string, React.CSSProperties> = {\n tabs: {\n height: '100%',\n width: '100%',\n },\n panel: {\n width: '100%',\n display: 'block',\n },\n panelWithIcons: {\n height: 'calc(100% - 72px)',\n },\n panelWithoutIcons: {\n height: 'calc(100% - 48px)',\n },\n};\n\ninterface ConfigTabsProps extends ConfigGenericProps {\n schema: ConfigItemTabs;\n dialogName?: string;\n}\n\ninterface ConfigTabsState extends ConfigGenericState {\n tab?: string;\n width: number;\n openMenu: HTMLButtonElement \| null;\n}\n\nclass ConfigTabs extends ConfigGeneric<ConfigTabsProps, ConfigTabsState> {\n private resizeTimeout: ReturnType<typeof setTimeout> \| null = null;\n\n private readonly refDiv: React.RefObject<HTMLDivElement>;\n\n constructor(props: ConfigTabsProps) {\n super(props);\n let tab: string \| undefined;\n\n if (this.props.root) {\n // read the path from hash\n // #tab-instances/config/system.adapter.ping.0/<TAB-NAME-OR-INDEX>\n const hash = (window.location.hash \|\| '').replace(/^#/, '').split('/');\n if (hash.length >= 3 && hash[1] === 'config') {\n const tabS = hash[3];\n const tabN = parseInt(tabS, 10);\n if (tabS && tabN.toString() === tabS) {\n if (tabN >= 0 && tabN < Object.keys(this.props.schema.items).length) {\n tab = Object.keys(this.props.schema.items)[tabN];\n }\n } else if (tabS && Object.keys(this.props.schema.items).includes(tabS)) {\n tab = tabS;\n }\n\n // install on hash change handler\n window.addEventListener('hashchange', this.onHashTabsChanged, false);\n }\n }\n\n if (tab === undefined) {\n tab =\n (((window as any)._localStorage as Storage) \|\| window.localStorage).getItem(\n `${this.props.dialogName \|\| 'App'}.${this.props.oContext.adapterName}`,\n ) \|\| Object.keys(this.props.schema.items)[0];\n if (!Object.keys(this.props.schema.items).includes(tab)) {\n tab = Object.keys(this.props.schema.items)[0];\n }\n }\n this.refDiv = React.createRef();\n\n Object.assign(this.state, { tab, width: 0, openMenu: null });\n }\n\n componentWillUnmount(): void {\n if (this.resizeTimeout) {\n clearTimeout(this.resizeTimeout);\n this.resizeTimeout = null;\n }\n window.removeEventListener('hashchange', this.onHashTabsChanged, false);\n super.componentWillUnmount();\n }\n\n onHashTabsChanged = (): void => {\n const hash = (window.location.hash \|\| '').replace(/^#/, '').split('/');\n if (hash.length > 3 && hash[1] === 'config') {\n const tabS = hash[3];\n const tabN = parseInt(tabS, 10);\n let tab;\n if (tabN.toString() === tabS) {\n if (tabN >= 0 && tabN < Object.keys(this.props.schema.items).length) {\n tab = Object.keys(this.props.schema.items)[tabN];\n }\n } else if (Object.keys(this.props.schema.items).includes(tabS)) {\n tab = tabS;\n }\n if (tab !== undefined && tab !== this.state.tab) {\n (((window as any)._localStorage as Storage) \|\| window.localStorage).setItem(\n `${this.props.dialogName \|\| 'App'}.${this.props.oContext.adapterName}`,\n tab,\n );\n this.setState({ tab });\n }\n }\n };\n\n getCurrentBreakpoint(): 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' {\n if (!this.state.width) {\n return 'md';\n }\n if (this.state.width < 600) {\n return 'xs';\n }\n if (this.state.width < 900) {\n return 'sm';\n }\n if (this.state.width < 1200) {\n return 'md';\n }\n if (this.state.width < 1536) {\n return 'lg';\n }\n return 'xl';\n }\n\n componentDidUpdate(): void {\n if (this.refDiv.current?.clientWidth && this.refDiv.current.clientWidth !== this.state.width) {\n if (this.resizeTimeout) {\n clearTimeout(this.resizeTimeout);\n }\n this.resizeTimeout = setTimeout(() => {\n this.resizeTimeout = null;\n this.setState({ width: this.refDiv.current?.clientWidth });\n }, 50);\n }\n }\n\n onMenuChange(tab: string): void {\n (((window as any)._localStorage as Storage) \|\| window.localStorage).setItem(\n `${this.props.dialogName \|\| 'App'}.${this.props.oContext.adapterName}`,\n tab,\n );\n this.setState({ tab }, () => {\n if (this.props.root) {\n const hash = (window.location.hash \|\| '').split('/');\n if (hash.length >= 3 && hash[1] === 'config') {\n hash[3] = this.state.tab;\n window.location.hash = hash.join('/');\n }\n }\n });\n }\n\n render(): JSX.Element {\n const items = this.props.schema.items;\n let withIcons = false;\n const elements: { icon: React.JSX.Element \| null; label: string; name: string; disabled: boolean }[] = [];\n\n Object.keys(items).map(name => {\n let disabled: boolean;\n if (this.props.custom) {\n const hidden = this.executeCustom(\n items[name].hidden,\n this.props.data,\n this.props.customObj,\n this.props.oContext.instanceObj,\n this.props.index,\n this.props.globalData,\n );\n if (hidden) {\n return;\n }\n disabled = this.executeCustom(\n items[name].disabled,\n this.props.data,\n this.props.customObj,\n this.props.oContext.instanceObj,\n this.props.index,\n this.props.globalData,\n ) as boolean;\n } else {\n const hidden: boolean = this.execute(\n items[name].hidden,\n false,\n this.props.data,\n this.props.index,\n this.props.globalData,\n ) as boolean;\n if (hidden) {\n return;\n }\n disabled = this.execute(\n items[name].disabled,\n false,\n this.props.data,\n this.props.index,\n this.props.globalData,\n ) as boolean;\n }\n const icon = this.getIcon(items[name].icon);\n withIcons = withIcons \|\| !!icon;\n elements.push({ icon, disabled, label: this.getText(items[name].label), name });\n });\n\n const currentBreakpoint = this.getCurrentBreakpoint();\n let tabs: React.JSX.Element;\n if (currentBreakpoint === 'xs' \|\| currentBreakpoint === 'sm') {\n tabs = (\n <Toolbar\n style={{\n width: '100%',\n backgroundColor: this.props.oContext.themeType === 'dark' ? '#222' : '#DDD',\n }}\n variant=\"dense\"\n >\n <IconButton\n onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n this.setState({ openMenu: event.currentTarget })\n }\n >\n <MenuIcon />\n </IconButton>\n {this.state.openMenu ? (\n <Menu\n open={!0}\n anchorEl={this.state.openMenu}\n onClose={() => this.setState({ openMenu: null })}\n >\n {elements.map(el => {\n return (\n <MenuItem\n disabled={el.disabled}\n key={el.name}\n onClick={() => {\n this.setState({ openMenu: null }, () => this.onMenuChange(el.name));\n }}\n selected={el.name === this.state.tab}\n >\n {withIcons ? <ListItemIcon>{el.icon}</ListItemIcon> : null}\n {el.label}\n </MenuItem>\n );\n })}\n </Menu>\n ) : null}\n </Toolbar>\n );\n } else {\n tabs = (\n <Tabs\n variant=\"scrollable\"\n scrollButtons=\"auto\"\n style={this.props.schema.tabsStyle}\n value={this.state.tab}\n onChange={(_e, tab: string): void => this.onMenuChange(tab)}\n >\n {elements.map(el => {\n return (\n <Tab\n id={el.name}\n wrapped\n disabled={el.disabled}\n key={el.name}\n value={el.name}\n iconPosition={this.props.schema.iconPosition \|\| 'start'}\n icon={el.icon}\n label={el.label}\n />\n );\n })}\n </Tabs>\n );\n }\n\n return (\n <div\n style={styles.tabs}\n ref={this.refDiv}\n >\n {tabs}\n <ConfigPanel\n oContext={this.props.oContext}\n isParentTab\n changed={this.props.changed}\n key={this.state.tab}\n index={1001}\n arrayIndex={this.props.arrayIndex}\n globalData={this.props.globalData}\n commandRunning={this.props.commandRunning}\n style={{\n ...styles.panel,\n ...(withIcons ? styles.panelWithIcons : styles.panelWithoutIcons),\n }}\n common={this.props.common}\n alive={this.props.alive}\n themeName={this.props.themeName}\n data={this.props.data}\n originalData={this.props.originalData}\n onChange={this.props.onChange}\n onError={this.props.onError}\n customObj={this.props.customObj}\n custom={this.props.custom}\n schema={items[this.state.tab]}\n table={this.props.table}\n withIcons={withIcons}\n />\n </div>\n );\n }\n}\n\nexport default ConfigTabs;\n"]}

package/build/types.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import type {
     ObjectBrowserCustomFilter,
     ObjectBrowserType,
     ThemeType,
+    ThemeName,
 } from '@iobroker/adapter-react-v5';
 import type { ConfigGeneric, DeviceManagerPropsProps } from '#JC/JsonConfigComponent/ConfigGeneric';
@@ -779,6 +780,8 @@ export interface ConfigItemTable extends ConfigItem {
     uniqueColumns?: string[];
     /** These items will be encrypted before saving with simple (not SHA) encryption method */
     encryptedAttributes?: string[];
+    /** Breakpoint that will be rendered as cards */
+    useCardFor?: ('xs' | 'sm' | 'md' | 'lg' | 'xl')[];
 }
 export interface ConfigItemTimePicker extends ConfigItem {
@@ -1006,18 +1009,24 @@ export type ConfigItemAny =
     | ConfigItemQrCode;
 export type JsonConfigContext = {
-    DeviceManager?: React.FC<DeviceManagerPropsProps>;
     adapterName: string;
+    dateFormat: string;
+    forceUpdate: (attr: string | string[], data: any) => void;
+    instance: number;
+    isFloatComma: boolean;
+    socket: AdminConnection;
+    systemConfig: ioBroker.SystemConfigCommon;
+    theme: IobTheme;
+    themeType: ThemeType;
+    _themeName: ThemeName;
+    DeviceManager?: React.FC<DeviceManagerPropsProps>;
     changeLanguage?: () => void;
     customs?: Record<string, typeof ConfigGeneric>;
-    dateFormat: string;
     embedded?: boolean;
     expertMode?: boolean;
-    forceUpdate: (attr: string | string[], data: any) => void;
     imagePrefix?: string;
-    instance: number;
     instanceObj?: ioBroker.InstanceObject;
-    isFloatComma: boolean;
     /** If true, this field edits multiple data points at once and thus contains an array, should not be saved if not changed */
     multiEdit?: boolean;
     /** Backend request to refresh data */
@@ -1025,11 +1034,6 @@ export type JsonConfigContext = {
     onCommandRunning: (commandRunning: boolean) => void;
     onValueChange?: (attr: string, value: any, saveConfig: boolean) => void;
     registerOnForceUpdate?: (attr: string, cb?: (data: any) => void) => void;
-    socket: AdminConnection;
-    systemConfig: ioBroker.SystemConfigCommon;
-    theme: IobTheme;
-    themeType: ThemeType;
-    _themeName: ThemeName;
 };
 // Notification GUI

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@iobroker/json-config",
     "description": "This package contains the ioBroker JSON config UI components",
-    "version": "7.4.13",
+    "version": "7.4.15",
     "main": "./build/index.js",
     "types": "./build/index.d.ts",
     "scripts": {
@@ -18,7 +18,7 @@
         "access": "public"
     },
     "dependencies": {
-        "@iobroker/adapter-react-v5": "7.4.13",
+        "@iobroker/adapter-react-v5": "7.4.15",
         "@mui/x-date-pickers": "^7.23.0",
         "crypto-js": "^4.2.0",
         "react-ace": "^13.0.0",
@@ -34,5 +34,5 @@
         "build/",
         "LICENSE"
     ],
-    "gitHead": "15a253034892cbc6eea2ed8884b7d6ad02b7d162"
+    "gitHead": "f03fbf8452636f396acf33277562a4572d629317"
 }