rudeshark.net/src/client/app/common/views/components/ui/textarea.vue

185 lines
2.9 KiB
Vue
Raw Normal View History

2018-06-13 23:29:01 +02:00
<template>
2018-10-26 07:47:30 +02:00
<div class="ui-textarea" :class="{ focused, filled, tall }">
2018-06-13 23:29:01 +02:00
<div class="input">
<span class="label" ref="label"><slot></slot></span>
2018-06-14 07:52:37 +02:00
<textarea ref="input"
:value="value"
:required="required"
:readonly="readonly"
:pattern="pattern"
:autocomplete="autocomplete"
@input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false"
></textarea>
2018-06-13 23:29:01 +02:00
</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
2018-06-13 23:29:01 +02:00
export default Vue.extend({
2018-06-14 02:51:55 +02:00
props: {
value: {
required: false
},
required: {
type: Boolean,
required: false
},
readonly: {
type: Boolean,
required: false
2018-06-14 07:52:37 +02:00
},
pattern: {
type: String,
required: false
},
autocomplete: {
type: String,
required: false
2018-10-26 07:47:30 +02:00
},
tall: {
type: Boolean,
required: false,
default: false
},
2018-06-14 02:51:55 +02:00
},
2018-06-13 23:29:01 +02:00
data() {
return {
2018-06-14 07:52:37 +02:00
focused: false,
passwordStrength: ''
2018-06-13 23:29:01 +02:00
}
},
computed: {
filled(): boolean {
return this.value != '' && this.value != null;
}
},
methods: {
focus() {
this.$refs.input.focus();
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-27 15:50:34 +02:00
root(fill)
2018-06-15 06:08:56 +02:00
margin 42px 0 32px 0
2018-06-13 23:29:01 +02:00
2018-10-26 01:37:30 +02:00
&:last-child
margin-bottom 0
2018-06-13 23:29:01 +02:00
> .input
2018-06-14 07:52:37 +02:00
padding 12px
2018-06-14 11:53:02 +02:00
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
2018-09-27 15:50:34 +02:00
border solid 1px var(--inputBorder)
2018-06-14 11:53:02 +02:00
border-radius 3px
pointer-events none
&:after
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
2018-09-26 13:19:35 +02:00
border solid 2px var(--primary)
2018-06-14 11:53:02 +02:00
border-radius 3px
opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
pointer-events none
2018-06-13 23:29:01 +02:00
> .label
position absolute
2018-06-14 00:22:50 +02:00
top 6px
2018-06-14 07:52:37 +02:00
left 12px
2018-06-13 23:29:01 +02:00
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
2018-06-14 07:52:37 +02:00
> textarea
2018-06-13 23:29:01 +02:00
display block
width 100%
2018-11-20 22:24:46 +01:00
min-width 100%
max-width 100%
2018-06-14 07:52:37 +02:00
min-height 100px
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
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
> .desc
2018-06-14 07:52:37 +02:00
margin 6px 0
font-size 13px
2018-11-11 13:18:24 +01:00
opacity 0.7
2018-06-14 02:51:55 +02:00
2018-11-20 22:25:58 +01: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
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 07:52:37 +02:00
top -24px
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-10-26 07:47:30 +02:00
&.tall
> .input
> textarea
min-height 200px
2018-09-27 15:50:34 +02:00
.ui-textarea.fill
root(true)
.ui-textarea:not(.fill)
root(false)
2018-06-14 11:53:02 +02:00
2018-06-13 23:29:01 +02:00
</style>