Add NumericInputWidget for use with Buefy themes

uses a Vue.js component for better logic encapsulation

tailbone/forms/widgets.py

@@ -58,6 +58,18 @@ class NumberInputWidget(dfwidget.TextInputWidget):
     autocomplete = 'off'
 
 
+class NumericInputWidget(NumberInputWidget):
+    """
+    This widget only supports Buefy themes for now.  It uses a
+    ``<numeric-input>`` component, which will leverage the ``numeric.js``
+    functions to ensure user doesn't enter any non-numeric values.  Note that
+    this still uses a normal "text" input on the HTML side, as opposed to a
+    "number" input, since the latter is a bit ugly IMHO.
+    """
+    template = 'numericinput'
+    allow_enter = True
+
+
 class PercentInputWidget(dfwidget.TextInputWidget):
     """
     Custom text input widget, used for "percent" type fields.  This widget

tailbone/static/js/tailbone.buefy.numericinput.js

@@ -0,0 +1,38 @@
+
+const NumericInput = {
+    template: [
+        '<b-input',
+        ':name="name"',
+        ':value="value"',
+        '@keydown.native="keyDown"',
+        '@input="valueChanged"',
+        '>',
+        '</b-input>'
+    ].join(' '),
+
+    props: {
+        name: String,
+        value: String,
+        allowEnter: Boolean
+    },
+
+    methods: {
+
+        keyDown(event) {
+            // by default we only allow numeric keys, and general navigation
+            // keys, but we might also allow Enter key
+            if (!key_modifies(event) && !key_allowed(event)) {
+                if (!this.allowEnter || event.which != 13) {
+                    event.preventDefault()
+                }
+            }
+        },
+
+        valueChanged(value) {
+            this.$emit('input', value)
+        }
+
+    }
+}
+
+Vue.component('numeric-input', NumericInput)

tailbone/templates/deform/numericinput.pt

@@ -0,0 +1,12 @@
+<div tal:define="name name|field.name;
+                 css_class css_class|field.widget.css_class;
+                 oid oid|field.oid;
+                 style style|field.widget.style;
+                 vmodel vmodel|'field_model_' + name;
+                 allow_enter allow_enter|field.widget.allow_enter;"
+      tal:omit-tag="">
+  <numeric-input name="${name}"
+                 v-model="${vmodel}"
+                 tal:attributes=":allow-enter 'true' if allow_enter else 'false';">
+  </numeric-input>
+</div>

tailbone/templates/themes/falafel/base.mako

@@ -293,8 +293,12 @@
   ${self.buefy()}
   ${self.fontawesome()}
 
+  ## some commonly-useful logic for detecting (non-)numeric input
+  ${h.javascript_link(request.static_url('tailbone:static/js/numeric.js') + '?ver={}'.format(tailbone.__version__))}
+
   ## Tailbone / Buefy stuff
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + '?ver={}'.format(tailbone.__version__))}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.numericinput.js') + '?ver={}'.format(tailbone.__version__))}
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + '?ver={}'.format(tailbone.__version__))}
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + '?ver={}'.format(tailbone.__version__))}
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.grid.js') + '?ver={}'.format(tailbone.__version__))}