oh-input: Fix style issue on mobile when sendButton enabled & Update …

…docs (openhab#2806)

This fixes a minor styling issue on mobile devices, where the input's
column is too wide and the sendButton overflows to the next line. Also
add `time` to the docs for valid input types.

---------

Signed-off-by: Florian Hotze <[email protected]>

bundles/org.openhab.ui/doc/components/oh-input-card.md

@@ -67,7 +67,7 @@ Display an input in a card
 </PropBlock>
 <PropBlock type="TEXT" name="type" label="Type">
   <PropDescription>
-    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
+    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="inputmode" label="Input Mode">

bundles/org.openhab.ui/doc/components/oh-input-item.md

@@ -72,7 +72,7 @@ Display an input field in a list
 </PropBlock>
 <PropBlock type="TEXT" name="type" label="Type">
   <PropDescription>
-    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
+    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="inputmode" label="Input Mode">

bundles/org.openhab.ui/doc/components/oh-input.md

@@ -35,7 +35,7 @@ Displays an input field, used to set a variable
 </PropBlock>
 <PropBlock type="TEXT" name="type" label="Type">
   <PropDescription>
-    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)
+    Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="inputmode" label="Input Mode">

bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js

@@ -2,7 +2,7 @@ import { pi, pb, pt, pd } from '../helpers.js'
 
 export default () => [
   pt('name', 'Name', 'Input name'),
-  pt('type', 'Type', 'Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>date</code> or <code>datepicker</code>)'),
+  pt('type', 'Type', 'Type of input (see <a class="external text-color-blue" target="_blank" href="https://framework7.io/docs/inputs.html#supported-inputs">f7 input docs</a>, <code>time</code>, <code>date</code> or <code>datepicker</code>)'),
   pt('inputmode', 'Input Mode', 'Type of data that might be entered (see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>)'),
   pt('placeholder', 'Placeholder', 'Placeholder text'),
   pb('sendButton', 'Send button', 'Display Send button to update the state with a command (needs a configured item)'),

bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue

@@ -8,7 +8,7 @@
     </template>
   </f7-input>
   <f7-row no-gap v-else class="oh-input-with-send-button" :style="config.style">
-    <f7-input class="input-field col-90" ref="input" v-bind="config"
+    <f7-input class="input-field col-80" ref="input" v-bind="config"
               :value="((config.type && config.type.indexOf('date') === 0) || config.type === 'time') ? valueForDatepicker : value"
               :calendar-params="calendarParams" :step="config.step ? config.step : 'any'"
               @input="$evt => updated($evt.target.value)" :change="updated" @calendar:change="updated" @texteditor:change="updated" @colorpicker:change="updated">