bkui-vue 0.0.1-beta.25 → 0.0.1-beta.28

package/lib/select/select.d.ts

@@ -1,4 +1,4 @@
-import { OnFirstUpdateFnType } from '@bkui-vue/shared';
+import { OptionInstanceType } from './type';
 declare const _default: import("vue").DefineComponent<{
     modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {
@@ -6,11 +6,6 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-    placeholder: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -42,34 +37,61 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    showSelectAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    popoverMinWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showOnInit: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    multipleMode: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    tagTheme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    behavior: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    collapseTags: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    noDataText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    noMatchText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    loadingText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    selectAllText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }, {
-    selectedLabel: import("vue").ComputedRef<string>;
-    selectClass: import("vue").ComputedRef<{
-        [x: string]: boolean;
-        'bk-select': boolean;
-        'popover-show': boolean;
-        'is-disabled': boolean;
-        'is-focus': boolean;
-    }>;
-    isPopoverShow: import("vue").Ref<boolean>;
-    isHover: import("vue").Ref<boolean>;
-    popperWidth: import("vue").Ref<string | number>;
-    selectTriggerRef: import("vue").Ref<HTMLElement>;
-    inputRef: import("vue").Ref<HTMLElement>;
-    searchKey: import("vue").Ref<string>;
-    searchLoading: import("vue").Ref<boolean>;
-    isEmpty: import("vue").ComputedRef<boolean>;
-    isFocus: import("vue").Ref<boolean>;
-    setHover: () => void;
-    cancelHover: () => void;
-    handleFocus: () => void;
-    handleInput: (e: any) => void;
-    toggleMenu: () => void;
-    handleClear: (e: Event) => void;
-    onPopoverFirstUpdate: OnFirstUpdateFnType;
-    hidePopover: () => void;
-    showPopover: () => void;
-    currentPlaceholder: import("vue").Ref<string>;
     options: import("vue").Ref<Set<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -146,6 +168,34 @@ declare const _default: import("vue").DefineComponent<{
         handleOptionClick: () => void;
         visible: import("vue").Ref<boolean>;
     }> & {} & {} & import("vue").ComponentCustomProperties>>;
+    isDisabled: import("vue").ComputedRef<boolean>;
+    selectedLabel: import("vue").ComputedRef<(string | number)[]>;
+    isPopoverShow: import("vue").Ref<boolean>;
+    isHover: import("vue").Ref<boolean>;
+    popperWidth: import("vue").Ref<string | number>;
+    popoverRef: import("vue").Ref<any>;
+    inputRef: import("vue").Ref<HTMLElement>;
+    searchLoading: import("vue").Ref<boolean>;
+    isOptionsEmpty: import("vue").ComputedRef<boolean>;
+    isSearchEmpty: import("vue").ComputedRef<boolean>;
+    isFocus: import("vue").Ref<boolean>;
+    isShowSelectContent: import("vue").ComputedRef<boolean>;
+    curContentText: import("vue").ComputedRef<string>;
+    isGroup: import("vue").ComputedRef<boolean>;
+    searchKey: import("vue").Ref<string>;
+    setHover: () => void;
+    cancelHover: () => void;
+    handleFocus: () => void;
+    handleInput: (e: any) => void;
+    handleTogglePopover: () => void;
+    handleClear: (e: Event) => void;
+    onPopoverFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+    hidePopover: () => void;
+    showPopover: () => void;
+    handleToggleAll: () => void;
+    handleOptionSelected: (option: OptionInstanceType) => void;
+    handleClickOutside: () => void;
+    currentPlaceholder: import("vue").Ref<string>;
     selectedOptions: import("vue").Ref<Set<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -223,18 +273,13 @@ declare const _default: import("vue").DefineComponent<{
         visible: import("vue").Ref<boolean>;
     }> & {} & {} & import("vue").ComponentCustomProperties>>;
     currentSelectedLabel: import("vue").Ref<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "toggle" | "update:modelValue")[], "change" | "toggle" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "toggle" | "clear" | "update:modelValue")[], "change" | "toggle" | "clear" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    placeholder: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
     disabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -266,9 +311,64 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
+    showSelectAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    popoverMinWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showOnInit: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    multipleMode: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    tagTheme: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    behavior: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    collapseTags: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    noDataText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    noMatchText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    loadingText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    selectAllText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
+    onClear?: (...args: any[]) => any;
     onToggle?: (...args: any[]) => any;
 }, {
     placeholder: string;
@@ -276,9 +376,20 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     disabled: boolean;
     loading: boolean;
+    showOnInit: boolean;
     clearable: boolean;
+    behavior: string;
+    popoverMinWidth: number;
     filterable: boolean;
     remoteMethod: (...args: any[]) => any;
     scrollHeight: number;
+    showSelectAll: boolean;
+    multipleMode: string;
+    tagTheme: string;
+    collapseTags: boolean;
+    noDataText: string;
+    noMatchText: string;
+    loadingText: string;
+    selectAllText: string;
 }>;
 export default _default;

package/lib/select/select.less

@@ -1,19 +1,7 @@
 @import '../styles/themes/themes.less';
+@import '../styles/mixins/animate.less';
 
 .@{bk-prefix}-select {
-  display: inline-block;
-
-  ul {
-    padding: 0;
-    margin: 0;
-    font-weight: normal;
-    list-style: none;
-  }
-
-  .bk-popover-content {
-    padding: 0;
-  }
-
   .bk-select-icon(@fontSize: 20px, @color: #979ba5) {
     display: flex;
     align-items: center;
@@ -24,16 +12,13 @@
     color: @color;
   }
 
-  .input-right-icon() {
+  .fix-icon() {
     position: absolute;
-    top: 6px;
-    right: 4px;
-  }
-
-  .input-left-icon() {
-    position: absolute;
-    top: 6px;
-    left: 4px;
+    top: 0;
+    display: inline-flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
   }
 
   .ellipsis() {
@@ -42,13 +27,97 @@
     white-space: nowrap;
   }
 
-  &.is-focus {
+  .mr(@marginRight) {
+    margin-right: @marginRight;
+  }
+
+  .ml(@marginLeft) {
+    margin-left: @marginLeft;
+  }
+
+  .mr5 {
+    .mr(5px)
+  }
+
+  .ml5 {
+    .ml(5px)
+  }
+
+  .input {
+    width: 100%;
+    height: 32px;
+    padding: 0 28px 0 10px;
+    line-height: normal;
+    color: @default-color;
+    text-align: left;
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: @white-color;
+    border: 1px solid @light-gray;
+    border-radius: 2px;
+    outline: none;
+    box-sizing: border-box;
+    transition: all .1s;
+    resize: none;
+    .ellipsis();
+
+    &::placeholder {
+      color: @light-gray;
+    }
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+    list-style: none;
+  }
+
+  .bk-popover-reference {
+    display: unset;
+  }
+
+  .bk-popover-content {
+    padding: 0;
+  }
+
+  &.small {
+    .bk-select-trigger .bk-select-input {
+      height: 24px;
+    }
+  }
+
+  &.large {
+    .bk-select-trigger .bk-select-input {
+      height: 36px;
+      font-size: 14px;
+    }
+
+    .bk-select-content {
+      font-size: 14px;
+    }
+  }
+
+  &.simplicity {
+    .bk-select-trigger .bk-select-input {
+      border: none;
+      border-bottom: 1px solid @light-gray;
+    }
+  }
+
+  &.is-focus.normal {
     .bk-select-trigger .bk-select-input {
       border-color: @primary-color;
       box-shadow: 0px 0px 3px 0px #a3c5fd; 
     }
   }
 
+  &.is-focus.simplicity {
+    .bk-select-trigger .bk-select-input {
+      border-color: @primary-color;
+    }
+  }
+
   &.is-disabled {
     .bk-select-trigger .bk-select-input {
       cursor: not-allowed;
@@ -58,6 +127,15 @@
     }
   }
 
+  &.is-filterable {
+    .bk-select-trigger {
+      .bk-select-input,
+      .bk-select-tag-input {
+        cursor: text;
+      }
+    }
+  }
+
   &.popover-show {
     .bk-select-trigger .angle-up {
       transform: rotate(0);
@@ -69,44 +147,47 @@
     cursor: pointer;
 
     .bk-select-input {
-      width: 100%;
-      height: 32px;
-      padding: 0 28px 0 10px;
-      font-size: 12px;
-      line-height: normal;
-      color: @default-color;
-      text-align: left;
-      vertical-align: middle;
-      cursor: pointer;
-      background-color: @white-color;
-      border: 1px solid @light-gray;
-      border-radius: 2px;
-      outline: none;
-      box-sizing: border-box;
-      transition: all .1s;
-      resize: none;
-  
-      &::placeholder {
-        color: @light-gray;
+      .input()
+    }
+
+    .bk-select-tag {
+      .input();
+      display: flex;
+      width: auto;
+      height: auto;
+      min-height: 32px;
+      align-items: center;
+      flex-wrap: wrap;
+
+      &-input {
+        .input();
+        width: auto;
+        height: auto;
+        padding: 0;
+        border: none;
+        outline: none;
       }
     }
 
     .bk-select-prefix {
-      .input-left-icon();
+      .fix-icon();
+      left: 4px;
       font-size: 14px;
     }
 
     .angle-up {
+      right: 4px;
       transform: rotate(180deg);
       transition: transform .3s cubic-bezier(.4, 0, .2, 1);
       .bk-select-icon();
-      .input-right-icon();
+      .fix-icon();
     }
 
     .clear-icon {
+      right: 4px;
       transition: all .1s;
       .bk-select-icon(14px, #c4c6cc);
-      .input-right-icon();
+      .fix-icon();
 
       &:hover {
         color: #979ba5;
@@ -114,8 +195,9 @@
     }
 
     .spinner {
-      .input-right-icon();
-      .bk-select-icon(16px, #3A84FF);
+      position: absolute;
+      top: 8px;
+      right: 6px;
     }
   }
 
@@ -140,32 +222,6 @@
 
   .bk-select-dropdown {
     overflow: auto;
-
-    .bk-select-search {
-      position: relative;
-      padding: 0 5px;
-
-      &-icon {
-        position: absolute;
-        top: 50%;
-        left: 8px;
-        font-size: 16px;
-        color: #979ba5;
-        transform: translateY(-50%);
-        transform: translateY(-50%);
-      }
-
-      &-input {
-        width: 100%;
-        height: 32px;
-        padding: 0 10px 0 26px;
-        font-size: 12px;
-        cursor: text;
-        border: none;
-        border-bottom: 1px solid #dcdee5;
-        outline: 0;
-      }
-    }
   }
 
   .bk-select-extension {
@@ -202,7 +258,6 @@
       &.is-multiple::after {
         position: absolute;
         right: 12px;
-        font-size: 12px;
         font-weight: 700;
         content: '\2713';
       }
@@ -235,6 +290,13 @@
       }
     }
 
+    &.disabled {
+      .default-group-label {
+        color: #c4c6cc;
+        cursor: not-allowed;
+      }
+    }
+
     .default-group-label {
       display: flex;
       user-select: none;
@@ -245,7 +307,6 @@
         width: 12px;
         height: 12px;
         margin-right: 8px;
-        font-size: 12px;
         transition: all .1s;
         align-items: center;
         justify-content: center;