Praeziso
/
synolo-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

FEAT/ Form Elements

master
Niclas Thobaben 2020-01-11 00:24:21 +01:00
parent c30a6cf759
commit cc49116e5d
9 changed files with 333 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/Test.vue
View File

@ -1,35 +1,75 @@
<template>
<div id="buttons">
<div id="test">
<h1>Buttons</h1>
<div>
<button>Default</button>
<button disabled>Default</button>
|
<button class="generic">Generic</button>
<button class="generic" disabled>Generic</button>
|
<button class="action">Action</button>
<button class="action" disabled>Action</button>
<hr>
<button class="outlined">Default</button>
<button class="outlined" disabled>Default</button>
|
<button class="generic outlined">Generic</button>
<button class="generic outlined" disabled>Generic</button>
|
<button class="action outlined">Action</button>
<button class="action outlined" disabled>Action</button>
</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>
</template>
<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>
@ -38,8 +78,14 @@ export default {
@import './assets/styles/main.css';
@import './assets/styles/buttons.css';
#buttons {
padding: 40px;
body {
background-color: var(--white-washed);
}
#test {
margin: 40px;
padding: 24px;
background-color: var(--white-normal);
}
</style>

1
src/assets/icons/expand_more-24px.svg 100644
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 182 B

4
src/assets/styles/buttons.css
View File

@ -5,6 +5,7 @@ button {
padding: 4px 36px;
margin: 4px;
min-width: 120px;
font-weight: bold;
border: 1px solid transparent;
border-radius: 4px;
@ -15,6 +16,7 @@ button {
/* letter-spacing: 1px; */
cursor: pointer;
outline: none;
}
button:enabled:hover {
@ -58,7 +60,7 @@ button.outlined:disabled {
button.outlined.generic {
border-color: var(--grey-light);
color: var(--grey-light);
color: var(--grey);
}
button.outlined.generic:enabled:active { background-color: #F2F6F9; }
button.outlined.generic:disabled {

32
src/assets/styles/main.css
View File

@ -40,14 +40,6 @@
font-weight: bold;
}
* {
padding: 0;
margin: 0;
border: 0;
font-family: 'Roboto';
font-size: 13px;
}
:root {
--primary-green-dark: #71A857;
--primary-green: #92D373;
@ -59,8 +51,8 @@
--grey-dark: #323940;
--grey: #848B90;
--grey-light: #AAB7C0;
--grey-lightest: #D5DBDF;
--grey-light: #C9D3DA;
--grey-lightest: #E8EAEB;
--white-washed: #EDEEEF;
--white-normal: #FFFFFF;
@ -73,4 +65,24 @@
--success-light: #BCE2B6;
--info: #608FBA;
--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;
}

100
src/components/form/FormBase.vue 100644
View File

@ -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>

72
src/components/form/FormCheckbox.vue 100644
View File

@ -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>

22
src/components/form/FormNumber.vue 100644
View File

@ -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>

35
src/components/form/FormSelect.vue 100644
View File

@ -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>

23
src/components/form/FormText.vue 100644
View File

@ -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>