cy-element-ui 1.0.0

package/packages/date-picker/src/panel/time.vue

@@ -0,0 +1,186 @@
+<template>
+	<transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+		<div
+			v-show="visible"
+			class="el-time-panel el-popper"
+			:class="popperClass">
+			<div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
+				<time-spinner
+					ref="spinner"
+					@change="handleChange"
+					:arrow-control="useArrow"
+					:show-seconds="showSeconds"
+					:am-pm-mode="amPmMode"
+					@select-range="setSelectionRange"
+					:date="date">
+				</time-spinner>
+			</div>
+			<div class="el-time-panel__footer">
+				<button
+					type="button"
+					class="el-time-panel__btn cancel"
+					@click="handleCancel">{{ t('el.datepicker.cancel') }}</button>
+				<button
+					type="button"
+					class="el-time-panel__btn"
+					:class="{confirm: !disabled}"
+					@click="handleConfirm()">{{ t('el.datepicker.confirm') }}</button>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script type="text/babel">
+	import { limitTimeRange, isDate, clearMilliseconds, timeWithinRange } from 'element-ui/src/utils/date-util';
+	import Locale from 'element-ui/src/mixins/locale';
+	import TimeSpinner from '../basic/time-spinner';
+
+	export default {
+		mixins: [Locale],
+
+		components: {
+			TimeSpinner
+		},
+
+		props: {
+			visible: Boolean,
+			timeArrowControl: Boolean
+		},
+
+		watch: {
+			visible(val) {
+				if (val) {
+					this.oldValue = this.value;
+					this.$nextTick(() => this.$refs.spinner.emitSelectRange('hours'));
+				} else {
+					this.needInitAdjust = true;
+				}
+			},
+
+			value(newVal) {
+				let date;
+				if (newVal instanceof Date) {
+					date = limitTimeRange(newVal, this.selectableRange, this.format);
+				} else if (!newVal) {
+					date = this.defaultValue ? new Date(this.defaultValue) : new Date();
+				}
+
+				this.date = date;
+				if (this.visible && this.needInitAdjust) {
+					this.$nextTick(_ => this.adjustSpinners());
+					this.needInitAdjust = false;
+				}
+			},
+
+			selectableRange(val) {
+				this.$refs.spinner.selectableRange = val;
+			},
+
+			defaultValue(val) {
+				if (!isDate(this.value)) {
+					this.date = val ? new Date(val) : new Date();
+				}
+			}
+		},
+
+		data() {
+			return {
+				popperClass: '',
+				format: 'HH:mm:ss',
+				value: '',
+				defaultValue: null,
+				date: new Date(),
+				oldValue: new Date(),
+				selectableRange: [],
+				selectionRange: [0, 2],
+				disabled: false,
+				arrowControl: false,
+				needInitAdjust: true
+			};
+		},
+
+		computed: {
+			showSeconds() {
+				return (this.format || '').indexOf('ss') !== -1;
+			},
+			useArrow() {
+				return this.arrowControl || this.timeArrowControl || false;
+			},
+			amPmMode() {
+				if ((this.format || '').indexOf('A') !== -1) return 'A';
+				if ((this.format || '').indexOf('a') !== -1) return 'a';
+				return '';
+			}
+		},
+
+		methods: {
+			handleCancel() {
+				this.$emit('pick', this.oldValue, false);
+			},
+
+			handleChange(date) {
+				// this.visible avoids edge cases, when use scrolls during panel closing animation
+				if (this.visible) {
+					this.date = clearMilliseconds(date);
+					// if date is out of range, do not emit
+					if (this.isValidValue(this.date)) {
+						this.$emit('pick', this.date, true);
+					}
+				}
+			},
+
+			setSelectionRange(start, end) {
+				this.$emit('select-range', start, end);
+				this.selectionRange = [start, end];
+			},
+
+			handleConfirm(visible = false, first) {
+				if (first) return;
+				const date = clearMilliseconds(limitTimeRange(this.date, this.selectableRange, this.format));
+				this.$emit('pick', date, visible, first);
+			},
+
+			handleKeydown(event) {
+				const keyCode = event.keyCode;
+				const mapping = { 38: -1, 40: 1, 37: -1, 39: 1 };
+
+				// Left or Right
+				if (keyCode === 37 || keyCode === 39) {
+					const step = mapping[keyCode];
+					this.changeSelectionRange(step);
+					event.preventDefault();
+					return;
+				}
+
+				// Up or Down
+				if (keyCode === 38 || keyCode === 40) {
+					const step = mapping[keyCode];
+					this.$refs.spinner.scrollDown(step);
+					event.preventDefault();
+					return;
+				}
+			},
+
+			isValidValue(date) {
+				return timeWithinRange(date, this.selectableRange, this.format);
+			},
+
+			adjustSpinners() {
+				return this.$refs.spinner.adjustSpinners();
+			},
+
+			changeSelectionRange(step) {
+				const list = [0, 3].concat(this.showSeconds ? [6] : []);
+				const mapping = ['hours', 'minutes'].concat(this.showSeconds ? ['seconds'] : []);
+				const index = list.indexOf(this.selectionRange[0]);
+				const next = (index + step + list.length) % list.length;
+				this.$refs.spinner.emitSelectRange(mapping[next]);
+			}
+		},
+
+		mounted() {
+			this.$nextTick(() => this.handleConfirm(true, true));
+			this.$emit('mounted');
+		}
+	};
+</script>

package/packages/date-picker/src/picker/date-picker.js

@@ -0,0 +1,43 @@
+import Picker from '../picker';
+import DatePanel from '../panel/date';
+import DateRangePanel from '../panel/date-range';
+import MonthRangePanel from '../panel/month-range';
+
+const getPanel = function(type) {
+	if (type === 'daterange' || type === 'datetimerange') {
+		return DateRangePanel;
+	} else if (type === 'monthrange') {
+		return MonthRangePanel;
+	}
+	return DatePanel;
+};
+
+export default {
+	mixins: [Picker],
+
+	name: 'ElDatePicker',
+
+	props: {
+		type: {
+			type: String,
+			default: 'date'
+		},
+		timeArrowControl: Boolean
+	},
+
+	watch: {
+		type(type) {
+			if (this.picker) {
+				this.unmountPicker();
+				this.panel = getPanel(type);
+				this.mountPicker();
+			} else {
+				this.panel = getPanel(type);
+			}
+		}
+	},
+
+	created() {
+		this.panel = getPanel(this.type);
+	}
+};

package/packages/date-picker/src/picker/time-picker.js

@@ -0,0 +1,39 @@
+import Picker from '../picker';
+import TimePanel from '../panel/time';
+import TimeRangePanel from '../panel/time-range';
+
+export default {
+	mixins: [Picker],
+
+	name: 'ElTimePicker',
+
+	props: {
+		isRange: Boolean,
+		arrowControl: Boolean
+	},
+
+	data() {
+		return {
+			type: ''
+		};
+	},
+
+	watch: {
+		isRange(isRange) {
+			if (this.picker) {
+				this.unmountPicker();
+				this.type = isRange ? 'timerange' : 'time';
+				this.panel = isRange ? TimeRangePanel : TimePanel;
+				this.mountPicker();
+			} else {
+				this.type = isRange ? 'timerange' : 'time';
+				this.panel = isRange ? TimeRangePanel : TimePanel;
+			}
+		}
+	},
+
+	created() {
+		this.type = this.isRange ? 'timerange' : 'time';
+		this.panel = this.isRange ? TimeRangePanel : TimePanel;
+	}
+};

package/packages/date-picker/src/picker/time-select.js

@@ -0,0 +1,21 @@
+import Picker from '../picker';
+import Panel from '../panel/time-select';
+
+export default {
+	mixins: [Picker],
+
+	name: 'ElTimeSelect',
+
+	componentName: 'ElTimeSelect',
+
+	props: {
+		type: {
+			type: String,
+			default: 'time-select'
+		}
+	},
+
+	beforeCreate() {
+		this.panel = Panel;
+	}
+};