@gingkoo/pandora-metabase 1.0.83 → 1.0.85

package/lib/cjs/components/dialog/expression/index.js

@@ -549,6 +549,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
       var options = firstVal ? firstVal.split(',') : [];
       return (0, _jsxRuntime.jsx)("div", {
         children: (0, _jsxRuntime.jsx)(_pandora.Select, {
+          maxWidth: '500px',
           size: 'large',
           placeholder: "\u53EF\u8F93\u5165\u56DE\u8F66\u65B0\u589E\u4E0B\u62C9\u9009\u9879",
           allowCreate: true,

package/lib/cjs/components/dialog/select-list/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _pandora = require("@gingkoo/pandora");
 require("./index.less");
 var _classnames = _interopRequireDefault(require("classnames"));
 var SelectList = function SelectList(_ref) {
@@ -19,9 +20,14 @@ var SelectList = function SelectList(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className;
   return (0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames["default"])("Sqb-SelectColumns--box ", className),
-    children: (0, _jsxRuntime.jsx)("div", {
+    children: (0, _jsxRuntime.jsxs)("div", {
       className: 'p-2',
-      children: list.map(function (v, i) {
+      children: [list.length === 0 && (0, _jsxRuntime.jsx)("div", {
+        className: 'Sqb-SelectColumns--empty',
+        children: (0, _jsxRuntime.jsx)(_pandora.Empty, {
+          content: '暂无数据'
+        })
+      }), list.map(function (v, i) {
         return (0, _jsxRuntime.jsxs)("div", {
           className: (0, _classnames["default"])("Sqb-List-item p-2", {
             active: value === v.value,
@@ -32,7 +38,7 @@ var SelectList = function SelectList(_ref) {
           },
           children: [v.icon, v.label]
         }, v.value);
-      })
+      })]
     })
   });
 };

package/lib/cjs/components/popup.d.ts

@@ -5,6 +5,7 @@ interface PropsType {
     hideVisible: () => void;
     node: HTMLElement;
     innerSpacing?: number;
+    outSpacing?: number;
     zIndex?: string | number;
     closable?: boolean;
 }

package/lib/cjs/components/popup.js

@@ -176,15 +176,24 @@ var TriggerInternal = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
         node = _this$props.node,
         _this$props$innerSpac = _this$props.innerSpacing,
-        innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac;
+        innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac,
+        _this$props$outSpacin = _this$props.outSpacing,
+        outSpacing = _this$props$outSpacin === void 0 ? 5 : _this$props$outSpacin;
+      // 假设 outSpacing 也是 props 或者常量，这里保持与你原代码一致，若未定义请确保其存在
+      // const outSpacing = this.props.outSpacing || 0;
       var rect = node.getBoundingClientRect();
+      // --- 垂直方向逻辑 (保持原样) ---
       var triggerTop = rect.top + window.scrollY;
-      var triggerLeft = rect.left + window.scrollX;
+      var triggerLeft = rect.left + window.scrollX; // 基准左侧位置
       var triggerHeight = rect.height;
       var popupContent = _this.ref.current;
       var realHeight = popupContent.scrollHeight;
+      // 获取弹窗的实际宽度，用于水平碰撞检测
+      // 注意：此时 popupContent 可能还没有被渲染到最终位置，但 scrollWidth 通常能反映内容宽度
+      var realWidth = popupContent.scrollWidth;
       var _getWindowSize = (0, _helperDom.getWindowSize)(),
-        viewportHeight = _getWindowSize.height;
+        viewportHeight = _getWindowSize.height,
+        viewportWidth = _getWindowSize.width;
       var spaceBelow = viewportHeight - rect.bottom;
       var spaceAbove = rect.top;
       var topPosition;
@@ -196,8 +205,32 @@ var TriggerInternal = /*#__PURE__*/function (_React$Component) {
         maxHeight = Math.min(realHeight, spaceAbove - innerSpacing - outSpacing);
         topPosition = triggerTop - innerSpacing - maxHeight;
       }
-      _this.popupContainer.style.transform = "translate(".concat(triggerLeft, "px, ").concat(topPosition, "px)");
+      // --- 水平方向逻辑 (新增) ---
+      var leftPosition = triggerLeft;
+      // 1. 检查是否超出右侧边界
+      if (leftPosition + realWidth > viewportWidth) {
+        // 如果超出，尝试向左移动，使弹窗右边缘对齐屏幕右边缘
+        leftPosition = viewportWidth - realWidth;
+      }
+      // 2. 检查是否超出左侧边界 (兜底策略)
+      // 如果弹窗太宽，或者触发点太靠左导致上面的计算结果小于0
+      if (leftPosition < 0) {
+        leftPosition = 0;
+        // 可选：如果弹窗比屏幕还宽，你可能希望限制它的最大宽度为屏幕宽度
+        // 此时需要重新计算 realWidth 或者直接限制样式
+        // 这里我们通过 CSS 的 maxWidth 来配合，或者在这里强制限制 width
+        // 如果必须通过 JS 控制宽度：
+        // popupContent.style.width = `${viewportWidth}px`;
+        // leftPosition = 0;
+      }
+      // --- 应用样式 ---
+      // 使用 transform 进行定位
+      _this.popupContainer.style.transform = "translate(".concat(leftPosition, "px, ").concat(topPosition, "px)");
+      // 设置最大高度
       popupContent.style.maxHeight = "".concat(maxHeight, "px");
+      // 【重要】为了防止第2步中弹窗过宽超出屏幕，建议同时限制 popupContent 的最大宽度
+      // 这样即使 leftPosition=0，内容也不会撑破屏幕
+      popupContent.style.maxWidth = "".concat(viewportWidth - outSpacing * 2, "px");
     });
     _this.state = {
       popupRefreshKey: 1

package/lib/es/components/dialog/expression/index.js

@@ -540,6 +540,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
       var options = firstVal ? firstVal.split(',') : [];
       return _jsx("div", {
         children: _jsx(Select, {
+          maxWidth: '500px',
           size: 'large',
           placeholder: "\u53EF\u8F93\u5165\u56DE\u8F66\u65B0\u589E\u4E0B\u62C9\u9009\u9879",
           allowCreate: true,

package/lib/es/components/dialog/select-list/index.js

@@ -1,4 +1,5 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Empty } from '@gingkoo/pandora';
 import './index.less';
 import cx from 'classnames';
 var SelectList = function SelectList(_ref) {
@@ -12,9 +13,14 @@ var SelectList = function SelectList(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className;
   return _jsx("div", {
     className: cx("Sqb-SelectColumns--box ", className),
-    children: _jsx("div", {
+    children: _jsxs("div", {
       className: 'p-2',
-      children: list.map(function (v, i) {
+      children: [list.length === 0 && _jsx("div", {
+        className: 'Sqb-SelectColumns--empty',
+        children: _jsx(Empty, {
+          content: '暂无数据'
+        })
+      }), list.map(function (v, i) {
         return _jsxs("div", {
           className: cx("Sqb-List-item p-2", {
             active: value === v.value,
@@ -25,7 +31,7 @@ var SelectList = function SelectList(_ref) {
           },
           children: [v.icon, v.label]
         }, v.value);
-      })
+      })]
     })
   });
 };

package/lib/es/components/popup.d.ts

@@ -5,6 +5,7 @@ interface PropsType {
     hideVisible: () => void;
     node: HTMLElement;
     innerSpacing?: number;
+    outSpacing?: number;
     zIndex?: string | number;
     closable?: boolean;
 }

package/lib/es/components/popup.js

@@ -166,15 +166,24 @@ var TriggerInternal = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
         node = _this$props.node,
         _this$props$innerSpac = _this$props.innerSpacing,
-        innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac;
+        innerSpacing = _this$props$innerSpac === void 0 ? 10 : _this$props$innerSpac,
+        _this$props$outSpacin = _this$props.outSpacing,
+        outSpacing = _this$props$outSpacin === void 0 ? 5 : _this$props$outSpacin;
+      // 假设 outSpacing 也是 props 或者常量，这里保持与你原代码一致，若未定义请确保其存在
+      // const outSpacing = this.props.outSpacing || 0;
       var rect = node.getBoundingClientRect();
+      // --- 垂直方向逻辑 (保持原样) ---
       var triggerTop = rect.top + window.scrollY;
-      var triggerLeft = rect.left + window.scrollX;
+      var triggerLeft = rect.left + window.scrollX; // 基准左侧位置
       var triggerHeight = rect.height;
       var popupContent = _this.ref.current;
       var realHeight = popupContent.scrollHeight;
+      // 获取弹窗的实际宽度，用于水平碰撞检测
+      // 注意：此时 popupContent 可能还没有被渲染到最终位置，但 scrollWidth 通常能反映内容宽度
+      var realWidth = popupContent.scrollWidth;
       var _getWindowSize = getWindowSize(),
-        viewportHeight = _getWindowSize.height;
+        viewportHeight = _getWindowSize.height,
+        viewportWidth = _getWindowSize.width;
       var spaceBelow = viewportHeight - rect.bottom;
       var spaceAbove = rect.top;
       var topPosition;
@@ -186,8 +195,32 @@ var TriggerInternal = /*#__PURE__*/function (_React$Component) {
         maxHeight = Math.min(realHeight, spaceAbove - innerSpacing - outSpacing);
         topPosition = triggerTop - innerSpacing - maxHeight;
       }
-      _this.popupContainer.style.transform = "translate(".concat(triggerLeft, "px, ").concat(topPosition, "px)");
+      // --- 水平方向逻辑 (新增) ---
+      var leftPosition = triggerLeft;
+      // 1. 检查是否超出右侧边界
+      if (leftPosition + realWidth > viewportWidth) {
+        // 如果超出，尝试向左移动，使弹窗右边缘对齐屏幕右边缘
+        leftPosition = viewportWidth - realWidth;
+      }
+      // 2. 检查是否超出左侧边界 (兜底策略)
+      // 如果弹窗太宽，或者触发点太靠左导致上面的计算结果小于0
+      if (leftPosition < 0) {
+        leftPosition = 0;
+        // 可选：如果弹窗比屏幕还宽，你可能希望限制它的最大宽度为屏幕宽度
+        // 此时需要重新计算 realWidth 或者直接限制样式
+        // 这里我们通过 CSS 的 maxWidth 来配合，或者在这里强制限制 width
+        // 如果必须通过 JS 控制宽度：
+        // popupContent.style.width = `${viewportWidth}px`;
+        // leftPosition = 0;
+      }
+      // --- 应用样式 ---
+      // 使用 transform 进行定位
+      _this.popupContainer.style.transform = "translate(".concat(leftPosition, "px, ").concat(topPosition, "px)");
+      // 设置最大高度
       popupContent.style.maxHeight = "".concat(maxHeight, "px");
+      // 【重要】为了防止第2步中弹窗过宽超出屏幕，建议同时限制 popupContent 的最大宽度
+      // 这样即使 leftPosition=0，内容也不会撑破屏幕
+      popupContent.style.maxWidth = "".concat(viewportWidth - outSpacing * 2, "px");
     });
     _this.state = {
       popupRefreshKey: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gingkoo/pandora-metabase",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "description": "",
   "main": "lib/es/index.js",
   "module": "lib/es/index.js",