@gingkoo/pandora-metabase 0.0.28 → 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.28
+ * @gingkoo/pandora-metabase v0.0.30
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -1105,7 +1105,8 @@ register('en', {
   'filter.contain': 'contain',
   'filter.notInclude': 'not include',
   'filter.startWith': 'start with',
-  'filter.within': 'In',
+  'filter.within': 'IN',
+  'filter.withnotin': 'NOT IN',
   'filter.endWith': 'end with',
   'filter.earlierThan': 'earlier than',
   'filter.laterThan': 'later than',
@@ -1234,7 +1235,8 @@ register('zh', {
   'filter.contain': '包含',
   'filter.notInclude': '不包含',
   'filter.startWith': '以...开始',
-  'filter.within': 'In',
+  'filter.within': 'IN',
+  'filter.withnotin': 'NOT IN',
   'filter.endWith': '以...结束',
   'filter.earlierThan': '早于',
   'filter.laterThan': '晚于',
@@ -1339,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);
 
@@ -2735,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;
@@ -2942,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';
@@ -2950,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;
     };
@@ -4028,14 +4052,14 @@ const SelectJoinColumn = ({
   });
 };
 
-var css_248z$4 = ".filter-page {\n  min-width: 300px;\n}\n.filter-page .header {\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  display: flex;\n  align-items: center;\n  color: #949aab;\n  border-bottom: 1px solid #f0f0f0;\n}\n.filter-page .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.filter-page .header .left-info-formula {\n  display: flex;\n  margin: 0 5px;\n  gap: 5px;\n}\n.filter-page .header .left-info-formula .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .header .left-info-formula-input {\n  width: 30px;\n}\n.filter-page .header .left-info-formula-input .pd-Input-inner-wrapper {\n  border-top: 0;\n  border-left: 0;\n  border-right: 0;\n  border-radius: 0;\n  padding: 0 3px;\n}\n.filter-page .header .left-info-formula-input .pd-Input-inner-wrapper input {\n  text-align: center;\n}\n.filter-page .header .left-info .span-name {\n  font-weight: 900;\n  font-size: 16px;\n  color: #4c5773;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-family: 'Lato', sans-serif;\n}\n.filter-page .header .left-info .span-name svg {\n  margin-right: 0.5rem;\n}\n.filter-page .header .left-info .span-name:hover {\n  color: #509ee3;\n}\n.filter-page .header .right-info {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n.filter-page .content {\n  padding: 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.filter-page .content_l {\n  flex: 1;\n}\n.filter-page .content .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .content .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  box-sizing: border-box;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.filter-page .content .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.filter-page .content .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.filter-page .content .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.noClick {\n  cursor: default;\n}\n.filter-page .content .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.filter-page .content .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.filter-page .content .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.filter-page .content .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.filter-page .content .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.filter-page .content .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .w_300 {\n  width: 300px;\n}\n.filter-page .content .input {\n  border: 1px solid #f0f0f0;\n  font-size: 16px;\n  color: #4c5773;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  padding: 9px 20px;\n  height: 40px;\n  outline: none;\n}\n.filter-page .content .input::placeholder {\n  color: #ccc;\n}\n.filter-page .content .input + .input {\n  margin-top: 10px;\n}\n.filter-page .content .input.inline {\n  display: inline-block;\n  flex: 1;\n  margin-right: 15px;\n  padding: 5px 20px;\n}\n.filter-page .footer {\n  padding: 0 0.5rem 0.5rem;\n  display: flex;\n  align-items: center;\n}\n.filter-page .footer .button--purple {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: white;\n  background-color: #7172ad;\n  border: 1px solid #7172ad;\n  padding: 6px 14px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.filter-page .footer .button--purple.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.filter-page .footer .button--purple:hover {\n  color: white;\n  background-color: rgba(113, 114, 173, 0.88);\n  border-color: rgba(113, 114, 173, 0.88);\n}\n.operator-btn {\n  height: 38px !important;\n  padding: 8px !important;\n  text-align: left !important;\n  display: flex !important;\n  align-items: center !important;\n}\n.operator-btn > .anticon {\n  margin-left: auto !important;\n}\n";
+var css_248z$4 = ".filter-page {\n  min-width: 300px;\n}\n.filter-page .header {\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  display: flex;\n  align-items: center;\n  color: #949aab;\n  border-bottom: 1px solid #f0f0f0;\n}\n.filter-page .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n  flex: 1;\n}\n.filter-page .header .left-info-formula {\n  display: flex;\n  margin: 0 5px;\n  gap: 5px;\n}\n.filter-page .header .left-info-formula .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .header .left-info-formula-input {\n  width: 25px;\n  margin: 0 5px;\n}\n.filter-page .header .left-info-formula-input .pd-Input-inner-wrapper {\n  border-top: 0;\n  border-left: 0;\n  border-right: 0;\n  border-radius: 0;\n  padding: 0 3px;\n}\n.filter-page .header .left-info-formula-input .pd-Input-inner-wrapper input {\n  text-align: center;\n}\n.filter-page .header .left-info .span-name {\n  font-weight: 900;\n  font-size: 16px;\n  color: #4c5773;\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-family: 'Lato', sans-serif;\n}\n.filter-page .header .left-info .span-name svg {\n  margin-right: 0.5rem;\n}\n.filter-page .header .left-info .span-name:hover {\n  color: #509ee3;\n}\n.filter-page .header .right-info {\n  display: flex;\n  align-items: center;\n}\n.filter-page .content {\n  padding: 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.filter-page .content_l {\n  flex: 1;\n}\n.filter-page .content .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .content .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  box-sizing: border-box;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.filter-page .content .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.filter-page .content .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.filter-page .content .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.noClick {\n  cursor: default;\n}\n.filter-page .content .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.filter-page .content .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.filter-page .content .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.filter-page .content .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.filter-page .content .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.filter-page .content .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .w_300 {\n  width: 300px;\n}\n.filter-page .content .input {\n  border: 1px solid #f0f0f0;\n  font-size: 16px;\n  color: #4c5773;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  padding: 9px 20px;\n  height: 40px;\n  outline: none;\n}\n.filter-page .content .input::placeholder {\n  color: #ccc;\n}\n.filter-page .content .input + .input {\n  margin-top: 10px;\n}\n.filter-page .content .input.inline {\n  display: inline-block;\n  flex: 1;\n  margin-right: 15px;\n  padding: 5px 20px;\n}\n.filter-page .footer {\n  padding: 0 0.5rem 0.5rem;\n  display: flex;\n  align-items: center;\n}\n.filter-page .footer .button--purple {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: white;\n  background-color: #7172ad;\n  border: 1px solid #7172ad;\n  padding: 6px 14px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.filter-page .footer .button--purple.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.filter-page .footer .button--purple:hover {\n  color: white;\n  background-color: rgba(113, 114, 173, 0.88);\n  border-color: rgba(113, 114, 173, 0.88);\n}\n.operator-btn {\n  height: 38px !important;\n  padding: 8px !important;\n  text-align: left !important;\n  display: flex !important;\n  align-items: center !important;\n}\n.operator-btn > .anticon {\n  margin-left: auto !important;\n}\n";
 styleInject(css_248z$4);
 
 const {
   RangePicker
 } = DatePicker;
-const NUMBER_LIST = ['等于', '不等于', '大于', '小于', '介于之间', '大于或等于', '小于或等于', '为空', '不为空', 'In'];
-const STRING_LIST = ['等于', '不等于', '包含', '不包含', '为空', '不为空', '以...开始', '以...结束', 'In'];
+const NUMBER_LIST = ['等于', '不等于', '大于', '小于', '介于之间', '大于或等于', '小于或等于', '为空', '不为空', 'In', 'Not In'];
+const STRING_LIST = ['等于', '不等于', '包含', '不包含', '为空', '不为空', '以...开始', '以...结束', 'In', 'Not In'];
 const DATE_LIST = [
 // '前', '下一个', '当前',
 '早于', '晚于',
@@ -4056,7 +4080,7 @@ const SelectFilterColumn = ({
   let table2Selected = Boolean(curColumn.table2?.name);
   const disabled = useMemo(() => {
     if (!condition) return true;
-    if (curColumn.table2?.id && ~['是', '不是'].indexOf(condition)) {
+    if (curColumn.table2?.id && ~['等于', '不等于'].indexOf(condition)) {
       return false;
     }
     if (~['为空', '不为空', '是空的', '不是空的'].indexOf(condition)) {
@@ -4150,6 +4174,9 @@ const SelectFilterColumn = ({
     } else if (condition === 'In') {
       let cond = __('filter.within');
       quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + `(${firstVal})`;
+    } else if (condition === 'Not In') {
+      let cond = __('filter.withnotin');
+      quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + `(${firstVal})`;
     } else {
       let cond = __({
         等于: 'filter.equal',
@@ -4161,8 +4188,6 @@ const SelectFilterColumn = ({
         小于或等于: 'filter.lessThanOrEqualTo',
         为空: 'filter.empty',
         不为空: 'filter.notEmpty',
-        是: 'filter.is',
-        不是: 'filter.isNo',
         包含: 'filter.contain',
         不包含: 'filter.notInclude',
         '以...开始': 'filter.startWith',
@@ -4388,7 +4413,7 @@ const SelectFilterColumn = ({
           }
         })
       });
-    } else if (~['In'].indexOf(conditionText)) {
+    } else if (~['In', 'Not In'].indexOf(conditionText)) {
       const options = firstVal?.split(',') || [];
       return jsx("div", {
         children: jsx(Select, {
@@ -4406,7 +4431,7 @@ const SelectFilterColumn = ({
           }, option))
         })
       });
-    } else if (~['等于', '不等于', '大于', '小于', '大于或等于', '小于或等于', '是', '不是', '包含', '不包含', '以...开始', '以...结束'].indexOf(conditionText)) {
+    } else if (~['等于', '不等于', '大于', '小于', '大于或等于', '小于或等于', '包含', '不包含', '以...开始', '以...结束'].indexOf(conditionText)) {
       return jsx("div", {
         children: jsx(Input, {
           className: 'input',
@@ -4472,8 +4497,6 @@ const SelectFilterColumn = ({
           小于或等于: 'filter.lessThanOrEqualTo',
           为空: 'filter.empty',
           不为空: 'filter.notEmpty',
-          是: 'filter.is',
-          不是: 'filter.isNo',
           包含: 'filter.contain',
           不包含: 'filter.notInclude',
           '以...开始': 'filter.startWith',
@@ -4481,7 +4504,8 @@ const SelectFilterColumn = ({
           早于: 'filter.earlierThan',
           晚于: 'filter.laterThan',
           是空的: 'filter.isEmpty',
-          In: 'filter.within'
+          In: 'filter.within',
+          'Not In': 'filter.withnotin'
         }[v])
       };
     });
@@ -4533,11 +4557,11 @@ const SelectFilterColumn = ({
     const getName = name => {
       switch (formula.type) {
         case 'SUBSTR':
-          // let str = formula.params?.join(',');
           return jsxs("div", {
-            children: ["SUBSTR (", name, ",", jsx(InputNumber, {
+            children: ["SUBSTR(", name, ",", jsx(InputNumber, {
               className: 'left-info-formula-input',
               hideControl: true,
+              placeholder: '',
               onClick: e => {
                 e.stopPropagation();
                 return false;
@@ -4551,6 +4575,7 @@ const SelectFilterColumn = ({
               className: 'left-info-formula-input',
               hideControl: true,
               quickEdit: true,
+              placeholder: '',
               onClick: e => {
                 e.stopPropagation();
                 return false;
@@ -4612,8 +4637,6 @@ const SelectFilterColumn = ({
                 小于或等于: 'filter.lessThanOrEqualTo',
                 为空: 'filter.empty',
                 不为空: 'filter.notEmpty',
-                是: 'filter.is',
-                不是: 'filter.isNo',
                 包含: 'filter.contain',
                 不包含: 'filter.notInclude',
                 '以...开始': 'filter.startWith',
@@ -4621,7 +4644,8 @@ const SelectFilterColumn = ({
                 早于: 'filter.earlierThan',
                 晚于: 'filter.laterThan',
                 是空的: 'filter.isEmpty',
-                In: 'filter.within'
+                In: 'filter.within',
+                'Not In': 'filter.withnotin'
               }[condition]), jsx(DownOutlined, {})]
             })
           })
@@ -4637,7 +4661,7 @@ const SelectFilterColumn = ({
         }) : jsx("div", {
           className: 'content_l',
           children: renderFilter(type, condition)
-        }), ~['是', '不是'].indexOf(condition) ? jsx(Tooltip, {
+        }), ~['等于', '不等于'].indexOf(condition) ? jsx(Tooltip, {
           title: __('SqlQueryBuilder.switch'),
           children: jsx(Button, {
             primary: true,
@@ -6742,7 +6766,7 @@ const Filter = props => {
               } else {
                 return v.quotes;
               }
-            })]
+            }).join(' ')]
           })]
         })
       }), jsx(NextDom, {
@@ -7601,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, {
@@ -7641,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
@@ -7652,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({