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

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.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/helpers/toConsumableArray"),require("vue"),require("../directives"),require("../icon"),require("../loading"),require("../popover"),require("../shared"));else if("function"==typeof define&&define.amd)define(["@babel/runtime/helpers/typeof","@babel/runtime/helpers/slicedToArray","@babel/runtime/helpers/defineProperty","@babel/runtime/helpers/toConsumableArray","vue","../directives","../icon","../loading","../popover","../shared"],t);else{var r="object"==typeof exports?t(require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/helpers/toConsumableArray"),require("vue"),require("../directives"),require("../icon"),require("../loading"),require("../popover"),require("../shared")):t(e["@babel/runtime/helpers/typeof"],e["@babel/runtime/helpers/slicedToArray"],e["@babel/runtime/helpers/defineProperty"],e["@babel/runtime/helpers/toConsumableArray"],e.vue,e["../directives"],e["../icon"],e["../loading"],e["../popover"],e["../shared"]);for(var a in r)("object"==typeof exports?exports:e)[a]=r[a]}}(self,((e,t,r,a,n,o,l,i,s,u)=>(()=>{"use strict";var c={4061:e=>{e.exports=o},6870:e=>{e.exports=l},4870:e=>{e.exports=i},5537:e=>{e.exports=s},4212:e=>{e.exports=u},311:e=>{e.exports=r},1673:e=>{e.exports=t},642:e=>{e.exports=a},8541:t=>{t.exports=e},748:e=>{e.exports=n}},d={};function p(e){var t=d[e];if(void 0!==t)return t.exports;var r=d[e]={exports:{}};return c[e](r,r.exports,p),r.exports}p.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return p.d(t,{a:t}),t},p.d=(e,t)=>{for(var r in t)p.o(t,r)&&!p.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},p.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),p.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var f={};return(()=>{p.r(f),p.d(f,{default:()=>w});var e=p(8541),t=p.n(e),r=p(1673),a=p.n(r),n=p(311),o=p.n(n),l=p(642),i=p.n(l),s=p(748),u=p(4061),c=p(6870),d=p(4870),g=p.n(d),v=p(5537),h=p.n(v),y=12,m=function(e){for(var t=e.length,r=0,a=0;a<t;a++)0!=(65280&e.charCodeAt(a))&&(r+=1),r+=1;return r},b=p(4212);const T=(0,s.defineComponent)({name:"ListTagRender",props:{node:b.PropTypes.object,searchKey:b.PropTypes.oneOfType([b.PropTypes.string,b.PropTypes.arrayOf(b.PropTypes.string)]),displayKey:b.PropTypes.string,searchKeyword:b.PropTypes.string,tpl:{type:Function,default:null}},render:function(){var e=this,t=arguments[0],r=function(t){if(e.searchKeyword){var r=new RegExp("(".concat(e.searchKeyword,")"),"i");return t.replace(r,'<strong class="highlight-text">$1</strong>')}return t};if(this.tpl)return this.tpl(this.node,r,t,this);var a=this.node[this.displayKey];return(0,s.createVNode)("div",{class:"bk-selector-node"},[(0,s.createVNode)("span",{class:"text",innerHTML:r(a)},[a])])}}),L=(0,s.defineComponent)({name:"TagRender",props:{node:b.PropTypes.object,displayKey:b.PropTypes.string,tpl:{type:Function,default:null}},render:function(){var e=arguments[0];return this.tpl?this.tpl(this.node,e,this):(0,s.createVNode)("div",{class:"tag"},[(0,s.createVNode)("span",{class:"text"},[this.node[this.displayKey]])])}}),P=(0,s.defineComponent)({name:"BkTagInput",directives:{bkTooltips:u.bkTooltips},props:{modelValue:b.PropTypes.arrayOf(b.PropTypes.string).def([]),placeholder:b.PropTypes.string.def("请输入并按 Enter 结束"),list:b.PropTypes.arrayOf(b.PropTypes.object).def([]),disabled:b.PropTypes.bool.def(!1),tooltipKey:b.PropTypes.string.def(""),saveKey:b.PropTypes.string.def("id"),displayKey:b.PropTypes.string.def("name"),hasDeleteIcon:b.PropTypes.bool.def(!1),clearable:b.PropTypes.bool.def(!0),trigger:b.PropTypes.commonType(["focus","search"]).def("search"),searchKey:b.PropTypes.oneOfType([b.PropTypes.string,b.PropTypes.arrayOf(b.PropTypes.string)]).def("name"),useGroup:b.PropTypes.bool.def(!1),allowCreate:b.PropTypes.bool.def(!1),maxData:b.PropTypes.number.def(-1),maxResult:b.PropTypes.number.def(10),contentMaxHeight:b.PropTypes.number.def(300),contentWidth:b.PropTypes.number.def(190),separator:b.PropTypes.string.def(""),allowNextFocus:b.PropTypes.bool.def(!0),allowAutoMatch:b.PropTypes.bool.def(!1),showClearOnlyHover:b.PropTypes.bool.def(!1),leftSpace:b.PropTypes.number.def(0),createTagValidator:{type:Function,default:null},filterCallback:{type:Function,default:null},tagTpl:{type:Function,default:null},tpl:{type:Function,default:null},pasteFn:{type:Function,default:null}},emits:["update:modelValue","change","select","blur","remove","removeAll"],setup:function(e,r){var n=r.emit,l=(0,s.reactive)({isEdit:!1,isHover:!1,focusItemIndex:e.allowCreate?-1:0}),u=(0,s.reactive)({isShow:!1,width:190,modifiers:[{name:"offset",options:{offset:[0,4]}}]}),c=function(e){var t=(0,s.reactive)({curPage:1,totalSize:0,totalPage:0,pageSize:e,isPageLoading:!1,curPageList:[],renderListPaged:[]});return{pageState:t,initPage:function(){var e,r,a=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];t.curPage=1,t.totalSize=a.length,t.totalPage=Math.ceil(t.totalSize/t.pageSize)||1;var n=[];if(t.pageSize>0)for(var o=0;o<t.totalSize;o+=t.pageSize)n.push(a.slice(o,o+t.pageSize));(e=t.renderListPaged).splice.apply(e,[0,t.renderListPaged.length].concat(n)),(r=t.curPageList).splice.apply(r,[0,t.curPageList.length].concat(i()(t.renderListPaged[t.curPage-1]||[])))},pageChange:function(e){var r;t.curPage=e,(r=t.curPageList).splice.apply(r,[t.curPageList.length,0].concat(i()(t.renderListPaged[t.curPage-1]||[]))),t.isPageLoading=!1}}}((0,s.toRefs)(e).maxResult),d=c.pageState,p=c.initPage,f=c.pageChange,g=function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200,a=e;return(0,s.customRef)((function(e,n){return{get:function(){return e(),a},set:function(e){clearTimeout(t),t=setTimeout((function(){a=e,n()}),r)}}}))}("",150),v=(0,s.ref)(null),h=(0,s.ref)(null),b=(0,s.ref)(null),T=(0,s.ref)(null),L=(0,s.ref)(null),P=(0,s.ref)(null),w=(0,s.ref)(null),x=(0,s.computed)((function(){return!e.disabled&&e.hasDeleteIcon})),I=(0,s.computed)((function(){return 1===e.maxData})),C=(0,s.computed)((function(){return 0===A.selectedTagList.length&&""===g.value&&!l.isEdit})),S=(0,s.computed)((function(){return e.clearable&&!e.disabled&&0!==A.selectedTagList.length&&(!e.showClearOnlyHover||l.isHover)})),K=(0,s.computed)((function(){return{"bk-tag-input-trigger":!0,active:l.isEdit,disabled:e.disabled}}));(0,s.watch)([function(){return i()(e.modelValue)},function(){return i()(e.list)}],(function(){D()})),(0,s.watch)(g,(function(t){var r=0!==d.curPageList.length;""!==t&&r||""===t&&"focus"===e.trigger?u.isShow=!0:"focus"===e.trigger&&r||(u.isShow=!1)})),(0,s.watch)((function(){return u.isShow}),(function(e){k(),e&&L.value&&((0,s.nextTick)((function(){L.value.scrollTop=0})),L.value.removeEventListener("scroll",V),L.value.addEventListener("scroll",V))}));var k=function(){var e,t,r=I.value?0:null===(e=T.value)||void 0===e?void 0:e.offsetLeft;u.modifiers=[{name:"offset",options:{offset:[r,4]}}],null===(t=P.value)||void 0===t||t.update()},V=function(){if(!d.isPageLoading&&0!==L.value.scrollTop){var e=L.value;if(e.scrollTop+e.offsetHeight>=e.scrollHeight){var t=d.curPage+1;t<=d.totalPage&&(d.isPageLoading=!0,setTimeout((function(){f(t)}),500))}}},N=function(){var e;return Array.from((null===(e=b.value)||void 0===e?void 0:e.childNodes)||[]).filter((function(e){return e.nodeType!==Node.TEXT_NODE}))},R=function(t){if(!e.disabled){if(null==t?void 0:t.target){var r=t.target.className;(r.indexOf("bk-tag-input-trigger")>-1||r.indexOf("tag-list")>-1)&&b.value.appendChild(T.value)}clearTimeout(w.value),I.value&&O.value.length&&(A.tagListCache=i()(O.value),A.selectedTagListCache=i()(A.selectedTagList),g.value=A.selectedTagListCache[0][e.saveKey],U(A.selectedTagList[0],0),H()),l.isEdit=!0,(0,s.nextTick)((function(){var t;null===(t=v.value)||void 0===t||t.focus(),"focus"===e.trigger&&0!==A.localList.length&&(j(),u.isShow?k():u.isShow=!0)}))}},A=(0,s.reactive)({localList:[],tagListCache:[],selectedTagList:[],selectedTagListCache:[]}),O=(0,s.computed)((function(){return A.selectedTagList.map((function(t){return t[e.saveKey]}))})),E=function(e){var t=(0,s.toRefs)(e),r=t.useGroup,a=t.saveKey,n=t.displayKey,o=t.list,l=(0,s.reactive)([]);return(0,s.watch)([r,a,n,o],(function(){var e=o.value;r.value&&(e=o.value.reduce((function(e,t){var r=[];return t.children&&(r=t.children.map((function(e){return Object.assign({group:{groupId:t[a.value],groupName:t[n.value]}},e)}))),e.concat(r)}),[])),l.splice.apply(l,[0,l.length].concat(i()(e)))}),{immediate:!0,deep:!0}),l}(e),q=(0,s.computed)((function(){if(e.useGroup){var t={};return d.curPageList.forEach((function(e,r){e.__index__=r,t[e.group.groupId]||(t[e.group.groupId]={id:e.group.groupId,name:e.group.groupName,children:[]}),t[e.group.groupId].children.push(e)})),Object.keys(t).map((function(e){return t[e]}))}return d.curPageList})),D=function(){var t=e.saveKey,r=e.modelValue,a=e.displayKey,n=e.allowCreate,l=e.trigger;A.selectedTagList=[],A.localList=i()(E),r.length&&(r.forEach((function(e){var r=A.localList.find((function(r){return e===r[t]}));if(void 0!==r)A.selectedTagList.push(r);else if(n&&!O.value.includes(e)){var l;A.selectedTagList.push((l={},o()(l,t,e),o()(l,a,e),l))}})),I.value||(A.localList=A.localList.filter((function(e){return!r.includes(e[t])})))),"focus"===l&&j()},j=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",r=e.searchKey,a=e.filterCallback,n=t.toLowerCase(),o=[];if("function"==typeof a)o=a(n,r,A.localList)||[];else if(Array.isArray(r)){var l=r.map((function(e){return A.localList.filter((function(t){return-1!==t[e].toLowerCase().indexOf(n)}))}));o=Array.from(new Set(l.flat()))}else o=A.localList.filter((function(e){return-1!==e[r].toLowerCase().indexOf(n)}));p(o)};(0,s.onMounted)((function(){D()}));var F=function(){g.value=""},z=function(){if(I.value)return 0;var e=N().findIndex((function(e){return"tagInputItem"===e.id}));return e>=0?e:0},_=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t&&e){var a=t;r&&(a=t.nextElementSibling||null),t.parentNode.insertBefore(e,a)}},H=function(t){var r=e.maxData,a=e.trigger,n=e.allowCreate;if(-1===r||r>O.value.length){var o=((null==t?void 0:t.target)?t.target:g).value,i=m(o);i?(j(o),v.value.style.width="".concat(i*y,"px")):"focus"===a&&j()}else M(),g.value="",u.isShow=!1;l.isEdit=!0,l.focusItemIndex=n?-1:0},M=function(){w.value=setTimeout((function(){var t=g.value;if(F(),l.isEdit=!1,I.value){var r=a()(A.tagListCache,1)[0];t&&t===r&&A.selectedTagListCache.length?W(A.selectedTagListCache[0],"select"):G("remove")}else if(e.allowAutoMatch&&t){var o=d.curPageList.find((function(r){return Array.isArray(e.searchKey)?e.searchKey.map((function(e){return r[e]})).includes(t):r[e.searchKey]===t}));o?B(o,"select"):e.allowCreate&&B(t,"custom")}u.isShow=!1,n("blur",t,O.value)}),50)},B=function(e,t,r){null==r||r.stopPropagation(),e&&!e.disabled&&(I.value&&(A.tagListCache=[],A.selectedTagListCache=[],A.selectedTagList=[]),W(e,t),G("select"),F(),u.isShow=!1)},G=function(e){n("change",O.value),n(e),n("update:modelValue",O.value)},Z=function(){var e=L.value.clientHeight,t=L.value.getBoundingClientRect().y;(0,s.nextTick)((function(){var r=L.value.querySelector(".bk-selector-actived");if(r){var a=r.clientHeight,n=r.getBoundingClientRect().y;n<t&&(L.value.scrollTop=L.value.scrollTop-(t-n));var o=n+a-t;o>e&&(L.value.scrollTop=L.value.scrollTop+o-e)}}))},W=function(r,a){if(!(A.selectedTagList.length>=e.maxData&&-1!==e.maxData)){var n,l=e.separator,u=e.saveKey,c=e.displayKey,d=e.createTagValidator,p=z(),f=1,g=!1,h=function(e){return"function"!=typeof d||d(e)},m=function(e){return A.localList.find((function(t){return t[u]===e}))};if("custom"===a)if(l){var b,L=r.split(l),P=(L=L.filter((function(e){return(null==e?void 0:e.trim())&&!O.value.includes(e)&&h(e)}))).map((function(e){var t;return m(e)||(t={},o()(t,u,e),o()(t,c,e),t)}));L.length&&((b=A.selectedTagList).splice.apply(b,[p,0].concat(i()(P))),f=P.length,g=!0)}else{var w="object"===t()(r);if(void 0!==(n=(n=w?r[u]:r.trim()).replace(/\s+/g,""))&&!O.value.includes(n)&&h(n)){var x,C=m(n)||(w?r:(x={},o()(x,u,n),o()(x,c,n),x));A.selectedTagList.splice(p,0,C),g=!0}}else r&&(void 0===(n=r[u])||O.value.includes(n)||(A.selectedTagList.splice(p,0,r),g=!0));g&&(0,s.nextTick)((function(){for(var t=1;t<=f;t++){var r=N()[p+t];_(r,T.value)}v.value.style.width="".concat(y,"px"),I.value||(e.allowNextFocus&&R(),A.localList=A.localList.filter((function(e){return!O.value.includes(e[u])})))}))}},U=function(t,r){A.selectedTagList.splice(r,1);var a=E.some((function(r){return r===t[e.saveKey]}));(e.allowCreate&&a||!e.allowCreate)&&!I.value&&A.localList.push(t)};return Object.assign(Object.assign(Object.assign(Object.assign({popoverProps:u},(0,s.toRefs)(l)),(0,s.toRefs)(A)),(0,s.toRefs)(d)),{isShowPlaceholder:C,isShowClear:S,curInputValue:g,formatList:E,renderList:q,showTagClose:x,tagInputRef:v,bkTagSelectorRef:h,tagListRef:b,tagInputItemRef:T,selectorListRef:L,popoverRef:P,triggerClass:K,focusInputTrigger:R,activeClass:function(t,r){var a={"bk-selector-actived":!1,"bk-selector-selected":O.value.includes(t[e.saveKey])};return e.useGroup?a["bk-selector-actived"]=t.__index__===l.focusItemIndex:a["bk-selector-actived"]=r===l.focusItemIndex,a},handleInput:H,handleFocus:function(){var t;u.width=I.value?null===(t=h.value)||void 0===t?void 0:t.clientWidth:e.contentWidth},handleBlur:M,handleTagSelected:B,handleTagRemove:function(e,t,r){null==r||r.stopPropagation(),U(e,t),F(),G("remove"),v.value.style.width="".concat(y,"px")},handleClear:function(t){t.stopPropagation();var r=A.selectedTagList;A.selectedTagList=[];var a,n=E.filter((function(t){return r.some((function(r){return r[e.saveKey]===t[e.saveKey]}))}));(!e.allowCreate||0===n.length)&&e.allowCreate||I.value||(a=A.localList).push.apply(a,i()(n)),G("removeAll")},tagFocus:function(t){e.disabled||(_(T.value,t.currentTarget,!0),v.value.style.width="".concat(y,"px"),u.isShow&&k())},handleKeydown:function(t){if(!d.isPageLoading){var r=t.target.value,a=m(r),n=z(),o=N();switch(t.code){case"ArrowUp":if(t.preventDefault(),!u.isShow)return;l.focusItemIndex=l.focusItemIndex-1,l.focusItemIndex=l.focusItemIndex<0?-1:l.focusItemIndex,-1===l.focusItemIndex&&(l.focusItemIndex=d.curPageList.length-1),Z();break;case"ArrowDown":if(t.preventDefault(),!u.isShow)return;l.focusItemIndex=l.focusItemIndex+1,l.focusItemIndex=l.focusItemIndex>d.curPageList.length-1?d.curPageList.length:l.focusItemIndex,l.focusItemIndex===d.curPageList.length&&(l.focusItemIndex=0),Z();break;case"ArrowLeft":if(l.isEdit=!0,!a){if(n<1)return;_(T.value,o[n-1]),R()}break;case"ArrowRight":if(l.isEdit=!0,!a){if(n===o.length-1)return;_(o[n+1],T.value),R()}break;case"Enter":case"NumpadEnter":!e.allowCreate&&u.isShow||e.allowCreate&&l.focusItemIndex>=0&&u.isShow?B(d.curPageList[l.focusItemIndex],"select",t):e.allowCreate&&B(g.value,"custom",t),t.preventDefault();break;case"Backspace":0===n||g.value||function(t,r){var a=N();_(T.value,a[t-1]),A.selectedTagList.splice(t-1,1),R();var n=E.some((function(t){return t===r[e.saveKey]}));(e.allowCreate&&n||!e.allowCreate)&&!I.value&&A.localList.push(r),v.value="".concat(y,"px"),G("remove")}(n,A.selectedTagList[n-1])}}},handlePaste:function(t){if(t.preventDefault(),I.value)return!1;var r=e.maxData,a=e.saveKey,n=e.pasteFn,l=t.clipboardData.getData("text"),s=n?n(l):function(t){var r=[];return t.split(";").forEach((function(t){if(t.match(/^[a-zA-Z][a-zA-Z_]+/g)){var a,n=t.match(/^[a-zA-Z][a-zA-Z_]+/g).join("");r.push((a={},o()(a,e.saveKey,n),o()(a,e.displayKey,n),a))}})),r}(l),u=s.map((function(e){return e[a]}));if(u.length){var c=N(),d=z(),p=A.localList.map((function(e){return e[a]}));if(u=u.filter((function(e){return(null==e?void 0:e.trim())&&!O.value.includes(e)&&p.includes(e)})),-1!==r){var f=A.selectedTagList.length;if(f<r){var g=r-f;u.length>g&&(u=i()(u.slice(0,g)))}else u=[]}var h,m=A.localList.filter((function(e){return u.includes(e[a])}));u.length&&((h=A.selectedTagList).splice.apply(h,[d,0].concat(i()(m))),_(T.value,c[d]),v.value.style.width="".concat(y,"px"),A.localList=A.localList.filter((function(e){return!u.includes(e[a])})),G("select"),R())}}})},render:function(){var e=this;return(0,s.createVNode)("div",{class:"bk-tag-input",ref:"bkTagSelectorRef",onClick:this.focusInputTrigger,onMouseenter:function(){return e.isHover=!0},onMouseleave:function(){return e.isHover=!1}},[(0,s.createVNode)(h(),{ref:"popoverRef",theme:"light",trigger:"manual",placement:"bottom-start",arrow:!1,width:this.popoverProps.width,isShow:this.popoverProps.isShow,modifiers:this.popoverProps.modifiers},{default:function(){return(0,s.createVNode)("div",{class:e.triggerClass},[(0,s.createVNode)("ul",{class:"tag-list",ref:"tagListRef",style:{marginLeft:"".concat(e.leftSpace,"px")}},[e.selectedTagList.map((function(t,r){var a={boundary:"window",theme:"light",distance:12,content:t[e.tooltipKey],disabled:!e.tooltipKey};return(0,s.withDirectives)((0,s.createVNode)("li",{class:"tag-item",onClick:e.tagFocus},[(0,s.createVNode)(L,{node:t,tpl:e.tagTpl,displayKey:e.displayKey},null),e.showTagClose?(0,s.createVNode)(c.Error,{class:"remove-tag",onClick:e.handleTagRemove.bind(e,t,r)},null):null]),[[(0,s.resolveDirective)("bk-tooltips"),a]])})),(0,s.withDirectives)((0,s.createVNode)("li",{ref:"tagInputItemRef",id:"tagInputItem",class:"tag-input-item",role:"input"},[(0,s.createVNode)("input",(0,s.mergeProps)({"on-input":function(t){t.target.composing||(e.curInputValue=t.target.value)},type:"text",class:"tag-input",ref:"tagInputRef",onInput:e.handleInput,onFocus:e.handleFocus,onBlur:e.handleBlur,onKeydown:e.handleKeydown,onPaste:e.handlePaste,"domProps-value":e.curInputValue},{directives:[{name:"model",value:e.curInputValue,modifiers:{}}]}),null)]),[[s.vShow,e.isEdit]])]),(0,s.withDirectives)((0,s.createVNode)("p",{class:"placeholder"},[e.placeholder]),[[s.vShow,e.isShowPlaceholder]]),e.isShowClear?(0,s.createVNode)(c.Close,{class:"clear-icon",onClick:e.handleClear},null):null])},content:function(){return(0,s.createVNode)("div",{class:"bk-selector-list"},[(0,s.createVNode)("ul",{ref:"selectorListRef",style:{"max-height":"".concat(e.contentMaxHeight,"px")},class:"outside-ul"},[e.useGroup?e.renderList.map((function(t){return(0,s.createVNode)("li",{class:"bk-selector-group-item"},[(0,s.createVNode)("span",{class:"group-name"},[t.name,(0,s.createTextVNode)(" ("),t.children.length,(0,s.createTextVNode)(")")]),(0,s.createVNode)("ul",{class:"bk-selector-group-list-item"},[t.children.map((function(t,r){return(0,s.createVNode)("li",{class:["bk-selector-list-item",{disabled:t.disabled},e.activeClass(t,r)],onClick:e.handleTagSelected.bind(e,t,"select")},[(0,s.createVNode)(T,{node:t,displayKey:e.displayKey,tpl:e.tpl,searchKey:e.searchKey,searchKeyword:e.curInputValue},null)])}))])])})):e.renderList.map((function(t,r){return(0,s.createVNode)("li",{class:["bk-selector-list-item",{disabled:t.disabled},e.activeClass(t,r)],onClick:e.handleTagSelected.bind(e,t,"select")},[(0,s.createVNode)(T,{node:t,displayKey:e.displayKey,tpl:e.tpl,searchKey:e.searchKey,searchKeyword:e.curInputValue},null)])})),e.isPageLoading?(0,s.createVNode)("li",{class:"bk-selector-list-item loading"},[(0,s.createVNode)(g(),{theme:"primary",size:d.BkLoadingSize.Small},null)]):null])])}})])}});P.install=function(e){e.component(P.name,P)};const w=P})(),f})()));

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;
+    }
+  }
+}