@vef-framework/components 1.0.121 → 1.0.123

package/cjs/vef-form/components/form-content.cjs

@@ -0,0 +1,151 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var react$1 = require('react');
+var index = require('../../vef-empty-placeholder/index.cjs');
+var index$2 = require('../../vef-flex/index.cjs');
+var index$3 = require('../../vef-scroll-area/index.cjs');
+var index$1 = require('../../vef-tabs/index.cjs');
+var useComputedValues = require('../hooks/use-computed-values.cjs');
+var store = require('../store.cjs');
+var formGroup = require('./form-group.cjs');
+
+"use strict";
+const scrollbarStyle = react.css`
+  flex: auto;
+  min-height: 0;
+`;
+function VefFormContentBase({
+  schema,
+  showTabs,
+  height
+}) {
+  const computedValues = useComputedValues.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 = react$1.useMemo(() => schema.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, schema]);
+  const groupDomsRef = react$1.useRef({});
+  const [activeGroupKey, setActiveGroupKey] = react$1.useState(showedGroups[0]?.key ?? 0);
+  const handleTabChange = react$1.useCallback((activeKey) => {
+    groupDomsRef.current[activeKey]?.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+      inline: "start"
+    });
+    setActiveGroupKey(activeKey);
+  }, []);
+  const handleScroll = react$1.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 shared.debounce({ delay: 60 }, handler);
+  }, [showTabs]);
+  const [setShowActionButtons] = store.useFormStore((state) => [state.setShowActionButtons]);
+  react$1.useEffect(() => {
+    setShowActionButtons(showedGroups.length > 0);
+  }, [setShowActionButtons, showedGroups.length]);
+  if (showedGroups.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.default, { description: "空表单" });
+  }
+  if (showTabs === "switch") {
+    const items = schema.map(({ key, rows }) => ({
+      key: `${key}`,
+      label: computedValues[`title-${key}`],
+      destroyInactiveTabPane: false,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        formGroup.default,
+        {
+          disabled: computedValues[`disabled-${key}`],
+          rows
+        }
+      )
+    }));
+    return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { items });
+  }
+  if (showTabs === "navigation") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(index$2.default, { vertical: true, css: height === "full" ? shared.styles.fullHeight : void 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          activeKey: `${activeGroupKey}`,
+          items: schema.map(({ key }) => ({
+            key: `${key}`,
+            label: computedValues[`title-${key}`]
+          })),
+          onChange: handleTabChange
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(index$3.default, { css: scrollbarStyle, onScroll: handleScroll, children: schema.map(
+        ({ key, rows }) => /* @__PURE__ */ jsxRuntime.jsx(
+          formGroup.default,
+          {
+            ref: (dom) => {
+              groupDomsRef.current[key] = dom;
+            },
+            disabled: computedValues[`disabled-${key}`],
+            rows,
+            title: computedValues[`title-${key}`]
+          },
+          key
+        )
+      ) })
+    ] });
+  }
+  const groupNodes = schema.map(
+    ({ key, rows }) => /* @__PURE__ */ jsxRuntime.jsx(
+      formGroup.default,
+      {
+        disabled: computedValues[`disabled-${key}`],
+        rows,
+        title: computedValues[`title-${key}`]
+      },
+      key
+    )
+  );
+  if (height === "full") {
+    return /* @__PURE__ */ jsxRuntime.jsx(index$3.default, { onScroll: handleScroll, children: groupNodes });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groupNodes });
+}
+const VefFormContent = react$1.memo(
+  VefFormContentBase,
+  (prevProps, nextProps) => shared.isDeepEqual(
+    shared.omit(prevProps, ["schema"]),
+    shared.omit(nextProps, ["schema"])
+  )
+);
+
+exports.default = VefFormContent;

package/cjs/vef-form/components/form-field.cjs

@@ -0,0 +1,27 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var shared = require('@vef-framework/shared');
+var react = require('react');
+var index = require('./fields/index.cjs');
+
+"use strict";
+function VefFormField(props) {
+  const { name, componentProps: { type } } = props;
+  const FormFieldComponent = react.useMemo(() => {
+    if (type === "Hidden") {
+      return () => null;
+    }
+    const Component = index.fieldMap[type];
+    if (!Component) {
+      throw new shared.VefError(-9, `Unknown form field type: "${type}", please check the type of "${name}" field.`);
+    }
+    return Component;
+  }, [name, type]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldComponent, { ...props });
+}
+
+exports.default = VefFormField;

package/cjs/vef-form/components/form-group.cjs

@@ -0,0 +1,77 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var react$1 = require('react');
+var index$1 = require('../../vef-empty-placeholder/index.cjs');
+var index = require('../../vef-title/index.cjs');
+var useComputedValues = require('../hooks/use-computed-values.cjs');
+var formRow = require('./form-row.cjs');
+
+"use strict";
+const groupStyle = react.css`
+  margin-bottom: ${shared.themeVariables.margin};
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .vef-form-group-content {
+    padding: 0 2px;
+  }
+`;
+function VefFormGroupBase({
+  title,
+  disabled,
+  rows
+}, groupRef) {
+  const computedValues = useComputedValues.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 = react$1.useMemo(() => rows.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, rows]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: groupRef, css: groupStyle, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(index.default, { showBottomLine: true, showLeftBar: true, level: 4, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vef-form-group-content", children: showedRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { description: "空表单组" }) : showedRows.map(
+      ({
+        key,
+        autoExpand: rowAutoExpand,
+        columns
+      }) => /* @__PURE__ */ jsxRuntime.jsx(
+        formRow.default,
+        {
+          autoExpand: rowAutoExpand,
+          columns,
+          disabled: computedValues[`disabled-${key}`],
+          rowKey: key
+        },
+        key
+      )
+    ) })
+  ] });
+}
+const VefFormGroup = react$1.memo(
+  react$1.forwardRef(VefFormGroupBase),
+  (prevProps, nextProps) => shared.isDeepEqual(
+    shared.omit(prevProps, ["rows"]),
+    shared.omit(nextProps, ["rows"])
+  )
+);
+VefFormGroup.displayName = "VefFormGroup";
+
+exports.default = VefFormGroup;

package/cjs/vef-form/components/form-hidden-item.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+var react = require('react');
+var useComputedValues = require('../hooks/use-computed-values.cjs');
+
+"use strict";
+const { Item } = antd.Form;
+function VefFormHiddenItemBase({
+  item
+}) {
+  const { name, show } = item;
+  const [showValue] = useComputedValues.useComputedValues([
+    {
+      key: "show",
+      rawValue: show,
+      defaultValue: true
+    }
+  ]);
+  if (!showValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Item,
+    {
+      hidden: true,
+      name,
+      children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden" })
+    }
+  );
+}
+const VefFormHiddenItem = react.memo(
+  VefFormHiddenItemBase,
+  () => false
+);
+
+exports.default = VefFormHiddenItem;

package/cjs/vef-form/components/form-item.cjs

@@ -0,0 +1,84 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react = require('react');
+var useComputedValues = require('../hooks/use-computed-values.cjs');
+var formField = require('./form-field.cjs');
+
+"use strict";
+const { Item } = antd.Form;
+function VefFormItemBase({
+  item,
+  disabled
+}) {
+  const {
+    name,
+    show,
+    disabled: itemDisabled,
+    label,
+    tip,
+    rules,
+    virtual: _,
+    ...componentProps
+  } = item;
+  const formDisabled = hooks.useContextDisabled();
+  const [showValue, disabledValue, labelValue, tipValue, rulesValue] = useComputedValues.useComputedValues([
+    {
+      key: "show",
+      rawValue: show,
+      defaultValue: true
+    },
+    {
+      key: "disabled",
+      rawValue: itemDisabled,
+      defaultValue: disabled
+    },
+    {
+      key: "label",
+      rawValue: label
+    },
+    {
+      key: "tip",
+      rawValue: tip
+    },
+    {
+      key: "rules",
+      rawValue: rules
+    }
+  ]);
+  if (!showValue) {
+    return null;
+  }
+  const ruleObjects = shared.isArray(rulesValue) ? rulesValue.flatMap((rule) => rule(item)) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Item,
+    {
+      label: labelValue,
+      name,
+      preserve: false,
+      rules: ruleObjects,
+      tooltip: tipValue,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        formField.default,
+        {
+          componentProps,
+          disabled: formDisabled || disabledValue,
+          label: labelValue,
+          name
+        }
+      )
+    }
+  );
+}
+const VefFormItem = react.memo(
+  VefFormItemBase,
+  (prevProps, nextProps) => prevProps.disabled === nextProps.disabled
+);
+
+exports.default = VefFormItem;

package/cjs/vef-form/components/form-row.cjs

@@ -0,0 +1,103 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var shared = require('@vef-framework/shared');
+var react = require('react');
+var index = require('../../vef-grid/index.cjs');
+var index$1 = require('../../vef-grid-item/index.cjs');
+var useColumnsLayout = require('../hooks/use-columns-layout.cjs');
+var useComputedValues = require('../hooks/use-computed-values.cjs');
+var useFormContext = require('../hooks/use-form-context.cjs');
+var formHiddenItem = require('./form-hidden-item.cjs');
+var formItem = require('./form-item.cjs');
+
+"use strict";
+const formItemMinWidth = 240;
+function VefFormRowBase({
+  rowKey,
+  columns,
+  disabled,
+  autoExpand: rowAutoExpand
+}) {
+  const {
+    layoutMode,
+    autoExpand: formAutoExpand,
+    labelPosition,
+    labelWidth
+  } = useFormContext.useFormContext();
+  const formItemMinWidthToUse = labelPosition === "top" ? formItemMinWidth : formItemMinWidth + (labelWidth ?? 80);
+  const [hiddenItems, filteredColumns] = react.useMemo(() => {
+    const hiddenItems2 = [];
+    const filteredColumns2 = [];
+    for (const column of columns) {
+      const { items, ...rest } = column;
+      const filteredItems = [];
+      for (const item of items) {
+        const { type } = item;
+        if (type === "Hidden") {
+          hiddenItems2.push(item);
+        } else {
+          filteredItems.push(item);
+        }
+      }
+      if (filteredItems.length > 0) {
+        filteredColumns2.push({
+          ...rest,
+          items: filteredItems
+        });
+      }
+    }
+    return [hiddenItems2, filteredColumns2];
+  }, [columns]);
+  const computedValues = useComputedValues.useComputedValues(
+    [
+      ...filteredColumns.map(({ key, show }) => ({
+        key: `show-${key}`,
+        rawValue: show,
+        defaultValue: true
+      })),
+      ...filteredColumns.map(({ key, disabled: columnDisabled }) => ({
+        key: `disabled-${key}`,
+        rawValue: columnDisabled,
+        defaultValue: disabled
+      }))
+    ],
+    true
+  );
+  const showedColumns = react.useMemo(() => columns.filter(({ key }) => computedValues[`show-${key}`]), [computedValues, columns]);
+  const layout = useColumnsLayout.useColumnsLayout(rowKey, showedColumns, layoutMode, rowAutoExpand ?? formAutoExpand);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hiddenItems.map((item) => {
+      const { name } = item;
+      return /* @__PURE__ */ jsxRuntime.jsx(formHiddenItem.default, { item }, name);
+    }),
+    showedColumns.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(index.default, { baseWidth: formItemMinWidthToUse, gap: [0, "large"], children: showedColumns.map((column) => {
+      const layoutProps = {};
+      if (layoutMode === "responsive") {
+        const columnsLayout = layout;
+        layoutProps.xs = columnsLayout.xs[column.key];
+        layoutProps.sm = columnsLayout.sm[column.key];
+        layoutProps.md = columnsLayout.md[column.key];
+        layoutProps.lg = columnsLayout.lg[column.key];
+        layoutProps.xl = columnsLayout.xl[column.key];
+        layoutProps.xxl = columnsLayout.xxl[column.key];
+      } else {
+        const columnsLayout = layout;
+        layoutProps.span = columnsLayout[column.key];
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { ...layoutProps, children: column.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(formItem.default, { disabled: disabled || computedValues[`disabled-${column.key}`], item }, item.name)) }, column.key);
+    }) })
+  ] });
+}
+const VefFormRow = react.memo(
+  VefFormRowBase,
+  (prevProps, nextProps) => shared.isDeepEqual(
+    shared.omit(prevProps, ["columns"]),
+    shared.omit(nextProps, ["columns"])
+  )
+);
+
+exports.default = VefFormRow;

package/cjs/vef-form/event.cjs

@@ -0,0 +1,47 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+
+"use strict";
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var _emitter;
+const changeEvent = Symbol("change");
+const submitResultEvent = Symbol("submitResult");
+class FormEventBus {
+  constructor() {
+    /**
+     * The emitter.
+     */
+    __privateAdd(this, _emitter, shared.createEventEmitter());
+  }
+  clear() {
+    __privateGet(this, _emitter).all.clear();
+  }
+  onChange(handler) {
+    __privateGet(this, _emitter).on(changeEvent, handler);
+  }
+  offChange(handler) {
+    __privateGet(this, _emitter).off(changeEvent, handler);
+  }
+  emitChange(value) {
+    __privateGet(this, _emitter).emit(changeEvent, value);
+  }
+  onSubmitResult(handler) {
+    __privateGet(this, _emitter).on(submitResultEvent, handler);
+  }
+  offSubmitResult(handler) {
+    __privateGet(this, _emitter).off(submitResultEvent, handler);
+  }
+  emitSubmitResult(result) {
+    __privateGet(this, _emitter).emit(submitResultEvent, result);
+  }
+}
+_emitter = new WeakMap();
+
+exports.FormEventBus = FormEventBus;

package/cjs/vef-form/helper.cjs

@@ -0,0 +1,18 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+
+"use strict";
+function computeValue(value, values, scene, defaultValue) {
+  if (shared.isFunction(value) && !shared.isInternalFunction(value)) {
+    return value(values, scene);
+  }
+  if (shared.isExpression(value)) {
+    const fn = shared.compileDynamicFn(value, "values", "scene", `return ${value.expression}`);
+    return fn(values, scene);
+  }
+  return value ?? defaultValue;
+}
+
+exports.computeValue = computeValue;

package/cjs/vef-form/hooks/use-action-handlers.cjs

@@ -0,0 +1,133 @@
+"use strict";
+'use strict';
+
+var core = require('@vef-framework/core');
+var shared = require('@vef-framework/shared');
+var react = require('react');
+var store = require('../store.cjs');
+
+"use strict";
+function useActionHandlers({
+  submitApi,
+  submitTip = "提交中...",
+  onBeforeSubmit,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitFailure,
+  onReset
+}) {
+  const [
+    form,
+    scene,
+    eventBus,
+    setIsLoading,
+    virtualFieldNames,
+    getValues,
+    initialValues,
+    invokeValueChangeHandlers
+  ] = store.useFormStore((state) => [
+    state.form,
+    state.scene,
+    state.eventBus,
+    state.setIsLoading,
+    state.virtualFieldNames,
+    state.getValues,
+    state.initialValues,
+    state.invokeValueChangeHandlers
+  ]);
+  const { useApiMutation, stubMutationApi } = core.useApiContext();
+  const { mutate } = useApiMutation(submitApi ?? stubMutationApi);
+  if (!shared.isFunction(onSubmit) && !submitApi) {
+    throw new shared.VefError(-1, "'onSubmit' or 'submitApi' prop is required for VefForm component");
+  }
+  const handleReset = react.useCallback(() => {
+    const values = getValues();
+    form.resetFields();
+    invokeValueChangeHandlers();
+    eventBus.emitChange(initialValues);
+    onReset?.(values, scene);
+  }, [
+    form,
+    getValues,
+    onReset,
+    scene,
+    invokeValueChangeHandlers,
+    initialValues,
+    eventBus
+  ]);
+  const handleSubmit = react.useMemo(() => {
+    if (shared.isFunction(onSubmit)) {
+      if (submitApi) {
+        console.warn("'submitApi' prop is ignored when 'onSubmit' prop is provided in VefForm component");
+      }
+      return async (values) => {
+        setIsLoading(true);
+        let valuesToUse = values;
+        let closeLoading = null;
+        try {
+          const submitTipToUse = shared.isFunction(submitTip) ? submitTip(values, scene) : submitTip;
+          closeLoading = shared.showLoadingMessage(submitTipToUse);
+          if (shared.isFunction(onBeforeSubmit)) {
+            valuesToUse = await onBeforeSubmit(valuesToUse, scene);
+          }
+          const valuesToSubmit = shared.omit(valuesToUse, virtualFieldNames);
+          await onSubmit(valuesToSubmit, scene);
+          eventBus.emitSubmitResult(true);
+        } catch (error) {
+          eventBus.emitSubmitResult(false);
+          throw error;
+        } finally {
+          setIsLoading(false);
+          closeLoading?.();
+        }
+      };
+    }
+    return async (values) => {
+      setIsLoading(true);
+      let valuesToUse = values;
+      let closeLoading = null;
+      try {
+        const submitTipToUse = shared.isFunction(submitTip) ? submitTip(values, scene) : submitTip;
+        closeLoading = shared.showLoadingMessage(submitTipToUse);
+        if (shared.isFunction(onBeforeSubmit)) {
+          valuesToUse = await onBeforeSubmit(values, scene);
+        }
+        const toSubmitValues = shared.omit(valuesToUse, virtualFieldNames);
+        const apiResponse = await mutate(toSubmitValues);
+        (onSubmitSuccess ?? (({ message }) => {
+          shared.showSuccessMessage(message);
+        }))(apiResponse, valuesToUse, scene);
+        eventBus.emitSubmitResult(true);
+      } catch (error) {
+        eventBus.emitSubmitResult(false);
+        onSubmitFailure?.(error, valuesToUse, scene);
+      } finally {
+        setIsLoading(false);
+        closeLoading?.();
+      }
+    };
+  }, [
+    onSubmit,
+    submitApi,
+    setIsLoading,
+    submitTip,
+    scene,
+    onBeforeSubmit,
+    virtualFieldNames,
+    eventBus,
+    mutate,
+    onSubmitSuccess,
+    onSubmitFailure
+  ]);
+  const handleSubmitFailed = react.useCallback(({ values, errorFields }) => {
+    eventBus.emitSubmitResult(false);
+    onSubmitFailure?.(new shared.VefError(-1, errorFields.flatMap((field) => field.errors).join(", ")), values, scene);
+  }, [eventBus, onSubmitFailure, scene]);
+  return {
+    handleReset,
+    handleSubmit,
+    handleSubmitFailed
+  };
+}
+
+exports.useActionHandlers = useActionHandlers;