adverich-kun-ui/dist/components/KunTextField/src/composables/useKunTextFieldComposable.js

Una librería de componentes Vue.js con Tailwind CSS

import { ref as a, inject as V, computed as E, watch as F, onUnmounted as T } from "vue";
import { debounce as j } from "../../../../utils/utils.js";
function R(u, r) {
  const l = a(u.modelValue ?? ""), o = a(!1), t = a(""), n = a(!1), g = a(null), h = a(null), s = a(!1), d = V("registerField", null), v = V("unregisterField", null), y = E(() => u.error || !!t.value && n.value), c = async () => {
    for (const e of u.rules) {
      const m = await Promise.resolve(e(l.value));
      if (m !== !0) return m;
    }
    return !0;
  }, f = j(async () => {
    const e = await c();
    t.value = e === !0 ? "" : e;
  }, u.debounce ?? 300);
  F(() => u.modelValue, (e) => {
    e !== l.value && (s.value = !0, l.value = e ?? "");
  }), F(l, () => {
    if (s.value) {
      s.value = !1;
      return;
    }
    n.value = !0, r("update:modelValue", l.value), u.validateOnBlur || f();
  });
  const b = (e) => {
    l.value = e.target.value;
  }, w = async () => {
    if (o.value = !1, u.validateOnBlur) {
      const e = await c();
      t.value = e === !0 ? "" : e;
    }
    r("blur");
  }, B = () => {
    o.value = !0, r("focus");
  }, I = () => {
    l.value = "", r("update:modelValue", ""), n.value = !0, u.validateOnBlur || f();
  }, i = async () => {
    n.value = !0;
    const e = await c();
    return t.value = e === !0 ? "" : e, e === !0;
  }, O = () => {
    l.value = u.modelValue, n.value = !1, t.value = "";
  }, x = () => {
    n.value = !1, t.value = "";
  };
  return d && d({ validate: i }), T(() => {
    v && v({ validate: i });
  }), {
    inputField: g,
    inputValue: l,
    rootRef: h,
    inputFocused: o,
    validationError: t,
    hasError: y,
    handleInput: b,
    handleBlur: w,
    focusInput: B,
    validate: i,
    reset: O,
    resetValidation: x,
    clearInput: I
  };
}
export {
  R as default
};