mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-30 10:18:02 +08:00
refactor(components): [time-picker] use useNamespace (#6523)
Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
This commit is contained in:
gjfei
GitHub
parent
0e274ad7d4
commit
e179ee6960
@ -95,7 +95,7 @@ describe('Datetime Picker', () => {
|
||||
expect((timeInput as HTMLInputElement).value).toBe('10:00:01')
|
||||
// time spinner highlight is correct
|
||||
let spinners = document.querySelectorAll(
|
||||
'.el-time-spinner ul li.active'
|
||||
'.el-time-spinner ul li.is-active'
|
||||
) as any
|
||||
expect(spinners[0].textContent).toBe('10')
|
||||
expect(spinners[1].textContent).toBe('00')
|
||||
@ -104,7 +104,9 @@ describe('Datetime Picker', () => {
|
||||
modelValue: new Date(2001, 10, 2, 11, 1, 2),
|
||||
})
|
||||
await nextTick()
|
||||
spinners = document.querySelectorAll('.el-time-spinner ul li.active') as any
|
||||
spinners = document.querySelectorAll(
|
||||
'.el-time-spinner ul li.is-active'
|
||||
) as any
|
||||
expect((dateInput as HTMLInputElement).value).toBe('2001-11-02')
|
||||
expect((timeInput as HTMLInputElement).value).toBe('11:01:02')
|
||||
expect(spinners[0].textContent).toBe('11')
|
||||
@ -312,13 +314,13 @@ describe('Datetime Picker', () => {
|
||||
await nextTick()
|
||||
const list = document.querySelectorAll('.el-time-spinner__list')
|
||||
const hoursEl = list[0]
|
||||
const disabledHours = Array.from(hoursEl.querySelectorAll('.disabled')).map(
|
||||
(node) => Number(node.textContent)
|
||||
)
|
||||
const disabledHours = Array.from(
|
||||
hoursEl.querySelectorAll('.is-disabled')
|
||||
).map((node) => Number(node.textContent))
|
||||
expect(disabledHours).toStrictEqual(disabledHoursArr)
|
||||
const minutesEl = list[1]
|
||||
const disabledMinutes = Array.from(
|
||||
minutesEl.querySelectorAll('.disabled')
|
||||
minutesEl.querySelectorAll('.is-disabled')
|
||||
).map((node) => Number(node.textContent))
|
||||
expect(disabledMinutes.length).toBe(19)
|
||||
})
|
||||
@ -352,7 +354,7 @@ describe('Datetime Picker', () => {
|
||||
expect((timeInput as HTMLInputElement).value).toBe('12:24:48')
|
||||
// time spinner highlight is correct
|
||||
const spinners = document.querySelectorAll(
|
||||
'.el-time-spinner ul li.active'
|
||||
'.el-time-spinner ul li.is-active'
|
||||
) as any
|
||||
expect(spinners[0].textContent).toBe('12')
|
||||
expect(spinners[1].textContent).toBe('24')
|
||||
@ -385,7 +387,7 @@ describe('Datetime Picker', () => {
|
||||
;(timeInput as HTMLElement).focus()
|
||||
await nextTick()
|
||||
const spinner = document.querySelector(
|
||||
'.el-time-spinner ul li.active'
|
||||
'.el-time-spinner ul li.is-active'
|
||||
) as HTMLElement
|
||||
;(spinner.nextSibling as HTMLElement).click()
|
||||
await nextTick()
|
||||
@ -644,9 +646,9 @@ describe('Datetimerange', () => {
|
||||
'.el-date-range-picker__editors-wrap .el-time-spinner__list'
|
||||
)
|
||||
const hoursEl = listleft[0]
|
||||
const disabledHours = Array.from(hoursEl.querySelectorAll('.disabled')).map(
|
||||
(node) => Number(node.textContent)
|
||||
)
|
||||
const disabledHours = Array.from(
|
||||
hoursEl.querySelectorAll('.is-disabled')
|
||||
).map((node) => Number(node.textContent))
|
||||
expect(disabledHours).toStrictEqual(disabledHoursArr)
|
||||
const button = document.querySelector(
|
||||
'.el-date-range-picker__time-picker-wrap .el-time-panel .confirm'
|
||||
@ -661,7 +663,7 @@ describe('Datetimerange', () => {
|
||||
)
|
||||
const hoursEl2 = listright[0]
|
||||
const disabledHours2 = Array.from(
|
||||
hoursEl2.querySelectorAll('.disabled')
|
||||
hoursEl2.querySelectorAll('.is-disabled')
|
||||
).map((node) => Number(node.textContent))
|
||||
expect(disabledHours2).toStrictEqual(disabledHoursRightArr)
|
||||
})
|
||||
@ -717,13 +719,13 @@ describe('Datetimerange', () => {
|
||||
)
|
||||
// auto set left time to right time
|
||||
expect(
|
||||
rightList[0].querySelector('.el-time-spinner__item.active').innerHTML
|
||||
rightList[0].querySelector('.el-time-spinner__item.is-active').innerHTML
|
||||
).toBe(leftSelect[0])
|
||||
expect(
|
||||
rightList[1].querySelector('.el-time-spinner__item.active').innerHTML
|
||||
rightList[1].querySelector('.el-time-spinner__item.is-active').innerHTML
|
||||
).toBe(leftSelect[1])
|
||||
expect(
|
||||
rightList[2].querySelector('.el-time-spinner__item.active').innerHTML
|
||||
rightList[2].querySelector('.el-time-spinner__item.is-active').innerHTML
|
||||
).toBe(leftSelect[2])
|
||||
triggerEvent(rightList[0].children[12], 'click', true)
|
||||
await nextTick()
|
||||
|
||||
@ -80,7 +80,7 @@ describe('TimePicker', () => {
|
||||
expect(items[1].textContent).toBe('01 AM')
|
||||
expect(items[12].textContent).toBe('12 PM')
|
||||
expect(items[15].textContent).toBe('03 PM')
|
||||
const times = document.querySelectorAll('.el-time-spinner__list .active')
|
||||
const times = document.querySelectorAll('.el-time-spinner__list .is-active')
|
||||
expect(times[0].textContent).toBe('06 PM')
|
||||
expect(times[1].textContent).toBe('40') // default value
|
||||
expect(times[2].textContent).toBe('00')
|
||||
@ -119,9 +119,9 @@ describe('TimePicker', () => {
|
||||
await nextTick()
|
||||
const vm = wrapper.vm as any
|
||||
const date = vm.value
|
||||
expect(hourEl.classList.contains('active')).toBeTruthy()
|
||||
expect(minuteEl.classList.contains('active')).toBeTruthy()
|
||||
expect(secondEl.classList.contains('active')).toBeTruthy()
|
||||
expect(hourEl.classList.contains('is-active')).toBeTruthy()
|
||||
expect(minuteEl.classList.contains('is-active')).toBeTruthy()
|
||||
expect(secondEl.classList.contains('is-active')).toBeTruthy()
|
||||
expect(date.getHours()).toBe(4)
|
||||
expect(date.getMinutes()).toBe(36)
|
||||
expect(date.getSeconds()).toBe(20)
|
||||
@ -316,18 +316,24 @@ describe('TimePicker', () => {
|
||||
const hoursEl = list[0]
|
||||
const minutesEl = list[1]
|
||||
const secondsEl = list[2]
|
||||
const disabledHours = getSpinnerTextAsArray(hoursEl, '.disabled')
|
||||
const disabledHours = getSpinnerTextAsArray(hoursEl, '.is-disabled')
|
||||
expect(disabledHours).toEqual(disabledHoursArr)
|
||||
const hourSpinners = hoursEl.querySelectorAll('.el-time-spinner__item')
|
||||
;(hourSpinners[18] as any).click()
|
||||
await nextTick()
|
||||
const disabledMinutes = getSpinnerTextAsArray(minutesEl, '.disabled')
|
||||
const disabledMinutes = getSpinnerTextAsArray(minutesEl, '.is-disabled')
|
||||
expect(disabledMinutes.every((t) => t > 30 && t < 50)).toBeTruthy()
|
||||
expect(disabledMinutes.length).toEqual(19)
|
||||
;(hourSpinners[22] as any).click()
|
||||
await nextTick()
|
||||
const enabledMinutes = getSpinnerTextAsArray(minutesEl, ':not(.disabled)')
|
||||
const enabledSeconds = getSpinnerTextAsArray(secondsEl, ':not(.disabled)')
|
||||
const enabledMinutes = getSpinnerTextAsArray(
|
||||
minutesEl,
|
||||
':not(.is-disabled)'
|
||||
)
|
||||
const enabledSeconds = getSpinnerTextAsArray(
|
||||
secondsEl,
|
||||
':not(.is-disabled)'
|
||||
)
|
||||
expect(enabledMinutes).toEqual([0])
|
||||
expect(enabledSeconds).toEqual([0])
|
||||
})
|
||||
@ -432,7 +438,7 @@ describe('TimePicker(range)', () => {
|
||||
// For skipping Transition animation
|
||||
await rAF()
|
||||
const list = document.querySelectorAll(
|
||||
'.el-time-spinner__list .el-time-spinner__item.active'
|
||||
'.el-time-spinner__list .el-time-spinner__item.is-active'
|
||||
)
|
||||
;['18', '40', '00', '19', '40', '00'].forEach((_, i) => {
|
||||
expect(list[i].textContent).toBe(_)
|
||||
@ -460,7 +466,7 @@ describe('TimePicker(range)', () => {
|
||||
// For skipping Transition animation
|
||||
await rAF()
|
||||
const list = document.querySelectorAll(
|
||||
'.el-time-spinner__list .el-time-spinner__item.active'
|
||||
'.el-time-spinner__list .el-time-spinner__item.is-active'
|
||||
)
|
||||
|
||||
;['10', '20', '00', '11', '10', '00'].forEach((_, i) => {
|
||||
@ -540,20 +546,20 @@ describe('TimePicker(range)', () => {
|
||||
const leftHoursEl = list[0]
|
||||
const leftEndbledHours = getSpinnerTextAsArray(
|
||||
leftHoursEl,
|
||||
':not(.disabled)'
|
||||
':not(.is-disabled)'
|
||||
)
|
||||
expect(leftEndbledHours).toEqual([8, 9, 10, 11, 12])
|
||||
const rightHoursEl = list[3]
|
||||
const rightEndbledHours = getSpinnerTextAsArray(
|
||||
rightHoursEl,
|
||||
':not(.disabled)'
|
||||
':not(.is-disabled)'
|
||||
)
|
||||
expect(rightEndbledHours).toEqual([11, 12, 13, 14, 15, 16])
|
||||
;(leftHoursEl.querySelectorAll('.el-time-spinner__item')[12] as any).click()
|
||||
await nextTick()
|
||||
const NextRightEndbledHours = getSpinnerTextAsArray(
|
||||
rightHoursEl,
|
||||
':not(.disabled)'
|
||||
':not(.is-disabled)'
|
||||
)
|
||||
expect(NextRightEndbledHours).toEqual([12, 13, 14, 15, 16])
|
||||
})
|
||||
@ -641,17 +647,17 @@ describe('TimePicker(range)', () => {
|
||||
const list = document.querySelectorAll('.el-time-spinner__list')
|
||||
expect(
|
||||
list[0]
|
||||
.querySelector('.el-time-spinner__item.active')
|
||||
.querySelector('.el-time-spinner__item.is-active')
|
||||
.innerHTML.split(' ').length
|
||||
).toBe(2)
|
||||
expect(
|
||||
list[1]
|
||||
.querySelector('.el-time-spinner__item.active')
|
||||
.querySelector('.el-time-spinner__item.is-active')
|
||||
.innerHTML.split(' ').length
|
||||
).toBe(1)
|
||||
expect(
|
||||
list[2]
|
||||
.querySelector('.el-time-spinner__item.active')
|
||||
.querySelector('.el-time-spinner__item.is-active')
|
||||
.innerHTML.split(' ').length
|
||||
).toBe(1)
|
||||
})
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
trigger="click"
|
||||
v-bind="$attrs"
|
||||
append-to-body
|
||||
transition="el-zoom-in-top"
|
||||
:popper-class="`el-picker__popper ${popperClass}`"
|
||||
:transition="`${nsDate.namespace.value}-zoom-in-top`"
|
||||
:popper-class="[`${nsDate.namespace.value}-picker__popper`, popperClass]"
|
||||
:popper-options="elPopperOptions"
|
||||
:fallback-placements="['bottom', 'top', 'right', 'left']"
|
||||
:gpu-acceleration="false"
|
||||
@ -29,9 +29,8 @@
|
||||
:size="pickerSize"
|
||||
:disabled="pickerDisabled"
|
||||
:placeholder="placeholder"
|
||||
class="el-date-editor"
|
||||
:class="['el-date-editor--' + type, $attrs.class || undefined]"
|
||||
:style="$attrs.style || undefined"
|
||||
:class="[nsDate.b('editor'), nsDate.bm('editor', type), $attrs.class]"
|
||||
:style="$attrs.style"
|
||||
:readonly="!editable || readonly || isDatesPicker || type === 'week'"
|
||||
@input="onUserInput"
|
||||
@focus="handleFocus"
|
||||
@ -44,7 +43,7 @@
|
||||
<template #prefix>
|
||||
<el-icon
|
||||
v-if="triggerIcon"
|
||||
class="el-input__icon"
|
||||
:class="nsInput.e('icon')"
|
||||
@click="handleFocus"
|
||||
>
|
||||
<component :is="triggerIcon" />
|
||||
@ -53,7 +52,7 @@
|
||||
<template #suffix>
|
||||
<el-icon
|
||||
v-if="showClose && clearIcon"
|
||||
class="el-input__icon clear-icon"
|
||||
:class="`${nsInput.e('icon')} clear-icon`"
|
||||
@click="onClearIconClick"
|
||||
>
|
||||
<component :is="clearIcon" />
|
||||
@ -63,15 +62,17 @@
|
||||
<div
|
||||
v-else
|
||||
ref="inputRef"
|
||||
class="el-date-editor el-range-editor el-input__inner"
|
||||
:class="[
|
||||
'el-date-editor--' + type,
|
||||
pickerSize ? `el-range-editor--${pickerSize}` : '',
|
||||
pickerDisabled ? 'is-disabled' : '',
|
||||
pickerVisible ? 'is-active' : '',
|
||||
$attrs.class || undefined,
|
||||
nsDate.b('editor'),
|
||||
nsDate.bm('editor', type),
|
||||
nsInput.e('inner'),
|
||||
nsDate.is('disabled', pickerDisabled),
|
||||
nsDate.is('active', pickerVisible),
|
||||
nsRange.b('editor'),
|
||||
pickerSize ? nsRange.bm('editor', pickerSize) : '',
|
||||
$attrs.class,
|
||||
]"
|
||||
:style="$attrs.style || undefined"
|
||||
:style="$attrs.style"
|
||||
@click="handleFocus"
|
||||
@mouseenter="onMouseEnter"
|
||||
@mouseleave="onMouseLeave"
|
||||
@ -79,7 +80,7 @@
|
||||
>
|
||||
<el-icon
|
||||
v-if="triggerIcon"
|
||||
class="el-input__icon el-range__icon"
|
||||
:class="[nsInput.e('icon'), nsRange.e('icon')]"
|
||||
@click="handleFocus"
|
||||
>
|
||||
<component :is="triggerIcon" />
|
||||
@ -92,13 +93,13 @@
|
||||
:value="displayValue && displayValue[0]"
|
||||
:disabled="pickerDisabled"
|
||||
:readonly="!editable || readonly"
|
||||
class="el-range-input"
|
||||
:class="nsRange.b('input')"
|
||||
@input="handleStartInput"
|
||||
@change="handleStartChange"
|
||||
@focus="handleFocus"
|
||||
/>
|
||||
<slot name="range-separator">
|
||||
<span class="el-range-separator">{{ rangeSeparator }}</span>
|
||||
<span :class="nsRange.b('separator')">{{ rangeSeparator }}</span>
|
||||
</slot>
|
||||
<input
|
||||
:id="id && id[1]"
|
||||
@ -108,17 +109,20 @@
|
||||
:value="displayValue && displayValue[1]"
|
||||
:disabled="pickerDisabled"
|
||||
:readonly="!editable || readonly"
|
||||
class="el-range-input"
|
||||
:class="nsRange.b('input')"
|
||||
@focus="handleFocus"
|
||||
@input="handleEndInput"
|
||||
@change="handleEndChange"
|
||||
/>
|
||||
<el-icon
|
||||
v-if="clearIcon"
|
||||
class="el-input__icon el-range__close-icon"
|
||||
:class="{
|
||||
'el-range__close-icon--hidden': !showClose,
|
||||
}"
|
||||
:class="[
|
||||
nsInput.e('icon'),
|
||||
nsRange.e('close-icon'),
|
||||
{
|
||||
[nsRange.e('close-icon--hidden')]: !showClose,
|
||||
},
|
||||
]"
|
||||
@click="onClearIconClick"
|
||||
>
|
||||
<component :is="clearIcon" />
|
||||
@ -158,7 +162,7 @@ import {
|
||||
import dayjs from 'dayjs'
|
||||
import { isEqual } from 'lodash-unified'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { useLocale, useSize } from '@element-plus/hooks'
|
||||
import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
|
||||
import { formContextKey, formItemContextKey } from '@element-plus/tokens'
|
||||
import ElInput from '@element-plus/components/input'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
@ -254,6 +258,10 @@ export default defineComponent({
|
||||
setup(props, ctx) {
|
||||
const { lang } = useLocale()
|
||||
|
||||
const nsDate = useNamespace('date')
|
||||
const nsInput = useNamespace('input')
|
||||
const nsRange = useNamespace('range')
|
||||
|
||||
const elForm = inject(formContextKey, {} as FormContext)
|
||||
const elFormItem = inject(formItemContextKey, {} as FormItemContext)
|
||||
const elPopperOptions = inject('ElPopperOptions', {} as Options)
|
||||
@ -657,6 +665,9 @@ export default defineComponent({
|
||||
})
|
||||
|
||||
return {
|
||||
nsDate,
|
||||
nsInput,
|
||||
nsRange,
|
||||
// injected popper options
|
||||
elPopperOptions,
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="el-time-spinner" :class="{ 'has-seconds': showSeconds }">
|
||||
<div :class="[ns.b('spinner'), { 'has-seconds': showSeconds }]">
|
||||
<template v-if="!arrowControl">
|
||||
<el-scrollbar
|
||||
v-for="item in spinnerItems"
|
||||
:key="item"
|
||||
:ref="(scollbar) => setRef(scollbar, item)"
|
||||
class="el-time-spinner__wrapper"
|
||||
:class="ns.be('spinner', 'wrapper')"
|
||||
wrap-style="max-height: inherit;"
|
||||
view-class="el-time-spinner__list"
|
||||
:view-class="ns.be('spinner', 'list')"
|
||||
noresize
|
||||
tag="ul"
|
||||
@mouseenter="emitSelectRange(item)"
|
||||
@ -16,8 +16,11 @@
|
||||
<li
|
||||
v-for="(disabled, key) in listMap[item].value"
|
||||
:key="key"
|
||||
class="el-time-spinner__item"
|
||||
:class="{ active: key === timePartsMap[item].value, disabled }"
|
||||
:class="[
|
||||
ns.be('spinner', 'item'),
|
||||
ns.is('active', key === timePartsMap[item].value),
|
||||
ns.is('disabled', disabled),
|
||||
]"
|
||||
@click="handleClick(item, { value: key, disabled })"
|
||||
>
|
||||
<template v-if="item === 'hours'">
|
||||
@ -34,30 +37,30 @@
|
||||
<div
|
||||
v-for="item in spinnerItems"
|
||||
:key="item"
|
||||
class="el-time-spinner__wrapper is-arrow"
|
||||
:class="[ns.be('wrapper', 'item'), ns.is('arrow')]"
|
||||
@mouseenter="emitSelectRange(item)"
|
||||
>
|
||||
<el-icon
|
||||
v-repeat-click="onDecreaseClick"
|
||||
class="el-time-spinner__arrow arrow-up"
|
||||
:class="['arrow-up', ns.be('spinner', 'arrow')]"
|
||||
>
|
||||
<arrow-up />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
v-repeat-click="onIncreaseClick"
|
||||
class="el-time-spinner__arrow arrow-down"
|
||||
:class="['arrow-down', ns.be('spinner', 'arrow')]"
|
||||
>
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
<ul class="el-time-spinner__list">
|
||||
<ul :class="ns.be('spinner', 'list')">
|
||||
<li
|
||||
v-for="(time, key) in arrowListMap[item].value"
|
||||
:key="key"
|
||||
class="el-time-spinner__item"
|
||||
:class="{
|
||||
active: time === timePartsMap[item].value,
|
||||
disabled: listMap[item].value[time],
|
||||
}"
|
||||
:class="[
|
||||
ns.be('spinner', 'item'),
|
||||
ns.is('active', time === timePartsMap[item].value),
|
||||
ns.is('disabled', listMap[item].value[time]),
|
||||
]"
|
||||
>
|
||||
<template v-if="typeof time === 'number'">
|
||||
<template v-if="item === 'hours'">
|
||||
@ -81,6 +84,7 @@ import { RepeatClick } from '@element-plus/directives'
|
||||
import ElScrollbar from '@element-plus/components/scrollbar'
|
||||
import ElIcon from '@element-plus/components/icon'
|
||||
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
|
||||
import { useNamespace } from '@element-plus/hooks'
|
||||
import { getTimeLists } from './useTimePicker'
|
||||
|
||||
import type { PropType, Ref } from 'vue'
|
||||
@ -131,6 +135,7 @@ export default defineComponent({
|
||||
emits: ['change', 'select-range', 'set-option'],
|
||||
|
||||
setup(props, ctx) {
|
||||
const ns = useNamespace('time')
|
||||
// data
|
||||
let isScrolling = false
|
||||
const debouncedResetScroll = debounce((type) => {
|
||||
@ -243,11 +248,14 @@ export default defineComponent({
|
||||
adjustCurrentSpinner('seconds')
|
||||
}
|
||||
|
||||
const getScrollbarElement = (el: HTMLElement) =>
|
||||
el.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement
|
||||
|
||||
const adjustSpinner = (type, value) => {
|
||||
if (props.arrowControl) return
|
||||
const el = listRefsMap[type]
|
||||
if (el && el.$el) {
|
||||
el.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(
|
||||
getScrollbarElement(el.$el).scrollTop = Math.max(
|
||||
0,
|
||||
value * typeItemHeight(type)
|
||||
)
|
||||
@ -330,8 +338,7 @@ export default defineComponent({
|
||||
debouncedResetScroll(type)
|
||||
const value = Math.min(
|
||||
Math.round(
|
||||
(listRefsMap[type].$el.querySelector('.el-scrollbar__wrap')
|
||||
.scrollTop -
|
||||
(getScrollbarElement(listRefsMap[type].$el).scrollTop -
|
||||
(scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) +
|
||||
3) /
|
||||
typeItemHeight(type)
|
||||
@ -346,19 +353,18 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const bindScrollEvent = () => {
|
||||
const bindFuntion = (type) => {
|
||||
const bindFunction = (type) => {
|
||||
if (listRefsMap[type] && listRefsMap[type].$el) {
|
||||
listRefsMap[type].$el.querySelector('.el-scrollbar__wrap').onscroll =
|
||||
() => {
|
||||
// TODO: scroll is emitted when set scrollTop programatically
|
||||
// should find better solutions in the future!
|
||||
handleScroll(type)
|
||||
}
|
||||
getScrollbarElement(listRefsMap[type].$el).onscroll = () => {
|
||||
// TODO: scroll is emitted when set scrollTop programatically
|
||||
// should find better solutions in the future!
|
||||
handleScroll(type)
|
||||
}
|
||||
}
|
||||
}
|
||||
bindFuntion('hours')
|
||||
bindFuntion('minutes')
|
||||
bindFuntion('seconds')
|
||||
bindFunction('hours')
|
||||
bindFunction('minutes')
|
||||
bindFunction('seconds')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -392,6 +398,8 @@ export default defineComponent({
|
||||
)
|
||||
|
||||
return {
|
||||
ns,
|
||||
|
||||
setRef,
|
||||
spinnerItems,
|
||||
currentScrollbar,
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<transition :name="transitionName">
|
||||
<div v-if="actualVisible || visible" class="el-time-panel">
|
||||
<div
|
||||
class="el-time-panel__content"
|
||||
:class="{ 'has-seconds': showSeconds }"
|
||||
>
|
||||
<div v-if="actualVisible || visible" :class="ns.b('panel')">
|
||||
<div :class="[ns.be('panel', 'content'), { 'has-seconds': showSeconds }]">
|
||||
<time-spinner
|
||||
ref="spinner"
|
||||
:role="datetimeRole || 'start'"
|
||||
@ -20,17 +17,17 @@
|
||||
@select-range="setSelectionRange"
|
||||
/>
|
||||
</div>
|
||||
<div class="el-time-panel__footer">
|
||||
<div :class="ns.be('panel', 'footer')">
|
||||
<button
|
||||
type="button"
|
||||
class="el-time-panel__btn cancel"
|
||||
:class="[ns.be('panel', 'btn'), 'cancel']"
|
||||
@click="handleCancel"
|
||||
>
|
||||
{{ t('el.datepicker.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="el-time-panel__btn confirm"
|
||||
:class="[ns.be('panel', 'btn'), 'confirm']"
|
||||
@click="handleConfirm()"
|
||||
>
|
||||
{{ t('el.datepicker.confirm') }}
|
||||
@ -44,7 +41,8 @@
|
||||
import { defineComponent, ref, computed, inject } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { EVENT_CODE } from '@element-plus/constants'
|
||||
import { useLocale } from '@element-plus/hooks'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { isUndefined } from '@element-plus/utils'
|
||||
import TimeSpinner from './basic-time-spinner.vue'
|
||||
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
||||
|
||||
@ -77,13 +75,16 @@ export default defineComponent({
|
||||
emits: ['pick', 'select-range', 'set-picker-option'],
|
||||
|
||||
setup(props, ctx) {
|
||||
const ns = useNamespace('time')
|
||||
const { t, lang } = useLocale()
|
||||
// data
|
||||
const selectionRange = ref([0, 2])
|
||||
const oldValue = useOldValue(props)
|
||||
// computed
|
||||
const transitionName = computed(() => {
|
||||
return props.actualVisible === undefined ? 'el-zoom-in-top' : ''
|
||||
return isUndefined(props.actualVisible)
|
||||
? `${ns.namespace.value}-zoom-in-top`
|
||||
: ''
|
||||
})
|
||||
const showSeconds = computed(() => {
|
||||
return props.format.includes('ss')
|
||||
@ -221,6 +222,8 @@ export default defineComponent({
|
||||
getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds)
|
||||
|
||||
return {
|
||||
ns,
|
||||
|
||||
transitionName,
|
||||
arrowControl,
|
||||
onSetOption,
|
||||
|
||||
@ -1,13 +1,20 @@
|
||||
<template>
|
||||
<div v-if="actualVisible" class="el-time-range-picker el-picker-panel">
|
||||
<div class="el-time-range-picker__content">
|
||||
<div class="el-time-range-picker__cell">
|
||||
<div class="el-time-range-picker__header">
|
||||
<div
|
||||
v-if="actualVisible"
|
||||
:class="[nsTime.b('range-picker'), nsPicker.b('panel')]"
|
||||
>
|
||||
<div :class="nsTime.be('range-picker', 'content')">
|
||||
<div :class="nsTime.be('range-picker', 'cell')">
|
||||
<div :class="nsTime.be('range-picker', 'header')">
|
||||
{{ t('el.datepicker.startTime') }}
|
||||
</div>
|
||||
<div
|
||||
:class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
|
||||
class="el-time-range-picker__body el-time-panel__content"
|
||||
:class="[
|
||||
nsTime.be('range-picker', 'body'),
|
||||
nsTime.be('panel', 'content'),
|
||||
nsTime.is('arrow', arrowControl),
|
||||
{ 'has-seconds': showSeconds },
|
||||
]"
|
||||
>
|
||||
<time-spinner
|
||||
ref="minSpinner"
|
||||
@ -25,13 +32,17 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-time-range-picker__cell">
|
||||
<div class="el-time-range-picker__header">
|
||||
<div :class="nsTime.be('range-picker', 'cell')">
|
||||
<div :class="nsTime.be('range-picker', 'header')">
|
||||
{{ t('el.datepicker.endTime') }}
|
||||
</div>
|
||||
<div
|
||||
:class="{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }"
|
||||
class="el-time-range-picker__body el-time-panel__content"
|
||||
:class="[
|
||||
nsTime.be('range-picker', 'body'),
|
||||
nsTime.be('panel', 'content'),
|
||||
nsTime.is('arrow', arrowControl),
|
||||
{ 'has-seconds': showSeconds },
|
||||
]"
|
||||
>
|
||||
<time-spinner
|
||||
ref="maxSpinner"
|
||||
@ -50,17 +61,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-time-panel__footer">
|
||||
<div :class="nsTime.be('panel', 'footer')">
|
||||
<button
|
||||
type="button"
|
||||
class="el-time-panel__btn cancel"
|
||||
:class="[nsTime.be('panel', 'btn'), 'cancel']"
|
||||
@click="handleCancel()"
|
||||
>
|
||||
{{ t('el.datepicker.cancel') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="el-time-panel__btn confirm"
|
||||
:class="[nsTime.be('panel', 'btn'), 'confirm']"
|
||||
:disabled="btnConfirmDisabled"
|
||||
@click="handleConfirm()"
|
||||
>
|
||||
@ -74,7 +85,7 @@
|
||||
import { defineComponent, ref, computed, inject } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { union } from 'lodash-unified'
|
||||
import { useLocale } from '@element-plus/hooks'
|
||||
import { useLocale, useNamespace } from '@element-plus/hooks'
|
||||
import { EVENT_CODE } from '@element-plus/constants'
|
||||
import TimeSpinner from './basic-time-spinner.vue'
|
||||
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
||||
@ -108,6 +119,8 @@ export default defineComponent({
|
||||
|
||||
setup(props, ctx) {
|
||||
const { t, lang } = useLocale()
|
||||
const nsTime = useNamespace('time')
|
||||
const nsPicker = useNamespace('picker')
|
||||
const minDate = computed(() => props.parsedValue[0])
|
||||
const maxDate = computed(() => props.parsedValue[1])
|
||||
const oldValue = useOldValue(props)
|
||||
@ -343,6 +356,8 @@ export default defineComponent({
|
||||
} = pickerBase.props
|
||||
|
||||
return {
|
||||
nsTime,
|
||||
nsPicker,
|
||||
arrowControl,
|
||||
onSetOption,
|
||||
setMaxSelectionRange,
|
||||
|
||||
@ -16,8 +16,7 @@
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
&
|
||||
.#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
|
||||
&.#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -30,7 +29,7 @@
|
||||
transform: translateY(-32px);
|
||||
}
|
||||
|
||||
.#{$namespace}-time-spinner__item:hover:not(.disabled):not(.active) {
|
||||
.#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
|
||||
background: $color-white;
|
||||
cursor: default;
|
||||
}
|
||||
@ -94,17 +93,17 @@
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
&:hover:not(.disabled):not(.active) {
|
||||
&:hover:not(.is-disabled):not(.is-active) {
|
||||
background: getCssVar('fill-color', 'light');
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active:not(.disabled) {
|
||||
&.is-active:not(.is-disabled) {
|
||||
color: var(--el-text-color-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&.is-disabled {
|
||||
color: var(--el-text-color-placeholder);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user