silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Fix color of textarea (Fixes #16)

This commit is contained in:
philipp lang 2023-03-06 23:00:46 +01:00
parent 5f7fd15cd7
commit 13c9d2f2c1
1 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
resources/js/components/FTextarea.vue
View File

@ -1,18 +1,32 @@
<template> <template>
<label class="flex flex-col relative"> <label class="flex flex-col relative">
<span v-if="label && !inset" class="font-semibold text-gray-400" :class="{ <span
'text-xs': size == 'sm', v-if="label && !inset"
'text-sm': size === null class="font-semibold text-gray-400"
}">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span> :class="{
<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-xs': size == 'sm', 'text-sm': size === null,
'text-sm': size === null }"
}">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span> >{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</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" <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">&nbsp;*</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="{ :class="{
'rounded-lg text-sm border-2 p-2 text-gray-300': size === null, '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' 'rounded-lg py-2 px-2 text-xs border-2 text-gray-300': size == 'sm',
}" }"
></textarea> ></textarea>
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2"> <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
@ -23,61 +37,63 @@
<script> <script>
export default { export default {
data: function() { data: function () {
return { return {
focus: false focus: false,
}; };
}, },
props: { props: {
required: { required: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
inset: { inset: {
default: false, default: false,
type: Boolean type: Boolean,
}, },
size: { size: {
default: null default: null,
}, },
rows: { rows: {
default: function() { default: function () {
return 4; return 4;
} },
}, },
id: { id: {
required: true required: true,
}, },
hint: { hint: {
default: null default: null,
}, },
value: { value: {
default: undefined default: undefined,
}, },
mask: { mask: {
default: undefined default: undefined,
}, },
label: { label: {
default: false default: false,
}, },
type: { type: {
required: false, required: false,
default: function() { return 'text'; } default: function () {
return 'text';
},
}, },
placeholder: { placeholder: {
default: '' default: '',
} },
}, },
methods: { methods: {
trigger(v) { trigger(v) {
this.$emit('input', v.target.value); this.$emit('input', v.target.value);
} },
}, },
created() { created() {
if (typeof this.value === 'undefined') { if (typeof this.value === 'undefined') {
this.$emit('input', ''); this.$emit('input', '');
} }
} },
}; };
</script> </script>