@opensig/opendesign/es/time-picker/components/TimeColumns.vue.mjs

import { defineComponent, inject, computed, ref, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, createVNode, createBlock, Fragment, nextTick } from "vue";
import { ODivider } from "../../divider/index.mjs";
import { getRoundClass } from "../../_utils/style-class.mjs";
import { stringToDateTimeNumber, dateTimeNumberToString } from "../../_utils/time.mjs";
import "../../_utils/is.mjs";
import "../../hooks/use-theme.mjs";
import { useScreen } from "../../hooks/use-screen.mjs";
import "@vueuse/core";
import { timePickerInjectKey } from "../provide.mjs";
import _sfc_main$1 from "./TimeColumn.vue.mjs";
import { useTimePickerOptions } from "../use-time-picker-options.mjs";
const _hoisted_1 = {
  key: 0,
  class: "o-time-panel-mask"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "TimeColumns",
  props: {
    minTime: {},
    maxTime: {}
  },
  emits: ["change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    var _a;
    const props = __props;
    const timePickerCtx = inject(timePickerInjectKey);
    const {
      format,
      hourStep,
      minuteStep,
      secondStep,
      noResponsive,
      disabledHours,
      disabledMinutes,
      disabledSeconds,
      minTime: contextMinTime,
      maxTime: contextMaxTime
    } = timePickerCtx;
    const effectiveMinTime = computed(() => props.minTime ?? (contextMinTime == null ? void 0 : contextMinTime.value));
    const effectiveMaxTime = computed(() => props.maxTime ?? (contextMaxTime == null ? void 0 : contextMaxTime.value));
    const emits = __emit;
    const { isPhonePad } = useScreen();
    const isResponding = computed(() => !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value);
    const round = getRoundClass({ round: (_a = timePickerCtx.round) == null ? void 0 : _a.value }, "time-picker-columns");
    const showSecond = computed(() => format.value.toLowerCase().includes("s"));
    const selectedHour = ref(null);
    const selectedMinute = ref(null);
    const selectedSecond = ref(null);
    const hasLocalConstraints = computed(() => !!props.minTime || !!props.maxTime);
    const injectedOptions = computed(() => !hasLocalConstraints.value ? timePickerCtx.computedOptions : void 0);
    const localOptions = useTimePickerOptions({
      hourStep,
      minuteStep,
      secondStep,
      disabledHours,
      disabledMinutes,
      disabledSeconds,
      minTime: effectiveMinTime,
      maxTime: effectiveMaxTime,
      selectedHour,
      selectedMinute
    });
    const hourOptions = computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.hourOptions.value) ?? localOptions.hourOptions.value;
    });
    const minuteOptions = computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.minuteOptions.value) ?? localOptions.minuteOptions.value;
    });
    const secondOptions = computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.secondOptions.value) ?? localOptions.secondOptions.value;
    });
    const disabledHourOptions = computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.disabledHourOptions.value) ?? localOptions.disabledHourOptions.value;
    });
    const { disabledMinuteOptions, disabledSecondOptions } = localOptions;
    const hourIndex = computed(() => {
      if (selectedHour.value === null) return -1;
      return hourOptions.value.findIndex((opt) => opt.value === selectedHour.value);
    });
    const minuteIndex = computed(() => {
      if (selectedMinute.value === null) return -1;
      return minuteOptions.value.findIndex((opt) => opt.value === selectedMinute.value);
    });
    const secondIndex = computed(() => {
      if (selectedSecond.value === null) return -1;
      return secondOptions.value.findIndex((opt) => opt.value === selectedSecond.value);
    });
    const hourColumnRef = ref();
    const minuteColumnRef = ref();
    const secondColumnRef = ref();
    const scrollAllToSelected = async (smooth = false) => {
      var _a2, _b, _c;
      await nextTick();
      if (hourIndex.value >= 0) {
        (_a2 = hourColumnRef.value) == null ? void 0 : _a2.scrollToItem(smooth);
      }
      if (minuteIndex.value >= 0) {
        (_b = minuteColumnRef.value) == null ? void 0 : _b.scrollToItem(smooth);
      }
      if (secondIndex.value >= 0) {
        (_c = secondColumnRef.value) == null ? void 0 : _c.scrollToItem(smooth);
      }
    };
    const snapToOption = (options, disabledOptions, value) => {
      const enabled = options.filter((opt) => !disabledOptions.includes(opt.value));
      const pool = enabled.length > 0 ? enabled : options;
      if (pool.some((opt) => opt.value === value)) return value;
      return pool.reduce((nearest, opt) => Math.abs(opt.value - value) < Math.abs(nearest - value) ? opt.value : nearest, pool[0].value);
    };
    const setValue = (value) => {
      if (value instanceof Date) {
        selectedHour.value = snapToOption(hourOptions.value, disabledHourOptions.value, value.getHours());
        selectedMinute.value = snapToOption(minuteOptions.value, disabledMinuteOptions.value, value.getMinutes());
        selectedSecond.value = snapToOption(secondOptions.value, disabledSecondOptions.value, value.getSeconds());
      } else if (value) {
        const { hour, minute, second } = stringToDateTimeNumber(value, { timeOnly: true }) || { hour: null, minute: null, second: null };
        selectedHour.value = hour !== null ? snapToOption(hourOptions.value, disabledHourOptions.value, hour) : null;
        selectedMinute.value = minute !== null ? snapToOption(minuteOptions.value, disabledMinuteOptions.value, minute) : null;
        selectedSecond.value = second !== null ? snapToOption(secondOptions.value, disabledSecondOptions.value, second) : null;
      } else {
        selectedHour.value = null;
        selectedMinute.value = null;
        selectedSecond.value = null;
      }
      scrollAllToSelected(false);
    };
    const getValue = () => {
      return dateTimeNumberToString(
        { hour: selectedHour.value ?? 0, minute: selectedMinute.value ?? 0, second: selectedSecond.value ?? 0 },
        { timeOnly: true, format: format.value }
      );
    };
    const handleChange = () => {
      emits("change", getValue());
    };
    const handleHourChange = () => {
      var _a2, _b;
      if (selectedMinute.value === null) {
        selectedMinute.value = 0;
        (_a2 = minuteColumnRef.value) == null ? void 0 : _a2.scrollToItem(true);
      }
      if (showSecond.value && selectedSecond.value === null) {
        selectedSecond.value = 0;
        (_b = secondColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
      }
      handleChange();
    };
    const handleMinuteChange = () => {
      var _a2, _b;
      if (selectedHour.value === null) {
        selectedHour.value = 0;
        (_a2 = hourColumnRef.value) == null ? void 0 : _a2.scrollToItem(true);
      }
      if (showSecond.value && selectedSecond.value === null) {
        selectedSecond.value = 0;
        (_b = secondColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
      }
      handleChange();
    };
    const handleSecondChange = () => {
      var _a2, _b;
      if (selectedHour.value === null) {
        selectedHour.value = 0;
        (_a2 = hourColumnRef.value) == null ? void 0 : _a2.scrollToItem(true);
      }
      if (selectedMinute.value === null) {
        selectedMinute.value = 0;
        (_b = minuteColumnRef.value) == null ? void 0 : _b.scrollToItem(true);
      }
      handleChange();
    };
    __expose({
      scrollAllToSelected,
      setValue,
      getValue
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-time-panel-columns", unref(round).class.value]),
          style: normalizeStyle(unref(round).style.value)
        },
        [
          isResponding.value ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true),
          createVNode(_sfc_main$1, {
            ref_key: "hourColumnRef",
            ref: hourColumnRef,
            modelValue: selectedHour.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedHour.value = $event),
            options: hourOptions.value,
            "disabled-options": disabledHourOptions.value,
            "no-responsive": unref(noResponsive),
            onChange: handleHourChange
          }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
          !isResponding.value ? (openBlock(), createBlock(unref(ODivider), {
            key: 1,
            direction: "v",
            class: "o-time-panel-column-divider"
          })) : createCommentVNode("v-if", true),
          createVNode(_sfc_main$1, {
            ref_key: "minuteColumnRef",
            ref: minuteColumnRef,
            modelValue: selectedMinute.value,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedMinute.value = $event),
            options: minuteOptions.value,
            "disabled-options": unref(disabledMinuteOptions),
            "no-responsive": unref(noResponsive),
            onChange: handleMinuteChange
          }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
          showSecond.value ? (openBlock(), createElementBlock(
            Fragment,
            { key: 2 },
            [
              !isResponding.value ? (openBlock(), createBlock(unref(ODivider), {
                key: 0,
                direction: "v",
                class: "o-time-panel-column-divider"
              })) : createCommentVNode("v-if", true),
              createVNode(_sfc_main$1, {
                ref_key: "secondColumnRef",
                ref: secondColumnRef,
                modelValue: selectedSecond.value,
                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedSecond.value = $event),
                options: secondOptions.value,
                "disabled-options": unref(disabledSecondOptions),
                "no-responsive": unref(noResponsive),
                onChange: handleSecondChange
              }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
            ],
            64
            /* STABLE_FRAGMENT */
          )) : createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
export {
  _sfc_main as default
};