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

import { defineComponent, mergeModels, useModel, inject, computed, ref, watch, createBlock, openBlock, unref, withKeys, normalizeClass, createSlots, withCtx, createCommentVNode, renderSlot, createVNode } from "vue";
import { useDebounceFn } from "@vueuse/core";
import dayjs from "dayjs";
import _sfc_main$1 from "../../_components/in-input/InInput.vue.mjs";
import "../../_utils/is.mjs";
import "../../hooks/use-theme.mjs";
import { useScreen } from "../../hooks/use-screen.mjs";
import { isEmptySlot } from "../../_utils/vue-utils.mjs";
import { useI18n } from "../../locale/index.mjs";
import { IconCalendar } from "../../_utils/icons.mjs";
import { datePickerInjectKey } from "../provide.mjs";
import { parseValue } from "../utils.mjs";
import _sfc_main$2 from "./DatePanel.vue.mjs";
import { useClickOutside } from "../composables/use-click-outside.mjs";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "InnerDatePicker",
  props: /* @__PURE__ */ mergeModels({
    placeholder: { default: void 0 },
    optionTitle: { default: void 0 },
    inBoxRef: { default: void 0 },
    inputId: { default: void 0 },
    hasIcon: { type: Boolean, default: false }
  }, {
    "modelValue": { default: void 0, required: true },
    "modelModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["change", "blur", "focus", "clear", "pressEnter"], ["update:modelValue"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const modelValue = useModel(__props, "modelValue");
    const datePickerCtx = inject(datePickerInjectKey);
    const { clearable, disabled, readonly, noResponsive, mode: effectiveMode, minDate, maxDate } = datePickerCtx;
    const effectiveFormat = computed(() => {
      var _a;
      return (_a = datePickerCtx.format) == null ? void 0 : _a.value;
    });
    const parsedMinDate = computed(() => {
      return (minDate == null ? void 0 : minDate.value) ? parseValue(minDate.value) : null;
    });
    const parsedMaxDate = computed(() => {
      return (maxDate == null ? void 0 : maxDate.value) ? parseValue(maxDate.value) : null;
    });
    const { t } = useI18n();
    const { isPhonePad } = useScreen();
    const isResponding = computed(() => !(noResponsive == null ? void 0 : noResponsive.value) && isPhonePad.value);
    const inInputRef = ref();
    const panelRef = ref();
    const effectivePlaceholder = computed(() => {
      if (props.placeholder !== void 0) return props.placeholder;
      if (effectiveMode.value === "year") return t("datePicker.yearPlaceholder");
      if (effectiveMode.value === "month") return t("datePicker.monthPlaceholder");
      return t("datePicker.placeholder");
    });
    const tempInputValue = ref();
    const isTempInputValueValid = computed(() => {
      var _a, _b;
      if (!tempInputValue.value) return true;
      const d = dayjs(tempInputValue.value);
      if (!d.isValid()) return false;
      if (parsedMinDate.value && d.isBefore(parsedMinDate.value)) return false;
      if (parsedMaxDate.value && d.isAfter(parsedMaxDate.value)) return false;
      if ((_b = (_a = datePickerCtx.disabledDate) == null ? void 0 : _a.value) == null ? void 0 : _b.call(_a, { date: d.toDate(), year: d.year(), month: d.month(), day: d.date() })) return false;
      return true;
    });
    watch(
      modelValue,
      (newValue) => {
        if (!newValue && newValue !== 0) {
          tempInputValue.value = "";
          return;
        }
        tempInputValue.value = dayjs(newValue).format(effectiveFormat.value);
      },
      {
        immediate: true
      }
    );
    const isFocus = ref(false);
    watch(isFocus, (newVal, oldVal) => {
      var _a;
      if (!newVal && oldVal) {
        tempInputValue.value = modelValue.value ? dayjs(modelValue.value).format(effectiveFormat.value) : "";
        if (!isResponding.value) {
          (_a = panelRef.value) == null ? void 0 : _a.close();
        }
        emits("blur");
      }
    });
    useClickOutside({
      targets: [() => props.inBoxRef, () => {
        var _a;
        return (_a = panelRef.value) == null ? void 0 : _a.getPopupEl();
      }],
      onOutside: () => {
        isFocus.value = false;
      },
      disabled: isResponding
    });
    let skipOpenPanel = false;
    const onFocus = (e) => {
      var _a;
      if (readonly == null ? void 0 : readonly.value) {
        return;
      }
      if (!skipOpenPanel) {
        let valueToOpen = tempInputValue.value;
        if (!valueToOpen) {
          const today = dayjs().format(effectiveFormat.value);
          tempInputValue.value = today;
          valueToOpen = today;
        }
        (_a = panelRef.value) == null ? void 0 : _a.open(dayjs(valueToOpen, effectiveFormat.value).valueOf());
      }
      skipOpenPanel = false;
      if (isFocus.value) {
        return;
      }
      isFocus.value = true;
      emits("focus", e);
    };
    let prevValue = modelValue.value;
    const handleChange = () => {
      var _a, _b;
      const useTempInput = effectiveMode.value !== "datetime" && isTempInputValueValid.value;
      const newFormatted = useTempInput ? (_a = parseValue(tempInputValue.value)) == null ? void 0 : _a.valueOf() : (_b = panelRef.value) == null ? void 0 : _b.getValue();
      modelValue.value = newFormatted;
      emits("change", newFormatted, prevValue);
      prevValue = newFormatted;
    };
    const handleInput = useDebounceFn(async () => {
      var _a, _b;
      if (isTempInputValueValid.value) {
        (_b = panelRef.value) == null ? void 0 : _b.setValue((_a = parseValue(tempInputValue.value)) == null ? void 0 : _a.valueOf());
      }
    });
    const handlePanelChange = (newVal) => {
      var _a, _b;
      tempInputValue.value = newVal ? dayjs(newVal).format(effectiveFormat.value) : "";
      handleChange();
      (_a = panelRef.value) == null ? void 0 : _a.close();
      isFocus.value = false;
      (_b = inInputRef.value) == null ? void 0 : _b.blur();
    };
    const handlePanelPreview = (newVal) => {
      tempInputValue.value = newVal ? dayjs(newVal).format(effectiveFormat.value) : "";
    };
    const onPressEnter = () => {
      var _a, _b;
      if (!isTempInputValueValid.value) {
        return;
      }
      handleChange();
      (_a = panelRef.value) == null ? void 0 : _a.close();
      isFocus.value = false;
      (_b = inInputRef.value) == null ? void 0 : _b.blur();
      emits("pressEnter");
    };
    const handleConfirm = () => {
      var _a, _b, _c;
      const panelVal = (_a = panelRef.value) == null ? void 0 : _a.getValue();
      if (panelVal) {
        tempInputValue.value = dayjs(panelVal).format(effectiveFormat.value);
      }
      handleChange();
      (_b = panelRef.value) == null ? void 0 : _b.close();
      isFocus.value = false;
      (_c = inInputRef.value) == null ? void 0 : _c.blur();
      emits("pressEnter");
    };
    const handleCancel = () => {
      var _a, _b;
      isFocus.value = false;
      (_a = inInputRef.value) == null ? void 0 : _a.blur();
      (_b = panelRef.value) == null ? void 0 : _b.close();
    };
    const onClear = (e) => {
      var _a, _b;
      e == null ? void 0 : e.stopPropagation();
      const oldVal = prevValue;
      modelValue.value = void 0;
      tempInputValue.value = "";
      prevValue = void 0;
      emits("clear", e);
      emits("change", void 0, oldVal);
      (_a = panelRef.value) == null ? void 0 : _a.close();
      isFocus.value = false;
      (_b = inInputRef.value) == null ? void 0 : _b.blur();
    };
    const inputId = props.inputId;
    __expose({
      focus: (open = true) => {
        var _a;
        if (!open) skipOpenPanel = true;
        (_a = inInputRef.value) == null ? void 0 : _a.focus();
      },
      blur: () => {
        var _a, _b;
        (_a = inInputRef.value) == null ? void 0 : _a.blur();
        (_b = panelRef.value) == null ? void 0 : _b.close();
        isFocus.value = false;
      },
      clear: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.clear();
      },
      inputEl: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.inputEl;
      },
      getTempValue: () => {
        var _a;
        return isTempInputValueValid.value ? tempInputValue.value : (_a = panelRef.value) == null ? void 0 : _a.getValue();
      }
    });
    return (_ctx, _cache) => {
      var _a;
      return openBlock(), createBlock(unref(_sfc_main$1), {
        ref_key: "inInputRef",
        ref: inInputRef,
        modelValue: tempInputValue.value,
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tempInputValue.value = $event),
        class: normalizeClass(["o-input-wrap", { "o-input-wrap-focused": isFocus.value, "o-input-wrap-touch": isResponding.value }]),
        disabled: unref(disabled),
        clearable: unref(clearable) && !!tempInputValue.value,
        placeholder: effectivePlaceholder.value,
        "input-id": unref(inputId),
        "max-length": (_a = effectiveFormat.value) == null ? void 0 : _a.length,
        "input-on-outlimit": false,
        "show-length": "never",
        readonly: unref(readonly),
        "no-keyboard": "",
        onKeydown: withKeys(handleCancel, ["esc"]),
        onInput: unref(handleInput),
        onFocus,
        onClear,
        onPressEnter
      }, createSlots({
        extra: withCtx(() => [
          !unref(disabled) && !unref(readonly) ? (openBlock(), createBlock(_sfc_main$2, {
            key: 0,
            ref_key: "panelRef",
            ref: panelRef,
            target: props.inBoxRef,
            "option-title": props.optionTitle,
            onChange: handlePanelChange,
            onPreview: handlePanelPreview,
            onCancel: handleCancel,
            onConfirm: handleConfirm
          }, createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            !unref(isEmptySlot)(_ctx.$slots.shortcut) ? {
              name: "shortcut",
              fn: withCtx(({ setValue, emitChange }) => [
                renderSlot(_ctx.$slots, "shortcut", {
                  setValue,
                  emitChange
                })
              ]),
              key: "0"
            } : void 0
          ]), 1032, ["target", "option-title"])) : createCommentVNode("v-if", true)
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        props.hasIcon && (!isResponding.value || !tempInputValue.value) ? {
          name: "suffix",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "suffix", {}, () => [
              createVNode(unref(IconCalendar))
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["modelValue", "class", "disabled", "clearable", "placeholder", "input-id", "max-length", "readonly", "onInput"]);
    };
  }
});
export {
  _sfc_main as default
};