@opensig/opendesign/es/_components/in-input/InInput.vue.mjs

import { defineComponent, useSlots, toRefs, ref, watchEffect, computed, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, createElementVNode, withModifiers, renderSlot, createVNode, createBlock, toDisplayString } from "vue";
import { inInputProps } from "./types.mjs";
import { IconClose, IconEyeOn, IconEyeOff } from "../../_utils/icons.mjs";
import { useInput } from "../../_headless/use-input.mjs";
import { useInputPassword } from "../../_headless/use-input-password.mjs";
import { useI18n } from "../../locale/index.mjs";
import { isUndefined } from "../../_utils/is.mjs";
import "../../hooks/use-theme.mjs";
import { useScreen } from "../../hooks/use-screen.mjs";
import "@vueuse/core";
const _hoisted_1 = ["for"];
const _hoisted_2 = ["date-value"];
const _hoisted_3 = ["id", "value", "type", "placeholder", "readonly", "disabled"];
const _hoisted_4 = {
  key: 0,
  class: "o_input-suffix-icon"
};
const _hoisted_5 = ["innerHTML"];
const _hoisted_6 = { key: 1 };
const _hoisted_7 = { key: 4 };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "InInput",
  props: inInputProps,
  emits: ["update:modelValue", "change", "input", "focus", "blur", "clear", "pressEnter"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const slots = useSlots();
    const emits = __emit;
    const { t } = useI18n();
    const { isPhonePad } = useScreen();
    const { disabled, type, modelValue, inputOnOutlimit, maxLength, minLength, showLength, onlyNumericInput } = toRefs(props);
    const {
      displayValue,
      clearValue: clear,
      isValid,
      inputValueLength,
      isShowLength,
      isOutLengthLimit,
      handleBlur,
      handleInput,
      handleFocus,
      handlePressEnter,
      handleClear,
      inputEl,
      isFocus
    } = useInput({
      emits,
      maxLength,
      minLength,
      showLength,
      inputOnOutlimit,
      modelValue,
      defaultValue: props.defaultValue ?? "",
      emitUpdate: (value) => {
        emits("update:modelValue", value);
      },
      format: props.format,
      validate: props.validate,
      valueOnInvalidChange: props.valueOnInvalidChange,
      calculateLength: props.getLength,
      onlyNumericInput
    });
    const { showPassword, onEyeMouseDown, onEyeClick } = useInputPassword({
      type,
      disabled,
      showPasswordEvent: props.showPasswordEvent
    });
    const inputType = ref(props.type);
    const togglePassword = (visible) => {
      if (isUndefined(visible)) {
        if (inputType.value === "text") {
          inputType.value = "password";
        } else {
          inputType.value = "text";
        }
      } else {
        inputType.value = visible ? "text" : "password";
      }
    };
    watchEffect(() => {
      togglePassword(showPassword.value);
    });
    const isClearable = computed(() => props.clearable && !props.disabled && !props.readonly);
    const focus = () => {
      var _a;
      (_a = inputEl.value) == null ? void 0 : _a.focus();
    };
    const blur = () => {
      var _a;
      (_a = inputEl.value) == null ? void 0 : _a.blur();
    };
    const autoWidth = computed(() => props.autoWidth);
    const mirrorValue = computed(() => {
      if (props.type === "password") {
        return displayValue.value.replace(/./g, props.passwordPlaceholder);
      }
      return displayValue.value;
    });
    __expose({
      inputEl,
      focus,
      blur,
      clear,
      togglePassword
    });
    return (_ctx, _cache) => {
      var _a, _b, _c, _d, _e;
      return openBlock(), createElementBlock("label", {
        class: normalizeClass(["o_input", {
          "o_input-clearable": isClearable.value && unref(displayValue) !== "",
          "o_input-clearable-focus": isClearable.value && unref(displayValue) !== "" && unref(isFocus),
          "o_input-disabled": props.disabled,
          "o_input-readonly": props.readonly,
          "o_input-password": props.type === "password",
          "o_input-invalid": !unref(isValid),
          "o_input-auto-width": autoWidth.value
        }]),
        for: props.inputId
      }, [
        ((_a = slots.prefix) == null ? void 0 : _a.call(slots)) ? (openBlock(), createElementBlock(
          "div",
          {
            key: 0,
            class: "o_input-prefix",
            onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
            }, ["prevent"]))
          },
          [
            renderSlot(_ctx.$slots, "prefix")
          ],
          32
          /* NEED_HYDRATION */
        )) : createCommentVNode("v-if", true),
        createElementVNode("div", {
          class: normalizeClass(["o_input-wrap", { "o_input-wrap-auto-width": autoWidth.value }]),
          "date-value": mirrorValue.value
        }, [
          createElementVNode("input", {
            id: props.inputId,
            ref_key: "inputEl",
            ref: inputEl,
            class: "o_input-input",
            value: unref(displayValue),
            type: inputType.value,
            placeholder: props.placeholder,
            readonly: props.readonly || unref(isPhonePad) && props.noKeyboard,
            disabled: props.disabled,
            onFocus: _cache[1] || (_cache[1] = //@ts-ignore
            (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
            onBlur: _cache[2] || (_cache[2] = //@ts-ignore
            (...args) => unref(handleBlur) && unref(handleBlur)(...args)),
            onInput: _cache[3] || (_cache[3] = //@ts-ignore
            (...args) => unref(handleInput) && unref(handleInput)(...args)),
            onKeydown: _cache[4] || (_cache[4] = //@ts-ignore
            (...args) => unref(handlePressEnter) && unref(handlePressEnter)(...args))
          }, null, 40, _hoisted_3)
        ], 10, _hoisted_2),
        ((_b = slots.suffix) == null ? void 0 : _b.call(slots)) || ((_c = slots.extra) == null ? void 0 : _c.call(slots)) || isClearable.value || props.type === "password" || unref(isShowLength) ? (openBlock(), createElementBlock(
          "div",
          {
            key: 1,
            class: "o_input-suffix",
            onMousedown: _cache[10] || (_cache[10] = withModifiers(() => {
            }, ["prevent"]))
          },
          [
            createCommentVNode(" 自定义图标 "),
            ((_d = slots.suffix) == null ? void 0 : _d.call(slots)) ? (openBlock(), createElementBlock("span", _hoisted_4, [
              renderSlot(_ctx.$slots, "suffix")
            ])) : createCommentVNode("v-if", true),
            createCommentVNode("  清除图标 "),
            isClearable.value ? (openBlock(), createElementBlock(
              "div",
              {
                key: 1,
                class: "o_input-clear",
                onClick: _cache[5] || (_cache[5] = //@ts-ignore
                (...args) => unref(handleClear) && unref(handleClear)(...args)),
                onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {
                }, ["prevent"]))
              },
              [
                createVNode(unref(IconClose), { class: "o_input-clear-icon" })
              ],
              32
              /* NEED_HYDRATION */
            )) : createCommentVNode("v-if", true),
            createCommentVNode(" 密码图标 "),
            props.type === "password" ? (openBlock(), createElementBlock(
              "div",
              {
                key: 2,
                class: "o_input-eye",
                onClick: _cache[7] || (_cache[7] = withModifiers(
                  //@ts-ignore
                  (...args) => unref(onEyeClick) && unref(onEyeClick)(...args),
                  ["prevent", "stop"]
                )),
                onMousedown: _cache[8] || (_cache[8] = withModifiers(
                  //@ts-ignore
                  (...args) => unref(onEyeMouseDown) && unref(onEyeMouseDown)(...args),
                  ["prevent", "stop"]
                )),
                onTouchstart: _cache[9] || (_cache[9] = withModifiers(
                  //@ts-ignore
                  (...args) => unref(onEyeMouseDown) && unref(onEyeMouseDown)(...args),
                  ["stop"]
                ))
              },
              [
                unref(showPassword) ? (openBlock(), createBlock(unref(IconEyeOn), {
                  key: 0,
                  class: "o_input-eye-icon"
                })) : (openBlock(), createBlock(unref(IconEyeOff), {
                  key: 1,
                  class: "o_input-eye-icon"
                }))
              ],
              32
              /* NEED_HYDRATION */
            )) : createCommentVNode("v-if", true),
            createCommentVNode(" 长度限制 "),
            unref(isShowLength) ? (openBlock(), createElementBlock(
              "div",
              {
                key: 3,
                class: normalizeClass(["o_input-limit", { "o_input-limit-error": unref(isOutLengthLimit) }])
              },
              [
                renderSlot(_ctx.$slots, "length", { length: unref(inputValueLength) }, () => [
                  props.maxLength ?? props.minLength ? (openBlock(), createElementBlock("span", {
                    key: 0,
                    innerHTML: unref(t)("input.limit", unref(inputValueLength), props.maxLength ?? props.minLength)
                  }, null, 8, _hoisted_5)) : (openBlock(), createElementBlock(
                    "span",
                    _hoisted_6,
                    toDisplayString(unref(inputValueLength)),
                    1
                    /* TEXT */
                  ))
                ])
              ],
              2
              /* CLASS */
            )) : createCommentVNode("v-if", true),
            ((_e = slots.extra) == null ? void 0 : _e.call(slots)) ? (openBlock(), createElementBlock("span", _hoisted_7, [
              renderSlot(_ctx.$slots, "extra")
            ])) : createCommentVNode("v-if", true)
          ],
          32
          /* NEED_HYDRATION */
        )) : createCommentVNode("v-if", true)
      ], 10, _hoisted_1);
    };
  }
});
export {
  _sfc_main as default
};