fix: add butterfly wrapper for b-timepicker component

src/wuttaweb/templates/appinfo/configure.mako

@@ -112,31 +112,36 @@
       <b-field label="Default Sender">
         <b-input name="${app.appname}.email.default.sender"
                  v-model="simpleSettings['${app.appname}.email.default.sender']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Default Recipient(s)">
         <b-input name="${app.appname}.email.default.to"
                  v-model="simpleSettings['${app.appname}.email.default.to']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Default Subject (optional)">
         <b-input name="${app.appname}.email.default.subject"
                  v-model="simpleSettings['${app.appname}.email.default.subject']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Feedback Recipient(s) (optional)">
         <b-input name="${app.appname}.email.feedback.to"
                  v-model="simpleSettings['${app.appname}.email.feedback.to']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
       <b-field label="Feedback Subject (optional)">
         <b-input name="${app.appname}.email.feedback.subject"
                  v-model="simpleSettings['${app.appname}.email.feedback.subject']"
-                 @input="settingsNeedSaved = true" />
+                 @input="settingsNeedSaved = true"
+                 expanded />
       </b-field>
 
     </div>

src/wuttaweb/templates/base.mako

@@ -498,23 +498,26 @@
                        % if request.user:
                            disabled
                        % endif
-                       />
+                       expanded />
             </b-field>
 
             <b-field label="Referring URL">
               <b-input v-model="referrer"
-                       disabled="true" />
+                       disabled="true"
+                       expanded />
             </b-field>
 
             <b-field label="Message"
                      :type="message && message.trim() ? null : 'is-danger'">
               <b-input type="textarea"
                        v-model="message"
-                       ref="textarea" />
+                       ref="textarea"
+                       expanded />
             </b-field>
           </section>
 
           <footer class="modal-card-foot">
+            <div style="display: flex; gap: 0.5rem;">
             <b-button @click="showDialog = false">
               Cancel
             </b-button>
@@ -525,6 +528,7 @@
                       :disabled="submitDisabled">
               {{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
             </b-button>
+            </div>
           </footer>
         </div>
       </${b}-modal>

src/wuttaweb/templates/deform/checked_password.pt

@@ -5,10 +5,12 @@
   <b-input name="${name}"
            value="${field.widget.redisplay and cstruct or ''}"
            type="password"
+           expanded
            placeholder="Password" />
   <b-input name="${name}-confirm"
            value="${field.widget.redisplay and confirm or ''}"
            type="password"
+           expanded
            placeholder="Confirm Password" />
   ${field.end_mapping()}
 </div>

src/wuttaweb/templates/deform/dateinput.pt

@@ -1,6 +1,7 @@
 <div>
   ${field.start_mapping()}
   <wutta-datepicker name="date"
-                    value="${cstruct}" />
+                    value="${cstruct}"
+                    expanded />
   ${field.end_mapping()}
 </div>

src/wuttaweb/templates/deform/datetimeinput.pt

@@ -2,9 +2,11 @@
   ${field.start_mapping()}
   <wutta-datepicker name="date"
                     style="flex-grow: 1;"
+                    expanded
                     value="${date}" />
   <wutta-timepicker name="time"
                     style="flex-grow: 1;"
+                    expanded
                     value="${time}" />
   ${field.end_mapping()}
 </div>

src/wuttaweb/templates/deform/moneyinput.pt

@@ -3,5 +3,6 @@
                       vmodel vmodel|'modelData.'+oid;">
   <b-input name="${name}"
            v-model="${vmodel}"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </tal:omit>

src/wuttaweb/templates/deform/password.pt

@@ -5,5 +5,6 @@
   <b-input name="${name}"
            v-model="${vmodel}"
            type="password"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </div>

src/wuttaweb/templates/deform/textarea.pt

@@ -7,5 +7,6 @@
   <b-input name="${name}"
            v-model="${vmodel}"
            type="textarea"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </div>

src/wuttaweb/templates/deform/textinput.pt

@@ -4,5 +4,6 @@
                  vmodel vmodel|'modelData.'+oid;">
   <b-input name="${name}"
            v-model="${vmodel}"
+           expanded
            tal:attributes="attributes|field.widget.attributes|{};" />
 </div>

src/wuttaweb/templates/themes/butterfly/buefy-components.mako

@@ -5,6 +5,7 @@
   ${self.make_b_checkbox_component()}
   ${self.make_b_collapse_component()}
   ${self.make_b_datepicker_component()}
+  ${self.make_b_timepicker_component()}
   ${self.make_b_dropdown_component()}
   ${self.make_b_dropdown_item_component()}
   ${self.make_b_field_component()}
@@ -91,7 +92,7 @@
   <script type="text/x-template" id="b-button-template">
     <o-button :variant="variant"
               :size="orugaSize"
-              :native-type="nativeType"
+              :type="nativeType"
               :tag="tag"
               :href="href"
               :icon-left="iconLeft">
@@ -190,8 +191,8 @@
                   @update:model-value="orugaValueUpdated"
                   :value="value"
                   :placeholder="placeholder"
-                  :date-formatter="dateFormatter"
-                  :date-parser="dateParser"
+                  :formatter="dateFormatter"
+                  :parser="dateParser"
                   :disabled="disabled"
                   :editable="editable"
                   :icon="icon"
@@ -237,6 +238,45 @@
   <% request.register_component('b-datepicker', 'BDatepicker') %>
 </%def>
 
+<%def name="make_b_timepicker_component()">
+  <script type="text/x-template" id="b-timepicker-template">
+    <o-timepicker v-model="orugaValue"
+                  @update:model-value="orugaValueUpdated"
+                  :formatter="timeFormatter"
+                  :parser="timeParser" />
+  </script>
+  <script>
+    const BTimepicker = {
+        template: '#b-timepicker-template',
+        props: {
+            modelValue: null,
+            timeFormatter: null,
+            timeParser: null,
+        },
+        data() {
+            return {
+                orugaValue: this.modelValue,
+            }
+        },
+        watch: {
+            modelValue(to, from) {
+                if (this.orugaValue != to) {
+                    this.orugaValue = to
+                }
+            },
+        },
+        methods: {
+            orugaValueUpdate(value) {
+                if (this.modelValue != value) {
+                    this.$emit('update:modelValue', value)
+                }
+            },
+        },
+    }
+  </script>
+  <% request.register_component('b-timepicker', 'BTimepicker') %>
+</%def>
+
 <%def name="make_b_dropdown_component()">
   <script type="text/x-template" id="b-dropdown-template">
     <o-dropdown :position="buefyPosition"
@@ -373,15 +413,7 @@
         },
         methods: {
             focus() {
-                if (this.type == 'textarea') {
-                    // TODO: this does not always work right?
-                    this.$refs.input.$el.querySelector('textarea').focus()
-                } else {
-                    // TODO: pretty sure we can rely on the <o-input> focus()
-                    // here, but not sure why we weren't already doing that?
-                    //this.$refs.input.$el.querySelector('input').focus()
-                    this.$refs.input.focus()
-                }
+                this.$refs.input.focus()
             },
         },
     }