misskey/src/client/app/common/views/components/material/input.vue

140 lines
2.3 KiB
Vue
Raw Normal View History

2018-06-13 23:29:01 +02:00
<template>
<div class="ui-input" :class="{ focused, filled }">
<div class="input">
<span class="label" ref="label"><slot></slot></span>
<div class="prefix" ref="prefix" @click="focus"><slot name="prefix"></slot></div>
2018-06-14 02:51:55 +02:00
<input ref="input"
:type="type"
:value="value"
:required="required"
:readonly="readonly"
@input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false">
2018-06-13 23:29:01 +02:00
<div class="suffix" @click="focus"><slot name="suffix"></slot></div>
</div>
2018-06-14 02:51:55 +02:00
<div class="text"><slot name="text"></slot></div>
2018-06-13 23:29:01 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
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-13 23:29:01 +02:00
data() {
return {
focused: false
}
},
computed: {
filled(): boolean {
return this.value != '' && this.value != null;
}
},
mounted() {
2018-06-14 00:22:50 +02:00
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
2018-06-13 23:29:01 +02:00
},
methods: {
focus() {
this.$refs.input.focus();
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.ui-input
2018-06-14 02:51:55 +02:00
margin-bottom 16px
padding-top 16px
2018-06-13 23:29:01 +02:00
> .input
display flex
2018-06-14 00:22:50 +02:00
padding 6px 12px
2018-06-14 02:51:55 +02:00
background rgba(#000, 0.035)
2018-06-14 00:22:50 +02:00
border-radius 6px
2018-06-13 23:29:01 +02:00
> .label
position absolute
2018-06-14 00:22:50 +02:00
top 6px
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
color rgba(#000, 0.54)
pointer-events none
> input
display block
flex 1
width 100%
padding 0
2018-06-14 00:22:50 +02:00
font inherit
font-weight bold
2018-06-13 23:29:01 +02:00
font-size 16px
line-height 32px
background transparent
border none
border-radius 0
outline none
box-shadow none
> .prefix
> .suffix
display block
align-self center
justify-self center
font-size 16px
line-height 32px
color rgba(#000, 0.54)
> .prefix
padding-right 4px
> .suffix
padding-left 4px
2018-06-14 02:51:55 +02:00
> .text
margin 8px 0
font-size 14px
> p
margin 0
2018-06-13 23:29:01 +02:00
&.focused
> .input
2018-06-14 02:51:55 +02:00
background rgba(#000, 0.05)
2018-06-13 23:29:01 +02:00
> .label
color $theme-color
&.focused
&.filled
> .input
> .label
2018-06-14 00:22:50 +02:00
top -20px
2018-06-13 23:29:01 +02:00
left 0 !important
font-size 12px
line-height 20px
</style>