component and test modifications along with the docs update

cypress/tests/widgets/number.spec.js

@@ -32,32 +32,6 @@ describe('Node-RED Dashboard 2.0 - Number Input Widget', () => {
         cy.get('.nrdb-ui-number-field .v-messages__message').should('contain', 'Validation Error Message')
     })
 
-    // Test case: Emits the correct payload when the value changes
-    it('emits the correct payload when the value changes', () => {
-        cy.intercept('POST', '/api/widget-change').as('widgetChange')
-
-        cy.get('.nrdb-ui-number-field input[type="text"]').clear()
-        cy.get('.nrdb-ui-number-field input[type="text"]').type('42')
-        cy.get('.nrdb-ui-number-field button[type="submit"]').click()
-
-        cy.wait('@widgetChange').its('request.body').should('deep.equal', {
-            id: 'number-input-widget-id',
-            payload: '42'
-        })
-    })
-
-    // Test case: Emits onEnter event correctly
-    it('emits onEnter event correctly', () => {
-        cy.get('.nrdb-ui-number-field input[type="text"]').type('{enter}')
-        cy.get('@keyup.enter').should('have.been.called')
-    })
-
-    // Test case: Emits onBlur event correctly
-    it('emits onBlur event correctly', () => {
-        cy.get('.nrdb-ui-number-field input[type="text"]').blur()
-        cy.get('@blur').should('have.been.called')
-    })
-
     // Test case: Emits onClear event correctly
     it('emits onClear event correctly', () => {
         cy.get('.nrdb-ui-number-field .v-input__clearable').click()

docs/nodes/widgets/ui-number-input.md

@@ -0,0 +1,52 @@
+---
+description: Incorporate ui-number-input in Node-RED Dashboard 2.0 for customizable, user-driven data entry and feedback.
+props:
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Size: Controls the width of the number input field with respect to the parent group. Maximum value is the width of the group.
+    Icon: Renders a Material Design icon within the Number Input. There is no need to include the "mdi-" prefix.
+    Icon Position: If "Icon" is defined, this property controls which side of the "Label" the icon will render on.
+    Icon Inner Position: If "Icon" is defined, this property controls if icon is render inside or outside the number input box
+    Label: The number shown within the number input field.
+    Tooltip: The number shown when hovering over the number input field.
+    Passthrough: If this node receives a msg in Node-RED, should it be passed through to the output as if a new value was inserted to the input?
+    Clear selection with button: If true, a clear icon/button appears on the rigth side to clear the number input
+    Send On "Clear Button": Send a msg when the user clear the number input using the clear button, the "Clear Selection" button must be enabled.
+controls:
+    enabled:
+        example: true | false
+        description: Allow control over whether or not the number-input is enabled
+dynamic:
+    Class:
+        payload: msg.class
+        structure: ["String"]
+---
+
+<script setup>
+    import TryDemo from "./../../components/TryDemo.vue"
+</script>
+
+
+<TryDemo href="number-input">
+
+# Number Input `ui-number-input`
+
+</TryDemo>
+
+Adds a single number input row to your dashboard.
+
+## Properties
+
+<PropsTable/>
+
+## Dynamic Properties
+
+<DynamicPropsTable/>
+
+## Controls
+
+<ControlsTable/>
+
+## Example
+
+![Example of Number Inputs Types](/images/node-examples/ui-number-input.png "Example of Number Inputs Types"){data-zoomable}
+*Example of severall Number Inputs Types rendered in a Dashboard.*

nodes/widgets/ui_number_input.html

@@ -29,19 +29,9 @@
                 max: { value: 10, required: true, validate: RED.validators.number() },
                 step: { value: 1 },
                 tooltip: { value: '' },
-                delay: {
-                    value: 300,
-                    validate: function (v) {
-                        return $('#node-input-sendOnDelay').is(':checked') ? RED.validators.number()(v) : true
-                    }
-                },
                 passthru: { value: true },
-                sendOnDelay: { value: false },
-                sendOnBlur: { value: true },
-                sendOnEnter: { value: true },
                 className: { value: '' },
                 clearable: { value: false },
-                sendOnClear: { value: false },
                 icon: { value: '' },
                 iconPosition: { value: 'left' },
                 iconInnerPosition: { value: 'inside' }
@@ -88,9 +78,6 @@
                 if (this.clearable === undefined) {
                     $('#node-input-clearable').prop('checked', false)
                 }
-                if (this.sendOnClear === undefined) {
-                    $('#node-input-sendOnClear').prop('checked', false)
-                }
 
                 if (!this.iconPosition) {
                     $('#node-input-iconPosition').val('left')
@@ -187,26 +174,6 @@
     <div class="form-row">
         <label style="width:auto" for="node-input-payload"><i class="fa fa-clock-o"></i> Send message on:</label>
     </div>
-    <div class="form-row form-row-flex" style="padding-left: 25px; align-items: center;">
-        <input type="checkbox" checked id="node-input-sendOnDelay" style="display:inline-block; width:auto; vertical-align:top;">
-        <label style="width:auto" for="node-input-sendOnDelay"> Delay</label>
-        <div id="node-input-delay-box">
-            <input type="text" style="width:58px" id="node-input-delay">
-            <label for="node-input-delay">(ms)</label>
-        </div>
-    </div>
-    <div class="form-row" style="padding-left: 25px;">
-        <input type="checkbox" checked id="node-input-sendOnBlur" style="display:inline-block; width:auto; vertical-align:top;">
-        <label style="width:auto" for="node-input-sendOnBlur"> Focus Leave</label>
-    </div>
-    <div id="node-input-container-sendOnEnter" class="form-row" style="padding-left: 25px;">
-        <input type="checkbox" checked id="node-input-sendOnEnter" style="display:inline-block; width:auto; vertical-align:top;">
-        <label style="width:auto" for="node-input-sendOnEnter"> Press Enter</label>
-    </div>
-    <div id="node-input-container-sendOnClear" class="form-row" style="padding-left: 25px;">
-        <input type="checkbox" checked id="node-input-sendOnClear" style="display:inline-block; width:auto; vertical-align:top;">
-        <label style="width:auto" for="node-input-sendOnClear"> Clear Button</label>
-    </div>
     <div class="form-row">
         <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
     </div>

ui/src/widgets/ui-number-input/UINumberInput.vue

@@ -3,12 +3,11 @@
         <!-- eslint-disable-next-line vue/no-template-shadow -->
         <template #activator="{ props }">
             <v-number-input
-                v-model="value" :reverse="false" controlVariant="default" :hideInput="false"
-                :inset="false" v-bind="props" :disabled="!state.enabled" class="nrdb-ui-number-field" :label="label"
+                v-model="value" :reverse="false" controlVariant="default" :hideInput="false" :inset="false"
+                v-bind="props" :disabled="!state.enabled" class="nrdb-ui-number-field" :label="label"
                 :rules="validation" :clearable="clearable" variant="outlined" hide-details="auto"
                 :prepend-icon="prependIcon" :append-icon="appendIcon" :append-inner-icon="appendInnerIcon"
-                :prepend-inner-icon="prependInnerIcon" @update:model-value="onChange" @keyup.enter="onEnter"
-                @blur="onBlur" @click:clear="onClear"
+                :prepend-inner-icon="prependInnerIcon" @update:model-value="onChange" @click:clear="onClear"
             />
         </template>
     </v-tooltip>
@@ -38,13 +37,13 @@ export default {
     },
     computed: {
         ...mapState('data', ['messages']),
-        label: function () {
+        label () {
             return this.props.label
         },
-        tooltip: function () {
+        tooltip () {
             return this.props.tooltip
         },
-        clearable: function () {
+        clearable () {
             return this.props.clearable
         },
         prependIcon () {
@@ -93,7 +92,7 @@ export default {
                 this.messages[this.id] = msg
             }
         },
-        validation: function () {
+        validation () {
             if (this.type === 'email') {
                 return [v => !v || /^[^\s@]+@[^\s@]+$/.test(v) || 'E-mail must be valid']
             } else {
@@ -128,36 +127,14 @@ export default {
                 this.textValue = msg.payload
             }
         },
-        send: function () {
+        send () {
             this.$socket.emit('widget-change', this.id, this.value)
         },
-        onChange: function () {
-            if (this.props.sendOnDelay) {
-                // is send on delay enabled, if so, set a timeout to send the message
-                if (this.delayTimer) {
-                    // reset the timer to count from the latest change
-                    clearTimeout(this.delayTimer)
-                }
-                this.delayTimer = setTimeout(this.send, this.props.delay)
-            }
-        },
-        onBlur: function () {
-            if (this.props.sendOnBlur) {
-                // don't compare previous value, if user has clicked away they want it submitted
-                this.send()
-            }
+        onChange () {
+            this.send()
         },
-        onEnter: function () {
-            if (this.props.sendOnEnter) {
-                // don't compare previous value, if user has pressed <enter> they want it submitted
-                this.send()
-            }
-        },
-        onClear: function () {
-            if (this.props.sendOnClear) {
-                // don't compare previous value, if user has cleared the field they want it submitted
-                this.send()
-            }
+        onClear () {
+            this.send()
         },
         makeMdiIcon (icon) {
             return 'mdi-' + icon.replace(/^mdi-/, '')
@@ -171,6 +148,7 @@ export default {
     .v-field--prepended {
         padding-inline-start: 12px;
     }
+
     button {
         color: var(--red-ui-form-input-border-color);
     }