| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283 |
- 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;
|