Skip to content

Commit

Permalink
Flatpickr wrapper (epicmaxco#178)
Browse files Browse the repository at this point in the history 
* [wip] Flatpickr wrapper
* Datepicker styling
* Add vue-flatpickr instead of vanilla one
* Datepicker styles
* Datepicker presentation and styling fixes
* Fix styling for week numbers
* Date picker fixes
* Final fixes
  • Loading branch information
@asvae
asvae authored May 3, 2018
1 parent a2f6105 commit 4823cdb
Show file tree
Hide file tree
Showing 13 changed files with 530 additions and 41 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
"shelljs": "0.7.6",
"url-loader": "0.5.8",
"vue-component-tree": "^2.2.1",
"vue-flatpickr-component": "^7.0.1",
"vue-loader": "13.3.0",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.5.2",
Expand Down
186 changes: 154 additions & 32 deletions src/components/forms/form-elements/FormElements.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
<div class="form-group">
<div class="input-group">
<input id="simple-input" required/>
<label class="control-label" for="simple-input">{{'forms.inputs.textInput' | translate}}</label><i class="bar"></i>
<label class="control-label" for="simple-input">{{'forms.inputs.textInput'
| translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group with-icon-right"
Expand All @@ -23,34 +24,46 @@
v-model="successfulEmail"
v-validate="'required|email'"
required/>
<i class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label" for="successfulEmail">{{'forms.inputs.emailValidatedSuccess' | translate}} </label><i
<i
class="fa fa-exclamation-triangle error-icon icon-right input-icon"></i>
<i
class="fa fa-check valid-icon icon-right input-icon"></i>
<label class="control-label" for="successfulEmail">{{'forms.inputs.emailValidatedSuccess'
| translate}} </label><i
class="bar"></i>
<small v-show="errors.has('successfulEmail')" class="help text-danger">
<small v-show="errors.has('successfulEmail')"
class="help text-danger">
{{ errors.first('successfulEmail') }}
</small>
</div>
</div>
<div class="form-group with-icon-right" :class="{'has-error': errors.has('wrongEmail')}">
<div class="form-group with-icon-right"
:class="{'has-error': errors.has('wrongEmail')}">
<div class="input-group">
<input
id="wrongEmail"
name="wrongEmail"
v-model="wrongEmail"
v-validate="'required|email'"
required/>
<i class="fa fa-exclamation-triangle icon-right input-icon" v-show="errors.has('wrongEmail')"></i>
<label class="control-label" for="wrongEmail">{{'forms.inputs.emailValidated' | translate}}</label><i class="bar"></i>
<small v-show="errors.has('wrongEmail')" class="help text-danger">{{ errors.first('wrongEmail')
<i
class="fa fa-exclamation-triangle icon-right input-icon"
v-show="errors.has('wrongEmail')"></i>
<label class="control-label" for="wrongEmail">{{'forms.inputs.emailValidated'
| translate}}</label><i class="bar"></i>
<small v-show="errors.has('wrongEmail')"
class="help text-danger">{{
errors.first('wrongEmail')
}}
</small>
</div>
</div>
<div class="form-group">
<div class="input-group">
<textarea type="text" id="simple-textarea" required></textarea>
<label class="control-label" for="simple-textarea">{{'forms.inputs.textArea' | translate}}</label><i class="bar"></i>
<textarea type="text" id="simple-textarea"
required></textarea>
<label class="control-label" for="simple-textarea">{{'forms.inputs.textArea'
| translate}}</label><i class="bar"></i>
</div>
</div>
</fieldset>
Expand All @@ -60,27 +73,36 @@
<fieldset>
<div class="form-group with-icon-left">
<div class="input-group">
<input id="input-icon-left" name="input-icon-left" required/>
<input id="input-icon-left" name="input-icon-left"
required/>
<i class="fa fa-envelope-o icon-left input-icon"></i>
<label class="control-label" for="input-icon-left">{{'forms.inputs.inputWithIcon' | translate}}</label><i class="bar"></i>
<label class="control-label" for="input-icon-left">{{'forms.inputs.inputWithIcon'
| translate}}</label><i class="bar"></i>
</div>
</div>
<div class="form-group with-icon-right">
<div class="input-group">
<input v-model="clearableText" id="clear-input" name="clear-input" required/>
<i class="fa fa-times icon-right input-icon pointer" @click="clear('clearableText')"></i>
<label class="control-label" for="clear-input" role="button">{{'forms.inputs.inputWithClearButton' | translate}}</label><i
<input v-model="clearableText" id="clear-input"
name="clear-input" required/>
<i class="fa fa-times icon-right input-icon pointer"
@click="clear('clearableText')"></i>
<label class="control-label" for="clear-input"
role="button">{{'forms.inputs.inputWithClearButton'
| translate}}</label><i
class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="inputWithDescription" required title=""/>
<label class="control-label" for="simple-input">{{'forms.inputs.textInputWithDescription' | translate}}</label><i
<label class="control-label" for="simple-input">{{'forms.inputs.textInputWithDescription'
| translate}}</label><i
class="bar"></i>
<small class="help text-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
</small>
</div>
</div>
Expand All @@ -92,17 +114,22 @@
<div class="form-group form-group-w-btn">
<div class="input-group">
<input id="input-w-btn" required/>
<label class="control-label" for="input-w-btn">{{'forms.inputs.inputWithButton' | translate}}</label><i class="bar"></i>
<label class="control-label" for="input-w-btn">{{'forms.inputs.inputWithButton'
| translate}}</label><i class="bar"></i>
</div>
<div class="btn btn-micro btn-primary">
{{'forms.inputs.upload' | translate}}
</div>
<div class="btn btn-micro btn-primary">{{'forms.inputs.upload' | translate}}</div>
</div>
<div class="form-group form-group-w-btn">
<div class="input-group">
<input id="input-w-btn-round" required/>
<label class="control-label" for="input-w-btn-round">{{'forms.inputs.inputWithRoundButton' | translate }}</label><i
<label class="control-label" for="input-w-btn-round">{{'forms.inputs.inputWithRoundButton'
| translate }}</label><i
class="bar"></i>
</div>
<div class="btn btn-primary btn-with-icon btn-micro rounded-icon">
<div
class="btn btn-primary btn-with-icon btn-micro rounded-icon">
<div class="btn-with-icon-content">
<i class="ion-md-cloud-outline ion"></i>
</div>
Expand All @@ -117,6 +144,92 @@
</div>
</div>

<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="$t('forms.dateTimePicker.title')">
<form>
<div class="row">
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-basic"
v-model="datepicker.simple"
/>
<label class="control-label" for="date-picker-basic">
{{ $t('forms.dateTimePicker.basic') }}
</label>
<i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-time"
:config="{enableTime: true}"
v-model="datepicker.time"
/>
<label class="control-label" for="date-picker-time">
{{ $t('forms.dateTimePicker.time') }}
</label>
<i class="bar"></i>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-disabled"
:config="{disable: datePickerDisabled}"
v-model="datepicker.disabled"
/>
<label class="control-label" for="date-picker-disabled">
{{ $t('forms.dateTimePicker.disabled') }}
</label>
<i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-multiple"
:config="{mode: 'multiple'}"
v-model="datepicker.multiple"
/>
<label class="control-label" for="date-picker-multiple">
{{ $t('forms.dateTimePicker.multiple') }}
</label>
<i class="bar"></i>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<div class="form-group">
<div class="input-group">
<vuestic-date-picker
id="date-picker-range"
:config="{mode: 'range', inline: true}"
v-model="datepicker.range"
/>
<label class="control-label" for="date-picker-range">
{{ $t('forms.dateTimePicker.range') }}
</label>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</vuestic-widget>
</div>
</div>

<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'forms.selects.title' | translate">
Expand Down Expand Up @@ -249,7 +362,8 @@
<div class="col-md-3">
<fieldset>
<vuestic-switch v-model="isMale">
<span slot="trueTitle">{{'forms.controls.male' | translate}}</span>
<span
slot="trueTitle">{{'forms.controls.male' | translate}}</span>
<span slot="falseTitle">{{'forms.controls.female' | translate}}</span>
</vuestic-switch>
</fieldset>
Expand All @@ -268,13 +382,14 @@
export default {
name: 'form-elements',
computed: {
datePickerDisabled: () => [date => !(date.getDate() % 5)],
isSuccessfulEmailValid () {
let isValid = false
if (this.formFields.successfulEmail) {
isValid = this.formFields.successfulEmail.validated && this.formFields.successfulEmail.valid
}
return isValid
}
},
},
data () {
return {
Expand All @@ -287,16 +402,16 @@
simpleOptions: [
{
id: 1,
description: 'First option'
description: 'First option',
},
{
id: 2,
description: 'Second option'
description: 'Second option',
},
{
id: 3,
description: 'Third option'
}
description: 'Third option',
},
],
simpleSelectModel: '',
multiSelectModel: [],
Expand All @@ -310,19 +425,26 @@
checkboxFiveModel: false,
checkboxSixModel: true,
checkboxSevenModel: false,
checkboxEightModel: true
checkboxEightModel: true,
datepicker: {
simple: '2018-05-09',
time: '2018-05-08 14:10',
range: '2018-05-08 to 2018-05-23',
disabled: '2018-05-09',
multiple: '2018-04-25, 2018-04-27',
},
}
},
methods: {
clear (field) {
this[field] = ''
}
},
},
created () {
this.$nextTick(() => {
this.$validator.validateAll()
})
}
},
}
</script>

Expand Down
1 change: 0 additions & 1 deletion src/components/ui/tree-view/TreeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,3 @@
<style lang="scss">
</style>

11 changes: 10 additions & 1 deletion src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,14 @@
"radio": "Radio",
"subscribe": "Subscribe to newsletter"
},
"dateTimePicker": {
"title": "Date time pickers",
"basic": "Basic",
"time": "Time",
"range": "Range",
"multiple": "Multiple",
"disabled": "Disabled"
},
"inputs": {
"emailValidatedSuccess": "Email (validated with success)",
"emailValidated": "Email (validated)",
Expand Down Expand Up @@ -175,7 +183,8 @@
"tables": "Tables",
"typography": "Typography",
"uiElements": "UI Elements",
"treeView": "Tree view"
"treeView": "Tree view",
"dateTimePickers": "Date time pickers"
},
"messages": {
"all": "See all messages",
Expand Down
4 changes: 2 additions & 2 deletions src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ Vue.use(Router)

const demoRoutes = []
if (process.env.NODE_ENV === 'development') {
const VueComponentTree = require('vue-component-tree')
const VueComponentTree = require('vue-component-tree').default

demoRoutes.push(
VueComponentTree.default(require.context('./..', true, /.demo.vue$/), '/demo')
VueComponentTree(require.context('./..', true, /.demo.vue$/), '/demo')
)
}

Expand Down
6 changes: 6 additions & 0 deletions src/sass/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
@mixin flex-center () {
display: flex;
justify-content: center;
align-items: center;
}

@mixin theme-button-variant($color, $background, $border, $shadow) {
$hover-bg: lighten($background, 10%);
$disabled-bg: darken($background, 15%);
Expand Down
1 change: 1 addition & 0 deletions src/sass/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
@import "~awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
@import "~medium-editor/src/sass/medium-editor";
@import "_icons-styles.scss";
@import "~flatpickr/dist/flatpickr.css";

@import "base";
@import "typography";
Expand Down
2 changes: 1 addition & 1 deletion src/store/modules/menu/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default {
meta: {
title: 'menu.treeView'
}
}
},
]
}

Loading

0 comments on commit 4823cdb

Please sign in to comment.