tntd 3.0.0-beta.16 → 3.0.0-beta.19

package/es/query-form/index.less

@@ -1,30 +1,73 @@
 .tnt-queryform {
-  &-top {
-    display: flex;
-    &-body {
-      flex: 1;
-      .ant-btn {
-        margin-right: 10px;
-      }
-    }
-  }
+  display: flex;
 
   &-extra {
+    line-height: 32px;
+    margin-left: 12px;
     & > * {
-      margin-left: 10px;
+      margin-left: 8px;
+    }
+  }
+
+  &-actions {
+    align-items: center;
+    display: inline-block;
+    height: 32px;
+    line-height: 32px;
+
+    & > *:not(.expand-link) {
+      margin-right: 10px;
+    }
+    & > .expand-link {
+      padding: 0;
+      margin-right: 0;
+    }
+    & > .ant-badge {
+      .tnt-icon {
+        margin-right: 8px;
+      }
     }
   }
 
   .ant-form {
-    // margin-bottom: @margin-sm;
+    display: inline-block;
+    margin-bottom: 12px;
+    display: flex;
+    flex: 1;
     &.ant-form-inline {
       flex-wrap: unset;
-      position: relative;
+    }
+
+    & > div:nth-child(1) {
+      height: 32px;
+      overflow: hidden;
+      .ant-form-item-label {
+        label {
+          // bottom: 4px;
+        }
+      }
+    }
+
+    &.expanded {
+      & > div:nth-child(1) {
+        height: auto !important;
+      }
+    }
+
+    &.showMore {
+      & > div:nth-child(1) {
+        .ant-form-item {
+          margin-bottom: 12px;
+        }
+      }
+    }
+
+    & > div:nth-child(2) {
+      display: flex;
     }
 
     &.ant-form-inline .ant-form-item {
       margin-right: 10px;
-      margin-bottom: @margin-sm;
       display: inline-block;
     }
 
@@ -32,7 +75,7 @@
       // min-width: 160px;
       line-height: unset;
       .ant-calendar-picker-input {
-        padding: 0 @padding-sm;
+        padding: 0 11px;
       }
       .ant-form-item-children {
         & > .ant-input,
@@ -45,7 +88,7 @@
   }
 
   &-drawer {
-    margin-top: @margin-xxl;
+    margin-top: 50px;
     &.large-size {
       margin-top: 60px;
     }
@@ -60,7 +103,7 @@
       .ant-form-item {
         display: block;
         margin-right: 0;
-        margin-bottom: @margin-md;
+        margin-bottom: 20px;
         width: 100%;
       }
       .ant-form-item-label {
@@ -82,7 +125,7 @@
         width: 100%;
         margin-bottom: 10px;
         &.ant-btn-primary {
-          margin-top: @margin-md;
+          margin-top: 20px;
         }
       }
     }

package/es/query-form-backup/Field/Composition/FieldPopover.less

@@ -0,0 +1,35 @@
+.tnt-queryform-field-popover {
+  min-width: 280px;
+  .ant-popover-inner-content {
+    padding: @padding-sm 0;
+  }
+  .ant-calendar-picker {
+    margin: @margin-xxs 0;
+  }
+  label {
+    color: tint(@text-color, 50%);
+    margin-bottom: @margin-xs;
+    display: block;
+    padding: 0 @padding-sm;
+  }
+  .ant-select-dropdown-menu {
+    &-item {
+      padding: @padding-xxs @padding-sm;
+      &:hover {
+        background-color: @bg-color-quaternary;
+      }
+    }
+  }
+  &-content {
+    padding: @padding-xxs @padding-sm;
+  }
+  .ant-select-selected-icon {
+    position: absolute;
+    right: @margin-base;
+    top: @margin-xs;
+    color: @blue-6;
+  }
+  .tnt-highlight {
+    color: @blue-6;
+  }
+}

package/es/query-form-backup/Field/Composition/index.less

@@ -0,0 +1,114 @@
+@import '../../../style/themes/index';
+@import '../../../style/mixins/index';
+@import '../../../input/style/mixin';
+
+.tnt-queryform-composition-input {
+  // width: 100%;
+  max-height: 162px;
+  overflow-x: hidden;
+  cursor: text;
+  padding: 2px @padding-xl;
+  position: relative;
+  box-sizing: border-box;
+  background-color: @select-background;
+  border: @border-width-base @border-style-base @select-border-color;
+  border-top-width: calc(@border-width-base + 0.02px);
+  border-radius: @border-radius-base;
+  outline: none;
+  transition: all 0.3s @ease-in-out;
+  user-select: none;
+  margin-bottom: @margin-sm;
+
+  &-prefix {
+    position: absolute;
+    left: @padding-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    i.anticon {
+      color: tint(@bg-color-spotilight, 50%);
+    }
+  }
+
+  &-width {
+    height: 0;
+    opacity: 0;
+    width: auto;
+    position: absolute;
+    max-width: 100%;
+  }
+
+  &-items {
+    float: left;
+    padding: 0;
+    list-style: none;
+    margin: 0;
+    width: 100%;
+    &-item {
+      padding: 3px 0;
+    }
+    li {
+      float: left;
+      line-height: 1;
+    }
+    &-input {
+      .inputClass {
+        background: none;
+        border: none !important;
+        outline: none;
+        box-shadow: none !important;
+        width: 150px !important;
+        height: 26px;
+        line-height: 26px;
+        padding: 0;
+        input {
+          border: none !important;
+          outline: none !important;
+          box-shadow: none !important;
+          height: 26px;
+          line-height: 26px;
+          padding: 0;
+        }
+        textarea {
+          padding: 0;
+        }
+      }
+      .inputClass-with-placeholder {
+        min-width: 398px !important;
+      }
+    }
+  }
+  &-clear {
+    position: absolute;
+    right: @margin-sm;
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
+    i.anticon {
+      color: tint(@bg-color-spotilight, 50%);
+    }
+    &:hover {
+      .anticon {
+        color: @text-color-secondary !important;
+      }
+    }
+  }
+  &:hover {
+    border-color: @blue-6;
+    outline: 0;
+    .tnt-queryform-composition-input-clear {
+      display: block;
+    }
+    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
+  }
+  &:focus,
+  &:active {
+    border-color: @blue-5;
+    outline: 0;
+    // box-shadow: 0 0 0 2px rgb(18 107 251 / 20%);
+  }
+  .ant-tag {
+    padding: 0 @padding-xs;
+    border: none;
+    background: @fill-color-tertiary;
+  }
+}

package/es/query-form-backup/index.less

@@ -0,0 +1,90 @@
+.tnt-queryform {
+  &-top {
+    display: flex;
+    &-body {
+      flex: 1;
+      .ant-btn {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &-extra {
+    & > * {
+      margin-left: 10px;
+    }
+  }
+
+  .ant-form {
+    // margin-bottom: @margin-sm;
+    &.ant-form-inline {
+      flex-wrap: unset;
+      position: relative;
+    }
+
+    &.ant-form-inline .ant-form-item {
+      margin-right: 10px;
+      margin-bottom: @margin-sm;
+      display: inline-block;
+    }
+
+    .ant-form-item-control {
+      // min-width: 160px;
+      line-height: unset;
+      .ant-calendar-picker-input {
+        padding: 0 @padding-sm;
+      }
+      .ant-form-item-children {
+        & > .ant-input,
+        & > .ant-input-affix-wrapper {
+          width: 160px;
+          // width: 200px;
+        }
+      }
+    }
+  }
+
+  &-drawer {
+    margin-top: @margin-xxl;
+    &.large-size {
+      margin-top: 60px;
+    }
+
+    &.ant-drawer.ant-drawer-open {
+      .ant-drawer-mask {
+        opacity: 0;
+        background: unset;
+      }
+    }
+    .ant-drawer-body {
+      .ant-form-item {
+        display: block;
+        margin-right: 0;
+        margin-bottom: @margin-md;
+        width: 100%;
+      }
+      .ant-form-item-label {
+        display: block;
+        text-align: left;
+        line-height: 22px;
+        margin-bottom: 10px;
+      }
+      .ant-form-item-control-wrapper,
+      .ant-form-item-control,
+      .ant-calendar-picker,
+      .ant-input {
+        min-width: 100%;
+        width: 100%;
+      }
+
+      & > .ant-btn {
+        display: block;
+        width: 100%;
+        margin-bottom: 10px;
+        &.ant-btn-primary {
+          margin-top: @margin-md;
+        }
+      }
+    }
+  }
+}

package/es/table/expand.less

@@ -0,0 +1,51 @@
+@table-prefix-cls: ~'@{ant-prefix}-table';
+@pagination-prefix-cls: ~'@{ant-prefix}-pagination';
+@spin-prefix-cls: ~'@{ant-prefix}-spin';
+@table-borderless-shadow: 0 0 14px rgba(0, 0, 0, 0.08);
+
+// .@{table-prefix-cls} {
+.tnt-table-wrapper {
+  // customize the fixed of table
+  &.@{table-prefix-cls}-sticky {
+    .@{table-prefix-cls}-scroll,
+    .@{table-prefix-cls}-default {
+      .@{table-prefix-cls}-body table {
+        table-layout: fixed;
+
+        tr.@{table-prefix-cls}-expanded-row.@{table-prefix-cls}-expanded-row-level-1 {
+          position: relative;
+          z-index: 10;
+          background: #f3f4f6;
+
+          > td:not([colspan]) {
+            display: none;
+          }
+
+          // 兼容低版本浏览器
+          > td[colspan] {
+            background: #fff;
+            z-index: 100;
+            padding: 0;
+            border: none;
+
+            > .@{table-prefix-cls}-expanded-row-fixed {
+              position: sticky;
+              left: 0px;
+              overflow: hidden;
+              padding: 16px;
+              background: inherit;
+              border-top: 1px solid #e1e6ee;
+            }
+          }
+        }
+      }
+    }
+
+    .@{table-prefix-cls}-fixed-left table {
+      width: fit-content;
+    }
+    .@{table-prefix-cls}-fixed-right table {
+      width: fit-content;
+    }
+  }
+}

package/es/table/hooks/index.js

@@ -1 +1,2 @@
-export * from './use-column-setting';
+export * from './use-column-setting';
+export * from './use-expand-fixed';

package/es/table/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './use-column-setting'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/table/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './use-column-setting'\nexport * from './use-expand-fixed'\n"]}

package/es/table/hooks/use-expand-fixed.js

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+import { makeRandomCode } from '../utils';
+export const useExpandFixed = () => {
+  const curTableKey = useRef(makeRandomCode());
+  const activeKeyRef = useRef(null);
+  const oldActiveKeyRef = useRef({
+    main: null,
+    right: null,
+    left: null
+  });
+  const container = useRef(null);
+  const observer = useRef(null);
+  const getDom = key => {
+    const main = document.querySelector(`.${curTableKey.current} .ant-table-scroll [data-row-key="${key}-extra-row"]`) || document.querySelector(`.${curTableKey.current} .ant-table-default [data-row-key="${key}-extra-row"]`);
+    const right = document.querySelector(`.${curTableKey.current} .ant-table-fixed-right [data-row-key="${key}-extra-row"]`);
+    const left = document.querySelector(`.${curTableKey.current} .ant-table-fixed-left [data-row-key="${key}-extra-row"]`);
+    return [main, right, left];
+  };
+  const expand = async () => {
+    const [main, right, left] = getDom(String(activeKeyRef.current) || '');
+    if (right) {
+      right.setAttribute('style', `display: inline-block; height: ${(main === null || main === void 0 ? void 0 : main.offsetHeight) || 0}px; overflow: hidden;`);
+    }
+    if (left) {
+      left.setAttribute('style', `display: inline-block; height: ${(main === null || main === void 0 ? void 0 : main.offsetHeight) || 0}px; overflow: hidden;`);
+    }
+    if (main) {
+      // 解决 expandIconAsCell为true 且 iconCell的td元素为display: none;时， 展开内容滚动到最右边，会多出一部分iconCell所占据的空间 的问题
+      const td = main.childNodes[1];
+      const colspan = td.getAttribute('colspan') || 0;
+      const Oldcolspan = td.getAttribute('oldcolspan') || 0;
+      const newColspan = Oldcolspan ? Oldcolspan : Number(colspan) + 1 + '';
+      if (!Oldcolspan) td.setAttribute('oldcolspan', newColspan);
+      td.setAttribute('colspan', newColspan);
+      //
+    }
+    oldActiveKeyRef.current = {
+      main,
+      right,
+      left
+    };
+  };
+  const ob = () => {
+    const classname = curTableKey.current;
+    if (!classname) return;
+    container.current = document.querySelector(`.${classname}.ant-table-wrapper.collapse-panel > .ant-spin-nested-loading > .ant-spin-container > .ant-table`);
+    observer.current = new MutationObserver(expand);
+    observer.current.observe(container.current, {
+      childList: true,
+      attributes: true
+    });
+  };
+  const setChangedKey = key => {
+    activeKeyRef.current = key;
+  };
+  const trigger = key => {
+    setChangedKey(key);
+    const className = curTableKey.current;
+    if (!className) return;
+    const dom = document === null || document === void 0 ? void 0 : document.querySelector(`.${className}.ant-table-wrapper.collapse-panel > .ant-spin-nested-loading > .ant-spin-container > .ant-table`);
+    dom === null || dom === void 0 ? void 0 : dom.setAttribute('c-data', 'Mutation');
+  };
+  useEffect(() => {
+    ob();
+  }, [curTableKey.current]);
+  return [curTableKey.current, trigger];
+};
+export const findRowKey = (record, rowKey) => {
+  let res = '';
+  if (typeof rowKey === 'function') {
+    res = [record].map(rowKey)[0];
+  } else if (typeof rowKey === 'string') {
+    res = record[rowKey];
+  }
+  return res;
+};

package/es/table/hooks/use-expand-fixed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-expand-fixed.js","sourceRoot":"","sources":["../../../src/table/hooks/use-expand-fixed.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef } from 'react'\nimport { makeRandomCode } from '../utils'\n\nexport type keyType = string | number | null\n\ninterface OldDom {\n  main: HTMLDivElement | null\n  right: HTMLDivElement | null\n  left: HTMLDivElement | null\n}\n\nexport const useExpandFixed = () => {\n  const curTableKey = useRef<keyType>(makeRandomCode())\n  const activeKeyRef = useRef<string | null>(null)\n  const oldActiveKeyRef = useRef<OldDom>({\n    main: null,\n    right: null,\n    left: null,\n  })\n  const container = useRef<HTMLDivElement | null>(null)\n  const observer = useRef<MutationObserver | null>(null)\n\n  const getDom = (key: string | number | undefined) => {\n    const main =\n      (document.querySelector(\n        `.${curTableKey.current} .ant-table-scroll [data-row-key=\"${key}-extra-row\"]`\n      ) as HTMLDivElement) ||\n      (document.querySelector(\n        `.${curTableKey.current} .ant-table-default [data-row-key=\"${key}-extra-row\"]`\n      ) as HTMLDivElement)\n    const right = document.querySelector(\n      `.${curTableKey.current} .ant-table-fixed-right [data-row-key=\"${key}-extra-row\"]`\n    ) as HTMLDivElement\n    const left = document.querySelector(\n      `.${curTableKey.current} .ant-table-fixed-left [data-row-key=\"${key}-extra-row\"]`\n    ) as HTMLDivElement\n    return [main, right, left]\n  }\n\n  const expand = async () => {\n    const [main, right, left] = getDom(String(activeKeyRef.current) || '')\n\n    if (right) {\n      right.setAttribute(\n        'style',\n        `display: inline-block; height: ${main?.offsetHeight || 0}px; overflow: hidden;`\n      )\n    }\n\n    if (left) {\n      left.setAttribute(\n        'style',\n        `display: inline-block; height: ${main?.offsetHeight || 0}px; overflow: hidden;`\n      )\n    }\n\n    if (main) {\n      // 解决 expandIconAsCell为true 且 iconCell的td元素为display: none;时， 展开内容滚动到最右边，会多出一部分iconCell所占据的空间 的问题\n      const td = main.childNodes[1] as HTMLDivElement\n\n      const colspan = td.getAttribute('colspan') || 0\n      const Oldcolspan = td.getAttribute('oldcolspan') || 0\n      const newColspan = Oldcolspan ? Oldcolspan : Number(colspan) + 1 + ''\n      if (!Oldcolspan) td.setAttribute('oldcolspan', newColspan)\n\n      td.setAttribute('colspan', newColspan)\n      //\n    }\n\n    oldActiveKeyRef.current = {\n      main,\n      right,\n      left,\n    }\n  }\n\n  const ob = () => {\n    const classname = curTableKey.current\n    if (!classname) return\n\n    container.current = document.querySelector(\n      `.${classname}.ant-table-wrapper.collapse-panel > .ant-spin-nested-loading > .ant-spin-container > .ant-table`\n    ) as HTMLDivElement\n\n    observer.current = new MutationObserver(expand)\n    observer.current.observe(container.current, {\n      childList: true, // 子节点的变动\n      attributes: true,\n    })\n  }\n\n  const setChangedKey = (key: string) => {\n    activeKeyRef.current = key\n  }\n\n  const trigger = (key: string) => {\n    setChangedKey(key)\n    const className = curTableKey.current\n    if (!className) return\n    const dom = document?.querySelector(\n      `.${className}.ant-table-wrapper.collapse-panel > .ant-spin-nested-loading > .ant-spin-container > .ant-table`\n    )\n    dom?.setAttribute('c-data', 'Mutation')\n  }\n\n  useEffect(() => {\n    ob()\n  }, [curTableKey.current])\n\n  return [curTableKey.current, trigger as (key: string) => void] as const\n}\n\nexport const findRowKey = (\n  record: any,\n  rowKey: string | ((record: any, index: number) => string)\n) => {\n  let res: string | number = ''\n  if (typeof rowKey === 'function') {\n    res = [record].map(rowKey)[0]\n  } else if (typeof rowKey === 'string') {\n    res = record[rowKey]\n  }\n\n  return res\n}\n"]}

package/es/table/index.js

@@ -1,5 +1,6 @@
 import './style';
 import { Table } from './table';
 import './table.less';
+import './expand.less';
 export * from './table';
 export default Table;

package/es/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,cAAc,CAAA;AAErB,cAAc,SAAS,CAAA;AAEvB,eAAe,KAAK,CAAA","sourcesContent":["import './style'\nimport { Table } from './table'\nimport './table.less'\n\nexport * from './table'\n\nexport default Table\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAA;AAChB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AAEtB,cAAc,SAAS,CAAA;AAEvB,eAAe,KAAK,CAAA","sourcesContent":["import './style'\nimport { Table } from './table'\nimport './table.less'\nimport './expand.less'\n\nexport * from './table'\n\nexport default Table\n"]}

package/es/table/style/index.less

@@ -233,7 +233,7 @@
     transition: all 0.3s, height 0s;
     &.@{table-prefix-cls}-row-hover,
     &:hover {
-      &:not(.@{table-prefix-cls}-expanded-row):not(.@{table-prefix-cls}-row-selected) {
+      &:not(.@{table-prefix-cls}-expanded-row) {
         box-shadow: 0px 0px 5px -5px rgba(0, 0, 0, 0.05), 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
         position: relative;
         > td {
@@ -243,34 +243,6 @@
     }
   }
 
-  &-thead > tr,
-  &-tbody > tr {
-    transition: all 0.3s, height 0s;
-    // &.@{table-prefix-cls}-row-hover,
-    // &:hover {
-    //   &:not(.@{table-prefix-cls}-expanded-row):not(.@{table-prefix-cls}-row-selected) {
-    //     box-shadow: 0px 0px 5px -5px rgba(0, 0, 0, 0.05), 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
-    //     position: relative;
-    //     > td {
-    //       background: @table-row-hover-bg;
-    //     }
-    //   }
-    // }
-    &.@{table-prefix-cls}-row-selected > td {
-      &.@{table-prefix-cls}-column-sort {
-        background: @table-body-selected-sort-bg;
-      }
-    }
-    &:hover {
-      &.@{table-prefix-cls}-row-selected > td {
-        background: @table-selected-row-hover-bg;
-        &.@{table-prefix-cls}-column-sort {
-          background: @table-body-selected-sort-bg;
-        }
-      }
-    }
-  }
-
   &-thead > tr:hover {
     background: none;
   }
@@ -334,8 +306,22 @@
   }
 
   &-tbody > tr.@{table-prefix-cls}-row-selected td {
-    color: @table-selected-row-color;
-    background: @table-selected-row-bg;
+    // color: @table-selected-row-color;
+    // background: @table-selected-row-bg;
+    &.@{table-prefix-cls}-selection-column {
+      position: relative;
+      &::after {
+        content: ' ';
+        width: 4px;
+        height: calc(100% - 10px);
+        background: @blue-5;
+        display: block;
+        position: absolute;
+        top: 5px;
+        left: 0;
+        border-radius: 0 4px 4px 0;
+      }
+    }
   }
 
   &-thead > tr > th.@{table-prefix-cls}-column-sort {