@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
74 lines (73 loc) • 2.13 kB
JavaScript
import { validate as f, useField as C } from "vee-validate";
import { toRef as F, ref as V, watch as v, getCurrentInstance as E, computed as M } from "vue";
import { useVModelProxy as H } from "../vendor/@fifteen/shared-lib/dist/es/composables/useVModelProxy.js";
import "../vendor/countup.js/dist/countUp.min.js";
import "@vueuse/core";
import "../vendor/@fifteen/shared-lib/dist/es/composables/useLocaleFormat.js";
import "../vendor/@fifteen/shared-lib/dist/es/helpers/consoleWatch.js";
import "../vendor/@fifteen/shared-lib/dist/es/utils/text.js";
function h(e, a) {
return M(
() => a.value?.length > 0 ? e?.errorMessage || a.value?.[0] : e.hint ?? ""
);
}
function k(e, a, g) {
const o = F(e, "name"), n = [
...e?.rules ? [e.rules] : [],
...a?.rules ? [a.rules] : []
].flat(1);
if (!o.value) {
const t = H({ props: e }), i = V(!0), u = V([]);
let m = !1;
return v(
t,
async () => {
if (a?.validateOnMount && !m || a?.validateOnModelValueUpdate) {
const l = await f(t.value, n);
u.value = l.errors, i.value = l.valid, m = !0;
}
},
{ immediate: a?.validateOnMount }
), {
validate: async (l, U = !0) => {
const x = l instanceof Event ? t.value : l;
if (U) {
const c = await f(x ?? t.value, n);
u.value = c.errors, i.value = c.valid;
}
},
resetValidation: () => {
u.value = [], i.value = !0;
},
value: t,
hint: h(e, u),
isValid: i
};
}
const { value: d, handleChange: s, errors: r } = C(o, n, {
initialValue: e?.modelValue ?? void 0,
validateOnValueUpdate: !1,
validateOnMount: a?.validateOnMount
}), O = E(), w = g || O?.emit;
v(d, () => {
w?.("update:modelValue", d.value);
}), v(
() => e?.modelValue,
(t) => {
s(t, a?.validateOnModelValueUpdate ?? !1);
}
);
const y = M(() => r.value.length === 0);
return {
validate: s,
resetValidation: () => {
r.value = [];
},
value: d,
hint: h(e, r),
isValid: y
};
}
export {
k as useFieldWithValidation
};