This commit is contained in:
syuilo 2018-06-14 18:53:02 +09:00
parent 120c11b181
commit c5e9b69eb3
5 changed files with 188 additions and 34 deletions

View File

@ -10,17 +10,23 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({}); export default Vue.extend({
provide() {
return {
isCardChild: true
};
}
});
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.ui-card .ui-card
margin 16px 0 margin 16px
padding 32px padding 16px
background #fff background #fff
//box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12) box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
> header > header
font-weight bold font-weight bold

View File

@ -1,21 +1,35 @@
<template> <template>
<div class="ui-input" :class="{ focused, filled }"> <div class="ui-input" :class="[{ focused, filled }, styl]">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input" @click="focus"> <div class="input" @click="focus">
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength"> <div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
<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>
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div> <div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<input ref="input" <template v-if="type != 'file'">
:type="type" <input ref="input"
:value="value" :type="type"
:required="required" :value="v"
:readonly="readonly" :required="required"
:pattern="pattern" :readonly="readonly"
:autocomplete="autocomplete" :pattern="pattern"
@input="$emit('input', $event.target.value)" :autocomplete="autocomplete"
@focus="focused = true" @input="$emit('input', $event.target.value)"
@blur="focused = false"> @focus="focused = true"
@blur="focused = false">
</template>
<template v-else>
<input ref="input"
type="text"
:value="placeholder"
readonly
@click="chooseFile">
<input ref="file"
type="file"
:value="value"
@change="onChangeFile">
</template>
<div class="suffix"><slot name="suffix"></slot></div> <div class="suffix"><slot name="suffix"></slot></div>
</div> </div>
<div class="text"><slot name="text"></slot></div> <div class="text"><slot name="text"></slot></div>
@ -59,17 +73,34 @@ export default Vue.extend({
}, },
data() { data() {
return { return {
v: this.value,
focused: false, focused: false,
passwordStrength: '' passwordStrength: '',
} styl: 'fill'
};
}, },
computed: { computed: {
filled(): boolean { filled(): boolean {
return this.value != '' && this.value != null; return this.v != '' && this.v != null;
},
placeholder(): string {
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;
}
} }
}, },
watch: { watch: {
value(v) { value(v) {
this.v = v;
},
v(v) {
if (this.withPasswordMeter) { if (this.withPasswordMeter) {
if (v == '') { if (v == '') {
this.passwordStrength = ''; this.passwordStrength = '';
@ -82,6 +113,12 @@ export default Vue.extend({
} }
} }
}, },
inject: ['isCardChild'],
created() {
if (this.isCardChild) {
this.styl = 'line';
}
},
mounted() { mounted() {
if (this.$refs.prefix) { if (this.$refs.prefix) {
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px'; this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
@ -90,6 +127,14 @@ export default Vue.extend({
methods: { methods: {
focus() { focus() {
this.$refs.input.focus(); this.$refs.input.focus();
},
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);
} }
} }
}); });
@ -98,14 +143,52 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.ui-input root(isDark, fill)
margin 32px 0 margin 32px 0
> .icon
position absolute
top 0
left 0
width 24px
text-align center
line-height 32px
color rgba(#000, 0.54)
&:not(:empty) + .input
margin-left 28px
> .input > .input
display flex display flex
padding 6px 12px
background rgba(#000, 0.035) if fill
border-radius 6px padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
else
&:before
content ''
display block
position absolute
bottom 0
left 0
right 0
height 1px
background rgba(#000, 0.42)
&:after
content ''
display block
position absolute
bottom 0
left 0
right 0
height 2px
background $theme-color
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
> .password-meter > .password-meter
position absolute position absolute
@ -142,7 +225,7 @@ export default Vue.extend({
> .label > .label
position absolute position absolute
top 6px top fill ? 6px : 0
left 0 left 0
pointer-events none pointer-events none
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
@ -161,7 +244,7 @@ export default Vue.extend({
width 100% width 100%
padding 0 padding 0
font inherit font inherit
font-weight bold font-weight fill ? bold : normal
font-size 16px font-size 16px
line-height 32px line-height 32px
background transparent background transparent
@ -170,6 +253,9 @@ export default Vue.extend({
outline none outline none
box-shadow none box-shadow none
&[type='file']
display none
> .prefix > .prefix
> .suffix > .suffix
display block display block
@ -199,7 +285,12 @@ export default Vue.extend({
&.focused &.focused
> .input > .input
background rgba(#000, 0.05) if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
transform scaleX(1)
> .label > .label
color $theme-color color $theme-color
@ -208,8 +299,20 @@ export default Vue.extend({
&.filled &.filled
> .input > .input
> .label > .label
top -24px top fill ? -24px : -16px
left 0 !important left 0 !important
transform scale(0.8) transform scale(0.8)
.ui-input[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-input:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style> </style>

View File

@ -143,7 +143,6 @@ root(isDark)
> span > span
display block display block
line-height 20px line-height 20px
font-weight bold
color isDark ? #c4ccd2 : rgba(#000, 0.75) color isDark ? #c4ccd2 : rgba(#000, 0.75)
transition inherit transition inherit

View File

@ -65,13 +65,43 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
.ui-textarea root(isDark, fill)
margin 32px 0 margin 32px 0
> .input > .input
padding 12px padding 12px
background rgba(#000, 0.035)
border-radius 6px if fill
background rgba(#000, 0.035)
border-radius 6px
else
&:before
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
border solid 1px rgba(#000, 0.42)
border-radius 3px
pointer-events none
&:after
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
border solid 2px $theme-color
border-radius 3px
opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
pointer-events none
> .label > .label
position absolute position absolute
@ -94,7 +124,7 @@ export default Vue.extend({
min-height 100px min-height 100px
padding 0 padding 0
font inherit font inherit
font-weight bold font-weight fill ? bold : normal
font-size 16px font-size 16px
background transparent background transparent
border none border none
@ -111,7 +141,11 @@ export default Vue.extend({
&.focused &.focused
> .input > .input
background rgba(#000, 0.05) if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
> .label > .label
color $theme-color color $theme-color
@ -124,4 +158,16 @@ export default Vue.extend({
left 0 !important left 0 !important
transform scale(0.8) transform scale(0.8)
.ui-textarea[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-textarea:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style> </style>

View File

@ -29,12 +29,12 @@
<ui-input type="file" @change="onAvatarChange"> <ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span> <span>%i18n:@avatar%</span>
<span slot="prefix">%fa:picture-o%</span> <span slot="icon">%fa:image%</span>
</ui-input> </ui-input>
<ui-input type="file" @change="onBannerChange"> <ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span> <span>%i18n:@banner%</span>
<span slot="prefix">%fa:picture-o%</span> <span slot="icon">%fa:image%</span>
</ui-input> </ui-input>
<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch> <ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>