105 lines
2.7 KiB
Vue
105 lines
2.7 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-300': size == 'sm',
|
|
}"
|
|
></textarea>
|
|
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
|
|
<svg-sprite src="info-button" class="w-5 h-5 text-indigo-200"></svg-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>
|