Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Hilfetext ist falsch formatiert (fehlende Leerzeichen) wegen display: flex #421

Closed
wants to merge 1 commit into from
+176 −178
Closed

fix: Hilfetext ist falsch formatiert (fehlende Leerzeichen) wegen display: flex #421

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Loading status checks…
fix: help text of forms has display: flex causing text such as `hel… 
…lo <span>world</span>` to be displayed as `helloworld` (missing space character)
@yankee42
yankee42 committed Feb 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
commit 1271142ca99b7517f372e7e5dabdd5e7fe201058
354 changes: 176 additions & 178 deletions src/components/OpenwbBaseTextInput.vue
View file
Original file line number Diff line number Diff line change
@@ -13,189 +13,187 @@
/>
</label>
<div class="col-md-8">
<div class="form-row">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<font-awesome-icon
fixed-width
v-if="subtype == 'text'"
:icon="['fas', 'keyboard']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'email'"
:icon="['fas', 'envelope']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'host'"
:icon="['fas', 'network-wired']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'url'"
:icon="['fas', 'globe']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'user'"
:icon="['fas', 'user']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'json'"
:icon="['fas', 'code']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'password'"
:icon="
showPassword
? ['fas', 'unlock']
: ['fas', 'lock']
"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'time'"
:icon="['fas', 'clock']"
/>
<font-awesome-icon
fixed-width
v-if="
subtype == 'date' ||
subtype == 'month' ||
subtype == 'year'
"
:icon="['fas', 'calendar-day']"
/>
</div>
</div>
<input
v-if="['text', 'user'].includes(subtype)"
ref="textInput"
type="text"
class="form-control"
:class="{ invalid: inputInvalid }"
v-model="value"
v-bind="$attrs"
:pattern="pattern"
/>
<input
v-if="subtype == 'json'"
ref="jsonInput"
type="text"
class="form-control"
v-model="value"
v-bind="$attrs"
:pattern="pattern"
/>
<input
v-if="subtype == 'password'"
ref="passwordInput"
:type="showPassword ? 'text' : 'password'"
class="form-control"
v-model="value"
v-bind="$attrs"
:pattern="pattern"
/>
<input
v-if="subtype == 'host'"
ref="hostInput"
type="text"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="['email', 'url'].includes(subtype)"
refs="urlInput"
:type="subtype"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'time'"
ref="timeInput"
type="time"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'date'"
type="date"
ref="dateInput"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'month'"
type="month"
ref="monthInput"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'year'"
type="number"
ref="yearInput"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<div v-if="unit" class="input-group-append">
<div class="input-group-text">
{{ unit }}
</div>
</div>
<div
v-if="subtype == 'password'"
class="input-group-append clickable"
@click="togglePassword"
>
<div class="input-group-text">
<font-awesome-icon
fixed-width
:icon="
showPassword
? ['far', 'eye']
: ['far', 'eye-slash']
"
/>
</div>
</div>
<div
v-if="
showQuickButtons &&
(subtype == 'date' ||
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<font-awesome-icon
fixed-width
v-if="subtype == 'text'"
:icon="['fas', 'keyboard']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'email'"
:icon="['fas', 'envelope']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'host'"
:icon="['fas', 'network-wired']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'url'"
:icon="['fas', 'globe']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'user'"
:icon="['fas', 'user']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'json'"
:icon="['fas', 'code']"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'password'"
:icon="
showPassword
? ['fas', 'unlock']
: ['fas', 'lock']
"
/>
<font-awesome-icon
fixed-width
v-if="subtype == 'time'"
:icon="['fas', 'clock']"
/>
<font-awesome-icon
fixed-width
v-if="
subtype == 'date' ||
subtype == 'month' ||
subtype == 'year')
"
class="input-group-append clickable"
@click="modify(-1)"
>
<div class="input-group-text">-</div>
subtype == 'year'
"
:icon="['fas', 'calendar-day']"
/>
</div>
<div
v-if="
showQuickButtons &&
(subtype == 'date' ||
subtype == 'month' ||
subtype == 'year')
"
class="input-group-append clickable"
@click="modify(1)"
>
<div class="input-group-text">+</div>
</div>
<input
v-if="['text', 'user'].includes(subtype)"
ref="textInput"
type="text"
class="form-control"
:class="{ invalid: inputInvalid }"
v-model="value"
v-bind="$attrs"
:pattern="pattern"
/>
<input
v-if="subtype == 'json'"
ref="jsonInput"
type="text"
class="form-control"
v-model="value"
v-bind="$attrs"
:pattern="pattern"
/>
<input
v-if="subtype == 'password'"
ref="passwordInput"
:type="showPassword ? 'text' : 'password'"
class="form-control"
v-model="value"
v-bind="$attrs"
:pattern="pattern"
/>
<input
v-if="subtype == 'host'"
ref="hostInput"
type="text"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="['email', 'url'].includes(subtype)"
refs="urlInput"
:type="subtype"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'time'"
ref="timeInput"
type="time"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'date'"
type="date"
ref="dateInput"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'month'"
type="month"
ref="monthInput"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<input
v-if="subtype == 'year'"
type="number"
ref="yearInput"
class="form-control"
v-model="value"
v-bind="$attrs"
/>
<div v-if="unit" class="input-group-append">
<div class="input-group-text">
{{ unit }}
</div>
</div>
<div
v-if="subtype == 'password'"
class="input-group-append clickable"
@click="togglePassword"
>
<div class="input-group-text">
<font-awesome-icon
fixed-width
:icon="
showPassword
? ['far', 'eye']
: ['far', 'eye-slash']
"
/>
</div>
</div>
<div
v-if="
showQuickButtons &&
(subtype == 'date' ||
subtype == 'month' ||
subtype == 'year')
"
class="input-group-append clickable"
@click="modify(-1)"
>
<div class="input-group-text">-</div>
</div>
<div
v-if="
showQuickButtons &&
(subtype == 'date' ||
subtype == 'month' ||
subtype == 'year')
"
class="input-group-append clickable"
@click="modify(1)"
>
<div class="input-group-text">+</div>
</div>
</div>
<span v-if="showHelp" class="form-row alert alert-info my-1 small">
<span v-if="showHelp" class="form-text alert alert-info my-1 small">
<slot name="help"></slot>
</span>
</div>