[ADD] Widget Numeric step

web_widget_number_ux_choice/README.rst

@@ -1,86 +0,0 @@
-===========================
-Web Widget UX Number Choice
-===========================
-
-.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! This file is generated by oca-gen-addon-readme !!
-   !! changes will be overwritten.                   !!
-   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
-.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
-    :target: https://odoo-community.org/page/development-status
-    :alt: Beta
-.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
-    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
-    :alt: License: AGPL-3
-.. |badge3| image:: https://img.shields.io/badge/github-quentinDupont%2Fgrap--odoo--incubator-lightgray.png?logo=github
-    :target: https://github.com/quentinDupont/grap-odoo-incubator/tree/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice
-    :alt: quentinDupont/grap-odoo-incubator
-
-|badge1| |badge2| |badge3| 
-
-This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
-We can be parametred to choose the iteration step (0.1 for more precision etc.)
-
-**Table of contents**
-
-.. contents::
-   :local:
-
-Usage
-=====
-
-In your xml view, add ``widget="number_ux_choice"``
-This will add the 2 buttons +" and "-" just next to the input field in edit mode.
-Iteration step by default is 1.
-
-.. figure:: https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/add_two_buttons.png
-
-
-**Optional**
-Add an option to choose the step iteration
-Example for an 0.1 step :
-
-``<field name="sale_delay" widget="number_ux_choice" options="{'step': 0.1}" /> days``
-
-**Examples**
-
-Iteration with 0.1 step
-
-.. figure:: https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/step0,1.gif
-
-Iteration with 10 step, with onchange
-
-.. figure:: https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/step10_with_onchange.gif
-
-Bug Tracker
-===========
-
-Bugs are tracked on `GitHub Issues <https://github.com/quentinDupont/grap-odoo-incubator/issues>`_.
-In case of trouble, please check there if your issue has already been reported.
-If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/quentinDupont/grap-odoo-incubator/issues/new?body=module:%20web_widget_number_ux_choice%0Aversion:%2012.0_ADD_web_widget_int_choice%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
-
-Do not contact contributors directly about support or help with technical issues.
-
-Credits
-=======
-
-Authors
-~~~~~~~
-
-* GRAP
-
-Contributors
-~~~~~~~~~~~~
-
-* `GRAP <http://www.grap.coop>`_:
-
-  * Quentin DUPONT <quentin.dupont@grap.coop>
-
-Maintainers
-~~~~~~~~~~~
-
-This module is part of the `quentinDupont/grap-odoo-incubator <https://github.com/quentinDupont/grap-odoo-incubator/tree/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice>`_ project on GitHub.
-
-You are welcome to contribute.

web_widget_number_ux_choice/readme/USAGE.rst

@@ -1,22 +0,0 @@
-In your xml view, add ``widget="number_ux_choice"``
-This will add the 2 buttons +" and "-" just next to the input field in edit mode.
-Iteration step by default is 1.
-
-.. figure:: ../static/description/add_two_buttons.png
-
-
-**Optional**
-Add an option to choose the step iteration
-Example for an 0.1 step :
-
-``<field name="sale_delay" widget="number_ux_choice" options="{'step': 0.1}" /> days``
-
-**Examples**
-
-Iteration with 0.1 step
-
-.. figure:: ../static/description/step0,1.gif
-
-Iteration with 10 step, with onchange
-
-.. figure:: ../static/description/step10_with_onchange.gif

web_widget_number_ux_choice/static/src/js/number_ux_choice.js

@@ -1,74 +0,0 @@
-/**
-* Copyright (C) 2019 - Today: GRAP (http://www.grap.coop)
-* @author: Quentin DUPONT <quentin.dupont@grap.coop>
-* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) **/
-
-odoo.define('web.web_widget_number_ux_choice', function(require) {
-    "use strict";
-
-    var basic_fields = require('web.basic_fields');
-    var Registry = require('web.field_registry');
-    // var session = require('web.session');
-    // var rpc = require('web.rpc');
-    // var pyUtils = require("web.py_utils");
-
-    /*
-    * Get precision for the @input field
-    */
-    function getPrecision(input) {
-      if (!isFinite(input)) return 0;
-      var e = 1, p = 0;
-      while (Math.round(input * e) / e !== input) { e *= 10; p++; }
-      return p;
-    }
-
-    /*
-    * @self : input field
-    * @step : must be Float
-    * @minusOrPlus : "minus" or "plus"
-    *
-    * set new value to @self */
-    function addStep(self, step, minusOrPlus) {
-        var oldVal= parseFloat(self._getValue());
-        var precision = Math.max(getPrecision(oldVal), getPrecision(step))
-        if (minusOrPlus == "minus") {
-            step = -step
-        }
-        var newVal = oldVal + step;
-        var newVal_s = newVal.toFixed(precision).toString();
-        self._setValue(newVal_s); 
-        self.$input[0].value = newVal_s;
-    }
-
-    var NumberUxChoice = basic_fields.FieldFloat.extend({
-        template: 'NumberUxChoice',
-
-        _render: function () {
-            var self = this;
-            this._super();
-            this.$("button").parents().removeClass("o_field_integer o_field_number o_input o_required_modifier");
-            this.$("button").click(function() {
-                var node = $(this).parent()[0];
-
-                // Get step option or default is 1
-                if (typeof node.attributes['step'] !== 'undefined') {
-                    var step = parseFloat(node.attributes['step'].value);
-                } else {
-                    var step = 1;
-                }
-                // PLUS button
-                if ($(this).hasClass("btn_number_ux_choice_plus")) {
-                    addStep(self, step, "plus")
-                // MINUS button
-                } else if ($(this).hasClass("btn_number_ux_choice_minus")){
-                    addStep(self, step, "minus")
-
-                };
-            });
-        },
-
-    });
-
-    Registry.add('number_ux_choice', NumberUxChoice);
-
-});

web_widget_number_ux_choice/static/src/scss/number_ux_choice.scss

@@ -1,11 +0,0 @@
-
-.input_number_ux_choice {
-    width: 71% !important;
-}
-
-.btns_number_ux_choice {
-    width: 27% !important;
-    button {
-        height: 25px;
-    }
-}

web_widget_number_ux_choice/view/web_widget_number_ux_choice.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<odoo>
-    <template id="assets_backend" inherit_id="web.assets_backend">
-        <xpath expr="." position="inside">
-            <link rel="stylesheet" href="/web_widget_number_ux_choice/static/src/scss/number_ux_choice.scss"/>
-            <script type="text/javascript" src="/web_widget_number_ux_choice/static/src/js/number_ux_choice.js"></script>
-        </xpath>
-    </template>
-</odoo>

web_widget_numeric_step/README.rst

@@ -0,0 +1,90 @@
+=======================
+Web Widget Numeric Step
+=======================
+
+.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! This file is generated by oca-gen-addon-readme !!
+   !! changes will be overwritten.                   !!
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
+    :target: https://odoo-community.org/page/development-status
+    :alt: Beta
+.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
+    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+.. |badge3| image:: https://img.shields.io/badge/github-quentinDupont%2Fweb-lightgray.png?logo=github
+    :target: https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step
+    :alt: quentinDupont/web
+
+|badge1| |badge2| |badge3| 
+
+This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
+Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``.
+
+**Table of contents**
+
+.. contents::
+   :local:
+
+Usage
+=====
+
+In your xml view, add ``widget="numeric_step"``
+This will add the 2 buttons "+" and "-" just next to the input field in edit mode.
+Iteration step by default is 1.
+
+.. figure:: https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/add_two_buttons.png
+
+
+**Optional**
+
+Add an option to choose the step iteration and limits (min and max values).
+
+Example for an 0.25 step, min to -1 and max to 10 :
+
+``<field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days``
+
+**Examples**
+
+Iteration with 0.25 step, min to -1 and max to 10.
+
+Start to incremente with button, continue incrementing with scrolling mouse.
+
+.. figure:: https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step0,25andlimits.gif
+
+Iteration with 10 step, max limit 15, placeholder with onchange
+
+.. figure:: https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues <https://github.com/quentinDupont/web/issues>`_.
+In case of trouble, please check there if your issue has already been reported.
+If you spotted it first, help us smashing it by providing a detailed and welcomed
+`feedback <https://github.com/quentinDupont/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2012.0_ADD_web_widget_ux_choice%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+
+Do not contact contributors directly about support or help with technical issues.
+
+Credits
+=======
+
+Authors
+~~~~~~~
+
+* GRAP
+
+Contributors
+~~~~~~~~~~~~
+
+* `GRAP <http://www.grap.coop>`_:
+
+  * Quentin DUPONT <quentin.dupont@grap.coop>
+
+Maintainers
+~~~~~~~~~~~
+
+This module is part of the `quentinDupont/web <https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step>`_ project on GitHub.
+
+You are welcome to contribute.

web_widget_numeric_step/__manifest__.py

@@ -1,8 +1,8 @@
-# Odoo, Open Source Web Widget Integer Choice
+# Odoo, Open Source Web Widget Numeric Step
 #
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).#
 {
-    'name': "Web Widget UX Number Choice",
+    'name': "Web Widget Numeric Step",
     'category': "web",
     'version': "12.0.1.0.0",
     'author': "GRAP, "
@@ -11,10 +11,10 @@
     'website': 'https://github.com/OCA/web',
     'depends': ['web'],
     'data': [
-        'view/web_widget_number_ux_choice.xml'
+        'view/web_widget_numeric_step.xml'
     ],
     'qweb': [
-        'static/src/xml/number_ux_choice.xml',
+        'static/src/xml/numeric_step.xml',
     ],
     'auto_install': False,
     'installable': True,

web_widget_numeric_step/readme/DESCRIPTION.rst

@@ -1,2 +1,2 @@
 This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
-We can be parametred to choose the iteration step (0.1 for more precision etc.)
+Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``.

web_widget_numeric_step/readme/USAGE.rst

@@ -0,0 +1,26 @@
+In your xml view, add ``widget="numeric_step"``
+This will add the 2 buttons "+" and "-" just next to the input field in edit mode.
+Iteration step by default is 1.
+
+.. figure:: ../static/description/add_two_buttons.png
+
+
+**Optional**
+
+Add an option to choose the step iteration and limits (min and max values).
+
+Example for an 0.25 step, min to -1 and max to 10 :
+
+``<field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days``
+
+**Examples**
+
+Iteration with 0.25 step, min to -1 and max to 10.
+
+Start to incremente with button, continue incrementing with scrolling mouse.
+
+.. figure:: ../static/description/step0,25andlimits.gif
+
+Iteration with 10 step, max limit 15, placeholder with onchange
+
+.. figure:: ../static/description/step10_limit15_placeholder117_with_onchange.gif

web_widget_numeric_step/static/description/index.html

@@ -4,7 +4,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Docutils 0.14: http://docutils.sourceforge.net/" />
-<title>Web Widget UX Number Choice</title>
+<title>Web Widget Numeric Step</title>
 <style type="text/css">
 
 /*
@@ -360,16 +360,16 @@ ul.auto-toc {
 </style>
 </head>
 <body>
-<div class="document" id="web-widget-ux-number-choice">
+<div class="document" id="web-widget-numeric-step">
-<h1 class="title">Web Widget UX Number Choice</h1>
+<h1 class="title">Web Widget Numeric Step</h1>
 
 <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/quentinDupont/grap-odoo-incubator/tree/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice"><img alt="quentinDupont/grap-odoo-incubator" src="https://img.shields.io/badge/github-quentinDupont%2Fgrap--odoo--incubator-lightgray.png?logo=github" /></a></p>
+<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step"><img alt="quentinDupont/web" src="https://img.shields.io/badge/github-quentinDupont%2Fweb-lightgray.png?logo=github" /></a></p>
 <p>This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
-We can be parametred to choose the iteration step (0.1 for more precision etc.)</p>
+Use JS native logic for input number, so you can use the options <tt class="docutils literal">min</tt>, <tt class="docutils literal">max</tt>, <tt class="docutils literal">step</tt>, <tt class="docutils literal">placeholder</tt>.</p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
@@ -385,32 +385,33 @@ We can be parametred to choose the iteration step (0.1 for more precision etc.)<
 </div>
 <div class="section" id="usage">
 <h1><a class="toc-backref" href="#id1">Usage</a></h1>
-<p>In your xml view, add <tt class="docutils literal"><span class="pre">widget=&quot;number_ux_choice&quot;</span></tt>
+<p>In your xml view, add <tt class="docutils literal"><span class="pre">widget=&quot;numeric_step&quot;</span></tt>
-This will add the 2 buttons +” and “-” just next to the input field in edit mode.
+This will add the 2 buttons “+” and “-” just next to the input field in edit mode.
 Iteration step by default is 1.</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/add_two_buttons.png" src="https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/add_two_buttons.png" />
+<img alt="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/add_two_buttons.png" src="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/add_two_buttons.png" />
 </div>
-<p><strong>Optional</strong>
+<p><strong>Optional</strong></p>
-Add an option to choose the step iteration
+<p>Add an option to choose the step iteration and limits (min and max values).</p>
-Example for an 0.1 step :</p>
+<p>Example for an 0.25 step, min to -1 and max to 10 :</p>
-<p><tt class="docutils literal">&lt;field <span class="pre">name=&quot;sale_delay&quot;</span> <span class="pre">widget=&quot;number_ux_choice&quot;</span> <span class="pre">options=&quot;{'step':</span> 0.1}&quot; /&gt; days</tt></p>
+<p><tt class="docutils literal">&lt;field <span class="pre">name=&quot;sale_delay&quot;</span> <span class="pre">widget=&quot;numeric_step&quot;</span> <span class="pre">options=&quot;{'step':</span> 0.25, 'min': <span class="pre">-1,</span> 'max': 10}&quot; /&gt; days</tt></p>
 <p><strong>Examples</strong></p>
-<p>Iteration with 0.1 step</p>
+<p>Iteration with 0.25 step, min to -1 and max to 10.</p>
+<p>Start to incremente with button, continue incrementing with scrolling mouse.</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/step0,1.gif" src="https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/step0,1.gif" />
+<img alt="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step0,25andlimits.gif" src="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step0,25andlimits.gif" />
 </div>
-<p>Iteration with 10 step, with onchange</p>
+<p>Iteration with 10 step, max limit 15, placeholder with onchange</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/step10_with_onchange.gif" src="https://raw.githubusercontent.com/quentinDupont/grap-odoo-incubator/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice/static/description/step10_with_onchange.gif" />
+<img alt="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" src="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" />
 </div>
 </div>
 <div class="section" id="bug-tracker">
 <h1><a class="toc-backref" href="#id2">Bug Tracker</a></h1>
-<p>Bugs are tracked on <a class="reference external" href="https://github.com/quentinDupont/grap-odoo-incubator/issues">GitHub Issues</a>.
+<p>Bugs are tracked on <a class="reference external" href="https://github.com/quentinDupont/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/quentinDupont/grap-odoo-incubator/issues/new?body=module:%20web_widget_number_ux_choice%0Aversion:%2012.0_ADD_web_widget_int_choice%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<a class="reference external" href="https://github.com/quentinDupont/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2012.0_ADD_web_widget_ux_choice%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
@@ -432,7 +433,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 </div>
 <div class="section" id="maintainers">
 <h2><a class="toc-backref" href="#id6">Maintainers</a></h2>
-<p>This module is part of the <a class="reference external" href="https://github.com/quentinDupont/grap-odoo-incubator/tree/12.0_ADD_web_widget_int_choice/web_widget_number_ux_choice">quentinDupont/grap-odoo-incubator</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step">quentinDupont/web</a> project on GitHub.</p>
 <p>You are welcome to contribute.</p>
 </div>
 </div>

web_widget_numeric_step/static/src/js/numeric_step.js

@@ -0,0 +1,95 @@
+/**
+* Copyright (C) 2019 - Today: GRAP (http://www.grap.coop)
+* @author: Quentin DUPONT <quentin.dupont@grap.coop>
+* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) **/
+
+odoo.define('web.web_widget_numeric_step', function(require) {
+    "use strict";
+
+    var Registry = require('web.field_registry');
+    var NumericStep = require('web.basic_fields').FieldFloat;
+
+    /**
+    * Get decimal precision for the input field
+    *
+    * @param {object} input Input field
+    * @return {int} Precision
+    */
+    function getPrecision(input) {
+      if (!isFinite(input)) return 0;
+      var ten_multiple = 1, precision = 0;
+      while (Math.round(input * ten_multiple) / ten_multiple !== input) {
+        ten_multiple *= 10;
+        precision++;
+       }
+      return precision;
+    }
+
+    /**
+    * Increase input number with chosen step iteration
+    *
+    * @param {object} self Input field
+    * @param {Float} step Step iteration
+    * @param {String} minusOrPlus Choose "minus" to decrease. Default is "plus"
+    */
+    function addStep(self, step, minusOrPlus) {
+        var oldVal= parseFloat(self._getValue());
+        var precision = Math.max(getPrecision(oldVal), getPrecision(step))
+        if (minusOrPlus == "minus") {
+            step = -step
+        }
+        var newVal = oldVal + step;
+        // Check input limits
+        if (newVal > self.attrs.options.max) {
+            newVal = self.attrs.options.max;
+        } else if (newVal < self.attrs.options.min) {
+            newVal = self.attrs.options.min;
+        }
+        var newVal_s = newVal.toFixed(precision).toString();
+        self._setValue(newVal_s); 
+        self.$input[0].value = newVal_s;
+    }
+
+
+    NumericStep.include({
+        template: 'web_widget_numeric_step',
+
+        _render: function () {
+            var self = this;
+            // Use native options for input number
+            this.nodeOptions['type'] = "number";
+            this._super();
+
+            // Add native options for input number
+            var input_number_options = ['max', 'min', 'placeholder', 'step'];
+            for (var options of input_number_options) {
+                if (typeof this.nodeOptions[options] !== 'undefined') {
+                    this.$el[0][options] = this.nodeOptions[options];
+                } 
+            }
+
+            this.$("button").parents().removeClass("o_field_integer o_field_number o_input o_required_modifier");
+            this.$("button").click(function() {
+                var node = $(this).parent()[0];
+
+                // Get step option or default is 1
+                if (typeof node.attributes['step'] !== 'undefined') {
+                    var step = parseFloat(node.attributes['step'].value);
+                } else {
+                    var step = 1;
+                }
+                // PLUS button
+                if ($(this).hasClass("btn_numeric_step_plus")) {
+                    addStep(self, step, "plus")
+                // MINUS button
+                } else if ($(this).hasClass("btn_numeric_step_minus")){
+                    addStep(self, step, "minus")
+
+                };
+            });
+        },
+    });
+
+    Registry.add('numeric_step', NumericStep);
+
+});

web_widget_numeric_step/static/src/scss/numeric_step.scss

@@ -0,0 +1,29 @@
+
+.input_numeric_step {
+    width: 71% !important;
+}
+
+.btns_numeric_step {
+    width: 27% !important;
+    button {
+        height: 25px;
+    }
+}
+
+/* Turn Off Number Input Spinners */
+input{
+    /* Firefox */
+    -moz-appearance: textfield;
+
+    /* Chrome */
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin:0;
+    }
+
+    /* Opéra*/
+    &::-o-inner-spin-button {
+        -o-appearance: none;
+        margin: 0; 
+    }
+}

web_widget_numeric_step/static/src/xml/numeric_step.xml

@@ -5,11 +5,11 @@ Copyright (C) 2019 - Today: GRAP (http://www.grap.coop)
 License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 -->
 <templates>
-    <t t-name="NumberUxChoice">
+    <t t-name="web_widget_numeric_step">
         <t t-if="widget.mode != 'readonly'">
-            <input class="input_number_ux_choice"/>
+            <input type="number" class="input_numeric_step"/>
-            <div class="btns_number_ux_choice">
+            <div class="btns_numeric_step">
-                <button class="fa fa-plus btn btn-secondary btn_number_ux_choice_plus" aria-label="Plus" title="Plus"/><button class="fa fa-minus btn btn-secondary btn_number_ux_choice_minus" aria-label="Minus" title="Minus"/>
+                <button class="fa fa-plus btn btn-secondary btn_numeric_step_plus" aria-label="Plus" title="Plus"/><button class="fa fa-minus btn btn-secondary btn_numeric_step_minus" aria-label="Minus" title="Minus"/>
             </div>
         </t>
         <t t-if="widget.mode == 'readonly'">

web_widget_numeric_step/view/web_widget_numeric_step.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <template id="assets_backend" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <link rel="stylesheet" href="/web_widget_numeric_step/static/src/scss/numeric_step.scss"/>
+            <script type="text/javascript" src="/web_widget_numeric_step/static/src/js/numeric_step.js"></script>
+        </xpath>
+    </template>
+</odoo>