test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-13 17:05:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(components): useNamespace for date-picker (#7911)

Browse Source
This commit is contained in:
云游君 2022-05-27 11:45:04 +08:00 committed by GitHub
parent f7b8c33035
commit 49ed2f6907
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 134 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/components/date-picker/src/date-picker-com/basic-date-table.vue
View File

@ -4,8 +4,7 @@
:aria-label="t('el.datepicker.dateTablePrompt')"
cellspacing="0"
cellpadding="0"
class="el-date-table"
:class="{ 'is-week-mode': selectionMode === 'week' }"
:class="[ns.b(), { 'is-week-mode': selectionMode === 'week' }]"
@click="handlePickDate"
@mousemove="handleMouseMove"
>
@ -24,8 +23,7 @@
<tr
v-for="(row, key) in rows"
:key="key"
class="el-date-table__row"
:class="{ current: isWeekActive(row[1]) }"
:class="[ns.e('row'), { current: isWeekActive(row[1]) }]"
>
<td
v-for="(cell, key_) in row"
@ -47,7 +45,7 @@
<script lang="ts">
import { computed, defineComponent, nextTick, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { castArray } from '@element-plus/utils'
import { basicDateTableProps } from '../props/basic-date-table'
import ElDatePickerCell from './basic-cell-render'
@ -63,6 +61,8 @@ export default defineComponent({
emits: ['changerange', 'pick', 'select'],
expose: ['focus'],
setup(props, ctx) {
const ns = useNamespace('date-table')
const { t, lang } = useLocale()
const tbodyRef = ref<HTMLElement>()
@ -428,6 +428,7 @@ export default defineComponent({
}
return {
ns,
tbodyRef,
currentCellRef,
handleMouseMove,

7
packages/components/date-picker/src/date-picker-com/basic-month-table.vue
View File

@ -2,7 +2,7 @@
<table
role="grid"
:aria-label="t('el.datepicker.monthTablePrompt')"
class="el-month-table"
:class="ns.b()"
@click="handleMonthTableClick"
@mousemove="handleMouseMove"
>
@ -33,7 +33,7 @@
<script lang="ts">
import { computed, defineComponent, nextTick, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { rangeArr } from '@element-plus/components/time-picker'
import { castArray, hasClass } from '@element-plus/utils'
import { basicMonthTableProps } from '../props/basic-month-table'
@ -51,6 +51,8 @@ export default defineComponent({
expose: ['focus'],
setup(props, ctx) {
const ns = useNamespace('month-table')
const { t, lang } = useLocale()
const tbodyRef = ref<HTMLElement>()
const currentCellRef = ref<HTMLElement>()
@ -234,6 +236,7 @@ export default defineComponent({
}
return {
ns,
tbodyRef,
currentCellRef,
handleMouseMove,

7
packages/components/date-picker/src/date-picker-com/basic-year-table.vue
View File

@ -2,7 +2,7 @@
<table
role="grid"
:aria-label="t('el.datepicker.yearTablePrompt')"
class="el-year-table"
:class="ns.b()"
@click="handleYearTableClick"
>
<tbody ref="tbodyRef">
@ -33,7 +33,7 @@
<script lang="ts">
import { computed, defineComponent, nextTick, ref, watch } from 'vue'
import dayjs from 'dayjs'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { rangeArr } from '@element-plus/components/time-picker'
import { castArray, hasClass } from '@element-plus/utils'
import { basicYearTableProps } from '../props/basic-year-table'
@ -52,6 +52,8 @@ export default defineComponent({
expose: ['focus'],
setup(props, ctx) {
const ns = useNamespace('year-table')
const { t, lang } = useLocale()
const tbodyRef = ref<HTMLElement>()
const currentCellRef = ref<HTMLElement>()
@ -108,6 +110,7 @@ export default defineComponent({
}
}
return {
ns,
t,
tbodyRef,
currentCellRef,

68
packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
View File

@ -1,29 +1,30 @@
<template>
<div
class="el-picker-panel el-date-picker"
:class="[
ppNs.b(),
dpNs.b(),
{
'has-sidebar': $slots.sidebar || hasShortcuts,
'has-time': showTime,
},
]"
>
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar" />
<div v-if="hasShortcuts" class="el-picker-panel__sidebar">
<div :class="ppNs.e('body-wrapper')">
<slot name="sidebar" :class="ppNs.e('sidebar')" />
<div v-if="hasShortcuts" :class="ppNs.e('sidebar')">
<button
v-for="(shortcut, key) in shortcuts"
:key="key"
type="button"
class="el-picker-panel__shortcut"
:class="ppNs.e('shortcut')"
@click="handleShortcutClick(shortcut)"
>
{{ shortcut.text }}
</button>
</div>
<div class="el-picker-panel__body">
<div v-if="showTime" class="el-date-picker__time-header">
<span class="el-date-picker__editor-wrap">
<div :class="ppNs.e('body')">
<div v-if="showTime" :class="dpNs.e('time-header')">
<span :class="dpNs.e('editor-wrap')">
<el-input
:placeholder="t('el.datepicker.selectDate')"
:model-value="visibleDate"
@ -34,7 +35,7 @@
</span>
<span
v-clickoutside="handleTimePickClose"
class="el-date-picker__editor-wrap"
:class="dpNs.e('editor-wrap')"
>
<el-input
:placeholder="t('el.datepicker.selectTime')"
@ -55,17 +56,18 @@
</div>
<div
v-show="currentView !== 'time'"
class="el-date-picker__header"
:class="{
'el-date-picker__header--bordered':
currentView === 'year' || currentView === 'month',
}"
:class="[
dpNs.e('header'),
(currentView === 'year' || currentView === 'month') &&
dpNs.e('header--bordered'),
]"
>
<span class="el-date-picker__prev-btn">
<span :class="dpNs.e('prev-btn')">
<button
type="button"
:aria-label="t(`el.datepicker.prevYear`)"
class="el-picker-panel__icon-btn d-arrow-left"
class="d-arrow-left"
:class="ppNs.e('icon-btn')"
@click="prevYear_"
>
<el-icon><d-arrow-left /></el-icon>
@ -74,7 +76,8 @@
v-show="currentView === 'date'"
type="button"
:aria-label="t(`el.datepicker.prevMonth`)"
class="el-picker-panel__icon-btn arrow-left"
:class="ppNs.e('icon-btn')"
class="arrow-left"
@click="prevMonth_"
>
<el-icon><arrow-left /></el-icon>
@ -82,7 +85,7 @@
</span>
<span
role="button"
class="el-date-picker__header-label"
:class="dpNs.e('header-label')"
aria-live="polite"
tabindex="0"
@keydown.enter="showYearPicker"
@ -92,20 +95,23 @@
<span
v-show="currentView === 'date'"
role="button"
class="el-date-picker__header-label"
aria-live="polite"
tabindex="0"
:class="{ active: currentView === 'month' }"
:class="[
dpNs.e('header-label'),
{ active: currentView === 'month' },
]"
@keydown.enter="showMonthPicker"
@click="showMonthPicker"
>{{ t(`el.datepicker.month${month + 1}`) }}</span
>
<span class="el-date-picker__next-btn">
<span :class="dpNs.e('next-btn')">
<button
v-show="currentView === 'date'"
type="button"
:aria-label="t(`el.datepicker.nextMonth`)"
class="el-picker-panel__icon-btn arrow-right"
:class="ppNs.e('icon-btn')"
class="arrow-right"
@click="nextMonth_"
>
<el-icon><arrow-right /></el-icon>
@ -113,14 +119,15 @@
<button
type="button"
:aria-label="t(`el.datepicker.nextYear`)"
class="el-picker-panel__icon-btn d-arrow-right"
:class="ppNs.e('icon-btn')"
class="d-arrow-right"
@click="nextYear_"
>
<el-icon><d-arrow-right /></el-icon>
</button>
</span>
</div>
<div class="el-picker-panel__content" @keydown="handleKeydownTable">
<div :class="ppNs.e('content')" @keydown="handleKeydownTable">
<date-table
v-if="currentView === 'date'"
ref="currentViewRef"
@ -152,13 +159,13 @@
</div>
<div
v-show="footerVisible && currentView === 'date'"
class="el-picker-panel__footer"
:class="ppNs.e('footer')"
>
<el-button
v-show="selectionMode !== 'dates'"
text
size="small"
class="el-picker-panel__link-btn"
:class="ppNs.e('link-btn')"
@click="changeToNow"
>
{{ t('el.datepicker.now') }}
@ -166,7 +173,7 @@
<el-button
plain
size="small"
class="el-picker-panel__link-btn"
:class="ppNs.e('link-btn')"
@click="onConfirm"
>
{{ t('el.datepicker.confirm') }}
@ -188,7 +195,7 @@ import {
import dayjs from 'dayjs'
import ElButton from '@element-plus/components/button'
import { ClickOutside } from '@element-plus/directives'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import ElInput from '@element-plus/components/input'
import {
TimePickPanel,
@ -236,6 +243,9 @@ export default defineComponent({
props: panelDatePickProps,
emits: ['pick', 'set-picker-option', 'panel-change'],
setup(props, ctx) {
const ppNs = useNamespace('picker-panel')
const dpNs = useNamespace('date-picker')
const { t, lang } = useLocale()
const pickerBase = inject('EP_PICKER_BASE') as any
const popper = inject(TOOLTIP_INJECTION_KEY)
@ -745,6 +755,8 @@ export default defineComponent({
)
return {
ppNs,
dpNs,
currentViewRef,
handleTimePick,
handleTimePickClose,

94
packages/components/date-picker/src/date-picker-com/panel-date-range.vue
View File

@ -1,35 +1,36 @@
<template>
<div
class="el-picker-panel el-date-range-picker"
:class="[
ppNs.b(),
drpNs.b(),
{
'has-sidebar': $slots.sidebar || hasShortcuts,
'has-time': showTime,
},
]"
>
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar" />
<div v-if="hasShortcuts" class="el-picker-panel__sidebar">
<div :class="ppNs.e('body-wrapper')">
<slot name="sidebar" :class="ppNs.e('sidebar')" />
<div v-if="hasShortcuts" :class="ppNs.e('sidebar')">
<button
v-for="(shortcut, key) in shortcuts"
:key="key"
type="button"
class="el-picker-panel__shortcut"
:class="ppNs.e('shortcut')"
@click="handleShortcutClick(shortcut)"
>
{{ shortcut.text }}
</button>
</div>
<div class="el-picker-panel__body">
<div v-if="showTime" class="el-date-range-picker__time-header">
<span class="el-date-range-picker__editors-wrap">
<span class="el-date-range-picker__time-picker-wrap">
<div :class="ppNs.e('body')">
<div v-if="showTime" :class="drpNs.e('time-header')">
<span :class="drpNs.e('editors-wrap')">
<span :class="drpNs.e('time-picker-wrap')">
<el-input
size="small"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.startDate')"
class="el-date-range-picker__editor"
:class="drpNs.e('editor')"
:model-value="minVisibleDate"
@input="(val) => handleDateInput(val, 'min')"
@change="(val) => handleDateChange(val, 'min')"
@ -37,11 +38,11 @@
</span>
<span
v-clickoutside="handleMinTimeClose"
class="el-date-range-picker__time-picker-wrap"
:class="drpNs.e('time-picker-wrap')"
>
<el-input
size="small"
class="el-date-range-picker__editor"
:class="drpNs.e('editor')"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.startTime')"
:model-value="minVisibleTime"
@ -62,11 +63,11 @@
<span>
<el-icon><arrow-right /></el-icon>
</span>
<span class="el-date-range-picker__editors-wrap is-right">
<span class="el-date-range-picker__time-picker-wrap">
<span :class="drpNs.e('editors-wrap')" class="is-right">
<span :class="drpNs.e('time-picker-wrap')">
<el-input
size="small"
class="el-date-range-picker__editor"
:class="drpNs.e('editor')"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.endDate')"
:model-value="maxVisibleDate"
@ -77,11 +78,11 @@
</span>
<span
v-clickoutside="handleMaxTimeClose"
class="el-date-range-picker__time-picker-wrap"
:class="drpNs.e('time-picker-wrap')"
>
<el-input
size="small"
class="el-date-range-picker__editor"
:class="drpNs.e('editor')"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.endTime')"
:model-value="maxVisibleTime"
@ -101,20 +102,20 @@
</span>
</span>
</div>
<div
class="el-picker-panel__content el-date-range-picker__content is-left"
>
<div class="el-date-range-picker__header">
<div :class="[ppNs.e('content'), drpNs.e('content')]" class="is-left">
<div :class="drpNs.e('header')">
<button
type="button"
class="el-picker-panel__icon-btn d-arrow-left"
:class="ppNs.e('icon-btn')"
class="d-arrow-left"
@click="leftPrevYear"
>
<el-icon><d-arrow-left /></el-icon>
</button>
<button
type="button"
class="el-picker-panel__icon-btn arrow-left"
:class="ppNs.e('icon-btn')"
class="arrow-left"
@click="leftPrevMonth"
>
<el-icon><arrow-left /></el-icon>
@ -123,8 +124,8 @@
v-if="unlinkPanels"
type="button"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn d-arrow-right"
:class="[ppNs.e('icon-btn'), { 'is-disabled': !enableYearArrow }]"
class="d-arrow-right"
@click="leftNextYear"
>
<el-icon><d-arrow-right /></el-icon>
@ -133,8 +134,11 @@
v-if="unlinkPanels"
type="button"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn arrow-right"
:class="[
ppNs.e('icon-btn'),
{ 'is-disabled': !enableMonthArrow },
]"
class="arrow-right"
@click="leftNextMonth"
>
<el-icon><arrow-right /></el-icon>
@ -154,16 +158,14 @@
@select="onSelect"
/>
</div>
<div
class="el-picker-panel__content el-date-range-picker__content is-right"
>
<div class="el-date-range-picker__header">
<div :class="[ppNs.e('content'), drpNs.e('content')]" class="is-right">
<div :class="drpNs.e('header')">
<button
v-if="unlinkPanels"
type="button"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn d-arrow-left"
:class="[ppNs.e('icon-btn'), { 'is-disabled': !enableYearArrow }]"
class="d-arrow-left"
@click="rightPrevYear"
>
<el-icon><d-arrow-left /></el-icon>
@ -172,22 +174,27 @@
v-if="unlinkPanels"
type="button"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn arrow-left"
:class="[
ppNs.e('icon-btn'),
{ 'is-disabled': !enableMonthArrow },
]"
class="arrow-left"
@click="rightPrevMonth"
>
<el-icon><arrow-left /></el-icon>
</button>
<button
type="button"
class="el-picker-panel__icon-btn d-arrow-right"
:class="ppNs.e('icon-btn')"
class="d-arrow-right"
@click="rightNextYear"
>
<el-icon><d-arrow-right /></el-icon>
</button>
<button
type="button"
class="el-picker-panel__icon-btn arrow-right"
:class="ppNs.e('icon-btn')"
class="arrow-right"
@click="rightNextMonth"
>
<el-icon><arrow-right /></el-icon>
@ -209,12 +216,12 @@
</div>
</div>
</div>
<div v-if="showTime" class="el-picker-panel__footer">
<div v-if="showTime" :class="ppNs.e('footer')">
<el-button
v-if="clearable"
text
size="small"
class="el-picker-panel__link-btn"
:class="ppNs.e('link-btn')"
@click="handleClear"
>
{{ t('el.datepicker.clear') }}
@ -222,7 +229,7 @@
<el-button
plain
size="small"
class="el-picker-panel__link-btn"
:class="ppNs.e('link-btn')"
:disabled="btnDisabled"
@click="handleConfirm(false)"
>
@ -237,7 +244,7 @@ import { computed, defineComponent, inject, ref, toRef, watch } from 'vue'
import dayjs from 'dayjs'
import ElButton from '@element-plus/components/button'
import { ClickOutside } from '@element-plus/directives'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import ElInput from '@element-plus/components/input'
import {
TimePickPanel,
@ -276,6 +283,9 @@ export default defineComponent({
emits: ['pick', 'set-picker-option', 'calendar-change', 'panel-change'],
setup(props, ctx) {
const ppNs = useNamespace('picker-panel')
const drpNs = useNamespace('date-range-picker')
const { t, lang } = useLocale()
const leftDate = ref(dayjs().locale(lang.value))
const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))
@ -759,6 +769,8 @@ export default defineComponent({
)
return {
ppNs,
drpNs,
shortcuts,
disabledDate,
cellClassName,

46
packages/components/date-picker/src/date-picker-com/panel-month-range.vue
View File

@ -1,33 +1,33 @@
<template>
<div
class="el-picker-panel el-date-range-picker"
:class="[
ppNs.b(),
drpNs.b(),
{
'has-sidebar': $slots.sidebar || hasShortcuts,
},
]"
>
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar" />
<div v-if="hasShortcuts" class="el-picker-panel__sidebar">
<div :class="ppNs.e('body-wrapper')">
<slot name="sidebar" :class="ppNs.e('sidebar')" />
<div v-if="hasShortcuts" :class="ppNs.e('sidebar')">
<button
v-for="(shortcut, key) in shortcuts"
:key="key"
type="button"
class="el-picker-panel__shortcut"
:class="ppNs.e('shortcut')"
@click="handleShortcutClick(shortcut)"
>
{{ shortcut.text }}
</button>
</div>
<div class="el-picker-panel__body">
<div
class="el-picker-panel__content el-date-range-picker__content is-left"
>
<div class="el-date-range-picker__header">
<div :class="ppNs.e('body')">
<div :class="[ppNs.e('content'), drpNs.e('content')]" class="is-left">
<div :class="drpNs.e('header')">
<button
type="button"
class="el-picker-panel__icon-btn d-arrow-left"
:class="ppNs.e('icon-btn')"
class="d-arrow-left"
@click="leftPrevYear"
>
<el-icon><d-arrow-left /></el-icon>
@ -36,8 +36,8 @@
v-if="unlinkPanels"
type="button"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn d-arrow-right"
:class="[ppNs.e('icon-btn'), { 'is-disabled': !enableYearArrow }]"
class="d-arrow-right"
@click="leftNextYear"
>
<el-icon><d-arrow-right /></el-icon>
@ -56,23 +56,22 @@
@select="onSelect"
/>
</div>
<div
class="el-picker-panel__content el-date-range-picker__content is-right"
>
<div class="el-date-range-picker__header">
<div :class="[ppNs.e('content'), drpNs.e('content')]" class="is-right">
<div :class="drpNs.e('header')">
<button
v-if="unlinkPanels"
type="button"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn d-arrow-left"
:class="[ppNs.e('icon-btn'), { 'is-disabled': !enableYearArrow }]"
class="d-arrow-left"
@click="rightPrevYear"
>
<el-icon><d-arrow-left /></el-icon>
</button>
<button
type="button"
class="el-picker-panel__icon-btn d-arrow-right"
:class="ppNs.e('icon-btn')"
class="d-arrow-right"
@click="rightNextYear"
>
<el-icon><d-arrow-right /></el-icon>
@ -100,7 +99,7 @@
import { computed, defineComponent, inject, ref, toRef, watch } from 'vue'
import dayjs from 'dayjs'
import ElIcon from '@element-plus/components/icon'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import { panelMonthRangeProps } from '../props/panel-month-range'
import MonthTable from './basic-month-table.vue'
@ -115,6 +114,9 @@ export default defineComponent({
emits: ['pick', 'set-picker-option'],
setup(props, ctx) {
const ppNs = useNamespace('picker-panel')
const drpNs = useNamespace('date-range-picker')
const { t, lang } = useLocale()
const leftDate = ref(dayjs().locale(lang.value))
const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))
@ -300,6 +302,8 @@ export default defineComponent({
)
return {
ppNs,
drpNs,
shortcuts,
disabledDate,
onSelect,