@pisell/materials 1.0.503 → 1.0.504

package/lib/components/pisellSectionHeaders/index.less

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.less';
+export interface PisellViewGridProps {
+    columns?: number;
+    horizontalGap?: number;
+    verticalGap?: number;
+    singleRow?: boolean;
+    dataSource?: any[];
+    renderItem?: (item: any, index: number) => React.ReactNode;
+    loading?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const PisellViewGrid: React.FC<PisellViewGridProps>;
+export default PisellViewGrid;

package/lib/components/pisellViewGrid/index.js

@@ -0,0 +1,109 @@
+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/pisellViewGrid/index.tsx
+var pisellViewGrid_exports = {};
+__export(pisellViewGrid_exports, {
+  default: () => pisellViewGrid_default
+});
+module.exports = __toCommonJS(pisellViewGrid_exports);
+var import_react = __toESM(require("react"));
+var import_next = require("@alifd/next");
+var import_classnames = __toESM(require("classnames"));
+var import_index = require("./index.less");
+var PisellViewGrid = ({
+  columns = 3,
+  horizontalGap = 10,
+  verticalGap = 10,
+  singleRow = false,
+  dataSource = [],
+  renderItem,
+  loading = false,
+  children,
+  className,
+  style
+}) => {
+  const classes = (0, import_classnames.default)(
+    "pisell-view-grid",
+    {
+      "pisell-view-grid-single-row": singleRow
+    },
+    className
+  );
+  const containerStyle = {
+    ...style,
+    display: "flex",
+    flexWrap: singleRow ? "nowrap" : "wrap",
+    margin: 0,
+    // 移除外边距
+    padding: 0,
+    // 移除内边距
+    overflowX: singleRow ? "auto" : "visible",
+    // position: 'relative' as const,
+    width: "100%",
+    height: "100%"
+    // 确保填充父容器
+  };
+  const renderGridItems = () => {
+    const items = (dataSource == null ? void 0 : dataSource.length) ? dataSource : import_react.default.Children.toArray(children);
+    return items.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: index,
+        className: "pisell-view-grid-item",
+        style: {
+          width: `calc(${100 / columns}% - ${horizontalGap}px)`,
+          // 修正宽度计算
+          marginRight: (index + 1) % columns === 0 ? 0 : horizontalGap,
+          marginBottom: singleRow ? 0 : verticalGap,
+          flexShrink: 0
+        }
+      },
+      (dataSource == null ? void 0 : dataSource.length) ? renderItem == null ? void 0 : renderItem(item, index) : index
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_next.Loading, { visible: loading, fullScreen: false, style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: classes, style }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-view-grid-content",
+      style: {
+        gap: `${verticalGap}px ${horizontalGap}px`,
+        gridTemplateColumns: `repeat(${columns}, 1fr)`
+      }
+    },
+    dataSource.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: index,
+        className: "pisell-view-grid-item"
+      },
+      renderItem == null ? void 0 : renderItem(item, index)
+    ))
+  )));
+};
+var pisellViewGrid_default = PisellViewGrid;

package/lib/components/pisellViewGrid/index.less

@@ -0,0 +1,30 @@
+.pisell-view-grid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  &-content {
+    display: grid;
+    // grid-template-columns: repeat(4, 1fr);
+    // gap: 10px;
+  }
+
+  &-item {
+    width: 100%;
+  }
+
+  &-single-row {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  // &-item {
+  //   box-sizing: border-box;
+  //   display: inline-block;
+  //   vertical-align: top;
+  // }
+}

package/lib/components/table/Table/utils.d.ts

@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
     sort?: SortType | undefined;
     mode: "" | "localStorage" | "remote";
     currentViewMode: ModeType;
-}) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
+}) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
 export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
 export declare const stringify: (obj: Record<string, any>) => string;
 export {};

package/lib/index.d.ts

@@ -111,12 +111,12 @@ export { default as PisellInformationEntry } from './components/pisellInformatio
 export { default as usePisellConfig } from './components/pisell-config-provider/hooks/usePisellConfig';
 export { globalConfig, default as PisellContext, } from './components/pisell-config-provider/context';
 export { default as PisellTags } from './components/pisellTags';
-export { default as PisellStatisticList } from './components/pisellStatisticList';
-export { default as PisellFloatingPanel } from './components/pisellFloatingPanel';
 export { default as PisellPriceKeyboard } from './components/virtual-keyboard/Amount';
 export { default as PisellNumberKeyboard } from './components/virtual-keyboard/Number';
 export { default as PisellAdjustPrice } from './components/pisellAdjustPrice';
 export { default as PisellAdjustPriceInputNumber } from './components/pisellAdjustPrice/PisellAdjustPriceInputNumber';
+export { default as PisellStatisticList } from './components/pisellStatisticList';
+export { default as PisellFloatingPanel } from './components/pisellFloatingPanel';
 export { default as ProductCard } from './components/productCard';
 export { default as Collapse } from './components/collapse';
 export { default as CardMetricItem } from './components/cardMetricItem';
@@ -142,3 +142,10 @@ export { default as DataSourceWrapper } from './components/dataSourceComponents/
 export { default as DataSourceTypography } from './components/dataSourceComponents/dataSourceShow/dataSourceTypography';
 export { default as DataSourceImage } from './components/dataSourceComponents/dataSourceShow/dataSourceImage';
 export { default as DataSourceQRCode } from './components/dataSourceComponents/dataSourceShow/dataSourceQRCode';
+export { default as PisellAvatar } from './components/pisellAvatar';
+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';

package/lib/index.js

@@ -102,6 +102,7 @@ __export(src_exports, {
   PisellAdjustPriceInputNumber: () => import_PisellAdjustPriceInputNumber.default,
   PisellAlert: () => import_pisellAlert.default,
   PisellAnchor: () => import_pisellAnchor.default,
+  PisellAvatar: () => import_pisellAvatar.default,
   PisellCard: () => import_pisellCard.default,
   PisellCardList: () => import_pisellCardList.default,
   PisellCheckboxGroup: () => import_pisellCheckboxGroup.default,
@@ -109,24 +110,30 @@ __export(src_exports, {
   PisellContainer: () => import_pisellContainer.default,
   PisellContext: () => import_context.default,
   PisellCountdown: () => import_pisellCountdown.default,
+  PisellCustomCheckboxGroup: () => import_pisellCustomCheckboxGroup.default,
   PisellDatePicker: () => import_pisellDatePicker.default,
+  PisellDropdown: () => import_pisellDropdown.default,
   PisellEmpty: () => import_pisellEmpty.default,
   PisellFloatingPanel: () => import_pisellFloatingPanel.default,
+  PisellImageCarousels: () => import_pisellImageCarousels.default,
   PisellInformationEntry: () => import_pisellInformationEntry.default,
   PisellInput: () => import_pisellInput.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,
+  PisellSectionHeaders: () => import_pisellSectionHeaders.default,
   PisellStatisticList: () => import_pisellStatisticList.default,
   PisellTags: () => import_pisellTags.default,
   PisellText: () => import_pisellText.default,
   PisellToast: () => import_pisellToast.default,
   PisellTooltip: () => import_pisellTooltip.default,
   PisellUpload: () => import_pisellUpload.default,
+  PisellViewGrid: () => import_pisellViewGrid.default,
   PisellWalletPassCard: () => import_pisellWalletPassCard.default,
   Popconfirm: () => import_antd21.Popconfirm,
   Popover: () => import_antd22.Popover,
@@ -289,12 +296,12 @@ var import_pisellInformationEntry = __toESM(require("./components/pisellInformat
 var import_usePisellConfig = __toESM(require("./components/pisell-config-provider/hooks/usePisellConfig"));
 var import_context = __toESM(require("./components/pisell-config-provider/context"));
 var import_pisellTags = __toESM(require("./components/pisellTags"));
-var import_pisellStatisticList = __toESM(require("./components/pisellStatisticList"));
-var import_pisellFloatingPanel = __toESM(require("./components/pisellFloatingPanel"));
 var import_Amount = __toESM(require("./components/virtual-keyboard/Amount"));
 var import_Number = __toESM(require("./components/virtual-keyboard/Number"));
 var import_pisellAdjustPrice = __toESM(require("./components/pisellAdjustPrice"));
 var import_PisellAdjustPriceInputNumber = __toESM(require("./components/pisellAdjustPrice/PisellAdjustPriceInputNumber"));
+var import_pisellStatisticList = __toESM(require("./components/pisellStatisticList"));
+var import_pisellFloatingPanel = __toESM(require("./components/pisellFloatingPanel"));
 var import_productCard = __toESM(require("./components/productCard"));
 var import_collapse = __toESM(require("./components/collapse"));
 var import_cardMetricItem = __toESM(require("./components/cardMetricItem"));
@@ -320,6 +327,13 @@ var import_dataSourceWrapper = __toESM(require("./components/dataSourceComponent
 var import_dataSourceTypography = __toESM(require("./components/dataSourceComponents/dataSourceShow/dataSourceTypography"));
 var import_dataSourceImage = __toESM(require("./components/dataSourceComponents/dataSourceShow/dataSourceImage"));
 var import_dataSourceQRCode = __toESM(require("./components/dataSourceComponents/dataSourceShow/dataSourceQRCode"));
+var import_pisellAvatar = __toESM(require("./components/pisellAvatar"));
+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"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -395,6 +409,7 @@ var import_dataSourceQRCode = __toESM(require("./components/dataSourceComponents
   PisellAdjustPriceInputNumber,
   PisellAlert,
   PisellAnchor,
+  PisellAvatar,
   PisellCard,
   PisellCardList,
   PisellCheckboxGroup,
@@ -402,24 +417,30 @@ var import_dataSourceQRCode = __toESM(require("./components/dataSourceComponents
   PisellContainer,
   PisellContext,
   PisellCountdown,
+  PisellCustomCheckboxGroup,
   PisellDatePicker,
+  PisellDropdown,
   PisellEmpty,
   PisellFloatingPanel,
+  PisellImageCarousels,
   PisellInformationEntry,
   PisellInput,
   PisellLoading,
   PisellModal,
   PisellNumberKeyboard,
   PisellPriceKeyboard,
+  PisellProgressBar,
   PisellQrcode,
   PisellRow,
   PisellScan,
+  PisellSectionHeaders,
   PisellStatisticList,
   PisellTags,
   PisellText,
   PisellToast,
   PisellTooltip,
   PisellUpload,
+  PisellViewGrid,
   PisellWalletPassCard,
   Popconfirm,
   Popover,

package/lowcode/pisell-avatar/meta.ts

@@ -0,0 +1,111 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "PisellAvatar",
+  title: "头像",
+  category: "数据展示",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellAvatar",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: "icon",
+      title: { label: "头像图标", tip: "icon | 设置头像的自定义图标" },
+      propType: "node",
+    },
+    {
+      name: "shape",
+      title: { label: "头像形状", tip: "shape | 指定头像的形状" },
+      propType: { type: "oneOf", value: ["circle", "square"] },
+      defaultValue: "circle",
+    },
+    {
+      name: "borderRadius",
+      title: { label: "圆角度数", tip: "borderRadius | 方形头像的圆角大小" },
+      propType: "number",
+      defaultValue: 4,
+      condition: {
+        type: "JSFunction",
+        value: "target => target.getProps().getPropValue('shape') === 'square'",
+      },
+    },
+    {
+      name: "size",
+      title: { label: "尺寸", tip: "size | 设置头像的大小" },
+      propType: {
+        type: "oneOf",
+        value: ["xs", "sm", "md", "lg", "xl", "xxl"],
+      },
+      defaultValue: "xs",
+    },
+    {
+      name: "useTextAvatar",
+      title: { label: "使用文本头像", tip: "useTextAvatar | 是否使用文本作为头像" },
+      propType: "bool",
+      defaultValue: false,
+    },
+    {
+      name: "children",
+      title: { label: "文本内容", tip: "children | 文本头像的内容" },
+      propType: "string",
+      condition: {
+        type: "JSFunction",
+        value: "target => target.getProps().getPropValue('useTextAvatar')",
+      },
+    },
+    {
+      name: "src",
+      title: { label: "图片地址", tip: "src | 图片类头像的资源地址" },
+      propType: "string",
+    },
+    {
+      name: "alt",
+      title: {
+        label: "替代文本",
+        tip: "alt | 图像无法显示时的替代文本",
+      },
+      propType: "string",
+      setter: "PisellI18nSetter",
+    },
+    {
+      name: "onError",
+      title: {
+        label: "图片加载失败的事件",
+        tip: "图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为",
+      },
+      propType: "func",
+    },
+    {
+      name: "gap",
+      title: {
+        label: "文字边距",
+        tip: "gap | 字符类型距离左右两侧边界单位像素",
+      },
+      propType: "number",
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onError",
+          template:
+            "onError(${extParams}){\n// 图片加载失败的事件\nconsole.log('onError');}",
+        },
+        {
+          name: "onClick",
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        }
+      ],
+    },
+  },
+};

package/lowcode/pisell-avatar/snippets.ts

@@ -0,0 +1,14 @@
+export default [
+  {
+    title: '头像',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/avatar-1.jpg',
+    schema: {
+      componentName: 'PisellAvatar',
+      props: {
+        src: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+        borderRadius: 4,
+        size: 'xs'
+      },
+    },
+  },
+];

package/lowcode/pisell-custom-checkbox-group/meta.ts

@@ -0,0 +1,202 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "PisellCustomCheckboxGroup",
+  title: "自定义选项卡",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellCustomCheckboxGroup",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '列表数据源', tip: 'dataSource | 列表数据源' },
+          propType: { type: 'arrayOf', value: 'any' },
+          setter: ['JsonSetter', 'VariableSetter'],
+        },
+        {
+          name: 'loading',
+          title: {
+            label: '是否加载中',
+            tip: 'loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: ['BoolSetter', 'VariableSetter'],
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 当 renderItem 自定义渲染列表项有效时，自定义每一行的 key 的获取方式',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['string', 'function'],
+          },
+          defaultValue: 'id',
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowKey(item,${extParams}){\n// 自定义每一行的 key\nreturn `key-${item.id}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'disabled',
+          title: { label: '禁用选择', tip: 'disabled | 是否禁用选择' },
+          propType: 'boolean',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'isMultiple',
+          title: { label: '是否多选', tip: 'isMultiple | 是否多选' },
+          propType: 'boolean',
+          setter: 'BoolSetter',
+        },
+        {
+          name: "value",
+          title: { label: "Value", tip: "value | 当前选中的值" },
+          propType: "string",
+          setter: "StringSetter",
+        },
+        {
+          name: 'allowAdd',
+          title: { label: '允许添加', tip: 'allowAdd | 是否允许添加' },
+          propType: 'boolean',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ],
+    },
+    {
+      title: '栅格  ',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'columns',
+          title: { label: '列数', tip: 'columns | 列数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 3,
+        },
+        {
+          name: 'horizontalGap',
+          title: { label: '水平间隔', tip: 'horizontalGap | 栅格水平间隔，单位为像素(px)' },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter', props: {
+              min: 0,
+            },
+          },
+          defaultValue: 10,
+        },
+        {
+          name: 'verticalGap',
+          title: { label: '垂直间隔', tip: 'verticalGap | 栅格垂直间隔，单位为像素(px)' },
+          propType: 'number',
+          setter: {
+            componentName: 'NumberSetter',
+            props: {
+              min: 0,
+            },
+          },
+          defaultValue: 10,
+        },
+        {
+          name: 'singleRow',
+          title: { label: '一行展示', tip: 'singleRow | 一行展示' },
+          propType: 'boolean',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ]
+    },
+    {
+      title: '扩展',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'renderItem',
+          title: {
+            label: '渲染函数',
+            tip: 'renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '渲染函数插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['item'],
+                value: [
+                  {
+                    componentName: 'List.Item',
+                    props: {},
+                    children: {
+                      componentName: 'Typography.Text',
+                      props: {
+                        children: {
+                          type: 'JSExpression',
+                          value: 'this.item.text',
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template: 'renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    }
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template: 'onChange(value,${extParams}){\n// 选中值改变时的回调\nconsole.log("value",value);\n}',
+        },
+        {
+          name: 'onAdd',
+          template: 'onAdd(${extParams}){\n// 点击添加按钮时的回调\n}',
+        },
+      ],
+    },
+    component: {
+      isContainer: true,
+    },
+  },
+};