bkui-vue 0.0.1-beta.112 → 0.0.1-beta.113

package/lib/select/select.css

@@ -19,23 +19,13 @@
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
-.bk-popover-content.bk-select-popover {
-  padding: 0;
-}
-.bk-select .bk-popover,
-.bk-popover-content .bk-popover {
-  display: block;
-}
-.bk-select .mr5,
-.bk-popover-content .mr5 {
+.bk-select .mr5 {
   margin-right: 5px;
 }
-.bk-select .ml5,
-.bk-popover-content .ml5 {
+.bk-select .ml5 {
   margin-left: 5px;
 }
-.bk-select .input,
-.bk-popover-content .input {
+.bk-select .input {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -55,66 +45,50 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-select .input::placeholder,
-.bk-popover-content .input::placeholder {
+.bk-select .input::placeholder {
   color: #c4c6cc;
 }
-.bk-select ul,
-.bk-popover-content ul {
+.bk-select ul {
   padding: 0;
   margin: 0;
   font-weight: normal;
   list-style: none;
 }
-.bk-select .bk-popover-reference,
-.bk-popover-content .bk-popover-reference {
-  display: unset;
-}
-.bk-select.large .bk-select-content,
-.bk-popover-content.large .bk-select-content {
+.bk-select.large .bk-select-content {
   font-size: 14px;
 }
-.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag,
-.bk-popover-content.is-focus.normal .bk-select-trigger .bk-select-tag {
+.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag {
   border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.popover-show .bk-select-trigger .angle-up,
-.bk-popover-content.popover-show .bk-select-trigger .angle-up {
+.bk-select.popover-show .bk-select-trigger .angle-up {
   transform: rotate(0);
 }
-.bk-select.is-disabled .bk-select-trigger .bk-input input,
-.bk-popover-content.is-disabled .bk-select-trigger .bk-input input {
+.bk-select.is-disabled .bk-select-trigger .bk-input input {
   cursor: not-allowed;
   background-color: #fafbfd;
 }
-.bk-select .bk-select-trigger,
-.bk-popover-content .bk-select-trigger {
+.bk-select .bk-select-trigger {
   position: relative;
 }
-.bk-select .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon,
-.bk-popover-content .bk-select-trigger .bk-tag-input .bk-tag-input-trigger .clear-icon {
+.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,
-.bk-popover-content .bk-select-trigger .bk-input input {
+.bk-select .bk-select-trigger .bk-input input {
   cursor: pointer;
   background-color: #fff;
 }
-.bk-select .bk-select-trigger .bk-input.is-focused,
-.bk-popover-content .bk-select-trigger .bk-input.is-focused {
+.bk-select .bk-select-trigger .bk-input.is-focused {
   border-color: #3a84ff;
   outline: 0;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select .bk-select-trigger .bk-input.is-focused.is-simplicity,
-.bk-popover-content .bk-select-trigger .bk-input.is-focused.is-simplicity {
+.bk-select .bk-select-trigger .bk-input.is-focused.is-simplicity {
   border-color: transparent;
   border-bottom-color: #3a84ff;
   box-shadow: none;
 }
-.bk-select .bk-select-trigger .bk-select-tag,
-.bk-popover-content .bk-select-trigger .bk-select-tag {
+.bk-select .bk-select-trigger .bk-select-tag {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -140,12 +114,10 @@
   align-items: center;
   flex-wrap: wrap;
 }
-.bk-select .bk-select-trigger .bk-select-tag::placeholder,
-.bk-popover-content .bk-select-trigger .bk-select-tag::placeholder {
+.bk-select .bk-select-trigger .bk-select-tag::placeholder {
   color: #c4c6cc;
 }
-.bk-select .bk-select-trigger .bk-select-tag-input,
-.bk-popover-content .bk-select-trigger .bk-select-tag-input {
+.bk-select .bk-select-trigger .bk-select-tag-input {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
@@ -172,17 +144,14 @@
   outline: none;
   flex-grow: 1;
 }
-.bk-select .bk-select-trigger .bk-select-tag-input::placeholder,
-.bk-popover-content .bk-select-trigger .bk-select-tag-input::placeholder {
+.bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
   color: #c4c6cc;
 }
-.bk-select .bk-select-trigger .bk-select-tag .bk-tag,
-.bk-popover-content .bk-select-trigger .bk-select-tag .bk-tag {
+.bk-select .bk-select-trigger .bk-select-tag .bk-tag {
   max-width: 190px;
   padding: 0 4px;
 }
-.bk-select .bk-select-trigger .angle-up,
-.bk-popover-content .bk-select-trigger .angle-up {
+.bk-select .bk-select-trigger .angle-up {
   right: 4px;
   transform: rotate(180deg);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -198,8 +167,7 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-select-trigger .clear-icon,
-.bk-popover-content .bk-select-trigger .clear-icon {
+.bk-select .bk-select-trigger .clear-icon {
   right: 4px;
   cursor: pointer;
   transition: all 0.1s;
@@ -215,26 +183,25 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-select-trigger .clear-icon:hover,
-.bk-popover-content .bk-select-trigger .clear-icon:hover {
+.bk-select .bk-select-trigger .clear-icon:hover {
   color: #979ba5;
 }
-.bk-select .bk-select-trigger .spinner,
-.bk-popover-content .bk-select-trigger .spinner {
+.bk-select .bk-select-trigger .spinner {
   position: absolute;
   top: 8px;
   right: 6px;
 }
-.bk-select .bk-select-empty,
-.bk-popover-content .bk-select-empty {
+.bk-popover2.bk-select-popover {
+  padding: 0;
+}
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-empty {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 56px;
   color: #63656e;
 }
-.bk-select .bk-select-empty .spinner,
-.bk-popover-content .bk-select-empty .spinner {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-empty .spinner {
   display: flex;
   width: 14px;
   height: 14px;
@@ -244,23 +211,19 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-select-dropdown,
-.bk-popover-content .bk-select-dropdown {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-dropdown {
   overflow: auto;
 }
-.bk-select .bk-select-extension,
-.bk-popover-content .bk-select-extension {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-extension {
   display: flex;
   height: 40px;
   background-color: #fafbfd;
   align-items: center;
 }
-.bk-select .bk-select-options,
-.bk-popover-content .bk-select-options {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-options {
   padding: 8px 0;
 }
-.bk-select .bk-select-option,
-.bk-popover-content .bk-select-option {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-option {
   position: relative;
   height: 32px;
   padding: 0 12px;
@@ -273,65 +236,52 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-select .bk-select-option:hover,
-.bk-popover-content .bk-select-option:hover,
-.bk-select .bk-select-option.is-hover,
-.bk-popover-content .bk-select-option.is-hover {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-option-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-option:hover,
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-option.is-hover {
   color: #3a84ff;
   background-color: #f5f7fa;
 }
-.bk-select .bk-select-option.is-selected,
-.bk-popover-content .bk-select-option.is-selected {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-option.is-selected {
   color: #3a84ff;
 }
-.bk-select .bk-select-option.is-selected.is-multiple::after,
-.bk-popover-content .bk-select-option.is-selected.is-multiple::after {
-  position: absolute;
-  right: 12px;
-  font-weight: 700;
-  content: '\2713';
-}
-.bk-select .bk-select-option.is-disabled,
-.bk-popover-content .bk-select-option.is-disabled {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-option.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: transparent;
 }
-.bk-select .bk-select-options-loading,
-.bk-popover-content .bk-select-options-loading {
+.bk-popover2.bk-select-popover .bk-select-content .bk-select-options-loading {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-option-group-label,
-.bk-popover-content .bk-option-group-label {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group-label {
   height: 32px;
   padding: 0 8px;
   line-height: 32px;
   color: #979ba5;
   text-align: left;
 }
-.bk-select .bk-option-group-label.collapsible,
-.bk-popover-content .bk-option-group-label.collapsible {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group-label.collapsible {
   cursor: pointer;
 }
-.bk-select .bk-option-group.collapsible .bk-select-option,
-.bk-popover-content .bk-option-group.collapsible .bk-select-option {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group.collapsible .bk-select-option {
   padding-left: 40px;
 }
-.bk-select .bk-option-group.disabled .default-group-label,
-.bk-popover-content .bk-option-group.disabled .default-group-label {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group.disabled .default-group-label {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-.bk-select .bk-option-group .default-group-label,
-.bk-popover-content .bk-option-group .default-group-label {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group .default-group-label {
   display: flex;
   user-select: none;
   align-items: center;
 }
-.bk-select .bk-option-group .default-group-label-icon,
-.bk-popover-content .bk-option-group .default-group-label-icon {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group .default-group-label-icon {
   display: flex;
   width: 12px;
   height: 12px;
@@ -340,11 +290,9 @@
   align-items: center;
   justify-content: center;
 }
-.bk-select .bk-option-group .default-group-label-icon.collapse,
-.bk-popover-content .bk-option-group .default-group-label-icon.collapse {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group .default-group-label-icon.collapse {
   transform: rotate(-90deg);
 }
-.bk-select .bk-option-group .bk-select-option,
-.bk-popover-content .bk-option-group .bk-select-option {
+.bk-popover2.bk-select-popover .bk-select-content .bk-option-group .bk-select-option {
   padding-left: 24px;
 }

package/lib/select/select.d.ts

@@ -205,8 +205,8 @@ declare const _default: import("vue").DefineComponent<{
     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>;
+    triggerRef: import("vue").Ref<HTMLElement>;
     selectTagInputRef: import("vue").Ref<{
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -372,21 +372,22 @@ declare const _default: import("vue").DefineComponent<{
     searchKey: import("vue").Ref<string>;
     setHover: () => void;
     cancelHover: () => void;
-    handleFocus: () => void;
+    handleFocus: (e: FocusEvent) => 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;
+    handleClickOutside: ({ event }: {
+        event: any;
+    }) => void;
     handleScroll: (e: any) => void;
     handleDeleteTag: (val: any) => void;
     handleInputChange: (value: any) => void;
     handleInputEnter: (value: any, e: Event) => void;
     handleKeydown: (e: KeyboardEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "toggle" | "clear" | "update:modelValue" | "scroll-end")[], "change" | "toggle" | "clear" | "update:modelValue" | "scroll-end", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "blur" | "change" | "toggle" | "clear" | "update:modelValue" | "scroll-end")[], "focus" | "blur" | "change" | "toggle" | "clear" | "update:modelValue" | "scroll-end", 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;
@@ -505,6 +506,8 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
+    onFocus?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
     onClear?: (...args: any[]) => any;

package/lib/select/select.less

@@ -1,12 +1,13 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/animate.less';
 
-.bk-popover-content.bk-select-popover {
-  padding: 0;
+.ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.@{bk-prefix}-select,
-.bk-popover-content {
+.@{bk-prefix}-select {
   .bk-select-icon(@fontSize: 20px, @color: #979ba5) {
     display: flex;
     align-items: center;
@@ -26,12 +27,6 @@
     justify-content: center;
   }
 
-  .ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .mr(@marginRight) {
     margin-right: @marginRight;
   }
@@ -46,10 +41,6 @@
     box-shadow: 0px 0px 3px 0px @input-shadow-color;
   }
 
-  .bk-popover {
-    display: block;
-  }
-
   .mr5 {
     .mr(5px)
   }
@@ -88,10 +79,6 @@
     list-style: none;
   }
 
-  .bk-popover-reference {
-    display: unset;
-  }
-
   &.large {
     .bk-select-content {
       font-size: 14px;
@@ -196,132 +183,137 @@
       right: 6px;
     }
   }
+}
 
-  .bk-select-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 56px;
-    color: #63656e;
+.bk-popover2.bk-select-popover {
+  padding: 0;
 
-    .spinner {
+  .bk-select-content {
+    .bk-select-empty {
       display: flex;
-      width: 14px;
-      height: 14px;
-      margin-right: 4px;
-      font-size: 14px;
-      color: #c4c6cc;
       align-items: center;
       justify-content: center;
+      height: 56px;
+      color: #63656e;
+  
+      .spinner {
+        display: flex;
+        width: 14px;
+        height: 14px;
+        margin-right: 4px;
+        font-size: 14px;
+        color: #c4c6cc;
+        align-items: center;
+        justify-content: center;
+      }
     }
-  }
 
-  .bk-select-dropdown {
-    overflow: auto;
-  }
-
-  .bk-select-extension {
-    display: flex;
-    height: 40px;
-    background-color: #fafbfd;
-    align-items: center;
-  }
-
-  .bk-select-options {
-    padding: 8px 0;
-  }
-
-  .bk-select-option {
-    position: relative;
-    height: 32px;
-    padding: 0 12px;
-    line-height: 32px;
-    color: #63656e;
-    text-align: left;
-    cursor: pointer;
-    user-select: none;
-
-    .ellipsis();
-
-    &:hover,
-    &.is-hover {
-      color: #3a84ff;
-      background-color: #f5f7fa;
+    .bk-select-dropdown {
+      overflow: auto;
     }
 
-    &.is-selected {
-      color: #3a84ff;
-
-      &.is-multiple::after {
-        position: absolute;
-        right: 12px;
-        font-weight: 700;
-        content: '\2713';
-      }
+    .bk-select-extension {
+      display: flex;
+      height: 40px;
+      background-color: #fafbfd;
+      align-items: center;
     }
 
-    &.is-disabled {
-      color: #c4c6cc;
-      cursor: not-allowed;
-      background-color: transparent;
+    .bk-select-options {
+      padding: 8px 0;
     }
 
-  }
-
-  .bk-select-options-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .bk-option-group {
-    &-label {
+    .bk-select-option {
+      position: relative;
       height: 32px;
-      padding: 0 8px;
+      padding: 0 12px;
       line-height: 32px;
-      color: #979ba5;
+      color: #63656e;
       text-align: left;
-
-      &.collapsible {
-        cursor: pointer;
+      cursor: pointer;
+      user-select: none;
+  
+      .ellipsis();
+  
+      &-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
       }
-    }
-
-    &.collapsible {
-      .bk-select-option {
-        padding-left: 40px;
+      
+      &:hover,
+      &.is-hover {
+        color: #3a84ff;
+        background-color: #f5f7fa;
       }
-    }
-
-    &.disabled {
-      .default-group-label {
+  
+      &.is-selected {
+        color: #3a84ff;
+      }
+  
+      &.is-disabled {
         color: #c4c6cc;
         cursor: not-allowed;
+        background-color: transparent;
       }
+  
     }
 
-    .default-group-label {
+    .bk-select-options-loading {
       display: flex;
-      user-select: none;
       align-items: center;
+      justify-content: center;
+    }
 
-      &-icon {
+    .bk-option-group {
+      &-label {
+        height: 32px;
+        padding: 0 8px;
+        line-height: 32px;
+        color: #979ba5;
+        text-align: left;
+  
+        &.collapsible {
+          cursor: pointer;
+        }
+      }
+  
+      &.collapsible {
+        .bk-select-option {
+          padding-left: 40px;
+        }
+      }
+  
+      &.disabled {
+        .default-group-label {
+          color: #c4c6cc;
+          cursor: not-allowed;
+        }
+      }
+  
+      .default-group-label {
         display: flex;
-        width: 12px;
-        height: 12px;
-        margin-right: 8px;
-        transition: all .1s;
+        user-select: none;
         align-items: center;
-        justify-content: center;
-
-        &.collapse {
-          transform: rotate(-90deg);
+  
+        &-icon {
+          display: flex;
+          width: 12px;
+          height: 12px;
+          margin-right: 8px;
+          transition: all .1s;
+          align-items: center;
+          justify-content: center;
+  
+          &.collapse {
+            transform: rotate(-90deg);
+          }
         }
       }
-    }
-
-    .bk-select-option {
-      padding-left: 24px;
+  
+      .bk-select-option {
+        padding-left: 24px;
+      }
     }
   }
 }