drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/2.0' into 2.0

Browse source
This commit is contained in:
jingsam 2017-03-08 17:04:47 +08:00
commit 1212d3da35
22 changed files with 317 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/date-picker/base/confirm.vue
View file

@ -4,8 +4,8 @@
<template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
<template v-else>{{ t('i.datepicker.selectTime') }}</template>
</span>
<i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
<i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
<i-button size="small" type="text" @click.native="handleClear">{{ t('i.datepicker.clear') }}</i-button>
<i-button size="small" type="primary" @click.native="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
</div>
</template>
<script>

2
src/components/date-picker/base/date-table.vue
View file

@ -6,7 +6,7 @@
<div :class="[prefixCls + '-header']">
<span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
</div>
<span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
<span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index">{{ cell.text }}</em></span>
</div>
</template>
<script>

2
src/components/date-picker/base/month-table.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="classes" @click="handleClick">
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
<span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>
</div>
</template>
<script>

20
src/components/date-picker/base/time-spinner.vue
View file

@ -1,18 +1,18 @@
<template>
<div :class="classes">
<div :class="[prefixCls+ '-list']" v-el:hours>
<div :class="[prefixCls+ '-list']" ref="hours">
<ul :class="[prefixCls + '-ul']" @click="handleClickHours">
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
<li :class="getCellCls(item)" v-for="(item, index) in hoursList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-el:minutes>
<div :class="[prefixCls+ '-list']" ref="minutes">
<ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
<li :class="getCellCls(item)" v-for="(item, index) in minutesList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" ref="seconds">
<ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
<li :class="getCellCls(item)" v-for="(item, index) in secondsList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
</ul>
</div>
</div>
@ -159,9 +159,9 @@
this.$emit('on-pick-click');
},
scroll (type, index) {
const from = this.$els[type].scrollTop;
const from = this.$refs[type].scrollTop;
const to = 24 * this.getScrollIndex(type, index);
scrollTop(this.$els[type], from, to, 500);
scrollTop(this.$refs[type], from, to, 500);
},
getScrollIndex (type, index) {
const Type = firstUpperCase(type);
@ -177,7 +177,7 @@
const times = ['hours', 'minutes', 'seconds'];
this.$nextTick(() => {
times.forEach(type => {
this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
this.$refs[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
});
});
},
@ -199,7 +199,7 @@
this.scroll('seconds', val);
}
},
compiled () {
mounted () {
this.updateScroll();
this.$nextTick(() => this.compiled = true);
}

2
src/components/date-picker/base/year-table.vue
View file

@ -1,6 +1,6 @@
<template>
<div :class="classes" @click="handleClick">
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
<span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span>
</div>
</template>
<script>

12
src/components/date-picker/panel/date-range.vue
View file

@ -42,7 +42,7 @@
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:left-year-table
ref="leftYearTable"
v-show="leftCurrentView === 'year'"
:year="leftTableYear"
:date="leftTableDate"
@ -51,7 +51,7 @@
@on-pick="handleLeftYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:left-month-table
ref="leftMonthTable"
v-show="leftCurrentView === 'month'"
:month="leftMonth"
:date="leftTableDate"
@ -95,7 +95,7 @@
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:right-year-table
ref="rightYearTable"
v-show="rightCurrentView === 'year'"
:year="rightTableYear"
:date="rightTableDate"
@ -104,7 +104,7 @@
@on-pick="handleRightYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:right-month-table
ref="rightMonthTable"
v-show="rightCurrentView === 'month'"
:month="rightMonth"
:date="rightTableDate"
@ -115,7 +115,7 @@
</div>
<div :class="[prefixCls + '-content']" v-show="isTime">
<time-picker
v-ref:time-picker
ref="timePicker"
v-show="isTime"
@on-pick="handleTimePick"
@on-pick-click="handlePickClick"></time-picker>
@ -407,7 +407,7 @@
this.handleConfirm(false);
}
},
compiled () {
mounted () {
if (this.showTime) {
// todo 这里也到不了
this.$refs.timePicker.date = this.minDate;

8
src/components/date-picker/panel/date.vue
View file

@ -42,7 +42,7 @@
@on-pick="handleDatePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
v-ref:year-table
ref="yearTable"
v-show="currentView === 'year'"
:year="year"
:date="date"
@ -51,7 +51,7 @@
@on-pick="handleYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
v-ref:month-table
ref="monthTable"
v-show="currentView === 'month'"
:month="month"
:date="date"
@ -60,7 +60,7 @@
@on-pick="handleMonthPick"
@on-pick-click="handlePickClick"></month-table>
<time-picker
v-ref:time-picker
ref="timePicker"
show-date
v-show="currentView === 'time'"
@on-pick="handleTimePick"
@ -272,7 +272,7 @@
this.handleDatePick(date);
}
},
compiled () {
mounted () {
if (this.selectionMode === 'month') {
this.currentView = 'month';
}

6
src/components/date-picker/panel/time-range.vue
View file

@ -7,7 +7,7 @@
<template v-else>{{ t('i.datepicker.startTime') }}</template>
</div>
<time-spinner
v-ref:time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
@ -25,7 +25,7 @@
<template v-else>{{ t('i.datepicker.endTime') }}</template>
</div>
<time-spinner
v-ref:time-spinner-end
ref="timeSpinnerEnd"
:show-seconds="showSeconds"
:hours="hoursEnd"
:minutes="minutesEnd"
@ -200,7 +200,7 @@
this.$refs.timeSpinnerEnd.updateScroll();
}
},
compiled () {
mounted () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};

4
src/components/date-picker/panel/time.vue
View file

@ -4,7 +4,7 @@
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']">
<time-spinner
v-ref:time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
@ -108,7 +108,7 @@
this.$refs.timeSpinner.updateScroll();
}
},
compiled () {
mounted () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};

64
src/components/date-picker/picker.vue
View file

@ -2,7 +2,7 @@
<div
:class="[prefixCls]"
v-clickoutside="handleClose">
<div v-el:reference :class="[prefixCls + '-rel']">
<div ref="reference" :class="[prefixCls + '-rel']">
<slot>
<i-input
:class="[prefixCls + '-editor']"
@ -11,17 +11,19 @@
:size="size"
:placeholder="placeholder"
:value="visualValue"
@on-change="handleInputChange"
@on-input-change="handleInputChange"
@on-focus="handleFocus"
@on-click="handleIconClick"
@mouseenter="handleInputMouseenter"
@mouseleave="handleInputMouseleave"
@mouseenter.native="handleInputMouseenter"
@mouseleave.native="handleInputMouseleave"
:icon="iconType"></i-input>
</slot>
</div>
<Drop v-show="opened" :placement="placement" :transition="transition" v-ref:drop>
<div v-el:picker></div>
</Drop>
<transition :name="transition">
<Drop v-show="opened" :placement="placement" ref="drop">
<div ref="picker"></div>
</Drop>
</transition>
</div>
</template>
<script>
@ -192,7 +194,8 @@
visible: false,
picker: null,
internalValue: '',
disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
currentValue: this.value
};
},
computed: {
@ -358,21 +361,23 @@
handleClear () {
this.visible = false;
this.internalValue = '';
this.value = '';
this.currentValue = '';
this.$emit('on-clear');
this.$dispatch('on-form-change', '');
// todo 事件
// this.$dispatch('on-form-change', '');
},
showPicker () {
if (!this.picker) {
let isConfirm = this.confirm;
const type = this.type;
this.picker = new Vue(this.panel).$mount(this.$els.picker);
this.picker = new Vue(this.panel).$mount(this.$refs.picker);
if (type === 'datetime' || type === 'datetimerange') {
this.confirm = true;
isConfirm = true;
this.picker.showTime = true;
}
this.picker.value = this.internalValue;
this.picker.confirm = this.confirm;
this.picker.confirm = isConfirm;
this.picker.selectionMode = this.selectionMode;
if (this.format) this.picker.format = this.format;
@ -388,8 +393,8 @@
}
this.picker.$on('on-pick', (date, visible = false) => {
if (!this.confirm) this.visible = visible;
this.value = date;
if (!isConfirm) this.visible = visible;
this.currentValue = date;
this.picker.value = date;
this.picker.resetView && this.picker.resetView();
this.emitChange(date);
@ -425,7 +430,8 @@
}
this.$emit('on-change', newDate);
this.$dispatch('on-form-change', newDate);
// todo 事件
// this.$dispatch('on-form-change', newDate);
}
},
watch: {
@ -444,8 +450,12 @@
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
this.$emit('input', val);
},
value: {
value (val) {
this.currentValue = val;
},
currentValue: {
immediate: true,
handler (val) {
const type = this.type;
@ -462,6 +472,7 @@
}
this.internalValue = val;
this.$emit('input', val);
}
},
open (val) {
@ -478,16 +489,17 @@
this.picker.$destroy();
}
},
ready () {
mounted () {
if (this.open !== null) this.visible = this.open;
},
events: {
'on-form-blur' () {
return false;
},
'on-form-change' () {
return false;
}
}
// todo 事件
// events: {
// 'on-form-blur' () {
// return false;
// },
// 'on-form-change' () {
// return false;
// }
// }
};
</script>

6
src/components/date-picker/picker/date-picker.js
View file

@ -23,11 +23,11 @@ export default {
value: {}
},
created () {
if (!this.value) {
if (!this.currentValue) {
if (this.type === 'daterange' || this.type === 'datetimerange') {
this.value = ['',''];
this.currentValue = ['',''];
} else {
this.value = '';
this.currentValue = '';
}
}

6
src/components/date-picker/picker/time-picker.js
View file

@ -24,11 +24,11 @@ export default {
value: {}
},
created () {
if (!this.value) {
if (!this.currentValue) {
if (this.type === 'timerange') {
this.value = ['',''];
this.currentValue = ['',''];
} else {
this.value = '';
this.currentValue = '';
}
}
this.panel = getPanel(this.type);

13
src/components/form/form-item.vue
View file

@ -3,7 +3,9 @@
<label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label"><slot name="label">{{ label }}</slot></label>
<div :class="[prefixCls + '-content']" :style="contentStyles">
<slot></slot>
<div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
<transition name="fade">
<div :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
</transition>
</div>
</div>
</template>
@ -11,6 +13,7 @@
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
import AsyncValidator from 'async-validator';
import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-form-item';
@ -38,6 +41,8 @@
}
export default {
name: 'FormItem',
mixins: [ Emitter ],
props: {
label: {
type: String,
@ -206,9 +211,9 @@
this.validate('change');
}
},
ready () {
mounted () {
if (this.prop) {
this.$dispatch('on-form-item-add', this);
this.dispatch('iForm', 'on-form-item-add', this);
Object.defineProperty(this, 'initialValue', {
value: this.fieldValue
@ -229,7 +234,7 @@
}
},
beforeDestroy () {
this.$dispatch('on-form-item-remove', this);
this.dispatch('iForm', 'on-form-item-remove', this);
}
};
</script>

10
src/components/form/form.vue
View file

@ -82,15 +82,15 @@
this.validate();
}
},
events: {
'on-form-item-add' (field) {
created () {
this.$on('on-form-item-add', (field) => {
if (field) this.fields.push(field);
return false;
},
'on-form-item-remove' (field) {
});
this.$on('on-form-item-remove', (field) => {
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
return false;
}
});
}
};
</script>

6
src/components/input/input.vue
View file

@ -19,7 +19,8 @@
@keyup.enter="handleEnter"
@focus="handleFocus"
@blur="handleBlur"
@input="handleInput">
@input="handleInput"
@change="handleChange">
<div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady" ref="append"><slot name="append"></slot></div>
</template>
<textarea
@ -158,6 +159,9 @@
this.setCurrentValue(value);
this.$emit('on-change', event);
},
handleChange (event) {
this.$emit('on-input-change', event);
},
setCurrentValue (value) {
if (value === this.currentValue) return;
this.$nextTick(() => {