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

Fix textarea hint

This commit is contained in:
philipp lang 2024-01-01 17:55:13 +01:00
parent c3db854eb5
commit eb60852bbf
1 changed files with 16 additions and 29 deletions
resources/js/components/form
Textarea.vue

45
resources/js/components/form/Textarea.vue
View File

@ -1,36 +1,23 @@
<template> <template>
<label class="flex flex-col relative"> <label class="flex flex-col">
<span <span v-if="label && !inset" class="font-semibold text-gray-400" :class="{
v-if="label && !inset" 'text-xs': size == 'sm',
class="font-semibold text-gray-400" 'text-sm': size === null,
}">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</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="{ :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 <div class="relative w-full h-full">
> <textarea :placeholder="placeholder" class="h-full w-full outline-none bg-gray-700 border-gray-600 border-solid"
<span :rows="rows" :class="{
v-if="label && inset" 'rounded-lg text-sm border-2 p-2 text-gray-300': size === null,
class="absolute top-0 left-0 -mt-2 px-1 ml-3 inset-bg font-semibold text-gray-700" 'rounded-lg py-2 px-2 text-xs border-2 text-gray-300': size == 'sm',
:class="{ }" @input="trigger" v-text="modelValue"></textarea>
'text-xs': size == 'sm', <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
'text-sm': size === null, <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
}" </div>
>{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span
>
<textarea
: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',
}"
@input="trigger"
v-text="modelValue"
></textarea>
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
<ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
</div> </div>
</label> </label>
</template> </template>