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

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