@gingkoo/pandora-metabase 0.0.29 → 0.0.30

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

@@ -93,5 +93,6 @@ interface PropsType {
     node: any;
     innerSpacing?: number;
     container?: HTMLDivElement;
+    zIndex?: string | null;
     closable?: boolean;
 }

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v0.0.29
+ * @gingkoo/pandora-metabase v0.0.30
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -1341,6 +1341,91 @@ const Loading = ({
 var css_248z$b = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-Filter-item {\n  position: relative;\n  margin: 0 10px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow,\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  position: absolute;\n  top: 0;\n  height: 40px;\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.4;\n  cursor: pointer;\n  transform: scale(0);\n  transition: all 0.3s;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow img,\n.Sqb-item--content .Sqb-Filter-item .left-arrow img {\n  transform: scale(0.8);\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow:hover,\n.Sqb-item--content .Sqb-Filter-item .left-arrow:hover {\n  opacity: 1;\n}\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  transform: rotate(180deg) scale(0);\n  transform-origin: 50% 50%;\n  left: -30px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow {\n  right: -20px;\n}\n.Sqb-item--content .Sqb-Filter-item.hover .left-arrow {\n  transform: rotate(180deg) scale(1);\n}\n.Sqb-item--content .Sqb-Filter-item.hover .right-arrow {\n  transform: scale(1);\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell-preview {\n  flex-shrink: 0;\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s,\n            border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
 styleInject(css_248z$b);
 
+// 获取元素translate x y值
+const getComputedTranslate = obj => {
+  if (!window.getComputedStyle) return {
+    x: 0,
+    y: 0
+  };
+  var style = getComputedStyle(obj),
+    transform = style.transform || style.webkitTransform || style.mozTransform;
+  var mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) {
+    return {
+      x: parseFloat(mat[1].split(', ')[12]),
+      y: parseFloat(mat[1].split(', ')[13])
+    };
+  }
+  mat = transform.match(/^matrix\((.+)\)$/);
+  if (mat) {
+    return {
+      x: parseFloat(mat[1].split(', ')[4]),
+      y: parseFloat(mat[1].split(', ')[5])
+    };
+  }
+  return {
+    x: 0,
+    y: 0
+  };
+};
+// 获取元素距离浏览器顶部的距离
+const getElementTop = elem => {
+  let elemTop = elem.offsetTop;
+  let pElem = elem.offsetParent;
+  while (pElem != null) {
+    elemTop += pElem.offsetTop;
+    if (pElem.style.transform) {
+      elemTop += getComputedTranslate(pElem).y;
+    }
+    pElem = pElem.offsetParent;
+  }
+  return elemTop;
+};
+// 获取元素距离浏览器顶部的距离
+const getElementLeft = elem => {
+  let elemLeft = elem.offsetLeft;
+  let pElem = elem.offsetParent;
+  while (pElem != null) {
+    elemLeft += pElem.offsetLeft;
+    if (pElem.style.transform) {
+      elemLeft += getComputedTranslate(pElem).x;
+    }
+    pElem = pElem.offsetParent;
+  }
+  return elemLeft;
+};
+const getScrollTop = () => {
+  return document.documentElement.scrollTop;
+};
+// 浏览器可视宽高
+const getWindowSize = () => {
+  return {
+    width: document.body.clientWidth,
+    height: document.body.clientHeight
+  };
+};
+// 获取元素父级最大的 z-index
+const getMaxZIndexInParents = element => {
+  let currentElement = element;
+  let maxZIndex = -Infinity;
+  // 遍历当前元素及其所有父级元素
+  while (currentElement && currentElement !== document.body) {
+    // 获取当前元素的 z-index
+    const zIndex = window.getComputedStyle(currentElement).zIndex;
+    // 如果 z-index 是数字且比当前最大值大，则更新
+    if (zIndex !== 'auto') {
+      const zIndexNum = parseInt(zIndex, 10);
+      if (!isNaN(zIndexNum) && zIndexNum > maxZIndex) {
+        maxZIndex = zIndexNum;
+      }
+    }
+    // 移动到父级元素
+    currentElement = currentElement.parentElement;
+  }
+  // 如果没有显式设置的 z-index，返回 'auto' 或默认值
+  return maxZIndex !== -Infinity ? maxZIndex : 'auto';
+};
+
 var css_248z$a = ".Sqb-CustomColumn--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 500px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-CustomColumn--box .input {\n  color: #4c5773;\n  font-size: 1.12em;\n  padding: 0.75rem 0.75rem;\n  border: 1px solid #f0f0f0;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  font-family: Monaco, monospace;\n  font-weight: 700;\n  -webkit-font-smoothing: antialiased;\n}\n.Sqb-CustomColumn--box .input:focus {\n  outline: none;\n  border: 1px solid #509ee3;\n  transition: border 0.3s linear;\n  color: #4c5773;\n}\n.Sqb-CustomColumn--box .input::-webkit-input-placeholder {\n  color: #949aab;\n}\n.Sqb-CustomColumn--box .input::-ms-input-placeholder {\n  color: #949aab;\n}\n.Sqb-CustomColumn--box .input.border-error {\n  border-color: #ed6e6e !important;\n}\n.Sqb-CustomColumn--box .text-error {\n  color: #ed6e6e;\n}\n.Sqb-CustomColumn--box .btns {\n  flex-direction: row;\n  align-items: center;\n  display: flex;\n  border-top: 1px solid #f0f0f0;\n}\n.Sqb-CustomColumn--box .btns .btn {\n  padding: 0.75rem 1rem;\n  display: inline-block;\n  box-sizing: border-box;\n  background: transparent;\n  border: 1px solid #e4e4e4;\n  color: #4c5773;\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: bold;\n  font-family: 'Lato', sans-serif;\n  border-radius: 6px;\n  outline: none;\n}\n.Sqb-CustomColumn--box .btns .btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.Sqb-CustomColumn--box .btns .btn:not(:disabled):hover {\n  color: #509ee3;\n  border-color: #d6d6d6;\n  background: #f9fbfc;\n  transition: all 200ms linear;\n}\n.Sqb-CustomColumn--box .btns .btn.usable {\n  color: #ffffff;\n  background: #509ee3;\n  border: 1px solid #509ee3;\n}\n.Sqb-CustomColumn--box .btns .btn.usable:hover {\n  color: #ffffff;\n  border-color: #509ee3;\n  background-color: rgba(80, 158, 227, 0.88);\n}\n";
 styleInject(css_248z$a);
 
@@ -2737,70 +2822,6 @@ var TokenizedInput$1 = /*#__PURE__*/forwardRef(function TokenizedInputWithForwar
   });
 });
 
-// 获取元素translate x y值
-const getComputedTranslate = obj => {
-  if (!window.getComputedStyle) return {
-    x: 0,
-    y: 0
-  };
-  var style = getComputedStyle(obj),
-    transform = style.transform || style.webkitTransform || style.mozTransform;
-  var mat = transform.match(/^matrix3d\((.+)\)$/);
-  if (mat) {
-    return {
-      x: parseFloat(mat[1].split(', ')[12]),
-      y: parseFloat(mat[1].split(', ')[13])
-    };
-  }
-  mat = transform.match(/^matrix\((.+)\)$/);
-  if (mat) {
-    return {
-      x: parseFloat(mat[1].split(', ')[4]),
-      y: parseFloat(mat[1].split(', ')[5])
-    };
-  }
-  return {
-    x: 0,
-    y: 0
-  };
-};
-// 获取元素距离浏览器顶部的距离
-const getElementTop = elem => {
-  let elemTop = elem.offsetTop;
-  let pElem = elem.offsetParent;
-  while (pElem != null) {
-    elemTop += pElem.offsetTop;
-    if (pElem.style.transform) {
-      elemTop += getComputedTranslate(pElem).y;
-    }
-    pElem = pElem.offsetParent;
-  }
-  return elemTop;
-};
-// 获取元素距离浏览器顶部的距离
-const getElementLeft = elem => {
-  let elemLeft = elem.offsetLeft;
-  let pElem = elem.offsetParent;
-  while (pElem != null) {
-    elemLeft += pElem.offsetLeft;
-    if (pElem.style.transform) {
-      elemLeft += getComputedTranslate(pElem).x;
-    }
-    pElem = pElem.offsetParent;
-  }
-  return elemLeft;
-};
-const getScrollTop = () => {
-  return document.documentElement.scrollTop;
-};
-// 浏览器可视宽高
-const getWindowSize = () => {
-  return {
-    width: document.body.clientWidth,
-    height: document.body.clientHeight
-  };
-};
-
 // 节流
 const throttle = (fn, wait = 200) => {
   if (typeof fn !== 'function') return () => void 0;
@@ -2944,7 +2965,8 @@ function generateTrigger(PortalComponent) {
     getContainer = () => {
       let pos = this.getCurrentNodePos();
       let {
-        innerSpacing = 10
+        innerSpacing = 10,
+        zIndex
       } = this.props;
       const popupContainer = returnDocument().createElement('span');
       popupContainer.style.position = 'absolute';
@@ -2952,7 +2974,7 @@ function generateTrigger(PortalComponent) {
       popupContainer.style.left = '0px';
       popupContainer.style.transform = `translateX(${pos.x}px) translateY(${pos.y + pos.h + innerSpacing}px) translateZ(0px)`;
       popupContainer.style.pointerEvents = 'none';
-      popupContainer.style.zIndex = '999';
+      popupContainer.style.zIndex = zIndex || '999';
       this.attachParent(popupContainer);
       return popupContainer;
     };
@@ -7603,6 +7625,7 @@ const Metabase = props => {
     if (!visible) return null;
     return content;
   }, [store.popupData2]);
+  let zIndex = popupContainer.current ? getMaxZIndexInParents(popupContainer.current) : null;
   return (
     // @ts-ignore
     jsx(VisualBox, {
@@ -7643,6 +7666,7 @@ const Metabase = props => {
           visible: store.popupData.visible,
           node: store.popupData.node,
           closable: store.popupClosable,
+          zIndex: zIndex ? String(zIndex) : null,
           hideVisible: () => {
             store.setPopup({
               visible: false
@@ -7654,6 +7678,7 @@ const Metabase = props => {
           visible: store.popupData2.visible,
           node: store.popupData2.node,
           closable: store.popupClosable2,
+          zIndex: zIndex ? String(zIndex) : null,
           hideVisible: () => {
             store.setClosable(true);
             store.setPopup2({