@pisell/materials 1.0.519 → 1.0.521

package/es/components/dataSourceComponents/dataSourceForm/BaseForm.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import useDataSource from "../hooks/useDataSource";
 import Form from "../../form";
 import FormSettingProvider from "./provider/formSetting/FormSettingProvider";
+import PageHeader from "../../page-header";
 import "./index.less";
 
 /**
@@ -58,12 +59,11 @@ var BaseForm = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames('pisell-lowcode-data-source-form', className),
     ref: formRef,
     preserve: true
-  }), (title || description) && /*#__PURE__*/React.createElement("div", {
-    className: "pisell-lowcode-data-source-form-header"
-  }, showTitle && /*#__PURE__*/React.createElement("div", {
-    className: "pisell-lowcode-data-source-form-title"
-  }, title), showDescription && /*#__PURE__*/React.createElement("div", {
-    className: "pisell-lowcode-data-source-form-description"
-  }, description)), children));
+  }), /*#__PURE__*/React.createElement(PageHeader, {
+    title: title,
+    showTitle: showTitle,
+    subTitle: description,
+    showSubTitle: showDescription
+  }), children));
 });
 export default BaseForm;

package/es/components/dataSourceComponents/dataSourceForm/utils.js

@@ -343,7 +343,7 @@ export var renderValueWithMap = function renderValueWithMap(value, valueMap, ren
         key: item,
         className: "pisell-form-read-pretty-value",
         style: textStyle
-      }, valueMap === null || valueMap === void 0 ? void 0 : valueMap[item]), index < value.length - 1 && ',');
+      }, valueMap === null || valueMap === void 0 ? void 0 : valueMap[item]), index < value.length - 1 && ', ');
     }));
   } else if (isString(value)) {
     return /*#__PURE__*/React.createElement("span", {

package/es/components/page-header/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface PageHeaderProps {
+    title?: React.ReactNode;
+    showTitle?: boolean;
+    subTitle?: React.ReactNode;
+    showSubTitle?: boolean;
+    showDivider?: boolean;
+    extra?: React.ReactNode;
+}
+declare const PageHeader: (props: PageHeaderProps) => React.JSX.Element;
+export default PageHeader;

package/es/components/page-header/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Divider } from 'antd';
+import "./index.less";
+var PageHeader = function PageHeader(props) {
+  var title = props.title,
+    showTitle = props.showTitle,
+    subTitle = props.subTitle,
+    showSubTitle = props.showSubTitle,
+    showDivider = props.showDivider,
+    extra = props.extra;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-lowcode-page-header-wrap"
+  }, showTitle && title && /*#__PURE__*/React.createElement("div", {
+    className: 'pisell-lowcode-page-header'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'pisell-lowcode-page-header-title'
+  }, showTitle ? title : ''), /*#__PURE__*/React.createElement("div", {
+    className: 'pisell-lowcode-page-header-extra'
+  }, extra)), showSubTitle && subTitle && /*#__PURE__*/React.createElement("div", {
+    className: 'pisell-lowcode-page-header-sub-title'
+  }, subTitle), showDivider && /*#__PURE__*/React.createElement(Divider, {
+    className: 'pisell-lowcode-page-header-divider'
+  }));
+};
+export default PageHeader;

package/es/components/page-header/index.less

@@ -0,0 +1,37 @@
+.pisell-lowcode-page-header-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 20px;
+  .pisell-lowcode-page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .pisell-lowcode-page-header-title {
+      color: var(--Colors-Neutral-Text-colorText, rgba(0, 0, 0, 0.88));
+      font-size: var(--Typography-Font-Size-fontSizeHeading4, 20px);
+      font-weight: var(--Typography-Font-Weight-fontWeightStrong, 700);
+      line-height: var(
+        --Typography-Line-Height-lineHeightHeading4,
+        28px
+      ); /* 140% */
+    }
+
+    .pisell-lowcode-page-header-extra {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+  .pisell-lowcode-page-header-sub-title {
+    color: var(--Colors-Neutral-Text-colorTextSecondary, rgba(0, 0, 0, 0.65));
+    font-size: var(--Typography-Font-Size-fontSize, 14px);
+    font-style: normal;
+    font-weight: var(--Typography-Font-Weight-fontWeightNormal, 400);
+    line-height: var(--Typography-Line-Height-lineHeight, 22px); /* 157.143% */
+  }
+
+  .pisell-lowcode-page-header-divider {
+    margin: 16px 0 0;
+  }
+}

package/es/components/pisellAvatar/index.js

@@ -54,7 +54,7 @@ var PisellAvatar = function PisellAvatar(_ref) {
   var mergedStyle = _objectSpread(_objectSpread({}, style), {}, {
     width: sizeMap[size],
     height: sizeMap[size],
-    fontSize: children || icon ? fontSizeMap[size] : undefined,
+    fontSize: fontSizeMap[size],
     lineHeight: "".concat(sizeMap[size], "px"),
     borderRadius: shape === 'square' ? "".concat(borderRadius, "px") : '50%'
   });

package/es/components/pisellCustomCheckboxGroup/index.d.ts

@@ -6,8 +6,9 @@ export interface PisellCustomCheckboxGroupProps {
     allowAdd?: boolean;
     isMultiple?: boolean;
     id?: string | string[];
-    onChange?: (value: string | string[]) => void;
+    onClick?: (value: any) => void;
     onAdd?: () => void;
+    renderAddItem?: (item: any) => React.ReactNode;
     [key: string]: any;
     className?: string;
 }

package/es/components/pisellCustomCheckboxGroup/index.js

@@ -1,24 +1,14 @@
-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); }
-var _excluded = ["dataSource", "allowAdd", "onAdd", "disabled", "isMultiple", "value", "onChange", "className"];
+var _excluded = ["dataSource", "allowAdd", "onAdd", "onClick", "renderAddItem", "disabled", "isMultiple", "value", "onChange", "className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import PisellViewGrid from "../pisellViewGrid";
 import "./index.less";
@@ -28,6 +18,8 @@ var PisellCustomCheckboxGroup = function PisellCustomCheckboxGroup(_ref) {
     _ref$allowAdd = _ref.allowAdd,
     allowAdd = _ref$allowAdd === void 0 ? false : _ref$allowAdd,
     onAdd = _ref.onAdd,
+    _onClick = _ref.onClick,
+    renderAddItem = _ref.renderAddItem,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$isMultiple = _ref.isMultiple,
@@ -36,11 +28,6 @@ var PisellCustomCheckboxGroup = function PisellCustomCheckboxGroup(_ref) {
     onChange = _ref.onChange,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(Array.isArray(value) ? value : value ? [value] : []),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedValues = _useState2[0],
-    setSelectedValues = _useState2[1];
-
   /**
    * @title: 构建最终数据，如果允许添加，则增加一项
    * @description:
@@ -52,41 +39,11 @@ var PisellCustomCheckboxGroup = function PisellCustomCheckboxGroup(_ref) {
   var finalDataSource = useMemo(function () {
     return allowAdd ? [{
       id: 0,
-      text: '3',
+      text: '+',
       isAddCard: true
     }].concat(_toConsumableArray(dataSource)) : dataSource;
   }, [allowAdd, dataSource]);
 
-  /**
-   * @title: 触发卡片的点击事件
-   * @description:
-   * @param {any} item
-   * @return {*}
-   * @Author: WangHan
-   * @Date: 2025-01-08 18:22
-   */
-  var handleItemClick = function handleItemClick(item) {
-    if (disabled) return;
-    var value = item === null || item === void 0 ? void 0 : item.id;
-    var newValues;
-
-    // 单选
-    if (!isMultiple) {
-      newValues = [value];
-    } else {
-      // 多选
-      if (selectedValues.includes(value)) {
-        newValues = selectedValues.filter(function (v) {
-          return v !== id;
-        });
-      } else {
-        newValues = [].concat(_toConsumableArray(selectedValues), [value]);
-      }
-    }
-    setSelectedValues(newValues);
-    onChange === null || onChange === void 0 ? void 0 : onChange(!isMultiple ? newValues[0] : newValues);
-  };
-
   /**
    * @title: 渲染卡片
    * @description:
@@ -98,21 +55,11 @@ var PisellCustomCheckboxGroup = function PisellCustomCheckboxGroup(_ref) {
    */
   var renderGridItem = function renderGridItem(item, index) {
     var _rest$renderItem;
-    var obj = _objectSpread({}, item);
-
-    // 给item增加 是否禁用/是否选中 的属性
-    if (selectedValues) {
-      var selected = selectedValues.includes(item === null || item === void 0 ? void 0 : item.id);
-      obj = _objectSpread(_objectSpread({}, item), {}, {
-        disabled: disabled,
-        selected: selected
-      });
-    }
     return /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
-        return item !== null && item !== void 0 && item.isAddCard ? onAdd : handleItemClick(item);
+        return _onClick(item);
       }
-    }, rest === null || rest === void 0 ? void 0 : (_rest$renderItem = rest.renderItem) === null || _rest$renderItem === void 0 ? void 0 : _rest$renderItem.call(rest, obj, index));
+    }, item !== null && item !== void 0 && item.isAddCard && renderAddItem ? renderAddItem(item) : rest === null || rest === void 0 ? void 0 : (_rest$renderItem = rest.renderItem) === null || _rest$renderItem === void 0 ? void 0 : _rest$renderItem.call(rest, item, index));
   };
   return /*#__PURE__*/React.createElement(PisellViewGrid, _extends({}, rest, {
     dataSource: finalDataSource,

package/es/components/pisellImageCarousels/index.d.ts

@@ -6,7 +6,7 @@ export interface PisellImageCarouselsProps {
         url: string;
         alt?: string;
     }>;
-    width?: number;
+    width?: number | string;
     height?: number;
     showArrows?: boolean;
     showDots?: boolean;

package/es/components/pisellViewGrid/index.js

@@ -1,9 +1,3 @@
-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); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from 'react';
 import Loading from "../pisellLoading";
 import classNames from 'classnames';
@@ -28,35 +22,6 @@ var PisellViewGrid = function PisellViewGrid(_ref) {
   var classes = classNames('pisell-view-grid', {
     'pisell-view-grid-single-row': singleRow
   }, className);
-  var containerStyle = _objectSpread(_objectSpread({}, style), {}, {
-    display: 'flex',
-    flexWrap: singleRow ? 'nowrap' : 'wrap',
-    margin: 0,
-    // 移除外边距
-    padding: 0,
-    // 移除内边距
-    overflowX: singleRow ? 'auto' : 'visible',
-    // position: 'relative' as const,
-    width: '100%',
-    height: '100%' // 确保填充父容器
-  });
-
-  var renderGridItems = function renderGridItems() {
-    var items = dataSource !== null && dataSource !== void 0 && dataSource.length ? dataSource : React.Children.toArray(children);
-    return items.map(function (item, index) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: index,
-        className: "pisell-view-grid-item",
-        style: {
-          width: "calc(".concat(100 / columns, "% - ").concat(horizontalGap, "px)"),
-          // 修正宽度计算
-          marginRight: (index + 1) % columns === 0 ? 0 : horizontalGap,
-          marginBottom: singleRow ? 0 : verticalGap,
-          flexShrink: 0
-        }
-      }, dataSource !== null && dataSource !== void 0 && dataSource.length ? renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index) : index);
-    });
-  };
   return /*#__PURE__*/React.createElement(Loading, {
     loading: loading,
     fullscreen: false,
@@ -80,12 +45,6 @@ var PisellViewGrid = function PisellViewGrid(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: index,
       className: "pisell-view-grid-item"
-      // style={{
-      //   flex: `0 0 calc(${100 / columns}% - ${
-      //     (horizontalGap * (columns - 1)) / columns
-      //   }px)`,
-      //   // 或者使用 grid 布局时不需要设置宽度
-      // }}
     }, renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index));
   }))));
 };

package/es/components/profileMenu/index.js

@@ -51,6 +51,9 @@ var ProfileMenu = function ProfileMenu(_ref) {
   };
   var renderAvatar = function renderAvatar(avatarProps) {
     return /*#__PURE__*/React.createElement(PisellAvatar, {
+      style: {
+        margin: '0 6px'
+      },
       size: "md",
       src: (avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.src) || '',
       alt: (avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.alt) || '',

package/es/components/section-footers/index.d.ts

@@ -3,6 +3,7 @@ interface SectionFooterProps {
     left?: React.ReactNode;
     middle?: React.ReactNode;
     right?: React.ReactNode;
+    className?: string;
 }
 declare const SectionFooters: (props: SectionFooterProps) => import("react").JSX.Element;
 export default SectionFooters;

package/es/components/section-footers/index.js

@@ -6,11 +6,12 @@ var SectionFooters = function SectionFooters(props) {
   }, []);
   var left = props.left,
     middle = props.middle,
-    right = props.right;
+    right = props.right,
+    className = props.className;
   return /*#__PURE__*/React.createElement(Flex, {
     gap: "middle",
     justify: "space-between",
-    className: "pisell-section-footers-wrapper"
+    className: "pisell-section-footers-wrapper ".concat(className)
   }, left, middle, right);
 };
 export default SectionFooters;

package/es/components/table/Actions/component/ExportImport/utils/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @title: 格式化导出导入接口地址
+ * @description:
+ * @param {string} url
+ * @return {*}
+ * @Author: WangHan
+ * @Date: 2024-09-05 11:39
+ */
+export declare const formatApiUrl: (url: string) => string;

package/es/components/table/Actions/component/ExportImport/utils/index.js

@@ -0,0 +1,11 @@
+/**
+ * @title: 格式化导出导入接口地址
+ * @description: 
+ * @param {string} url
+ * @return {*}
+ * @Author: WangHan
+ * @Date: 2024-09-05 11:39
+ */
+export var formatApiUrl = function formatApiUrl(url) {
+  return url || '/shop/form/data';
+};

package/es/components/table/Header/index.js

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { isFunction } from '@pisell/utils';
+import PageHeader from "../../page-header";
 import Buttons from "./Buttons";
 import "./index.less";
 var Header = function Header(_ref) {
@@ -31,16 +32,12 @@ var Header = function Header(_ref) {
     }
     return subTitle;
   }, [subTitle]);
-  return showHeader ? /*#__PURE__*/React.createElement("div", {
-    className: "materials-grid-header-wrap"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'materials-grid-header'
-  }, showTitle && /*#__PURE__*/React.createElement("div", {
-    className: 'left-wrap'
-  }, titleNode), /*#__PURE__*/React.createElement("div", {
-    className: 'right-wrap'
-  }, buttonsNode)), showSubTitle && subTitleNode && /*#__PURE__*/React.createElement("div", {
-    className: 'materials-grid-sub-title'
-  }, subTitleNode)) : null;
+  return showHeader ? /*#__PURE__*/React.createElement(PageHeader, {
+    title: titleNode,
+    showTitle: showTitle,
+    subTitle: subTitleNode,
+    showSubTitle: showSubTitle,
+    extra: buttonsNode
+  }) : null;
 };
 export default Header;

package/es/index.d.ts

@@ -151,3 +151,4 @@ export { default as PisellSectionHeaders } from './components/pisellSectionHeade
 export { default as PisellImageCarousels } from './components/pisellImageCarousels';
 export { default as PisellHeaderProgressBar } from './components/pisellHeaderProgressBar';
 export { default as PisellList01 } from './components/pisellList01';
+export { default as PageHeader } from './components/page-header';

package/es/index.js

@@ -180,4 +180,5 @@ export { default as PisellDropdown } from "./components/pisellDropdown";
 export { default as PisellSectionHeaders } from "./components/pisellSectionHeaders";
 export { default as PisellImageCarousels } from "./components/pisellImageCarousels";
 export { default as PisellHeaderProgressBar } from "./components/pisellHeaderProgressBar";
-export { default as PisellList01 } from "./components/pisellList01";
+export { default as PisellList01 } from "./components/pisellList01";
+export { default as PageHeader } from "./components/page-header";

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

@@ -37,6 +37,7 @@ var import_classnames = __toESM(require("classnames"));
 var import_useDataSource = __toESM(require("../hooks/useDataSource"));
 var import_form = __toESM(require("../../form"));
 var import_FormSettingProvider = __toESM(require("./provider/formSetting/FormSettingProvider"));
+var import_page_header = __toESM(require("../../page-header"));
 var import_index = require("./index.less");
 var BaseForm = (0, import_react.forwardRef)(
   (props, ref) => {
@@ -90,7 +91,15 @@ var BaseForm = (0, import_react.forwardRef)(
           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)),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_page_header.default,
+          {
+            title,
+            showTitle,
+            subTitle: description,
+            showSubTitle: showDescription
+          }
+        ),
         children
       )
     );

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

@@ -342,7 +342,7 @@ var getNestedValue = (obj, path) => {
 var renderValueWithMap = (value, valueMap, renderMode) => {
   const textStyle = renderMode === "tableView" ? { fontSize: 14, fontWeight: 400 } : {};
   if ((0, import_utils.isArr)(value)) {
-    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-form-read-pretty-text" }, value.map((item, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", { key: item, className: "pisell-form-read-pretty-value", style: textStyle }, valueMap == null ? void 0 : valueMap[item]), index < value.length - 1 && ",")));
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-form-read-pretty-text" }, value.map((item, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("span", { key: item, className: "pisell-form-read-pretty-value", style: textStyle }, valueMap == null ? void 0 : valueMap[item]), index < value.length - 1 && ", ")));
   } else if ((0, import_utils.isString)(value)) {
     return /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-form-read-pretty-text" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-form-read-pretty-value", style: textStyle }, (valueMap == null ? void 0 : valueMap[value]) || value));
   }

package/lib/components/page-header/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface PageHeaderProps {
+    title?: React.ReactNode;
+    showTitle?: boolean;
+    subTitle?: React.ReactNode;
+    showSubTitle?: boolean;
+    showDivider?: boolean;
+    extra?: React.ReactNode;
+}
+declare const PageHeader: (props: PageHeaderProps) => React.JSX.Element;
+export default PageHeader;

package/lib/components/page-header/index.js

@@ -0,0 +1,42 @@
+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/page-header/index.tsx
+var page_header_exports = {};
+__export(page_header_exports, {
+  default: () => page_header_default
+});
+module.exports = __toCommonJS(page_header_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_index = require("./index.less");
+var PageHeader = (props) => {
+  const { title, showTitle, subTitle, showSubTitle, showDivider, extra } = props;
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-page-header-wrap" }, showTitle && title && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-page-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-page-header-title" }, showTitle ? title : ""), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-page-header-extra" }, extra)), showSubTitle && subTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-page-header-sub-title" }, subTitle), showDivider && /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { className: "pisell-lowcode-page-header-divider" }));
+};
+var page_header_default = PageHeader;

package/lib/components/page-header/index.less

@@ -0,0 +1,37 @@
+.pisell-lowcode-page-header-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 20px;
+  .pisell-lowcode-page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .pisell-lowcode-page-header-title {
+      color: var(--Colors-Neutral-Text-colorText, rgba(0, 0, 0, 0.88));
+      font-size: var(--Typography-Font-Size-fontSizeHeading4, 20px);
+      font-weight: var(--Typography-Font-Weight-fontWeightStrong, 700);
+      line-height: var(
+        --Typography-Line-Height-lineHeightHeading4,
+        28px
+      ); /* 140% */
+    }
+
+    .pisell-lowcode-page-header-extra {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+  .pisell-lowcode-page-header-sub-title {
+    color: var(--Colors-Neutral-Text-colorTextSecondary, rgba(0, 0, 0, 0.65));
+    font-size: var(--Typography-Font-Size-fontSize, 14px);
+    font-style: normal;
+    font-weight: var(--Typography-Font-Weight-fontWeightNormal, 400);
+    line-height: var(--Typography-Line-Height-lineHeight, 22px); /* 157.143% */
+  }
+
+  .pisell-lowcode-page-header-divider {
+    margin: 16px 0 0;
+  }
+}

package/lib/components/pisellAvatar/index.js

@@ -80,7 +80,7 @@ var PisellAvatar = ({
     ...style,
     width: sizeMap[size],
     height: sizeMap[size],
-    fontSize: children || icon ? fontSizeMap[size] : void 0,
+    fontSize: fontSizeMap[size],
     lineHeight: `${sizeMap[size]}px`,
     borderRadius: shape === "square" ? `${borderRadius}px` : "50%"
   };

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

@@ -6,8 +6,9 @@ export interface PisellCustomCheckboxGroupProps {
     allowAdd?: boolean;
     isMultiple?: boolean;
     id?: string | string[];
-    onChange?: (value: string | string[]) => void;
+    onClick?: (value: any) => void;
     onAdd?: () => void;
+    renderAddItem?: (item: any) => React.ReactNode;
     [key: string]: any;
     className?: string;
 }

package/lib/components/pisellCustomCheckboxGroup/index.js

@@ -40,6 +40,8 @@ var PisellCustomCheckboxGroup = ({
   dataSource = [],
   allowAdd = false,
   onAdd,
+  onClick,
+  renderAddItem,
   disabled = false,
   isMultiple = false,
   value,
@@ -47,37 +49,12 @@ var PisellCustomCheckboxGroup = ({
   className,
   ...rest
 }) => {
-  const [selectedValues, setSelectedValues] = (0, import_react.useState)(
-    Array.isArray(value) ? value : value ? [value] : []
-  );
   const finalDataSource = (0, import_react.useMemo)(() => {
-    return allowAdd ? [{ id: 0, text: "3", isAddCard: true }, ...dataSource] : dataSource;
+    return allowAdd ? [{ id: 0, text: "+", isAddCard: true }, ...dataSource] : dataSource;
   }, [allowAdd, dataSource]);
-  const handleItemClick = (item) => {
-    if (disabled)
-      return;
-    const value2 = item == null ? void 0 : item.id;
-    let newValues;
-    if (!isMultiple) {
-      newValues = [value2];
-    } else {
-      if (selectedValues.includes(value2)) {
-        newValues = selectedValues.filter((v) => v !== id);
-      } else {
-        newValues = [...selectedValues, value2];
-      }
-    }
-    setSelectedValues(newValues);
-    onChange == null ? void 0 : onChange(!isMultiple ? newValues[0] : newValues);
-  };
   const renderGridItem = (item, index) => {
     var _a;
-    let obj = { ...item };
-    if (selectedValues) {
-      const selected = selectedValues.includes(item == null ? void 0 : item.id);
-      obj = { ...item, disabled, selected };
-    }
-    return /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => (item == null ? void 0 : item.isAddCard) ? onAdd : handleItemClick(item) }, (_a = rest == null ? void 0 : rest.renderItem) == null ? void 0 : _a.call(rest, obj, index));
+    return /* @__PURE__ */ import_react.default.createElement("div", { onClick: () => onClick(item) }, (item == null ? void 0 : item.isAddCard) && renderAddItem ? renderAddItem(item) : (_a = rest == null ? void 0 : rest.renderItem) == null ? void 0 : _a.call(rest, item, index));
   };
   return /* @__PURE__ */ import_react.default.createElement(
     import_pisellViewGrid.default,