bkui-vue 1.0.3-beta.54 → 1.0.3-beta.56

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

@@ -53,14 +53,17 @@ declare const _default: import("vue").DefineComponent<{
     };
     documentArrowEvent: (e: KeyboardEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;
-    handleInputFocus: (e: FocusEvent) => void;
+    handleInputFocus: () => 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;
     handleMenuFooterClick: (item: IMenuFooterItem) => void;
     resolveClassName: (cls: string) => string;
+    inputFocusForWrapper: () => void;
+    inputEnterForWrapper: () => void;
     t: import("vue").ComputedRef<{
         pleaseSelect: string;
         loading: string;

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

@@ -189,6 +189,7 @@
   margin-top: -4px;
   color: #63656e;
   border: none;
+  flex: 1;
 }
 .bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
@@ -287,12 +288,16 @@
 }
 .bk-search-select-menu .menu-item-mixin {
   display: flex;
-  align-items: center;
   width: 100%;
   height: 32px;
+  max-width: 500px;
   padding: 0 8px;
-  flex: 0 0 32px;
+  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;
@@ -312,12 +317,16 @@
 }
 .bk-search-select-menu .menu-header-item {
   display: flex;
-  align-items: center;
   width: 100%;
   height: 32px;
+  max-width: 500px;
   padding: 0 8px;
-  flex: 0 0 32px;
+  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;
@@ -366,12 +375,16 @@
 }
 .bk-search-select-menu .menu-content .menu-item {
   display: flex;
-  align-items: center;
   width: 100%;
   height: 32px;
+  max-width: 500px;
   padding: 0 8px;
-  flex: 0 0 32px;
+  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 {

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

@@ -84,7 +84,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(v: ValueBehavior): boolean;
     };
 }, {
-    inputRef: import("vue").Ref<import("vue").DefineComponent<{
+    inputRef: import("vue").Ref<import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: PropType<ISearchItem[]>;
             required: true;
@@ -105,6 +105,10 @@ declare const _default: import("vue").DefineComponent<{
         getMenuList: PropType<GetMenuListFunc>;
         validateValues: PropType<ValidateValuesFunc>;
         valueBehavior: PropType<ValueBehavior>;
+    }>> & {
+        onFocus?: (...args: any[]) => any;
+        onDelete?: (...args: any[]) => any;
+        onAdd?: (...args: any[]) => any;
     }, {
         popoverRef: import("vue").Ref<HTMLDivElement>;
         inputRef: import("vue").Ref<HTMLDivElement>;
@@ -137,14 +141,17 @@ declare const _default: import("vue").DefineComponent<{
         };
         documentArrowEvent: (e: KeyboardEvent) => void;
         handleClickOutside: (e: MouseEvent) => void;
-        handleInputFocus: (e: FocusEvent) => void;
+        handleInputFocus: () => 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;
         handleMenuFooterClick: (item: import("./utils").IMenuFooterItem) => void;
         resolveClassName: (cls: string) => string;
+        inputFocusForWrapper: () => void;
+        inputEnterForWrapper: () => void;
         t: import("vue").ComputedRef<{
             pleaseSelect: string;
             loading: string;
@@ -155,7 +162,7 @@ declare const _default: import("vue").DefineComponent<{
             and: string;
             logical: string;
         }>;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add")[], "focus" | "delete" | "add", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: PropType<ISearchItem[]>;
             required: true;
@@ -185,7 +192,97 @@ declare const _default: import("vue").DefineComponent<{
         conditions: ICommonItem[];
         showInputBefore: boolean;
         showCondition: boolean;
-    }, {}>>;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: PropType<ISearchItem[]>;
+            required: true;
+        };
+        showInputBefore: BooleanConstructor;
+        showCondition: BooleanConstructor;
+        clickOutside: FunctionConstructor;
+        placeholder: StringConstructor;
+        conditions: {
+            type: PropType<ICommonItem[]>;
+            default: () => any[];
+        };
+        defautUsingItem: PropType<SelectedItem>;
+        mode: {
+            type: PropType<import("./utils").SearchInputMode>;
+            default: import("./utils").SearchInputMode;
+        };
+        getMenuList: PropType<GetMenuListFunc>;
+        validateValues: PropType<ValidateValuesFunc>;
+        valueBehavior: PropType<ValueBehavior>;
+    }>> & {
+        onFocus?: (...args: any[]) => any;
+        onDelete?: (...args: any[]) => any;
+        onAdd?: (...args: any[]) => any;
+    }, {
+        popoverRef: import("vue").Ref<HTMLDivElement>;
+        inputRef: import("vue").Ref<HTMLDivElement>;
+        keyword: import("vue").Ref<string>;
+        loading: import("vue").Ref<boolean>;
+        remoteMenuList: import("vue").Ref<{
+            id: string;
+            name: string;
+            disabled?: boolean;
+            realId?: string;
+            value?: {
+                name: string;
+                id: string;
+                realId?: string;
+                isSelected?: boolean;
+                logical?: SearchLogical;
+            };
+            isSelected?: boolean;
+            logical?: SearchLogical;
+        }[]>;
+        menuList: import("vue").Ref<ISearchItem[]>;
+        menuHoverId: import("vue").Ref<string>;
+        isFocus: import("vue").Ref<boolean>;
+        usingItem: import("vue").Ref<SelectedItem>;
+        showPopover: import("vue").Ref<boolean>;
+        showNoSelectValueError: import("vue").Ref<boolean>;
+        debounceSetMenuList: {
+            (this: any): any;
+            cancel(): void;
+        };
+        documentArrowEvent: (e: KeyboardEvent) => void;
+        handleClickOutside: (e: MouseEvent) => void;
+        handleInputFocus: () => 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;
+        handleMenuFooterClick: (item: import("./utils").IMenuFooterItem) => void;
+        resolveClassName: (cls: string) => string;
+        inputFocusForWrapper: () => void;
+        inputEnterForWrapper: () => void;
+        t: import("vue").ComputedRef<{
+            pleaseSelect: string;
+            loading: string;
+            filterQueryMustHasValue: string;
+            ok: string;
+            cancel: string;
+            or: string;
+            and: string;
+            logical: string;
+        }>;
+    }, {}, {}, {}, {
+        mode: import("./utils").SearchInputMode;
+        conditions: ICommonItem[];
+        showInputBefore: boolean;
+        showCondition: boolean;
+    }>>;
     wrapRef: import("vue").Ref<HTMLDivElement>;
     isFocus: import("vue").Ref<boolean>;
     copyData: ShallowRef<ISearchItem[]>;
@@ -209,6 +306,7 @@ declare const _default: import("vue").DefineComponent<{
         }[];
         condition: string;
         logical: SearchLogical;
+        nameRenderkey: string;
         searchItem: {
             id: string;
             name: string;
@@ -278,6 +376,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly showLogical: boolean;
         isSpecialType: () => boolean;
         addValue: (item: ICommonItem) => void;
+        str2Values: (str: string) => ICommonItem[];
+        addValues: (str: string, mergeValues?: boolean) => void;
+        getValue: (str: string) => ICommonItem;
         toValue: () => ISearchValue;
         toValueKey: () => string;
         isInValueList: (item: ICommonItem) => boolean;

package/lib/search-select/search-select.less

@@ -2,10 +2,8 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/mixins.less';
 
-
 @search-select-name: ~'@{bk-prefix}-search-select';
 
-
 .@{search-select-name} {
   position: relative;
   z-index: 9;
@@ -41,7 +39,7 @@
     border-radius: @border-radius-base;
     outline: none;
     box-sizing: border-box;
-    transition: border .2s linear;
+    transition: border 0.2s linear;
     resize: none;
     flex-direction: row;
     align-items: center;
@@ -72,7 +70,7 @@
       margin-top: 4px;
       overflow: visible;
       text-align: left;
-      transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
+      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       flex: 1;
       flex-wrap: wrap;
       align-items: center;
@@ -91,7 +89,7 @@
         align-self: center;
 
         &.hidden-selected {
-          visibility: hidden
+          visibility: hidden;
         }
 
         &.overflow-selected {
@@ -139,6 +137,7 @@
         margin-top: -4px;
         color: @search-select-font-color;
         border: none;
+        flex: 1;
 
         .input-before {
           &:before {
@@ -198,7 +197,7 @@
         display: flex;
         margin-right: 8px;
         font-size: 16px;
-        transition: color .2s linear;
+        transition: color 0.2s linear;
         align-items: center;
         justify-content: center;
 
@@ -216,7 +215,7 @@
     &::-webkit-scrollbar-thumb {
       background: #e6e9ea;
       border-radius: 20px;
-      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
     }
   }
 
@@ -255,12 +254,16 @@
 
   .menu-item-mixin {
     display: flex;
-    align-items: center;
     width: 100%;
     height: 32px;
+    max-width: 500px;
     padding: 0 8px;
-    flex: 0 0 32px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     outline: none;
+    align-items: center;
+    flex: 0 0 32px;
 
     &:hover {
       cursor: pointer;
@@ -285,7 +288,7 @@
       .menu-item-mixin();
 
       &.is-disabled {
-        .menu-disabled-mixin()
+        .menu-disabled-mixin();
       }
     }
   }
@@ -355,7 +358,7 @@
         .menu-disabled-mixin();
 
         .menu-name {
-          color: @light-gray;;
+          color: @light-gray;
         }
       }
 
@@ -394,7 +397,7 @@
       }
 
       &.is-disabled {
-        .menu-disabled-mixin()
+        .menu-disabled-mixin();
       }
     }
   }

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

@@ -318,6 +318,7 @@
   margin-top: -4px;
   color: #63656e;
   border: none;
+  flex: 1;
 }
 .bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
@@ -416,12 +417,16 @@
 }
 .bk-search-select-menu .menu-item-mixin {
   display: flex;
-  align-items: center;
   width: 100%;
   height: 32px;
+  max-width: 500px;
   padding: 0 8px;
-  flex: 0 0 32px;
+  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;
@@ -441,12 +446,16 @@
 }
 .bk-search-select-menu .menu-header-item {
   display: flex;
-  align-items: center;
   width: 100%;
   height: 32px;
+  max-width: 500px;
   padding: 0 8px;
-  flex: 0 0 32px;
+  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;
@@ -495,12 +504,16 @@
 }
 .bk-search-select-menu .menu-content .menu-item {
   display: flex;
-  align-items: center;
   width: 100%;
   height: 32px;
+  max-width: 500px;
   padding: 0 8px;
-  flex: 0 0 32px;
+  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 {

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

@@ -21,7 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     validateValues: PropType<ValidateValuesFunc>;
     valueBehavior: PropType<ValueBehavior>;
 }, {
-    inputRef: import("vue").Ref<import("vue").DefineComponent<{
+    inputRef: import("vue").Ref<import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: PropType<ISearchItem[]>;
             required: true;
@@ -42,6 +42,10 @@ declare const _default: import("vue").DefineComponent<{
         getMenuList: PropType<GetMenuListFunc>;
         validateValues: PropType<ValidateValuesFunc>;
         valueBehavior: PropType<ValueBehavior>;
+    }>> & {
+        onFocus?: (...args: any[]) => any;
+        onDelete?: (...args: any[]) => any;
+        onAdd?: (...args: any[]) => any;
     }, {
         popoverRef: import("vue").Ref<HTMLDivElement>;
         inputRef: import("vue").Ref<HTMLDivElement>;
@@ -74,14 +78,17 @@ declare const _default: import("vue").DefineComponent<{
         };
         documentArrowEvent: (e: KeyboardEvent) => void;
         handleClickOutside: (e: MouseEvent) => void;
-        handleInputFocus: (e: FocusEvent) => void;
+        handleInputFocus: () => void;
         handleInputChange: (event: Event) => void;
+        handleInputPaste: (event: ClipboardEvent) => void;
         handleLogicalChange: (logical: SearchLogical) => void;
         handleInputKeyup: (event: KeyboardEvent) => void;
         handleSelectItem: (item: ICommonItem, type?: import("./utils").SearchItemType) => Promise<void>;
         handleSelectCondtionItem: (item: ICommonItem) => void;
         handleMenuFooterClick: (item: import("./utils").IMenuFooterItem) => void;
         resolveClassName: (cls: string) => string;
+        inputFocusForWrapper: () => void;
+        inputEnterForWrapper: () => void;
         t: import("vue").ComputedRef<{
             pleaseSelect: string;
             loading: string;
@@ -92,7 +99,7 @@ declare const _default: import("vue").DefineComponent<{
             and: string;
             logical: string;
         }>;
-    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add")[], "focus" | "delete" | "add", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: PropType<ISearchItem[]>;
             required: true;
@@ -122,12 +129,102 @@ declare const _default: import("vue").DefineComponent<{
         conditions: ICommonItem[];
         showInputBefore: boolean;
         showCondition: boolean;
-    }, {}>>;
+    }, true, {}, {}, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: PropType<ISearchItem[]>;
+            required: true;
+        };
+        showInputBefore: BooleanConstructor;
+        showCondition: BooleanConstructor;
+        clickOutside: FunctionConstructor;
+        placeholder: StringConstructor;
+        conditions: {
+            type: PropType<ICommonItem[]>;
+            default: () => any[];
+        };
+        defautUsingItem: PropType<SelectedItem>;
+        mode: {
+            type: PropType<SearchInputMode>;
+            default: SearchInputMode;
+        };
+        getMenuList: PropType<GetMenuListFunc>;
+        validateValues: PropType<ValidateValuesFunc>;
+        valueBehavior: PropType<ValueBehavior>;
+    }>> & {
+        onFocus?: (...args: any[]) => any;
+        onDelete?: (...args: any[]) => any;
+        onAdd?: (...args: any[]) => any;
+    }, {
+        popoverRef: import("vue").Ref<HTMLDivElement>;
+        inputRef: import("vue").Ref<HTMLDivElement>;
+        keyword: import("vue").Ref<string>;
+        loading: import("vue").Ref<boolean>;
+        remoteMenuList: import("vue").Ref<{
+            id: string;
+            name: string;
+            disabled?: boolean;
+            realId?: string;
+            value?: {
+                name: string;
+                id: string;
+                realId?: string;
+                isSelected?: boolean;
+                logical?: SearchLogical;
+            };
+            isSelected?: boolean;
+            logical?: SearchLogical;
+        }[]>;
+        menuList: import("vue").Ref<ISearchItem[]>;
+        menuHoverId: import("vue").Ref<string>;
+        isFocus: import("vue").Ref<boolean>;
+        usingItem: import("vue").Ref<SelectedItem>;
+        showPopover: import("vue").Ref<boolean>;
+        showNoSelectValueError: import("vue").Ref<boolean>;
+        debounceSetMenuList: {
+            (this: any): any;
+            cancel(): void;
+        };
+        documentArrowEvent: (e: KeyboardEvent) => void;
+        handleClickOutside: (e: MouseEvent) => void;
+        handleInputFocus: () => void;
+        handleInputChange: (event: Event) => void;
+        handleInputPaste: (event: ClipboardEvent) => void;
+        handleLogicalChange: (logical: SearchLogical) => void;
+        handleInputKeyup: (event: KeyboardEvent) => void;
+        handleSelectItem: (item: ICommonItem, type?: import("./utils").SearchItemType) => Promise<void>;
+        handleSelectCondtionItem: (item: ICommonItem) => void;
+        handleMenuFooterClick: (item: import("./utils").IMenuFooterItem) => void;
+        resolveClassName: (cls: string) => string;
+        inputFocusForWrapper: () => void;
+        inputEnterForWrapper: () => void;
+        t: import("vue").ComputedRef<{
+            pleaseSelect: string;
+            loading: string;
+            filterQueryMustHasValue: string;
+            ok: string;
+            cancel: string;
+            or: string;
+            and: string;
+            logical: string;
+        }>;
+    }, {}, {}, {}, {
+        mode: SearchInputMode;
+        conditions: ICommonItem[];
+        showInputBefore: boolean;
+        showCondition: boolean;
+    }>>;
     editKey: import("vue").Ref<String>;
     copySeletedItem: (item: SelectedItem) => SelectedItem;
     handleDeleteSelected: (index: number) => void;
     handleEditSeleted: (e: MouseEvent, item: SelectedItem, index: number) => void;
-    handleInputOutside: () => boolean;
+    handleInputOutside: (target: Node) => boolean;
     handleAddSelected: (item: SelectedItem, index: number) => void;
     handleInputFocus: (isFocus: boolean) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "delete"[], "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref, VNode } from 'vue';
+import { ComputedRef, InjectionKey, Ref, VNode } from 'vue';
 /**
  * @description: 获取menu list方法
  * @param {ISearchItem} item 已选择的key字段 为空则代表当前并未选择key字段
@@ -24,6 +24,8 @@ export interface ISearchSelectProvider {
     onEditBlur: () => void;
     onValidate: (str: string) => void;
     editKey: Ref<String>;
+    searchData: ComputedRef<ISearchItem[]>;
+    isClickOutside: (target: Node) => boolean;
 }
 export declare const SEARCH_SLECT_PROVIDER_KEY: InjectionKey<ISearchSelectProvider>;
 export declare const useSearchSelectProvider: (data: ISearchSelectProvider) => void;
@@ -78,6 +80,7 @@ export declare class SelectedItem {
     values: ICommonItem[];
     condition: string;
     logical: SearchLogical;
+    nameRenderkey: string;
     constructor(searchItem: ISearchItem, type?: SearchItemType);
     get multiple(): boolean;
     get placeholder(): string;
@@ -90,6 +93,9 @@ export declare class SelectedItem {
     get showLogical(): boolean;
     isSpecialType(): boolean;
     addValue(item: ICommonItem): void;
+    str2Values(str: string): ICommonItem[];
+    addValues(str: string, mergeValues?: boolean): void;
+    getValue(str: string): ICommonItem;
     toValue(): ISearchValue;
     toValueKey(): string;
     isInValueList(item: ICommonItem): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "1.0.3-beta.54",
+  "version": "1.0.3-beta.56",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",