@iobroker/gui-components 10.3.15 → 10.3.16

package/README.md

@@ -36,7 +36,7 @@ npm create vite@latest src -- --template react-ts
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@iobroker/gui-components": "^10.3.15",
+        "@iobroker/gui-components": "^10.3.16",
         "@mui/icons-material": "^9.0.1",
         "@mui/material": "^9.0.1",
         "react": "^19.2.5",
@@ -877,6 +877,10 @@ You can find the migration instructions:
 -->
 
 ## Changelog
+### 10.3.16 (2026-11-04)
+- (@GermanBluefox) Added: object browser shows an arrow up/down next to a changed number; a changed boolean flips
+- (@GermanBluefox) Added: `SaveCloseButtons` shows a check mark after saving
+
 ### 10.3.15 (2026-11-03)
 - (@GermanBluefox) Added: animated icons `IconPlayPause`, `IconStatusLed`, `IconResult`, `IconRefresh`, `IconBell`, `IconMenuArrow`, `IconTrash`, `IconConnectionState`, `IconExpertMode` and `IconFolder` (CSS/SVG)
 - (@GermanBluefox) Changed: the object browser uses the animated reload and delete icons

package/build/Components/ObjectBrowser/ObjectBrowserClass.d.ts

@@ -97,6 +97,15 @@ export declare class ObjectBrowserClass extends Component<ObjectBrowserProps, Ob
     private windowLast;
     /** id -> how often the state of this row has changed. Part of the memo key of the row */
     readonly rowStateVersion: Record<string, number>;
+    /**
+     * id -> last change of a number (arrow up or down) or of a boolean (the value flips), see `renderColumnValue`.
+     * `shown` is the time the row showed it first, so a row that is rendered again continues the animation.
+     */
+    readonly valueTrends: Record<string, {
+        dir: 'up' | 'down' | 'toggle';
+        ts: number;
+        shown?: number;
+    }>;
     /** The running animations of an unfolded or folding node (see `rowAnimation.ts`) */
     private rowAnimations;
     /** The node whose children slide under its row at the moment; they are removed when that ends */

package/build/Components/ObjectBrowser/ObjectBrowserClass.js

@@ -17,7 +17,7 @@ import { Utils } from '../Utils'; // @iobroker/gui-components/Components/Utils
 import { TabContainer } from '../TabContainer';
 import { TabContent } from '../TabContent';
 import { TabHeader } from '../TabHeader';
-import { ROW_HEIGHT, applyFilter, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
+import { ROW_HEIGHT, TREND_DURATION, applyFilter, buildTree, findNode, formatValue, generateFile, getName, colVar, widthFromContainer, growVar, getSelectIdIconFromObjects, setCustomValue, } from './utils';
 import { HistoryChart } from './HistoryChart';
 import { styles } from './styles';
 import * as dialogs from './dialogs';
@@ -124,6 +124,11 @@ export class ObjectBrowserClass extends Component {
     windowLast = 0;
     /** id -> how often the state of this row has changed. Part of the memo key of the row */
     rowStateVersion = {};
+    /**
+     * id -> last change of a number (arrow up or down) or of a boolean (the value flips), see `renderColumnValue`.
+     * `shown` is the time the row showed it first, so a row that is rendered again continues the animation.
+     */
+    valueTrends = {};
     /** The running animations of an unfolded or folding node (see `rowAnimation.ts`) */
     rowAnimations = [];
     /** The node whose children slide under its row at the moment; they are removed when that ends */
@@ -1073,6 +1078,16 @@ export class ObjectBrowserClass extends Component {
                 item.data.state = undefined;
             }
         }
+        const oldVal = oldState?.val;
+        const newVal = state?.val;
+        if (typeof oldVal === 'number' && typeof newVal === 'number' && oldVal !== newVal) {
+            if (!Number.isNaN(oldVal) && !Number.isNaN(newVal)) {
+                this.valueTrends[id] = { dir: newVal > oldVal ? 'up' : 'down', ts: Date.now() };
+            }
+        }
+        else if (typeof oldVal === 'boolean' && typeof newVal === 'boolean' && oldVal !== newVal) {
+            this.valueTrends[id] = { dir: 'toggle', ts: Date.now() };
+        }
         if (state) {
             this.states[id] = state;
         }
@@ -2892,6 +2907,59 @@ export class ObjectBrowserClass extends Component {
 .newValueBrowser-light {
     animation: newValueAnimation-light 2s ease-in-out;
 }
+.iob-ob-trend {
+    display: inline-flex;
+    align-self: center;
+    flex-shrink: 0;
+    width: 0.85em;
+    height: 0.85em;
+    margin-left: 4px;
+    opacity: 0;
+    animation: iob-ob-trend-up ${TREND_DURATION}ms ease-out forwards;
+}
+.iob-ob-trend svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+}
+.iob-ob-trend-up {
+    color: ${this.props.themeType === 'dark' ? '#66bb6a' : '#2e7d32'};
+}
+.iob-ob-trend-down {
+    color: ${this.props.themeType === 'dark' ? '#ef5350' : '#c62828'};
+    animation-name: iob-ob-trend-down;
+}
+@keyframes iob-ob-trend-up {
+    0% { opacity: 0; transform: translateY(45%); }
+    12% { opacity: 1; transform: none; }
+    80% { opacity: 1; }
+    100% { opacity: 0; }
+}
+@keyframes iob-ob-trend-down {
+    0% { opacity: 0; transform: translateY(-45%); }
+    12% { opacity: 1; transform: none; }
+    80% { opacity: 1; }
+    100% { opacity: 0; }
+}
+.newValueBrowser-dark.iob-ob-flip {
+    animation: iob-ob-flip 0.32s cubic-bezier(0.3, 1.4, 0.5, 1), newValueAnimation-dark 2s ease-in-out;
+}
+.newValueBrowser-light.iob-ob-flip {
+    animation: iob-ob-flip 0.32s cubic-bezier(0.3, 1.4, 0.5, 1), newValueAnimation-light 2s ease-in-out;
+}
+@keyframes iob-ob-flip {
+    0% { transform: perspective(60px) rotateX(90deg); opacity: 0.3; }
+    100% { transform: none; opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+    .iob-ob-trend { animation-name: iob-ob-trend-fade; }
+    .newValueBrowser-dark.iob-ob-flip { animation: newValueAnimation-dark 2s ease-in-out; }
+    .newValueBrowser-light.iob-ob-flip { animation: newValueAnimation-light 2s ease-in-out; }
+    @keyframes iob-ob-trend-fade {
+        0%, 80% { opacity: 1; }
+        100% { opacity: 0; }
+    }
+}
 .highlight-link .iob-link {
     text-decoration: underline;
     cursor: pointer;