Merge pull request #1567 from bartbutenaers/buttongroup-options-html-…

…labels ui-buttongroup: html option labels
FlowFuse · Jan 10, 2025 · 319010d · 319010d
2 parents 5dc8466 + 2c21492
commit 319010d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/docs/nodes/widgets/ui-button-group.md b/docs/nodes/widgets/ui-button-group.md
@@ -9,7 +9,7 @@ props:
     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:
-        description: Specify which options need to be displayed. Each option can specify a label, icon, value and color.
+        description: Specify which options need to be displayed. Each option can specify a label, icon, value and color.  Html content is allowed for the labels.
         dynamic: true
     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.

diff --git a/nodes/widgets/locales/en-US/ui_button_group.html b/nodes/widgets/locales/en-US/ui_button_group.html
@@ -16,7 +16,7 @@ <h3>Properties</h3>
     <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>Label: </i>(optional) The description that will be displayed.  Html content is allowed</li>
             <li><i>Icon: </i>(optional) The icon to display for the given option. We use the Material Design Icons, you can see a full list of the available icons <a href="https://pictogrammers.com/library/mdi/">here</a>. There is no need to include the "mdi-" prefix, just the name of the icon.</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>

diff --git a/ui/src/widgets/ui-button-group/UIButtonGroup.vue b/ui/src/widgets/ui-button-group/UIButtonGroup.vue
@@ -8,7 +8,8 @@
                     <v-icon size="x-large" :icon="`mdi-${option.icon.replace(/^mdi-/, '')}`" />
                 </template>
                 <v-icon v-if="option.icon && !option.label" :icon="`mdi-${option.icon.replace(/^mdi-/, '')}`" size="x-large" />
-                {{ option.label }}
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <span v-html="option.label" />
             </v-btn>
         </v-btn-toggle>
     </div>
@@ -47,8 +48,9 @@ export default {
             if (options) {
                 return options.map(option => {
                     if (typeof option === 'string') {
-                        return { label: option, value: option }
+                        return { label: DOMPurify.sanitize(option), value: option }
                     } else {
+                        option.label = DOMPurify.sanitize(option.label)
                         return option
                     }
                 })