bkui-vue 0.0.1-beta.26 → 0.0.1-beta.29

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;

package/lib/tag-input/tag-input.less

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