vft 0.0.376 → 0.0.379

package/es/components/form/form-label-wrap.js

@@ -1,65 +1,93 @@
-import { defineComponent as g, inject as f, ref as p, onMounted as C, onBeforeUnmount as w, onUpdated as x, watch as N, computed as A, createVNode as c, Fragment as E, nextTick as P } from "vue";
-import { useResizeObserver as y } from "@vueuse/core";
+import { defineComponent, inject, ref, onMounted, onBeforeUnmount, onUpdated, watch, computed, createVNode, Fragment, nextTick } from "vue";
+import { useResizeObserver } from "@vueuse/core";
 import "@vft/utils";
-import { throwError as M } from "../../utils/error.js";
+import { throwError } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as F } from "../../hooks/use-namespace/index.js";
+import { useNamespace } 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 B, formItemContextKey as I } from "./constants.js";
-const h = "VftLabelWrap", q = /* @__PURE__ */ g({
-  name: h,
+import { formContextKey, formItemContextKey } from "./constants.js";
+const COMPONENT_NAME = "VftLabelWrap";
+const FormLabelWrap = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME,
   props: {
     isAutoWidth: Boolean,
     updateAll: Boolean
   },
-  setup(n, {
-    slots: i
+  setup(props, {
+    slots
   }) {
-    const r = f(B, void 0), l = f(I);
-    l || M(h, "usage: <vft-form-item><label-wrap /></vft-form-item>");
-    const b = F("form"), t = p(), a = p(0), W = () => {
-      if (t.value?.firstElementChild) {
-        const e = window.getComputedStyle(t.value.firstElementChild).width;
-        return Math.ceil(Number.parseFloat(e));
-      } else
+    const formContext = inject(formContextKey, void 0);
+    const formItemContext = inject(formItemContextKey);
+    if (!formItemContext) throwError(COMPONENT_NAME, "usage: <vft-form-item><label-wrap /></vft-form-item>");
+    const ns = useNamespace("form");
+    const el = ref();
+    const computedWidth = ref(0);
+    const getLabelWidth = () => {
+      if (el.value?.firstElementChild) {
+        const width = window.getComputedStyle(el.value.firstElementChild).width;
+        return Math.ceil(Number.parseFloat(width));
+      } else {
         return 0;
-    }, s = (e = "update") => {
-      P(() => {
-        i.default && n.isAutoWidth && (e === "update" ? a.value = W() : e === "remove" && r?.deregisterLabelWidth(a.value));
+      }
+    };
+    const updateLabelWidth = (action = "update") => {
+      nextTick(() => {
+        if (slots.default && props.isAutoWidth) {
+          if (action === "update") {
+            computedWidth.value = getLabelWidth();
+          } else if (action === "remove") {
+            formContext?.deregisterLabelWidth(computedWidth.value);
+          }
+        }
       });
-    }, m = () => s("update");
-    return C(() => {
-      m();
-    }), w(() => {
-      s("remove");
-    }), x(() => m()), N(a, (e, o) => {
-      n.updateAll && r?.registerLabelWidth(e, o);
-    }), y(A(() => t.value?.firstElementChild ?? null), m), () => {
-      if (!i) return null;
+    };
+    const updateLabelWidthFn = () => updateLabelWidth("update");
+    onMounted(() => {
+      updateLabelWidthFn();
+    });
+    onBeforeUnmount(() => {
+      updateLabelWidth("remove");
+    });
+    onUpdated(() => updateLabelWidthFn());
+    watch(computedWidth, (val, oldVal) => {
+      if (props.updateAll) {
+        formContext?.registerLabelWidth(val, oldVal);
+      }
+    });
+    useResizeObserver(computed(() => el.value?.firstElementChild ?? null), updateLabelWidthFn);
+    return () => {
+      if (!slots) return null;
       const {
-        isAutoWidth: e
-      } = n;
-      if (e) {
-        const o = r?.autoLabelWidth, v = l?.hasLabel, u = {};
-        if (v && o && o !== "auto") {
-          const d = Math.max(0, Number.parseInt(o, 10) - a.value), L = (l.labelPosition || r.labelPosition) === "left" ? "marginRight" : "marginLeft";
-          d && (u[L] = `${d}px`);
+        isAutoWidth
+      } = props;
+      if (isAutoWidth) {
+        const autoLabelWidth = formContext?.autoLabelWidth;
+        const hasLabel = formItemContext?.hasLabel;
+        const style = {};
+        if (hasLabel && autoLabelWidth && autoLabelWidth !== "auto") {
+          const marginWidth = Math.max(0, Number.parseInt(autoLabelWidth, 10) - computedWidth.value);
+          const labelPosition = formItemContext.labelPosition || formContext.labelPosition;
+          const marginPosition = labelPosition === "left" ? "marginRight" : "marginLeft";
+          if (marginWidth) {
+            style[marginPosition] = `${marginWidth}px`;
+          }
         }
-        return c("div", {
-          ref: t,
-          class: [b.be("item", "label-wrap")],
-          style: u
-        }, [i.default?.()]);
-      } else
-        return c(E, {
-          ref: t
-        }, [i.default?.()]);
+        return createVNode("div", {
+          "ref": el,
+          "class": [ns.be("item", "label-wrap")],
+          "style": style
+        }, [slots.default?.()]);
+      } else {
+        return createVNode(Fragment, {
+          "ref": el
+        }, [slots.default?.()]);
+      }
     };
   }
 });
 export {
-  q as default
+  FormLabelWrap as default
 };

package/es/components/form/form.vue.js

@@ -1,4 +1,4 @@
-import f from "./form.vue2.js";
+import _sfc_main from "./form.vue2.js";
 export {
-  f as default
+  _sfc_main as default
 };

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

@@ -1,20 +1,21 @@
-import { defineComponent as b, getCurrentInstance as q, ref as x, reactive as y, computed as F, watch as z, provide as T, toRefs as $, createElementBlock as j, openBlock as M, normalizeClass as W, renderSlot as A } from "vue";
+import { defineComponent, getCurrentInstance, ref, reactive, computed, watch, provide, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot } from "vue";
 import "@vueuse/core";
-import { isFunction as K } from "@vft/utils";
-import { debugWarn as n } from "../../utils/error.js";
+import { isFunction } from "@vft/utils";
+import { debugWarn } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace as L } from "../../hooks/use-namespace/index.js";
+import { useNamespace } 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 N } from "./constants.js";
-import { useFormSize as D } from "./hooks/use-form-common-props.js";
-import { useFormLabelWidth as G, filterFields as f } from "./utils.js";
-const H = b({
+import { formContextKey } from "./constants.js";
+import { useFormSize } from "./hooks/use-form-common-props.js";
+import { useFormLabelWidth, filterFields } from "./utils.js";
+const __default__ = defineComponent({
   name: "vft-form"
-}), ae = /* @__PURE__ */ b({
-  ...H,
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   props: {
     size: {},
     disabled: { type: Boolean },
@@ -27,120 +28,174 @@ const H = b({
     inline: { type: Boolean },
     inlineMessage: { type: Boolean },
     statusIcon: { type: Boolean },
-    showMessage: { type: Boolean, default: !0 },
-    validateOnRuleChange: { type: Boolean, default: !0 },
-    hideRequiredAsterisk: { type: Boolean, default: !1 },
+    showMessage: { type: Boolean, default: true },
+    validateOnRuleChange: { type: Boolean, default: true },
+    hideRequiredAsterisk: { type: Boolean, default: false },
     scrollToError: { type: Boolean },
-    scrollIntoViewOptions: { type: Boolean, default: !0 }
+    scrollIntoViewOptions: { type: Boolean, default: true }
   },
   emits: ["validate"],
-  setup(o, { expose: w, emit: g }) {
-    const B = g, V = q(), d = x(), l = y([]), I = D(), i = L("form"), C = F(() => [
-      i.b(),
-      i.m(I.value || "default"),
-      {
-        [i.m(`label-${o.labelPosition}`)]: o.labelPosition,
-        [i.m("inline")]: o.inline
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const instance = getCurrentInstance();
+    const formRef = ref();
+    const fields = reactive([]);
+    const formSize = useFormSize();
+    const ns = useNamespace("form");
+    const formClasses = computed(() => {
+      return [
+        ns.b(),
+        ns.m(formSize.value || "default"),
+        {
+          [ns.m(`label-${__props.labelPosition}`)]: __props.labelPosition,
+          [ns.m("inline")]: __props.inline
+        }
+      ];
+    });
+    const getField = (prop) => {
+      return filterFields(fields, [prop])[0];
+    };
+    const addField = (field) => {
+      fields.push(field);
+    };
+    const removeField = (field) => {
+      if (field.prop) {
+        fields.splice(fields.indexOf(field), 1);
       }
-    ]), u = (e) => f(l, [e])[0], E = (e) => {
-      l.push(e);
-    }, O = (e) => {
-      e.prop && l.splice(l.indexOf(e), 1);
-    }, m = (e = []) => {
-      if (!o.model) {
-        n(i.b(), "model is required for resetFields to work.");
+    };
+    const resetFields = (properties = []) => {
+      if (!__props.model) {
+        debugWarn(ns.b(), "model is required for resetFields to work.");
         return;
       }
-      f(l, e).forEach((t) => t.resetField());
-    }, p = (e = []) => {
-      f(l, e).forEach((t) => t.clearValidate());
-    }, k = F(() => {
-      const e = !!o.model;
-      return e || n(i.b(), "model is required for validate to work."), e;
-    }), P = (e) => {
-      if (l.length === 0) return [];
-      const t = f(l, e);
-      return t.length ? t : (n(i.b(), "please pass correct props!"), []);
-    }, h = async (e, t) => c(e || void 0, t), R = async (e = []) => {
-      if (!k.value) return !1;
-      const t = P(e);
-      if (t.length === 0) return !0;
-      let r = {};
-      for (const a of t)
+      filterFields(fields, properties).forEach((field) => field.resetField());
+    };
+    const clearValidate = (props = []) => {
+      filterFields(fields, props).forEach((field) => field.clearValidate());
+    };
+    const isValidatable = computed(() => {
+      const hasModel = !!__props.model;
+      if (!hasModel) {
+        debugWarn(ns.b(), "model is required for validate to work.");
+      }
+      return hasModel;
+    });
+    const obtainValidateFields = (props) => {
+      if (fields.length === 0) return [];
+      const filteredFields = filterFields(fields, props);
+      if (!filteredFields.length) {
+        debugWarn(ns.b(), "please pass correct props!");
+        return [];
+      }
+      return filteredFields;
+    };
+    const validate = async (props, callback) => validateField(props || void 0, callback);
+    const doValidateField = async (props = []) => {
+      if (!isValidatable.value) return false;
+      const fields2 = obtainValidateFields(props);
+      if (fields2.length === 0) return true;
+      let validationErrors = {};
+      for (const field of fields2) {
         try {
-          await a.validate(""), a.validateState === "error" && a.resetField();
-        } catch (s) {
-          r = {
-            ...r,
-            ...s
+          await field.validate("");
+          if (field.validateState === "error") field.resetField();
+        } catch (fields3) {
+          validationErrors = {
+            ...validationErrors,
+            ...fields3
           };
         }
-      return Object.keys(r).length === 0 ? !0 : Promise.reject(r);
-    }, c = async (e = [], t) => {
-      let r = !1;
-      const a = !K(t);
+      }
+      if (Object.keys(validationErrors).length === 0) return true;
+      return Promise.reject(validationErrors);
+    };
+    const validateField = async (modelProps = [], callback) => {
+      let result = false;
+      const shouldThrow = !isFunction(callback);
       try {
-        return r = await R(e), r === !0 && await t?.(r), o.model;
-      } catch (s) {
-        if (s instanceof Error) throw s;
-        const v = s;
-        return o.scrollToError && d.value && d.value.querySelector(
-          `.${i.b()}-item.is-error`
-        )?.scrollIntoView(o.scrollIntoViewOptions), console.error(s), !r && await t?.(!1, v), a && Promise.reject(v);
+        result = await doValidateField(modelProps);
+        if (result === true) {
+          await callback?.(result);
+        }
+        return __props.model;
+      } catch (e) {
+        if (e instanceof Error) throw e;
+        const invalidFields = e;
+        if (__props.scrollToError) {
+          if (formRef.value) {
+            const formItem = formRef.value.querySelector(
+              `.${ns.b()}-item.is-error`
+            );
+            formItem?.scrollIntoView(__props.scrollIntoViewOptions);
+          }
+        }
+        console.error(e);
+        !result && await callback?.(false, invalidFields);
+        return shouldThrow && Promise.reject(invalidFields);
       }
-    }, S = (e) => {
-      const t = u(e);
-      t && t.$el?.scrollIntoView(o.scrollIntoViewOptions);
     };
-    return z(
-      () => o.rules,
+    const scrollToField = (prop) => {
+      const field = getField(prop);
+      if (field) {
+        field.$el?.scrollIntoView(__props.scrollIntoViewOptions);
+      }
+    };
+    watch(
+      () => __props.rules,
       () => {
-        o.validateOnRuleChange && h().catch((e) => n(e));
+        if (__props.validateOnRuleChange) {
+          validate().catch((err) => debugWarn(err));
+        }
       },
-      { deep: !0, flush: "post" }
-    ), T(
-      N,
-      y({
-        ...$(V.props),
-        emit: B,
-        resetFields: m,
-        clearValidate: p,
-        validateField: c,
-        getField: u,
-        addField: E,
-        removeField: O,
-        ...G()
+      { deep: true, flush: "post" }
+    );
+    provide(
+      formContextKey,
+      reactive({
+        ...toRefs(instance.props),
+        emit,
+        resetFields,
+        clearValidate,
+        validateField,
+        getField,
+        addField,
+        removeField,
+        ...useFormLabelWidth()
       })
-    ), w({
+    );
+    __expose({
       /**
        * @description Validate the whole form. Receives a callback or returns `Promise`.
        */
-      validate: h,
+      validate,
       /**
        * @description Validate specified fields.
        */
-      validateField: c,
+      validateField,
       /**
        * @description Reset specified fields and remove validation result.
        */
-      resetFields: m,
+      resetFields,
       /**
        * @description Clear validation message for specified fields.
        */
-      clearValidate: p,
+      clearValidate,
       /**
        * @description Scroll to the specified fields.
        */
-      scrollToField: S
-    }), (e, t) => (M(), j("form", {
-      ref_key: "formRef",
-      ref: d,
-      class: W(C.value)
-    }, [
-      A(e.$slots, "default")
-    ], 2));
+      scrollToField
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("form", {
+        ref_key: "formRef",
+        ref: formRef,
+        class: normalizeClass(formClasses.value)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
   }
 });
 export {
-  ae as default
+  _sfc_main as default
 };

package/es/components/form/hooks/index.js

@@ -1,10 +1,10 @@
-import { useDisabled as o, useFormDisabled as r, useFormSize as s, useSize as u } from "./use-form-common-props.js";
-import { useFormItem as i, useFormItemInputId as F } from "./use-form-item.js";
+import { useDisabled, useFormDisabled, useFormSize, useSize } from "./use-form-common-props.js";
+import { useFormItem, useFormItemInputId } from "./use-form-item.js";
 export {
-  o as useDisabled,
-  r as useFormDisabled,
-  i as useFormItem,
-  F as useFormItemInputId,
-  s as useFormSize,
-  u as useSize
+  useDisabled,
+  useFormDisabled,
+  useFormItem,
+  useFormItemInputId,
+  useFormSize,
+  useSize
 };

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

@@ -1,28 +1,36 @@
 import "@vueuse/core";
 import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
-import { ref as c, inject as i, computed as r, unref as m } from "vue";
+import { ref, inject, computed, unref } from "vue";
 import "lodash-es";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
-import { useGlobalSize as u } from "../../../hooks/use-size/index.js";
+import { useGlobalSize } from "../../../hooks/use-size/index.js";
 import "../../../hooks/use-z-index/index.js";
-import { useProp as s } from "@vft/use";
-import { formContextKey as p, formItemContextKey as a } from "../constants.js";
-const v = (t, o = {}) => {
-  const e = c(void 0), f = o.prop ? e : s("size"), d = o.global ? e : u(), l = o.form ? { size: void 0 } : i(p, void 0), n = o.formItem ? { size: void 0 } : i(a, void 0);
-  return r(
-    () => f.value || m(t) || n?.size || l?.size || d.value || ""
+import { useProp } from "@vft/use";
+import { formContextKey, formItemContextKey } from "../constants.js";
+const useFormSize = (fallback, ignore = {}) => {
+  const emptyRef = ref(void 0);
+  const size = ignore.prop ? emptyRef : useProp("size");
+  const globalConfig = ignore.global ? emptyRef : useGlobalSize();
+  const form = ignore.form ? { size: void 0 } : inject(formContextKey, void 0);
+  const formItem = ignore.formItem ? { size: void 0 } : inject(formItemContextKey, void 0);
+  return computed(
+    () => size.value || unref(fallback) || formItem?.size || form?.size || globalConfig.value || ""
   );
-}, z = (t) => {
-  const o = s("disabled"), e = i(p, void 0);
-  return r(
-    () => o.value || m(t) || e?.disabled || !1
+};
+const useFormDisabled = (fallback) => {
+  const disabled = useProp("disabled");
+  const form = inject(formContextKey, void 0);
+  return computed(
+    () => disabled.value || unref(fallback) || form?.disabled || false
   );
-}, P = v, R = z;
+};
+const useSize = useFormSize;
+const useDisabled = useFormDisabled;
 export {
-  R as useDisabled,
-  z as useFormDisabled,
-  v as useFormSize,
-  P as useSize
+  useDisabled,
+  useFormDisabled,
+  useFormSize,
+  useSize
 };

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

@@ -1,45 +1,67 @@
 import "@vueuse/core";
 import "@vft/utils";
 import "../../config-provider/hooks/use-global-config.js";
-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 { inject, ref, computed, onMounted, watch, toRef, onUnmounted } from "vue";
 import "lodash-es";
-import { useId as h } from "../../../hooks/use-id/index.js";
+import { useId } from "../../../hooks/use-id/index.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 A = () => {
-  const t = d(w, void 0), u = d(y, void 0);
+import { formContextKey, formItemContextKey } from "../constants.js";
+const useFormItem = () => {
+  const form = inject(formContextKey, void 0);
+  const formItem = inject(formItemContextKey, void 0);
   return {
-    form: t,
-    formItem: u
+    form,
+    formItem
   };
-}, D = (t, {
-  formItemContext: u,
-  disableIdGeneration: i,
-  disableIdManagement: e
+};
+const useFormItemInputId = (props, {
+  formItemContext,
+  disableIdGeneration,
+  disableIdManagement
 }) => {
-  i || (i = m(!1)), e || (e = m(!1));
-  const o = m();
-  let p;
-  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 !== o.value && (u?.removeInputId && (o.value && u.removeInputId(o.value), !e?.value && !v && r && u.addInputId(r)), o.value = r);
+  if (!disableIdGeneration) {
+    disableIdGeneration = ref(false);
+  }
+  if (!disableIdManagement) {
+    disableIdManagement = ref(false);
+  }
+  const inputId = ref();
+  let idUnwatch = void 0;
+  const isLabeledByFormItem = computed(() => {
+    return !!(!props.label && formItemContext && formItemContext.inputIds && formItemContext.inputIds?.length <= 1);
+  });
+  onMounted(() => {
+    idUnwatch = watch(
+      [toRef(props, "id"), disableIdGeneration],
+      ([id, disableIdGeneration2]) => {
+        const newId = id ?? (!disableIdGeneration2 ? useId().value : void 0);
+        if (newId !== inputId.value) {
+          if (formItemContext?.removeInputId) {
+            inputId.value && formItemContext.removeInputId(inputId.value);
+            if (!disableIdManagement?.value && !disableIdGeneration2 && newId) {
+              formItemContext.addInputId(newId);
+            }
+          }
+          inputId.value = newId;
+        }
       },
-      { immediate: !0 }
+      { immediate: true }
     );
-  }), a(() => {
-    p && p(), u?.removeInputId && o.value && u.removeInputId(o.value);
-  }), {
-    isLabeledByFormItem: n,
-    inputId: o
+  });
+  onUnmounted(() => {
+    idUnwatch && idUnwatch();
+    if (formItemContext?.removeInputId) {
+      inputId.value && formItemContext.removeInputId(inputId.value);
+    }
+  });
+  return {
+    isLabeledByFormItem,
+    inputId
   };
 };
 export {
-  A as useFormItem,
-  D as useFormItemInputId
+  useFormItem,
+  useFormItemInputId
 };