@vef-framework/components 1.0.97 → 1.0.99

package/es/vef-form/components/form-content.js

@@ -1,6 +1,147 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{jsx as e,jsxs as t,Fragment as o}from"@emotion/react/jsx-runtime";import{css as r}from"@emotion/react";import{debounce as i,styles as s,isDeepEqual as l,omit as a}from"@vef-framework/shared";import{useMemo as n,useRef as m,useState as c,useCallback as d,useEffect as f,memo as u}from"react";import h from"../../vef-empty-placeholder/index.js";import p from"../../vef-flex/index.js";import y from"../../vef-scroll-area/index.js";import k from"../../vef-tabs/index.js";import{useComputedValues as w}from"../hooks/use-computed-values.js";import{useFormStore as b}from"../store.js";import g from"./form-group.js";const $=r`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { debounce, styles, isDeepEqual, omit } from '@vef-framework/shared';
+import { useMemo, useRef, useState, useCallback, useEffect, memo } from 'react';
+import VefEmptyPlaceholder from '../../vef-empty-placeholder/index.js';
+import VefFlex from '../../vef-flex/index.js';
+import VefScrollArea from '../../vef-scroll-area/index.js';
+import VefTabs from '../../vef-tabs/index.js';
+import { useComputedValues } from '../hooks/use-computed-values.js';
+import { useFormStore } from '../store.js';
+import VefFormGroup from './form-group.js';
+
+const scrollbarStyle = css`
   flex: auto;
   min-height: 0;
-`;const v=u((function VefFormContentBase({schema:r,showTabs:l,height:a}){const u=w([...r.map((({key:e,title:t})=>({key:`title-${e}`,rawValue:t}))),...r.map((({key:e,show:t})=>({key:`show-${e}`,rawValue:t,defaultValue:!0}))),...r.map((({key:e,disabled:t})=>({key:`disabled-${e}`,rawValue:t,defaultValue:!1})))],!0),v=n((()=>r.filter((({key:e})=>u[`show-${e}`]))),[u,r]),j=m({}),[x,V]=c(v[0]?.key??0),B=d((e=>{j.current[e]?.scrollIntoView({behavior:"smooth",block:"start",inline:"start"}),V(e)}),[]),C=n((()=>{if("navigation"!==l)return;return i({delay:60},(e=>{const{top:t}=e.target.getBoundingClientRect();for(const[e,o]of Object.entries(j.current))if(o){const{top:r}=o.getBoundingClientRect();r-t<=60&&V(e)}}))}),[l]),[S]=b((e=>[e.setShowActionButtons]));if(f((()=>{S(v.length>0)}),[S,v.length]),0===v.length)return e(h,{description:"空表单"});if("switch"===l){const t=r.map((({key:t,rows:o})=>({key:`${t}`,label:u[`title-${t}`],destroyInactiveTabPane:!1,children:e(g,{disabled:u[`disabled-${t}`],rows:o})})));return e(k,{items:t})}if("navigation"===l)return t(p,{vertical:!0,css:"full"===a?s.fullHeight:void 0,children:[e(k,{activeKey:`${x}`,items:r.map((({key:e})=>({key:`${e}`,label:u[`title-${e}`]}))),onChange:B}),e(y,{css:$,onScroll:C,children:r.map((({key:t,rows:o})=>e(g,{ref:e=>{j.current[t]=e},disabled:u[`disabled-${t}`],rows:o,title:u[`title-${t}`]},t)))})]});const I=r.map((({key:t,rows:o})=>e(g,{disabled:u[`disabled-${t}`],rows:o,title:u[`title-${t}`]},t)));return"full"===a?e(y,{onScroll:C,children:I}):e(o,{children:I})}),((e,t)=>l(a(e,["schema"]),a(t,["schema"]))));export{v as default};
+`;
+function VefFormContentBase({
+  schema,
+  showTabs,
+  height
+}) {
+  const computedValues = useComputedValues(
+    [
+      ...schema.map(({ key, title }) => ({
+        key: `title-${key}`,
+        rawValue: title
+      })),
+      ...schema.map(({ key, show }) => ({
+        key: `show-${key}`,
+        rawValue: show,
+        defaultValue: true
+      })),
+      ...schema.map(({ key, disabled }) => ({
+        key: `disabled-${key}`,
+        rawValue: disabled,
+        defaultValue: false
+      }))
+    ],
+    true
+  );
+  const showedGroups = useMemo(() => schema.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, schema]);
+  const groupDomsRef = useRef({});
+  const [activeGroupKey, setActiveGroupKey] = useState(showedGroups[0]?.key ?? 0);
+  const handleTabChange = useCallback((activeKey) => {
+    groupDomsRef.current[activeKey]?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+      inline: "start"
+    });
+    setActiveGroupKey(activeKey);
+  }, []);
+  const handleScroll = useMemo(() => {
+    if (showTabs !== "navigation") {
+      return;
+    }
+    const handler = (event) => {
+      const threshold = 60;
+      const { top: containerTop } = event.target.getBoundingClientRect();
+      for (const [groupKey, groupDom] of Object.entries(groupDomsRef.current)) {
+        if (groupDom) {
+          const { top } = groupDom.getBoundingClientRect();
+          if (top - containerTop <= threshold) {
+            setActiveGroupKey(groupKey);
+          }
+        }
+      }
+    };
+    return debounce({ delay: 60 }, handler);
+  }, [showTabs]);
+  const [setShowActionButtons] = useFormStore((state) => [state.setShowActionButtons]);
+  useEffect(() => {
+    setShowActionButtons(showedGroups.length > 0);
+  }, [setShowActionButtons, showedGroups.length]);
+  if (showedGroups.length === 0) {
+    return /* @__PURE__ */ jsx(VefEmptyPlaceholder, { description: "\u7A7A\u8868\u5355" });
+  }
+  if (showTabs === "switch") {
+    const items = schema.map(({ key, rows }) => ({
+      key: `${key}`,
+      label: computedValues[`title-${key}`],
+      destroyInactiveTabPane: false,
+      children: /* @__PURE__ */ jsx(
+        VefFormGroup,
+        {
+          disabled: computedValues[`disabled-${key}`],
+          rows
+        }
+      )
+    }));
+    return /* @__PURE__ */ jsx(VefTabs, { items });
+  }
+  if (showTabs === "navigation") {
+    return /* @__PURE__ */ jsxs(VefFlex, { vertical: true, css: height === "full" ? styles.fullHeight : void 0, children: [
+      /* @__PURE__ */ jsx(
+        VefTabs,
+        {
+          activeKey: `${activeGroupKey}`,
+          items: schema.map(({ key }) => ({
+            key: `${key}`,
+            label: computedValues[`title-${key}`]
+          })),
+          onChange: handleTabChange
+        }
+      ),
+      /* @__PURE__ */ jsx(VefScrollArea, { css: scrollbarStyle, onScroll: handleScroll, children: schema.map(
+        ({ key, rows }) => /* @__PURE__ */ jsx(
+          VefFormGroup,
+          {
+            ref: (dom) => {
+              groupDomsRef.current[key] = dom;
+            },
+            disabled: computedValues[`disabled-${key}`],
+            rows,
+            title: computedValues[`title-${key}`]
+          },
+          key
+        )
+      ) })
+    ] });
+  }
+  const groupNodes = schema.map(
+    ({ key, rows }) => /* @__PURE__ */ jsx(
+      VefFormGroup,
+      {
+        disabled: computedValues[`disabled-${key}`],
+        rows,
+        title: computedValues[`title-${key}`]
+      },
+      key
+    )
+  );
+  if (height === "full") {
+    return /* @__PURE__ */ jsx(VefScrollArea, { onScroll: handleScroll, children: groupNodes });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: groupNodes });
+}
+const VefFormContent = memo(
+  VefFormContentBase,
+  (prevProps, nextProps) => isDeepEqual(
+    omit(prevProps, ["schema"]),
+    omit(nextProps, ["schema"])
+  )
+);
+
+export { VefFormContent 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 */

package/es/vef-form/components/form-field.js

@@ -1,3 +1,23 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{VefError as r}from"@vef-framework/shared";import{useMemo as o}from"react";import{fieldMap as t}from"./fields/index.js";function VefFormField(n){const{name:f,componentProps:{type:i}}=n,m=o((()=>{if("Hidden"===i)return()=>null;const e=t[i];if(!e)throw new r(-9,`Unknown form field type: "${i}", please check the type of "${f}" field.`);return e}),[f,i]);return e(m,{...n})}export{VefFormField as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import { fieldMap } from './fields/index.js';
+
+function VefFormField(props) {
+  const { name, componentProps: { type } } = props;
+  const FormFieldComponent = useMemo(() => {
+    if (type === "Hidden") {
+      return () => null;
+    }
+    const Component = fieldMap[type];
+    if (!Component) {
+      throw new VefError(-9, `Unknown form field type: "${type}", please check the type of "${name}" field.`);
+    }
+    return Component;
+  }, [name, type]);
+  return /* @__PURE__ */ jsx(FormFieldComponent, { ...props });
+}
+
+export { VefFormField 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 */

package/es/vef-form/components/form-group.js

@@ -1,6 +1,15 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{jsxs as e,jsx as o}from"@emotion/react/jsx-runtime";import{css as r}from"@emotion/react";import{themeVariables as t,isDeepEqual as a,omit as m}from"@vef-framework/shared";import{useMemo as i,memo as s,forwardRef as d}from"react";import l from"../../vef-empty-placeholder/index.js";import n from"../../vef-title/index.js";import{useComputedValues as f}from"../hooks/use-computed-values.js";import p from"./form-row.js";const u=r`
-  margin-bottom: ${t.margin};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables, isDeepEqual, omit } from '@vef-framework/shared';
+import { useMemo, memo, forwardRef } from 'react';
+import VefEmptyPlaceholder from '../../vef-empty-placeholder/index.js';
+import VefTitle from '../../vef-title/index.js';
+import { useComputedValues } from '../hooks/use-computed-values.js';
+import VefFormRow from './form-row.js';
+
+const groupStyle = css`
+  margin-bottom: ${themeVariables.margin};
 
   &:last-child {
     margin-bottom: 0;
@@ -9,5 +18,56 @@ import{jsxs as e,jsx as o}from"@emotion/react/jsx-runtime";import{css as r}from"
   .vef-form-group-content {
     padding: 0 2px;
   }
-`;const c=s(d((function VefFormGroupBase({title:r,disabled:t,rows:a},m){const s=f([...a.map((({key:e,show:o})=>({key:`show-${e}`,rawValue:o,defaultValue:!0}))),...a.map((({key:e,disabled:o})=>({key:`disabled-${e}`,rawValue:o,defaultValue:t})))],!0),d=i((()=>a.filter((({key:e})=>s[`show-${e}`]))),[s,a]);return e("div",{ref:m,css:u,children:[r&&o(n,{showBottomLine:!0,showLeftBar:!0,level:4,children:r}),o("div",{className:"vef-form-group-content",children:0===d.length?o(l,{description:"空表单组"}):d.map((({key:e,autoExpand:r,columns:t})=>o(p,{autoExpand:r,columns:t,disabled:s[`disabled-${e}`],rowKey:e},e)))})]})})),((e,o)=>a(m(e,["rows"]),m(o,["rows"]))));c.displayName="VefFormGroup";export{c as default};
+`;
+function VefFormGroupBase({
+  title,
+  disabled,
+  rows
+}, groupRef) {
+  const computedValues = useComputedValues(
+    [
+      ...rows.map(({ key, show }) => ({
+        key: `show-${key}`,
+        rawValue: show,
+        defaultValue: true
+      })),
+      ...rows.map(({ key, disabled: rowDisabled }) => ({
+        key: `disabled-${key}`,
+        rawValue: rowDisabled,
+        defaultValue: disabled
+      }))
+    ],
+    true
+  );
+  const showedRows = useMemo(() => rows.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, rows]);
+  return /* @__PURE__ */ jsxs("div", { ref: groupRef, css: groupStyle, children: [
+    title && /* @__PURE__ */ jsx(VefTitle, { showBottomLine: true, showLeftBar: true, level: 4, children: title }),
+    /* @__PURE__ */ jsx("div", { className: "vef-form-group-content", children: showedRows.length === 0 ? /* @__PURE__ */ jsx(VefEmptyPlaceholder, { description: "\u7A7A\u8868\u5355\u7EC4" }) : showedRows.map(
+      ({
+        key,
+        autoExpand: rowAutoExpand,
+        columns
+      }) => /* @__PURE__ */ jsx(
+        VefFormRow,
+        {
+          autoExpand: rowAutoExpand,
+          columns,
+          disabled: computedValues[`disabled-${key}`],
+          rowKey: key
+        },
+        key
+      )
+    ) })
+  ] });
+}
+const VefFormGroup = memo(
+  forwardRef(VefFormGroupBase),
+  (prevProps, nextProps) => isDeepEqual(
+    omit(prevProps, ["rows"]),
+    omit(nextProps, ["rows"])
+  )
+);
+VefFormGroup.displayName = "VefFormGroup";
+
+export { VefFormGroup 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 */

package/es/vef-form/components/form-hidden-item.js

@@ -1,3 +1,37 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{Form as t}from"antd";import{memo as o}from"react";import{useComputedValues as m}from"../hooks/use-computed-values.js";const{Item:n}=t;const r=o((function VefFormHiddenItemBase({item:t}){const{name:o,show:r}=t,[a]=m([{key:"show",rawValue:r,defaultValue:!0}]);return a?e(n,{hidden:!0,name:o,children:e("input",{type:"hidden"})}):null}),(()=>!1));export{r as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Form } from 'antd';
+import { memo } from 'react';
+import { useComputedValues } from '../hooks/use-computed-values.js';
+
+const { Item } = Form;
+function VefFormHiddenItemBase({
+  item
+}) {
+  const { name, show } = item;
+  const [showValue] = useComputedValues([
+    {
+      key: "show",
+      rawValue: show,
+      defaultValue: true
+    }
+  ]);
+  if (!showValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Item,
+    {
+      hidden: true,
+      name,
+      children: /* @__PURE__ */ jsx("input", { type: "hidden" })
+    }
+  );
+}
+const VefFormHiddenItem = memo(
+  VefFormHiddenItemBase,
+  () => false
+);
+
+export { VefFormHiddenItem 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 */

package/es/vef-form/components/form-item.js

@@ -1,3 +1,80 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{useContextDisabled as r}from"@vef-framework/hooks";import{isArray as a}from"@vef-framework/shared";import{Form as o}from"antd";import{memo as l}from"react";import{useComputedValues as t}from"../hooks/use-computed-values.js";import m from"./form-field.js";const{Item:s}=o;const i=l((function VefFormItemBase({item:o,disabled:l}){const{name:i,show:u,disabled:d,label:f,tip:n,rules:p,virtual:b,...c}=o,k=r(),[w,V,h,v,y]=t([{key:"show",rawValue:u,defaultValue:!0},{key:"disabled",rawValue:d,defaultValue:l},{key:"label",rawValue:f},{key:"tip",rawValue:n},{key:"rules",rawValue:p}]);if(!w)return null;const j=a(y)?y.flatMap((e=>e(o))):void 0;return e(s,{label:h,name:i,preserve:!1,rules:j,tooltip:v,children:e(m,{componentProps:c,disabled:k||V,label:h,name:i})})}),((e,r)=>e.disabled===r.disabled));export{i as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useContextDisabled } from '@vef-framework/hooks';
+import { isArray } from '@vef-framework/shared';
+import { Form } from 'antd';
+import { memo } from 'react';
+import { useComputedValues } from '../hooks/use-computed-values.js';
+import VefFormField from './form-field.js';
+
+const { Item } = Form;
+function VefFormItemBase({
+  item,
+  disabled
+}) {
+  const {
+    name,
+    show,
+    disabled: itemDisabled,
+    label,
+    tip,
+    rules,
+    virtual: _,
+    ...componentProps
+  } = item;
+  const formDisabled = useContextDisabled();
+  const [showValue, disabledValue, labelValue, tipValue, rulesValue] = useComputedValues([
+    {
+      key: "show",
+      rawValue: show,
+      defaultValue: true
+    },
+    {
+      key: "disabled",
+      rawValue: itemDisabled,
+      defaultValue: disabled
+    },
+    {
+      key: "label",
+      rawValue: label
+    },
+    {
+      key: "tip",
+      rawValue: tip
+    },
+    {
+      key: "rules",
+      rawValue: rules
+    }
+  ]);
+  if (!showValue) {
+    return null;
+  }
+  const ruleObjects = isArray(rulesValue) ? rulesValue.flatMap((rule) => rule(item)) : void 0;
+  return /* @__PURE__ */ jsx(
+    Item,
+    {
+      label: labelValue,
+      name,
+      preserve: false,
+      rules: ruleObjects,
+      tooltip: tipValue,
+      children: /* @__PURE__ */ jsx(
+        VefFormField,
+        {
+          componentProps,
+          disabled: formDisabled || disabledValue,
+          label: labelValue,
+          name
+        }
+      )
+    }
+  );
+}
+const VefFormItem = memo(
+  VefFormItemBase,
+  (prevProps, nextProps) => prevProps.disabled === nextProps.disabled
+);
+
+export { VefFormItem 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 */

package/es/vef-form/components/form-row.js

@@ -1,3 +1,99 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{jsxs as e,Fragment as o,jsx as s}from"@emotion/react/jsx-runtime";import{isDeepEqual as t,omit as r}from"@vef-framework/shared";import{useMemo as m,memo as i}from"react";import a from"../../vef-grid/index.js";import n from"../../vef-grid-item/index.js";import{useColumnsLayout as l}from"../hooks/use-columns-layout.js";import{useComputedValues as d}from"../hooks/use-computed-values.js";import{useFormContext as u}from"../hooks/use-form-context.js";import f from"./form-hidden-item.js";import p from"./form-item.js";const c=i((function VefFormRowBase({rowKey:t,columns:r,disabled:i,autoExpand:c}){const{layoutMode:h,autoExpand:k,labelPosition:y,labelWidth:x}=u(),b="top"===y?240:240+(x??80),[g,j]=m((()=>{const e=[],o=[];for(const s of r){const{items:t,...r}=s,m=[];for(const o of t){const{type:s}=o;"Hidden"===s?e.push(o):m.push(o)}m.length>0&&o.push({...r,items:m})}return[e,o]}),[r]),w=d([...j.map((({key:e,show:o})=>({key:`show-${e}`,rawValue:o,defaultValue:!0}))),...j.map((({key:e,disabled:o})=>({key:`disabled-${e}`,rawValue:o,defaultValue:i})))],!0),v=m((()=>r.filter((({key:e})=>w[`show-${e}`]))),[w,r]),V=l(t,v,h,c??k);return e(o,{children:[g.map((e=>{const{name:o}=e;return s(f,{item:e},o)})),v.length>0&&s(a,{baseWidth:b,gap:[0,"large"],children:v.map((e=>{const o={};if("responsive"===h){const s=V;o.xs=s.xs[e.key],o.sm=s.sm[e.key],o.md=s.md[e.key],o.lg=s.lg[e.key],o.xl=s.xl[e.key],o.xxl=s.xxl[e.key]}else{const s=V;o.span=s[e.key]}return s(n,{...o,children:e.items.map((o=>s(p,{disabled:i||w[`disabled-${e.key}`],item:o},o.name)))},e.key)}))})]})}),((e,o)=>t(r(e,["columns"]),r(o,["columns"]))));export{c as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { isDeepEqual, omit } from '@vef-framework/shared';
+import { useMemo, memo } from 'react';
+import VefGrid from '../../vef-grid/index.js';
+import VefGridItem from '../../vef-grid-item/index.js';
+import { useColumnsLayout } from '../hooks/use-columns-layout.js';
+import { useComputedValues } from '../hooks/use-computed-values.js';
+import { useFormContext } from '../hooks/use-form-context.js';
+import VefFormHiddenItem from './form-hidden-item.js';
+import VefFormItem from './form-item.js';
+
+const formItemMinWidth = 240;
+function VefFormRowBase({
+  rowKey,
+  columns,
+  disabled,
+  autoExpand: rowAutoExpand
+}) {
+  const {
+    layoutMode,
+    autoExpand: formAutoExpand,
+    labelPosition,
+    labelWidth
+  } = useFormContext();
+  const formItemMinWidthToUse = labelPosition === "top" ? formItemMinWidth : formItemMinWidth + (labelWidth ?? 80);
+  const [hiddenItems, filteredColumns] = 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(
+    [
+      ...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 = useMemo(() => columns.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, columns]);
+  const layout = useColumnsLayout(rowKey, showedColumns, layoutMode, rowAutoExpand ?? formAutoExpand);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hiddenItems.map((item) => {
+      const { name } = item;
+      return /* @__PURE__ */ jsx(VefFormHiddenItem, { item }, name);
+    }),
+    showedColumns.length > 0 && /* @__PURE__ */ jsx(VefGrid, { 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__ */ jsx(VefGridItem, { ...layoutProps, children: column.items.map((item) => /* @__PURE__ */ jsx(VefFormItem, { disabled: disabled || computedValues[`disabled-${column.key}`], item }, item.name)) }, column.key);
+    }) })
+  ] });
+}
+const VefFormRow = memo(
+  VefFormRowBase,
+  (prevProps, nextProps) => isDeepEqual(
+    omit(prevProps, ["columns"]),
+    omit(nextProps, ["columns"])
+  )
+);
+
+export { VefFormRow 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 */

package/es/vef-form/event.js

@@ -1,3 +1,45 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{createEventEmitter as e}from"@vef-framework/shared";var t,__typeError=e=>{throw TypeError(e)},__privateGet=(e,t,a)=>(((e,t,a)=>{t.has(e)||__typeError("Cannot "+a)})(e,t,"read from private field"),a?a.call(e):t.get(e));const a=Symbol("change"),o=Symbol("submitResult");class FormEventBus{constructor(){var a,o,s;a=this,o=t,s=e(),o.has(a)?__typeError("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(a):o.set(a,s)}clear(){__privateGet(this,t).all.clear()}onChange(e){__privateGet(this,t).on(a,e)}offChange(e){__privateGet(this,t).off(a,e)}emitChange(e){__privateGet(this,t).emit(a,e)}onSubmitResult(e){__privateGet(this,t).on(o,e)}offSubmitResult(e){__privateGet(this,t).off(o,e)}emitSubmitResult(e){__privateGet(this,t).emit(o,e)}}t=new WeakMap;export{FormEventBus};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { createEventEmitter } from '@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, 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();
+
+export { 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/es/vef-form/helper.js

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:36.991Z, made by Venus. */
-import{isFunction as e,isIternalFunction as r,isExpression as u,compileDynamicFn as t}from"@vef-framework/shared";function computeValue(n,o,f,a){if(e(n)&&!r(n))return n(o,f);if(u(n)){return t(n,"values","scene",`return ${n.expression}`)(o,f)}return n??a}export{computeValue};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { isFunction, isIternalFunction, isExpression, compileDynamicFn } from '@vef-framework/shared';
+
+function computeValue(value, values, scene, defaultValue) {
+  if (isFunction(value) && !isIternalFunction(value)) {
+    return value(values, scene);
+  }
+  if (isExpression(value)) {
+    const fn = compileDynamicFn(value, "values", "scene", `return ${value.expression}`);
+    return fn(values, scene);
+  }
+  return value ?? defaultValue;
+}
+
+export { 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 */