vft 0.0.496 → 0.0.498

package/es/components/super-form/super-form.vue2.js

@@ -111,6 +111,7 @@ const _e = J({
     labelWidth: {
       default: "auto"
     },
+    labelSuffix: {},
     formatter: {},
     disabled: {
       type: Boolean
@@ -120,7 +121,6 @@ const _e = J({
     requireAsteriskPosition: {
       default: "left"
     },
-    labelSuffix: {},
     inline: {
       type: Boolean
     },

package/es/components/super-form/types.d.ts

@@ -24,7 +24,7 @@ import type { ComponentSize } from 'vft/es/constants';
 import type { Arrayable } from 'vft/es/utils';
 import { type FormCompEnumType } from 'vft/es/utils';
 import type { InternalRuleItem, RuleItem } from 'async-validator';
-import type { ComponentPublicInstance, Ref, StyleValue, VNode } from 'vue';
+import type { ComponentPublicInstance, Ref, StyleValue, VNode, WatchOptions } from 'vue';
 import type { Recordable } from '../types';
 /** 按钮配置选项 */
 export type ButtonOptions = Partial<ButtonProps> & {
@@ -57,6 +57,12 @@ type FormItemRule = Omit<RuleItem, 'validator'> & Rule & {
 };
 export type SchemaCompOptions = InputProps | SelectV2Props | RadioGroupProps | CheckboxGroupProps | DatePickerProps | TimePickerDefaultProps | CascaderProps | AutocompleteProps | ColorPickerProps | UploadProps | SliderProps | InputNumberProps | InputTagProps | DividerProps | SearchProps | SwitchProps | {
     onClear?: Function;
+} | {
+    /** 组件异步请求数据 */
+    request?: RequestConfig;
+    /** 组件异步请求数据结果 */
+    requestResult?: any;
+    [key: string]: any;
 } | Record<string, any>;
 /** 渲染回调参数接口 */
 export interface RenderCallbackParams {
@@ -70,7 +76,22 @@ export interface RenderCallbackParams {
     field: string;
     /** 组件实例引用 */
     elRef?: Ref<ComponentPublicInstance | null>;
+    /** 表单操作方法 */
+    formActionType?: Partial<FormActionType>;
 }
+/** Promise 函数类型 */
+type PromiseFn<T, R = any> = (params: T) => Promise<R>;
+/** 组件异步请求配置 */
+export type RequestConfig = PromiseFn<RenderCallbackParams, any> | {
+    /** 指定监听的字段名, 当该字段值发生变化时会调用 callback */
+    watchFields: string[];
+    callback: PromiseFn<RenderCallbackParams, any>;
+    options?: WatchOptions;
+    /** debounce 请求防抖 */
+    wait?: number;
+    /** 请求成功后的回调函数 */
+    onSuccess?: (result: any, params: RenderCallbackParams) => void | Promise<void>;
+};
 /** 表单操作方法接口 */
 export interface FormActionType {
     /** 提交表单 */
@@ -197,6 +218,8 @@ export interface SuperFormProps extends FormInnerProps {
     submitResetReverse?: boolean;
     labelPosition?: 'left' | 'right' | 'top';
     labelWidth?: string | number;
+    /** Label 后缀字符，如 ':'，默认为空字符串 */
+    labelSuffix?: string;
     /** 表单值格式化函数，用于格式化 getFieldsValue 的输出值 */
     formatter?: (values: Recordable) => Recordable;
 }
@@ -284,6 +307,8 @@ export interface FormSchema {
     helpIcon?: IconProps | string;
     /** 帮助提示配置 */
     helpTooltip?: string | ToolTipProps;
+    /** Label 后缀字符，如 ':'，优先级高于 formProps.labelSuffix */
+    labelSuffix?: string;
     /** 字段值格式化函数，用于格式化该字段在 getFieldsValue 中的输出值 */
     formatter?: (value: any, field: string, values: Recordable, schema: FormSchema) => any;
 }

package/es/components/super-form/use/helper.js

@@ -1,27 +1,28 @@
-import { isBoolean as l, isFunction as a, isNumber as h } from "@vft/utils";
-import { isInput as p } from "../component-map.js";
+import { isBoolean as l, isFunction as a, isNumber as S } from "@vft/utils";
+import { isInput as h } from "../component-map.js";
 import { FormCompEnum as i } from "../../../utils/form-register.js";
 import "@vueuse/core";
 import "../../config-provider/hooks/use-global-config.js";
 import "vue";
 import "lodash-es";
 import "../../form/index.js";
-function P(n, e = "") {
+function b(t, e = "") {
   return e = (e || "").replace(":", "") || "", [
     i.Input,
     i.InputNumber,
     i.Textarea,
     i.AutoComplete
-  ].includes(n) ? "请输入" + e : [i.Password].includes(n) ? "请输入密码" : [
+  ].includes(t) ? "请输入" + e : [i.Password].includes(t) ? "请输入密码" : [
     i.Select,
     i.Radio,
     i.RadioSingle,
     i.RadioButton,
     i.Cascader,
+    i.TreeSelect,
     i.ColorPicker,
     i.Checkbox,
     i.CheckboxButton
-  ].includes(n) ? "请选择" + e : [i.CheckboxSingle].includes(n) ? "请勾选" + e : [i.Search].includes(n) ? "请输入要搜索的内容" : [i.InputTag].includes(n) ? "请输入标签内容" : [i.Upload].includes(n) ? "请选择上传文件" : [i.Slider].includes(n) ? "请拖动滑块" : [
+  ].includes(t) ? "请选择" + e : [i.CheckboxSingle].includes(t) ? "请勾选" + e : [i.Search].includes(t) ? "请输入要搜索的内容" : [i.InputTag].includes(t) ? "请输入标签内容" : [i.Upload].includes(t) ? "请选择上传文件" : [i.Slider].includes(t) ? "请拖动滑块" : [
     i.TimePicker,
     i.YearPicker,
     i.MonthPicker,
@@ -32,59 +33,59 @@ function P(n, e = "") {
     i.DateTimeRangePicker,
     i.DateRangePicker,
     i.MonthRangePicker
-  ].includes(n) ? "请选择时间" : "";
+  ].includes(t) ? "请选择时间" : "";
 }
-function q(n, e) {
-  return n && p(n) && e && h(e) ? `${e}` : e;
+function P(t, e) {
+  return t && h(t) && e && S(e) ? `${e}` : e;
 }
-function k(n, e) {
-  const { show: t, ifShow: o } = n;
-  let c = !0, r = !0;
-  return l(t) ? c = t : a(t) && e && (c = t(e)), l(o) ? r = o : a(o) && e && (r = o(e)), { isShow: c, isIfShow: r };
+function k(t, e) {
+  const { show: n, ifShow: o } = t;
+  let u = !0, c = !0;
+  return l(n) ? u = n : a(n) && e && (u = n(e)), l(o) ? c = o : a(o) && e && (c = o(e)), { isShow: u, isIfShow: c };
 }
-function m(n, e) {
-  const { baseColProps: t = {}, quickColSpan: o } = e;
-  return n.type === i.Divider ? 24 : n.colProps?.span !== void 0 ? n.colProps.span : n.quickColSpan ? Math.ceil(24 / n.quickColSpan) : t.span !== void 0 ? t.span : o ? Math.ceil(24 / o) : 24;
+function m(t, e) {
+  const { baseColProps: n = {}, quickColSpan: o } = e;
+  return t.type === i.Divider ? 24 : t.colProps?.span !== void 0 ? t.colProps.span : t.quickColSpan ? Math.ceil(24 / t.quickColSpan) : n.span !== void 0 ? n.span : o ? Math.ceil(24 / o) : 24;
 }
-function D(n, e, t, o) {
+function q(t, e, n, o) {
   if (e.customLayout)
     return {
       willExceed: !1,
       totalSpan: 0,
       visibleItems: []
     };
-  const c = [];
-  let r = 0;
-  for (const u of n) {
-    const f = t && o ? {
-      field: u.field,
-      model: t,
+  const u = [];
+  let c = 0;
+  for (const r of t) {
+    const p = n && o ? {
+      field: r.field,
+      model: n,
       values: {
         ...o,
-        ...t
+        ...n
       },
-      schema: u
-    } : void 0, { isIfShow: S } = k(u, f);
-    if (!S)
+      schema: r
+    } : void 0, { isIfShow: f } = k(r, p);
+    if (!f)
       continue;
-    const s = m(u, e);
-    c.push({ field: u.field, span: s }), r += s;
+    const s = m(r, e);
+    u.push({ field: r.field, span: s }), c += s;
   }
   const d = e.showCommonButton || e.showResetButton || e.showSubmitButton;
   if (e.actionInline && e.showActionButtonGroup && d && !e.customLayout) {
-    const u = e.quickColSpan ? Math.ceil(24 / e.quickColSpan) : e.baseColProps?.span || 24;
-    r += u;
+    const r = e.quickColSpan ? Math.ceil(24 / e.quickColSpan) : e.baseColProps?.span || 24;
+    c += r;
   }
   return {
-    willExceed: r > 24,
-    totalSpan: r,
-    visibleItems: c
+    willExceed: c > 24,
+    totalSpan: c,
+    visibleItems: u
   };
 }
 export {
   m as calculateSchemaSpan,
-  P as createPlaceholderMessage,
+  b as createPlaceholderMessage,
   k as getSchemaShowState,
-  q as handleInputNumberValue,
-  D as willFormExceedOneRow
+  P as handleInputNumberValue,
+  q as willFormExceedOneRow
 };

package/es/components/super-form/use/use-form-events.js

@@ -1,156 +1,156 @@
-import { FormCompEnum as x } from "../../../utils/form-register.js";
+import { FormCompEnum as _ } from "../../../utils/form-register.js";
 import "@vueuse/core";
-import { isDef as H, isFunction as E, isString as _, isObject as C, isArray as I, deepMerge as rt, findDifferentValuesForObj as st, isNullOrUndefined as J, isEmpty as ot, isEmptyObject as at } from "@vft/utils";
+import { isDef as H, isFunction as E, isString as T, isObject as C, isArray as I, deepMerge as rt, findDifferentValuesForObj as st, isNullOrUndefined as J, isEmpty as ot, isEmptyObject as lt } from "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
-import { unref as n, toRaw as T, nextTick as P } from "vue";
-import { get as lt, cloneDeep as j, uniqBy as ct, isEqual as ft, set as W } from "lodash-es";
+import { unref as n, toRaw as S, nextTick as P } from "vue";
+import { get as at, cloneDeep as A, uniqBy as ct, isEqual as ft, set as W } from "lodash-es";
 import "../../form/index.js";
 import { formatToDate as Q } from "@vft/utils/date";
 import { isInput as ut, isDatePicker as dt } from "../component-map.js";
 import { handleInputNumberValue as pt } from "./helper.js";
-function S(h, F) {
-  const { show: a, ifShow: c } = h;
-  let y = !0, u = !0;
-  return typeof a == "boolean" ? y = a : typeof a == "function" && (y = a({
+function q(h, y) {
+  const { show: l, ifShow: c } = h;
+  let F = !0, u = !0;
+  return typeof l == "boolean" ? F = l : typeof l == "function" && (F = l({
     field: h.field,
-    model: F,
+    model: y,
     values: {
-      ...F
+      ...y
     },
     schema: h
   })), typeof c == "boolean" ? u = c : typeof c == "function" && (u = c({
     field: h.field,
-    model: F,
+    model: y,
     values: {
-      ...F
+      ...y
     },
     schema: h
-  })), y && u;
+  })), F && u;
 }
-function ht(h, F = {}) {
-  const a = /^\[(.+)\]$/;
-  if (a.test(h)) {
-    const c = h.match(a);
+function ht(h, y = {}) {
+  const l = /^\[(.+)\]$/;
+  if (l.test(h)) {
+    const c = h.match(l);
     if (c && c[1]) {
-      const y = c[1].split(",");
-      if (!y.length)
+      const F = c[1].split(",");
+      if (!F.length)
         return;
       const u = [];
-      return y.forEach((v, V) => {
-        W(u, V, F[v.trim()]);
+      return F.forEach((v, V) => {
+        W(u, V, y[v.trim()]);
       }), u.filter(Boolean).length ? u : void 0;
     }
   }
 }
-function Ft(h, F = {}) {
-  const a = /^\{(.+)\}$/;
-  if (a.test(h)) {
-    const c = h.match(a);
+function yt(h, y = {}) {
+  const l = /^\{(.+)\}$/;
+  if (l.test(h)) {
+    const c = h.match(l);
     if (c && c[1]) {
-      const y = c[1].split(",");
-      if (!y.length)
+      const F = c[1].split(",");
+      if (!F.length)
         return;
       const u = {};
-      return y.forEach((v) => {
-        W(u, v.trim(), F[v.trim()]);
+      return F.forEach((v) => {
+        W(u, v.trim(), y[v.trim()]);
       }), Object.values(u).filter(Boolean).length ? u : void 0;
     }
   }
 }
-function Ct({
+function jt({
   emit: h,
-  getProps: F,
-  formModel: a,
+  getProps: y,
+  formModel: l,
   getSchema: c,
-  defaultValueRef: y,
+  defaultValueRef: F,
   formElRef: u,
   schemaRef: v,
   handleFormValues: V,
-  initValues: q
+  initValues: L
 }) {
   async function X(t) {
-    const { resetFunc: i, submitOnReset: r } = n(F);
+    const { resetFunc: i, submitOnReset: r } = n(y);
     i && E(i) && await i();
     const s = n(u);
     if (s) {
       if (t?.length)
         return s.resetFields(t);
-      Object.keys(a).forEach((o) => {
-        const l = n(c).find((f) => f.field === o), e = j(y.value[o]);
-        a[o] = ut(l?.type) ? e || "" : e;
-      }), P(() => B()), h("reset", T(a)), r && await z();
+      Object.keys(l).forEach((o) => {
+        const a = n(c).find((f) => f.field === o), e = A(F.value[o]);
+        l[o] = ut(a?.type) ? e || "" : e;
+      }), P(() => O()), h("reset", S(l)), r && await G();
     }
   }
-  async function L(t, i = !0) {
+  async function N(t, i = !0) {
     const r = n(c).map((e) => e.field).filter(Boolean), s = ".", o = r.filter(
       (e) => String(e).indexOf(s) >= 0
-    ), l = [];
+    ), a = [];
     r.forEach((e) => {
       const f = n(c).find((p) => p.field === e);
-      let d = lt(t, e);
-      const b = Reflect.has(t, e);
-      d = pt(f?.type, d);
-      const { componentProps: m } = f || {};
-      let w = m;
-      typeof m == "function" && (w = w({ formModel: n(a) }));
-      const G = ht(e, t) || Ft(e, t);
-      if (b || G) {
-        const p = G || d;
+      let b = at(t, e);
+      const d = Reflect.has(t, e);
+      b = pt(f?.type, b);
+      const { componentProps: w } = f || {};
+      let m = w;
+      typeof w == "function" && (m = m({ formModel: n(l) }));
+      const B = ht(e, t) || yt(e, t);
+      if (d || B) {
+        const p = B || b;
         if (tt(e))
           if (Array.isArray(p)) {
             const D = [];
-            for (const O of p)
-              D.push(O ? Q(O) : null);
-            n(a)[e] = D;
+            for (const j of p)
+              D.push(j ? Q(j) : null);
+            n(l)[e] = D;
           } else
-            n(a)[e] = p ? w?.valueFormat ? p : Q(p) : null;
+            n(l)[e] = p ? m?.valueFormat ? p : Q(p) : null;
         else
-          n(a)[e] = p;
-        w?.onChange && w?.onChange(p), l.push(e);
+          n(l)[e] = p;
+        m?.onChange && m?.onChange(p), a.push(e);
       } else
         o.forEach((p) => {
           try {
-            const D = p.split(".").reduce((O, nt) => O[nt], t);
-            H(D) && (n(a)[p] = n(D), l.push(p));
+            const D = p.split(".").reduce((j, nt) => j[nt], t);
+            H(D) && (n(l)[p] = n(D), a.push(p));
           } catch {
-            H(y.value[p]) && (n(a)[p] = j(
-              n(y.value[p])
+            H(F.value[p]) && (n(l)[p] = A(
+              n(F.value[p])
             ));
           }
         });
     }), i && P(async () => {
-      await $(l).catch((e) => {
+      await U(a).catch((e) => {
       });
     });
   }
   async function Y(t) {
-    const i = j(n(c));
+    const i = A(n(c));
     if (!t)
       return;
-    let r = _(t) ? [t] : t;
-    _(t) && (r = [t]);
+    let r = T(t) ? [t] : t;
+    T(t) && (r = [t]);
     for (const s of r)
       Z(s, i);
     v.value = i;
   }
   function Z(t, i) {
-    if (_(t)) {
+    if (T(t)) {
       const r = i.findIndex((s) => s.field === t);
-      r !== -1 && (delete a[t], i.splice(r, 1));
+      r !== -1 && (delete l[t], i.splice(r, 1));
     }
   }
   async function K(t, i, r = !1) {
-    const s = j(n(c)), o = s.findIndex((e) => e.field === i), l = C(t) ? [t] : t;
+    const s = A(n(c)), o = s.findIndex((e) => e.field === i), a = C(t) ? [t] : t;
     if (!i || o === -1 || r) {
-      r ? s.unshift(...l) : s.push(...l), v.value = s, A(t);
+      r ? s.unshift(...a) : s.push(...a), v.value = s, g(t);
       return;
     }
-    o !== -1 && s.splice(o + 1, 0, ...l), A(t), v.value = s;
+    o !== -1 && s.splice(o + 1, 0, ...a), g(t), v.value = s;
   }
   async function k(t) {
     let i = [];
     if (C(t) && i.push(t), I(t) && (i = [...t]), !i.every(
-      (s) => s.type === x.Divider || Reflect.has(s, "field") && s.field
+      (s) => s.type === _.Divider || Reflect.has(s, "field") && s.field
     )) {
       console.error(
         "All children of the form Schema array that need to be updated must contain the `field` field"
@@ -159,10 +159,10 @@ function Ct({
     }
     v.value = i;
   }
-  async function N(t) {
+  async function $(t) {
     let i = [];
     if (C(t) && i.push(t), I(t) && (i = [...t]), !i.every(
-      (l) => l.type === x.Divider || Reflect.has(l, "field") && l.field
+      (a) => a.type === _.Divider || Reflect.has(a, "field") && a.field
     )) {
       console.error(
         "All children of the form Schema array that need to be updated must contain the `field` field"
@@ -170,123 +170,124 @@ function Ct({
       return;
     }
     const s = [], o = [];
-    n(c).forEach((l) => {
+    n(c).forEach((a) => {
       let e;
       if (i.forEach((f) => {
-        l.field === f.field && (e = f), f.defaultValue && f.field && s.push(f.field);
-      }), e !== void 0 && l.field === e.field) {
-        const f = rt(l, e);
+        a.field === f.field && (e = f), f.defaultValue && f.field && s.push(f.field);
+      }), e !== void 0 && a.field === e.field) {
+        const f = rt(a, e);
         o.push(f);
       } else
-        o.push(l);
-    }), A(o, s), v.value = ct(o, "field");
+        o.push(a);
+    }), g(o, s), v.value = ct(o, "field");
   }
-  function A(t, i, r = !0) {
+  function g(t, i, r = !0) {
     if (I(i) && i?.length === 0)
       return;
     let s = [];
     C(t) && s.push(t), I(t) && (s = [...t]);
-    const o = {}, l = g();
+    const o = {}, a = x();
     s.forEach((e) => {
-      e.type !== x.Divider && Reflect.has(e, "field") && e.field && !J(e.defaultValue) && (!(e.field in l) || J(l[e.field]) || ot(l[e.field])) && (o[e.field] = e.defaultValue);
-    }), at(o) || L(o, r);
+      e.type !== _.Divider && Reflect.has(e, "field") && e.field && !J(e.defaultValue) && (!(e.field in a) || J(a[e.field]) || ot(a[e.field])) && (o[e.field] = e.defaultValue);
+    }), lt(o) || N(o, r);
   }
-  function g(t = !1) {
+  function x(t = !1) {
     if (!n(u)) return {};
-    const r = V(T(n(a)));
+    const r = V(S(n(l)));
     if (t)
       return r;
-    const s = n(c).filter((d) => S(d, n(a))).map((d) => d.field).filter(Boolean), o = {};
+    const s = n(c).filter((d) => q(d, n(l))).map((d) => d.field).filter(Boolean), o = {};
     s.forEach((d) => {
-      d in r && (o[d] = r[d]);
+      o[d] = d in r ? r[d] ?? null : null;
     });
-    const l = n(c), e = {};
+    const a = n(c), e = {};
     s.forEach((d) => {
-      if (d in o) {
-        const b = l.find((w) => w.field === d);
-        let m = o[d];
-        m && b?.formatter && E(b.formatter) && (m = b.formatter(
-          m,
-          d,
-          o,
-          b
-        )), e[d] = m;
-      }
+      const w = a.find((B) => B.field === d);
+      let m = o[d];
+      m != null && w?.formatter && E(w.formatter) && (m = w.formatter(
+        m,
+        d,
+        o,
+        w
+      )), e[d] = m ?? null;
     });
-    const { formatter: f } = n(F);
-    return f && E(f) ? f(e) : e;
+    const { formatter: f } = n(y);
+    let b = f && E(f) ? f(e) : e;
+    return Object.keys(b).forEach((d) => {
+      b[d] === void 0 && (b[d] = null);
+    }), b;
   }
   function R(t, i, r) {
-    const o = n(c).find((l) => l.field === t);
+    const o = n(c).find((a) => a.field === t);
     return i && o?.formatter && E(o.formatter) ? o.formatter(i, t, r, o) : i;
   }
   function M(t) {
     if (!n(u)) return {};
-    if (!(t in n(a)))
+    if (!(t in n(l)))
       return {};
-    const r = V(T(n(a))), s = r[t];
+    const r = V(S(n(l))), s = r[t];
     return R(t, s, r);
   }
   function tt(t) {
     return n(c).some((i) => i.field === t ? dt(i.type) : !1);
   }
-  async function $(t) {
-    return t || (t = n(c).filter((r) => S(r, n(a))).map((r) => r.field).filter(Boolean)), n(u)?.validateField(t);
-  }
   async function U(t) {
-    return t || (t = n(c).filter((r) => S(r, n(a))).map((r) => r.field).filter(Boolean)), await n(u)?.validate(t, () => {
+    return t || (t = n(c).filter((r) => q(r, n(l))).map((r) => r.field).filter(Boolean)), n(u)?.validateField(t);
+  }
+  async function z(t) {
+    return t || (t = n(c).filter((r) => q(r, n(l))).map((r) => r.field).filter(Boolean)), await n(u)?.validate(t, () => {
     });
   }
-  async function B(t) {
+  async function O(t) {
     await n(u)?.clearValidate(t);
   }
   async function et(t, i) {
-    await B(t), await N([{ field: t, itemProps: { error: i } }]);
+    await O(t), await $([{ field: t, itemProps: { error: i } }]);
   }
   async function it(t, i) {
     await n(u)?.scrollToField(t, i);
   }
-  async function z(t) {
-    const { autoCleanErrorMessage: i, watchDataIsChange: r } = n(F);
-    t && t.preventDefault(), i && await B();
-    const { submitFunc: s, beforeSubmitFunc: o } = n(F);
+  async function G(t) {
+    const { autoCleanErrorMessage: i, watchDataIsChange: r } = n(y);
+    t && t.preventDefault(), i && await O();
+    const { submitFunc: s, beforeSubmitFunc: o } = n(y);
     if (o && E(o) && await o(), s && E(s)) {
       await s();
       return;
     }
     if (n(u))
       try {
-        if (!await U())
+        if (!await z())
           return;
-        const f = g();
+        const f = x();
         if (r) {
-          const d = ft(q.value, f), b = st(q.value, f);
-          h("submit", f, !d, b);
+          const b = ft(L.value, f), d = st(L.value, f);
+          h("submit", f, !b, d);
         } else
           h("submit", f);
       } catch (e) {
-        if (console.log(e, "111"), e?.outOfDate === !1 && e?.errorFields)
+        if (console.log(e), e?.outOfDate === !1 && e?.errorFields)
           return;
         throw new Error(e.message);
       }
   }
   return {
-    handleSubmit: z,
-    clearValidate: B,
-    validate: U,
-    validateField: $,
-    getFieldsValue: g,
-    updateSchema: N,
+    handleSubmit: G,
+    clearValidate: O,
+    validate: z,
+    validateField: U,
+    getFieldsValue: x,
+    updateSchema: $,
     resetSchema: k,
     appendSchemaByField: K,
     removeSchemaByField: Y,
     resetFields: X,
-    setFieldsValue: L,
+    setFieldsValue: N,
     scrollToField: it,
     getFieldValue: M,
     setFormItemError: et
   };
 }
 export {
-  Ct as useFormEvents
+  jt as useFormEvents
 };