@vef-framework/components 1.0.122 → 1.0.124

package/cjs/vef-form/components/fields/select.cjs

@@ -0,0 +1,243 @@
+"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-select/index.cjs');
+var useComputedValues = require('../../hooks/use-computed-values.cjs');
+var store = require('../../store.cjs');
+
+"use strict";
+function Select({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "SingleSelect" && componentProps.type !== "MultipleSelect") {
+    throw new shared.VefError(-9, `Oops! Something went wrong. The type of the form field is not "Select", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onFocus,
+    onBlur,
+    onClear,
+    onSelect,
+    onDeselect,
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    maxCount,
+    clearable = false,
+    filterable,
+    filterFromRemote,
+    placeholder,
+    grouped,
+    keywordKey,
+    valuesKey,
+    fallbackOptionsApi,
+    fallbackOptionsApiParams,
+    resolveFallbackOptions,
+    renderOption,
+    labelKey,
+    valueKey,
+    descriptionKey,
+    disabledKey,
+    childrenKey,
+    defaultToFirst,
+    api,
+    apiParams,
+    apiEnabled,
+    data,
+    dataDictionaryKey,
+    placeholderData,
+    keepPreviousData,
+    staleTime,
+    onFetched
+  } = componentProps;
+  const [
+    placeholderValue,
+    maxCountValue,
+    keywordKeyValue,
+    valuesKeyValue,
+    fallbackOptionsApiValue,
+    fallbackOptionsApiParamsValue,
+    resolveFallbackOptionsValue,
+    apiValue,
+    apiParamsValue,
+    apiEnabledValue,
+    dataValue,
+    dataDictionaryKeyValue
+  ] = useComputedValues.useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? shared.isString(label) ? `请选择${label}` : "请选择" : void 0
+    },
+    {
+      key: "maxCount",
+      rawValue: maxCount
+    },
+    {
+      key: "keywordKey",
+      rawValue: keywordKey
+    },
+    {
+      key: "valuesKey",
+      rawValue: valuesKey
+    },
+    {
+      key: "fallbackOptionsApi",
+      rawValue: fallbackOptionsApi
+    },
+    {
+      key: "fallbackOptionsApiParams",
+      rawValue: fallbackOptionsApiParams
+    },
+    {
+      key: "resolveFallbackOptions",
+      rawValue: resolveFallbackOptions
+    },
+    {
+      key: "api",
+      rawValue: api
+    },
+    {
+      key: "apiParams",
+      rawValue: apiParams
+    },
+    {
+      key: "apiEnabled",
+      rawValue: apiEnabled
+    },
+    {
+      key: "data",
+      rawValue: data
+    },
+    {
+      key: "dataDictionaryKey",
+      rawValue: dataDictionaryKey
+    }
+  ]);
+  const [form, scene, setValues] = store.useFormStore((state) => [state.form, state.scene, state.setValues]);
+  const events = react.useMemo(() => {
+    const events2 = {};
+    if (shared.isFunction(onFocus)) {
+      events2.onFocus = (value2, option) => {
+        const values = form.getFieldsValue();
+        onFocus(value2, {
+          scene,
+          values,
+          setValues,
+          option
+        });
+      };
+    }
+    if (shared.isFunction(onBlur)) {
+      events2.onBlur = (value2, option) => {
+        const values = form.getFieldsValue();
+        onBlur(value2, {
+          scene,
+          values,
+          setValues,
+          option
+        });
+      };
+    }
+    if (clearable && shared.isFunction(onClear)) {
+      events2.onClear = () => {
+        onClear({
+          scene,
+          values: form.getFieldsValue(),
+          setValues
+        });
+      };
+    }
+    events2.onChange = (value2, option) => {
+      onChange?.(value2);
+      if (shared.isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          scene,
+          values,
+          setValues,
+          option
+        });
+      }
+    };
+    if (shared.isFunction(onSelect)) {
+      events2.onSelect = (value2, option) => {
+        onSelect(value2, {
+          scene,
+          values: form.getFieldsValue(),
+          setValues,
+          option
+        });
+      };
+    }
+    if (shared.isFunction(onDeselect)) {
+      events2.onDeselect = (value2, option) => {
+        onDeselect(value2, {
+          scene,
+          values: form.getFieldsValue(),
+          setValues,
+          option
+        });
+      };
+    }
+    return events2;
+  }, [
+    clearable,
+    form,
+    onBlur,
+    onChange,
+    onClear,
+    onDeselect,
+    onFocus,
+    onSelect,
+    onValueChange,
+    scene,
+    setValues
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      api: apiValue,
+      apiEnabled: apiEnabledValue,
+      apiParams: apiParamsValue,
+      childrenKey,
+      clearable,
+      data: dataValue,
+      dataDictionaryKey: dataDictionaryKeyValue,
+      defaultToFirst,
+      descriptionKey,
+      disabled,
+      disabledKey,
+      fallbackOptionsApi: fallbackOptionsApiValue,
+      fallbackOptionsApiParams: fallbackOptionsApiParamsValue,
+      filterable,
+      filterFromRemote,
+      grouped,
+      keepPreviousData,
+      keywordKey: keywordKeyValue,
+      labelKey,
+      maxCount: maxCountValue,
+      multiple: componentProps.type === "MultipleSelect",
+      placeholder: placeholderValue,
+      placeholderData,
+      renderOption,
+      resolveFallbackOptions: resolveFallbackOptionsValue,
+      staleTime,
+      value,
+      valueKey,
+      valuesKey: valuesKeyValue,
+      onFetched,
+      ...events
+    }
+  );
+}
+
+exports.default = Select;

package/cjs/vef-form/components/fields/textarea.cjs

@@ -0,0 +1,114 @@
+"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-textarea/index.cjs');
+var useComputedValues = require('../../hooks/use-computed-values.cjs');
+var store = require('../../store.cjs');
+
+"use strict";
+function Textarea({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "Textarea") {
+    throw new shared.VefError(-9, `Oops! Something went wrong. The type of the form field is not "Textarea", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onEnterKeyPress,
+    onFocus,
+    onBlur,
+    maxLength,
+    showCount,
+    clearable = false,
+    placeholder
+  } = componentProps;
+  const [form, scene, setValues] = store.useFormStore((state) => [state.form, state.scene, state.setValues]);
+  const [placeholderValue, maxLengthValue] = useComputedValues.useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? shared.isString(label) ? `请输入${label}` : "请输入" : void 0
+    },
+    {
+      key: "maxLength",
+      rawValue: maxLength
+    }
+  ]);
+  const events = react.useMemo(() => {
+    const events2 = {};
+    if (shared.isFunction(onFocus)) {
+      events2.onFocus = (value2) => {
+        const values = form.getFieldsValue();
+        onFocus(value2, {
+          scene,
+          values,
+          setValues
+        });
+      };
+    }
+    if (shared.isFunction(onBlur)) {
+      events2.onBlur = (value2) => {
+        const values = form.getFieldsValue();
+        onBlur(value2, {
+          scene,
+          values,
+          setValues
+        });
+      };
+    }
+    events2.onChange = (value2) => {
+      onChange?.(value2);
+      if (shared.isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          scene,
+          values,
+          setValues
+        });
+      }
+    };
+    if (shared.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__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      clearable,
+      disabled,
+      maxLength: maxLengthValue,
+      placeholder: placeholderValue,
+      showCount,
+      value,
+      ...events
+    }
+  );
+}
+
+exports.default = Textarea;

package/cjs/vef-form/components/fields/tree-select.cjs

@@ -0,0 +1,239 @@
+"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-tree-select/index.cjs');
+var useComputedValues = require('../../hooks/use-computed-values.cjs');
+var store = require('../../store.cjs');
+
+"use strict";
+function TreeSelect({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "TreeSingleSelect" && componentProps.type !== "TreeMultipleSelect") {
+    throw new shared.VefError(-9, `Oops! Something went wrong. The type of the form field is not "TreeSelect", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onFocus,
+    onBlur,
+    onClear,
+    onSelect,
+    onDeselect,
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    maxCount,
+    clearable = false,
+    filterable,
+    filterFromRemote,
+    placeholder,
+    keywordKey,
+    valuesKey,
+    fallbackOptionsApi,
+    fallbackOptionsApiParams,
+    resolveFallbackOptions,
+    labelKey,
+    valueKey,
+    descriptionKey,
+    disabledKey,
+    childrenKey,
+    defaultToFirst,
+    api,
+    apiParams,
+    apiEnabled,
+    data,
+    dataDictionaryKey,
+    placeholderData,
+    keepPreviousData,
+    staleTime,
+    onFetched
+  } = componentProps;
+  const [
+    placeholderValue,
+    maxCountValue,
+    keywordKeyValue,
+    valuesKeyValue,
+    fallbackOptionsApiValue,
+    fallbackOptionsApiParamsValue,
+    resolveFallbackOptionsValue,
+    apiValue,
+    apiParamsValue,
+    apiEnabledValue,
+    dataValue,
+    dataDictionaryKeyValue
+  ] = useComputedValues.useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? shared.isString(label) ? `请选择${label}` : "请选择" : void 0
+    },
+    {
+      key: "maxCount",
+      rawValue: maxCount
+    },
+    {
+      key: "keywordKey",
+      rawValue: keywordKey
+    },
+    {
+      key: "valuesKey",
+      rawValue: valuesKey
+    },
+    {
+      key: "fallbackOptionsApi",
+      rawValue: fallbackOptionsApi
+    },
+    {
+      key: "fallbackOptionsApiParams",
+      rawValue: fallbackOptionsApiParams
+    },
+    {
+      key: "resolveFallbackOptions",
+      rawValue: resolveFallbackOptions
+    },
+    {
+      key: "api",
+      rawValue: api
+    },
+    {
+      key: "apiParams",
+      rawValue: apiParams
+    },
+    {
+      key: "apiEnabled",
+      rawValue: apiEnabled
+    },
+    {
+      key: "data",
+      rawValue: data
+    },
+    {
+      key: "dataDictionaryKey",
+      rawValue: dataDictionaryKey
+    }
+  ]);
+  const [form, scene, setValues] = store.useFormStore((state) => [state.form, state.scene, state.setValues]);
+  const events = react.useMemo(() => {
+    const events2 = {};
+    if (shared.isFunction(onFocus)) {
+      events2.onFocus = (value2, option) => {
+        const values = form.getFieldsValue();
+        onFocus(value2, {
+          scene,
+          values,
+          setValues,
+          option
+        });
+      };
+    }
+    if (shared.isFunction(onBlur)) {
+      events2.onBlur = (value2, option) => {
+        const values = form.getFieldsValue();
+        onBlur(value2, {
+          scene,
+          values,
+          setValues,
+          option
+        });
+      };
+    }
+    if (clearable && shared.isFunction(onClear)) {
+      events2.onClear = () => {
+        onClear({
+          scene,
+          values: form.getFieldsValue(),
+          setValues
+        });
+      };
+    }
+    events2.onChange = (value2, option) => {
+      onChange?.(value2);
+      if (shared.isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          scene,
+          values,
+          setValues,
+          option
+        });
+      }
+    };
+    if (shared.isFunction(onSelect)) {
+      events2.onSelect = (value2, option) => {
+        onSelect(value2, {
+          scene,
+          values: form.getFieldsValue(),
+          setValues,
+          option
+        });
+      };
+    }
+    if (shared.isFunction(onDeselect)) {
+      events2.onDeselect = (value2, option) => {
+        onDeselect(value2, {
+          scene,
+          values: form.getFieldsValue(),
+          setValues,
+          option
+        });
+      };
+    }
+    return events2;
+  }, [
+    clearable,
+    form,
+    onBlur,
+    onChange,
+    onClear,
+    onDeselect,
+    onFocus,
+    onSelect,
+    onValueChange,
+    scene,
+    setValues
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      api: apiValue,
+      apiEnabled: apiEnabledValue,
+      apiParams: apiParamsValue,
+      childrenKey,
+      clearable,
+      data: dataValue,
+      dataDictionaryKey: dataDictionaryKeyValue,
+      defaultToFirst,
+      descriptionKey,
+      disabled,
+      disabledKey,
+      fallbackOptionsApi: fallbackOptionsApiValue,
+      fallbackOptionsApiParams: fallbackOptionsApiParamsValue,
+      filterable,
+      filterFromRemote,
+      keepPreviousData,
+      keywordKey: keywordKeyValue,
+      labelKey,
+      maxCount: maxCountValue,
+      multiple: componentProps.type === "TreeMultipleSelect",
+      placeholder: placeholderValue,
+      placeholderData,
+      resolveFallbackOptions: resolveFallbackOptionsValue,
+      staleTime,
+      value,
+      valueKey,
+      valuesKey: valuesKeyValue,
+      onFetched,
+      ...events
+    }
+  );
+}
+
+exports.default = TreeSelect;

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

@@ -0,0 +1,63 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var Icon = require('@ant-design/icons');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react$1 = require('react');
+var index$1 = require('../../vef-button/index.cjs');
+var index = require('../../vef-flex/index.cjs');
+var store = require('../store.cjs');
+
+"use strict";
+const { Item } = antd.Form;
+const defaultSubmissionButtonConfig = {
+  text: "提交",
+  icon: /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckOutlined, {})
+};
+const defaultResetButtonConfig = {
+  text: "重置"
+};
+const buttonContainerStyle = react.css`
+  padding: ${shared.themeVariables.padding} 0;
+`;
+function VefFormActionsBase({
+  submissionButton = defaultSubmissionButtonConfig,
+  resetButton = defaultResetButtonConfig,
+  handleReset
+}) {
+  const [isLoading, showActionButtons] = store.useFormStore((state) => [state.isLoading, state.showActionButtons]);
+  if (!showActionButtons || !submissionButton && !resetButton) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.default, { css: buttonContainerStyle, gap: "medium", justify: "flex-end", children: [
+    resetButton && /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        color: "default",
+        variant: "filled",
+        onClick: handleReset,
+        ...shared.omit(resetButton, ["text"]),
+        children: resetButton.text
+      }
+    ),
+    submissionButton && /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        color: "primary",
+        loading: isLoading,
+        type: "submit",
+        ...shared.omit(submissionButton, ["text"]),
+        children: submissionButton.text
+      }
+    )
+  ] }) });
+}
+const VefFormActions = react$1.memo(VefFormActionsBase);
+VefFormActions.displayName = "VefFormActions";
+
+exports.default = VefFormActions;