Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-15 18:53:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/master' into components/mdDatepicker

Browse source 
* origin/master:
  fixed when npm install  extract-text-webpack-plugin@beta not  found error ( #665 ) (#666)
  Issue#544 (#674)
  Add CDNJS version badge in README.md (#718)
This commit is contained in:
Marcos Moura 2017-05-07 19:58:56 -03:00
commit 4ce055e0f8
8 changed files with 85 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -15,6 +15,10 @@
<img src="https://img.shields.io/npm/v/vue-material.svg" alt="Version">
</a>
<a href="https://cdnjs.com/libraries/vue-material">
<img src="https://img.shields.io/cdnjs/v/vue-material.svg" alt="Version">
</a>
<a href="https://www.npmjs.com/package/vue-material">
<img src="https://img.shields.io/npm/l/vue-material.svg" alt="License">
</a>

20
docs/src/pages/components/DatePicker.vue
View file

@ -31,11 +31,27 @@
<example-box card-title="Default">
<div class="datepicker-demo" slot="demo">
<md-input-container>
<md-datepicker v-model="date" />
<md-datepicker id="picker-1" v-model="date" />
</md-input-container>
<md-input-container>
<md-datepicker v-model="date" md-open-on-focus />
<label for="picker-2">Open on focus</label>
<md-datepicker id="picker-2" v-model="date" md-open-on-focus />
</md-input-container>
<md-input-container>
<label for="picker-3">With an label</label>
<md-datepicker id="picker-3" v-model="date" md-open-on-focus placeholder="This placeholder don't work on Chrome" />
</md-input-container>
<md-input-container>
<label for="picker-4">Required</label>
<md-datepicker id="picker-4" v-model="date" required />
</md-input-container>
<md-input-container>
<label for="picker-5">Disabled</label>
<md-datepicker id="picker-5" v-model="date" disabled />
</md-input-container>
</div>

12
docs/src/pages/components/Input.vue
View file

@ -77,6 +77,12 @@
<md-table-cell>Sets the type. Default <code>text</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>debounce</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
@ -121,6 +127,12 @@
<md-table-cell>A required model object to bind the value.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>debounce</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Debounce the <code>change</code> and <code>input</code> events emission. Default <code>300</code>ms</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>disabled</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>

4
package.json
View file

@ -63,13 +63,13 @@
"css-mqpacker": "^5.0.1",
"date-fns": "^1.28.0",
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
"eslint": "^3.16.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.3",
"eslint-plugin-html": "^2.0.1",
"eslint": "^3.16.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.15.0",
"extract-text-webpack-plugin": "^2.0.0",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"friendly-errors-webpack-plugin": "^1.6.1",
"highlight.js": "^9.9.0",

6
src/components/mdDatePicker/mdDatePicker.scss
View file

@ -8,6 +8,12 @@ $month-small-width: 280px;
display: flex;
flex: 1;
&.md-disabled {
.md-icon {
cursor: default;
}
}
.md-icon {
cursor: pointer;
}

33
src/components/mdDatePicker/mdDatePicker.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="md-datepicker">
<div class="md-datepicker" :class="{ 'md-disabled': disabled }">
<md-icon @click.native="openPicker">event</md-icon>
<md-input
@ -159,8 +159,8 @@
return years;
},
modelDate: this.value,
currentDate: isValidDate(this.value) ? parseDate(this.value) : Date.now(),
selectedDate: isValidDate(this.value) ? parseDate(this.value) : Date.now(),
currentDate: this.parseInitialDate(),
selectedDate: this.parseInitialDate(),
createdMonths: [
addMonths(this.value, -1),
this.value,
@ -192,6 +192,10 @@
watch: {
selectedDate(selected) {
this.modelDate = formatDate(selected, this.locale.dateFormat);
},
value(value) {
this.setModelValue(this.parseInitialDate());
this.modelDate = formatDate(value, this.locale.dateFormat);
}
},
methods: {
@ -228,6 +232,9 @@
setMonth(month) {
this.setModelValue(setMonth(this.currentDate, month));
},
parseInitialDate() {
return isValidDate(this.value) ? parseDate(this.value) : Date.now();
},
setModelValue(date) {
this.selectedDate = date;
this.$emit('input', date);
@ -258,15 +265,17 @@
});
},
openPicker() {
window.addEventListener('resize', this.calculatePopupPosition);
this.calculatePopupPosition();
this.rootElement.appendChild(this.pickerElement);
this.rootElement.appendChild(this.backdropElement);
getComputedStyle(this.pickerElement).top;
getComputedStyle(this.backdropElement).top;
this.active = true;
this.currentDate = parseDate(this.value);
this.selectedDate = parseDate(this.value);
if (!this.disabled) {
window.addEventListener('resize', this.calculatePopupPosition);
this.calculatePopupPosition();
this.rootElement.appendChild(this.pickerElement);
this.rootElement.appendChild(this.backdropElement);
getComputedStyle(this.pickerElement).top;
getComputedStyle(this.backdropElement).top;
this.active = true;
this.currentDate = parseDate(this.value);
this.selectedDate = parseDate(this.value);
}
},
closePicker() {
const cleanUp = () => {

23
src/components/mdInputContainer/common.js
View file

@ -1,11 +1,21 @@
export default {
props: {
value: [String, Number, Date],
debounce: {
type: Number,
default: 3E2
},
disabled: Boolean,
required: Boolean,
maxlength: [Number, String],
name: String,
placeholder: String
},
data() {
return {
timeout: 0
};
},
watch: {
value() {
this.updateValues();
@ -28,6 +38,16 @@ export default {
this.parentContainer.enableCounter = this.maxlength > 0;
this.parentContainer.counterLength = this.maxlength;
},
lazyEventEmitter() {
if (this.timeout) {
window.clearTimeout(this.timeout);
}
this.timeout = window.setTimeout(() => {
this.$emit('change', this.$el.value);
this.$emit('input', this.$el.value);
}, this.debounce);
},
setParentValue(value) {
this.parentContainer.setValue(value || this.$el.value);
},
@ -62,8 +82,7 @@ export default {
},
onInput($event) {
this.updateValues();
this.$emit('change', this.$el.value, $event);
this.$emit($event.type, this.$el.value, $event);
this.lazyEventEmitter();
}
}
};

2
src/components/mdSpinner/mdSpinner.vue
View file

@ -2,7 +2,7 @@
<transition name="md-spinner" appear>
<div class="md-spinner" :class="[themeClass, classes]":style="styles">
<svg class="md-spinner-draw" viewBox="25 25 50 50">
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress"></circle>
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress" />
</svg>
</div>
</transition>