bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.2

package/lib/table/table.d.ts

@@ -151,6 +151,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    rowDraggable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     columnPick: (_cols: import("./props").IColumnActive[]) => boolean;
     columnFilter: (_args: {
@@ -230,6 +233,10 @@ declare const _default: import("vue").DefineComponent<{
     }) => boolean;
     rowMouseEnter: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
     rowMouseLeave: (_e: MouseEvent, _row: any, _index: number, _rows: any[], _this: any) => boolean;
+    dragend: (_args: {
+        sourceEvent: DragEvent;
+        data: any[];
+    }) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
@@ -382,7 +389,14 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    rowDraggable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 }>> & {
+    onDragend?: (_args: {
+        sourceEvent: DragEvent;
+        data: any[];
+    }) => any;
     onSelect?: (_args: {
         row: any;
         index: Number;
@@ -473,6 +487,7 @@ declare const _default: import("vue").DefineComponent<{
     minHeight: string | number;
     columns: Column[];
     checked: unknown[];
+    emptyText: string;
     cellClass: any;
     headHeight: number;
     rowKey: any;
@@ -487,7 +502,6 @@ declare const _default: import("vue").DefineComponent<{
     paginationHeight: number;
     remotePagination: boolean;
     acrossAll: boolean;
-    emptyText: string;
     emptyCellText: any;
     rowClass: any;
     rowStyle: any;
@@ -502,5 +516,6 @@ declare const _default: import("vue").DefineComponent<{
     observerResize: boolean;
     prependStyle: import("vue").CSSProperties;
     isFlex: boolean;
+    rowDraggable: any;
 }, {}>;
 export default _default;

package/lib/table/table.less

@@ -18,7 +18,7 @@
   &-flex {
     display: flex;
     flex-direction: column;
-    max-height: 100%;
+    max-height: fit-content;
     .@{bk-prefix}-table-body {
       flex: 1;
       overflow: auto;
@@ -34,6 +34,7 @@
   .@{bk-prefix}-table-body {
     position: relative;
     overflow: auto;
+    scrollbar-gutter: stable;
 
     &::-webkit-scrollbar {
       width: 5px;
@@ -58,7 +59,7 @@
           tr {
             &:nth-child(even) {
               td {
-                background-color: #FAFBFD;
+                background-color: #fafbfd;
               }
             }
 
@@ -108,11 +109,11 @@
       align-items: center;
 
       .@{bk-prefix}-table-body-content {
+        position: relative;
         display: flex;
         width: 100%;
         height: 100%;
         padding-bottom: 20px;
-        position: relative;
       }
 
     }
@@ -120,9 +121,9 @@
     table {
       width: 100%;
       border-collapse: collapse;
+      transform: translateZ(0);
       table-layout: fixed;
       align-self: flex-start;
-      transform: translateZ(0);
 
       th,
       td {
@@ -144,6 +145,11 @@
           text-overflow: ellipsis;
           white-space: nowrap;
 
+          .drag-cell {
+            font-size: 14px;
+            height: 100%;
+          }
+
           &.has-sort {
             cursor: pointer;
           }
@@ -229,24 +235,25 @@
         background-color: @table-head-bg-color;
 
         th {
+          position: relative;
           font-weight: 400;
           background-color: var(--background-color);
-          position: relative;
 
           &.col-resize-hover {
             &::after {
-              content: '';
               position: absolute;
-              right: 0;
               top: 0;
+              right: 0;
               bottom: 0;
-              width: 6px;
-              transform: translateX(50%);
-              background-color: #3785FF;
               z-index: 1;
+              width: 6px;
               pointer-events: none;
+              background-color: #3785ff;
+              content: '';
+              transform: translateX(50%);
             }
           }
+
           .cell {
             display: flex;
             align-items: center;
@@ -256,8 +263,8 @@
 
           &.active,
           &:hover {
-            background: @table-row-active-bg-color;
             cursor: pointer;
+            background: @table-row-active-bg-color;
           }
 
           &.column_fixed {
@@ -286,6 +293,11 @@
               line-height: calc(var(--row-height) - 1px);
               box-sizing: border-box;
               align-items: center;
+
+              &.drag {
+                cursor: move;
+                text-align: center;
+              }
             }
           }
 
@@ -298,6 +310,20 @@
               }
             }
           }
+
+          &.--drag-enter {
+            &.--bottom {
+              border-bottom: solid 1px #3785ff;
+            }
+
+            &.--top {
+              border-top: solid 1px #3785ff;
+            }
+          }
+
+          &.--drag-start {
+            background: #fff;
+          }
         }
       }
     }
@@ -305,18 +331,23 @@
 
   .@{bk-prefix}-table-head {
     position: relative;
-    transform: translateX(var(--scroll-head-left));
     z-index: 2;
+    scrollbar-gutter: stable;
+    overflow: hidden;
 
     .col-resize-drag {
       position: absolute;
-      right: 0;
       top: 0;
+      right: 0;
       bottom: 0;
+      z-index: 1;
       width: 6px;
+      background-color: #3785ff;
       transform: translateX(-50%);
-      background-color: #3785FF;
-      z-index: 1;
+    }
+
+    thead {
+      transform: translateX(var(--scroll-head-left));
     }
 
     .table-head-settings {
@@ -341,16 +372,16 @@
 
       > span {
         display: flex;
-        width: 1rem;
-        height: 1rem;
+        width: 1em;
+        height: 1em;
       }
     }
   }
 
   .@{bk-prefix}-table-footer {
-    height: var(--footer-height);
-    width: 100%;
     display: flex;
+    width: 100%;
+    height: var(--footer-height);
     align-items: center;
 
     &.is-hidden {
@@ -428,9 +459,8 @@
     top: 0;
     right: 0;
     bottom: var(--footer-height);
-    max-height: var(--fix-max-height);
     left: 0;
-    height: var(--fix-height);
+    // height: var(--fix-height);
     pointer-events: none;
 
     .column_fixed {
@@ -487,6 +517,6 @@
   }
 
   .stripe-row {
-    background: #FAFBFD;
+    background: #fafbfd;
   }
 }

package/lib/table/table.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -168,7 +172,7 @@
   user-select: none;
 }
 .bk-checkbox ~ .bk-checkbox {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
@@ -231,6 +235,12 @@
 .bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
+.bk-checkbox.is-prechecking {
+  position: relative;
+}
+.bk-checkbox.is-prechecking .bk-checkbox-input {
+  visibility: hidden;
+}
 .bk-checkbox-input {
   position: relative;
   display: inline-block;
@@ -257,10 +267,16 @@
   margin-left: 6px;
   vertical-align: middle;
 }
+.bk-checkbox-checking {
+  position: absolute;
+  font-size: 16px;
+  color: #3a84ff;
+  animation: loading 1s linear infinite;
+}
 .bk-button {
   display: inline-flex;
   height: 32px;
-  padding: 5px 12px;
+  padding: 0 14px;
   font-size: 14px;
   color: #63656e;
   text-decoration: none;
@@ -482,12 +498,12 @@
 }
 .bk-button.bk-button-small {
   height: 26px;
-  padding: 3px 12px;
+  padding: 0 12px;
   font-size: 12px;
 }
 .bk-button.bk-button-large {
-  height: 38px;
-  padding: 8px 20px;
+  height: 40px;
+  padding: 0 16px;
   font-size: 16px;
 }
 .bk-button .bk-button-text {
@@ -527,18 +543,21 @@
   cursor: not-allowed;
   border-color: #dcdee5;
 }
+.bk-button.is-disabled:not(.is-text) {
+  background-color: #f9fafd;
+}
 .bk-button-group {
   display: inline-block;
   font-size: 0;
 }
 .bk-button-group.bk-button-group-small .bk-button {
   height: 26px;
-  padding: 3px 12px;
+  padding: 0 12px;
   font-size: 12px;
 }
 .bk-button-group.bk-button-group-large .bk-button {
-  height: 38px;
-  padding: 8px 20px;
+  height: 40px;
+  padding: 0 16px;
   font-size: 16px;
 }
 .bk-button-group .bk-button {
@@ -673,6 +692,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,
 .bk-pagination-list-next-batch,
@@ -843,7 +863,7 @@
 .bk-popover.bk-pop2-content {
   position: absolute;
   display: none;
-  padding: 7px 14px;
+  padding: 12px;
   font-size: 12px;
   color: #fff;
   background: #26323d;
@@ -922,37 +942,10 @@
 }
 .bk-popover.bk-pop2-content.bk-table-head-filter .content-footer {
   display: flex;
-  height: 42px;
-  padding: 0 10px;
+  padding: 12px;
   border-top: solid 1px #dcdee5;
-  justify-content: center;
-  align-items: center;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span {
-  display: inline-flex;
-  height: 100%;
-  padding: 6px 12px;
-  font-size: 14px;
-  line-height: 22px;
-  color: #3a84ff;
-  cursor: pointer;
   align-items: center;
 }
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.disabled {
-  color: transparent;
-  cursor: auto;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.btn-filter-split {
-  width: 1px;
-  height: calc(100% - 12px);
-  padding: 6px 0;
-  cursor: default;
-  background: #f0f1f5;
-}
-.bk-popover.bk-pop2-content.bk-table-head-filter .content-footer span.btn-filter-reset.disable {
-  color: #979ba5;
-  cursor: not-allowed;
-}
 .bk-head-cell-sort {
   display: flex;
   height: 100%;
@@ -1134,7 +1127,7 @@
 .bk-table-flex {
   display: flex;
   flex-direction: column;
-  max-height: 100%;
+  max-height: fit-content;
 }
 .bk-table-flex .bk-table-body {
   flex: 1;
@@ -1146,6 +1139,7 @@
 .bk-table .bk-table-body {
   position: relative;
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
   width: 5px;
@@ -1160,7 +1154,7 @@
   transform: translateX(var(--prepend-left));
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
-  background-color: #FAFBFD;
+  background-color: #fafbfd;
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr td {
   border-bottom: none;
@@ -1202,19 +1196,19 @@
 }
 .bk-table .bk-table-head.__is-empty .bk-table-body-content,
 .bk-table .bk-table-body.__is-empty .bk-table-body-content {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   padding-bottom: 20px;
-  position: relative;
 }
 .bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
+  transform: translateZ(0);
   table-layout: fixed;
   align-self: flex-start;
-  transform: translateZ(0);
 }
 .bk-table .bk-table-head table th,
 .bk-table .bk-table-body table th,
@@ -1241,6 +1235,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-table .bk-table-head table th .cell .drag-cell,
+.bk-table .bk-table-body table th .cell .drag-cell,
+.bk-table .bk-table-head table td .cell .drag-cell,
+.bk-table .bk-table-body table td .cell .drag-cell {
+  font-size: 14px;
+  height: 100%;
+}
 .bk-table .bk-table-head table th .cell.has-sort,
 .bk-table .bk-table-body table th .cell.has-sort,
 .bk-table .bk-table-head table td .cell.has-sort,
@@ -1343,22 +1344,22 @@
 }
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
+  position: relative;
   font-weight: 400;
   background-color: var(--background-color);
-  position: relative;
 }
 .bk-table .bk-table-head table thead th.col-resize-hover::after,
 .bk-table .bk-table-body table thead th.col-resize-hover::after {
-  content: '';
   position: absolute;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
-  width: 6px;
-  transform: translateX(50%);
-  background-color: #3785FF;
   z-index: 1;
+  width: 6px;
   pointer-events: none;
+  background-color: #3785ff;
+  content: '';
+  transform: translateX(50%);
 }
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
@@ -1371,8 +1372,8 @@
 .bk-table .bk-table-body table thead th.active,
 .bk-table .bk-table-head table thead th:hover,
 .bk-table .bk-table-body table thead th:hover {
-  background: #f0f1f5;
   cursor: pointer;
+  background: #f0f1f5;
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
@@ -1399,24 +1400,45 @@
   box-sizing: border-box;
   align-items: center;
 }
+.bk-table .bk-table-head table tbody tr td .cell.drag,
+.bk-table .bk-table-body table tbody tr td .cell.drag {
+  cursor: move;
+  text-align: center;
+}
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
   background: #f5f7fa;
 }
+.bk-table .bk-table-head table tbody tr.--drag-enter.--bottom,
+.bk-table .bk-table-body table tbody tr.--drag-enter.--bottom {
+  border-bottom: solid 1px #3785ff;
+}
+.bk-table .bk-table-head table tbody tr.--drag-enter.--top,
+.bk-table .bk-table-body table tbody tr.--drag-enter.--top {
+  border-top: solid 1px #3785ff;
+}
+.bk-table .bk-table-head table tbody tr.--drag-start,
+.bk-table .bk-table-body table tbody tr.--drag-start {
+  background: #fff;
+}
 .bk-table .bk-table-head {
   position: relative;
-  transform: translateX(var(--scroll-head-left));
   z-index: 2;
+  scrollbar-gutter: stable;
+  overflow: hidden;
 }
 .bk-table .bk-table-head .col-resize-drag {
   position: absolute;
-  right: 0;
   top: 0;
+  right: 0;
   bottom: 0;
+  z-index: 1;
   width: 6px;
+  background-color: #3785ff;
   transform: translateX(-50%);
-  background-color: #3785FF;
-  z-index: 1;
+}
+.bk-table .bk-table-head thead {
+  transform: translateX(var(--scroll-head-left));
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1438,13 +1460,13 @@
 }
 .bk-table .bk-table-head .table-head-settings > span {
   display: flex;
-  width: 1rem;
-  height: 1rem;
+  width: 1em;
+  height: 1em;
 }
 .bk-table .bk-table-footer {
-  height: var(--footer-height);
-  width: 100%;
   display: flex;
+  width: 100%;
+  height: var(--footer-height);
   align-items: center;
 }
 .bk-table .bk-table-footer.is-hidden {
@@ -1495,9 +1517,7 @@
   top: 0;
   right: 0;
   bottom: var(--footer-height);
-  max-height: var(--fix-max-height);
   left: 0;
-  height: var(--fix-height);
   pointer-events: none;
 }
 .bk-table .bk-table-fixed .column_fixed {
@@ -1537,5 +1557,5 @@
   margin-left: auto;
 }
 .bk-table .stripe-row {
-  background: #FAFBFD;
+  background: #fafbfd;
 }

package/lib/table/use-attributes.d.ts

@@ -1,5 +1,5 @@
 import { IEmptyObject } from './const';
-import { Column, Settings, SortScope, TablePropTypes } from './props';
+import { Column, Field, Settings, SortScope, TablePropTypes } from './props';
 export type ITableFormatData = {
     data: any[];
     dataSchema: WeakMap<object, any>;
@@ -8,6 +8,8 @@ export type ITableFormatData = {
     settings: {
         size: string;
         height: number;
+        fields: Field[];
+        checked: string[];
     };
     layout: {
         bottom: number;
@@ -31,6 +33,7 @@ export type ITableResponse = {
     isActiveColumn: (col: Column) => boolean;
     isHiddenColumn: (col: Column) => boolean;
     resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: SortScope) => void;
+    resolveByDefColumns: () => void;
     resetStartEndIndex: () => void;
     toggleRowSelection: (row: any) => void;
     toggleAllSelection: (value?: boolean) => void;
@@ -47,6 +50,8 @@ export type ITableResponse = {
     hasCheckedRow: () => boolean;
     setRowSelectionAll: (val: boolean) => void;
     setRowIndeterminate: () => void;
+    updateSettings: (settings?: Settings, rowHeight?: number) => void;
+    changePageRowIndex: (sourceIndex: number, targetIndex: number) => void;
     pageData: any[];
     localPagination: any;
     formatData: ITableFormatData;