@vef-framework/components 1.0.122 → 1.0.124

package/esm/vef-filter/hooks/use-filter-items.js

@@ -0,0 +1,24 @@
+"use strict";
+import { useMemo } from 'react';
+
+"use strict";
+function useFilterItems(schema) {
+  return 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
+    };
+  }, []);
+}
+
+export { useFilterItems };

package/esm/vef-filter/hooks/use-filter-values-change.js

@@ -0,0 +1,31 @@
+"use strict";
+import { isFunction } from '@vef-framework/shared';
+import { useMemo, useEffect, useLayoutEffect } from 'react';
+import { useFilterStore } from '../store.js';
+
+"use strict";
+function useFilterValuesChange(onChange) {
+  const [eventBus, invokeValueChangeHandlers] = useFilterStore((state) => [state.eventBus, state.invokeValueChangeHandlers]);
+  const handleValuesChange = useMemo(() => (_, values) => {
+    eventBus.emitChange(values);
+  }, [eventBus]);
+  useEffect(() => {
+    if (isFunction(onChange)) {
+      const handleChange = (values) => {
+        onChange(values);
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [eventBus, onChange]);
+  useLayoutEffect(() => {
+    invokeValueChangeHandlers();
+  }, []);
+  return {
+    handleValuesChange
+  };
+}
+
+export { useFilterValuesChange };

package/esm/vef-filter/hooks/use-label-config.js

@@ -0,0 +1,28 @@
+"use strict";
+import { showWarningMessage } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+"use strict";
+function useLabelConfig(labelPosition, labelWidth) {
+  const labelWidthToUse = useMemo(() => {
+    if (labelPosition === "top" || !labelWidth) {
+      return;
+    }
+    if (labelWidth < 60 || labelWidth > 120) {
+      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 = useMemo(() => {
+    if (!labelWidthToUse) {
+      return;
+    }
+    return { flex: `0 0 ${labelWidthToUse}px` };
+  }, [labelWidthToUse]);
+  return {
+    labelCol,
+    labelWidthToUse
+  };
+}
+
+export { useLabelConfig };

package/esm/vef-filter/index.js

@@ -0,0 +1,148 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useContextDisabled, DisabledContextProvider, useSingleton, useUnmount } from '@vef-framework/hooks';
+import { isDeepEqual, omit } from '@vef-framework/shared';
+import { Form } from 'antd';
+import { AnimatePresence } from 'motion/react';
+import { useMemo, forwardRef, memo } from 'react';
+import '../internal/index.js';
+import VefAdvancedFilter from './components/advanced-filter.js';
+import VefBasicFilter from './components/basic-filter.js';
+import { FilterEventBus } from './event.js';
+import { useActionHandlers } from './hooks/use-action-handlers.js';
+import { FilterContextProvider } from './hooks/use-filter-context.js';
+import { useFilterInitialization } from './hooks/use-filter-initialization.js';
+import { useFilterInstance } from './hooks/use-filter-instance.js';
+import { useFilterItems } from './hooks/use-filter-items.js';
+import { useFilterValuesChange } from './hooks/use-filter-values-change.js';
+import { useFilterStore, FilterStoreProvider } from './store.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const { useForm } = Form;
+const formStyle = css`
+  display: block;
+  flex-wrap: unset;
+
+  .vef-form-item {
+    margin-inline-end: 0;
+  }
+`;
+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] = useFilterStore((state) => [state.form, state.initialValues, state.isLoading, state.isAdvancedFilterVisible]);
+  const {
+    handleReset,
+    handleConfirm,
+    handleConfirmFailed
+  } = useActionHandlers({
+    onBeforeConfirm,
+    onConfirm,
+    onReset
+  });
+  const { basicItems, advancedItems } = useFilterItems(schema);
+  const filterContext = 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(onChange);
+  useFilterInstance(ref, handleReset);
+  const contextDisabled = useContextDisabled();
+  const formDisabled = contextDisabled || disabled || loading || isLoading;
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      colon: false,
+      css: formStyle,
+      disabled: formDisabled,
+      form,
+      initialValues,
+      layout: "inline",
+      size: convertBasicSizeToUiSize(size),
+      variant,
+      onFinish: handleConfirm,
+      onFinishFailed: handleConfirmFailed,
+      onValuesChange: handleValuesChange,
+      children: /* @__PURE__ */ jsx(DisabledContextProvider, { value: formDisabled, children: /* @__PURE__ */ jsxs(FilterContextProvider, { value: filterContext, children: [
+        /* @__PURE__ */ jsx(VefBasicFilter, { items: basicItems, prefix }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: isAdvancedFilterVisible && advancedItems.length > 0 && /* @__PURE__ */ jsx(VefAdvancedFilter, { items: advancedItems }) })
+      ] }) })
+    }
+  );
+}
+const VefFilterBaseForwarded = forwardRef(VefFilterBase);
+VefFilterBaseForwarded.displayName = "VefFilterBase";
+function VefFilterWrapper({
+  initialValues,
+  ...restProps
+}, ref) {
+  const { schema } = restProps;
+  const [form] = useForm();
+  const filterEventBus = useSingleton(() => new FilterEventBus());
+  useUnmount(() => {
+    filterEventBus.clear();
+  });
+  const {
+    mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  } = useFilterInitialization(schema, initialValues);
+  const initialState = useMemo(() => ({
+    eventBus: filterEventBus,
+    form,
+    initialValues: mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  }), [
+    filterEventBus,
+    form,
+    mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  ]);
+  return /* @__PURE__ */ jsx(FilterStoreProvider, { initialState, children: /* @__PURE__ */ jsx(VefFilterBaseForwarded, { ref, ...restProps }) });
+}
+const VefFilter = memo(
+  forwardRef(VefFilterWrapper),
+  (prevProps, nextProps) => isDeepEqual(
+    omit(prevProps, ["initialValues", "schema"]),
+    omit(nextProps, ["initialValues", "schema"])
+  )
+);
+VefFilter.displayName = "VefFilter";
+
+export { VefFilter as default };

package/esm/vef-filter/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-filter/store.js

@@ -0,0 +1,72 @@
+"use strict";
+import { createComponentStore, isDeepEqual } from '@vef-framework/shared';
+
+"use strict";
+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 };

package/esm/vef-filter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-flex/index.js

@@ -0,0 +1,32 @@
+"use strict";
+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';
+
+"use strict";
+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 };

package/esm/vef-flex/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-float-button/index.js

@@ -0,0 +1,50 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useColorTokens } from '@vef-framework/hooks';
+import { FloatButton } from 'antd';
+import { useMemo } from 'react';
+
+"use strict";
+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 };

package/esm/vef-float-button/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-float-button-group/index.js

@@ -0,0 +1,21 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { FloatButton } from 'antd';
+
+"use strict";
+const { Group } = FloatButton;
+function VefFloatButtonGroup({
+  collapsable = false,
+  trigger = "click",
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      trigger: collapsable ? trigger : void 0,
+      ...restProps
+    }
+  );
+}
+
+export { VefFloatButtonGroup as default };

package/esm/vef-float-button-group/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

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

@@ -0,0 +1,66 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError, isString, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefIconSelect from '../../../vef-icon-select/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useFormStore } from '../../store.js';
+
+"use strict";
+function IconSelect({
+  label,
+  value,
+  disabled,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "IconSelect") {
+    throw new VefError(-9, `Oops! Something went wrong. The type of the form field is not "IconSelect", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    placeholder,
+    clearable
+  } = componentProps;
+  const [placeholderValue] = useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? isString(label) ? `请输入${label}` : "请输入" : void 0
+    }
+  ]);
+  const [form, scene, setValues] = useFormStore((state) => [state.form, state.scene, state.setValues]);
+  const events = useMemo(() => {
+    const events2 = {};
+    events2.onChange = (value2) => {
+      onChange?.(value2);
+      if (isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          scene,
+          values,
+          setValues
+        });
+      }
+    };
+    return events2;
+  }, [
+    form,
+    onChange,
+    onValueChange,
+    scene,
+    setValues
+  ]);
+  return /* @__PURE__ */ jsx(
+    VefIconSelect,
+    {
+      clearable,
+      disabled,
+      placeholder: placeholderValue,
+      value,
+      ...events
+    }
+  );
+}
+
+export { IconSelect as default };

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

@@ -0,0 +1,26 @@
+"use strict";
+import IconSelect from './icon-select.js';
+import Input from './input.js';
+import InputNumber from './input-number.js';
+import Password from './password.js';
+import Radio from './radio.js';
+import Select from './select.js';
+import Textarea from './textarea.js';
+import TreeSelect from './tree-select.js';
+import './props.js';
+
+"use strict";
+const fieldMap = {
+  Input,
+  InputNumber,
+  SingleSelect: Select,
+  MultipleSelect: Select,
+  Radio,
+  Password,
+  Textarea,
+  IconSelect,
+  TreeSingleSelect: TreeSelect,
+  TreeMultipleSelect: TreeSelect
+};
+
+export { fieldMap };

package/esm/vef-form/components/fields/input-number.js

@@ -0,0 +1,124 @@
+"use strict";
+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';
+
+"use strict";
+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) ? `请输入${label}` : "请输入" : 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 };