@gingkoo/pandora-metabase 1.0.118 → 1.0.119

package/lib/cjs/components/dialog/formula-list/index.less

@@ -21,7 +21,13 @@
   }
 }
 .Sqb-Filter-item {
+  --sqb-item-shell-margin-x: 10px;
+  --sqb-item-gap-x: 8px;
+  --sqb-item-gap-y: 8px;
+  --sqb-arrow-offset-left: -30px;
+  --sqb-arrow-offset-right: -20px;
   position: relative;
+  margin: 0 var(--sqb-item-shell-margin-x) var(--sqb-item-gap-y);
   &-content {
     position: relative;
     display: inline-flex;
@@ -49,6 +55,19 @@
         display: none;
       }
     }
+
+    .formula-node-group {
+      padding-left: 28px;
+    }
+
+    .formula-node-group {
+      .formula-node-remove,
+      .Sqb-CaseRow-actions,
+      .Sqb-CaseRecover,
+      .item-del {
+        display: none;
+      }
+    }
   }
   &.item-selected {
     .item-check {
@@ -75,9 +94,714 @@
       padding-left: 8px;
     }
   }
+
+  &.item-composite {
+    &.item-selected {
+      .formula-node-group {
+        box-shadow: inset 0 0 0 2px rgba(80, 158, 227, 0.42);
+        background: rgba(80, 158, 227, 0.12);
+      }
+
+      &.hover {
+        .formula-node-group {
+          box-shadow: inset 0 0 0 2px rgba(80, 158, 227, 0.55);
+        }
+      }
+    }
+
+    .item-check {
+      height: 100%;
+
+      .pd-Checkbox-mask-wrapper {
+        align-items: flex-start;
+        padding-top: 10px;
+      }
+    }
+  }
+
+  .pd-Badge {
+    display: inline-flex;
+    vertical-align: top;
+  }
+
+  > div > .Sqb-TableName,
+  > div > span > .Sqb-TableName,
+  > .Sqb-TableName {
+    margin: 0;
+  }
+
+  > .right-arrow,
+  > .left-arrow {
+    position: absolute;
+    top: 50%;
+    height: 40px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.4;
+    cursor: pointer;
+    transform: translateY(-50%) scale(0);
+    transition: all 0.3s;
+
+    img {
+      transform: scale(0.8);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  > .left-arrow {
+    left: var(--sqb-arrow-offset-left);
+    transform: translateY(-50%) rotate(180deg) scale(0);
+    transform-origin: 50% 50%;
+  }
+
+  > .right-arrow {
+    right: var(--sqb-arrow-offset-right);
+  }
+
+  .Sqb-TableName.flow-operator {
+    background-color: rgb(242, 169, 59);
+    border-color: rgb(242, 169, 59);
+    color: #fff;
+    border-radius: 14px;
+
+    &:hover {
+      background-color: rgba(242, 169, 59, 0.88);
+    }
+
+    &.notSelected {
+      background-color: rgba(242, 169, 59, 0.12);
+      border-color: rgba(242, 169, 59, 0.35);
+      color: rgb(186, 121, 21);
+    }
+  }
+
+  .Sqb-TableName.logic-operator {
+    background-color: rgb(72, 125, 227);
+    border-color: rgb(72, 125, 227);
+    color: #fff;
+    border-radius: 18px;
+
+    &:hover {
+      background-color: rgba(72, 125, 227, 0.88);
+    }
+
+    &.notSelected {
+      background-color: rgba(72, 125, 227, 0.12);
+      border-color: rgba(72, 125, 227, 0.3);
+      color: rgb(72, 125, 227);
+    }
+  }
+
+  .Sqb-TableName.logic-operator.logic-and {
+    background-color: rgb(72, 125, 227);
+    border-color: rgb(72, 125, 227);
+  }
+
+  .Sqb-TableName.logic-operator.logic-or {
+    background-color: rgb(46, 167, 138);
+    border-color: rgb(46, 167, 138);
+
+    &.notSelected {
+      background-color: rgba(46, 167, 138, 0.12);
+      border-color: rgba(46, 167, 138, 0.3);
+      color: rgb(46, 167, 138);
+    }
+  }
+
+  .Sqb-CaseKeyword {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 2px;
+    color: rgb(140, 148, 163);
+    font-size: 12px;
+    line-height: 32px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    background: transparent;
+    border: 0;
+    pointer-events: none;
+  }
 }
 .Sqb-NotebookCell {
   position: relative;
+
+  &.Sqb-NotebookCell--embedded {
+    padding: 0;
+    border-radius: 0;
+    background: transparent;
+    width: auto;
+    min-width: 0;
+  }
+
+  &.Sqb-NotebookCell--embedded::before,
+  &.Sqb-NotebookCell--embedded::after {
+    content: none;
+  }
+
+  &.Sqb-NotebookCell--embedded > .Sqb-TableName {
+    margin-right: var(--sqb-item-gap-x, 8px);
+    margin-bottom: var(--sqb-item-gap-y, 8px);
+  }
+
+  &.Sqb-NotebookCell--embedded > .Sqb-Filter-item {
+    --sqb-item-shell-margin-x: 10px;
+    --sqb-item-gap-x: 8px;
+    --sqb-item-gap-y: 8px;
+    --sqb-arrow-offset-left: -22px;
+    --sqb-arrow-offset-right: -22px;
+    margin-bottom: 0;
+    margin-left: var(--sqb-item-shell-margin-x);
+    margin-right: var(--sqb-item-shell-margin-x);
+  }
+
+  .case-group-shell {
+    position: relative;
+    display: flex;
+    flex: 0 0 100%;
+    width: calc(100% - 20px);
+    margin: 0 10px;
+
+    > .right-arrow,
+    > .left-arrow {
+      position: absolute;
+      top: 50%;
+      height: 40px;
+      width: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.4;
+      cursor: pointer;
+      transform: translateY(-50%) scale(0);
+      transition: all 0.3s;
+
+      img {
+        transform: scale(0.8);
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    > .left-arrow {
+      left: -30px;
+      transform: translateY(-50%) rotate(180deg) scale(0);
+      transform-origin: 50% 50%;
+    }
+
+    > .right-arrow {
+      right: -20px;
+    }
+
+    &.hover {
+      > .left-arrow {
+        transform: translateY(-50%) rotate(180deg) scale(1);
+      }
+
+      > .right-arrow {
+        transform: translateY(-50%) scale(1);
+      }
+    }
+  }
+
+  .Sqb-FormulaGroup {
+    display: inline-flex;
+    margin-bottom: 8px;
+    border-radius: 16px;
+  }
+
+  .formula-node-group {
+    position: relative;
+    width: 100%;
+  }
+
+  .formula-node-remove {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    margin-left: 0;
+    z-index: 2;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: rgba(83, 92, 112, 0.46);
+    opacity: 0.72;
+    transition:
+      color 160ms ease,
+      background-color 160ms ease,
+      opacity 160ms ease;
+
+    &:hover {
+      background: rgba(83, 92, 112, 0.08);
+      color: rgba(83, 92, 112, 0.82);
+      opacity: 1;
+    }
+  }
+
+  .Sqb-FormulaGroup.flow-group {
+    display: flex;
+    width: 100%;
+    flex: 0 0 100%;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 2px;
+    padding: 8px 12px 6px;
+    background: rgba(80, 158, 227, 0.08);
+    border: 1px solid rgba(80, 158, 227, 0.16);
+  }
+
+  .Sqb-FormulaGroup.group-selected {
+    box-shadow: inset 0 0 0 1px rgba(80, 158, 227, 0.3);
+  }
+
+  .Sqb-FormulaGroup .group-check {
+    margin: 0 0 6px 2px;
+  }
+
+  .Sqb-FormulaGroup.logic-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    width: auto;
+    max-width: 100%;
+    padding: 4px 8px;
+    background: rgba(72, 125, 227, 0.05);
+    border: 1px solid rgba(72, 125, 227, 0.12);
+  }
+
+  .Sqb-FormulaGroup.logic-group .formula-node-remove {
+    position: static;
+    top: auto;
+    right: auto;
+    margin-left: 2px;
+    align-self: center;
+    flex: 0 0 auto;
+  }
+
+  .Sqb-LogicGroup-content {
+    display: inline-flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    column-gap: 4px;
+    row-gap: 2px;
+  }
+
+  .Sqb-NestedFormulaList {
+    width: 100%;
+  }
+
+  .Sqb-NestedFormulaList .Sqb-NotebookCell {
+    width: 100%;
+  }
+
+  .Sqb-NestedFormulaList .Sqb-NotebookCell.Sqb-NotebookCell--embedded {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+    width: auto;
+    max-width: 100%;
+  }
+
+  .Sqb-NestedFormulaList .Sqb-NotebookCell.Sqb-NotebookCell--embedded .Sqb-TableName {
+    margin-right: var(--sqb-item-gap-x, 8px);
+    margin-bottom: var(--sqb-item-gap-y, 8px);
+  }
+
+  .Sqb-NestedFormulaList .Sqb-NotebookCell.Sqb-NotebookCell--embedded .Sqb-Filter-item {
+    --sqb-item-shell-margin-x: 10px;
+    --sqb-item-gap-x: 8px;
+    --sqb-item-gap-y: 8px;
+    --sqb-arrow-offset-left: -22px;
+    --sqb-arrow-offset-right: -22px;
+    margin-bottom: 0;
+    margin-left: var(--sqb-item-shell-margin-x);
+    margin-right: var(--sqb-item-shell-margin-x);
+  }
+
+  .Sqb-NestedFormulaList
+    .Sqb-NotebookCell.Sqb-NotebookCell--embedded
+    .Sqb-Filter-item
+    > .left-arrow,
+  .Sqb-NestedFormulaList
+    .Sqb-NotebookCell.Sqb-NotebookCell--embedded
+    .Sqb-Filter-item
+    > .right-arrow {
+    transform: translateY(-50%) scale(0);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .Sqb-NestedFormulaList
+    .Sqb-NotebookCell.Sqb-NotebookCell--embedded
+    .Sqb-Filter-item:hover
+    > .left-arrow,
+  .Sqb-NestedFormulaList
+    .Sqb-NotebookCell.Sqb-NotebookCell--embedded
+    .Sqb-Filter-item.hover
+    > .left-arrow {
+    transform: translateY(-50%) rotate(180deg) scale(1);
+    opacity: 0.4;
+    pointer-events: auto;
+  }
+
+  .Sqb-NestedFormulaList
+    .Sqb-NotebookCell.Sqb-NotebookCell--embedded
+    .Sqb-Filter-item:hover
+    > .right-arrow,
+  .Sqb-NestedFormulaList
+    .Sqb-NotebookCell.Sqb-NotebookCell--embedded
+    .Sqb-Filter-item.hover
+    > .right-arrow {
+    transform: translateY(-50%) scale(1);
+    opacity: 0.4;
+    pointer-events: auto;
+  }
+
+  .Sqb-LogicGroup-content .Sqb-NestedFormulaList,
+  .Sqb-LogicGroup-content .Sqb-NestedFormulaList .Sqb-NotebookCell {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+    width: auto;
+  }
+
+  .Sqb-LogicGroup-content .Sqb-Filter-item {
+    margin-bottom: 0;
+  }
+
+  .Sqb-FormulaGroup-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+  }
+
+  .case-section {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+  }
+
+  .case-section-condition,
+  .case-section-result,
+  .case-section-else {
+    position: relative;
+    padding: 8px 10px 2px;
+    border-radius: 12px;
+  }
+
+  .case-section-condition {
+    background: rgba(72, 125, 227, 0.1);
+    border: 1px solid rgba(72, 125, 227, 0.15);
+    margin-right: 8px;
+  }
+
+  .case-section-result,
+  .case-section-else {
+    background: rgba(46, 167, 138, 0.1);
+    border: 1px solid rgba(46, 167, 138, 0.14);
+  }
+
+  .case-section-condition::before,
+  .case-section-result::before,
+  .case-section-else::before {
+    content: none;
+  }
+
+  .case-section-condition .Sqb-Filter-item,
+  .case-section-result .Sqb-Filter-item,
+  .case-section-else .Sqb-Filter-item {
+    margin-top: 0;
+  }
+
+  .Sqb-FormulaGroup-row.row-case {
+    margin-bottom: 4px;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .Sqb-FormulaGroup-row.row-when,
+  .Sqb-FormulaGroup-row.row-else {
+    width: 100%;
+    margin-left: 12px;
+    padding-left: 10px;
+    border-left: 2px solid rgba(80, 158, 227, 0.22);
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .Sqb-FormulaGroup-row.row-when {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .Sqb-CaseRow-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 2px;
+  }
+
+  .Sqb-CaseRow-actions.when-row-actions {
+    margin: 0;
+    padding-top: 0;
+    align-self: center;
+  }
+
+  .Sqb-FormulaGroup-row.row-else,
+  .Sqb-FormulaGroup-row.row-case {
+    width: 100%;
+  }
+
+  .Sqb-FormulaGroup-row.row-end {
+    margin-left: 12px;
+    padding-left: 10px;
+  }
+
+  .Sqb-Filter-item.group-child {
+    margin-right: 0;
+  }
+
+  .Sqb-Filter-item.group-flow-child {
+    width: auto;
+  }
+
+  .Sqb-Filter-item.group-logic-child {
+    flex: 0 0 auto;
+  }
+
+  .Sqb-Filter-item.case-row-item {
+    margin-bottom: 6px;
+  }
+
+  .Sqb-Filter-item.case-row-item-end {
+    margin-left: 0;
+  }
+
+  .Sqb-CaseSection {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: auto;
+    min-width: 0;
+    gap: 6px;
+  }
+
+  .Sqb-CaseSection-condition {
+    flex: 0 1 auto;
+    min-height: auto;
+    margin-right: 0;
+    max-width: 100%;
+  }
+
+  .Sqb-CaseSection-case {
+    flex: 1 1 320px;
+    min-height: auto;
+    margin-left: 0;
+  }
+
+  .Sqb-CaseSection-result {
+    flex: 0 1 auto;
+    min-height: auto;
+    max-width: 100%;
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseKeyword {
+    flex: 0 0 auto;
+    line-height: 24px;
+    padding: 0;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    color: rgba(83, 92, 112, 0.86);
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseKeyword.keyword-case,
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseKeyword.keyword-end {
+    color: rgba(83, 92, 112, 0.68);
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseKeyword.keyword-branch {
+    color: rgba(83, 92, 112, 0.84);
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-NestedFormulaList,
+  .Sqb-FormulaGroup.flow-group .Sqb-NestedFormulaList .Sqb-NotebookCell {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+    width: auto;
+    min-width: 0;
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-NestedFormulaList .Sqb-Filter-item {
+    margin-bottom: 0;
+    margin-right: 0;
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseSection-case,
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseSection-condition,
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseSection-result {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-FormulaGroup-row.row-when .Sqb-CaseSection-condition,
+  .Sqb-FormulaGroup.flow-group .Sqb-FormulaGroup-row.row-when .Sqb-CaseSection-result,
+  .Sqb-FormulaGroup.flow-group .Sqb-FormulaGroup-row.row-else .Sqb-CaseSection-result {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 6px;
+    row-gap: 2px;
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-FormulaGroup-row.row-when .Sqb-NestedFormulaList,
+  .Sqb-FormulaGroup.flow-group
+    .Sqb-FormulaGroup-row.row-when
+    .Sqb-NestedFormulaList
+    .Sqb-NotebookCell,
+  .Sqb-FormulaGroup.flow-group .Sqb-FormulaGroup-row.row-else .Sqb-NestedFormulaList,
+  .Sqb-FormulaGroup.flow-group
+    .Sqb-FormulaGroup-row.row-else
+    .Sqb-NestedFormulaList
+    .Sqb-NotebookCell {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: auto;
+  }
+
+  .Sqb-FormulaGroup.flow-group .Sqb-CaseSection-case {
+    flex: 1 1 auto;
+  }
+
+  .Sqb-FormulaGroup.logic-group .Sqb-CaseKeyword {
+    line-height: 28px;
+    padding: 0;
+  }
+
+  .Sqb-FormulaGroup.logic-group .Sqb-TableName.logic-operator {
+    min-height: 28px;
+    padding: 0 10px;
+    border-radius: 14px;
+    margin-right: 0;
+    margin-bottom: 0;
+  }
+
+  .Sqb-FormulaGroup-row.row-else .Sqb-CaseSection-result,
+  .Sqb-FormulaGroup-row.row-case .Sqb-CaseSection-case {
+    width: 100%;
+  }
+
+  .Sqb-CaseRow-add,
+  .Sqb-CaseRow-remove {
+    flex: 0 0 auto;
+  }
+
+  .Sqb-CaseRecover {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin: 2px 0 8px;
+    padding: 6px 10px;
+    border: 1px dashed rgba(80, 158, 227, 0.35);
+    border-radius: 10px;
+    background: rgba(80, 158, 227, 0.06);
+    color: rgb(80, 158, 227);
+    cursor: pointer;
+    font-size: 12px;
+
+    &:hover {
+      background: rgba(80, 158, 227, 0.12);
+    }
+  }
+
+  .Sqb-CaseRecoverSlot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto;
+    padding: 0 0 6px;
+  }
+
+  .Sqb-CaseRecover.recover-row,
+  .Sqb-CaseRecover.recover-else-row {
+    align-self: flex-start;
+    margin: 6px 0 10px 20px;
+  }
+
+  .Sqb-CaseRecover.inline-after-case {
+    margin: 4px 0 8px 32px;
+  }
+
+  .Sqb-CaseSection-case .Sqb-CaseRecover.recover-case {
+    margin: 2px 0 6px 4px;
+  }
+
+  .Sqb-CaseRow-add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 2px 0 8px;
+    border: none;
+    border-radius: 999px;
+    width: 28px;
+    height: 28px;
+    background: rgba(80, 158, 227, 0.12);
+    color: rgb(80, 158, 227);
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(80, 158, 227, 0.18);
+    }
+  }
+
+  .Sqb-CaseRow-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border: none;
+    border-radius: 999px;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    color: rgba(83, 92, 112, 0.46);
+    cursor: pointer;
+    transition:
+      color 160ms ease,
+      background-color 160ms ease,
+      transform 160ms ease;
+
+    &:hover {
+      background: rgba(245, 63, 63, 0.08);
+      color: rgba(220, 38, 38, 0.9);
+      transform: translateY(-1px);
+    }
+  }
+
   &:hover {
     .item-isCheck {
       display: block;