89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<template>
|
|
<label class="flex flex-col relative">
|
|
<span v-if="label && !inset" class="font-semibold text-gray-400" :class="{
|
|
'text-xs': size == 'sm',
|
|
'text-sm': size === null
|
|
}">{{ label }}<span v-show="required" class="text-red-800"> *</span></span>
|
|
<span v-if="label && inset" class="absolute top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" :class="{
|
|
'text-xs': size == 'sm',
|
|
'text-sm': size === null
|
|
}">{{ label }}<span v-show="required" class="text-red-800"> *</span></span>
|
|
<textarea v-text="value" @input="trigger" :placeholder="placeholder"
|
|
class="h-full outline-none bg-gray-700 border-gray-600 border-solid" :rows="rows"
|
|
:class="{
|
|
'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
|
|
'rounded-lg py-2 px-2 text-xs border-2 text-gray-800': size == 'sm'
|
|
}"
|
|
></textarea>
|
|
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
|
|
<sprite src="info-button" class="w-5 h-5 text-indigo-200"></sprite>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
focus: false
|
|
};
|
|
},
|
|
props: {
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
inset: {
|
|
default: false,
|
|
type: Boolean
|
|
},
|
|
size: {
|
|
default: null
|
|
},
|
|
rows: {
|
|
default: function() {
|
|
return 4;
|
|
}
|
|
},
|
|
id: {
|
|
required: true
|
|
},
|
|
hint: {
|
|
default: null
|
|
},
|
|
value: {
|
|
default: undefined
|
|
},
|
|
mask: {
|
|
default: undefined
|
|
},
|
|
label: {
|
|
default: false
|
|
},
|
|
type: {
|
|
required: false,
|
|
default: function() { return 'text'; }
|
|
},
|
|
placeholder: {
|
|
default: ''
|
|
}
|
|
},
|
|
methods: {
|
|
trigger(v) {
|
|
this.$emit('input', v.target.value);
|
|
}
|
|
},
|
|
created() {
|
|
if (typeof this.value === 'undefined') {
|
|
this.$emit('input', '');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.inset-bg {
|
|
background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
|
|
}
|
|
</style>
|