@opensig/opendesign/lib/time-picker/components/TimeColumns.vue.js

"use strict";
const vue = require("vue");
const index = require("../../divider/index.js");
const styleClass = require("../../_utils/style-class.js");
const time = require("../../_utils/time.js");
require("../../_utils/is.js");
require("../../hooks/use-theme.js");
const useScreen = require("../../hooks/use-screen.js");
require("@vueuse/core");
const provide = require("../provide.js");
const TimeColumn_vue_vue_type_script_setup_true_lang = require("./TimeColumn.vue.js");
const useTimePickerOptions = require("../use-time-picker-options.js");
const _hoisted_1 = {
  key: 0,
  class: "o-time-panel-mask"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "TimeColumns",
  props: {
    minTime: {},
    maxTime: {}
  },
  emits: ["change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    var _a;
    const props = __props;
    const timePickerCtx = vue.inject(provide.timePickerInjectKey);
    const {
      format,
      hourStep,
      minuteStep,
      secondStep,
      noResponsive,
      disabledHours,
      disabledMinutes,
      disabledSeconds,
      minTime: contextMinTime,
      maxTime: contextMaxTime
    } = timePickerCtx;
    const effectiveMinTime = vue.computed(() => props.minTime ?? (contextMinTime == null ? void 0 : contextMinTime.value));
    const effectiveMaxTime = vue.computed(() => props.maxTime ?? (contextMaxTime == null ? void 0 : contextMaxTime.value));
    const emits = __emit;
    const { isPhonePad } = useScreen.useScreen();
    const isResponding = vue.computed(() => !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value);
    const round = styleClass.getRoundClass({ round: (_a = timePickerCtx.round) == null ? void 0 : _a.value }, "time-picker-columns");
    const showSecond = vue.computed(() => format.value.toLowerCase().includes("s"));
    const selectedHour = vue.ref(null);
    const selectedMinute = vue.ref(null);
    const selectedSecond = vue.ref(null);
    const hasLocalConstraints = vue.computed(() => !!props.minTime || !!props.maxTime);
    const injectedOptions = vue.computed(() => !hasLocalConstraints.value ? timePickerCtx.computedOptions : void 0);
    const localOptions = useTimePickerOptions.useTimePickerOptions({
      hourStep,
      minuteStep,
      secondStep,
      disabledHours,
      disabledMinutes,
      disabledSeconds,
      minTime: effectiveMinTime,
      maxTime: effectiveMaxTime,
      selectedHour,
      selectedMinute
    });
    const hourOptions = vue.computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.hourOptions.value) ?? localOptions.hourOptions.value;
    });
    const minuteOptions = vue.computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.minuteOptions.value) ?? localOptions.minuteOptions.value;
    });
    const secondOptions = vue.computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.secondOptions.value) ?? localOptions.secondOptions.value;
    });
    const disabledHourOptions = vue.computed(() => {
      var _a2;
      return ((_a2 = injectedOptions.value) == null ? void 0 : _a2.disabledHourOptions.value) ?? localOptions.disabledHourOptions.value;
    });
    const { disabledMinuteOptions, disabledSecondOptions } = localOptions;
    const hourIndex = vue.computed(() => {
      if (selectedHour.value === null) return -1;
      return hourOptions.value.findIndex((opt) => opt.value === selectedHour.value);
    });
    const minuteIndex = vue.computed(() => {
      if (selectedMinute.value === null) return -1;
      return minuteOptions.value.findIndex((opt) => opt.value === selectedMinute.value);
    });
    const secondIndex = vue.computed(() => {
      if (selectedSecond.value === null) return -1;
      return secondOptions.value.findIndex((opt) => opt.value === selectedSecond.value);
    });
    const hourColumnRef = vue.ref();
    const minuteColumnRef = vue.ref();
    const secondColumnRef = vue.ref();
    const scrollAllToSelected = async (smooth = false) => {
      var _a2, _b, _c;
      await vue.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 } = time.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 time.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 vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(["o-time-panel-columns", vue.unref(round).class.value]),
          style: vue.normalizeStyle(vue.unref(round).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: "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": vue.unref(noResponsive),
            onChange: handleHourChange
          }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
          !isResponding.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.ODivider), {
            key: 1,
            direction: "v",
            class: "o-time-panel-column-divider"
          })) : vue.createCommentVNode("v-if", true),
          vue.createVNode(TimeColumn_vue_vue_type_script_setup_true_lang, {
            ref_key: "minuteColumnRef",
            ref: minuteColumnRef,
            modelValue: selectedMinute.value,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedMinute.value = $event),
            options: minuteOptions.value,
            "disabled-options": vue.unref(disabledMinuteOptions),
            "no-responsive": vue.unref(noResponsive),
            onChange: handleMinuteChange
          }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"]),
          showSecond.value ? (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"
              })) : vue.createCommentVNode("v-if", true),
              vue.createVNode(TimeColumn_vue_vue_type_script_setup_true_lang, {
                ref_key: "secondColumnRef",
                ref: secondColumnRef,
                modelValue: selectedSecond.value,
                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => selectedSecond.value = $event),
                options: secondOptions.value,
                "disabled-options": vue.unref(disabledSecondOptions),
                "no-responsive": vue.unref(noResponsive),
                onChange: handleSecondChange
              }, null, 8, ["modelValue", "options", "disabled-options", "no-responsive"])
            ],
            64
            /* STABLE_FRAGMENT */
          )) : vue.createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
module.exports = _sfc_main;