@vef-framework/components 1.0.63 → 1.0.64

package/lib/vef-form/components/form-row.cjs

@@ -1,3 +1,103 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),s=require("@vef-framework/shared"),t=require("react"),o=require("../../vef-grid/index.cjs"),r=require("../../vef-grid-item/index.cjs"),u=require("../hooks/use-columns-layout.cjs"),a=require("../hooks/use-computed-values.cjs"),i=require("../hooks/use-form-context.cjs"),l=require("./form-hidden-item.cjs"),n=require("./form-item.cjs");const d=t.memo((function({rowKey:s,columns:d,disabled:m,autoExpand:c}){const{layoutMode:f,autoExpand:x,labelPosition:p,labelWidth:y}=i.useFormContext(),h="top"===p?240:240+(y??80),[k,j]=t.useMemo((()=>{const e=[],s=[];for(const t of d){const{items:o,...r}=t,u=[];for(const s of o){const{type:t}=s;"Hidden"===t?e.push(s):u.push(s)}u.length>0&&s.push({...r,items:u})}return[e,s]}),[d]),g=a.useComputedValues([...j.map((({key:e,show:s})=>({key:`show-${e}`,rawValue:s,defaultValue:!0}))),...j.map((({key:e,disabled:s})=>({key:`disabled-${e}`,rawValue:s,defaultValue:m})))],!0),q=t.useMemo((()=>d.filter((({key:e})=>g[`show-${e}`]))),[g,d]),b=u.useColumnsLayout(s,q,f,c??x);return e.jsxs(e.Fragment,{children:[k.map((s=>{const{name:t}=s;return e.jsx(l.default,{item:s},t)})),q.length>0&&e.jsx(o.default,{baseWidth:h,gap:[0,"large"],children:q.map((s=>{const t={};if("responsive"===f){const e=b;t.xs=e.xs[s.key],t.sm=e.sm[s.key],t.md=e.md[s.key],t.lg=e.lg[s.key],t.xl=e.xl[s.key],t.xxl=e.xxl[s.key]}else{const e=b;t.span=e[s.key]}return e.jsx(r.default,{...t,children:s.items.map((t=>e.jsx(n.default,{disabled:m||g[`disabled-${s.key}`],item:t},t.name)))},s.key)}))})]})}),((e,t)=>s.isDeepEqual(s.omit(e,["columns"]),s.omit(t,["columns"]))));exports.default=d;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../../vef-grid/index.cjs');
+const index$1 = require('../../vef-grid-item/index.cjs');
+const useColumnsLayout = require('../hooks/use-columns-layout.cjs');
+const useComputedValues = require('../hooks/use-computed-values.cjs');
+const useFormContext = require('../hooks/use-form-context.cjs');
+const formHiddenItem = require('./form-hidden-item.cjs');
+const formItem = require('./form-item.cjs');
+
+const formItemMinWidth = 240;
+function VefFormRowBase({
+  rowKey,
+  columns,
+  disabled,
+  autoExpand: rowAutoExpand
+}) {
+  const {
+    layoutMode,
+    autoExpand: formAutoExpand,
+    labelPosition,
+    labelWidth
+  } = useFormContext.useFormContext();
+  const formItemMinWidthToUse = labelPosition === "top" ? formItemMinWidth : formItemMinWidth + (labelWidth ?? 80);
+  const [hiddenItems, filteredColumns] = react.useMemo(() => {
+    const hiddenItems2 = [];
+    const filteredColumns2 = [];
+    for (const column of columns) {
+      const { items, ...rest } = column;
+      const filteredItems = [];
+      for (const item of items) {
+        const { type } = item;
+        if (type === "Hidden") {
+          hiddenItems2.push(item);
+        } else {
+          filteredItems.push(item);
+        }
+      }
+      if (filteredItems.length > 0) {
+        filteredColumns2.push({
+          ...rest,
+          items: filteredItems
+        });
+      }
+    }
+    return [hiddenItems2, filteredColumns2];
+  }, [columns]);
+  const computedValues = useComputedValues.useComputedValues(
+    [
+      ...filteredColumns.map(({ key, show }) => ({
+        key: `show-${key}`,
+        rawValue: show,
+        defaultValue: true
+      })),
+      ...filteredColumns.map(({ key, disabled: columnDisabled }) => ({
+        key: `disabled-${key}`,
+        rawValue: columnDisabled,
+        defaultValue: disabled
+      }))
+    ],
+    true
+  );
+  const showedColumns = react.useMemo(() => columns.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, columns]);
+  const layout = useColumnsLayout.useColumnsLayout(rowKey, showedColumns, layoutMode, rowAutoExpand ?? formAutoExpand);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hiddenItems.map((item) => {
+      const { name } = item;
+      return /* @__PURE__ */ jsxRuntime.jsx(formHiddenItem.default, { item }, name);
+    }),
+    showedColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(index.default, { baseWidth: formItemMinWidthToUse, gap: [0, "large"], children: showedColumns.map((column) => {
+      const layoutProps = {};
+      if (layoutMode === "responsive") {
+        const columnsLayout = layout;
+        layoutProps.xs = columnsLayout.xs[column.key];
+        layoutProps.sm = columnsLayout.sm[column.key];
+        layoutProps.md = columnsLayout.md[column.key];
+        layoutProps.lg = columnsLayout.lg[column.key];
+        layoutProps.xl = columnsLayout.xl[column.key];
+        layoutProps.xxl = columnsLayout.xxl[column.key];
+      } else {
+        const columnsLayout = layout;
+        layoutProps.span = columnsLayout[column.key];
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { ...layoutProps, children: column.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(formItem.default, { disabled: disabled || computedValues[`disabled-${column.key}`], item }, item.name)) }, column.key);
+    }) })
+  ] });
+}
+const VefFormRow = react.memo(
+  VefFormRowBase,
+  (prevProps, nextProps) => shared.isDeepEqual(
+    shared.omit(prevProps, ["columns"]),
+    shared.omit(nextProps, ["columns"])
+  )
+);
+
+exports.default = VefFormRow;
 /*! 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/lib/vef-form/event.cjs

@@ -1,3 +1,49 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared");var t,a=e=>{throw TypeError(e)},o=(e,t,o)=>(((e,t,o)=>{t.has(e)||a("Cannot "+o)})(e,t,"read from private field"),o?o.call(e):t.get(e));const r=Symbol("change"),s=Symbol("submitResult");t=new WeakMap,exports.FormEventBus=class{constructor(){var o,r,s;o=this,r=t,s=e.createEventEmitter(),r.has(o)?a("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(o):r.set(o,s)}clear(){o(this,t).all.clear()}onChange(e){o(this,t).on(r,e)}offChange(e){o(this,t).off(r,e)}emitChange(e){o(this,t).emit(r,e)}onSubmitResult(e){o(this,t).on(s,e)}offSubmitResult(e){o(this,t).off(s,e)}emitSubmitResult(e){o(this,t).emit(s,e)}};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _emitter;
+const changeEvent = Symbol("change");
+const submitResultEvent = Symbol("submitResult");
+class FormEventBus {
+  constructor() {
+    /**
+     * The emitter.
+     */
+    __privateAdd(this, _emitter, shared.createEventEmitter());
+  }
+  clear() {
+    __privateGet(this, _emitter).all.clear();
+  }
+  onChange(handler) {
+    __privateGet(this, _emitter).on(changeEvent, handler);
+  }
+  offChange(handler) {
+    __privateGet(this, _emitter).off(changeEvent, handler);
+  }
+  emitChange(value) {
+    __privateGet(this, _emitter).emit(changeEvent, value);
+  }
+  onSubmitResult(handler) {
+    __privateGet(this, _emitter).on(submitResultEvent, handler);
+  }
+  offSubmitResult(handler) {
+    __privateGet(this, _emitter).off(submitResultEvent, handler);
+  }
+  emitSubmitResult(result) {
+    __privateGet(this, _emitter).emit(submitResultEvent, result);
+  }
+}
+_emitter = new WeakMap();
+
+exports.FormEventBus = FormEventBus;
 /*! 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/lib/vef-form/helper.cjs

@@ -1,3 +1,20 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared");exports.computeValue=function(r,n,t,i){if(e.isFunction(r))return r(n,t);if(e.isExpression(r)){return e.compileDynamicFn(r,"values","scene",`return ${r.expression}`)(n,t)}return r??i};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+function computeValue(value, values, scene, defaultValue) {
+  if (shared.isFunction(value)) {
+    return value(values, scene);
+  }
+  if (shared.isExpression(value)) {
+    const fn = shared.compileDynamicFn(value, "values", "scene", `return ${value.expression}`);
+    return fn(values, scene);
+  }
+  return value ?? defaultValue;
+}
+
+exports.computeValue = computeValue;
 /*! 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/lib/vef-form/hooks/use-action-handlers.cjs

@@ -1,3 +1,135 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/core"),t=require("@vef-framework/shared"),i=require("react"),s=require("../store.cjs");exports.useActionHandlers=function({submitApi:o,submitTip:n="提交中...",onBeforeSubmit:r,onSubmit:u,onSubmitSuccess:a,onSubmitFailure:l,onReset:m}){const[c,b,p,d,S,f,w,h]=s.useFormStore((e=>[e.form,e.scene,e.eventBus,e.setIsLoading,e.virtualFieldNames,e.getValues,e.initialValues,e.invokeValueChangeHandlers])),{useApiMutation:F,stubMutationApi:g}=e.useApiContext(),{mutate:v}=F(o??g);if(!t.isFunction(u)&&!o)throw new t.VefError(-1,"'onSubmit' or 'submitApi' prop is required for VefForm component");return{handleReset:i.useCallback((()=>{const e=f();c.resetFields(),h(),p.emitChange(w),m?.(e,b)}),[c,f,m,b,h,w,p]),handleSubmit:i.useMemo((()=>t.isFunction(u)?(o&&console.warn("'submitApi' prop is ignored when 'onSubmit' prop is provided in VefForm component"),async e=>{d(!0);let i=e,s=null;try{const o=t.isFunction(n)?n(e,b):n;s=t.showLoadingMessage(o),t.isFunction(r)&&(i=await r(i,b));const a=t.omit(i,S);await u(a,b),p.emitSubmitResult(!0)}catch(e){throw p.emitSubmitResult(!1),e}finally{d(!1),s?.()}}):async e=>{d(!0);let i=e,s=null;try{const o=t.isFunction(n)?n(e,b):n;s=t.showLoadingMessage(o),t.isFunction(r)&&(i=await r(e,b));const u=t.omit(i,S),l=await v(u);(a??(({message:e})=>{t.showSuccessMessage(e)}))(l,i,b),p.emitSubmitResult(!0)}catch(e){p.emitSubmitResult(!1),l?.(e,i,b)}finally{d(!1),s?.()}}),[u,o,d,n,b,r,S,p,v,a,l]),handleSubmitFailed:i.useCallback((({values:e,errorFields:i})=>{p.emitSubmitResult(!1),l?.(new t.VefError(-1,i.flatMap((e=>e.errors)).join(", ")),e,b)}),[p,l,b])}};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const core = require('@vef-framework/core');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const store = require('../store.cjs');
+
+function useActionHandlers({
+  submitApi,
+  submitTip = "\u63D0\u4EA4\u4E2D...",
+  onBeforeSubmit,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitFailure,
+  onReset
+}) {
+  const [
+    form,
+    scene,
+    eventBus,
+    setIsLoading,
+    virtualFieldNames,
+    getValues,
+    initialValues,
+    invokeValueChangeHandlers
+  ] = store.useFormStore((state) => [
+    state.form,
+    state.scene,
+    state.eventBus,
+    state.setIsLoading,
+    state.virtualFieldNames,
+    state.getValues,
+    state.initialValues,
+    state.invokeValueChangeHandlers
+  ]);
+  const { useApiMutation, stubMutationApi } = core.useApiContext();
+  const { mutate } = useApiMutation(submitApi ?? stubMutationApi);
+  if (!shared.isFunction(onSubmit) && !submitApi) {
+    throw new shared.VefError(-1, "'onSubmit' or 'submitApi' prop is required for VefForm component");
+  }
+  const handleReset = react.useCallback(() => {
+    const values = getValues();
+    form.resetFields();
+    invokeValueChangeHandlers();
+    eventBus.emitChange(initialValues);
+    onReset?.(values, scene);
+  }, [
+    form,
+    getValues,
+    onReset,
+    scene,
+    invokeValueChangeHandlers,
+    initialValues,
+    eventBus
+  ]);
+  const handleSubmit = react.useMemo(() => {
+    if (shared.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 = shared.isFunction(submitTip) ? submitTip(values, scene) : submitTip;
+          closeLoading = shared.showLoadingMessage(submitTipToUse);
+          if (shared.isFunction(onBeforeSubmit)) {
+            valuesToUse = await onBeforeSubmit(valuesToUse, scene);
+          }
+          const valuesToSubmit = shared.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 = shared.isFunction(submitTip) ? submitTip(values, scene) : submitTip;
+        closeLoading = shared.showLoadingMessage(submitTipToUse);
+        if (shared.isFunction(onBeforeSubmit)) {
+          valuesToUse = await onBeforeSubmit(values, scene);
+        }
+        const toSubmitValues = shared.omit(valuesToUse, virtualFieldNames);
+        const apiResponse = await mutate(toSubmitValues);
+        (onSubmitSuccess ?? (({ message }) => {
+          shared.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 = react.useCallback(({ values, errorFields }) => {
+    eventBus.emitSubmitResult(false);
+    onSubmitFailure?.(new shared.VefError(-1, errorFields.flatMap((field) => field.errors).join(", ")), values, scene);
+  }, [eventBus, onSubmitFailure, scene]);
+  return {
+    handleReset,
+    handleSubmit,
+    handleSubmitFailed
+  };
+}
+
+exports.useActionHandlers = 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/lib/vef-form/hooks/use-columns-layout.cjs

@@ -1,3 +1,127 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),s=require("react"),n=24,o=[{breakpoint:"xs",base:n,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}],t=e.unique(o.map((e=>e.spans)));exports.useColumnsLayout=function(r,a,u,l){return s.useMemo((()=>0===a.length?{}:"responsive"===u?function(s,n,r){const a=n.reduce(((e,s)=>e+(s.span??1)),0);if(!t.includes(a))throw new e.VefError(-3,`The total spans of the columns of the row [${s}] must be one of the following: ${t.join(", ")}.`);const u=24/a,l={};for(const{breakpoint:e,base:s,spans:t}of o)if(u>=s)l[e]=n.reduce(((e,s)=>(e[s.key]=(s.span??1)*u,e)),{});else{const o={};let a=t,u=null;for(const e of n){const n=e.span??1;a>=n?(o[e.key]=n*s,a-=n,u=e.key):(u&&(r&&(o[u]+=a*s),a=t,u=null),n>t?o[e.key]=24:(o[e.key]=n*s,a-=n,u=e.key)),0===a&&(a=t,u=null)}a>0&&(r&&(o[u]+=a*s),u=null),l[e]=o}return l}(r,a,l):function(s,o){const t=o.reduce(((e,s)=>e+(s.span??1)),0);if(t>n||n%t!=0)throw new e.VefError(-3,`The total spans of the columns of the row [${s}] must be less than or equal to 24 and a divisor of 24.`);const r=n/t;return o.reduce(((e,s)=>(e[s.key]=(s.span??1)*r,e)),{})}(r,a)),[])};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('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 = shared.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 shared.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 shared.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 react.useMemo(() => {
+    if (columns.length === 0) {
+      return {};
+    }
+    if (layoutMode === "responsive") {
+      return calculateResponsiveLayout(rowKey, columns, autoExpand);
+    } else {
+      return calculateFixedLayout(rowKey, columns);
+    }
+  }, []);
+}
+
+exports.useColumnsLayout = 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/lib/vef-form/hooks/use-computed-values.cjs

@@ -1,3 +1,60 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/hooks"),r=require("@vef-framework/shared"),u=require("../helper.cjs"),t=require("../store.cjs");exports.useComputedValues=function(o,s=!1){const[a,n,c]=t.useFormStore((e=>[e.scene,e.eventBus,e.getValues])),l=e.useUpdater(),f=c(),i=e.useDeepMemo((()=>o.reduce(((e,r)=>{const{key:t,rawValue:o,defaultValue:s}=r,n=u.computeValue(o,f,a,s);return e[t]=n,e}),{})),[f,a,o]);return e.useDeepLayoutEffect((()=>{const e=o.filter((({rawValue:e})=>r.isFunctionOrExpression(e)));if(e.length>0){const t=t=>{for(const o of e){const{key:e,rawValue:s,defaultValue:n}=o,c=i[e],f=u.computeValue(s,t,a,n);if(!r.isDeepEqual(f,c)){l();break}}};return n.onChange(t),()=>{n.offChange(t)}}}),[i,n,l,a,o]),s?o.reduce(((e,{key:r})=>(e[r]=i[r],e)),{}):o.map((({key:e})=>i[e]))};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const helper = require('../helper.cjs');
+const store = require('../store.cjs');
+
+function useComputedValues(values, returnAsObject = false) {
+  const [scene, eventBus, getValues] = store.useFormStore((state) => [state.scene, state.eventBus, state.getValues]);
+  const forceUpdate = hooks.useUpdater();
+  const currentValues = getValues();
+  const computedValues = hooks.useDeepMemo(() => values.reduce((acc, it) => {
+    const {
+      key,
+      rawValue,
+      defaultValue
+    } = it;
+    const computedValue = helper.computeValue(rawValue, currentValues, scene, defaultValue);
+    acc[key] = computedValue;
+    return acc;
+  }, {}), [currentValues, scene, values]);
+  hooks.useDeepLayoutEffect(() => {
+    const realComputedValues = values.filter(({ rawValue }) => shared.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 = helper.computeValue(rawValue, newValues, scene, defaultValue);
+          if (!shared.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]);
+}
+
+exports.useComputedValues = 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/lib/vef-form/hooks/use-form-context.cjs

@@ -1,3 +1,21 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),{useContextSelector:t,useContext:o,ContextProvider:r}=e.createSelectableContext({autoExpand:!0,labelPosition:"top",layoutMode:"responsive"});exports.FormContextProvider=r,exports.useFormContext=o,exports.useFormContextSelector=t;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+const {
+  useContextSelector: useFormContextSelector,
+  useContext: useFormContext,
+  ContextProvider: FormContextProvider
+} = shared.createSelectableContext({
+  autoExpand: true,
+  labelPosition: "top",
+  layoutMode: "responsive"
+});
+
+exports.FormContextProvider = FormContextProvider;
+exports.useFormContext = useFormContext;
+exports.useFormContextSelector = 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/lib/vef-form/hooks/use-form-initialization.cjs

@@ -1,3 +1,50 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),o=require("react");exports.useFormInitialization=function(t,n){return o.useMemo((()=>{const o={...n},s={},r=[];for(const n of t){const{rows:t}=n;for(const n of t){const{columns:t}=n;for(const n of t){const{items:t}=n;for(const n of t){const{name:t,defaultValue:i,virtual:u}=n;!e.isNullish(i)&&e.isNullish(o[t])&&(o[t]=i),"Hidden"!==n.type&&e.isFunction(n.onChange)&&(s[t]=n.onChange),!0===u&&r.push(t)}}}}return{mergedInitialValues:o,valueChangeHandlers:s,virtualFieldNames:r}}),[])};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useFormInitialization(schema, initialValues) {
+  return react.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 (!shared.isNullish(defaultValue) && shared.isNullish(mergedInitialValues[name])) {
+              mergedInitialValues[name] = defaultValue;
+            }
+            if (item.type !== "Hidden" && shared.isFunction(item.onChange)) {
+              valueChangeHandlers[name] = item.onChange;
+            }
+            if (virtual === true) {
+              virtualFieldNames.push(name);
+            }
+          }
+        }
+      }
+    }
+    return {
+      mergedInitialValues,
+      valueChangeHandlers,
+      virtualFieldNames
+    };
+  }, []);
+}
+
+exports.useFormInitialization = 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/lib/vef-form/hooks/use-form-instance.cjs

@@ -1,3 +1,31 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../store.cjs");exports.useFormInstance=function(s,u){const[r,o,n,i]=t.useFormStore((e=>[e.form,e.eventBus,e.getValues,e.setValues]));e.useImperativeHandle(s,(()=>({submit:()=>new Promise(((e,t)=>{const s=u=>{o.offSubmitResult(s),u?e():t(u)};o.onSubmitResult(s),r.submit()})),reset:u,getValues:n,setValues:i})))};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const store = require('../store.cjs');
+
+function useFormInstance(ref, reset) {
+  const [form, eventBus, getValues, setValues] = store.useFormStore((state) => [state.form, state.eventBus, state.getValues, state.setValues]);
+  react.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
+  }));
+}
+
+exports.useFormInstance = 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/lib/vef-form/hooks/use-form-values-change.cjs

@@ -1,3 +1,35 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),r=require("react"),n=require("../store.cjs");exports.useFormValuesChange=function(t){const[o,s,u]=n.useFormStore((e=>[e.scene,e.eventBus,e.invokeValueChangeHandlers])),a=r.useMemo((()=>(e,r)=>{s.emitChange(r)}),[s]);return r.useEffect((()=>{if(e.isFunction(t)){const e=e=>{t(e,o)};return s.onChange(e),()=>{s.offChange(e)}}}),[s,t,o]),r.useLayoutEffect((()=>{u()}),[]),{handleValuesChange:a}};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const store = require('../store.cjs');
+
+function useFormValuesChange(onChange) {
+  const [scene, eventBus, invokeValueChangeHandlers] = store.useFormStore((state) => [state.scene, state.eventBus, state.invokeValueChangeHandlers]);
+  const handleValuesChange = react.useMemo(() => (_, values) => {
+    eventBus.emitChange(values);
+  }, [eventBus]);
+  react.useEffect(() => {
+    if (shared.isFunction(onChange)) {
+      const handleChange = (values) => {
+        onChange(values, scene);
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [eventBus, onChange, scene]);
+  react.useLayoutEffect(() => {
+    invokeValueChangeHandlers();
+  }, []);
+  return {
+    handleValuesChange
+  };
+}
+
+exports.useFormValuesChange = 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 */