Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flatpickr wrapper #178

Merged
merged 8 commits into from
May 3, 2018
Merged

Flatpickr wrapper #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d4b73e0
[wip] Flatpickr wrapper
asvae Apr 4, 2018
3d1359c
Datepicker styling
asvae Apr 12, 2018
816a788
Add vue-flatpickr instead of vanilla one
asvae Apr 18, 2018
fe3c4b3
Datepicker styles
asvae Apr 19, 2018
a8be3c9
Datepicker presentation and styling fixes
asvae Apr 20, 2018
10024a4
Fix styling for week numbers
asvae Apr 22, 2018
6f917ef
Date picker fixes
asvae May 2, 2018
687c6b3
Final fixes
asvae May 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default {
meta: {
title: 'menu.treeView'
}
}
},
]
}