vft 0.0.375 → 0.0.376

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

@@ -1,93 +1,65 @@
-import { defineComponent, inject, ref, onMounted, onBeforeUnmount, onUpdated, watch, computed, createVNode, Fragment, nextTick } from "vue";
-import { useResizeObserver } from "@vueuse/core";
+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 "@vft/utils";
-import { throwError } from "../../utils/error.js";
+import { throwError as M } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { useNamespace as F } 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, formItemContextKey } from "./constants.js";
-const COMPONENT_NAME = "VftLabelWrap";
-const FormLabelWrap = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME,
+import { formContextKey as B, formItemContextKey as I } from "./constants.js";
+const h = "VftLabelWrap", q = /* @__PURE__ */ g({
+  name: h,
   props: {
     isAutoWidth: Boolean,
     updateAll: Boolean
   },
-  setup(props, {
-    slots
+  setup(n, {
+    slots: i
   }) {
-    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 {
+    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
         return 0;
-      }
-    };
-    const updateLabelWidth = (action = "update") => {
-      nextTick(() => {
-        if (slots.default && props.isAutoWidth) {
-          if (action === "update") {
-            computedWidth.value = getLabelWidth();
-          } else if (action === "remove") {
-            formContext?.deregisterLabelWidth(computedWidth.value);
-          }
-        }
+    }, s = (e = "update") => {
+      P(() => {
+        i.default && n.isAutoWidth && (e === "update" ? a.value = W() : e === "remove" && r?.deregisterLabelWidth(a.value));
       });
-    };
-    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;
+    }, 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 {
-        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`;
-          }
+        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`);
         }
-        return createVNode("div", {
-          "ref": el,
-          "class": [ns.be("item", "label-wrap")],
-          "style": style
-        }, [slots.default?.()]);
-      } else {
-        return createVNode(Fragment, {
-          "ref": el
-        }, [slots.default?.()]);
-      }
+        return c("div", {
+          ref: t,
+          class: [b.be("item", "label-wrap")],
+          style: u
+        }, [i.default?.()]);
+      } else
+        return c(E, {
+          ref: t
+        }, [i.default?.()]);
     };
   }
 });
 export {
-  FormLabelWrap as default
+  q as default
 };

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

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

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

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

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

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

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

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

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

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