silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add intro for text field

This commit is contained in:
philipp lang 2024-09-12 11:10:01 +02:00
parent 54efebf12e
commit a4a2a2b3fd
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/fields/Text.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" v-model="inner"></v-text> <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" :intro="field.intro" v-model="inner"></v-text>
</template> </template>
<script setup> <script setup>

42
src/components/fields/VText.vue
View File

@ -1,21 +1,24 @@
<template> <template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"> <div>
<input <div class="text-sm text-gray-600 mb-4" v-text="intro" v-if="intro"></div>
:id="id" <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
v-model="inner" <input
:name="name" :id="id"
:min="min" v-model="inner"
:max="presentMax" :name="name"
:type="type" :min="min"
placeholder="" :max="presentMax"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm" :type="type"
@keypress="$emit('keypress', $event)" placeholder=""
/> class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.box]:py-1 px-2 @sm:px-3 @sm:group-[.box]:px-2 text-sm @sm:text-base @sm:group-[.box]:text-sm"
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full"> @keypress="$emit('keypress', $event)"
<hint :value="hint"></hint> />
</div> <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
<field-label :name="label" :required="required"></field-label> <hint :value="hint"></hint>
</label> </div>
<field-label :name="label" :required="required"></field-label>
</label>
</div>
</template> </template>
<script setup> <script setup>
@ -70,6 +73,11 @@ const props = defineProps({
validator: (value) => value === null || typeof value === 'string', validator: (value) => value === null || typeof value === 'string',
default: () => null, default: () => null,
}, },
intro: {
required: false,
validator: (value) => value === null || typeof value === 'string',
default: () => null,
},
}); });
const presentMax = computed(() => { const presentMax = computed(() => {