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

import { defineComponent, ref, inject, computed, createBlock, openBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, normalizeClass, renderSlot, nextTick } from "vue";
import { until } from "@vueuse/core";
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 { useI18n } from "../../locale/index.mjs";
import "../../_utils/is.mjs";
import "../../hooks/use-theme.mjs";
import { useScreen } from "../../hooks/use-screen.mjs";
import _sfc_main$1 from "./TimeColumns.vue.mjs";
import { timePickerInjectKey } from "../provide.mjs";
const _hoisted_1 = { class: "o-select-options-head" };
const _hoisted_2 = { class: "o-time-panel-content" };
const _hoisted_3 = { class: "o-time-panel-content" };
const _hoisted_4 = { class: "o-time-panel-footer" };
const _hoisted_5 = { class: "o-time-panel-shortcut" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "TimePanel",
  props: {
    target: {},
    optionTitle: {}
  },
  emits: ["cancel", "change", "confirm"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const visible = ref(false);
    const setVisible = (newVal) => {
      visible.value = newVal;
      if (!newVal) {
        emits("cancel");
      }
    };
    const timePickerCtx = inject(timePickerInjectKey);
    const { size, transition, popupPosition, popupWrapper, noResponsive, isRange } = timePickerCtx;
    const { t } = useI18n();
    const { isPhonePad } = useScreen();
    const isResponding = computed(() => {
      return !noResponsive.value && isPhonePad.value;
    });
    const popupRef = ref();
    const timeColumnsRef = ref();
    const getValue = () => {
      var _a;
      return (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue();
    };
    const setValue = (value, smooth = false) => {
      var _a, _b;
      (_a = timeColumnsRef.value) == null ? void 0 : _a.setValue(value);
      (_b = timeColumnsRef.value) == null ? void 0 : _b.scrollAllToSelected(smooth);
    };
    const open = async (newVal) => {
      visible.value = true;
      await until(timeColumnsRef).toBeTruthy();
      await nextTick();
      setValue(newVal);
    };
    const close = () => {
      visible.value = false;
    };
    const handleCancel = () => {
      emits("cancel");
      close();
    };
    const handleConfirm = () => {
      var _a;
      emits("confirm", (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue());
      close();
    };
    const handleChange = () => {
      var _a;
      emits("change", (_a = timeColumnsRef.value) == null ? void 0 : _a.getValue());
    };
    __expose({
      getPopupEl: () => popupRef.value,
      getValue,
      setValue,
      open,
      close
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(ClientOnly), null, {
        default: withCtx(() => [
          isResponding.value ? (openBlock(), createBlock(unref(ODialog), {
            key: 0,
            visible: visible.value,
            class: "o-select-dlg",
            "main-class": ["o-time-panel", `o-time-panel-${unref(size)}`, { "o-time-panel-touch": isResponding.value }],
            "hide-close": "",
            size: "small",
            "onUpdate:visible": setVisible
          }, {
            header: withCtx(() => [
              createElementVNode(
                "div",
                _hoisted_1,
                toDisplayString(props.optionTitle ?? unref(t)("timePicker.selectTime")),
                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", _hoisted_2, [
                createVNode(
                  _sfc_main$1,
                  {
                    ref_key: "timeColumnsRef",
                    ref: timeColumnsRef,
                    onChange: handleChange
                  },
                  null,
                  512
                  /* NEED_PATCH */
                )
              ])
            ]),
            _: 1
            /* STABLE */
          }, 8, ["visible", "main-class"])) : (openBlock(), createBlock(unref(OPopup), {
            key: 1,
            visible: visible.value,
            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
            class: normalizeClass(["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: unref(isRange) ? 8 : 4,
            "adjust-min-width": false,
            "adjust-width": false
          }, {
            default: withCtx(() => [
              createElementVNode(
                "div",
                {
                  ref_key: "popupRef",
                  ref: popupRef
                },
                [
                  createElementVNode("div", _hoisted_3, [
                    createVNode(
                      _sfc_main$1,
                      {
                        ref_key: "timeColumnsRef",
                        ref: timeColumnsRef,
                        onChange: handleChange
                      },
                      null,
                      512
                      /* NEED_PATCH */
                    )
                  ]),
                  createVNode(unref(ODivider), { class: "o-time-panel-divider" }),
                  createElementVNode("div", _hoisted_4, [
                    createElementVNode("span", _hoisted_5, [
                      renderSlot(_ctx.$slots, "shortcut", {
                        setValue,
                        emitChange: handleChange
                      })
                    ]),
                    createVNode(unref(OButton), {
                      round: "pill",
                      onClick: handleConfirm
                    }, {
                      default: withCtx(() => [
                        createTextVNode(
                          toDisplayString(unref(t)("select.confirm")),
                          1
                          /* TEXT */
                        )
                      ]),
                      _: 1
                      /* STABLE */
                    })
                  ])
                ],
                512
                /* NEED_PATCH */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 8, ["visible", "class", "target", "transition", "position", "wrapper", "offset"]))
        ]),
        _: 3
        /* FORWARDED */
      });
    };
  }
});
export {
  _sfc_main as default
};