birdpaper-ui/lib/input/src/input.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

"use strict";
const vue = require("vue");
const birdpaperIcon = require("birdpaper-icon");
const _sfc_main = vue.defineComponent({
  name: "Input",
  props: {
    /** 绑定值 Binding value */
    modelValue: { type: String, default: "" },
    /** 对应原生属性 name */
    inputName: { type: String, default: "" },
    /** 输入框类型 Type of the input */
    type: { type: String, default: "text" },
    /** 输入框尺寸 Size of the input */
    size: { type: String, default: "normal" },
    /** 是否禁用 Disabled or not */
    disabled: { type: Boolean, default: false },
    /** 是否只读状态 Readonly or not */
    readonly: { type: Boolean, default: false },
    /** 是否警示状态 Danger or not */
    isDanger: { type: Boolean, default: false },
    /** 占位提示文字 The placeholder text*/
    placeholder: { type: String, default: "" },
    /** 限制输入最大长度 Restricts the maximum input length */
    maxlength: { type: Number, default: null },
    /** 是否展示字数限制提示 Display word limit prompts or not */
    showLimit: { type: Boolean, default: false },
    /** 是否允许清空 Clearable or not */
    clearable: { type: Boolean, default: false }
  },
  components: { IconCloseLine: birdpaperIcon.IconCloseLine },
  emits: ["update:modelValue", "input", "focus", "blur", "keypress", "keyup"],
  setup(props, { emit, slots }) {
    const name = "bp-input";
    const inpRef = vue.ref();
    const inpType = vue.computed(() => isPasswordType.value ? "password" : "text");
    const inpClass = vue.computed(() => {
      const status = getStatus();
      return [name, `${name}-size-${props.size}`, `${name}-status-${status}`];
    });
    function getStatus() {
      return props.disabled && "disabled" || props.readonly && "readonly" || props.isDanger && "danger" || "normal";
    }
    const showClear = vue.computed(() => props.type === "text" && props.modelValue && props.clearable && !props.disabled);
    const handleClear = () => {
      emit("update:modelValue", "");
      vue.nextTick(() => handleFocus());
    };
    const showWordLimit = vue.computed(() => {
      return props.maxlength && props.showLimit && props.type === "text";
    });
    const limitText = vue.computed(() => {
      var _a;
      return `${(_a = props.modelValue) == null ? void 0 : _a.length}/${props.maxlength}`;
    });
    const showPassword = vue.ref(false);
    const isPasswordType = vue.computed(() => props.type === "password" && !showPassword.value);
    const triggerPassword = () => {
      showPassword.value = !showPassword.value;
      vue.nextTick(() => handleFocus());
    };
    const handleFocus = () => inpRef.value.focus();
    const handleBlur = () => inpRef.value.blur();
    const onFocus = () => emit("focus");
    const onBlur = () => emit("blur");
    const onKeypress = () => emit("keypress");
    const onKeyup = () => emit("keyup");
    const onInput = (e) => {
      const targetValue = e.target.value;
      emit("update:modelValue", targetValue);
      emit("input", targetValue);
    };
    return {
      name,
      inpRef,
      inpType,
      inpClass,
      showClear,
      handleClear,
      handleFocus,
      showPassword,
      showWordLimit,
      limitText,
      slots,
      handleBlur,
      onFocus,
      onBlur,
      onKeypress,
      onKeyup,
      onInput,
      triggerPassword,
      IconEyeFill: birdpaperIcon.IconEyeFill,
      IconEyeCloseFill: birdpaperIcon.IconEyeCloseFill
    };
  }
});
module.exports = _sfc_main;