FEAT/ Form Elements
parent
c30a6cf759
commit
cc49116e5d
64
src/Test.vue
64
src/Test.vue
|
@ -1,35 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="buttons">
|
<div id="test">
|
||||||
<h1>Buttons</h1>
|
<h1>Buttons</h1>
|
||||||
<div>
|
<div>
|
||||||
<button>Default</button>
|
<button>Default</button>
|
||||||
<button disabled>Default</button>
|
<button disabled>Default</button>
|
||||||
|
|
|
||||||
<button class="generic">Generic</button>
|
<button class="generic">Generic</button>
|
||||||
<button class="generic" disabled>Generic</button>
|
<button class="generic" disabled>Generic</button>
|
||||||
|
|
|
||||||
<button class="action">Action</button>
|
<button class="action">Action</button>
|
||||||
<button class="action" disabled>Action</button>
|
<button class="action" disabled>Action</button>
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<button class="outlined">Default</button>
|
<button class="outlined">Default</button>
|
||||||
<button class="outlined" disabled>Default</button>
|
<button class="outlined" disabled>Default</button>
|
||||||
|
|
|
||||||
<button class="generic outlined">Generic</button>
|
<button class="generic outlined">Generic</button>
|
||||||
<button class="generic outlined" disabled>Generic</button>
|
<button class="generic outlined" disabled>Generic</button>
|
||||||
|
|
|
||||||
<button class="action outlined">Action</button>
|
<button class="action outlined">Action</button>
|
||||||
<button class="action outlined" disabled>Action</button>
|
<button class="action outlined" disabled>Action</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h1>Form Elements</h1>
|
||||||
|
<div>
|
||||||
|
<FormText placeholder="Input Text" label="Field Label" :model="text"/>
|
||||||
|
<FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
|
||||||
|
<FormText placeholder="Input Text" label="Field Label" off="true"/>
|
||||||
|
<FormNumber placeholder="A Number" label="Field Label" />
|
||||||
|
<FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
|
||||||
|
<FormNumber placeholder="A Number" label="Field Label" off="true"/>
|
||||||
|
<FormSelect placeholder="Placeholder" label="Select">
|
||||||
|
<option value="optionA">Option A</option>
|
||||||
|
<option value="optionB">Option B</option>
|
||||||
|
<option value="optionC">Option C</option>
|
||||||
|
<option value="optionD">Option D</option>
|
||||||
|
</FormSelect>
|
||||||
|
<FormSelect placeholder="Placeholder" label="Select" off="true">
|
||||||
|
<option value="optionA">Option A</option>
|
||||||
|
<option value="optionB">Option B</option>
|
||||||
|
<option value="optionC">Option C</option>
|
||||||
|
<option value="optionD">Option D</option>
|
||||||
|
</FormSelect>
|
||||||
|
<FormCheckbox label="Checkbox"/>
|
||||||
|
<FormCheckbox label="Checkbox" error="An Error Message"/>
|
||||||
|
<FormCheckbox label="Checkbox" off="true"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
|
||||||
|
|
||||||
|
import FormText from './components/form/FormText';
|
||||||
|
import FormNumber from './components/form/FormNumber';
|
||||||
|
import FormSelect from './components/form/FormSelect';
|
||||||
|
import FormCheckbox from './components/form/FormCheckbox';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FormText,
|
||||||
|
FormNumber,
|
||||||
|
FormSelect,
|
||||||
|
FormCheckbox
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
text: '',
|
||||||
|
number: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -38,8 +78,14 @@ export default {
|
||||||
@import './assets/styles/main.css';
|
@import './assets/styles/main.css';
|
||||||
@import './assets/styles/buttons.css';
|
@import './assets/styles/buttons.css';
|
||||||
|
|
||||||
#buttons {
|
body {
|
||||||
padding: 40px;
|
background-color: var(--white-washed);
|
||||||
|
}
|
||||||
|
|
||||||
|
#test {
|
||||||
|
margin: 40px;
|
||||||
|
padding: 24px;
|
||||||
|
background-color: var(--white-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
After Width: | Height: | Size: 182 B |
|
@ -5,6 +5,7 @@ button {
|
||||||
|
|
||||||
padding: 4px 36px;
|
padding: 4px 36px;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
|
min-width: 120px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
@ -15,6 +16,7 @@ button {
|
||||||
/* letter-spacing: 1px; */
|
/* letter-spacing: 1px; */
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:enabled:hover {
|
button:enabled:hover {
|
||||||
|
@ -58,7 +60,7 @@ button.outlined:disabled {
|
||||||
|
|
||||||
button.outlined.generic {
|
button.outlined.generic {
|
||||||
border-color: var(--grey-light);
|
border-color: var(--grey-light);
|
||||||
color: var(--grey-light);
|
color: var(--grey);
|
||||||
}
|
}
|
||||||
button.outlined.generic:enabled:active { background-color: #F2F6F9; }
|
button.outlined.generic:enabled:active { background-color: #F2F6F9; }
|
||||||
button.outlined.generic:disabled {
|
button.outlined.generic:disabled {
|
||||||
|
|
|
@ -40,14 +40,6 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
font-family: 'Roboto';
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--primary-green-dark: #71A857;
|
--primary-green-dark: #71A857;
|
||||||
--primary-green: #92D373;
|
--primary-green: #92D373;
|
||||||
|
@ -59,8 +51,8 @@
|
||||||
|
|
||||||
--grey-dark: #323940;
|
--grey-dark: #323940;
|
||||||
--grey: #848B90;
|
--grey: #848B90;
|
||||||
--grey-light: #AAB7C0;
|
--grey-light: #C9D3DA;
|
||||||
--grey-lightest: #D5DBDF;
|
--grey-lightest: #E8EAEB;
|
||||||
|
|
||||||
--white-washed: #EDEEEF;
|
--white-washed: #EDEEEF;
|
||||||
--white-normal: #FFFFFF;
|
--white-normal: #FFFFFF;
|
||||||
|
@ -73,4 +65,24 @@
|
||||||
--success-light: #BCE2B6;
|
--success-light: #BCE2B6;
|
||||||
--info: #608FBA;
|
--info: #608FBA;
|
||||||
--info-light: #ABC8E3;
|
--info-light: #ABC8E3;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--grey-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
|
||||||
|
h2 { font-size: 2.0rem; padding: 24px 4px; }
|
||||||
|
h3 { font-size: 1.5rem; padding: 24px 4px; }
|
||||||
|
h4 { font-size: 1.25rem; padding: 24px 4px; }
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin: 24px 0;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px solid black;
|
||||||
}
|
}
|
|
@ -0,0 +1,100 @@
|
||||||
|
<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 > input::placeholder, .form-base.disabled > select option:disabled{
|
||||||
|
color: #00000077;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<FormBase :error="error" :off="off">
|
||||||
|
<input type="checkbox" :disabled="off" :model="model" :id="_uid">
|
||||||
|
<label :class="classes()" :for="_uid">{{ label }}</label>
|
||||||
|
</FormBase>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FormBase from './FormBase';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: FormBase,
|
||||||
|
props: [
|
||||||
|
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
FormBase
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
classes(){
|
||||||
|
let classes = '';
|
||||||
|
classes += this.error ? 'error ': '';
|
||||||
|
classes += this.off ? 'disabled ': '';
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
label::after {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background-color: var(--white-normal);
|
||||||
|
border: 1px solid var(--grey);
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
float: right;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.error::after {
|
||||||
|
border: 2px solid var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
label.disabled::after {
|
||||||
|
background-color: var(--grey-lightest);
|
||||||
|
color: var(--grey);
|
||||||
|
border-color: var(--grey-lightest);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:focus + label::after {
|
||||||
|
box-shadow: 0 0 4px var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked + label::after {
|
||||||
|
box-shadow: 0 0 4px var(--success);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
input[type="checkbox"]{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,22 @@
|
||||||
|
<template>
|
||||||
|
<FormBase :label="label" :error="error" :off="off">
|
||||||
|
<input type="number" :placeholder="placeholder" :disabled="off" :model="model">
|
||||||
|
</FormBase>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FormBase from './FormBase';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: FormBase,
|
||||||
|
props: [
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
FormBase
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<FormBase :label="label" :error="error" :off="off">
|
||||||
|
<select :disabled="off" :model="model">
|
||||||
|
<option selected default>{{placeholder}}</option>
|
||||||
|
<slot></slot>
|
||||||
|
</select>
|
||||||
|
</FormBase>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FormBase from './FormBase';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: FormBase,
|
||||||
|
props: [
|
||||||
|
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
FormBase
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
select {
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||||
|
background-size: .6em;
|
||||||
|
background-position: calc(100% - 1.3em) center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<FormBase :label="label" :error="error" :off="off">
|
||||||
|
<input type="text" :placeholder="placeholder" :disabled="off" :model="model">
|
||||||
|
</FormBase>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FormBase from './FormBase';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
extends: FormBase,
|
||||||
|
props: [
|
||||||
|
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
FormBase
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
Loading…
Reference in New Issue