@vef-framework/components 1.0.62 → 1.0.64

package/es/vef-form/hooks/use-action-handlers.js

@@ -1,3 +1,131 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{useApiContext as e}from"@vef-framework/core";import{isFunction as t,VefError as i,showLoadingMessage as o,omit as n,showSuccessMessage as r}from"@vef-framework/shared";import{useCallback as s,useMemo as a}from"react";import{useFormStore as m}from"../store.js";function u({submitApi:u,submitTip:l="提交中...",onBeforeSubmit:c,onSubmit:p,onSubmitSuccess:b,onSubmitFailure:f,onReset:d}){const[S,w,h,v,F,R,g,y]=m((e=>[e.form,e.scene,e.eventBus,e.setIsLoading,e.virtualFieldNames,e.getValues,e.initialValues,e.invokeValueChangeHandlers])),{useApiMutation:A,stubMutationApi:V}=e(),{mutate:k}=A(u??V);if(!t(p)&&!u)throw new i(-1,"'onSubmit' or 'submitApi' prop is required for VefForm component");return{handleReset:s((()=>{const e=R();S.resetFields(),y(),h.emitChange(g),d?.(e,w)}),[S,R,d,w,y,g,h]),handleSubmit:a((()=>t(p)?(u&&console.warn("'submitApi' prop is ignored when 'onSubmit' prop is provided in VefForm component"),async e=>{v(!0);let i=e,r=null;try{const s=t(l)?l(e,w):l;r=o(s),t(c)&&(i=await c(i,w));const a=n(i,F);await p(a,w),h.emitSubmitResult(!0)}catch(e){throw h.emitSubmitResult(!1),e}finally{v(!1),r?.()}}):async e=>{v(!0);let i=e,s=null;try{const a=t(l)?l(e,w):l;s=o(a),t(c)&&(i=await c(e,w));const m=n(i,F),u=await k(m);(b??(({message:e})=>{r(e)}))(u,i,w),h.emitSubmitResult(!0)}catch(e){h.emitSubmitResult(!1),f?.(e,i,w)}finally{v(!1),s?.()}}),[p,u,v,l,w,c,F,h,k,b,f]),handleSubmitFailed:s((({values:e,errorFields:t})=>{h.emitSubmitResult(!1),f?.(new i(-1,t.flatMap((e=>e.errors)).join(", ")),e,w)}),[h,f,w])}}export{u as useActionHandlers};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { useApiContext } from '@vef-framework/core';
+import { isFunction, VefError, showLoadingMessage, omit, showSuccessMessage } from '@vef-framework/shared';
+import { useCallback, useMemo } from 'react';
+import { useFormStore } from '../store.js';
+
+function useActionHandlers({
+  submitApi,
+  submitTip = "\u63D0\u4EA4\u4E2D...",
+  onBeforeSubmit,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitFailure,
+  onReset
+}) {
+  const [
+    form,
+    scene,
+    eventBus,
+    setIsLoading,
+    virtualFieldNames,
+    getValues,
+    initialValues,
+    invokeValueChangeHandlers
+  ] = useFormStore((state) => [
+    state.form,
+    state.scene,
+    state.eventBus,
+    state.setIsLoading,
+    state.virtualFieldNames,
+    state.getValues,
+    state.initialValues,
+    state.invokeValueChangeHandlers
+  ]);
+  const { useApiMutation, stubMutationApi } = useApiContext();
+  const { mutate } = useApiMutation(submitApi ?? stubMutationApi);
+  if (!isFunction(onSubmit) && !submitApi) {
+    throw new VefError(-1, "'onSubmit' or 'submitApi' prop is required for VefForm component");
+  }
+  const handleReset = useCallback(() => {
+    const values = getValues();
+    form.resetFields();
+    invokeValueChangeHandlers();
+    eventBus.emitChange(initialValues);
+    onReset?.(values, scene);
+  }, [
+    form,
+    getValues,
+    onReset,
+    scene,
+    invokeValueChangeHandlers,
+    initialValues,
+    eventBus
+  ]);
+  const handleSubmit = useMemo(() => {
+    if (isFunction(onSubmit)) {
+      if (submitApi) {
+        console.warn("'submitApi' prop is ignored when 'onSubmit' prop is provided in VefForm component");
+      }
+      return async (values) => {
+        setIsLoading(true);
+        let valuesToUse = values;
+        let closeLoading = null;
+        try {
+          const submitTipToUse = isFunction(submitTip) ? submitTip(values, scene) : submitTip;
+          closeLoading = showLoadingMessage(submitTipToUse);
+          if (isFunction(onBeforeSubmit)) {
+            valuesToUse = await onBeforeSubmit(valuesToUse, scene);
+          }
+          const valuesToSubmit = omit(valuesToUse, virtualFieldNames);
+          await onSubmit(valuesToSubmit, scene);
+          eventBus.emitSubmitResult(true);
+        } catch (error) {
+          eventBus.emitSubmitResult(false);
+          throw error;
+        } finally {
+          setIsLoading(false);
+          closeLoading?.();
+        }
+      };
+    }
+    return async (values) => {
+      setIsLoading(true);
+      let valuesToUse = values;
+      let closeLoading = null;
+      try {
+        const submitTipToUse = isFunction(submitTip) ? submitTip(values, scene) : submitTip;
+        closeLoading = showLoadingMessage(submitTipToUse);
+        if (isFunction(onBeforeSubmit)) {
+          valuesToUse = await onBeforeSubmit(values, scene);
+        }
+        const toSubmitValues = omit(valuesToUse, virtualFieldNames);
+        const apiResponse = await mutate(toSubmitValues);
+        (onSubmitSuccess ?? (({ message }) => {
+          showSuccessMessage(message);
+        }))(apiResponse, valuesToUse, scene);
+        eventBus.emitSubmitResult(true);
+      } catch (error) {
+        eventBus.emitSubmitResult(false);
+        onSubmitFailure?.(error, valuesToUse, scene);
+      } finally {
+        setIsLoading(false);
+        closeLoading?.();
+      }
+    };
+  }, [
+    onSubmit,
+    submitApi,
+    setIsLoading,
+    submitTip,
+    scene,
+    onBeforeSubmit,
+    virtualFieldNames,
+    eventBus,
+    mutate,
+    onSubmitSuccess,
+    onSubmitFailure
+  ]);
+  const handleSubmitFailed = useCallback(({ values, errorFields }) => {
+    eventBus.emitSubmitResult(false);
+    onSubmitFailure?.(new VefError(-1, errorFields.flatMap((field) => field.errors).join(", ")), values, scene);
+  }, [eventBus, onSubmitFailure, scene]);
+  return {
+    handleReset,
+    handleSubmit,
+    handleSubmitFailed
+  };
+}
+
+export { useActionHandlers };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-columns-layout.js

@@ -1,3 +1,123 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{unique as e,VefError as n}from"@vef-framework/shared";import{useMemo as s}from"react";const o=24,t=[{breakpoint:"xs",base:o,spans:1},{breakpoint:"sm",base:12,spans:2},{breakpoint:"md",base:8,spans:3},{breakpoint:"lg",base:6,spans:4},{breakpoint:"xl",base:6,spans:4},{breakpoint:"xxl",base:4,spans:6}],a=e(t.map((e=>e.spans)));function r(e,r,p,l){return s((()=>0===r.length?{}:"responsive"===p?function(e,s,o){const r=s.reduce(((e,n)=>e+(n.span??1)),0);if(!a.includes(r))throw new n(-3,`The total spans of the columns of the row [${e}] must be one of the following: ${a.join(", ")}.`);const p=24/r,l={};for(const{breakpoint:e,base:n,spans:a}of t)if(p>=n)l[e]=s.reduce(((e,n)=>(e[n.key]=(n.span??1)*p,e)),{});else{const t={};let r=a,p=null;for(const e of s){const s=e.span??1;r>=s?(t[e.key]=s*n,r-=s,p=e.key):(p&&(o&&(t[p]+=r*n),r=a,p=null),s>a?t[e.key]=24:(t[e.key]=s*n,r-=s,p=e.key)),0===r&&(r=a,p=null)}r>0&&(o&&(t[p]+=r*n),p=null),l[e]=t}return l}(e,r,l):function(e,s){const t=s.reduce(((e,n)=>e+(n.span??1)),0);if(t>o||o%t!=0)throw new n(-3,`The total spans of the columns of the row [${e}] must be less than or equal to 24 and a divisor of 24.`);const a=o/t;return s.reduce(((e,n)=>(e[n.key]=(n.span??1)*a,e)),{})}(e,r)),[])}export{r as useColumnsLayout};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { unique, VefError } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+const MAX_SPANS = 24;
+const SPAN_BASES = [
+  {
+    breakpoint: "xs",
+    base: MAX_SPANS,
+    spans: 1
+  },
+  {
+    breakpoint: "sm",
+    base: MAX_SPANS / 2,
+    spans: 2
+  },
+  {
+    breakpoint: "md",
+    base: MAX_SPANS / 3,
+    spans: 3
+  },
+  {
+    breakpoint: "lg",
+    base: MAX_SPANS / 4,
+    spans: 4
+  },
+  {
+    breakpoint: "xl",
+    base: MAX_SPANS / 4,
+    spans: 4
+  },
+  {
+    breakpoint: "xxl",
+    base: MAX_SPANS / 6,
+    spans: 6
+  }
+];
+const ALLOWED_SPANS = unique(SPAN_BASES.map((item) => item.spans));
+function calculateResponsiveLayout(rowKey, columns, autoExpand) {
+  const totalSpans = columns.reduce((acc, column) => acc + (column.span ?? 1), 0);
+  if (!ALLOWED_SPANS.includes(totalSpans)) {
+    throw new VefError(-3, `The total spans of the columns of the row [${rowKey}] must be one of the following: ${ALLOWED_SPANS.join(", ")}.`);
+  }
+  const requiredBase = 24 / totalSpans;
+  const layout = {};
+  for (const {
+    breakpoint,
+    base,
+    spans
+  } of SPAN_BASES) {
+    if (requiredBase >= base) {
+      layout[breakpoint] = columns.reduce((acc, column) => {
+        acc[column.key] = (column.span ?? 1) * requiredBase;
+        return acc;
+      }, {});
+    } else {
+      const map = {};
+      let remainingSpans = spans;
+      let lastColumnKey = null;
+      for (const column of columns) {
+        const requiredSpan = column.span ?? 1;
+        if (remainingSpans >= requiredSpan) {
+          map[column.key] = requiredSpan * base;
+          remainingSpans -= requiredSpan;
+          lastColumnKey = column.key;
+        } else {
+          if (lastColumnKey) {
+            if (autoExpand) {
+              map[lastColumnKey] += remainingSpans * base;
+            }
+            remainingSpans = spans;
+            lastColumnKey = null;
+          }
+          if (requiredSpan > spans) {
+            map[column.key] = 24;
+          } else {
+            map[column.key] = requiredSpan * base;
+            remainingSpans -= requiredSpan;
+            lastColumnKey = column.key;
+          }
+        }
+        if (remainingSpans === 0) {
+          remainingSpans = spans;
+          lastColumnKey = null;
+        }
+      }
+      if (remainingSpans > 0) {
+        if (autoExpand) {
+          map[lastColumnKey] += remainingSpans * base;
+        }
+        lastColumnKey = null;
+      }
+      layout[breakpoint] = map;
+    }
+  }
+  return layout;
+}
+function calculateFixedLayout(rowKey, columns) {
+  const totalSpans = columns.reduce((acc, column) => acc + (column.span ?? 1), 0);
+  if (totalSpans > MAX_SPANS || MAX_SPANS % totalSpans !== 0) {
+    throw new VefError(-3, `The total spans of the columns of the row [${rowKey}] must be less than or equal to ${MAX_SPANS} and a divisor of ${MAX_SPANS}.`);
+  }
+  const base = MAX_SPANS / totalSpans;
+  return columns.reduce((acc, column) => {
+    acc[column.key] = (column.span ?? 1) * base;
+    return acc;
+  }, {});
+}
+function useColumnsLayout(rowKey, columns, layoutMode, autoExpand) {
+  return useMemo(() => {
+    if (columns.length === 0) {
+      return {};
+    }
+    if (layoutMode === "responsive") {
+      return calculateResponsiveLayout(rowKey, columns, autoExpand);
+    } else {
+      return calculateFixedLayout(rowKey, columns);
+    }
+  }, []);
+}
+
+export { useColumnsLayout };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-computed-values.js

@@ -1,3 +1,56 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{useUpdater as e,useDeepMemo as r,useDeepLayoutEffect as o}from"@vef-framework/hooks";import{isFunctionOrExpression as t,isDeepEqual as a}from"@vef-framework/shared";import{computeValue as f}from"../helper.js";import{useFormStore as n}from"../store.js";function u(u,s=!1){const[l,m,c]=n((e=>[e.scene,e.eventBus,e.getValues])),i=e(),k=c(),p=r((()=>u.reduce(((e,r)=>{const{key:o,rawValue:t,defaultValue:a}=r,n=f(t,k,l,a);return e[o]=n,e}),{})),[k,l,u]);return o((()=>{const e=u.filter((({rawValue:e})=>t(e)));if(e.length>0){const r=r=>{for(const o of e){const{key:e,rawValue:t,defaultValue:n}=o,u=p[e],s=f(t,r,l,n);if(!a(s,u)){i();break}}};return m.onChange(r),()=>{m.offChange(r)}}}),[p,m,i,l,u]),s?u.reduce(((e,{key:r})=>(e[r]=p[r],e)),{}):u.map((({key:e})=>p[e]))}export{u as useComputedValues};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { useUpdater, useDeepMemo, useDeepLayoutEffect } from '@vef-framework/hooks';
+import { isFunctionOrExpression, isDeepEqual } from '@vef-framework/shared';
+import { computeValue } from '../helper.js';
+import { useFormStore } from '../store.js';
+
+function useComputedValues(values, returnAsObject = false) {
+  const [scene, eventBus, getValues] = useFormStore((state) => [state.scene, state.eventBus, state.getValues]);
+  const forceUpdate = useUpdater();
+  const currentValues = getValues();
+  const computedValues = useDeepMemo(() => values.reduce((acc, it) => {
+    const {
+      key,
+      rawValue,
+      defaultValue
+    } = it;
+    const computedValue = computeValue(rawValue, currentValues, scene, defaultValue);
+    acc[key] = computedValue;
+    return acc;
+  }, {}), [currentValues, scene, values]);
+  useDeepLayoutEffect(() => {
+    const realComputedValues = values.filter(({ rawValue }) => isFunctionOrExpression(rawValue));
+    const shouldListenChangeEvent = realComputedValues.length > 0;
+    if (shouldListenChangeEvent) {
+      const handleChange = (newValues) => {
+        for (const value of realComputedValues) {
+          const {
+            key,
+            rawValue,
+            defaultValue
+          } = value;
+          const computedValue = computedValues[key];
+          const refreshedValue = computeValue(rawValue, newValues, scene, defaultValue);
+          if (!isDeepEqual(refreshedValue, computedValue)) {
+            forceUpdate();
+            break;
+          }
+        }
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [computedValues, eventBus, forceUpdate, scene, values]);
+  if (returnAsObject) {
+    return values.reduce((acc, { key }) => {
+      acc[key] = computedValues[key];
+      return acc;
+    }, {});
+  }
+  return values.map(({ key }) => computedValues[key]);
+}
+
+export { useComputedValues };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-form-context.js

@@ -1,3 +1,15 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{createSelectableContext as o}from"@vef-framework/shared";const{useContextSelector:e,useContext:t,ContextProvider:r}=o({autoExpand:!0,labelPosition:"top",layoutMode:"responsive"});export{r as FormContextProvider,t as useFormContext,e as useFormContextSelector};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { createSelectableContext } from '@vef-framework/shared';
+
+const {
+  useContextSelector: useFormContextSelector,
+  useContext: useFormContext,
+  ContextProvider: FormContextProvider
+} = createSelectableContext({
+  autoExpand: true,
+  labelPosition: "top",
+  layoutMode: "responsive"
+});
+
+export { FormContextProvider, useFormContext, useFormContextSelector };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-form-initialization.js

@@ -1,3 +1,46 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{isNullish as o,isFunction as e}from"@vef-framework/shared";import{useMemo as n}from"react";function r(r,t){return n((()=>{const n={...t},s={},a=[];for(const t of r){const{rows:r}=t;for(const t of r){const{columns:r}=t;for(const t of r){const{items:r}=t;for(const t of r){const{name:r,defaultValue:f,virtual:c}=t;!o(f)&&o(n[r])&&(n[r]=f),"Hidden"!==t.type&&e(t.onChange)&&(s[r]=t.onChange),!0===c&&a.push(r)}}}}return{mergedInitialValues:n,valueChangeHandlers:s,virtualFieldNames:a}}),[])}export{r as useFormInitialization};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { isNullish, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+function useFormInitialization(schema, initialValues) {
+  return useMemo(() => {
+    const mergedInitialValues = {
+      ...initialValues
+    };
+    const valueChangeHandlers = {};
+    const virtualFieldNames = [];
+    for (const group of schema) {
+      const { rows } = group;
+      for (const row of rows) {
+        const { columns } = row;
+        for (const column of columns) {
+          const { items } = column;
+          for (const item of items) {
+            const {
+              name,
+              defaultValue,
+              virtual
+            } = item;
+            if (!isNullish(defaultValue) && isNullish(mergedInitialValues[name])) {
+              mergedInitialValues[name] = defaultValue;
+            }
+            if (item.type !== "Hidden" && isFunction(item.onChange)) {
+              valueChangeHandlers[name] = item.onChange;
+            }
+            if (virtual === true) {
+              virtualFieldNames.push(name);
+            }
+          }
+        }
+      }
+    }
+    return {
+      mergedInitialValues,
+      valueChangeHandlers,
+      virtualFieldNames
+    };
+  }, []);
+}
+
+export { useFormInitialization };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-form-instance.js

@@ -1,3 +1,27 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{useImperativeHandle as t}from"react";import{useFormStore as e}from"../store.js";function s(s,o){const[u,m,r,i]=e((t=>[t.form,t.eventBus,t.getValues,t.setValues]));t(s,(()=>({submit:()=>new Promise(((t,e)=>{const s=o=>{m.offSubmitResult(s),o?t():e(o)};m.onSubmitResult(s),u.submit()})),reset:o,getValues:r,setValues:i})))}export{s as useFormInstance};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { useImperativeHandle } from 'react';
+import { useFormStore } from '../store.js';
+
+function useFormInstance(ref, reset) {
+  const [form, eventBus, getValues, setValues] = useFormStore((state) => [state.form, state.eventBus, state.getValues, state.setValues]);
+  useImperativeHandle(ref, () => ({
+    submit: () => new Promise((resolve, reject) => {
+      const handleResult = (result) => {
+        eventBus.offSubmitResult(handleResult);
+        if (result) {
+          resolve();
+        } else {
+          reject(result);
+        }
+      };
+      eventBus.onSubmitResult(handleResult);
+      form.submit();
+    }),
+    reset,
+    getValues,
+    setValues
+  }));
+}
+
+export { useFormInstance };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-form-values-change.js

@@ -1,3 +1,31 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{isFunction as e}from"@vef-framework/shared";import{useMemo as n,useEffect as r,useLayoutEffect as o}from"react";import{useFormStore as t}from"../store.js";function a(a){const[f,s,m]=t((e=>[e.scene,e.eventBus,e.invokeValueChangeHandlers])),h=n((()=>(e,n)=>{s.emitChange(n)}),[s]);return r((()=>{if(e(a)){const e=e=>{a(e,f)};return s.onChange(e),()=>{s.offChange(e)}}}),[s,a,f]),o((()=>{m()}),[]),{handleValuesChange:h}}export{a as useFormValuesChange};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { isFunction } from '@vef-framework/shared';
+import { useMemo, useEffect, useLayoutEffect } from 'react';
+import { useFormStore } from '../store.js';
+
+function useFormValuesChange(onChange) {
+  const [scene, eventBus, invokeValueChangeHandlers] = useFormStore((state) => [state.scene, state.eventBus, state.invokeValueChangeHandlers]);
+  const handleValuesChange = useMemo(() => (_, values) => {
+    eventBus.emitChange(values);
+  }, [eventBus]);
+  useEffect(() => {
+    if (isFunction(onChange)) {
+      const handleChange = (values) => {
+        onChange(values, scene);
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [eventBus, onChange, scene]);
+  useLayoutEffect(() => {
+    invokeValueChangeHandlers();
+  }, []);
+  return {
+    handleValuesChange
+  };
+}
+
+export { useFormValuesChange };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/hooks/use-label-width.js

@@ -1,3 +1,19 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{showWarningMessage as e}from"@vef-framework/shared";import{useMemo as r}from"react";function t(t,o){return r((()=>{if("top"!==t&&o)return(o<60||o>120)&&e("The labelWidth of VefForm component must be between 60 and 120, otherwise it will be 60 or 120."),Math.min(Math.max(o,60),120)}),[t,o])}export{t as useLabelWidth};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { showWarningMessage } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+function useLabelWidth(labelPosition, labelWidth) {
+  const labelWidthToUse = useMemo(() => {
+    if (labelPosition === "top" || !labelWidth) {
+      return;
+    }
+    if (labelWidth < 60 || labelWidth > 120) {
+      showWarningMessage("The labelWidth of VefForm component must be between 60 and 120, otherwise it will be 60 or 120.");
+    }
+    return Math.min(Math.max(labelWidth, 60), 120);
+  }, [labelPosition, labelWidth]);
+  return labelWidthToUse;
+}
+
+export { useLabelWidth };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-form/index.js

@@ -1,5 +1,175 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-import{jsxs as e,jsx as o}from"@emotion/react/jsx-runtime";import{css as i}from"@emotion/react";import{useContextDisabled as t,useSingleton as s,useUnmount as a}from"@vef-framework/hooks";import{isNumber as n,isDeepEqual as r,omit as l}from"@vef-framework/shared";import{Form as m}from"antd";import{useMemo as u,forwardRef as h,memo as f}from"react";import"../internal/index.js";import c from"./components/form-actions.js";import d from"./components/form-content.js";import{FormEventBus as p}from"./event.js";import{useActionHandlers as b}from"./hooks/use-action-handlers.js";import{useFormContextSelector as v,FormContextProvider as g}from"./hooks/use-form-context.js";import{useFormInitialization as j}from"./hooks/use-form-initialization.js";import{useFormInstance as S}from"./hooks/use-form-instance.js";import{useFormValuesChange as F}from"./hooks/use-form-values-change.js";import{useLabelWidth as V}from"./hooks/use-label-width.js";import{useFormStore as k,FormStoreProvider as x}from"./store.js";import{convertBasicSizeToUiSize as B}from"../internal/utils.js";const{useForm:w}=m,C={scrollMode:"if-needed",behavior:"smooth"};const y=h((function({schema:s,labelAlign:a="right",variant:r,showTabs:l=!1,height:h="auto",size:f,disabled:p=!1,onChange:g,submissionButton:j,resetButton:V,submitApi:x,submitTip:w,onBeforeSubmit:y,onSubmit:T,onSubmitSuccess:z,onSubmitFailure:A,onReset:N},R){const[W,E]=v((e=>[e.labelPosition,e.labelWidth])),[M,P,$]=k((e=>[e.form,e.initialValues,e.isLoading])),{handleValuesChange:H}=F(g),{handleReset:I,handleSubmit:L,handleSubmitFailed:q}=b({submitApi:x,submitTip:w,onBeforeSubmit:y,onSubmit:T,onSubmitSuccess:z,onSubmitFailure:A,onReset:N});S(R,I);const D=u((()=>{if(E)return{flex:`0 0 ${E}px`}}),[E]),G=u((()=>{let e=h;return"full"===h?e="100%":n(h)&&(e=`${h}px`),i`
-      height: ${e};
-    `}),[h]),J=t();return e(m,{labelWrap:!0,colon:!1,css:G,disabled:J||p||$,form:M,initialValues:P,labelAlign:a,labelCol:D,layout:"top"===W?"vertical":"horizontal",scrollToFirstError:C,size:B(f),variant:r,onFinish:L,onFinishFailed:q,onValuesChange:H,children:[o(d,{height:h,schema:s,showTabs:!0===l?"switch":l}),o(c,{handleReset:I,resetButton:V,submissionButton:j})]})}));y.displayName="VefFormBase";const T=f(h((function({initialValues:e,scene:i,layoutMode:t="responsive",autoExpand:n=!1,labelPosition:r="top",labelWidth:l,...m},h){const{schema:f}=m,[c]=w(),d=s((()=>new p));a((()=>{d.clear()}));const b=V(r,l),v=u((()=>({labelPosition:r,labelWidth:b,autoExpand:n,layoutMode:t})),[t,n,r,b]),{mergedInitialValues:S,valueChangeHandlers:F,virtualFieldNames:k}=j(f,e),B=u((()=>({eventBus:d,form:c,initialValues:S,scene:i,valueChangeHandlers:F,virtualFieldNames:k})),[d,c,S,i,F,k]);return o(x,{initialState:B,children:o(g,{value:v,children:o(y,{ref:h,...m})})})})),((e,o)=>r(l(e,["initialValues","schema"]),l(o,["initialValues","schema"]))));T.displayName="VefForm";export{T as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useContextDisabled, useSingleton, useUnmount } from '@vef-framework/hooks';
+import { isNumber, isDeepEqual, omit } from '@vef-framework/shared';
+import { Form } from 'antd';
+import { useMemo, forwardRef, memo } from 'react';
+import '../internal/index.js';
+import VefFormActions from './components/form-actions.js';
+import VefFormContent from './components/form-content.js';
+import { FormEventBus } from './event.js';
+import { useActionHandlers } from './hooks/use-action-handlers.js';
+import { useFormContextSelector, FormContextProvider } from './hooks/use-form-context.js';
+import { useFormInitialization } from './hooks/use-form-initialization.js';
+import { useFormInstance } from './hooks/use-form-instance.js';
+import { useFormValuesChange } from './hooks/use-form-values-change.js';
+import { useLabelWidth } from './hooks/use-label-width.js';
+import { useFormStore, FormStoreProvider } from './store.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+const { useForm } = Form;
+const scrollToFirstErrorOptions = {
+  scrollMode: "if-needed",
+  behavior: "smooth"
+};
+function VefFormBase({
+  schema,
+  labelAlign = "right",
+  variant,
+  showTabs = false,
+  height = "auto",
+  size,
+  disabled = false,
+  onChange,
+  submissionButton,
+  resetButton,
+  submitApi,
+  submitTip,
+  onBeforeSubmit,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitFailure,
+  onReset
+}, ref) {
+  const [labelPosition, labelWidth] = useFormContextSelector((ctx) => [ctx.labelPosition, ctx.labelWidth]);
+  const [form, initialValues, isLoading] = useFormStore((state) => [state.form, state.initialValues, state.isLoading]);
+  const { handleValuesChange } = useFormValuesChange(onChange);
+  const {
+    handleReset,
+    handleSubmit,
+    handleSubmitFailed
+  } = useActionHandlers({
+    submitApi,
+    submitTip,
+    onBeforeSubmit,
+    onSubmit,
+    onSubmitSuccess,
+    onSubmitFailure,
+    onReset
+  });
+  useFormInstance(ref, handleReset);
+  const labelCol = useMemo(() => {
+    if (!labelWidth) {
+      return;
+    }
+    return { flex: `0 0 ${labelWidth}px` };
+  }, [labelWidth]);
+  const formStyle = useMemo(() => {
+    let heightValue = height;
+    if (height === "full") {
+      heightValue = "100%";
+    } else if (isNumber(height)) {
+      heightValue = `${height}px`;
+    }
+    return css`
+      height: ${heightValue};
+    `;
+  }, [height]);
+  const contextDisabled = useContextDisabled();
+  const formDisabled = contextDisabled || disabled || isLoading;
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      labelWrap: true,
+      colon: false,
+      css: formStyle,
+      disabled: formDisabled,
+      form,
+      initialValues,
+      labelAlign,
+      labelCol,
+      layout: labelPosition === "top" ? "vertical" : "horizontal",
+      scrollToFirstError: scrollToFirstErrorOptions,
+      size: convertBasicSizeToUiSize(size),
+      variant,
+      onFinish: handleSubmit,
+      onFinishFailed: handleSubmitFailed,
+      onValuesChange: handleValuesChange,
+      children: [
+        /* @__PURE__ */ jsx(
+          VefFormContent,
+          {
+            height,
+            schema,
+            showTabs: showTabs === true ? "switch" : showTabs
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          VefFormActions,
+          {
+            handleReset,
+            resetButton,
+            submissionButton
+          }
+        )
+      ]
+    }
+  );
+}
+const VefFormBaseForwarded = forwardRef(VefFormBase);
+VefFormBaseForwarded.displayName = "VefFormBase";
+function VefFormWrapper({
+  initialValues,
+  scene,
+  layoutMode = "responsive",
+  autoExpand = false,
+  labelPosition = "top",
+  labelWidth,
+  ...restProps
+}, ref) {
+  const { schema } = restProps;
+  const [form] = useForm();
+  const eventBus = useSingleton(() => new FormEventBus());
+  useUnmount(() => {
+    eventBus.clear();
+  });
+  const labelWidthToUse = useLabelWidth(labelPosition, labelWidth);
+  const formContext = useMemo(() => ({
+    labelPosition,
+    labelWidth: labelWidthToUse,
+    autoExpand,
+    layoutMode
+  }), [layoutMode, autoExpand, labelPosition, labelWidthToUse]);
+  const {
+    mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  } = useFormInitialization(schema, initialValues);
+  const initialState = useMemo(() => ({
+    eventBus,
+    form,
+    initialValues: mergedInitialValues,
+    scene,
+    valueChangeHandlers,
+    virtualFieldNames
+  }), [eventBus, form, mergedInitialValues, scene, valueChangeHandlers, virtualFieldNames]);
+  return /* @__PURE__ */ jsx(FormStoreProvider, { initialState, children: /* @__PURE__ */ jsx(FormContextProvider, { value: formContext, children: /* @__PURE__ */ jsx(
+    VefFormBaseForwarded,
+    {
+      ref,
+      ...restProps
+    }
+  ) }) });
+}
+const VefForm = memo(
+  forwardRef(VefFormWrapper),
+  (prevProps, nextProps) => isDeepEqual(
+    omit(prevProps, ["initialValues", "schema"]),
+    omit(nextProps, ["initialValues", "schema"])
+  )
+);
+VefForm.displayName = "VefForm";
+
+export { VefForm as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */