vft 0.0.249 → 0.0.252

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

@@ -1,20 +1,20 @@
-import { defineComponent as v, computed as h, watch as x, getCurrentInstance as O, provide as j, reactive as q, createElementBlock as z, openBlock as S, normalizeClass as T, renderSlot as I } from "vue";
+import { defineComponent as b, ref as x, reactive as y, computed as F, watch as R, getCurrentInstance as z, provide as T, createElementBlock as $, openBlock as j, normalizeClass as M, renderSlot as W } from "vue";
 import "@vueuse/core";
-import { isFunction as M } from "@vft/utils";
+import { isFunction as A } from "@vft/utils";
 import { debugWarn as n } from "../../utils/error.js";
 import "../../utils/ns-cover.js";
 import "lodash-es";
-import { useNamespace as R } from "../../hooks/use-namespace/index.js";
+import { useNamespace as K } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { formContextKey as W } from "./constants.js";
-import { useFormSize as $ } from "./hooks/use-form-common-props.js";
-import { useFormLabelWidth as A, filterFields as d } from "./utils.js";
-const K = v({
+import { formContextKey as L } from "./constants.js";
+import { useFormSize as N } from "./hooks/use-form-common-props.js";
+import { useFormLabelWidth as D, filterFields as f } from "./utils.js";
+const G = b({
   name: "vft-form"
-}), te = /* @__PURE__ */ v({
-  ...K,
+}), se = /* @__PURE__ */ b({
+  ...G,
   props: {
     size: {},
     disabled: { type: Boolean },
@@ -30,90 +30,94 @@ const K = v({
     showMessage: { type: Boolean, default: !0 },
     validateOnRuleChange: { type: Boolean, default: !0 },
     hideRequiredAsterisk: { type: Boolean, default: !1 },
-    scrollToError: { type: Boolean }
+    scrollToError: { type: Boolean },
+    scrollIntoViewOptions: { type: Boolean, default: !0 }
   },
   emits: ["validate"],
-  setup(o, { expose: y, emit: b }) {
-    const F = b, l = R("form"), r = [], g = $(), B = h(() => [
+  setup(o, { expose: w, emit: g }) {
+    const B = g, d = x(), i = y([]), V = N(), l = K("form"), I = F(() => [
       l.b(),
-      l.m(g.value || "default"),
+      l.m(V.value || "default"),
       {
         [l.m(`label-${o.labelPosition}`)]: o.labelPosition,
         [l.m("inline")]: o.inline
       }
-    ]), w = (e) => {
-      r.push(e);
-    }, C = (e) => {
-      e.prop && r.splice(r.indexOf(e), 1);
-    }, f = (e = []) => {
+    ]), u = (e) => f(i, [e])[0], C = (e) => {
+      i.push(e);
+    }, E = (e) => {
+      e.prop && i.splice(i.indexOf(e), 1);
+    }, m = (e = []) => {
       if (!o.model) {
         n(l.b(), "model is required for resetFields to work.");
         return;
       }
-      d(r, e).forEach((t) => t.resetField());
-    }, u = (e = []) => {
-      d(r, e).forEach((t) => t.clearValidate());
-    }, E = h(() => {
+      f(i, e).forEach((t) => t.resetField());
+    }, p = (e = []) => {
+      f(i, e).forEach((t) => t.clearValidate());
+    }, O = F(() => {
       const e = !!o.model;
       return e || n(l.b(), "model is required for validate to work."), e;
     }), k = (e) => {
-      if (r.length === 0) return [];
-      const t = d(r, e);
+      if (i.length === 0) return [];
+      const t = f(i, e);
       return t.length ? t : (n(l.b(), "please pass correct props!"), []);
-    }, m = async (e) => c(void 0, e), P = async (e = []) => {
-      if (!E.value) return !1;
+    }, h = async (e) => c(void 0, e), P = async (e = []) => {
+      if (!O.value) return !1;
       const t = k(e);
       if (t.length === 0) return !0;
-      let s = {};
-      for (const i of t)
+      let r = {};
+      for (const s of t)
         try {
-          await i.validate("");
+          await s.validate(""), s.validateState === "error" && s.resetField();
         } catch (a) {
-          s = {
-            ...s,
+          r = {
+            ...r,
             ...a
           };
         }
-      return Object.keys(s).length === 0 ? !0 : Promise.reject(s);
+      return Object.keys(r).length === 0 ? !0 : Promise.reject(r);
     }, c = async (e = [], t) => {
-      const s = !M(t);
+      let r = !1;
+      const s = !A(t);
       try {
-        const i = await P(e);
-        return i === !0 && t?.(i), o.model;
-      } catch (i) {
-        if (i instanceof Error) throw i;
-        const a = i;
-        return o.scrollToError && p(Object.keys(a)[0]), t?.(!1, a), s && Promise.reject(a);
+        return r = await P(e), r === !0 && await t?.(r), r;
+      } catch (a) {
+        if (a instanceof Error) throw a;
+        const v = a;
+        return o.scrollToError && d.value && d.value.querySelector(
+          `.${l.b()}-item.is-error`
+        )?.scrollIntoView(o.scrollIntoViewOptions), !r && await t?.(!1, v), s && Promise.reject(v);
       }
-    }, p = (e) => {
-      const t = d(r, e)[0];
-      t && t.$el?.scrollIntoView();
+    }, S = (e) => {
+      const t = u(e);
+      t && t.$el?.scrollIntoView(o.scrollIntoViewOptions);
     };
-    x(
+    R(
       () => o.rules,
       () => {
-        o.validateOnRuleChange && m().catch((e) => n(e));
+        o.validateOnRuleChange && h().catch((e) => n(e));
       },
-      { deep: !0 }
+      { deep: !0, flush: "post" }
     );
-    const V = O();
-    return j(
-      W,
-      q({
-        ...V.props,
-        emit: F,
-        resetFields: f,
-        clearValidate: u,
+    const q = z();
+    return T(
+      L,
+      y({
+        ...q.props,
+        emit: B,
+        resetFields: m,
+        clearValidate: p,
         validateField: c,
-        addField: w,
-        removeField: C,
-        ...A()
+        getField: u,
+        addField: C,
+        removeField: E,
+        ...D()
       })
-    ), y({
+    ), w({
       /**
        * @description Validate the whole form. Receives a callback or returns `Promise`.
        */
-      validate: m,
+      validate: h,
       /**
        * @description Validate specified fields.
        */
@@ -121,22 +125,24 @@ const K = v({
       /**
        * @description Reset specified fields and remove validation result.
        */
-      resetFields: f,
+      resetFields: m,
       /**
        * @description Clear validation message for specified fields.
        */
-      clearValidate: u,
+      clearValidate: p,
       /**
        * @description Scroll to the specified fields.
        */
-      scrollToField: p
-    }), (e, t) => (S(), z("form", {
-      class: T(B.value)
+      scrollToField: S
+    }), (e, t) => (j(), $("form", {
+      ref_key: "formRef",
+      ref: d,
+      class: M(I.value)
     }, [
-      I(e.$slots, "default")
+      W(e.$slots, "default")
     ], 2));
   }
 });
 export {
-  te as default
+  se as default
 };

package/es/components/form/hooks/use-form-common-props.js

@@ -3,7 +3,6 @@ import "@vft/utils";
 import "../../../utils/ns-cover.js";
 import "lodash-es";
 import { ref as c, inject as i, computed as r, unref as m } from "vue";
-import "../../config-provider/hooks/use-global-config.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import { useGlobalSize as u } from "../../../hooks/use-size/index.js";
@@ -20,10 +19,10 @@ const v = (t, o = {}) => {
   return r(
     () => o.value || m(t) || e?.disabled || !1
   );
-}, R = v, g = z;
+}, P = v, R = z;
 export {
-  g as useDisabled,
+  R as useDisabled,
   z as useFormDisabled,
   v as useFormSize,
-  R as useSize
+  P as useSize
 };

package/es/components/form/hooks/use-form-item.js

@@ -4,43 +4,42 @@ import "../../../utils/ns-cover.js";
 import "lodash-es";
 import { inject as d, ref as m, computed as f, onMounted as l, watch as I, toRef as s, onUnmounted as a } from "vue";
 import { useId as h } from "../../../hooks/use-id/index.js";
-import "../../config-provider/hooks/use-global-config.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
 import { formContextKey as w, formItemContextKey as y } from "../constants.js";
-const D = () => {
-  const t = d(w, void 0), o = d(y, void 0);
+const A = () => {
+  const t = d(w, void 0), u = d(y, void 0);
   return {
     form: t,
-    formItem: o
+    formItem: u
   };
-}, E = (t, {
-  formItemContext: o,
+}, D = (t, {
+  formItemContext: u,
   disableIdGeneration: i,
   disableIdManagement: e
 }) => {
   i || (i = m(!1)), e || (e = m(!1));
-  const u = m();
+  const o = m();
   let p;
-  const n = f(() => !!(!t.label && o && o.inputIds && o.inputIds?.length <= 1));
+  const n = f(() => !!(!t.label && u && u.inputIds && u.inputIds?.length <= 1));
   return l(() => {
     p = I(
       [s(t, "id"), i],
       ([c, v]) => {
         const r = c ?? (v ? void 0 : h().value);
-        r !== u.value && (o?.removeInputId && (u.value && o.removeInputId(u.value), !e?.value && !v && r && o.addInputId(r)), u.value = r);
+        r !== o.value && (u?.removeInputId && (o.value && u.removeInputId(o.value), !e?.value && !v && r && u.addInputId(r)), o.value = r);
       },
       { immediate: !0 }
     );
   }), a(() => {
-    p && p(), o?.removeInputId && u.value && o.removeInputId(u.value);
+    p && p(), u?.removeInputId && o.value && u.removeInputId(o.value);
   }), {
     isLabeledByFormItem: n,
-    inputId: u
+    inputId: o
   };
 };
 export {
-  D as useFormItem,
-  E as useFormItemInputId
+  A as useFormItem,
+  D as useFormItemInputId
 };

package/es/components/form/index.d.ts

@@ -47,6 +47,9 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
         scrollToError: {
             type: import("vue").PropType<boolean>;
         };
+        scrollIntoViewOptions: {
+            type: import("vue").PropType<boolean>;
+        };
     }>> & Readonly<{
         onValidate?: ((...args: any[]) => any) | undefined;
     }>, {
@@ -110,6 +113,9 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
         scrollToError: {
             type: import("vue").PropType<boolean>;
         };
+        scrollIntoViewOptions: {
+            type: import("vue").PropType<boolean>;
+        };
     }>> & Readonly<{
         onValidate?: ((...args: any[]) => any) | undefined;
     }>, {
@@ -168,6 +174,9 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
     scrollToError: {
         type: import("vue").PropType<boolean>;
     };
+    scrollIntoViewOptions: {
+        type: import("vue").PropType<boolean>;
+    };
 }>> & Readonly<{
     onValidate?: ((...args: any[]) => any) | undefined;
 }>, {
@@ -201,18 +210,15 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
                 type: import("vue").PropType<boolean>;
                 default: undefined;
             };
-            labelWidth: {
-                type: import("vue").PropType<string | number>;
-                default: string;
-            };
             rules: {
                 type: import("vue").PropType<import("vft/es/utils").Arrayable<import("./types").FormItemRule>>;
             };
-            for: {
-                type: import("vue").PropType<string>;
+            labelPosition: {
+                type: import("vue").PropType<"left" | "right" | "top">;
             };
-            validateStatus: {
-                type: import("vue").PropType<"" | "error" | "validating" | "success">;
+            labelWidth: {
+                type: import("vue").PropType<string | number>;
+                default: string;
             };
             inlineMessage: {
                 type: import("vue").PropType<string | boolean>;
@@ -222,6 +228,12 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            for: {
+                type: import("vue").PropType<string>;
+            };
+            validateStatus: {
+                type: import("vue").PropType<"" | "error" | "validating" | "success">;
+            };
         }>> & Readonly<{
             "onUpdate:error"?: ((val: string) => any) | undefined;
         }>, {
@@ -262,18 +274,15 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
                 type: import("vue").PropType<boolean>;
                 default: undefined;
             };
-            labelWidth: {
-                type: import("vue").PropType<string | number>;
-                default: string;
-            };
             rules: {
                 type: import("vue").PropType<import("vft/es/utils").Arrayable<import("./types").FormItemRule>>;
             };
-            for: {
-                type: import("vue").PropType<string>;
+            labelPosition: {
+                type: import("vue").PropType<"left" | "right" | "top">;
             };
-            validateStatus: {
-                type: import("vue").PropType<"" | "error" | "validating" | "success">;
+            labelWidth: {
+                type: import("vue").PropType<string | number>;
+                default: string;
             };
             inlineMessage: {
                 type: import("vue").PropType<string | boolean>;
@@ -283,6 +292,12 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            for: {
+                type: import("vue").PropType<string>;
+            };
+            validateStatus: {
+                type: import("vue").PropType<"" | "error" | "validating" | "success">;
+            };
         }>> & Readonly<{
             "onUpdate:error"?: ((val: string) => any) | undefined;
         }>, {
@@ -318,18 +333,15 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: undefined;
         };
-        labelWidth: {
-            type: import("vue").PropType<string | number>;
-            default: string;
-        };
         rules: {
             type: import("vue").PropType<import("vft/es/utils").Arrayable<import("./types").FormItemRule>>;
         };
-        for: {
-            type: import("vue").PropType<string>;
+        labelPosition: {
+            type: import("vue").PropType<"left" | "right" | "top">;
         };
-        validateStatus: {
-            type: import("vue").PropType<"" | "error" | "validating" | "success">;
+        labelWidth: {
+            type: import("vue").PropType<string | number>;
+            default: string;
         };
         inlineMessage: {
             type: import("vue").PropType<string | boolean>;
@@ -339,6 +351,12 @@ export declare const VftForm: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        for: {
+            type: import("vue").PropType<string>;
+        };
+        validateStatus: {
+            type: import("vue").PropType<"" | "error" | "validating" | "success">;
+        };
     }>> & Readonly<{
         "onUpdate:error"?: ((val: string) => any) | undefined;
     }>, {
@@ -385,18 +403,15 @@ export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: undefined;
         };
-        labelWidth: {
-            type: import("vue").PropType<string | number>;
-            default: string;
-        };
         rules: {
             type: import("vue").PropType<import("vft/es/utils").Arrayable<import("./types").FormItemRule>>;
         };
-        for: {
-            type: import("vue").PropType<string>;
+        labelPosition: {
+            type: import("vue").PropType<"left" | "right" | "top">;
         };
-        validateStatus: {
-            type: import("vue").PropType<"" | "error" | "validating" | "success">;
+        labelWidth: {
+            type: import("vue").PropType<string | number>;
+            default: string;
         };
         inlineMessage: {
             type: import("vue").PropType<string | boolean>;
@@ -406,6 +421,12 @@ export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        for: {
+            type: import("vue").PropType<string>;
+        };
+        validateStatus: {
+            type: import("vue").PropType<"" | "error" | "validating" | "success">;
+        };
     }>> & Readonly<{
         "onUpdate:error"?: ((val: string) => any) | undefined;
     }>, {
@@ -446,18 +467,15 @@ export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: undefined;
         };
-        labelWidth: {
-            type: import("vue").PropType<string | number>;
-            default: string;
-        };
         rules: {
             type: import("vue").PropType<import("vft/es/utils").Arrayable<import("./types").FormItemRule>>;
         };
-        for: {
-            type: import("vue").PropType<string>;
+        labelPosition: {
+            type: import("vue").PropType<"left" | "right" | "top">;
         };
-        validateStatus: {
-            type: import("vue").PropType<"" | "error" | "validating" | "success">;
+        labelWidth: {
+            type: import("vue").PropType<string | number>;
+            default: string;
         };
         inlineMessage: {
             type: import("vue").PropType<string | boolean>;
@@ -467,6 +485,12 @@ export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        for: {
+            type: import("vue").PropType<string>;
+        };
+        validateStatus: {
+            type: import("vue").PropType<"" | "error" | "validating" | "success">;
+        };
     }>> & Readonly<{
         "onUpdate:error"?: ((val: string) => any) | undefined;
     }>, {
@@ -502,18 +526,15 @@ export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<{
         type: import("vue").PropType<boolean>;
         default: undefined;
     };
-    labelWidth: {
-        type: import("vue").PropType<string | number>;
-        default: string;
-    };
     rules: {
         type: import("vue").PropType<import("vft/es/utils").Arrayable<import("./types").FormItemRule>>;
     };
-    for: {
-        type: import("vue").PropType<string>;
+    labelPosition: {
+        type: import("vue").PropType<"left" | "right" | "top">;
     };
-    validateStatus: {
-        type: import("vue").PropType<"" | "error" | "validating" | "success">;
+    labelWidth: {
+        type: import("vue").PropType<string | number>;
+        default: string;
     };
     inlineMessage: {
         type: import("vue").PropType<string | boolean>;
@@ -523,6 +544,12 @@ export declare const VftFormItem: import("vft/es/utils").SFCWithInstall<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    for: {
+        type: import("vue").PropType<string>;
+    };
+    validateStatus: {
+        type: import("vue").PropType<"" | "error" | "validating" | "success">;
+    };
 }>> & Readonly<{
     "onUpdate:error"?: ((val: string) => any) | undefined;
 }>, {

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

@@ -17,7 +17,8 @@ export interface FormValidateFailure {
     fields: ValidateFieldsError;
 }
 export type FormContext = FormProps & UnwrapRef<FormLabelWidthContext> & {
-    emit: SetupContext['emit'];
+    emit: SetupContext<any>['emit'];
+    getField: (prop: FormItemProp) => FormItemContext | undefined;
     addField: (field: FormItemContext) => void;
     removeField: (field: FormItemContext) => void;
     resetFields: (props?: Arrayable<FormItemProp>) => void;
@@ -27,11 +28,14 @@ export type FormContext = FormProps & UnwrapRef<FormLabelWidthContext> & {
 export interface FormItemContext extends FormItemProps {
     $el: HTMLDivElement | undefined;
     size: ComponentSize;
+    validateMessage: string;
     validateState: FormItemValidateState;
     isGroup: boolean;
     labelId: string;
     inputIds: string[];
     hasLabel: boolean;
+    fieldValue: any;
+    propString: string;
     addInputId: (id: string) => void;
     removeInputId: (id: string) => void;
     validate: (trigger: string, callback?: FormValidateCallback) => FormValidationResult;
@@ -54,10 +58,12 @@ export interface FormProps {
     validateOnRuleChange?: boolean;
     hideRequiredAsterisk?: boolean;
     scrollToError?: boolean;
+    scrollIntoViewOptions?: boolean;
 }
 export interface FormItemProps {
     label?: string;
     labelWidth?: string | number;
+    labelPosition?: 'left' | 'right' | 'top';
     prop?: string | string[];
     required?: boolean;
     rules?: Arrayable<FormItemRule>;

package/es/components/form/utils.d.ts

@@ -1,6 +1,6 @@
 import type { Arrayable } from 'vft/es/utils';
-import type { FormItemProp } from './form-item.vue';
 import type { FormItemContext } from './types';
+import type { FormItemProp } from './form-item';
 export declare function useFormLabelWidth(): {
     autoLabelWidth: import("vue").ComputedRef<string>;
     registerLabelWidth: (val: number, oldVal: number) => void;

package/es/components/form/utils.js

@@ -1,41 +1,46 @@
+import { ref as c, computed as s } from "vue";
 import "@vueuse/core";
-import "@vft/utils";
-import { debugWarn as a } from "../../utils/error.js";
+import { isArray as m } from "@vft/utils";
+import { debugWarn as f } from "../../utils/error.js";
+import { castArray as l } from "../../utils/helper.js";
 import "../../utils/ns-cover.js";
-import { castArray as p } from "lodash-es";
-import { ref as s, computed as l } from "vue";
-const f = "vft-form";
-function g() {
-  const t = s([]), i = l(() => {
-    if (!t.value.length) return "0";
-    const e = Math.max(...t.value);
-    return e ? `${e}px` : "";
+import "lodash-es";
+const p = "vft-form";
+function v() {
+  const e = c([]), o = s(() => {
+    if (!e.value.length) return "0";
+    const t = Math.max(...e.value);
+    return t ? `${t}px` : "";
   });
-  function n(e) {
-    const r = t.value.indexOf(e);
-    return r === -1 && i.value === "0" && a(f, `unexpected width ${e}`), r;
+  function n(t) {
+    const i = e.value.indexOf(t);
+    return i === -1 && o.value === "0" && f(p, `unexpected width ${t}`), i;
   }
-  function o(e, r) {
-    if (e && r) {
-      const c = n(r);
-      t.value.splice(c, 1, e);
-    } else e && t.value.push(e);
+  function r(t, i) {
+    if (t && i) {
+      const a = n(i);
+      e.value.splice(a, 1, t);
+    } else t && e.value.push(t);
   }
-  function u(e) {
-    const r = n(e);
-    r > -1 && t.value.splice(r, 1);
+  function u(t) {
+    const i = n(t);
+    i > -1 && e.value.splice(i, 1);
   }
   return {
-    autoLabelWidth: i,
-    registerLabelWidth: o,
+    autoLabelWidth: o,
+    registerLabelWidth: r,
     deregisterLabelWidth: u
   };
 }
-const L = (t, i) => {
-  const n = p(i);
-  return n.length > 0 ? t.filter((o) => o.prop && n.includes(o.prop)) : t;
+const A = (e, o) => {
+  const n = l(o).map(
+    (r) => m(r) ? r.join(".") : r
+  );
+  return n.length > 0 ? e.filter(
+    (r) => r.propString && n.includes(r.propString)
+  ) : e;
 };
 export {
-  L as filterFields,
-  g as useFormLabelWidth
+  A as filterFields,
+  v as useFormLabelWidth
 };