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

package/lib/table/plugins/body-empty.d.ts

@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: (...args: any[]) => any;
 }, {
     list: unknown[];
-    filterList: unknown[];
     emptyText: string;
+    filterList: unknown[];
 }, {}>;
 export default _default;

package/lib/table/plugins/head-filter.css

@@ -54,34 +54,7 @@
 }
 .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;
-}

package/lib/table/plugins/head-filter.less

@@ -7,6 +7,7 @@
   color: #c4c6cc;
   cursor: pointer;
   align-items: center;
+
   &:last-of-type {
     margin-right: -10px;
   }
@@ -69,42 +70,9 @@
 
       .content-footer {
         display: flex;
-        height: 42px;
-        padding: 0 10px;
+        padding: 12px;
         border-top: solid 1px #dcdee5;
-        justify-content: center;
         align-items: center;
-
-        span {
-          display: inline-flex;
-          height: 100%;
-          padding: 6px 12px;
-          font-size: 14px;
-          line-height: 22px;
-          color: @primary-color;
-          cursor: pointer;
-          align-items: center;
-
-          &.disabled {
-            color: transparent;
-            cursor: auto;
-          }
-
-          &.btn-filter-split {
-            width: 1px;
-            height: calc(100% - 12px);
-            padding: 6px 0;
-            cursor: default;
-            background: #f0f1f5;
-          }
-
-          &.btn-filter-reset {
-            &.disable {
-              color: @gray-color;
-              cursor: not-allowed;
-            }
-          }
-        }
       }
     }
   }

package/lib/table/plugins/head-filter.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;
@@ -176,34 +180,7 @@
 }
 .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: var(--primary-color);
-  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: var(--gray-color);
-  cursor: not-allowed;
-}

package/lib/table/plugins/head-sort.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;

package/lib/table/plugins/settings.d.ts

@@ -3,21 +3,14 @@ declare const _default: import("vue").DefineComponent<{
     columns: import("vue-types").VueTypeDef<import("../props").Column[]> & {
         default: () => import("../props").Column[];
     };
-    rowHeight: import("vue-types").VueTypeDef<import("../props").RowHeightFunctionNumber> & {
-        default: import("../props").RowHeightFunctionNumber;
-    };
 }, () => "" | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     settings: import("vue-types").VueTypeDef<import("../props").ISettingPropType>;
     columns: import("vue-types").VueTypeDef<import("../props").Column[]> & {
         default: () => import("../props").Column[];
     };
-    rowHeight: import("vue-types").VueTypeDef<import("../props").RowHeightFunctionNumber> & {
-        default: import("../props").RowHeightFunctionNumber;
-    };
 }>> & {
     onChange?: (...args: any[]) => any;
 }, {
     columns: import("../props").Column[];
-    rowHeight: import("../props").RowHeightFunctionNumber;
 }, {}>;
 export default _default;

package/lib/table/plugins/settings.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;

package/lib/table/plugins/use-column-resize.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import { type Ref } from 'vue';
 import { ITableResponse } from '../use-attributes';
 declare const _default: (tableResp: ITableResponse, immediate: boolean, head: Ref<HTMLElement>) => {
     registerResizeEvent: () => void;

package/lib/table/plugins/use-draggable.d.ts

@@ -0,0 +1,17 @@
+import { SetupContext } from 'vue';
+import { TablePropTypes } from '../props';
+import { ITableResponse } from '../use-attributes';
+declare const _default: (props: TablePropTypes, resp: ITableResponse, ctx: SetupContext<any>) => {
+    onDragenter?: undefined;
+    onDragleave?: undefined;
+    onDragstart?: undefined;
+    onDragover?: undefined;
+    onDrop?: undefined;
+} | {
+    onDragenter: (event: DragEvent) => void;
+    onDragleave: (event: DragEvent) => void;
+    onDragstart: (event: DragEvent) => void;
+    onDragover: (event: DragEvent) => void;
+    onDrop: (event: DragEvent) => void;
+};
+export default _default;

package/lib/table/plugins/use-head-cell.d.ts

@@ -0,0 +1,7 @@
+import { SetupContext } from 'vue';
+import { Column } from '../props';
+import { ITableResponse } from '../use-attributes';
+declare const _default: (props: any, context: SetupContext<any>, column: Column, tableResp: ITableResponse) => {
+    getTH: (classList: any, style: any, index: any) => JSX.Element;
+};
+export default _default;

package/lib/table/plugins/use-pagination.d.ts

@@ -11,7 +11,8 @@ declare const _default: (props: TablePropTypes) => {
     pageData: any[];
     indexData: import("vue").ComputedRef<any[]>;
     localPagination: any;
-    resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: any) => void;
+    resolvePageData: (filterFn?: any, sortFn?: any, column?: Column, type?: string, sortScope?: any, multiCol?: any) => void;
+    resolvePageDataBySortList: (multiCol?: any) => void;
     resetStartEndIndex: () => void;
     multiFilter: (filterFnList: ((row: any, index: any, data: any) => void)[]) => void;
     sort: (sourceData: any[], sortFn: any, column: Column, type: string, sortScope: SortScope) => void;

package/lib/table/props.d.ts

@@ -25,7 +25,7 @@ export declare enum TableAlignEnum {
     CENTER = "center",
     NONE = ""
 }
-export declare const columnType: import("vue-types").VueTypeDef<"none" | "selection" | "index" | "expand">;
+export declare const columnType: import("vue-types").VueTypeDef<"none" | "index" | "selection" | "expand">;
 export declare const TableAlign: import("vue-types").VueTypeDef<"" | "right" | "left" | "center">;
 export declare enum FullEnum {
     FULL = "full",
@@ -102,6 +102,7 @@ export type Settings = {
     size?: string;
     sizeList?: SizeItem[];
     showLineHeight?: boolean;
+    trigger: 'manual';
 };
 export type ISettingPropType = Settings | boolean;
 export type Field = {
@@ -146,6 +147,13 @@ export type IColumnExplain = {
     content: LabelFunctionString;
     head: LabelFunctionString | boolean;
 } | boolean;
+export type IDraggableRowOption = {
+    label: (() => string) | string;
+    render?: () => HTMLElement | JSX.Element;
+    fontSize?: number;
+    icon?: JSX.Element;
+    width?: number;
+};
 export type Column = {
     label: LabelFunctionString;
     field?: LabelFunctionString;
@@ -534,5 +542,11 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否支持行拖拽排序
+     */
+    rowDraggable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 };
 export {};

package/lib/table/table.css

@@ -46,7 +46,7 @@
   user-select: none;
 }
 .bk-checkbox ~ .bk-checkbox {
-  margin-left: 30px;
+  margin-left: 24px;
 }
 .bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
@@ -109,6 +109,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;
@@ -135,10 +141,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;
@@ -360,12 +372,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 {
@@ -405,18 +417,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 {
@@ -551,6 +566,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,
 .bk-pagination-list-next-batch,
@@ -721,7 +737,7 @@
 .bk-popover.bk-pop2-content {
   position: absolute;
   display: none;
-  padding: 7px 14px;
+  padding: 12px;
   font-size: 12px;
   color: #fff;
   background: #26323d;
@@ -800,37 +816,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%;
@@ -1012,7 +1001,7 @@
 .bk-table-flex {
   display: flex;
   flex-direction: column;
-  max-height: 100%;
+  max-height: fit-content;
 }
 .bk-table-flex .bk-table-body {
   flex: 1;
@@ -1024,6 +1013,7 @@
 .bk-table .bk-table-body {
   position: relative;
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
   width: 5px;
@@ -1038,7 +1028,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;
@@ -1080,19 +1070,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,
@@ -1119,6 +1109,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,
@@ -1221,22 +1218,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 {
@@ -1249,8 +1246,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 {
@@ -1277,24 +1274,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;
@@ -1316,13 +1334,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 {
@@ -1373,9 +1391,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 {
@@ -1415,5 +1431,5 @@
   margin-left: auto;
 }
 .bk-table .stripe-row {
-  background: #FAFBFD;
+  background: #fafbfd;
 }