@pisell/materials 2.2.57 → 2.2.59

package/es/components/pisellWalletPassCard/index.less

@@ -1,26 +1,55 @@
 .pisell-wallet-pass-card {
-  padding: 16px;
-  color: var(--Gray-900, #101828);
-  font-size: 14px;
-  font-style: normal;
-  position: relative;
-  overflow: hidden;
   border-radius: 12px;
   background-size: cover;
   height: 190px;
+  width: 350px;
   background-position: center center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--Gray-300, #d0d5dd);
-  cursor: pointer;
-  box-sizing: border-box;
-  &.pisell-card-active {
-    border-width: 2px;
-    border-color: var(--theme-color, #7f56d9);
+  border: 1px solid #d0d5dd;
+  position: relative;
+  overflow: hidden;
+
+  .actions-dropdown-trigger {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 24px;
+    height: 24px;
+    z-index: 1;
+    border-radius: 6px;
+    color: #1570ef;
+
+    &:hover {
+      background: var(--Gray-200, #eaecf0);
+    }
   }
-  .pisell-card-name-wrap {
+
+  .actions-btn-wrapper {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 2;
     display: flex;
+    gap: 16px;
+
+    & > div {
+      cursor: pointer;
+    }
+  }
+
+  .pisell-wallet-pass-card-body {
+    padding: 16px;
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-style: normal;
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     justify-content: space-between;
+  }
+
+  .pisell-card-name-wrap {
     font-weight: 500;
     line-height: 20px;
 
@@ -34,60 +63,62 @@
       text-overflow: ellipsis;
     }
   }
+
   .pisell-card-store-name {
     height: 20px;
     font-size: 12px;
     font-weight: 400;
-    line-height: 18px; /* 150% */
-    margin-bottom: 22px;
+    line-height: 18px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .pisell-card-amount-wrap {
     display: flex;
     margin-bottom: 4px;
+
     .pisell-card-amount-item {
       display: flex;
       flex-direction: column;
       margin-right: 16px;
+      overflow: hidden;
+
       .pisell-card-amount-item-label {
         color: var(--Gray-500, #667085);
         font-weight: 400;
         line-height: 20px;
         height: 20px;
+        white-space: nowrap;
       }
+
       .pisell-card-amount-item-value {
         font-size: 20px;
         font-weight: 600;
         line-height: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
+
   .pisell-card-code-wrap {
     display: flex;
     justify-content: space-between;
     position: relative;
+
     .pisell-card-code {
       line-height: 20px;
       display: flex;
       flex-direction: column;
       gap: 2px;
     }
-    .pisell-card-qr-code {
-      position: absolute;
-      top: -16px;
-      right: -6px;
-      .pisell-lowcode-qrcode-wrap {
-        .pisell-lowcode-qrcode {
-          background: rgba(255, 255, 255, 0.8) !important;
-        }
-      }
-    }
   }
+
   .pisell-lowcode-qrcode {
     padding: 6px;
   }
+
   .pisell-card-warn-message {
     position: absolute;
     bottom: 0;
@@ -99,20 +130,37 @@
     color: var(--Gray-900, #101828);
     font-weight: 600;
     line-height: 20px;
+    font-size: 14px;
+
     .pisell-card-icon {
       font-size: 20px;
       color: #dc6803;
       margin-right: 6px;
     }
   }
+
+  .pisell-card-qr-code {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+
+    .pisell-lowcode-qrcode-wrap {
+      .pisell-lowcode-qrcode {
+        background: rgba(255, 255, 255, 0.8) !important;
+      }
+    }
+  }
 }
+
 .pisell-card-disabled {
   color: var(--Gray-500, #667085);
-  padding-bottom: 36px;
+  padding-bottom: 30px;
+
   .pisell-card-amount-wrap {
     .pisell-card-amount-item {
       flex-direction: row;
       align-items: center;
+
       .pisell-card-amount-item-value {
         font-size: 14px;
         font-weight: 400;
@@ -120,7 +168,85 @@
       }
     }
   }
+
+  .pisell-wallet-pass-card-body,
+  .pisell-card-amount-item-label,
+  .pisell-card-amount-item-value {
+    color: var(--Gray-500, #667085) !important;
+    font-weight: 400 !important;
+  }
 }
+
 .pisell-card-disabled-hide-disabled-reason {
   height: 165px !important;
 }
+
+.pisell-wallet-pass-card.pisell-wallet-pass-card-mini {
+  width: 250px;
+  height: 150px;
+
+  .pisell-card-name-wrap {
+    font-weight: 600;
+    font-size: 16px;
+    max-width: calc(100% - 96px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .pisell-card-store-name {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .pisell-card-amount-wrap {
+    display: block;
+  }
+
+  .pisell-wallet-pass-card-redeem {
+    visibility: hidden;
+    flex-direction: row;
+    align-items: center;
+
+    .pisell-card-amount-item-label,
+    .pisell-card-amount-item-value {
+      color: var(--Primary-600, #7f56d9);
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 600;
+    }
+  }
+
+  &.active {
+    .pisell-wallet-pass-card-redeem {
+      visibility: visible;
+    }
+  }
+
+  .pisell-wallet-pass-card-balance {
+    flex-direction: row;
+    align-items: center;
+
+    .pisell-card-amount-item-label,
+    .pisell-card-amount-item-value {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--Gray-900, #101828);
+      line-height: 20px;
+    }
+  }
+
+  .pisell-card-checked-icon {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+  }
+}
+
+.pisell-wallet-pass-card-detail-modal,
+.pisell-wallet-pass-card-edit-modal {
+  .pisell-lowcode-form-item {
+    margin-bottom: 20px;
+  }
+}

package/es/locales/en-US.d.ts

@@ -117,9 +117,16 @@ declare const _default: {
     'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
-    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-edit': string;
+    'pisell-wallet-pass-card-name': string;
+    'pisell-wallet-pass-card-store-name': string;
     'pisell-wallet-pass-card-balance': string;
+    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-code': string;
     'pisell-wallet-pass-card-valid-to': string;
+    'pisell-wallet-pass-card-confirm': string;
+    'pisell-wallet-pass-card-cancel': string;
+    'pisell-wallet-pass-card-required': string;
     'pisell-wallet-pass-card-expireDate': string;
     'pisell-adjust-price-price-override': string;
     'pisell-adjust-price-discount': string;

package/es/locales/en-US.js

@@ -143,9 +143,16 @@ export default {
   'pisell-information-entry-scan-exit': 'Exit',
   // 钱包卡片组件
   'pisell-wallet-pass-card-detail': 'Detail',
-  'pisell-wallet-pass-card-redeem': 'Redeem',
+  'pisell-wallet-pass-card-edit': 'Edit',
+  'pisell-wallet-pass-card-name': 'Name',
+  'pisell-wallet-pass-card-store-name': 'StoreName',
   'pisell-wallet-pass-card-balance': 'Balance',
+  'pisell-wallet-pass-card-redeem': 'Redeem',
+  'pisell-wallet-pass-card-code': 'Code',
   'pisell-wallet-pass-card-valid-to': 'Valid to',
+  'pisell-wallet-pass-card-confirm': 'Confirm',
+  'pisell-wallet-pass-card-cancel': 'Cancel',
+  'pisell-wallet-pass-card-required': 'This field is required',
   'pisell-wallet-pass-card-expireDate': 'Long term',
   // 金额修改组件
   'pisell-adjust-price-price-override': "Price override",

package/es/locales/zh-CN.d.ts

@@ -117,9 +117,16 @@ declare const _default: {
     'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
-    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-edit': string;
+    'pisell-wallet-pass-card-name': string;
+    'pisell-wallet-pass-card-store-name': string;
     'pisell-wallet-pass-card-balance': string;
+    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-code': string;
     'pisell-wallet-pass-card-valid-to': string;
+    'pisell-wallet-pass-card-confirm': string;
+    'pisell-wallet-pass-card-cancel': string;
+    'pisell-wallet-pass-card-required': string;
     'pisell-wallet-pass-card-expireDate': string;
     'pisell-adjust-price-price-override': string;
     'pisell-adjust-price-discount': string;

package/es/locales/zh-CN.js

@@ -143,9 +143,16 @@ export default {
   'pisell-information-entry-scan-exit': '退出',
   // 钱包卡片组件
   'pisell-wallet-pass-card-detail': '详情',
-  'pisell-wallet-pass-card-redeem': '兑换',
+  'pisell-wallet-pass-card-edit': '编辑',
+  'pisell-wallet-pass-card-name': '商品名称',
+  'pisell-wallet-pass-card-store-name': '共享店铺名称',
   'pisell-wallet-pass-card-balance': '余额',
+  'pisell-wallet-pass-card-redeem': '兑换',
+  'pisell-wallet-pass-card-code': '识别码编号',
   'pisell-wallet-pass-card-valid-to': '有效期至',
+  'pisell-wallet-pass-card-confirm': '确认',
+  'pisell-wallet-pass-card-cancel': '取消',
+  'pisell-wallet-pass-card-required': '此字段必填',
   'pisell-wallet-pass-card-expireDate': '长期',
   // 金额修改组件
   'pisell-adjust-price-price-override': "一口价",

package/es/locales/zh-TW.d.ts

@@ -117,9 +117,16 @@ declare const _default: {
     'pisell-information-entry-input-confirm': string;
     'pisell-information-entry-scan-exit': string;
     'pisell-wallet-pass-card-detail': string;
-    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-edit': string;
+    'pisell-wallet-pass-card-name': string;
+    'pisell-wallet-pass-card-store-name': string;
     'pisell-wallet-pass-card-balance': string;
+    'pisell-wallet-pass-card-redeem': string;
+    'pisell-wallet-pass-card-code': string;
     'pisell-wallet-pass-card-valid-to': string;
+    'pisell-wallet-pass-card-confirm': string;
+    'pisell-wallet-pass-card-cancel': string;
+    'pisell-wallet-pass-card-required': string;
     'pisell-wallet-pass-card-expireDate': string;
     'pisell-adjust-price-price-override': string;
     'pisell-adjust-price-discount': string;

package/es/locales/zh-TW.js

@@ -143,9 +143,16 @@ export default {
   'pisell-information-entry-scan-exit': '退出',
   // 钱包卡片组件
   'pisell-wallet-pass-card-detail': '詳情',
-  'pisell-wallet-pass-card-redeem': '兌換',
+  'pisell-wallet-pass-card-edit': '編輯',
+  'pisell-wallet-pass-card-name': '商品名稱',
+  'pisell-wallet-pass-card-store-name': '共享店鋪名稱',
   'pisell-wallet-pass-card-balance': '餘額',
+  'pisell-wallet-pass-card-redeem': '兌換',
+  'pisell-wallet-pass-card-code': '識別碼編號',
   'pisell-wallet-pass-card-valid-to': '有效期至',
+  'pisell-wallet-pass-card-confirm': '確認',
+  'pisell-wallet-pass-card-cancel': '取消',
+  'pisell-wallet-pass-card-required': '此欄位為必填',
   'pisell-wallet-pass-card-expireDate': '長期',
   // 金额修改组件
   'pisell-adjust-price-price-override': "一口價",

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { PisellCheckboxGroupProps } from '../pisellCheckboxGroup';
 import { PisellContextType } from '../pisell-config-provider/context';
 import { PisellWalletPassCardProps } from '../pisellWalletPassCard';
+import './index.less';
 export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'options'> {
     platform?: PisellContextType['platform'];
     /** 当用户查看完所有记录时，底部会显示此消息 */
@@ -38,6 +39,33 @@ export interface PisellCardListProps extends Omit<PisellCheckboxGroupProps, 'opt
     showCover?: boolean;
     /** 是否余额货币单位 */
     showBalanceSymbol?: boolean;
+    /** 卡片大小 */
+    type?: 'default' | 'mini';
+    /** 展示操作按钮 */
+    showActions?: boolean;
+    /** 操作按钮配置 */
+    actions?: {
+        /** 按钮展示方式 */
+        layout: 'expanded' | 'collapsed';
+        /** detail 按钮配置 */
+        detail?: {
+            visible: boolean;
+            iconColor: string;
+        };
+        /** edit按钮配置 */
+        edit?: {
+            visible: boolean;
+            iconColor: string;
+            dialogTitle: string;
+            enableDialog: boolean;
+            fields: {
+                name: string;
+                label: string;
+            };
+        };
+    };
+    /** 编辑弹窗点击提交 */
+    onConfirmEdit?: (value: any, index: number) => void;
 }
-declare const _default: React.MemoExoticComponent<(props: PisellCardListProps) => React.JSX.Element>;
+declare const _default: React.NamedExoticComponent<PisellCardListProps>;
 export default _default;

package/lib/components/pisellCardList/index.js

@@ -33,14 +33,13 @@ __export(pisellCardList_exports, {
 });
 module.exports = __toCommonJS(pisellCardList_exports);
 var import_react = __toESM(require("react"));
-var import_react_infinite_scroll_component = __toESM(require("react-infinite-scroll-component"));
-var import_antd = require("antd");
 var import_pisellCheckboxGroup = __toESM(require("../pisellCheckboxGroup"));
 var import_pisellWalletPassCard = __toESM(require("../pisellWalletPassCard"));
 var import_pisellEmpty = __toESM(require("../pisellEmpty"));
+var import_index = require("./index.less");
 var PisellCardList = (props) => {
   const {
-    data,
+    data = [],
     loadMoreData = () => {
     },
     endMessage,
@@ -49,6 +48,9 @@ var PisellCardList = (props) => {
     onChange,
     value,
     mode,
+    direction,
+    fullWidth,
+    type,
     showName,
     showCode,
     showCover,
@@ -62,47 +64,46 @@ var PisellCardList = (props) => {
     showEmpty,
     showBalanceSymbol
   } = props;
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_react_infinite_scroll_component.default,
+  return data.length ? /* @__PURE__ */ import_react.default.createElement(
+    import_pisellCheckboxGroup.default,
     {
-      dataLength: data.length,
-      next: loadMoreData,
-      hasMore,
-      loader: loader || /* @__PURE__ */ import_react.default.createElement(import_antd.Skeleton, { paragraph: { rows: 3 }, active: true }),
-      endMessage,
-      scrollableTarget: "scrollableDiv"
-    },
-    data.length ? /* @__PURE__ */ import_react.default.createElement(
-      import_pisellCheckboxGroup.default,
-      {
-        options: data,
-        value,
-        mode,
-        rowKey: "id",
-        gap: 12,
-        onChange,
-        iconPosition: "hide",
-        renderOption: (item, active) => {
-          return /* @__PURE__ */ import_react.default.createElement(
-            import_pisellWalletPassCard.default,
-            {
-              ...item,
-              active,
-              showName: showName || (item == null ? void 0 : item.showName),
-              showBalance: showBalance || (item == null ? void 0 : item.showBalance),
-              showCode: showCode || (item == null ? void 0 : item.showCode),
-              showCover: showCover || (item == null ? void 0 : item.showCover),
-              showDetail: showDetail || (item == null ? void 0 : item.showDetail),
-              showQrCode: showQrCode || (item == null ? void 0 : item.showQrCode),
-              showRedeem: showRedeem || (item == null ? void 0 : item.showRedeem),
-              showStoreName: showStoreName || (item == null ? void 0 : item.showStoreName),
-              showValidDate: showValidDate || (item == null ? void 0 : item.showValidDate),
-              showBalanceSymbol: showBalanceSymbol || (item == null ? void 0 : item.showBalanceSymbol)
-            }
-          );
-        }
+      options: data,
+      value,
+      mode,
+      direction,
+      rowKey: "id",
+      gap: 12,
+      onChange,
+      iconPosition: "hide",
+      fullWidth,
+      renderOption: (item, active, index) => {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_pisellWalletPassCard.default,
+          {
+            ...item,
+            active,
+            showName: showName || (item == null ? void 0 : item.showName),
+            showBalance: showBalance || (item == null ? void 0 : item.showBalance),
+            showCode: showCode || (item == null ? void 0 : item.showCode),
+            showCover: showCover || (item == null ? void 0 : item.showCover),
+            showDetail: showDetail || (item == null ? void 0 : item.showDetail),
+            showQrCode: showQrCode || (item == null ? void 0 : item.showQrCode),
+            showRedeem: showRedeem || (item == null ? void 0 : item.showRedeem),
+            showStoreName: showStoreName || (item == null ? void 0 : item.showStoreName),
+            showValidDate: showValidDate || (item == null ? void 0 : item.showValidDate),
+            showBalanceSymbol: showBalanceSymbol || (item == null ? void 0 : item.showBalanceSymbol),
+            showActions: props.showActions || (item == null ? void 0 : item.showActions),
+            actions: props.actions || (item == null ? void 0 : item.actions),
+            onConfirmEdit: (newVal) => {
+              var _a;
+              (_a = props.onConfirmEdit) == null ? void 0 : _a.call(props, newVal, index);
+            },
+            type,
+            style: direction === "vertical" || direction === "horizontal" && fullWidth ? { width: "100%" } : {}
+          }
+        );
       }
-    ) : showEmpty && (empty || /* @__PURE__ */ import_react.default.createElement(import_pisellEmpty.default, null))
-  );
+    }
+  ) : showEmpty && (empty || /* @__PURE__ */ import_react.default.createElement(import_pisellEmpty.default, null));
 };
 var pisellCardList_default = (0, import_react.memo)(PisellCardList);