bkui-vue 0.0.1-beta.163 → 0.0.1-beta.166

package/lib/select/select.less

@@ -91,13 +91,13 @@
   }
 
   &.large {
-    .bk-select-content {
+    .bk-select-content-wrapper {
       font-size: 14px;
     }
   }
 
   &.is-focus.normal {
-    .bk-select-trigger .bk-select-tag {
+    .bk-select-trigger .bk-select-tag.bk-select-tag--default {
       border-color: @primary-color;
       box-shadow: 0px 0px 3px 0px #a3c5fd;
     }
@@ -125,56 +125,97 @@
   }
 
   &.is-disabled {
-    .bk-select-trigger .bk-input input {
+    .bk-input--text {
       cursor: not-allowed;
       background-color: #fafbfd;
     }
   }
 
-  .bk-select-trigger {
-    position: relative;
+  .bk-input {
+    &.is-focused {
+      .active();
 
-    .bk-tag-input .bk-tag-input-trigger .clear-icon {
-      margin-right: 0;
+      &.is-simplicity {
+        border-color: transparent;
+        border-bottom-color: @primary-color;
+        box-shadow: none;
+      }
     }
+  }
 
-    .bk-input {
-      input {
-        padding-right: 24px;
-        cursor: pointer;
-        background-color: @white-color; 
-      }
+  .bk-input--text {
+    .ellipsis();
+    padding-right: 24px;
+    cursor: pointer;
+    background-color: @white-color; 
+  }
 
-      &.is-focused {
-        .active();
+  .bk-select-trigger {
+    position: relative;
 
-        &.is-simplicity {
-          border-color: transparent;
-          border-bottom-color: @primary-color;
-          box-shadow: none;
-        }
-      }
+    .bk-tag-input .bk-tag-input-trigger .clear-icon {
+      margin-right: 0;
     }
 
     .bk-select-tag {
       .input();
       display: flex;
       width: auto;
-      height: auto;
-      min-height: 32px;
       align-items: center;
-      flex-wrap: wrap;
+
+      &.collapse-tag .bk-select-tag-wrapper {
+        height: 30px;
+      }
+
+      &:not(.collapse-tag) {
+        height: auto;
+        min-height: 32px;
+        flex-wrap: wrap;
+      }
+
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 2px 0;
+        overflow: hidden;
+      }
+
+      &:not(.is-disabled):hover {
+        border-color: #979ba5;
+      }
+
+      &.is-disabled {
+        cursor: not-allowed;
+        background-color: #fafbfd;
+        border-color: #dcdee5;
+
+        input {
+          cursor: not-allowed;
+        }
+
+        .bk-tag {
+          cursor: not-allowed;
+
+          &:hover {
+            background-color: #f0f1f5;
+          }
+
+          .bk-tag-close {
+            cursor: not-allowed;
+          }
+        }
+      }
 
       &-input {
         .input();
+        .ellipsis();
         width: 1%;
         height: 22px;
-        max-width: 190px;
         padding: 0;
-        margin: 4px 5px 4px 0;
-        overflow: hidden;
+        margin: 2px 5px 4px 0;
+        background-color: transparent;
         border: none;
-        outline: none;
         flex-grow: 1;
       }
 
@@ -219,7 +260,7 @@
       border-radius: 2px;
       box-shadow: 0 2px 6px 0 rgba(0,0,0,.10);
 
-      .bk-select-content {
+      .bk-select-content-wrapper {
         .bk-select-empty {
           .flex-center();
           height: 56px;

package/lib/select/select.variable.css

@@ -144,10 +144,10 @@
   font-weight: normal;
   list-style: none;
 }
-.bk-select.large .bk-select-content {
+.bk-select.large .bk-select-content-wrapper {
   font-size: 14px;
 }
-.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag {
+.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
   border-color: var(--primary-color);
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
@@ -167,31 +167,34 @@
 .bk-select.popover-show .bk-select-trigger .angle-up {
   transform: rotate(0);
 }
-.bk-select.is-disabled .bk-select-trigger .bk-input input {
+.bk-select.is-disabled .bk-input--text {
   cursor: not-allowed;
   background-color: #fafbfd;
 }
-.bk-select .bk-select-trigger {
-  position: relative;
-}
-.bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
-  margin-right: 0;
-}
-.bk-select .bk-select-trigger .bk-input input {
-  padding-right: 24px;
-  cursor: pointer;
-  background-color: var(--white-color);
-}
-.bk-select .bk-select-trigger .bk-input.is-focused {
+.bk-select .bk-input.is-focused {
   border-color: var(--primary-color);
   outline: 0;
   box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
 }
-.bk-select .bk-select-trigger .bk-input.is-focused.is-simplicity {
+.bk-select .bk-input.is-focused.is-simplicity {
   border-color: transparent;
   border-bottom-color: var(--primary-color);
   box-shadow: none;
 }
+.bk-select .bk-input--text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 24px;
+  cursor: pointer;
+  background-color: var(--white-color);
+}
+.bk-select .bk-select-trigger {
+  position: relative;
+}
+.bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
+  margin-right: 0;
+}
 .bk-select .bk-select-trigger .bk-select-tag {
   width: 100%;
   height: 32px;
@@ -213,13 +216,45 @@
   white-space: nowrap;
   display: flex;
   width: auto;
+  align-items: center;
+}
+.bk-select .bk-select-trigger .bk-select-tag::placeholder {
+  color: var(--light-gray);
+}
+.bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
+  height: 30px;
+}
+.bk-select .bk-select-trigger .bk-select-tag:not(.collapse-tag) {
   height: auto;
   min-height: 32px;
+  flex-wrap: wrap;
+}
+.bk-select .bk-select-trigger .bk-select-tag-wrapper {
+  display: flex;
   align-items: center;
   flex-wrap: wrap;
+  padding: 2px 0;
+  overflow: hidden;
 }
-.bk-select .bk-select-trigger .bk-select-tag::placeholder {
-  color: var(--light-gray);
+.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
+  border-color: #979ba5;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-disabled {
+  cursor: not-allowed;
+  background-color: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-disabled input {
+  cursor: not-allowed;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-disabled .bk-tag {
+  cursor: not-allowed;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-disabled .bk-tag:hover {
+  background-color: #f0f1f5;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-disabled .bk-tag .bk-tag-close {
+  cursor: not-allowed;
 }
 .bk-select .bk-select-trigger .bk-select-tag-input {
   width: 100%;
@@ -233,19 +268,19 @@
   background-color: var(--white-color);
   border: 1px solid var(--light-gray);
   border-radius: 2px;
+  outline: none;
   box-sizing: border-box;
   transition: all 0.1s;
   resize: none;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 1%;
   height: 22px;
-  max-width: 190px;
   padding: 0;
-  margin: 4px 5px 4px 0;
-  overflow: hidden;
+  margin: 2px 5px 4px 0;
+  background-color: transparent;
   border: none;
-  outline: none;
   flex-grow: 1;
 }
 .bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
@@ -305,14 +340,14 @@
   border-radius: 2px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-empty {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 56px;
   color: #63656e;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-empty .spinner {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty .spinner {
   display: flex;
   width: 14px;
   height: 14px;
@@ -322,14 +357,14 @@
   align-items: center;
   justify-content: center;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-empty span {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-empty span {
   margin-left: 4px;
   line-height: 18px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-dropdown {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown {
   overflow: auto;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-extension {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
   display: flex;
   height: 40px;
   background-color: #fafbfd;
@@ -337,10 +372,10 @@
   border-top: 1px solid #dcdee5;
   border-radius: 0 0 2px 2px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-options {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
   padding: 4px 0;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
   position: relative;
   height: 32px;
   padding: 0 12px;
@@ -353,76 +388,76 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option .bk-select-selected-icon {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-selected-icon {
   position: absolute;
   right: 10px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option-item {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-hover {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
   color: #3a84ff;
   background-color: #f5f7fa;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option:hover {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option:hover {
   color: #63656e;
   background-color: #f5f7fa;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-selected {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-selected {
   color: #3a84ff;
   background-color: #e1ecff;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-disabled {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: transparent;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple {
   padding-right: 32px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple.is-selected {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-selected {
   background-color: #fff;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple.is-hover {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple.is-hover {
   background-color: #f5f7fa;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-option.is-multiple:hover {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-multiple:hover {
   background-color: #f5f7fa;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-options-loading {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-options-loading span {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options-loading span {
   margin-left: 4px;
   line-height: 18px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group-label {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label {
   height: 32px;
   padding: 0 8px;
   line-height: 32px;
   color: #979ba5;
   text-align: left;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group-label.collapsible {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group-label.collapsible {
   cursor: pointer;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group.collapsible .bk-select-option {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.collapsible .bk-select-option {
   padding-left: 40px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group.disabled .default-group-label {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group.disabled .default-group-label {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .default-group-label {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label {
   display: flex;
   user-select: none;
   align-items: center;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .default-group-label-icon {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon {
   display: flex;
   width: 12px;
   height: 12px;
@@ -431,24 +466,24 @@
   align-items: center;
   justify-content: center;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .default-group-label-icon.collapse {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .default-group-label-icon.collapse {
   transform: rotate(-90deg);
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-option-group .bk-select-option {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-option-group .bk-select-option {
   padding-left: 24px;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
   display: flex;
   margin: 4px 8px 0 8px;
   margin-top: 4px;
   border-bottom: 1px solid var(--input-block-hover-color);
   align-items: center;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper .icon-search {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .icon-search {
   margin-left: 2px;
   color: var(--gray-color);
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper .bk-select-search-input {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -471,6 +506,6 @@
   cursor: text;
   border: none;
 }
-.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content .bk-select-search-wrapper .bk-select-search-input::placeholder {
+.bk-popover2.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input::placeholder {
   color: var(--light-gray);
 }

package/lib/select/selectTagInput.d.ts

@@ -23,15 +23,25 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    disabled: import("vue-types/dist/types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     modelValue: import("vue-types/dist/types").VueTypeValidableDef<any>;
+    collapseTags: import("vue-types/dist/types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, {
+    overflowTagIndex: import("vue").Ref<number>;
     value: any;
     inputRef: import("vue").Ref<HTMLElement>;
     handleRemoveTag: (val: string) => void;
     focus: () => void;
     handleInput: (e: any) => void;
     handleKeydown: (e: any) => void;
-    handleGetLabelByValue: (item: ISelected) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "remove" | "enter")[], "update:modelValue" | "remove" | "enter", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     selected: {
         type: PropType<ISelected[]>;
@@ -55,16 +65,28 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    disabled: import("vue-types/dist/types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     modelValue: import("vue-types/dist/types").VueTypeValidableDef<any>;
+    collapseTags: import("vue-types/dist/types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     onEnter?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onRemove?: (...args: any[]) => any;
 }, {
+    disabled: boolean;
     placeholder: string;
     selected: ISelected[];
     tagTheme: string;
     filterable: boolean;
     allowCreate: boolean;
+    collapseTags: boolean;
 }>;
 export default _default;

package/lib/select/type.d.ts

@@ -18,7 +18,6 @@ export interface ISelectContext {
     registerGroup(key: any, option: GroupInstanceType): any;
     unregisterGroup(key: any): any;
     handleOptionSelected(option: OptionInstanceType): void;
-    handleGetLabelByValue(item: ISelected): string;
 }
 export interface IOptionGroupContext {
     disabled: boolean;

package/lib/table/index.d.ts

@@ -10,10 +10,10 @@ declare const BkTable: {
             border: string[];
             columns: import("./props").Column[];
             headHeight: number;
-            scrollLoading: boolean | {
+            pagination: boolean | {
                 [key: string]: any;
             };
-            pagination: boolean | {
+            scrollLoading: boolean | {
                 [key: string]: any;
             };
             columnPick: string;
@@ -129,7 +129,7 @@ declare const BkTable: {
             onPageValueChange?: (...args: any[]) => any;
             onSettingChange?: (...args: any[]) => any;
             onScrollBottom?: (...args: any[]) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "height" | "maxHeight" | "minHeight" | "border" | "columns" | "headHeight" | "scrollLoading" | "pagination" | "columnPick" | "rowHeight" | "showHead" | "virtualEnabled" | "remotePagination" | "emptyText" | "settings" | "rowClass" | "rowStyle" | "cellStyle" | "cellClass" | "reserveExpand" | "rowKey">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "height" | "maxHeight" | "minHeight" | "border" | "columns" | "headHeight" | "pagination" | "scrollLoading" | "columnPick" | "rowHeight" | "showHead" | "virtualEnabled" | "remotePagination" | "emptyText" | "settings" | "rowClass" | "rowStyle" | "cellStyle" | "cellClass" | "reserveExpand" | "rowKey">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -262,10 +262,10 @@ declare const BkTable: {
             border: string[];
             columns: import("./props").Column[];
             headHeight: number;
-            scrollLoading: boolean | {
+            pagination: boolean | {
                 [key: string]: any;
             };
-            pagination: boolean | {
+            scrollLoading: boolean | {
                 [key: string]: any;
             };
             columnPick: string;
@@ -524,10 +524,10 @@ declare const BkTable: {
     border: string[];
     columns: import("./props").Column[];
     headHeight: number;
-    scrollLoading: boolean | {
+    pagination: boolean | {
         [key: string]: any;
     };
-    pagination: boolean | {
+    scrollLoading: boolean | {
         [key: string]: any;
     };
     columnPick: string;