1579 lines
56 KiB
JavaScript
1579 lines
56 KiB
JavaScript
'use strict'
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true })
|
|
|
|
const vue = require('vue')
|
|
const dayjs = require('dayjs')
|
|
const customParseFormat = require('dayjs/plugin/customParseFormat')
|
|
const directives = require('element-plus/lib/directives')
|
|
const ElInput = require('element-plus/lib/el-input')
|
|
const ElPopper = require('element-plus/lib/el-popper')
|
|
const aria = require('element-plus/lib/utils/aria')
|
|
const util = require('element-plus/lib/utils/util')
|
|
const form = require('element-plus/lib/el-form')
|
|
const validators = require('element-plus/lib/utils/validators')
|
|
const locale = require('element-plus/lib/locale')
|
|
const debounce = require('lodash/debounce')
|
|
const ElScrollbar = require('element-plus/lib/el-scrollbar')
|
|
const union = require('lodash/union')
|
|
const utc = require('dayjs/plugin/utc')
|
|
const timezone = require('dayjs/plugin/timezone')
|
|
const advancedFormat = require('dayjs/plugin/advancedFormat')
|
|
const weekday = require('dayjs/plugin/weekday')
|
|
dayjs.extend(utc)
|
|
dayjs.extend(timezone)
|
|
dayjs.extend(advancedFormat)
|
|
dayjs.extend(weekday)
|
|
window.$dayJs = dayjs
|
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e } }
|
|
|
|
const dayjs__default = /* #__PURE__ */_interopDefaultLegacy(window.$dayJs)
|
|
const customParseFormat__default = /* #__PURE__ */_interopDefaultLegacy(customParseFormat)
|
|
const ElInput__default = /* #__PURE__ */_interopDefaultLegacy(ElInput)
|
|
const ElPopper__default = /* #__PURE__ */_interopDefaultLegacy(ElPopper)
|
|
const debounce__default = /* #__PURE__ */_interopDefaultLegacy(debounce)
|
|
const ElScrollbar__default = /* #__PURE__ */_interopDefaultLegacy(ElScrollbar)
|
|
const union__default = /* #__PURE__ */_interopDefaultLegacy(union)
|
|
|
|
const DEFAULT_FORMATS_TIME = 'HH:mm:ss'
|
|
const DEFAULT_FORMATS_DATE = 'YYYY-MM-DD'
|
|
const DEFAULT_FORMATS_DATEPICKER = {
|
|
date: DEFAULT_FORMATS_DATE,
|
|
week: 'gggg[w]ww',
|
|
year: 'YYYY',
|
|
month: 'YYYY-MM',
|
|
datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
|
|
monthrange: 'YYYY-MM',
|
|
daterange: DEFAULT_FORMATS_DATE,
|
|
datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`
|
|
}
|
|
|
|
const defaultProps = {
|
|
name: {
|
|
type: [Array, String],
|
|
default: ''
|
|
},
|
|
popperClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
clearIcon: {
|
|
type: String,
|
|
default: 'el-icon-circle-close'
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
prefixIcon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
size: {
|
|
type: String,
|
|
validator: validators.isValidComponentSize
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
popperOptions: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
modelValue: {
|
|
type: [Date, Array, String],
|
|
default: ''
|
|
},
|
|
rangeSeparator: {
|
|
type: String,
|
|
default: '-'
|
|
},
|
|
startPlaceholder: String,
|
|
endPlaceholder: String,
|
|
defaultValue: {
|
|
type: [Date, Array]
|
|
},
|
|
defaultTime: {
|
|
type: [Date, Array]
|
|
},
|
|
isRange: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabledHours: {
|
|
type: Function
|
|
},
|
|
disabledMinutes: {
|
|
type: Function
|
|
},
|
|
disabledSeconds: {
|
|
type: Function
|
|
},
|
|
disabledDate: {
|
|
type: Function
|
|
},
|
|
cellClassName: {
|
|
type: Function
|
|
},
|
|
shortcuts: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
arrowControl: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
validateEvent: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
unlinkPanels: Boolean
|
|
}
|
|
|
|
const dateEquals = function (a, b) {
|
|
const aIsDate = a instanceof Date
|
|
const bIsDate = b instanceof Date
|
|
if (aIsDate && bIsDate) {
|
|
return a.getTime() === b.getTime()
|
|
}
|
|
if (!aIsDate && !bIsDate) {
|
|
return a === b
|
|
}
|
|
return false
|
|
}
|
|
const valueEquals = function (a, b) {
|
|
const aIsArray = a instanceof Array
|
|
const bIsArray = b instanceof Array
|
|
if (aIsArray && bIsArray) {
|
|
if (a.length !== b.length) {
|
|
return false
|
|
}
|
|
return a.every((item, index) => dateEquals(item, b[index]))
|
|
}
|
|
if (!aIsArray && !bIsArray) {
|
|
return dateEquals(a, b)
|
|
}
|
|
return false
|
|
}
|
|
const script = vue.defineComponent({
|
|
name: 'Picker',
|
|
components: {
|
|
ElInput: ElInput__default.default,
|
|
ElPopper: ElPopper__default.default
|
|
},
|
|
directives: { clickoutside: directives.ClickOutside },
|
|
props: defaultProps,
|
|
emits: ['update:modelValue', 'change', 'focus', 'blur'],
|
|
setup (props, ctx) {
|
|
const ELEMENT = util.useGlobalConfig()
|
|
const elForm = vue.inject(form.elFormKey, {})
|
|
const elFormItem = vue.inject(form.elFormItemKey, {})
|
|
const elPopperOptions = vue.inject('ElPopperOptions', {})
|
|
const refPopper = vue.ref(null)
|
|
const pickerVisible = vue.ref(false)
|
|
const pickerActualVisible = vue.ref(false)
|
|
const valueOnOpen = vue.ref(null)
|
|
vue.watch(pickerVisible, val => {
|
|
let _a
|
|
if (!val) {
|
|
userInput.value = null
|
|
vue.nextTick(() => {
|
|
emitChange(props.modelValue)
|
|
})
|
|
ctx.emit('blur')
|
|
blurInput()
|
|
props.validateEvent && ((_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.blur'))
|
|
} else {
|
|
valueOnOpen.value = props.modelValue
|
|
}
|
|
})
|
|
const emitChange = (val, isClear) => {
|
|
let _a
|
|
if (isClear || !valueEquals(val, valueOnOpen.value)) {
|
|
ctx.emit('change', val)
|
|
props.validateEvent && ((_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.change', val))
|
|
}
|
|
}
|
|
const emitInput = val => {
|
|
if (!valueEquals(props.modelValue, val)) {
|
|
ctx.emit('update:modelValue', val)
|
|
}
|
|
}
|
|
const refInput = vue.computed(() => {
|
|
if (refPopper.value.triggerRef) {
|
|
const _r = isRangeInput.value ? refPopper.value.triggerRef : refPopper.value.triggerRef.$el
|
|
return [].slice.call(_r.querySelectorAll('input'))
|
|
}
|
|
return []
|
|
})
|
|
const setSelectionRange = (start, end, pos) => {
|
|
const _inputs = refInput.value
|
|
if (!_inputs.length) { return }
|
|
if (!pos || pos === 'min') {
|
|
_inputs[0].setSelectionRange(start, end)
|
|
_inputs[0].focus()
|
|
} else if (pos === 'max') {
|
|
_inputs[1].setSelectionRange(start, end)
|
|
_inputs[1].focus()
|
|
}
|
|
}
|
|
const onPick = (date = '', visible = false) => {
|
|
pickerVisible.value = visible
|
|
let result
|
|
if (Array.isArray(date)) {
|
|
result = date.map(_ => _.toDate())
|
|
} else {
|
|
result = date ? date.toDate() : date
|
|
}
|
|
userInput.value = null
|
|
emitInput(result)
|
|
}
|
|
const handleFocus = e => {
|
|
if (props.readonly || pickerDisabled.value) { return }
|
|
pickerVisible.value = true
|
|
ctx.emit('focus', e)
|
|
}
|
|
const pickerDisabled = vue.computed(() => {
|
|
return props.disabled || elForm.disabled
|
|
})
|
|
const parsedValue = vue.computed(() => {
|
|
let result
|
|
if (valueIsEmpty.value) {
|
|
if (pickerOptions.value.getDefaultValue) {
|
|
result = pickerOptions.value.getDefaultValue()
|
|
}
|
|
} else {
|
|
if (Array.isArray(props.modelValue)) {
|
|
result = props.modelValue.map(_ => dayjs__default.default.tz(_))
|
|
} else {
|
|
result = dayjs__default.default.tz(props.modelValue)
|
|
}
|
|
}
|
|
if (pickerOptions.value.getRangeAvaliableTime) {
|
|
result = pickerOptions.value.getRangeAvaliableTime(result)
|
|
}
|
|
return result
|
|
})
|
|
const displayValue = vue.computed(() => {
|
|
if (!pickerOptions.value.panelReady) { return }
|
|
const formattedValue = formatDayjsToString(parsedValue.value)
|
|
if (Array.isArray(userInput.value)) {
|
|
return [
|
|
userInput.value[0] || (formattedValue && formattedValue[0]) || '',
|
|
userInput.value[1] || (formattedValue && formattedValue[1]) || ''
|
|
]
|
|
} else if (userInput.value !== null) {
|
|
return userInput.value
|
|
}
|
|
if (!isTimePicker.value && valueIsEmpty.value) { return }
|
|
if (!pickerVisible.value && valueIsEmpty.value) { return }
|
|
if (formattedValue) {
|
|
return isDatesPicker.value
|
|
? formattedValue.join(', ')
|
|
: formattedValue
|
|
}
|
|
return ''
|
|
})
|
|
const isTimeLikePicker = vue.computed(() => {
|
|
return props.type.indexOf('time') !== -1
|
|
})
|
|
const isTimePicker = vue.computed(() => {
|
|
return props.type.indexOf('time') === 0
|
|
})
|
|
const isDatesPicker = vue.computed(() => {
|
|
return props.type === 'dates'
|
|
})
|
|
const triggerClass = vue.computed(() => {
|
|
return props.prefixIcon || (isTimeLikePicker.value ? 'el-icon-time' : 'el-icon-date')
|
|
})
|
|
const showClose = vue.ref(false)
|
|
const onClearIconClick = event => {
|
|
if (props.readonly || pickerDisabled.value) { return }
|
|
if (showClose.value) {
|
|
event.stopPropagation()
|
|
emitInput(null)
|
|
emitChange(null, true)
|
|
showClose.value = false
|
|
pickerVisible.value = false
|
|
pickerOptions.value.handleClear && pickerOptions.value.handleClear()
|
|
}
|
|
}
|
|
const valueIsEmpty = vue.computed(() => {
|
|
return !props.modelValue || (Array.isArray(props.modelValue) && !props.modelValue.length)
|
|
})
|
|
const onMouseEnter = () => {
|
|
if (props.readonly || pickerDisabled.value) { return }
|
|
if (!valueIsEmpty.value && props.clearable) {
|
|
showClose.value = true
|
|
}
|
|
}
|
|
const onMouseLeave = () => {
|
|
showClose.value = false
|
|
}
|
|
const isRangeInput = vue.computed(() => {
|
|
return props.type.indexOf('range') > -1
|
|
})
|
|
const pickerSize = vue.computed(() => {
|
|
return props.size || elFormItem.size || ELEMENT.size
|
|
})
|
|
const popperPaneRef = vue.computed(() => {
|
|
let _a
|
|
return (_a = refPopper.value) === null || _a === void 0 ? void 0 : _a.popperRef
|
|
})
|
|
const onClickOutside = () => {
|
|
if (!pickerVisible.value) { return }
|
|
pickerVisible.value = false
|
|
}
|
|
const userInput = vue.ref(null)
|
|
const handleChange = () => {
|
|
if (userInput.value) {
|
|
const value = parseUserInputToDayjs(displayValue.value)
|
|
if (value) {
|
|
if (isValidValue(value)) {
|
|
emitInput(Array.isArray(value) ? value.map(_ => _.toDate()) : value.toDate())
|
|
userInput.value = null
|
|
}
|
|
}
|
|
}
|
|
if (userInput.value === '') {
|
|
emitInput(null)
|
|
emitChange(null)
|
|
userInput.value = null
|
|
}
|
|
}
|
|
const blurInput = () => {
|
|
refInput.value.forEach(input => input.blur())
|
|
}
|
|
const parseUserInputToDayjs = value => {
|
|
if (!value) { return null }
|
|
return pickerOptions.value.parseUserInput(value)
|
|
}
|
|
const formatDayjsToString = value => {
|
|
if (!value) { return null }
|
|
return pickerOptions.value.formatToString(value)
|
|
}
|
|
const isValidValue = value => {
|
|
return pickerOptions.value.isValidValue(value)
|
|
}
|
|
const handleKeydown = event => {
|
|
const code = event.code
|
|
if (code === aria.EVENT_CODE.esc) {
|
|
pickerVisible.value = false
|
|
event.stopPropagation()
|
|
return
|
|
}
|
|
if (code === aria.EVENT_CODE.tab) {
|
|
if (!isRangeInput.value) {
|
|
handleChange()
|
|
pickerVisible.value = false
|
|
event.stopPropagation()
|
|
} else {
|
|
setTimeout(() => {
|
|
if (refInput.value.indexOf(document.activeElement) === -1) {
|
|
pickerVisible.value = false
|
|
blurInput()
|
|
}
|
|
}, 0)
|
|
}
|
|
return
|
|
}
|
|
if (code === aria.EVENT_CODE.enter) {
|
|
if (userInput.value === '' || isValidValue(parseUserInputToDayjs(displayValue.value))) {
|
|
handleChange()
|
|
pickerVisible.value = false
|
|
}
|
|
event.stopPropagation()
|
|
return
|
|
}
|
|
if (userInput.value) {
|
|
event.stopPropagation()
|
|
return
|
|
}
|
|
if (pickerOptions.value.handleKeydown) {
|
|
pickerOptions.value.handleKeydown(event)
|
|
}
|
|
}
|
|
const onUserInput = e => {
|
|
userInput.value = e
|
|
}
|
|
const handleStartInput = event => {
|
|
if (userInput.value) {
|
|
userInput.value = [event.target.value, userInput.value[1]]
|
|
} else {
|
|
userInput.value = [event.target.value, null]
|
|
}
|
|
}
|
|
const handleEndInput = event => {
|
|
if (userInput.value) {
|
|
userInput.value = [userInput.value[0], event.target.value]
|
|
} else {
|
|
userInput.value = [null, event.target.value]
|
|
}
|
|
}
|
|
const handleStartChange = () => {
|
|
const value = parseUserInputToDayjs(userInput.value && userInput.value[0])
|
|
if (value && value.isValid()) {
|
|
userInput.value = [formatDayjsToString(value), displayValue.value[1]]
|
|
const newValue = [value, parsedValue.value && parsedValue.value[1]]
|
|
if (isValidValue(newValue)) {
|
|
emitInput(newValue)
|
|
userInput.value = null
|
|
}
|
|
}
|
|
}
|
|
const handleEndChange = () => {
|
|
const value = parseUserInputToDayjs(userInput.value && userInput.value[1])
|
|
if (value && value.isValid()) {
|
|
userInput.value = [displayValue.value[0], formatDayjsToString(value)]
|
|
const newValue = [parsedValue.value && parsedValue.value[0], value]
|
|
if (isValidValue(newValue)) {
|
|
emitInput(newValue)
|
|
userInput.value = null
|
|
}
|
|
}
|
|
}
|
|
const pickerOptions = vue.ref({})
|
|
const onSetPickerOption = e => {
|
|
pickerOptions.value[e[0]] = e[1]
|
|
pickerOptions.value.panelReady = true
|
|
}
|
|
vue.provide('EP_PICKER_BASE', {
|
|
props
|
|
})
|
|
return {
|
|
elPopperOptions,
|
|
isDatesPicker,
|
|
handleEndChange,
|
|
handleStartChange,
|
|
handleStartInput,
|
|
handleEndInput,
|
|
onUserInput,
|
|
handleChange,
|
|
handleKeydown,
|
|
popperPaneRef,
|
|
onClickOutside,
|
|
pickerSize,
|
|
isRangeInput,
|
|
onMouseLeave,
|
|
onMouseEnter,
|
|
onClearIconClick,
|
|
showClose,
|
|
triggerClass,
|
|
onPick,
|
|
handleFocus,
|
|
pickerVisible,
|
|
pickerActualVisible,
|
|
displayValue,
|
|
parsedValue,
|
|
setSelectionRange,
|
|
refPopper,
|
|
pickerDisabled,
|
|
onSetPickerOption
|
|
}
|
|
}
|
|
})
|
|
|
|
const _hoisted_1 = { class: 'el-range-separator' }
|
|
|
|
function render (_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_input = vue.resolveComponent('el-input')
|
|
const _component_el_popper = vue.resolveComponent('el-popper')
|
|
const _directive_clickoutside = vue.resolveDirective('clickoutside')
|
|
|
|
return (vue.openBlock(), vue.createBlock(_component_el_popper, vue.mergeProps({
|
|
ref: 'refPopper',
|
|
visible: _ctx.pickerVisible,
|
|
'onUpdate:visible': _cache[18] || (_cache[18] = $event => (_ctx.pickerVisible = $event)),
|
|
'manual-mode': '',
|
|
effect: 'light',
|
|
pure: '',
|
|
trigger: 'click'
|
|
}, _ctx.$attrs, {
|
|
'popper-class': `el-picker__popper ${_ctx.popperClass}`,
|
|
'popper-options': _ctx.elPopperOptions,
|
|
transition: 'el-zoom-in-top',
|
|
'gpu-acceleration': false,
|
|
'stop-popper-mouse-event': false,
|
|
'append-to-body': '',
|
|
onBeforeEnter: _cache[19] || (_cache[19] = $event => (_ctx.pickerActualVisible = true)),
|
|
onAfterLeave: _cache[20] || (_cache[20] = $event => (_ctx.pickerActualVisible = false))
|
|
}), {
|
|
trigger: vue.withCtx(() => [
|
|
(!_ctx.isRangeInput)
|
|
? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_input, {
|
|
key: 0,
|
|
'model-value': _ctx.displayValue,
|
|
name: _ctx.name,
|
|
size: _ctx.pickerSize,
|
|
disabled: _ctx.pickerDisabled,
|
|
placeholder: _ctx.placeholder,
|
|
class: ['el-date-editor', 'el-date-editor--' + _ctx.type],
|
|
readonly: !_ctx.editable || _ctx.readonly || _ctx.isDatesPicker || _ctx.type === 'week',
|
|
onInput: _ctx.onUserInput,
|
|
onFocus: _ctx.handleFocus,
|
|
onKeydown: _ctx.handleKeydown,
|
|
onChange: _ctx.handleChange,
|
|
onMouseenter: _ctx.onMouseEnter,
|
|
onMouseleave: _ctx.onMouseLeave
|
|
}, {
|
|
prefix: vue.withCtx(() => [
|
|
vue.createVNode('i', {
|
|
class: ['el-input__icon', _ctx.triggerClass],
|
|
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args)))
|
|
}, null, 2 /* CLASS */)
|
|
]),
|
|
suffix: vue.withCtx(() => [
|
|
vue.createVNode('i', {
|
|
class: ['el-input__icon', [_ctx.showClose ? '' + _ctx.clearIcon : '']],
|
|
onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.onClearIconClick && _ctx.onClearIconClick(...args)))
|
|
}, null, 2 /* CLASS */)
|
|
]),
|
|
_: 1 /* STABLE */
|
|
}, 8 /* PROPS */, ['model-value', 'name', 'size', 'disabled', 'placeholder', 'class', 'readonly', 'onInput', 'onFocus', 'onKeydown', 'onChange', 'onMouseenter', 'onMouseleave'])), [
|
|
[_directive_clickoutside, _ctx.onClickOutside, _ctx.popperPaneRef]
|
|
])
|
|
: vue.withDirectives((vue.openBlock(), vue.createBlock('div', {
|
|
key: 1,
|
|
class: ['el-date-editor el-range-editor el-input__inner', [
|
|
'el-date-editor--' + _ctx.type,
|
|
_ctx.pickerSize ? `el-range-editor--${_ctx.pickerSize}` : '',
|
|
_ctx.pickerDisabled ? 'is-disabled' : '',
|
|
_ctx.pickerVisible ? 'is-active' : ''
|
|
]],
|
|
onClick: _cache[10] || (_cache[10] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))),
|
|
onMouseenter: _cache[11] || (_cache[11] = (...args) => (_ctx.onMouseEnter && _ctx.onMouseEnter(...args))),
|
|
onMouseleave: _cache[12] || (_cache[12] = (...args) => (_ctx.onMouseLeave && _ctx.onMouseLeave(...args))),
|
|
onKeydown: _cache[13] || (_cache[13] = (...args) => (_ctx.handleKeydown && _ctx.handleKeydown(...args)))
|
|
}, [
|
|
vue.createVNode('i', {
|
|
class: ['el-input__icon', 'el-range__icon', _ctx.triggerClass]
|
|
}, null, 2 /* CLASS */),
|
|
vue.createVNode('input', {
|
|
autocomplete: 'off',
|
|
name: _ctx.name && _ctx.name[0],
|
|
placeholder: _ctx.startPlaceholder,
|
|
value: _ctx.displayValue && _ctx.displayValue[0],
|
|
disabled: _ctx.pickerDisabled,
|
|
readonly: !_ctx.editable || _ctx.readonly,
|
|
class: 'el-range-input',
|
|
onInput: _cache[3] || (_cache[3] = (...args) => (_ctx.handleStartInput && _ctx.handleStartInput(...args))),
|
|
onChange: _cache[4] || (_cache[4] = (...args) => (_ctx.handleStartChange && _ctx.handleStartChange(...args))),
|
|
onFocus: _cache[5] || (_cache[5] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args)))
|
|
}, null, 40 /* PROPS, HYDRATE_EVENTS */, ['name', 'placeholder', 'value', 'disabled', 'readonly']),
|
|
vue.renderSlot(_ctx.$slots, 'range-separator', {}, () => [
|
|
vue.createVNode('span', _hoisted_1, vue.toDisplayString(_ctx.rangeSeparator), 1 /* TEXT */)
|
|
]),
|
|
vue.createVNode('input', {
|
|
autocomplete: 'off',
|
|
name: _ctx.name && _ctx.name[1],
|
|
placeholder: _ctx.endPlaceholder,
|
|
value: _ctx.displayValue && _ctx.displayValue[1],
|
|
disabled: _ctx.pickerDisabled,
|
|
readonly: !_ctx.editable || _ctx.readonly,
|
|
class: 'el-range-input',
|
|
onFocus: _cache[6] || (_cache[6] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))),
|
|
onInput: _cache[7] || (_cache[7] = (...args) => (_ctx.handleEndInput && _ctx.handleEndInput(...args))),
|
|
onChange: _cache[8] || (_cache[8] = (...args) => (_ctx.handleEndChange && _ctx.handleEndChange(...args)))
|
|
}, null, 40 /* PROPS, HYDRATE_EVENTS */, ['name', 'placeholder', 'value', 'disabled', 'readonly']),
|
|
vue.createVNode('i', {
|
|
class: [[_ctx.showClose ? '' + _ctx.clearIcon : ''], 'el-input__icon el-range__close-icon'],
|
|
onClick: _cache[9] || (_cache[9] = (...args) => (_ctx.onClearIconClick && _ctx.onClearIconClick(...args)))
|
|
}, null, 2 /* CLASS */)
|
|
], 34 /* CLASS, HYDRATE_EVENTS */)), [
|
|
[_directive_clickoutside, _ctx.onClickOutside, _ctx.popperPaneRef]
|
|
])
|
|
]),
|
|
default: vue.withCtx(() => [
|
|
vue.renderSlot(_ctx.$slots, 'default', {
|
|
visible: _ctx.pickerVisible,
|
|
actualVisible: _ctx.pickerActualVisible,
|
|
parsedValue: _ctx.parsedValue,
|
|
format: _ctx.format,
|
|
unlinkPanels: _ctx.unlinkPanels,
|
|
type: _ctx.type,
|
|
defaultValue: _ctx.defaultValue,
|
|
onPick: _cache[14] || (_cache[14] = (...args) => (_ctx.onPick && _ctx.onPick(...args))),
|
|
onSelectRange: _cache[15] || (_cache[15] = (...args) => (_ctx.setSelectionRange && _ctx.setSelectionRange(...args))),
|
|
onSetPickerOption: _cache[16] || (_cache[16] = (...args) => (_ctx.onSetPickerOption && _ctx.onSetPickerOption(...args))),
|
|
onMousedown: _cache[17] || (_cache[17] = vue.withModifiers(() => {}, ['stop']))
|
|
})
|
|
]),
|
|
_: 1 /* STABLE */
|
|
}, 16 /* FULL_PROPS */, ['visible', 'popper-class', 'popper-options']))
|
|
}
|
|
|
|
script.render = render
|
|
script.__file = 'packages/time-picker/src/common/picker.vue'
|
|
|
|
const makeList = (total, method, methodFunc) => {
|
|
const arr = []
|
|
const disabledArr = method && methodFunc()
|
|
for (let i = 0; i < total; i++) {
|
|
arr[i] = disabledArr ? disabledArr.includes(i) : false
|
|
}
|
|
return arr
|
|
}
|
|
const makeAvaliableArr = list => {
|
|
return list.map((_, index) => !_ ? index : _).filter(_ => _ !== true)
|
|
}
|
|
const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
|
|
const getHoursList = (role, compare) => {
|
|
return makeList(24, disabledHours, () => disabledHours(role, compare))
|
|
}
|
|
const getMinutesList = (hour, role, compare) => {
|
|
return makeList(60, disabledMinutes, () => disabledMinutes(hour, role, compare))
|
|
}
|
|
const getSecondsList = (hour, minute, role, compare) => {
|
|
return makeList(60, disabledSeconds, () => disabledSeconds(hour, minute, role, compare))
|
|
}
|
|
return {
|
|
getHoursList,
|
|
getMinutesList,
|
|
getSecondsList
|
|
}
|
|
}
|
|
const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds) => {
|
|
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds)
|
|
const getAvaliableHours = (role, compare) => {
|
|
return makeAvaliableArr(getHoursList(role, compare))
|
|
}
|
|
const getAvaliableMinutes = (hour, role, compare) => {
|
|
return makeAvaliableArr(getMinutesList(hour, role, compare))
|
|
}
|
|
const getAvaliableSeconds = (hour, minute, role, compare) => {
|
|
return makeAvaliableArr(getSecondsList(hour, minute, role, compare))
|
|
}
|
|
return {
|
|
getAvaliableHours,
|
|
getAvaliableMinutes,
|
|
getAvaliableSeconds
|
|
}
|
|
}
|
|
const useOldValue = (props) => {
|
|
const oldValue = vue.ref(props.parsedValue)
|
|
vue.watch(() => props.visible, val => {
|
|
if (!val) {
|
|
oldValue.value = props.parsedValue
|
|
}
|
|
})
|
|
return oldValue
|
|
}
|
|
|
|
const script$1 = vue.defineComponent({
|
|
directives: {
|
|
repeatClick: directives.RepeatClick
|
|
},
|
|
components: {
|
|
ElScrollbar: ElScrollbar__default.default
|
|
},
|
|
props: {
|
|
role: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
spinnerDate: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
showSeconds: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
arrowControl: Boolean,
|
|
amPmMode: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabledHours: {
|
|
type: Function
|
|
},
|
|
disabledMinutes: {
|
|
type: Function
|
|
},
|
|
disabledSeconds: {
|
|
type: Function
|
|
}
|
|
},
|
|
emits: ['change', 'select-range', 'set-option'],
|
|
setup (props, ctx) {
|
|
let isScrolling = false
|
|
const debouncedResetScroll = debounce__default.default(type => {
|
|
isScrolling = false
|
|
adjustCurrentSpinner(type)
|
|
}, 200)
|
|
const currentScrollbar = vue.ref(null)
|
|
const listHoursRef = vue.ref(null)
|
|
const listMinutesRef = vue.ref(null)
|
|
const listSecondsRef = vue.ref(null)
|
|
const listRefsMap = {
|
|
hours: listHoursRef, minutes: listMinutesRef, seconds: listSecondsRef
|
|
}
|
|
const spinnerItems = vue.computed(() => {
|
|
const arr = ['hours', 'minutes', 'seconds']
|
|
return props.showSeconds ? arr : arr.slice(0, 2)
|
|
})
|
|
const hours = vue.computed(() => {
|
|
return props.spinnerDate.hour()
|
|
})
|
|
const minutes = vue.computed(() => {
|
|
return props.spinnerDate.minute()
|
|
})
|
|
const seconds = vue.computed(() => {
|
|
return props.spinnerDate.second()
|
|
})
|
|
const timePartsMap = vue.computed(() => ({
|
|
hours, minutes, seconds
|
|
}))
|
|
const hoursList = vue.computed(() => {
|
|
return getHoursList(props.role)
|
|
})
|
|
const minutesList = vue.computed(() => {
|
|
return getMinutesList(hours.value, props.role)
|
|
})
|
|
const secondsList = vue.computed(() => {
|
|
return getSecondsList(hours.value, minutes.value, props.role)
|
|
})
|
|
const listMap = vue.computed(() => ({
|
|
hours: hoursList,
|
|
minutes: minutesList,
|
|
seconds: secondsList
|
|
}))
|
|
const arrowHourList = vue.computed(() => {
|
|
const hour = hours.value
|
|
return [
|
|
hour > 0 ? hour - 1 : undefined,
|
|
hour,
|
|
hour < 23 ? hour + 1 : undefined
|
|
]
|
|
})
|
|
const arrowMinuteList = vue.computed(() => {
|
|
const minute = minutes.value
|
|
return [
|
|
minute > 0 ? minute - 1 : undefined,
|
|
minute,
|
|
minute < 59 ? minute + 1 : undefined
|
|
]
|
|
})
|
|
const arrowSecondList = vue.computed(() => {
|
|
const second = seconds.value
|
|
return [
|
|
second > 0 ? second - 1 : undefined,
|
|
second,
|
|
second < 59 ? second + 1 : undefined
|
|
]
|
|
})
|
|
const arrowListMap = vue.computed(() => ({
|
|
hours: arrowHourList,
|
|
minutes: arrowMinuteList,
|
|
seconds: arrowSecondList
|
|
}))
|
|
const getAmPmFlag = hour => {
|
|
const shouldShowAmPm = !!props.amPmMode
|
|
if (!shouldShowAmPm) { return '' }
|
|
const isCapital = props.amPmMode === 'A'
|
|
let content = (hour < 12) ? ' am' : ' pm'
|
|
if (isCapital) { content = content.toUpperCase() }
|
|
return content
|
|
}
|
|
const emitSelectRange = type => {
|
|
if (type === 'hours') {
|
|
ctx.emit('select-range', 0, 2)
|
|
} else if (type === 'minutes') {
|
|
ctx.emit('select-range', 3, 5)
|
|
} else if (type === 'seconds') {
|
|
ctx.emit('select-range', 6, 8)
|
|
}
|
|
currentScrollbar.value = type
|
|
}
|
|
const adjustCurrentSpinner = type => {
|
|
adjustSpinner(type, timePartsMap.value[type].value)
|
|
}
|
|
const adjustSpinners = () => {
|
|
adjustCurrentSpinner('hours')
|
|
adjustCurrentSpinner('minutes')
|
|
adjustCurrentSpinner('seconds')
|
|
}
|
|
const adjustSpinner = (type, value) => {
|
|
if (props.arrowControl) { return }
|
|
const el = listRefsMap[type]
|
|
if (el.value) {
|
|
el.value.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(0, value * typeItemHeight(type))
|
|
}
|
|
}
|
|
const typeItemHeight = type => {
|
|
const el = listRefsMap[type]
|
|
return el.value.$el.querySelector('li').offsetHeight
|
|
}
|
|
const onIncreaseClick = () => {
|
|
scrollDown(1)
|
|
}
|
|
const onDecreaseClick = () => {
|
|
scrollDown(-1)
|
|
}
|
|
const scrollDown = step => {
|
|
if (!currentScrollbar.value) {
|
|
emitSelectRange('hours')
|
|
}
|
|
const label = currentScrollbar.value
|
|
let now = timePartsMap.value[label].value
|
|
const total = currentScrollbar.value === 'hours' ? 24 : 60
|
|
now = (now + step + total) % total
|
|
modifyDateField(label, now)
|
|
adjustSpinner(label, now)
|
|
vue.nextTick(() => emitSelectRange(currentScrollbar.value))
|
|
}
|
|
const modifyDateField = (type, value) => {
|
|
const list = listMap.value[type].value
|
|
const isDisabled = list[value]
|
|
if (isDisabled) { return }
|
|
switch (type) {
|
|
case 'hours':
|
|
ctx.emit('change', props.spinnerDate
|
|
.hour(value)
|
|
.minute(minutes.value)
|
|
.second(seconds.value))
|
|
break
|
|
case 'minutes':
|
|
ctx.emit('change', props.spinnerDate
|
|
.hour(hours.value)
|
|
.minute(value)
|
|
.second(seconds.value))
|
|
break
|
|
case 'seconds':
|
|
ctx.emit('change', props.spinnerDate
|
|
.hour(hours.value)
|
|
.minute(minutes.value)
|
|
.second(value))
|
|
break
|
|
}
|
|
}
|
|
const handleClick = (type, { value, disabled }) => {
|
|
if (!disabled) {
|
|
modifyDateField(type, value)
|
|
emitSelectRange(type)
|
|
adjustSpinner(type, value)
|
|
}
|
|
}
|
|
const handleScroll = type => {
|
|
isScrolling = true
|
|
debouncedResetScroll(type)
|
|
const value = Math.min(Math.round((listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap').scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), (type === 'hours' ? 23 : 59))
|
|
modifyDateField(type, value)
|
|
}
|
|
const scrollBarHeight = type => {
|
|
return listRefsMap[type].value.$el.offsetHeight
|
|
}
|
|
const bindScrollEvent = () => {
|
|
const bindFuntion = type => {
|
|
if (listRefsMap[type].value) {
|
|
listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap').onscroll = () => {
|
|
handleScroll(type)
|
|
}
|
|
}
|
|
}
|
|
bindFuntion('hours')
|
|
bindFuntion('minutes')
|
|
bindFuntion('seconds')
|
|
}
|
|
vue.onMounted(() => {
|
|
vue.nextTick(() => {
|
|
!props.arrowControl && bindScrollEvent()
|
|
adjustSpinners()
|
|
if (props.role === 'start') { emitSelectRange('hours') }
|
|
})
|
|
})
|
|
const getRefId = item => {
|
|
return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`
|
|
}
|
|
ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown])
|
|
ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange])
|
|
const { getHoursList, getMinutesList, getSecondsList } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds)
|
|
vue.watch(() => props.spinnerDate, () => {
|
|
if (isScrolling) { return }
|
|
adjustSpinners()
|
|
})
|
|
return {
|
|
getRefId,
|
|
spinnerItems,
|
|
currentScrollbar,
|
|
hours,
|
|
minutes,
|
|
seconds,
|
|
hoursList,
|
|
minutesList,
|
|
arrowHourList,
|
|
arrowMinuteList,
|
|
arrowSecondList,
|
|
getAmPmFlag,
|
|
emitSelectRange,
|
|
adjustCurrentSpinner,
|
|
typeItemHeight,
|
|
listHoursRef,
|
|
listMinutesRef,
|
|
listSecondsRef,
|
|
onIncreaseClick,
|
|
onDecreaseClick,
|
|
handleClick,
|
|
secondsList,
|
|
timePartsMap,
|
|
arrowListMap,
|
|
listMap
|
|
}
|
|
}
|
|
})
|
|
|
|
const _hoisted_1$1 = { class: 'el-time-spinner__arrow el-icon-arrow-up' }
|
|
const _hoisted_2 = { class: 'el-time-spinner__arrow el-icon-arrow-down' }
|
|
const _hoisted_3 = { class: 'el-time-spinner__list' }
|
|
|
|
function render$1 (_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_el_scrollbar = vue.resolveComponent('el-scrollbar')
|
|
const _directive_repeat_click = vue.resolveDirective('repeat-click')
|
|
|
|
return (vue.openBlock(), vue.createBlock('div', {
|
|
class: ['el-time-spinner', { 'has-seconds': _ctx.showSeconds }]
|
|
}, [
|
|
(!_ctx.arrowControl)
|
|
? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.spinnerItems, (item) => {
|
|
return (vue.openBlock(), vue.createBlock(_component_el_scrollbar, {
|
|
key: item,
|
|
ref: _ctx.getRefId(item),
|
|
class: 'el-time-spinner__wrapper',
|
|
'wrap-style': 'max-height: inherit;',
|
|
'view-class': 'el-time-spinner__list',
|
|
noresize: '',
|
|
tag: 'ul',
|
|
onMouseenter: $event => (_ctx.emitSelectRange(item)),
|
|
onMousemove: $event => (_ctx.adjustCurrentSpinner(item))
|
|
}, {
|
|
default: vue.withCtx(() => [
|
|
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.listMap[item].value, (disabled, key) => {
|
|
return (vue.openBlock(), vue.createBlock('li', {
|
|
key: key,
|
|
class: ['el-time-spinner__item', { active: key === _ctx.timePartsMap[item].value, disabled }],
|
|
onClick: $event => (_ctx.handleClick(item, { value: key, disabled }))
|
|
}, [
|
|
(item === 'hours')
|
|
? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
|
|
vue.createTextVNode(vue.toDisplayString(('0' + (_ctx.amPmMode ? (key % 12 || 12) : key)).slice(-2)) + vue.toDisplayString(_ctx.getAmPmFlag(key)), 1 /* TEXT */)
|
|
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
|
|
: (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 1 }, [
|
|
vue.createTextVNode(vue.toDisplayString(('0' + key).slice(-2)), 1 /* TEXT */)
|
|
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
|
|
], 10 /* CLASS, PROPS */, ['onClick']))
|
|
}), 128 /* KEYED_FRAGMENT */))
|
|
]),
|
|
_: 2 /* DYNAMIC */
|
|
}, 1032 /* PROPS, DYNAMIC_SLOTS */, ['onMouseenter', 'onMousemove']))
|
|
}), 128 /* KEYED_FRAGMENT */))
|
|
: vue.createCommentVNode('v-if', true),
|
|
(_ctx.arrowControl)
|
|
? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.spinnerItems, (item) => {
|
|
return (vue.openBlock(), vue.createBlock('div', {
|
|
key: item,
|
|
class: 'el-time-spinner__wrapper is-arrow',
|
|
onMouseenter: $event => (_ctx.emitSelectRange(item))
|
|
}, [
|
|
vue.withDirectives(vue.createVNode('i', _hoisted_1$1, null, 512 /* NEED_PATCH */), [
|
|
[_directive_repeat_click, _ctx.onDecreaseClick]
|
|
]),
|
|
vue.withDirectives(vue.createVNode('i', _hoisted_2, null, 512 /* NEED_PATCH */), [
|
|
[_directive_repeat_click, _ctx.onIncreaseClick]
|
|
]),
|
|
vue.createVNode('ul', _hoisted_3, [
|
|
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.arrowListMap[item].value, (time, key) => {
|
|
return (vue.openBlock(), vue.createBlock('li', {
|
|
key: key,
|
|
class: ['el-time-spinner__item', { active: time === _ctx.timePartsMap[item].value, disabled: _ctx.listMap[item].value[time] }]
|
|
}, vue.toDisplayString(time === undefined ? '' : ('0' + (_ctx.amPmMode ? (time % 12 || 12) : time)).slice(-2) + _ctx.getAmPmFlag(time)), 3 /* TEXT, CLASS */))
|
|
}), 128 /* KEYED_FRAGMENT */))
|
|
])
|
|
], 40 /* PROPS, HYDRATE_EVENTS */, ['onMouseenter']))
|
|
}), 128 /* KEYED_FRAGMENT */))
|
|
: vue.createCommentVNode('v-if', true)
|
|
], 2 /* CLASS */))
|
|
}
|
|
|
|
script$1.render = render$1
|
|
script$1.__file = 'packages/time-picker/src/time-picker-com/basic-time-spinner.vue'
|
|
|
|
const script$2 = vue.defineComponent({
|
|
components: {
|
|
TimeSpinner: script$1
|
|
},
|
|
props: {
|
|
visible: Boolean,
|
|
actualVisible: {
|
|
type: Boolean,
|
|
default: undefined
|
|
},
|
|
datetimeRole: {
|
|
type: String
|
|
},
|
|
parsedValue: {
|
|
type: [Object, String]
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
emits: ['pick', 'select-range', 'set-picker-option'],
|
|
setup (props, ctx) {
|
|
const selectionRange = vue.ref([0, 2])
|
|
const oldValue = useOldValue(props)
|
|
const transitionName = vue.computed(() => {
|
|
return props.actualVisible === undefined ? 'el-zoom-in-top' : ''
|
|
})
|
|
const showSeconds = vue.computed(() => {
|
|
return props.format.includes('ss')
|
|
})
|
|
const amPmMode = vue.computed(() => {
|
|
if (props.format.includes('A')) { return 'A' }
|
|
if (props.format.includes('a')) { return 'a' }
|
|
return ''
|
|
})
|
|
const isValidValue = _date => {
|
|
const parsedDate = dayjs__default.default.tz(_date)
|
|
const result = getRangeAvaliableTime(parsedDate)
|
|
return parsedDate.isSame(result)
|
|
}
|
|
const handleCancel = () => {
|
|
ctx.emit('pick', oldValue.value, false)
|
|
}
|
|
const handleConfirm = (visible = false, first) => {
|
|
if (first) { return }
|
|
ctx.emit('pick', props.parsedValue, visible)
|
|
}
|
|
const handleChange = (_date) => {
|
|
if (!props.visible) {
|
|
return
|
|
}
|
|
const result = getRangeAvaliableTime(_date).millisecond(0)
|
|
ctx.emit('pick', result, true)
|
|
}
|
|
const setSelectionRange = (start, end) => {
|
|
ctx.emit('select-range', start, end)
|
|
selectionRange.value = [start, end]
|
|
}
|
|
const changeSelectionRange = step => {
|
|
const list = [0, 3].concat(showSeconds.value ? [6] : [])
|
|
const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : [])
|
|
const index = list.indexOf(selectionRange.value[0])
|
|
const next = (index + step + list.length) % list.length
|
|
timePickeOptions.start_emitSelectRange(mapping[next])
|
|
}
|
|
const handleKeydown = event => {
|
|
const code = event.code
|
|
if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) {
|
|
const step = (code === aria.EVENT_CODE.left) ? -1 : 1
|
|
changeSelectionRange(step)
|
|
event.preventDefault()
|
|
return
|
|
}
|
|
if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) {
|
|
const step = (code === aria.EVENT_CODE.up) ? -1 : 1
|
|
timePickeOptions.start_scrollDown(step)
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
const getRangeAvaliableTime = (date) => {
|
|
const avaliableMap = {
|
|
hour: getAvaliableHours,
|
|
minute: getAvaliableMinutes,
|
|
second: getAvaliableSeconds
|
|
}
|
|
let result = date;
|
|
['hour', 'minute', 'second'].forEach(_ => {
|
|
if (avaliableMap[_]) {
|
|
let avaliableArr
|
|
const method = avaliableMap[_]
|
|
if (_ === 'minute') {
|
|
avaliableArr = method(result.hour(), props.datetimeRole)
|
|
} else if (_ === 'second') {
|
|
avaliableArr = method(result.hour(), result.minute(), props.datetimeRole)
|
|
} else {
|
|
avaliableArr = method(props.datetimeRole)
|
|
}
|
|
if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
|
|
result = result[_](avaliableArr[0])
|
|
}
|
|
}
|
|
})
|
|
return result
|
|
}
|
|
const parseUserInput = value => {
|
|
if (!value) { return null }
|
|
return dayjs__default.default.tz(value, props.format)
|
|
}
|
|
const formatToString = value => {
|
|
if (!value) { return null }
|
|
return value.format(props.format)
|
|
}
|
|
const getDefaultValue = () => {
|
|
return dayjs__default.default.tz(defaultValue)
|
|
}
|
|
ctx.emit('set-picker-option', ['isValidValue', isValidValue])
|
|
ctx.emit('set-picker-option', ['formatToString', formatToString])
|
|
ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])
|
|
ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])
|
|
ctx.emit('set-picker-option', ['getRangeAvaliableTime', getRangeAvaliableTime])
|
|
ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])
|
|
const timePickeOptions = {}
|
|
const onSetOption = e => {
|
|
timePickeOptions[e[0]] = e[1]
|
|
}
|
|
const pickerBase = vue.inject('EP_PICKER_BASE')
|
|
const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
|
|
const { getAvaliableHours, getAvaliableMinutes, getAvaliableSeconds } = getAvaliableArrs(disabledHours, disabledMinutes, disabledSeconds)
|
|
return {
|
|
transitionName,
|
|
arrowControl,
|
|
onSetOption,
|
|
t: locale.t,
|
|
handleConfirm,
|
|
handleChange,
|
|
setSelectionRange,
|
|
amPmMode,
|
|
showSeconds,
|
|
handleCancel,
|
|
disabledHours,
|
|
disabledMinutes,
|
|
disabledSeconds
|
|
}
|
|
}
|
|
})
|
|
|
|
const _hoisted_1$2 = {
|
|
key: 0,
|
|
class: 'el-time-panel'
|
|
}
|
|
const _hoisted_2$1 = { class: 'el-time-panel__footer' }
|
|
|
|
function render$2 (_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_time_spinner = vue.resolveComponent('time-spinner')
|
|
|
|
return (vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
|
|
default: vue.withCtx(() => [
|
|
(_ctx.actualVisible || _ctx.visible)
|
|
? (vue.openBlock(), vue.createBlock('div', _hoisted_1$2, [
|
|
vue.createVNode('div', {
|
|
class: ['el-time-panel__content', { 'has-seconds': _ctx.showSeconds }]
|
|
}, [
|
|
vue.createVNode(_component_time_spinner, {
|
|
ref: 'spinner',
|
|
role: _ctx.datetimeRole || 'start',
|
|
'arrow-control': _ctx.arrowControl,
|
|
'show-seconds': _ctx.showSeconds,
|
|
'am-pm-mode': _ctx.amPmMode,
|
|
'spinner-date': _ctx.parsedValue,
|
|
'disabled-hours': _ctx.disabledHours,
|
|
'disabled-minutes': _ctx.disabledMinutes,
|
|
'disabled-seconds': _ctx.disabledSeconds,
|
|
onChange: _ctx.handleChange,
|
|
onSetOption: _ctx.onSetOption,
|
|
onSelectRange: _ctx.setSelectionRange
|
|
}, null, 8 /* PROPS */, ['role', 'arrow-control', 'show-seconds', 'am-pm-mode', 'spinner-date', 'disabled-hours', 'disabled-minutes', 'disabled-seconds', 'onChange', 'onSetOption', 'onSelectRange'])
|
|
], 2 /* CLASS */),
|
|
vue.createVNode('div', _hoisted_2$1, [
|
|
vue.createVNode('button', {
|
|
type: 'button',
|
|
class: 'el-time-panel__btn cancel',
|
|
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleCancel && _ctx.handleCancel(...args)))
|
|
}, vue.toDisplayString(_ctx.t('el.datepicker.cancel')), 1 /* TEXT */),
|
|
vue.createVNode('button', {
|
|
type: 'button',
|
|
class: 'el-time-panel__btn confirm',
|
|
onClick: _cache[2] || (_cache[2] = $event => (_ctx.handleConfirm()))
|
|
}, vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */)
|
|
])
|
|
]))
|
|
: vue.createCommentVNode('v-if', true)
|
|
]),
|
|
_: 1 /* STABLE */
|
|
}, 8 /* PROPS */, ['name']))
|
|
}
|
|
|
|
script$2.render = render$2
|
|
script$2.__file = 'packages/time-picker/src/time-picker-com/panel-time-pick.vue'
|
|
|
|
const makeSelectRange = (start, end) => {
|
|
const result = []
|
|
for (let i = start; i <= end; i++) {
|
|
result.push(i)
|
|
}
|
|
return result
|
|
}
|
|
const script$3 = vue.defineComponent({
|
|
components: { TimeSpinner: script$1 },
|
|
props: {
|
|
visible: Boolean,
|
|
actualVisible: Boolean,
|
|
parsedValue: {
|
|
type: [Array, String]
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
emits: ['pick', 'select-range', 'set-picker-option'],
|
|
setup (props, ctx) {
|
|
const minDate = vue.computed(() => props.parsedValue[0])
|
|
const maxDate = vue.computed(() => props.parsedValue[1])
|
|
const oldValue = useOldValue(props)
|
|
const handleCancel = () => {
|
|
ctx.emit('pick', oldValue.value, null)
|
|
}
|
|
const showSeconds = vue.computed(() => {
|
|
return props.format.includes('ss')
|
|
})
|
|
const amPmMode = vue.computed(() => {
|
|
if (props.format.includes('A')) { return 'A' }
|
|
if (props.format.includes('a')) { return 'a' }
|
|
return ''
|
|
})
|
|
const minSelectableRange = vue.ref([])
|
|
const maxSelectableRange = vue.ref([])
|
|
const handleConfirm = (visible = false) => {
|
|
ctx.emit('pick', [minDate.value, maxDate.value], visible)
|
|
}
|
|
const handleMinChange = date => {
|
|
handleChange(date.millisecond(0), maxDate.value)
|
|
}
|
|
const handleMaxChange = date => {
|
|
handleChange(minDate.value, date.millisecond(0))
|
|
}
|
|
const isValidValue = _date => {
|
|
const parsedDate = _date.map(_ => dayjs__default.default.tz(_))
|
|
const result = getRangeAvaliableTime(parsedDate)
|
|
return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])
|
|
}
|
|
const handleChange = (_minDate, _maxDate) => {
|
|
ctx.emit('pick', [_minDate, _maxDate], true)
|
|
}
|
|
const btnConfirmDisabled = vue.computed(() => {
|
|
return minDate.value > maxDate.value
|
|
})
|
|
const selectionRange = vue.ref([0, 2])
|
|
const setMinSelectionRange = (start, end) => {
|
|
ctx.emit('select-range', start, end, 'min')
|
|
selectionRange.value = [start, end]
|
|
}
|
|
const offset = vue.computed(() => showSeconds.value ? 11 : 8)
|
|
const setMaxSelectionRange = (start, end) => {
|
|
ctx.emit('select-range', start, end, 'max')
|
|
selectionRange.value = [start + offset.value, end + offset.value]
|
|
}
|
|
const changeSelectionRange = step => {
|
|
const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]
|
|
const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : [])
|
|
const index = list.indexOf(selectionRange.value[0])
|
|
const next = (index + step + list.length) % list.length
|
|
const half = list.length / 2
|
|
if (next < half) {
|
|
timePickeOptions.start_emitSelectRange(mapping[next])
|
|
} else {
|
|
timePickeOptions.end_emitSelectRange(mapping[next - half])
|
|
}
|
|
}
|
|
const handleKeydown = event => {
|
|
const code = event.code
|
|
if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) {
|
|
const step = (code === aria.EVENT_CODE.left) ? -1 : 1
|
|
changeSelectionRange(step)
|
|
event.preventDefault()
|
|
return
|
|
}
|
|
if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) {
|
|
const step = (code === aria.EVENT_CODE.up) ? -1 : 1
|
|
const role = selectionRange.value[0] < offset.value ? 'start' : 'end'
|
|
timePickeOptions[`${role}_scrollDown`](step)
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
const disabledHours_ = (role, compare) => {
|
|
const defaultDisable = disabledHours ? disabledHours(role) : []
|
|
const isStart = role === 'start'
|
|
const compareDate = compare || (isStart ? maxDate.value : minDate.value)
|
|
const compareHour = compareDate.hour()
|
|
const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1)
|
|
return union__default.default(defaultDisable, nextDisable)
|
|
}
|
|
const disabledMinutes_ = (hour, role, compare) => {
|
|
const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []
|
|
const isStart = role === 'start'
|
|
const compareDate = compare || (isStart ? maxDate.value : minDate.value)
|
|
const compareHour = compareDate.hour()
|
|
if (hour !== compareHour) {
|
|
return defaultDisable
|
|
}
|
|
const compareMinute = compareDate.minute()
|
|
const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1)
|
|
return union__default.default(defaultDisable, nextDisable)
|
|
}
|
|
const disabledSeconds_ = (hour, minute, role, compare) => {
|
|
const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : []
|
|
const isStart = role === 'start'
|
|
const compareDate = compare || (isStart ? maxDate.value : minDate.value)
|
|
const compareHour = compareDate.hour()
|
|
const compareMinute = compareDate.minute()
|
|
if (hour !== compareHour || minute !== compareMinute) {
|
|
return defaultDisable
|
|
}
|
|
const compareSecond = compareDate.second()
|
|
const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1)
|
|
return union__default.default(defaultDisable, nextDisable)
|
|
}
|
|
const getRangeAvaliableTime = (dates) => {
|
|
return dates.map((_, index) => getRangeAvaliableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end'))
|
|
}
|
|
const { getAvaliableHours, getAvaliableMinutes, getAvaliableSeconds } = getAvaliableArrs(disabledHours_, disabledMinutes_, disabledSeconds_)
|
|
const getRangeAvaliableTimeEach = (startDate, endDate, role) => {
|
|
const avaliableMap = {
|
|
hour: getAvaliableHours,
|
|
minute: getAvaliableMinutes,
|
|
second: getAvaliableSeconds
|
|
}
|
|
const isStart = role === 'start'
|
|
let result = isStart ? startDate : endDate
|
|
const compareDate = isStart ? endDate : startDate;
|
|
['hour', 'minute', 'second'].forEach(_ => {
|
|
if (avaliableMap[_]) {
|
|
let avaliableArr
|
|
const method = avaliableMap[_]
|
|
if (_ === 'minute') {
|
|
avaliableArr = method(result.hour(), role, compareDate)
|
|
} else if (_ === 'second') {
|
|
avaliableArr = method(result.hour(), result.minute(), role, compareDate)
|
|
} else {
|
|
avaliableArr = method(role, compareDate)
|
|
}
|
|
if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
|
|
const pos = isStart ? 0 : avaliableArr.length - 1
|
|
result = result[_](avaliableArr[pos])
|
|
}
|
|
}
|
|
})
|
|
return result
|
|
}
|
|
const parseUserInput = value => {
|
|
if (!value) { return null }
|
|
if (Array.isArray(value)) {
|
|
return value.map(_ => dayjs__default.default.tz(_, props.format))
|
|
}
|
|
return dayjs__default.default.tz(value, props.format)
|
|
}
|
|
const formatToString = value => {
|
|
if (!value) { return null }
|
|
if (Array.isArray(value)) {
|
|
return value.map(_ => _.format(props.format))
|
|
}
|
|
return value.format(props.format)
|
|
}
|
|
const getDefaultValue = () => {
|
|
if (Array.isArray(defaultValue)) {
|
|
return defaultValue.map(_ => dayjs__default.default.tz(_))
|
|
}
|
|
return [
|
|
dayjs__default.default.tz(defaultValue),
|
|
dayjs__default.default.tz(defaultValue).add(60, 'm')
|
|
]
|
|
}
|
|
ctx.emit('set-picker-option', ['formatToString', formatToString])
|
|
ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])
|
|
ctx.emit('set-picker-option', ['isValidValue', isValidValue])
|
|
ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])
|
|
ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])
|
|
ctx.emit('set-picker-option', ['getRangeAvaliableTime', getRangeAvaliableTime])
|
|
const timePickeOptions = {}
|
|
const onSetOption = e => {
|
|
timePickeOptions[e[0]] = e[1]
|
|
}
|
|
const pickerBase = vue.inject('EP_PICKER_BASE')
|
|
const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
|
|
return {
|
|
arrowControl,
|
|
onSetOption,
|
|
setMaxSelectionRange,
|
|
setMinSelectionRange,
|
|
btnConfirmDisabled,
|
|
handleCancel,
|
|
handleConfirm,
|
|
t: locale.t,
|
|
showSeconds,
|
|
minDate,
|
|
maxDate,
|
|
amPmMode,
|
|
handleMinChange,
|
|
handleMaxChange,
|
|
minSelectableRange,
|
|
maxSelectableRange,
|
|
disabledHours_,
|
|
disabledMinutes_,
|
|
disabledSeconds_
|
|
}
|
|
}
|
|
})
|
|
|
|
const _hoisted_1$3 = {
|
|
key: 0,
|
|
class: 'el-time-range-picker el-picker-panel'
|
|
}
|
|
const _hoisted_2$2 = { class: 'el-time-range-picker__content' }
|
|
const _hoisted_3$1 = { class: 'el-time-range-picker__cell' }
|
|
const _hoisted_4 = { class: 'el-time-range-picker__header' }
|
|
const _hoisted_5 = { class: 'el-time-range-picker__cell' }
|
|
const _hoisted_6 = { class: 'el-time-range-picker__header' }
|
|
const _hoisted_7 = { class: 'el-time-panel__footer' }
|
|
|
|
function render$3 (_ctx, _cache, $props, $setup, $data, $options) {
|
|
const _component_time_spinner = vue.resolveComponent('time-spinner')
|
|
|
|
return (_ctx.actualVisible)
|
|
? (vue.openBlock(), vue.createBlock('div', _hoisted_1$3, [
|
|
vue.createVNode('div', _hoisted_2$2, [
|
|
vue.createVNode('div', _hoisted_3$1, [
|
|
vue.createVNode('div', _hoisted_4, vue.toDisplayString(_ctx.t('el.datepicker.startTime')), 1 /* TEXT */),
|
|
vue.createVNode('div', {
|
|
class: [{ 'has-seconds': _ctx.showSeconds, 'is-arrow': _ctx.arrowControl }, 'el-time-range-picker__body el-time-panel__content']
|
|
}, [
|
|
vue.createVNode(_component_time_spinner, {
|
|
ref: 'minSpinner',
|
|
role: 'start',
|
|
'show-seconds': _ctx.showSeconds,
|
|
'am-pm-mode': _ctx.amPmMode,
|
|
'arrow-control': _ctx.arrowControl,
|
|
'spinner-date': _ctx.minDate,
|
|
'disabled-hours': _ctx.disabledHours_,
|
|
'disabled-minutes': _ctx.disabledMinutes_,
|
|
'disabled-seconds': _ctx.disabledSeconds_,
|
|
onChange: _ctx.handleMinChange,
|
|
onSetOption: _ctx.onSetOption,
|
|
onSelectRange: _ctx.setMinSelectionRange
|
|
}, null, 8 /* PROPS */, ['show-seconds', 'am-pm-mode', 'arrow-control', 'spinner-date', 'disabled-hours', 'disabled-minutes', 'disabled-seconds', 'onChange', 'onSetOption', 'onSelectRange'])
|
|
], 2 /* CLASS */)
|
|
]),
|
|
vue.createVNode('div', _hoisted_5, [
|
|
vue.createVNode('div', _hoisted_6, vue.toDisplayString(_ctx.t('el.datepicker.endTime')), 1 /* TEXT */),
|
|
vue.createVNode('div', {
|
|
class: [{ 'has-seconds': _ctx.showSeconds, 'is-arrow': _ctx.arrowControl }, 'el-time-range-picker__body el-time-panel__content']
|
|
}, [
|
|
vue.createVNode(_component_time_spinner, {
|
|
ref: 'maxSpinner',
|
|
role: 'end',
|
|
'show-seconds': _ctx.showSeconds,
|
|
'am-pm-mode': _ctx.amPmMode,
|
|
'arrow-control': _ctx.arrowControl,
|
|
'spinner-date': _ctx.maxDate,
|
|
'disabled-hours': _ctx.disabledHours_,
|
|
'disabled-minutes': _ctx.disabledMinutes_,
|
|
'disabled-seconds': _ctx.disabledSeconds_,
|
|
onChange: _ctx.handleMaxChange,
|
|
onSetOption: _ctx.onSetOption,
|
|
onSelectRange: _ctx.setMaxSelectionRange
|
|
}, null, 8 /* PROPS */, ['show-seconds', 'am-pm-mode', 'arrow-control', 'spinner-date', 'disabled-hours', 'disabled-minutes', 'disabled-seconds', 'onChange', 'onSetOption', 'onSelectRange'])
|
|
], 2 /* CLASS */)
|
|
])
|
|
]),
|
|
vue.createVNode('div', _hoisted_7, [
|
|
vue.createVNode('button', {
|
|
type: 'button',
|
|
class: 'el-time-panel__btn cancel',
|
|
onClick: _cache[1] || (_cache[1] = $event => (_ctx.handleCancel()))
|
|
}, vue.toDisplayString(_ctx.t('el.datepicker.cancel')), 1 /* TEXT */),
|
|
vue.createVNode('button', {
|
|
type: 'button',
|
|
class: 'el-time-panel__btn confirm',
|
|
disabled: _ctx.btnConfirmDisabled,
|
|
onClick: _cache[2] || (_cache[2] = $event => (_ctx.handleConfirm()))
|
|
}, vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 9 /* TEXT, PROPS */, ['disabled'])
|
|
])
|
|
]))
|
|
: vue.createCommentVNode('v-if', true)
|
|
}
|
|
|
|
script$3.render = render$3
|
|
script$3.__file = 'packages/time-picker/src/time-picker-com/panel-time-range.vue'
|
|
|
|
dayjs__default.default.extend(customParseFormat__default.default)
|
|
const TimePicker = vue.defineComponent({
|
|
name: 'ElTimePicker',
|
|
install: null,
|
|
props: Object.assign(Object.assign({}, defaultProps), {
|
|
isRange: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
}),
|
|
emits: ['update:modelValue'],
|
|
setup (props, ctx) {
|
|
const commonPicker = vue.ref(null)
|
|
const type = props.isRange ? 'timerange' : 'time'
|
|
const panel = props.isRange ? script$3 : script$2
|
|
const refProps = Object.assign(Object.assign({}, props), {
|
|
focus: () => {
|
|
let _a;
|
|
(_a = commonPicker.value) === null || _a === void 0 ? void 0 : _a.handleFocus()
|
|
}
|
|
})
|
|
vue.provide('ElPopperOptions', props.popperOptions)
|
|
ctx.expose(refProps)
|
|
return () => vue.h(script, Object.assign(Object.assign({ format: DEFAULT_FORMATS_TIME }, props), { type, ref: commonPicker, 'onUpdate:modelValue': value => ctx.emit('update:modelValue', value) }), {
|
|
default: scopedProps => vue.h(panel, scopedProps)
|
|
})
|
|
}
|
|
})
|
|
|
|
const rangeArr = n => {
|
|
return Array.from(Array(n).keys())
|
|
}
|
|
const extractDateFormat = format => {
|
|
return format
|
|
.replace(/\W?m{1,2}|\W?ZZ/g, '')
|
|
.replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, '')
|
|
.trim()
|
|
}
|
|
const extractTimeFormat = format => {
|
|
return format
|
|
.replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, '')
|
|
.trim()
|
|
}
|
|
|
|
const _TimePicker = TimePicker
|
|
_TimePicker.install = app => {
|
|
app.component(_TimePicker.name, _TimePicker)
|
|
}
|
|
|
|
exports.CommonPicker = script
|
|
exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE
|
|
exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER
|
|
exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME
|
|
exports.TimePickPanel = script$2
|
|
exports.default = _TimePicker
|
|
exports.defaultProps = defaultProps
|
|
exports.extractDateFormat = extractDateFormat
|
|
exports.extractTimeFormat = extractTimeFormat
|
|
exports.rangeArr = rangeArr
|