y-design-ssr/libs/input/index.mjs

SSR component library of YUI with Vue3

import { inject as S, getCurrentInstance as x, watch as s, onUnmounted as z, ref as k, reactive as T, defineComponent as D, onMounted as W, onBeforeUnmount as F, computed as O, withDirectives as p, createVNode as h, mergeProps as v, vModelText as P, vModelDynamic as U } from "vue";
const j = "y-form-item", A = () => {
  const e = S(j, null), t = x();
  if (e && (t != null && t.proxy)) {
    const { setField: o } = e, { resetValidation: n, change: r, validateWithTrigger: u } = e;
    return s(
      () => t.proxy.modelValue,
      () => {
        e.instance && e.instance.exposed && (n(), r(), u("onChange"));
      }
    ), o(t), z(() => o(null)), {
      parent: e
    };
  }
  return {
    parent: null
  };
}, c = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((o, n) => o + c(e, n), "") : Object.keys(t).reduce(
  (o, n) => o + (t[n] ? c(e, n) : ""),
  ""
) : "", R = (e) => (t, o) => {
  let n = t, r = o;
  return n && typeof n != "string" && (r = n, n = ""), n = n ? `${e}__${n}` : e, `${n}${c(n, r)}`;
}, G = () => (e, t) => t ? `${c(`y-${e}`, t)}` : `y-${e}`, H = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
k("zh-CN");
T({
  "zh-CN": H
});
const K = (e) => {
  const t = `y-${e}`;
  return [t, R(t), G()];
}, [q, J] = K("input"), Q = 13, X = /* @__PURE__ */ D({
  name: q,
  props: {
    modelValue: {
      type: [String, Number],
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    border: {
      type: Boolean,
      default: !1
    },
    placeholder: {
      type: String,
      default: ""
    },
    size: {
      type: String,
      default: null
    },
    align: {
      type: String,
      default: null
    },
    autocomplete: {
      type: String,
      default: "on"
    },
    rows: {
      type: Number,
      default: 2
    },
    maxLength: {
      type: Number,
      default: null
    },
    showWordLimit: {
      type: Boolean,
      default: !1
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["click", "input", "keypress", "focus", "blur", "update:modelValue"],
  setup(e, {
    emit: t
  }) {
    const o = x(), {
      parent: n
    } = A();
    let r = null;
    const u = (l, a) => {
      l !== a && r && (r.innerHTML = `${e.modelValue.toString().length}/${e.maxLength}`);
    }, f = (l, a) => {
      l !== a && (l ? (r = document.createElement("div"), r.className = "y-input__limit-num", (o == null ? void 0 : o.vnode.el).insertAdjacentElement("afterend", r), e.maxLength && u(e.maxLength)) : (r && r.remove(), r = null));
    };
    s(() => e.showWordLimit, f), s(() => e.modelValue, u), s(() => e.maxLength, u);
    const b = (l) => t("focus", l), L = (l) => t("click", l), V = (l) => {
      if (n) {
        const {
          validateWithTrigger: a
        } = n;
        a("onBlur");
      }
      t("blur", l);
    }, $ = (l) => {
      t("update:modelValue", l.target.value), t("input", l);
    }, N = (l) => {
      l.keyCode === Q && (n != null && n.getProp("enterable") || l.preventDefault(), e.type === "search" && (o == null ? void 0 : o.vnode.el).blur()), t("keypress", l);
    };
    W(() => {
      f(e.showWordLimit), u(e.maxLength);
    }), F(() => {
      r && r.remove(), r = null;
    });
    const i = O({
      get: () => e.modelValue,
      set: (l) => t("update:modelValue", l)
    });
    return () => {
      const {
        type: l,
        rows: a,
        align: m,
        disabled: _,
        maxLength: w,
        size: B,
        border: C,
        readonly: E,
        autocomplete: M,
        placeholder: I
      } = e, g = B || (n == null ? void 0 : n.getProp("size")), y = {
        class: J({
          [g]: g,
          border: C
        }),
        style: {
          "text-align": m
        },
        disabled: _,
        readonly: E,
        placeholder: I,
        maxlength: w,
        onInput: $,
        autocomplete: M,
        onFocus: b,
        onClick: L,
        onKeypress: N,
        onBlur: V
      };
      return l === "textarea" ? p(h("textarea", v(y, {
        rows: a,
        "onUpdate:modelValue": (d) => i.value = d
      }), null), [[P, i.value]]) : p(h("input", v(y, {
        "onUpdate:modelValue": (d) => i.value = d,
        type: l
      }), null), [[U, i.value]]);
    };
  }
});
function Y(e) {
  const t = e;
  return t.install = (o) => {
    const { name: n } = e;
    n && o.component(n, e);
  }, t;
}
const ee = Y(X);
export {
  ee as default
};