mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [calendar] add namespace (#5496)

Browse Source
This commit is contained in:
Valar103769 2022-01-20 06:04:41 +08:00 committed by GitHub
parent 62a38138f6
commit c552c3b700
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/components/calendar/src/calendar.vue
View File

@ -1,12 +1,9 @@
<template>
<div class="el-calendar">
<div class="el-calendar__header">
<div :class="ns.b()">
<div :class="ns.e('header')">
<slot name="header" :date="i18nDate">
<div class="el-calendar__title">{{ i18nDate }}</div>
<div
v-if="validatedRange.length === 0"
class="el-calendar__button-group"
>
<div :class="ns.e('title')">{{ i18nDate }}</div>
<div v-if="validatedRange.length === 0" :class="ns.e('button-group')">
<el-button-group>
<el-button size="small" @click="selectDate('prev-month')">
{{ t('el.datepicker.prevMonth') }}
@ -21,14 +18,14 @@
</div>
</slot>
</div>
<div v-if="validatedRange.length === 0" class="el-calendar__body">
<div v-if="validatedRange.length === 0" :class="ns.e('body')">
<date-table :date="date" :selected-day="realSelectedDay" @pick="pickDay">
<template v-if="$slots.dateCell" #dateCell="data">
<slot name="dateCell" v-bind="data"></slot>
</template>
</date-table>
</div>
<div v-else class="el-calendar__body">
<div v-else :class="ns.e('body')">
<date-table
v-for="(range_, index) in validatedRange"
:key="index"
@ -50,7 +47,7 @@
import { ref, computed, defineComponent } from 'vue'
import dayjs from 'dayjs'
import { ElButton, ElButtonGroup } from '@element-plus/components/button'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { debugWarn } from '@element-plus/utils/error'
import DateTable from './date-table.vue'
import { calendarProps, calendarEmits } from './calendar'
@ -78,6 +75,8 @@ export default defineComponent({
emits: calendarEmits,
setup(props, { emit }) {
const ns = useNamespace('calendar')
const { t, lang } = useLocale()
const selectedDay = ref<Dayjs>()
const now = dayjs().locale(lang.value)
@ -262,6 +261,8 @@ export default defineComponent({
pickDay,
selectDate,
t,
ns,
}
},
})

18
packages/components/calendar/src/date-table.vue
View File

@ -1,9 +1,6 @@
<template>
<table
:class="{
'el-calendar-table': true,
'is-range': isInRange,
}"
:class="[nsTable.b(), nsTable.is('range', isInRange)]"
cellspacing="0"
cellpadding="0"
>
@ -16,8 +13,8 @@
v-for="(row, index) in rows"
:key="index"
:class="{
'el-calendar-table__row': true,
'el-calendar-table__row--hide-border': index === 0 && hideHeader,
[nsTable.e('row')]: true,
[nsTable.em('row', 'hide-border')]: index === 0 && hideHeader,
}"
>
<td
@ -26,7 +23,7 @@
:class="getCellClass(cell)"
@click="handlePickDay(cell)"
>
<div class="el-calendar-day">
<div :class="nsDay.b()">
<slot name="dateCell" :data="getSlotData(cell)">
<span>{{ cell.text }}</span>
</slot>
@ -41,7 +38,7 @@
import { computed, defineComponent } from 'vue'
import dayjs from 'dayjs'
import localeData from 'dayjs/plugin/localeData'
import { useLocale } from '@element-plus/hooks'
import { useLocale, useNamespace } from '@element-plus/hooks'
import { rangeArr } from '@element-plus/components/time-picker'
import { dateTableProps, dateTableEmits } from './date-table'
import type { Dayjs } from 'dayjs'
@ -77,6 +74,8 @@ export default defineComponent({
setup(props, { emit }) {
const { t, lang } = useLocale()
const nsTable = useNamespace('calendar-table')
const nsDay = useNamespace('calendar-day')
const now = dayjs().locale(lang.value)
// todo better way to get Day.js locale object
@ -187,6 +186,9 @@ export default defineComponent({
getCellClass,
handlePickDay,
getSlotData,
nsTable,
nsDay,
}
},
})