@vef-framework/components 1.0.63 → 1.0.64

package/es/vef-filter/store.js

@@ -1,3 +1,72 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{createComponentStore as e,isDeepEqual as s}from"@vef-framework/shared";const{StoreProvider:i,useStore:l,useStoreApi:t}=e("Filter",(e=>(i,l)=>({isAdvancedFilterVisible:!1,setIsAdvancedFilterVisible:e=>{i({isAdvancedFilterVisible:e})},isLoading:!1,setIsLoading:e=>{i({isLoading:e})},invokeValueChangeHandlers:(e,s)=>{const{valueChangeHandlers:i,initialValues:t,setValues:a}=l(),n=e??t,r=s?new Set(s):null;for(const[e,s]of Object.entries(i))r&&!r.has(e)||s(n[e]??null,{values:n,setValues:a})},getValues:()=>{const{form:e,initialValues:s}=l();return e.isFieldsTouched(!0)?s:e.getFieldsValue()},setValues:e=>{const{form:i,eventBus:t,invokeValueChangeHandlers:a}=l(),n=i.getFieldsValue(),r=Object.keys(e).filter((i=>!s(e[i],n[i])));i.setFieldsValue(e);const o=i.getFieldsValue();t.emitChange(o),a(o,r)},...e})));export{i as FilterStoreProvider,l as useFilterStore,t as useFilterStoreApi};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { createComponentStore, isDeepEqual } from '@vef-framework/shared';
+
+const {
+  StoreProvider: FilterStoreProvider,
+  useStore: useFilterStore,
+  useStoreApi: useFilterStoreApi
+} = 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) => !isDeepEqual(values[key], previousValues[key]));
+      form.setFieldsValue(values);
+      const currentValues = form.getFieldsValue();
+      eventBus.emitChange(currentValues);
+      invokeValueChangeHandlers(currentValues, changedKeys);
+    },
+    ...initialState
+  })
+);
+
+export { FilterStoreProvider, useFilterStore, 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/es/vef-flex/index.js

@@ -1,3 +1,32 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as r}from"@emotion/react/jsx-runtime";import{useGapSizeNormalizer as o}from"@vef-framework/hooks";import{isArray as t}from"@vef-framework/shared";import{Flex as m}from"antd";import{useMemo as e}from"react";function f({gap:f,...a}){const i=o(),n=e((()=>t(f)?[i(f[0]),i(f[1])].join(" "):f?i(f):f),[f,i]);return r(m,{gap:n,...a})}export{f as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useGapSizeNormalizer } from '@vef-framework/hooks';
+import { isArray } from '@vef-framework/shared';
+import { Flex } from 'antd';
+import { useMemo } from 'react';
+
+function VefFlex({
+  gap,
+  ...props
+}) {
+  const normalizeGapSize = useGapSizeNormalizer();
+  const gapToUse = useMemo(() => {
+    if (isArray(gap)) {
+      return [normalizeGapSize(gap[0]), normalizeGapSize(gap[1])].join(" ");
+    }
+    if (gap) {
+      return normalizeGapSize(gap);
+    }
+    return gap;
+  }, [gap, normalizeGapSize]);
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      gap: gapToUse,
+      ...props
+    }
+  );
+}
+
+export { VefFlex 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-float-button/index.js

@@ -1,3 +1,50 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as o}from"@emotion/react/jsx-runtime";import{useColorTokens as t}from"@vef-framework/hooks";import{FloatButton as r}from"antd";import{useMemo as e}from"react";function n({appearance:n,tip:a,badge:i,...c}){const f=t(),m=e((()=>{if(!i)return;const{variant:o,count:t,overflowCount:r,showZero:e,color:n}=i;return"dot"===o?{dot:!0,color:n?f.get(n):void 0}:{count:t,overflowCount:r,showZero:e,color:n?f.get(n):void 0}}),[i,f]);return o(r,{badge:m,tooltip:a,type:n,...c})}export{n as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useColorTokens } from '@vef-framework/hooks';
+import { FloatButton } from 'antd';
+import { useMemo } from 'react';
+
+function VefFloatButton({
+  appearance,
+  tip,
+  badge,
+  ...restProps
+}) {
+  const colorTokens = useColorTokens();
+  const badgeProps = useMemo(() => {
+    if (!badge) {
+      return;
+    }
+    const {
+      variant,
+      count,
+      overflowCount,
+      showZero,
+      color
+    } = badge;
+    if (variant === "dot") {
+      return {
+        dot: true,
+        color: color ? colorTokens.get(color) : void 0
+      };
+    }
+    return {
+      count,
+      overflowCount,
+      showZero,
+      color: color ? colorTokens.get(color) : void 0
+    };
+  }, [badge, colorTokens]);
+  return /* @__PURE__ */ jsx(
+    FloatButton,
+    {
+      badge: badgeProps,
+      tooltip: tip,
+      type: appearance,
+      ...restProps
+    }
+  );
+}
+
+export { VefFloatButton 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-float-button-group/index.js

@@ -1,3 +1,21 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as r}from"@emotion/react/jsx-runtime";import{FloatButton as t}from"antd";const{Group:o}=t;function e({collapsable:t=!1,trigger:e="click",...i}){return r(o,{trigger:t?e:void 0,...i})}export{e as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { FloatButton } from 'antd';
+
+const { Group } = FloatButton;
+function VefFloatButtonGroup({
+  collapsable = false,
+  trigger = "click",
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      trigger: collapsable ? trigger : void 0,
+      ...restProps
+    }
+  );
+}
+
+export { VefFloatButtonGroup 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/fields/index.js

@@ -1,3 +1,12 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import p from"./input.js";import r from"./input-number.js";const t={Input:p,InputNumber:r};export{t as fieldMap};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import Input from './input.js';
+import InputNumber from './input-number.js';
+
+
+const fieldMap = {
+  Input,
+  InputNumber
+};
+
+export { fieldMap };
 /*! 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/fields/input-number.js

@@ -1,3 +1,124 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{VefError as o,isString as s,isFunction as r}from"@vef-framework/shared";import{useMemo as n}from"react";import t from"../../../vef-input-number/index.js";import{useComputedValues as a}from"../../hooks/use-computed-values.js";import{useFormStore as u}from"../../store.js";function l({label:l,disabled:i,value:m,onChange:f,componentProps:p}){if("InputNumber"!==p.type)throw new o(-9,'Oops! Something went wrong. The type of the form field is not "InputNumber", but rendered.');const{onChange:c,onEnterKeyPress:d,onFocus:V,onBlur:h,placeholder:x,prefix:v,suffix:w,max:g,min:y}=p,[b,k,F]=u((e=>[e.form,e.scene,e.setValues])),[j,C,P,B,E]=a([{key:"placeholder",rawValue:x,defaultValue:l?s(l)?`请输入${l}`:"请输入":void 0},{key:"max",rawValue:g},{key:"min",rawValue:y},{key:"prefix",rawValue:v},{key:"suffix",rawValue:w}]),I=n((()=>{const e={};return r(V)&&(e.onFocus=e=>{const o=b.getFieldsValue();V(e,{scene:k,values:o,setValues:F})}),r(h)&&(e.onBlur=e=>{const o=b.getFieldsValue();h(e,{scene:k,values:o,setValues:F})}),e.onChange=e=>{if(f?.(e),r(c)){const o=b.getFieldsValue();c(e,{scene:k,values:o,setValues:F})}},r(d)&&(e.onPressEnter=e=>{const o=b.getFieldsValue();d(e,{scene:k,values:o,setValues:F})}),e}),[b,h,f,d,V,c,k,F]);return e(t,{disabled:i,max:C,min:P,placeholder:j,prefix:B,suffix:E,value:m,...I})}export{l as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError, isString, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefInputNumber from '../../../vef-input-number/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useFormStore } from '../../store.js';
+
+function InputNumber({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "InputNumber") {
+    throw new VefError(-9, `Oops! Something went wrong. The type of the form field is not "InputNumber", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onEnterKeyPress,
+    onFocus,
+    onBlur,
+    placeholder,
+    prefix,
+    suffix,
+    max,
+    min
+  } = componentProps;
+  const [form, scene, setValues] = useFormStore((state) => [state.form, state.scene, state.setValues]);
+  const [placeholderValue, maxValue, minValue, prefixValue, suffixValue] = useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? isString(label) ? `\u8BF7\u8F93\u5165${label}` : "\u8BF7\u8F93\u5165" : void 0
+    },
+    {
+      key: "max",
+      rawValue: max
+    },
+    {
+      key: "min",
+      rawValue: min
+    },
+    {
+      key: "prefix",
+      rawValue: prefix
+    },
+    {
+      key: "suffix",
+      rawValue: suffix
+    }
+  ]);
+  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(
+    VefInputNumber,
+    {
+      disabled,
+      max: maxValue,
+      min: minValue,
+      placeholder: placeholderValue,
+      prefix: prefixValue,
+      suffix: suffixValue,
+      value,
+      ...events
+    }
+  );
+}
+
+export { InputNumber 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/fields/input.js

@@ -1,3 +1,133 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{VefError as s,isString as o,isFunction as a}from"@vef-framework/shared";import{useMemo as t}from"react";import r from"../../../vef-input/index.js";import{useComputedValues as l}from"../../hooks/use-computed-values.js";import{useFormStore as n}from"../../store.js";function u({label:u,disabled:i,value:f,onChange:c,componentProps:m}){if("Input"!==m.type)throw new s(-9,'Oops! Something went wrong. The type of the form field is not "Input", but rendered.');const{onChange:p,onEnterKeyPress:d,onFocus:V,onBlur:h,onClear:g,maxLength:x,clearable:v=!1,placeholder:w,prefix:y,suffix:F}=m,[b,k,C]=n((e=>[e.form,e.scene,e.setValues])),[j,L,P,B]=l([{key:"placeholder",rawValue:w,defaultValue:u?o(u)?`请输入${u}`:"请输入":void 0},{key:"maxLength",rawValue:x},{key:"prefix",rawValue:y},{key:"suffix",rawValue:F}]),E=t((()=>{const e={};return a(V)&&(e.onFocus=e=>{const s=b.getFieldsValue();V(e,{scene:k,values:s,setValues:C})}),a(h)&&(e.onBlur=e=>{const s=b.getFieldsValue();h(e,{scene:k,values:s,setValues:C})}),e.onChange=e=>{if(c?.(e),a(p)){const s=b.getFieldsValue();p(e,{scene:k,values:s,setValues:C})}},a(d)&&(e.onPressEnter=e=>{const s=b.getFieldsValue();d(e,{scene:k,values:s,setValues:C})}),v&&a(g)&&(e.onClear=()=>{const e=b.getFieldsValue();g({scene:k,values:e,setValues:C})}),e}),[v,b,h,c,g,d,V,p,k,C]);return e(r,{clearable:v,disabled:i,maxLength:L,placeholder:j,prefix:P,suffix:B,value:f,...E})}export{u as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError, isString, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefInput from '../../../vef-input/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useFormStore } from '../../store.js';
+
+function Input({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "Input") {
+    throw new VefError(-9, `Oops! Something went wrong. The type of the form field is not "Input", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onEnterKeyPress,
+    onFocus,
+    onBlur,
+    onClear,
+    maxLength,
+    clearable = false,
+    placeholder,
+    prefix,
+    suffix
+  } = componentProps;
+  const [form, scene, setValues] = useFormStore((state) => [state.form, state.scene, state.setValues]);
+  const [placeholderValue, maxLengthValue, prefixValue, suffixValue] = useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? isString(label) ? `\u8BF7\u8F93\u5165${label}` : "\u8BF7\u8F93\u5165" : void 0
+    },
+    {
+      key: "maxLength",
+      rawValue: maxLength
+    },
+    {
+      key: "prefix",
+      rawValue: prefix
+    },
+    {
+      key: "suffix",
+      rawValue: suffix
+    }
+  ]);
+  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
+        });
+      };
+    }
+    if (clearable && isFunction(onClear)) {
+      events2.onClear = () => {
+        const values = form.getFieldsValue();
+        onClear({
+          scene,
+          values,
+          setValues
+        });
+      };
+    }
+    return events2;
+  }, [
+    clearable,
+    form,
+    onBlur,
+    onChange,
+    onClear,
+    onEnterKeyPress,
+    onFocus,
+    onValueChange,
+    scene,
+    setValues
+  ]);
+  return /* @__PURE__ */ jsx(
+    VefInput,
+    {
+      clearable,
+      disabled,
+      maxLength: maxLengthValue,
+      placeholder: placeholderValue,
+      prefix: prefixValue,
+      suffix: suffixValue,
+      value,
+      ...events
+    }
+  );
+}
+
+export { Input 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-actions.js

@@ -1,5 +1,59 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as t,jsxs as o}from"@emotion/react/jsx-runtime";import{CheckOutlined as e}from"@ant-design/icons";import{css as r}from"@emotion/react";import{themeVariables as i,omit as n}from"@vef-framework/shared";import{Form as m}from"antd";import{memo as s}from"react";import d from"../../vef-button/index.js";import a from"../../vef-flex/index.js";import{useFormStore as f}from"../store.js";const{Item:c}=m,l={text:"提交",icon:t(e,{})},p={text:"重置"},u=r`
-  padding: ${i.padding} 0;
-`;const x=s((function({submissionButton:e=l,resetButton:r=p,handleReset:i}){const[m,s]=f((t=>[t.isLoading,t.showActionButtons]));return s&&(e||r)?t(c,{children:o(a,{css:u,gap:"medium",justify:"flex-end",children:[r&&t(d,{color:"default",variant:"filled",onClick:i,...n(r,["text"]),children:r.text}),e&&t(d,{color:"primary",loading:m,type:"submit",...n(e,["text"]),children:e.text})]})}):null}));x.displayName="VefFormActions";export{x as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+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';
+
+const { Item } = Form;
+const defaultSubmissionButtonConfig = {
+  text: "\u63D0\u4EA4",
+  icon: /* @__PURE__ */ jsx(CheckOutlined, {})
+};
+const defaultResetButtonConfig = {
+  text: "\u91CD\u7F6E"
+};
+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 };
 /*! 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 */