bkui-vue 0.0.1-beta.195 → 0.0.1-beta.197

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

@@ -0,0 +1,426 @@
+/* stylelint-disable declaration-no-important */
+@keyframes loading-scale-animate {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.6);
+  }
+}
+@keyframes fade {
+  100% {
+    background-color: transparent;
+  }
+}
+.bk-fade-transtion .bk-fade-enter-active,
+.bk-fade-transtion .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 {
+  opacity: 0;
+}
+.clearfix-style::after {
+  display: block;
+  height: 0;
+  clear: both;
+  font-size: 0;
+  content: '';
+  visibility: hidden;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0px 0px 6px 0px;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
+.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;
+}
+.menu-item-mixin:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.menu-disabled-mixin {
+  color: #c4c6cc;
+}
+.menu-disabled-mixin:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.search-select-menu {
+  display: flex;
+  min-width: 160px;
+  font-size: 12px;
+  color: #63656e;
+  flex-direction: column;
+}
+.search-select-menu .menu-header {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #dcdee5;
+}
+.search-select-menu .menu-header-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.search-select-menu .menu-header-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.search-select-menu .menu-header-item.is-disabled {
+  color: #c4c6cc;
+}
+.search-select-menu .menu-header-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.search-select-menu .menu-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-height: 240px;
+  overflow: auto;
+}
+.search-select-menu .menu-content .menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.search-select-menu .menu-content .menu-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.search-select-menu .menu-content .menu-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
+.search-select-menu .menu-content .menu-item .is-selected {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: bold;
+  color: #3a84ff;
+  align-items: center;
+  justify-content: center;
+}
+.search-select-menu .menu-content .menu-item.is-hover {
+  color: #3a84ff;
+  background-color: #f5f7fa;
+}
+.search-select-menu .menu-content .menu-item.is-hover .menu-name {
+  color: #3a84ff;
+}
+.search-select-menu .menu-content .menu-item.is-disabled {
+  color: #c4c6cc;
+}
+.search-select-menu .menu-content .menu-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.search-select-menu .menu-content .menu-item.is-disabled .menu-name {
+  color: #c4c6cc;
+}
+.search-select-menu .menu-content .menu-item .menu-name {
+  display: flex;
+  max-width: 100px;
+  margin-right: 5px;
+  font-weight: bold;
+  color: #63656e;
+  align-items: center;
+}
+.search-select-menu .menu-footer {
+  display: flex;
+  width: 100%;
+  height: 32px;
+  border-top: 1px solid #dcdee5;
+  align-items: center;
+}
+.search-select-menu .menu-footer-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.search-select-menu .menu-footer-btn:first-child {
+  border-right: 1px solid #dcdee5;
+}
+.search-select-menu .menu-footer-btn:hover {
+  color: #3a84ff;
+  cursor: pointer;
+}
+.search-select-menu .menu-footer-btn.is-disabled {
+  color: #c4c6cc;
+}
+.search-select-menu .menu-footer-btn.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.search-seleted-input {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-width: 150px;
+  min-width: 40px;
+  padding: 0 10px;
+  margin-top: -4px;
+  color: #63656e;
+  border: none;
+  align-items: center;
+  offset: none;
+}
+.search-seleted-input .div-input {
+  height: 30px;
+  padding: 5px 0;
+  line-height: 20px;
+  word-break: break-all;
+  flex: 1 1 auto;
+  outline: none;
+}
+.search-select-wrap {
+  position: relative;
+  z-index: 9;
+  height: 32px;
+  overflow: inherit;
+}
+.search-select-wrap .bk-search-select {
+  position: relative;
+  display: flex;
+  min-height: 30px;
+  overflow: hidden;
+  font-size: 12px;
+  color: #63656e;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  outline: none;
+  box-sizing: border-box;
+  transition: border 0.2s linear;
+  resize: none;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.search-select-wrap .bk-search-select.is-focus {
+  overflow: auto;
+  color: #3c96ff;
+  background: #fff !important;
+  border-color: #3c96ff !important;
+}
+.search-select-wrap .bk-search-select .search-prefix {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.search-select-wrap .bk-search-select .search-input {
+  position: relative;
+  display: flex;
+  min-height: 26px;
+  padding: 0 2px;
+  margin-top: 4px;
+  overflow: visible;
+  text-align: left;
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.search-select-wrap .bk-search-select .search-input-chip {
+  position: relative;
+  display: inline-block;
+  max-width: 99%;
+  padding-left: 8px;
+  margin: 0 0 4px 6px;
+  line-height: 22px;
+  color: #63656e;
+  background: #f0f1f5;
+  border-radius: 2px;
+  flex: 0 0 auto;
+  align-self: center;
+}
+.search-select-wrap .bk-search-select .search-input-chip.hidden-chip {
+  visibility: hidden;
+}
+.search-select-wrap .bk-search-select .search-input-chip.overflow-chip {
+  padding-right: 8px;
+}
+.search-select-wrap .bk-search-select .search-input-chip:hover {
+  background: #dcdee5;
+}
+.search-select-wrap .bk-search-select .search-input-chip:hover .chip-clear {
+  color: #63656e;
+}
+.search-select-wrap .bk-search-select .search-input-chip .chip-name {
+  display: inline-block;
+  margin-right: 20px;
+  word-break: break-all;
+}
+.search-select-wrap .bk-search-select .search-input-chip .chip-clear {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: normal;
+  color: #979ba5;
+  text-align: center;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+}
+.search-select-wrap .bk-search-select .search-input-input {
+  position: relative;
+  display: flex;
+  height: 100%;
+  min-width: 40px;
+  padding: 0 10px;
+  margin-top: -4px;
+  color: #63656e;
+  border: none;
+  flex: 1 1 auto;
+  align-items: center;
+}
+.search-select-wrap .bk-search-select .search-input-input .div-input {
+  height: 30px;
+  padding: 5px 0;
+  line-height: 20px;
+  word-break: break-all;
+  flex: 1 1 auto;
+}
+.search-select-wrap .bk-search-select .search-input-input .div-input:focus {
+  outline: none;
+}
+.search-select-wrap .bk-search-select .search-input-input .input-before:before {
+  color: #c4c6cc;
+  content: attr(data-placeholder);
+}
+.search-select-wrap .bk-search-select .search-input-input .input-after:after {
+  padding-left: 2px;
+  color: #c4c6cc;
+  content: attr(data-tips);
+}
+.search-select-wrap .bk-search-select .search-nextfix {
+  display: flex;
+  color: #c4c6cc;
+  align-items: center;
+}
+.search-select-wrap .bk-search-select .search-nextfix .search-clear {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
+  font-size: 12px;
+  color: #c4c6cc;
+  align-items: center;
+  justify-content: center;
+}
+.search-select-wrap .bk-search-select .search-nextfix .search-clear:hover {
+  color: #979ba5;
+  cursor: pointer;
+}
+.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon {
+  display: flex;
+  margin-right: 8px;
+  font-size: 16px;
+  transition: color 0.2s linear;
+  align-items: center;
+  justify-content: center;
+}
+.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon.is-focus {
+  color: #3c96ff;
+  background: #fff !important;
+  border-color: #3c96ff !important;
+}
+.search-select-wrap .bk-search-select::-webkit-scrollbar {
+  width: 3px;
+  height: 5px;
+}
+.search-select-wrap .bk-search-select::-webkit-scrollbar-thumb {
+  background: #e6e9ea;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
+.search-select-wrap .bk-select-tips {
+  display: flex;
+  margin-top: 5px;
+  font-size: 12px;
+  line-height: 16px;
+  color: #ea3636;
+  align-items: center;
+}
+.search-select-wrap .bk-select-tips .select-tips {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  overflow: hidden;
+  font-size: 16px;
+  align-items: center;
+  justify-content: center;
+}
+.popover-content {
+  margin: -7px -14px;
+}

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

@@ -0,0 +1,273 @@
+import { PropType } from 'vue';
+import { GetMenuListFunc, ICommonItem, ISearchItem, ISearchValue, SearchItemType, SelectedItem, ValidateValuesFunc } 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>;
+};
+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>;
+}, {
+    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;
+        };
+        geMenuList: PropType<GetMenuListFunc>;
+        validateValues: PropType<ValidateValuesFunc>;
+    }, {
+        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;
+            };
+        }[]>;
+        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;
+        };
+        geMenuList: PropType<GetMenuListFunc>;
+        validateValues: PropType<ValidateValuesFunc>;
+    }>> & {
+        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>;
+    selectedList: import("vue").Ref<{
+        id: string;
+        name: string;
+        values: {
+            id: string;
+            name: string;
+            disabled?: boolean;
+            realId?: string;
+            value?: {
+                name: string;
+                id: string;
+                realId?: string;
+            };
+        }[];
+        condition: string;
+        searchItem: {
+            id: string;
+            name: string;
+            children?: {
+                id: string;
+                name: string;
+                disabled?: boolean;
+                realId?: string;
+                value?: {
+                    name: string;
+                    id: string;
+                    realId?: string;
+                };
+            }[];
+            multiple?: boolean;
+            async?: boolean;
+            noValidate?: boolean;
+            placeholder?: string;
+            disabled?: boolean;
+        };
+        type: SearchItemType;
+        readonly multiple: boolean;
+        readonly placeholder: string;
+        readonly children: {
+            id: string;
+            name: string;
+            disabled?: boolean;
+            realId?: string;
+            value?: {
+                name: string;
+                id: string;
+                realId?: string;
+            };
+        }[];
+        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>;
+    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>;
+}>> & {
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}, {
+    data: ISearchItem[];
+    maxHeight: number;
+    minHeight: number;
+    clearable: boolean;
+    modelValue: ISearchValue[];
+    conditions: ICommonItem[];
+    shrink: boolean;
+}>;
+export default _default;