✌️
This commit is contained in:
parent
7c596be638
commit
fa5a82c9ab
2 changed files with 33 additions and 14 deletions
src/client/app/common/views/components
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
|
||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
|
||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @change="onUsernameChange">
|
||||
<span>%i18n:@username%</span>
|
||||
<span slot="prefix">@</span>
|
||||
<span slot="suffix">@{{ host }}</span>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="ui-input" :class="[{ focused, filled }, styl]">
|
||||
<div class="icon" ref="icon"><slot name="icon"></slot></div>
|
||||
<div class="input" @click="focus" @mousedown="focus">
|
||||
<div class="input">
|
||||
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
|
||||
<div class="value" ref="passwordMetar"></div>
|
||||
</div>
|
||||
|
@ -30,7 +30,7 @@
|
|||
:value="value"
|
||||
@change="onChangeFile">
|
||||
</template>
|
||||
<div class="suffix"><slot name="suffix"></slot></div>
|
||||
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
|
||||
</div>
|
||||
<div class="text"><slot name="text"></slot></div>
|
||||
</div>
|
||||
|
@ -128,6 +128,14 @@ export default Vue.extend({
|
|||
mounted() {
|
||||
if (this.$refs.prefix) {
|
||||
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
|
||||
if (this.$refs.prefix.offsetWidth) {
|
||||
this.$refs.input.style.paddingLeft = this.$refs.prefix.offsetWidth + 'px';
|
||||
}
|
||||
}
|
||||
if (this.$refs.suffix) {
|
||||
if (this.$refs.suffix.offsetWidth) {
|
||||
this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -165,14 +173,8 @@ root(isDark, fill)
|
|||
margin-left 28px
|
||||
|
||||
> .input
|
||||
display flex
|
||||
cursor text
|
||||
|
||||
if fill
|
||||
padding 6px 12px
|
||||
background rgba(#000, 0.035)
|
||||
border-radius 6px
|
||||
else
|
||||
if !fill
|
||||
&:before
|
||||
content ''
|
||||
display block
|
||||
|
@ -232,6 +234,7 @@ root(isDark, fill)
|
|||
|
||||
> .label
|
||||
position absolute
|
||||
z-index 1
|
||||
top fill ? 6px : 0
|
||||
left 0
|
||||
pointer-events none
|
||||
|
@ -247,7 +250,6 @@ root(isDark, fill)
|
|||
|
||||
> input
|
||||
display block
|
||||
flex 1
|
||||
width 100%
|
||||
margin 0
|
||||
padding 0
|
||||
|
@ -262,29 +264,46 @@ root(isDark, fill)
|
|||
outline none
|
||||
box-shadow none
|
||||
|
||||
if fill
|
||||
padding 6px 12px
|
||||
background rgba(#000, 0.035)
|
||||
border-radius 6px
|
||||
|
||||
&[type='file']
|
||||
display none
|
||||
|
||||
> .prefix
|
||||
> .suffix
|
||||
display block
|
||||
align-self center
|
||||
justify-self center
|
||||
position absolute
|
||||
z-index 1
|
||||
top 0
|
||||
font-size 16px
|
||||
line-height 32px
|
||||
line-height fill ? 44px : 32px
|
||||
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
pointer-events none
|
||||
|
||||
&:empty
|
||||
display none
|
||||
|
||||
> *
|
||||
display block
|
||||
min-width 16px
|
||||
|
||||
> .prefix
|
||||
left 0
|
||||
padding-right 4px
|
||||
|
||||
if fill
|
||||
padding-left 12px
|
||||
|
||||
> .suffix
|
||||
right 0
|
||||
padding-left 4px
|
||||
|
||||
if fill
|
||||
padding-right 12px
|
||||
|
||||
> .text
|
||||
margin 6px 0
|
||||
font-size 13px
|
||||
|
|
Loading…
Reference in a new issue