mealcomes/dist/es/input-BhhwO05l.mjs

MealComes 用于学习前端的组件库

import { c as T, w as q } from "./utils-aznwSRCL.mjs";
import { defineComponent as G, useAttrs as H, useSlots as J, inject as O, computed as d, ref as k, watch as Q, onMounted as U, resolveComponent as W, createElementBlock as c, openBlock as r, normalizeClass as o, unref as a, createCommentVNode as p, createElementVNode as m, renderSlot as v, mergeProps as X, createBlock as b, withCtx as B, createVNode as Y, nextTick as E } from "vue";
import { M as Z, a as _, b as x } from "./internal-icon-BfdBrYGj.mjs";
import { f as ee } from "./form-C5wtqKmX.mjs";
const ae = {
  /**
   * 输入框类型
   */
  type: {
    type: String,
    default: "text"
  },
  /**
   * 输入框值
   */
  modelValue: {
    type: [String, Number],
    default: ""
  },
  /**
   * 输入框占位符
   */
  placeholder: {
    type: String,
    default: ""
  },
  /**
   * 输入框是否可清空
   */
  clearable: {
    type: Boolean,
    default: !1
  },
  /**
   * 输入框是否显示密码图标
   */
  showPassword: {
    type: Boolean,
    default: !1
  },
  /**
   * 输入框是否禁用
   */
  disabled: {
    type: Boolean,
    default: !1
  },
  /**
   * 输入框是否只读
   */
  readonly: {
    type: Boolean,
    default: !1
  },
  /**
   * 等价于原生 input aria-label 属性
   */
  ariaLabel: {
    type: String,
    default: ""
  },
  size: {
    type: String,
    default: "default"
  },
  /**
   * 	原生 autocomplete 属性
   */
  autocomplete: {
    type: String,
    default: "off"
  }
}, se = {
  /**
   * 输入框值变化时触发
   */
  "update:modelValue": (n) => typeof n == "string",
  /**
   * 输入框输入时触发
   */
  input: (n) => typeof n == "string",
  /**
   * 输入框失焦时触发
   */
  change: (n) => typeof n == "string",
  /**
   * 输入框聚焦时触发
   */
  focus: (n) => n instanceof FocusEvent,
  /**
   * 输入框失焦时触发
   */
  blur: (n) => n instanceof FocusEvent,
  /**
   * 输入框清空时触发
   */
  clear: () => !0,
  /**
   * 按键按下触发
   */
  keydown: (n) => n instanceof KeyboardEvent
}, le = ["type", "autocomplete", "placeholder", "disabled", "readonly", "aria-label"], ne = /* @__PURE__ */ G({
  name: "mc-input",
  inheritAttrs: !1,
  __name: "input",
  props: ae,
  emits: se,
  setup(n, { emit: P }) {
    const M = H(), s = T("input"), l = n, t = P, N = J(), u = O(ee, void 0), z = d(
      () => !!N.suffix || V.value || l.showPassword
    ), h = k(), w = k(!1);
    Q(
      () => l.modelValue,
      () => {
        u == null || u.validate("change").catch((e) => console.warn(e)), f();
      }
    );
    const g = d(
      () => l.modelValue === void 0 || l.modelValue === null ? "" : String(l.modelValue)
    );
    function f() {
      const e = h.value;
      !e || e.value === g.value || (e.value = g.value);
    }
    async function $() {
      var e;
      await E(), (e = h.value) == null || e.focus();
    }
    const F = d(() => (u == null ? void 0 : u.size) || l.size), y = k(!1);
    function K() {
      y.value = !y.value, $();
    }
    const C = d(() => !!l.modelValue && l.showPassword && !l.disabled && !l.readonly), V = d(() => !!l.modelValue && !l.disabled && !l.readonly && l.clearable);
    function A() {
      t("input", ""), t("update:modelValue", ""), t("clear"), $();
    }
    U(() => {
      f();
    });
    const I = async (e) => {
      const { value: i } = e.target;
      if (i === g.value) {
        f();
        return;
      }
      t("input", i), t("update:modelValue", i), await E(), f();
    }, L = (e) => {
      const i = e.target;
      t("change", i.value);
    }, R = (e) => {
      w.value = !0, t("focus", e);
    }, j = (e) => {
      u == null || u.validate("blur").catch((i) => console.warn(i)), w.value = !1, t("blur", e);
    }, D = (e) => {
      t("keydown", e);
    };
    return (e, i) => {
      const S = W("mc-icon");
      return r(), c("div", {
        class: o([
          a(s).b(),
          {
            [a(s).b("group")]: e.$slots.prepend || e.$slots.append,
            [a(s).bm("group", "append")]: e.$slots.append,
            [a(s).bm("group", "prepend")]: e.$slots.prepend
          },
          a(s).is("disabled", e.disabled),
          a(s).m(F.value)
        ])
      }, [
        e.$slots.prepend ? (r(), c("div", {
          key: 0,
          class: o([a(s).be("group", "prepend")])
        }, [
          v(e.$slots, "prepend")
        ], 2)) : p("", !0),
        m("div", {
          class: o([a(s).e("wrapper"), a(s).is("focus", w.value)])
        }, [
          e.$slots.prefix ? (r(), c("span", {
            key: 0,
            class: o([a(s).e("prefix")])
          }, [
            m("span", {
              class: o([a(s).e("prefix-inner")])
            }, [
              v(e.$slots, "prefix")
            ], 2)
          ], 2)) : p("", !0),
          m("input", X({
            ref_key: "inputRef",
            ref: h,
            type: e.showPassword ? y.value ? "text" : "password" : e.type,
            autocomplete: e.autocomplete,
            placeholder: e.placeholder,
            class: [a(s).e("inner")]
          }, a(M), {
            disabled: e.disabled,
            readonly: e.readonly,
            "aria-label": e.ariaLabel,
            onInput: I,
            onChange: L,
            onBlur: j,
            onFocus: R,
            onKeydown: D
          }), null, 16, le),
          z.value ? (r(), c("span", {
            key: 1,
            class: o([a(s).e("suffix")])
          }, [
            m("span", {
              class: o([a(s).e("suffix-inner")])
            }, [
              !V.value || !C.value ? v(e.$slots, "suffix", { key: 0 }) : p("", !0),
              V.value ? (r(), b(S, {
                key: 1,
                class: o([a(s).e("clear"), a(s).e("icon")]),
                onClick: A
              }, {
                default: B(() => [
                  Y(a(Z))
                ]),
                _: 1
              }, 8, ["class"])) : p("", !0),
              C.value ? (r(), b(S, {
                key: 2,
                class: o([a(s).e("password"), a(s).e("icon")]),
                onClick: K
              }, {
                default: B(() => [
                  y.value ? (r(), b(a(_), { key: 0 })) : (r(), b(a(x), { key: 1 }))
                ]),
                _: 1
              }, 8, ["class"])) : p("", !0)
            ], 2)
          ], 2)) : p("", !0)
        ], 2),
        e.$slots.append ? (r(), c("div", {
          key: 1,
          class: o([a(s).be("group", "append")])
        }, [
          v(e.$slots, "append")
        ], 2)) : p("", !0)
      ], 2);
    };
  }
}), ie = q(ne);
export {
  ie as M,
  ae as a,
  se as i
};
//# sourceMappingURL=input-BhhwO05l.mjs.map