UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

283 lines 10.2 kB
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; import _extends from "@babel/runtime/helpers/esm/extends"; import { createVNode as _createVNode } from "vue"; import useMergedState from '../_util/hooks/useMergedState'; import { PickerPanel } from '../vc-picker'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; import enUS from './locale/en_US'; import CalendarHeader from './Header'; import { computed, defineComponent, toRef } from 'vue'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; // CSSINJS import useStyle from './style'; function generateCalendar(generateConfig) { function isSameYear(date1, date2) { return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2); } function isSameMonth(date1, date2) { return isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2); } function isSameDate(date1, date2) { return isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2); } const Calendar = defineComponent({ name: 'ACalendar', inheritAttrs: false, props: { prefixCls: String, locale: { type: Object, default: undefined }, validRange: { type: Array, default: undefined }, disabledDate: { type: Function, default: undefined }, dateFullCellRender: { type: Function, default: undefined }, dateCellRender: { type: Function, default: undefined }, monthFullCellRender: { type: Function, default: undefined }, monthCellRender: { type: Function, default: undefined }, headerRender: { type: Function, default: undefined }, value: { type: [Object, String], default: undefined }, defaultValue: { type: [Object, String], default: undefined }, mode: { type: String, default: undefined }, fullscreen: { type: Boolean, default: undefined }, onChange: { type: Function, default: undefined }, 'onUpdate:value': { type: Function, default: undefined }, onPanelChange: { type: Function, default: undefined }, onSelect: { type: Function, default: undefined }, valueFormat: { type: String, default: undefined } }, slots: Object, setup(p, _ref) { let { emit, slots, attrs } = _ref; const props = p; const { prefixCls, direction } = useConfigInject('picker', props); // style const [wrapSSR, hashId] = useStyle(prefixCls); const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`); const maybeToString = date => { return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date; }; const value = computed(() => { if (props.value) { return props.valueFormat ? generateConfig.toDate(props.value, props.valueFormat) : props.value; } return props.value === '' ? undefined : props.value; }); const defaultValue = computed(() => { if (props.defaultValue) { return props.valueFormat ? generateConfig.toDate(props.defaultValue, props.valueFormat) : props.defaultValue; } return props.defaultValue === '' ? undefined : props.defaultValue; }); // Value const [mergedValue, setMergedValue] = useMergedState(() => value.value || generateConfig.getNow(), { defaultValue: defaultValue.value, value }); // Mode const [mergedMode, setMergedMode] = useMergedState('month', { value: toRef(props, 'mode') }); const panelMode = computed(() => mergedMode.value === 'year' ? 'month' : 'date'); const mergedDisabledDate = computed(() => { return date => { var _a; const notInRange = props.validRange ? generateConfig.isAfter(props.validRange[0], date) || generateConfig.isAfter(date, props.validRange[1]) : false; return notInRange || !!((_a = props.disabledDate) === null || _a === void 0 ? void 0 : _a.call(props, date)); }; }); // ====================== Events ====================== const triggerPanelChange = (date, newMode) => { emit('panelChange', maybeToString(date), newMode); }; const triggerChange = date => { setMergedValue(date); if (!isSameDate(date, mergedValue.value)) { // Trigger when month panel switch month if (panelMode.value === 'date' && !isSameMonth(date, mergedValue.value) || panelMode.value === 'month' && !isSameYear(date, mergedValue.value)) { triggerPanelChange(date, mergedMode.value); } const val = maybeToString(date); emit('update:value', val); emit('change', val); } }; const triggerModeChange = newMode => { setMergedMode(newMode); triggerPanelChange(mergedValue.value, newMode); }; const onInternalSelect = (date, source) => { triggerChange(date); emit('select', maybeToString(date), { source }); }; // ====================== Locale ====================== const defaultLocale = computed(() => { const { locale } = props; const result = _extends(_extends({}, enUS), locale); result.lang = _extends(_extends({}, result.lang), (locale || {}).lang); return result; }); const [mergedLocale] = useLocaleReceiver('Calendar', defaultLocale); return () => { const today = generateConfig.getNow(); const { dateFullCellRender = slots === null || slots === void 0 ? void 0 : slots.dateFullCellRender, dateCellRender = slots === null || slots === void 0 ? void 0 : slots.dateCellRender, monthFullCellRender = slots === null || slots === void 0 ? void 0 : slots.monthFullCellRender, monthCellRender = slots === null || slots === void 0 ? void 0 : slots.monthCellRender, headerRender = slots === null || slots === void 0 ? void 0 : slots.headerRender, fullscreen = true, validRange } = props; // ====================== Render ====================== const dateRender = _ref2 => { let { current: date } = _ref2; if (dateFullCellRender) { return dateFullCellRender({ current: date }); } return _createVNode("div", { "class": classNames(`${prefixCls.value}-cell-inner`, `${calendarPrefixCls.value}-date`, { [`${calendarPrefixCls.value}-date-today`]: isSameDate(today, date) }) }, [_createVNode("div", { "class": `${calendarPrefixCls.value}-date-value` }, [String(generateConfig.getDate(date)).padStart(2, '0')]), _createVNode("div", { "class": `${calendarPrefixCls.value}-date-content` }, [dateCellRender && dateCellRender({ current: date })])]); }; const monthRender = (_ref3, locale) => { let { current: date } = _ref3; if (monthFullCellRender) { return monthFullCellRender({ current: date }); } const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale); return _createVNode("div", { "class": classNames(`${prefixCls.value}-cell-inner`, `${calendarPrefixCls.value}-date`, { [`${calendarPrefixCls.value}-date-today`]: isSameMonth(today, date) }) }, [_createVNode("div", { "class": `${calendarPrefixCls.value}-date-value` }, [months[generateConfig.getMonth(date)]]), _createVNode("div", { "class": `${calendarPrefixCls.value}-date-content` }, [monthCellRender && monthCellRender({ current: date })])]); }; return wrapSSR(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, { "class": classNames(calendarPrefixCls.value, { [`${calendarPrefixCls.value}-full`]: fullscreen, [`${calendarPrefixCls.value}-mini`]: !fullscreen, [`${calendarPrefixCls.value}-rtl`]: direction.value === 'rtl' }, attrs.class, hashId.value) }), [headerRender ? headerRender({ value: mergedValue.value, type: mergedMode.value, onChange: nextDate => { onInternalSelect(nextDate, 'customize'); }, onTypeChange: triggerModeChange }) : _createVNode(CalendarHeader, { "prefixCls": calendarPrefixCls.value, "value": mergedValue.value, "generateConfig": generateConfig, "mode": mergedMode.value, "fullscreen": fullscreen, "locale": mergedLocale.value.lang, "validRange": validRange, "onChange": onInternalSelect, "onModeChange": triggerModeChange }, null), _createVNode(PickerPanel, { "value": mergedValue.value, "prefixCls": prefixCls.value, "locale": mergedLocale.value.lang, "generateConfig": generateConfig, "dateRender": dateRender, "monthCellRender": obj => monthRender(obj, mergedLocale.value.lang), "onSelect": nextDate => { onInternalSelect(nextDate, panelMode.value); }, "mode": panelMode.value, "picker": panelMode.value, "disabledDate": mergedDisabledDate.value, "hideHeader": true }, null)])); }; } }); Calendar.install = function (app) { app.component(Calendar.name, Calendar); return app; }; return Calendar; } export default generateCalendar;