mizzkey/src/client/app/common/views/components/ui/input.vue

435 lines
7.9 KiB
Vue
Raw Normal View History

2018-06-13 23:29:01 +02:00
<template>
2018-11-05 23:57:16 +01:00
<div class="ui-input" :class="[{ focused, filled, inline, disabled }, styl]">
2018-06-14 11:53:02 +02:00
<div class="icon" ref="icon"><slot name="icon"></slot></div>
2018-06-16 00:06:58 +02:00
<div class="input">
2018-06-14 07:52:37 +02:00
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
<div class="value" ref="passwordMetar"></div>
</div>
2018-06-13 23:29:01 +02:00
<span class="label" ref="label"><slot></slot></span>
<span class="title" ref="title"><slot name="title"></slot></span>
2018-06-14 07:52:37 +02:00
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
2018-06-14 11:53:02 +02:00
<template v-if="type != 'file'">
<input ref="input"
:type="type"
v-model="v"
:disabled="disabled"
:required="required"
:readonly="readonly"
2018-12-02 12:10:53 +01:00
:placeholder="placeholder"
:pattern="pattern"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
@focus="focused = true"
@blur="focused = false"
2018-12-02 12:10:53 +01:00
@keydown="$emit('keydown', $event)"
>
2018-06-14 11:53:02 +02:00
</template>
<template v-else>
<input ref="input"
type="text"
2018-12-02 12:10:53 +01:00
:value="filePlaceholder"
readonly
@click="chooseFile"
>
2018-06-14 11:53:02 +02:00
<input ref="file"
type="file"
:value="value"
@change="onChangeFile"
>
2018-06-14 11:53:02 +02:00
</template>
2018-06-16 00:06:58 +02:00
<div class="suffix" ref="suffix"><slot name="suffix"></slot></div>
2018-06-13 23:29:01 +02:00
</div>
<div class="toggle" v-if="withPasswordToggle">
<a @click='togglePassword'>
<span v-if="type == 'password'"><fa :icon="['fa', 'eye']"/> {{ $t('@.show-password') }}</span>
<span v-if="type != 'password'"><fa :icon="['far', 'eye-slash']"/> {{ $t('@.hide-password') }}</span>
</a>
</div>
<div class="desc"><slot name="desc"></slot></div>
2018-06-13 23:29:01 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-06-14 07:52:37 +02:00
const getPasswordStrength = require('syuilo-password-strength');
2018-06-13 23:29:01 +02:00
export default Vue.extend({
2018-11-05 02:29:57 +01:00
inject: {
horizonGrouped: {
default: false
}
},
2018-06-14 02:51:55 +02:00
props: {
value: {
required: false
},
type: {
type: String,
required: false
},
required: {
type: Boolean,
required: false
},
readonly: {
type: Boolean,
required: false
2018-06-14 07:52:37 +02:00
},
2018-11-05 23:57:16 +01:00
disabled: {
type: Boolean,
required: false
},
2018-06-14 07:52:37 +02:00
pattern: {
type: String,
required: false
},
2018-12-02 12:10:53 +01:00
placeholder: {
type: String,
required: false
},
autofocus: {
type: Boolean,
required: false,
default: false
},
2018-06-14 07:52:37 +02:00
autocomplete: {
required: false
},
2018-06-15 06:08:56 +02:00
spellcheck: {
required: false
},
2018-06-14 07:52:37 +02:00
withPasswordMeter: {
type: Boolean,
required: false,
default: false
2018-09-29 02:11:06 +02:00
},
withPasswordToggle: {
type: Boolean,
required: false,
default: false
},
2018-11-04 06:23:28 +01:00
inline: {
type: Boolean,
required: false,
default(): boolean {
return this.horizonGrouped;
}
},
2018-09-29 02:11:06 +02:00
styl: {
type: String,
required: false,
default: 'line'
2018-06-14 02:51:55 +02:00
}
},
2018-06-13 23:29:01 +02:00
data() {
return {
2018-06-14 11:53:02 +02:00
v: this.value,
2018-06-14 07:52:37 +02:00
focused: false,
2018-09-29 02:11:06 +02:00
passwordStrength: ''
2018-06-14 11:53:02 +02:00
};
2018-06-13 23:29:01 +02:00
},
computed: {
filled(): boolean {
2018-06-14 11:53:02 +02:00
return this.v != '' && this.v != null;
},
2018-12-02 12:10:53 +01:00
filePlaceholder(): string {
2018-06-14 11:53:02 +02:00
if (this.type != 'file') return null;
if (this.v == null) return null;
if (typeof this.v == 'string') return this.v;
if (Array.isArray(this.v)) {
return this.v.map(file => file.name).join(', ');
} else {
return this.v.name;
}
2018-06-13 23:29:01 +02:00
}
},
2018-06-14 07:52:37 +02:00
watch: {
value(v) {
2018-06-14 11:53:02 +02:00
this.v = v;
},
v(v) {
2018-06-15 12:56:18 +02:00
this.$emit('input', v);
2018-06-14 07:52:37 +02:00
if (this.withPasswordMeter) {
if (v == '') {
this.passwordStrength = '';
return;
}
const strength = getPasswordStrength(v);
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
}
}
},
2018-06-13 23:29:01 +02:00
mounted() {
2018-12-02 12:10:53 +01:00
if (this.autofocus) {
this.$nextTick(() => {
this.$refs.input.focus();
});
}
this.$nextTick(() => {
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';
}
2018-06-16 00:06:58 +02:00
}
if (this.$refs.suffix) {
if (this.$refs.suffix.offsetWidth) {
this.$refs.input.style.paddingRight = this.$refs.suffix.offsetWidth + 'px';
}
2018-06-16 00:06:58 +02:00
}
});
2018-06-13 23:29:01 +02:00
},
methods: {
focus() {
this.$refs.input.focus();
2018-06-14 11:53:02 +02:00
},
togglePassword() {
2019-01-10 11:23:22 +01:00
if (this.type == 'password') {
this.type = 'text'
} else {
this.type = 'password'
}
},
2018-06-14 11:53:02 +02:00
chooseFile() {
this.$refs.file.click();
},
onChangeFile() {
this.v = Array.from((this.$refs.file as any).files);
this.$emit('input', this.v);
this.$emit('change', this.v);
2018-06-13 23:29:01 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 12:59:19 +02:00
root(fill)
2018-06-14 07:52:37 +02:00
margin 32px 0
2018-06-13 23:29:01 +02:00
2018-06-14 11:53:02 +02:00
> .icon
position absolute
top 0
left 0
width 24px
text-align center
line-height 32px
2018-09-27 15:50:34 +02:00
color var(--inputLabel)
2018-06-14 11:53:02 +02:00
&:not(:empty) + .input
margin-left 28px
2018-06-13 23:29:01 +02:00
> .input
2018-06-14 11:53:02 +02:00
2018-06-16 00:06:58 +02:00
if !fill
2018-06-14 11:53:02 +02:00
&:before
content ''
display block
position absolute
bottom 0
left 0
right 0
height 1px
2018-09-27 15:50:34 +02:00
background var(--inputBorder)
2018-06-14 11:53:02 +02:00
&:after
content ''
display block
position absolute
bottom 0
left 0
right 0
height 2px
2018-09-26 13:19:35 +02:00
background var(--primary)
2018-06-14 11:53:02 +02:00
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
will-change border opacity transform
2018-06-13 23:29:01 +02:00
2018-06-14 07:52:37 +02:00
> .password-meter
position absolute
top 0
left 0
width 100%
height 100%
border-radius 6px
overflow hidden
opacity 0.3
&[data-strength='']
display none
&[data-strength='low']
> .value
background #d73612
&[data-strength='medium']
> .value
background #d7ca12
&[data-strength='high']
> .value
background #61bb22
> .value
display block
width 0%
height 100%
background transparent
border-radius 6px
transition all 0.1s ease
2018-06-13 23:29:01 +02:00
> .label
position absolute
2018-06-16 00:06:58 +02:00
z-index 1
2018-06-14 11:53:02 +02:00
top fill ? 6px : 0
2018-06-13 23:29:01 +02:00
left 0
pointer-events none
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
transition-duration 0.3s
font-size 16px
line-height 32px
2018-09-27 15:50:34 +02:00
color var(--inputLabel)
2018-06-13 23:29:01 +02:00
pointer-events none
2018-06-14 07:52:37 +02:00
//will-change transform
transform-origin top left
transform scale(1)
2018-06-13 23:29:01 +02:00
> .title
position absolute
z-index 1
top fill ? -24px : -17px
left 0 !important
pointer-events none
font-size 16px
line-height 32px
color var(--inputLabel)
pointer-events none
//will-change transform
transform-origin top left
transform scale(.75)
2018-06-13 23:29:01 +02:00
> input
display block
width 100%
2018-06-15 02:33:25 +02:00
margin 0
2018-06-13 23:29:01 +02:00
padding 0
2018-06-14 00:22:50 +02:00
font inherit
2018-06-14 11:53:02 +02:00
font-weight fill ? bold : normal
2018-06-13 23:29:01 +02:00
font-size 16px
line-height 32px
2018-09-27 15:50:34 +02:00
color var(--inputText)
2018-06-13 23:29:01 +02:00
background transparent
border none
border-radius 0
outline none
box-shadow none
2018-06-16 00:06:58 +02:00
if fill
padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
2018-06-14 11:53:02 +02:00
&[type='file']
display none
2018-06-13 23:29:01 +02:00
> .prefix
> .suffix
display block
2018-06-16 00:06:58 +02:00
position absolute
z-index 1
top 0
2018-06-13 23:29:01 +02:00
font-size 16px
2018-06-16 00:06:58 +02:00
line-height fill ? 44px : 32px
2018-09-27 15:50:34 +02:00
color var(--inputLabel)
2018-06-14 07:52:37 +02:00
pointer-events none
2018-06-16 00:06:58 +02:00
&:empty
display none
2018-06-14 07:52:37 +02:00
> *
display block
min-width 16px
max-width 150px
overflow hidden
white-space nowrap
text-overflow ellipsis
2018-06-13 23:29:01 +02:00
> .prefix
2018-06-16 00:06:58 +02:00
left 0
2018-06-13 23:29:01 +02:00
padding-right 4px
2018-06-16 00:06:58 +02:00
if fill
padding-left 12px
2018-06-13 23:29:01 +02:00
> .suffix
2018-06-16 00:06:58 +02:00
right 0
2018-06-13 23:29:01 +02:00
padding-left 4px
2018-06-16 00:06:58 +02:00
if fill
padding-right 12px
> .toggle
cursor pointer
padding-left 0.5em
font-size 0.7em
opacity 0.7
text-align left
> a
color var(--inputLabel)
text-decoration none
> .desc
2018-06-14 07:52:37 +02:00
margin 6px 0
font-size 13px
2018-06-14 02:51:55 +02:00
&:empty
display none
2018-06-14 07:52:37 +02:00
*
2018-06-14 02:51:55 +02:00
margin 0
2018-06-13 23:29:01 +02:00
&.focused
> .input
2018-06-14 11:53:02 +02:00
if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
transform scaleX(1)
2018-06-13 23:29:01 +02:00
> .label
2018-09-26 13:19:35 +02:00
color var(--primary)
2018-06-13 23:29:01 +02:00
&.focused
&.filled
> .input
> .label
2018-06-14 14:38:39 +02:00
top fill ? -24px : -17px
2018-06-13 23:29:01 +02:00
left 0 !important
2018-06-14 14:38:39 +02:00
transform scale(0.75)
2018-06-13 23:29:01 +02:00
2018-09-28 12:59:19 +02:00
.ui-input
2018-06-14 11:53:02 +02:00
&.fill
2018-09-28 12:59:19 +02:00
root(true)
2018-06-14 11:53:02 +02:00
&:not(.fill)
2018-09-28 12:59:19 +02:00
root(false)
2018-06-14 11:53:02 +02:00
2018-11-04 06:23:28 +01:00
&.inline
display inline-block
margin 0
2018-11-05 23:57:16 +01:00
&.disabled
opacity 0.7
&, *
cursor not-allowed !important
2018-06-13 23:29:01 +02:00
</style>