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

"use strict";
const vue = require("vue");
const dayjs = require("dayjs");
const index = require("../../divider/index.js");
require("../../_utils/is.js");
require("../../hooks/use-theme.js");
const useScreen = require("../../hooks/use-screen.js");
require("@vueuse/core");
const styleClass = require("../../_utils/style-class.js");
const TimeColumn_vue_vue_type_script_setup_true_lang = require("../../time-picker/components/TimeColumn.vue.js");
const provide = require("../provide.js");
const useDatePickerOptions = require("../use-date-picker-options.js");
const _hoisted_1 = {
  key: 0,
  class: "o-time-panel-mask o-date-panel-mask"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "DateColumns",
  props: {
    mode: {}
  },
  emits: ["change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const datePickerCtx = vue.inject(provide.datePickerInjectKey);
    const { minDate, maxDate, noResponsive, disabledDate, disabledMonth, disabledYear, round, mode: effectiveMode } = datePickerCtx;
    const props = __props;
    const currentMode = vue.computed(() => props.mode ?? effectiveMode.value ?? "date");
    const emit = __emit;
    const { isPhonePad } = useScreen.useScreen();
    const isResponding = vue.computed(() => !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value);
    const roundClass = styleClass.getRoundClass({ round: round == null ? void 0 : round.value }, "date-picker-columns");
    const currentYear = vue.ref(0);
    const currentMonth = vue.ref(0);
    const currentDay = vue.ref(1);
    const { yearOptions, monthOptions, dayOptions, disabledYearOptions, disabledMonthOptions, disabledDayOptions } = useDatePickerOptions.useDatePickerOptions({
      currentYear,
      currentMonth,
      disabledDate,
      disabledMonth,
      disabledYear,
      minDate,
      maxDate
    });
    const yearColumnRef = vue.ref();
    const monthColumnRef = vue.ref();
    const dayColumnRef = vue.ref();
    const scrollAllToSelected = async (smooth = false) => {
      var _a, _b, _c;
      await vue.nextTick();
      (_a = yearColumnRef.value) == null ? void 0 : _a.scrollToItem(smooth);
      (_b = monthColumnRef.value) == null ? void 0 : _b.scrollToItem(smooth);
      (_c = dayColumnRef.value) == null ? void 0 : _c.scrollToItem(smooth);
    };
    vue.onMounted(() => {
      currentYear.value = dayjs().year();
      currentMonth.value = dayjs().month();
      currentDay.value = dayjs().date();
      scrollAllToSelected(false);
    });
    const setValue = (value) => {
      const d = value ? dayjs(value) : dayjs();
      currentYear.value = d.year();
      currentMonth.value = d.month();
      currentDay.value = d.date();
      scrollAllToSelected(false);
    };
    const getValue = () => {
      if (currentMode.value === "year") {
        return { year: currentYear.value };
      }
      if (currentMode.value === "month") {
        return { year: currentYear.value, month: currentMonth.value };
      }
      return { year: currentYear.value, month: currentMonth.value, day: currentDay.value };
    };
    const handleYearChange = () => {
      var _a, _b, _c, _d;
      if (currentMode.value === "year") {
        emit("change", getValue());
        return;
      }
      const validMonth = monthOptions.value.some((opt) => opt.value === currentMonth.value);
      if (!validMonth) {
        currentMonth.value = ((_a = monthOptions.value[0]) == null ? void 0 : _a.value) ?? 0;
        (_b = monthColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
      }
      if (currentMode.value === "month") {
        emit("change", getValue());
        return;
      }
      const validDay = dayOptions.value.some((opt) => opt.value === currentDay.value);
      if (!validDay) {
        currentDay.value = ((_c = dayOptions.value[0]) == null ? void 0 : _c.value) ?? 1;
        (_d = dayColumnRef.value) == null ? void 0 : _d.scrollToItem(true);
      }
      emit("change", getValue());
    };
    const handleMonthChange = () => {
      var _a, _b;
      if (currentMode.value === "month") {
        emit("change", getValue());
        return;
      }
      const validDay = dayOptions.value.some((opt) => opt.value === currentDay.value);
      if (!validDay) {
        currentDay.value = ((_a = dayOptions.value[0]) == null ? void 0 : _a.value) ?? 1;
        (_b = dayColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
      }
      emit("change", getValue());
    };
    const handleDayChange = () => {
      emit("change", getValue());
    };
    vue.watch(
      () => [minDate == null ? void 0 : minDate.value, maxDate == null ? void 0 : maxDate.value],
      () => scrollAllToSelected(false)
    );
    __expose({
      scrollAllToSelected,
      setValue,
      getValue
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["o-time-panel-columns", "o-date-panel-columns", vue.unref(roundClass).class.value]),
          style: vue.normalizeStyle(vue.unref(roundClass).style.value)
        },
        [
          isResponding.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1)) : vue.createCommentVNode("v-if", true),
          vue.createVNode(TimeColumn_vue_vue_type_script_setup_true_lang, {
            ref_key: "yearColumnRef",
            ref: yearColumnRef,
            modelValue: currentYear.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentYear.value = $event),
            class: "o-date-panel-column-scroller",
            options: vue.unref(yearOptions),
            "disabled-options": vue.unref(disabledYearOptions),
            "no-responsive": vue.unref(noResponsive),
            onChange: handleYearChange
          }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
          currentMode.value !== "year" ? (vue.openBlock(), vue.createElementBlock(
            vue.Fragment,
            { key: 1 },
            [
              !isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.ODivider), {
                key: 0,
                direction: "v",
                class: "o-time-panel-column-divider o-date-panel-column-divider"
              })) : vue.createCommentVNode("v-if", true),
              vue.createVNode(TimeColumn_vue_vue_type_script_setup_true_lang, {
                ref_key: "monthColumnRef",
                ref: monthColumnRef,
                modelValue: currentMonth.value,
                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => currentMonth.value = $event),
                class: "o-date-panel-column-scroller",
                options: vue.unref(monthOptions),
                "disabled-options": vue.unref(disabledMonthOptions),
                "no-responsive": vue.unref(noResponsive),
                onChange: handleMonthChange
              }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
            ],
            64
            /* STABLE_FRAGMENT */
          )) : vue.createCommentVNode("v-if", true),
          currentMode.value === "date" ? (vue.openBlock(), vue.createElementBlock(
            vue.Fragment,
            { key: 2 },
            [
              !isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.ODivider), {
                key: 0,
                direction: "v",
                class: "o-time-panel-column-divider o-date-panel-column-divider"
              })) : vue.createCommentVNode("v-if", true),
              vue.createVNode(TimeColumn_vue_vue_type_script_setup_true_lang, {
                ref_key: "dayColumnRef",
                ref: dayColumnRef,
                modelValue: currentDay.value,
                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => currentDay.value = $event),
                class: "o-date-panel-column-scroller",
                options: vue.unref(dayOptions),
                "disabled-options": vue.unref(disabledDayOptions),
                "no-responsive": vue.unref(noResponsive),
                onChange: handleDayChange
              }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
            ],
            64
            /* STABLE_FRAGMENT */
          )) : vue.createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
module.exports = _sfc_main;