90dafe1a040c8a6538c37388865bb66cbb3b58eb9f2bff672ead0a99b73292e03828254ffce35f747eb7686adbba92c39610eeb0c2dfcda5c809fc727e84c5 13 KB

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