@opensig/opendesign/lib/date-picker/components/DatePanel.vue.js

"use strict";
const vue = require("vue");
const core = require("@vueuse/core");
const dayjs = require("dayjs");
const index$1 = require("../../dialog/index.js");
const index$4 = require("../../popup/index.js");
const clientOnly = require("../../_components/client-only.js");
const index$2 = require("../../button/index.js");
const index$5 = require("../../divider/index.js");
const index$3 = require("../../tab/index.js");
const index = require("../../locale/index.js");
require("../../_utils/is.js");
require("../../hooks/use-theme.js");
const useScreen = require("../../hooks/use-screen.js");
const vueUtils = require("../../_utils/vue-utils.js");
const TimeColumns_vue_vue_type_script_setup_true_lang = require("../../time-picker/components/TimeColumns.vue.js");
const provide = require("../provide.js");
const utils = require("../utils.js");
const useCalendar = require("../use-calendar.js");
const DatePanelHeader_vue_vue_type_script_setup_true_lang = require("./DatePanelHeader.vue.js");
const DatePanelCalendar_vue_vue_type_script_setup_true_lang = require("./DatePanelCalendar.vue.js");
const DatePanelMonth_vue_vue_type_script_setup_true_lang = require("./DatePanelMonth.vue.js");
const DatePanelYear_vue_vue_type_script_setup_true_lang = require("./DatePanelYear.vue.js");
const DatePanelTime_vue_vue_type_script_setup_true_lang = require("./DatePanelTime.vue.js");
const DateColumns_vue_vue_type_script_setup_true_lang = require("./DateColumns.vue.js");
const OTabPane_vue_vue_type_script_setup_true_lang = require("../../tab/OTabPane.vue.js");
const _hoisted_1 = {
  key: 1,
  class: "o-select-options-head"
};
const _hoisted_2 = { class: "o-date-panel-date-side" };
const _hoisted_3 = { class: "o-date-panel-content" };
const _hoisted_4 = { class: "o-date-panel-footer" };
const _hoisted_5 = { class: "o-date-panel-shortcut" };
const _hoisted_6 = { key: 0 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "DatePanel",
  props: {
    target: {},
    optionTitle: {}
  },
  emits: ["cancel", "change", "confirm", "preview"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const calendarPanelRef = vue.ref();
    const monthPanelRef = vue.ref();
    const yearPanelRef = vue.ref();
    const datePanelTimeRef = vue.ref();
    const dateColumnsRef = vue.ref();
    const timeColumnsRef = vue.ref();
    const visible = vue.ref(false);
    const setVisible = (newVal) => {
      visible.value = newVal;
      if (!newVal) {
        emits("cancel");
      }
    };
    const datePickerCtx = vue.inject(provide.datePickerInjectKey);
    const {
      size,
      transition,
      popupPosition,
      popupWrapper,
      noResponsive,
      mode: effectiveMode,
      format,
      disabledDate,
      disabledMonth,
      disabledYear,
      minDate,
      maxDate
    } = datePickerCtx;
    const safeDayStartOfWeek = vue.computed(() => {
      var _a;
      return ((_a = datePickerCtx.dayStartOfWeek) == null ? void 0 : _a.value) ?? 1;
    });
    const timeFormat = vue.computed(() => {
      var _a;
      const match = (_a = format == null ? void 0 : format.value) == null ? void 0 : _a.match(/HH:mm(?::ss)?/);
      return match ? match[0] : "HH:mm:ss";
    });
    const parsedMinDate = vue.computed(() => {
      return (minDate == null ? void 0 : minDate.value) ? utils.parseValue(minDate.value) : null;
    });
    const parsedMaxDate = vue.computed(() => {
      return (maxDate == null ? void 0 : maxDate.value) ? utils.parseValue(maxDate.value) : null;
    });
    const { t } = index.useI18n();
    const { isPhonePad } = useScreen.useScreen();
    const isResponding = vue.computed(() => {
      return !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value;
    });
    const popupRef = vue.ref();
    const mobileDateTimeTab = vue.ref("date");
    vue.watch(effectiveMode, () => {
      mobileDateTimeTab.value = "date";
    });
    const displayYear = vue.ref(0);
    const displayMonth = vue.ref(0);
    vue.onMounted(() => {
      if (!displayYear.value) {
        displayYear.value = dayjs().year();
        displayMonth.value = dayjs().month();
      }
    });
    const selectedDate = vue.ref(null);
    const pendingTimeStr = vue.ref("00:00:00");
    const currentView = vue.ref("date");
    const { rows, weekDayHeaders } = useCalendar.useCalendar({
      displayYear,
      displayMonth,
      selectedDate,
      dayStartOfWeek: safeDayStartOfWeek,
      disabledDate,
      minDate: parsedMinDate,
      maxDate: parsedMaxDate
    });
    const isMainPanel = vue.computed(() => {
      if (effectiveMode.value === "year") return currentView.value === "year";
      if (effectiveMode.value === "month") return currentView.value === "month";
      return currentView.value === "date";
    });
    const getValue = () => {
      var _a, _b;
      if (!selectedDate.value) return void 0;
      if (effectiveMode.value === "datetime") {
        let timeStr = "00:00:00";
        if (isResponding.value) {
          timeStr = ((_a = timeColumnsRef.value) == null ? void 0 : _a.getValue()) ?? pendingTimeStr.value;
        } else {
          timeStr = ((_b = datePanelTimeRef.value) == null ? void 0 : _b.getValue()) ?? "00:00:00";
        }
        const [h = 0, m = 0, s = 0] = timeStr.split(":").map(Number);
        return selectedDate.value.hour(h).minute(m).second(s).valueOf();
      }
      return selectedDate.value.valueOf();
    };
    const isColumnMode = vue.computed(
      () => isResponding.value && (effectiveMode.value === "date" || effectiveMode.value === "month" || effectiveMode.value === "year" || effectiveMode.value === "datetime")
    );
    const applyDatetimeTime = (timeStr) => {
      pendingTimeStr.value = timeStr;
      if (isResponding.value) {
        core.until(timeColumnsRef).toBeTruthy().then(() => {
          var _a;
          (_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(timeStr);
        });
      } else if (datePanelTimeRef.value) {
        datePanelTimeRef.value.setValue(timeStr);
      } else {
        core.until(datePanelTimeRef).toBeTruthy().then(() => {
          var _a;
          (_a = datePanelTimeRef.value) == null ? void 0 : _a.setValue(timeStr);
          emits("preview", getValue());
        });
      }
    };
    const setValueWithDate = (d, value) => {
      selectedDate.value = d;
      displayYear.value = d.year();
      displayMonth.value = d.month();
      if (isColumnMode.value) {
        core.until(dateColumnsRef).toBeTruthy().then(() => {
          var _a;
          (_a = dateColumnsRef.value) == null ? void 0 : _a.setValue(value);
        });
      }
      if (effectiveMode.value === "datetime") {
        applyDatetimeTime(d.format(timeFormat.value));
      }
    };
    const setValueEmpty = () => {
      if (isColumnMode.value) {
        const d = dayjs();
        selectedDate.value = d;
        displayYear.value = d.year();
        displayMonth.value = d.month();
        core.until(dateColumnsRef).toBeTruthy().then(() => {
          var _a;
          (_a = dateColumnsRef.value) == null ? void 0 : _a.setValue(void 0);
        });
      } else {
        selectedDate.value = null;
      }
      if (effectiveMode.value === "datetime") {
        pendingTimeStr.value = dayjs().format(timeFormat.value);
        if (isResponding.value) {
          core.until(timeColumnsRef).toBeTruthy().then(() => {
            var _a;
            (_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(void 0);
          });
        } else {
          core.until(datePanelTimeRef).toBeTruthy().then(() => {
            var _a;
            (_a = datePanelTimeRef.value) == null ? void 0 : _a.reset();
          });
        }
      }
    };
    const setValue = (value) => {
      if (value) {
        setValueWithDate(dayjs(value), value);
      } else {
        setValueEmpty();
      }
    };
    const open = async (newVal) => {
      visible.value = true;
      mobileDateTimeTab.value = "date";
      if (effectiveMode.value === "year") {
        currentView.value = "year";
      } else if (effectiveMode.value === "month") {
        currentView.value = "month";
      } else {
        currentView.value = "date";
      }
      setValue(newVal);
    };
    const close = () => {
      visible.value = false;
    };
    const handleSelectDate = (date) => {
      selectedDate.value = date;
      displayYear.value = date.year();
      displayMonth.value = date.month();
      if (currentView.value === "date" && effectiveMode.value !== "datetime") {
        emits("change", getValue());
      } else if (effectiveMode.value === "datetime") {
        emits("preview", getValue());
      }
    };
    const handleTimeChange = () => {
      if (effectiveMode.value === "datetime") {
        emits("preview", getValue());
      }
    };
    const handleSelectMonth = (month) => {
      displayMonth.value = month;
      if (effectiveMode.value === "month") {
        selectedDate.value = dayjs().year(displayYear.value).month(month).date(1);
        emits("change", getValue());
      } else {
        currentView.value = "date";
      }
    };
    const handleSelectYear = (year) => {
      displayYear.value = year;
      if (effectiveMode.value === "year") {
        selectedDate.value = dayjs().year(year).month(0).date(1);
        emits("change", getValue());
      } else if (effectiveMode.value === "month") {
        currentView.value = "month";
      } else {
        currentView.value = "date";
      }
    };
    const handleCancel = () => {
      emits("cancel");
      close();
    };
    const handleConfirm = () => {
      emits("confirm", getValue());
      close();
    };
    const handleDateColumnsChange = (value) => {
      if (value) {
        displayYear.value = value.year;
        if (value.month !== void 0) {
          displayMonth.value = value.month;
          selectedDate.value = dayjs().year(value.year).month(value.month).date(value.day ?? 1);
        } else {
          selectedDate.value = dayjs().year(value.year).month(0).date(1);
        }
        if (effectiveMode.value === "datetime" || isResponding.value) {
          emits("preview", getValue());
        } else {
          emits("change", getValue());
        }
      }
    };
    const handleTimeColumnsChange = () => {
      if (effectiveMode.value === "datetime") {
        emits("preview", getValue());
      }
    };
    __expose({
      getPopupEl: () => popupRef.value,
      getValue,
      setValue,
      open,
      close
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(clientOnly), null, {
        default: vue.withCtx(() => [
          vue.createCommentVNode(" 移动端 "),
          isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.ODialog), {
            key: 0,
            visible: visible.value,
            class: "o-select-dlg",
            "main-class": [
              "o-date-panel",
              `o-date-panel-${vue.unref(size)}`,
              "o-time-panel",
              `o-time-panel-${vue.unref(size)}`,
              { "o-date-panel-touch": isResponding.value, "o-time-panel-touch": isResponding.value }
            ],
            "hide-close": "",
            size: "small",
            "onUpdate:visible": setVisible
          }, {
            header: vue.withCtx(() => [
              vue.createCommentVNode(" 移动端 datetime 模式：日期/时间切换 "),
              isResponding.value && vue.unref(effectiveMode) === "datetime" ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.OTab), {
                key: 0,
                modelValue: mobileDateTimeTab.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => mobileDateTimeTab.value = $event),
                variant: "button",
                round: "pill"
              }, {
                default: vue.withCtx(() => [
                  vue.createVNode(vue.unref(OTabPane_vue_vue_type_script_setup_true_lang), {
                    label: vue.unref(t)("datePicker.date"),
                    value: "date"
                  }, null, 8, ["label"]),
                  vue.createVNode(vue.unref(OTabPane_vue_vue_type_script_setup_true_lang), {
                    label: vue.unref(t)("datePicker.time"),
                    value: "time"
                  }, null, 8, ["label"])
                ]),
                _: 1
                /* STABLE */
              }, 8, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock(
                "div",
                _hoisted_1,
                vue.toDisplayString(props.optionTitle ?? vue.unref(t)("datePicker.selectDate")),
                1
                /* TEXT */
              ))
            ]),
            actions: vue.withCtx(() => [
              vue.createVNode(vue.unref(index$2.OButton), {
                class: "o-dlg-btn",
                variant: "text",
                size: "large",
                onClick: handleCancel
              }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode(
                    vue.toDisplayString(vue.unref(t)("select.cancel")),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              }),
              vue.createVNode(vue.unref(index$2.OButton), {
                class: "o-dlg-btn",
                variant: "text",
                size: "large",
                onClick: handleConfirm
              }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode(
                    vue.toDisplayString(vue.unref(t)("select.confirm")),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            default: vue.withCtx(() => [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(["o-date-panel-body", { "o-date-panel-body-datetime": vue.unref(effectiveMode) === "datetime" }])
                },
                [
                  vue.unref(effectiveMode) === "datetime" ? (vue.openBlock(), vue.createElementBlock(
                    vue.Fragment,
                    { key: 0 },
                    [
                      mobileDateTimeTab.value === "date" ? (vue.openBlock(), vue.createBlock(
                        DateColumns_vue_vue_type_script_setup_true_lang,
                        {
                          key: 0,
                          ref_key: "dateColumnsRef",
                          ref: dateColumnsRef,
                          mode: "date",
                          onChange: handleDateColumnsChange
                        },
                        null,
                        512
                        /* NEED_PATCH */
                      )) : vue.createCommentVNode("v-if", true),
                      mobileDateTimeTab.value === "time" ? (vue.openBlock(), vue.createBlock(
                        TimeColumns_vue_vue_type_script_setup_true_lang,
                        {
                          key: 1,
                          ref_key: "timeColumnsRef",
                          ref: timeColumnsRef,
                          onChange: handleTimeColumnsChange
                        },
                        null,
                        512
                        /* NEED_PATCH */
                      )) : vue.createCommentVNode("v-if", true)
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  )) : (vue.openBlock(), vue.createElementBlock(
                    vue.Fragment,
                    { key: 1 },
                    [
                      vue.createCommentVNode(" 移动端非 datetime 模式 "),
                      vue.createVNode(DateColumns_vue_vue_type_script_setup_true_lang, {
                        ref_key: "dateColumnsRef",
                        ref: dateColumnsRef,
                        mode: vue.unref(effectiveMode),
                        onChange: handleDateColumnsChange
                      }, null, 8, ["mode"])
                    ],
                    2112
                    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
                  ))
                ],
                2
                /* CLASS */
              )
            ]),
            _: 1
            /* STABLE */
          }, 8, ["visible", "main-class"])) : (vue.openBlock(), vue.createElementBlock(
            vue.Fragment,
            { key: 1 },
            [
              vue.createCommentVNode(" PC端 "),
              vue.createVNode(vue.unref(index$4.OPopup), {
                visible: visible.value,
                "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => visible.value = $event),
                class: vue.normalizeClass(["o-date-panel", `o-date-panel-${vue.unref(size)}`, "o-time-panel", `o-time-panel-${vue.unref(size)}`]),
                "hide-close": "",
                target: props.target,
                transition: vue.unref(transition),
                position: vue.unref(popupPosition),
                wrapper: vue.unref(popupWrapper),
                trigger: "none",
                offset: 4,
                "adjust-min-width": false,
                "adjust-width": false
              }, {
                default: vue.withCtx(() => [
                  vue.createElementVNode(
                    "div",
                    {
                      ref_key: "popupRef",
                      ref: popupRef
                    },
                    [
                      vue.createElementVNode(
                        "div",
                        {
                          class: vue.normalizeClass(["o-date-panel-body", { "o-date-panel-body-datetime": vue.unref(effectiveMode) === "datetime" }])
                        },
                        [
                          vue.createElementVNode("div", _hoisted_2, [
                            vue.createElementVNode("div", _hoisted_3, [
                              vue.createVNode(DatePanelHeader_vue_vue_type_script_setup_true_lang, {
                                year: displayYear.value,
                                "onUpdate:year": _cache[1] || (_cache[1] = ($event) => displayYear.value = $event),
                                month: displayMonth.value,
                                "onUpdate:month": _cache[2] || (_cache[2] = ($event) => displayMonth.value = $event),
                                "current-view": currentView.value,
                                "onUpdate:currentView": _cache[3] || (_cache[3] = ($event) => currentView.value = $event)
                              }, null, 8, ["year", "month", "current-view"]),
                              vue.createVNode(vue.unref(index$5.ODivider), { class: "o-date-panel-divider" }),
                              currentView.value === "year" ? (vue.openBlock(), vue.createBlock(DatePanelYear_vue_vue_type_script_setup_true_lang, {
                                key: 0,
                                ref_key: "yearPanelRef",
                                ref: yearPanelRef,
                                year: displayYear.value,
                                "selected-date": selectedDate.value,
                                "disabled-year": vue.unref(disabledYear),
                                "min-date": parsedMinDate.value,
                                "max-date": parsedMaxDate.value,
                                onSelect: handleSelectYear
                              }, null, 8, ["year", "selected-date", "disabled-year", "min-date", "max-date"])) : currentView.value === "month" ? (vue.openBlock(), vue.createBlock(DatePanelMonth_vue_vue_type_script_setup_true_lang, {
                                key: 1,
                                ref_key: "monthPanelRef",
                                ref: monthPanelRef,
                                year: displayYear.value,
                                "selected-date": selectedDate.value,
                                "disabled-month": vue.unref(disabledMonth),
                                "min-date": parsedMinDate.value,
                                "max-date": parsedMaxDate.value,
                                onSelect: handleSelectMonth
                              }, null, 8, ["year", "selected-date", "disabled-month", "min-date", "max-date"])) : (vue.openBlock(), vue.createBlock(DatePanelCalendar_vue_vue_type_script_setup_true_lang, {
                                key: 2,
                                ref_key: "calendarPanelRef",
                                ref: calendarPanelRef,
                                rows: vue.unref(rows),
                                "week-day-headers": vue.unref(weekDayHeaders),
                                onSelect: handleSelectDate
                              }, null, 8, ["rows", "week-day-headers"]))
                            ])
                          ]),
                          vue.unref(effectiveMode) === "datetime" && currentView.value === "date" ? (vue.openBlock(), vue.createElementBlock(
                            vue.Fragment,
                            { key: 0 },
                            [
                              vue.createVNode(vue.unref(index$5.ODivider), {
                                direction: "v",
                                class: "o-date-panel-divider-v"
                              }),
                              vue.createVNode(
                                DatePanelTime_vue_vue_type_script_setup_true_lang,
                                {
                                  ref_key: "datePanelTimeRef",
                                  ref: datePanelTimeRef,
                                  onChange: handleTimeChange
                                },
                                null,
                                512
                                /* NEED_PATCH */
                              )
                            ],
                            64
                            /* STABLE_FRAGMENT */
                          )) : vue.createCommentVNode("v-if", true)
                        ],
                        2
                        /* CLASS */
                      ),
                      (!vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.shortcut) || vue.unref(effectiveMode) === "datetime") && isMainPanel.value ? (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        { key: 0 },
                        [
                          vue.createVNode(vue.unref(index$5.ODivider), { class: "o-date-panel-divider" }),
                          vue.createElementVNode("div", _hoisted_4, [
                            vue.createElementVNode("span", _hoisted_5, [
                              vue.renderSlot(_ctx.$slots, "shortcut", {
                                setValue,
                                emitChange: () => emits("change", getValue())
                              })
                            ]),
                            vue.unref(effectiveMode) === "datetime" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
                              vue.createVNode(vue.unref(index$2.OButton), {
                                round: "pill",
                                onClick: handleConfirm
                              }, {
                                default: vue.withCtx(() => [
                                  vue.createTextVNode(
                                    vue.toDisplayString(vue.unref(t)("select.confirm")),
                                    1
                                    /* TEXT */
                                  )
                                ]),
                                _: 1
                                /* STABLE */
                              })
                            ])) : vue.createCommentVNode("v-if", true)
                          ])
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      )) : vue.createCommentVNode("v-if", true)
                    ],
                    512
                    /* NEED_PATCH */
                  )
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          ))
        ]),
        _: 3
        /* FORWARDED */
      });
    };
  }
});
module.exports = _sfc_main;