tass-ui/lib/packages/components/input/src/input.vue.js

A high quality UI Toolkit built on Vue.js3+.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/input.scss.js");
const _hoisted_1 = ["value", "disabled"];
const _hoisted_2 = { class: "tas-input__suffix" };
const _hoisted_3 = {
  key: 1,
  class: "tas-input__prefix"
};
const _hoisted_4 = {
  key: 2,
  class: "tas-input__suffix no-cursor"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "input",
  props: {
    modelValue: { default: "" },
    disabled: { type: Boolean },
    clearable: { type: Boolean },
    size: null,
    showPassword: { type: Boolean },
    prefixIcon: null,
    suffixIcon: null
  },
  emits: ["update:modelValue"],
  setup(__props, { emit: inputEmits }) {
    const inputProps = __props;
    const attrs = vue.useAttrs();
    const isClearAbled = vue.ref(false);
    const isEnter = vue.ref(true);
    const ipt = vue.ref();
    Promise.resolve().then(() => {
      if (inputProps.showPassword) {
        ipt.value.type = "password";
      }
    }).catch((e) => {
      console.log(e);
    });
    const eyeIcon = vue.ref("EyeClosed");
    const isShowEye = vue.computed(() => {
      return inputProps.showPassword && inputProps.modelValue && !inputProps.clearable;
    });
    const changeType = () => {
      if (ipt.value.type === "password") {
        eyeIcon.value = "eye";
        ipt.value.type = attrs.type || "text";
        return;
      }
      ipt.value.type = "password";
      eyeIcon.value = "EyeClosed";
    };
    const isShowSuffixIcon = vue.computed(() => {
      return inputProps.suffixIcon && !inputProps.clearable && !inputProps.showPassword;
    });
    const isShowPrefixIcon = vue.computed(() => {
      return inputProps.prefixIcon;
    });
    const clearValue = () => {
      inputEmits("update:modelValue", "");
      isClearAbled.value = false;
    };
    const changeInputVal = (event) => {
      event.target.value.length ? isClearAbled.value = true : isClearAbled.value = false;
      inputEmits("update:modelValue", event.target.value);
    };
    const styleClass = vue.computed(() => {
      return {
        "is-disabled": inputProps.disabled,
        [`tas-input--${inputProps.size}`]: inputProps.size
      };
    });
    return (_ctx, _cache) => {
      const _component_tass_icon = vue.resolveComponent("tass-icon");
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["tas-input", vue.unref(styleClass)])
      }, [
        vue.createElementVNode("input", vue.mergeProps({
          ref_key: "ipt",
          ref: ipt,
          class: ["tas-input__inner", { ["tas-input--prefix"]: vue.unref(isShowPrefixIcon) }],
          placeholder: "请输入内容",
          value: inputProps.modelValue,
          onInput: changeInputVal,
          disabled: inputProps.disabled
        }, vue.unref(attrs)), null, 16, _hoisted_1),
        inputProps.clearable && isClearAbled.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          onClick: clearValue,
          class: "tas-input__suffix"
        }, [
          vue.createVNode(_component_tass_icon, { name: "cross" })
        ], 512)), [
          [vue.vShow, isEnter.value]
        ]) : vue.createCommentVNode("", true),
        vue.withDirectives(vue.createElementVNode("div", _hoisted_2, [
          vue.createVNode(_component_tass_icon, {
            onClick: changeType,
            name: eyeIcon.value
          }, null, 8, ["name"])
        ], 512), [
          [vue.vShow, vue.unref(isShowEye)]
        ]),
        vue.unref(isShowPrefixIcon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
          vue.createVNode(_component_tass_icon, {
            name: inputProps.prefixIcon
          }, null, 8, ["name"])
        ])) : vue.createCommentVNode("", true),
        vue.unref(isShowSuffixIcon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
          vue.createVNode(_component_tass_icon, {
            name: inputProps.suffixIcon
          }, null, 8, ["name"])
        ])) : vue.createCommentVNode("", true)
      ], 2);
    };
  }
});
exports.default = _sfc_main;