@element-plus/nightly 0.0.20220526 → 0.0.20220529

package/lib/components/date-picker/src/date-picker-com/panel-date-range2.js

@@ -4,46 +4,57 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var dayjs = require('dayjs');
-var index$2 = require('../../../button/index2.js');
 require('../../../../directives/index2.js');
-require('../../../../hooks/index2.js');
-var index$1 = require('../../../input/index2.js');
+require('../../../../utils/index2.js');
+var index$3 = require('../../../button/index2.js');
+var index = require('../../../input/index2.js');
 require('../../../time-picker/index2.js');
-var index$3 = require('../../../icon/index2.js');
+var index$2 = require('../../../icon/index2.js');
 var iconsVue = require('@element-plus/icons-vue');
 var panelDateRange = require('../props/panel-date-range2.js');
+var useRangePicker = require('../composables/use-range-picker2.js');
+var utils = require('../utils2.js');
 var basicDateTable = require('./basic-date-table2.js');
 var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../../directives/click-outside/index2.js');
-var panelTimePick = require('../../../time-picker/src/time-picker-com/panel-time-pick2.js');
-var index$4 = require('../../../../hooks/use-locale/index2.js');
 var dateUtils = require('../../../time-picker/src/common/date-utils2.js');
+var shared = require('@vue/shared');
+var panelTimePick = require('../../../time-picker/src/time-picker-com/panel-time-pick2.js');
+var index$1 = require('../../../../directives/click-outside/index2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 
-const _sfc_main = vue.defineComponent({
-  directives: { clickoutside: index["default"] },
-  components: {
-    TimePickPanel: panelTimePick["default"],
-    DateTable: basicDateTable["default"],
-    ElInput: index$1.ElInput,
-    ElButton: index$2.ElButton,
-    ElIcon: index$3.ElIcon,
-    DArrowLeft: iconsVue.DArrowLeft,
-    ArrowLeft: iconsVue.ArrowLeft,
-    DArrowRight: iconsVue.DArrowRight,
-    ArrowRight: iconsVue.ArrowRight
-  },
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["disabled"];
+const _hoisted_3 = ["disabled"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["disabled"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: panelDateRange.panelDateRangeProps,
-  emits: ["pick", "set-picker-option", "calendar-change", "panel-change"],
-  setup(props, ctx) {
-    const { t, lang } = index$4.useLocale();
+  emits: [
+    "pick",
+    "set-picker-option",
+    "calendar-change",
+    "panel-change"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const {
+      minDate,
+      maxDate,
+      rangeState,
+      ppNs,
+      drpNs,
+      lang,
+      handleChangeRange,
+      handleRangeConfirm,
+      handleShortcutClick,
+      onSelect,
+      t
+    } = useRangePicker.useRangePicker();
     const leftDate = vue.ref(dayjs__default["default"]().locale(lang.value));
     const rightDate = vue.ref(dayjs__default["default"]().locale(lang.value).add(1, "month"));
-    const minDate = vue.ref(null);
-    const maxDate = vue.ref(null);
     const dateUserInput = vue.ref({
       min: null,
       max: null
@@ -70,7 +81,7 @@ const _sfc_main = vue.defineComponent({
     const rightMonth = vue.computed(() => {
       return rightDate.value.month();
     });
-    const hasShortcuts = vue.computed(() => !!shortcuts.length);
+    const hasShortcuts = vue.computed(() => !!shortcuts.value.length);
     const minVisibleDate = vue.computed(() => {
       if (dateUserInput.value.min !== null)
         return dateUserInput.value.min;
@@ -154,7 +165,7 @@ const _sfc_main = vue.defineComponent({
       handlePanelChange("month");
     };
     const handlePanelChange = (mode) => {
-      ctx.emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
+      emit("panel-change", [leftDate.value.toDate(), rightDate.value.toDate()], mode);
     };
     const enableMonthArrow = vue.computed(() => {
       const nextMonth = (leftMonth.value + 1) % 12;
@@ -164,31 +175,10 @@ const _sfc_main = vue.defineComponent({
     const enableYearArrow = vue.computed(() => {
       return props.unlinkPanels && rightYear.value * 12 + rightMonth.value - (leftYear.value * 12 + leftMonth.value + 1) >= 12;
     });
-    const isValidValue = (value) => {
-      return Array.isArray(value) && value[0] && value[1] && value[0].valueOf() <= value[1].valueOf();
-    };
-    const rangeState = vue.ref({
-      endDate: null,
-      selecting: false
-    });
     const btnDisabled = vue.computed(() => {
-      return !(minDate.value && maxDate.value && !rangeState.value.selecting && isValidValue([minDate.value, maxDate.value]));
+      return !(minDate.value && maxDate.value && !rangeState.value.selecting && utils.isValidRange([minDate.value, maxDate.value]));
     });
-    const handleChangeRange = (val) => {
-      rangeState.value = val;
-    };
-    const onSelect = (selecting) => {
-      rangeState.value.selecting = selecting;
-      if (!selecting) {
-        rangeState.value.endDate = null;
-      }
-    };
     const showTime = vue.computed(() => props.type === "datetime" || props.type === "datetimerange");
-    const handleConfirm = (visible = false) => {
-      if (isValidValue([minDate.value, maxDate.value])) {
-        ctx.emit("pick", [minDate.value, maxDate.value], visible);
-      }
-    };
     const formatEmit = (emitDayjs, index) => {
       if (!emitDayjs)
         return;
@@ -206,25 +196,12 @@ const _sfc_main = vue.defineComponent({
       if (maxDate.value === maxDate_ && minDate.value === minDate_) {
         return;
       }
-      ctx.emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
+      emit("calendar-change", [min_.toDate(), max_ && max_.toDate()]);
       maxDate.value = maxDate_;
       minDate.value = minDate_;
       if (!close || showTime.value)
         return;
-      handleConfirm();
-    };
-    const handleShortcutClick = (shortcut) => {
-      const shortcutValues = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
-      if (shortcutValues) {
-        ctx.emit("pick", [
-          dayjs__default["default"](shortcutValues[0]).locale(lang.value),
-          dayjs__default["default"](shortcutValues[1]).locale(lang.value)
-        ]);
-        return;
-      }
-      if (shortcut.onClick) {
-        shortcut.onClick(ctx);
-      }
+      handleRangeConfirm();
     };
     const minTimePickerVisible = vue.ref(false);
     const maxTimePickerVisible = vue.ref(false);
@@ -323,13 +300,13 @@ const _sfc_main = vue.defineComponent({
     const handleClear = () => {
       leftDate.value = getDefaultValue()[0];
       rightDate.value = leftDate.value.add(1, "month");
-      ctx.emit("pick", null);
+      emit("pick", null);
     };
     const formatToString = (value) => {
-      return Array.isArray(value) ? value.map((_) => _.format(format)) : value.format(format);
+      return shared.isArray(value) ? value.map((_) => _.format(format)) : value.format(format);
     };
     const parseUserInput = (value) => {
-      return Array.isArray(value) ? value.map((_) => dayjs__default["default"](_, format).locale(lang.value)) : dayjs__default["default"](value, format).locale(lang.value);
+      return shared.isArray(value) ? value.map((_) => dayjs__default["default"](_, format).locale(lang.value)) : dayjs__default["default"](value, format).locale(lang.value);
     };
     const getDefaultValue = () => {
       let start;
@@ -348,13 +325,12 @@ const _sfc_main = vue.defineComponent({
       start = start.locale(lang.value);
       return [start, start.add(1, "month")];
     };
-    ctx.emit("set-picker-option", ["isValidValue", isValidValue]);
-    ctx.emit("set-picker-option", ["parseUserInput", parseUserInput]);
-    ctx.emit("set-picker-option", ["formatToString", formatToString]);
-    ctx.emit("set-picker-option", ["handleClear", handleClear]);
+    emit("set-picker-option", ["isValidRange", utils.isValidRange]);
+    emit("set-picker-option", ["parseUserInput", parseUserInput]);
+    emit("set-picker-option", ["formatToString", formatToString]);
+    emit("set-picker-option", ["handleClear", handleClear]);
     const pickerBase = vue.inject("EP_PICKER_BASE");
     const {
-      shortcuts,
       disabledDate,
       cellClassName,
       format,
@@ -362,12 +338,13 @@ const _sfc_main = vue.defineComponent({
       arrowControl,
       clearable
     } = pickerBase.props;
+    const shortcuts = vue.toRef(pickerBase.props, "shortcuts");
     const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
-    vue.watch(() => defaultValue.value, (val) => {
+    vue.watch(defaultValue, (val) => {
       if (val) {
         const defaultArr = getDefaultValue();
-        minDate.value = null;
-        maxDate.value = null;
+        minDate.value = void 0;
+        maxDate.value = void 0;
         leftDate.value = defaultArr[0];
         rightDate.value = defaultArr[1];
       }
@@ -391,375 +368,330 @@ const _sfc_main = vue.defineComponent({
         }
       } else {
         const defaultArr = getDefaultValue();
-        minDate.value = null;
-        maxDate.value = null;
+        minDate.value = void 0;
+        maxDate.value = void 0;
         leftDate.value = defaultArr[0];
         rightDate.value = defaultArr[1];
       }
     }, { immediate: true });
-    return {
-      shortcuts,
-      disabledDate,
-      cellClassName,
-      minTimePickerVisible,
-      maxTimePickerVisible,
-      handleMinTimeClose,
-      handleMaxTimeClose,
-      handleShortcutClick,
-      rangeState,
-      minDate,
-      maxDate,
-      handleRangePick,
-      onSelect,
-      handleChangeRange,
-      btnDisabled,
-      enableYearArrow,
-      enableMonthArrow,
-      rightPrevMonth,
-      rightPrevYear,
-      rightNextMonth,
-      rightNextYear,
-      leftPrevMonth,
-      leftPrevYear,
-      leftNextMonth,
-      leftNextYear,
-      hasShortcuts,
-      leftLabel,
-      rightLabel,
-      leftDate,
-      rightDate,
-      showTime,
-      t,
-      minVisibleDate,
-      maxVisibleDate,
-      minVisibleTime,
-      maxVisibleTime,
-      arrowControl,
-      handleDateInput,
-      handleDateChange,
-      handleTimeInput,
-      handleTimeChange,
-      handleMinTimePick,
-      handleMaxTimePick,
-      handleClear,
-      handleConfirm,
-      timeFormat,
-      clearable
-    };
-  }
-});
-const _hoisted_1 = { class: "el-picker-panel__body-wrapper" };
-const _hoisted_2 = {
-  key: 0,
-  class: "el-picker-panel__sidebar"
-};
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = { class: "el-picker-panel__body" };
-const _hoisted_5 = {
-  key: 0,
-  class: "el-date-range-picker__time-header"
-};
-const _hoisted_6 = { class: "el-date-range-picker__editors-wrap" };
-const _hoisted_7 = { class: "el-date-range-picker__time-picker-wrap" };
-const _hoisted_8 = { class: "el-date-range-picker__time-picker-wrap" };
-const _hoisted_9 = { class: "el-date-range-picker__editors-wrap is-right" };
-const _hoisted_10 = { class: "el-date-range-picker__time-picker-wrap" };
-const _hoisted_11 = { class: "el-date-range-picker__time-picker-wrap" };
-const _hoisted_12 = { class: "el-picker-panel__content el-date-range-picker__content is-left" };
-const _hoisted_13 = { class: "el-date-range-picker__header" };
-const _hoisted_14 = ["disabled"];
-const _hoisted_15 = ["disabled"];
-const _hoisted_16 = { class: "el-picker-panel__content el-date-range-picker__content is-right" };
-const _hoisted_17 = { class: "el-date-range-picker__header" };
-const _hoisted_18 = ["disabled"];
-const _hoisted_19 = ["disabled"];
-const _hoisted_20 = {
-  key: 0,
-  class: "el-picker-panel__footer"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_input = vue.resolveComponent("el-input");
-  const _component_time_pick_panel = vue.resolveComponent("time-pick-panel");
-  const _component_arrow_right = vue.resolveComponent("arrow-right");
-  const _component_el_icon = vue.resolveComponent("el-icon");
-  const _component_d_arrow_left = vue.resolveComponent("d-arrow-left");
-  const _component_arrow_left = vue.resolveComponent("arrow-left");
-  const _component_d_arrow_right = vue.resolveComponent("d-arrow-right");
-  const _component_date_table = vue.resolveComponent("date-table");
-  const _component_el_button = vue.resolveComponent("el-button");
-  const _directive_clickoutside = vue.resolveDirective("clickoutside");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["el-picker-panel el-date-range-picker", [
-      {
-        "has-sidebar": _ctx.$slots.sidebar || _ctx.hasShortcuts,
-        "has-time": _ctx.showTime
-      }
-    ]])
-  }, [
-    vue.createElementVNode("div", _hoisted_1, [
-      vue.renderSlot(_ctx.$slots, "sidebar", { class: "el-picker-panel__sidebar" }),
-      _ctx.hasShortcuts ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shortcuts, (shortcut, key) => {
-          return vue.openBlock(), vue.createElementBlock("button", {
-            key,
-            type: "button",
-            class: "el-picker-panel__shortcut",
-            onClick: ($event) => _ctx.handleShortcutClick(shortcut)
-          }, vue.toDisplayString(shortcut.text), 9, _hoisted_3);
-        }), 128))
-      ])) : vue.createCommentVNode("v-if", true),
-      vue.createElementVNode("div", _hoisted_4, [
-        _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-          vue.createElementVNode("span", _hoisted_6, [
-            vue.createElementVNode("span", _hoisted_7, [
-              vue.createVNode(_component_el_input, {
-                size: "small",
-                disabled: _ctx.rangeState.selecting,
-                placeholder: _ctx.t("el.datepicker.startDate"),
-                class: "el-date-range-picker__editor",
-                "model-value": _ctx.minVisibleDate,
-                onInput: _cache[0] || (_cache[0] = (val) => _ctx.handleDateInput(val, "min")),
-                onChange: _cache[1] || (_cache[1] = (val) => _ctx.handleDateChange(val, "min"))
-              }, null, 8, ["disabled", "placeholder", "model-value"])
-            ]),
-            vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_8, [
-              vue.createVNode(_component_el_input, {
-                size: "small",
-                class: "el-date-range-picker__editor",
-                disabled: _ctx.rangeState.selecting,
-                placeholder: _ctx.t("el.datepicker.startTime"),
-                "model-value": _ctx.minVisibleTime,
-                onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.minTimePickerVisible = true),
-                onInput: _cache[3] || (_cache[3] = (val) => _ctx.handleTimeInput(val, "min")),
-                onChange: _cache[4] || (_cache[4] = (val) => _ctx.handleTimeChange(val, "min"))
-              }, null, 8, ["disabled", "placeholder", "model-value"]),
-              vue.createVNode(_component_time_pick_panel, {
-                visible: _ctx.minTimePickerVisible,
-                format: _ctx.timeFormat,
-                "datetime-role": "start",
-                "time-arrow-control": _ctx.arrowControl,
-                "parsed-value": _ctx.leftDate,
-                onPick: _ctx.handleMinTimePick
-              }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
-            ])), [
-              [_directive_clickoutside, _ctx.handleMinTimeClose]
-            ])
-          ]),
-          vue.createElementVNode("span", null, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_arrow_right)
-              ]),
-              _: 1
-            })
-          ]),
-          vue.createElementVNode("span", _hoisted_9, [
-            vue.createElementVNode("span", _hoisted_10, [
-              vue.createVNode(_component_el_input, {
-                size: "small",
-                class: "el-date-range-picker__editor",
-                disabled: _ctx.rangeState.selecting,
-                placeholder: _ctx.t("el.datepicker.endDate"),
-                "model-value": _ctx.maxVisibleDate,
-                readonly: !_ctx.minDate,
-                onInput: _cache[5] || (_cache[5] = (val) => _ctx.handleDateInput(val, "max")),
-                onChange: _cache[6] || (_cache[6] = (val) => _ctx.handleDateChange(val, "max"))
-              }, null, 8, ["disabled", "placeholder", "model-value", "readonly"])
-            ]),
-            vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", _hoisted_11, [
-              vue.createVNode(_component_el_input, {
-                size: "small",
-                class: "el-date-range-picker__editor",
-                disabled: _ctx.rangeState.selecting,
-                placeholder: _ctx.t("el.datepicker.endTime"),
-                "model-value": _ctx.maxVisibleTime,
-                readonly: !_ctx.minDate,
-                onFocus: _cache[7] || (_cache[7] = ($event) => _ctx.minDate && (_ctx.maxTimePickerVisible = true)),
-                onInput: _cache[8] || (_cache[8] = (val) => _ctx.handleTimeInput(val, "max")),
-                onChange: _cache[9] || (_cache[9] = (val) => _ctx.handleTimeChange(val, "max"))
-              }, null, 8, ["disabled", "placeholder", "model-value", "readonly"]),
-              vue.createVNode(_component_time_pick_panel, {
-                "datetime-role": "end",
-                visible: _ctx.maxTimePickerVisible,
-                format: _ctx.timeFormat,
-                "time-arrow-control": _ctx.arrowControl,
-                "parsed-value": _ctx.rightDate,
-                onPick: _ctx.handleMaxTimePick
-              }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value", "onPick"])
-            ])), [
-              [_directive_clickoutside, _ctx.handleMaxTimeClose]
-            ])
-          ])
-        ])) : vue.createCommentVNode("v-if", true),
-        vue.createElementVNode("div", _hoisted_12, [
-          vue.createElementVNode("div", _hoisted_13, [
-            vue.createElementVNode("button", {
-              type: "button",
-              class: "el-picker-panel__icon-btn d-arrow-left",
-              onClick: _cache[10] || (_cache[10] = (...args) => _ctx.leftPrevYear && _ctx.leftPrevYear(...args))
-            }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_d_arrow_left)
-                ]),
-                _: 1
-              })
-            ]),
-            vue.createElementVNode("button", {
-              type: "button",
-              class: "el-picker-panel__icon-btn arrow-left",
-              onClick: _cache[11] || (_cache[11] = (...args) => _ctx.leftPrevMonth && _ctx.leftPrevMonth(...args))
-            }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_arrow_left)
-                ]),
-                _: 1
-              })
-            ]),
-            _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-              key: 0,
-              type: "button",
-              disabled: !_ctx.enableYearArrow,
-              class: vue.normalizeClass([{ "is-disabled": !_ctx.enableYearArrow }, "el-picker-panel__icon-btn d-arrow-right"]),
-              onClick: _cache[12] || (_cache[12] = (...args) => _ctx.leftNextYear && _ctx.leftNextYear(...args))
-            }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_d_arrow_right)
-                ]),
-                _: 1
-              })
-            ], 10, _hoisted_14)) : vue.createCommentVNode("v-if", true),
-            _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-              key: 1,
-              type: "button",
-              disabled: !_ctx.enableMonthArrow,
-              class: vue.normalizeClass([{ "is-disabled": !_ctx.enableMonthArrow }, "el-picker-panel__icon-btn arrow-right"]),
-              onClick: _cache[13] || (_cache[13] = (...args) => _ctx.leftNextMonth && _ctx.leftNextMonth(...args))
-            }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_arrow_right)
-                ]),
-                _: 1
-              })
-            ], 10, _hoisted_15)) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("div", null, vue.toDisplayString(_ctx.leftLabel), 1)
-          ]),
-          vue.createVNode(_component_date_table, {
-            "selection-mode": "range",
-            date: _ctx.leftDate,
-            "min-date": _ctx.minDate,
-            "max-date": _ctx.maxDate,
-            "range-state": _ctx.rangeState,
-            "disabled-date": _ctx.disabledDate,
-            "cell-class-name": _ctx.cellClassName,
-            onChangerange: _ctx.handleChangeRange,
-            onPick: _ctx.handleRangePick,
-            onSelect: _ctx.onSelect
-          }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onPick", "onSelect"])
-        ]),
-        vue.createElementVNode("div", _hoisted_16, [
-          vue.createElementVNode("div", _hoisted_17, [
-            _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          vue.unref(ppNs).b(),
+          vue.unref(drpNs).b(),
+          {
+            "has-sidebar": _ctx.$slots.sidebar || vue.unref(hasShortcuts),
+            "has-time": vue.unref(showTime)
+          }
+        ])
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ppNs).e("body-wrapper"))
+        }, [
+          vue.renderSlot(_ctx.$slots, "sidebar", {
+            class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
+          }),
+          vue.unref(hasShortcuts) ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass(vue.unref(ppNs).e("sidebar"))
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(shortcuts), (shortcut, key) => {
+              return vue.openBlock(), vue.createElementBlock("button", {
+                key,
+                type: "button",
+                class: vue.normalizeClass(vue.unref(ppNs).e("shortcut")),
+                onClick: ($event) => vue.unref(handleShortcutClick)(shortcut)
+              }, vue.toDisplayString(shortcut.text), 11, _hoisted_1);
+            }), 128))
+          ], 2)) : vue.createCommentVNode("v-if", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ppNs).e("body"))
+          }, [
+            vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              type: "button",
-              disabled: !_ctx.enableYearArrow,
-              class: vue.normalizeClass([{ "is-disabled": !_ctx.enableYearArrow }, "el-picker-panel__icon-btn d-arrow-left"]),
-              onClick: _cache[14] || (_cache[14] = (...args) => _ctx.rightPrevYear && _ctx.rightPrevYear(...args))
+              class: vue.normalizeClass(vue.unref(drpNs).e("time-header"))
             }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_d_arrow_left)
-                ]),
-                _: 1
-              })
-            ], 10, _hoisted_18)) : vue.createCommentVNode("v-if", true),
-            _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
-              key: 1,
-              type: "button",
-              disabled: !_ctx.enableMonthArrow,
-              class: vue.normalizeClass([{ "is-disabled": !_ctx.enableMonthArrow }, "el-picker-panel__icon-btn arrow-left"]),
-              onClick: _cache[15] || (_cache[15] = (...args) => _ctx.rightPrevMonth && _ctx.rightPrevMonth(...args))
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass(vue.unref(drpNs).e("editors-wrap"))
+              }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                }, [
+                  vue.createVNode(vue.unref(index.ElInput), {
+                    size: "small",
+                    disabled: vue.unref(rangeState).selecting,
+                    placeholder: vue.unref(t)("el.datepicker.startDate"),
+                    class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                    "model-value": vue.unref(minVisibleDate),
+                    onInput: _cache[0] || (_cache[0] = (val) => handleDateInput(val, "min")),
+                    onChange: _cache[1] || (_cache[1] = (val) => handleDateChange(val, "min"))
+                  }, null, 8, ["disabled", "placeholder", "class", "model-value"])
+                ], 2),
+                vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                }, [
+                  vue.createVNode(vue.unref(index.ElInput), {
+                    size: "small",
+                    class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                    disabled: vue.unref(rangeState).selecting,
+                    placeholder: vue.unref(t)("el.datepicker.startTime"),
+                    "model-value": vue.unref(minVisibleTime),
+                    onFocus: _cache[2] || (_cache[2] = ($event) => minTimePickerVisible.value = true),
+                    onInput: _cache[3] || (_cache[3] = (val) => handleTimeInput(val, "min")),
+                    onChange: _cache[4] || (_cache[4] = (val) => handleTimeChange(val, "min"))
+                  }, null, 8, ["class", "disabled", "placeholder", "model-value"]),
+                  vue.createVNode(vue.unref(panelTimePick["default"]), {
+                    visible: minTimePickerVisible.value,
+                    format: vue.unref(timeFormat),
+                    "datetime-role": "start",
+                    "time-arrow-control": vue.unref(arrowControl),
+                    "parsed-value": leftDate.value,
+                    onPick: handleMinTimePick
+                  }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
+                ], 2)), [
+                  [vue.unref(index$1["default"]), handleMinTimeClose]
+                ])
+              ], 2),
+              vue.createElementVNode("span", null, [
+                vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.ArrowRight))
+                  ]),
+                  _: 1
+                })
+              ]),
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass([vue.unref(drpNs).e("editors-wrap"), "is-right"])
+              }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                }, [
+                  vue.createVNode(vue.unref(index.ElInput), {
+                    size: "small",
+                    class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                    disabled: vue.unref(rangeState).selecting,
+                    placeholder: vue.unref(t)("el.datepicker.endDate"),
+                    "model-value": vue.unref(maxVisibleDate),
+                    readonly: !vue.unref(minDate),
+                    onInput: _cache[5] || (_cache[5] = (val) => handleDateInput(val, "max")),
+                    onChange: _cache[6] || (_cache[6] = (val) => handleDateChange(val, "max"))
+                  }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"])
+                ], 2),
+                vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+                  class: vue.normalizeClass(vue.unref(drpNs).e("time-picker-wrap"))
+                }, [
+                  vue.createVNode(vue.unref(index.ElInput), {
+                    size: "small",
+                    class: vue.normalizeClass(vue.unref(drpNs).e("editor")),
+                    disabled: vue.unref(rangeState).selecting,
+                    placeholder: vue.unref(t)("el.datepicker.endTime"),
+                    "model-value": vue.unref(maxVisibleTime),
+                    readonly: !vue.unref(minDate),
+                    onFocus: _cache[7] || (_cache[7] = ($event) => vue.unref(minDate) && (maxTimePickerVisible.value = true)),
+                    onInput: _cache[8] || (_cache[8] = (val) => handleTimeInput(val, "max")),
+                    onChange: _cache[9] || (_cache[9] = (val) => handleTimeChange(val, "max"))
+                  }, null, 8, ["class", "disabled", "placeholder", "model-value", "readonly"]),
+                  vue.createVNode(vue.unref(panelTimePick["default"]), {
+                    "datetime-role": "end",
+                    visible: maxTimePickerVisible.value,
+                    format: vue.unref(timeFormat),
+                    "time-arrow-control": vue.unref(arrowControl),
+                    "parsed-value": rightDate.value,
+                    onPick: handleMaxTimePick
+                  }, null, 8, ["visible", "format", "time-arrow-control", "parsed-value"])
+                ], 2)), [
+                  [vue.unref(index$1["default"]), handleMaxTimeClose]
+                ])
+              ], 2)
+            ], 2)) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-left"])
             }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_arrow_left)
-                ]),
-                _: 1
-              })
-            ], 10, _hoisted_19)) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("button", {
-              type: "button",
-              class: "el-picker-panel__icon-btn d-arrow-right",
-              onClick: _cache[16] || (_cache[16] = (...args) => _ctx.rightNextYear && _ctx.rightNextYear(...args))
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(drpNs).e("header"))
+              }, [
+                vue.createElementVNode("button", {
+                  type: "button",
+                  class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-left"]),
+                  onClick: leftPrevYear
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.DArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                vue.createElementVNode("button", {
+                  type: "button",
+                  class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-left"]),
+                  onClick: leftPrevMonth
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 0,
+                  type: "button",
+                  disabled: !vue.unref(enableYearArrow),
+                  class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-right"]),
+                  onClick: leftNextYear
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.DArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 10, _hoisted_2)) : vue.createCommentVNode("v-if", true),
+                _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 1,
+                  type: "button",
+                  disabled: !vue.unref(enableMonthArrow),
+                  class: vue.normalizeClass([[
+                    vue.unref(ppNs).e("icon-btn"),
+                    { "is-disabled": !vue.unref(enableMonthArrow) }
+                  ], "arrow-right"]),
+                  onClick: leftNextMonth
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 10, _hoisted_3)) : vue.createCommentVNode("v-if", true),
+                vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
+              ], 2),
+              vue.createVNode(basicDateTable["default"], {
+                "selection-mode": "range",
+                date: leftDate.value,
+                "min-date": vue.unref(minDate),
+                "max-date": vue.unref(maxDate),
+                "range-state": vue.unref(rangeState),
+                "disabled-date": vue.unref(disabledDate),
+                "cell-class-name": vue.unref(cellClassName),
+                onChangerange: vue.unref(handleChangeRange),
+                onPick: handleRangePick,
+                onSelect: vue.unref(onSelect)
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
+            ], 2),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([[vue.unref(ppNs).e("content"), vue.unref(drpNs).e("content")], "is-right"])
             }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_d_arrow_right)
-                ]),
-                _: 1
-              })
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(drpNs).e("header"))
+              }, [
+                _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 0,
+                  type: "button",
+                  disabled: !vue.unref(enableYearArrow),
+                  class: vue.normalizeClass([[vue.unref(ppNs).e("icon-btn"), { "is-disabled": !vue.unref(enableYearArrow) }], "d-arrow-left"]),
+                  onClick: rightPrevYear
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.DArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 10, _hoisted_4)) : vue.createCommentVNode("v-if", true),
+                _ctx.unlinkPanels ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 1,
+                  type: "button",
+                  disabled: !vue.unref(enableMonthArrow),
+                  class: vue.normalizeClass([[
+                    vue.unref(ppNs).e("icon-btn"),
+                    { "is-disabled": !vue.unref(enableMonthArrow) }
+                  ], "arrow-left"]),
+                  onClick: rightPrevMonth
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowLeft))
+                    ]),
+                    _: 1
+                  })
+                ], 10, _hoisted_5)) : vue.createCommentVNode("v-if", true),
+                vue.createElementVNode("button", {
+                  type: "button",
+                  class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
+                  onClick: rightNextYear
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.DArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                vue.createElementVNode("button", {
+                  type: "button",
+                  class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "arrow-right"]),
+                  onClick: rightNextMonth
+                }, [
+                  vue.createVNode(vue.unref(index$2.ElIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowRight))
+                    ]),
+                    _: 1
+                  })
+                ], 2),
+                vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(rightLabel)), 1)
+              ], 2),
+              vue.createVNode(basicDateTable["default"], {
+                "selection-mode": "range",
+                date: rightDate.value,
+                "min-date": vue.unref(minDate),
+                "max-date": vue.unref(maxDate),
+                "range-state": vue.unref(rangeState),
+                "disabled-date": vue.unref(disabledDate),
+                "cell-class-name": vue.unref(cellClassName),
+                onChangerange: vue.unref(handleChangeRange),
+                onPick: handleRangePick,
+                onSelect: vue.unref(onSelect)
+              }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onSelect"])
+            ], 2)
+          ], 2)
+        ], 2),
+        vue.unref(showTime) ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(vue.unref(ppNs).e("footer"))
+        }, [
+          vue.unref(clearable) ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.ElButton), {
+            key: 0,
+            text: "",
+            size: "small",
+            class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
+            onClick: handleClear
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.clear")), 1)
             ]),
-            vue.createElementVNode("button", {
-              type: "button",
-              class: "el-picker-panel__icon-btn arrow-right",
-              onClick: _cache[17] || (_cache[17] = (...args) => _ctx.rightNextMonth && _ctx.rightNextMonth(...args))
-            }, [
-              vue.createVNode(_component_el_icon, null, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_arrow_right)
-                ]),
-                _: 1
-              })
+            _: 1
+          }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+          vue.createVNode(vue.unref(index$3.ElButton), {
+            plain: "",
+            size: "small",
+            class: vue.normalizeClass(vue.unref(ppNs).e("link-btn")),
+            disabled: vue.unref(btnDisabled),
+            onClick: _cache[10] || (_cache[10] = ($event) => vue.unref(handleRangeConfirm)(false))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.datepicker.confirm")), 1)
             ]),
-            vue.createElementVNode("div", null, vue.toDisplayString(_ctx.rightLabel), 1)
-          ]),
-          vue.createVNode(_component_date_table, {
-            "selection-mode": "range",
-            date: _ctx.rightDate,
-            "min-date": _ctx.minDate,
-            "max-date": _ctx.maxDate,
-            "range-state": _ctx.rangeState,
-            "disabled-date": _ctx.disabledDate,
-            "cell-class-name": _ctx.cellClassName,
-            onChangerange: _ctx.handleChangeRange,
-            onPick: _ctx.handleRangePick,
-            onSelect: _ctx.onSelect
-          }, null, 8, ["date", "min-date", "max-date", "range-state", "disabled-date", "cell-class-name", "onChangerange", "onPick", "onSelect"])
-        ])
-      ])
-    ]),
-    _ctx.showTime ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
-      _ctx.clearable ? (vue.openBlock(), vue.createBlock(_component_el_button, {
-        key: 0,
-        text: "",
-        size: "small",
-        class: "el-picker-panel__link-btn",
-        onClick: _ctx.handleClear
-      }, {
-        default: vue.withCtx(() => [
-          vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.clear")), 1)
-        ]),
-        _: 1
-      }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
-      vue.createVNode(_component_el_button, {
-        plain: "",
-        size: "small",
-        class: "el-picker-panel__link-btn",
-        disabled: _ctx.btnDisabled,
-        onClick: _cache[18] || (_cache[18] = ($event) => _ctx.handleConfirm(false))
-      }, {
-        default: vue.withCtx(() => [
-          vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.confirm")), 1)
-        ]),
-        _: 1
-      }, 8, ["disabled"])
-    ])) : vue.createCommentVNode("v-if", true)
-  ], 2);
-}
-var DateRangePickPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/panel-date-range.vue"]]);
+            _: 1
+          }, 8, ["class", "disabled"])
+        ], 2)) : vue.createCommentVNode("v-if", true)
+      ], 2);
+    };
+  }
+});
+var DateRangePickPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/panel-date-range.vue"]]);
 
 exports["default"] = DateRangePickPanel;
 //# sourceMappingURL=panel-date-range2.js.map