From 0396d314d567dd1320583b086f117dec1d50a61f Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sat, 12 Oct 2024 00:19:29 +0200
Subject: [PATCH] oh-input: Fix style issue on mobile when sendButton enabled &
Update docs (#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 <dev@florianhotze.com>
---
bundles/org.openhab.ui/doc/components/oh-input-card.md | 2 +-
bundles/org.openhab.ui/doc/components/oh-input-item.md | 2 +-
bundles/org.openhab.ui/doc/components/oh-input.md | 2 +-
.../web/src/assets/definitions/widgets/system/input.js | 2 +-
.../web/src/components/widgets/system/oh-input.vue | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/bundles/org.openhab.ui/doc/components/oh-input-card.md b/bundles/org.openhab.ui/doc/components/oh-input-card.md
index c74fe0f86..ec5997092 100644
--- a/bundles/org.openhab.ui/doc/components/oh-input-card.md
+++ b/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">
diff --git a/bundles/org.openhab.ui/doc/components/oh-input-item.md b/bundles/org.openhab.ui/doc/components/oh-input-item.md
index dbfee067e..d08ef8101 100644
--- a/bundles/org.openhab.ui/doc/components/oh-input-item.md
+++ b/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">
diff --git a/bundles/org.openhab.ui/doc/components/oh-input.md b/bundles/org.openhab.ui/doc/components/oh-input.md
index fce29358f..2a6ca0d24 100644
--- a/bundles/org.openhab.ui/doc/components/oh-input.md
+++ b/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">
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js
index ff250216f..2672d133e 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/system/input.js
+++ b/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)'),
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue b/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue
index 8f715971b..fe79dd9e9 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/system/oh-input.vue
+++ b/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">