zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-08 02:58:54 +08:00
Code Issues Projects Releases Wiki Activity

add hint and disabled state for TextField

Browse Source
This commit is contained in:
lana-k
2021-04-08 19:53:15 +02:00
parent ba75685a23
commit c2864b4308
1 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/TextField.vue
View File

@@ -1,22 +1,28 @@
<template> <template>
<div> <div>
<div :class="['text-field-label', { error: errorMsg }]">{{ label }}</div> <div :class="['text-field-label', { error: errorMsg }, {'disabled': disabled}]">
{{ label }}
<hint-icon class="hint" v-if="hint" :hint="hint" :max-width="maxHintWidth || '149px'"/>
</div>
<input <input
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
:class="{ error: errorMsg }" :class="{ error: errorMsg }"
:style="{ width: width }" :style="{ width: width }"
:value="value" :value="value"
:disabled="disabled"
@input="$emit('input', $event.target.value)" @input="$emit('input', $event.target.value)"
/> />
<div class="text-field-error">{{ errorMsg }}</div> <div v-show="errorMsg" class="text-field-error">{{ errorMsg }}</div>
</div> </div>
</template> </template>
<script> <script>
import HintIcon from '@/components/svg/hint'
export default { export default {
name: 'textField', name: 'textField',
props: ['placeholder', 'label', 'errorMsg', 'value', 'width'] props: ['placeholder', 'label', 'errorMsg', 'value', 'width', 'hint', 'maxHintWidth', 'disabled'],
components: { HintIcon }
} }
</script> </script>
@@ -30,6 +36,7 @@ input {
padding: 0 8px; padding: 0 8px;
font-size: 13px; font-size: 13px;
box-sizing: border-box; box-sizing: border-box;
display: block;
} }
input::placeholder { input::placeholder {
@@ -40,24 +47,44 @@ input:focus {
outline: none; outline: none;
} }
input:disabled {
background: var(--color-bg-light);
color: var(--color-text-light-2);
cursor: default;
}
input.error { input.error {
border-color: var(--color-text-error); border-color: var(--color-text-error);
} }
.text-field-label { .text-field-label {
font-size: 12px; font-size: 12px;
color: var(--color-text-base); color: var(--color-text-base);
padding-left: 8px; padding-left: 8px;
margin-bottom: 2px; margin-bottom: 2px;
display: inline-block;
position: relative;
}
.text-field-label .hint{
position: absolute;
top: -2px;
right: -22px;
} }
.text-field-label.error { .text-field-label.error {
color: var(--color-text-error); color: var(--color-text-error);
} }
.text-field-label.disabled {
color: var(--color-text-light-2);
}
.text-field-error { .text-field-error {
color: var(--color-text-error); color: var(--color-text-error);
font-size: 12px; font-size: 12px;
padding-left: 8px; padding-left: 8px;
margin-top: 2px; margin-top: 2px;
position: absolute;
} }
</style> </style>