@dfsj/components 3.0.0

package/dist/components/DatePicker/src/date-picker-com/panel-date-range.vue2.js

@@ -0,0 +1,564 @@
+import { defineComponent, inject, toRef, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode, createVNode, withDirectives, withCtx, createTextVNode } from 'vue';
+import dayjs from 'dayjs';
+import { useLocale, ClickOutside } from 'element-plus';
+import { definePropType, isArray } from 'element-plus/es/utils/index.mjs';
+import { extractTimeFormat, extractDateFormat, TimePickPanel } from 'element-plus/es/components/time-picker/index.mjs';
+import { ArrowRight, DArrowLeft, ArrowLeft, DArrowRight } from '@element-plus/icons-vue';
+import { useRangePicker } from '../composables/use-range-picker.js';
+import { isValidRange, getDefaultValue } from 'element-plus/es/components/date-picker/src/utils';
+import DateTable from 'element-plus/es/components/date-picker/src/date-picker-com/basic-date-table.mjs';
+import { cloneDeep } from 'lodash-es';
+
+var _hoisted_1 = ["onClick"];
+var _hoisted_2 = ["disabled"];
+var _hoisted_3 = ["disabled"];
+var _hoisted_4 = ["disabled"];
+var _hoisted_5 = ["disabled"];
+var _hoisted_6 = {
+  "class": "flex justify-end my-2 mr-5"
+};
+var unit = 'month';
+var script = defineComponent({
+  __name: 'panel-date-range',
+  props: {
+    unlinkPanels: Boolean,
+    visible: Boolean,
+    parsedValue: definePropType(Array)
+  },
+  emits: ['pick', 'set-picker-option', 'calendar-change', 'panel-change'],
+  setup: function setup(__props, _ref) {
+    var _props$parsedValue, _props$parsedValue2;
+    var __emit = _ref.emit;
+    var props = __props;
+    var emit = __emit;
+    var pickerBase = inject('EP_PICKER_BASE');
+    var _pickerBase$props = pickerBase.props,
+      disabledDate = _pickerBase$props.disabledDate,
+      cellClassName = _pickerBase$props.cellClassName,
+      format = _pickerBase$props.format,
+      defaultTime = _pickerBase$props.defaultTime,
+      arrowControl = _pickerBase$props.arrowControl;
+      _pickerBase$props.clearable;
+      var type = _pickerBase$props.type,
+      defaultValue = _pickerBase$props.defaultValue;
+    var shortcuts = toRef(pickerBase.props, 'shortcuts');
+    var _useLocale = useLocale(),
+      lang = _useLocale.lang;
+    var leftDate = ref(((_props$parsedValue = props.parsedValue) === null || _props$parsedValue === void 0 ? void 0 : _props$parsedValue[0]) || dayjs().locale(lang.value));
+    var rightDate = ref(((_props$parsedValue2 = props.parsedValue) === null || _props$parsedValue2 === void 0 ? void 0 : _props$parsedValue2[1]) || dayjs().locale(lang.value).add(1, unit));
+    var parsedValue = ref([cloneDeep(leftDate.value), cloneDeep(rightDate.value)]);
+    var _useRangePicker = useRangePicker(props, {
+        leftDate: leftDate,
+        rightDate: rightDate,
+        unit: unit,
+        parsedValue: parsedValue,
+        disabledDate: disabledDate
+      }),
+      ppNs = _useRangePicker.ppNs,
+      drpNs = _useRangePicker.drpNs,
+      rangeState = _useRangePicker.rangeState,
+      handleRangeConfirm = _useRangePicker.handleRangeConfirm,
+      leftDisableDate = _useRangePicker.leftDisableDate,
+      rightDisableDate = _useRangePicker.rightDisableDate,
+      handleShortcutClick = _useRangePicker.handleShortcutClick,
+      onSelect = _useRangePicker.onSelect,
+      t = _useRangePicker.t;
+    var dateUserInput = ref({
+      min: null,
+      max: null
+    });
+    var timeUserInput = ref({
+      min: null,
+      max: null
+    });
+    var leftLabel = computed(function () {
+      return "".concat(leftDate.value.year(), " ").concat(t('el.datepicker.year'), " ").concat(t("el.datepicker.month".concat(leftDate.value.month() + 1)));
+    });
+    var rightLabel = computed(function () {
+      return "".concat(rightDate.value.year(), " ").concat(t('el.datepicker.year'), " ").concat(t("el.datepicker.month".concat(rightDate.value.month() + 1)));
+    });
+    var leftYear = computed(function () {
+      return leftDate.value.year();
+    });
+    var leftMonth = computed(function () {
+      return leftDate.value.month();
+    });
+    var rightYear = computed(function () {
+      return rightDate.value.year();
+    });
+    var rightMonth = computed(function () {
+      return rightDate.value.month();
+    });
+    var hasShortcuts = computed(function () {
+      return !!shortcuts.value.length;
+    });
+    var minVisibleDate = computed(function () {
+      if (dateUserInput.value.min !== null) return dateUserInput.value.min;
+      if (leftDate.value) return leftDate.value.format(dateFormat.value);
+      return '';
+    });
+    var maxVisibleDate = computed(function () {
+      if (dateUserInput.value.max !== null) return dateUserInput.value.max;
+      if (rightDate.value || leftDate.value) return (rightDate.value || leftDate.value).format(dateFormat.value);
+      return '';
+    });
+    var minVisibleTime = computed(function () {
+      if (timeUserInput.value.min !== null) return timeUserInput.value.min;
+      if (leftDate.value) return leftDate.value.format(timeFormat.value);
+      return '';
+    });
+    var maxVisibleTime = computed(function () {
+      if (timeUserInput.value.max !== null) return timeUserInput.value.max;
+      if (rightDate.value || leftDate.value) return (rightDate.value || leftDate.value).format(timeFormat.value);
+      return '';
+    });
+    var timeFormat = computed(function () {
+      return extractTimeFormat(format);
+    });
+    var dateFormat = computed(function () {
+      return extractDateFormat(format);
+    });
+    var leftPrevYear = function leftPrevYear() {
+      leftDate.value = leftDate.value.subtract(1, 'year');
+      if (!props.unlinkPanels) {
+        rightDate.value = leftDate.value.add(1, 'month');
+      }
+      handlePanelChange('year');
+    };
+    var leftPrevMonth = function leftPrevMonth() {
+      leftDate.value = leftDate.value.subtract(1, 'month');
+      if (!props.unlinkPanels) {
+        rightDate.value = leftDate.value.add(1, 'month');
+      }
+      handlePanelChange('month');
+    };
+    var rightNextYear = function rightNextYear() {
+      if (!props.unlinkPanels) {
+        leftDate.value = leftDate.value.add(1, 'year');
+        rightDate.value = leftDate.value.add(1, 'month');
+      } else {
+        rightDate.value = rightDate.value.add(1, 'year');
+      }
+      handlePanelChange('year');
+    };
+    var rightNextMonth = function rightNextMonth() {
+      if (!props.unlinkPanels) {
+        leftDate.value = leftDate.value.add(1, 'month');
+        rightDate.value = leftDate.value.add(1, 'month');
+      } else {
+        rightDate.value = rightDate.value.add(1, 'month');
+      }
+      handlePanelChange('month');
+    };
+    var leftNextYear = function leftNextYear() {
+      leftDate.value = leftDate.value.add(1, 'year');
+      handlePanelChange('year');
+    };
+    var leftNextMonth = function leftNextMonth() {
+      leftDate.value = leftDate.value.add(1, 'month');
+      handlePanelChange('month');
+    };
+    var rightPrevYear = function rightPrevYear() {
+      rightDate.value = rightDate.value.subtract(1, 'year');
+      handlePanelChange('year');
+    };
+    var rightPrevMonth = function rightPrevMonth() {
+      rightDate.value = rightDate.value.subtract(1, 'month');
+      handlePanelChange('month');
+    };
+    var handlePanelChange = function handlePanelChange(mode) {
+      emit('panel-change', [leftDate.value.toDate(), rightDate.value.toDate()], mode);
+    };
+    var enableMonthArrow = computed(function () {
+      var nextMonth = leftMonth.value + 1 >= 12 ? 0 : leftMonth.value + 1;
+      var yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
+      return props.unlinkPanels && new Date(leftYear.value + yearOffset, nextMonth) <= new Date(rightYear.value, rightMonth.value);
+    });
+    var enableYearArrow = computed(function () {
+      return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 11;
+    });
+    var showTime = computed(function () {
+      return type === 'datetime' || type === 'datetimerange';
+    });
+    var formatEmit = function formatEmit(emitDayjs, index) {
+      if (!emitDayjs) return;
+      if (defaultTime) {
+        var defaultTimeD = dayjs(defaultTime[index] || defaultTime).locale(lang.value);
+        return defaultTimeD.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
+      }
+      return emitDayjs;
+    };
+    var handleRangePick = function handleRangePick(date, type) {
+      if (type == 1) {
+        leftDate.value = formatEmit(date, 0);
+        parsedValue.value[0] = cloneDeep(leftDate.value);
+      } else {
+        rightDate.value = formatEmit(date, 1);
+        parsedValue.value[1] = cloneDeep(rightDate.value);
+      }
+    };
+    var minTimePickerVisible = ref(false);
+    var maxTimePickerVisible = ref(false);
+    var handleMinTimeClose = function handleMinTimeClose() {
+      minTimePickerVisible.value = false;
+    };
+    var handleMaxTimeClose = function handleMaxTimeClose() {
+      maxTimePickerVisible.value = false;
+    };
+    var handleDateInput = function handleDateInput(value, type) {
+      dateUserInput.value[type] = value;
+      var parsedValueD = dayjs(value, dateFormat.value).locale(lang.value);
+      if (parsedValueD.isValid()) {
+        if (disabledDate && disabledDate(parsedValueD.toDate())) {
+          return;
+        }
+        if (type === 'min') {
+          leftDate.value = parsedValueD;
+          leftDate.value = (leftDate.value || leftDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
+          if (!props.unlinkPanels && (!rightDate.value || rightDate.value.isBefore(leftDate.value))) {
+            rightDate.value = parsedValueD.add(1, 'month');
+            rightDate.value = leftDate.value.add(1, 'month');
+          }
+        } else {
+          rightDate.value = parsedValueD;
+          rightDate.value = (rightDate.value || rightDate.value).year(parsedValueD.year()).month(parsedValueD.month()).date(parsedValueD.date());
+          if (!props.unlinkPanels && (!leftDate.value || leftDate.value.isAfter(rightDate.value))) {
+            leftDate.value = parsedValueD.subtract(1, 'month');
+            leftDate.value = rightDate.value.subtract(1, 'month');
+          }
+        }
+      }
+    };
+    var handleDateChange = function handleDateChange(_, type) {
+      dateUserInput.value[type] = null;
+    };
+    var handleTimeInput = function handleTimeInput(value, type) {
+      timeUserInput.value[type] = value;
+      var parsedValueD = dayjs(value, timeFormat.value).locale(lang.value);
+      if (parsedValueD.isValid()) {
+        if (type === 'min') {
+          minTimePickerVisible.value = true;
+          leftDate.value = leftDate.value.hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
+          if (!rightDate.value || rightDate.value.isBefore(leftDate.value)) {
+            rightDate.value = leftDate.value;
+          }
+        } else {
+          maxTimePickerVisible.value = true;
+          rightDate.value = rightDate.value.hour(parsedValueD.hour()).minute(parsedValueD.minute()).second(parsedValueD.second());
+          rightDate.value = rightDate.value;
+          if (rightDate.value && rightDate.value.isBefore(leftDate.value)) {
+            leftDate.value = rightDate.value;
+          }
+        }
+      }
+    };
+    var handleTimeChange = function handleTimeChange(value, type) {
+      timeUserInput.value[type] = null;
+      if (type === 'min') {
+        minTimePickerVisible.value = false;
+      } else {
+        maxTimePickerVisible.value = false;
+      }
+    };
+    var handleMinTimePick = function handleMinTimePick(value, visible, first) {
+      if (timeUserInput.value.min) return;
+      if (value) {
+        leftDate.value = value;
+        leftDate.value = (leftDate.value || leftDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
+      }
+      if (!first) {
+        minTimePickerVisible.value = visible;
+      }
+      if (!rightDate.value || rightDate.value.isBefore(leftDate.value)) {
+        rightDate.value = leftDate.value;
+        rightDate.value = value;
+      }
+    };
+    var handleMaxTimePick = function handleMaxTimePick(value, visible, first) {
+      if (timeUserInput.value.max) return;
+      if (value) {
+        rightDate.value = value;
+        rightDate.value = (rightDate.value || rightDate.value).hour(value.hour()).minute(value.minute()).second(value.second());
+      }
+      if (!first) {
+        maxTimePickerVisible.value = visible;
+      }
+      if (rightDate.value && rightDate.value.isBefore(leftDate.value)) {
+        leftDate.value = rightDate.value;
+      }
+    };
+    var handleClear = function handleClear() {
+      leftDate.value = getDefaultValue(unref(defaultValue), {
+        lang: unref(lang),
+        unit: 'month',
+        unlinkPanels: props.unlinkPanels
+      })[0];
+      rightDate.value = leftDate.value.add(1, 'month');
+      emit('pick', null);
+    };
+    var formatToString = function formatToString(value) {
+      return isArray(value) ? value.map(function (_) {
+        return _.format(format);
+      }) : value.format(format);
+    };
+    var parseUserInput = function parseUserInput(value) {
+      return isArray(value) ? value.map(function (_) {
+        return dayjs(_, format).locale(lang.value);
+      }) : dayjs(value, format).locale(lang.value);
+    };
+    emit('set-picker-option', ['isValidValue', isValidRange]);
+    emit('set-picker-option', ['parseUserInput', parseUserInput]);
+    emit('set-picker-option', ['formatToString', formatToString]);
+    emit('set-picker-option', ['handleClear', handleClear]);
+    return function (_ctx, _cache) {
+      var _component_el_input = resolveComponent("el-input");
+      var _component_el_icon = resolveComponent("el-icon");
+      var _component_el_button = resolveComponent("el-button");
+      return openBlock(), createElementBlock("div", {
+        "class": normalizeClass([unref(ppNs).b(), unref(drpNs).b(), {
+          'has-sidebar': _ctx.$slots.sidebar || hasShortcuts.value,
+          'has-time': showTime.value
+        }])
+      }, [createElementVNode("div", {
+        "class": normalizeClass(unref(ppNs).e('body-wrapper'))
+      }, [renderSlot(_ctx.$slots, "sidebar", {
+        "class": normalizeClass(unref(ppNs).e('sidebar'))
+      }), hasShortcuts.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": normalizeClass(unref(ppNs).e('sidebar'))
+      }, [(openBlock(true), createElementBlock(Fragment, null, renderList(shortcuts.value, function (shortcut, key) {
+        return openBlock(), createElementBlock("button", {
+          key: key,
+          type: "button",
+          "class": normalizeClass(unref(ppNs).e('shortcut')),
+          onClick: function onClick($event) {
+            return unref(handleShortcutClick)(shortcut);
+          }
+        }, toDisplayString(shortcut.text), 11, _hoisted_1);
+      }), 128))], 2)) : createCommentVNode("v-if", true), createElementVNode("div", {
+        "class": normalizeClass(unref(ppNs).e('body'))
+      }, [showTime.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        "class": normalizeClass(unref(drpNs).e('time-header'))
+      }, [createElementVNode("span", {
+        "class": normalizeClass(unref(drpNs).e('editors-wrap'))
+      }, [createElementVNode("span", {
+        "class": normalizeClass(unref(drpNs).e('time-picker-wrap'))
+      }, [createVNode(_component_el_input, {
+        size: "small",
+        disabled: unref(rangeState).selecting,
+        placeholder: unref(t)('el.datepicker.startDate'),
+        "class": normalizeClass(unref(drpNs).e('editor')),
+        "model-value": minVisibleDate.value,
+        "validate-event": false,
+        onInput: _cache[0] || (_cache[0] = function (val) {
+          return handleDateInput(val, 'min');
+        }),
+        onChange: _cache[1] || (_cache[1] = function (val) {
+          return handleDateChange(val, 'min');
+        })
+      }, null, 8, ["disabled", "placeholder", "class", "model-value"])], 2), withDirectives((openBlock(), createElementBlock("span", {
+        "class": normalizeClass(unref(drpNs).e('time-picker-wrap'))
+      }, [createVNode(_component_el_input, {
+        size: "small",
+        "class": normalizeClass(unref(drpNs).e('editor')),
+        disabled: unref(rangeState).selecting,
+        placeholder: unref(t)('el.datepicker.startTime'),
+        "model-value": minVisibleTime.value,
+        "validate-event": false,
+        onFocus: _cache[2] || (_cache[2] = function ($event) {
+          return minTimePickerVisible.value = true;
+        }),
+        onInput: _cache[3] || (_cache[3] = function (val) {
+          return handleTimeInput(val, 'min');
+        }),
+        onChange: _cache[4] || (_cache[4] = function (val) {
+          return handleTimeChange(val, 'min');
+        })
+      }, null, 8, ["class", "disabled", "placeholder", "model-value"]), createVNode(unref(TimePickPanel), {
+        visible: minTimePickerVisible.value,
+        format: timeFormat.value,
+        "datetime-role": "start",
+        "time-arrow-control": unref(arrowControl),
+        "parsed-value": leftDate.value,
+        onPick: handleMinTimePick
+      }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])], 2)), [[unref(ClickOutside), handleMinTimeClose]])], 2), createElementVNode("span", null, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(ArrowRight))];
+        }),
+        _: 1
+      })]), createElementVNode("span", {
+        "class": normalizeClass([unref(drpNs).e('editors-wrap'), "is-right"])
+      }, [createElementVNode("span", {
+        "class": normalizeClass(unref(drpNs).e('time-picker-wrap'))
+      }, [createVNode(_component_el_input, {
+        size: "small",
+        "class": normalizeClass(unref(drpNs).e('editor')),
+        disabled: unref(rangeState).selecting,
+        placeholder: unref(t)('el.datepicker.endDate'),
+        "model-value": maxVisibleDate.value,
+        readonly: !leftDate.value,
+        "validate-event": false,
+        onInput: _cache[5] || (_cache[5] = function (val) {
+          return handleDateInput(val, 'max');
+        }),
+        onChange: _cache[6] || (_cache[6] = function (val) {
+          return handleDateChange(val, 'max');
+        })
+      }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"])], 2), withDirectives((openBlock(), createElementBlock("span", {
+        "class": normalizeClass(unref(drpNs).e('time-picker-wrap'))
+      }, [createVNode(_component_el_input, {
+        size: "small",
+        "class": normalizeClass(unref(drpNs).e('editor')),
+        disabled: unref(rangeState).selecting,
+        placeholder: unref(t)('el.datepicker.endTime'),
+        "model-value": maxVisibleTime.value,
+        readonly: !leftDate.value,
+        "validate-event": false,
+        onFocus: _cache[7] || (_cache[7] = function ($event) {
+          return leftDate.value && (maxTimePickerVisible.value = true);
+        }),
+        onInput: _cache[8] || (_cache[8] = function (val) {
+          return handleTimeInput(val, 'max');
+        }),
+        onChange: _cache[9] || (_cache[9] = function (val) {
+          return handleTimeChange(val, 'max');
+        })
+      }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]), createVNode(unref(TimePickPanel), {
+        "datetime-role": "end",
+        visible: maxTimePickerVisible.value,
+        format: timeFormat.value,
+        "time-arrow-control": unref(arrowControl),
+        "parsed-value": rightDate.value,
+        onPick: handleMaxTimePick
+      }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])], 2)), [[unref(ClickOutside), handleMaxTimeClose]])], 2)], 2)) : createCommentVNode("v-if", true), createElementVNode("div", {
+        "class": normalizeClass([[unref(ppNs).e('content'), unref(drpNs).e('content')], "is-left"])
+      }, [createElementVNode("div", {
+        "class": normalizeClass(unref(drpNs).e('header'))
+      }, [createElementVNode("button", {
+        type: "button",
+        "class": normalizeClass([unref(ppNs).e('icon-btn'), "d-arrow-left"]),
+        onClick: leftPrevYear
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(DArrowLeft))];
+        }),
+        _: 1
+      })], 2), createElementVNode("button", {
+        type: "button",
+        "class": normalizeClass([unref(ppNs).e('icon-btn'), "arrow-left"]),
+        onClick: leftPrevMonth
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(ArrowLeft))];
+        }),
+        _: 1
+      })], 2), __props.unlinkPanels ? (openBlock(), createElementBlock("button", {
+        key: 0,
+        type: "button",
+        disabled: !enableYearArrow.value,
+        "class": normalizeClass([[unref(ppNs).e('icon-btn'), {
+          'is-disabled': !enableYearArrow.value
+        }], "d-arrow-right"]),
+        onClick: leftNextYear
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(DArrowRight))];
+        }),
+        _: 1
+      })], 10, _hoisted_2)) : createCommentVNode("v-if", true), __props.unlinkPanels ? (openBlock(), createElementBlock("button", {
+        key: 1,
+        type: "button",
+        disabled: !enableMonthArrow.value,
+        "class": normalizeClass([[unref(ppNs).e('icon-btn'), {
+          'is-disabled': !enableMonthArrow.value
+        }], "arrow-right"]),
+        onClick: leftNextMonth
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(ArrowRight))];
+        }),
+        _: 1
+      })], 10, _hoisted_3)) : createCommentVNode("v-if", true), createElementVNode("div", null, toDisplayString(leftLabel.value), 1)], 2), createVNode(unref(DateTable), {
+        date: leftDate.value,
+        "parsed-value": parsedValue.value[0],
+        "disabled-date": unref(leftDisableDate),
+        "cell-class-name": unref(cellClassName),
+        onPick: _cache[10] || (_cache[10] = function ($event) {
+          return handleRangePick($event, 1);
+        }),
+        onSelect: unref(onSelect)
+      }, null, 8, ["date", "parsed-value", "disabled-date", "cell-class-name", "onSelect"])], 2), createElementVNode("div", {
+        "class": normalizeClass([[unref(ppNs).e('content'), unref(drpNs).e('content')], "is-right"])
+      }, [createElementVNode("div", {
+        "class": normalizeClass(unref(drpNs).e('header'))
+      }, [__props.unlinkPanels ? (openBlock(), createElementBlock("button", {
+        key: 0,
+        type: "button",
+        disabled: !enableYearArrow.value,
+        "class": normalizeClass([[unref(ppNs).e('icon-btn'), {
+          'is-disabled': !enableYearArrow.value
+        }], "d-arrow-left"]),
+        onClick: rightPrevYear
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(DArrowLeft))];
+        }),
+        _: 1
+      })], 10, _hoisted_4)) : createCommentVNode("v-if", true), __props.unlinkPanels ? (openBlock(), createElementBlock("button", {
+        key: 1,
+        type: "button",
+        disabled: !enableMonthArrow.value,
+        "class": normalizeClass([[unref(ppNs).e('icon-btn'), {
+          'is-disabled': !enableMonthArrow.value
+        }], "arrow-left"]),
+        onClick: rightPrevMonth
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(ArrowLeft))];
+        }),
+        _: 1
+      })], 10, _hoisted_5)) : createCommentVNode("v-if", true), createElementVNode("button", {
+        type: "button",
+        "class": normalizeClass([unref(ppNs).e('icon-btn'), "d-arrow-right"]),
+        onClick: rightNextYear
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(DArrowRight))];
+        }),
+        _: 1
+      })], 2), createElementVNode("button", {
+        type: "button",
+        "class": normalizeClass([unref(ppNs).e('icon-btn'), "arrow-right"]),
+        onClick: rightNextMonth
+      }, [createVNode(_component_el_icon, null, {
+        "default": withCtx(function () {
+          return [createVNode(unref(ArrowRight))];
+        }),
+        _: 1
+      })], 2), createElementVNode("div", null, toDisplayString(rightLabel.value), 1)], 2), createVNode(unref(DateTable), {
+        date: rightDate.value,
+        "parsed-value": parsedValue.value[1],
+        "disabled-date": unref(rightDisableDate),
+        "cell-class-name": unref(cellClassName),
+        onPick: _cache[11] || (_cache[11] = function ($event) {
+          return handleRangePick($event, 2);
+        }),
+        onSelect: unref(onSelect)
+      }, null, 8, ["date", "parsed-value", "disabled-date", "cell-class-name", "onSelect"])], 2)], 2)], 2), createElementVNode("div", _hoisted_6, [createCommentVNode("      <el-button @click=\"closePanel\" size=\"small\">{{ t('el.datepicker.clear') }}</el-button>"), createVNode(_component_el_button, {
+        type: "primary",
+        onClick: _cache[12] || (_cache[12] = function ($event) {
+          return unref(handleRangeConfirm)();
+        }),
+        size: "small"
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(unref(t)('el.datepicker.confirm')), 1)];
+        }),
+        _: 1
+      })])], 2);
+    };
+  }
+});
+
+export { script as default };

package/dist/components/DatePicker/src/date-picker-com/panel-month-range.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: import("vue").DefineComponent<{
+    unlinkPanels: BooleanConstructor;
+    visible: BooleanConstructor;
+    parsedValue: any;
+}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    unlinkPanels: BooleanConstructor;
+    visible: BooleanConstructor;
+    parsedValue: any;
+}>> & {
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+}, {
+    [x: string]: unknown;
+}, {}>;
+export default _default;

package/dist/components/DatePicker/src/date-picker-com/panel-month-range.vue.js

@@ -0,0 +1,5 @@
+import script from './panel-month-range.vue2.js';
+
+script.__file = "src/components/DatePicker/src/date-picker-com/panel-month-range.vue";
+
+export { script as default };