// Components import VTimePickerTitle from './VTimePickerTitle'; import VTimePickerClock from './VTimePickerClock'; // Mixins import Picker from '../../mixins/picker'; import PickerButton from '../../mixins/picker-button'; // Utils import { createRange } from '../../util/helpers'; import pad from '../VDatePicker/util/pad'; import mixins from '../../util/mixins'; const rangeHours24 = createRange(24); const rangeHours12am = createRange(12); const rangeHours12pm = rangeHours12am.map(v => v + 12); const range60 = createRange(60); var SelectingTimes; (function (SelectingTimes) { SelectingTimes[SelectingTimes["Hour"] = 1] = "Hour"; SelectingTimes[SelectingTimes["Minute"] = 2] = "Minute"; SelectingTimes[SelectingTimes["Second"] = 3] = "Second"; })(SelectingTimes || (SelectingTimes = {})); const selectingNames = { 1: 'hour', 2: 'minute', 3: 'second' }; export { SelectingTimes }; export default mixins(Picker, PickerButton /* @vue/component */ ).extend({ name: 'v-time-picker', props: { allowedHours: { type: [Function, Array] }, allowedMinutes: { type: [Function, Array] }, allowedSeconds: { type: [Function, Array] }, disabled: Boolean, format: { type: String, default: 'ampm', validator(val) { return ['ampm', '24hr'].includes(val); } }, min: String, max: String, readonly: Boolean, scrollable: Boolean, useSeconds: Boolean, value: null, ampmInTitle: Boolean }, data() { return { inputHour: null, inputMinute: null, inputSecond: null, lazyInputHour: null, lazyInputMinute: null, lazyInputSecond: null, period: 'am', selecting: SelectingTimes.Hour }; }, computed: { selectingHour: { get() { return this.selecting === SelectingTimes.Hour; }, set(v) { this.selecting = SelectingTimes.Hour; } }, selectingMinute: { get() { return this.selecting === SelectingTimes.Minute; }, set(v) { this.selecting = SelectingTimes.Minute; } }, selectingSecond: { get() { return this.selecting === SelectingTimes.Second; }, set(v) { this.selecting = SelectingTimes.Second; } }, isAllowedHourCb() { let cb; if (this.allowedHours instanceof Array) { cb = val => this.allowedHours.includes(val); } else { cb = this.allowedHours; } if (!this.min && !this.max) return cb; const minHour = this.min ? Number(this.min.split(':')[0]) : 0; const maxHour = this.max ? Number(this.max.split(':')[0]) : 23; return val => { return val >= minHour * 1 && val <= maxHour * 1 && (!cb || cb(val)); }; }, isAllowedMinuteCb() { let cb; const isHourAllowed = !this.isAllowedHourCb || this.inputHour === null || this.isAllowedHourCb(this.inputHour); if (this.allowedMinutes instanceof Array) { cb = val => this.allowedMinutes.includes(val); } else { cb = this.allowedMinutes; } if (!this.min && !this.max) { return isHourAllowed ? cb : () => false; } const [minHour, minMinute] = this.min ? this.min.split(':').map(Number) : [0, 0]; const [maxHour, maxMinute] = this.max ? this.max.split(':').map(Number) : [23, 59]; const minTime = minHour * 60 + minMinute * 1; const maxTime = maxHour * 60 + maxMinute * 1; return val => { const time = 60 * this.inputHour + val; return time >= minTime && time <= maxTime && isHourAllowed && (!cb || cb(val)); }; }, isAllowedSecondCb() { let cb; const isHourAllowed = !this.isAllowedHourCb || this.inputHour === null || this.isAllowedHourCb(this.inputHour); const isMinuteAllowed = isHourAllowed && (!this.isAllowedMinuteCb || this.inputMinute === null || this.isAllowedMinuteCb(this.inputMinute)); if (this.allowedSeconds instanceof Array) { cb = val => this.allowedSeconds.includes(val); } else { cb = this.allowedSeconds; } if (!this.min && !this.max) { return isMinuteAllowed ? cb : () => false; } const [minHour, minMinute, minSecond] = this.min ? this.min.split(':').map(Number) : [0, 0, 0]; const [maxHour, maxMinute, maxSecond] = this.max ? this.max.split(':').map(Number) : [23, 59, 59]; const minTime = minHour * 3600 + minMinute * 60 + (minSecond || 0) * 1; const maxTime = maxHour * 3600 + maxMinute * 60 + (maxSecond || 0) * 1; return val => { const time = 3600 * this.inputHour + 60 * this.inputMinute + val; return time >= minTime && time <= maxTime && isMinuteAllowed && (!cb || cb(val)); }; }, isAmPm() { return this.format === 'ampm'; } }, watch: { value: 'setInputData' }, mounted() { this.setInputData(this.value); this.$on('update:period', this.setPeriod); }, methods: { genValue() { if (this.inputHour != null && this.inputMinute != null && (!this.useSeconds || this.inputSecond != null)) { return `${pad(this.inputHour)}:${pad(this.inputMinute)}` + (this.useSeconds ? `:${pad(this.inputSecond)}` : ''); } return null; }, emitValue() { const value = this.genValue(); if (value !== null) this.$emit('input', value); }, setPeriod(period) { this.period = period; if (this.inputHour != null) { const newHour = this.inputHour + (period === 'am' ? -12 : 12); this.inputHour = this.firstAllowed('hour', newHour); this.emitValue(); } }, setInputData(value) { if (value == null || value === '') { this.inputHour = null; this.inputMinute = null; this.inputSecond = null; } else if (value instanceof Date) { this.inputHour = value.getHours(); this.inputMinute = value.getMinutes(); this.inputSecond = value.getSeconds(); } else { const [, hour, minute,, second, period] = value.trim().toLowerCase().match(/^(\d+):(\d+)(:(\d+))?([ap]m)?$/) || new Array(6); this.inputHour = period ? this.convert12to24(parseInt(hour, 10), period) : parseInt(hour, 10); this.inputMinute = parseInt(minute, 10); this.inputSecond = parseInt(second || 0, 10); } this.period = this.inputHour == null || this.inputHour < 12 ? 'am' : 'pm'; }, convert24to12(hour) { return hour ? (hour - 1) % 12 + 1 : 12; }, convert12to24(hour, period) { return hour % 12 + (period === 'pm' ? 12 : 0); }, onInput(value) { if (this.selecting === SelectingTimes.Hour) { this.inputHour = this.isAmPm ? this.convert12to24(value, this.period) : value; } else if (this.selecting === SelectingTimes.Minute) { this.inputMinute = value; } else { this.inputSecond = value; } this.emitValue(); }, onChange(value) { this.$emit(`click:${selectingNames[this.selecting]}`, value); const emitChange = this.selecting === (this.useSeconds ? SelectingTimes.Second : SelectingTimes.Minute); if (this.selecting === SelectingTimes.Hour) { this.selecting = SelectingTimes.Minute; } else if (this.useSeconds && this.selecting === SelectingTimes.Minute) { this.selecting = SelectingTimes.Second; } if (this.inputHour === this.lazyInputHour && this.inputMinute === this.lazyInputMinute && (!this.useSeconds || this.inputSecond === this.lazyInputSecond)) return; const time = this.genValue(); if (time === null) return; this.lazyInputHour = this.inputHour; this.lazyInputMinute = this.inputMinute; this.useSeconds && (this.lazyInputSecond = this.inputSecond); emitChange && this.$emit('change', time); }, firstAllowed(type, value) { const allowedFn = type === 'hour' ? this.isAllowedHourCb : type === 'minute' ? this.isAllowedMinuteCb : this.isAllowedSecondCb; if (!allowedFn) return value; // TODO: clean up const range = type === 'minute' ? range60 : type === 'second' ? range60 : this.isAmPm ? value < 12 ? rangeHours12am : rangeHours12pm : rangeHours24; const first = range.find(v => allowedFn((v + value) % range.length + range[0])); return ((first || 0) + value) % range.length + range[0]; }, genClock() { return this.$createElement(VTimePickerClock, { props: { allowedValues: this.selecting === SelectingTimes.Hour ? this.isAllowedHourCb : this.selecting === SelectingTimes.Minute ? this.isAllowedMinuteCb : this.isAllowedSecondCb, color: this.color, dark: this.dark, disabled: this.disabled, double: this.selecting === SelectingTimes.Hour && !this.isAmPm, format: this.selecting === SelectingTimes.Hour ? this.isAmPm ? this.convert24to12 : val => val : val => pad(val, 2), light: this.light, max: this.selecting === SelectingTimes.Hour ? this.isAmPm && this.period === 'am' ? 11 : 23 : 59, min: this.selecting === SelectingTimes.Hour && this.isAmPm && this.period === 'pm' ? 12 : 0, readonly: this.readonly, scrollable: this.scrollable, size: Number(this.width) - (!this.fullWidth && this.landscape ? 80 : 20), step: this.selecting === SelectingTimes.Hour ? 1 : 5, value: this.selecting === SelectingTimes.Hour ? this.inputHour : this.selecting === SelectingTimes.Minute ? this.inputMinute : this.inputSecond }, on: { input: this.onInput, change: this.onChange }, ref: 'clock' }); }, genClockAmPm() { return this.$createElement('div', this.setTextColor(this.color || 'primary', { staticClass: 'v-time-picker-clock__ampm' }), [this.genPickerButton('period', 'am', 'AM', this.disabled || this.readonly), this.genPickerButton('period', 'pm', 'PM', this.disabled || this.readonly)]); }, genPickerBody() { return this.$createElement('div', { staticClass: 'v-time-picker-clock__container', key: this.selecting }, [!this.ampmInTitle && this.isAmPm && this.genClockAmPm(), this.genClock()]); }, genPickerTitle() { return this.$createElement(VTimePickerTitle, { props: { ampm: this.ampmInTitle && this.isAmPm, disabled: this.disabled, hour: this.inputHour, minute: this.inputMinute, second: this.inputSecond, period: this.period, readonly: this.readonly, useSeconds: this.useSeconds, selecting: this.selecting }, on: { 'update:selecting': value => this.selecting = value, 'update:period': this.setPeriod }, ref: 'title', slot: 'title' }); } }, render() { return this.genPicker('v-picker--time'); } }); //# sourceMappingURL=VTimePicker.js.map