element-plus
Version:
A Component Library for Vue 3
1 lines • 3.91 kB
Source Map (JSON)
{"version":3,"file":"calendar2.mjs","sources":["../../../../../../packages/components/calendar/src/calendar.vue"],"sourcesContent":["<template>\n <div :class=\"ns.b()\">\n <div :class=\"ns.e('header')\">\n <slot name=\"header\" :date=\"i18nDate\">\n <div :class=\"ns.e('title')\">{{ i18nDate }}</div>\n <div v-if=\"validatedRange.length === 0\" :class=\"ns.e('button-group')\">\n <el-button-group>\n <el-button size=\"small\" @click=\"selectDate('prev-month')\">\n {{ t('el.datepicker.prevMonth') }}\n </el-button>\n <el-button size=\"small\" @click=\"selectDate('today')\">\n {{ t('el.datepicker.today') }}\n </el-button>\n <el-button size=\"small\" @click=\"selectDate('next-month')\">\n {{ t('el.datepicker.nextMonth') }}\n </el-button>\n </el-button-group>\n </div>\n </slot>\n </div>\n <div v-if=\"validatedRange.length === 0\" :class=\"ns.e('body')\">\n <date-table :date=\"date\" :selected-day=\"realSelectedDay\" @pick=\"pickDay\">\n <template v-if=\"$slots['date-cell']\" #date-cell=\"data\">\n <slot name=\"date-cell\" v-bind=\"data\" />\n </template>\n </date-table>\n </div>\n <div v-else :class=\"ns.e('body')\">\n <date-table\n v-for=\"(range_, index) in validatedRange\"\n :key=\"index\"\n :date=\"range_[0]\"\n :selected-day=\"realSelectedDay\"\n :range=\"range_\"\n :hide-header=\"index !== 0\"\n @pick=\"pickDay\"\n >\n <template v-if=\"$slots['date-cell']\" #date-cell=\"data\">\n <slot name=\"date-cell\" v-bind=\"data\" />\n </template>\n </date-table>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { ElButton, ElButtonGroup } from '@element-plus/components/button'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\n\nimport DateTable from './date-table.vue'\nimport { useCalendar } from './use-calendar'\nimport { calendarEmits, calendarProps } from './calendar'\n\nconst ns = useNamespace('calendar')\n\nconst COMPONENT_NAME = 'ElCalendar'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = defineProps(calendarProps)\nconst emit = defineEmits(calendarEmits)\n\nconst {\n calculateValidatedDateRange,\n date,\n pickDay,\n realSelectedDay,\n selectDate,\n validatedRange,\n} = useCalendar(props, emit, COMPONENT_NAME)\n\nconst { t } = useLocale()\n\nconst i18nDate = computed(() => {\n const pickedMonth = `el.datepicker.month${date.value.format('M')}`\n return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`\n})\n\ndefineExpose({\n /** @description currently selected date */\n selectedDay: realSelectedDay,\n /** @description select a specific date */\n pickDay,\n /** @description select date */\n selectDate,\n /** @description Calculate the validate date range according to the start and end dates */\n calculateValidatedDateRange,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;mCAyDc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;;AALA,IAAM,MAAA,EAAA,GAAK,aAAa,UAAU,CAAA,CAAA;AAUlC,IAAM,MAAA;AAAA,MACJ,2BAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,KACE,GAAA,WAAA,CAAY,KAAO,EAAA,IAAA,EAAM,cAAc,CAAA,CAAA;AAE3C,IAAM,MAAA,EAAE,MAAM,SAAU,EAAA,CAAA;AAExB,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAA,MAAM,WAAc,GAAA,CAAA,mBAAA,EAAsB,IAAK,CAAA,KAAA,CAAM,OAAO,GAAG,CAAA,CAAA,CAAA,CAAA;AAC/D,MAAO,OAAA,CAAA,EAAG,KAAK,KAAM,CAAA,IAAA,MAAU,CAAE,CAAA,oBAAoB,CAAK,CAAA,CAAA,EAAA,CAAA,CAAE,WAAW,CAAA,CAAA,CAAA,CAAA;AAAA,KACxE,CAAA,CAAA;AAED,IAAa,MAAA,CAAA;AAAA,MAEX,WAAa,EAAA,eAAA;AAAA,MAEb,OAAA;AAAA,MAEA,UAAA;AAAA,MAEA,2BAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}