@pisell/materials 1.0.506 → 1.0.508

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,

package/lowcode/data-source-table/meta.ts

@@ -853,6 +853,287 @@ const dataSourceTable = {
           },
         ],
       },
+      {
+        title: "表格按钮",
+        display: 'entry',
+        type: 'group',
+        name: '_tableButtons',
+        items: [
+          {
+            name: 'tableButtons.show',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Show Table Buttons',
+                'zh-CN': '开启表格按钮组',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'tableButtons.show | Whether to display the table button group',
+                'zh-CN': 'tableButtons.show | 是否显示表格按钮组',
+              },
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false,
+          },
+          {
+            name: 'tableButtons.items',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Table Buttons',
+                'zh-CN': '表格按钮组',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'tableButtons.items | Table buttons on the right',
+                'zh-CN': 'tableButtons.items | 表格右侧按钮项',
+              },
+            },
+            condition: {
+              type: 'JSFunction',
+              value:
+                'target => !!target.getProps().getPropValue("tableButtons.show")',
+            },
+            setter: {
+              componentName: 'ArraySetter',
+              props: {
+                itemSetter: {
+                  componentName: 'ObjectSetter',
+                  props: {
+                    config: {
+                      items: [
+                        {
+                          name: 'label',
+                          title: {
+                            label: {
+                              type: 'i18n',
+                              'en-US': 'Button Text',
+                              'zh-CN': '按钮文案',
+                            },
+                            tip: {
+                              type: 'i18n',
+                              'en-US': 'buttonText | Button text',
+                              'zh-CN': 'buttonText | 按钮文案',
+                            },
+                          },
+                          propType: 'string',
+                          setter: 'PisellI18nSetter',
+                          isRequired: true,
+                        },
+                        {
+                          name: 'openMode',
+                          condition: (target: any) => {
+                            const actionType =
+                              target.parent.getPropValue('actionType');
+                            return actionType === 'add';
+                          },
+                          title: {
+                            label: {
+                              type: 'i18n',
+                              'en-US': 'Open Mode',
+                              'zh-CN': '打开方式',
+                            },
+                            tip: {
+                              type: 'i18n',
+                              'en-US': 'openMode | Open mode',
+                              'zh-CN': 'openMode | 打开方式',
+                            },
+                          },
+                          propType: {
+                            type: 'oneOf',
+                            value: ['modal', 'drawer'],
+                          },
+                          setter: {
+                            componentName: 'RadioGroupSetter',
+                            props: {
+                              options: [
+                                {
+                                  title: '对话框',
+                                  value: 'modal',
+                                },
+                                {
+                                  title: '抽屉',
+                                  value: 'drawer',
+                                },
+                              ],
+                            },
+                          },
+                          defaultValue: 'drawer',
+                        },
+                        {
+                          name: 'openContentSize',
+                          condition: (target: any) => {
+                            const actionType =
+                              target.parent.getPropValue('actionType');
+                            return actionType === 'add';
+                          },
+                          title: {
+                            label: {
+                              type: 'i18n',
+                              'en-US': 'Dialog Size',
+                              'zh-CN': '弹窗尺寸',
+                            },
+                            tip: {
+                              type: 'i18n',
+                              'en-US': 'dialogSize | Dialog size',
+                              'zh-CN': 'dialogSize | 弹窗尺寸',
+                            },
+                          },
+                          propType: {
+                            type: 'oneOf',
+                            value: ['small', 'middle', 'large'],
+                          },
+                          setter: {
+                            componentName: 'RadioGroupSetter',
+                            props: {
+                              options: [
+                                {
+                                  title: '较窄',
+                                  value: 'small',
+                                },
+                                {
+                                  title: '中等',
+                                  value: 'middle',
+                                },
+                                {
+                                  title: '较宽',
+                                  value: 'large',
+                                },
+                              ],
+                            },
+                          },
+                          defaultValue: 'middle',
+                        },
+                        {
+                          name: 'openTitle',
+                          title: {
+                            label: {
+                              type: 'i18n',
+                              'en-US': 'Dialog Title',
+                              'zh-CN': '弹窗标题',
+                            },
+                            tip: {
+                              type: 'i18n',
+                              'en-US': 'dialogTitle | Dialog title',
+                              'zh-CN': 'dialogTitle | 弹窗标题',
+                            },
+                          },
+                          propType: 'string',
+                          setter: 'PisellI18nSetter',
+                          isRequired: true,
+                          condition: (target: any) => {
+                            const actionType =
+                              target.parent.getPropValue('actionType');
+                            return actionType === 'add';
+                          },
+                        },
+                        {
+                          name: 'actionType',
+                          title: {
+                            label: {
+                              type: 'i18n',
+                              'en-US': 'Action Type',
+                              'zh-CN': '操作类型',
+                            },
+                            tip: {
+                              type: 'i18n',
+                              'en-US': 'actionType | Action type',
+                              'zh-CN': 'actionType | 操作类型',
+                            },
+                          },
+                          propType: {
+                            type: 'oneOf',
+                            value: ['add', 'custom'],
+                          },
+                          extraProps: {
+                            setValue(target: any, value: any) {
+                              const key = target.parent.getPropValue('key');
+                              if (['add', 'custom'].includes(value)) {
+                                let content: any = getJsSlot();
+                                if (value !== 'custom') {
+                                  content = getFormContent(target, value);
+                                }
+                                target.node.setPropValue('operationContent', {
+                                  ...(target.node.getPropValue(
+                                    'operationContent'
+                                  ) || {}),
+                                  [key]: content,
+                                });
+                              }
+
+                              return target.parent.setPropValue(
+                                'actionType',
+                                value
+                              );
+                            },
+                          },
+                          setter: {
+                            componentName: 'RadioGroupSetter',
+                            props: {
+                              options: [
+                                {
+                                  title: '添加',
+                                  value: 'add',
+                                },
+                                {
+                                  title: '自定义',
+                                  value: 'custom',
+                                },
+                              ],
+                            },
+                          },
+                        },
+                        {
+                          name: 'buttonProps',
+                          title: {
+                            label: {
+                              type: 'i18n',
+                              'en-US': 'Button Style',
+                              'zh-CN': '按钮样式',
+                            },
+                          },
+                          propType: 'object',
+                          setter: 'JsonSetter',
+                        },
+                      ],
+                    },
+                  },
+                  initialValue: () => {
+                    return {
+                      key: uuid(),
+                      title: '操作',
+                    };
+                  },
+                },
+              },
+            },
+          },
+          {
+            name: 'tableButtons.maxCount',
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'Max Count',
+                'zh-CN': '最大展示数量',
+              },
+              tip: {
+                type: 'i18n',
+                'en-US': 'maxCount | Maximum display count',
+                'zh-CN': 'maxCount | 最大展示数量',
+              },
+            },
+            propType: 'number',
+            condition: {
+              type: 'JSFunction',
+              value:
+                'target => !!target.getProps().getPropValue("tableButtons.show")',
+            },
+            setter: 'NumberSetter',
+          }
+        ],
+      },
       {
         title: "标签页",
         display: 'entry',