t-fighting-design/es/input/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as w, ref as z, openBlock as r, createElementBlock as c, normalizeClass as h, createElementVNode as y, createBlock as u, unref as s, createCommentVNode as t, withKeys as F, renderSlot as g, createVNode as B, withCtx as b, createTextVNode as E } from "vue";
import { Props as I, Emits as S } from "./index3.js";
import { FSvgIcon as i } from "../../svg-icon/index.js";
import { FButton as N } from "../../button/index.js";
import $ from "../../_components/svg/index5.js";
import K from "../../_components/svg/index17.js";
import O from "../../_components/svg/index18.js";
const P = ["type", "max", "min", "maxlength", "value", "disabled", "readonly", "autofocus", "name", "placeholder", "onKeyup"], M = /* @__PURE__ */ E("\u641C\u7D22"), T = w({
  name: "FInput"
}), J = /* @__PURE__ */ w({
  ...T,
  props: I,
  emits: S,
  setup(v, { emit: p }) {
    const o = v, l = z(o.type), C = (e) => {
      p("update:modelValue", e.target.value), o.onChange && o.onChange(e.target.value);
    }, d = (e) => {
      o.onSearch && o.onSearch({ evt: e, value: o.modelValue });
    }, V = () => {
      o.disabled || p("update:modelValue", "");
    }, k = (e) => {
      const { search: n, enterSearch: a, onEnter: f } = o;
      n && a && d(e), f && f(e);
    }, m = (e) => {
      if (e === "down") {
        l.value = "text";
        return;
      }
      l.value = "password";
    };
    return (e, n) => (r(), c("div", {
      class: h(["f-input", { [`f-input__${e.size}`]: e.size }])
    }, [
      y("div", {
        class: h(["f-input__wrapper", { "f-input__disabled": e.disabled }])
      }, [
        e.icon ? (r(), u(s(i), {
          key: 0,
          class: "f-input__icon",
          icon: e.icon,
          size: 13
        }, null, 8, ["icon"])) : t("", !0),
        y("input", {
          class: "f-input__input",
          type: l.value,
          max: e.max,
          min: e.min,
          maxlength: e.maxLength,
          value: e.modelValue,
          disabled: e.disabled,
          readonly: e.readonly,
          autofocus: e.autofocus,
          name: e.name,
          placeholder: e.placeholder,
          onInput: C,
          onKeyup: F(k, ["enter"]),
          onBlur: n[0] || (n[0] = (...a) => e.onBlur && e.onBlur(...a)),
          onFocus: n[1] || (n[1] = (...a) => e.onFocus && e.onFocus(...a))
        }, null, 40, P),
        e.clear ? (r(), u(s(i), {
          key: 1,
          class: "f-input__clear-btn",
          icon: s($),
          size: 14,
          onClick: V
        }, null, 8, ["icon"])) : t("", !0),
        e.type === "password" && e.showPassword ? (r(), u(s(i), {
          key: 2,
          class: "f-input__show-password",
          icon: l.value === "text" ? s(O) : s(K),
          size: 14,
          onMousedown: n[2] || (n[2] = (a) => m("down")),
          onMouseup: n[3] || (n[3] = (a) => m("up"))
        }, null, 8, ["icon"])) : t("", !0)
      ], 2),
      e.search ? (r(), c("div", {
        key: 0,
        class: "f-input__search",
        onClick: d
      }, [
        g(e.$slots, "searchBtn", {}, () => [
          B(s(N), {
            type: "primary",
            size: e.size
          }, {
            default: b(() => [
              M
            ]),
            _: 1
          }, 8, ["size"])
        ])
      ])) : t("", !0)
    ], 2));
  }
});
export {
  J as default
};