@pisell/private-materials 6.11.693 → 6.11.695

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -121,8 +121,8 @@
121
121
  &.selectDate {
122
122
  .calendar-content,
123
123
  .day-item-calendar-content {
124
- border-color: var(--Primary-600, #7f56d9);
125
- box-shadow: inset 0 0 0 1px var(--Primary-600, #7f56d9);
124
+ border-color: var(--theme-color, #7f56d9);
125
+ box-shadow: inset 0 0 0 1px var(--theme-color, #7f56d9);
126
126
  box-sizing: border-box;
127
127
  }
128
128
  }
@@ -81,12 +81,12 @@
81
81
  }
82
82
 
83
83
  .pisell-event-usability-selected {
84
- border: 1px solid var(--Primary-600, #7f56d9);
84
+ border: 1px solid var(--theme-color, #7f56d9);
85
85
  // PisellCard 的 hover/background 样式可能晚于业务样式加载;明确覆盖,
86
86
  // 避免只剩选中白字而卡片仍是白底。
87
- background: var(--Primary-600, #7f56d9) !important;
87
+ background: var(--theme-color, #7f56d9) !important;
88
88
  &:hover {
89
- background: var(--Primary-600, #7f56d9) !important;
89
+ background: var(--theme-color, #7f56d9) !important;
90
90
  }
91
91
 
92
92
  .pisell-event-usability-slot,
@@ -100,6 +100,6 @@
100
100
  // box-shadow 补出原来的双像素选中效果。
101
101
  .pisell-event-usability.pisell-card-wrap-selected {
102
102
  border-width: 1px;
103
- border-color: var(--Primary-600, #7f56d9);
104
- box-shadow: 0 0 0 1px var(--Primary-600, #7f56d9);
103
+ border-color: var(--theme-color, #7f56d9);
104
+ box-shadow: 0 0 0 1px var(--theme-color, #7f56d9);
105
105
  }
@@ -1,10 +1,10 @@
1
1
  import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
2
2
  import dayjs from "dayjs";
3
- import timezone from "dayjs/plugin/timezone";
4
- import utc from "dayjs/plugin/utc";
3
+ import timezonePlugin from "dayjs/plugin/timezone";
4
+ import utcPlugin from "dayjs/plugin/utc";
5
5
  //#region src/plus/saasDevice/devicePasscodes/model.ts
6
- dayjs.extend(utc);
7
- dayjs.extend(timezone);
6
+ dayjs.extend(utcPlugin);
7
+ dayjs.extend(timezonePlugin);
8
8
  const INITIAL_DEVICE_PASSCODE_STATE = {
9
9
  deviceIds: [],
10
10
  devicesById: {}
@@ -24,9 +24,8 @@ const OptionsModal = (props) => {
24
24
  const renderType = (customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalRenderType) || (variant === "phone" ? "drawer" : "modal");
25
25
  const isDrawer = renderType === "drawer";
26
26
  const isTabletVariant = !isDrawer && (variant === "tablet" || variant === "smallTablet");
27
- const viewportAspectRatio = typeof window !== "undefined" && window.innerHeight > 0 ? window.innerWidth / window.innerHeight : 0;
28
- const isPosTabletViewport = !isDrawer && variant === "pos" && typeof window !== "undefined" && window.innerWidth <= 1400 && viewportAspectRatio >= 1.25 && viewportAspectRatio <= 1.65;
29
- const shouldUseLargeModal = isTabletVariant || isPosTabletViewport;
27
+ const shouldUsePrimaryModalLayout = !isDrawer;
28
+ const modalWidth = isDrawer ? "100%" : isTabletVariant ? "95%" : "80%";
30
29
  const platform = isDrawer ? "h5" : variant === "tablet" || variant === "smallTablet" ? "ipad" : "pc";
31
30
  useEffect(() => {
32
31
  if (!open || typeof window === "undefined" || typeof document === "undefined") return;
@@ -38,21 +37,20 @@ const OptionsModal = (props) => {
38
37
  const rect = wrapper === null || wrapper === void 0 ? void 0 : wrapper.getBoundingClientRect();
39
38
  const computedStyle = wrapper ? window.getComputedStyle(wrapper) : null;
40
39
  const viewport = window.visualViewport;
41
- const expectedWidth = shouldUseLargeModal ? window.innerWidth * .95 : null;
40
+ const expectedWidth = shouldUsePrimaryModalLayout ? window.innerWidth * (isTabletVariant ? .95 : .8) : window.innerWidth;
42
41
  const actualWidth = (_rect$width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect$width !== void 0 ? _rect$width : null;
43
42
  logger === null || logger === void 0 || (_logger$addLog = logger.addLog) === null || _logger$addLog === void 0 || _logger$addLog.call(logger, {
44
- type: shouldUseLargeModal && actualWidth != null && actualWidth < window.innerWidth * .9 ? "warning" : "info",
43
+ type: shouldUsePrimaryModalLayout && actualWidth != null && actualWidth < expectedWidth * .9 ? "warning" : "info",
45
44
  title: "SKU选项弹窗-布局",
46
45
  metadata: {
47
46
  reason,
48
47
  variant,
49
48
  renderType,
50
49
  isTabletVariant,
51
- isPosTabletViewport,
52
- shouldUseLargeModal,
50
+ primaryModalLayoutApplied: shouldUsePrimaryModalLayout,
53
51
  configuredWidth: (customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalWidth) || "480px",
54
52
  expectedWidth,
55
- expectedHeight: shouldUseLargeModal ? "95%" : null,
53
+ expectedHeight: "95%",
56
54
  actual: rect ? {
57
55
  width: Number(rect.width.toFixed(2)),
58
56
  height: Number(rect.height.toFixed(2)),
@@ -66,7 +64,7 @@ const OptionsModal = (props) => {
66
64
  maxHeight: computedStyle.maxHeight,
67
65
  transform: computedStyle.transform
68
66
  } : null,
69
- largeModalSizeApplied: !shouldUseLargeModal || actualWidth != null && actualWidth >= window.innerWidth * .9,
67
+ primaryModalSizeApplied: !shouldUsePrimaryModalLayout || actualWidth != null && actualWidth >= expectedWidth * .9,
70
68
  window: {
71
69
  innerWidth: window.innerWidth,
72
70
  innerHeight: window.innerHeight,
@@ -95,8 +93,8 @@ const OptionsModal = (props) => {
95
93
  return () => window.clearTimeout(settledTimer);
96
94
  }, [
97
95
  customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalWidth,
98
- isPosTabletViewport,
99
- shouldUseLargeModal,
96
+ isTabletVariant,
97
+ shouldUsePrimaryModalLayout,
100
98
  logger,
101
99
  open,
102
100
  renderType,
@@ -149,11 +147,10 @@ const OptionsModal = (props) => {
149
147
  className: classNames("pisell-sku-options-modal", props.appearanceClassName, {
150
148
  "pisell-sku-options-modal--drawer": isDrawer,
151
149
  "pisell-sku-options-modal--smallTablet": isTabletVariant && variant === "smallTablet",
152
- "pisell-sku-options-modal--tablet": isTabletVariant && variant === "tablet",
153
- "pisell-sku-options-modal--pos-tablet": isPosTabletViewport
150
+ "pisell-sku-options-modal--tablet": isTabletVariant && variant === "tablet"
154
151
  }),
155
152
  style: _objectSpread2(_objectSpread2({}, props.appearanceStyle), {}, { maxHeight: isDrawer ? "95dvh" : void 0 }),
156
- height: isDrawer || shouldUseLargeModal ? "95%" : void 0,
153
+ height: "95%",
157
154
  footer: /* @__PURE__ */ React.createElement("div", { className: "pisell-plus-sku-options-card-footer" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(NumericStepper, {
158
155
  min: canSelectedMin,
159
156
  max: canSelectedMax,
@@ -176,7 +173,7 @@ const OptionsModal = (props) => {
176
173
  display: "flex",
177
174
  flexDirection: "column"
178
175
  },
179
- width: isDrawer ? "100%" : shouldUseLargeModal ? "95%" : (customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalWidth) || "480px",
176
+ width: modalWidth,
180
177
  placement: isDrawer ? "bottom" : void 0
181
178
  }
182
179
  }, /* @__PURE__ */ React.createElement(SelectorGroup, {
@@ -1,10 +1,13 @@
1
1
  /**
2
2
  * SKU 二级规格选择弹窗(OptionsModal)
3
3
  * - Drawer 限制在可视区 95dvh 内,超长规格由内容区自行滚动
4
- * - 与 .pisell-sku-detail-modal 对齐:smallTablet / tablet 下放宽到 95% 宽 + 95vh 高
5
- * - 其他设备保持组件原生默认(受 `width={customConfig?.modalWidth || '480px'}` 控制)
4
+ * - 与 .pisell-sku-detail-modal 对齐:非 Drawer 为 80% 宽 + 95% 高;
5
+ * smallTablet / tablet 下放宽到 95% 宽 + 95% 高
6
6
  */
7
7
  .pisell-sku-options-modal {
8
+ height: 95% !important;
9
+ max-height: 884px !important;
10
+
8
11
  &--drawer {
9
12
  .pisell-lowcode-floating-layer-content,
10
13
  .pisell-lowcode-modal-content {
@@ -18,11 +21,9 @@
18
21
  }
19
22
 
20
23
  &--smallTablet,
21
- &--tablet,
22
- // iPad WebPOS 当前会注入 variant=pos;仅由组件在横屏平板视口条件下添加。
23
- &--pos-tablet {
24
+ &--tablet {
24
25
  width: 95% !important;
25
- height: 95% !important;
26
+ max-height: 95% !important;
26
27
 
27
28
  .pisell-lowcode-modal-content {
28
29
  height: 100% !important;
@@ -6,12 +6,12 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
6
6
  import { locales } from "@pisell/utils";
7
7
  import { Button, PisellEmpty, PisellModal, PisellStatisticList, Skeleton, Timeline, usePisellConfig } from "@pisell/materials";
8
8
  import { useRequest } from "ahooks";
9
- import timezone from "dayjs/plugin/timezone";
10
- import utc from "dayjs/plugin/utc";
9
+ import timezonePlugin from "dayjs/plugin/timezone";
10
+ import utcPlugin from "dayjs/plugin/utc";
11
11
  import "./index.less";
12
12
  //#region src/plus/walletPassGallery/components/timelineSection/index.tsx
13
- dayjs.extend(timezone);
14
- dayjs.extend(utc);
13
+ dayjs.extend(timezonePlugin);
14
+ dayjs.extend(utcPlugin);
15
15
  const stateTimeUnix = 1723255863;
16
16
  const POLL_INTERVAL = 2e3;
17
17
  const POLL_MAX_TIMES = 5;
@@ -121,8 +121,8 @@
121
121
  &.selectDate {
122
122
  .calendar-content,
123
123
  .day-item-calendar-content {
124
- border-color: var(--Primary-600, #7f56d9);
125
- box-shadow: inset 0 0 0 1px var(--Primary-600, #7f56d9);
124
+ border-color: var(--theme-color, #7f56d9);
125
+ box-shadow: inset 0 0 0 1px var(--theme-color, #7f56d9);
126
126
  box-sizing: border-box;
127
127
  }
128
128
  }
@@ -81,12 +81,12 @@
81
81
  }
82
82
 
83
83
  .pisell-event-usability-selected {
84
- border: 1px solid var(--Primary-600, #7f56d9);
84
+ border: 1px solid var(--theme-color, #7f56d9);
85
85
  // PisellCard 的 hover/background 样式可能晚于业务样式加载;明确覆盖,
86
86
  // 避免只剩选中白字而卡片仍是白底。
87
- background: var(--Primary-600, #7f56d9) !important;
87
+ background: var(--theme-color, #7f56d9) !important;
88
88
  &:hover {
89
- background: var(--Primary-600, #7f56d9) !important;
89
+ background: var(--theme-color, #7f56d9) !important;
90
90
  }
91
91
 
92
92
  .pisell-event-usability-slot,
@@ -100,6 +100,6 @@
100
100
  // box-shadow 补出原来的双像素选中效果。
101
101
  .pisell-event-usability.pisell-card-wrap-selected {
102
102
  border-width: 1px;
103
- border-color: var(--Primary-600, #7f56d9);
104
- box-shadow: 0 0 0 1px var(--Primary-600, #7f56d9);
103
+ border-color: var(--theme-color, #7f56d9);
104
+ box-shadow: 0 0 0 1px var(--theme-color, #7f56d9);
105
105
  }
@@ -27,9 +27,8 @@ const OptionsModal = (props) => {
27
27
  const renderType = (customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalRenderType) || (variant === "phone" ? "drawer" : "modal");
28
28
  const isDrawer = renderType === "drawer";
29
29
  const isTabletVariant = !isDrawer && (variant === "tablet" || variant === "smallTablet");
30
- const viewportAspectRatio = typeof window !== "undefined" && window.innerHeight > 0 ? window.innerWidth / window.innerHeight : 0;
31
- const isPosTabletViewport = !isDrawer && variant === "pos" && typeof window !== "undefined" && window.innerWidth <= 1400 && viewportAspectRatio >= 1.25 && viewportAspectRatio <= 1.65;
32
- const shouldUseLargeModal = isTabletVariant || isPosTabletViewport;
30
+ const shouldUsePrimaryModalLayout = !isDrawer;
31
+ const modalWidth = isDrawer ? "100%" : isTabletVariant ? "95%" : "80%";
33
32
  const platform = isDrawer ? "h5" : variant === "tablet" || variant === "smallTablet" ? "ipad" : "pc";
34
33
  (0, react.useEffect)(() => {
35
34
  if (!open || typeof window === "undefined" || typeof document === "undefined") return;
@@ -41,21 +40,20 @@ const OptionsModal = (props) => {
41
40
  const rect = wrapper === null || wrapper === void 0 ? void 0 : wrapper.getBoundingClientRect();
42
41
  const computedStyle = wrapper ? window.getComputedStyle(wrapper) : null;
43
42
  const viewport = window.visualViewport;
44
- const expectedWidth = shouldUseLargeModal ? window.innerWidth * .95 : null;
43
+ const expectedWidth = shouldUsePrimaryModalLayout ? window.innerWidth * (isTabletVariant ? .95 : .8) : window.innerWidth;
45
44
  const actualWidth = (_rect$width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect$width !== void 0 ? _rect$width : null;
46
45
  logger === null || logger === void 0 || (_logger$addLog = logger.addLog) === null || _logger$addLog === void 0 || _logger$addLog.call(logger, {
47
- type: shouldUseLargeModal && actualWidth != null && actualWidth < window.innerWidth * .9 ? "warning" : "info",
46
+ type: shouldUsePrimaryModalLayout && actualWidth != null && actualWidth < expectedWidth * .9 ? "warning" : "info",
48
47
  title: "SKU选项弹窗-布局",
49
48
  metadata: {
50
49
  reason,
51
50
  variant,
52
51
  renderType,
53
52
  isTabletVariant,
54
- isPosTabletViewport,
55
- shouldUseLargeModal,
53
+ primaryModalLayoutApplied: shouldUsePrimaryModalLayout,
56
54
  configuredWidth: (customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalWidth) || "480px",
57
55
  expectedWidth,
58
- expectedHeight: shouldUseLargeModal ? "95%" : null,
56
+ expectedHeight: "95%",
59
57
  actual: rect ? {
60
58
  width: Number(rect.width.toFixed(2)),
61
59
  height: Number(rect.height.toFixed(2)),
@@ -69,7 +67,7 @@ const OptionsModal = (props) => {
69
67
  maxHeight: computedStyle.maxHeight,
70
68
  transform: computedStyle.transform
71
69
  } : null,
72
- largeModalSizeApplied: !shouldUseLargeModal || actualWidth != null && actualWidth >= window.innerWidth * .9,
70
+ primaryModalSizeApplied: !shouldUsePrimaryModalLayout || actualWidth != null && actualWidth >= expectedWidth * .9,
73
71
  window: {
74
72
  innerWidth: window.innerWidth,
75
73
  innerHeight: window.innerHeight,
@@ -98,8 +96,8 @@ const OptionsModal = (props) => {
98
96
  return () => window.clearTimeout(settledTimer);
99
97
  }, [
100
98
  customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalWidth,
101
- isPosTabletViewport,
102
- shouldUseLargeModal,
99
+ isTabletVariant,
100
+ shouldUsePrimaryModalLayout,
103
101
  logger,
104
102
  open,
105
103
  renderType,
@@ -152,11 +150,10 @@ const OptionsModal = (props) => {
152
150
  className: (0, classnames.default)("pisell-sku-options-modal", props.appearanceClassName, {
153
151
  "pisell-sku-options-modal--drawer": isDrawer,
154
152
  "pisell-sku-options-modal--smallTablet": isTabletVariant && variant === "smallTablet",
155
- "pisell-sku-options-modal--tablet": isTabletVariant && variant === "tablet",
156
- "pisell-sku-options-modal--pos-tablet": isPosTabletViewport
153
+ "pisell-sku-options-modal--tablet": isTabletVariant && variant === "tablet"
157
154
  }),
158
155
  style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props.appearanceStyle), {}, { maxHeight: isDrawer ? "95dvh" : void 0 }),
159
- height: isDrawer || shouldUseLargeModal ? "95%" : void 0,
156
+ height: "95%",
160
157
  footer: /* @__PURE__ */ react.default.createElement("div", { className: "pisell-plus-sku-options-card-footer" }, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement(require_index$1.default, {
161
158
  min: canSelectedMin,
162
159
  max: canSelectedMax,
@@ -179,7 +176,7 @@ const OptionsModal = (props) => {
179
176
  display: "flex",
180
177
  flexDirection: "column"
181
178
  },
182
- width: isDrawer ? "100%" : shouldUseLargeModal ? "95%" : (customConfig === null || customConfig === void 0 ? void 0 : customConfig.modalWidth) || "480px",
179
+ width: modalWidth,
183
180
  placement: isDrawer ? "bottom" : void 0
184
181
  }
185
182
  }, /* @__PURE__ */ react.default.createElement(SelectorGroup, {
@@ -1,10 +1,13 @@
1
1
  /**
2
2
  * SKU 二级规格选择弹窗(OptionsModal)
3
3
  * - Drawer 限制在可视区 95dvh 内,超长规格由内容区自行滚动
4
- * - 与 .pisell-sku-detail-modal 对齐:smallTablet / tablet 下放宽到 95% 宽 + 95vh 高
5
- * - 其他设备保持组件原生默认(受 `width={customConfig?.modalWidth || '480px'}` 控制)
4
+ * - 与 .pisell-sku-detail-modal 对齐:非 Drawer 为 80% 宽 + 95% 高;
5
+ * smallTablet / tablet 下放宽到 95% 宽 + 95% 高
6
6
  */
7
7
  .pisell-sku-options-modal {
8
+ height: 95% !important;
9
+ max-height: 884px !important;
10
+
8
11
  &--drawer {
9
12
  .pisell-lowcode-floating-layer-content,
10
13
  .pisell-lowcode-modal-content {
@@ -18,11 +21,9 @@
18
21
  }
19
22
 
20
23
  &--smallTablet,
21
- &--tablet,
22
- // iPad WebPOS 当前会注入 variant=pos;仅由组件在横屏平板视口条件下添加。
23
- &--pos-tablet {
24
+ &--tablet {
24
25
  width: 95% !important;
25
- height: 95% !important;
26
+ max-height: 95% !important;
26
27
 
27
28
  .pisell-lowcode-modal-content {
28
29
  height: 100% !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisell/private-materials",
3
- "version": "6.11.693",
3
+ "version": "6.11.695",
4
4
  "main": "./lib/index.js",
5
5
  "module": "./es/index.js",
6
6
  "types": "./lib/index.d.ts",
@@ -71,11 +71,11 @@
71
71
  "react-zoom-pan-pinch": "^3.7.0",
72
72
  "styled-components": "^6.0.0-rc.3",
73
73
  "use-sync-external-store": "^1.6.0",
74
- "@pisell/icon": "0.0.11",
75
- "@pisell/date-picker": "3.0.12",
76
74
  "@pisell/pi-payment-sdk": "0.0.3",
75
+ "@pisell/icon": "0.0.11",
77
76
  "@pisell/utils": "3.0.7",
78
- "@pisell/materials": "6.11.269"
77
+ "@pisell/materials": "6.11.271",
78
+ "@pisell/date-picker": "3.0.12"
79
79
  },
80
80
  "peerDependencies": {
81
81
  "react": "^18.0.0",