@pisell/materials 6.3.26 → 6.3.28

package/lib/components/dataSourceComponents/fields/RecordListWrapper/ReadPretty.js

@@ -0,0 +1,64 @@
+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/fields/RecordListWrapper/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_react = __toESM(require("react"));
+var RecordListWrapperReadPretty = (props) => {
+  const { value, options = [] } = props;
+  const safeValue = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+  const entries = Object.entries(safeValue);
+  if (!entries.length) {
+    return /* @__PURE__ */ import_react.default.createElement("span", null, "-");
+  }
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8 } }, "Records: ", entries.length), entries.map(([key, record]) => {
+    const option = options.find((o) => String(o.value) === key);
+    const label = (option == null ? void 0 : option.label) || key;
+    const displayLabel = typeof label === "object" ? JSON.stringify(label) : label;
+    return /* @__PURE__ */ import_react.default.createElement("div", { key, style: { marginBottom: 8 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontWeight: 500, marginBottom: 4 } }, displayLabel), /* @__PURE__ */ import_react.default.createElement(
+      "pre",
+      {
+        style: {
+          margin: 0,
+          padding: 8,
+          background: "#f7f8fa",
+          borderRadius: 4,
+          fontSize: 12,
+          maxHeight: 200,
+          overflow: "auto"
+        }
+      },
+      JSON.stringify(record, null, 2)
+    ));
+  }));
+};
+var ReadPretty_default = RecordListWrapperReadPretty;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/WithMode.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RecordListWrapperProps } from './type';
+declare const RecordListWrapperWithMode: React.FC<RecordListWrapperProps & import("../../dataSourceForm/utils").WithModeProps>;
+export default RecordListWrapperWithMode;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/WithMode.js

@@ -0,0 +1,157 @@
+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/fields/RecordListWrapper/WithMode.tsx
+var WithMode_exports = {};
+__export(WithMode_exports, {
+  default: () => WithMode_default
+});
+module.exports = __toCommonJS(WithMode_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("../../dataSourceForm/utils");
+var import_ReadPretty = __toESM(require("./ReadPretty"));
+var import_Tabs = __toESM(require("../Tabs/Tabs"));
+var import_dataSourceSubForm = __toESM(require("../../dataSourceSubForm"));
+var RecordListWrapperBase = (props) => {
+  const {
+    value,
+    onChange,
+    options = [],
+    children,
+    xRecordSchema,
+    topSlot,
+    slot,
+    renderMode,
+    __designMode,
+    defaultValue
+  } = props;
+  const isMounted = (0, import_react.useRef)(false);
+  const dataSourceSubFormRef = (0, import_react.useRef)(null);
+  const safeValue = (0, import_react.useMemo)(() => {
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return value;
+    }
+    return {};
+  }, [value]);
+  const [activeKey, setActiveKey] = (0, import_react.useState)(() => {
+    var _a;
+    if (defaultValue != null) return String(defaultValue);
+    return String(((_a = options[0]) == null ? void 0 : _a.value) || "");
+  });
+  (0, import_react.useEffect)(() => {
+    if (defaultValue != null) {
+      setActiveKey(String(defaultValue));
+    }
+  }, [defaultValue]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (options.length && !options.find((o) => String(o.value) === activeKey)) {
+      setActiveKey(
+        defaultValue != null ? String(defaultValue) : String(((_a = options[0]) == null ? void 0 : _a.value) || "")
+      );
+    }
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    if (isMounted.current) {
+      return;
+    }
+    if ((options == null ? void 0 : options.length) > 0 && dataSourceSubFormRef.current) {
+      const defaultValues = ((_b = (_a = dataSourceSubFormRef.current).getFieldsValue) == null ? void 0 : _b.call(_a)) ?? {};
+      const completeValue = options.reduce(
+        (acc, option) => {
+          if (option.value === null || option.value === void 0) return acc;
+          acc[String(option.value)] = {
+            ...defaultValues,
+            ...safeValue[String(option.value)] || {}
+          };
+          return acc;
+        },
+        {}
+      );
+      onChange == null ? void 0 : onChange(completeValue);
+      isMounted.current = true;
+    }
+  }, [options, safeValue]);
+  const renderTopSlot = () => {
+    const slotElement = topSlot || slot;
+    if (slotElement && import_react.default.isValidElement(slotElement)) {
+      return import_react.default.cloneElement(slotElement, {
+        options,
+        value: activeKey,
+        onChange: setActiveKey
+      });
+    }
+    const tabOptions = options.map((o) => ({
+      ...o,
+      label: o.label ?? String(o.value)
+    }));
+    if (!options.length) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 16 } }, "暂无选项，请配置数据源。");
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Tabs.default,
+      {
+        options: tabOptions,
+        value: activeKey,
+        onChange: (key) => setActiveKey(String(key)),
+        disabled: renderMode === "disabled"
+      }
+    );
+  };
+  const renderBottom = () => {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_dataSourceSubForm.default,
+      {
+        activeKey,
+        value: safeValue[activeKey],
+        onChange: (recordValue) => onChange == null ? void 0 : onChange({ ...safeValue || {}, [activeKey]: recordValue || {} }),
+        xRecordSchema,
+        renderMode,
+        __designMode
+      },
+      children
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: "100%", height: 0, visibility: "hidden", overflow: "hidden" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_dataSourceSubForm.default,
+      {
+        key: "record-list-wrapper-default-value-form",
+        ref: dataSourceSubFormRef,
+        xRecordSchema,
+        renderMode,
+        __designMode
+      },
+      children
+    )));
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 12 } }, renderTopSlot()), renderBottom());
+};
+var RecordListWrapperWithMode = (0, import_utils.withMode)(
+  RecordListWrapperBase,
+  import_ReadPretty.default
+);
+var WithMode_default = RecordListWrapperWithMode;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const RecordListWrapperWithDataSource: (props: import("./type").RecordListWrapperProps & import("../../dataSourceForm/utils").WithModeProps & import("../../dataSourceForm/utils").WithFormItemProps & {
+    options?: any;
+    optionSourceType?: "default" | "custom" | "api" | undefined;
+    labelField: string;
+    valueField: string;
+    extraParams?: Record<string, any> | undefined;
+} & {
+    dataSource?: any;
+    extraParams?: Record<string, any> | undefined;
+}) => React.JSX.Element;
+export default RecordListWrapperWithDataSource;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/index.js

@@ -0,0 +1,40 @@
+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/fields/RecordListWrapper/index.tsx
+var RecordListWrapper_exports = {};
+__export(RecordListWrapper_exports, {
+  default: () => RecordListWrapper_default
+});
+module.exports = __toCommonJS(RecordListWrapper_exports);
+var import_utils = require("../../dataSourceForm/utils");
+var import_WithMode = __toESM(require("./WithMode"));
+var RecordListWrapperWithFormItem = (0, import_utils.withFormItem)(import_WithMode.default);
+var RecordListWrapperWithOptions = (0, import_utils.withOptions)(RecordListWrapperWithFormItem);
+var RecordListWrapperWithDataSource = (0, import_utils.withDataSource)(RecordListWrapperWithOptions);
+var RecordListWrapper_default = RecordListWrapperWithDataSource;

package/lib/components/dataSourceComponents/fields/RecordListWrapper/type.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { ModeType } from '../../dataSourceForm/type';
+export interface RecordListWrapperOption {
+    label?: React.ReactNode;
+    value: string | number;
+}
+export interface RecordListWrapperFieldSchema {
+    name: string;
+    label?: React.ReactNode;
+    component?: string;
+    componentName?: string;
+    type?: string;
+    /** 接口类型，用于映射到具体组件（如 Select、Input 等） */
+    interface?: string;
+    options?: RecordListWrapperOption[];
+    props?: Record<string, any>;
+    /** 子字段（用于嵌套结构，如 Input.JSON） */
+    children?: RecordListWrapperFieldSchema[];
+    _children?: RecordListWrapperFieldSchema[];
+    schema?: Record<string, any>;
+    uiSchema?: {
+        title?: React.ReactNode;
+        enum?: RecordListWrapperOption[];
+        'x-component'?: string;
+        'x-component-props'?: Record<string, any>;
+        'x-read-pretty'?: boolean;
+        'x-validator'?: string;
+        'x-display'?: 'visible' | 'hidden' | 'none';
+        'x-pattern'?: 'editable' | 'disabled' | 'readPretty';
+        'x-data-source'?: {
+            type?: string;
+            options?: Array<{
+                id?: string;
+                label: string | Record<string, any>;
+                value: string;
+                color?: string;
+            }>;
+            labelField?: string;
+            valueField?: string;
+            dataSource?: any;
+            extraParams?: Record<string, any>;
+        };
+        'x-record-schema'?: RecordListWrapperSchema | RecordListWrapperFieldSchema[] | string;
+        default?: any;
+        type?: 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
+    };
+}
+export interface RecordListWrapperSchema {
+    fields?: RecordListWrapperFieldSchema[];
+    properties?: Record<string, any>;
+    children?: RecordListWrapperFieldSchema[];
+}
+/**
+ * @title RecordListWrapper 组件 Props
+ * @description
+ * 值结构为 Map：key 是 xDataSource option 的 value，value 是该 option 对应的表单字段值。
+ * 例如：{ "5": { "code": "xxx", "type": "yyy" }, "3": { "code": "aaa" } }
+ */
+export interface RecordListWrapperProps {
+    renderMode: ModeType;
+    /**
+     * 值: Map 结构
+     * - key: xDataSource option 的 value
+     * - value: 该 option 对应的 xRecordSchema 字段值对象
+     */
+    value?: Record<string, Record<string, any>>;
+    onChange?: (value: Record<string, Record<string, any>>) => void;
+    /** xDataSource 选项列表，驱动 tabs 导航和 records 结构 */
+    options?: RecordListWrapperOption[];
+    /**
+     * 上部插槽：用户可在低代码平台拖入自定义导航组件。
+     * RecordListWrapper 会通过 cloneElement 注入 options、value（activeKey）、onChange。
+     */
+    topSlot?: React.ReactNode;
+    slot?: React.ReactNode;
+    /** xRecordSchema：定义每条记录的子字段结构 */
+    xRecordSchema?: string | RecordListWrapperSchema | RecordListWrapperFieldSchema[];
+    /** 容器 children：低代码引擎渲染的子组件节点 */
+    children?: React.ReactNode;
+    /** 低代码设计模式标识 */
+    __designMode?: string;
+    /**
+     * 默认激活的 Tab key，外部传入时优先于 options[0].value
+     */
+    defaultValue?: string;
+    [key: string]: any;
+}

package/lib/components/dataSourceComponents/fields/RecordListWrapper/type.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/fields/RecordListWrapper/type.ts
+var type_exports = {};
+module.exports = __toCommonJS(type_exports);

package/lib/components/dataSourceComponents/fields/Select/index.d.ts

@@ -7,5 +7,6 @@ declare const SelectWithDataSource: (props: import("antd").SelectProps<any, impo
     extraParams?: Record<string, any> | undefined;
 } & {
     dataSource?: any;
+    extraParams?: Record<string, any> | undefined;
 }) => React.JSX.Element;
 export default SelectWithDataSource;

package/lib/components/dataSourceComponents/fields/Select/type.d.ts

@@ -0,0 +1,5 @@
+import { SelectProps as AntSelectProps } from 'antd';
+import { ModeType } from "../../dataSourceForm/type";
+export interface SelectProps extends AntSelectProps {
+    renderMode: ModeType;
+}

package/lib/components/dataSourceComponents/fields/Switch/ReadPretty.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SwitchProps } from './type';
+import './ReadPretty.less';
+declare const SwitchReadPretty: React.FC<SwitchProps>;
+export default SwitchReadPretty;

package/lib/components/dataSourceComponents/fields/Switch/type.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface SwitchProps {
+    value?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: 'default' | 'small';
+    checkedChildren?: React.ReactNode;
+    unCheckedChildren?: React.ReactNode;
+    autoFocus?: boolean;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    renderMode?: 'view' | 'edit' | 'disabled' | 'hidden';
+    [key: string]: any;
+}

package/lib/components/dataSourceComponents/fields/Tabs/ReadPretty.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TabsReadPrettyProps } from './type';
+/**
+ * Tabs 只读展示组件
+ *
+ * @description 在 view / tableView 模式下展示选中的标签名称文本。
+ */
+declare const TabsReadPretty: React.FC<TabsReadPrettyProps>;
+export default TabsReadPretty;

package/lib/components/dataSourceComponents/fields/Tabs/ReadPretty.js

@@ -0,0 +1,45 @@
+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/fields/Tabs/ReadPretty.tsx
+var ReadPretty_exports = {};
+__export(ReadPretty_exports, {
+  default: () => ReadPretty_default
+});
+module.exports = __toCommonJS(ReadPretty_exports);
+var import_useValueMap = __toESM(require("../../hooks/useValueMap"));
+var import_utils = require("../../dataSourceForm/utils");
+var TabsReadPretty = ({
+  value,
+  options,
+  renderMode
+}) => {
+  const valueMap = (0, import_useValueMap.default)(options || []);
+  return (0, import_utils.renderValueWithMap)(value, valueMap, renderMode);
+};
+var ReadPretty_default = TabsReadPretty;

package/lib/components/dataSourceComponents/fields/Tabs/Tabs.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TabsProps } from './type';
+import './Tabs.less';
+/**
+ * Tabs 胶囊风格选项卡组件
+ *
+ * @description 提供类似 Segmented 控件的胶囊风格选项卡，支持受控与非受控模式。
+ * 用于表单中替代 Radio.Group，展示更为直观的标签页切换交互。
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   value={current}
+ *   options={[
+ *     { label: '校区', value: 'campus' },
+ *     { label: '场地', value: 'venue' },
+ *   ]}
+ *   onChange={(val) => setCurrent(val)}
+ * />
+ * ```
+ */
+declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/lib/components/dataSourceComponents/fields/Tabs/Tabs.js

@@ -0,0 +1,95 @@
+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/fields/Tabs/Tabs.tsx
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  default: () => Tabs_default
+});
+module.exports = __toCommonJS(Tabs_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_Tabs = require("./Tabs.less");
+var Tabs = ({
+  value,
+  defaultValue,
+  options = [],
+  disabled = false,
+  onChange,
+  className,
+  style
+}) => {
+  const [internalValue, setInternalValue] = import_react.default.useState(defaultValue);
+  const selectedValue = value !== void 0 ? value : internalValue;
+  const handleSelect = (option) => {
+    if (disabled || option.disabled) return;
+    const newValue = option.value;
+    if (value === void 0) {
+      setInternalValue(newValue);
+    }
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  const tabItems = (0, import_react.useMemo)(() => {
+    return options.map((option) => {
+      const isActive = selectedValue != null && selectedValue !== void 0 && String(selectedValue) === String(option.value);
+      const isDisabled = disabled || option.disabled;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: option.value,
+          className: (0, import_classnames.default)("pisell-form-tabs-item", {
+            "pisell-form-tabs-item--active": isActive,
+            "pisell-form-tabs-item--disabled": isDisabled
+          }),
+          onClick: () => handleSelect(option),
+          role: "tab",
+          "aria-selected": isActive,
+          "aria-disabled": isDisabled,
+          tabIndex: isDisabled ? -1 : 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelect(option);
+            }
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-form-tabs-item-label" }, option.label)
+      );
+    });
+  }, [options, selectedValue, disabled]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("pisell-form-tabs", className),
+      style,
+      role: "tablist"
+    },
+    tabItems
+  );
+};
+var Tabs_default = Tabs;

package/lib/components/dataSourceComponents/fields/Tabs/Tabs.less

@@ -0,0 +1,64 @@
+.pisell-form-tabs {
+  height: 40px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 2px;
+  gap: 2px;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, .65);
+  background-color: rgba(0, 0, 0, .04);
+  overflow-x: auto;
+
+  /* 隐藏滚动条：兼容 WebKit（Chrome/Safari/Edge）、Firefox、IE/Edge 旧版 */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &-item {
+    min-height: 36px;
+    min-width: 90px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease,
+      color 0.2s ease;
+    user-select: none;
+    white-space: nowrap;
+    flex: 0 0 auto;
+    outline: none;
+
+    &-label {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.65);
+      font-weight: 400;
+    }
+
+    &:hover:not(&--active):not(&--disabled) {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+
+    &--active {
+      background-color: #ffffff;
+
+      .pisell-form-tabs-item-label {
+        color: #262626;
+        font-weight: 500;
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}