v-required
Version:
Componente Vue 3 para validação reativa de formulários, facilitando a criação de formulários dinâmicos e interativos com regras de validação personalizáveis.
72 lines (71 loc) • 1.89 kB
JavaScript
import { reactive as u, onMounted as c, defineComponent as d, provide as m, watchEffect as p, nextTick as f, onUnmounted as _, resolveDirective as v, withDirectives as R, createElementBlock as g, openBlock as E, renderSlot as h, useSlots as q, inject as V } from "vue";
import { senderErrors as a, validForm as y } from "./utils.js";
function b() {
const o = u({}), r = u({}), e = () => (a(o, r), y(r));
return c(() => {
a(o, r);
}), { rules: o, config: r, haveError: e };
}
const l = Symbol("v-required-key"), k = ["id"], x = /* @__PURE__ */ d({
__name: "VRequired",
props: {
config: {},
rules: {},
activeError: { type: Boolean, default: !0 },
name: {}
},
setup(o) {
const r = [], e = o;
function t(n) {
r.push([n.message, n.error]);
}
return m(l, { addRule: t }), p(() => {
if (e.rules[e.name]) {
const n = e.rules[e.name].map(([s, i]) => ({
message: s,
condition: i()
}));
e.config[e.name] = n;
}
}), c(() => {
f(() => {
e.rules[e.name] = r;
});
}), _(() => {
delete e.rules[e.name], delete e.config[e.name];
}), (n, s) => {
const i = v("required");
return R((E(), g("div", {
id: "scroll_" + e.name
}, [
h(n.$slots, "default")
], 8, k)), [
[i, { list: e.config?.[e.name] || [], activeError: e.activeError }]
]);
};
}
}), B = /* @__PURE__ */ d({
__name: "VRule",
props: {
error: {},
message: {},
name: {}
},
setup(o) {
const r = o, e = q(), t = V(l);
if (!t)
throw new Error("VRule deve ser usado dentro de um VRequired.");
return c(() => {
t.addRule({
error: r.error,
message: r.message,
bodySlot: e.body
});
}), (n, s) => null;
}
});
export {
x as VRequired,
B as VRule,
b as initVrequired
};