bkui-vue 0.0.1-beta.16 → 0.0.1-beta.19

package/dist/style.css

@@ -1634,6 +1634,7 @@ optgroup {
 }
 .bk-popover-content .arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: inherit;
@@ -1956,6 +1957,7 @@ optgroup {
   cursor: pointer;
 }
 .bk-select .bk-select-trigger .bk-select-input {
+  width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
   font-size: 12px;
@@ -2077,7 +2079,7 @@ optgroup {
 .bk-select .bk-select-option {
   position: relative;
   height: 32px;
-  padding: 0 20px 0 12px;
+  padding: 0 12px;
   line-height: 32px;
   color: #63656e;
   text-align: left;
@@ -2483,45 +2485,82 @@ optgroup {
 }
 .bk-table {
   overflow: auto;
+  border-top: 1px solid #dcdee5;
+  border-bottom: 1px solid #dcdee5;
 }
+.bk-table .bk-table-head,
 .bk-table .bk-table-body {
   background: white;
 }
+.bk-table .bk-table-head table,
 .bk-table .bk-table-body table {
   width: 100%;
   border-collapse: collapse;
 }
-.bk-table .bk-table-body table .cell {
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
   height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
+  color: #575961;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-table .bk-table-body table th,
-.bk-table .bk-table-body table td {
-  min-width: 80px;
-  border-bottom: 1px solid #dfe0e5;
-}
+.bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: #fff;
-  transform: translateY(var(--translate-y));
+  color: #313238;
+  background-color: #fafbfd;
 }
-.bk-table .bk-table-body table thead th.active {
+.bk-table .bk-table-head table thead th.active,
+.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;
 }
+.bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
   background: #f5f7fa;
 }
+.bk-table.bordered-row .cell {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid #dcdee5;
+  border-left: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th .cell,
+.bk-table.bordered-col td .cell {
+  border-right: 1px solid #dcdee5;
+}
+.bk-table.bordered-col th:last-child .cell,
+.bk-table.bordered-col td:last-child .cell {
+  border-right: none;
+}
+.bk-table.bordered-none th .cell,
+.bk-table.bordered-none td .cell {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
 .bk-table .bk-table-fixed {
   width: 100%;
 }
 .bk-table colgroup col {
-  background: #fff;
+  background: white;
 }
 .bk-table colgroup col.active {
   position: relative;
@@ -2685,6 +2724,9 @@ optgroup {
 .bk-steps .bk-step.done .bk-step-description {
   color: #63656e;
 }
+.bk-steps .bk-step.done .bk-steps-icon {
+  font-size: 22px;
+}
 .bk-steps .bk-step.current .bk-step-number,
 .bk-steps .bk-step.current .bk-step-icon,
 .bk-steps .bk-step.current .bk-step-text {
@@ -4137,9 +4179,8 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
 }
 .bk-process .bk-process-icon-done {
   display: inline-block;
-  height: 20px;
-  font-size: 21px;
-  line-height: 20px;
+  font-size: 22px;
+  line-height: 18px;
 }
 .bk-process .bk-icon.icon-loading {
   display: inline-block;
@@ -4283,6 +4324,420 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em {
   background-color: #dcdee5;
   border-radius: 6px;
 }
+.bk-pagination {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  letter-spacing: normal;
+  color: #63656e;
+  user-select: none;
+}
+.bk-pagination.is-disabled {
+  cursor: not-allowed;
+}
+.bk-pagination.is-align-left {
+  justify-content: flex-start;
+}
+.bk-pagination.is-align-center {
+  justify-content: center;
+}
+.bk-pagination.is-align-right {
+  justify-content: flex-end;
+}
+.bk-pagination > * {
+  margin: 0 6px;
+}
+.bk-pagination > .is-first {
+  margin-left: 0;
+}
+.bk-pagination > .is-last {
+  margin-right: 0;
+}
+.bk-pagination-total {
+  display: flex;
+  user-select: none;
+}
+.bk-pagination-total-num {
+  padding: 0 2px;
+  color: #3f4046;
+}
+.bk-pagination-list {
+  display: flex;
+}
+.bk-pagination-list-pre,
+.bk-pagination-list-next,
+.bk-pagination-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  min-width: 32px;
+  padding: 0 4px;
+  margin-right: 2px;
+  margin-left: 2px;
+  color: #63656e;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  user-select: none;
+}
+.bk-pagination-list-pre:hover,
+.bk-pagination-list-next:hover,
+.bk-pagination-list-item:hover,
+.bk-pagination-list-pre.is-active,
+.bk-pagination-list-next.is-active,
+.bk-pagination-list-item.is-active {
+  color: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-pagination-list-pre.is-disabled,
+.bk-pagination-list-next.is-disabled,
+.bk-pagination-list-item.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-pagination-list-pre-batch,
+.bk-pagination-list-next-batch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+.bk-pagination-list-pre-batch:hover,
+.bk-pagination-list-next-batch:hover {
+  color: #3a84ff;
+}
+.bk-pagination-list-pre,
+.bk-pagination-list-next {
+  font-size: 14px;
+}
+.bk-pagination-list-item {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.bk-pagination-limit {
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+.bk-pagination-limit-select {
+  width: 60px;
+  margin: 0 4px;
+}
+.bk-pagination-small-list {
+  display: flex;
+}
+.bk-pagination-small-list .bk-pagination-picker {
+  display: flex;
+  height: 24px;
+  cursor: pointer;
+  background-color: #f0f1f5;
+  border: 1px solid #f0f1f5;
+  border-radius: 2px;
+  align-items: center;
+}
+.bk-pagination-small-list .bk-pagination-picker:hover {
+  background-color: #e1ecff;
+  border-color: #e1ecff;
+}
+.bk-pagination-small-list .bk-pagination-picker.is-focused {
+  background-color: #fff;
+  border-color: #3a84ff;
+  box-shadow: 0px 0px 4px rgba(58, 132, 255, 0.4);
+}
+.bk-pagination-editor {
+  height: 16px;
+  min-width: 14px;
+  padding-right: 4px;
+  padding-left: 8px;
+  line-height: 16px;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  border-radius: 2px;
+  outline: none;
+  transition: all 0.15s;
+}
+.bk-pagination-small-list-total {
+  padding-right: 8px;
+  padding-left: 4px;
+}
+.bk-pagination-btn-pre,
+.bk-pagination-btn-next {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  cursor: pointer;
+}
+.bk-pagination-btn-pre:hover,
+.bk-pagination-btn-next:hover {
+  color: #3a84ff;
+}
+.bk-pagination-btn-pre.is-disabled,
+.bk-pagination-btn-next.is-disabled {
+  color: #dcdee5;
+  cursor: not-allowed;
+}
+.bk-pagination-picker-list {
+  max-height: 216px;
+  padding: 7px 0;
+  margin: -7px -14px;
+  overflow: auto;
+}
+.bk-pagination-picker-list .item {
+  height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  cursor: pointer;
+}
+.bk-pagination-picker-list .item:hover,
+.bk-pagination-picker-list .item.is-actived {
+  color: #3a84ff;
+  background: #f4f6fa;
+}
+* {
+  box-sizing: border-box;
+}
+.bk-timeline {
+  padding: 0;
+  margin: 16px 0 0;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-align: left;
+  list-style: none;
+}
+.bk-timeline .bk-timeline-dot {
+  position: relative;
+  padding-bottom: 24px;
+  padding-left: 16px;
+  /* spacing 1px */
+  margin-top: 13px;
+  font-size: 0;
+  border-left: 1px solid #d8d8d8;
+}
+.bk-timeline .bk-timeline-dot::before {
+  position: absolute;
+  top: calc((11px + 1px) * -1);
+  left: -6px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  background: #fff;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
+  content: '';
+  box-sizing: border-box;
+}
+.bk-timeline .bk-timeline-dot:last-child {
+  padding-bottom: 0;
+  /* 保留border使用间距保持一致 */
+  border-left: 1px solid transparent;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-title {
+  display: inline-block;
+  padding-bottom: 10px;
+  margin-top: -3px;
+  font-size: 14px;
+  color: #63656e;
+  cursor: pointer;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-content {
+  max-width: 300px;
+  font-size: 14px;
+  color: #666;
+  word-break: break-all;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon {
+  position: absolute;
+  top: calc((15px + 1px) * -1);
+  left: -8px;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  background: #fff;
+  border: 2px solid #d8d8d8;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner {
+  display: inline-block;
+  transform: scale(1) translate(-0.5px, -4px);
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-icon .bk-timeline-icon-inner > :first-child {
+  font-size: 12px;
+}
+.bk-timeline .bk-timeline-dot .bk-timeline-section {
+  position: relative;
+  top: calc((11px + 2px) * -1);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large {
+  margin-top: calc(15px + 2px);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large::before {
+  top: calc((15px + 1px) * -1);
+  left: -8px;
+  width: 15px;
+  height: 15px;
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-large > .bk-timeline-section {
+  top: calc((15px + 1px) * -1);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon {
+  margin-top: calc(15px + 2px);
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon::before {
+  display: none;
+}
+.bk-timeline .bk-timeline-dot.bk-timeline-item-custom-icon > .bk-timeline-section {
+  top: calc((15px + 1px) * -1);
+}
+.bk-timeline .bk-timeline-dot:first-child {
+  margin-top: 0;
+}
+.bk-timeline .bk-timeline-primary {
+  border-left: 1px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-primary::before,
+.bk-timeline .bk-timeline-primary .bk-timeline-icon {
+  color: #3a84ff;
+  border: 2px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-primary.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-primary.bk-timeline-filled .bk-timeline-icon {
+  background: #3a84ff;
+}
+.bk-timeline .bk-timeline-warning {
+  border-left: 1px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-warning::before,
+.bk-timeline .bk-timeline-warning .bk-timeline-icon {
+  color: #ff9c01;
+  border: 2px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-warning.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-warning.bk-timeline-filled .bk-timeline-icon {
+  background: #ff9c01;
+}
+.bk-timeline .bk-timeline-success {
+  border-left: 1px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-success::before,
+.bk-timeline .bk-timeline-success .bk-timeline-icon {
+  color: #2dcb56;
+  border: 2px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-success.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-success.bk-timeline-filled .bk-timeline-icon {
+  background: #2dcb56;
+}
+.bk-timeline .bk-timeline-danger {
+  border-left: 1px solid #ea3636;
+}
+.bk-timeline .bk-timeline-danger::before,
+.bk-timeline .bk-timeline-danger .bk-timeline-icon {
+  color: #ea3636;
+  border: 2px solid #ea3636;
+}
+.bk-timeline .bk-timeline-danger.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-danger.bk-timeline-filled .bk-timeline-icon {
+  background: #ea3636;
+}
+.bk-timeline .bk-timeline-blue::before,
+.bk-timeline .bk-timeline-blue .bk-timeline-icon {
+  color: #3a84ff;
+  border: 2px solid #3a84ff;
+}
+.bk-timeline .bk-timeline-blue.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-blue.bk-timeline-filled .bk-timeline-icon {
+  background: #3a84ff;
+}
+.bk-timeline .bk-timeline-red::before,
+.bk-timeline .bk-timeline-red .bk-timeline-icon {
+  color: #ea3636;
+  border: 2px solid #ea3636;
+}
+.bk-timeline .bk-timeline-red.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-red.bk-timeline-filled .bk-timeline-icon {
+  background: #ea3636;
+}
+.bk-timeline .bk-timeline-green::before,
+.bk-timeline .bk-timeline-green .bk-timeline-icon {
+  color: #2dcb56;
+  border: 2px solid #2dcb56;
+}
+.bk-timeline .bk-timeline-green.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-green.bk-timeline-filled .bk-timeline-icon {
+  background: #2dcb56;
+}
+.bk-timeline .bk-timeline-yellow::before,
+.bk-timeline .bk-timeline-yellow .bk-timeline-icon {
+  color: #ff9c01;
+  border: 2px solid #ff9c01;
+}
+.bk-timeline .bk-timeline-yellow.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-yellow.bk-timeline-filled .bk-timeline-icon {
+  background: #ff9c01;
+}
+.bk-timeline .bk-timeline-gray::before,
+.bk-timeline .bk-timeline-gray .bk-timeline-icon {
+  color: #63656e;
+  border: 2px solid #63656e;
+}
+.bk-timeline .bk-timeline-gray.bk-timeline-filled::before,
+.bk-timeline .bk-timeline-gray.bk-timeline-filled .bk-timeline-icon {
+  background: #63656e;
+}
+.bk-timeline-dashed .bk-step .bk-step-title::after,
+.bk-timeline-dashed .bk-step .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #c4c6cc 50%, transparent 0%);
+  background-position: bottom;
+  background-repeat: repeat-x;
+  background-size: 6px 1px;
+}
+.bk-timeline-solid .bk-step .bk-step-title::after,
+.bk-timeline-solid .bk-step .bk-step-indicator::after {
+  background-color: #c4c6cc;
+}
+.bk-timeline-vertical {
+  height: 100%;
+  flex-direction: column;
+}
+.bk-timeline-vertical .bk-step {
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+.bk-timeline-vertical .bk-step .bk-step-title::after,
+.bk-timeline-vertical .bk-step .bk-step-indicator::after {
+  display: none;
+}
+.bk-timeline-vertical .bk-step::after {
+  position: absolute;
+  top: 32px;
+  left: 12px;
+  width: 1px;
+  height: 100%;
+  background-image: linear-gradient(#c4c6cc 50%, transparent 0%);
+  background-position: right;
+  background-repeat: repeat-y;
+  background-size: 1px 6px;
+  content: '';
+}
+.bk-timeline-vertical .bk-step .bk-step-title {
+  display: flex;
+  height: 100%;
+  margin-top: 0;
+  text-align: left;
+  align-items: center;
+}
 .bk-popper {
   display: none;
   padding: 7px 14px;

package/lib/alert/alert.d.ts

@@ -26,21 +26,30 @@ declare const _default: import("vue").DefineComponent<{
         visible: boolean;
     };
     handleClose: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    theme?: unknown;
-    size?: unknown;
-    title?: unknown;
-    closable?: unknown;
-    closeText?: unknown;
-    showIcon?: unknown;
-} & {
-    title: string;
-    theme: string;
-    size: string;
-    closable: boolean;
-    closeText: string;
-    showIcon: boolean;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    size: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
     onClose?: (...args: any[]) => any;
 }, {
     title: string;

package/lib/alert/alert.variable.css

@@ -1,5 +1,6 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
@@ -83,6 +84,12 @@
   --date-picker-disabled-bg: #fafbfd;
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
 }
 .bk-alert {
   position: relative;