@opensig/opendesign/lib/input/OInput.vue.js

"use strict";
const vue = require("vue");
const types = require("./types.js");
const provide$1 = require("../form/provide.js");
const provide = require("../_components/provide.js");
const InInput_vue_vue_type_script_setup_true_lang = require("../_components/in-input/InInput.vue.js");
const InBox_vue_vue_type_script_setup_true_lang = require("../_components/in-box/InBox.vue.js");
const helper = require("../_utils/helper.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OInput",
  props: types.inputProps,
  emits: ["update:modelValue", "change", "input", "blur", "focus", "clear", "pressEnter"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const innerComponentInject = vue.inject(provide.innerComponentInjectKey, null);
    const formItemInjection = (innerComponentInject == null ? void 0 : innerComponentInject.isInnerInput) ? null : vue.inject(provide$1.formItemInjectKey, null);
    const inInputRef = vue.ref();
    const color = vue.computed(() => {
      var _a;
      if (formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) {
        return ((_a = formItemInjection == null ? void 0 : formItemInjection.fieldResult.value) == null ? void 0 : _a.type) || "normal";
      }
      return props.color;
    });
    const onInput = (e, value) => {
      var _a, _b;
      emits("input", e, value);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onInput) == null ? void 0 : _b.call(_a);
    };
    const isFocus = vue.ref(false);
    const onFocus = (e) => {
      var _a, _b;
      if (isFocus.value) {
        return;
      }
      isFocus.value = true;
      emits("focus", e);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onFocus) == null ? void 0 : _b.call(_a);
    };
    const onBlur = (e) => {
      var _a, _b;
      isFocus.value = false;
      emits("blur", e);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onBlur) == null ? void 0 : _b.call(_a);
    };
    const onPressEnter = (e) => {
      emits("pressEnter", e);
    };
    const onClear = (e) => {
      emits("clear", e);
    };
    const onUpdatedModelValue = (value) => {
      emits("update:modelValue", value);
    };
    const onChange = (value) => {
      var _a, _b;
      emits("change", value);
      (_b = formItemInjection == null ? void 0 : (_a = formItemInjection.fieldHandlers).onChange) == null ? void 0 : _b.call(_a);
    };
    const inputId = vue.ref(props.inputId);
    vue.onMounted(() => {
      if (!inputId.value) {
        inputId.value = helper.uniqueId();
      }
    });
    __expose({
      /**
       * @zh-CN 聚焦输入框
       * @en-US Focus the input
       */
      focus: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.focus();
      },
      /**
       * @zh-CN 取消输入框聚焦
       * @en-US Blur the input
       */
      blur: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.blur();
      },
      /**
       * @zh-CN 清空输入内容
       * @en-US Clear the input value
       */
      clear: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.clear();
      },
      /**
       * @zh-CN 获取原生 input 元素
       * @en-US Get the native input element
       */
      inputEl: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.inputEl;
      },
      /**
       * @zh-CN 切换密码显示/隐藏
       * @en-US Toggle password visibility
       */
      togglePassword: () => {
        var _a;
        return (_a = inInputRef.value) == null ? void 0 : _a.togglePassword();
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(
        vue.h(
          vue.unref(InBox_vue_vue_type_script_setup_true_lang),
          {
            class: "o-input",
            size: props.size,
            variant: props.variant,
            color: color.value,
            disabled: props.disabled,
            readonly: props.readonly,
            round: props.round,
            focused: isFocus.value
          },
          {
            default: () => vue.h(
              vue.unref(InInput_vue_vue_type_script_setup_true_lang),
              {
                ref: (el) => {
                  inInputRef.value = el;
                },
                class: [
                  "o-input-wrap",
                  {
                    "has-suffix": _ctx.$slots.suffix,
                    "has-prepend": _ctx.$slots.prepend,
                    "has-append": _ctx.$slots.append
                  }
                ],
                inputId: inputId.value,
                modelValue: vue.unref(helper.formateToString)(props.modelValue),
                defaultValue: vue.unref(helper.formateToString)(props.defaultValue),
                ...vue.unref(helper.pick)(props, [
                  "type",
                  "placeholder",
                  "disabled",
                  "readonly",
                  "clearable",
                  "format",
                  "showPasswordEvent",
                  "validate",
                  "valueOnInvalidChange",
                  "autoWidth",
                  "maxLength",
                  "minLength",
                  "getLength",
                  "inputOnOutlimit",
                  "showLength",
                  "onlyNumericInput"
                ]),
                onChange,
                onInput,
                onFocus,
                onBlur,
                onPressEnter,
                onClear,
                "onUpdate:modelValue": onUpdatedModelValue
              },
              vue.unref(helper.pick)(_ctx.$slots, ["extra", "prefix", "suffix"])
            ),
            ...vue.unref(helper.pick)(_ctx.$slots, ["append", "prepend"])
          }
        )
      ));
    };
  }
});
module.exports = _sfc_main;