bkui-vue 1.0.3-beta.9 → 2.0.1-beta.1

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

@@ -1,5 +1,5 @@
-import { PropType, Ref } from 'vue';
-import { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, SearchInputMode, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+import { PropType, Ref, SlotsType } from 'vue';
+import { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, MenuSlotParams, SearchInputMode, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
 declare const _default: import("vue").DefineComponent<{
     data: {
         type: PropType<ISearchItem[]>;
@@ -53,14 +53,20 @@ 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: () => Promise<void>;
+    inputClearForWrapper: () => void;
+    deleteInputTextNode: () => void;
+    customPanelSubmit: (value: string) => void;
     t: import("vue").ComputedRef<{
         pleaseSelect: string;
         loading: string;
@@ -71,7 +77,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" | "selectKey")[], "focus" | "delete" | "add" | "selectKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<ISearchItem[]>;
         required: true;
@@ -96,10 +102,13 @@ declare const _default: import("vue").DefineComponent<{
     onFocus?: (...args: any[]) => any;
     onDelete?: (...args: any[]) => any;
     onAdd?: (...args: any[]) => any;
+    onSelectKey?: (...args: any[]) => any;
 }, {
     mode: SearchInputMode;
     conditions: ICommonItem[];
     showInputBefore: boolean;
     showCondition: boolean;
-}, {}>;
+}, SlotsType<{
+    menu: MenuSlotParams;
+}>>;
 export default _default;

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;
@@ -360,18 +369,23 @@
   display: flex;
   max-height: 240px;
   padding: 4px 0;
+  margin: 0;
   overflow: auto;
   flex-direction: column;
   flex: 1;
 }
 .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

@@ -1,5 +1,6 @@
 import { PropType, ShallowRef } from 'vue';
-import { GetMenuListFunc, ICommonItem, ISearchItem, ISearchValue, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+import { type SlotsType } from 'vue';
+import { GetMenuListFunc, ICommonItem, ISearchItem, ISearchValue, MenuSlotParams, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
 export declare const SearchSelectProps: {
     data: {
         type: PropType<ISearchItem[]>;
@@ -84,7 +85,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 +106,11 @@ 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;
+        onSelectKey?: (...args: any[]) => any;
     }, {
         popoverRef: import("vue").Ref<HTMLDivElement>;
         inputRef: import("vue").Ref<HTMLDivElement>;
@@ -137,14 +143,20 @@ 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: () => Promise<void>;
+        inputClearForWrapper: () => void;
+        deleteInputTextNode: () => void;
+        customPanelSubmit: (value: string) => void;
         t: import("vue").ComputedRef<{
             pleaseSelect: string;
             loading: string;
@@ -155,7 +167,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" | "selectKey")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: PropType<ISearchItem[]>;
             required: true;
@@ -180,12 +192,109 @@ declare const _default: import("vue").DefineComponent<{
         onFocus?: (...args: any[]) => any;
         onDelete?: (...args: any[]) => any;
         onAdd?: (...args: any[]) => any;
+        onSelectKey?: (...args: any[]) => any;
     }, {
         mode: import("./utils").SearchInputMode;
         conditions: ICommonItem[];
         showInputBefore: boolean;
         showCondition: boolean;
-    }, {}>>;
+    }, true, {}, SlotsType<{
+        menu: MenuSlotParams;
+    }>, {
+        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;
+        onSelectKey?: (...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: () => Promise<void>;
+        inputClearForWrapper: () => void;
+        deleteInputTextNode: () => void;
+        customPanelSubmit: (value: string) => 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 +318,7 @@ declare const _default: import("vue").DefineComponent<{
         }[];
         condition: string;
         logical: SearchLogical;
+        nameRenderkey: string;
         searchItem: {
             id: string;
             name: string;
@@ -251,6 +361,7 @@ declare const _default: import("vue").DefineComponent<{
             onlyRecommendChildren?: boolean;
             logical?: SearchLogical;
             showLogicalPanel?: boolean;
+            isCustomMenu?: boolean;
         };
         type: SearchItemType;
         readonly multiple: boolean;
@@ -276,8 +387,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly keyInnerHtml: string;
         readonly keyInnerText: string;
         readonly showLogical: boolean;
+        readonly isCustomMenu: 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;
@@ -296,6 +411,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClickSearch: (e: MouseEvent) => void;
     localConditions: import("vue").ComputedRef<ICommonItem[]>;
     resolveClassName: (cls: string) => string;
+    handleSelectedKey: (a: any) => void;
     t: import("vue").ComputedRef<{
         pleaseSelect: string;
         loading: string;
@@ -306,7 +422,7 @@ declare const _default: import("vue").DefineComponent<{
         and: string;
         logical: string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("search" | "update:modelValue")[], "search" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("search" | "update:modelValue" | "selectKey")[], "search" | "update:modelValue" | "selectKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<ISearchItem[]>;
         default: () => any[];
@@ -349,6 +465,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
+    onSelectKey?: (...args: any[]) => any;
     onSearch?: (...args: any[]) => any;
 }, {
     data: ISearchItem[];
@@ -360,5 +477,10 @@ declare const _default: import("vue").DefineComponent<{
     valueBehavior: "all" | "need-key";
     shrink: boolean;
     uniqueSelect: boolean;
-}, {}>;
+}, SlotsType<{
+    menu: MenuSlotParams;
+    prepend: void;
+    append: void;
+    validate: void;
+}>>;
 export default _default;

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();
       }
     }
   }
@@ -323,6 +326,7 @@
     display: flex;
     max-height: 240px;
     padding: 4px 0;
+    margin: 0;
     overflow: auto;
     flex-direction: column;
     flex: 1;
@@ -355,7 +359,7 @@
         .menu-disabled-mixin();
 
         .menu-name {
-          color: @light-gray;;
+          color: @light-gray;
         }
       }
 
@@ -394,7 +398,7 @@
       }
 
       &.is-disabled {
-        .menu-disabled-mixin()
+        .menu-disabled-mixin();
       }
     }
   }

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

@@ -13,6 +13,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -124,6 +125,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -315,6 +318,7 @@
   margin-top: -4px;
   color: #63656e;
   border: none;
+  flex: 1;
 }
 .bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
@@ -413,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;
@@ -438,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;
@@ -486,18 +498,23 @@
   display: flex;
   max-height: 240px;
   padding: 4px 0;
+  margin: 0;
   overflow: auto;
   flex-direction: column;
   flex: 1;
 }
 .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 {