@gingkoo/pandora-metabase 1.0.125 → 1.0.127

package/lib/es/components/metabase/index.less

@@ -106,55 +106,135 @@
         }
       }
       .Sqb-Filter-item {
+        --sqb-item-shell-margin-x: 14px;
+        --sqb-action-size: 12px;
+        --sqb-action-height: 18px;
+        --sqb-action-zone: 16px;
+        --sqb-action-bridge: 18px;
+        --sqb-action-radius: 5px;
+        --sqb-action-offset: -16px;
+        --sqb-arrow-offset-left: var(--sqb-action-offset);
+        --sqb-arrow-offset-right: var(--sqb-action-offset);
         position: relative;
-        margin: 0 10px;
+        // margin: 0 var(--sqb-item-shell-margin-x);
         .right-arrow,
         .left-arrow {
           position: absolute;
           top: 50%;
-          height: 40px;
-          width: 30px;
+          z-index: 3;
+          height: var(--sqb-action-height);
+          width: var(--sqb-action-zone);
           display: flex;
           align-items: center;
           justify-content: center;
-          opacity: 0.4;
+          border: 0;
+          background: transparent;
+          opacity: 0;
           cursor: pointer;
-          transform: translateY(-50%) scale(0);
-          transition: all 0.3s;
+          pointer-events: none;
+          transform: translateY(-50%) scale(0.86);
+          transition:
+            opacity 160ms ease,
+            border-color 160ms ease,
+            background-color 160ms ease,
+            transform 160ms ease;
+
+          &::before {
+            content: none;
+            position: absolute;
+            top: 50%;
+            width: var(--sqb-action-size);
+            height: var(--sqb-action-height);
+            border: 0;
+            border-radius: var(--sqb-action-radius);
+            background: transparent;
+            box-shadow: none;
+            transform: translateY(-50%);
+            transition:
+              border-color 160ms ease,
+              background-color 160ms ease;
+          }
+
           img {
-            transform: scale(0.8);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            width: 16px;
+            height: 12px;
+            pointer-events: none;
+          }
+
+          &:hover::before {
+            border-color: rgba(80, 158, 227, 0.36);
+            background: #fff;
           }
+
           &:hover {
             opacity: 1;
           }
         }
         .left-arrow {
-          transform: translateY(-50%) rotate(180deg) scale(0);
-          transform-origin: 50% 50%;
           // padding-top: 10px;
-          left: -30px;
+          left: var(--sqb-arrow-offset-left);
+
+          &::before {
+            left: 0;
+          }
+
+          img {
+            transform: translate(-50%, -50%) rotate(180deg);
+          }
         }
         .right-arrow {
-          right: -20px;
+          right: var(--sqb-arrow-offset-right);
           // padding-bottom: 10px;
+
+          &::before {
+            right: 0;
+          }
+
+          img {
+            transform: translate(-50%, -50%);
+          }
+        }
+        &.has-left-arrow::before,
+        &.has-right-arrow::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          z-index: 2;
+          width: var(--sqb-action-bridge);
+        }
+        &.has-left-arrow::before {
+          left: var(--sqb-arrow-offset-left);
+        }
+        &.has-right-arrow::after {
+          right: var(--sqb-arrow-offset-right);
         }
         &:not(.item-fixed).hover {
           > .left-arrow {
-            transform: translateY(-50%) rotate(180deg) scale(1);
+            opacity: 0.82;
+            pointer-events: auto;
+            transform: translateY(-50%) scale(1);
           }
           > .right-arrow {
+            opacity: 0.82;
+            pointer-events: auto;
             transform: translateY(-50%) scale(1);
           }
         }
       }
       .Sqb-NotebookCell {
         box-sizing: border-box;
-        padding: 16px 16px 8px;
+        padding: 12px 16px;
         color: rgb(80, 158, 227);
         display: flex;
         flex-wrap: wrap;
         -webkit-box-align: center;
         align-items: center;
+        gap: 8px 14px;
         border-radius: 8px;
         background-color: rgba(80, 158, 227, 0.1);
 
@@ -171,22 +251,23 @@
 
         .Sqb-TableName {
           position: relative;
-          border: 2px solid transparent;
-          border-radius: 6px;
+          border: 1px solid transparent;
+          border-radius: 5px;
           color: white;
           background-color: rgb(80, 158, 227);
           transition:
             background 300ms linear 0s,
             border 300ms linear 0s;
           box-sizing: border-box;
-          margin-bottom: 8px;
-          margin-right: 8px;
-          padding: 8px;
+          margin: 0;
+          padding: 4px 7px;
           display: flex;
           -webkit-box-align: center;
           align-items: center;
           cursor: pointer;
-          min-height: 36px;
+          min-height: 28px;
+          font-size: 13px;
+          line-height: 18px;
           word-break: break-word;
           // &-OPERATOR {
           //   // 操作符
@@ -210,11 +291,11 @@
             margin: 0;
             padding: 0;
             border: none;
-            border-radius: 50%;
-            width: 20px;
-            height: 20px;
-            min-height: 20px;
-            font-size: 12px;
+            border-radius: 999px;
+            width: 16px;
+            height: 16px;
+            min-height: 16px;
+            font-size: 10px;
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -223,9 +304,8 @@
           }
           &-input {
             //输入框样式，稍微小了一点
-            margin-bottom: 9px;
-            margin-right: 8px;
-            padding: 9px;
+            margin: 0;
+            padding: 5px 7px;
           }
           &::selection {
             color: #ffffff;
@@ -242,7 +322,7 @@
             }
           }
           &.notSelected {
-            border: 2px solid rgba(80, 158, 227, 0.25);
+            border: 1px solid rgba(80, 158, 227, 0.25);
             color: rgb(80, 158, 227);
             background-color: transparent;
             &:hover {
@@ -256,11 +336,15 @@
               background-color: rgba(113, 114, 173, 0.8);
             }
             svg.closeIcon {
+              display: block;
+              flex: 0 0 auto;
               opacity: 0.6;
-              margin-left: 8px;
+              margin-left: 5px;
+              width: 12px;
+              height: 12px;
             }
             &.notSelected {
-              border: 2px solid rgba(113, 114, 173, 0.25);
+              border: 1px solid rgba(113, 114, 173, 0.25);
               color: rgb(113, 114, 173);
               background-color: transparent;
               &:hover {
@@ -275,11 +359,17 @@
               background-color: rgba(147, 161, 171, 0.8);
             }
             svg.sort-arrow {
-              margin-right: 0.5rem;
+              margin-right: 0.35rem;
+              width: 12px;
+              height: 12px;
             }
             svg.closeIcon {
+              display: block;
+              flex: 0 0 auto;
               opacity: 0.6;
-              margin-left: 8px;
+              margin-left: 5px;
+              width: 12px;
+              height: 12px;
             }
           }
           &.green-name {
@@ -289,11 +379,15 @@
               background-color: rgba(136, 191, 77, 0.8);
             }
             svg.closeIcon {
+              display: block;
+              flex: 0 0 auto;
               opacity: 0.6;
-              margin-left: 8px;
+              margin-left: 5px;
+              width: 12px;
+              height: 12px;
             }
             &.notSelected {
-              border: 2px solid rgba(136, 191, 77, 0.25);
+              border: 1px solid rgba(136, 191, 77, 0.25);
               color: rgb(136, 191, 77);
               background-color: transparent;
               &:hover {
@@ -309,6 +403,13 @@
           }
         }
 
+        > .pd-Badge,
+        .Sqb-where > .pd-Badge {
+          display: inline-flex;
+          align-items: center;
+          line-height: 1;
+        }
+
         .ant-input-number {
           margin-bottom: 0.5rem;
           .ant-input-number-input {
@@ -332,13 +433,27 @@
           margin-bottom: 8px;
           .Sqb-NotebookCell {
             padding-bottom: 0;
-            padding-top: 8px;
+            // padding-top: 0;
           }
         }
         .operator-icon,
         .operator-icon button {
-          font-size: 18px !important;
+          display: inline-flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          min-width: 28px !important;
+          height: 28px !important;
+          padding: 0 7px !important;
+          font-size: 14px !important;
           border: none !important;
+          line-height: 1 !important;
+          vertical-align: middle;
+        }
+
+        .operator-icon svg,
+        .operator-icon button svg {
+          width: 14px;
+          height: 14px;
         }
 
         .subquery-icon {
@@ -380,7 +495,7 @@
         cursor: pointer;
         font-weight: bold;
         padding: 12px 16px;
-        border-radius: 6px;
+        border-radius: 5px;
         margin-right: 16px;
         margin-top: 16px;
         border: none;
@@ -462,8 +577,10 @@
 
   & > &-btn {
     min-width: 220px;
-    height: 36px;
-    border-radius: 6px;
+    height: 32px;
+    border-radius: 5px;
+    padding: 0 14px;
+    font-size: 13px;
     color: #ffffff;
     background-color: #509ee3 !important;
     border: 1px solid #509ee3;

package/lib/es/components/modules/custom-column.js

@@ -127,6 +127,7 @@ var CustomColumn = function CustomColumn(props) {
         alias: prevGroupBy.alias,
         datasourceId: '',
         datasourceName: '',
+        datasourceType: '',
         columns: []
       };
       if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$group = prevGroupBy.group) !== null && _prevGroupBy$group !== void 0 && _prevGroupBy$group.length) {
@@ -170,7 +171,8 @@ var CustomColumn = function CustomColumn(props) {
             tableUuid: v.table2.tableUuid || uuidv4('table'),
             columns: v.columns,
             datasourceId: v.table2.datasourceId,
-            datasourceName: v.table2.datasourceName
+            datasourceName: v.table2.datasourceName,
+            datasourceType: v.table2.datasourceType
           });
         }));
       }
@@ -184,7 +186,8 @@ var CustomColumn = function CustomColumn(props) {
             tableUuid: v.table.tableUuid || uuidv4('table'),
             columns: v.columns,
             datasourceId: mainTable.table.datasourceId,
-            datasourceName: mainTable.table.datasourceName
+            datasourceName: mainTable.table.datasourceName,
+            datasourceType: mainTable.table.datasourceType
           });
         } else if (v.type === TypeEnum.joinData) {
           return _objectSpread(_objectSpread({}, v.table2), {}, {
@@ -194,7 +197,8 @@ var CustomColumn = function CustomColumn(props) {
             tableUuid: v.table2.tableUuid || uuidv4('table'),
             columns: v.columns,
             datasourceId: v.table2.datasourceId,
-            datasourceName: v.table2.datasourceName
+            datasourceName: v.table2.datasourceName,
+            datasourceType: v.table2.datasourceType
           });
         } else {
           return {

package/lib/es/components/modules/filter.js

@@ -82,7 +82,8 @@ var Filter = function Filter(props) {
             tableUuid: v.table2.tableUuid || uuidv4('table'),
             columns: v.columns,
             datasourceId: v.table2.datasourceId,
-            datasourceName: v.table2.datasourceName
+            datasourceName: v.table2.datasourceName,
+            datasourceType: v.table2.datasourceType
           };
         }));
       }
@@ -97,7 +98,8 @@ var Filter = function Filter(props) {
             tableUuid: v.table.tableUuid || uuidv4('table'),
             columns: v.columns,
             datasourceId: mainTable.table.datasourceId,
-            datasourceName: mainTable.table.datasourceName
+            datasourceName: mainTable.table.datasourceName,
+            datasourceType: mainTable.table.datasourceType
           };
         } else if (v.type === TypeEnum.joinData) {
           return {
@@ -108,7 +110,8 @@ var Filter = function Filter(props) {
             tableUuid: v.table2.tableUuid || uuidv4('table'),
             columns: v.columns,
             datasourceId: v.table2.datasourceId,
-            datasourceName: v.table2.datasourceName
+            datasourceName: v.table2.datasourceName,
+            datasourceType: v.table2.datasourceType
           };
         } else {
           return {