Merge pull request #1511 from bartbutenaers/ui-switch-clickable-none

Switch - no clickable area
FlowFuse · Dec 4, 2024 · 5a3ac99 · 5a3ac99
2 parents 4d17baa + 0079d23
commit 5a3ac99
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/nodes/widgets/locales/en-US/ui_switch.html b/nodes/widgets/locales/en-US/ui_switch.html
@@ -78,6 +78,7 @@ <h3>Dynamic Properties (Inputs)</h3>
                 <li><code>switch</code>: only the switch icon is clickable</li>
                 <li><code>label</code>: both the label text and the switch icon are clickable</li>
                 <li><code>line</code>: the entire line is clickable</li>
+                <li><code>none</code>: neither the label text nor the switch icon are clickable</li>
             </ul>
         </dd>
     </dl>

diff --git a/nodes/widgets/ui_switch.html b/nodes/widgets/ui_switch.html
@@ -193,6 +193,7 @@
             <option value="switch">Only switch</option>
             <option value="label">Label and switch</option>
             <option value="line">Entire line</option>
+            <option value="none">None</option>
         </select>
     </div>
     <div class="form-row">
@@ -349,4 +350,4 @@
         display: none;
     }
 
-</style>
+</style>
diff --git a/ui/src/widgets/ui-switch/UISwitch.vue b/ui/src/widgets/ui-switch/UISwitch.vue
@@ -1,10 +1,13 @@
 <template>
-    <div class="nrdb-switch" :class="computedClass">
+    <div
+        class="nrdb-switch"
+        :class="computedClass"
+        :style="{cursor: lineClickable ? 'pointer' : 'default'}"
+        @click="lineClickable ? toggle() : null"
+    >
         <label
             v-if="label"
             class="v-label"
-            :style="{cursor: lineClickable ? 'pointer' : 'default'}"
-            @click="lineClickable ? toggle() : null"
         >
             <!-- eslint-disable vue/no-v-html -->
             <span
@@ -17,11 +20,11 @@
         <v-switch
             v-if="!icon" v-model="status"
             :disabled="!state.enabled"
-            :class="{'active': status}"
+            :class="{'active': status, 'nrdb-ui-switch-default-cursor': !switchClickable}"
             hide-details="auto" color="primary"
             :loading="loading ? (status === true ? 'secondary' : 'primary') : null"
             readonly
-            @click="toggle"
+            @click.stop="switchClickable ? toggle() : null"
         />
         <v-btn v-else-if="!loading" variant="text" :disabled="!state.enabled" :icon="icon" :color="color" @click="toggle" />
         <v-progress-circular v-else indeterminate color="primary" />
@@ -87,6 +90,9 @@ export default {
         lineClickable: function () {
             return this.getProperty('clickableArea') === 'line'
         },
+        switchClickable: function () {
+            return this.getProperty('clickableArea') !== 'none'
+        },
         textClickable: function () {
             return this.getProperty('clickableArea') === 'label' || this.getProperty('clickableArea') === 'line'
         },
@@ -235,4 +241,9 @@ export default {
         flex-direction: row-reverse;
     }
 }
+
+/* Default cursor */
+.nrdb-ui-switch-default-cursor .v-selection-control__input input, .nrdb-ui-switch-default-cursor .v-switch__track {
+    cursor:default;
+}
 </style>