natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Indicate if input value is invalid (#5422) 

* Indicate if input value is invalid

* titleのとなり

* となりにメッセージ

* CSS as Suggested

* 同じ色に
This commit is contained in:
Satsuki Yanagi 2019-10-04 14:18:49 +09:00 committed by syuilo
parent 75e2b075e1
commit a81d5786f3
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/client/app/common/views/components/ui/input.vue
View File

@ -6,7 +6,10 @@
<div class="value" ref="passwordMetar"></div> <div class="value" ref="passwordMetar"></div>
</div> </div>
<span class="label" ref="label"><slot></slot></span> <span class="label" ref="label"><slot></slot></span>
<span class="title" ref="title"><slot name="title"></slot></span> <span class="title" ref="title">
<slot name="title"></slot>
<span class="warning" v-if="invalid"><fa :icon="['fa', 'exclamation-circle']"/>{{ $refs.input.validationMessage }}</span>
</span>
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div> <div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<template v-if="type != 'file'"> <template v-if="type != 'file'">
<input v-if="debounce" ref="input" <input v-if="debounce" ref="input"
@ -158,6 +161,7 @@ export default Vue.extend({
return { return {
v: this.value, v: this.value,
focused: false, focused: false,
invalid: false,
passwordStrength: '', passwordStrength: '',
id: Math.random().toString() id: Math.random().toString()
}; };
@ -200,6 +204,8 @@ export default Vue.extend({
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low'; this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`; (this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
} }
this.invalid = this.$refs.input.validity.badInput;
} }
}, },
mounted() { mounted() {
@ -365,6 +371,17 @@ root(fill)
//will-change transform //will-change transform
transform-origin top left transform-origin top left
transform scale(.75) transform scale(.75)
white-space nowrap
width 133%
overflow hidden
text-overflow ellipsis
> .warning
margin-left 0.5em
color var(--infoWarnFg)
> svg
margin-right 0.1em
> input > input
display block display block