fix: a lot of design flaws
Info text when empty, new inputs, minimum height of content fixed
This commit is contained in:
parent
cef5330567
commit
1504b8bfe9
21 changed files with 970 additions and 458 deletions
27
app/components/Pp/Form/TextField.vue
Executable file
27
app/components/Pp/Form/TextField.vue
Executable file
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="TextField">
|
||||
<div class="wrapper">
|
||||
<Icon v-if="icon" class="icon" :name="icon" mode="svg" />
|
||||
<input v-model="text" :type="type" :id="id" placeholder=" " @blur="emit('blur')" @input="emit('input')" :inputmode="mode" />
|
||||
<label :for="id">{{ label }}</label>
|
||||
</div>
|
||||
<span v-if="message">{{ message }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
type Props = {
|
||||
type?: 'text' | 'number';
|
||||
message?: string;
|
||||
icon?: string;
|
||||
label: string;
|
||||
id: string;
|
||||
mode?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal';
|
||||
};
|
||||
|
||||
const { type = "text", mode = "text" } = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits(['blur', 'input']);
|
||||
|
||||
const text = defineModel();
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue