@pisell/private-materials 6.4.42 → 6.4.44

package/lib/pro/priceKeyboard/hooks/rightItems.js

@@ -0,0 +1,81 @@
+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/pro/priceKeyboard/hooks/rightItems.tsx
+var rightItems_exports = {};
+__export(rightItems_exports, {
+  default: () => rightItems_default
+});
+module.exports = __toCommonJS(rightItems_exports);
+var import_react = __toESM(require("react"));
+var import_materials = require("@pisell/materials");
+var useRightItems = (props) => {
+  const { rightItemsStyle, doneText, resetText } = props;
+  const rightItems = (0, import_react.useMemo)(() => {
+    return [
+      {
+        value: "delete",
+        label: /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: "pisell2-delete" }),
+        disabled: false,
+        type: "text",
+        style: {
+          color: (rightItemsStyle == null ? void 0 : rightItemsStyle.textColor) || "#000000",
+          backgroundColor: (rightItemsStyle == null ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#ffffff",
+          ...(rightItemsStyle == null ? void 0 : rightItemsStyle.deleteButtonStyle) || {}
+        }
+      },
+      {
+        value: "reset",
+        label: resetText || "Reset",
+        disabled: false,
+        type: "text",
+        style: {
+          fontSize: "18px",
+          color: (rightItemsStyle == null ? void 0 : rightItemsStyle.resetButtonTextColor) || "#D92D20",
+          backgroundColor: (rightItemsStyle == null ? void 0 : rightItemsStyle.resetButtonBackgroundColor) || "#ffffff",
+          ...(rightItemsStyle == null ? void 0 : rightItemsStyle.resetButtonStyle) || {}
+        }
+      },
+      {
+        value: "done",
+        label: doneText || "Done",
+        disabled: false,
+        type: "primary",
+        size: 2,
+        style: {
+          fontSize: "18px",
+          background: (rightItemsStyle == null ? void 0 : rightItemsStyle.isDoneButtonFollowTheme) ? "var(--theme-color)" : (rightItemsStyle == null ? void 0 : rightItemsStyle.doneButtonBackgroundColor) || "#5d3f9f",
+          color: (rightItemsStyle == null ? void 0 : rightItemsStyle.isDoneButtonFollowTheme) ? "#ffffff" : (rightItemsStyle == null ? void 0 : rightItemsStyle.doneButtonTextColor) || "#ffffff",
+          ...(rightItemsStyle == null ? void 0 : rightItemsStyle.doneButtonStyle) || {}
+        }
+      }
+    ];
+  }, [doneText, resetText, rightItemsStyle]);
+  return rightItems;
+};
+var rightItems_default = useRightItems;

package/lib/pro/priceKeyboard/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CashKeyboard } from './components/cashKeyboard';
+export { default as PaymentKeyboard } from './components/paymentKeyboard';
+export { default as DiscountKeyboard } from './components/discountKeyboard';

package/lib/pro/priceKeyboard/index.js

@@ -0,0 +1,45 @@
+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/pro/priceKeyboard/index.tsx
+var priceKeyboard_exports = {};
+__export(priceKeyboard_exports, {
+  CashKeyboard: () => import_cashKeyboard.default,
+  DiscountKeyboard: () => import_discountKeyboard.default,
+  PaymentKeyboard: () => import_paymentKeyboard.default
+});
+module.exports = __toCommonJS(priceKeyboard_exports);
+var import_cashKeyboard = __toESM(require("./components/cashKeyboard"));
+var import_paymentKeyboard = __toESM(require("./components/paymentKeyboard"));
+var import_discountKeyboard = __toESM(require("./components/discountKeyboard"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CashKeyboard,
+  DiscountKeyboard,
+  PaymentKeyboard
+});

package/lib/pro/priceKeyboard/index.less

@@ -0,0 +1,215 @@
+.price-keyboard {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.price-keyboard-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.price-keyboard-inputs-default {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.price-keyboard-input-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background-color: #f9fafb;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #98a2b3;
+  }
+
+  &:focus-within {
+    border-color: #1570ef;
+    box-shadow: 0 0 0 3px rgba(21, 112, 239, 0.1);
+  }
+}
+
+.price-keyboard-input {
+  flex: 1;
+}
+
+.price-keyboard-keyboard {
+  display: flex;
+  gap: 12px;
+}
+
+.price-keyboard-keyboard-numbers {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.price-keyboard-keyboard-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 80px;
+}
+
+.price-keyboard-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border: 1px solid #d0d5dd;
+  border-radius: 8px;
+  background-color: #ffffff;
+  color: #344054;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+
+  &:hover {
+    background-color: #f9fafb;
+    border-color: #98a2b3;
+  }
+
+  &:active {
+    background-color: #f2f4f7;
+    transform: translateY(1px);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    
+    &:hover {
+      background-color: #ffffff;
+      border-color: #d0d5dd;
+      transform: none;
+    }
+  }
+
+  &.price-keyboard-key-primary {
+    background-color: #1570ef;
+    color: #ffffff;
+    border-color: #1570ef;
+
+    &:hover {
+      background-color: #1366d9;
+      border-color: #1366d9;
+    }
+
+    &:active {
+      background-color: #0f5bc4;
+      border-color: #0f5bc4;
+    }
+  }
+
+  &.price-keyboard-key-size-2 {
+    height: 104px; /* 48px * 2 + 8px gap */
+  }
+
+  &.price-keyboard-key-size-3 {
+    height: 160px; /* 48px * 3 + 16px gap */
+  }
+}
+
+.price-keyboard-delete-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .price-keyboard {
+    padding: 16px;
+    gap: 16px;
+  }
+
+  .price-keyboard-keyboard {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .price-keyboard-keyboard-actions {
+    flex-direction: row;
+    width: auto;
+    height: auto;
+  }
+
+  .price-keyboard-key {
+    height: 44px;
+    font-size: 14px;
+  }
+
+  .price-keyboard-key.price-keyboard-key-size-2 {
+    height: 44px;
+    flex: 2;
+  }
+
+  .price-keyboard-key.price-keyboard-key-size-3 {
+    height: 44px;
+    flex: 3;
+  }
+}
+
+/* 深色主题支持 */
+@media (prefers-color-scheme: dark) {
+  .price-keyboard {
+    background-color: #1f2937;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .price-keyboard-input-wrapper {
+    background-color: #374151;
+    border-color: #4b5563;
+
+    &:hover {
+      border-color: #6b7280;
+    }
+
+    &:focus-within {
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+  }
+
+  .price-keyboard-key {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #f9fafb;
+
+    &:hover {
+      background-color: #4b5563;
+      border-color: #6b7280;
+    }
+
+    &:active {
+      background-color: #6b7280;
+    }
+
+    &.price-keyboard-key-primary {
+      background-color: #3b82f6;
+      border-color: #3b82f6;
+
+      &:hover {
+        background-color: #2563eb;
+        border-color: #2563eb;
+      }
+
+      &:active {
+        background-color: #1d4ed8;
+        border-color: #1d4ed8;
+      }
+    }
+  }
+}

package/lib/pro/priceKeyboard/utils.d.ts

@@ -0,0 +1,31 @@
+export declare const DEFAULT_THEME_CONFIG: {
+    dark: {
+        titleColor: string;
+        subtitleColor: string;
+        keyboardBgColor: string;
+        keyboardWrapperBgColor: string;
+        bgColor: string;
+        bgColorGray200: string;
+        bgColorGray300: string;
+        textGray500: string;
+        textGray600: string;
+        textGray900: string;
+    };
+    light: {
+        titleColor: string;
+        subtitleColor: string;
+        keyboardBgColor: string;
+        keyboardWrapperBgColor: string;
+        bgColor: string;
+        bgColorGray200: string;
+        bgColorGray300: string;
+        textGray500: string;
+        textGray600: string;
+        textGray900: string;
+    };
+};
+/**
+ * 设置键盘主题
+ * @param theme 主题
+ */
+export declare const setKeyboardTheme: (theme?: 'dark' | 'light') => void;

package/lib/pro/priceKeyboard/utils.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/priceKeyboard/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  DEFAULT_THEME_CONFIG: () => DEFAULT_THEME_CONFIG,
+  setKeyboardTheme: () => setKeyboardTheme
+});
+module.exports = __toCommonJS(utils_exports);
+var import_utils = require("@pisell/utils");
+var DEFAULT_THEME_CONFIG = {
+  dark: {
+    titleColor: "#FFFFFF",
+    subtitleColor: "#D0D5DD",
+    keyboardBgColor: "rgba(0, 0, 0, 0.4)",
+    keyboardWrapperBgColor: "rgba(0, 0, 0, 0.7)",
+    bgColor: "rgba(0, 0, 0, 0.70)",
+    bgColorGray200: "rgba(0, 0, 0, 0.40)",
+    bgColorGray300: "rgba(0, 0, 0, 0.40)",
+    textGray500: "#D0D5DD",
+    textGray600: "#FFFFFF",
+    textGray900: "#FFFFFF"
+  },
+  light: {
+    titleColor: "#101828",
+    subtitleColor: "#667085",
+    keyboardBgColor: "#D0D5DD",
+    keyboardWrapperBgColor: "white",
+    bgColor: "#FFFFFF",
+    bgColorGray200: "#EAECF0",
+    bgColorGray300: "#D0D5DD",
+    textGray500: "#667085",
+    textGray600: "#475467",
+    textGray900: "#101828"
+  }
+};
+var setKeyboardTheme = (theme) => {
+  const currentTheme = DEFAULT_THEME_CONFIG[theme || "light"];
+  (0, import_utils.setTheme)({
+    // 标题颜色
+    "--pisell-pro-price-keyboard-title-color": currentTheme.titleColor,
+    // 副标题颜色
+    "--pisell-pro-price-keyboard-subtitle-color": currentTheme.subtitleColor,
+    // 背景颜色梯度
+    "--pisell-pro-price-keyboard-wrapper-bg-color": currentTheme.keyboardWrapperBgColor,
+    "--pisell-pro-price-keyboard-bg-color": currentTheme.keyboardBgColor,
+    "--pisell-pro-price-keyboard-bg-color-gray-200": currentTheme.bgColorGray200,
+    "--pisell-pro-price-keyboard-bg-color-gray-300": currentTheme.bgColorGray300,
+    // 文本颜色梯度
+    "--pisell-pro-price-keyboard-text-gray-500": currentTheme.textGray500,
+    "--pisell-pro-price-keyboard-text-gray-600": currentTheme.textGray600,
+    "--pisell-pro-price-keyboard-text-gray-900": currentTheme.textGray900
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_THEME_CONFIG,
+  setKeyboardTheme
+});

package/lib/pro/skuDetailModal/index.js

@@ -35,8 +35,6 @@ module.exports = __toCommonJS(skuDetailModal_exports);
 var import_react = __toESM(require("react"));
 var import_materials = require("@pisell/materials");
 var import_decimal = __toESM(require("decimal.js"));
-var import_materials2 = require("@pisell/materials");
-var import_react_dom = require("react-dom");
 var import_cloneDeep = __toESM(require("lodash/cloneDeep"));
 var import_utils = require("@pisell/utils");
 var import_Delete_wght300_24px = __toESM(require("@pisell/icon/es/Delete_wght300_24px"));
@@ -45,6 +43,7 @@ var import_index = require("./index.less");
 var import_pisellNumberSelector = __toESM(require("../pisellNumberSelector"));
 var import_noteModal = __toESM(require("../../plus/noteModal"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_priceKeyboard = require("../priceKeyboard");
 var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -301,26 +300,23 @@ var SkuDetailModal = ({ onConfirm, onRemove, onClose }, ref) => {
         onDelete: onNoteDelete
       }
     ),
-    showPriceAdjustModal && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-price-adjust-overlay" }, /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: "pisell-price-adjust-backdrop",
-          onMouseDown: (e) => {
-            e.preventDefault();
-            setShowPriceAdjustModal(false);
-          }
-        }
-      ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-price-adjust-container" }, /* @__PURE__ */ import_react.default.createElement(
-        import_materials2.PisellAdjustPrice,
-        {
-          originValue: priceOverride,
-          value: priceOverride,
-          onChange: handlePriceAdjustConfirm,
-          selectType: "dark"
-        }
-      ))),
-      document.body
+    /* @__PURE__ */ import_react.default.createElement(
+      import_priceKeyboard.DiscountKeyboard,
+      {
+        containerProps: {
+          renderType: "modal",
+          open: showPriceAdjustModal,
+          onCancel: () => setShowPriceAdjustModal(false)
+        },
+        enableExceedMaxAmount: true,
+        originalValue: priceOverride,
+        defaultValue: priceOverride,
+        onEnter: (discountAmount) => {
+          const finalPrice = new import_decimal.default(priceOverride || 0).minus(discountAmount).toNumber();
+          handlePriceAdjustConfirm(finalPrice);
+        },
+        selectType: "dark"
+      }
     )
   ));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/private-materials",
-  "version": "6.4.42",
+  "version": "6.4.44",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -60,8 +60,8 @@
     "react-resizable": "^3.0.5",
     "styled-components": "^6.0.0-rc.3",
     "@pisell/icon": "0.0.11",
+    "@pisell/materials": "6.4.9",
     "@pisell/utils": "3.0.2",
-    "@pisell/materials": "6.4.8",
     "@pisell/date-picker": "3.0.7"
   },
   "peerDependencies": {