Add documentation & il8n scaffolding for ui-button-group

docs/.vitepress/config.js

@@ -94,6 +94,7 @@ export default ({ mode }) => {
               collapsed: false,
               items: [
                 { text: 'ui-button', link: '/nodes/widgets/ui-button' },
+                { text: 'ui-button-group', link: '/nodes/widgets/ui-button-group' },
                 { text: 'ui-control', link: '/nodes/widgets/ui-control' },
                 { text: 'ui-chart', link: '/nodes/widgets/ui-chart' },
                 { text: 'ui-dropdown', link: '/nodes/widgets/ui-dropdown' },

docs/nodes/widgets/ui-button-group.md

@@ -0,0 +1,37 @@
+---
+props:
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
+    Label: The text shown within the button.
+    Appearance: Specify whether the shape of the widget should be rectangular or have rounded corners.
+    Use theme colors: Specify whether the theme colors should be used. If not active, custom colors can be specified for each option separately.
+    Options: Specify which options need to be displayed. Each option can specify a label, icon, value and color.
+    Topic: The text that needs to be send in the msg.topic field.
+    Passthrough: Specify whether input messages should be passed through as output messages.
+controls:
+    enabled:
+        example: true | false
+        description: Allow control over whether or not the button is clickable.
+dynamic:
+    Class:
+        payload: msg.class
+        structure: ["String"]
+---
+
+<script setup>
+</script>
+
+# Button `ui-button-grup`
+
+Adds a set of buttons that act as a multi-state switch to your dashboard. When an individual button is clicked, it will become active and all other buttons in the group will become inactive, with the newly selected value being emitted from the node in Node-RED.
+
+The selected option can be set by sending a `msg.payload` with the value of the button to be selected.
+
+## Properties
+
+<PropsTable/>
+
+## Examples
+
+![Examples of a Button Group](/images/node-examples/ui-button-group.png "Example of a Button Group"){data-zoomable}
+*Example of some rendered button groups in a Dashboard.*

nodes/widgets/locales/en-US/ui_button_group.html

@@ -0,0 +1,26 @@
+
+<script type="text/html" data-help-name="ui-button-group">
+    <p>A Node-RED node to show a switch with multiple buttons in the Node-RED Dashboard.</p>
+    <p>The active selection can be dynamically set by sending a <code>msg.payload</code> which matches a respective option's value.</p>
+    <h3>Properties</h3>
+    <p><strong>Label:</strong><br/>
+    The label that will be displayed on the left side of the button.</p>
+    <p><strong>Appearance:</strong><br/>
+    Specify whether the shape of the widget should be rectangular or have rounded corners.</p>
+    <p><strong>Use theme colors:</strong><br/>
+    Specify whether the theme colors should be used. If not active, custom colors can be specified for each option separately.</p>
+    <p><strong>Passthrough:</strong><br/>
+    Specify whether input messages should be passed through as output messages
+    </p>
+    <p><strong>Options:</strong><br/>
+    Specify which options need to be displayed:
+        <ul>
+            <li><i>Label: </i>(optional) The description that will be displayed.</li>
+            <li><i>Icon: </i>(optional) The icon to display for the given option.</li>
+            <li><i>Value: </i>The value that will be send in input and output messages.</li>
+            <li><i>Color: </i>The color of the option in the switch.</li>
+        </ul>
+    </p>
+    <p><strong>Topic:</strong><br/>
+    The text that needs to be send in the <code>msg.topic</code> field.</p>
+</script>

nodes/widgets/locales/en-US/ui_button_group.json

@@ -0,0 +1,14 @@
+{
+    "ui-button-group": {
+        "label": {
+            "group": "Group",
+            "size": "Size",
+            "icon": "Icon",
+            "label": "Label",
+            "colors": "Colors",
+            "options": "Options",
+            "appearance": "Appearance",
+            "tcolors": "Use theme colors"
+        }
+    }
+}

nodes/widgets/ui_button_group.html

@@ -196,7 +196,7 @@
 
                 node.options.push({ label, icon, value, valueType, color })
             })
-    }
+        }
     })
 </script>
 
@@ -206,32 +206,32 @@
         <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
-        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-button.label.group"></label>
+        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-button-group.label.group"></label>
         <input type="text" id="node-input-group">
     </div>
     <div class="form-row">
-        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-button.label.size"></label>
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-button-group.label.size"></label>
         <input type="hidden" id="node-input-width">
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
     </div>
     <div class="form-row">
-        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-button-group.label.label"></span></label>
         <input type="text" id="node-input-label">
     </div>
     <div class='form-row'>
-        <label for='node-input-rounded'><i class='fa fa-gear'></i> Appearance</label>        
+        <label for='node-input-rounded'><i class='fa fa-gear'></i> <span data-i18n="ui-button-group.label.appearance"></span></label>        
         <span id="appearance-square" style="opacity:1; border:1px solid; padding: 3px 20px 2px 5px; "><i class="fa fa-square"></i></span>
         <input type="checkbox" id="node-input-rounded" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px; margin-left:5px;">
         <span id="appearance-round" style="opacity:1; border:1px solid; border-radius:15px; padding: 3px 20px 2px 5px; "><i class="fa fa-circle"></i></span>     
     </div> 
     <div class="form-row">
-        <label for='node-input-useThemeColors'><i class='fa fa-paint-brush'></i> Colors</label>
+        <label for='node-input-useThemeColors'><i class='fa fa-paint-brush'></i> <span data-i18n="ui-button-group.label.colors"></span></label>
         <input type='checkbox' id='node-input-useThemeColors' style='width:auto ;border:none; vertical-align:baseline;' placeholder='0'>
-        <span for='node-input-useThemeColors'> Use theme colors</span>
+        <label for='node-input-useThemeColors' style="width: auto;"> <span data-i18n="ui-button-group.label.tcolors"></span></label>
     </div>
     <div class="form-row" style="margin-bottom:0;">
-        <label><i class="fa fa-list"></i> Options:</label>
+        <label><i class="fa fa-list"></i> <span data-i18n="ui-button-group.label.options"></span>:</label>
         <span id="configError" style="color:#DD0000"><b>All Values must be unique.</b></span>
     </div>
     <div class="form-row">       
@@ -247,76 +247,4 @@
         <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
         <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
     </div>
-</script>
-
-<script type="text/html" data-help-name="ui_multistate_switch">
-    <p>A Node Red node to show a switch with multiple states in the Node-RED dashboard.</p>
-    <p><strong>Label:</strong><br/>
-    The label that will be displayed on the left side of the button.</p>
-    <p><strong>Appearance:</strong><br/>
-    Specify whether the shape of the widget should be rectangular or having rounded corners.</p>
-    <p><strong>Use theme colors:</strong><br/>
-    Specify whether the theme colors should be used.  If not active, custom colors can be specified for each option separately.</p>
-    <p><strong>Hide label of selected option:</strong><br/>
-    Specify whether the label of the selected option should be hidden, i.e. don't need to be displayed on top of the slider.</p>
-    <p>Note that this option can dynamically be overridden by input messages with <code>msg.topic="enable"</code> or <code>msg.topic="disable"</code>.</p>
-    <p><strong>Passthrough:</strong><br/>
-    Specify whether input messages should be passed through as output messages:
-        <ul>
-            <li><i>Never: </i>The input messages will never be passed through.</li>
-            <li><i>Always: </i>The input messages will always be passed through.</li>
-            <li><i>If state changes: </i>The input messages will only be passed through, when they change the switch state.</li>
-        </ul>
-    </p>
-    <p><strong>Input msg:</strong><br/>
-    Specify whether input messages should be accepted:
-        <ul>
-            <li><i>None: </i>The input messages will never be accepted.</li>
-            <li><i>All: </i>The input messages will always be accepted.</li>
-        </ul>
-    </p>
-    <p><strong>User input:</strong><br/>
-    Specify whether user input (i.e. click and touch events) should be accepted:
-        <ul>
-            <li><i>Disabled: </i>The user input will never be accepted.</li>
-            <li><i>Enabled and show: </i>The user input will be accepted, and the new state will be visualized.</li>
-            <li><i>Enabled but don't show: </i>The user input will be accepted, but the new state will not be visualized.</li>
-        </ul>
-        </ul>
-    </p>
-    <p><strong>Options:</strong><br/>
-    Specify which options need to be displayed:
-        <ul>
-            <li><i>Label: </i>The description that will be displayed.</li>
-            <li><i>Value: </i>The value that will be send in input and output messages.</li>
-            <li><i>Color: </i>The color of the option in the switch.</li>
-        </ul>
-    </p>
-    <p><strong>State field:</strong><br/>
-    The field in the input and output message that will contain the new switch state.</p>
-    <p><strong>User input field:</strong><br/>
-    The field in the input message that will contain a value, indicating whether the switch should be enabled or not.  Which means whether it allows user input (click/touch).  The value can be:
-        <ul>
-            <li><i>"enabled_show" (or true): </i>see user input modus "Enabled and show".</li>
-            <li><i>"enabled_not_show": </i>see user input modus "Enabled but don't show".</li>
-            <li><i>"disabled" (or false): </i>see user input modus "Disabled".</li>              
-        </ul>    
-    </p>
-    <p><strong>Passthrough field:</strong><br/>
-    The field in the input message that will contain a value, indicating whether the input messages should be passed through or not.  The value can be:
-        <ul>
-            <li><i>"never": </i>see passthrough modus "Never".</li>
-            <li><i>"always": </i>see passthrough modus "Allways".</li>
-            <li><i>"change": </i>see passthrough modus "If state changes".</li>                    
-        </ul>    
-    </p>
-    <p><strong>Input msg field:</strong><br/>
-    The field in the input message that will contain a value, indicating whether the input messages should be accepted or not.  The value can be:
-        <ul>
-            <li><i>"none": </i>see input msg modus "None".</li>
-            <li><i>"all": </i>see input msg modus "All".</li>                
-        </ul>    
-    </p>
-    <p><strong>Topic:</strong><br/>
-    The text that needs to be send in the <code>msg.topic</code> field.</p>
 </script>

ui/src/widgets/ui-button-group/UIButtonGroup.vue

@@ -113,6 +113,10 @@ export default {
    background-color: rgb(var(--v-theme-group-background));
 }
 
+.nrdb-ui-button-group-wrapper .v-btn--variant-elevated {
+    --v-activated-opacity: 0;
+}
+
 .nrdb-ui-button-group-wrapper .icon-only .v-btn__prepend {
     margin-inline: 0;
 }