generateCalendar.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { createVNode as _createVNode } from "vue";
  4. import useMergedState from '../_util/hooks/useMergedState';
  5. import { PickerPanel } from '../vc-picker';
  6. import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
  7. import enUS from './locale/en_US';
  8. import CalendarHeader from './Header';
  9. import { computed, defineComponent, toRef } from 'vue';
  10. import useConfigInject from '../config-provider/hooks/useConfigInject';
  11. import classNames from '../_util/classNames';
  12. // CSSINJS
  13. import useStyle from './style';
  14. function generateCalendar(generateConfig) {
  15. function isSameYear(date1, date2) {
  16. return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
  17. }
  18. function isSameMonth(date1, date2) {
  19. return isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2);
  20. }
  21. function isSameDate(date1, date2) {
  22. return isSameMonth(date1, date2) && generateConfig.getDate(date1) === generateConfig.getDate(date2);
  23. }
  24. const Calendar = defineComponent({
  25. name: 'ACalendar',
  26. inheritAttrs: false,
  27. props: {
  28. prefixCls: String,
  29. locale: {
  30. type: Object,
  31. default: undefined
  32. },
  33. validRange: {
  34. type: Array,
  35. default: undefined
  36. },
  37. disabledDate: {
  38. type: Function,
  39. default: undefined
  40. },
  41. dateFullCellRender: {
  42. type: Function,
  43. default: undefined
  44. },
  45. dateCellRender: {
  46. type: Function,
  47. default: undefined
  48. },
  49. monthFullCellRender: {
  50. type: Function,
  51. default: undefined
  52. },
  53. monthCellRender: {
  54. type: Function,
  55. default: undefined
  56. },
  57. headerRender: {
  58. type: Function,
  59. default: undefined
  60. },
  61. value: {
  62. type: [Object, String],
  63. default: undefined
  64. },
  65. defaultValue: {
  66. type: [Object, String],
  67. default: undefined
  68. },
  69. mode: {
  70. type: String,
  71. default: undefined
  72. },
  73. fullscreen: {
  74. type: Boolean,
  75. default: undefined
  76. },
  77. onChange: {
  78. type: Function,
  79. default: undefined
  80. },
  81. 'onUpdate:value': {
  82. type: Function,
  83. default: undefined
  84. },
  85. onPanelChange: {
  86. type: Function,
  87. default: undefined
  88. },
  89. onSelect: {
  90. type: Function,
  91. default: undefined
  92. },
  93. valueFormat: {
  94. type: String,
  95. default: undefined
  96. }
  97. },
  98. slots: Object,
  99. setup(p, _ref) {
  100. let {
  101. emit,
  102. slots,
  103. attrs
  104. } = _ref;
  105. const props = p;
  106. const {
  107. prefixCls,
  108. direction
  109. } = useConfigInject('picker', props);
  110. // style
  111. const [wrapSSR, hashId] = useStyle(prefixCls);
  112. const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`);
  113. const maybeToString = date => {
  114. return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
  115. };
  116. const value = computed(() => {
  117. if (props.value) {
  118. return props.valueFormat ? generateConfig.toDate(props.value, props.valueFormat) : props.value;
  119. }
  120. return props.value === '' ? undefined : props.value;
  121. });
  122. const defaultValue = computed(() => {
  123. if (props.defaultValue) {
  124. return props.valueFormat ? generateConfig.toDate(props.defaultValue, props.valueFormat) : props.defaultValue;
  125. }
  126. return props.defaultValue === '' ? undefined : props.defaultValue;
  127. });
  128. // Value
  129. const [mergedValue, setMergedValue] = useMergedState(() => value.value || generateConfig.getNow(), {
  130. defaultValue: defaultValue.value,
  131. value
  132. });
  133. // Mode
  134. const [mergedMode, setMergedMode] = useMergedState('month', {
  135. value: toRef(props, 'mode')
  136. });
  137. const panelMode = computed(() => mergedMode.value === 'year' ? 'month' : 'date');
  138. const mergedDisabledDate = computed(() => {
  139. return date => {
  140. var _a;
  141. const notInRange = props.validRange ? generateConfig.isAfter(props.validRange[0], date) || generateConfig.isAfter(date, props.validRange[1]) : false;
  142. return notInRange || !!((_a = props.disabledDate) === null || _a === void 0 ? void 0 : _a.call(props, date));
  143. };
  144. });
  145. // ====================== Events ======================
  146. const triggerPanelChange = (date, newMode) => {
  147. emit('panelChange', maybeToString(date), newMode);
  148. };
  149. const triggerChange = date => {
  150. setMergedValue(date);
  151. if (!isSameDate(date, mergedValue.value)) {
  152. // Trigger when month panel switch month
  153. if (panelMode.value === 'date' && !isSameMonth(date, mergedValue.value) || panelMode.value === 'month' && !isSameYear(date, mergedValue.value)) {
  154. triggerPanelChange(date, mergedMode.value);
  155. }
  156. const val = maybeToString(date);
  157. emit('update:value', val);
  158. emit('change', val);
  159. }
  160. };
  161. const triggerModeChange = newMode => {
  162. setMergedMode(newMode);
  163. triggerPanelChange(mergedValue.value, newMode);
  164. };
  165. const onInternalSelect = (date, source) => {
  166. triggerChange(date);
  167. emit('select', maybeToString(date), {
  168. source
  169. });
  170. };
  171. // ====================== Locale ======================
  172. const defaultLocale = computed(() => {
  173. const {
  174. locale
  175. } = props;
  176. const result = _extends(_extends({}, enUS), locale);
  177. result.lang = _extends(_extends({}, result.lang), (locale || {}).lang);
  178. return result;
  179. });
  180. const [mergedLocale] = useLocaleReceiver('Calendar', defaultLocale);
  181. return () => {
  182. const today = generateConfig.getNow();
  183. const {
  184. dateFullCellRender = slots === null || slots === void 0 ? void 0 : slots.dateFullCellRender,
  185. dateCellRender = slots === null || slots === void 0 ? void 0 : slots.dateCellRender,
  186. monthFullCellRender = slots === null || slots === void 0 ? void 0 : slots.monthFullCellRender,
  187. monthCellRender = slots === null || slots === void 0 ? void 0 : slots.monthCellRender,
  188. headerRender = slots === null || slots === void 0 ? void 0 : slots.headerRender,
  189. fullscreen = true,
  190. validRange
  191. } = props;
  192. // ====================== Render ======================
  193. const dateRender = _ref2 => {
  194. let {
  195. current: date
  196. } = _ref2;
  197. if (dateFullCellRender) {
  198. return dateFullCellRender({
  199. current: date
  200. });
  201. }
  202. return _createVNode("div", {
  203. "class": classNames(`${prefixCls.value}-cell-inner`, `${calendarPrefixCls.value}-date`, {
  204. [`${calendarPrefixCls.value}-date-today`]: isSameDate(today, date)
  205. })
  206. }, [_createVNode("div", {
  207. "class": `${calendarPrefixCls.value}-date-value`
  208. }, [String(generateConfig.getDate(date)).padStart(2, '0')]), _createVNode("div", {
  209. "class": `${calendarPrefixCls.value}-date-content`
  210. }, [dateCellRender && dateCellRender({
  211. current: date
  212. })])]);
  213. };
  214. const monthRender = (_ref3, locale) => {
  215. let {
  216. current: date
  217. } = _ref3;
  218. if (monthFullCellRender) {
  219. return monthFullCellRender({
  220. current: date
  221. });
  222. }
  223. const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
  224. return _createVNode("div", {
  225. "class": classNames(`${prefixCls.value}-cell-inner`, `${calendarPrefixCls.value}-date`, {
  226. [`${calendarPrefixCls.value}-date-today`]: isSameMonth(today, date)
  227. })
  228. }, [_createVNode("div", {
  229. "class": `${calendarPrefixCls.value}-date-value`
  230. }, [months[generateConfig.getMonth(date)]]), _createVNode("div", {
  231. "class": `${calendarPrefixCls.value}-date-content`
  232. }, [monthCellRender && monthCellRender({
  233. current: date
  234. })])]);
  235. };
  236. return wrapSSR(_createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  237. "class": classNames(calendarPrefixCls.value, {
  238. [`${calendarPrefixCls.value}-full`]: fullscreen,
  239. [`${calendarPrefixCls.value}-mini`]: !fullscreen,
  240. [`${calendarPrefixCls.value}-rtl`]: direction.value === 'rtl'
  241. }, attrs.class, hashId.value)
  242. }), [headerRender ? headerRender({
  243. value: mergedValue.value,
  244. type: mergedMode.value,
  245. onChange: nextDate => {
  246. onInternalSelect(nextDate, 'customize');
  247. },
  248. onTypeChange: triggerModeChange
  249. }) : _createVNode(CalendarHeader, {
  250. "prefixCls": calendarPrefixCls.value,
  251. "value": mergedValue.value,
  252. "generateConfig": generateConfig,
  253. "mode": mergedMode.value,
  254. "fullscreen": fullscreen,
  255. "locale": mergedLocale.value.lang,
  256. "validRange": validRange,
  257. "onChange": onInternalSelect,
  258. "onModeChange": triggerModeChange
  259. }, null), _createVNode(PickerPanel, {
  260. "value": mergedValue.value,
  261. "prefixCls": prefixCls.value,
  262. "locale": mergedLocale.value.lang,
  263. "generateConfig": generateConfig,
  264. "dateRender": dateRender,
  265. "monthCellRender": obj => monthRender(obj, mergedLocale.value.lang),
  266. "onSelect": nextDate => {
  267. onInternalSelect(nextDate, panelMode.value);
  268. },
  269. "mode": panelMode.value,
  270. "picker": panelMode.value,
  271. "disabledDate": mergedDisabledDate.value,
  272. "hideHeader": true
  273. }, null)]));
  274. };
  275. }
  276. });
  277. Calendar.install = function (app) {
  278. app.component(Calendar.name, Calendar);
  279. return app;
  280. };
  281. return Calendar;
  282. }
  283. export default generateCalendar;