Add support for Buefy autocomplete; several other form tweaks

at least the Edit User form should work now, for instance

tailbone/static/js/tailbone.buefy.autocomplete.js

@@ -0,0 +1,91 @@
+
+const TailboneAutocomplete = {
+
+    template: '#tailbone-autocomplete-template',
+
+    props: {
+        name: String,
+        serviceUrl: String,
+        value: String,
+        initialLabel: String,
+    },
+
+    data() {
+        let selected = null
+        if (this.value) {
+            selected = {
+                value: this.value,
+                label: this.initialLabel,
+            }
+        }
+        return {
+            data: [],
+            selected: selected,
+            isFetching: false,
+            autocompleteValue: this.value,
+        }
+    },
+
+    methods: {
+
+        clearSelection() {
+            this.selected = null
+            this.autocompleteValue = null
+            this.$nextTick(function() {
+                this.$refs.autocomplete.focus()
+            })
+
+            // TODO: should emit event for caller logic (can they cancel?)
+            // $('#' + oid + '-textbox').trigger('autocompletevaluecleared');
+        },
+
+        // TODO: should we allow custom callback? or is event enough?
+        // function (oid) {
+        //     $('#' + oid + '-textbox').on('autocompletevaluecleared', function() {
+        //         ${cleared_callback}();
+        //     });
+        // }
+
+        selectionMade(option) {
+            this.selected = option
+
+            // TODO: should emit event for caller logic (can they cancel?)
+            // $('#' + oid + '-textbox').trigger('autocompletevalueselected',
+            //                                   [ui.item.value, ui.item.label]);
+        },
+
+        // TODO: should we allow custom callback? or is event enough?
+        // function (oid) {
+        //     $('#' + oid + '-textbox').on('autocompletevalueselected', function(event, uuid, label) {
+        //         ${selected_callback}(uuid, label);
+        //     });
+        // }
+
+        itemSelected(value) {
+            this.$emit('input', value)
+        },
+
+        // TODO: buefy example uses `debounce()` here and perhaps we should too?
+        // https://buefy.org/documentation/autocomplete
+        getAsyncData: function (entry) {
+            if (entry.length < 3) {
+                this.data = []
+                return
+            }
+            this.isFetching = true
+            this.$http.get(this.serviceUrl + '?term=' + encodeURIComponent(entry))
+                .then(({ data }) => {
+                    this.data = data
+                })
+                .catch((error) => {
+                    this.data = []
+                    throw error
+                })
+                    .finally(() => {
+                        this.isFetching = false
+                    })
+                        },
+    },
+}
+
+Vue.component('tailbone-autocomplete', TailboneAutocomplete)

tailbone/static/js/tailbone.buefy.oncebutton.js

@@ -10,6 +10,8 @@ const OnceButton = {
         ':title="title"',
         ':disabled="buttonDisabled"',
         '@click="clicked"',
+        'icon-pack="fas"',
+        ':icon-left="iconLeft"',
         '>',
         '{{ buttonText }}',
         '</b-button>'
@@ -22,6 +24,7 @@ const OnceButton = {
         href: String,
         text: String,
         title: String,
+        iconLeft: String,
         working: String,
         workingText: String,
         disabled: Boolean

tailbone/static/themes/falafel/css/forms.css

@@ -13,3 +13,12 @@
     white-space: nowrap;
     width: 18em;
 }
+
+.field.is-horizontal .field-body {
+    min-width: 30em;
+}
+
+.field.is-horizontal .field-body .select,
+.field.is-horizontal .field-body .select select {
+    width: 100%;
+}