bkui-vue 0.0.2-beta.13 → 0.0.2-beta.131

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;
@@ -300,6 +316,11 @@
   border-color: #5594fa;
   color: white;
 }
+.bk-button.bk-button-primary.is-outline:active {
+  background-color: #2c77f4;
+  border-color: #2c77f4;
+  color: white;
+}
 .bk-button.bk-button-primary.is-text {
   color: #3a84ff;
   background-color: transparent;
@@ -346,6 +367,11 @@
   border-color: #ffb848;
   color: white;
 }
+.bk-button.bk-button-warning.is-outline:active {
+  background-color: #eb9000;
+  border-color: #eb9000;
+  color: white;
+}
 .bk-button.bk-button-warning.is-text {
   color: #ff9c01;
   background-color: transparent;
@@ -392,6 +418,11 @@
   border-color: #45e35f;
   color: white;
 }
+.bk-button.bk-button-success.is-outline:active {
+  background-color: #1ab943;
+  border-color: #1ab943;
+  color: white;
+}
 .bk-button.bk-button-success.is-text {
   color: #2dcb56;
   background-color: transparent;
@@ -438,6 +469,11 @@
   border-color: #ff5656;
   color: white;
 }
+.bk-button.bk-button-danger.is-outline:active {
+  background-color: #db2626;
+  border-color: #db2626;
+  color: white;
+}
 .bk-button.bk-button-danger.is-text {
   color: #ea3636;
   background-color: transparent;
@@ -462,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 {
@@ -507,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 {
@@ -653,6 +692,7 @@
 }
 .bk-pagination-list {
   display: flex;
+  margin-right: 8px;
 }
 .bk-pagination-list-pre-batch,
 .bk-pagination-list-next-batch,
@@ -823,7 +863,7 @@
 .bk-popover.bk-pop2-content {
   position: absolute;
   display: none;
-  padding: 7px 14px;
+  padding: 12px;
   font-size: 12px;
   color: #fff;
   background: #26323d;
@@ -832,6 +872,7 @@
 }
 .bk-popover.bk-pop2-content .bk-pop2-arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: #333;
@@ -854,6 +895,9 @@
   cursor: pointer;
   align-items: center;
 }
+.bk-table-head-action:last-of-type {
+  margin-right: -10px;
+}
 .bk-table-head-action.active {
   color: #3a84ff;
 }
@@ -898,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%;
@@ -1107,15 +1124,25 @@
   height: auto;
   overflow: hidden;
 }
+.bk-table-flex {
+  display: flex;
+  flex-direction: column;
+  max-height: fit-content;
+}
+.bk-table-flex .bk-table-body {
+  flex: 1;
+  overflow: auto;
+}
 .bk-table.has-scroll-y .bk-table-head {
   padding-right: 4px;
 }
 .bk-table .bk-table-body {
   position: relative;
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
   height: 6px;
 }
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1127,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;
@@ -1147,11 +1174,12 @@
 .bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
+  transform: translateZ(0);
 }
 .bk-table .bk-table-head::-webkit-scrollbar,
 .bk-table .bk-table-body::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
+  width: 5px;
+  height: 5px;
 }
 .bk-table .bk-table-head::-webkit-scrollbar-thumb,
 .bk-table .bk-table-body::-webkit-scrollbar-thumb {
@@ -1168,16 +1196,17 @@
 }
 .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;
 }
@@ -1188,7 +1217,6 @@
   height: var(--row-height);
   min-width: 30px;
   clear: both;
-  background-color: #fff;
 }
 .bk-table .bk-table-head table th.expand-row .expand-btn-action,
 .bk-table .bk-table-body table th.expand-row .expand-btn-action,
@@ -1213,6 +1241,13 @@
 .bk-table .bk-table-body table td .cell.has-sort {
   cursor: pointer;
 }
+.bk-table .bk-table-head table th .cell.explain,
+.bk-table .bk-table-body table th .cell.explain,
+.bk-table .bk-table-head table td .cell.explain,
+.bk-table .bk-table-body table td .cell.explain {
+  text-decoration-style: dashed;
+  text-decoration-line: underline;
+}
 .bk-table .bk-table-head table th .cell .head-text,
 .bk-table .bk-table-body table th .cell .head-text,
 .bk-table .bk-table-head table td .cell .head-text,
@@ -1302,7 +1337,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);
+}
+.bk-table .bk-table-head table thead th.col-resize-hover::after,
+.bk-table .bk-table-body table thead th.col-resize-hover::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  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 {
@@ -1315,12 +1365,17 @@
 .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 {
+  cursor: pointer;
   background: #f0f1f5;
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--scroll-left));
 }
+.bk-table .bk-table-head table tbody tr td,
+.bk-table .bk-table-body table tbody tr td {
+  background-color: #fff;
+}
 .bk-table .bk-table-head table tbody tr td.empty-cell,
 .bk-table .bk-table-body table tbody tr td.empty-cell {
   padding-bottom: 30px;
@@ -1344,6 +1399,21 @@
 }
 .bk-table .bk-table-head {
   position: relative;
+  z-index: 2;
+  scrollbar-gutter: stable;
+  overflow: hidden;
+}
+.bk-table .bk-table-head .col-resize-drag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 6px;
+  background-color: #3785ff;
+  transform: translateX(-50%);
+}
+.bk-table .bk-table-head thead {
   transform: translateX(var(--scroll-head-left));
 }
 .bk-table .bk-table-head .table-head-settings {
@@ -1366,15 +1436,14 @@
 }
 .bk-table .bk-table-head .table-head-settings > span {
   display: flex;
-  width: 1rem;
-  height: 1rem;
-}
-.bk-table .bk-table-head .bk-table-fixed .column_fixed.column_fixed_right.shadow {
-  box-shadow: -2px 2px 10px 0px rgba(0, 0, 0, 0.12);
+  width: 1em;
+  height: 1em;
 }
 .bk-table .bk-table-footer {
+  display: flex;
+  width: 100%;
   height: var(--footer-height);
-  line-height: var(--footer-height);
+  align-items: center;
 }
 .bk-table .bk-table-footer.is-hidden {
   display: none;
@@ -1423,13 +1492,13 @@
   position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
+  bottom: var(--footer-height);
   left: 0;
   pointer-events: none;
 }
 .bk-table .bk-table-fixed .column_fixed {
   position: absolute;
-  transform: translate(var(--var-scroll-left), var(--var-scroll-top));
+  z-index: 2;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_left {
   top: 0;
@@ -1441,7 +1510,6 @@
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right {
   top: 0;
   right: 0;
-  z-index: 1;
 }
 .bk-table .bk-table-fixed .column_fixed.column_fixed_right.shadow {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
@@ -1465,5 +1533,5 @@
   margin-left: auto;
 }
 .bk-table .stripe-row {
-  background: #FAFBFD;
+  background: #fafbfd;
 }

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

@@ -0,0 +1,59 @@
+import { IEmptyObject } from './const';
+import { Column, Field, Settings, SortScope, TablePropTypes } from './props';
+export type ITableFormatData = {
+    data: any[];
+    dataSchema: WeakMap<object, any>;
+    columnSchema: WeakMap<object, any>;
+    columns: Column[];
+    settings: {
+        size: string;
+        height: number;
+        fields: Field[];
+        checked: string[];
+    };
+    layout: {
+        bottom: number;
+        hasScrollY: boolean;
+        translateX: number;
+        translateY: number;
+    };
+};
+export type ITableResponse = {
+    formatColumns: (columns: Column[]) => void;
+    formatDataSchema: (data: any[]) => void;
+    setRowSelection: (row: any, isSelected: boolean) => void;
+    setRowExpand: (row: any, isExpand: boolean) => void;
+    setRowIndex: (row: any, index: number) => void;
+    setColumnAttribute: (col: Column, attrName: string, attrValue: ((...args: any[]) => boolean | number | void | string) | string | boolean | number) => void;
+    setColumnAttributeBySettings: (settings: Settings, checkedVal?: string[]) => void;
+    setAllColumnAttribute: (attrName: string, attrValue: ((...args: any[]) => boolean | number | void | string) | string | boolean | number) => void;
+    getColumnAttribute: (col: Column, attributeName: string) => string | boolean | Record<string, any>;
+    getColumnId: (col: Column) => string;
+    getColumnOrderWidth: (column: Column, orders?: string[]) => number;
+    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;
+    setAllRowExpand: (value?: boolean) => void;
+    clearSelection: () => void;
+    clearColumnSort: (reset?: boolean) => void;
+    setColumnSortActive: (column: Column, active: boolean) => void;
+    getRowAttribute: (row: any | IEmptyObject, attrName: string) => any;
+    getRowSelection: () => any[];
+    resolveColumnWidth: (root: HTMLElement, autoWidth?: any, offsetWidth?: any) => void;
+    filter: () => void;
+    sortData: (column: Column) => void;
+    isCheckedAll: () => boolean;
+    hasCheckedRow: () => boolean;
+    setRowSelectionAll: (val: boolean) => void;
+    setRowIndeterminate: () => void;
+    updateSettings: (settings?: Settings, rowHeight?: number) => void;
+    pageData: any[];
+    localPagination: any;
+    formatData: ITableFormatData;
+};
+declare const _default: (props: TablePropTypes) => ITableResponse;
+export default _default;