bkui-vue 0.0.1-beta.27 → 0.0.1-beta.28

package/lib/tag-input/tag-input.css

@@ -0,0 +1,208 @@
+.bk-tag-input {
+  position: relative;
+  min-height: 32px;
+}
+.bk-tag-input .bk-popover-reference {
+  display: block;
+}
+.bk-tag-input .bk-tag-input-trigger {
+  position: relative;
+  display: flex;
+  min-height: 32px;
+  padding: 0 0 0 5px;
+  overflow: hidden;
+  font-size: 12px;
+  cursor: pointer;
+  background: white;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  align-items: center;
+  justify-content: space-between;
+}
+.bk-tag-input .bk-tag-input-trigger.active {
+  border-color: #3a84ff;
+}
+.bk-tag-input .bk-tag-input-trigger.disabled {
+  cursor: not-allowed;
+  background: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list {
+  display: inline-flex;
+  max-height: 135px;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list > li {
+  display: inline-flex;
+  height: 22px;
+  margin: 4px 5px 4px 0;
+  overflow: hidden;
+  font-size: 12px;
+  border: solid 1px transparent;
+  border-radius: 2px;
+  align-items: center;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list > li.tag-item {
+  background: #f0f1f5;
+  border-color: #f0f1f5;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list .remove-tag {
+  flex-shrink: 0;
+  margin-right: 5px;
+  font-size: 14px;
+  line-height: 0;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list .tag {
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  flex: 1;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list .text {
+  padding: 0 5px;
+  line-height: 20px;
+  color: #63656e;
+  background-color: #f0f1f5;
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.bk-tag-input .bk-tag-input-trigger .tag-list .tag-input {
+  width: 10px;
+  height: 22px;
+  max-width: 295px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  box-sizing: border-box;
+}
+.bk-tag-input .bk-tag-input-trigger .placeholder {
+  position: absolute;
+  top: 0;
+  left: 8px;
+  padding: 0;
+  margin: 0;
+  line-height: 30px;
+  color: #c4c6cc;
+}
+.bk-tag-input .bk-tag-input-trigger .clear-icon {
+  margin-right: 5px;
+  font-size: 14px;
+  line-height: 0;
+  color: #c4c6cc;
+  cursor: pointer;
+}
+.bk-tag-input .bk-tag-input-trigger .clear-icon:hover {
+  color: #979ba5;
+}
+.bk-tag-input .bk-popover-content {
+  padding: 0;
+}
+.bk-selector-list {
+  min-width: 150px;
+}
+.bk-selector-list .outside-ul {
+  max-height: 160px;
+  padding: 0;
+  padding: 6px 0;
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  background-color: white;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+}
+.bk-selector-list .outside-ul::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.bk-selector-list .outside-ul::-webkit-scrollbar-thumb {
+  min-height: 24px;
+  background-color: #dcdee5;
+  border-radius: 3px;
+}
+.bk-selector-list .bk-selector-group-item {
+  list-style: none;
+}
+.bk-selector-list .bk-selector-group-item .group-name {
+  padding-left: 11px;
+  font-size: 12px;
+  line-height: 32px;
+  color: #979ba5;
+}
+.bk-selector-list .bk-selector-group-list-item {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.bk-selector-list .bk-selector-list-item {
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  background-color: white;
+  border-right: #c4c6cc;
+  border-left: #c4c6cc;
+}
+.bk-selector-list .bk-selector-list-item:first-child {
+  border-top: #c4c6cc;
+}
+.bk-selector-list .bk-selector-list-item:last-child {
+  border-bottom: #c4c6cc;
+}
+.bk-selector-list .bk-selector-list-item.bk-selector-selected {
+  background-color: #f4f6fa;
+}
+.bk-selector-list .bk-selector-list-item.bk-selector-selected .selected-icon {
+  display: inline-block;
+}
+.bk-selector-list .bk-selector-list-item.bk-selector-actived {
+  background-color: #f4f6fa;
+}
+.bk-selector-list .bk-selector-list-item:hover {
+  background-color: #eaf3ff;
+}
+.bk-selector-list .bk-selector-list-item.disabled {
+  cursor: not-allowed;
+  background: white;
+}
+.bk-selector-list .bk-selector-list-item.disabled .text {
+  color: #c4c6cc;
+}
+.bk-selector-list .bk-selector-list-item.loading {
+  padding: 5px 0 3px;
+  text-align: center;
+}
+.bk-selector-list .bk-selector-list-item .loading {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  font-size: 14px;
+  cursor: default;
+}
+.bk-selector-list .bk-selector-list-item .text {
+  padding: 0 10px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-selector-list .bk-selector-list-item .bk-selector-tools {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  display: none;
+  font-size: 12px;
+}
+.bk-selector-list .bk-selector-list-item .bk-selector-tools .bk-selector-list-icon {
+  margin-right: 14px;
+}
+.bk-selector-list .bk-selector-list-item .highlight-text {
+  color: #3a84ff;
+}

package/lib/tag-input/tag-input.d.ts

@@ -0,0 +1,374 @@
+import { Ref } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    list: import("vue-types").VueTypeDef<{
+        [key: string]: any;
+    }[]> & {
+        default: () => {
+            [key: string]: any;
+        }[];
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    tooltipKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    saveKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    hasDeleteIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    clearable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    trigger: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    searchKey: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
+    };
+    useGroup: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    allowCreate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maxData: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    maxResult: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    contentMaxHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    contentWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    separator: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    allowNextFocus: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    allowAutoMatch: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showClearOnlyHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    leftSpace: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    createTagValidator: {
+        type: import("vue").PropType<(tag: any) => boolean>;
+        default: any;
+    };
+    filterCallback: {
+        type: import("vue").PropType<(value: string, searchKey: string | string[], list: any[]) => any[]>;
+        default: any;
+    };
+    tagTpl: {
+        type: import("vue").PropType<(node: any, highlightKeyword: Function, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>>;
+        default: any;
+    };
+    tpl: {
+        type: import("vue").PropType<(node: any, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>>;
+        default: any;
+    };
+    pasteFn: {
+        type: import("vue").PropType<(value: string) => any[]>;
+        default: any;
+    };
+}, {
+    isShowPlaceholder: import("vue").ComputedRef<boolean>;
+    isShowClear: import("vue").ComputedRef<boolean>;
+    curInputValue: Ref<string>;
+    formatList: any[];
+    renderList: import("vue").ComputedRef<any[]>;
+    showTagClose: import("vue").ComputedRef<boolean>;
+    tagInputRef: any;
+    bkTagSelectorRef: any;
+    tagListRef: any;
+    tagInputItemRef: any;
+    selectorListRef: any;
+    popoverRef: any;
+    triggerClass: import("vue").ComputedRef<{
+        'bk-tag-input-trigger': boolean;
+        active: boolean;
+        disabled: boolean;
+    }>;
+    focusInputTrigger: (e?: MouseEvent) => void;
+    activeClass: (data: any, index: number) => {
+        'bk-selector-actived': boolean;
+        'bk-selector-selected': boolean;
+    };
+    handleInput: (e?: Event) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleTagSelected: (item: any, type: string, e?: Event) => void;
+    handleTagRemove: (data: any, index: number, e?: MouseEvent) => void;
+    handleClear: (e: MouseEvent) => void;
+    tagFocus: (e: MouseEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handlePaste: (e: ClipboardEvent) => boolean;
+    curPage: Ref<number>;
+    totalSize: Ref<number>;
+    totalPage: Ref<number>;
+    pageSize: Ref<number>;
+    isPageLoading: Ref<boolean>;
+    curPageList: Ref<any[]>;
+    renderListPaged: Ref<any[]>;
+    localList: Ref<any[]>;
+    tagListCache: Ref<any[]>;
+    selectedTagList: Ref<any[]>;
+    selectedTagListCache: Ref<any[]>;
+    isEdit: Ref<boolean>;
+    isHover: Ref<boolean>;
+    focusItemIndex: Ref<number>;
+    popoverProps: {
+        isShow: boolean;
+        width: number;
+        modifiers: {
+            name: string;
+            options: {
+                offset: number[];
+            };
+        }[];
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "blur" | "change" | "update:modelValue" | "remove" | "removeAll")[], "select" | "blur" | "change" | "update:modelValue" | "remove" | "removeAll", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    placeholder: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    list: import("vue-types").VueTypeDef<{
+        [key: string]: any;
+    }[]> & {
+        default: () => {
+            [key: string]: any;
+        }[];
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    tooltipKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    saveKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    hasDeleteIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    clearable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    trigger: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    searchKey: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
+    };
+    useGroup: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    allowCreate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maxData: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    maxResult: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    contentMaxHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    contentWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    separator: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    allowNextFocus: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    allowAutoMatch: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showClearOnlyHover: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    leftSpace: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    createTagValidator: {
+        type: import("vue").PropType<(tag: any) => boolean>;
+        default: any;
+    };
+    filterCallback: {
+        type: import("vue").PropType<(value: string, searchKey: string | string[], list: any[]) => any[]>;
+        default: any;
+    };
+    tagTpl: {
+        type: import("vue").PropType<(node: any, highlightKeyword: Function, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>>;
+        default: any;
+    };
+    tpl: {
+        type: import("vue").PropType<(node: any, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>>;
+        default: any;
+    };
+    pasteFn: {
+        type: import("vue").PropType<(value: string) => any[]>;
+        default: any;
+    };
+}>> & {
+    onBlur?: (...args: any[]) => any;
+    onChange?: (...args: any[]) => any;
+    onSelect?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+    onRemove?: (...args: any[]) => any;
+    onRemoveAll?: (...args: any[]) => any;
+}, {
+    placeholder: string;
+    list: {
+        [key: string]: any;
+    }[];
+    separator: string;
+    disabled: boolean;
+    modelValue: string[];
+    trigger: string;
+    clearable: boolean;
+    showClearOnlyHover: boolean;
+    searchKey: string | string[];
+    displayKey: string;
+    tooltipKey: string;
+    saveKey: string;
+    hasDeleteIcon: boolean;
+    useGroup: boolean;
+    allowCreate: boolean;
+    maxData: number;
+    maxResult: number;
+    contentMaxHeight: number;
+    contentWidth: number;
+    allowNextFocus: boolean;
+    allowAutoMatch: boolean;
+    leftSpace: number;
+    createTagValidator: (tag: any) => boolean;
+    filterCallback: (value: string, searchKey: string | string[], list: any[]) => any[];
+    tagTpl: (node: any, highlightKeyword: Function, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    tpl: (node: any, h: Function, ctx: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    pasteFn: (value: string) => any[];
+}>;
+export default _default;