bkui-vue 0.0.2-beta.9 → 0.0.2-beta.91

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

@@ -1,5 +1,5 @@
 import { PropType, Ref } from 'vue';
-import { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, SearchInputMode, SearchItemType, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+import { GetMenuListFunc, ICommonItem, IMenuFooterItem, ISearchItem, SearchInputMode, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
 declare const _default: import("vue").DefineComponent<{
     data: {
         type: PropType<ISearchItem[]>;
@@ -36,8 +36,10 @@ declare const _default: import("vue").DefineComponent<{
             id: string;
             realId?: string;
             isSelected?: boolean;
+            logical?: SearchLogical;
         };
         isSelected?: boolean;
+        logical?: SearchLogical;
     }[]>;
     menuList: Ref<ISearchItem[]>;
     menuHoverId: Ref<string>;
@@ -53,6 +55,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?: SearchItemType) => Promise<void>;
     handleSelectCondtionItem: (item: ICommonItem) => void;
@@ -66,6 +69,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/menu.d.ts

@@ -1,5 +1,5 @@
 import { PropType, VNode } from 'vue';
-import { ICommonItem, IMenuFooterItem } from './utils';
+import { ICommonItem, IMenuFooterItem, SearchLogical } from './utils';
 declare const _default: import("vue").DefineComponent<{
     list: {
         type: PropType<ICommonItem[]>;
@@ -24,10 +24,20 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<IMenuFooterItem[]>;
         default: () => any[];
     };
+    showLogical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logical: {
+        type: PropType<SearchLogical>;
+        default: SearchLogical;
+    };
 }, {
     handleClick: (item: ICommonItem) => void;
     handleClickCondition: (item: ICommonItem) => void;
     handleClickFooterBtn: (item: IMenuFooterItem) => void;
+    handleSelectedChange: (e: MouseEvent, item: ICommonItem) => void;
+    handleLogicalChange: (value: unknown) => void;
     filterList: import("vue").ComputedRef<ICommonItem[]>;
     getSearchNode: (item: ICommonItem) => string | (string | VNode)[];
     localFooterBtns: import("vue").ComputedRef<IMenuFooterItem[] | ({
@@ -40,7 +50,17 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
     })[]>;
     resolveClassName: (cls: string) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectItem" | "selectCondition" | "footerClick")[], "selectItem" | "selectCondition" | "footerClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    t: import("vue").ComputedRef<{
+        pleaseSelect: string;
+        loading: string;
+        filterQueryMustHasValue: string;
+        ok: string;
+        cancel: string;
+        or: string;
+        and: string;
+        logical: string;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("selectItem" | "selectCondition" | "footerClick" | "update:logical")[], "selectItem" | "selectCondition" | "footerClick" | "update:logical", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     list: {
         type: PropType<ICommonItem[]>;
     };
@@ -64,14 +84,25 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<IMenuFooterItem[]>;
         default: () => any[];
     };
+    showLogical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    logical: {
+        type: PropType<SearchLogical>;
+        default: SearchLogical;
+    };
 }>> & {
     onSelectItem?: (...args: any[]) => any;
     onSelectCondition?: (...args: any[]) => any;
     onFooterClick?: (...args: any[]) => any;
+    "onUpdate:logical"?: (...args: any[]) => any;
 }, {
     multiple: boolean;
     selected: string[];
+    logical: SearchLogical;
     keyword: string;
     footerBtns: IMenuFooterItem[];
+    showLogical: boolean;
 }, {}>;
 export default _default;

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

@@ -12,12 +12,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 {
@@ -182,15 +182,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;
@@ -278,7 +276,7 @@
 }
 .bk-search-select-menu {
   display: flex;
-  min-width: 160px;
+  min-width: 200px;
   font-size: 12px;
   color: #63656e;
   flex-direction: column;
@@ -292,7 +290,7 @@
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
 }
@@ -317,7 +315,7 @@
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
 }
@@ -332,19 +330,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;
@@ -361,13 +386,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;

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

@@ -1,5 +1,5 @@
 import { PropType, ShallowRef } from 'vue';
-import { GetMenuListFunc, ICommonItem, ISearchItem, ISearchValue, SearchItemType, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+import { GetMenuListFunc, ICommonItem, ISearchItem, ISearchValue, SearchItemType, SearchLogical, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
 export declare const SearchSelectProps: {
     data: {
         type: PropType<ISearchItem[]>;
@@ -32,16 +32,12 @@ export declare const SearchSelectProps: {
     placeholder: StringConstructor;
     getMenuList: PropType<GetMenuListFunc>;
     validateValues: PropType<ValidateValuesFunc>;
-    valueSplitCode: {
-        type: StringConstructor;
-        default: string;
-    };
     uniqueSelect: {
         type: BooleanConstructor;
         default: boolean;
     };
     valueBehavior: {
-        type: PropType<ValueBehavior>;
+        type: PropType<"all" | "need-key">;
         default: ValueBehavior;
         validator(v: ValueBehavior): boolean;
     };
@@ -78,16 +74,12 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: StringConstructor;
     getMenuList: PropType<GetMenuListFunc>;
     validateValues: PropType<ValidateValuesFunc>;
-    valueSplitCode: {
-        type: StringConstructor;
-        default: string;
-    };
     uniqueSelect: {
         type: BooleanConstructor;
         default: boolean;
     };
     valueBehavior: {
-        type: PropType<ValueBehavior>;
+        type: PropType<"all" | "need-key">;
         default: ValueBehavior;
         validator(v: ValueBehavior): boolean;
     };
@@ -128,8 +120,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>;
@@ -145,6 +139,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?: SearchItemType) => Promise<void>;
         handleSelectCondtionItem: (item: ICommonItem) => void;
@@ -158,6 +153,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: {
@@ -206,10 +202,13 @@ declare const _default: import("vue").DefineComponent<{
                 id: string;
                 realId?: string;
                 isSelected?: boolean;
+                logical?: SearchLogical;
             };
             isSelected?: boolean;
+            logical?: SearchLogical;
         }[];
         condition: string;
+        logical: SearchLogical;
         searchItem: {
             id: string;
             name: string;
@@ -223,8 +222,10 @@ declare const _default: import("vue").DefineComponent<{
                     id: string;
                     realId?: string;
                     isSelected?: boolean;
+                    logical?: SearchLogical;
                 };
                 isSelected?: boolean;
+                logical?: SearchLogical;
             }[];
             multiple?: boolean;
             async?: boolean;
@@ -241,13 +242,17 @@ declare const _default: import("vue").DefineComponent<{
                     id: string;
                     realId?: string;
                     isSelected?: boolean;
+                    logical?: SearchLogical;
                 };
                 isSelected?: boolean;
+                logical?: SearchLogical;
             };
             isSelected?: boolean;
+            onlyRecommendChildren?: boolean;
+            logical?: SearchLogical;
+            showLogicalPanel?: boolean;
         };
         type: SearchItemType;
-        splitCode: string;
         readonly multiple: boolean;
         readonly placeholder: string;
         readonly children: {
@@ -260,14 +265,17 @@ declare const _default: import("vue").DefineComponent<{
                 id: string;
                 realId?: string;
                 isSelected?: boolean;
+                logical?: SearchLogical;
             };
             isSelected?: boolean;
+            logical?: SearchLogical;
         }[];
         readonly validate: boolean;
         readonly inputInnerHtml: string;
         readonly inputInnerText: string;
         readonly keyInnerHtml: string;
         readonly keyInnerText: string;
+        readonly showLogical: boolean;
         isSpecialType: () => boolean;
         addValue: (item: ICommonItem) => void;
         toValue: () => ISearchValue;
@@ -276,7 +284,6 @@ declare const _default: import("vue").DefineComponent<{
     }[]>;
     overflowIndex: import("vue").Ref<number>;
     validateStr: import("vue").Ref<string>;
-    splitCode: import("vue").ComputedRef<string>;
     onEditClick: (item: SelectedItem, index: number) => void;
     onEditEnter: (item: SelectedItem, index: number) => void;
     handleWrapClick: () => void;
@@ -297,6 +304,7 @@ declare const _default: import("vue").DefineComponent<{
         cancel: string;
         or: string;
         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<{
     data: {
@@ -330,16 +338,12 @@ declare const _default: import("vue").DefineComponent<{
     placeholder: StringConstructor;
     getMenuList: PropType<GetMenuListFunc>;
     validateValues: PropType<ValidateValuesFunc>;
-    valueSplitCode: {
-        type: StringConstructor;
-        default: string;
-    };
     uniqueSelect: {
         type: BooleanConstructor;
         default: boolean;
     };
     valueBehavior: {
-        type: PropType<ValueBehavior>;
+        type: PropType<"all" | "need-key">;
         default: ValueBehavior;
         validator(v: ValueBehavior): boolean;
     };
@@ -353,8 +357,7 @@ declare const _default: import("vue").DefineComponent<{
     clearable: boolean;
     modelValue: ISearchValue[];
     conditions: ICommonItem[];
-    valueBehavior: ValueBehavior;
-    valueSplitCode: string;
+    valueBehavior: "all" | "need-key";
     shrink: boolean;
     uniqueSelect: boolean;
 }, {}>;

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

@@ -132,15 +132,13 @@
 
       &-input {
         position: relative;
-        display: flex;
+        display: block;
         height: 100%;
         min-width: 40px;
         padding: 0 10px;
         margin-top: -4px;
         color: @search-select-font-color;
         border: none;
-        flex: 1 1 auto;
-        align-items: center;
 
         .input-before {
           &:before {
@@ -245,7 +243,7 @@
 
 .@{search-select-name}-menu {
   display: flex;
-  min-width: 160px;
+  min-width: 200px;
   font-size: 12px;
   color: @search-select-font-color;
   flex-direction: column;
@@ -260,7 +258,7 @@
     align-items: center;
     width: 100%;
     height: 32px;
-    padding: 0 12px;
+    padding: 0 8px;
     flex: 0 0 32px;
     outline: none;
   
@@ -292,12 +290,42 @@
     }
   }
 
+  .menu-content-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    .menu-condition {
+      display: flex;
+      width: 64px;
+      padding: 8px 8px 2px 10px;
+      background-color: #f5f7fa;
+      flex-direction: column;
+      flex: 0 0 64px;
+
+      &-title {
+        display: flex;
+        margin-bottom: 12px;
+        line-height: 24px;
+        align-items: center;
+      }
+      .@{bk-prefix}-radio {
+        width: 50px;
+        margin-bottom: 14.5px;
+      }
+      .@{bk-prefix}-radio ~ .@{bk-prefix}-radio {
+        margin-left: 0;
+      }
+    }
+  }
+
   .menu-content {
     display: flex;
-    flex-direction: column;
-    flex: 1;
     max-height: 240px;
+    padding: 4px 0;
     overflow: auto;
+    flex-direction: column;
+    flex: 1;
 
     .menu-item {
       .menu-item-mixin();
@@ -312,13 +340,6 @@
         display: flex;
         width: 22px;
         height: 22px;
-        margin-left: auto;
-        overflow: hidden;
-        font-size: 22px;
-        font-weight: bold;
-        color: @primary-color;
-        align-items: center;
-        justify-content: center;
       }
 
       &.is-hover {

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

@@ -134,12 +134,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 +304,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 +398,7 @@
 }
 .bk-search-select-menu {
   display: flex;
-  min-width: 160px;
+  min-width: 200px;
   font-size: 12px;
   color: #63656e;
   flex-direction: column;
@@ -414,7 +412,7 @@
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
 }
@@ -439,7 +437,7 @@
   align-items: center;
   width: 100%;
   height: 32px;
-  padding: 0 12px;
+  padding: 0 8px;
   flex: 0 0 32px;
   outline: none;
 }
@@ -454,19 +452,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 +508,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;

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: {