@vef-framework/components 1.0.122 → 1.0.123

package/cjs/vef-form/hooks/use-columns-layout.cjs

@@ -0,0 +1,125 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+const MAX_SPANS = 24;
+const SPAN_BASES = [
+  {
+    breakpoint: "xs",
+    base: MAX_SPANS,
+    spans: 1
+  },
+  {
+    breakpoint: "sm",
+    base: MAX_SPANS / 2,
+    spans: 2
+  },
+  {
+    breakpoint: "md",
+    base: MAX_SPANS / 3,
+    spans: 3
+  },
+  {
+    breakpoint: "lg",
+    base: MAX_SPANS / 4,
+    spans: 4
+  },
+  {
+    breakpoint: "xl",
+    base: MAX_SPANS / 4,
+    spans: 4
+  },
+  {
+    breakpoint: "xxl",
+    base: MAX_SPANS / 6,
+    spans: 6
+  }
+];
+const ALLOWED_SPANS = shared.unique(SPAN_BASES.map((item) => item.spans));
+function calculateResponsiveLayout(rowKey, columns, autoExpand) {
+  const totalSpans = columns.reduce((acc, column) => acc + (column.span ?? 1), 0);
+  if (!ALLOWED_SPANS.includes(totalSpans)) {
+    throw new shared.VefError(-3, `The total spans of the columns of the row [${rowKey}] must be one of the following: ${ALLOWED_SPANS.join(", ")}.`);
+  }
+  const requiredBase = 24 / totalSpans;
+  const layout = {};
+  for (const {
+    breakpoint,
+    base,
+    spans
+  } of SPAN_BASES) {
+    if (requiredBase >= base) {
+      layout[breakpoint] = columns.reduce((acc, column) => {
+        acc[column.key] = (column.span ?? 1) * requiredBase;
+        return acc;
+      }, {});
+    } else {
+      const map = {};
+      let remainingSpans = spans;
+      let lastColumnKey = null;
+      for (const column of columns) {
+        const requiredSpan = column.span ?? 1;
+        if (remainingSpans >= requiredSpan) {
+          map[column.key] = requiredSpan * base;
+          remainingSpans -= requiredSpan;
+          lastColumnKey = column.key;
+        } else {
+          if (lastColumnKey) {
+            if (autoExpand) {
+              map[lastColumnKey] += remainingSpans * base;
+            }
+            remainingSpans = spans;
+            lastColumnKey = null;
+          }
+          if (requiredSpan > spans) {
+            map[column.key] = 24;
+          } else {
+            map[column.key] = requiredSpan * base;
+            remainingSpans -= requiredSpan;
+            lastColumnKey = column.key;
+          }
+        }
+        if (remainingSpans === 0) {
+          remainingSpans = spans;
+          lastColumnKey = null;
+        }
+      }
+      if (remainingSpans > 0) {
+        if (autoExpand) {
+          map[lastColumnKey] += remainingSpans * base;
+        }
+        lastColumnKey = null;
+      }
+      layout[breakpoint] = map;
+    }
+  }
+  return layout;
+}
+function calculateFixedLayout(rowKey, columns) {
+  const totalSpans = columns.reduce((acc, column) => acc + (column.span ?? 1), 0);
+  if (totalSpans > MAX_SPANS || MAX_SPANS % totalSpans !== 0) {
+    throw new shared.VefError(-3, `The total spans of the columns of the row [${rowKey}] must be less than or equal to ${MAX_SPANS} and a divisor of ${MAX_SPANS}.`);
+  }
+  const base = MAX_SPANS / totalSpans;
+  return columns.reduce((acc, column) => {
+    acc[column.key] = (column.span ?? 1) * base;
+    return acc;
+  }, {});
+}
+function useColumnsLayout(rowKey, columns, layoutMode, autoExpand) {
+  return react.useMemo(() => {
+    if (columns.length === 0) {
+      return {};
+    }
+    if (layoutMode === "responsive") {
+      return calculateResponsiveLayout(rowKey, columns, autoExpand);
+    } else {
+      return calculateFixedLayout(rowKey, columns);
+    }
+  }, []);
+}
+
+exports.useColumnsLayout = useColumnsLayout;

package/cjs/vef-form/hooks/use-computed-values.cjs

@@ -0,0 +1,58 @@
+"use strict";
+'use strict';
+
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var helper = require('../helper.cjs');
+var store = require('../store.cjs');
+
+"use strict";
+function useComputedValues(values, returnAsObject = false) {
+  const [scene, eventBus, getValues] = store.useFormStore((state) => [state.scene, 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, scene, defaultValue);
+    acc[key] = computedValue;
+    return acc;
+  }, {}), [currentValues, scene, 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, scene, defaultValue);
+          if (!shared.isDeepEqual(refreshedValue, computedValue)) {
+            forceUpdate();
+            break;
+          }
+        }
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [computedValues, eventBus, forceUpdate, scene, values]);
+  if (returnAsObject) {
+    return values.reduce((acc, { key }) => {
+      acc[key] = computedValues[key];
+      return acc;
+    }, {});
+  }
+  return values.map(({ key }) => computedValues[key]);
+}
+
+exports.useComputedValues = useComputedValues;

package/cjs/vef-form/hooks/use-form-context.cjs

@@ -0,0 +1,19 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+
+"use strict";
+const {
+  useContextSelector: useFormContextSelector,
+  useContext: useFormContext,
+  ContextProvider: FormContextProvider
+} = shared.createSelectableContext({
+  autoExpand: true,
+  labelPosition: "top",
+  layoutMode: "responsive"
+});
+
+exports.FormContextProvider = FormContextProvider;
+exports.useFormContext = useFormContext;
+exports.useFormContextSelector = useFormContextSelector;

package/cjs/vef-form/hooks/use-form-initialization.cjs

@@ -0,0 +1,48 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useFormInitialization(schema, initialValues) {
+  return react.useMemo(() => {
+    const mergedInitialValues = {
+      ...initialValues
+    };
+    const valueChangeHandlers = {};
+    const virtualFieldNames = [];
+    for (const group of schema) {
+      const { rows } = group;
+      for (const row of rows) {
+        const { columns } = row;
+        for (const column of columns) {
+          const { items } = column;
+          for (const item of items) {
+            const {
+              name,
+              defaultValue,
+              virtual
+            } = item;
+            if (!shared.isNullish(defaultValue) && shared.isNullish(mergedInitialValues[name])) {
+              mergedInitialValues[name] = defaultValue;
+            }
+            if (item.type !== "Hidden" && shared.isFunction(item.onChange)) {
+              valueChangeHandlers[name] = item.onChange;
+            }
+            if (virtual === true) {
+              virtualFieldNames.push(name);
+            }
+          }
+        }
+      }
+    }
+    return {
+      mergedInitialValues,
+      valueChangeHandlers,
+      virtualFieldNames
+    };
+  }, []);
+}
+
+exports.useFormInitialization = useFormInitialization;

package/cjs/vef-form/hooks/use-form-instance.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+var store = require('../store.cjs');
+
+"use strict";
+function useFormInstance(ref, reset) {
+  const [form, eventBus, getValues, setValues] = store.useFormStore((state) => [state.form, state.eventBus, state.getValues, state.setValues]);
+  react.useImperativeHandle(ref, () => ({
+    submit: () => 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.useFormInstance = useFormInstance;

package/cjs/vef-form/hooks/use-form-values-change.cjs

@@ -0,0 +1,33 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+var store = require('../store.cjs');
+
+"use strict";
+function useFormValuesChange(onChange) {
+  const [scene, eventBus, invokeValueChangeHandlers] = store.useFormStore((state) => [state.scene, state.eventBus, state.invokeValueChangeHandlers]);
+  const handleValuesChange = react.useMemo(() => (_, values) => {
+    eventBus.emitChange(values);
+  }, [eventBus]);
+  react.useEffect(() => {
+    if (shared.isFunction(onChange)) {
+      const handleChange = (values) => {
+        onChange(values, scene);
+      };
+      eventBus.onChange(handleChange);
+      return () => {
+        eventBus.offChange(handleChange);
+      };
+    }
+  }, [eventBus, onChange, scene]);
+  react.useLayoutEffect(() => {
+    invokeValueChangeHandlers();
+  }, []);
+  return {
+    handleValuesChange
+  };
+}
+
+exports.useFormValuesChange = useFormValuesChange;

package/cjs/vef-form/hooks/use-label-width.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useLabelWidth(labelPosition, labelWidth) {
+  const labelWidthToUse = react.useMemo(() => {
+    if (labelPosition === "top" || !labelWidth) {
+      return;
+    }
+    if (labelWidth < 60 || labelWidth > 120) {
+      shared.showWarningMessage("The labelWidth of VefForm component must be between 60 and 120, otherwise it will be 60 or 120.");
+    }
+    return Math.min(Math.max(labelWidth, 60), 120);
+  }, [labelPosition, labelWidth]);
+  return labelWidthToUse;
+}
+
+exports.useLabelWidth = useLabelWidth;

package/cjs/vef-form/index.cjs

@@ -0,0 +1,179 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react$1 = require('@emotion/react');
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react = require('react');
+require('../internal/index.cjs');
+var formActions = require('./components/form-actions.cjs');
+var formContent = require('./components/form-content.cjs');
+var event = require('./event.cjs');
+var useActionHandlers = require('./hooks/use-action-handlers.cjs');
+var useFormContext = require('./hooks/use-form-context.cjs');
+var useFormInitialization = require('./hooks/use-form-initialization.cjs');
+var useFormInstance = require('./hooks/use-form-instance.cjs');
+var useFormValuesChange = require('./hooks/use-form-values-change.cjs');
+var useLabelWidth = require('./hooks/use-label-width.cjs');
+var store = require('./store.cjs');
+var utils = require('../internal/utils.cjs');
+
+"use strict";
+const { useForm } = antd.Form;
+const scrollToFirstErrorOptions = {
+  scrollMode: "if-needed",
+  behavior: "smooth"
+};
+function VefFormBase({
+  schema,
+  labelAlign = "right",
+  variant,
+  showTabs = false,
+  height = "auto",
+  size,
+  disabled = false,
+  onChange,
+  submissionButton,
+  resetButton,
+  submitApi,
+  submitTip,
+  onBeforeSubmit,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitFailure,
+  onReset
+}, ref) {
+  const [labelPosition, labelWidth] = useFormContext.useFormContextSelector((ctx) => [ctx.labelPosition, ctx.labelWidth]);
+  const [form, initialValues, isLoading] = store.useFormStore((state) => [state.form, state.initialValues, state.isLoading]);
+  const { handleValuesChange } = useFormValuesChange.useFormValuesChange(onChange);
+  const {
+    handleReset,
+    handleSubmit,
+    handleSubmitFailed
+  } = useActionHandlers.useActionHandlers({
+    submitApi,
+    submitTip,
+    onBeforeSubmit,
+    onSubmit,
+    onSubmitSuccess,
+    onSubmitFailure,
+    onReset
+  });
+  useFormInstance.useFormInstance(ref, handleReset);
+  const labelCol = react.useMemo(() => {
+    if (!labelWidth) {
+      return;
+    }
+    return { flex: `0 0 ${labelWidth}px` };
+  }, [labelWidth]);
+  const formStyle = react.useMemo(() => {
+    let heightValue = height;
+    if (height === "full") {
+      heightValue = "100%";
+    } else if (shared.isNumber(height)) {
+      heightValue = `${height}px`;
+    }
+    return react$1.css`
+      height: ${heightValue};
+    `;
+  }, [height]);
+  const contextDisabled = hooks.useContextDisabled();
+  const formDisabled = contextDisabled || disabled || isLoading;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    antd.Form,
+    {
+      labelWrap: true,
+      colon: false,
+      css: formStyle,
+      disabled: formDisabled,
+      form,
+      initialValues,
+      labelAlign,
+      labelCol,
+      layout: labelPosition === "top" ? "vertical" : "horizontal",
+      scrollToFirstError: scrollToFirstErrorOptions,
+      size: utils.convertBasicSizeToUiSize(size),
+      variant,
+      onFinish: handleSubmit,
+      onFinishFailed: handleSubmitFailed,
+      onValuesChange: handleValuesChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          formContent.default,
+          {
+            height,
+            schema,
+            showTabs: showTabs === true ? "switch" : showTabs
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          formActions.default,
+          {
+            handleReset,
+            resetButton,
+            submissionButton
+          }
+        )
+      ]
+    }
+  );
+}
+const VefFormBaseForwarded = react.forwardRef(VefFormBase);
+VefFormBaseForwarded.displayName = "VefFormBase";
+function VefFormWrapper({
+  initialValues,
+  scene,
+  layoutMode = "responsive",
+  autoExpand = false,
+  labelPosition = "top",
+  labelWidth,
+  ...restProps
+}, ref) {
+  const { schema } = restProps;
+  const [form] = useForm();
+  const eventBus = hooks.useSingleton(() => new event.FormEventBus());
+  hooks.useUnmount(() => {
+    eventBus.clear();
+  });
+  const labelWidthToUse = useLabelWidth.useLabelWidth(labelPosition, labelWidth);
+  const formContext = react.useMemo(() => ({
+    labelPosition,
+    labelWidth: labelWidthToUse,
+    autoExpand,
+    layoutMode
+  }), [layoutMode, autoExpand, labelPosition, labelWidthToUse]);
+  const {
+    mergedInitialValues,
+    valueChangeHandlers,
+    virtualFieldNames
+  } = useFormInitialization.useFormInitialization(schema, initialValues);
+  const initialState = react.useMemo(() => ({
+    eventBus,
+    form,
+    initialValues: mergedInitialValues,
+    scene,
+    valueChangeHandlers,
+    virtualFieldNames
+  }), [eventBus, form, mergedInitialValues, scene, valueChangeHandlers, virtualFieldNames]);
+  return /* @__PURE__ */ jsxRuntime.jsx(store.FormStoreProvider, { initialState, children: /* @__PURE__ */ jsxRuntime.jsx(useFormContext.FormContextProvider, { value: formContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    VefFormBaseForwarded,
+    {
+      ref,
+      ...restProps
+    }
+  ) }) });
+}
+const VefForm = react.memo(
+  react.forwardRef(VefFormWrapper),
+  (prevProps, nextProps) => shared.isDeepEqual(
+    shared.omit(prevProps, ["initialValues", "schema"]),
+    shared.omit(nextProps, ["initialValues", "schema"])
+  )
+);
+VefForm.displayName = "VefForm";
+
+exports.default = VefForm;

package/cjs/vef-form/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-form/store.cjs

@@ -0,0 +1,70 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+
+"use strict";
+const {
+  StoreProvider: FormStoreProvider,
+  useStore: useFormStore,
+  useStoreApi: useFormStoreApi
+} = shared.createComponentStore(
+  "Form",
+  (initialState) => (set, get) => ({
+    ...initialState,
+    invokeValueChangeHandlers(values, keys) {
+      const {
+        scene,
+        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,
+              scene,
+              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);
+    },
+    isLoading: false,
+    setIsLoading(isLoading) {
+      set({ isLoading });
+    },
+    showActionButtons: true,
+    setShowActionButtons(showActionButtons) {
+      set({ showActionButtons });
+    }
+  })
+);
+
+exports.FormStoreProvider = FormStoreProvider;
+exports.useFormStore = useFormStore;
+exports.useFormStoreApi = useFormStoreApi;

package/cjs/vef-form/types.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";