@pisell/materials 1.0.507 → 1.0.509

package/lib/components/pisellAnchor/index.js

@@ -38,7 +38,8 @@ var import_icons = require("@ant-design/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_index = require("./index.less");
 var PisellAnchor = (props) => {
-  const { items = [], getContainer, className } = props;
+  var _a;
+  const { items = [], getContainer, className, ...rest } = props;
   const scrollRef = (0, import_react.useRef)(null);
   const [canScrollLeft, setCanScrollLeft] = (0, import_react.useState)(false);
   const [canScrollRight, setCanScrollRight] = (0, import_react.useState)(false);
@@ -50,13 +51,13 @@ var PisellAnchor = (props) => {
     }
   };
   (0, import_react.useEffect)(() => {
-    var _a;
+    var _a2;
     document.body.id = "body";
     checkScroll();
-    (_a = scrollRef.current) == null ? void 0 : _a.addEventListener("scroll", checkScroll);
+    (_a2 = scrollRef.current) == null ? void 0 : _a2.addEventListener("scroll", checkScroll);
     return () => {
-      var _a2;
-      (_a2 = scrollRef.current) == null ? void 0 : _a2.removeEventListener("scroll", checkScroll);
+      var _a3;
+      (_a3 = scrollRef.current) == null ? void 0 : _a3.removeEventListener("scroll", checkScroll);
     };
   }, []);
   const handleScroll = (direction) => {
@@ -97,9 +98,10 @@ var PisellAnchor = (props) => {
       items,
       direction: "horizontal",
       replace: true,
-      getCurrentAnchor: items[0].href,
+      getCurrentAnchor: (_a = items == null ? void 0 : items[0]) == null ? void 0 : _a.href,
       showInkInFixed: true,
-      affix: false
+      affix: false,
+      ...rest
     }
   )), (canScrollRight || canScrollLeft) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-anchor-buttons" }, /* @__PURE__ */ import_react.default.createElement(
     import_antd.Button,

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import './index.less';
+export interface PisellHeaderProgressBarProps {
+    title?: React.ReactNode;
+    stepText?: React.ReactNode;
+    showClose?: boolean;
+    /** 是否启用投影 */
+    enableShadow?: boolean;
+    /** 是否启用描边 */
+    enableBorder?: boolean;
+    /** 描边粗细 */
+    borderWidth?: number;
+    /** 描边颜色 */
+    borderColor?: string;
+    /** 头部背景颜色 */
+    backgroundColor?: string;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 返回按钮点击事件 */
+    onBack?: () => void;
+    /** 关闭按钮点击事件 */
+    onClose?: () => void;
+}
+declare const PisellHeaderProgressBar: React.FC<PisellHeaderProgressBarProps>;
+export default PisellHeaderProgressBar;

package/lib/components/pisellHeaderProgressBar/index.js

@@ -0,0 +1,86 @@
+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/pisellHeaderProgressBar/index.tsx
+var pisellHeaderProgressBar_exports = {};
+__export(pisellHeaderProgressBar_exports, {
+  default: () => pisellHeaderProgressBar_default
+});
+module.exports = __toCommonJS(pisellHeaderProgressBar_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_pisellSectionHeaders = __toESM(require("../pisellSectionHeaders"));
+var import_iconfont = __toESM(require("../iconfont"));
+var import_index = require("./index.less");
+var prefixCls = "pisell-header-progress-bar";
+var PisellHeaderProgressBar = ({
+  title,
+  stepText,
+  showClose = true,
+  enableShadow = false,
+  enableBorder = false,
+  borderWidth = 1,
+  borderColor = "#d0d5dd",
+  backgroundColor = "#FFFFFF",
+  className,
+  style,
+  onBack,
+  onClose
+}) => {
+  const classes = (0, import_classnames.default)(prefixCls, className);
+  const customStyle = {
+    ...style,
+    backgroundColor,
+    boxShadow: enableShadow ? "0px 1px 2px 0px rgba(16, 24, 40, 0.05)" : "none",
+    borderBottom: enableBorder ? `${borderWidth}px solid ${borderColor}` : "none"
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: classes }, /* @__PURE__ */ import_react.default.createElement(
+    import_pisellSectionHeaders.default,
+    {
+      backNode: /* @__PURE__ */ import_react.default.createElement(
+        import_iconfont.default,
+        {
+          className: `${prefixCls}-back-icon`,
+          type: "pisell2-chevron-left"
+        }
+      ),
+      centerNode: /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-center` }, stepText ? /* @__PURE__ */ import_react.default.createElement("div", { className: "step" }, stepText) : null, title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "select-text" }, title) : null),
+      actionNode: showClose ? /* @__PURE__ */ import_react.default.createElement(
+        import_iconfont.default,
+        {
+          type: "pisell2-x-close",
+          className: `${prefixCls}-close-icon`
+        }
+      ) : null,
+      style: customStyle,
+      onAction: onClose,
+      onBack
+    }
+  ));
+};
+var pisellHeaderProgressBar_default = PisellHeaderProgressBar;

package/lib/components/pisellHeaderProgressBar/index.less

@@ -0,0 +1,19 @@
+.pisell-header-progress-bar {
+  position: relative;
+  width: 100%;
+
+  &-center {
+    margin-left: 14px;
+  }
+
+  &-back-icon {
+    font-size: 36px;
+    color: #000000;
+  }
+
+  &-close-icon {
+    font-size: 36px;
+    flex-shrink: 0;
+    color: #000000;
+  }
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+export interface PisellList01Props {
+    dataSource?: any[];
+    showSearch: boolean;
+    showCategory: boolean;
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (anchor: string) => void;
+}
+declare const PisellList01: React.FC<PisellList01Props>;
+export default PisellList01;

package/lib/components/pisellList01/index.js

@@ -0,0 +1,97 @@
+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/pisellList01/index.tsx
+var pisellList01_exports = {};
+__export(pisellList01_exports, {
+  default: () => pisellList01_default
+});
+module.exports = __toCommonJS(pisellList01_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_pisellViewGrid = __toESM(require("../pisellViewGrid"));
+var import_pisellAnchor = __toESM(require("../pisellAnchor"));
+var import_input = __toESM(require("../input"));
+var import_index = require("./index.less");
+var PisellList01 = ({
+  showSearch,
+  showCategory,
+  dataSource,
+  renderItem,
+  className,
+  style,
+  onChange
+}) => {
+  const [currentAnchor, setCurrentAnchor] = (0, import_react.useState)("");
+  const [products, setProducts] = (0, import_react.useState)([]);
+  (0, import_react.useEffect)(() => {
+    if (currentAnchor) {
+      const currentData = dataSource == null ? void 0 : dataSource.find(
+        (item) => item.href === currentAnchor
+      );
+      setProducts((currentData == null ? void 0 : currentData.children) ?? []);
+    }
+  }, [currentAnchor, dataSource]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    setCurrentAnchor(((_a = dataSource == null ? void 0 : dataSource[0]) == null ? void 0 : _a.href) ?? "");
+  }, [dataSource]);
+  const categoryTitle = (0, import_react.useMemo)(() => {
+    var _a;
+    return (_a = dataSource == null ? void 0 : dataSource.find((item) => item.href === currentAnchor)) == null ? void 0 : _a.title;
+  }, [currentAnchor, dataSource]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `pisell-list-01 ${className}`, style }, showSearch ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-search" }, /* @__PURE__ */ import_react.default.createElement(
+    import_input.default,
+    {
+      placeholder: "Search",
+      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { color: "#667085" } }),
+      allowClear: true,
+      size: "large",
+      className: "pisell-list-01-search-input"
+    }
+  )) : null, showCategory ? /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-categories" }, /* @__PURE__ */ import_react.default.createElement(
+    import_pisellAnchor.default,
+    {
+      items: dataSource,
+      getCurrentAnchor: currentAnchor,
+      onChange: (e) => {
+        onChange == null ? void 0 : onChange(e);
+        setCurrentAnchor(e);
+      }
+    }
+  )) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-list-01-products-title" }, categoryTitle), /* @__PURE__ */ import_react.default.createElement(
+    import_pisellViewGrid.default,
+    {
+      dataSource: products,
+      columns: 1,
+      verticalGap: 16,
+      renderItem
+    }
+  )));
+};
+var pisellList01_default = PisellList01;

package/lib/components/pisellList01/index.less

@@ -0,0 +1,45 @@
+.pisell-list-01 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &-search {
+    width: 100%;
+    padding: 16px;
+
+    .pisell-list-01-search-input {
+      display: flex;
+      padding: 10px 14px;
+      align-items: center;
+      gap: 8px;
+      align-self: stretch;
+      border-radius: 8px;
+      border: 1px solid var(--Gray-300, #d0d5dd);
+      background: var(--Base-White, #fff);
+      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+      height: 44px;
+    }
+  }
+
+  &-categories {
+    padding: 16px 0 16px 20px;
+    .pisell-lowcode-anchor-wrapper {
+      padding: 0;
+      margin: 0;
+    }
+    .pisell-lowcode-anchor-wrapper-horizontal::before {
+      border: none !important;
+    }
+  }
+
+  &-products {
+    padding: 20px;
+    .pisell-list-01-products-title {
+      color: var(--Gray-900, #101828);
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 24px;
+      margin-bottom: 16px;
+    }
+  }
+}

package/lib/components/pisellSectionHeaders/index.js

@@ -46,13 +46,7 @@ var PisellSectionHeaders = ({
   onBack,
   onAction
 }) => {
-  const classes = (0, import_classnames.default)(
-    prefixCls,
-    // {
-    //   [`${prefixCls}-float`]: !takeSpace,
-    // },
-    className
-  );
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: classes, style: { ...style } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, backNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-back`, onClick: onBack }, backNode), centerNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-main` }, centerNode), actionNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-actions`, onClick: onAction }, actionNode))));
+  const classes = (0, import_classnames.default)(prefixCls, className);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: classes, style: { ...style } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, backNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-back`, onClick: onBack }, backNode), centerNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-main` }, centerNode), actionNode && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-actions`, onClick: onAction }, actionNode)));
 };
 var pisellSectionHeaders_default = PisellSectionHeaders;

package/lib/components/pisellSectionHeaders/index.less

@@ -1,15 +1,14 @@
 @prefix: pisell-section-headers;
-@height: 56px;
 
 .@{prefix} {
   width: 100%;
-  height: @height;
   z-index: 100;
-  position: fixed;
+  position: sticky;
   top: 0;
-  left: 0;
   border-bottom: 1px solid var(--Gray-300, #d0d5dd);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  padding: 16px;
+  height: auto;
 
   &-fixed {
     position: fixed;
@@ -18,15 +17,14 @@
   }
 
   &-placeholder {
-    height: @height;
     width: 100%;
   }
 
   &-content {
     height: 100%;
-    padding: 16px;
+    padding: 0;
     display: flex;
-    align-items: center;
+    // align-items: center;
     justify-content: space-between;
     gap: 10px;
   }
@@ -37,9 +35,9 @@
 
   &-main {
     flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
   }
 
   &-actions {

package/lib/components/pisellViewGrid/index.js

@@ -91,9 +91,13 @@ var PisellViewGrid = ({
     "div",
     {
       className: "pisell-view-grid-content",
-      style: {
+      style: !singleRow ? {
         gap: `${verticalGap}px ${horizontalGap}px`,
         gridTemplateColumns: `repeat(${columns}, 1fr)`
+      } : {
+        display: "flex",
+        flexWrap: "nowrap",
+        overflowX: "auto"
       }
     },
     dataSource.map((item, index) => /* @__PURE__ */ import_react.default.createElement(

package/lib/components/select/index.js

@@ -98,9 +98,10 @@ var SelectBase = (0, import_react.forwardRef)((props, ref) => {
     return mode === "multiple" && isShowDropdown && selectAll;
   }, [mode, selectAll, isShowDropdown]);
   const checkboxChecked = (0, import_react.useMemo)(() => {
+    var _a, _b, _c;
     if (mode !== "multiple")
       return false;
-    return (state == null ? void 0 : state.length) === (filteredOptions == null ? void 0 : filteredOptions.length) && state.sort().join("") === filteredOptions.map((item) => item.value).sort().join("");
+    return (state == null ? void 0 : state.length) === (filteredOptions == null ? void 0 : filteredOptions.length) && ((_a = state == null ? void 0 : state.sort()) == null ? void 0 : _a.join("")) === ((_c = (_b = filteredOptions == null ? void 0 : filteredOptions.map((item) => item.value)) == null ? void 0 : _b.sort()) == null ? void 0 : _c.join(""));
   }, [state, filteredOptions]);
   const dropdownRender = (0, import_react.useCallback)(
     propsDropdownRender ? propsDropdownRender : (originNode) => {

package/lib/index.d.ts

@@ -147,5 +147,6 @@ export { default as PisellViewGrid } from './components/pisellViewGrid';
 export { default as PisellCustomCheckboxGroup } from './components/pisellCustomCheckboxGroup';
 export { default as PisellDropdown } from './components/pisellDropdown';
 export { default as PisellSectionHeaders } from './components/pisellSectionHeaders';
-export { default as PisellProgressBar } from './components/pisellProgressBar';
 export { default as PisellImageCarousels } from './components/pisellImageCarousels';
+export { default as PisellHeaderProgressBar } from './components/pisellHeaderProgressBar';
+export { default as PisellList01 } from './components/pisellList01';

package/lib/index.js

@@ -115,14 +115,15 @@ __export(src_exports, {
   PisellDropdown: () => import_pisellDropdown.default,
   PisellEmpty: () => import_pisellEmpty.default,
   PisellFloatingPanel: () => import_pisellFloatingPanel.default,
+  PisellHeaderProgressBar: () => import_pisellHeaderProgressBar.default,
   PisellImageCarousels: () => import_pisellImageCarousels.default,
   PisellInformationEntry: () => import_pisellInformationEntry.default,
   PisellInput: () => import_pisellInput.default,
+  PisellList01: () => import_pisellList01.default,
   PisellLoading: () => import_pisellLoading.default,
   PisellModal: () => import_pisellModal.default,
   PisellNumberKeyboard: () => import_Number.default,
   PisellPriceKeyboard: () => import_Amount.default,
-  PisellProgressBar: () => import_pisellProgressBar.default,
   PisellQrcode: () => import_pisellQrcode.default,
   PisellRow: () => import_pisellRow.default,
   PisellScan: () => import_pisellScan.default,
@@ -332,8 +333,9 @@ var import_pisellViewGrid = __toESM(require("./components/pisellViewGrid"));
 var import_pisellCustomCheckboxGroup = __toESM(require("./components/pisellCustomCheckboxGroup"));
 var import_pisellDropdown = __toESM(require("./components/pisellDropdown"));
 var import_pisellSectionHeaders = __toESM(require("./components/pisellSectionHeaders"));
-var import_pisellProgressBar = __toESM(require("./components/pisellProgressBar"));
 var import_pisellImageCarousels = __toESM(require("./components/pisellImageCarousels"));
+var import_pisellHeaderProgressBar = __toESM(require("./components/pisellHeaderProgressBar"));
+var import_pisellList01 = __toESM(require("./components/pisellList01"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -422,14 +424,15 @@ var import_pisellImageCarousels = __toESM(require("./components/pisellImageCarou
   PisellDropdown,
   PisellEmpty,
   PisellFloatingPanel,
+  PisellHeaderProgressBar,
   PisellImageCarousels,
   PisellInformationEntry,
   PisellInput,
+  PisellList01,
   PisellLoading,
   PisellModal,
   PisellNumberKeyboard,
   PisellPriceKeyboard,
-  PisellProgressBar,
   PisellQrcode,
   PisellRow,
   PisellScan,