Tristate component

[WolfgangFahl]

Candidate for #1618

Summary

Addition of a new class named Tristate to the NiceGUI widgets project. This class provides a tri-state toggle input component that leverages predefined Unicode icon sets for visual representation, handling state changes entirely within Python without relying on JavaScript logic for state management.

Demo

http://ngdemo.bitplan.com/tristate

Details

The Tristate component allows users to cycle through three states, each represented by a distinct Unicode icon. It's designed to integrate seamlessly with the existing NiceGUI application structure, offering a reactive UI component that updates its display based on user interactions.

Here are the key features of the Tristate module:

• Tri-state functionality: unchecked, checked, and indeterminate.
• Unicode icons for visual state representation.
• Python-managed state cycling with no dependence on JavaScript for logic.
• Reactivity handled within Python to update the Vue component's props.
• Custom event emission on state changes with support for user-defined callback functions.

Example Icon Sets for Tristate Module

• Arrows: arrows - Left Arrow (←), Up-Down Arrow (↕️), Right Arrow (→)
• Ballot: ballot - Ballot Box (☐), Ballot Box with Check (☑️), Ballot Box with X (☒️)
• Check: check - Checkbox (☐), Question Mark (❔), Checkmark (✔️)
• Circles: circles - Circle (⭘), Bullseye (🎯), Fisheye (🔘)
• Electrical: electrical - Plug (🔌), Battery Half (🔋), Lightning (⚡)
• Faces: faces - Sad Face (☹️), Neutral Face (😐), Happy Face (☺️)
• Hands: hands - Thumbs Down (👎), Hand (✋), Thumbs Up (👍)
• Hearts: hearts - Empty Heart (♡), Half Heart (❤️), Full Heart (❤️)
• Locks: locks - Unlocked (🔓), Locked with Pen (🔏), Locked (🔒)
• Marks: marks - Question Mark (❓), Check Mark (✅), Cross Mark (❌)
• Moons: moons - New Moon (🌑), Half Moon (🌓), Full Moon (🌕)
• Musical Notes: musical_notes - Single Note (♪), Double Note (♫), Multiple Notes (🎶)
• Stars: stars - Empty Star (☆), Half Star (★), Full Star (★)
• Traffic Lights: traffic_lights - Red (🔴), Yellow (🟡), Green (🟢)
• Weather: weather - Cloud (☁️), Sun (☀️), Thunderstorm (⛈️)

Implementation Details

-tristate.py
-tristate.js

The Tristate class was developed adhering to the following criteria:

• Use of google style docstrings for clear documentation.
• Type hints for all methods and properties for better code clarity.
• Code formatting according to PEP 8 standards, utilizing black and isort.
• An explicit call to an update method that forces the NiceGUI framework to re-render the component on state changes.
• ChatGPT4 was used for the implementation - see the prompt list in the code

References

The Tristate module is inspired by the following resources:

• NiceGUI Custom Vue Component example
• JSFiddle by WF
• Stack Overflow answer by WF

[retsyo]

nice. It could be used for Minesweeper if more states are supported

[WolfgangFahl]

the number of states is actually not limited