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

package/lib/select/select.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;
@@ -133,12 +137,12 @@
     background-color: transparent;
   }
 }
-.bk-fade-transtion .bk-fade-enter-active,
-.bk-fade-transtion .bk-fade-leave-active {
+.bk-transition .bk-fade-enter-active,
+.bk-transition .bk-fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.bk-fade-transtion .bk-fade-enter,
-.bk-fade-transtion .bk-fade-leave-to {
+.bk-transition .bk-fade-enter,
+.bk-transition .bk-fade-leave-to {
   opacity: 0;
 }
 .bk-select .mr5 {
@@ -157,21 +161,21 @@
   font-size: 14px;
 }
 .bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
-  border-color: var(--primary-color);
+  border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
 .bk-select.is-focus .bk-input--default {
-  border-color: var(--primary-color);
+  border-color: #3a84ff;
   outline: 0;
-  box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
+  box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
 .bk-select.is-focus .bk-input--default.is-simplicity {
   border-color: transparent;
-  border-bottom-color: var(--primary-color);
+  border-bottom-color: #3a84ff;
   box-shadow: none;
 }
 .bk-select.is-focus .bk-input--default.is-simplicity .bk-input--text {
-  background-color: var(--input-block-color);
+  background-color: #f5f7fa;
 }
 .bk-select.popover-show .bk-select-trigger .angle-up {
   transform: rotate(0);
@@ -181,13 +185,13 @@
   background-color: #fafbfd;
 }
 .bk-select .bk-input.is-focused {
-  border-color: var(--primary-color);
+  border-color: #3a84ff;
   outline: 0;
-  box-shadow: 0 0 3px 0 var(--input-shadow-color);
+  box-shadow: 0 0 3px 0 #a3c5fd;
 }
 .bk-select .bk-input.is-focused.is-simplicity {
   border-color: transparent;
-  border-bottom-color: var(--primary-color);
+  border-bottom-color: #3a84ff;
   box-shadow: none;
 }
 .bk-select .bk-input--text {
@@ -196,7 +200,7 @@
   white-space: nowrap;
   padding-right: 24px;
   cursor: pointer;
-  background-color: var(--white-color);
+  background-color: white;
 }
 .bk-select .bk-select-trigger {
   position: relative;
@@ -209,12 +213,12 @@
   height: 32px;
   padding: 0 28px 0 10px;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: left;
   vertical-align: middle;
   cursor: pointer;
-  background-color: var(--white-color);
-  border: 1px solid var(--light-gray);
+  background-color: white;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
@@ -228,7 +232,7 @@
   align-items: center;
 }
 .bk-select .bk-select-trigger .bk-select-tag::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }
 .bk-select .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
@@ -247,7 +251,6 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding: 2px 0;
   overflow: hidden;
 }
 .bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
@@ -278,12 +281,12 @@
   height: 32px;
   padding: 0 28px 0 10px;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: left;
   vertical-align: middle;
   cursor: pointer;
-  background-color: var(--white-color);
-  border: 1px solid var(--light-gray);
+  background-color: white;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
@@ -301,7 +304,7 @@
   flex-grow: 1;
 }
 .bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }
 .bk-select .bk-select-trigger .bk-select-tag .bk-tag {
   max-width: 190px;
@@ -363,7 +366,7 @@
 }
 .bk-popover.bk-pop2-content.bk-select-popover {
   padding: 0;
-  border: 1px solid var(--disable-color);
+  border: 1px solid #dcdee5;
   border-radius: 2px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
 }
@@ -391,6 +394,15 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown {
   overflow: auto;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-dropdown::-webkit-scrollbar-thumb {
+  background: #dde4eb;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-extension {
   display: flex;
   height: 40px;
@@ -426,6 +438,9 @@
   margin-right: 6px;
   pointer-events: none;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option .bk-select-checkbox .bk-checkbox-original {
+  opacity: 0;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -508,24 +523,24 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
   display: flex;
   margin: 4px 8px 0 8px;
-  border-bottom: 1px solid var(--input-block-hover-color);
+  border-bottom: 1px solid #eaebf0;
   align-items: center;
 }
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .icon-search {
   margin-left: 2px;
-  color: var(--gray-color);
+  color: #979ba5;
 }
 .bk-popover.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;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: left;
   vertical-align: middle;
   cursor: pointer;
-  background-color: var(--white-color);
-  border: 1px solid var(--light-gray);
+  background-color: white;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
@@ -539,5 +554,5 @@
   border: none;
 }
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }

package/lib/select/selectTagInput.d.ts

@@ -5,8 +5,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ISelected[]>;
         default: () => any[];
     };
-    tagTheme: import("vue-types/dist/types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    tagTheme: import("vue-types/dist/types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     placeholder: import("vue-types/dist/types").VueTypeValidableDef<string> & {
         default: string;
@@ -35,12 +35,17 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
 }, {
+    collapseTagRef: import("vue").Ref<any>;
+    tagWrapperRef: import("vue").Ref<any>;
+    tagsRefs: import("vue").Ref<any[]>;
     select: import("./type").ISelectContext;
     overflowTagIndex: import("vue").Ref<number>;
     value: any;
     inputRef: import("vue").Ref<HTMLElement>;
+    overflowContent: import("vue").ComputedRef<string>;
     handleRemoveTag: (val: string) => void;
     focus: () => void;
+    blur: () => void;
     handleInput: (e: any) => void;
     handleKeydown: (e: any) => void;
     resolveClassName: (cls: string) => string;
@@ -49,8 +54,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ISelected[]>;
         default: () => any[];
     };
-    tagTheme: import("vue-types/dist/types").VueTypeDef<"info" | "success" | "warning" | "danger"> & {
-        default: "info" | "success" | "warning" | "danger";
+    tagTheme: import("vue-types/dist/types").VueTypeDef<"" | "info" | "success" | "warning" | "danger"> & {
+        default: "" | "info" | "success" | "warning" | "danger";
     };
     placeholder: import("vue-types/dist/types").VueTypeValidableDef<string> & {
         default: string;
@@ -86,7 +91,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     disabled: boolean;
     placeholder: string;
-    tagTheme: "info" | "success" | "warning" | "danger";
+    tagTheme: "" | "info" | "success" | "warning" | "danger";
     selected: ISelected[];
     filterable: boolean;
     allowCreate: boolean;

package/lib/select/type.d.ts

@@ -15,12 +15,15 @@ export interface ISelectContext {
     activeOptionValue: any;
     showSelectedIcon: boolean;
     selectedStyle: SelectedTypeEnum;
+    isShowAll: Boolean;
+    allOptionId: any;
     register(key: any, option: OptionInstanceType): any;
     unregister(key: any): any;
     registerGroup(key: any, option: GroupInstanceType): any;
     unregisterGroup(key: any): any;
     handleOptionSelected(option: OptionInstanceType): void;
     handleGetLabelByValue(value: any): string | number;
+    handleToggleAll(): void;
 }
 export interface IOptionGroupContext {
     disabled: boolean;

package/lib/shared/helper.d.ts

@@ -26,7 +26,7 @@ export declare function isObject(value: any): boolean;
  * @returns {boolean}
  */
 declare const isNumberFinite: (value: any) => boolean;
-export { isNumberFinite as isFinite, };
+export { isNumberFinite as isFinite };
 /**
  * Returns `value` if finite, else returns `defaultValue`.
  * @param {*} value - The value to return if defined.