31b80da80a345dcaa34bb9b30efc473354fe305a03cdc901951d4f1662f25ee7a68d3f53923990610081d13a81ac4f0592dd61703297d2cef5f890ac11dbfb 12 KB

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