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

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

@@ -12,6 +12,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;
@@ -21,6 +22,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;
@@ -33,7 +37,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);
@@ -50,7 +54,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;
@@ -134,12 +138,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;
 }
 .clearfix-style::after {
@@ -304,15 +308,13 @@
 }
 .bk-search-select-container .search-container-input {
   position: relative;
-  display: flex;
+  display: block;
   height: 100%;
   min-width: 40px;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  flex: 1 1 auto;
-  align-items: center;
 }
 .bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
@@ -400,7 +402,7 @@
 }
 .bk-search-select-menu {
   display: flex;
-  min-width: 160px;
+  min-width: 200px;
   font-size: 12px;
   color: #63656e;
   flex-direction: column;
@@ -414,7 +416,7 @@
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
 }
@@ -439,7 +441,7 @@
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
 }
@@ -454,19 +456,46 @@
   cursor: not-allowed;
   background-color: white;
 }
-.bk-search-select-menu .menu-content {
+.bk-search-select-menu .menu-content-wrapper {
   display: flex;
+  width: 100%;
+  height: 100%;
+}
+.bk-search-select-menu .menu-content-wrapper .menu-condition {
+  display: flex;
+  width: 64px;
+  padding: 8px 8px 2px 10px;
+  background-color: #f5f7fa;
   flex-direction: column;
-  flex: 1;
+  flex: 0 0 64px;
+}
+.bk-search-select-menu .menu-content-wrapper .menu-condition-title {
+  display: flex;
+  margin-bottom: 12px;
+  line-height: 24px;
+  align-items: center;
+}
+.bk-search-select-menu .menu-content-wrapper .menu-condition .bk-radio {
+  width: 50px;
+  margin-bottom: 14.5px;
+}
+.bk-search-select-menu .menu-content-wrapper .menu-condition .bk-radio ~ .bk-radio {
+  margin-left: 0;
+}
+.bk-search-select-menu .menu-content {
+  display: flex;
   max-height: 240px;
+  padding: 4px 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;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
   white-space: pre;
@@ -483,13 +512,6 @@
   display: flex;
   width: 22px;
   height: 22px;
-  margin-left: auto;
-  overflow: hidden;
-  font-size: 22px;
-  font-weight: bold;
-  color: #3a84ff;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-menu .menu-content .menu-item.is-hover {
   color: #3a84ff;
@@ -545,5 +567,5 @@
   background-color: white;
 }
 .bk-search-select-popover {
-  margin: -7px -14px;
+  margin: -12px;
 }

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { GetMenuListFunc, ICommonItem, ISearchItem, SearchInputMode, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+import { GetMenuListFunc, ICommonItem, ISearchItem, SearchInputMode, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
 declare const _default: import("vue").DefineComponent<{
     data: {
         type: PropType<ISearchItem[]>;
@@ -57,8 +57,10 @@ declare const _default: import("vue").DefineComponent<{
                 id: string;
                 realId?: string;
                 isSelected?: boolean;
+                logical?: SearchLogical;
             };
             isSelected?: boolean;
+            logical?: SearchLogical;
         }[]>;
         menuList: import("vue").Ref<ISearchItem[]>;
         menuHoverId: import("vue").Ref<string>;
@@ -74,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         handleClickOutside: (e: MouseEvent) => void;
         handleInputFocus: (e: FocusEvent) => void;
         handleInputChange: (event: Event) => void;
+        handleLogicalChange: (logical: SearchLogical) => void;
         handleInputKeyup: (event: KeyboardEvent) => void;
         handleSelectItem: (item: ICommonItem, type?: import("./utils").SearchItemType) => Promise<void>;
         handleSelectCondtionItem: (item: ICommonItem) => void;
@@ -87,6 +90,7 @@ declare const _default: import("vue").DefineComponent<{
             cancel: string;
             or: string;
             and: string;
+            logical: string;
         }>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "add" | "delete")[], "focus" | "add" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         data: {

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

@@ -1,4 +1,4 @@
-import { ComputedRef, InjectionKey, Ref, VNode } from 'vue';
+import { InjectionKey, Ref, VNode } from 'vue';
 /**
  * @description: 获取menu list方法
  * @param {ISearchItem} item 已选择的key字段 为空则代表当前并未选择key字段
@@ -24,7 +24,6 @@ export interface ISearchSelectProvider {
     onEditBlur: () => void;
     onValidate: (str: string) => void;
     editKey: Ref<String>;
-    valueSplitCode: ComputedRef<string>;
 }
 export declare const SEARCH_SLECT_PROVIDER_KEY: InjectionKey<ISearchSelectProvider>;
 export declare const useSearchSelectProvider: (data: ISearchSelectProvider) => void;
@@ -40,10 +39,11 @@ export interface ICommonItem {
     realId?: string;
     value?: Omit<ICommonItem, 'disabled' | 'value'>;
     isSelected?: boolean;
+    logical?: SearchLogical;
 }
 export interface ISearchValue extends Omit<ICommonItem, 'disabled' | 'value'> {
     type?: SearchItemType;
-    values?: Omit<ICommonItem, 'disabled'>[];
+    values?: Omit<ICommonItem, 'disabled' | 'logical'>[];
 }
 export interface ISearchItem {
     id: string;
@@ -56,6 +56,13 @@ export interface ISearchItem {
     disabled?: boolean;
     value?: ICommonItem;
     isSelected?: boolean;
+    onlyRecommendChildren?: boolean;
+    logical?: SearchLogical;
+    showLogicalPanel?: boolean;
+}
+export declare enum SearchLogical {
+    AND = "&",
+    OR = "|"
 }
 export interface IMenuFooterItem {
     id: 'confirm' | 'cancel';
@@ -66,12 +73,12 @@ export type SearchItemType = 'text' | 'default' | 'condition';
 export declare class SelectedItem {
     searchItem: ISearchItem;
     type: SearchItemType;
-    splitCode: string;
     id: string;
     name: string;
     values: ICommonItem[];
     condition: string;
-    constructor(searchItem: ISearchItem, type?: SearchItemType, splitCode?: string);
+    logical: SearchLogical;
+    constructor(searchItem: ISearchItem, type?: SearchItemType);
     get multiple(): boolean;
     get placeholder(): string;
     get children(): ICommonItem[];
@@ -80,6 +87,7 @@ export declare class SelectedItem {
     get inputInnerText(): string;
     get keyInnerHtml(): string;
     get keyInnerText(): string;
+    get showLogical(): boolean;
     isSpecialType(): boolean;
     addValue(item: ICommonItem): void;
     toValue(): ISearchValue;

package/lib/select/common.d.ts

@@ -20,7 +20,10 @@ export declare function usePopover(config: IPopoverConfig, triggerRef: Ref<HTMLE
     showPopover: () => void;
 };
 export declare function useRemoteSearch(method: Function, callBack?: Function): {
-    searchKey: Ref<string>;
+    customOptionName: Ref<string>;
+    searchValue: Ref<string>;
+    curSearchValue: import("vue").ComputedRef<string>;
     searchLoading: Ref<boolean>;
 };
 export declare function toLowerCase(value?: string): string;
+export declare function isInViewPort(el: HTMLElement, client: HTMLElement): boolean;