bkui-vue 2.0.1-beta.11 → 2.0.1-beta.110

package/lib/search-select/input.d.ts

@@ -1,5 +1,6 @@
-import { PropType, Ref, SlotsType } from 'vue';
-import { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, MenuSlotParams, SearchInputMode, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+import { SearchInputMode, SearchLogical, ValueBehavior, SelectedItem } from './utils';
+import type { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, MenuSlotParams, SearchItemType, ValidateValuesFunc } from './utils';
+import type { PropType, Ref, SlotsType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     data: {
         type: PropType<ISearchItem[]>;
@@ -13,11 +14,15 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ICommonItem[]>;
         default: () => any[];
     };
-    defautUsingItem: PropType<SelectedItem>;
+    defaultUsingItem: PropType<SelectedItem>;
     mode: {
         type: PropType<SearchInputMode>;
         default: SearchInputMode;
     };
+    maxHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
     getMenuList: PropType<GetMenuListFunc>;
     validateValues: PropType<ValidateValuesFunc>;
     valueBehavior: PropType<ValueBehavior>;
@@ -53,13 +58,13 @@ declare const _default: import("vue").DefineComponent<{
     };
     documentArrowEvent: (e: KeyboardEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;
-    handleInputFocus: () => void;
+    handleInputFocus: (event?: FocusEvent) => void;
     handleInputChange: (event: Event) => void;
     handleInputPaste: (event: ClipboardEvent) => void;
     handleLogicalChange: (logical: SearchLogical) => void;
     handleInputKeyup: (event: KeyboardEvent) => void;
     handleSelectItem: (item: ICommonItem, type?: SearchItemType) => Promise<void>;
-    handleSelectCondtionItem: (item: ICommonItem) => void;
+    handleSelectConditionItem: (item: ICommonItem) => void;
     handleMenuFooterClick: (item: IMenuFooterItem) => void;
     resolveClassName: (cls: string) => string;
     inputFocusForWrapper: () => void;
@@ -67,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     inputClearForWrapper: () => void;
     deleteInputTextNode: () => void;
     customPanelSubmit: (value: string) => void;
+    refleshMenuHover: () => void;
     t: import("vue").ComputedRef<{
         pleaseSelect: string;
         loading: string;
@@ -77,7 +83,8 @@ declare const _default: import("vue").DefineComponent<{
         and: string;
         logical: string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], "focus" | "delete" | "add" | "selectKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    inputKey: Ref<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "add" | "delete" | "selectKey")[], "focus" | "add" | "delete" | "selectKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<ISearchItem[]>;
         required: true;
@@ -90,20 +97,25 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ICommonItem[]>;
         default: () => any[];
     };
-    defautUsingItem: PropType<SelectedItem>;
+    defaultUsingItem: PropType<SelectedItem>;
     mode: {
         type: PropType<SearchInputMode>;
         default: SearchInputMode;
     };
+    maxHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
     getMenuList: PropType<GetMenuListFunc>;
     validateValues: PropType<ValidateValuesFunc>;
     valueBehavior: PropType<ValueBehavior>;
 }>> & {
     onFocus?: (...args: any[]) => any;
-    onDelete?: (...args: any[]) => any;
     onAdd?: (...args: any[]) => any;
+    onDelete?: (...args: any[]) => any;
     onSelectKey?: (...args: any[]) => any;
 }, {
+    maxHeight: number;
     mode: SearchInputMode;
     conditions: ICommonItem[];
     showInputBefore: boolean;

package/lib/search-select/menu.d.ts

@@ -32,6 +32,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<SearchLogical>;
         default: SearchLogical;
     };
+    maxHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
 }, {
     handleClick: (item: ICommonItem) => void;
     handleClickCondition: (item: ICommonItem) => void;
@@ -39,7 +43,7 @@ declare const _default: import("vue").DefineComponent<{
     handleSelectedChange: (e: MouseEvent, item: ICommonItem) => void;
     handleLogicalChange: (value: unknown) => void;
     filterList: import("vue").ComputedRef<ICommonItem[]>;
-    getSearchNode: (item: ICommonItem) => string | (string | VNode)[];
+    getSearchNode: (item: ICommonItem) => (VNode | string)[] | string;
     localFooterBtns: import("vue").ComputedRef<IMenuFooterItem[] | ({
         id: string;
         name: string;
@@ -50,6 +54,9 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
     })[]>;
     resolveClassName: (cls: string) => string;
+    resolveContentStyles: import("vue").ComputedRef<{
+        maxHeight: string;
+    }>;
     t: import("vue").ComputedRef<{
         pleaseSelect: string;
         loading: string;
@@ -92,12 +99,17 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<SearchLogical>;
         default: SearchLogical;
     };
+    maxHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
 }>> & {
     onSelectItem?: (...args: any[]) => any;
     onSelectCondition?: (...args: any[]) => any;
     onFooterClick?: (...args: any[]) => any;
     "onUpdate:logical"?: (...args: any[]) => any;
 }, {
+    maxHeight: number;
     multiple: boolean;
     selected: string[];
     logical: SearchLogical;

package/lib/search-select/search-select.css

@@ -83,30 +83,30 @@
   border-color: #3a84ff !important;
 }
 .bk-search-select .div-input {
+  flex: 1 1 auto;
   height: 100%;
   padding: 5px 0;
   line-height: 20px;
   word-break: break-all;
-  flex: 1 1 auto;
 }
 .bk-search-select .div-input:focus {
   outline: none;
 }
 .bk-search-select-container {
+  box-sizing: border-box;
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
   min-height: 30px;
   overflow: hidden;
   font-size: 12px;
   color: #63656e;
+  resize: none;
   border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
-  box-sizing: border-box;
   transition: border 0.2s linear;
-  resize: none;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
 }
 .bk-search-select-container.is-focus {
   overflow: auto;
@@ -115,14 +115,17 @@
   border-color: #3a84ff !important;
 }
 .bk-search-select-container .search-prefix {
-  flex: 0 0 auto;
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   height: 100%;
 }
 .bk-search-select-container .search-container {
   position: relative;
   display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
   max-width: calc(100% - 42px);
   min-height: 26px;
   padding: 0 2px;
@@ -130,13 +133,12 @@
   overflow: visible;
   text-align: left;
   transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: center;
 }
 .bk-search-select-container .search-container-selected {
   position: relative;
   display: inline-block;
+  flex: 0 0 auto;
+  align-self: center;
   max-width: 99%;
   padding-left: 8px;
   margin: 0 0 4px 6px;
@@ -144,8 +146,6 @@
   color: #63656e;
   background: #f0f1f5;
   border-radius: 2px;
-  flex: 0 0 auto;
-  align-self: center;
 }
 .bk-search-select-container .search-container-selected.hidden-selected {
   visibility: hidden;
@@ -169,6 +169,8 @@
   top: 4px;
   right: 3px;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 14px;
   height: 14px;
   overflow: hidden;
@@ -177,21 +179,19 @@
   color: #979ba5;
   text-align: center;
   cursor: pointer;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-container .search-container-input {
   position: relative;
   display: block;
-  height: 100%;
+  flex: 1;
   min-width: 40px;
+  height: 100%;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  flex: 1;
 }
-.bk-search-select-container .search-container-input .input-before:before {
+.bk-search-select-container .search-container-input .input-before::after {
   color: #c4c6cc;
   content: attr(data-placeholder);
 }
@@ -203,33 +203,33 @@
 .bk-search-select-container .search-container .selected-input {
   position: relative;
   display: flex;
-  height: 100%;
+  align-items: center;
   min-width: 40px;
+  height: 100%;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  align-items: center;
 }
 .bk-search-select-container .search-nextfix {
   position: absolute;
   top: 0;
   right: 0;
   color: #c4c6cc;
-  flex: 0 0 auto;
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   height: 100%;
 }
 .bk-search-select-container .search-nextfix .search-clear {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 12px;
   height: 12px;
   margin-right: 6px;
   font-size: 12px;
   color: #c4c6cc;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-container .search-nextfix .search-clear:hover {
   color: #979ba5;
@@ -237,11 +237,11 @@
 }
 .bk-search-select-container .search-nextfix .search-nextfix-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   margin-right: 8px;
   font-size: 16px;
   transition: color 0.2s linear;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-container .search-nextfix .search-nextfix-icon.is-focus {
   color: #3c96ff;
@@ -259,28 +259,28 @@
 }
 .bk-search-select-tips {
   display: flex;
+  align-items: center;
   margin-top: 5px;
   font-size: 12px;
   line-height: 16px;
   color: #ea3636;
-  align-items: center;
 }
 .bk-search-select-tips .select-tips {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
   margin-right: 5px;
   overflow: hidden;
   font-size: 16px;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-menu {
   display: flex;
+  flex-direction: column;
   min-width: 200px;
   font-size: 12px;
   color: #63656e;
-  flex-direction: column;
 }
 .bk-search-select-menu .menu-list-mixin {
   display: flex;
@@ -288,16 +288,16 @@
 }
 .bk-search-select-menu .menu-item-mixin {
   display: flex;
+  flex: 0 0 32px;
+  align-items: center;
   width: 100%;
-  height: 32px;
   max-width: 500px;
+  height: 32px;
   padding: 0 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: none;
-  align-items: center;
-  flex: 0 0 32px;
 }
 .bk-search-select-menu .menu-item-mixin:hover {
   cursor: pointer;
@@ -317,16 +317,16 @@
 }
 .bk-search-select-menu .menu-header-item {
   display: flex;
+  flex: 0 0 32px;
+  align-items: center;
   width: 100%;
-  height: 32px;
   max-width: 500px;
+  height: 32px;
   padding: 0 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: none;
-  align-items: center;
-  flex: 0 0 32px;
 }
 .bk-search-select-menu .menu-header-item:hover {
   cursor: pointer;
@@ -346,17 +346,17 @@
 }
 .bk-search-select-menu .menu-content-wrapper .menu-condition {
   display: flex;
+  flex: 0 0 64px;
+  flex-direction: column;
   width: 64px;
   padding: 8px 8px 2px 10px;
   background-color: #f5f7fa;
-  flex-direction: column;
-  flex: 0 0 64px;
 }
 .bk-search-select-menu .menu-content-wrapper .menu-condition-title {
   display: flex;
+  align-items: center;
   margin-bottom: 12px;
   line-height: 24px;
-  align-items: center;
 }
 .bk-search-select-menu .menu-content-wrapper .menu-condition .bk-radio {
   width: 50px;
@@ -367,25 +367,24 @@
 }
 .bk-search-select-menu .menu-content {
   display: flex;
-  max-height: 240px;
+  flex: 1;
+  flex-direction: column;
   padding: 4px 0;
   margin: 0;
   overflow: auto;
-  flex-direction: column;
-  flex: 1;
 }
 .bk-search-select-menu .menu-content .menu-item {
   display: flex;
+  flex: 0 0 32px;
+  align-items: center;
   width: 100%;
-  height: 32px;
   max-width: 500px;
+  height: 32px;
   padding: 0 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: none;
-  align-items: center;
-  flex: 0 0 32px;
   white-space: pre;
 }
 .bk-search-select-menu .menu-content .menu-item:hover {
@@ -420,22 +419,21 @@
 }
 .bk-search-select-menu .menu-content .menu-item .menu-name {
   display: flex;
-  max-width: 100px;
+  align-items: center;
   margin-right: 5px;
   font-weight: bold;
   color: #63656e;
-  align-items: center;
 }
 .bk-search-select-menu .menu-footer {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 32px;
   border-top: 1px solid #dcdee5;
-  align-items: center;
 }
 .bk-search-select-menu .menu-footer-btn {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   height: 100%;