@opensig/opendesign/lib/date-picker/ODateTimeRangePicker.vue.js

"use strict";
const vue = require("vue");
const InBox_vue_vue_type_script_setup_true_lang = require("../_components/in-box/InBox.vue.js");
const InInput_vue_vue_type_script_setup_true_lang = require("../_components/in-input/InInput.vue.js");
const vueUtils = require("../_utils/vue-utils.js");
const icons = require("../_utils/icons.js");
const index = require("../locale/index.js");
require("../_utils/is.js");
require("../hooks/use-theme.js");
const useScreen = require("../hooks/use-screen.js");
require("@vueuse/core");
const types = require("./types.js");
const useRangePickerBase = require("./composables/use-range-picker-base.js");
const utils = require("./utils.js");
const DateTimeRangePanel_vue_vue_type_script_setup_true_lang = require("./components/DateTimeRangePanel.vue.js");
const useClickOutside = require("./composables/use-click-outside.js");
const _hoisted_1 = {
  key: 0,
  class: "o_input-suffix-icon"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "ODateTimeRangePicker",
  props: /* @__PURE__ */ vue.mergeModels(types.dateTimeRangePickerProps, {
    "start": { default: void 0 },
    "startModifiers": {},
    "end": { default: void 0 },
    "endModifiers": {}
  }),
  emits: /* @__PURE__ */ vue.mergeModels(["change", "blur", "focus", "clear"], ["update:start", "update:end"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const start = vue.useModel(__props, "start");
    const end = vue.useModel(__props, "end");
    const {
      startTimestamp,
      endTimestamp,
      effectiveColor,
      onFocus: baseOnFocus,
      notifyChange
    } = useRangePickerBase.useRangePickerBase({ props, mode: "datetime", start, end, emit: emits });
    const { t } = index.useI18n();
    const { isPhonePad } = useScreen.useScreen();
    const isResponding = vue.computed(() => !props.noResponsive && isPhonePad.value);
    const toDisplayStr = (ts) => {
      var _a;
      return ts ? ((_a = utils.parseValue(ts)) == null ? void 0 : _a.format(props.format)) ?? "" : "";
    };
    const tempStart = vue.computed(() => toDisplayStr(startTimestamp.value));
    const tempEnd = vue.computed(() => toDisplayStr(endTimestamp.value));
    const startFocused = vue.ref(false);
    const endFocused = vue.ref(false);
    const anyFocused = vue.computed(() => startFocused.value || endFocused.value);
    vue.watch(anyFocused, (newVal, oldVal) => {
      if (!newVal && oldVal) {
        emits("blur");
      }
    });
    const inBoxRef = vue.ref();
    const startInputRef = vue.ref();
    const endInputRef = vue.ref();
    const panelRef = vue.ref();
    const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly && (!!tempStart.value || !!tempEnd.value));
    let skipOpenPanel = false;
    const openPanel = () => {
      var _a;
      if (props.disabled || props.readonly) return;
      (_a = panelRef.value) == null ? void 0 : _a.open(startTimestamp.value, endTimestamp.value);
    };
    const closeAndBlur = () => {
      var _a, _b, _c;
      (_a = panelRef.value) == null ? void 0 : _a.close();
      startFocused.value = false;
      endFocused.value = false;
      (_b = startInputRef.value) == null ? void 0 : _b.blur();
      (_c = endInputRef.value) == null ? void 0 : _c.blur();
    };
    const onStartFocus = (e) => {
      if (!anyFocused.value) baseOnFocus(e);
      startFocused.value = true;
      if (!skipOpenPanel) openPanel();
      skipOpenPanel = false;
    };
    const onEndFocus = (e) => {
      if (!anyFocused.value) baseOnFocus(e);
      endFocused.value = true;
      openPanel();
    };
    useClickOutside.useClickOutside({
      targets: [() => {
        var _a;
        return (_a = inBoxRef.value) == null ? void 0 : _a.$el;
      }, () => {
        var _a;
        return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
      }],
      onOutside: () => closeAndBlur(),
      disabled: isResponding
    });
    const handlePanelDateChange = (newStart, newEnd) => {
      startTimestamp.value = newStart;
      endTimestamp.value = newEnd;
    };
    const handlePanelChange = (newStart, newEnd) => {
      startTimestamp.value = newStart;
      endTimestamp.value = newEnd;
      if (newStart && newEnd || !newStart && !newEnd) {
        emits("change", start.value, end.value);
        notifyChange();
        if (newStart && newEnd) closeAndBlur();
      }
    };
    const onClear = (e) => {
      e == null ? void 0 : e.stopPropagation();
      startTimestamp.value = void 0;
      endTimestamp.value = void 0;
      emits("clear", e);
      emits("change", void 0, void 0);
      notifyChange();
      closeAndBlur();
    };
    __expose({
      /**
       * @zh-CN 使输入框获取焦点，open 为 false 时仅聚焦不打开面板
       * @en-US Focus the input. Pass false to focus without opening the panel.
       */
      focus: (open = true) => {
        var _a;
        if (!open) skipOpenPanel = true;
        (_a = startInputRef.value) == null ? void 0 : _a.focus();
      },
      /**
       * @zh-CN 使输入框失去焦点
       * @en-US Blur the input
       */
      blur: () => closeAndBlur(),
      /**
       * @zh-CN 清除输入值
       * @en-US Clear the input value
       */
      clear: () => onClear()
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(InBox_vue_vue_type_script_setup_true_lang), vue.mergeProps({
        ref_key: "inBoxRef",
        ref: inBoxRef
      }, {
        size: props.size,
        variant: props.variant,
        color: vue.unref(effectiveColor),
        disabled: props.disabled,
        readonly: props.readonly,
        round: props.round,
        focused: !!anyFocused.value
      }, {
        class: ["o-date-picker", "o-datetime-range-picker", "o-time-picker", "o-time-range-picker", { "o_input-clearable": isClearable.value }, "o-input"]
      }), vue.createSlots({
        default: vue.withCtx(() => [
          vue.createVNode(vue.unref(InInput_vue_vue_type_script_setup_true_lang), {
            ref_key: "startInputRef",
            ref: startInputRef,
            "model-value": tempStart.value,
            class: vue.normalizeClass(["o-input-wrap o-range-start-input-wrap", { "o-input-wrap-focused": startFocused.value }]),
            disabled: _ctx.disabled,
            readonly: _ctx.readonly,
            placeholder: props.placeholderStart ?? vue.unref(t)("dateRangePicker.placeholderStart"),
            "max-length": props.format.length,
            "input-on-outlimit": false,
            "show-length": "never",
            "no-keyboard": "",
            onFocus: onStartFocus
          }, {
            extra: vue.withCtx(() => {
              var _a;
              return [
                !_ctx.disabled && !_ctx.readonly ? (vue.openBlock(), vue.createBlock(DateTimeRangePanel_vue_vue_type_script_setup_true_lang, {
                  key: 0,
                  ref_key: "panelRef",
                  ref: panelRef,
                  target: (_a = inBoxRef.value) == null ? void 0 : _a.$el,
                  "option-title": props.optionTitle,
                  onChange: handlePanelDateChange,
                  onConfirm: handlePanelChange
                }, vue.createSlots({
                  _: 2
                  /* DYNAMIC */
                }, [
                  !vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.shortcut) ? {
                    name: "shortcut",
                    fn: vue.withCtx(({ setValue, emitChange }) => [
                      vue.renderSlot(_ctx.$slots, "shortcut", {
                        setValue,
                        emitChange
                      })
                    ]),
                    key: "0"
                  } : void 0
                ]), 1032, ["target", "option-title"])) : vue.createCommentVNode("v-if", true)
              ];
            }),
            _: 3
            /* FORWARDED */
          }, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
          _cache[2] || (_cache[2] = vue.createElementVNode(
            "div",
            { class: "o-date-range-picker-divider" },
            "-",
            -1
            /* CACHED */
          )),
          vue.createVNode(vue.unref(InInput_vue_vue_type_script_setup_true_lang), {
            ref_key: "endInputRef",
            ref: endInputRef,
            "model-value": tempEnd.value,
            class: vue.normalizeClass(["o-input-wrap o-range-end-input-wrap", { "o-input-wrap-focused": endFocused.value }]),
            disabled: _ctx.disabled,
            readonly: _ctx.readonly,
            placeholder: props.placeholderEnd ?? vue.unref(t)("dateRangePicker.placeholderEnd"),
            "max-length": props.format.length,
            "input-on-outlimit": false,
            "show-length": "never",
            "no-keyboard": "",
            onFocus: onEndFocus
          }, null, 8, ["model-value", "class", "disabled", "readonly", "placeholder", "max-length"]),
          vue.createElementVNode(
            "div",
            {
              class: "o_input-suffix",
              onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
              }, ["prevent"]))
            },
            [
              !isResponding.value || !isClearable.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
                vue.createVNode(vue.unref(icons.IconCalendar))
              ])) : vue.createCommentVNode("v-if", true),
              isClearable.value ? (vue.openBlock(), vue.createElementBlock(
                "div",
                {
                  key: 1,
                  class: "o_input-clear",
                  onClick: onClear,
                  onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                  }, ["prevent"]))
                },
                [
                  vue.createVNode(vue.unref(icons.IconClose), { class: "o_input-clear-icon" })
                ],
                32
                /* NEED_HYDRATION */
              )) : vue.createCommentVNode("v-if", true)
            ],
            32
            /* NEED_HYDRATION */
          )
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        !vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.prepend) ? {
          name: "prepend",
          fn: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "prepend")
          ]),
          key: "0"
        } : void 0,
        !vue.unref(vueUtils.isEmptySlot)(_ctx.$slots.append) ? {
          name: "append",
          fn: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "append")
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["class"]);
    };
  }
});
module.exports = _sfc_main;