@pisell/materials 1.0.449 → 1.0.451

package/es/components/tabs/index.js

@@ -132,9 +132,6 @@ var Tabs = /*#__PURE__*/function (_Component) {
         // renderTabBar: this.renderIconLabelTabBar,
         // type: 'line',
       };
-      console.log('%c [ type ]-118', 'font-size:13px; background:pink; color:#bf2c9f;', type);
-      console.log('%c [ props ]-123', 'font-size:13px; background:pink; color:#bf2c9f;', props);
-      console.log('%c [ otherProps ]-124', 'font-size:13px; background:pink; color:#bf2c9f;', otherProps);
       if (type === 'line') {
         items = items.map(function (item) {
           return _objectSpread(_objectSpread({}, item), {}, {
@@ -151,7 +148,6 @@ var Tabs = /*#__PURE__*/function (_Component) {
           });
         });
       }
-      console.log('%c [ items ]-142', 'font-size:13px; background:pink; color:#bf2c9f;', items);
       return /*#__PURE__*/React.createElement(OriginalTabs, _extends({}, props, otherProps, {
         items: items,
         activeKey: activeKey,

package/es/hooks/useSetRequest.d.ts

@@ -0,0 +1,2 @@
+declare const useSetRequest: () => void;
+export default useSetRequest;

package/es/hooks/useSetRequest.js

@@ -0,0 +1,8 @@
+import useEngineContext from "./useEngineContext";
+import { request } from "../components/table/utils";
+var useSetRequest = function useSetRequest() {
+  var _context$appHelper, _context$appHelper$ut;
+  var context = useEngineContext();
+  request.setRequest((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : (_context$appHelper$ut = _context$appHelper.utils) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.request);
+};
+export default useSetRequest;

package/es/index.d.ts

@@ -122,3 +122,16 @@ export { default as Collapse } from './components/collapse';
 export { default as PisellStatistic } from './components/pisellStatistic';
 export { default as PisellWalletCard } from './components/pisellWalletCard';
 export { default as PisellUpload } from './components/pisellUpload';
+export { ColorPicker } from 'antd';
+export { default as DataSourceForm } from './components/dataSourceComponents/dataSourceForm';
+export { default as FormGroup } from './components/dataSourceComponents/dataSourceForm/group';
+export { default as SubmitButton } from './components/dataSourceComponents/dataSourceForm/submitButton';
+export { default as FormItemCheckbox } from './components/dataSourceComponents/fields/Checkbox';
+export { default as FormItemColorPicker } from './components/dataSourceComponents/fields/ColorPicker';
+export { default as FormItemDatePicker } from './components/dataSourceComponents/fields/DatePicker';
+export { default as FormItemInput } from './components/dataSourceComponents/fields/Input';
+export { default as FormItemInputNumber } from './components/dataSourceComponents/fields/InputNumber';
+export { default as FormItemRadio } from './components/dataSourceComponents/fields/Radio';
+export { default as FormItemSelect } from './components/dataSourceComponents/fields/Select';
+export { default as FormItemTimePicker } from './components/dataSourceComponents/fields/TimePicker';
+export { default as DataSourceTable } from './components/dataSourceComponents/dataSourceTable';

package/es/index.js

@@ -25,6 +25,8 @@ export { Grid } from 'antd';
 
 export { Image } from 'antd';
 export { InputNumber } from 'antd';
+// export { default as InputNumber } from './components/dataSourceForm/fields/InputNumber';
+
 export { message } from 'antd';
 export { Menu } from 'antd';
 export { Mentions } from 'antd';
@@ -146,4 +148,17 @@ export { default as ProductCard } from "./components/productCard";
 export { default as Collapse } from "./components/collapse";
 export { default as PisellStatistic } from "./components/pisellStatistic";
 export { default as PisellWalletCard } from "./components/pisellWalletCard";
-export { default as PisellUpload } from "./components/pisellUpload";
+export { default as PisellUpload } from "./components/pisellUpload";
+export { ColorPicker } from 'antd';
+export { default as DataSourceForm } from "./components/dataSourceComponents/dataSourceForm";
+export { default as FormGroup } from "./components/dataSourceComponents/dataSourceForm/group";
+export { default as SubmitButton } from "./components/dataSourceComponents/dataSourceForm/submitButton";
+export { default as FormItemCheckbox } from "./components/dataSourceComponents/fields/Checkbox";
+export { default as FormItemColorPicker } from "./components/dataSourceComponents/fields/ColorPicker";
+export { default as FormItemDatePicker } from "./components/dataSourceComponents/fields/DatePicker";
+export { default as FormItemInput } from "./components/dataSourceComponents/fields/Input";
+export { default as FormItemInputNumber } from "./components/dataSourceComponents/fields/InputNumber";
+export { default as FormItemRadio } from "./components/dataSourceComponents/fields/Radio";
+export { default as FormItemSelect } from "./components/dataSourceComponents/fields/Select";
+export { default as FormItemTimePicker } from "./components/dataSourceComponents/fields/TimePicker";
+export { default as DataSourceTable } from "./components/dataSourceComponents/dataSourceTable";

package/es/utils/index.d.ts

@@ -1,3 +1,4 @@
 export declare const isBrowser: boolean;
 export declare const getCssNumber: (val: string | number) => string;
 export declare function uuid(): string;
+export * from './mergeWith';

package/es/utils/index.js

@@ -15,4 +15,5 @@ export var getCssNumber = function getCssNumber(val) {
 };
 export function uuid() {
   return (Math.random() * 1e6 >> 0).toString(36);
-}
+}
+export * from "./mergeWith";

package/es/utils/mergeWith.d.ts

@@ -0,0 +1 @@
+export declare function mergeWith(obj: any, source: any, customizer: any): any;

package/es/utils/mergeWith.js

@@ -0,0 +1,31 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+export function mergeWith(obj, source, customizer) {
+  if (typeof customizer !== 'function') {
+    throw new Error('Customizer must be a function');
+  }
+  if (!isObject(obj) || !isObject(source)) {
+    return obj;
+  }
+  for (var key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      var objValue = obj[key];
+      var srcValue = source[key];
+      var customValue = customizer(objValue, srcValue, key, obj, source);
+
+      // 如果自定义方法返回 `undefined`，使用默认合并逻辑
+      if (customValue === undefined) {
+        if (isObject(objValue) && isObject(srcValue)) {
+          obj[key] = mergeWith(objValue, srcValue, customizer);
+        } else {
+          obj[key] = srcValue;
+        }
+      } else {
+        obj[key] = customValue;
+      }
+    }
+  }
+  return obj;
+}
+function isObject(value) {
+  return value && _typeof(value) === 'object' && !Array.isArray(value);
+}

package/lib/components/collapse/index.d.ts

@@ -1,6 +1,15 @@
 import React from 'react';
 import './index.less';
-declare const Collapse: (props: {
+interface CollapseProps {
+    panelBackground?: string;
+    panelMarginBottom?: string | 0;
+    panelBorderRadius?: string | 0;
+    items: any[];
+    showHeader?: boolean;
+    headerColor?: string | '#101828';
+    headerFontSize?: string | 14;
+    expandIcon?: any;
     [key: string]: any;
-}) => React.JSX.Element;
+}
+declare const Collapse: React.FC<CollapseProps>;
 export default Collapse;

package/lib/components/collapse/index.js

@@ -37,7 +37,17 @@ var import_antd = require("antd");
 var import_styled_components = __toESM(require("styled-components"));
 var import_index = require("./index.less");
 var Collapse = (props) => {
-  const { ...other } = props;
+  const {
+    panelBackground,
+    panelMarginBottom,
+    panelBorderRadius,
+    items,
+    showHeader,
+    headerColor,
+    headerFontSize,
+    expandIcon,
+    ...rest
+  } = props;
   const CustomCollapse = (0, import_styled_components.default)(import_antd.Collapse)`
     .pisell-lowcode-collapse-header {
       display: flex !important;
@@ -45,43 +55,39 @@ var Collapse = (props) => {
     }
 
     .pisell-lowcode-collapse-content {
-      background-color: ${(other == null ? void 0 : other.panelBackground) ? "transparent" : "#ffffff"};
-      border-top: ${(other == null ? void 0 : other.panelBackground) ? "0" : "1px solid #D0D5DD"};
+      background-color: ${panelBackground ? "transparent" : "#ffffff"};
+      border-top: ${panelBackground ? "0" : "1px solid #D0D5DD"};
     }
   `;
   const panelStyle = {
-    marginBottom: other == null ? void 0 : other.panelMarginBottom,
-    background: other == null ? void 0 : other.panelBackground,
-    borderRadius: other == null ? void 0 : other.panelBorderRadius
+    marginBottom: panelMarginBottom,
+    background: panelBackground,
+    borderRadius: panelBorderRadius
   };
-  const items = (0, import_react.useMemo)(() => {
-    var _a;
-    return (_a = other == null ? void 0 : other.children) == null ? void 0 : _a.map((item) => {
-      var _a2, _b;
+  const itemsMap = (0, import_react.useMemo)(() => {
+    return items == null ? void 0 : items.map((item) => {
       return {
-        ...item == null ? void 0 : item.props,
-        label: (other == null ? void 0 : other.showHeader) ? /* @__PURE__ */ import_react.default.createElement(
+        ...item,
+        label: showHeader ? /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
             style: {
-              color: other == null ? void 0 : other.headerColor,
-              fontSize: other == null ? void 0 : other.headerFontSize
+              color: headerColor,
+              fontSize: headerFontSize
             }
           },
-          (_a2 = item == null ? void 0 : item.props) == null ? void 0 : _a2.header
+          item == null ? void 0 : item.label
         ) : null,
-        key: item == null ? void 0 : item.key,
-        children: (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children,
         style: panelStyle
       };
     });
-  }, [other]);
+  }, [rest]);
   return /* @__PURE__ */ import_react.default.createElement(
     CustomCollapse,
     {
-      ...other,
-      expandIcon: (other == null ? void 0 : other.expandIcon) ? () => other == null ? void 0 : other.expandIcon : void 0,
-      items
+      ...rest,
+      expandIcon: expandIcon ? () => expandIcon : void 0,
+      items: itemsMap
     }
   );
 };

package/lib/components/colorPicker/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerProps } from 'antd';
+declare const ColorPicker: (props: ColorPickerProps) => React.JSX.Element;
+export default ColorPicker;

package/lib/components/{productCard/components/Holder → colorPicker}/index.js

@@ -26,17 +26,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/productCard/components/Holder/index.tsx
-var Holder_exports = {};
-__export(Holder_exports, {
-  default: () => Holder_default
+// src/components/colorPicker/index.tsx
+var colorPicker_exports = {};
+__export(colorPicker_exports, {
+  default: () => colorPicker_default
 });
-module.exports = __toCommonJS(Holder_exports);
+module.exports = __toCommonJS(colorPicker_exports);
 var import_react = __toESM(require("react"));
-var import_Divider = __toESM(require("../Divider"));
-var import_index = require("./index.less");
-var prefix = "pisell-lowcode-";
-var Holder = ({ d }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Divider.default, null), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}product-holder-wrap` }, d == null ? void 0 : d.holder));
+var import_antd = require("antd");
+var ColorPicker = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ColorPicker, { ...props });
 };
-var Holder_default = Holder;
+var colorPicker_default = ColorPicker;

package/lib/components/dataSourceComponents/dataSourceForm/formItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FormItem: (props: any) => React.JSX.Element;
+export default FormItem;

package/lib/components/dataSourceComponents/dataSourceForm/formItem.js

@@ -0,0 +1,59 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/dataSourceForm/formItem.tsx
+var formItem_exports = {};
+__export(formItem_exports, {
+  default: () => formItem_default
+});
+module.exports = __toCommonJS(formItem_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_useDataSource = __toESM(require("../hooks/useDataSource"));
+var import_useFormSetting = __toESM(require("./provider/hooks/useFormSetting"));
+var import_form = __toESM(require("../../form"));
+var FormItem = (props) => {
+  var _a;
+  const { children, name, label: propsLabel, mode: propsMode, ...other } = props;
+  const { dataSource } = (0, import_useDataSource.default)();
+  const fields = dataSource == null ? void 0 : dataSource.fields;
+  const { mode: globalMode } = (0, import_useFormSetting.default)();
+  const field = fields == null ? void 0 : fields.find((item) => item.name === name);
+  const label = propsLabel || ((_a = field == null ? void 0 : field.uiSchema) == null ? void 0 : _a.title) || name;
+  const effectiveMode = propsMode || globalMode;
+  const renderChildren = (0, import_react.useMemo)(() => {
+    if ((0, import_utils.isArr)(children) && children.every(import_react.isValidElement)) {
+      return children.map(
+        (c) => (0, import_react.cloneElement)(c, { renderMode: effectiveMode })
+      );
+    }
+    return children;
+  }, [children, effectiveMode]);
+  return /* @__PURE__ */ import_react.default.createElement(import_form.default.Item, { name, label, ...other }, renderChildren);
+};
+var formItem_default = FormItem;

package/lib/components/dataSourceComponents/dataSourceForm/group/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.less';
+export interface FormGroupProps {
+    title: string;
+    description: string;
+    showTitle: boolean;
+    showDescription: boolean;
+    showBackgroundColor: boolean;
+    backgroundColor: string;
+    children: React.ReactNode;
+}
+/**
+ * @title: 表单分组组件
+ * @description: 用于在表单中划分分组，支持标题、描述、背景色等配置
+ * @return: *
+ * @Author: shengjie.zuo
+ * @Date: 2024-11-25 17:14:25
+ */
+declare const FormGroup: (props: FormGroupProps) => React.JSX.Element;
+export default FormGroup;

package/lib/components/dataSourceComponents/dataSourceForm/group/index.js

@@ -0,0 +1,80 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/dataSourceForm/group/index.tsx
+var group_exports = {};
+__export(group_exports, {
+  default: () => group_default
+});
+module.exports = __toCommonJS(group_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_useFormSetting = __toESM(require("../provider/hooks/useFormSetting"));
+var import_usePisellConfig = __toESM(require("../../../pisell-config-provider/hooks/usePisellConfig"));
+var import_index = require("./index.less");
+var FormGroup = (props) => {
+  const {
+    title,
+    description,
+    showTitle: propsShowTitle,
+    showDescription: propsShowDescription,
+    showBackgroundColor,
+    backgroundColor: propsBackgroundColor,
+    children
+  } = props;
+  const { groupInfoPosition: formSettingGroupInfoPosition } = (0, import_useFormSetting.default)();
+  const { platform } = (0, import_usePisellConfig.default)();
+  const groupInfoPosition = (0, import_react.useMemo)(() => {
+    const isMobile = platform === "h5";
+    return isMobile ? "top" : formSettingGroupInfoPosition;
+  }, [platform, formSettingGroupInfoPosition]);
+  const backgroundColor = showBackgroundColor ? propsBackgroundColor : void 0;
+  const wrapperStyle = (0, import_react.useMemo)(() => {
+    return {
+      backgroundColor: groupInfoPosition === "side" ? void 0 : backgroundColor
+    };
+  }, [groupInfoPosition, backgroundColor]);
+  const contentStyle = (0, import_react.useMemo)(() => {
+    return {
+      backgroundColor: groupInfoPosition === "side" ? backgroundColor : void 0
+    };
+  }, [groupInfoPosition, backgroundColor]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: wrapperStyle,
+      className: (0, import_classnames.default)("pisell-lowcode-data-source-form-group", {
+        "pisell-lowcode-data-source-form-group-top": groupInfoPosition === "top",
+        "pisell-lowcode-data-source-form-group-side": groupInfoPosition === "side"
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-info" }, propsShowTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-title" }, title), propsShowDescription && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-description" }, description)),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-content", style: contentStyle }, children)
+  );
+};
+var group_default = FormGroup;

package/lib/components/dataSourceComponents/dataSourceForm/group/index.less

@@ -0,0 +1,42 @@
+.pisell-lowcode-data-source-form-group {
+  display: flex;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid var(--Gray-300, #d0d5dd);
+  margin-bottom: 24px;
+  .pisell-lowcode-data-source-form-group-title {
+    font-size: 18px;
+    color: #000;
+    font-weight: 600;
+    line-height: 24px;
+  }
+  .pisell-lowcode-data-source-form-group-description {
+    font-size: 14px;
+    color: #000;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  &-top {
+    flex-direction: column;
+  }
+  &-side {
+    flex-direction: row;
+    border: none;
+    padding: 0;
+    .pisell-lowcode-data-source-form-group-content {
+      border: 1px solid var(--Gray-300, #d0d5dd);
+      border-radius: 8px;
+      padding: 20px;
+    }
+  }
+  &-info {
+    width: 320px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 20px;
+  }
+  &-content {
+    flex: 1;
+  }
+}

package/lib/components/dataSourceComponents/dataSourceForm/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: any;
+export default _default;

package/lib/components/dataSourceComponents/dataSourceForm/index.js

@@ -0,0 +1,103 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/dataSourceForm/index.tsx
+var dataSourceForm_exports = {};
+__export(dataSourceForm_exports, {
+  default: () => dataSourceForm_default
+});
+module.exports = __toCommonJS(dataSourceForm_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_DataSourceProvider = __toESM(require("../provider/fields/DataSourceProvider"));
+var import_form = __toESM(require("../../form"));
+var import_FormSettingProvider = __toESM(require("./provider/formSetting/FormSettingProvider"));
+var import_useActions = __toESM(require("../hooks/useActions"));
+var import_useSetRequest = __toESM(require("../../../hooks/useSetRequest"));
+var import_index = require("./index.less");
+var DataSourceForm = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      title,
+      description,
+      dataSource,
+      showTitle,
+      showDescription,
+      groupInfoPosition,
+      variables,
+      mode,
+      children,
+      currentValue,
+      className,
+      ...others
+    } = props;
+    (0, import_useSetRequest.default)();
+    const formRef = (0, import_react.useRef)(null);
+    const { get } = (0, import_useActions.default)({
+      currentValue,
+      dataSource
+    });
+    (0, import_react.useEffect)(() => {
+      var _a;
+      (_a = formRef.current) == null ? void 0 : _a.resetFields();
+    }, [dataSource]);
+    (0, import_react.useEffect)(() => {
+      document.body.id = "body";
+    }, []);
+    (0, import_react.useImperativeHandle)(ref, () => formRef.current);
+    (0, import_react.useEffect)(() => {
+      if (["edit", "view"].includes(mode || "") && dataSource) {
+        get().then((res) => {
+          var _a;
+          (_a = formRef.current) == null ? void 0 : _a.setFieldsValue(res);
+        });
+      }
+    }, [get, mode, dataSource]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_FormSettingProvider.default,
+      {
+        mode,
+        groupInfoPosition,
+        currentValue
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_DataSourceProvider.default, { dataSource }, /* @__PURE__ */ import_react.default.createElement(
+        import_form.default,
+        {
+          ...others,
+          className: (0, import_classnames.default)("pisell-lowcode-data-source-form", className),
+          ref: formRef,
+          preserve: true
+        },
+        (title || description) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-header" }, showTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-title" }, title), showDescription && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-data-source-form-description" }, description)),
+        children
+      ))
+    );
+  }
+);
+DataSourceForm.List = import_form.default.List;
+var dataSourceForm_default = DataSourceForm;

package/lib/components/dataSourceComponents/dataSourceForm/index.less

@@ -0,0 +1,24 @@
+.pisell-lowcode-data-source-form {
+  padding: 20px;
+}
+
+.pisell-lowcode-data-source-form-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 24px;
+}
+
+.pisell-lowcode-data-source-form-title {
+  color: #000;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+}
+
+.pisell-lowcode-data-source-form-description {
+  color: #000;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}

package/lib/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ModeType } from '../../type';
+export interface FormSettingContextType {
+    mode?: ModeType;
+    groupInfoPosition?: 'top' | 'side';
+    children?: React.ReactNode;
+    currentValue?: 'server' | 'local';
+}
+export declare const FormSettingContext: import("react").Context<FormSettingContextType>;
+export default FormSettingContext;

package/lib/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dataSourceComponents/dataSourceForm/provider/formSetting/FormSettingContext.ts
+var FormSettingContext_exports = {};
+__export(FormSettingContext_exports, {
+  FormSettingContext: () => FormSettingContext,
+  default: () => FormSettingContext_default
+});
+module.exports = __toCommonJS(FormSettingContext_exports);
+var import_react = require("react");
+var initialContext = {
+  mode: "edit"
+};
+var FormSettingContext = (0, import_react.createContext)(initialContext);
+var FormSettingContext_default = FormSettingContext;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormSettingContext
+});