@vef-framework/components 1.0.127 → 1.0.129

package/esm/vef-form/components/fields/textarea.js

@@ -1,110 +1,2 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { VefError, isString, isFunction } from '@vef-framework/shared';
-import { useMemo } from 'react';
-import VefTextarea from '../../../vef-textarea/index.js';
-import { useComputedValues } from '../../hooks/use-computed-values.js';
-import { useFormStore } from '../../store.js';
-
-"use strict";
-function Textarea({
-  label,
-  disabled,
-  value,
-  onChange,
-  componentProps
-}) {
-  if (componentProps.type !== "Textarea") {
-    throw new VefError(-9, `Oops! Something went wrong. The type of the form field is not "Textarea", but rendered.`);
-  }
-  const {
-    onChange: onValueChange,
-    onEnterKeyPress,
-    onFocus,
-    onBlur,
-    maxLength,
-    showCount,
-    clearable = false,
-    placeholder
-  } = componentProps;
-  const [form, scene, setValues] = useFormStore((state) => [state.form, state.scene, state.setValues]);
-  const [placeholderValue, maxLengthValue] = useComputedValues([
-    {
-      key: "placeholder",
-      rawValue: placeholder,
-      defaultValue: label ? isString(label) ? `请输入${label}` : "请输入" : void 0
-    },
-    {
-      key: "maxLength",
-      rawValue: maxLength
-    }
-  ]);
-  const events = useMemo(() => {
-    const events2 = {};
-    if (isFunction(onFocus)) {
-      events2.onFocus = (value2) => {
-        const values = form.getFieldsValue();
-        onFocus(value2, {
-          scene,
-          values,
-          setValues
-        });
-      };
-    }
-    if (isFunction(onBlur)) {
-      events2.onBlur = (value2) => {
-        const values = form.getFieldsValue();
-        onBlur(value2, {
-          scene,
-          values,
-          setValues
-        });
-      };
-    }
-    events2.onChange = (value2) => {
-      onChange?.(value2);
-      if (isFunction(onValueChange)) {
-        const values = form.getFieldsValue();
-        onValueChange(value2, {
-          scene,
-          values,
-          setValues
-        });
-      }
-    };
-    if (isFunction(onEnterKeyPress)) {
-      events2.onPressEnter = (value2) => {
-        const values = form.getFieldsValue();
-        onEnterKeyPress(value2, {
-          scene,
-          values,
-          setValues
-        });
-      };
-    }
-    return events2;
-  }, [
-    form,
-    onBlur,
-    onChange,
-    onEnterKeyPress,
-    onFocus,
-    onValueChange,
-    scene,
-    setValues
-  ]);
-  return /* @__PURE__ */ jsx(
-    VefTextarea,
-    {
-      clearable,
-      disabled,
-      maxLength: maxLengthValue,
-      placeholder: placeholderValue,
-      showCount,
-      value,
-      ...events
-    }
-  );
-}
-
-export { Textarea as default };
+import{jsx as y}from"@emotion/react/jsx-runtime";import{VefError as C,isString as T,isFunction as n}from"@vef-framework/shared";import{useMemo as S}from"react";import E from"../../../vef-textarea/index.js";import{useComputedValues as L}from"../../hooks/use-computed-values.js";import{useFormStore as P}from"../../store.js";function k({label:l,disabled:h,value:f,onChange:d,componentProps:p}){if(p.type!=="Textarea")throw new C(-9,'Oops! Something went wrong. The type of the form field is not "Textarea", but rendered.');const{onChange:u,onEnterKeyPress:i,onFocus:m,onBlur:c,maxLength:g,showCount:V,clearable:F=!1,placeholder:w}=p,[t,r,a]=P(e=>[e.form,e.scene,e.setValues]),[x,b]=L([{key:"placeholder",rawValue:w,defaultValue:l?T(l)?`请输入${l}`:"请输入":void 0},{key:"maxLength",rawValue:g}]),v=S(()=>{const e={};return n(m)&&(e.onFocus=o=>{const s=t.getFieldsValue();m(o,{scene:r,values:s,setValues:a})}),n(c)&&(e.onBlur=o=>{const s=t.getFieldsValue();c(o,{scene:r,values:s,setValues:a})}),e.onChange=o=>{if(d?.(o),n(u)){const s=t.getFieldsValue();u(o,{scene:r,values:s,setValues:a})}},n(i)&&(e.onPressEnter=o=>{const s=t.getFieldsValue();i(o,{scene:r,values:s,setValues:a})}),e},[t,c,d,i,m,u,r,a]);return y(E,{clearable:F,disabled:h,maxLength:b,placeholder:x,showCount:V,value:f,...v})}export{k as default};

package/esm/vef-form/components/fields/tree-select.js

@@ -1,235 +1,2 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { VefError, isString, isFunction } from '@vef-framework/shared';
-import { useMemo } from 'react';
-import VefTreeSelect from '../../../vef-tree-select/index.js';
-import { useComputedValues } from '../../hooks/use-computed-values.js';
-import { useFormStore } from '../../store.js';
-
-"use strict";
-function TreeSelect({
-  label,
-  disabled,
-  value,
-  onChange,
-  componentProps
-}) {
-  if (componentProps.type !== "TreeSingleSelect" && componentProps.type !== "TreeMultipleSelect") {
-    throw new VefError(-9, `Oops! Something went wrong. The type of the form field is not "TreeSelect", but rendered.`);
-  }
-  const {
-    onChange: onValueChange,
-    onFocus,
-    onBlur,
-    onClear,
-    onSelect,
-    onDeselect,
-    // eslint-disable-next-line ts/ban-ts-comment
-    // @ts-expect-error
-    maxCount,
-    clearable = false,
-    filterable,
-    filterFromRemote,
-    placeholder,
-    keywordKey,
-    valuesKey,
-    fallbackOptionsApi,
-    fallbackOptionsApiParams,
-    resolveFallbackOptions,
-    labelKey,
-    valueKey,
-    descriptionKey,
-    disabledKey,
-    childrenKey,
-    defaultToFirst,
-    api,
-    apiParams,
-    apiEnabled,
-    data,
-    dataDictionaryKey,
-    placeholderData,
-    keepPreviousData,
-    staleTime,
-    onFetched
-  } = componentProps;
-  const [
-    placeholderValue,
-    maxCountValue,
-    keywordKeyValue,
-    valuesKeyValue,
-    fallbackOptionsApiValue,
-    fallbackOptionsApiParamsValue,
-    resolveFallbackOptionsValue,
-    apiValue,
-    apiParamsValue,
-    apiEnabledValue,
-    dataValue,
-    dataDictionaryKeyValue
-  ] = useComputedValues([
-    {
-      key: "placeholder",
-      rawValue: placeholder,
-      defaultValue: label ? isString(label) ? `请选择${label}` : "请选择" : void 0
-    },
-    {
-      key: "maxCount",
-      rawValue: maxCount
-    },
-    {
-      key: "keywordKey",
-      rawValue: keywordKey
-    },
-    {
-      key: "valuesKey",
-      rawValue: valuesKey
-    },
-    {
-      key: "fallbackOptionsApi",
-      rawValue: fallbackOptionsApi
-    },
-    {
-      key: "fallbackOptionsApiParams",
-      rawValue: fallbackOptionsApiParams
-    },
-    {
-      key: "resolveFallbackOptions",
-      rawValue: resolveFallbackOptions
-    },
-    {
-      key: "api",
-      rawValue: api
-    },
-    {
-      key: "apiParams",
-      rawValue: apiParams
-    },
-    {
-      key: "apiEnabled",
-      rawValue: apiEnabled
-    },
-    {
-      key: "data",
-      rawValue: data
-    },
-    {
-      key: "dataDictionaryKey",
-      rawValue: dataDictionaryKey
-    }
-  ]);
-  const [form, scene, setValues] = useFormStore((state) => [state.form, state.scene, state.setValues]);
-  const events = useMemo(() => {
-    const events2 = {};
-    if (isFunction(onFocus)) {
-      events2.onFocus = (value2, option) => {
-        const values = form.getFieldsValue();
-        onFocus(value2, {
-          scene,
-          values,
-          setValues,
-          option
-        });
-      };
-    }
-    if (isFunction(onBlur)) {
-      events2.onBlur = (value2, option) => {
-        const values = form.getFieldsValue();
-        onBlur(value2, {
-          scene,
-          values,
-          setValues,
-          option
-        });
-      };
-    }
-    if (clearable && isFunction(onClear)) {
-      events2.onClear = () => {
-        onClear({
-          scene,
-          values: form.getFieldsValue(),
-          setValues
-        });
-      };
-    }
-    events2.onChange = (value2, option) => {
-      onChange?.(value2);
-      if (isFunction(onValueChange)) {
-        const values = form.getFieldsValue();
-        onValueChange(value2, {
-          scene,
-          values,
-          setValues,
-          option
-        });
-      }
-    };
-    if (isFunction(onSelect)) {
-      events2.onSelect = (value2, option) => {
-        onSelect(value2, {
-          scene,
-          values: form.getFieldsValue(),
-          setValues,
-          option
-        });
-      };
-    }
-    if (isFunction(onDeselect)) {
-      events2.onDeselect = (value2, option) => {
-        onDeselect(value2, {
-          scene,
-          values: form.getFieldsValue(),
-          setValues,
-          option
-        });
-      };
-    }
-    return events2;
-  }, [
-    clearable,
-    form,
-    onBlur,
-    onChange,
-    onClear,
-    onDeselect,
-    onFocus,
-    onSelect,
-    onValueChange,
-    scene,
-    setValues
-  ]);
-  return /* @__PURE__ */ jsx(
-    VefTreeSelect,
-    {
-      api: apiValue,
-      apiEnabled: apiEnabledValue,
-      apiParams: apiParamsValue,
-      childrenKey,
-      clearable,
-      data: dataValue,
-      dataDictionaryKey: dataDictionaryKeyValue,
-      defaultToFirst,
-      descriptionKey,
-      disabled,
-      disabledKey,
-      fallbackOptionsApi: fallbackOptionsApiValue,
-      fallbackOptionsApiParams: fallbackOptionsApiParamsValue,
-      filterable,
-      filterFromRemote,
-      keepPreviousData,
-      keywordKey: keywordKeyValue,
-      labelKey,
-      maxCount: maxCountValue,
-      multiple: componentProps.type === "TreeMultipleSelect",
-      placeholder: placeholderValue,
-      placeholderData,
-      resolveFallbackOptions: resolveFallbackOptionsValue,
-      staleTime,
-      value,
-      valueKey,
-      valuesKey: valuesKeyValue,
-      onFetched,
-      ...events
-    }
-  );
-}
-
-export { TreeSelect as default };
+import{jsx as te}from"@emotion/react/jsx-runtime";import{VefError as oe,isString as re,isFunction as s}from"@vef-framework/shared";import{useMemo as se}from"react";import ie from"../../../vef-tree-select/index.js";import{useComputedValues as ne}from"../../hooks/use-computed-values.js";import{useFormStore as ue}from"../../store.js";function pe({label:u,disabled:b,value:v,onChange:k,componentProps:n}){if(n.type!=="TreeSingleSelect"&&n.type!=="TreeMultipleSelect")throw new oe(-9,'Oops! Something went wrong. The type of the form field is not "TreeSelect", but rendered.');const{onChange:p,onFocus:c,onBlur:d,onClear:y,onSelect:m,onDeselect:f,maxCount:w,clearable:V=!1,filterable:K,filterFromRemote:F,placeholder:h,keywordKey:g,valuesKey:O,fallbackOptionsApi:S,fallbackOptionsApiParams:C,resolveFallbackOptions:D,labelKey:P,valueKey:T,descriptionKey:A,disabledKey:x,childrenKey:E,defaultToFirst:M,api:B,apiParams:R,apiEnabled:$,data:j,dataDictionaryKey:q,placeholderData:z,keepPreviousData:G,staleTime:H,onFetched:I}=n,[J,L,N,Q,U,W,X,Y,Z,_,ee,ae]=ne([{key:"placeholder",rawValue:h,defaultValue:u?re(u)?`请选择${u}`:"请选择":void 0},{key:"maxCount",rawValue:w},{key:"keywordKey",rawValue:g},{key:"valuesKey",rawValue:O},{key:"fallbackOptionsApi",rawValue:S},{key:"fallbackOptionsApiParams",rawValue:C},{key:"resolveFallbackOptions",rawValue:D},{key:"api",rawValue:B},{key:"apiParams",rawValue:R},{key:"apiEnabled",rawValue:$},{key:"data",rawValue:j},{key:"dataDictionaryKey",rawValue:q}]),[t,o,r]=ue(e=>[e.form,e.scene,e.setValues]),le=se(()=>{const e={};return s(c)&&(e.onFocus=(a,l)=>{const i=t.getFieldsValue();c(a,{scene:o,values:i,setValues:r,option:l})}),s(d)&&(e.onBlur=(a,l)=>{const i=t.getFieldsValue();d(a,{scene:o,values:i,setValues:r,option:l})}),V&&s(y)&&(e.onClear=()=>{y({scene:o,values:t.getFieldsValue(),setValues:r})}),e.onChange=(a,l)=>{if(k?.(a),s(p)){const i=t.getFieldsValue();p(a,{scene:o,values:i,setValues:r,option:l})}},s(m)&&(e.onSelect=(a,l)=>{m(a,{scene:o,values:t.getFieldsValue(),setValues:r,option:l})}),s(f)&&(e.onDeselect=(a,l)=>{f(a,{scene:o,values:t.getFieldsValue(),setValues:r,option:l})}),e},[V,t,d,k,y,f,c,m,p,o,r]);return te(ie,{api:Y,apiEnabled:_,apiParams:Z,childrenKey:E,clearable:V,data:ee,dataDictionaryKey:ae,defaultToFirst:M,descriptionKey:A,disabled:b,disabledKey:x,fallbackOptionsApi:U,fallbackOptionsApiParams:W,filterable:K,filterFromRemote:F,keepPreviousData:G,keywordKey:N,labelKey:P,maxCount:L,multiple:n.type==="TreeMultipleSelect",placeholder:J,placeholderData:z,resolveFallbackOptions:X,staleTime:H,value:v,valueKey:T,valuesKey:Q,onFetched:I,...le})}export{pe as default};

package/esm/vef-form/components/form-actions.js

@@ -1,59 +1,4 @@
 "use strict";
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { CheckOutlined } from '@ant-design/icons';
-import { css } from '@emotion/react';
-import { themeVariables, omit } from '@vef-framework/shared';
-import { Form } from 'antd';
-import { memo } from 'react';
-import VefButton from '../../vef-button/index.js';
-import VefFlex from '../../vef-flex/index.js';
-import { useFormStore } from '../store.js';
-
-"use strict";
-const { Item } = Form;
-const defaultSubmissionButtonConfig = {
-  text: "提交",
-  icon: /* @__PURE__ */ jsx(CheckOutlined, {})
-};
-const defaultResetButtonConfig = {
-  text: "重置"
-};
-const buttonContainerStyle = css`
-  padding: ${themeVariables.padding} 0;
-`;
-function VefFormActionsBase({
-  submissionButton = defaultSubmissionButtonConfig,
-  resetButton = defaultResetButtonConfig,
-  handleReset
-}) {
-  const [isLoading, showActionButtons] = useFormStore((state) => [state.isLoading, state.showActionButtons]);
-  if (!showActionButtons || !submissionButton && !resetButton) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Item, { children: /* @__PURE__ */ jsxs(VefFlex, { css: buttonContainerStyle, gap: "medium", justify: "flex-end", children: [
-    resetButton && /* @__PURE__ */ jsx(
-      VefButton,
-      {
-        color: "default",
-        variant: "filled",
-        onClick: handleReset,
-        ...omit(resetButton, ["text"]),
-        children: resetButton.text
-      }
-    ),
-    submissionButton && /* @__PURE__ */ jsx(
-      VefButton,
-      {
-        color: "primary",
-        loading: isLoading,
-        type: "submit",
-        ...omit(submissionButton, ["text"]),
-        children: submissionButton.text
-      }
-    )
-  ] }) });
-}
-const VefFormActions = memo(VefFormActionsBase);
-VefFormActions.displayName = "VefFormActions";
-
-export { VefFormActions as default };
+import{jsx as i,jsxs as a}from"@emotion/react/jsx-runtime";import{CheckOutlined as d}from"@ant-design/icons";import{css as p}from"@emotion/react";import{themeVariables as f,omit as e}from"@vef-framework/shared";import{Form as u}from"antd";import{memo as x}from"react";import m from"../../vef-button/index.js";import h from"../../vef-flex/index.js";import{useFormStore as g}from"../store.js";const{Item:y}=u,b={text:"提交",icon:i(d,{})},j={text:"重置"},B=p`
+  padding: ${f.padding} 0;
+`;function F({submissionButton:t=b,resetButton:o=j,handleReset:n}){const[c,l]=g(r=>[r.isLoading,r.showActionButtons]);return!l||!t&&!o?null:i(y,{children:a(h,{css:B,gap:"medium",justify:"flex-end",children:[o&&i(m,{color:"default",variant:"filled",onClick:n,...e(o,["text"]),children:o.text}),t&&i(m,{color:"primary",loading:c,type:"submit",...e(t,["text"]),children:t.text})]})})}const s=x(F);s.displayName="VefFormActions";export{s as default};

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

@@ -1,147 +1,5 @@
 "use strict";
-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';
-
-"use strict";
-const scrollbarStyle = css`
+import{jsx as o,jsxs as V,Fragment as C}from"@emotion/react/jsx-runtime";import{css as S}from"@emotion/react";import{debounce as x,styles as j,isDeepEqual as B,omit as $}from"@vef-framework/shared";import{useMemo as y,useRef as F,useState as I,useCallback as R,useEffect as E,memo as M}from"react";import O from"../../vef-empty-placeholder/index.js";import T from"../../vef-flex/index.js";import b from"../../vef-scroll-area/index.js";import w from"../../vef-tabs/index.js";import{useComputedValues as q}from"../hooks/use-computed-values.js";import{useFormStore as A}from"../store.js";import m from"./form-group.js";const D=S`
   flex: auto;
   min-height: 0;
-`;
-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: "空表单" });
-  }
-  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 };
+`;function H({schema:i,showTabs:s,height:c}){const r=q([...i.map(({key:e,title:t})=>({key:`title-${e}`,rawValue:t})),...i.map(({key:e,show:t})=>({key:`show-${e}`,rawValue:t,defaultValue:!0})),...i.map(({key:e,disabled:t})=>({key:`disabled-${e}`,rawValue:t,defaultValue:!1}))],!0),a=y(()=>i.filter(({key:e})=>r[`show-${e}`]),[r,i]),n=F({}),[k,u]=I(a[0]?.key??0),g=R(e=>{n.current[e]?.scrollIntoView({behavior:"smooth",block:"start",inline:"start"}),u(e)},[]),d=y(()=>s!=="navigation"?void 0:x({delay:60},e=>{const{top:t}=e.target.getBoundingClientRect();for(const[l,h]of Object.entries(n.current))if(h){const{top:v}=h.getBoundingClientRect();v-t<=60&&u(l)}}),[s]),[f]=A(e=>[e.setShowActionButtons]);if(E(()=>{f(a.length>0)},[f,a.length]),a.length===0)return o(O,{description:"空表单"});if(s==="switch"){const e=i.map(({key:t,rows:l})=>({key:`${t}`,label:r[`title-${t}`],destroyInactiveTabPane:!1,children:o(m,{disabled:r[`disabled-${t}`],rows:l})}));return o(w,{items:e})}if(s==="navigation")return V(T,{vertical:!0,css:c==="full"?j.fullHeight:void 0,children:[o(w,{activeKey:`${k}`,items:i.map(({key:e})=>({key:`${e}`,label:r[`title-${e}`]})),onChange:g}),o(b,{css:D,onScroll:d,children:i.map(({key:e,rows:t})=>o(m,{ref:l=>{n.current[e]=l},disabled:r[`disabled-${e}`],rows:t,title:r[`title-${e}`]},e))})]});const p=i.map(({key:e,rows:t})=>o(m,{disabled:r[`disabled-${e}`],rows:t,title:r[`title-${e}`]},e));return c==="full"?o(b,{onScroll:d,children:p}):o(C,{children:p})}const K=M(H,(i,s)=>B($(i,["schema"]),$(s,["schema"])));export{K as default};

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

@@ -1,23 +1,2 @@
 "use strict";
-import { jsx } from '@emotion/react/jsx-runtime';
-import { VefError } from '@vef-framework/shared';
-import { useMemo } from 'react';
-import { fieldMap } from './fields/index.js';
-
-"use strict";
-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 };
+import{jsx as f}from"@emotion/react/jsx-runtime";import{VefError as i}from"@vef-framework/shared";import{useMemo as m}from"react";import{fieldMap as p}from"./fields/index.js";function s(r){const{name:t,componentProps:{type:e}}=r,n=m(()=>{if(e==="Hidden")return()=>null;const o=p[e];if(!o)throw new i(-9,`Unknown form field type: "${e}", please check the type of "${t}" field.`);return o},[t,e]);return f(n,{...r})}export{s as default};

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

@@ -1,16 +1,6 @@
 "use strict";
-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';
-
-"use strict";
-const groupStyle = css`
-  margin-bottom: ${themeVariables.margin};
+import{jsxs as f,jsx as m}from"@emotion/react/jsx-runtime";import{css as u}from"@emotion/react";import{themeVariables as c,isDeepEqual as h,omit as l}from"@vef-framework/shared";import{useMemo as w,memo as b,forwardRef as y}from"react";import g from"../../vef-empty-placeholder/index.js";import V from"../../vef-title/index.js";import{useComputedValues as k}from"../hooks/use-computed-values.js";import v from"./form-row.js";const x=u`
+  margin-bottom: ${c.margin};
 
   &:last-child {
     margin-bottom: 0;
@@ -19,55 +9,4 @@ const groupStyle = css`
   .vef-form-group-content {
     padding: 0 2px;
   }
-`;
-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: "空表单组" }) : 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 };
+`;function $({title:r,disabled:t,rows:s},n){const a=k([...s.map(({key:o,show:e})=>({key:`show-${o}`,rawValue:e,defaultValue:!0})),...s.map(({key:o,disabled:e})=>({key:`disabled-${o}`,rawValue:e,defaultValue:t}))],!0),i=w(()=>s.filter(({key:o})=>a[`show-${o}`]),[a,s]);return f("div",{ref:n,css:x,children:[r&&m(V,{showBottomLine:!0,showLeftBar:!0,level:4,children:r}),m("div",{className:"vef-form-group-content",children:i.length===0?m(g,{description:"空表单组"}):i.map(({key:o,autoExpand:e,columns:p})=>m(v,{autoExpand:e,columns:p,disabled:a[`disabled-${o}`],rowKey:o},o))})]})}const d=b(y($),(r,t)=>h(l(r,["rows"]),l(t,["rows"])));d.displayName="VefFormGroup";export{d as default};