911ff1c500d7c65b6436e70a6879fd142f51cce426992e79eb2154d5124182e949d8df9c3313ccf3fdfb34903f4fe2c8fbbf917bd46ac29c10825ec4cd9e89 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import { ref, inject, computed, nextTick } from 'vue';
  2. import { getValidDateOfYear, getValidDateOfMonth } from '../utils.mjs';
  3. import { PICKER_BASE_INJECTION_KEY } from '../../../time-picker/src/constants.mjs';
  4. import { useLocale } from '../../../../hooks/use-locale/index.mjs';
  5. const usePanelDateRange = (props, emit, leftDate, rightDate) => {
  6. const leftCurrentView = ref("date");
  7. const leftCurrentViewRef = ref();
  8. const rightCurrentView = ref("date");
  9. const rightCurrentViewRef = ref();
  10. const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
  11. const { disabledDate } = pickerBase.props;
  12. const { t, lang } = useLocale();
  13. const leftYear = computed(() => {
  14. return leftDate.value.year();
  15. });
  16. const leftMonth = computed(() => {
  17. return leftDate.value.month();
  18. });
  19. const rightYear = computed(() => {
  20. return rightDate.value.year();
  21. });
  22. const rightMonth = computed(() => {
  23. return rightDate.value.month();
  24. });
  25. function computedYearLabel(currentView, yearValue) {
  26. const yearTranslation = t("el.datepicker.year");
  27. if (currentView.value === "year") {
  28. const startYear = Math.floor(yearValue.value / 10) * 10;
  29. return yearTranslation ? `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}` : `${startYear} - ${startYear + 9}`;
  30. }
  31. return `${yearValue.value} ${yearTranslation}`;
  32. }
  33. function focusPicker(currentViewRef) {
  34. currentViewRef == null ? void 0 : currentViewRef.focus();
  35. }
  36. async function showPicker(pickerType, view) {
  37. if (props.disabled)
  38. return;
  39. const currentView = pickerType === "left" ? leftCurrentView : rightCurrentView;
  40. const currentViewRef = pickerType === "left" ? leftCurrentViewRef : rightCurrentViewRef;
  41. currentView.value = view;
  42. await nextTick();
  43. focusPicker(currentViewRef.value);
  44. }
  45. async function handlePick(mode, pickerType, value) {
  46. if (props.disabled)
  47. return;
  48. const isLeftPicker = pickerType === "left";
  49. const startDate = isLeftPicker ? leftDate : rightDate;
  50. const endDate = isLeftPicker ? rightDate : leftDate;
  51. const currentView = isLeftPicker ? leftCurrentView : rightCurrentView;
  52. const currentViewRef = isLeftPicker ? leftCurrentViewRef : rightCurrentViewRef;
  53. if (mode === "year") {
  54. const data = startDate.value.year(value);
  55. startDate.value = getValidDateOfYear(data, lang.value, disabledDate);
  56. }
  57. if (mode === "month") {
  58. startDate.value = getValidDateOfMonth(startDate.value, startDate.value.year(), value, lang.value, disabledDate);
  59. }
  60. if (!props.unlinkPanels) {
  61. endDate.value = pickerType === "left" ? startDate.value.add(1, "month") : startDate.value.subtract(1, "month");
  62. }
  63. currentView.value = mode === "year" ? "month" : "date";
  64. await nextTick();
  65. focusPicker(currentViewRef.value);
  66. handlePanelChange(mode);
  67. }
  68. function handlePanelChange(mode) {
  69. emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
  70. }
  71. function adjustDateByView(currentView, date, forward) {
  72. const action = forward ? "add" : "subtract";
  73. return currentView === "year" ? date[action](10, "year") : date[action](1, "year");
  74. }
  75. return {
  76. leftCurrentView,
  77. rightCurrentView,
  78. leftCurrentViewRef,
  79. rightCurrentViewRef,
  80. leftYear,
  81. rightYear,
  82. leftMonth,
  83. rightMonth,
  84. leftYearLabel: computed(() => computedYearLabel(leftCurrentView, leftYear)),
  85. rightYearLabel: computed(() => computedYearLabel(rightCurrentView, rightYear)),
  86. showLeftPicker: (view) => showPicker("left", view),
  87. showRightPicker: (view) => showPicker("right", view),
  88. handleLeftYearPick: (year) => handlePick("year", "left", year),
  89. handleRightYearPick: (year) => handlePick("year", "right", year),
  90. handleLeftMonthPick: (month) => handlePick("month", "left", month),
  91. handleRightMonthPick: (month) => handlePick("month", "right", month),
  92. handlePanelChange,
  93. adjustDateByView
  94. };
  95. };
  96. export { usePanelDateRange };
  97. //# sourceMappingURL=use-panel-date-range.mjs.map