d63055c4e2452c5ff92a48706d88cf19831f16a23740d3b88ec96b73de6fabd3e329fa8e45b88f2c3244b2d9cd702ab893d478f4d3ae87f8fd4dd35e2e1aff 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. import { defineComponent, inject, toRef, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withCtx } from 'vue';
  2. import dayjs from 'dayjs';
  3. import { ElIcon } from '../../../icon/index.mjs';
  4. import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
  5. import { isValidRange, getDefaultValue, correctlyParseUserInput } from '../utils.mjs';
  6. import { panelMonthRangeProps, panelMonthRangeEmits } from '../props/panel-month-range.mjs';
  7. import { useMonthRangeHeader } from '../composables/use-month-range-header.mjs';
  8. import { useRangePicker } from '../composables/use-range-picker.mjs';
  9. import { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants.mjs';
  10. import MonthTable from './basic-month-table.mjs';
  11. import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
  12. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  13. import { PICKER_BASE_INJECTION_KEY } from '../../../time-picker/src/constants.mjs';
  14. import { isArray } from '@vue/shared';
  15. const unit = "year";
  16. const __default__ = defineComponent({
  17. name: "DatePickerMonthRange"
  18. });
  19. const _sfc_main = /* @__PURE__ */ defineComponent({
  20. ...__default__,
  21. props: panelMonthRangeProps,
  22. emits: panelMonthRangeEmits,
  23. setup(__props, { emit }) {
  24. const props = __props;
  25. const { lang } = useLocale();
  26. const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
  27. const isDefaultFormat = inject(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, void 0);
  28. const { shortcuts, disabledDate, cellClassName } = pickerBase.props;
  29. const format = toRef(pickerBase.props, "format");
  30. const defaultValue = toRef(pickerBase.props, "defaultValue");
  31. const leftDate = ref(dayjs().locale(lang.value));
  32. const rightDate = ref(dayjs().locale(lang.value).add(1, unit));
  33. const {
  34. minDate,
  35. maxDate,
  36. rangeState,
  37. ppNs,
  38. drpNs,
  39. handleChangeRange,
  40. handleRangeConfirm,
  41. handleShortcutClick,
  42. onSelect,
  43. parseValue
  44. } = useRangePicker(props, {
  45. defaultValue,
  46. leftDate,
  47. rightDate,
  48. unit,
  49. sortDates
  50. });
  51. const hasShortcuts = computed(() => !!shortcuts.length);
  52. const {
  53. leftPrevYear,
  54. rightNextYear,
  55. leftNextYear,
  56. rightPrevYear,
  57. leftLabel,
  58. rightLabel,
  59. leftYear,
  60. rightYear
  61. } = useMonthRangeHeader({
  62. unlinkPanels: toRef(props, "unlinkPanels"),
  63. leftDate,
  64. rightDate
  65. });
  66. const enableYearArrow = computed(() => {
  67. return props.unlinkPanels && rightYear.value > leftYear.value + 1;
  68. });
  69. const handleRangePick = (val, close = true) => {
  70. const minDate_ = val.minDate;
  71. const maxDate_ = val.maxDate;
  72. if (maxDate.value === maxDate_ && minDate.value === minDate_) {
  73. return;
  74. }
  75. emit("calendar-change", [minDate_.toDate(), maxDate_ && maxDate_.toDate()]);
  76. maxDate.value = maxDate_;
  77. minDate.value = minDate_;
  78. if (!close)
  79. return;
  80. handleRangeConfirm();
  81. };
  82. const handleClear = () => {
  83. leftDate.value = getDefaultValue(unref(defaultValue), {
  84. lang: unref(lang),
  85. unit: "year",
  86. unlinkPanels: props.unlinkPanels
  87. })[0];
  88. rightDate.value = leftDate.value.add(1, "year");
  89. emit("pick", null);
  90. };
  91. const formatToString = (value) => {
  92. return isArray(value) ? value.map((_) => _.format(format.value)) : value.format(format.value);
  93. };
  94. const parseUserInput = (value) => {
  95. return correctlyParseUserInput(value, format.value, lang.value, isDefaultFormat);
  96. };
  97. function sortDates(minDate2, maxDate2) {
  98. if (props.unlinkPanels && maxDate2) {
  99. const minDateYear = (minDate2 == null ? void 0 : minDate2.year()) || 0;
  100. const maxDateYear = maxDate2.year();
  101. rightDate.value = minDateYear === maxDateYear ? maxDate2.add(1, unit) : maxDate2;
  102. } else {
  103. rightDate.value = leftDate.value.add(1, unit);
  104. }
  105. }
  106. watch(() => props.visible, (visible) => {
  107. if (!visible && rangeState.value.selecting) {
  108. parseValue(props.parsedValue);
  109. onSelect(false);
  110. }
  111. });
  112. emit("set-picker-option", ["isValidValue", isValidRange]);
  113. emit("set-picker-option", ["formatToString", formatToString]);
  114. emit("set-picker-option", ["parseUserInput", parseUserInput]);
  115. emit("set-picker-option", ["handleClear", handleClear]);
  116. return (_ctx, _cache) => {
  117. return openBlock(), createElementBlock("div", {
  118. class: normalizeClass([
  119. unref(ppNs).b(),
  120. unref(drpNs).b(),
  121. unref(ppNs).is("border", _ctx.border),
  122. unref(ppNs).is("disabled", _ctx.disabled),
  123. {
  124. "has-sidebar": Boolean(_ctx.$slots.sidebar) || unref(hasShortcuts)
  125. }
  126. ])
  127. }, [
  128. createElementVNode("div", {
  129. class: normalizeClass(unref(ppNs).e("body-wrapper"))
  130. }, [
  131. renderSlot(_ctx.$slots, "sidebar", {
  132. class: normalizeClass(unref(ppNs).e("sidebar"))
  133. }),
  134. unref(hasShortcuts) ? (openBlock(), createElementBlock("div", {
  135. key: 0,
  136. class: normalizeClass(unref(ppNs).e("sidebar"))
  137. }, [
  138. (openBlock(true), createElementBlock(Fragment, null, renderList(unref(shortcuts), (shortcut, key) => {
  139. return openBlock(), createElementBlock("button", {
  140. key,
  141. type: "button",
  142. class: normalizeClass(unref(ppNs).e("shortcut")),
  143. disabled: _ctx.disabled,
  144. onClick: ($event) => unref(handleShortcutClick)(shortcut)
  145. }, toDisplayString(shortcut.text), 11, ["disabled", "onClick"]);
  146. }), 128))
  147. ], 2)) : createCommentVNode("v-if", true),
  148. createElementVNode("div", {
  149. class: normalizeClass(unref(ppNs).e("body"))
  150. }, [
  151. createElementVNode("div", {
  152. class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-left"])
  153. }, [
  154. createElementVNode("div", {
  155. class: normalizeClass(unref(drpNs).e("header"))
  156. }, [
  157. createElementVNode("button", {
  158. type: "button",
  159. class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-left"]),
  160. disabled: _ctx.disabled,
  161. onClick: unref(leftPrevYear)
  162. }, [
  163. renderSlot(_ctx.$slots, "prev-year", {}, () => [
  164. createVNode(unref(ElIcon), null, {
  165. default: withCtx(() => [
  166. createVNode(unref(DArrowLeft))
  167. ]),
  168. _: 1
  169. })
  170. ])
  171. ], 10, ["disabled", "onClick"]),
  172. _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
  173. key: 0,
  174. type: "button",
  175. disabled: !unref(enableYearArrow) || _ctx.disabled,
  176. class: normalizeClass([[
  177. unref(ppNs).e("icon-btn"),
  178. { [unref(ppNs).is("disabled")]: !unref(enableYearArrow) }
  179. ], "d-arrow-right"]),
  180. onClick: unref(leftNextYear)
  181. }, [
  182. renderSlot(_ctx.$slots, "next-year", {}, () => [
  183. createVNode(unref(ElIcon), null, {
  184. default: withCtx(() => [
  185. createVNode(unref(DArrowRight))
  186. ]),
  187. _: 1
  188. })
  189. ])
  190. ], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
  191. createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
  192. ], 2),
  193. createVNode(MonthTable, {
  194. "selection-mode": "range",
  195. date: leftDate.value,
  196. "min-date": unref(minDate),
  197. "max-date": unref(maxDate),
  198. "range-state": unref(rangeState),
  199. "disabled-date": unref(disabledDate),
  200. disabled: _ctx.disabled,
  201. "cell-class-name": unref(cellClassName),
  202. onChangerange: unref(handleChangeRange),
  203. onPick: handleRangePick,
  204. onSelect: unref(onSelect)
  205. }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
  206. ], 2),
  207. createElementVNode("div", {
  208. class: normalizeClass([[unref(ppNs).e("content"), unref(drpNs).e("content")], "is-right"])
  209. }, [
  210. createElementVNode("div", {
  211. class: normalizeClass(unref(drpNs).e("header"))
  212. }, [
  213. _ctx.unlinkPanels ? (openBlock(), createElementBlock("button", {
  214. key: 0,
  215. type: "button",
  216. disabled: !unref(enableYearArrow) || _ctx.disabled,
  217. class: normalizeClass([[unref(ppNs).e("icon-btn"), { "is-disabled": !unref(enableYearArrow) }], "d-arrow-left"]),
  218. onClick: unref(rightPrevYear)
  219. }, [
  220. renderSlot(_ctx.$slots, "prev-year", {}, () => [
  221. createVNode(unref(ElIcon), null, {
  222. default: withCtx(() => [
  223. createVNode(unref(DArrowLeft))
  224. ]),
  225. _: 1
  226. })
  227. ])
  228. ], 10, ["disabled", "onClick"])) : createCommentVNode("v-if", true),
  229. createElementVNode("button", {
  230. type: "button",
  231. class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
  232. disabled: _ctx.disabled,
  233. onClick: unref(rightNextYear)
  234. }, [
  235. renderSlot(_ctx.$slots, "next-year", {}, () => [
  236. createVNode(unref(ElIcon), null, {
  237. default: withCtx(() => [
  238. createVNode(unref(DArrowRight))
  239. ]),
  240. _: 1
  241. })
  242. ])
  243. ], 10, ["disabled", "onClick"]),
  244. createElementVNode("div", null, toDisplayString(unref(rightLabel)), 1)
  245. ], 2),
  246. createVNode(MonthTable, {
  247. "selection-mode": "range",
  248. date: rightDate.value,
  249. "min-date": unref(minDate),
  250. "max-date": unref(maxDate),
  251. "range-state": unref(rangeState),
  252. "disabled-date": unref(disabledDate),
  253. disabled: _ctx.disabled,
  254. "cell-class-name": unref(cellClassName),
  255. onChangerange: unref(handleChangeRange),
  256. onPick: handleRangePick,
  257. onSelect: unref(onSelect)
  258. }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "disabled", "cell-class-name", "onChangerange", "onSelect"])
  259. ], 2)
  260. ], 2)
  261. ], 2)
  262. ], 2);
  263. };
  264. }
  265. });
  266. var MonthRangePickPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "panel-month-range.vue"]]);
  267. export { MonthRangePickPanel as default };
  268. //# sourceMappingURL=panel-month-range.mjs.map