bkui-vue 0.0.1-beta.4 → 0.0.1-beta.400

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

@@ -0,0 +1,342 @@
+import { PropType, ShallowRef } from 'vue';
+import { GetMenuListFunc, ICommonItem, ISearchItem, ISearchValue, SearchItemType, SelectedItem, ValidateValuesFunc, ValueBehavior } from './utils';
+export declare const SearchSelectProps: {
+    data: {
+        type: PropType<ISearchItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: PropType<ISearchValue[]>;
+        default: () => any[];
+    };
+    shrink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    conditions: {
+        type: PropType<ICommonItem[]>;
+        default: () => {
+            id: string;
+            name: string;
+        }[];
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    getMenuList: PropType<GetMenuListFunc>;
+    validateValues: PropType<ValidateValuesFunc>;
+    valueSplitCode: {
+        type: StringConstructor;
+        default: string;
+    };
+    uniqueSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueBehavior: {
+        type: PropType<ValueBehavior>;
+        default: ValueBehavior;
+        validator(v: ValueBehavior): boolean;
+    };
+};
+declare const _default: import("vue").DefineComponent<{
+    data: {
+        type: PropType<ISearchItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: PropType<ISearchValue[]>;
+        default: () => any[];
+    };
+    shrink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    conditions: {
+        type: PropType<ICommonItem[]>;
+        default: () => {
+            id: string;
+            name: string;
+        }[];
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    getMenuList: PropType<GetMenuListFunc>;
+    validateValues: PropType<ValidateValuesFunc>;
+    valueSplitCode: {
+        type: StringConstructor;
+        default: string;
+    };
+    uniqueSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueBehavior: {
+        type: PropType<ValueBehavior>;
+        default: ValueBehavior;
+        validator(v: ValueBehavior): boolean;
+    };
+}, {
+    inputRef: import("vue").Ref<import("vue").DefineComponent<{
+        data: {
+            type: PropType<ISearchItem[]>;
+            required: true;
+        };
+        showInputBefore: BooleanConstructor;
+        showCondition: BooleanConstructor;
+        clickOutside: FunctionConstructor;
+        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>;
+    }, {
+        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;
+            };
+            isSelected?: boolean;
+        }[]>;
+        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: (e: FocusEvent) => void;
+        handleInputChange: (event: Event) => void;
+        handleInputKeyup: (event: KeyboardEvent) => void;
+        handleSelectItem: (item: ICommonItem, type?: SearchItemType) => Promise<void>;
+        handleSelectCondtionItem: (item: ICommonItem) => void;
+        handleMenuFooterClick: (item: import("./utils").IMenuFooterItem) => void;
+    }, 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: {
+            type: PropType<ISearchItem[]>;
+            required: true;
+        };
+        showInputBefore: BooleanConstructor;
+        showCondition: BooleanConstructor;
+        clickOutside: FunctionConstructor;
+        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;
+        onAdd?: (...args: any[]) => any;
+        onDelete?: (...args: any[]) => any;
+    }, {
+        mode: import("./utils").SearchInputMode;
+        conditions: ICommonItem[];
+        showInputBefore: boolean;
+        showCondition: boolean;
+    }>>;
+    wrapRef: import("vue").Ref<HTMLDivElement>;
+    isFocus: import("vue").Ref<boolean>;
+    copyData: ShallowRef<ISearchItem[]>;
+    selectedList: import("vue").Ref<{
+        id: string;
+        name: string;
+        values: {
+            id: string;
+            name: string;
+            disabled?: boolean;
+            realId?: string;
+            value?: {
+                name: string;
+                id: string;
+                realId?: string;
+                isSelected?: boolean;
+            };
+            isSelected?: boolean;
+        }[];
+        condition: string;
+        searchItem: {
+            id: string;
+            name: string;
+            children?: {
+                id: string;
+                name: string;
+                disabled?: boolean;
+                realId?: string;
+                value?: {
+                    name: string;
+                    id: string;
+                    realId?: string;
+                    isSelected?: boolean;
+                };
+                isSelected?: boolean;
+            }[];
+            multiple?: boolean;
+            async?: boolean;
+            noValidate?: boolean;
+            placeholder?: string;
+            disabled?: boolean;
+            value?: {
+                id: string;
+                name: string;
+                disabled?: boolean;
+                realId?: string;
+                value?: {
+                    name: string;
+                    id: string;
+                    realId?: string;
+                    isSelected?: boolean;
+                };
+                isSelected?: boolean;
+            };
+            isSelected?: boolean;
+        };
+        type: SearchItemType;
+        splitCode: string;
+        readonly multiple: boolean;
+        readonly placeholder: string;
+        readonly children: {
+            id: string;
+            name: string;
+            disabled?: boolean;
+            realId?: string;
+            value?: {
+                name: string;
+                id: string;
+                realId?: string;
+                isSelected?: boolean;
+            };
+            isSelected?: boolean;
+        }[];
+        readonly validate: boolean;
+        readonly inputInnerHtml: string;
+        readonly inputInnerText: string;
+        readonly keyInnerHtml: string;
+        readonly keyInnerText: string;
+        isSpecialType: () => boolean;
+        addValue: (item: ICommonItem) => void;
+        toValue: () => ISearchValue;
+        toValueKey: () => string;
+        isInValueList: (item: ICommonItem) => boolean;
+    }[]>;
+    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;
+    handleInputFocus: (v: boolean) => void;
+    handleResize: () => void;
+    handleClearAll: () => void;
+    handleInputOutside: (target: Node) => boolean;
+    handleAddSelected: (item: SelectedItem) => void;
+    handleDeleteSelected: (index?: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<ISearchItem[]>;
+        default: () => any[];
+    };
+    modelValue: {
+        type: PropType<ISearchValue[]>;
+        default: () => any[];
+    };
+    shrink: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    conditions: {
+        type: PropType<ICommonItem[]>;
+        default: () => {
+            id: string;
+            name: string;
+        }[];
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    getMenuList: PropType<GetMenuListFunc>;
+    validateValues: PropType<ValidateValuesFunc>;
+    valueSplitCode: {
+        type: StringConstructor;
+        default: string;
+    };
+    uniqueSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueBehavior: {
+        type: PropType<ValueBehavior>;
+        default: ValueBehavior;
+        validator(v: ValueBehavior): boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    data: ISearchItem[];
+    maxHeight: number;
+    minHeight: number;
+    clearable: boolean;
+    modelValue: ISearchValue[];
+    conditions: ICommonItem[];
+    valueBehavior: ValueBehavior;
+    valueSplitCode: string;
+    shrink: boolean;
+    uniqueSelect: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,380 @@
+/* stylelint-disable declaration-no-important */
+@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;
+  height: @component-size-base;
+  overflow: inherit;
+  
+  .focus {
+    color: @search-select-focus-color;
+    background: #fff !important;
+    border-color: @search-select-focus-border-color !important;
+  }
+
+  .div-input {
+    height: 100%;
+    padding: 5px 0;
+    line-height: 20px;
+    word-break: break-all;
+    flex: 1 1 auto;
+  
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &-container {
+    position: relative;
+    display: flex;
+    min-height: 30px;
+    overflow: hidden;
+    font-size: 12px;
+    color: @search-select-font-color;
+    border: @border-width-base @border-style-base @border-style-color;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-sizing: border-box;
+    transition: border .2s linear;
+    resize: none;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+
+    &.is-focus {
+      overflow: auto;
+      .focus();
+
+      // .search-container-selected {
+      //   margin-bottom: 2p;
+      // }
+    }
+
+    .search-prefix {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .search-container {
+      position: relative;
+      display: flex;
+      min-height: 26px;
+      padding: 0 2px;
+      margin-top: 4px;
+      overflow: visible;
+      text-align: left;
+      transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
+      flex: 1;
+      flex-wrap: wrap;
+      align-items: center;
+
+      &-selected {
+        position: relative;
+        display: inline-block;
+        max-width: 99%;
+        padding-left: 8px;
+        margin: 0 0 4px 6px;
+        line-height: 22px;
+        color: @search-select-font-color;
+        background: #f0f1f5;
+        border-radius: 2px;
+        flex: 0 0 auto;
+        align-self: center;
+
+        &.hidden-selected {
+          visibility: hidden
+        }
+
+        &.overflow-selected {
+          padding-right: 8px;
+        }
+
+        &:hover {
+          background: #dcdee5;
+
+          .selected-clear {
+            color: @search-select-font-color;
+          }
+        }
+
+        .selected-name {
+          display: inline-block;
+          margin-right: 20px;
+          word-break: break-all;
+        }
+
+        .selected-clear {
+          position: absolute;
+          top: 4px;
+          right: 3px;
+          display: inline-flex;
+          width: 14px;
+          height: 14px;
+          overflow: hidden;
+          font-size: 14px;
+          line-height: normal;
+          color: #979ba5;
+          text-align: center;
+          cursor: pointer;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      &-input {
+        position: relative;
+        display: flex;
+        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 {
+            color: @search-select-placeholder-color;
+            content: attr(data-placeholder);
+          }
+        }
+
+        .input-after {
+          &:after {
+            padding-left: 2px;
+            color: @search-select-placeholder-color;
+            content: attr(data-tips);
+          }
+        }
+      }
+
+      .selected-input {
+        position: relative;
+        display: flex;
+        height: 100%;
+        min-width: 40px;
+        padding: 0 10px;
+        margin-top: -4px;
+        color: @search-select-font-color;
+        border: none;
+        align-items: center;
+      }
+    }
+
+    .search-nextfix {
+      display: flex;
+      color: @light-gray;
+      align-items: center;
+      .search-prefix();
+
+      .search-clear {
+        display: flex;
+        width: 12px;
+        height: 12px;
+        margin-right: 6px;
+        font-size: 12px;
+        color: @light-gray;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          color: #979ba5;
+          cursor: pointer;
+        }
+      }
+
+      .search-nextfix-icon {
+        display: flex;
+        margin-right: 8px;
+        font-size: 16px;
+        transition: color .2s linear;
+        align-items: center;
+        justify-content: center;
+
+        &.is-focus {
+          .focus();
+        }
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 3px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #e6e9ea;
+      border-radius: 20px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+    }
+  }
+
+  &-tips {
+    display: flex;
+    margin-top: 5px;
+    font-size: 12px;
+    line-height: 16px;
+    color: @search-select-message-color;
+    align-items: center;
+
+    .select-tips {
+      display: flex;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      overflow: hidden;
+      font-size: 16px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.@{search-select-name}-menu {
+  display: flex;
+  min-width: 160px;
+  font-size: 12px;
+  color: @search-select-font-color;
+  flex-direction: column;
+
+  .menu-list-mixin {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .menu-item-mixin {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 32px;
+    padding: 0 12px;
+    flex: 0 0 32px;
+    outline: none;
+  
+    &:hover {
+      cursor: pointer;
+      background-color: #f5f7fa;
+    }
+  }
+  
+  .menu-disabled-mixin {
+    color: @light-gray;
+  
+    &:hover {
+      cursor: not-allowed;
+      background-color: white;
+    }
+  }
+
+  .menu-header {
+    .menu-list-mixin();
+    border-bottom: @border-width-base @border-style-base @border-style-color;
+
+    &-item {
+      .menu-item-mixin();
+
+      &.is-disabled {
+        .menu-disabled-mixin()
+      }
+    }
+  }
+
+  .menu-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    max-height: 240px;
+    overflow: auto;
+
+    .menu-item {
+      .menu-item-mixin();
+      white-space: pre;
+
+      .is-keyword {
+        display: inline-flex;
+        color: @primary-color;
+      }
+  
+      .is-selected {
+        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 {
+        color: @primary-color;
+        background-color: #f5f7fa;
+
+        .menu-name {
+          color: @primary-color;
+        }
+      }
+
+      &.is-disabled {
+        .menu-disabled-mixin();
+
+        .menu-name {
+          color: @light-gray;;
+        }
+      }
+
+      .menu-name {
+        display: flex;
+        max-width: 100px;
+        margin-right: 5px;
+        font-weight: bold;
+        color: @search-select-font-color;
+        align-items: center;
+      }
+    }
+  }
+
+  .menu-footer {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    border-top: @border-width-base @border-style-base @search-select-menu-border-color;
+    align-items: center;
+
+    &-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      &:first-child {
+        border-right: @border-width-base @border-style-base @search-select-menu-border-color;
+      }
+
+      &:hover {
+        color: @primary-color;
+        cursor: pointer;
+      }
+
+      &.is-disabled {
+        .menu-disabled-mixin()
+      }
+    }
+  }
+}
+
+.@{search-select-name}-popover {
+  margin: -7px -14px;
+}