@vef-framework/components 1.0.100 → 1.0.101

package/lib/vef-filter/hooks/use-action-handlers.cjs

@@ -1,3 +1,75 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),t=require("react"),r=require("../store.cjs");exports.useActionHandlers=function useActionHandlers({onBeforeConfirm:i,onConfirm:n,onReset:s}){const[a,o,l,u,c,m,d]=r.useFilterStore((e=>[e.form,e.eventBus,e.getValues,e.initialValues,e.invokeValueChangeHandlers,e.virtualFieldNames,e.setIsLoading]));return{handleReset:t.useCallback((()=>{const e=l();a.resetFields(),c(),o.emitChange(u),s?.(e)}),[o,a,l,u,c,s]),handleConfirm:t.useMemo((()=>{if(e.isFunction(n))return async t=>{d(!0);let r=t;try{e.isFunction(i)&&(r=await i(r));const t=e.omit(r,m);await n(t),o.emitSubmitResult(!0)}catch(e){throw o.emitSubmitResult(!1),e}finally{d(!1)}}}),[i,n,o,d,m]),handleConfirmFailed:t.useCallback((({errorFields:t})=>{o.emitSubmitResult(!1),t.length>0&&e.showWarningMessage(t.flatMap((e=>e.errors)).join(", "))}),[o])}};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 useActionHandlers({
+  onBeforeConfirm,
+  onConfirm,
+  onReset
+}) {
+  const [
+    form,
+    eventBus,
+    getValues,
+    initialValues,
+    invokeValueChangeHandlers,
+    virtualFieldNames,
+    setIsLoading
+  ] = store.useFilterStore((state) => [
+    state.form,
+    state.eventBus,
+    state.getValues,
+    state.initialValues,
+    state.invokeValueChangeHandlers,
+    state.virtualFieldNames,
+    state.setIsLoading
+  ]);
+  const handleReset = react.useCallback(() => {
+    const values = getValues();
+    form.resetFields();
+    invokeValueChangeHandlers();
+    eventBus.emitChange(initialValues);
+    onReset?.(values);
+  }, [eventBus, form, getValues, initialValues, invokeValueChangeHandlers, onReset]);
+  const handleConfirm = react.useMemo(() => {
+    if (!shared.isFunction(onConfirm)) {
+      return;
+    }
+    return async (values) => {
+      setIsLoading(true);
+      let valuesToUse = values;
+      try {
+        if (shared.isFunction(onBeforeConfirm)) {
+          valuesToUse = await onBeforeConfirm(valuesToUse);
+        }
+        const valuesToConfirm = shared.omit(valuesToUse, virtualFieldNames);
+        await onConfirm(valuesToConfirm);
+        eventBus.emitSubmitResult(true);
+      } catch (error) {
+        eventBus.emitSubmitResult(false);
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    };
+  }, [onBeforeConfirm, onConfirm, eventBus, setIsLoading, virtualFieldNames]);
+  const handleConfirmFailed = react.useCallback(({ errorFields }) => {
+    eventBus.emitSubmitResult(false);
+    if (errorFields.length > 0) {
+      shared.showWarningMessage(errorFields.flatMap((field) => field.errors).join(", "));
+    }
+  }, [eventBus]);
+  return {
+    handleReset,
+    handleConfirm,
+    handleConfirmFailed
+  };
+}
+
+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-filter/hooks/use-computed-values.cjs

@@ -1,3 +1,60 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, 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 useComputedValues(o,s=!1){const[a,n]=t.useFilterStore((e=>[e.eventBus,e.getValues])),l=e.useUpdater(),c=n(),f=e.useDeepMemo((()=>o.reduce(((e,r)=>{const{key:t,rawValue:o,defaultValue:s}=r,a=u.computeValue(o,c,s);return e[t]=a,e}),{})),[c,o]);return e.useDeepLayoutEffect((()=>{const e=o.filter((({rawValue:e})=>r.isFunctionOrExpression(e)));if(e.length>0){const handleChange=t=>{for(const o of e){const{key:e,rawValue:s,defaultValue:a}=o,n=f[e],c=u.computeValue(s,t,a);if(!r.isDeepEqual(c,n)){l();break}}};return a.onChange(handleChange),()=>{a.offChange(handleChange)}}}),[f,a,l,o]),s?o.reduce(((e,{key:r})=>(e[r]=f[r],e)),{}):o.map((({key:e})=>f[e]))};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 [eventBus, getValues] = store.useFilterStore((state) => [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, defaultValue);
+    acc[key] = computedValue;
+    return acc;
+  }, {}), [currentValues, 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, defaultValue);
+          if (!shared.isDeepEqual(refreshedValue, computedValue)) {
+            forceUpdate();
+            break;
+          }
+        }
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [computedValues, eventBus, forceUpdate, 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-filter/hooks/use-filter-context.cjs

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, 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({labelPosition:"top",labelAlign:"right",externalLoading:!1,showCollapseButton:!1,handleReset:e.noop}),l=t,n=o;exports.FilterContextProvider=r,exports.useFilterContext=n,exports.useFilterContextSelector=l;
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+const {
+  useContextSelector,
+  useContext,
+  ContextProvider: FilterContextProvider
+} = shared.createSelectableContext({
+  labelPosition: "top",
+  labelAlign: "right",
+  externalLoading: false,
+  showCollapseButton: false,
+  handleReset: shared.noop
+});
+const useFilterContextSelector = useContextSelector;
+const useFilterContext = useContext;
+
+exports.FilterContextProvider = FilterContextProvider;
+exports.useFilterContext = useFilterContext;
+exports.useFilterContextSelector = useFilterContextSelector;
 /*! 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-filter/hooks/use-filter-initialization.cjs

@@ -1,3 +1,42 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),i=require("react");exports.useFilterInitialization=function useFilterInitialization(t,r){return i.useMemo((()=>{const i={...r},n={},a=[];for(const r of t){const{name:t,onChange:s,defaultValue:u,virtual:l}=r;!e.isNullish(u)&&e.isNullish(i[t])&&(i[t]=u),e.isFunction(s)&&(n[t]=s),!0===l&&a.push(t)}return{mergedInitialValues:i,valueChangeHandlers:n,virtualFieldNames:a}}),[])};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useFilterInitialization(schema, initialValues) {
+  return react.useMemo(() => {
+    const mergedInitialValues = {
+      ...initialValues
+    };
+    const valueChangeHandlers = {};
+    const virtualFieldNames = [];
+    for (const item of schema) {
+      const {
+        name,
+        onChange,
+        defaultValue,
+        virtual
+      } = item;
+      if (!shared.isNullish(defaultValue) && shared.isNullish(mergedInitialValues[name])) {
+        mergedInitialValues[name] = defaultValue;
+      }
+      if (shared.isFunction(onChange)) {
+        valueChangeHandlers[name] = onChange;
+      }
+      if (virtual === true) {
+        virtualFieldNames.push(name);
+      }
+    }
+    return {
+      mergedInitialValues,
+      valueChangeHandlers,
+      virtualFieldNames
+    };
+  }, []);
+}
+
+exports.useFilterInitialization = useFilterInitialization;
 /*! 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-filter/hooks/use-filter-instance.cjs

@@ -1,3 +1,31 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../store.cjs");exports.useFilterInstance=function useFilterInstance(s,r){const[u,o,n,i]=t.useFilterStore((e=>[e.form,e.eventBus,e.getValues,e.setValues]));e.useImperativeHandle(s,(()=>({confirm:()=>new Promise(((e,t)=>{const handleResult=s=>{o.offSubmitResult(handleResult),s?e():t(s)};o.onSubmitResult(handleResult),u.submit()})),reset:r,getValues:n,setValues:i})))};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+const store = require('../store.cjs');
+
+function useFilterInstance(ref, reset) {
+  const [form, eventBus, getValues, setValues] = store.useFilterStore((state) => [state.form, state.eventBus, state.getValues, state.setValues]);
+  react.useImperativeHandle(ref, () => ({
+    confirm: () => 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.useFilterInstance = useFilterInstance;
 /*! 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-filter/hooks/use-filter-items.cjs

@@ -1,3 +1,28 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useFilterItems=function useFilterItems(t){return e.useMemo((()=>{const e=[],s=[];for(const r of t){const{advanced:t=!1}=r;t?s.push(r):e.push(r)}return{basicItems:e,advancedItems:s}}),[])};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useFilterItems(schema) {
+  return react.useMemo(() => {
+    const basicItems = [];
+    const advancedItems = [];
+    for (const item of schema) {
+      const { advanced = false } = item;
+      if (advanced) {
+        advancedItems.push(item);
+      } else {
+        basicItems.push(item);
+      }
+    }
+    return {
+      basicItems,
+      advancedItems
+    };
+  }, []);
+}
+
+exports.useFilterItems = useFilterItems;
 /*! 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-filter/hooks/use-filter-values-change.cjs

@@ -1,3 +1,35 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),r=require("react"),t=require("../store.cjs");exports.useFilterValuesChange=function useFilterValuesChange(n){const[s,u]=t.useFilterStore((e=>[e.eventBus,e.invokeValueChangeHandlers])),a=r.useMemo((()=>(e,r)=>{s.emitChange(r)}),[s]);return r.useEffect((()=>{if(e.isFunction(n)){const handleChange=e=>{n(e)};return s.onChange(handleChange),()=>{s.offChange(handleChange)}}}),[s,n]),r.useLayoutEffect((()=>{u()}),[]),{handleValuesChange:a}};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 useFilterValuesChange(onChange) {
+  const [eventBus, invokeValueChangeHandlers] = store.useFilterStore((state) => [state.eventBus, state.invokeValueChangeHandlers]);
+  const handleValuesChange = react.useMemo(() => (_, values) => {
+    eventBus.emitChange(values);
+  }, [eventBus]);
+  react.useEffect(() => {
+    if (shared.isFunction(onChange)) {
+      const handleChange = (values) => {
+        onChange(values);
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [eventBus, onChange]);
+  react.useLayoutEffect(() => {
+    invokeValueChangeHandlers();
+  }, []);
+  return {
+    handleValuesChange
+  };
+}
+
+exports.useFilterValuesChange = useFilterValuesChange;
 /*! 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-filter/hooks/use-label-config.cjs

@@ -1,3 +1,32 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),t=require("react");exports.useLabelConfig=function useLabelConfig(r,o){const i=t.useMemo((()=>{if("top"!==r&&o)return(o<60||o>120)&&e.showWarningMessage("The labelWidth of VefFilter component must be between 60 and 120, otherwise it will be 60 or 120."),Math.min(Math.max(o,60),120)}),[r,o]);return{labelCol:t.useMemo((()=>{if(i)return{flex:`0 0 ${i}px`}}),[i]),labelWidthToUse:i}};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useLabelConfig(labelPosition, labelWidth) {
+  const labelWidthToUse = react.useMemo(() => {
+    if (labelPosition === "top" || !labelWidth) {
+      return;
+    }
+    if (labelWidth < 60 || labelWidth > 120) {
+      shared.showWarningMessage("The labelWidth of VefFilter component must be between 60 and 120, otherwise it will be 60 or 120.");
+    }
+    return Math.min(Math.max(labelWidth, 60), 120);
+  }, [labelPosition, labelWidth]);
+  const labelCol = react.useMemo(() => {
+    if (!labelWidthToUse) {
+      return;
+    }
+    return { flex: `0 0 ${labelWidthToUse}px` };
+  }, [labelWidthToUse]);
+  return {
+    labelCol,
+    labelWidthToUse
+  };
+}
+
+exports.useLabelConfig = useLabelConfig;
 /*! 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-filter/index.cjs

@@ -1,10 +1,152 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),i=require("@emotion/react"),t=require("@vef-framework/hooks"),r=require("@vef-framework/shared"),n=require("antd"),s=require("motion/react"),a=require("react");require("../internal/index.cjs");const o=require("./components/advanced-filter.cjs"),l=require("./components/basic-filter.cjs"),u=require("./event.cjs"),c=require("./hooks/use-action-handlers.cjs"),d=require("./hooks/use-filter-context.cjs"),m=require("./hooks/use-filter-initialization.cjs"),f=require("./hooks/use-filter-instance.cjs"),h=require("./hooks/use-filter-items.cjs"),v=require("./hooks/use-filter-values-change.cjs"),j=require("./store.cjs"),x=require("../internal/utils.cjs"),{useForm:F}=n.Form,g=i.css`
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$2 = require('motion/react');
+const react$1 = require('react');
+require('../internal/index.cjs');
+const advancedFilter = require('./components/advanced-filter.cjs');
+const basicFilter = require('./components/basic-filter.cjs');
+const event = require('./event.cjs');
+const useActionHandlers = require('./hooks/use-action-handlers.cjs');
+const useFilterContext = require('./hooks/use-filter-context.cjs');
+const useFilterInitialization = require('./hooks/use-filter-initialization.cjs');
+const useFilterInstance = require('./hooks/use-filter-instance.cjs');
+const useFilterItems = require('./hooks/use-filter-items.cjs');
+const useFilterValuesChange = require('./hooks/use-filter-values-change.cjs');
+const store = require('./store.cjs');
+const utils = require('../internal/utils.cjs');
+
+const { useForm } = antd.Form;
+const formStyle = react.css`
   display: block;
   flex-wrap: unset;
 
   .vef-form-item {
     margin-inline-end: 0;
   }
-`;const q=a.forwardRef((function VefFilterBase({schema:i,labelPosition:r="top",labelAlign:u="right",labelWidth:m,disabled:F=!1,loading:q=!1,size:b,variant:p,prefix:C,confirmationButton:V,resetButton:B,extraActionButtons:k,onBeforeConfirm:S,onConfirm:w,onReset:A,onChange:P},z){const[I,R,y,M]=j.useFilterStore((e=>[e.form,e.initialValues,e.isLoading,e.isAdvancedFilterVisible])),{handleReset:N,handleConfirm:D,handleConfirmFailed:H}=c.useActionHandlers({onBeforeConfirm:S,onConfirm:w,onReset:A}),{basicItems:W,advancedItems:E}=h.useFilterItems(i),L=a.useMemo((()=>({labelPosition:r,labelAlign:u,labelWidth:m,confirmationButton:V,externalLoading:q,showCollapseButton:E.length>0,handleReset:N,resetButton:B,extraActionButtons:k})),[E.length,V,k,N,u,r,m,q,B]),{handleValuesChange:T}=v.useFilterValuesChange(P);f.useFilterInstance(z,N);const U=t.useContextDisabled()||F||q||y;return e.jsx(n.Form,{colon:!1,css:g,disabled:U,form:I,initialValues:R,layout:"inline",size:x.convertBasicSizeToUiSize(b),variant:p,onFinish:D,onFinishFailed:H,onValuesChange:T,children:e.jsx(t.DisabledContextProvider,{value:U,children:e.jsxs(d.FilterContextProvider,{value:L,children:[e.jsx(l.default,{items:W,prefix:C}),e.jsx(s.AnimatePresence,{children:M&&E.length>0&&e.jsx(o.default,{items:E})})]})})})}));q.displayName="VefFilterBase";const b=a.memo(a.forwardRef((function VefFilterWrapper({initialValues:i,...r},n){const{schema:s}=r,[o]=F(),l=t.useSingleton((()=>new u.FilterEventBus));t.useUnmount((()=>{l.clear()}));const{mergedInitialValues:c,valueChangeHandlers:d,virtualFieldNames:f}=m.useFilterInitialization(s,i),h=a.useMemo((()=>({eventBus:l,form:o,initialValues:c,valueChangeHandlers:d,virtualFieldNames:f})),[l,o,c,d,f]);return e.jsx(j.FilterStoreProvider,{initialState:h,children:e.jsx(q,{ref:n,...r})})})),((e,i)=>r.isDeepEqual(r.omit(e,["initialValues","schema"]),r.omit(i,["initialValues","schema"]))));b.displayName="VefFilter",exports.default=b;
+`;
+function VefFilterBase({
+  schema,
+  labelPosition = "top",
+  labelAlign = "right",
+  labelWidth,
+  disabled = false,
+  loading = false,
+  size,
+  variant,
+  prefix,
+  confirmationButton,
+  resetButton,
+  extraActionButtons,
+  onBeforeConfirm,
+  onConfirm,
+  onReset,
+  onChange
+}, ref) {
+  const [form, initialValues, isLoading, isAdvancedFilterVisible] = store.useFilterStore((state) => [state.form, state.initialValues, state.isLoading, state.isAdvancedFilterVisible]);
+  const {
+    handleReset,
+    handleConfirm,
+    handleConfirmFailed
+  } = useActionHandlers.useActionHandlers({
+    onBeforeConfirm,
+    onConfirm,
+    onReset
+  });
+  const { basicItems, advancedItems } = useFilterItems.useFilterItems(schema);
+  const filterContext = react$1.useMemo(() => ({
+    labelPosition,
+    labelAlign,
+    labelWidth,
+    confirmationButton,
+    externalLoading: loading,
+    showCollapseButton: advancedItems.length > 0,
+    handleReset,
+    resetButton,
+    extraActionButtons
+  }), [
+    advancedItems.length,
+    confirmationButton,
+    extraActionButtons,
+    handleReset,
+    labelAlign,
+    labelPosition,
+    labelWidth,
+    loading,
+    resetButton
+  ]);
+  const { handleValuesChange } = useFilterValuesChange.useFilterValuesChange(onChange);
+  useFilterInstance.useFilterInstance(ref, handleReset);
+  const contextDisabled = hooks.useContextDisabled();
+  const formDisabled = contextDisabled || disabled || loading || isLoading;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Form,
+    {
+      colon: false,
+      css: formStyle,
+      disabled: formDisabled,
+      form,
+      initialValues,
+      layout: "inline",
+      size: utils.convertBasicSizeToUiSize(size),
+      variant,
+      onFinish: handleConfirm,
+      onFinishFailed: handleConfirmFailed,
+      onValuesChange: handleValuesChange,
+      children: /* @__PURE__ */ jsxRuntime.jsx(hooks.DisabledContextProvider, { value: formDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(useFilterContext.FilterContextProvider, { value: filterContext, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(basicFilter.default, { items: basicItems, prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$2.AnimatePresence, { children: isAdvancedFilterVisible && advancedItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(advancedFilter.default, { items: advancedItems }) })
+      ] }) })
+    }
+  );
+}
+const VefFilterBaseForwarded = react$1.forwardRef(VefFilterBase);
+VefFilterBaseForwarded.displayName = "VefFilterBase";
+function VefFilterWrapper({
+  initialValues,
+  ...restProps
+}, ref) {
+  const { schema } = restProps;
+  const [form] = useForm();
+  const filterEventBus = hooks.useSingleton(() => new event.FilterEventBus());
+  hooks.useUnmount(() => {
+    filterEventBus.clear();
+  });
+  const {
+    mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  } = useFilterInitialization.useFilterInitialization(schema, initialValues);
+  const initialState = react$1.useMemo(() => ({
+    eventBus: filterEventBus,
+    form,
+    initialValues: mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  }), [
+    filterEventBus,
+    form,
+    mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(store.FilterStoreProvider, { initialState, children: /* @__PURE__ */ jsxRuntime.jsx(VefFilterBaseForwarded, { ref, ...restProps }) });
+}
+const VefFilter = react$1.memo(
+  react$1.forwardRef(VefFilterWrapper),
+  (prevProps, nextProps) => shared.isDeepEqual(
+    shared.omit(prevProps, ["initialValues", "schema"]),
+    shared.omit(nextProps, ["initialValues", "schema"])
+  )
+);
+VefFilter.displayName = "VefFilter";
+
+exports.default = VefFilter;
 /*! 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-filter/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+
 /*! 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-filter/store.cjs

@@ -1,3 +1,78 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),{StoreProvider:s,useStore:t,useStoreApi:i}=e.createComponentStore("Filter",(s=>(t,i)=>({isAdvancedFilterVisible:!1,setIsAdvancedFilterVisible:e=>{t({isAdvancedFilterVisible:e})},isLoading:!1,setIsLoading:e=>{t({isLoading:e})},invokeValueChangeHandlers:(e,s)=>{const{valueChangeHandlers:t,initialValues:l,setValues:r}=i(),a=e??l,o=s?new Set(s):null;for(const[e,s]of Object.entries(t))o&&!o.has(e)||s(a[e]??null,{values:a,setValues:r})},getValues:()=>{const{form:e,initialValues:s}=i();return e.isFieldsTouched(!0)?s:e.getFieldsValue()},setValues:s=>{const{form:t,eventBus:l,invokeValueChangeHandlers:r}=i(),a=t.getFieldsValue(),o=Object.keys(s).filter((t=>!e.isDeepEqual(s[t],a[t])));t.setFieldsValue(s);const n=t.getFieldsValue();l.emitChange(n),r(n,o)},...s})));exports.FilterStoreProvider=s,exports.useFilterStore=t,exports.useFilterStoreApi=i;
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+const {
+  StoreProvider: FilterStoreProvider,
+  useStore: useFilterStore,
+  useStoreApi: useFilterStoreApi
+} = shared.createComponentStore(
+  "Filter",
+  (initialState) => (set, get) => ({
+    isAdvancedFilterVisible: false,
+    setIsAdvancedFilterVisible: (isAdvancedFilterVisible) => {
+      set(
+        {
+          isAdvancedFilterVisible
+        }
+      );
+    },
+    isLoading: false,
+    setIsLoading: (isLoading) => {
+      set(
+        {
+          isLoading
+        }
+      );
+    },
+    invokeValueChangeHandlers: (values, keys) => {
+      const {
+        valueChangeHandlers,
+        initialValues,
+        setValues
+      } = get();
+      const valuesToUse = values ?? initialValues;
+      const keySet = keys ? new Set(keys) : null;
+      for (const [name, handler] of Object.entries(valueChangeHandlers)) {
+        if (!keySet || keySet.has(name)) {
+          handler(
+            valuesToUse[name] ?? null,
+            {
+              values: valuesToUse,
+              setValues
+            }
+          );
+        }
+      }
+    },
+    getValues: () => {
+      const { form, initialValues } = get();
+      if (!form.isFieldsTouched(true)) {
+        return form.getFieldsValue();
+      }
+      return initialValues;
+    },
+    setValues: (values) => {
+      const {
+        form,
+        eventBus,
+        invokeValueChangeHandlers
+      } = get();
+      const previousValues = form.getFieldsValue();
+      const changedKeys = Object.keys(values).filter((key) => !shared.isDeepEqual(values[key], previousValues[key]));
+      form.setFieldsValue(values);
+      const currentValues = form.getFieldsValue();
+      eventBus.emitChange(currentValues);
+      invokeValueChangeHandlers(currentValues, changedKeys);
+    },
+    ...initialState
+  })
+);
+
+exports.FilterStoreProvider = FilterStoreProvider;
+exports.useFilterStore = useFilterStore;
+exports.useFilterStoreApi = useFilterStoreApi;
 /*! 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-filter/types.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+
 /*! 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-flex/index.cjs

@@ -1,3 +1,36 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),t=require("antd"),i=require("react");exports.default=function VefFlex({gap:u,...a}){const s=r.useGapSizeNormalizer(),n=i.useMemo((()=>o.isArray(u)?[s(u[0]),s(u[1])].join(" "):u?s(u):u),[u,s]);return e.jsx(t.Flex,{gap:n,...a})};
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+
+function VefFlex({
+  gap,
+  ...props
+}) {
+  const normalizeGapSize = hooks.useGapSizeNormalizer();
+  const gapToUse = react.useMemo(() => {
+    if (shared.isArray(gap)) {
+      return [normalizeGapSize(gap[0]), normalizeGapSize(gap[1])].join(" ");
+    }
+    if (gap) {
+      return normalizeGapSize(gap);
+    }
+    return gap;
+  }, [gap, normalizeGapSize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Flex,
+    {
+      gap: gapToUse,
+      ...props
+    }
+  );
+}
+
+exports.default = VefFlex;
 /*! 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-flex/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
+'use strict';
+
+
 /*! 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 */