@opensig/opendesign/es/date-picker/components/DatePanel.vue.mjs

import { defineComponent, ref, inject, computed, watch, onMounted, createBlock, openBlock, unref, withCtx, createCommentVNode, createElementBlock, createElementVNode, normalizeClass, Fragment, createVNode, createTextVNode, toDisplayString, renderSlot } from "vue";
import { until } from "@vueuse/core";
import dayjs from "dayjs";
import { ODialog } from "../../dialog/index.mjs";
import { OPopup } from "../../popup/index.mjs";
import ClientOnly from "../../_components/client-only.mjs";
import { OButton } from "../../button/index.mjs";
import { ODivider } from "../../divider/index.mjs";
import { OTab } from "../../tab/index.mjs";
import { useI18n } from "../../locale/index.mjs";
import "../../_utils/is.mjs";
import "../../hooks/use-theme.mjs";
import { useScreen } from "../../hooks/use-screen.mjs";
import { isEmptySlot } from "../../_utils/vue-utils.mjs";
import _sfc_main$2 from "../../time-picker/components/TimeColumns.vue.mjs";
import { datePickerInjectKey } from "../provide.mjs";
import { parseValue } from "../utils.mjs";
import { useCalendar } from "../use-calendar.mjs";
import _sfc_main$4 from "./DatePanelHeader.vue.mjs";
import _sfc_main$7 from "./DatePanelCalendar.vue.mjs";
import _sfc_main$6 from "./DatePanelMonth.vue.mjs";
import _sfc_main$5 from "./DatePanelYear.vue.mjs";
import _sfc_main$8 from "./DatePanelTime.vue.mjs";
import _sfc_main$1 from "./DateColumns.vue.mjs";
import _sfc_main$3 from "../../tab/OTabPane.vue.mjs";
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__ */ 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 = ref();
    const monthPanelRef = ref();
    const yearPanelRef = ref();
    const datePanelTimeRef = ref();
    const dateColumnsRef = ref();
    const timeColumnsRef = ref();
    const visible = ref(false);
    const setVisible = (newVal) => {
      visible.value = newVal;
      if (!newVal) {
        emits("cancel");
      }
    };
    const datePickerCtx = inject(datePickerInjectKey);
    const {
      size,
      transition,
      popupPosition,
      popupWrapper,
      noResponsive,
      mode: effectiveMode,
      format,
      disabledDate,
      disabledMonth,
      disabledYear,
      minDate,
      maxDate
    } = datePickerCtx;
    const safeDayStartOfWeek = computed(() => {
      var _a;
      return ((_a = datePickerCtx.dayStartOfWeek) == null ? void 0 : _a.value) ?? 1;
    });
    const timeFormat = 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 = computed(() => {
      return (minDate == null ? void 0 : minDate.value) ? parseValue(minDate.value) : null;
    });
    const parsedMaxDate = computed(() => {
      return (maxDate == null ? void 0 : maxDate.value) ? parseValue(maxDate.value) : null;
    });
    const { t } = useI18n();
    const { isPhonePad } = useScreen();
    const isResponding = computed(() => {
      return !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value;
    });
    const popupRef = ref();
    const mobileDateTimeTab = ref("date");
    watch(effectiveMode, () => {
      mobileDateTimeTab.value = "date";
    });
    const displayYear = ref(0);
    const displayMonth = ref(0);
    onMounted(() => {
      if (!displayYear.value) {
        displayYear.value = dayjs().year();
        displayMonth.value = dayjs().month();
      }
    });
    const selectedDate = ref(null);
    const pendingTimeStr = ref("00:00:00");
    const currentView = ref("date");
    const { rows, weekDayHeaders } = useCalendar({
      displayYear,
      displayMonth,
      selectedDate,
      dayStartOfWeek: safeDayStartOfWeek,
      disabledDate,
      minDate: parsedMinDate,
      maxDate: parsedMaxDate
    });
    const isMainPanel = 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 = computed(
      () => isResponding.value && (effectiveMode.value === "date" || effectiveMode.value === "month" || effectiveMode.value === "year" || effectiveMode.value === "datetime")
    );
    const applyDatetimeTime = (timeStr) => {
      pendingTimeStr.value = timeStr;
      if (isResponding.value) {
        until(timeColumnsRef).toBeTruthy().then(() => {
          var _a;
          (_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(timeStr);
        });
      } else if (datePanelTimeRef.value) {
        datePanelTimeRef.value.setValue(timeStr);
      } else {
        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) {
        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();
        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) {
          until(timeColumnsRef).toBeTruthy().then(() => {
            var _a;
            (_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(void 0);
          });
        } else {
          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 openBlock(), createBlock(unref(ClientOnly), null, {
        default: withCtx(() => [
          createCommentVNode(" 移动端 "),
          isResponding.value ? (openBlock(), createBlock(unref(ODialog), {
            key: 0,
            visible: visible.value,
            class: "o-select-dlg",
            "main-class": [
              "o-date-panel",
              `o-date-panel-${unref(size)}`,
              "o-time-panel",
              `o-time-panel-${unref(size)}`,
              { "o-date-panel-touch": isResponding.value, "o-time-panel-touch": isResponding.value }
            ],
            "hide-close": "",
            size: "small",
            "onUpdate:visible": setVisible
          }, {
            header: withCtx(() => [
              createCommentVNode(" 移动端 datetime 模式：日期/时间切换 "),
              isResponding.value && unref(effectiveMode) === "datetime" ? (openBlock(), createBlock(unref(OTab), {
                key: 0,
                modelValue: mobileDateTimeTab.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => mobileDateTimeTab.value = $event),
                variant: "button",
                round: "pill"
              }, {
                default: withCtx(() => [
                  createVNode(unref(_sfc_main$3), {
                    label: unref(t)("datePicker.date"),
                    value: "date"
                  }, null, 8, ["label"]),
                  createVNode(unref(_sfc_main$3), {
                    label: unref(t)("datePicker.time"),
                    value: "time"
                  }, null, 8, ["label"])
                ]),
                _: 1
                /* STABLE */
              }, 8, ["modelValue"])) : (openBlock(), createElementBlock(
                "div",
                _hoisted_1,
                toDisplayString(props.optionTitle ?? unref(t)("datePicker.selectDate")),
                1
                /* TEXT */
              ))
            ]),
            actions: withCtx(() => [
              createVNode(unref(OButton), {
                class: "o-dlg-btn",
                variant: "text",
                size: "large",
                onClick: handleCancel
              }, {
                default: withCtx(() => [
                  createTextVNode(
                    toDisplayString(unref(t)("select.cancel")),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              }),
              createVNode(unref(OButton), {
                class: "o-dlg-btn",
                variant: "text",
                size: "large",
                onClick: handleConfirm
              }, {
                default: withCtx(() => [
                  createTextVNode(
                    toDisplayString(unref(t)("select.confirm")),
                    1
                    /* TEXT */
                  )
                ]),
                _: 1
                /* STABLE */
              })
            ]),
            default: withCtx(() => [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(["o-date-panel-body", { "o-date-panel-body-datetime": unref(effectiveMode) === "datetime" }])
                },
                [
                  unref(effectiveMode) === "datetime" ? (openBlock(), createElementBlock(
                    Fragment,
                    { key: 0 },
                    [
                      mobileDateTimeTab.value === "date" ? (openBlock(), createBlock(
                        _sfc_main$1,
                        {
                          key: 0,
                          ref_key: "dateColumnsRef",
                          ref: dateColumnsRef,
                          mode: "date",
                          onChange: handleDateColumnsChange
                        },
                        null,
                        512
                        /* NEED_PATCH */
                      )) : createCommentVNode("v-if", true),
                      mobileDateTimeTab.value === "time" ? (openBlock(), createBlock(
                        _sfc_main$2,
                        {
                          key: 1,
                          ref_key: "timeColumnsRef",
                          ref: timeColumnsRef,
                          onChange: handleTimeColumnsChange
                        },
                        null,
                        512
                        /* NEED_PATCH */
                      )) : createCommentVNode("v-if", true)
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  )) : (openBlock(), createElementBlock(
                    Fragment,
                    { key: 1 },
                    [
                      createCommentVNode(" 移动端非 datetime 模式 "),
                      createVNode(_sfc_main$1, {
                        ref_key: "dateColumnsRef",
                        ref: dateColumnsRef,
                        mode: unref(effectiveMode),
                        onChange: handleDateColumnsChange
                      }, null, 8, ["mode"])
                    ],
                    2112
                    /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
                  ))
                ],
                2
                /* CLASS */
              )
            ]),
            _: 1
            /* STABLE */
          }, 8, ["visible", "main-class"])) : (openBlock(), createElementBlock(
            Fragment,
            { key: 1 },
            [
              createCommentVNode(" PC端 "),
              createVNode(unref(OPopup), {
                visible: visible.value,
                "onUpdate:visible": _cache[4] || (_cache[4] = ($event) => visible.value = $event),
                class: normalizeClass(["o-date-panel", `o-date-panel-${unref(size)}`, "o-time-panel", `o-time-panel-${unref(size)}`]),
                "hide-close": "",
                target: props.target,
                transition: unref(transition),
                position: unref(popupPosition),
                wrapper: unref(popupWrapper),
                trigger: "none",
                offset: 4,
                "adjust-min-width": false,
                "adjust-width": false
              }, {
                default: withCtx(() => [
                  createElementVNode(
                    "div",
                    {
                      ref_key: "popupRef",
                      ref: popupRef
                    },
                    [
                      createElementVNode(
                        "div",
                        {
                          class: normalizeClass(["o-date-panel-body", { "o-date-panel-body-datetime": unref(effectiveMode) === "datetime" }])
                        },
                        [
                          createElementVNode("div", _hoisted_2, [
                            createElementVNode("div", _hoisted_3, [
                              createVNode(_sfc_main$4, {
                                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"]),
                              createVNode(unref(ODivider), { class: "o-date-panel-divider" }),
                              currentView.value === "year" ? (openBlock(), createBlock(_sfc_main$5, {
                                key: 0,
                                ref_key: "yearPanelRef",
                                ref: yearPanelRef,
                                year: displayYear.value,
                                "selected-date": selectedDate.value,
                                "disabled-year": 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" ? (openBlock(), createBlock(_sfc_main$6, {
                                key: 1,
                                ref_key: "monthPanelRef",
                                ref: monthPanelRef,
                                year: displayYear.value,
                                "selected-date": selectedDate.value,
                                "disabled-month": unref(disabledMonth),
                                "min-date": parsedMinDate.value,
                                "max-date": parsedMaxDate.value,
                                onSelect: handleSelectMonth
                              }, null, 8, ["year", "selected-date", "disabled-month", "min-date", "max-date"])) : (openBlock(), createBlock(_sfc_main$7, {
                                key: 2,
                                ref_key: "calendarPanelRef",
                                ref: calendarPanelRef,
                                rows: unref(rows),
                                "week-day-headers": unref(weekDayHeaders),
                                onSelect: handleSelectDate
                              }, null, 8, ["rows", "week-day-headers"]))
                            ])
                          ]),
                          unref(effectiveMode) === "datetime" && currentView.value === "date" ? (openBlock(), createElementBlock(
                            Fragment,
                            { key: 0 },
                            [
                              createVNode(unref(ODivider), {
                                direction: "v",
                                class: "o-date-panel-divider-v"
                              }),
                              createVNode(
                                _sfc_main$8,
                                {
                                  ref_key: "datePanelTimeRef",
                                  ref: datePanelTimeRef,
                                  onChange: handleTimeChange
                                },
                                null,
                                512
                                /* NEED_PATCH */
                              )
                            ],
                            64
                            /* STABLE_FRAGMENT */
                          )) : createCommentVNode("v-if", true)
                        ],
                        2
                        /* CLASS */
                      ),
                      (!unref(isEmptySlot)(_ctx.$slots.shortcut) || unref(effectiveMode) === "datetime") && isMainPanel.value ? (openBlock(), createElementBlock(
                        Fragment,
                        { key: 0 },
                        [
                          createVNode(unref(ODivider), { class: "o-date-panel-divider" }),
                          createElementVNode("div", _hoisted_4, [
                            createElementVNode("span", _hoisted_5, [
                              renderSlot(_ctx.$slots, "shortcut", {
                                setValue,
                                emitChange: () => emits("change", getValue())
                              })
                            ]),
                            unref(effectiveMode) === "datetime" ? (openBlock(), createElementBlock("span", _hoisted_6, [
                              createVNode(unref(OButton), {
                                round: "pill",
                                onClick: handleConfirm
                              }, {
                                default: withCtx(() => [
                                  createTextVNode(
                                    toDisplayString(unref(t)("select.confirm")),
                                    1
                                    /* TEXT */
                                  )
                                ]),
                                _: 1
                                /* STABLE */
                              })
                            ])) : createCommentVNode("v-if", true)
                          ])
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      )) : createCommentVNode("v-if", true)
                    ],
                    512
                    /* NEED_PATCH */
                  )
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["visible", "class", "target", "transition", "position", "wrapper"])
            ],
            2112
            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
          ))
        ]),
        _: 3
        /* FORWARDED */
      });
    };
  }
});
export {
  _sfc_main as default
};