104 lines
2.2 KiB
Vue
104 lines
2.2 KiB
Vue
<template>
|
|
<div class="form-base" :class="classes()">
|
|
<label>{{ label }}</label><br>
|
|
<slot></slot>
|
|
<p :if="error">{{error}}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: [
|
|
'label',
|
|
'error',
|
|
'off',
|
|
'model',
|
|
'placeholder'
|
|
],
|
|
methods: {
|
|
classes(){
|
|
let classes = '';
|
|
classes += this.error ? 'error ': '';
|
|
classes += this.off ? 'disabled ': '';
|
|
return classes;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.form-base {
|
|
margin: 20px 4px;
|
|
/* display: flex; */
|
|
}
|
|
|
|
.form-base label {
|
|
margin-top: 12px;
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
color: var(--grey-dark);
|
|
width: 100%;
|
|
}
|
|
|
|
.form-base > input, .form-base > select {
|
|
margin-top: 4px;
|
|
padding: 6px;
|
|
font-weight: bold;
|
|
|
|
color: var(--grey-dark);
|
|
/* background-color: var(--white-washed); */
|
|
border: 1px solid var(--grey-light);
|
|
border-radius: 4px;
|
|
|
|
outline: none;
|
|
width: calc(100% - 14px);
|
|
}
|
|
|
|
.form-base > select {
|
|
width: 100%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.form-base > input::placeholder, .form-base > select option:disabled {
|
|
color: var(--grey);
|
|
}
|
|
|
|
.form-base > input:focus, .form-base > select:focus {
|
|
border-color: var(--success);
|
|
box-shadow: 0 0 4px var(--success);
|
|
}
|
|
|
|
.form-base.error > input, .form-base.error > select {
|
|
border-color: var(--error);
|
|
border-width: 2px;
|
|
}
|
|
|
|
.form-base.error > input:focus, .form-base.error > select:focus {
|
|
box-shadow: 0 0 4px var(--error);
|
|
}
|
|
|
|
.form-base.error > p {
|
|
margin-top: 6px;
|
|
margin-left: 4px;
|
|
color: var(--error);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.form-base.disabled > input, .form-base.disabled > select{
|
|
background-color: var(--grey-lightest);
|
|
color: var(--grey);
|
|
border-color: var(--grey-lightest);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-base.disabled > label {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
|
|
color: #00000077;
|
|
}
|
|
|
|
|
|
</style> |